iss-ctrl 0.0.2-beta → 0.0.2-beta-2

package/fesm2022/iss-ctrl.mjs

@@ -1,23 +1,25 @@
 import * as i0 from '@angular/core';
-import { inject, input, signal, output, Component, CUSTOM_ELEMENTS_SCHEMA, Pipe, Injectable, Optional, Inject, effect, Directive, HostListener, ChangeDetectionStrategy, computed } from '@angular/core';
+import { input, signal, output, Component, CUSTOM_ELEMENTS_SCHEMA, Pipe, effect, Injectable, Optional, Inject, inject, Directive, HostListener, ChangeDetectionStrategy, computed } from '@angular/core';
 import * as i1$2 from '@angular/forms';
-import { ControlContainer, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, NG_VALIDATORS, FormGroup, FormsModule, FormArray } from '@angular/forms';
+import { FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, NG_VALIDATORS, FormGroup, FormsModule, FormArray } from '@angular/forms';
 import * as i1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i1$1 from '@angular/material/form-field';
+import { MatFormField, MatFormFieldModule, MatSuffix, MatHint, MatPrefix } from '@angular/material/form-field';
+import * as i6 from '@angular/material/chips';
+import { MatChipGrid, MatChipRow, MatChipInput, MatChipRemove, MatChipsModule } from '@angular/material/chips';
+import * as i2 from '@angular/material/input';
+import { MatInput, MatInputModule } from '@angular/material/input';
+import { toSignal } from '@angular/core/rxjs-interop';
 import * as i3 from '@angular/material/core';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';
-import * as i1$1 from '@angular/material/form-field';
-import { MatFormFieldModule, MatFormField, MatSuffix, MatHint, MatPrefix } from '@angular/material/form-field';
 import * as i2$1 from '@angular/material/datepicker';
 import { MatDatepickerModule, MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material/datepicker';
-import * as i2 from '@angular/material/input';
-import { MatInputModule, MatInput } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
 import { getYear, getMonth, getDate, getDay, getDaysInMonth, parseISO, parse, format, addYears, addMonths, addDays, formatISO, isDate, isValid, isAfter, isBefore } from 'date-fns';
-import { DatePipe, NgClass, NgOptimizedImage, NgTemplateOutlet } from '@angular/common';
+import { DatePipe, NgClass, NgOptimizedImage, NgTemplateOutlet, NgStyle } from '@angular/common';
 import { enGB } from 'date-fns/locale';
 import { Subscription } from 'rxjs';
-import { toSignal } from '@angular/core/rxjs-interop';
 import * as i1$5 from '@angular/material/button-toggle';
 import { MatButtonToggleGroup, MatButtonToggle, MatButtonToggleModule } from '@angular/material/button-toggle';
 import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
@@ -26,16 +28,15 @@ import { PhoneNumberUtil, PhoneNumberFormat } from 'google-libphonenumber';
 import { MatSelect, MatOption } from '@angular/material/select';
 import * as i1$3 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
+import { CdkVirtualForOf, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling';
 import * as i2$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i6 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
 import * as i1$4 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 class BaseCtrl {
     constructor() {
-        this.ctrlContainer = inject(ControlContainer);
+        /*ctrlContainer: ControlContainer = inject(ControlContainer);*/
         this.formControlName = input("");
         this.min = input(null);
         this.max = input(null);
@@ -52,9 +53,9 @@ class BaseCtrl {
         this.onTouch = () => { };
         this.onPropagateValue = (_) => { };
     }
-    get hostCtrl() {
-        return this.ctrlContainer.control?.get(this.formControlName());
-    }
+    /*get hostCtrl(): AbstractControl | null | undefined {
+      return this.ctrlContainer.control?.get(this.formControlName());
+    }*/
     registerOnChange(fn) {
         this.onPropagateValue = fn;
     }
@@ -123,16 +124,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 }]
         }] });
 
-class AutocompleteComponent extends BaseCtrl {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: AutocompleteComponent, isStandalone: true, selector: "iss-ctrl-autocomplete", providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: AutocompleteComponent, multi: true }
+class AutocompleteControl extends BaseCtrl {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AutocompleteControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: AutocompleteControl, isStandalone: true, selector: "iss-ctrl-autocomplete", providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: AutocompleteControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: "<p>autocomplete works!</p>\r\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AutocompleteControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-autocomplete", standalone: true, imports: [], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: AutocompleteComponent, multi: true }
+                        { provide: NG_VALUE_ACCESSOR, useExisting: AutocompleteControl, multi: true }
                     ], template: "<p>autocomplete works!</p>\r\n" }]
         }] });
 
@@ -152,7 +153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 }]
         }] });
 
-class CheckboxComponent extends BaseCtrl {
+class CheckboxControl extends BaseCtrl {
     constructor() {
         super(...arguments);
         this.options = input.required();
@@ -206,29 +207,85 @@ class CheckboxComponent extends BaseCtrl {
         this.selectedOptions().clear();
         this.ctrl.setValue(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: CheckboxComponent, isStandalone: true, selector: "iss-ctrl-checkbox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true },
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CheckboxControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: CheckboxControl, isStandalone: true, selector: "iss-ctrl-checkbox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxControl, multi: true },
         ], usesInheritance: true, ngImport: i0, template: "<ul class=\"list-unstyled\">\r\n  @for (option of options(); track option.value; ) {\r\n    <li class=\"mb-2\">\r\n      <mat-checkbox\r\n        [checked]=\"option | selectStatus: selectedOptions()\"\r\n        (change)=\"onCheckboxChange($event.checked, option.value)\"\r\n      >\r\n        {{ option.label }}\r\n      </mat-checkbox>\r\n    </li>\r\n  }\r\n</ul>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: SelectStatusPipe, name: "selectStatus" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CheckboxControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-checkbox", standalone: true, imports: [ReactiveFormsModule, MatCheckboxModule, SelectStatusPipe], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxControl, multi: true },
                     ], template: "<ul class=\"list-unstyled\">\r\n  @for (option of options(); track option.value; ) {\r\n    <li class=\"mb-2\">\r\n      <mat-checkbox\r\n        [checked]=\"option | selectStatus: selectedOptions()\"\r\n        (change)=\"onCheckboxChange($event.checked, option.value)\"\r\n      >\r\n        {{ option.label }}\r\n      </mat-checkbox>\r\n    </li>\r\n  }\r\n</ul>\r\n" }]
         }] });
 
-class ChipsComponent extends BaseCtrl {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ChipsComponent, isStandalone: true, selector: "iss-ctrl-chips", providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: ChipsComponent, multi: true }
-        ], usesInheritance: true, ngImport: i0, template: "<p>chips works!</p>\r\n", styles: [""] }); }
+class ChipsControl extends BaseCtrl {
+    constructor() {
+        super(...arguments);
+        this.keywords = signal([]);
+        this.#ctrlChanges = toSignal(this.ctrl.valueChanges);
+        this.#effect = effect(() => {
+            if (this.#ctrlChanges()) {
+                this.emitValue(this.#stringifyValues());
+            }
+        });
+    }
+    #ctrlChanges;
+    #effect;
+    writeValue(value) {
+        if (typeof value === "string") {
+            this.keywords.set(this.#parseValues(value));
+        }
+        if (value === undefined || value === null) {
+            this.keywords.set([]);
+        }
+    }
+    remove(keyword) {
+        this.keywords.update((keywords) => {
+            const index = keywords.indexOf(keyword);
+            if (index < 0) {
+                return keywords;
+            }
+            keywords.splice(index, 1);
+            return [...keywords];
+        });
+        this.emitValue(this.#stringifyValues());
+    }
+    add(event) {
+        const value = (event.value || "").trim();
+        if (value) {
+            this.keywords.update((keywords) => [...keywords, value]);
+        }
+        event.chipInput.clear();
+        this.emitValue(this.#stringifyValues());
+    }
+    ngOnDestroy() {
+        this.#effect.destroy();
+    }
+    #stringifyValues() {
+        return this.keywords().map((s) => s.trim()).join();
+    }
+    #parseValues(values) {
+        return values.split(",").map((c) => c.trim());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ChipsControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ChipsControl, isStandalone: true, selector: "iss-ctrl-chips", providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: ChipsControl, multi: true }
+        ], usesInheritance: true, ngImport: i0, template: "<mat-form-field>\r\n  <input\r\n    matInput\r\n    [placeholder]=\"placeholder()\"\r\n    [matChipInputFor]=\"chipGrid\"\r\n    (matChipInputTokenEnd)=\"add($event)\"\r\n  />\r\n</mat-form-field>\r\n<mat-chip-grid #chipGrid>\r\n  @for (keyword of keywords(); track keyword) {\r\n    <mat-chip-row (removed)=\"remove(keyword)\">\r\n      {{ keyword }}\r\n      <button matChipRemove>\r\n        <ds-icon icon=\"trash\" class=\"fc-red\"></ds-icon>\r\n      </button>\r\n    </mat-chip-row>\r\n  }\r\n</mat-chip-grid>\r\n", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ChipsControl, decorators: [{
             type: Component,
-            args: [{ selector: "iss-ctrl-chips", standalone: true, imports: [], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: ChipsComponent, multi: true }
-                    ], template: "<p>chips works!</p>\r\n" }]
+            args: [{ selector: "iss-ctrl-chips", standalone: true, imports: [
+                        MatFormField,
+                        MatChipGrid,
+                        MatChipRow,
+                        ReactiveFormsModule,
+                        MatChipInput,
+                        MatInput,
+                        MatChipRemove
+                    ], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: ChipsControl, multi: true }
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<mat-form-field>\r\n  <input\r\n    matInput\r\n    [placeholder]=\"placeholder()\"\r\n    [matChipInputFor]=\"chipGrid\"\r\n    (matChipInputTokenEnd)=\"add($event)\"\r\n  />\r\n</mat-form-field>\r\n<mat-chip-grid #chipGrid>\r\n  @for (keyword of keywords(); track keyword) {\r\n    <mat-chip-row (removed)=\"remove(keyword)\">\r\n      {{ keyword }}\r\n      <button matChipRemove>\r\n        <ds-icon icon=\"trash\" class=\"fc-red\"></ds-icon>\r\n      </button>\r\n    </mat-chip-row>\r\n  }\r\n</mat-chip-grid>\r\n" }]
         }] });
 
 const WEEK_STARTS_ON = 0;
@@ -410,7 +467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                     args: [MAT_DATE_LOCALE]
                 }] }] });
 
-class DatePickerComponent extends BaseCtrl {
+class DatePickerControl extends BaseCtrl {
     constructor() {
         super(...arguments);
         this.disabledDays = input([]);
@@ -427,29 +484,29 @@ class DatePickerComponent extends BaseCtrl {
         const selectedDateString = this.#datePipe.transform($event.value, "yyyy-MM-ddTHH:mm:ss") + "Z";
         this.emitValue(selectedDateString);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.0", type: DatePickerComponent, isStandalone: true, selector: "iss-ctrl-date-picker", inputs: { disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DatePickerControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.0", type: DatePickerControl, isStandalone: true, selector: "iss-ctrl-date-picker", inputs: { disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             DatePipe,
             { provide: DateAdapter, useClass: ISSDateAdapter },
             { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT_ADAPTER },
             { provide: MAT_DATE_LOCALE, useValue: enGB },
-            { provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true },
-            { provide: NG_VALIDATORS, useExisting: DatePickerComponent, multi: true },
+            { provide: NG_VALUE_ACCESSOR, useExisting: DatePickerControl, multi: true },
+            { provide: NG_VALIDATORS, useExisting: DatePickerControl, multi: true },
         ], usesInheritance: true, ngImport: i0, template: "<mat-form-field>\r\n  <input\r\n    class=\"cursor-pointer\"\r\n    matInput\r\n    readonly\r\n    [matDatepicker]=\"picker\"\r\n    (click)=\"picker.open(); markAsTouched()\"\r\n    [formControl]=\"ctrl\"\r\n    [min]=\"minDate()\"\r\n    [max]=\"maxDate()\"\r\n    [placeholder]=\"'dd/mm/yyyy'\"\r\n    [matDatepickerFilter]=\"calendarDaysFilter\"\r\n    (dateChange)=\"emit($event)\"\r\n  />\r\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-datepicker #picker></mat-datepicker>\r\n</mat-form-field>\r\n", styles: ["::ng-deep tr:has(>.mat-calendar-body-label[colspan=\"7\"]){opacity:0!important;display:none}::ng-deep .mat-datepicker-content .mat-calendar{height:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DatePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DatePickerControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-date-picker", standalone: true, imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatIconModule, ReactiveFormsModule], providers: [
                         DatePipe,
                         { provide: DateAdapter, useClass: ISSDateAdapter },
                         { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT_ADAPTER },
                         { provide: MAT_DATE_LOCALE, useValue: enGB },
-                        { provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true },
-                        { provide: NG_VALIDATORS, useExisting: DatePickerComponent, multi: true },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: DatePickerControl, multi: true },
+                        { provide: NG_VALIDATORS, useExisting: DatePickerControl, multi: true },
                     ], template: "<mat-form-field>\r\n  <input\r\n    class=\"cursor-pointer\"\r\n    matInput\r\n    readonly\r\n    [matDatepicker]=\"picker\"\r\n    (click)=\"picker.open(); markAsTouched()\"\r\n    [formControl]=\"ctrl\"\r\n    [min]=\"minDate()\"\r\n    [max]=\"maxDate()\"\r\n    [placeholder]=\"'dd/mm/yyyy'\"\r\n    [matDatepickerFilter]=\"calendarDaysFilter\"\r\n    (dateChange)=\"emit($event)\"\r\n  />\r\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-datepicker #picker></mat-datepicker>\r\n</mat-form-field>\r\n", styles: ["::ng-deep tr:has(>.mat-calendar-body-label[colspan=\"7\"]){opacity:0!important;display:none}::ng-deep .mat-datepicker-content .mat-calendar{height:unset!important}\n"] }]
         }] });
 
