Much stricter code rewriting

Harvest-Dev · Dec 8, 2024 · 0d51e55 · 0d51e55
1 parent e8409a5
commit 0d51e55
Show file tree

Hide file tree

Showing 10 changed files with 324 additions and 293 deletions.
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "@angular/platform-browser": "^19.0.0",
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
-    "@ikilote/json2html": "0.4.2",
+    "@ikilote/json2html": "0.5.0",
     "bowser": "2.11.0",
     "core-js": "^2.5.4",
     "graphemer": "^1.4.0",
@@ -74,4 +74,4 @@
     "tslib": "^2.3.0",
     "typescript": "~5.6.3"
   }
-}
+}
diff --git a/projects/ng-select2-component/src/lib/select2-interfaces.ts b/projects/ng-select2-component/src/lib/select2-interfaces.ts
@@ -1,7 +1,10 @@
 import { TemplateRef } from '@angular/core';
 
+
+
 import { Select2 } from './select2.component';
 
+
 export interface Select2Group {
     /** label of group */
     label: string;
@@ -36,19 +39,19 @@ export interface Select2Option {
     hide?: boolean;
 }
 
-export type Select2Value = string | number | boolean | object;
+export type Select2Value = string | number | boolean | object | null | undefined;
 
-export type Select2UpdateValue = Select2Value | Select2Value[];
+export type Select2UpdateValue = Select2Value | Select2Value[] | undefined | null;
 
 export type Select2Data = (Select2Group | Select2Option)[];
 
 export interface Select2UpdateEvent<U extends Select2UpdateValue = Select2Value> {
     /** component */
     readonly component: Select2;
     /** current selected value */
-    readonly value: U;
+    readonly value: U | null;
     /** selected option */
-    readonly options: Select2Option[];
+    readonly options: Select2Option[] | null;
 }
 
 export interface Select2AutoCreateEvent<U extends Select2UpdateValue = Select2Value> {
@@ -57,14 +60,14 @@ export interface Select2AutoCreateEvent<U extends Select2UpdateValue = Select2Va
     /** current selected value */
     readonly value: U;
     /** selected option */
-    readonly options: Select2Option[];
+    readonly options: Select2Option[] | null;
 }
 
 export interface Select2SearchEvent<U extends Select2UpdateValue = Select2Value> {
     /** component */
     readonly component: Select2;
     /** current selected value */
-    readonly value: U;
+    readonly value: U | null;
     /** search text */
     readonly search: string;
     /** current data source */
@@ -95,4 +98,4 @@ export interface Select2ScrollEvent {
 
 export type Select2SelectionOverride = string | ((params: { size: number; options: Select2Option[] | null }) => string);
 
-export type Select2Template = TemplateRef<any> | { [key: string]: TemplateRef<any> };
+export type Select2Template = TemplateRef<any> | { [key: string]: TemplateRef<any> } | undefined;
diff --git a/projects/ng-select2-component/src/lib/select2-utils.ts b/projects/ng-select2-component/src/lib/select2-utils.ts
@@ -1,8 +1,9 @@
 import { defaultMinCountForSearch, protectRegexp, unicodePatterns } from './select2-const';
 import { Select2Data, Select2Group, Select2Option, Select2UpdateValue, Select2Value } from './select2-interfaces';
 
+
 export class Select2Utils {
-    static getOptionByValue(data: Select2Data, value: Select2Value | null | undefined) {
+    static getOptionByValue(data: Select2Data, value: Select2Value ) {
         if (Array.isArray(data)) {
             for (const groupOrOption of data) {
                 const options = (groupOrOption as Select2Group).options;
@@ -17,7 +18,7 @@ export class Select2Utils {
                 }
             }
         }
-        return undefined;
+        return null;
     }
 
     static getOptionsByValue(
@@ -36,7 +37,7 @@ export class Select2Utils {
             }
             return result;
         }
-        return Select2Utils.getOptionByValue(data, value as Select2Value | null | undefined);
+        return Select2Utils.getOptionByValue(data, value as Select2Value);
     }
 
     static getFirstAvailableOption(data: Select2Data) {
@@ -60,7 +61,7 @@ export class Select2Utils {
         return null;
     }
 
-    static valueIsNotInFilteredData(filteredData: Select2Data, value: Select2Value | null | undefined) {
+    static valueIsNotInFilteredData(filteredData: Select2Data, value: Select2Value) {
         if (Select2Utils.isNullOrUndefined(value)) {
             return true;
         }
@@ -79,7 +80,10 @@ export class Select2Utils {
         return true;
     }
 
-    static getPreviousOption(filteredData: Select2Data, hoveringValue: Select2Value | null | undefined) {
+    static getPreviousOption(
+        filteredData: Select2Data ,
+        hoveringValue: Select2Value ,
+    ): Select2Option | null {
         let findIt = Select2Utils.isNullOrUndefined(hoveringValue);
         for (let i = filteredData.length - 1; i >= 0; i--) {
             const groupOrOption = filteredData[i];
@@ -107,12 +111,23 @@ export class Select2Utils {
         return null;
     }
 
-    static getNextOption(filteredData: Select2Data, hoveringValue: Select2Value | null | undefined) {
+    static getNextOption(filteredData: Select2Data | null, hoveringValue: Select2Value) {
         let findIt = Select2Utils.isNullOrUndefined(hoveringValue);
-        for (const groupOrOption of filteredData) {
-            const options = (groupOrOption as Select2Group).options;
-            if (options) {
-                for (const option of options) {
+        if (filteredData) {
+            for (const groupOrOption of filteredData) {
+                const options = (groupOrOption as Select2Group).options;
+                if (options) {
+                    for (const option of options) {
+                        if (findIt) {
+                            if (!option.disabled && !option.hide) {
+                                return option;
+                            }
+                        } else if (!findIt) {
+                            findIt = option.value === hoveringValue;
+                        }
+                    }
+                } else {
+                    const option = groupOrOption as Select2Option;
                     if (findIt) {
                         if (!option.disabled && !option.hide) {
                             return option;
@@ -121,15 +136,6 @@ export class Select2Utils {
                         findIt = option.value === hoveringValue;
                     }
                 }
-            } else {
-                const option = groupOrOption as Select2Option;
-                if (findIt) {
-                    if (!option.disabled && !option.hide) {
-                        return option;
-                    }
-                } else if (!findIt) {
-                    findIt = option.value === hoveringValue;
-                }
             }
         }
         return null;
@@ -144,7 +150,7 @@ export class Select2Utils {
             for (const groupOrOption of data) {
                 const options = (groupOrOption as Select2Group).options;
                 if (options) {
-                    const group = {
+                    const group: Select2Group | Select2Option = {
                         ...groupOrOption,
                         options: [],
                     };

diff --git a/projects/ng-select2-component/src/lib/select2.component.html b/projects/ng-select2-component/src/lib/select2.component.html
@@ -35,8 +35,8 @@
         <span class="select2-selection__override" [innerHTML]="_selectionOverrideLabel()"></span>
 
         @if (resettable() && resetSelectedValue() !== value() && select2Option && !(disabled() || readonly())) {
-            <span (click)="reset($event)" class="select2-selection__reset" role="presentation">×</span>
-          }
+          <span (click)="reset($event)" class="select2-selection__reset" role="presentation">×</span>
+        }
         @if (
           !multiple() && resettable() && resetSelectedValue() !== value() && select2Option && !(disabled || readonly())
         ) {
@@ -56,7 +56,7 @@
               ></ng-container>
             }
           }
-          <span [class.select2-selection__placeholder__option]="option" class="select2-selection__placeholder">{{
+          <span [class.select2-selection__placeholder__option]="selectedOption" class="select2-selection__placeholder">{{
             placeholder()
           }}</span>
         </span>
@@ -69,12 +69,12 @@
         <ul class="select2-selection__rendered">
           @if (!autoCreate()) {
             <span
-              [class.select2-selection__placeholder__option]="select2Options?.length > 0"
+              [class.select2-selection__placeholder__option]="select2Options && select2Options.length > 0"
               class="select2-selection__placeholder"
               >{{ placeholder() }}</span
             >
           }
-          @for (op of option || []; track trackBy($index, op)) {
+          @for (op of selectedOption || []; track op) {
             <li
               class="select2-selection__choice"
               [title]="op.label"
@@ -193,28 +193,28 @@
           (scrolledUp)="onScroll('up')"
           (keydown)="keyDown($event)"
         >
-          @if (showSelectAll() && multiple) {
+          @if (showSelectAll() && multiple()) {
             <li class="select2-results__option select2-selectall" (click)="selectAll()" tabindex="1" aria-selected>
               <div class="select2-label-content">
                 {{ selectAllTest() ? removeAllText() : selectAllText() }}
               </div>
             </li>
           }
 
-          @for (groupOrOption of filteredData(); track trackBy(i, groupOrOption); let i = $index) {
-            @if (groupOrOption.options !== undefined) {
+          @for (groupOrOption of filteredData(); track groupOrOption; let i = $index) {
+            @let group = _toGroup(groupOrOption);
+            @if (group.options !== undefined) {
               <li class="select2-results__option" role="group">
-                @if (!hasTemplate(groupOrOption, 'group')) {
+                @if (!hasTemplate(group, 'group')) {
                   <strong
-                    [attr.class]="'select2-results__group' + (groupOrOption.classes ? ' ' + groupOrOption.classes : '')"
-                    [innerHTML]="groupOrOption.label"
+                    [attr.class]="'select2-results__group' + (group.classes ? ' ' + group.classes : '')"
+                    [innerHTML]="group.label"
                   ></strong>
                 } @else {
-                  <ng-container *ngTemplateOutlet="getTemplate(groupOrOption, 'group'); context: groupOrOption">
-                  </ng-container>
+                  <ng-container *ngTemplateOutlet="getTemplate(group, 'group'); context: group"> </ng-container>
                 }
                 <ul class="select2-results__options select2-results__options--nested">
-                  @for (option of groupOrOption.options; track trackBy(j, option); let j = $index) {
+                  @for (option of group.options; track option; let j = $index) {
                     <li
                       #result
                       [id]="option.id || _id + '-option-' + i + '-' + j"
@@ -236,27 +236,26 @@
                 </ul>
               </li>
             } @else {
+              @let option = _toOption(groupOrOption);
               <li
                 #result
-                [id]="groupOrOption.id || _id + '-option-' + i"
-                [class]="getOptionStyle(groupOrOption)"
+                [id]="option.id || _id + '-option-' + i"
+                [class]="getOptionStyle(option)"
                 role="treeitem"
-                [attr.aria-selected]="isSelected(groupOrOption)"
-                [attr.aria-disabled]="isDisabled(groupOrOption)"
-                (mouseenter)="mouseenter(groupOrOption)"
-                (click)="click(groupOrOption)"
+                [attr.aria-selected]="isSelected(option)"
+                [attr.aria-disabled]="isDisabled(option)"
+                (mouseenter)="mouseenter(option)"
+                (click)="click(option)"
               >
-                @if (!hasTemplate(groupOrOption, 'option')) {
-                  <div [innerHTML]="groupOrOption.label" class="select2-label-content"></div>
+                @if (!hasTemplate(option, 'option')) {
+                  <div [innerHTML]="option.label" class="select2-label-content"></div>
                 } @else {
-                  <ng-container *ngTemplateOutlet="getTemplate(groupOrOption, 'option'); context: groupOrOption">
-                  </ng-container>
+                  <ng-container *ngTemplateOutlet="getTemplate(option, 'option'); context: option"> </ng-container>
                 }
               </li>
 
               <ng-template #li>
-                <ng-container *ngTemplateOutlet="getTemplate(groupOrOption, 'option'); context: groupOrOption">
-                </ng-container>
+                <ng-container *ngTemplateOutlet="getTemplate(option, 'option'); context: option"> </ng-container>
               </ng-template>
             }
           }