iss-ctrl 0.0.1

package/fesm2022/iss-ctrl.mjs

@@ -0,0 +1,3659 @@
+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 * as i1$2 from '@angular/forms';
+import { ControlContainer, 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 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, JsonPipe } 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';
+import { MatTooltip } from '@angular/material/tooltip';
+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 * 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);
+        this.formControlName = input("");
+        this.min = input(null);
+        this.max = input(null);
+        this.disabled = signal(false);
+        this.multiple = input(false, {
+            transform: (v) => this.#transformToBoolean(v),
+        });
+        this.placeholder = input("");
+        this.hints = input([]);
+        this.className = input(null);
+        this.onChange = output();
+        this.touched = signal(false);
+        this.ctrl = new FormControl(null);
+        this.onTouch = () => { };
+        this.onPropagateValue = (_) => { };
+    }
+    get hostCtrl() {
+        return this.ctrlContainer.control?.get(this.formControlName());
+    }
+    registerOnChange(fn) {
+        this.onPropagateValue = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+        if (isDisabled) {
+            this.ctrl.disable();
+        }
+        else {
+            this.ctrl.enable();
+        }
+    }
+    writeValue(value) {
+        this.ctrl.setValue(value);
+    }
+    markAsTouched() {
+        this.touched.set(true);
+        this.onTouch();
+    }
+    validate(control) {
+        return this.ctrl.errors;
+    }
+    emitValue(value) {
+        let emissionValue = this.ctrl.getRawValue();
+        if (value !== undefined) {
+            emissionValue = value;
+        }
+        this.onPropagateValue(emissionValue);
+        this.emitOnChangeEvent(emissionValue);
+    }
+    propagateValue(value) {
+        let emissionValue = this.ctrl.getRawValue();
+        if (value !== undefined) {
+            emissionValue = value;
+        }
+        this.onPropagateValue(emissionValue);
+    }
+    emitOnChangeEvent($event) {
+        let emissionValue = this.ctrl.getRawValue();
+        if ($event !== undefined) {
+            emissionValue = $event;
+        }
+        this.onChange.emit(emissionValue);
+    }
+    #transformToBoolean(v) {
+        if (typeof v === "string") {
+            if (v === "") {
+                return true;
+            }
+            return v === "true";
+        }
+        return v;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseCtrl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.0", type: BaseCtrl, isStandalone: true, selector: "ng-component", inputs: { formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, ngImport: i0, template: ``, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseCtrl, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    template: ``,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                }]
+        }] });
+
+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 }
+        ], 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: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-autocomplete", standalone: true, imports: [], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: AutocompleteComponent, multi: true }
+                    ], template: "<p>autocomplete works!</p>\r\n" }]
+        }] });
+
+class SelectStatusPipe {
+    transform(option, ...args) {
+        const selectedOptions = args[0];
+        return selectedOptions.has(option.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectStatusPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: SelectStatusPipe, isStandalone: true, name: "selectStatus" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectStatusPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "selectStatus",
+                    standalone: true
+                }]
+        }] });
+
+class CheckboxComponent extends BaseCtrl {
+    constructor() {
+        super(...arguments);
+        this.options = input.required();
+        this.selectedOptions = signal(new Map());
+    }
+    writeValue(value) {
+        this.#reset();
+        if (value === null || value === undefined) {
+            return;
+        }
+        const values = value.split(",").map((val) => val.trim());
+        let selectedOptions = this.options().filter((option) => values.includes(option.value));
+        this.addToSelectedOptionsMap(this.#selectedOptionsMapFactory(selectedOptions));
+        this.ctrl.setValue(selectedOptions);
+    }
+    addToSelectedOptionsMap(option) {
+        if (option) {
+            this.selectedOptions = signal(option);
+        }
+    }
+    onCheckboxChange(checked, value) {
+        const selectedOption = this.options().find(option => option.value == value);
+        this.selectedOptions.update((prev) => {
+            const options = prev;
+            if (checked)
+                options.set(selectedOption?.value, selectedOption);
+            else
+                options.delete(selectedOption?.value);
+            return options;
+        });
+        this.getEmissionValue(this.selectedOptions());
+    }
+    stringifySelectedOptions() {
+        if (!this.selectedOptions()?.size) {
+            return null;
+        }
+        return Array.from(this.selectedOptions(), ([value]) => value).join();
+    }
+    getEmissionValue(options) {
+        this.addToSelectedOptionsMap(options);
+        this.emitValue(this.stringifySelectedOptions());
+    }
+    #selectedOptionsMapFactory(selectedOptions) {
+        let selectedOptionsMap = new Map();
+        for (let option of selectedOptions) {
+            selectedOptionsMap.set(option.value, option);
+        }
+        return selectedOptionsMap;
+    }
+    #reset() {
+        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 },
+        ], 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: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-checkbox", standalone: true, imports: [ReactiveFormsModule, MatCheckboxModule, SelectStatusPipe], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, 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: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ChipsComponent, 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" }]
+        }] });
+
+const WEEK_STARTS_ON = 0;
+const DATE_FORMAT_ADAPTER = {
+    parse: {
+        dateInput: "dd/MM/yyyy"
+    },
+    display: {
+        dateInput: "dd/MM/yyyy",
+        monthYearLabel: "LLLL y",
+        dateA11yLabel: "dd/MM/yyyy",
+        monthYearA11yLabel: "MMMM y"
+    }
+};
+/** Creates an array and fills it with values. */
+function range(length, valueFunction) {
+    const valuesArray = Array(length);
+    for (let i = 0; i < length; i++) {
+        valuesArray[i] = valueFunction(i);
+    }
+    return valuesArray;
+}
+// date-fns doesn't have a way to read/print month names or days of the week directly,
+// so we get them by formatting a date with a format that produces the desired month/day.
+const MONTH_FORMATS = {
+    long: "LLLL",
+    short: "LLL",
+    narrow: "LLLLL",
+};
+const DAY_OF_WEEK_FORMATS = {
+    long: "EEEE",
+    short: "EEE",
+    narrow: "EEEEE",
+};
+class ISSDateAdapter extends DateAdapter {
+    constructor(matDateLocale) {
+        super();
+        this.setLocale(matDateLocale);
+    }
+    getYear(date) {
+        return getYear(date);
+    }
+    getMonth(date) {
+        return getMonth(date);
+    }
+    getDate(date) {
+        return getDate(date);
+    }
+    getDayOfWeek(date) {
+        return getDay(date);
+    }
+    getMonthNames(style) {
+        const pattern = MONTH_FORMATS[style];
+        return range(12, i => this.format(new Date(2017, i, 1), pattern));
+    }
+    getDateNames() {
+        const dtf = typeof Intl !== "undefined"
+            ? new Intl.DateTimeFormat(this.locale.code, {
+                day: "numeric",
+                timeZone: "utc",
+            })
+            : null;
+        return range(31, i => {
+            if (dtf) {
+                // date-fns doesn't appear to support this functionality.
+                // Fall back to `Intl` on supported browsers.
+                const date = new Date();
+                date.setUTCFullYear(2017, 0, i + 1);
+                date.setUTCHours(0, 0, 0, 0);
+                return dtf.format(date).replace(/[\u200e\u200f]/g, "");
+            }
+            return i + "";
+        });
+    }
+    getDayOfWeekNames(style) {
+        const pattern = DAY_OF_WEEK_FORMATS[style];
+        return range(7, i => this.format(new Date(2017, 0, i + 1), pattern));
+    }
+    getYearName(date) {
+        return this.format(date, "y");
+    }
+    getFirstDayOfWeek() {
+        return WEEK_STARTS_ON;
+    }
+    getNumDaysInMonth(date) {
+        return getDaysInMonth(date);
+    }
+    clone(date) {
+        return new Date(date.getTime());
+    }
+    createDate(year, month, date) {
+        const result = new Date();
+        result.setFullYear(year, month, date);
+        result.setHours(0, 0, 0, 0);
+        return result;
+    }
+    today() {
+        return new Date();
+    }
+    parse(value, parseFormat) {
+        if (typeof value === "string" && value.length > 0) {
+            const iso8601Date = parseISO(value);
+            if (this.isValid(iso8601Date)) {
+                return iso8601Date;
+            }
+            const formats = Array.isArray(parseFormat) ? parseFormat : [parseFormat];
+            if (!parseFormat.length) {
+                throw Error("Formats array must not be empty.");
+            }
+            for (const currentFormat of formats) {
+                const fromFormat = parse(value, currentFormat, new Date(), { locale: this.locale });
+                if (this.isValid(fromFormat)) {
+                    return fromFormat;
+                }
+            }
+            return this.invalid();
+        }
+        else if (typeof value === "number") {
+            return new Date(value);
+        }
+        else if (value instanceof Date) {
+            return this.clone(value);
+        }
+        return null;
+    }
+    format(date, displayFormat) {
+        if (!this.isValid(date)) {
+            throw Error("DateFnsAdapter: Cannot format invalid date.");
+        }
+        return format(date, displayFormat, { locale: this.locale });
+    }
+    addCalendarYears(date, years) {
+        return addYears(date, years);
+    }
+    addCalendarMonths(date, months) {
+        return addMonths(date, months);
+    }
+    addCalendarDays(date, days) {
+        return addDays(date, days);
+    }
+    toIso8601(date) {
+        return formatISO(date, { representation: "date" });
+    }
+    /**
+     * Returns the given value if given a valid Date or null. Deserializes valid ISO 8601 strings
+     * (https://www.ietf.org/rfc/rfc3339.txt) into valid Dates and empty string into null. Returns an
+     * invalid date for all other values.
+     */
+    deserialize(value) {
+        if (typeof value === "string") {
+            if (!value) {
+                return null;
+            }
+            const date = parseISO(value);
+            if (this.isValid(date)) {
+                return date;
+            }
+        }
+        return super.deserialize(value);
+    }
+    isDateInstance(obj) {
+        return isDate(obj);
+    }
+    isValid(date) {
+        return isValid(date);
+    }
+    invalid() {
+        return new Date(NaN);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ISSDateAdapter, deps: [{ token: MAT_DATE_LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ISSDateAdapter }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ISSDateAdapter, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DATE_LOCALE]
+                }] }] });
+
+class DatePickerComponent extends BaseCtrl {
+    constructor() {
+        super(...arguments);
+        this.disabledDays = input([]);
+        this.minDate = input(null);
+        this.maxDate = input(null);
+        this.#datePipe = inject(DatePipe);
+        this.calendarDaysFilter = (d) => {
+            const day = (d || new Date()).getDay();
+            return !(this.disabledDays().includes(day));
+        };
+    }
+    #datePipe;
+    emit($event) {
+        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: [
+            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 },
+        ], 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: [{
+            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 },
+                    ], 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 {
+    constructor() {
+        super(...arguments);
+        this.disabledDays = input([]);
+        this.minDate = input(null);
+        this.maxDate = input(null);
+        this.onDateRangeObjectChange = output();
+        this.range = new FormGroup({
+            start: new FormControl(null),
+            end: new FormControl(null),
+        });
+        this.#datePipe = inject(DatePipe);
+        this.#sub = new Subscription();
+        this.calendarDaysFilter = (d) => {
+            const day = (d || new Date()).getDay();
+            return !(this.disabledDays().includes(day));
+        };
+    }
+    #datePipe;
+    #sub;
+    ngOnInit() {
+        this.#sub.add(this.range.valueChanges.subscribe((values) => {
+            if (values.start && values.end) {
+                this.emitValue(this.#getEmissionValue(values.start, values.end));
+                this.onDateRangeObjectChange.emit(this.#getEmissionObject(values.start, values.end));
+            }
+        }));
+    }
+    writeValue(value) {
+        if (typeof value === "string") {
+            const valArr = value?.split(",");
+            const valObj = {
+                start: valArr[0],
+                end: valArr[1],
+            };
+            this.range.patchValue(valObj, { emitEvent: false });
+        }
+    }
+    ngOnDestroy() {
+        this.#sub.unsubscribe();
+    }
+    #getDuration(startDate, endDate) {
+        let start = new Date(startDate).getTime();
+        let end = new Date(endDate).getTime();
+        return Math.ceil((end - start) / (1000 * 60 * 60 * 24) + 1);
+    }
+    #getFormatedDate(date) {
+        return this.#datePipe.transform(date, "yyyy-MM-ddTHH:mm:ss") + "Z";
+    }
+    #getFormatedEndDate(endDate) {
+        let inputDate = new Date(new Date(endDate).setHours(23, 59, 59));
+        return this.#getFormatedDate(inputDate);
+    }
+    #getEmissionValue(start, end) {
+        let formatedStart = this.#getFormatedDate(start);
+        let formatedEnd = this.#getFormatedEndDate(end);
+        return `${formatedStart},${formatedEnd}`;
+    }
+    #getEmissionObject(start, end) {
+        return {
+            duration: this.#getDuration(start, end),
+            start: this.#getFormatedDate(start),
+            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: [
+            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 },
+        ], 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: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-date-range-picker", standalone: true, imports: [
+                        MatFormFieldModule, MatDatepickerModule, FormsModule, 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: DateRangePickerComponent, 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 {
+    constructor() {
+        super(...arguments);
+        this.isOpen = signal(false);
+        this.timePicker = new FormGroup({
+            hour: new FormControl(),
+            minute: new FormControl(),
+            meridiem: new FormControl(),
+        });
+        this.displayValue = signal("");
+        this.hours = Array.from({ length: 12 }, (_, i) => i + 1);
+        this.minutes = Array.from({ length: 60 }, (_, i) => i);
+        this.#emissionValue = signal("");
+        this.#timeChanges = toSignal(this.timePicker.valueChanges);
+        this.#effectRef = effect(() => {
+            this.#emit(this.#timeChanges());
+        }, { allowSignalWrites: true });
+    }
+    #emissionValue;
+    #timeChanges;
+    #effectRef;
+    ngOnDestroy() {
+        this.#effectRef.destroy();
+    }
+    writeValue(value) {
+        if (value) {
+            if (value.includes("T")) {
+                value = this.#extractTime(value);
+                this.emitValue(value);
+            }
+            const timeObject = this.#generateTimeObject(this.#convertTo12H(value));
+            this.displayValue.set(this.#generateTimeDisplay(timeObject.hour, timeObject.minute, timeObject.meridiem));
+            this.timePicker.patchValue(timeObject, { emitEvent: false });
+        }
+    }
+    togglePickerMenu() {
+        this.isOpen.update((isOpen) => !isOpen);
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    validate(control) {
+        if (this.max() && control.getRawValue()) {
+            let maxDate = this.#geDateFromString(this.max()?.toString());
+            let controlValue = this.#geDateFromString(control.getRawValue());
+            if (isAfter(controlValue, maxDate)) {
+                return {
+                    afterMaxTime: {
+                        max: this.max(),
+                        actual: control.getRawValue()
+                    }
+                };
+            }
+        }
+        if (this.min() && control.getRawValue()) {
+            let minDate = this.#geDateFromString(this.min()?.toString());
+            let controlValue = this.#geDateFromString(control.getRawValue());
+            if (isBefore(controlValue, minDate)) {
+                return {
+                    beforeMinTime: {
+                        max: this.min(),
+                        actual: control.getRawValue()
+                    }
+                };
+            }
+        }
+        return null;
+    }
+    #emit(v) {
+        if (v && Object.values(v).every((item) => item !== null && item !== undefined)) {
+            const time24HFormat = this.#convertTo24H(v.hour, v.minute, v.meridiem);
+            this.displayValue.set(this.#generateTimeDisplay(v.hour, v.minute, v.meridiem));
+            this.#emissionValue.set(time24HFormat);
+            this.emitValue(time24HFormat);
+        }
+    }
+    #convertTo24H(h, m, period) {
+        let hStr = `${h}`;
+        let mStr = `${m}`;
+        if (period === "PM") {
+            hStr = `${h + 12}`;
+        }
+        else {
+            if (h <= 9) {
+                hStr = `0${hStr}`;
+            }
+        }
+        if (h === 12 && period === "AM") {
+            hStr = "00";
+        }
+        if (h === 12 && period === "PM") {
+            hStr = `${12}`;
+        }
+        if (m <= 9) {
+            mStr = `0${mStr}`;
+        }
+        return `${hStr}:${mStr}`;
+    }
+    #convertTo12H(time) {
+        let datetime = this.#geDateFromString(time);
+        return format(datetime, "h:m a");
+    }
+    #geDateFromString(time) {
+        if (!time) {
+            throw new Error(`Input value in wrong format ${time}`);
+        }
+        let timeArr = time.split(":");
+        return new Date(new Date().setHours(+timeArr[0], +timeArr[1]));
+    }
+    #generateTimeObject(time) {
+        const meridiem = time.split(" ")[1];
+        const [hour, minute] = time.split(" ")[0].split(":");
+        return {
+            hour: +hour,
+            minute: +minute,
+            meridiem: meridiem
+        };
+    }
+    #generateTimeDisplay(hour, minute, meridiem) {
+        let h = `${hour}`;
+        let m = `${minute}`;
+        if (hour <= 9) {
+            h = `0${hour}`;
+        }
+        if (minute <= 9) {
+            m = `0${minute}`;
+        }
+        return `${h}:${m} ${meridiem}`;
+    }
+    #extractTime(value) {
+        let val = value.split("T");
+        let timeArr = val[1].split(":");
+        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 }
+        ], 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: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-time-picker", standalone: true, imports: [
+                        MatFormField,
+                        MatInput,
+                        MatSuffix,
+                        MatButtonToggleGroup,
+                        MatButtonToggle,
+                        CdkOverlayOrigin,
+                        CdkConnectedOverlay,
+                        ReactiveFormsModule
+                    ], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: TimePickerComponent, multi: true },
+                        { provide: NG_VALIDATORS, useExisting: TimePickerComponent, 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 {
+    constructor() {
+        super(...arguments);
+        this.disabledDays = input([]);
+        this.minDate = input(null);
+        this.maxDate = input(null);
+        this.datetimePicker = new FormGroup({
+            date: new FormControl(),
+            time: new FormControl(),
+        });
+        this.#datePipe = inject(DatePipe);
+        this.#formChanges = toSignal(this.datetimePicker.valueChanges);
+        this.#effectRef = effect(() => {
+            if (this.#formChanges() && this.#formChanges().date && this.#formChanges().time) {
+                this.emitValue(this.#getEmissionValue(this.#formChanges().date, this.#formChanges().time));
+            }
+        });
+    }
+    #datePipe;
+    #formChanges;
+    #effectRef;
+    ngOnDestroy() {
+        this.#effectRef.destroy();
+    }
+    #getEmissionValue(date, time) {
+        const d = new Date(date);
+        let timeArr = time.split(":");
+        let datetime = new Date(d.setHours(+timeArr[0], +timeArr[1], 0));
+        return this.#formatDate(datetime);
+    }
+    #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: [
+            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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DatetimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-datetime-picker", standalone: true, imports: [
+                        FormsModule,
+                        MatDatepicker,
+                        MatDatepickerInput,
+                        MatDatepickerToggle,
+                        MatFormField,
+                        MatInput,
+                        MatSuffix,
+                        ReactiveFormsModule,
+                        TimePickerComponent,
+                        DatePickerComponent
+                    ], 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 }
+                    ], 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 }
+        ], 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: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-datetime-range-picker", standalone: true, imports: [], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: DatetimeRangePickerComponent, multi: true }
+                    ], template: "<p>datetime-range-picker works!</p>\r\n" }]
+        }] });
+
+class DroppableDirective {
+    constructor() {
+        this.onDrop = output();
+    }
+    onDragOver(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+    }
+    onDragLeave(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+    }
+    onDropped(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.onDrop.emit(evt.dataTransfer.files);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DroppableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: DroppableDirective, isStandalone: true, selector: "[droppable]", outputs: { onDrop: "onDrop" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDropped($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DroppableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[droppable]",
+                    standalone: true,
+                }]
+        }], propDecorators: { onDragOver: [{
+                type: HostListener,
+                args: ["dragover", ["$event"]]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ["dragleave", ["$event"]]
+            }], onDropped: [{
+                type: HostListener,
+                args: ["drop", ["$event"]]
+            }] } });
+
+class HintsComponent {
+    constructor() {
+        this.hints = input([]);
+        this.touched = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HintsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HintsComponent, isStandalone: true, selector: "iss-ctrl-hints", inputs: { hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (hints().length) {
+      <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">
+              @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>
+              } @else {
+                <ds-icon
+                  icon="{{ touched() ? (hint.valid ? 'check-circle-f' : 'close-circle') : 'check-circle-o' }}"
+                  class="fs-24 {{ touched() ? (hint.valid ? 'fc-green' : 'fc-red') : 'fc-dark-gray' }}"
+                >
+                </ds-icon>
+                <span class="{{ touched() ? (hint.valid ? 'fc-green' : 'fc-red') : 'fc-dark-gray' }} text-break">{{ hint.label }}</span>
+              }
+            </mat-hint>
+          }
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HintsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "iss-ctrl-hints",
+                    standalone: true,
+                    imports: [MatHint,],
+                    template: `
+    @if (hints().length) {
+      <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">
+              @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>
+              } @else {
+                <ds-icon
+                  icon="{{ touched() ? (hint.valid ? 'check-circle-f' : 'close-circle') : 'check-circle-o' }}"
+                  class="fs-24 {{ touched() ? (hint.valid ? 'fc-green' : 'fc-red') : 'fc-dark-gray' }}"
+                >
+                </ds-icon>
+                <span class="{{ touched() ? (hint.valid ? 'fc-green' : 'fc-red') : 'fc-dark-gray' }} text-break">{{ hint.label }}</span>
+              }
+            </mat-hint>
+          }
+        }
+      </div>
+    }
+  `,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+class FilePickerComponent extends BaseCtrl {
+    constructor() {
+        super(...arguments);
+        this.accept = input();
+        this.showDownloadButton = input(true);
+        this.showDeleteButton = input(true);
+        this.attachments = signal([]);
+        this.#effectRef = effect(() => {
+            if (this.attachments().length) {
+                this.emitValue(this.#formDataFactory(this.attachments()));
+            }
+        });
+    }
+    #effectRef;
+    ngOnDestroy() {
+        this.#effectRef.destroy();
+    }
+    writeValue(val) {
+        this.#reset();
+        if (val) {
+            this.attachments.set([...this.attachments(), ...this.#convertFormDataToFiles(val)]);
+        }
+    }
+    onDownload($event) {
+        const fileUrl = this.#createObjectUrl($event.detail.value);
+        const anchorElement = this.#createAnchorElement(fileUrl, $event.detail.value.name);
+        this.#useAnchorElementThenDispose(anchorElement, fileUrl);
+    }
+    onDelete(index) {
+        const fileHtmlElement = document.getElementById("file");
+        if (fileHtmlElement) {
+            fileHtmlElement.value = "";
+        }
+        this.attachments.update((files) => {
+            return files.filter((_, i) => i !== index);
+        });
+    }
+    captureFile($event) {
+        if (!$event) {
+            return;
+        }
+        if (!$event.length) {
+            return;
+        }
+        this.markAsTouched();
+        const files = Array.from($event);
+        this.#updateAttachments(files);
+    }
+    #createObjectUrl(file) {
+        const blob = new Blob([file], {
+            type: "application/octet-stream",
+        });
+        return window.URL.createObjectURL(blob);
+    }
+    #updateAttachments(selectedFiles) {
+        if (!this.multiple()) {
+            this.attachments.set([]);
+            this.attachments()[0] = selectedFiles[0];
+            return;
+        }
+        this.attachments.update((files) => {
+            files = [...files, ...selectedFiles];
+            return files;
+        });
+    }
+    #formDataFactory(files) {
+        const fd = new FormData();
+        for (let i = 0; i < files.length; i++) {
+            fd.append("file", files[i]);
+        }
+        return fd;
+    }
+    #reset() {
+        this.attachments.set([]);
+    }
+    #convertFormDataToFiles(val) {
+        let files = [];
+        for (let pair of val.entries()) {
+            if (pair[1] instanceof File) {
+                files.push(pair[1]);
+            }
+        }
+        return files;
+    }
+    #createAnchorElement(fileUrl, fileName) {
+        let a = document.createElement("a");
+        a.setAttribute("style", "display: none");
+        a.href = fileUrl;
+        a.download = fileName;
+        return a;
+    }
+    #useAnchorElementThenDispose(a, fileUrl) {
+        a.click();
+        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 }
+        ], 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: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-file-picker", standalone: true, imports: [
+                        ReactiveFormsModule,
+                        MatTooltip,
+                        DroppableDirective,
+                        HintsComponent,
+                    ], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: FilePickerComponent, 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 {
+    constructor() {
+        super(...arguments);
+        this.type = input("text");
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-input", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        ReactiveFormsModule,
+                        HintsComponent
+                    ], 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" }]
+        }] });
+
+const COUNTRIES = [
+    {
+        "name": "Afghanistan (افغانستان)",
+        "code": "af",
+        "dailCode": "93",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "701234567"
+    },
+    {
+        "name": "Albania (Shqipëri)",
+        "code": "al",
+        "dailCode": "355",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "672123456"
+    },
+    {
+        "name": "Algeria (الجزائر)",
+        "code": "dz",
+        "dailCode": "213",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "551234567"
+    },
+    {
+        "name": "American Samoa",
+        "code": "as",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "684"
+        ],
+        "placeholder": "6847331234"
+    },
+    {
+        "name": "Andorra",
+        "code": "ad",
+        "dailCode": "376",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "312345"
+    },
+    {
+        "name": "Angola",
+        "code": "ao",
+        "dailCode": "244",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "923123456"
+    },
+    {
+        "name": "Anguilla",
+        "code": "ai",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "264"
+        ],
+        "placeholder": "2642351234"
+    },
+    {
+        "name": "Antigua and Barbuda",
+        "code": "ag",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "268"
+        ],
+        "placeholder": "2684641234"
+    },
+    {
+        "name": "Argentina",
+        "code": "ar",
+        "dailCode": "54",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "91123456789"
+    },
+    {
+        "name": "Armenia (Հայաստան)",
+        "code": "am",
+        "dailCode": "374",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "77123456"
+    },
+    {
+        "name": "Aruba",
+        "code": "aw",
+        "dailCode": "297",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "5601234"
+    },
+    {
+        "name": "Australia",
+        "code": "au",
+        "dailCode": "61",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "412345678"
+    },
+    {
+        "name": "Austria (Österreich)",
+        "code": "at",
+        "dailCode": "43",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "664123456"
+    },
+    {
+        "name": "Azerbaijan (Azərbaycan)",
+        "code": "az",
+        "dailCode": "994",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "401234567"
+    },
+    {
+        "name": "Bahamas",
+        "code": "bs",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "242"
+        ],
+        "placeholder": "2423591234"
+    },
+    {
+        "name": "Bahrain (البحرين)",
+        "code": "bh",
+        "dailCode": "973",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "36001234"
+    },
+    {
+        "name": "Bangladesh (বাংলাদেশ)",
+        "code": "bd",
+        "dailCode": "880",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "1812345678"
+    },
+    {
+        "name": "Barbados",
+        "code": "bb",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "246"
+        ],
+        "placeholder": "2462501234"
+    },
+    {
+        "name": "Belarus (Беларусь)",
+        "code": "by",
+        "dailCode": "375",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "294911911"
+    },
+    {
+        "name": "Belgium (België)",
+        "code": "be",
+        "dailCode": "32",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "470123456"
+    },
+    {
+        "name": "Belize",
+        "code": "bz",
+        "dailCode": "501",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "6221234"
+    },
+    {
+        "name": "Benin (Bénin)",
+        "code": "bj",
+        "dailCode": "229",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "90011234"
+    },
+    {
+        "name": "Bermuda",
+        "code": "bm",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "441"
+        ],
+        "placeholder": "4413701234"
+    },
+    {
+        "name": "Bhutan (འབྲུག)",
+        "code": "bt",
+        "dailCode": "975",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "17123456"
+    },
+    {
+        "name": "Bolivia",
+        "code": "bo",
+        "dailCode": "591",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "71234567"
+    },
+    {
+        "name": "Bosnia and Herzegovina (Босна и Херцеговина)",
+        "code": "ba",
+        "dailCode": "387",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "61123456"
+    },
+    {
+        "name": "Botswana",
+        "code": "bw",
+        "dailCode": "267",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "71123456"
+    },
+    {
+        "name": "Brazil (Brasil)",
+        "code": "br",
+        "dailCode": "55",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "11961234567"
+    },
+    {
+        "name": "British Indian Ocean Territory",
+        "code": "io",
+        "dailCode": "246",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "3801234"
+    },
+    {
+        "name": "British Virgin Islands",
+        "code": "vg",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "284"
+        ],
+        "placeholder": "2843001234"
+    },
+    {
+        "name": "Brunei",
+        "code": "bn",
+        "dailCode": "673",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "7123456"
+    },
+    {
+        "name": "Bulgaria (България)",
+        "code": "bg",
+        "dailCode": "359",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "43012345"
+    },
+    {
+        "name": "Burkina Faso",
+        "code": "bf",
+        "dailCode": "226",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "70123456"
+    },
+    {
+        "name": "Burundi (Uburundi)",
+        "code": "bi",
+        "dailCode": "257",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "79561234"
+    },
+    {
+        "name": "Cambodia (កម្ពុជា)",
+        "code": "kh",
+        "dailCode": "855",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "91234567"
+    },
+    {
+        "name": "Cameroon (Cameroun)",
+        "code": "cm",
+        "dailCode": "237",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "671234567"
+    },
+    {
+        "name": "Canada",
+        "code": "ca",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "204",
+            "226",
+            "236",
+            "249",
+            "250",
+            "289",
+            "306",
+            "343",
+            "365",
+            "387",
+            "403",
+            "416",
+            "418",
+            "431",
+            "437",
+            "438",
+            "450",
+            "506",
+            "514",
+            "519",
+            "548",
+            "579",
+            "581",
+            "587",
+            "604",
+            "613",
+            "639",
+            "647",
+            "672",
+            "705",
+            "709",
+            "742",
+            "778",
+            "780",
+            "782",
+            "807",
+            "819",
+            "825",
+            "867",
+            "873",
+            "902",
+            "905"
+        ],
+        "placeholder": "5062345678"
+    },
+    {
+        "name": "Cape Verde (Kabu Verdi)",
+        "code": "cv",
+        "dailCode": "238",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "9911234"
+    },
+    {
+        "name": "Caribbean Netherlands",
+        "code": "bq",
+        "dailCode": "599",
+        "priority": 1,
+        "order": 0,
+        "placeholder": "3181234"
+    },
+    {
+        "name": "Cayman Islands",
+        "code": "ky",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "345"
+        ],
+        "placeholder": "3453231234"
+    },
+    {
+        "name": "Central African Republic (République centrafricaine)",
+        "code": "cf",
+        "dailCode": "236",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "70012345"
+    },
+    {
+        "name": "Chad (Tchad)",
+        "code": "td",
+        "dailCode": "235",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "63012345"
+    },
+    {
+        "name": "Chile",
+        "code": "cl",
+        "dailCode": "56",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "221234567"
+    },
+    {
+        "name": "China (中国)",
+        "code": "cn",
+        "dailCode": "86",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "13123456789"
+    },
+    {
+        "name": "Christmas Island",
+        "code": "cx",
+        "dailCode": "61",
+        "priority": 2,
+        "order": 0,
+        "placeholder": "412345678"
+    },
+    {
+        "name": "Cocos (Keeling) Islands",
+        "code": "cc",
+        "dailCode": "61",
+        "priority": 1,
+        "order": 0,
+        "placeholder": "412345678"
+    },
+    {
+        "name": "Colombia",
+        "code": "co",
+        "dailCode": "57",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "3211234567"
+    },
+    {
+        "name": "Comoros (جزر القمر)",
+        "code": "km",
+        "dailCode": "269",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "3212345"
+    },
+    {
+        "name": "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)",
+        "code": "cd",
+        "dailCode": "243",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "991234567"
+    },
+    {
+        "name": "Congo (Republic) (Congo-Brazzaville)",
+        "code": "cg",
+        "dailCode": "242",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "061234567"
+    },
+    {
+        "name": "Cook Islands",
+        "code": "ck",
+        "dailCode": "682",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "71234"
+    },
+    {
+        "name": "Costa Rica",
+        "code": "cr",
+        "dailCode": "506",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "83123456"
+    },
+    {
+        "name": "Côte d’Ivoire",
+        "code": "ci",
+        "dailCode": "225",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "0123456789"
+    },
+    {
+        "name": "Croatia (Hrvatska)",
+        "code": "hr",
+        "dailCode": "385",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "921234567"
+    },
+    {
+        "name": "Cuba",
+        "code": "cu",
+        "dailCode": "53",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "51234567"
+    },
+    {
+        "name": "Curaçao",
+        "code": "cw",
+        "dailCode": "599",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "95181234"
+    },
+    {
+        "name": "Cyprus (Κύπρος)",
+        "code": "cy",
+        "dailCode": "357",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "96123456"
+    },
+    {
+        "name": "Czech Republic (Česká republika)",
+        "code": "cz",
+        "dailCode": "420",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "601123456"
+    },
+    {
+        "name": "Denmark (Danmark)",
+        "code": "dk",
+        "dailCode": "45",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "34412345"
+    },
+    {
+        "name": "Djibouti",
+        "code": "dj",
+        "dailCode": "253",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "77831001"
+    },
+    {
+        "name": "Dominica",
+        "code": "dm",
+        "dailCode": "1767",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "7672251234"
+    },
+    {
+        "name": "Dominican Republic (República Dominicana)",
+        "code": "do",
+        "dailCode": "1",
+        "priority": 2,
+        "order": 0,
+        "areaCodes": [
+            "809",
+            "829",
+            "849"
+        ],
+        "placeholder": "8092345678"
+    },
+    {
+        "name": "Ecuador",
+        "code": "ec",
+        "dailCode": "593",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "991234567"
+    },
+    {
+        "name": "Egypt (مصر)",
+        "code": "eg",
+        "dailCode": "20",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "1001234567"
+    },
+    {
+        "name": "El Salvador",
+        "code": "sv",
+        "dailCode": "503",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "70123456"
+    },
+    {
+        "name": "Equatorial Guinea (Guinea Ecuatorial)",
+        "code": "gq",
+        "dailCode": "240",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "222123456"
+    },
+    {
+        "name": "Eritrea",
+        "code": "er",
+        "dailCode": "291",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "7123456"
+    },
+    {
+        "name": "Estonia (Eesti)",
+        "code": "ee",
+        "dailCode": "372",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "51234567"
+    },
+    {
+        "name": "Ethiopia",
+        "code": "et",
+        "dailCode": "251",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "911234567"
+    },
+    {
+        "name": "Falkland Islands (Islas Malvinas)",
+        "code": "fk",
+        "dailCode": "500",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "51234"
+    },
+    {
+        "name": "Faroe Islands (Føroyar)",
+        "code": "fo",
+        "dailCode": "298",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "211234"
+    },
+    {
+        "name": "Fiji",
+        "code": "fj",
+        "dailCode": "679",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "7012345"
+    },
+    {
+        "name": "Finland (Suomi)",
+        "code": "fi",
+        "dailCode": "358",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "412345678"
+    },
+    {
+        "name": "France",
+        "code": "fr",
+        "dailCode": "33",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "612345678"
+    },
+    {
+        "name": "French Guiana (Guyane française)",
+        "code": "gf",
+        "dailCode": "594",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "694201234"
+    },
+    {
+        "name": "French Polynesia (Polynésie française)",
+        "code": "pf",
+        "dailCode": "689",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "87123456"
+    },
+    {
+        "name": "Gabon",
+        "code": "ga",
+        "dailCode": "241",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "06031234"
+    },
+    {
+        "name": "Gambia",
+        "code": "gm",
+        "dailCode": "220",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "3012345"
+    },
+    {
+        "name": "Georgia (საქართველო)",
+        "code": "ge",
+        "dailCode": "995",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "555123456"
+    },
+    {
+        "name": "Germany (Deutschland)",
+        "code": "de",
+        "dailCode": "49",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "15123456789"
+    },
+    {
+        "name": "Ghana (Gaana)",
+        "code": "gh",
+        "dailCode": "233",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "231234567"
+    },
+    {
+        "name": "Gibraltar",
+        "code": "gi",
+        "dailCode": "350",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "57123456"
+    },
+    {
+        "name": "Greece (Ελλάδα)",
+        "code": "gr",
+        "dailCode": "30",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "6912345678"
+    },
+    {
+        "name": "Greenland (Kalaallit Nunaat)",
+        "code": "gl",
+        "dailCode": "299",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "221234"
+    },
+    {
+        "name": "Grenada",
+        "code": "gd",
+        "dailCode": "1473",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "4734031234"
+    },
+    {
+        "name": "Guadeloupe",
+        "code": "gp",
+        "dailCode": "590",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "690001234"
+    },
+    {
+        "name": "Guam",
+        "code": "gu",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "671"
+        ],
+        "placeholder": "6713001234"
+    },
+    {
+        "name": "Guatemala",
+        "code": "gt",
+        "dailCode": "502",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "51234567"
+    },
+    {
+        "name": "Guernsey",
+        "code": "gg",
+        "dailCode": "44",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "1481"
+        ],
+        "placeholder": "7781123456"
+    },
+    {
+        "name": "Guinea (Guinée)",
+        "code": "gn",
+        "dailCode": "224",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "601123456"
+    },
+    {
+        "name": "Guinea-Bissau (Guiné Bissau)",
+        "code": "gw",
+        "dailCode": "245",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "955012345"
+    },
+    {
+        "name": "Guyana",
+        "code": "gy",
+        "dailCode": "592",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "6091234"
+    },
+    {
+        "name": "Haiti",
+        "code": "ht",
+        "dailCode": "509",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "34101234"
+    },
+    {
+        "name": "Honduras",
+        "code": "hn",
+        "dailCode": "504",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "91234567"
+    },
+    {
+        "name": "Hong Kong (香港)",
+        "code": "hk",
+        "dailCode": "852",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "51234567"
+    },
+    {
+        "name": "Hungary (Magyarország)",
+        "code": "hu",
+        "dailCode": "36",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "201234567"
+    },
+    {
+        "name": "Iceland (Ísland)",
+        "code": "is",
+        "dailCode": "354",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "6111234"
+    },
+    {
+        "name": "India (भारत)",
+        "code": "in",
+        "dailCode": "91",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "8123456789"
+    },
+    {
+        "name": "Indonesia",
+        "code": "id",
+        "dailCode": "62",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "812345678"
+    },
+    {
+        "name": "Iran (ايران)",
+        "code": "ir",
+        "dailCode": "98",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "9123456789"
+    },
+    {
+        "name": "Iraq (العراق)",
+        "code": "iq",
+        "dailCode": "964",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "7912345678"
+    },
+    {
+        "name": "Ireland",
+        "code": "ie",
+        "dailCode": "353",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "850123456"
+    },
+    {
+        "name": "Isle of Man",
+        "code": "im",
+        "dailCode": "44",
+        "priority": 2,
+        "order": 0,
+        "areaCodes": [
+            "1624"
+        ],
+        "placeholder": "7924123456"
+    },
+    {
+        "name": "Italy (Italia)",
+        "code": "it",
+        "dailCode": "39",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "3123456789"
+    },
+    {
+        "name": "Jamaica",
+        "code": "jm",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "876"
+        ],
+        "placeholder": "8762101234"
+    },
+    {
+        "name": "Japan (日本)",
+        "code": "jp",
+        "dailCode": "81",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "9012345678"
+    },
+    {
+        "name": "Jersey",
+        "code": "je",
+        "dailCode": "44",
+        "priority": 3,
+        "order": 0,
+        "areaCodes": [
+            "1534"
+        ],
+        "placeholder": "7797712345"
+    },
+    {
+        "name": "Jordan (الأردن)",
+        "code": "jo",
+        "dailCode": "962",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "790123456"
+    },
+    {
+        "name": "Kazakhstan (Казахстан)",
+        "code": "kz",
+        "dailCode": "7",
+        "priority": 1,
+        "order": 0,
+        "placeholder": "7710009998"
+    },
+    {
+        "name": "Kenya",
+        "code": "ke",
+        "dailCode": "254",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "712123456"
+    },
+    {
+        "name": "Kiribati",
+        "code": "ki",
+        "dailCode": "686",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "72001234"
+    },
+    {
+        "name": "Kosovo",
+        "code": "xk",
+        "dailCode": "383",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "43201234"
+    },
+    {
+        "name": "Kuwait (الكويت)",
+        "code": "kw",
+        "dailCode": "965",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "50012345"
+    },
+    {
+        "name": "Kyrgyzstan (Кыргызстан)",
+        "code": "kg",
+        "dailCode": "996",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "700123456"
+    },
+    {
+        "name": "Laos (ລາວ)",
+        "code": "la",
+        "dailCode": "856",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "2023123456"
+    },
+    {
+        "name": "Latvia (Latvija)",
+        "code": "lv",
+        "dailCode": "371",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "21234567"
+    },
+    {
+        "name": "Lebanon (لبنان)",
+        "code": "lb",
+        "dailCode": "961",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "71123456"
+    },
+    {
+        "name": "Lesotho",
+        "code": "ls",
+        "dailCode": "266",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "50123456"
+    },
+    {
+        "name": "Liberia",
+        "code": "lr",
+        "dailCode": "231",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "770123456"
+    },
+    {
+        "name": "Libya (ليبيا)",
+        "code": "ly",
+        "dailCode": "218",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "912345678"
+    },
+    {
+        "name": "Liechtenstein",
+        "code": "li",
+        "dailCode": "423",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "660234567"
+    },
+    {
+        "name": "Lithuania (Lietuva)",
+        "code": "lt",
+        "dailCode": "370",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "61234567"
+    },
+    {
+        "name": "Luxembourg",
+        "code": "lu",
+        "dailCode": "352",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "628123456"
+    },
+    {
+        "name": "Macau (澳門)",
+        "code": "mo",
+        "dailCode": "853",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "66123456"
+    },
+    {
+        "name": "Macedonia (FYROM) (Македонија)",
+        "code": "mk",
+        "dailCode": "389",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "72345678"
+    },
+    {
+        "name": "Madagascar (Madagasikara)",
+        "code": "mg",
+        "dailCode": "261",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "321234567"
+    },
+    {
+        "name": "Malawi",
+        "code": "mw",
+        "dailCode": "265",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "991234567"
+    },
+    {
+        "name": "Malaysia",
+        "code": "my",
+        "dailCode": "60",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "123456789"
+    },
+    {
+        "name": "Maldives",
+        "code": "mv",
+        "dailCode": "960",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "7712345"
+    },
+    {
+        "name": "Mali",
+        "code": "ml",
+        "dailCode": "223",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "65012345"
+    },
+    {
+        "name": "Malta",
+        "code": "mt",
+        "dailCode": "356",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "96961234"
+    },
+    {
+        "name": "Marshall Islands",
+        "code": "mh",
+        "dailCode": "692",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "2351234"
+    },
+    {
+        "name": "Martinique",
+        "code": "mq",
+        "dailCode": "596",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "696201234"
+    },
+    {
+        "name": "Mauritania (موريتانيا)",
+        "code": "mr",
+        "dailCode": "222",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "22123456"
+    },
+    {
+        "name": "Mauritius (Moris)",
+        "code": "mu",
+        "dailCode": "230",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "52512345"
+    },
+    {
+        "name": "Mayotte",
+        "code": "yt",
+        "dailCode": "262",
+        "priority": 1,
+        "order": 0,
+        "placeholder": "639012345"
+    },
+    {
+        "name": "Mexico (México)",
+        "code": "mx",
+        "dailCode": "52",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "2221234567"
+    },
+    {
+        "name": "Micronesia",
+        "code": "fm",
+        "dailCode": "691",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "3501234"
+    },
+    {
+        "name": "Moldova (Republica Moldova)",
+        "code": "md",
+        "dailCode": "373",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "62112345"
+    },
+    {
+        "name": "Monaco",
+        "code": "mc",
+        "dailCode": "377",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "612345678"
+    },
+    {
+        "name": "Mongolia (Монгол)",
+        "code": "mn",
+        "dailCode": "976",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "88123456"
+    },
+    {
+        "name": "Montenegro (Crna Gora)",
+        "code": "me",
+        "dailCode": "382",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "67622901"
+    },
+    {
+        "name": "Montserrat",
+        "code": "ms",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "664"
+        ],
+        "placeholder": "6644923456"
+    },
+    {
+        "name": "Morocco (المغرب)",
+        "code": "ma",
+        "dailCode": "212",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "650123456"
+    },
+    {
+        "name": "Mozambique (Moçambique)",
+        "code": "mz",
+        "dailCode": "258",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "821234567"
+    },
+    {
+        "name": "Myanmar (Burma) (မြန်မာ)",
+        "code": "mm",
+        "dailCode": "95",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "92123456"
+    },
+    {
+        "name": "Namibia (Namibië)",
+        "code": "na",
+        "dailCode": "264",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "811234567"
+    },
+    {
+        "name": "Nauru",
+        "code": "nr",
+        "dailCode": "674",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "5551234"
+    },
+    {
+        "name": "Nepal (नेपाल)",
+        "code": "np",
+        "dailCode": "977",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "9841234567"
+    },
+    {
+        "name": "Netherlands (Nederland)",
+        "code": "nl",
+        "dailCode": "31",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "612345678"
+    },
+    {
+        "name": "New Caledonia (Nouvelle-Calédonie)",
+        "code": "nc",
+        "dailCode": "687",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "751234"
+    },
+    {
+        "name": "New Zealand",
+        "code": "nz",
+        "dailCode": "64",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "211234567"
+    },
+    {
+        "name": "Nicaragua",
+        "code": "ni",
+        "dailCode": "505",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "81234567"
+    },
+    {
+        "name": "Niger (Nijar)",
+        "code": "ne",
+        "dailCode": "227",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "93123456"
+    },
+    {
+        "name": "Nigeria",
+        "code": "ng",
+        "dailCode": "234",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "8021234567"
+    },
+    {
+        "name": "Niue",
+        "code": "nu",
+        "dailCode": "683",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "8884012"
+    },
+    {
+        "name": "Norfolk Island",
+        "code": "nf",
+        "dailCode": "672",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "381234"
+    },
+    {
+        "name": "North Korea (조선 민주주의 인민 공화국)",
+        "code": "kp",
+        "dailCode": "850",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "1921234567"
+    },
+    {
+        "name": "Northern Mariana Islands",
+        "code": "mp",
+        "dailCode": "1670",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "6702345678"
+    },
+    {
+        "name": "Norway (Norge)",
+        "code": "no",
+        "dailCode": "47",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "40612345"
+    },
+    {
+        "name": "Oman (عُمان)",
+        "code": "om",
+        "dailCode": "968",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "92123456"
+    },
+    {
+        "name": "Pakistan (پاکستان)",
+        "code": "pk",
+        "dailCode": "92",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "3012345678"
+    },
+    {
+        "name": "Palau",
+        "code": "pw",
+        "dailCode": "680",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "6201234"
+    },
+    {
+        "name": "Palestine (فلسطين)",
+        "code": "ps",
+        "dailCode": "970",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "599123456"
+    },
+    {
+        "name": "Panama (Panamá)",
+        "code": "pa",
+        "dailCode": "507",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "61234567"
+    },
+    {
+        "name": "Papua New Guinea",
+        "code": "pg",
+        "dailCode": "675",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "70123456"
+    },
+    {
+        "name": "Paraguay",
+        "code": "py",
+        "dailCode": "595",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "961456789"
+    },
+    {
+        "name": "Peru (Perú)",
+        "code": "pe",
+        "dailCode": "51",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "912345678"
+    },
+    {
+        "name": "Philippines",
+        "code": "ph",
+        "dailCode": "63",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "9051234567"
+    },
+    {
+        "name": "Poland (Polska)",
+        "code": "pl",
+        "dailCode": "48",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "512345678"
+    },
+    {
+        "name": "Portugal",
+        "code": "pt",
+        "dailCode": "351",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "912345678"
+    },
+    {
+        "name": "Puerto Rico",
+        "code": "pr",
+        "dailCode": "1",
+        "priority": 3,
+        "order": 0,
+        "areaCodes": [
+            "787",
+            "939"
+        ],
+        "placeholder": "7872345678"
+    },
+    {
+        "name": "Qatar (قطر)",
+        "code": "qa",
+        "dailCode": "974",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "33123456"
+    },
+    {
+        "name": "Réunion (La Réunion)",
+        "code": "re",
+        "dailCode": "262",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "692123456"
+    },
+    {
+        "name": "Romania (România)",
+        "code": "ro",
+        "dailCode": "40",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "712034567"
+    },
+    {
+        "name": "Russia (Россия)",
+        "code": "ru",
+        "dailCode": "7",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "9123456789"
+    },
+    {
+        "name": "Rwanda",
+        "code": "rw",
+        "dailCode": "250",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "720123456"
+    },
+    {
+        "name": "Saint Barthélemy (Saint-Barthélemy)",
+        "code": "bl",
+        "dailCode": "590",
+        "priority": 1,
+        "order": 0,
+        "placeholder": "690001234"
+    },
+    {
+        "name": "Saint Helena",
+        "code": "sh",
+        "dailCode": "290",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "51234"
+    },
+    {
+        "name": "Saint Kitts and Nevis",
+        "code": "kn",
+        "dailCode": "1869",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "8697652917"
+    },
+    {
+        "name": "Saint Lucia",
+        "code": "lc",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "758"
+        ],
+        "placeholder": "7582845678"
+    },
+    {
+        "name": "Saint Martin (Saint-Martin (partie française))",
+        "code": "mf",
+        "dailCode": "590",
+        "priority": 2,
+        "order": 0,
+        "placeholder": "690001234"
+    },
+    {
+        "name": "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)",
+        "code": "pm",
+        "dailCode": "508",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "551234"
+    },
+    {
+        "name": "Saint Vincent and the Grenadines",
+        "code": "vc",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "784"
+        ],
+        "placeholder": "7844301234"
+    },
+    {
+        "name": "Samoa",
+        "code": "ws",
+        "dailCode": "685",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "7212345"
+    },
+    {
+        "name": "San Marino",
+        "code": "sm",
+        "dailCode": "378",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "66661212"
+    },
+    {
+        "name": "São Tomé and Príncipe (São Tomé e Príncipe)",
+        "code": "st",
+        "dailCode": "239",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "9812345"
+    },
+    {
+        "name": "Saudi Arabia (المملكة العربية السعودية)",
+        "code": "sa",
+        "dailCode": "966",
+        "priority": 0,
+        "order": 1,
+        "placeholder": "512345678"
+    },
+    {
+        "name": "Senegal (Sénégal)",
+        "code": "sn",
+        "dailCode": "221",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "701234567"
+    },
+    {
+        "name": "Serbia (Србија)",
+        "code": "rs",
+        "dailCode": "381",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "601234567"
+    },
+    {
+        "name": "Seychelles",
+        "code": "sc",
+        "dailCode": "248",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "2510123"
+    },
+    {
+        "name": "Sierra Leone",
+        "code": "sl",
+        "dailCode": "232",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "25123456"
+    },
+    {
+        "name": "Singapore",
+        "code": "sg",
+        "dailCode": "65",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "81234567"
+    },
+    {
+        "name": "Sint Maarten",
+        "code": "sx",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "721"
+        ],
+        "placeholder": "7215205678"
+    },
+    {
+        "name": "Slovakia (Slovensko)",
+        "code": "sk",
+        "dailCode": "421",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "912123456"
+    },
+    {
+        "name": "Slovenia (Slovenija)",
+        "code": "si",
+        "dailCode": "386",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "31234567"
+    },
+    {
+        "name": "Solomon Islands",
+        "code": "sb",
+        "dailCode": "677",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "7421234"
+    },
+    {
+        "name": "Somalia (Soomaaliya)",
+        "code": "so",
+        "dailCode": "252",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "71123456"
+    },
+    {
+        "name": "South Africa",
+        "code": "za",
+        "dailCode": "27",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "711234567"
+    },
+    {
+        "name": "South Korea (대한민국)",
+        "code": "kr",
+        "dailCode": "82",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "1020000000"
+    },
+    {
+        "name": "South Sudan (جنوب السودان)",
+        "code": "ss",
+        "dailCode": "211",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "977123456"
+    },
+    {
+        "name": "Spain (España)",
+        "code": "es",
+        "dailCode": "34",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "612345678"
+    },
+    {
+        "name": "Sri Lanka (ශ්‍රී ලංකාව)",
+        "code": "lk",
+        "dailCode": "94",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "712345678"
+    },
+    {
+        "name": "Sudan (السودان)",
+        "code": "sd",
+        "dailCode": "249",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "911231234"
+    },
+    {
+        "name": "Suriname",
+        "code": "sr",
+        "dailCode": "597",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "7412345"
+    },
+    {
+        "name": "Svalbard and Jan Mayen",
+        "code": "sj",
+        "dailCode": "47",
+        "priority": 1,
+        "order": 0,
+        "placeholder": "41234567"
+    },
+    {
+        "name": "Swaziland",
+        "code": "sz",
+        "dailCode": "268",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "76123456"
+    },
+    {
+        "name": "Sweden (Sverige)",
+        "code": "se",
+        "dailCode": "46",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "701234567"
+    },
+    {
+        "name": "Switzerland (Schweiz)",
+        "code": "ch",
+        "dailCode": "41",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "781234567"
+    },
+    {
+        "name": "Syria (سوريا)",
+        "code": "sy",
+        "dailCode": "963",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "944567890"
+    },
+    {
+        "name": "Taiwan (台灣)",
+        "code": "tw",
+        "dailCode": "886",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "912345678"
+    },
+    {
+        "name": "Tajikistan",
+        "code": "tj",
+        "dailCode": "992",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "917123456"
+    },
+    {
+        "name": "Tanzania",
+        "code": "tz",
+        "dailCode": "255",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "621234567"
+    },
+    {
+        "name": "Thailand (ไทย)",
+        "code": "th",
+        "dailCode": "66",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "812345678"
+    },
+    {
+        "name": "Timor-Leste",
+        "code": "tl",
+        "dailCode": "670",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "77212345"
+    },
+    {
+        "name": "Togo",
+        "code": "tg",
+        "dailCode": "228",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "90112345"
+    },
+    {
+        "name": "Tokelau",
+        "code": "tk",
+        "dailCode": "690",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "7290"
+    },
+    {
+        "name": "Tonga",
+        "code": "to",
+        "dailCode": "676",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "7715123"
+    },
+    {
+        "name": "Trinidad and Tobago",
+        "code": "tt",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "868"
+        ],
+        "placeholder": "8682911234"
+    },
+    {
+        "name": "Tunisia (تونس)",
+        "code": "tn",
+        "dailCode": "216",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "20123456"
+    },
+    {
+        "name": "Turkey (Türkiye)",
+        "code": "tr",
+        "dailCode": "90",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "5012345678"
+    },
+    {
+        "name": "Turkmenistan",
+        "code": "tm",
+        "dailCode": "993",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "66123456"
+    },
+    {
+        "name": "Turks and Caicos Islands",
+        "code": "tc",
+        "dailCode": "1649",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "6492311234"
+    },
+    {
+        "name": "Tuvalu",
+        "code": "tv",
+        "dailCode": "688",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "901234"
+    },
+    {
+        "name": "U.S. Virgin Islands",
+        "code": "vi",
+        "dailCode": "1",
+        "priority": 1,
+        "order": 0,
+        "areaCodes": [
+            "340"
+        ],
+        "placeholder": "3406421234"
+    },
+    {
+        "name": "Uganda",
+        "code": "ug",
+        "dailCode": "256",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "712345678"
+    },
+    {
+        "name": "Ukraine (Україна)",
+        "code": "ua",
+        "dailCode": "380",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "501234567"
+    },
+    {
+        "name": "United Arab Emirates (الإمارات العربية المتحدة)",
+        "code": "ae",
+        "dailCode": "971",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "501234567"
+    },
+    {
+        "name": "United Kingdom",
+        "code": "gb",
+        "dailCode": "44",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "7400123456"
+    },
+    {
+        "name": "United States",
+        "code": "us",
+        "dailCode": "1",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "2015550123"
+    },
+    {
+        "name": "Uruguay",
+        "code": "uy",
+        "dailCode": "598",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "94231234"
+    },
+    {
+        "name": "Uzbekistan (Oʻzbekiston)",
+        "code": "uz",
+        "dailCode": "998",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "912345678"
+    },
+    {
+        "name": "Vanuatu",
+        "code": "vu",
+        "dailCode": "678",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "5912345"
+    },
+    {
+        "name": "Vatican City (Città del Vaticano)",
+        "code": "va",
+        "dailCode": "39",
+        "priority": 1,
+        "order": 0,
+        "placeholder": "3123456789"
+    },
+    {
+        "name": "Venezuela",
+        "code": "ve",
+        "dailCode": "58",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "4121234567"
+    },
+    {
+        "name": "Vietnam (Việt Nam)",
+        "code": "vn",
+        "dailCode": "84",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "912345678"
+    },
+    {
+        "name": "Wallis and Futuna",
+        "code": "wf",
+        "dailCode": "681",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "821234"
+    },
+    {
+        "name": "Yemen (اليمن)",
+        "code": "ye",
+        "dailCode": "967",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "712345678"
+    },
+    {
+        "name": "Zambia",
+        "code": "zm",
+        "dailCode": "260",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "955123456"
+    },
+    {
+        "name": "Zimbabwe",
+        "code": "zw",
+        "dailCode": "263",
+        "priority": 0,
+        "order": 0,
+        "placeholder": "712345678"
+    },
+    {
+        "name": "Åland Islands",
+        "code": "ax",
+        "dailCode": "358",
+        "priority": 1,
+        "order": 0,
+        "placeholder": "412345678"
+    }
+];
+
+class PhoneService {
+    #phoneUtil = PhoneNumberUtil.getInstance();
+    parse(phoneNumber, countryCode) {
+        let number = undefined;
+        try {
+            number = this.#phoneUtil.parse(phoneNumber, countryCode);
+        }
+        catch (e) { }
+        return number;
+    }
+    getPhoneNumberObject(number) {
+        const parsedNumber = this.parse(number);
+        if (parsedNumber) {
+            const dailCode = this.#getCountryDailCode(parsedNumber);
+            const code = this.getCountryIsoCode(dailCode, parsedNumber);
+            const nationalNumber = parsedNumber.getNationalNumberOrDefault().toString();
+            const internationalNumber = this.format(number, code, PhoneNumberFormat.E164);
+            const placeholder = this.getPlaceholder(code);
+            const name = this.getCountryByDailCode(dailCode, parsedNumber)?.name ?? "";
+            return { dailCode, code, nationalNumber, internationalNumber, placeholder, name, priority: 0, order: 0 };
+        }
+        return;
+    }
+    format(phoneNumber, countryCode, numberFormat) {
+        const number = this.parse(phoneNumber, countryCode);
+        if (number) {
+            return this.#phoneUtil.format(number, numberFormat);
+        }
+        return "";
+    }
+    validate(number) {
+        let isValid;
+        try {
+            // 1 for mobile. for more https://libphonenumbers.js.org/docs/getNumberType/
+            if (this.#phoneUtil.getNumberType(this.#phoneUtil.parseAndKeepRawInput(number)) !== 1) {
+                isValid = false;
+            }
+            else {
+                isValid = this.#phoneUtil.isValidNumber(this.#phoneUtil.parseAndKeepRawInput(number));
+            }
+        }
+        catch (e) {
+            isValid = false;
+        }
+        return isValid;
+    }
+    getPlaceholder(countryCode) {
+        // @ts-ignore
+        return this.#phoneUtil.getMetadataForRegion(countryCode).values_[3][6];
+    }
+    getCountryIsoCode(dailCode, number) {
+        return this.getCountryByDailCode(dailCode, number)?.code ?? "";
+    }
+    getCountryByDailCode(dailCode, number) {
+        // Will use this to match area code from the first numbers
+        const rawNumber = this.#getPhoneNumberValues(number)["2"].toString();
+        // List of all countries with dailCode (can be more than one. e.x. US, CA, DO, PR all have +1 dailCode)
+        const countries = COUNTRIES.filter((c) => c.dailCode === dailCode?.toString());
+        // Main country is the country, which has no areaCodes specified in country-code.ts file.
+        const mainCountry = countries.find((c) => c.areaCodes === undefined);
+        // Secondary countries are all countries, which have areaCodes specified in country-code.ts file.
+        const secondaryCountries = countries.filter((c) => c.areaCodes !== undefined);
+        let matchedCountry = mainCountry ? mainCountry : undefined;
+        /*
+          Iterate over each secondary country and check if nationalNumber starts with any of areaCodes available.
+          If no matches found, fallback to the main country.
+        */
+        secondaryCountries.forEach((country) => {
+            if (country && country.areaCodes) {
+                country.areaCodes.forEach((areaCode) => {
+                    if (rawNumber.startsWith(areaCode)) {
+                        matchedCountry = country;
+                    }
+                });
+            }
+        });
+        return matchedCountry;
+    }
+    #getCountryDailCode(number) {
+        return this.#getPhoneNumberValues(number)?.["1"].toString() ?? "";
+    }
+    #getPhoneNumberValues(number) {
+        // @ts-ignore
+        return number?.["values_"];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PhoneService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PhoneService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PhoneService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }] });
+
+const DEFAULT_COUNTRY = {
+    name: "Saudi Arabia (المملكة العربية السعودية)",
+    code: "sa",
+    dailCode: "966",
+    priority: 0,
+    order: 1000,
+    placeholder: "512345678"
+};
+class MobileComponent extends BaseCtrl {
+    constructor() {
+        super(...arguments);
+        this.phoneService = inject(PhoneService);
+        this.isOpen = signal(false);
+        this.selectedCountry = signal(DEFAULT_COUNTRY);
+        this.preferredCountries = input(["sa"]);
+        this.searchInput = new FormControl("");
+        this.filteredCountries = computed(() => this.#searchInCountries());
+        this.#ctrlChanges = toSignal(this.ctrl.valueChanges);
+        this.#searchQuery = toSignal(this.searchInput.valueChanges);
+    }
+    #ctrlChanges;
+    #searchQuery;
+    writeValue(value) {
+        if (value) {
+            const mobileObject = this.phoneService.getPhoneNumberObject(value);
+            if (mobileObject) {
+                this.selectedCountry.set(mobileObject);
+                this.emitOnChangeEvent(this.selectedCountry());
+            }
+            this.ctrl.setValue(mobileObject?.nationalNumber);
+        }
+    }
+    emit() {
+        if (this.#ctrlChanges()) {
+            const numberObject = this.phoneService.getPhoneNumberObject(`+${this.selectedCountry().dailCode}${this.#ctrlChanges()}`);
+            if (numberObject) {
+                this.selectedCountry.set(numberObject);
+                this.propagateValue(`+${numberObject.dailCode}${numberObject.nationalNumber}`);
+                this.emitOnChangeEvent(this.selectedCountry());
+            }
+        }
+        else {
+            this.propagateValue(null);
+            this.emitOnChangeEvent(null);
+        }
+    }
+    validate(control) {
+        if (!control.getRawValue()) {
+            return null;
+        }
+        let error = { invalidPhoneNumber: { accepted: this.selectedCountry().placeholder, input: control.getRawValue() } };
+        let isValid = this.phoneService.validate(control.getRawValue());
+        if (isValid) {
+            return null;
+        }
+        return error;
+    }
+    onInput(event) {
+        const allowedChars = /[0-9+\-()]/;
+        const allowedCtrlChars = /[axcv]/; // Allows copy-pasting
+        const allowedOtherKeys = [
+            "ArrowLeft",
+            "ArrowUp",
+            "ArrowRight",
+            "ArrowDown",
+            "Home",
+            "End",
+            "Insert",
+            "Delete",
+            "Backspace",
+        ];
+        if (!allowedChars.test(event.key) && !(event.ctrlKey && allowedCtrlChars.test(event.key)) && !allowedOtherKeys.includes(event.key)) {
+            event.preventDefault();
+        }
+    }
+    onSelectCountry(country) {
+        this.selectedCountry.set(country);
+        this.searchInput.setValue("");
+        this.closeCountryCodeMenu();
+        this.propagateValue(`+${this.selectedCountry().dailCode}${this.#ctrlChanges()}`);
+        this.emitOnChangeEvent(`+${this.selectedCountry().dailCode}${this.#ctrlChanges()}`);
+    }
+    closeCountryCodeMenu() {
+        this.isOpen.set(false);
+    }
+    toggleCountryCodeMenu() {
+        this.isOpen.update((isOpen) => !isOpen);
+    }
+    #sortCountries() {
+        return COUNTRIES.map((country) => {
+            if (this.preferredCountries().includes(country.code)) {
+                country.order = country.priority + (-1 * (this.preferredCountries().indexOf(country.code) - this.preferredCountries().length)) * 100;
+            }
+            return country;
+        }).sort((a, b) => b.order - a.order);
+    }
+    #searchInCountries() {
+        if (this.#searchQuery()) {
+            return this.#sortCountries().filter((country) => {
+                return (country.code.toLowerCase().includes(this.#searchQuery())
+                    || country.name.toLowerCase().includes(this.#searchQuery())
+                    || country.dailCode.toLowerCase().includes(this.#searchQuery()));
+            });
+        }
+        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 }
+        ], 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: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-mobile", standalone: true, imports: [
+                        ReactiveFormsModule,
+                        NgClass,
+                        CdkConnectedOverlay,
+                        CdkOverlayOrigin,
+                        MatFormField,
+                        MatInput,
+                        MatPrefix,
+                        NgOptimizedImage
+                    ], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: MobileComponent, multi: true },
+                        { provide: NG_VALIDATORS, useExisting: MobileComponent, 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 }
+        ], 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: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-note", standalone: true, imports: [], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: NoteComponent, multi: true }
+                    ], template: "<p>note works!</p>\r\n" }]
+        }] });
+
+class PlateNumberComponent extends BaseCtrl {
+    constructor() {
+        super(...arguments);
+        this.plate = new FormGroup({
+            numbers: new FormArray([
+                new FormControl(null),
+                new FormControl(null),
+                new FormControl(null),
+                new FormControl(null),
+            ]),
+            letters: new FormArray([
+                new FormControl(null),
+                new FormControl(null),
+                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(""));
+        this.#numbersArr = computed(() => this.#plateChanges()["numbers"].filter((l) => l));
+        this.#numbers = computed(() => this.#numbersArr().join(""));
+        this.#plateHasValue = computed(() => !!(this.#letters().length && this.#numbers().length));
+        this.#effectRef = effect(() => {
+            if (this.#plateChanges()) {
+                this.propagateValue(this.#getEmissionValue());
+                this.emitOnChangeEvent({ letters: this.#lettersArr(), numbers: this.#numbersArr() });
+            }
+        });
+    }
+    #plateChanges;
+    #lettersArr;
+    #letters;
+    #numbersArr;
+    #numbers;
+    #plateHasValue;
+    #effectRef;
+    get letterControls() {
+        return this.plate.controls["letters"].controls;
+    }
+    get numberControls() {
+        return this.plate.controls["numbers"].controls;
+    }
+    writeValue(value) {
+        let processedValue = this.#splitPlateValues(value);
+        if (processedValue) {
+            this.plate.patchValue(processedValue);
+        }
+    }
+    ngOnDestroy() {
+        this.#effectRef.destroy();
+    }
+    #getEmissionValue() {
+        if (this.#plateHasValue()) {
+            return `${this.#letters()}-${this.#numbers()}`;
+        }
+        return null;
+    }
+    #splitPlateValues(value) {
+        if (value) {
+            let lettersAndNumbers = value.split("-");
+            let letters = lettersAndNumbers[0].split("");
+            let numbers = lettersAndNumbers[1].split("");
+            return { letters, numbers };
+        }
+        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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PlateNumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-plate-number", standalone: true, imports: [
+                        MatFormField,
+                        ReactiveFormsModule,
+                        MatInput,
+                        MatSelect,
+                        MatOption,
+                        NgTemplateOutlet
+                    ], 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" }]
+        }] });
+
+class RadioComponent extends BaseCtrl {
+    constructor() {
+        super(...arguments);
+        this.options = input.required();
+    }
+    writeValue(value) {
+        if (value === null || value === undefined) {
+            return;
+        }
+        const values = value.split(",").map(val => val.trim());
+        if (values.length > 1) {
+            this.emitValue(null);
+            throw new Error("You cannot set multiple values while the control is in single selection mode!");
+        }
+        this.ctrl.setValue(value);
+    }
+    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 }
+        ], 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: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-radio", standalone: true, imports: [
+                        MatRadioModule,
+                        ReactiveFormsModule,
+                    ], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, 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 SelectComponent extends BaseCtrl {
+    constructor() {
+        super(...arguments);
+        this.selectedOptions = signal(new Map());
+        this.options = input.required();
+        this.query = toSignal(this.ctrl.valueChanges);
+        this.filteredOptions = computed(() => this.#filter(this.query()));
+        this.displayFn = (options) => {
+            if (Array.isArray(options) && !this.multiple()) {
+                /*const selectedLabel: string[] = options.map((o) => o.label);
+                if (this.multiple() && selectedLabel.length > 1) {
+                  str += ` + ${selectedLabel.length - 1}`;
+                }*/
+                return options[0].label;
+            }
+            return "";
+        };
+    }
+    writeValue(value) {
+        this.#reset();
+        if (value === null || value === undefined) {
+            return;
+        }
+        const values = value.split(",").map(val => val.trim());
+        let selectedOptions = this.options().filter((option) => values.includes(option.value));
+        if (!this.multiple()) {
+            if (selectedOptions.length > 1) {
+                this.emitValue(null);
+                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.ctrl.setValue(selectedOptions);
+    }
+    stringifySelectedOptions() {
+        if (!this.selectedOptions()?.size) {
+            return null;
+        }
+        return Array.from(this.selectedOptions(), ([value]) => value).join();
+    }
+    getEmissionValue($event) {
+        this.addToSelectedOptionsMap($event?.option.value);
+        this.emitValue(this.stringifySelectedOptions());
+    }
+    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());
+    }
+    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));
+        }
+    }
+    clearSelection() {
+        this.#reset();
+        this.emitOnChangeEvent(null);
+        this.emitValue(null);
+    }
+    #filter(queryString) {
+        if (queryString === null || queryString === undefined || typeof queryString !== "string") {
+            return JSON.parse(JSON.stringify(this.options()));
+        }
+        const query = queryString.toLowerCase();
+        const filteredOptions = this.options().filter((option) => {
+            return (option.value.toLowerCase().includes(query) || option.label.toLowerCase().includes(query));
+        });
+        return JSON.parse(JSON.stringify(filteredOptions));
+    }
+    #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: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SelectComponent, isStandalone: true, selector: "iss-ctrl-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true },
+            { provide: NG_VALIDATORS, useExisting: SelectComponent, 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-select", standalone: true, imports: [
+                        ReactiveFormsModule,
+                        MatAutocompleteModule,
+                        MatInputModule,
+                        MatChipsModule,
+                        MatIconModule,
+                        NgClass,
+                        SelectStatusPipe,
+                        JsonPipe,
+                    ], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true },
+                        { provide: NG_VALIDATORS, useExisting: SelectComponent, 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"] }]
+        }] });
+
+class SlideToggleComponent 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 }
+        ], 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: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-slide-toggle", standalone: true, imports: [MatSlideToggleModule, ReactiveFormsModule], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: SlideToggleComponent, 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 }
+        ], 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: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-ctrl-array", standalone: true, imports: [], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: CtrlArrayComponent, 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: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TextareaComponent, 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" }]
+        }] });
+
+class ToggleButtonComponent extends BaseCtrl {
+    constructor() {
+        super(...arguments);
+        this.options = input.required();
+        this.selectedOptions = signal(new Map());
+    }
+    writeValue(value) {
+        this.#reset();
+        if (value === null || value === undefined) {
+            return;
+        }
+        const values = value.split(",").map((val) => val.trim());
+        let selectedOptions = this.options().filter((option) => values.includes(option.value));
+        if (!this.multiple()) {
+            if (selectedOptions.length > 1) {
+                this.emitValue(null);
+                throw new Error("You cannot set multiple values while the control is in single selection mode!");
+            }
+            this.ctrl.setValue(values[0]);
+            this.addToSelectedOptionsMap(this.#selectedOptionsMapFactory([selectedOptions[0]]));
+            return;
+        }
+        this.addToSelectedOptionsMap(this.#selectedOptionsMapFactory(selectedOptions));
+        this.ctrl.setValue(values);
+    }
+    addToSelectedOptionsMap(option) {
+        if (option) {
+            this.selectedOptions = signal(option);
+        }
+    }
+    onToggleButtonChange(checked, value) {
+        if (!this.multiple()) {
+            this.emitValue(value);
+        }
+        else {
+            const option = this.options().find(option => option.value == value);
+            this.selectedOptions.update((prev) => {
+                const options = prev;
+                if (checked)
+                    options.set(option?.value, option);
+                else
+                    options.delete(option?.value);
+                return options;
+            });
+            this.getEmissionValue(this.selectedOptions());
+        }
+    }
+    stringifySelectedOptions() {
+        if (!this.selectedOptions()?.size) {
+            return null;
+        }
+        return Array.from(this.selectedOptions(), ([value]) => value).join();
+    }
+    getEmissionValue(options) {
+        this.addToSelectedOptionsMap(options);
+        this.emitValue(this.stringifySelectedOptions());
+    }
+    #selectedOptionsMapFactory(selectedOptions) {
+        let selectedOptionsMap = new Map();
+        for (let option of selectedOptions) {
+            selectedOptionsMap.set(option.value, option);
+        }
+        return selectedOptionsMap;
+    }
+    #reset() {
+        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 }
+        ], 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: [{
+            type: Component,
+            args: [{ selector: "iss-ctrl-toggle-button", standalone: true, imports: [MatButtonToggleModule, ReactiveFormsModule], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: ToggleButtonComponent, 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"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AutocompleteComponent, CheckboxComponent, ChipsComponent, CtrlArrayComponent, DEFAULT_COUNTRY, DatePickerComponent, DateRangePickerComponent, DatetimePickerComponent, DatetimeRangePickerComponent, FilePickerComponent, InputComponent, MobileComponent, NoteComponent, PlateNumberComponent, RadioComponent, SelectComponent, SlideToggleComponent, TextareaComponent, TimePickerComponent, ToggleButtonComponent };
+//# sourceMappingURL=iss-ctrl.mjs.map