-class DateRangePickerComponent extends BaseCtrl {
+class DateRangePickerControl extends BaseCtrl {
     constructor() {
         super(...arguments);
         this.disabledDays = input([]);
@@ -514,16 +571,16 @@ class DateRangePickerComponent extends BaseCtrl {
             end: this.#getFormatedEndDate(end)
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DateRangePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.0", type: DateRangePickerComponent, isStandalone: true, selector: "iss-ctrl-date-range-picker", inputs: { disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDateRangeObjectChange: "onDateRangeObjectChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DateRangePickerControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.0", type: DateRangePickerControl, isStandalone: true, selector: "iss-ctrl-date-range-picker", inputs: { disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDateRangeObjectChange: "onDateRangeObjectChange" }, providers: [
             DatePipe,
             { provide: DateAdapter, useClass: ISSDateAdapter },
             { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT_ADAPTER },
             { provide: MAT_DATE_LOCALE, useValue: enGB },
-            { provide: NG_VALUE_ACCESSOR, useExisting: DateRangePickerComponent, multi: true },
+            { provide: NG_VALUE_ACCESSOR, useExisting: DateRangePickerControl, multi: true },
         ], usesInheritance: true, ngImport: i0, template: "<mat-form-field>\r\n  <mat-date-range-input\r\n    [formGroup]=\"range\"\r\n    [rangePicker]=\"picker\"\r\n    [min]=\"minDate()\"\r\n    [max]=\"maxDate()\"\r\n    [dateFilter]=\"calendarDaysFilter\"\r\n  >\r\n    <input\r\n      matStartDate\r\n      formControlName=\"start\"\r\n      placeholder=\"dd/mm/yyyy\"\r\n      (click)=\"picker.open(); markAsTouched()\"\r\n    />\r\n    <input\r\n      matEndDate\r\n      formControlName=\"end\"\r\n      placeholder=\"dd/mm/yyyy\"\r\n      (click)=\"picker.open(); markAsTouched()\"\r\n    />\r\n  </mat-date-range-input>\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker></mat-date-range-picker>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DateRangePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DateRangePickerControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-date-range-picker", standalone: true, imports: [
                         MatFormFieldModule, MatDatepickerModule, FormsModule, ReactiveFormsModule,
@@ -532,11 +589,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                         { provide: DateAdapter, useClass: ISSDateAdapter },
                         { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT_ADAPTER },
                         { provide: MAT_DATE_LOCALE, useValue: enGB },
-                        { provide: NG_VALUE_ACCESSOR, useExisting: DateRangePickerComponent, multi: true },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: DateRangePickerControl, multi: true },
                     ], template: "<mat-form-field>\r\n  <mat-date-range-input\r\n    [formGroup]=\"range\"\r\n    [rangePicker]=\"picker\"\r\n    [min]=\"minDate()\"\r\n    [max]=\"maxDate()\"\r\n    [dateFilter]=\"calendarDaysFilter\"\r\n  >\r\n    <input\r\n      matStartDate\r\n      formControlName=\"start\"\r\n      placeholder=\"dd/mm/yyyy\"\r\n      (click)=\"picker.open(); markAsTouched()\"\r\n    />\r\n    <input\r\n      matEndDate\r\n      formControlName=\"end\"\r\n      placeholder=\"dd/mm/yyyy\"\r\n      (click)=\"picker.open(); markAsTouched()\"\r\n    />\r\n  </mat-date-range-input>\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker></mat-date-range-picker>\r\n</mat-form-field>\r\n" }]
         }] });
 
-class TimePickerComponent extends BaseCtrl {
+class TimePickerControl extends BaseCtrl {
     constructor() {
         super(...arguments);
         this.isOpen = signal(false);
@@ -671,13 +728,13 @@ class TimePickerComponent extends BaseCtrl {
         timeArr.pop();
         return timeArr.join(":");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: TimePickerComponent, isStandalone: true, selector: "iss-ctrl-time-picker", providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: TimePickerComponent, multi: true },
-            { provide: NG_VALIDATORS, useExisting: TimePickerComponent, multi: true }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TimePickerControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: TimePickerControl, isStandalone: true, selector: "iss-ctrl-time-picker", providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: TimePickerControl, multi: true },
+            { provide: NG_VALIDATORS, useExisting: TimePickerControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"cursor-pointer\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"togglePickerMenu()\">\r\n  <!--<span *ngIf=\"matPrefix\" matPrefix class=\"sfi {{ iconPrefixName }} font-18\"></span>-->\r\n  <input\r\n    class=\"cursor-pointer\"\r\n    matInput\r\n    placeholder=\"--:-- --\"\r\n    [value]=\"displayValue()\"\r\n    readonly=\"readonly\"\r\n  />\r\n  <ds-icon icon=\"clock\" class=\"fs-24 fc-black\" matSuffix></ds-icon>\r\n</mat-form-field>\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  (backdropClick)=\"close()\"\r\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n>\r\n  <div class=\"time-picker-wrapper\" [formGroup]=\"timePicker\">\r\n    <div class=\"time-picker-title\">\r\n      <span class=\"time-label\">HH</span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"time-label\">MM</span>\r\n      <span class=\"mx-1\"></span>\r\n    </div>\r\n    <div class=\"time-picker-body\">\r\n      <mat-button-toggle-group formControlName=\"hour\" hideSingleSelectionIndicator class=\"flex-nowrap\">\r\n        @for (hour of hours; track hour) {\r\n          <mat-button-toggle [value]=\"hour\">\r\n            <span class=\"font-14 font-weight-normal\">{{ hour >= 10 ? hour : '0' + hour }}</span>\r\n          </mat-button-toggle>\r\n        }\r\n      </mat-button-toggle-group>\r\n      <span class=\"mx-1\"></span>\r\n      <mat-button-toggle-group formControlName=\"minute\" hideSingleSelectionIndicator class=\"flex-nowrap\">\r\n        @for (minute of minutes; track minute) {\r\n          <mat-button-toggle [value]=\"minute\">\r\n            <span class=\"font-14 font-weight-normal\">{{ minute >= 10 ? minute : '0' + minute }}</span>\r\n          </mat-button-toggle>\r\n        }\r\n      </mat-button-toggle-group>\r\n      <span class=\"mx-1\"></span>\r\n\r\n      <mat-button-toggle-group formControlName=\"meridiem\" hideSingleSelectionIndicator>\r\n        <mat-button-toggle value=\"AM\">AM</mat-button-toggle>\r\n        <mat-button-toggle value=\"PM\">PM</mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["input[readonly=true]{color:var(--black)!important}.time-picker-wrapper{background-color:var(--white);border:4px solid var(--light-gray);padding:10px;margin-top:-20px}.time-picker-wrapper .time-picker-title{display:flex}.time-picker-wrapper .time-picker-title .time-label{display:flex;align-items:center;justify-content:center;width:50px;min-width:50px;padding:0;font-size:.95rem;color:var(--dark-gray)}[dir=ltr] .time-picker-wrapper .time-picker-title .time-label{margin-right:4px}[dir=rtl] .time-picker-wrapper .time-picker-title .time-label{margin-left:4px}.time-picker-wrapper .time-picker-body{display:flex}.time-picker-wrapper .time-picker-body .mat-button-toggle-group{display:flex;flex-direction:column;max-height:200px;overflow-y:auto;border:none}.time-picker-wrapper .time-picker-body .mat-button-toggle-group .mat-button-toggle{border:0;width:50px;min-width:50px}.time-picker-wrapper .time-picker-body .mat-button-toggle-group .mat-button-toggle.mat-button-toggle-checked{color:var(--white)!important}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TimePickerControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-time-picker", standalone: true, imports: [
                         MatFormField,
@@ -689,12 +746,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                         CdkConnectedOverlay,
                         ReactiveFormsModule
                     ], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: TimePickerComponent, multi: true },
-                        { provide: NG_VALIDATORS, useExisting: TimePickerComponent, multi: true }
+                        { provide: NG_VALUE_ACCESSOR, useExisting: TimePickerControl, multi: true },
+                        { provide: NG_VALIDATORS, useExisting: TimePickerControl, multi: true }
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<mat-form-field class=\"cursor-pointer\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"togglePickerMenu()\">\r\n  <!--<span *ngIf=\"matPrefix\" matPrefix class=\"sfi {{ iconPrefixName }} font-18\"></span>-->\r\n  <input\r\n    class=\"cursor-pointer\"\r\n    matInput\r\n    placeholder=\"--:-- --\"\r\n    [value]=\"displayValue()\"\r\n    readonly=\"readonly\"\r\n  />\r\n  <ds-icon icon=\"clock\" class=\"fs-24 fc-black\" matSuffix></ds-icon>\r\n</mat-form-field>\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  (backdropClick)=\"close()\"\r\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n>\r\n  <div class=\"time-picker-wrapper\" [formGroup]=\"timePicker\">\r\n    <div class=\"time-picker-title\">\r\n      <span class=\"time-label\">HH</span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"time-label\">MM</span>\r\n      <span class=\"mx-1\"></span>\r\n    </div>\r\n    <div class=\"time-picker-body\">\r\n      <mat-button-toggle-group formControlName=\"hour\" hideSingleSelectionIndicator class=\"flex-nowrap\">\r\n        @for (hour of hours; track hour) {\r\n          <mat-button-toggle [value]=\"hour\">\r\n            <span class=\"font-14 font-weight-normal\">{{ hour >= 10 ? hour : '0' + hour }}</span>\r\n          </mat-button-toggle>\r\n        }\r\n      </mat-button-toggle-group>\r\n      <span class=\"mx-1\"></span>\r\n      <mat-button-toggle-group formControlName=\"minute\" hideSingleSelectionIndicator class=\"flex-nowrap\">\r\n        @for (minute of minutes; track minute) {\r\n          <mat-button-toggle [value]=\"minute\">\r\n            <span class=\"font-14 font-weight-normal\">{{ minute >= 10 ? minute : '0' + minute }}</span>\r\n          </mat-button-toggle>\r\n        }\r\n      </mat-button-toggle-group>\r\n      <span class=\"mx-1\"></span>\r\n\r\n      <mat-button-toggle-group formControlName=\"meridiem\" hideSingleSelectionIndicator>\r\n        <mat-button-toggle value=\"AM\">AM</mat-button-toggle>\r\n        <mat-button-toggle value=\"PM\">PM</mat-button-toggle>\r\n      </mat-button-toggle-group>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["input[readonly=true]{color:var(--black)!important}.time-picker-wrapper{background-color:var(--white);border:4px solid var(--light-gray);padding:10px;margin-top:-20px}.time-picker-wrapper .time-picker-title{display:flex}.time-picker-wrapper .time-picker-title .time-label{display:flex;align-items:center;justify-content:center;width:50px;min-width:50px;padding:0;font-size:.95rem;color:var(--dark-gray)}[dir=ltr] .time-picker-wrapper .time-picker-title .time-label{margin-right:4px}[dir=rtl] .time-picker-wrapper .time-picker-title .time-label{margin-left:4px}.time-picker-wrapper .time-picker-body{display:flex}.time-picker-wrapper .time-picker-body .mat-button-toggle-group{display:flex;flex-direction:column;max-height:200px;overflow-y:auto;border:none}.time-picker-wrapper .time-picker-body .mat-button-toggle-group .mat-button-toggle{border:0;width:50px;min-width:50px}.time-picker-wrapper .time-picker-body .mat-button-toggle-group .mat-button-toggle.mat-button-toggle-checked{color:var(--white)!important}\n"] }]
         }] });
 
