iss-ctrl 0.0.2-beta-2 → 0.0.3

package/fesm2022/iss-ctrl.mjs

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