Update demo

- change interface - add home page - add language - use # rooting
Harvest-Dev · Dec 18, 2024 · c1c6de3 · c1c6de3
1 parent 1083d64
commit c1c6de3
Show file tree

Hide file tree

Showing 26 changed files with 413 additions and 118 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
+  "editor.formatOnSaveMode": "modificationsIfAvailable",
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "cSpell.words": []

diff --git a/package.json b/package.json
@@ -28,6 +28,8 @@
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
     "@ikilote/json2html": "0.5.0",
+    "@jsverse/transloco": "^7.5.0",
+    "bootstrap": "^5.3.3",
     "bowser": "2.11.0",
     "core-js": "^2.5.4",
     "graphemer": "^1.4.0",
@@ -74,4 +76,4 @@
     "tslib": "^2.3.0",
     "typescript": "~5.6.3"
   }
-}
+}
diff --git a/projects/ng-select2-component/src/lib/select2-hint.component.ts b/projects/ng-select2-component/src/lib/select2-hint.component.ts
@@ -1,4 +1,4 @@
 import { Directive } from '@angular/core';
 
-@Directive({ selector: 'select2-hint' })
+@Directive({ selector: 'select2-hint, ng-select2-hint' })
 export class Select2Hint {}
diff --git a/projects/ng-select2-component/src/lib/select2-label.component.ts b/projects/ng-select2-component/src/lib/select2-label.component.ts
@@ -1,4 +1,4 @@
 import { Directive } from '@angular/core';
 
-@Directive({ selector: 'select2-label' })
+@Directive({ selector: 'select2-label, ng-select2-label' })
 export class Select2Label {}
diff --git a/projects/ng-select2-component/src/lib/select2.component.html b/projects/ng-select2-component/src/lib/select2.component.html
@@ -1,5 +1,5 @@
 <label class="select2-label" (click)="toggleOpenAndClose()" [id]="idLabel()">
-  <ng-content select="select2-label"></ng-content>
+  <ng-content select="select2-label, ng-select2-label"></ng-content>
   @if (required()) {
     <span class="select2-required" aria-hidden="true"></span>
   }
@@ -136,7 +136,7 @@
   }
 
   <div class="select2-subscript-wrapper">
-    <ng-content select="select2-hint"></ng-content>
+    <ng-content select="select2-hint, ng-select2-hint"></ng-content>
   </div>
 </div>
 

diff --git a/projects/ng-select2-component/src/lib/select2.component.scss b/projects/ng-select2-component/src/lib/select2.component.scss
@@ -1,3 +1,4 @@
+
 .select2-label {
     color: var(--select2-label-text-color, #000);
 }
@@ -261,12 +262,12 @@
     }
 
     .select2-selection__reset {
-        color: var(--select2-reset-color, #999);
-        background: var(--select2-reset-background, transparent);
+        align-self: center;
         border: var(--select2-reset-border, none);
         border-radius: var(--select2-reset-border-radius, 4px);
+        background: var(--select2-reset-background, transparent);
         height: fit-content;
-        align-self: center;
+        color: var(--select2-reset-color, #999);
     }
 
     &.select2-container--disabled,
@@ -735,9 +736,9 @@
                     --select2-material-underline-disabled,
                     linear-gradient(to right, rgba(0, 0, 0, 0.26) 0, rgba(0, 0, 0, 0.26) 33%, transparent 0)
                 );
+                background-position: 0 bottom;
                 background-size: 4px 1px;
                 background-repeat: repeat-x;
-                background-position: 0 bottom;
             }
         }
         &.select2-container--readonly .select2-selection--single,
@@ -747,9 +748,9 @@
                     --select2-material-underline-readonly,
                     linear-gradient(to right, rgba(0, 0, 0, 0.26) 0, rgba(0, 0, 0, 0.26) 33%, transparent 0)
                 );
+                background-position: 0 bottom;
                 background-size: 4px 1px;
                 background-repeat: repeat-x;
-                background-position: 0 bottom;
             }
         }
     }