-class DatetimePickerComponent extends BaseCtrl {
+class DatetimePickerControl extends BaseCtrl {
     constructor() {
         super(...arguments);
         this.disabledDays = input([]);
@@ -727,16 +784,16 @@ class DatetimePickerComponent extends BaseCtrl {
     #formatDate(date) {
         return this.#datePipe.transform(date, "yyyy-MM-ddTHH:mm:ss") + "Z";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DatetimePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.0", type: DatetimePickerComponent, isStandalone: true, selector: "iss-ctrl-datetime-picker", inputs: { disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DatetimePickerControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.0", type: DatetimePickerControl, isStandalone: true, selector: "iss-ctrl-datetime-picker", inputs: { disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             DatePipe,
             { provide: DateAdapter, useClass: ISSDateAdapter },
             { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT_ADAPTER },
             { provide: MAT_DATE_LOCALE, useValue: enGB },
-            { provide: NG_VALUE_ACCESSOR, useExisting: DatetimePickerComponent, multi: true }
-        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"datetimePicker\" class=\"d-flex gap-3\">\r\n  <iss-ctrl-date-picker class=\"flex-grow-1\" formControlName=\"date\" [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" [disabledDays]=\"disabledDays()\"/>\r\n  <iss-ctrl-time-picker class=\"flex-grow-1\" formControlName=\"time\" [min]=\"min()\" [max]=\"max()\"/>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TimePickerComponent, selector: "iss-ctrl-time-picker" }, { kind: "component", type: DatePickerComponent, selector: "iss-ctrl-date-picker", inputs: ["disabledDays", "minDate", "maxDate"] }] }); }
+            { provide: NG_VALUE_ACCESSOR, useExisting: DatetimePickerControl, multi: true }
+        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"datetimePicker\" class=\"d-flex gap-3\">\r\n  <iss-ctrl-date-picker class=\"flex-grow-1\" formControlName=\"date\" [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" [disabledDays]=\"disabledDays()\"/>\r\n  <iss-ctrl-time-picker class=\"flex-grow-1\" formControlName=\"time\" [min]=\"min()\" [max]=\"max()\"/>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TimePickerControl, selector: "iss-ctrl-time-picker" }, { kind: "component", type: DatePickerControl, selector: "iss-ctrl-date-picker", inputs: ["disabledDays", "minDate", "maxDate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DatetimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DatetimePickerControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-datetime-picker", standalone: true, imports: [
                         FormsModule,
@@ -747,27 +804,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                         MatInput,
                         MatSuffix,
                         ReactiveFormsModule,
-                        TimePickerComponent,
-                        DatePickerComponent
+                        TimePickerControl,
+                        DatePickerControl
                     ], providers: [
                         DatePipe,
                         { provide: DateAdapter, useClass: ISSDateAdapter },
                         { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT_ADAPTER },
                         { provide: MAT_DATE_LOCALE, useValue: enGB },
-                        { provide: NG_VALUE_ACCESSOR, useExisting: DatetimePickerComponent, multi: true }
+                        { provide: NG_VALUE_ACCESSOR, useExisting: DatetimePickerControl, multi: true }
                     ], template: "<form [formGroup]=\"datetimePicker\" class=\"d-flex gap-3\">\r\n  <iss-ctrl-date-picker class=\"flex-grow-1\" formControlName=\"date\" [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" [disabledDays]=\"disabledDays()\"/>\r\n  <iss-ctrl-time-picker class=\"flex-grow-1\" formControlName=\"time\" [min]=\"min()\" [max]=\"max()\"/>\r\n</form>\r\n" }]
         }] });
 
-class DatetimeRangePickerComponent extends BaseCtrl {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DatetimeRangePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: DatetimeRangePickerComponent, isStandalone: true, selector: "iss-ctrl-datetime-range-picker", providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: DatetimeRangePickerComponent, multi: true }
+class DatetimeRangePickerControl extends BaseCtrl {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DatetimeRangePickerControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: DatetimeRangePickerControl, isStandalone: true, selector: "iss-ctrl-datetime-range-picker", providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: DatetimeRangePickerControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: "<p>datetime-range-picker works!</p>\r\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DatetimeRangePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DatetimeRangePickerControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-datetime-range-picker", standalone: true, imports: [], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: DatetimeRangePickerComponent, multi: true }
+                        { provide: NG_VALUE_ACCESSOR, useExisting: DatetimeRangePickerControl, multi: true }
                     ], template: "<p>datetime-range-picker works!</p>\r\n" }]
         }] });
 
@@ -819,7 +876,7 @@ class HintsComponent {
       <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
         @for (hint of hints(); track $index) {
           @if (hint) {
-            <mat-hint class="d-flex align-items-center gap-1 fs-12">
+            <mat-hint [align]="hint.align" class="d-flex align-items-center gap-1 fs-12">
               @if (hint.valid === undefined) {
                 <ds-icon icon="info" class="fs-24 fc-dark-gray"></ds-icon>
                 <span class="fc-dark-gray text-break">{{ hint.label }}</span>
@@ -849,7 +906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
       <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
         @for (hint of hints(); track $index) {
           @if (hint) {
-            <mat-hint class="d-flex align-items-center gap-1 fs-12">
+            <mat-hint [align]="hint.align" class="d-flex align-items-center gap-1 fs-12">
               @if (hint.valid === undefined) {
                 <ds-icon icon="info" class="fs-24 fc-dark-gray"></ds-icon>
                 <span class="fc-dark-gray text-break">{{ hint.label }}</span>
@@ -871,7 +928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 }]
         }] });
 
-class FilePickerComponent extends BaseCtrl {
+class FilePickerControl extends BaseCtrl {
     constructor() {
         super(...arguments);
         this.accept = input();
@@ -967,12 +1024,12 @@ class FilePickerComponent extends BaseCtrl {
         window.URL.revokeObjectURL(fileUrl);
         a.remove();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FilePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: FilePickerComponent, isStandalone: true, selector: "iss-ctrl-file-picker", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, showDownloadButton: { classPropertyName: "showDownloadButton", publicName: "showDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, showDeleteButton: { classPropertyName: "showDeleteButton", publicName: "showDeleteButton", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: FilePickerComponent, multi: true }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FilePickerControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: FilePickerControl, isStandalone: true, selector: "iss-ctrl-file-picker", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, showDownloadButton: { classPropertyName: "showDownloadButton", publicName: "showDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, showDeleteButton: { classPropertyName: "showDeleteButton", publicName: "showDeleteButton", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: FilePickerControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: "<ds-file-picker (click)=\"inputFile.click(); markAsTouched()\" droppable (onDrop)=\"captureFile($event)\">\r\n  <input\r\n    id=\"file\"\r\n    type=\"file\"\r\n    #inputFile\r\n    [style.display]=\"'none'\"\r\n    [formControl]=\"ctrl\"\r\n    [multiple]=\"multiple()\"\r\n    [accept]=\"accept()\"\r\n    (change)=\"captureFile($any($event.target).files)\"\r\n  />\r\n</ds-file-picker>\r\n\r\n<iss-ctrl-hints [hints]=\"hints()\" [touched]=\"touched()\"/>\r\n@if (attachments().length) {\r\n  <section class=\"files-list\">\r\n    @for (file of attachments(); track $index) {\r\n      <div class=\"file-item-container\">\r\n        @if (file) {\r\n          <ds-attachments\r\n            [matTooltip]=\"file.name\"\r\n            [file]=\"file\"\r\n            [showDownload]=\"showDownloadButton()\"\r\n            [showActions]=\"showDeleteButton()\"\r\n            (downloadEvent)=\"onDownload($event)\"\r\n            (deleteEvent)=\"onDelete($index)\"\r\n          >\r\n          </ds-attachments>\r\n        }\r\n      </div>\r\n    }\r\n  </section>\r\n}\r\n", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.75rem}.insideTableStyle{width:272px}.files-list{--file-item-width: 270px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: DroppableDirective, selector: "[droppable]", outputs: ["onDrop"] }, { kind: "component", type: HintsComponent, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FilePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FilePickerControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-file-picker", standalone: true, imports: [
                         ReactiveFormsModule,
@@ -980,30 +1037,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                         DroppableDirective,
                         HintsComponent,
                     ], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: FilePickerComponent, multi: true }
+                        { provide: NG_VALUE_ACCESSOR, useExisting: FilePickerControl, multi: true }
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ds-file-picker (click)=\"inputFile.click(); markAsTouched()\" droppable (onDrop)=\"captureFile($event)\">\r\n  <input\r\n    id=\"file\"\r\n    type=\"file\"\r\n    #inputFile\r\n    [style.display]=\"'none'\"\r\n    [formControl]=\"ctrl\"\r\n    [multiple]=\"multiple()\"\r\n    [accept]=\"accept()\"\r\n    (change)=\"captureFile($any($event.target).files)\"\r\n  />\r\n</ds-file-picker>\r\n\r\n<iss-ctrl-hints [hints]=\"hints()\" [touched]=\"touched()\"/>\r\n@if (attachments().length) {\r\n  <section class=\"files-list\">\r\n    @for (file of attachments(); track $index) {\r\n      <div class=\"file-item-container\">\r\n        @if (file) {\r\n          <ds-attachments\r\n            [matTooltip]=\"file.name\"\r\n            [file]=\"file\"\r\n            [showDownload]=\"showDownloadButton()\"\r\n            [showActions]=\"showDeleteButton()\"\r\n            (downloadEvent)=\"onDownload($event)\"\r\n            (deleteEvent)=\"onDelete($index)\"\r\n          >\r\n          </ds-attachments>\r\n        }\r\n      </div>\r\n    }\r\n  </section>\r\n}\r\n", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.75rem}.insideTableStyle{width:272px}.files-list{--file-item-width: 270px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"] }]
         }] });
 
-class InputComponent extends BaseCtrl {
+class InputControl extends BaseCtrl {
     constructor() {
         super(...arguments);
         this.type = input("text");
+        this.prefixIcon = input("");
+        this.prefixText = input("");
+        this.suffixIcon = input("");
+        this.suffixText = input("");
+        this.onPrefixClick = output();
+        this.onSuffixClick = output();
+        this.#ctrlChanges = toSignal(this.ctrl.valueChanges);
+        this.#effect = effect(() => {
+            if (this.#ctrlChanges()) {
+                this.emitValue(this.#ctrlChanges());
+            }
+        });
+    }
+    #ctrlChanges;
+    #effect;
+    emitSuffixClick() {
+        this.onSuffixClick.emit(this.ctrl.getRawValue());
+    }
+    emitPrefixClick() {
+        this.onPrefixClick.emit(this.ctrl.getRawValue());
+    }
+    ngOnDestroy() {
+        this.#effect.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.0", type: InputComponent, isStandalone: true, selector: "iss-ctrl-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: InputComponent, multi: true }
-        ], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\">\r\n  <input\r\n    (blur)=\"markAsTouched()\"\r\n    (input)=\"emitOnChangeEvent()\"\r\n    [formControl]=\"ctrl\"\r\n    [maxlength]=\"max()\"\r\n    [minlength]=\"min()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [type]=\"type()\"\r\n    matInput\r\n  />\r\n  <iss-ctrl-hints [hints]=\"hints()\"/>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HintsComponent, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: InputControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: InputControl, isStandalone: true, selector: "iss-ctrl-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixText: { classPropertyName: "suffixText", publicName: "suffixText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onPrefixClick: "onPrefixClick", onSuffixClick: "onSuffixClick" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: InputControl, multi: true },
+            { provide: NG_VALIDATORS, useExisting: InputControl, multi: true }
+        ], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"outline\">\r\n  <ng-content select=\"[issPrefix]\"></ng-content>\r\n  <div (click)=\"emitPrefixClick()\" class=\"cursor-pointer\">\r\n    @if (prefixText()) {\r\n      <span matTextPrefix>{{ prefixText() }}</span>\r\n    }\r\n    @if (prefixIcon()) {\r\n      <ds-icon matPrefix icon=\"{{prefixIcon()}}\"></ds-icon>\r\n    }\r\n  </div>\r\n  <input\r\n    matInput\r\n    (blur)=\"markAsTouched()\"\r\n    (input)=\"emitOnChangeEvent()\"\r\n    [formControl]=\"ctrl\"\r\n    [maxlength]=\"max()\"\r\n    [minlength]=\"min()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [type]=\"type()\"\r\n    [disabled]=\"disabled()\"\r\n  />\r\n  <ng-content select=\"[issSuffix]\"></ng-content>\r\n  <div (click)=\"emitSuffixClick()\" class=\"cursor-pointer\">\r\n    @if (suffixText()) {\r\n      <span matTextSuffix>{{ suffixText() }}</span>\r\n    }\r\n    @if (suffixIcon()) {\r\n      <ds-icon matSuffix icon=\"{{suffixIcon()}}\"></ds-icon>\r\n    }\r\n  </div>\r\n  <iss-ctrl-hints [hints]=\"hints()\"/>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: HintsComponent, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: InputControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-input", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatFormFieldModule,
-                        MatInputModule,
                         ReactiveFormsModule,
-                        HintsComponent
+                        MatFormFieldModule,
+                        HintsComponent,
+                        MatInput
                     ], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: InputComponent, multi: true }
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<mat-form-field appearance=\"outline\">\r\n  <input\r\n    (blur)=\"markAsTouched()\"\r\n    (input)=\"emitOnChangeEvent()\"\r\n    [formControl]=\"ctrl\"\r\n    [maxlength]=\"max()\"\r\n    [minlength]=\"min()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [type]=\"type()\"\r\n    matInput\r\n  />\r\n  <iss-ctrl-hints [hints]=\"hints()\"/>\r\n</mat-form-field>\r\n" }]
+                        { provide: NG_VALUE_ACCESSOR, useExisting: InputControl, multi: true },
+                        { provide: NG_VALIDATORS, useExisting: InputControl, multi: true }
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<mat-form-field appearance=\"outline\">\r\n  <ng-content select=\"[issPrefix]\"></ng-content>\r\n  <div (click)=\"emitPrefixClick()\" class=\"cursor-pointer\">\r\n    @if (prefixText()) {\r\n      <span matTextPrefix>{{ prefixText() }}</span>\r\n    }\r\n    @if (prefixIcon()) {\r\n      <ds-icon matPrefix icon=\"{{prefixIcon()}}\"></ds-icon>\r\n    }\r\n  </div>\r\n  <input\r\n    matInput\r\n    (blur)=\"markAsTouched()\"\r\n    (input)=\"emitOnChangeEvent()\"\r\n    [formControl]=\"ctrl\"\r\n    [maxlength]=\"max()\"\r\n    [minlength]=\"min()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [type]=\"type()\"\r\n    [disabled]=\"disabled()\"\r\n  />\r\n  <ng-content select=\"[issSuffix]\"></ng-content>\r\n  <div (click)=\"emitSuffixClick()\" class=\"cursor-pointer\">\r\n    @if (suffixText()) {\r\n      <span matTextSuffix>{{ suffixText() }}</span>\r\n    }\r\n    @if (suffixIcon()) {\r\n      <ds-icon matSuffix icon=\"{{suffixIcon()}}\"></ds-icon>\r\n    }\r\n  </div>\r\n  <iss-ctrl-hints [hints]=\"hints()\"/>\r\n</mat-form-field>\r\n" }]
         }] });
 
 const COUNTRIES = [
@@ -3150,7 +3232,7 @@ const DEFAULT_COUNTRY = {
     order: 1000,
     placeholder: "512345678"
 };
-class MobileComponent extends BaseCtrl {
+class MobileControl extends BaseCtrl {
     constructor() {
         super(...arguments);
         this.phoneService = inject(PhoneService);
@@ -3248,13 +3330,13 @@ class MobileComponent extends BaseCtrl {
         }
         return this.#sortCountries();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: MobileComponent, isStandalone: true, selector: "iss-ctrl-mobile", inputs: { preferredCountries: { classPropertyName: "preferredCountries", publicName: "preferredCountries", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: MobileComponent, multi: true },
-            { provide: NG_VALIDATORS, useExisting: MobileComponent, multi: true }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MobileControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: MobileControl, isStandalone: true, selector: "iss-ctrl-mobile", inputs: { preferredCountries: { classPropertyName: "preferredCountries", publicName: "preferredCountries", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: MobileControl, multi: true },
+            { provide: NG_VALIDATORS, useExisting: MobileControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: "<mat-form-field cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n  <div class=\"d-inline-flex align-items-center gap-1 country-flag\" matPrefix (click)=\"toggleCountryCodeMenu()\">\r\n    <img ngSrc=\"./flags/{{selectedCountry().code}}.svg\" width=\"20\" height=\"20\" alt=\"\" class=\"country-flag--image\" [priority]=\"true\">\r\n    <!--@if (separateDialCode()) {\r\n      <div class=\"selected-dial-code\">+{{ selectedCountry.dialCode }}</div>\r\n    }-->\r\n    <ds-icon icon=\"arrow-down\" class=\"fs-12 fc-dark-gray\"></ds-icon>\r\n  </div>\r\n  <input\r\n    matInput\r\n    type=\"tel\"\r\n    autocomplete=\"off\"\r\n    (blur)=\"markAsTouched()\"\r\n    (keydown)=\"onInput($event)\"\r\n    (input)=\"emit()\"\r\n    [formControl]=\"ctrl\"\r\n    [disabled]=\"disabled()\"\r\n    [placeholder]=\"selectedCountry().placeholder\"\r\n  />\r\n</mat-form-field>\r\n\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  (backdropClick)=\"closeCountryCodeMenu()\"\r\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n>\r\n  <div class=\"country-dropdown bc-white box-shadow p-2\">\r\n    <div class=\"search-container\">\r\n      <mat-form-field>\r\n        <input matInput id=\"country-search-box\" [formControl]=\"searchInput\" (click)=\"$event.stopPropagation()\"/>\r\n      </mat-form-field>\r\n    </div>\r\n    <ul class=\"country-list\">\r\n      @for (country of filteredCountries(); track $index) {\r\n        <li\r\n          #countryEl\r\n          [ngClass]=\"country.order > 1 ? 'preferredCounty'  : ''\"\r\n          class=\"d-flex align-items-center gap-2 cursor-pointer p-2\"\r\n          (click)=\"onSelectCountry(country)\"\r\n        >\r\n          @defer (on viewport(countryEl)) {\r\n            <img ngSrc=\"./flags/{{country.code}}.svg\" width=\"20\" height=\"20\" alt=\"\" class=\"country-flag--image\">\r\n          }\r\n          <span class=\"fs-12 fc-black\">{{ country.name }}</span>\r\n          <span class=\"fs-12 fc-dark-gray\">+{{ country.dailCode }}</span>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n</ng-template>\r\n", styles: [".country-flag{border-inline-end:var(--input-border);padding-inline-end:.5rem;margin-inline-end:.5rem;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], deferBlockDependencies: [() => [NgOptimizedImage]] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MobileControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-mobile", standalone: true, imports: [
                         ReactiveFormsModule,
@@ -3266,25 +3348,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                         MatPrefix,
                         NgOptimizedImage
                     ], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: MobileComponent, multi: true },
-                        { provide: NG_VALIDATORS, useExisting: MobileComponent, multi: true }
+                        { provide: NG_VALUE_ACCESSOR, useExisting: MobileControl, multi: true },
+                        { provide: NG_VALIDATORS, useExisting: MobileControl, multi: true }
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<mat-form-field cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n  <div class=\"d-inline-flex align-items-center gap-1 country-flag\" matPrefix (click)=\"toggleCountryCodeMenu()\">\r\n    <img ngSrc=\"./flags/{{selectedCountry().code}}.svg\" width=\"20\" height=\"20\" alt=\"\" class=\"country-flag--image\" [priority]=\"true\">\r\n    <!--@if (separateDialCode()) {\r\n      <div class=\"selected-dial-code\">+{{ selectedCountry.dialCode }}</div>\r\n    }-->\r\n    <ds-icon icon=\"arrow-down\" class=\"fs-12 fc-dark-gray\"></ds-icon>\r\n  </div>\r\n  <input\r\n    matInput\r\n    type=\"tel\"\r\n    autocomplete=\"off\"\r\n    (blur)=\"markAsTouched()\"\r\n    (keydown)=\"onInput($event)\"\r\n    (input)=\"emit()\"\r\n    [formControl]=\"ctrl\"\r\n    [disabled]=\"disabled()\"\r\n    [placeholder]=\"selectedCountry().placeholder\"\r\n  />\r\n</mat-form-field>\r\n\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  (backdropClick)=\"closeCountryCodeMenu()\"\r\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n>\r\n  <div class=\"country-dropdown bc-white box-shadow p-2\">\r\n    <div class=\"search-container\">\r\n      <mat-form-field>\r\n        <input matInput id=\"country-search-box\" [formControl]=\"searchInput\" (click)=\"$event.stopPropagation()\"/>\r\n      </mat-form-field>\r\n    </div>\r\n    <ul class=\"country-list\">\r\n      @for (country of filteredCountries(); track $index) {\r\n        <li\r\n          #countryEl\r\n          [ngClass]=\"country.order > 1 ? 'preferredCounty'  : ''\"\r\n          class=\"d-flex align-items-center gap-2 cursor-pointer p-2\"\r\n          (click)=\"onSelectCountry(country)\"\r\n        >\r\n          @defer (on viewport(countryEl)) {\r\n            <img ngSrc=\"./flags/{{country.code}}.svg\" width=\"20\" height=\"20\" alt=\"\" class=\"country-flag--image\">\r\n          }\r\n          <span class=\"fs-12 fc-black\">{{ country.name }}</span>\r\n          <span class=\"fs-12 fc-dark-gray\">+{{ country.dailCode }}</span>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n</ng-template>\r\n", styles: [".country-flag{border-inline-end:var(--input-border);padding-inline-end:.5rem;margin-inline-end:.5rem;cursor:pointer}\n"] }]
         }] });
 
-class NoteComponent extends BaseCtrl {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NoteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: NoteComponent, isStandalone: true, selector: "iss-ctrl-note", providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: NoteComponent, multi: true }
+class NoteControl extends BaseCtrl {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NoteControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: NoteControl, isStandalone: true, selector: "iss-ctrl-note", providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: NoteControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: "<p>note works!</p>\r\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NoteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NoteControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-note", standalone: true, imports: [], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: NoteComponent, multi: true }
+                        { provide: NG_VALUE_ACCESSOR, useExisting: NoteControl, multi: true }
                     ], template: "<p>note works!</p>\r\n" }]
         }] });
 