diff --git a/projects/ng-select2-component/src/lib/select2.component.ts b/projects/ng-select2-component/src/lib/select2.component.ts
@@ -64,7 +64,7 @@ const ON_OPEN_KEYS: (string | KeyInfo)[] = ['Home', 'End', 'PageUp', 'PageDown']
 const CLOSE_KEYS: (string | KeyInfo)[] = ['Escape', 'Tab', { key: 'ArrowUp', altKey: true }];
 
 @Component({
-    selector: 'select2',
+    selector: 'select2, ng-select2',
     templateUrl: './select2.component.html',
     styleUrls: ['./select2.component.scss'],
     imports: [CdkOverlayOrigin, NgTemplateOutlet, CdkConnectedOverlay, InfiniteScrollDirective],

diff --git a/src/app/app-examples.component.html b/src/app/app-examples.component.html
@@ -1,4 +1,5 @@
-<h2>Examples</h2>
+
+<h2>{{ 'Examples' | transloco }}</h2>
 
 <label for="disabled">overlay : </label>
 <input id="disabled" type="checkbox" [(ngModel)]="overlay" />

diff --git a/src/app/app-examples.component.ts b/src/app/app-examples.component.ts
@@ -1,27 +1,58 @@
 import { JsonPipe } from '@angular/common';
 import { Component } from '@angular/core';
-import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
-
-
-
-import { Select2AutoCreateEvent, Select2Data, Select2ScrollEvent, Select2SearchEvent, Select2SelectionOverride, Select2UpdateEvent, Select2UpdateValue } from 'projects/ng-select2-component/src/public_api';
-
-
-
-import { data1, data13, data17, data18, data19, data2, data22, data23, data24, data26, data28, data3, data31en, data31fr, data31ja, data35, data35b, data5, data6, data8 } from './app.data';
-
-
+import {
+    FormsModule,
+    ReactiveFormsModule,
+    UntypedFormBuilder,
+    UntypedFormControl,
+    UntypedFormGroup,
+    Validators,
+} from '@angular/forms';
+
+import { TranslocoModule } from '@jsverse/transloco';
+
+import {
+    Select2AutoCreateEvent,
+    Select2Data,
+    Select2ScrollEvent,
+    Select2SearchEvent,
+    Select2SelectionOverride,
+    Select2UpdateEvent,
+    Select2UpdateValue,
+} from 'projects/ng-select2-component/src/public_api';
+
+import {
+    data1,
+    data2,
+    data3,
+    data5,
+    data6,
+    data8,
+    data13,
+    data17,
+    data18,
+    data19,
+    data22,
+    data23,
+    data24,
+    data26,
+    data28,
+    data31en,
+    data31fr,
+    data31ja,
+    data35,
+    data35b,
+} from './app.data';
 
 import { Select2Hint } from '../../projects/ng-select2-component/src/lib/select2-hint.component';
 import { Select2Label } from '../../projects/ng-select2-component/src/lib/select2-label.component';
 import { Select2 } from '../../projects/ng-select2-component/src/lib/select2.component';
 
-
 @Component({
     selector: 'app-root',
     templateUrl: './app-examples.component.html',
     styleUrls: ['./app-examples.component.scss'],
-    imports: [FormsModule, ReactiveFormsModule, Select2, Select2Hint, Select2Label, JsonPipe],
+    imports: [FormsModule, ReactiveFormsModule, Select2, Select2Hint, Select2Label, JsonPipe, TranslocoModule],
 })
 export class AppExamplesComponent {
     data1 = data1;
@@ -89,7 +120,7 @@ export class AppExamplesComponent {
     value18 = '';
     value19 = '';
     value20 = '';
-    value21 :string | null | undefined = 'foo6';
+    value21: string | null | undefined = 'foo6';
     value22 = '';
     value23 = '';
     value24 = '';
@@ -114,10 +145,8 @@ export class AppExamplesComponent {
     value37 = ['AK', 'NY', 'NC', 'RI'];
 
     selectionOverride: Select2SelectionOverride = params => {
-        return `Selection (${params.size}${(
-            params.options?.length || 0) > 0
-            ? ': ' + params.options!.map(e => e.label).join(', ')
-            : ''
+        return `Selection (${params.size}${
+            (params.options?.length || 0) > 0 ? ': ' + params.options!.map(e => e.label).join(', ') : ''
         }) `;
     };
 
@@ -259,4 +288,4 @@ export class AppExamplesComponent {
                 break;
         }
     }
-}
+}