-class PlateNumberComponent extends BaseCtrl {
+class ArabicNumberPipe {
+    transform(n, ...args) {
+        if (n === null || n === undefined) {
+            return "";
+        }
+        if (isNaN(+n)) {
+            return n;
+        }
+        return new Intl.NumberFormat("ar-SA", {}).format(+n);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ArabicNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: ArabicNumberPipe, isStandalone: true, name: "arabicNumber" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ArabicNumberPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "arabicNumber",
+                    standalone: true
+                }]
+        }] });
+
+const PLATE_LETTERS = [
+    { label: { ar: "أ", en: "A" }, value: "A" },
+    { label: { ar: "ب", en: "B" }, value: "B" },
+    { label: { ar: "ح", en: "J" }, value: "J" },
+    { label: { ar: "د", en: "D" }, value: "D" },
+    { label: { ar: "ر", en: "R" }, value: "R" },
+    { label: { ar: "س", en: "S" }, value: "S" },
+    { label: { ar: "ص", en: "X" }, value: "X" },
+    { label: { ar: "ط", en: "T" }, value: "T" },
+    { label: { ar: "ع", en: "E" }, value: "E" },
+    { label: { ar: "ق", en: "G" }, value: "G" },
+    { label: { ar: "ك", en: "K" }, value: "K" },
+    { label: { ar: "ل", en: "L" }, value: "L" },
+    { label: { ar: "م", en: "Z" }, value: "Z" },
+    { label: { ar: "ن", en: "N" }, value: "N" },
+    { label: { ar: "هـ", en: "H" }, value: "H" },
+    { label: { ar: "و", en: "U" }, value: "U" },
+    { label: { ar: "ي", en: "V" }, value: "V" }
+];
+
+class PlateLetterPipe {
+    transform(value, ...args) {
+        const letter = PLATE_LETTERS.find(letter => letter.value === value);
+        if (letter) {
+            return letter.label.ar;
+        }
+        return value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PlateLetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: PlateLetterPipe, isStandalone: true, name: "plateLetter" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PlateLetterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "plateLetter",
+                    standalone: true
+                }]
+        }] });
+
+class PlateControl extends BaseCtrl {
     constructor() {
         super(...arguments);
         this.plate = new FormGroup({
@@ -3300,25 +3442,6 @@ class PlateNumberComponent extends BaseCtrl {
                 new FormControl(null),
             ]),
         });
-        this.options = [
-            { label: "A/أ", value: "A" },
-            { label: "B/ب", value: "B" },
-            { label: "J/ح", value: "J" },
-            { label: "D/د", value: "D" },
-            { label: "R/ر", value: "R" },
-            { label: "S/س", value: "S" },
-            { label: "X/ص", value: "X" },
-            { label: "T/ط", value: "T" },
-            { label: "E/ع", value: "E" },
-            { label: "G/ق", value: "G" },
-            { label: "K/ك", value: "K" },
-            { label: "L/ل", value: "L" },
-            { label: "Z/م", value: "Z" },
-            { label: "N/ن", value: "N" },
-            { label: "H/هـ", value: "H" },
-            { label: "U/و", value: "U" },
-            { label: "V/ي", value: "V" }
-        ];
         this.#plateChanges = toSignal(this.plate.valueChanges);
         this.#lettersArr = computed(() => this.#plateChanges()["letters"].filter((l) => l));
         this.#letters = computed(() => this.#lettersArr().join(""));
@@ -3331,6 +3454,7 @@ class PlateNumberComponent extends BaseCtrl {
                 this.emitOnChangeEvent({ letters: this.#lettersArr(), numbers: this.#numbersArr() });
             }
         });
+        this.PLATE_LETTERS = PLATE_LETTERS;
     }
     #plateChanges;
     #lettersArr;
@@ -3369,12 +3493,12 @@ class PlateNumberComponent extends BaseCtrl {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PlateNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: PlateNumberComponent, isStandalone: true, selector: "iss-ctrl-plate-number", providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: PlateNumberComponent, multi: true }
-        ], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"plate\">\r\n  <div class=\"row mb-4\">\r\n    <ng-container formArrayName=\"numbers\">\r\n      @for (item of numberControls; track $index) {\r\n        <div class=\"col-sm-3\">\r\n          <mat-form-field class=\"mat-form-field-number\">\r\n            <input\r\n              type=\"number\"\r\n              matInput\r\n              [formControlName]=\"$index\"\r\n              maxlength=\"1\"\r\n              placeholder=\"\"\r\n              oninput=\"if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);\"\r\n            />\r\n          </mat-form-field>\r\n        </div>\r\n      }\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"row mb-4\">\r\n    <ng-container formArrayName=\"letters\">\r\n      @for (el of letterControls; track $index) {\r\n        <div class=\"col-sm-4\">\r\n          <mat-form-field class=\"mat-form-field-number\">\r\n            <mat-select disableOptionCentering [formControlName]=\"$index\">\r\n              @for (option of options; track option.value) {\r\n                <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\r\n              }\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      }\r\n    </ng-container>\r\n  </div>\r\n  <!--<div class=\"row mb-4\">\r\n    <div class=\"col-12\">\r\n      <ng-container *ngTemplateOutlet=\"plateElement\"></ng-container>\r\n    </div>\r\n  </div>-->\r\n</div>\r\n\r\n\r\n<!--<ng-template #plateElement>\r\n  <div class=\"plate d-inline-flex align-items-stretch justify-content-between fs-18\">\r\n    <div class=\"d-flex flex-column border-right w-100\">\r\n      <div class=\"ARPlate border-bottom d-flex h-50 w-100\">\r\n        <div class=\"fc-black border-right w-50 d-flex align-items-center justify-content-center gap-1\">\r\n          <span>{{ number1 | arabicNumbers }}</span>\r\n          <span>{{ number2 | arabicNumbers }}</span>\r\n          <span>{{ number3 | arabicNumbers }}</span>\r\n          <span>{{ number4 | arabicNumbers }}</span>\r\n        </div>\r\n        <span class=\"fw-medium fc-black w-50 d-flex align-items-center justify-content-center\">\r\n          <span>{{ letter1Ar }}</span> <span class=\"m-1\">{{ letter2Ar }}</span> <span>{{ letter3Ar }}</span>\r\n        </span>\r\n      </div>\r\n      <div class=\"ENPlate d-flex h-50 w-100\">\r\n        <span class=\"fc-black border-right w-50 d-flex align-items-center justify-content-center\">\r\n          {{ number1 === null || number1 === undefined ? '' : number1 }}\r\n          {{ number2 === null || number2 === undefined ? '' : number2 }}\r\n          {{ number3 === null || number3 === undefined ? '' : number3 }}\r\n          {{ number4 === null || number4 === undefined ? '' : number4 }}\r\n        </span>\r\n        <span class=\"fw-medium fc-black w-50 d-flex align-items-center justify-content-center\">\r\n          {{ letter1En.toUpperCase() + ' ' + letter2En.toUpperCase() + ' ' + letter3En.toUpperCase() }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex flex-column gap-2 justify-content-center px-2 align-items-center\">\r\n      <img src=\"assets/images/ksa-symbol.svg\" alt=\"\"/>\r\n\r\n      <span class=\"fw-medium fs-12 line-height-1-2\">K<br/>S<br/>A</span>\r\n      <svg width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <circle cx=\"4.49162\" cy=\"4.06193\" r=\"3.99162\" fill=\"#1D252D\"/>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</ng-template>-->\r\n", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PlateControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: PlateControl, isStandalone: true, selector: "iss-ctrl-plate-number", providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: PlateControl, multi: true }
+        ], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"plate\">\r\n  @if (!disabled()) {\r\n    <div class=\"row mb-4\">\r\n      <ng-container formArrayName=\"numbers\">\r\n        @for (item of numberControls; track $index) {\r\n          <div class=\"col-sm-3\">\r\n            <mat-form-field class=\"mat-form-field-number\">\r\n              <input\r\n                type=\"number\"\r\n                matInput\r\n                [formControlName]=\"$index\"\r\n                maxlength=\"1\"\r\n                placeholder=\"\"\r\n                oninput=\"if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);\"\r\n              />\r\n            </mat-form-field>\r\n          </div>\r\n        }\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"row mb-4\">\r\n      <ng-container formArrayName=\"letters\">\r\n        @for (el of letterControls; track $index) {\r\n          <div class=\"col-sm-4\">\r\n            <mat-form-field class=\"mat-form-field-number\">\r\n              <mat-select disableOptionCentering [formControlName]=\"$index\">\r\n                @for (option of PLATE_LETTERS; track option.value) {\r\n                  <mat-option [value]=\"option.value\">{{ option.label.en }} / {{ option.label.ar }}</mat-option>\r\n                }\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n        }\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  <div class=\"row mb-4\">\r\n    <div class=\"col-12\">\r\n      <ng-container *ngTemplateOutlet=\"plateElement\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n<ng-template #plateElement>\r\n  <div class=\"plate d-inline-flex align-items-stretch justify-content-between fs-18\">\r\n    <div class=\"d-flex flex-column border-right w-100\">\r\n      <div class=\"ARPlate border-bottom d-flex h-50 w-100\">\r\n        <div class=\"fc-black border-right w-50 d-flex align-items-center justify-content-center gap-2\">\r\n          @for (numberCtrl of numberControls; track $index) {\r\n            <span>{{ numberCtrl.value | arabicNumber }}</span>\r\n          }\r\n        </div>\r\n        <span class=\"fw-medium fc-black w-50 d-flex align-items-center justify-content-center gap-2\">\r\n          @for (letterCtrl of letterControls; track $index) {\r\n            <span>{{ letterCtrl.value | plateLetter }}</span>\r\n          }\r\n        </span>\r\n      </div>\r\n      <div class=\"ENPlate d-flex h-50 w-100\">\r\n        <span class=\"fc-black border-right w-50 d-flex align-items-center justify-content-center gap-2\">\r\n          @for (numberCtrl of numberControls; track $index) {\r\n            <span>{{ numberCtrl.value }}</span>\r\n          }\r\n        </span>\r\n        <span class=\"fw-medium fc-black w-50 d-flex align-items-center justify-content-center gap-2\">\r\n          @for (letterCtrl of letterControls; track $index) {\r\n            <span>{{ letterCtrl.value }}</span>\r\n          }\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex flex-column gap-2 justify-content-center px-2 align-items-center\">\r\n      <svg width=\"17\" height=\"19\" viewBox=\"0 0 17 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M10.8072 16.8744C11.4633 16.178 11.3244 15.3914 10.7996 15.3825C10.9872 15.9606 10.5562 16.3344 10.3922 16.5266C9.97894 16.1712 9.55086 15.7761 9.10778 15.3694C11.2695 13.5812 13.6354 11.995 16.7263 11.9452C13.3983 10.7499 10.7417 12.7815 8.4925 14.8084C6.24308 12.7815 3.58672 10.7499 0.257812 11.9452C3.34944 11.995 5.71507 13.581 7.87722 15.3694C7.43329 15.7761 7.00564 16.1712 6.59172 16.5266C6.42902 16.3344 5.99777 15.9606 6.18435 15.3825C5.65992 15.3914 5.52089 16.178 6.17758 16.8744C5.91495 17.0931 5.48962 17.4631 5.15113 17.5518C4.89082 17.6199 4.68185 17.4846 4.63473 17.2026C4.53542 16.6069 3.61271 16.6959 3.72554 17.5372C3.82907 18.3044 4.76066 18.6391 5.55892 18.2837C5.87565 18.1424 6.3107 17.7413 6.66778 17.45C6.83111 17.641 7.26215 18.0145 7.07494 18.5935C7.59979 18.5838 7.7384 17.798 7.08234 17.1005C7.54845 16.7028 8.01625 16.2927 8.4925 15.887C8.96833 16.2925 9.43634 16.7028 9.90288 17.1005C9.24639 17.798 9.385 18.5838 9.91006 18.5935C9.72285 18.0145 10.1539 17.6414 10.3168 17.45C10.6745 17.7413 11.1091 18.1424 11.4263 18.2837C12.2246 18.6391 13.1555 18.3044 13.259 17.5372C13.3719 16.6959 12.4496 16.6069 12.3494 17.2026C12.3023 17.4846 12.094 17.6196 11.8332 17.5518C11.4948 17.4631 11.0696 17.0931 10.8072 16.8744ZM6.72504 5.72093C6.22365 7.04637 6.19597 8.53894 6.9169 10.1805C6.80195 8.47576 7.17594 7.06771 7.8713 6.0066L8.01815 7.46832H7.84679L8.01815 9.17958H7.84679L8.01815 10.8904H7.84679L8.01794 12.5991L7.53366 13.0819H8.4925H9.45156L8.96685 12.5991L9.13842 10.8904H8.96685L9.13842 9.17958H8.96685L9.13842 7.46832H8.96685L9.11391 6.0066C9.80906 7.06771 10.1833 8.47682 10.0683 10.1805C10.7886 8.53894 10.7616 7.047 10.2602 5.72093C11.1115 6.72478 11.7701 7.89851 12.0661 9.36572C12.3733 7.50466 11.848 5.98568 10.8852 4.8071C11.8174 5.47943 12.6184 6.33157 13.1785 7.48396C13.048 5.72072 12.1559 4.57742 10.927 3.75824C11.989 4.1054 12.8561 4.68645 13.6343 5.71798C13.1139 3.8884 11.9801 3.15564 10.575 2.74362C11.5332 2.67368 12.4386 2.78165 13.3347 3.33988C12.3621 2.02839 11.0565 1.81055 9.73257 1.95634C10.2893 1.67279 10.9158 1.53101 11.5888 1.63137C10.8302 1.07187 9.81836 1.01651 8.95227 1.48812L8.4925 0.328125L8.0321 1.48749C7.1658 1.01651 6.15476 1.07166 5.39623 1.63137C6.06877 1.53122 6.69483 1.67279 7.25179 1.95634C5.92826 1.81055 4.62311 2.0286 3.6499 3.33988C4.54662 2.78165 5.45137 2.67368 6.41001 2.74362C5.00534 3.15564 3.87112 3.8884 3.35113 5.71798C4.12868 4.68666 4.99625 4.1054 6.05842 3.75824C4.8287 4.57721 3.93704 5.72072 3.80625 7.48396C4.36618 6.33157 5.16782 5.47943 6.09962 4.8071C5.13676 5.98568 4.61149 7.50466 4.91871 9.36572C5.21494 7.89851 5.87354 6.72478 6.72504 5.72093Z\"\r\n          fill=\"#1D252D\"\r\n        />\r\n      </svg>\r\n      <span class=\"fw-medium fs-12 line-height-1-2\">K<br/>S<br/>A</span>\r\n      <svg width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <circle cx=\"4.49162\" cy=\"4.06193\" r=\"3.99162\" fill=\"#1D252D\"/>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".plate{background:#f8f8f8;width:240px;height:110px;border:1px solid #8e9aa0;border-radius:3px;direction:ltr}.plate .border-right{border-right:1px solid #d6d6d4}.plate .border-bottom{border-bottom:1px solid #d6d6d4!important}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: ArabicNumberPipe, name: "arabicNumber" }, { kind: "pipe", type: PlateLetterPipe, name: "plateLetter" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PlateNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PlateControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-plate-number", standalone: true, imports: [
                         MatFormField,
@@ -3382,13 +3506,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                         MatInput,
                         MatSelect,
                         MatOption,
-                        NgTemplateOutlet
+                        NgTemplateOutlet,
+                        ArabicNumberPipe,
+                        PlateLetterPipe
                     ], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: PlateNumberComponent, multi: true }
-                    ], template: "<div [formGroup]=\"plate\">\r\n  <div class=\"row mb-4\">\r\n    <ng-container formArrayName=\"numbers\">\r\n      @for (item of numberControls; track $index) {\r\n        <div class=\"col-sm-3\">\r\n          <mat-form-field class=\"mat-form-field-number\">\r\n            <input\r\n              type=\"number\"\r\n              matInput\r\n              [formControlName]=\"$index\"\r\n              maxlength=\"1\"\r\n              placeholder=\"\"\r\n              oninput=\"if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);\"\r\n            />\r\n          </mat-form-field>\r\n        </div>\r\n      }\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"row mb-4\">\r\n    <ng-container formArrayName=\"letters\">\r\n      @for (el of letterControls; track $index) {\r\n        <div class=\"col-sm-4\">\r\n          <mat-form-field class=\"mat-form-field-number\">\r\n            <mat-select disableOptionCentering [formControlName]=\"$index\">\r\n              @for (option of options; track option.value) {\r\n                <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\r\n              }\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n      }\r\n    </ng-container>\r\n  </div>\r\n  <!--<div class=\"row mb-4\">\r\n    <div class=\"col-12\">\r\n      <ng-container *ngTemplateOutlet=\"plateElement\"></ng-container>\r\n    </div>\r\n  </div>-->\r\n</div>\r\n\r\n\r\n<!--<ng-template #plateElement>\r\n  <div class=\"plate d-inline-flex align-items-stretch justify-content-between fs-18\">\r\n    <div class=\"d-flex flex-column border-right w-100\">\r\n      <div class=\"ARPlate border-bottom d-flex h-50 w-100\">\r\n        <div class=\"fc-black border-right w-50 d-flex align-items-center justify-content-center gap-1\">\r\n          <span>{{ number1 | arabicNumbers }}</span>\r\n          <span>{{ number2 | arabicNumbers }}</span>\r\n          <span>{{ number3 | arabicNumbers }}</span>\r\n          <span>{{ number4 | arabicNumbers }}</span>\r\n        </div>\r\n        <span class=\"fw-medium fc-black w-50 d-flex align-items-center justify-content-center\">\r\n          <span>{{ letter1Ar }}</span> <span class=\"m-1\">{{ letter2Ar }}</span> <span>{{ letter3Ar }}</span>\r\n        </span>\r\n      </div>\r\n      <div class=\"ENPlate d-flex h-50 w-100\">\r\n        <span class=\"fc-black border-right w-50 d-flex align-items-center justify-content-center\">\r\n          {{ number1 === null || number1 === undefined ? '' : number1 }}\r\n          {{ number2 === null || number2 === undefined ? '' : number2 }}\r\n          {{ number3 === null || number3 === undefined ? '' : number3 }}\r\n          {{ number4 === null || number4 === undefined ? '' : number4 }}\r\n        </span>\r\n        <span class=\"fw-medium fc-black w-50 d-flex align-items-center justify-content-center\">\r\n          {{ letter1En.toUpperCase() + ' ' + letter2En.toUpperCase() + ' ' + letter3En.toUpperCase() }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex flex-column gap-2 justify-content-center px-2 align-items-center\">\r\n      <img src=\"assets/images/ksa-symbol.svg\" alt=\"\"/>\r\n\r\n      <span class=\"fw-medium fs-12 line-height-1-2\">K<br/>S<br/>A</span>\r\n      <svg width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <circle cx=\"4.49162\" cy=\"4.06193\" r=\"3.99162\" fill=\"#1D252D\"/>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</ng-template>-->\r\n" }]
+                        { provide: NG_VALUE_ACCESSOR, useExisting: PlateControl, multi: true }
+                    ], template: "<div [formGroup]=\"plate\">\r\n  @if (!disabled()) {\r\n    <div class=\"row mb-4\">\r\n      <ng-container formArrayName=\"numbers\">\r\n        @for (item of numberControls; track $index) {\r\n          <div class=\"col-sm-3\">\r\n            <mat-form-field class=\"mat-form-field-number\">\r\n              <input\r\n                type=\"number\"\r\n                matInput\r\n                [formControlName]=\"$index\"\r\n                maxlength=\"1\"\r\n                placeholder=\"\"\r\n                oninput=\"if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);\"\r\n              />\r\n            </mat-form-field>\r\n          </div>\r\n        }\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"row mb-4\">\r\n      <ng-container formArrayName=\"letters\">\r\n        @for (el of letterControls; track $index) {\r\n          <div class=\"col-sm-4\">\r\n            <mat-form-field class=\"mat-form-field-number\">\r\n              <mat-select disableOptionCentering [formControlName]=\"$index\">\r\n                @for (option of PLATE_LETTERS; track option.value) {\r\n                  <mat-option [value]=\"option.value\">{{ option.label.en }} / {{ option.label.ar }}</mat-option>\r\n                }\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </div>\r\n        }\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  <div class=\"row mb-4\">\r\n    <div class=\"col-12\">\r\n      <ng-container *ngTemplateOutlet=\"plateElement\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n<ng-template #plateElement>\r\n  <div class=\"plate d-inline-flex align-items-stretch justify-content-between fs-18\">\r\n    <div class=\"d-flex flex-column border-right w-100\">\r\n      <div class=\"ARPlate border-bottom d-flex h-50 w-100\">\r\n        <div class=\"fc-black border-right w-50 d-flex align-items-center justify-content-center gap-2\">\r\n          @for (numberCtrl of numberControls; track $index) {\r\n            <span>{{ numberCtrl.value | arabicNumber }}</span>\r\n          }\r\n        </div>\r\n        <span class=\"fw-medium fc-black w-50 d-flex align-items-center justify-content-center gap-2\">\r\n          @for (letterCtrl of letterControls; track $index) {\r\n            <span>{{ letterCtrl.value | plateLetter }}</span>\r\n          }\r\n        </span>\r\n      </div>\r\n      <div class=\"ENPlate d-flex h-50 w-100\">\r\n        <span class=\"fc-black border-right w-50 d-flex align-items-center justify-content-center gap-2\">\r\n          @for (numberCtrl of numberControls; track $index) {\r\n            <span>{{ numberCtrl.value }}</span>\r\n          }\r\n        </span>\r\n        <span class=\"fw-medium fc-black w-50 d-flex align-items-center justify-content-center gap-2\">\r\n          @for (letterCtrl of letterControls; track $index) {\r\n            <span>{{ letterCtrl.value }}</span>\r\n          }\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex flex-column gap-2 justify-content-center px-2 align-items-center\">\r\n      <svg width=\"17\" height=\"19\" viewBox=\"0 0 17 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M10.8072 16.8744C11.4633 16.178 11.3244 15.3914 10.7996 15.3825C10.9872 15.9606 10.5562 16.3344 10.3922 16.5266C9.97894 16.1712 9.55086 15.7761 9.10778 15.3694C11.2695 13.5812 13.6354 11.995 16.7263 11.9452C13.3983 10.7499 10.7417 12.7815 8.4925 14.8084C6.24308 12.7815 3.58672 10.7499 0.257812 11.9452C3.34944 11.995 5.71507 13.581 7.87722 15.3694C7.43329 15.7761 7.00564 16.1712 6.59172 16.5266C6.42902 16.3344 5.99777 15.9606 6.18435 15.3825C5.65992 15.3914 5.52089 16.178 6.17758 16.8744C5.91495 17.0931 5.48962 17.4631 5.15113 17.5518C4.89082 17.6199 4.68185 17.4846 4.63473 17.2026C4.53542 16.6069 3.61271 16.6959 3.72554 17.5372C3.82907 18.3044 4.76066 18.6391 5.55892 18.2837C5.87565 18.1424 6.3107 17.7413 6.66778 17.45C6.83111 17.641 7.26215 18.0145 7.07494 18.5935C7.59979 18.5838 7.7384 17.798 7.08234 17.1005C7.54845 16.7028 8.01625 16.2927 8.4925 15.887C8.96833 16.2925 9.43634 16.7028 9.90288 17.1005C9.24639 17.798 9.385 18.5838 9.91006 18.5935C9.72285 18.0145 10.1539 17.6414 10.3168 17.45C10.6745 17.7413 11.1091 18.1424 11.4263 18.2837C12.2246 18.6391 13.1555 18.3044 13.259 17.5372C13.3719 16.6959 12.4496 16.6069 12.3494 17.2026C12.3023 17.4846 12.094 17.6196 11.8332 17.5518C11.4948 17.4631 11.0696 17.0931 10.8072 16.8744ZM6.72504 5.72093C6.22365 7.04637 6.19597 8.53894 6.9169 10.1805C6.80195 8.47576 7.17594 7.06771 7.8713 6.0066L8.01815 7.46832H7.84679L8.01815 9.17958H7.84679L8.01815 10.8904H7.84679L8.01794 12.5991L7.53366 13.0819H8.4925H9.45156L8.96685 12.5991L9.13842 10.8904H8.96685L9.13842 9.17958H8.96685L9.13842 7.46832H8.96685L9.11391 6.0066C9.80906 7.06771 10.1833 8.47682 10.0683 10.1805C10.7886 8.53894 10.7616 7.047 10.2602 5.72093C11.1115 6.72478 11.7701 7.89851 12.0661 9.36572C12.3733 7.50466 11.848 5.98568 10.8852 4.8071C11.8174 5.47943 12.6184 6.33157 13.1785 7.48396C13.048 5.72072 12.1559 4.57742 10.927 3.75824C11.989 4.1054 12.8561 4.68645 13.6343 5.71798C13.1139 3.8884 11.9801 3.15564 10.575 2.74362C11.5332 2.67368 12.4386 2.78165 13.3347 3.33988C12.3621 2.02839 11.0565 1.81055 9.73257 1.95634C10.2893 1.67279 10.9158 1.53101 11.5888 1.63137C10.8302 1.07187 9.81836 1.01651 8.95227 1.48812L8.4925 0.328125L8.0321 1.48749C7.1658 1.01651 6.15476 1.07166 5.39623 1.63137C6.06877 1.53122 6.69483 1.67279 7.25179 1.95634C5.92826 1.81055 4.62311 2.0286 3.6499 3.33988C4.54662 2.78165 5.45137 2.67368 6.41001 2.74362C5.00534 3.15564 3.87112 3.8884 3.35113 5.71798C4.12868 4.68666 4.99625 4.1054 6.05842 3.75824C4.8287 4.57721 3.93704 5.72072 3.80625 7.48396C4.36618 6.33157 5.16782 5.47943 6.09962 4.8071C5.13676 5.98568 4.61149 7.50466 4.91871 9.36572C5.21494 7.89851 5.87354 6.72478 6.72504 5.72093Z\"\r\n          fill=\"#1D252D\"\r\n        />\r\n      </svg>\r\n      <span class=\"fw-medium fs-12 line-height-1-2\">K<br/>S<br/>A</span>\r\n      <svg width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <circle cx=\"4.49162\" cy=\"4.06193\" r=\"3.99162\" fill=\"#1D252D\"/>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".plate{background:#f8f8f8;width:240px;height:110px;border:1px solid #8e9aa0;border-radius:3px;direction:ltr}.plate .border-right{border-right:1px solid #d6d6d4}.plate .border-bottom{border-bottom:1px solid #d6d6d4!important}\n"] }]
         }] });
 
-class RadioComponent extends BaseCtrl {
+class RadioControl extends BaseCtrl {
     constructor() {
         super(...arguments);
         this.options = input.required();
@@ -3407,28 +3533,31 @@ class RadioComponent extends BaseCtrl {
     onRadioChange(value) {
         this.emitValue(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: RadioComponent, isStandalone: true, selector: "iss-ctrl-radio", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: RadioControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: RadioControl, isStandalone: true, selector: "iss-ctrl-radio", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: RadioControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: "<mat-radio-group aria-label=\"Select an option\">\r\n  @for (option of options(); track option.value) {\r\n    <mat-radio-button\r\n      [value]=\"option.value\"\r\n      [checked]=\"ctrl.value === option.value\"\r\n      (change)=\"onRadioChange(option.value)\"\r\n    >{{ option.label }}\r\n    </mat-radio-button>\r\n  }\r\n</mat-radio-group>\r\n", styles: [".mat-mdc-radio-group{flex-direction:column!important}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i1$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i1$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: RadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: RadioControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-radio", standalone: true, imports: [
                         MatRadioModule,
                         ReactiveFormsModule,
                     ], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }
+                        { provide: NG_VALUE_ACCESSOR, useExisting: RadioControl, multi: true }
                     ], template: "<mat-radio-group aria-label=\"Select an option\">\r\n  @for (option of options(); track option.value) {\r\n    <mat-radio-button\r\n      [value]=\"option.value\"\r\n      [checked]=\"ctrl.value === option.value\"\r\n      (change)=\"onRadioChange(option.value)\"\r\n    >{{ option.label }}\r\n    </mat-radio-button>\r\n  }\r\n</mat-radio-group>\r\n", styles: [".mat-mdc-radio-group{flex-direction:column!important}\n"] }]
         }] });
 
-class ISSCtrlSelectComponent extends BaseCtrl {
+class SelectControl extends BaseCtrl {
     constructor() {
         super(...arguments);
         this.selectedOptions = signal(new Map());
         this.options = input.required();
+        this.height = input("150px");
         this.query = toSignal(this.ctrl.valueChanges);
         this.filteredOptions = computed(() => this.#filter(this.query()));
+        this.loading = input(false);
+        this.allSelected = signal(false);
         this.displayFn = (options) => {
             if (Array.isArray(options) && !this.multiple()) {
                 /*const selectedLabel: string[] = options.map((o) => o.label);
@@ -3449,47 +3578,64 @@ class ISSCtrlSelectComponent extends BaseCtrl {
         let selectedOptions = this.options().filter((option) => values.includes(option.value));
         if (!this.multiple()) {
             if (selectedOptions.length > 1) {
-                this.emitValue(null);
+                this.#emit();
                 throw new Error("You cannot set multiple values while the control is in single selection mode!");
             }
             selectedOptions = selectedOptions.splice(-selectedOptions.length, selectedOptions.length - selectedOptions.length + 1);
         }
         for (let i = 0; i < selectedOptions.length; i++) {
             const val = selectedOptions[i];
-            this.addToSelectedOptionsMap(val);
+            this.#addToSelectedOptionsMap(val);
         }
         this.ctrl.setValue(selectedOptions);
     }
-    stringifySelectedOptions() {
-        if (!this.selectedOptions()?.size) {
-            return null;
+    captureValue($event) {
+        if ($event?.option.value === "_SELECT_ALL_OPTIONS_") {
+            return;
         }
-        return Array.from(this.selectedOptions(), ([value]) => value).join();
-    }
-    getEmissionValue($event) {
-        this.addToSelectedOptionsMap($event?.option.value);
-        this.emitValue(this.stringifySelectedOptions());
+        this.#addToSelectedOptionsMap($event?.option.value);
+        this.#emit();
     }
     removeFromSelectedOptionsMap(option) {
         this.selectedOptions().delete(option.value);
-        //to update menu options with new version of the options
         this.filteredOptions = computed(() => this.#filter(this.query()));
-        this.emitValue(this.stringifySelectedOptions());
+        this.allSelected.set(false);
+        this.#emit();
     }
-    addToSelectedOptionsMap(option) {
+    clearSelection() {
+        this.#reset();
+        this.allSelected.set(false);
+        this.#emit();
+    }
+    toggleAllSelection() {
+        if (this.selectedOptions().size === this.options().length) {
+            this.#reset();
+            this.#emit();
+            this.allSelected.set(false);
+            return;
+        }
+        for (let i = 0; i < this.options().length; i++) {
+            this.#addToSelectedOptionsMap(this.options()[i]);
+        }
+        this.allSelected.set(true);
+        this.#emit();
+    }
+    #addToSelectedOptionsMap(option) {
         if (option) {
             const selectedOption = option;
             if (!this.multiple()) {
                 this.#reset();
             }
             this.selectedOptions().set(selectedOption.value, selectedOption);
-            this.ctrl.setValue(Array.from(this.selectedOptions(), ([_, option]) => option));
+            this.ctrl.setValue(this.#convertSelectedMapToArray());
         }
     }
-    clearSelection() {
-        this.#reset();
-        this.emitOnChangeEvent(null);
-        this.emitValue(null);
+    #stringifySelectedOptions() {
+        const selectedOptionsArr = this.#convertSelectedMapToArray();
+        if (selectedOptionsArr) {
+            return selectedOptionsArr.map((o) => o.value).join();
+        }
+        return null;
     }
     #filter(queryString) {
         if (queryString === null || queryString === undefined || typeof queryString !== "string") {
@@ -3501,18 +3647,25 @@ class ISSCtrlSelectComponent extends BaseCtrl {
         });
         return JSON.parse(JSON.stringify(filteredOptions));
     }
+    #emit() {
+        this.propagateValue(this.#stringifySelectedOptions());
+        this.emitOnChangeEvent(this.#convertSelectedMapToArray());
+    }
     #reset() {
         this.selectedOptions().clear();
         this.filteredOptions = computed(() => this.#filter(this.query()));
         this.ctrl.setValue(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ISSCtrlSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ISSCtrlSelectComponent, isStandalone: true, selector: "iss-ctrl-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: ISSCtrlSelectComponent, multi: true },
-            { provide: NG_VALIDATORS, useExisting: ISSCtrlSelectComponent, multi: true }
-        ], usesInheritance: true, ngImport: i0, template: "<mat-form-field floatLabel=\"always\">\r\n  <mat-label />\r\n  <input [formControl]=\"ctrl\" [matAutocomplete]=\"auto\" class=\"m-0\" [matChipInputFor]=\"chipGrid\" [placeholder]=\"placeholder()\" matInput/>\r\n  @if (selectedOptions().size) {\r\n    <span matSuffix class=\"sfi sfi-close fs-18 fc-black cursor-pointer\" (click)=\"clearSelection()\"></span>\r\n  } @else {\r\n    <span matSuffix class=\"sfi sfi-arrow-down fs-18 fc-black cursor-pointer\"></span>\r\n  }\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayFn\"\r\n    autoActiveFirstOption\r\n    hideSingleSelectionIndicator\r\n    (optionSelected)=\"getEmissionValue($event)\"\r\n  >\r\n    @if (filteredOptions().length) {\r\n      @for (option of filteredOptions(); track option.value) {\r\n        <mat-option\r\n          [value]=\"option\"\r\n          [ngClass]=\"{'mdc-list-item__selected': option | selectStatus: selectedOptions()}\"\r\n        >\r\n          {{ option.label }}\r\n        </mat-option>\r\n      }\r\n    } @else {\r\n      <mat-option disabled=\"true\">No Result Found</mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n</mat-form-field>\r\n<mat-chip-grid #chipGrid>\r\n  @if (multiple()) {\r\n    @for (chip of selectedOptions(); track chip[0]) {\r\n      <mat-chip-row (removed)=\"removeFromSelectedOptionsMap(chip[1])\">\r\n        {{ chip[1].label }}\r\n        <button matChipRemove [attr.aria-label]=\"'remove ' + chip[1].label\">\r\n          <ds-icon icon=\"trash\" class=\"fc-red\"></ds-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  }\r\n</mat-chip-grid>\r\n", styles: ["::ng-deep .mat-mdc-option.mdc-list-item__selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{--mat-option-selected-state-label-text-color: var(--green);color:var(--green)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SelectStatusPipe, name: "selectStatus" }] }); }
+    #convertSelectedMapToArray() {
+        const selectedOptionsArr = Array.from(this.selectedOptions(), ([_, option]) => option);
+        return selectedOptionsArr.length ? selectedOptionsArr : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SelectControl, isStandalone: true, selector: "iss-ctrl-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: SelectControl, multi: true },
+        ], usesInheritance: true, ngImport: i0, template: "<mat-form-field floatLabel=\"always\">\r\n  <mat-label/>\r\n  <input [formControl]=\"ctrl\" [matAutocomplete]=\"auto\" class=\"m-0\" [matChipInputFor]=\"chipGrid\" [placeholder]=\"placeholder()\" matInput/>\r\n  @if (selectedOptions().size) {\r\n    <span matSuffix class=\"sfi sfi-close fs-18 fc-black cursor-pointer\" (click)=\"clearSelection()\"></span>\r\n  } @else {\r\n    <span matSuffix class=\"sfi sfi-arrow-down fs-18 fc-black cursor-pointer\"></span>\r\n  }\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayFn\"\r\n    autoActiveFirstOption\r\n    hideSingleSelectionIndicator\r\n    (optionSelected)=\"captureValue($event)\"\r\n  >\r\n    @if (loading()) {\r\n      <mat-option disabled=\"true\">\r\n        <ds-icon icon=\"spinner\" class=\"spin fc-coral fs-20\"></ds-icon>\r\n      </mat-option>\r\n    } @else {\r\n      @if (filteredOptions().length) {\r\n        @if (multiple()) {\r\n          <mat-option (click)=\"toggleAllSelection()\" value=\"_SELECT_ALL_OPTIONS_\">\r\n            {{ allSelected() ? \"deselect all\" : \"Select All\" }}\r\n          </mat-option>\r\n        }\r\n        <cdk-virtual-scroll-viewport itemSize=\"5\" [ngStyle]=\"{'height': height()}\">\r\n          <mat-option\r\n            *cdkVirtualFor=\"let option of filteredOptions()\"\r\n            [value]=\"option\"\r\n            [ngClass]=\"{'mdc-list-item__selected': option | selectStatus: selectedOptions()}\"\r\n          >\r\n            {{ option.label }}\r\n          </mat-option>\r\n        </cdk-virtual-scroll-viewport>\r\n      } @else {\r\n        <mat-option disabled=\"true\">No Result Found</mat-option>\r\n      }\r\n    }\r\n  </mat-autocomplete>\r\n</mat-form-field>\r\n<mat-chip-grid #chipGrid>\r\n  @if (multiple()) {\r\n    @for (chip of selectedOptions(); track chip[0]) {\r\n      <mat-chip-row (removed)=\"removeFromSelectedOptionsMap(chip[1])\">\r\n        {{ chip[1].label }}\r\n        <button matChipRemove [attr.aria-label]=\"'remove ' + chip[1].label\">\r\n          <ds-icon icon=\"trash\" class=\"fc-red\"></ds-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  }\r\n</mat-chip-grid>\r\n", styles: ["::ng-deep .mat-mdc-option.mdc-list-item__selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{--mat-option-selected-state-label-text-color: var(--green);color:var(--green)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SelectStatusPipe, name: "selectStatus" }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ISSCtrlSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-select", standalone: true, imports: [
                         ReactiveFormsModule,
@@ -3522,55 +3675,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                         MatIconModule,
                         NgClass,
                         SelectStatusPipe,
+                        CdkVirtualForOf,
+                        CdkVirtualScrollViewport,
+                        CdkFixedSizeVirtualScroll,
+                        NgStyle,
                     ], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: ISSCtrlSelectComponent, multi: true },
-                        { provide: NG_VALIDATORS, useExisting: ISSCtrlSelectComponent, multi: true }
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<mat-form-field floatLabel=\"always\">\r\n  <mat-label />\r\n  <input [formControl]=\"ctrl\" [matAutocomplete]=\"auto\" class=\"m-0\" [matChipInputFor]=\"chipGrid\" [placeholder]=\"placeholder()\" matInput/>\r\n  @if (selectedOptions().size) {\r\n    <span matSuffix class=\"sfi sfi-close fs-18 fc-black cursor-pointer\" (click)=\"clearSelection()\"></span>\r\n  } @else {\r\n    <span matSuffix class=\"sfi sfi-arrow-down fs-18 fc-black cursor-pointer\"></span>\r\n  }\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayFn\"\r\n    autoActiveFirstOption\r\n    hideSingleSelectionIndicator\r\n    (optionSelected)=\"getEmissionValue($event)\"\r\n  >\r\n    @if (filteredOptions().length) {\r\n      @for (option of filteredOptions(); track option.value) {\r\n        <mat-option\r\n          [value]=\"option\"\r\n          [ngClass]=\"{'mdc-list-item__selected': option | selectStatus: selectedOptions()}\"\r\n        >\r\n          {{ option.label }}\r\n        </mat-option>\r\n      }\r\n    } @else {\r\n      <mat-option disabled=\"true\">No Result Found</mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n</mat-form-field>\r\n<mat-chip-grid #chipGrid>\r\n  @if (multiple()) {\r\n    @for (chip of selectedOptions(); track chip[0]) {\r\n      <mat-chip-row (removed)=\"removeFromSelectedOptionsMap(chip[1])\">\r\n        {{ chip[1].label }}\r\n        <button matChipRemove [attr.aria-label]=\"'remove ' + chip[1].label\">\r\n          <ds-icon icon=\"trash\" class=\"fc-red\"></ds-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  }\r\n</mat-chip-grid>\r\n", styles: ["::ng-deep .mat-mdc-option.mdc-list-item__selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{--mat-option-selected-state-label-text-color: var(--green);color:var(--green)}\n"] }]
+                        { provide: NG_VALUE_ACCESSOR, useExisting: SelectControl, multi: true },
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<mat-form-field floatLabel=\"always\">\r\n  <mat-label/>\r\n  <input [formControl]=\"ctrl\" [matAutocomplete]=\"auto\" class=\"m-0\" [matChipInputFor]=\"chipGrid\" [placeholder]=\"placeholder()\" matInput/>\r\n  @if (selectedOptions().size) {\r\n    <span matSuffix class=\"sfi sfi-close fs-18 fc-black cursor-pointer\" (click)=\"clearSelection()\"></span>\r\n  } @else {\r\n    <span matSuffix class=\"sfi sfi-arrow-down fs-18 fc-black cursor-pointer\"></span>\r\n  }\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayFn\"\r\n    autoActiveFirstOption\r\n    hideSingleSelectionIndicator\r\n    (optionSelected)=\"captureValue($event)\"\r\n  >\r\n    @if (loading()) {\r\n      <mat-option disabled=\"true\">\r\n        <ds-icon icon=\"spinner\" class=\"spin fc-coral fs-20\"></ds-icon>\r\n      </mat-option>\r\n    } @else {\r\n      @if (filteredOptions().length) {\r\n        @if (multiple()) {\r\n          <mat-option (click)=\"toggleAllSelection()\" value=\"_SELECT_ALL_OPTIONS_\">\r\n            {{ allSelected() ? \"deselect all\" : \"Select All\" }}\r\n          </mat-option>\r\n        }\r\n        <cdk-virtual-scroll-viewport itemSize=\"5\" [ngStyle]=\"{'height': height()}\">\r\n          <mat-option\r\n            *cdkVirtualFor=\"let option of filteredOptions()\"\r\n            [value]=\"option\"\r\n            [ngClass]=\"{'mdc-list-item__selected': option | selectStatus: selectedOptions()}\"\r\n          >\r\n            {{ option.label }}\r\n          </mat-option>\r\n        </cdk-virtual-scroll-viewport>\r\n      } @else {\r\n        <mat-option disabled=\"true\">No Result Found</mat-option>\r\n      }\r\n    }\r\n  </mat-autocomplete>\r\n</mat-form-field>\r\n<mat-chip-grid #chipGrid>\r\n  @if (multiple()) {\r\n    @for (chip of selectedOptions(); track chip[0]) {\r\n      <mat-chip-row (removed)=\"removeFromSelectedOptionsMap(chip[1])\">\r\n        {{ chip[1].label }}\r\n        <button matChipRemove [attr.aria-label]=\"'remove ' + chip[1].label\">\r\n          <ds-icon icon=\"trash\" class=\"fc-red\"></ds-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n    }\r\n  }\r\n</mat-chip-grid>\r\n", styles: ["::ng-deep .mat-mdc-option.mdc-list-item__selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{--mat-option-selected-state-label-text-color: var(--green);color:var(--green)}\n"] }]
         }] });
 
-class SlideToggleComponent extends BaseCtrl {
+class SlideToggleControl extends BaseCtrl {
     onSlideToggleChange(checked) {
         this.emitValue(checked);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SlideToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: SlideToggleComponent, isStandalone: true, selector: "iss-ctrl-slide-toggle", providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: SlideToggleComponent, multi: true }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SlideToggleControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: SlideToggleControl, isStandalone: true, selector: "iss-ctrl-slide-toggle", providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: SlideToggleControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: "<mat-slide-toggle\r\n  class=\"d-block\" [formControl]=\"ctrl\"\r\n  (change)=\"onSlideToggleChange($event.checked)\"\r\n></mat-slide-toggle>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SlideToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SlideToggleControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-slide-toggle", standalone: true, imports: [MatSlideToggleModule, ReactiveFormsModule], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: SlideToggleComponent, multi: true }
+                        { provide: NG_VALUE_ACCESSOR, useExisting: SlideToggleControl, multi: true }
                     ], template: "<mat-slide-toggle\r\n  class=\"d-block\" [formControl]=\"ctrl\"\r\n  (change)=\"onSlideToggleChange($event.checked)\"\r\n></mat-slide-toggle>\r\n" }]
         }] });
 
-class CtrlArrayComponent extends BaseCtrl {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CtrlArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: CtrlArrayComponent, isStandalone: true, selector: "iss-ctrl-ctrl-array", providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: CtrlArrayComponent, multi: true }
+class CtrlArrayControl extends BaseCtrl {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CtrlArrayControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: CtrlArrayControl, isStandalone: true, selector: "iss-ctrl-ctrl-array", providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: CtrlArrayControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: "<p>ctrl-array works!</p>\r\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CtrlArrayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CtrlArrayControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-ctrl-array", standalone: true, imports: [], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: CtrlArrayComponent, multi: true }
+                        { provide: NG_VALUE_ACCESSOR, useExisting: CtrlArrayControl, multi: true }
                     ], template: "<p>ctrl-array works!</p>\r\n" }]
         }] });
 
-class TextareaComponent extends BaseCtrl {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: TextareaComponent, isStandalone: true, selector: "iss-ctrl-textarea", providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: TextareaComponent, multi: true }
-        ], usesInheritance: true, ngImport: i0, template: "<p>textarea works!</p>\r\n", styles: [""] }); }
+class TextareaControl extends BaseCtrl {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TextareaControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: TextareaControl, isStandalone: true, selector: "iss-ctrl-textarea", providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: TextareaControl, multi: true },
+            { provide: NG_VALIDATORS, useExisting: TextareaControl, multi: true }
+        ], usesInheritance: true, ngImport: i0, template: "<mat-form-field>\r\n  <textarea\r\n    matInput\r\n    [placeholder]=\"placeholder()\"\r\n    [formControl]=\"ctrl\"\r\n    [maxlength]=\"max()\"\r\n    [minlength]=\"min()\"\r\n    (input)=\"emitValue()\"\r\n    [disabled]=\"disabled()\"\r\n  ></textarea>\r\n  <iss-ctrl-hints [hints]=\"hints()\"/>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: HintsComponent, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TextareaControl, decorators: [{
             type: Component,
-            args: [{ selector: "iss-ctrl-textarea", standalone: true, imports: [], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: TextareaComponent, multi: true }
-                    ], template: "<p>textarea works!</p>\r\n" }]
+            args: [{ selector: "iss-ctrl-textarea", standalone: true, imports: [
+                        MatFormField,
+                        MatInput,
+                        HintsComponent,
+                        FormsModule,
+                        ReactiveFormsModule
+                    ], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: TextareaControl, multi: true },
+                        { provide: NG_VALIDATORS, useExisting: TextareaControl, multi: true }
+                    ], template: "<mat-form-field>\r\n  <textarea\r\n    matInput\r\n    [placeholder]=\"placeholder()\"\r\n    [formControl]=\"ctrl\"\r\n    [maxlength]=\"max()\"\r\n    [minlength]=\"min()\"\r\n    (input)=\"emitValue()\"\r\n    [disabled]=\"disabled()\"\r\n  ></textarea>\r\n  <iss-ctrl-hints [hints]=\"hints()\"/>\r\n</mat-form-field>\r\n" }]
         }] });
 
-class ToggleButtonComponent extends BaseCtrl {
+class ToggleButtonControl extends BaseCtrl {
     constructor() {
         super(...arguments);
         this.options = input.required();
@@ -3638,15 +3802,15 @@ class ToggleButtonComponent extends BaseCtrl {
         this.selectedOptions().clear();
         this.ctrl.setValue(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ToggleButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ToggleButtonComponent, isStandalone: true, selector: "iss-ctrl-toggle-button", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: ToggleButtonComponent, multi: true }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ToggleButtonControl, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ToggleButtonControl, isStandalone: true, selector: "iss-ctrl-toggle-button", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: ToggleButtonControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: "<mat-button-toggle-group\r\n  [formControl]=\"ctrl\"\r\n  [multiple]=multiple()\r\n  [hideMultipleSelectionIndicator]=\"true\"\r\n  [hideSingleSelectionIndicator]=\"true\"\r\n>\r\n  @for (option of options(); track option.value) {\r\n    <mat-button-toggle\r\n      class=\"d-block\"\r\n      [value]=\"option.value\"\r\n      (change)=\"onToggleButtonChange($event.source.checked,option.value\r\n      )\"\r\n    >{{ option.label }}\r\n    </mat-button-toggle>\r\n  }\r\n</mat-button-toggle-group>\r\n", styles: [".mat-button-toggle-group-appearance-standard{border-radius:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ToggleButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ToggleButtonControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-toggle-button", standalone: true, imports: [MatButtonToggleModule, ReactiveFormsModule], providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: ToggleButtonComponent, multi: true }
+                        { provide: NG_VALUE_ACCESSOR, useExisting: ToggleButtonControl, multi: true }
                     ], template: "<mat-button-toggle-group\r\n  [formControl]=\"ctrl\"\r\n  [multiple]=multiple()\r\n  [hideMultipleSelectionIndicator]=\"true\"\r\n  [hideSingleSelectionIndicator]=\"true\"\r\n>\r\n  @for (option of options(); track option.value) {\r\n    <mat-button-toggle\r\n      class=\"d-block\"\r\n      [value]=\"option.value\"\r\n      (change)=\"onToggleButtonChange($event.source.checked,option.value\r\n      )\"\r\n    >{{ option.label }}\r\n    </mat-button-toggle>\r\n  }\r\n</mat-button-toggle-group>\r\n", styles: [".mat-button-toggle-group-appearance-standard{border-radius:unset!important}\n"] }]
         }] });
 
@@ -3654,5 +3818,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AutocompleteComponent, CheckboxComponent, ChipsComponent, CtrlArrayComponent, DEFAULT_COUNTRY, DatePickerComponent, DateRangePickerComponent, DatetimePickerComponent, DatetimeRangePickerComponent, FilePickerComponent, ISSCtrlSelectComponent, InputComponent, MobileComponent, NoteComponent, PlateNumberComponent, RadioComponent, SlideToggleComponent, TextareaComponent, TimePickerComponent, ToggleButtonComponent };
+export { AutocompleteControl, CheckboxControl, ChipsControl, CtrlArrayControl, DEFAULT_COUNTRY, DatePickerControl, DateRangePickerControl, DatetimePickerControl, DatetimeRangePickerControl, FilePickerControl, InputControl, MobileControl, NoteControl, PlateControl, RadioControl, SelectControl, SlideToggleControl, TextareaControl, TimePickerControl, ToggleButtonControl };
 //# sourceMappingURL=iss-ctrl.mjs.map