nexheal-lib 0.0.2 → 0.0.3

package/fesm2022/nexheal-lib.mjs

@@ -1,2837 +0,0 @@
-import * as i1 from '@angular/common';
-import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
-import * as i0 from '@angular/core';
-import { EventEmitter, ViewChild, Input, Output, Component, forwardRef, HostListener, inject, ElementRef, DestroyRef, Directive } from '@angular/core';
-import * as i2 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { Subscription, debounceTime, distinctUntilChanged, fromEvent, Subject } from 'rxjs';
-import { createPopper } from '@popperjs/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-
-class AutocompleteControl {
-    subscription = new Subscription();
-    title;
-    required = false;
-    placeholder = "";
-    customClass;
-    clearVal = true;
-    field = "";
-    error = false;
-    errorMessage = "";
-    autocomplete = "";
-    inputLoader = false;
-    isAddNewItem = false;
-    optionDisplayProperty = "displayname";
-    optionSelected = new EventEmitter();
-    search = new EventEmitter();
-    selectionCleared = new EventEmitter();
-    addNewItemClicked = new EventEmitter();
-    blurEvent = new EventEmitter();
-    optionPatched = new EventEmitter();
-    _disabled = false;
-    _options = [];
-    set options(value) {
-        this._options = value || [];
-        this.processValueBuffer();
-    }
-    get options() {
-        return this._options;
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = value;
-        if (this.inputControl) {
-            if (value) {
-                this.inputControl.disable();
-            }
-            else {
-                this.inputControl.enable();
-            }
-        }
-    }
-    valueBuffer = null;
-    popperInstance;
-    preventDropdownReopen = false;
-    preventClearOnBlur = false;
-    onChange = () => { };
-    onTouched = () => { };
-    inputElement;
-    dropdownElement;
-    inputControl = new FormControl("");
-    isDropdownOpen = false;
-    hasFocus = false;
-    selectedItems;
-    filteredSuggestions = [];
-    highlightedIndex = null;
-    constructor() {
-        this.inputControl.valueChanges
-            .pipe(debounceTime(10), distinctUntilChanged())
-            .subscribe((value) => {
-            if (this.preventDropdownReopen) {
-                this.preventDropdownReopen = false;
-                return;
-            }
-            if (value && value.trim().length > 0) {
-                const filterValue = value;
-                this.filterSuggestions(filterValue);
-                this.search.emit(filterValue);
-            }
-            else {
-                this.isDropdownOpen = false;
-            }
-        });
-    }
-    ngOnInit() {
-        this.inputControl.markAsPristine();
-    }
-    ngAfterViewInit() {
-        this.createPopperInstance();
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-        if (this.popperInstance) {
-            this.popperInstance.destroy();
-        }
-    }
-    writeValue(value) {
-        this.preventDropdownReopen = true;
-        if (value == null) {
-            // Clear everything if we get null
-            this.valueBuffer = null;
-            this.selectedItems = null;
-            this.preventDropdownReopen = true;
-            this.inputControl.setValue("", { emitEvent: false });
-        }
-        else {
-            // Otherwise, treat as normal
-            this.valueBuffer = value;
-            this.processValueBuffer();
-        }
-    }
-    processValueBuffer() {
-        if (this.valueBuffer == null) {
-            this.selectedItems = null;
-            this.preventDropdownReopen = true;
-            // this.inputControl.setValue("", { emitEvent: false });
-            return;
-        }
-        if (this._options && this._options.length > 0) {
-            const matchedSuggestion = this._options.find((s) => s.id === this.valueBuffer);
-            if (matchedSuggestion) {
-                this.preventDropdownReopen = true;
-                this.inputControl.setValue(matchedSuggestion[this.optionDisplayProperty], { emitEvent: false });
-                this.selectedItems = matchedSuggestion;
-                this.onChange(matchedSuggestion.id);
-                this.optionPatched.emit(matchedSuggestion);
-                this.valueBuffer = null;
-                return;
-            }
-        }
-        this.inputControl.setValue("", { emitEvent: false });
-        this.selectedItems = null;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        if (isDisabled) {
-            this.inputControl.disable();
-        }
-        else {
-            this.inputControl.enable();
-        }
-    }
-    filterSuggestions(value) {
-        if (this.preventDropdownReopen || !this.hasFocus) {
-            this.preventDropdownReopen = false;
-            return;
-        }
-        if (value === "") {
-            this.filteredSuggestions = [];
-            this.isDropdownOpen = false;
-            return;
-        }
-        const filterValue = value.toString().toLowerCase();
-        this.filteredSuggestions = this.options.filter((suggestion) => suggestion[this.optionDisplayProperty]
-            ?.toLowerCase()
-            .includes(filterValue));
-        this.highlightedIndex = this.filteredSuggestions.length > 0 ? 0 : null;
-        this.isDropdownOpen = true;
-        setTimeout(() => {
-            this.createPopperInstance();
-        }, 0);
-    }
-    selectSuggestion(suggestion) {
-        this.preventDropdownReopen = true;
-        this.inputControl.setValue(suggestion[this.optionDisplayProperty], {
-            emitEvent: false,
-        });
-        this.onChange(suggestion.id);
-        this.inputControl.markAsTouched();
-        this.inputControl.updateValueAndValidity(); // Trigger validation update
-        this.isDropdownOpen = false;
-        if (this.selectedItems?.id !== suggestion.id) {
-            this.selectedItems = suggestion;
-            this.optionSelected.emit(suggestion);
-        }
-    }
-    // events
-    onFocus() {
-        this.hasFocus = true;
-    }
-    onBlur() {
-        this.blurEvent.emit();
-        this.onTouched();
-        // Delay onBlur handling so that mousedown and click can occur first.
-        setTimeout(() => {
-            this.hasFocus = false;
-            this.isDropdownOpen = false;
-            // If an option click is in progress, do not clear the input.
-            if (!this.preventClearOnBlur) {
-                // Optionally: check if the current value is valid against options.
-                // If not found, clear the input.
-                const currentValue = this.inputControl.value;
-                const found = this._options.find((opt) => String(opt[this.optionDisplayProperty]).toLowerCase() ===
-                    String(currentValue).toLowerCase());
-                if (!found) {
-                    this.inputControl.setValue("");
-                    this.selectedItems = null;
-                    this.onChange(null);
-                }
-            }
-            // Reset the flag after handling blur.
-            this.preventClearOnBlur = false;
-        }, 300);
-    }
-    onKeyDown(event) {
-        if (!this.isDropdownOpen) {
-            return;
-        }
-        switch (event.key) {
-            case "ArrowDown":
-                this.highlightedIndex =
-                    this.highlightedIndex === null ||
-                        this.highlightedIndex === this.filteredSuggestions.length - 1
-                        ? 0
-                        : this.highlightedIndex + 1;
-                event.preventDefault();
-                this.scrollHighlightedItemIntoView();
-                break;
-            case "ArrowUp":
-                this.highlightedIndex =
-                    this.highlightedIndex === null || this.highlightedIndex === 0
-                        ? this.filteredSuggestions.length - 1
-                        : this.highlightedIndex - 1;
-                event.preventDefault();
-                this.scrollHighlightedItemIntoView();
-                break;
-            case "Enter":
-                if (this.highlightedIndex !== null &&
-                    this.filteredSuggestions.length > 0) {
-                    this.selectSuggestion(this.filteredSuggestions[this.highlightedIndex]);
-                }
-                else {
-                    this.isDropdownOpen = false;
-                }
-                event.preventDefault();
-                break;
-            case "Escape":
-                this.isDropdownOpen = false;
-                break;
-            default:
-                break;
-        }
-    }
-    onOptionMouseDown() {
-        this.preventClearOnBlur = true;
-    }
-    onMouseOver(index) {
-        this.highlightedIndex = index;
-    }
-    // actions
-    onAddNewItemClick() {
-        this.addNewItemClicked.emit();
-    }
-    // popper
-    createPopperInstance() {
-        if (this.popperInstance) {
-            this.popperInstance.destroy();
-        }
-        if (this.inputElement && this.dropdownElement) {
-            this.popperInstance = createPopper(this.inputElement.nativeElement, this.dropdownElement.nativeElement, {
-                placement: "bottom-start",
-                modifiers: [
-                    {
-                        name: "offset",
-                        options: {
-                            offset: [0, 1],
-                        },
-                    },
-                    {
-                        name: "flip",
-                        options: {
-                            fallbackPlacements: ["top-start", "bottom-start"],
-                        },
-                    },
-                ],
-            });
-        }
-    }
-    scrollHighlightedItemIntoView() {
-        if (this.highlightedIndex !== null) {
-            const highlightedItem = this.dropdownElement.nativeElement.querySelectorAll(".list-item")[this.highlightedIndex];
-            if (highlightedItem) {
-                highlightedItem.scrollIntoView({ block: "nearest" });
-            }
-        }
-    }
-    // clear
-    resetInput() {
-        this.inputControl.setValue("");
-        this.selectionCleared.emit();
-        this.selectedItems = null;
-        this.valueBuffer = null;
-    }
-    removeItem(item) {
-        this.selectedItems = this.selectedItems.filter((i) => i !== item);
-        this.onChange(this.selectedItems);
-        this.optionSelected.emit(this.selectedItems);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AutocompleteControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AutocompleteControl, isStandalone: true, selector: "autocomplete-control", inputs: { title: "title", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", field: "field", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", inputLoader: "inputLoader", isAddNewItem: "isAddNewItem", optionDisplayProperty: "optionDisplayProperty", options: "options", disabled: "disabled" }, outputs: { optionSelected: "optionSelected", search: "search", selectionCleared: "selectionCleared", addNewItemClicked: "addNewItemClicked", blurEvent: "blurEvent", optionPatched: "optionPatched" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: AutocompleteControl,
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], ngImport: i0, template: "<div class=\"form-group auto-complete\" [ngClass]=\"customClass\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n    (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" [ngClass]=\"{'is-invalid': error}\"\r\n    [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n  <span class=\"focus-border\"></span>\r\n\r\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\r\n  <label class=\"clear\" (click)=\"resetInput()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n  @if (isDropdownOpen) {\r\n  <div #dropdownElement class=\"option-list\">\r\n    @if (filteredSuggestions.length === 0) {\r\n    <div class=\"no-results\">\r\n      <div>No results found</div>\r\n      @if (isAddNewItem) {\r\n      <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">\r\n        Add New Item\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    @for (suggestion of filteredSuggestions; track suggestion[optionDisplayProperty]; let i = $index) {\r\n    <div class=\"list-item\" [ngClass]=\"{\r\n                'active': suggestion === selectedItems,\r\n                'highlighted': highlightedIndex === i\r\n              }\" (mousedown)=\"onOptionMouseDown()\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n      @if (suggestion.countryCode) {\r\n      <img src=\"https://flagcdn.com/w80/{{ suggestion.countryCode }}.png\" width=\"20\"\r\n        alt=\"{{ suggestion.countryCode }} flag\" loading=\"lazy\" />\r\n      }\r\n      {{ suggestion[optionDisplayProperty] }}\r\n    </div>\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group.auto-complete .form-control{padding-right:unset}.form-group.auto-complete .clear{right:7px}.form-group.auto-complete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.auto-complete .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AutocompleteControl, decorators: [{
-            type: Component,
-            args: [{ selector: "autocomplete-control", standalone: true, imports: [CommonModule, ReactiveFormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: AutocompleteControl,
-                            multi: true,
-                        },
-                    ], template: "<div class=\"form-group auto-complete\" [ngClass]=\"customClass\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n    (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" [ngClass]=\"{'is-invalid': error}\"\r\n    [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n  <span class=\"focus-border\"></span>\r\n\r\n  @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\r\n  <label class=\"clear\" (click)=\"resetInput()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n  @if (isDropdownOpen) {\r\n  <div #dropdownElement class=\"option-list\">\r\n    @if (filteredSuggestions.length === 0) {\r\n    <div class=\"no-results\">\r\n      <div>No results found</div>\r\n      @if (isAddNewItem) {\r\n      <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">\r\n        Add New Item\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    @for (suggestion of filteredSuggestions; track suggestion[optionDisplayProperty]; let i = $index) {\r\n    <div class=\"list-item\" [ngClass]=\"{\r\n                'active': suggestion === selectedItems,\r\n                'highlighted': highlightedIndex === i\r\n              }\" (mousedown)=\"onOptionMouseDown()\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n      @if (suggestion.countryCode) {\r\n      <img src=\"https://flagcdn.com/w80/{{ suggestion.countryCode }}.png\" width=\"20\"\r\n        alt=\"{{ suggestion.countryCode }} flag\" loading=\"lazy\" />\r\n      }\r\n      {{ suggestion[optionDisplayProperty] }}\r\n    </div>\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group.auto-complete .form-control{padding-right:unset}.form-group.auto-complete .clear{right:7px}.form-group.auto-complete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.auto-complete .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { title: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], clearVal: [{
-                type: Input
-            }], field: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], errorMessage: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }], inputLoader: [{
-                type: Input
-            }], isAddNewItem: [{
-                type: Input
-            }], optionDisplayProperty: [{
-                type: Input
-            }], optionSelected: [{
-                type: Output
-            }], search: [{
-                type: Output
-            }], selectionCleared: [{
-                type: Output
-            }], addNewItemClicked: [{
-                type: Output
-            }], blurEvent: [{
-                type: Output
-            }], optionPatched: [{
-                type: Output
-            }], options: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], inputElement: [{
-                type: ViewChild,
-                args: ["inputElement"]
-            }], dropdownElement: [{
-                type: ViewChild,
-                args: ["dropdownElement"]
-            }] } });
-
-class CalendarControl {
-    datePipe;
-    title;
-    required = false;
-    customClass = "";
-    clearVal = true;
-    deFocus = true;
-    error = false;
-    errorMessage = "";
-    inputLoader = false;
-    hourFormat = "24";
-    selectionMode = "single";
-    timeOnly = false;
-    dateFormat = "dd/MM/yyyy";
-    placeholder = "dd-mm-yyyy";
-    disabled = false;
-    readonly = false;
-    submitted = false;
-    inputPlaceholder = false;
-    closeVal = false;
-    showTime = false;
-    selectionCleared = new EventEmitter();
-    blurEvent = new EventEmitter();
-    dateSelected = new EventEmitter();
-    _minDate;
-    _maxDate;
-    get minDate() {
-        return this._minDate;
-    }
-    set minDate(value) {
-        this._minDate = value;
-    }
-    get maxDate() {
-        return this._maxDate;
-    }
-    set maxDate(value) {
-        this._maxDate = value;
-    }
-    get meridian() {
-        if (this.hourFormat !== '12')
-            return 'AM';
-        return this.selectedHour >= 12 ? 'PM' : 'AM';
-    }
-    static _currentlyOpen;
-    onChangeFn = () => { };
-    onTouchedFn = () => { };
-    popperInstance = null;
-    rootElement;
-    inputEl;
-    datePickerEl;
-    isOpen = false;
-    focus = false;
-    displayMonth;
-    displayYear;
-    selectedDate = null;
-    today = new Date();
-    todayYear = this.today.getFullYear();
-    todayMonth = this.today.getMonth();
-    todayDate = this.today.getDate();
-    selectedHour = this.today.getHours();
-    selectedMinute = this.today.getMinutes();
-    dayClassMap = {};
-    inputVal = null; // Replace with the appropriate type and default value
-    yearRangeSize = 15; // The year range view shows a chunk of years, for example 15 years at a time.
-    currentView = "day";
-    inputControl = new FormControl({ value: "", disabled: false });
-    constructor(datePipe) {
-        this.datePipe = datePipe;
-        const today = new Date();
-        this.displayMonth = today.getMonth();
-        this.displayYear = today.getFullYear();
-    }
-    ngOnInit() {
-        const now = new Date();
-        this.displayYear = now.getFullYear();
-        this.displayMonth = now.getMonth();
-    }
-    ngAfterViewChecked() {
-        if (this.isOpen) {
-            this.initializePopper();
-        }
-    }
-    ngAfterViewInit() {
-        if (this.isOpen) {
-            this.initializePopper();
-        }
-    }
-    ngOnDestroy() {
-        this.destroyPopper();
-    }
-    writeValue(value) {
-        // 1) Clear out if no value
-        if (!value) {
-            this.selectedDate = null;
-            this.inputControl.setValue("", { emitEvent: false });
-            return;
-        }
-        if (this.timeOnly) {
-            let hours, mins;
-            if (typeof value === "string") {
-                // “HH:mm” or “hh:mm AM/PM”
-                const m24 = value.match(/^(\d{1,2}):(\d{2})$/);
-                const m12 = value.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
-                if (m24) {
-                    hours = +m24[1];
-                    mins = +m24[2];
-                }
-                else if (m12) {
-                    let h = +m12[1];
-                    if (/PM/i.test(m12[3]) && h < 12)
-                        h += 12;
-                    if (/AM/i.test(m12[3]) && h === 12)
-                        h = 0;
-                    hours = h;
-                    mins = +m12[2];
-                }
-                else {
-                    // fallback parse
-                    const dt = new Date(value);
-                    hours = dt.getHours();
-                    mins = dt.getMinutes();
-                }
-            }
-            else if (value instanceof Date) {
-                hours = value.getHours();
-                mins = value.getMinutes();
-            }
-            else {
-                // maybe a timestamp or something else
-                const dt = new Date(value);
-                hours = dt.getHours();
-                mins = dt.getMinutes();
-            }
-            // 3) Apply
-            this.selectedHour = hours;
-            this.selectedMinute = mins;
-            // 4) Write back into the formControl & notify forms
-            const out = this.formatOutputTimeOnly();
-            this.inputControl.setValue(out, { emitEvent: false });
-            this.onChangeFn(out);
-            this.onTouchedFn();
-            return;
-        }
-        // 2) Parse the incoming string (dd/MM/yyyy or dd/MM/yyyy HH:mm)
-        const parsed = this.parseDate(value);
-        this.selectedDate = parsed;
-        if (this.showTime) {
-            const raw = value;
-            // split into date vs time
-            let datePart = raw, timePart = null;
-            const parts = raw.match(/^(.+?)\s+(.+)$/);
-            if (parts) {
-                datePart = parts[1];
-                timePart = parts[2];
-            }
-            // parse the date
-            const parsedDate = this.parseDate(datePart);
-            if (!parsedDate) {
-                return this.clearDate(new Event("manual"));
-            }
-            // parse the time portion (reuse your timeOnly logic)
-            if (timePart) {
-                let h, m;
-                const m24 = timePart.match(/^(\d{1,2}):(\d{2})$/);
-                const m12 = timePart.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
-                if (m24) {
-                    h = +m24[1];
-                    m = +m24[2];
-                }
-                else if (m12) {
-                    h = +m12[1];
-                    m = +m12[2];
-                    if (/PM/i.test(m12[3]) && h < 12)
-                        h += 12;
-                    if (/AM/i.test(m12[3]) && h === 12)
-                        h = 0;
-                }
-                else {
-                    const dt = new Date(`1970-01-01T${timePart}`);
-                    h = dt.getHours();
-                    m = dt.getMinutes();
-                }
-                parsedDate.setHours(h, m);
-                this.selectedHour = h;
-                this.selectedMinute = m;
-            }
-            // update calendar view & control value
-            this.selectedDate = parsedDate;
-            this.displayMonth = parsedDate.getMonth();
-            this.displayYear = parsedDate.getFullYear();
-            const out = this.formatOutput(parsedDate);
-            this.inputControl.setValue(out, { emitEvent: false });
-            this.onChangeFn(out);
-            this.onTouchedFn();
-            return;
-        }
-        if (parsed) {
-            // 3) Always update the calendar view
-            this.displayMonth = parsed.getMonth();
-            this.displayYear = parsed.getFullYear();
-            // 4) ONLY if showTime is on, pull hours/minutes
-            if (this.showTime) {
-                this.selectedHour = parsed.getHours();
-                this.selectedMinute = parsed.getMinutes();
-            }
-            // 5) Finally, set the input text via your formatter
-            this.inputControl.setValue(this.formatOutput(parsed), {
-                emitEvent: false,
-            });
-        }
-    }
-    registerOnChange(fn) {
-        this.onChangeFn = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedFn = fn;
-    }
-    setData(config) {
-        if (config.hasOwnProperty("placeholder")) {
-            this.placeholder = config.placeholder;
-        }
-    }
-    // events
-    onBlur() {
-        this.onTouchedFn();
-        const raw = this.inputControl.value;
-        if (this.showTime && !this.timeOnly) {
-            // split off the date vs. time
-            const match = raw.match(/^(.+?)\s+(.+)$/);
-            const datePart = match ? match[1] : raw;
-            const timePart = match ? match[2] : "";
-            // parse the date
-            const pd = this.parseDate(datePart);
-            if (!pd)
-                return this.clearDate(new Event("manual"));
-            // parse the time portion (reuse your timeOnly logic)
-            let h, m;
-            const m24 = timePart.match(/^(\d{1,2}):(\d{2})$/);
-            const m12 = timePart.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
-            if (m24) {
-                h = +m24[1];
-                m = +m24[2];
-            }
-            else if (m12) {
-                h = +m12[1];
-                m = +m12[2];
-                if (/PM/i.test(m12[3]) && h < 12)
-                    h += 12;
-                if (/AM/i.test(m12[3]) && h === 12)
-                    h = 0;
-            }
-            else {
-                const tmp = new Date(`1970-01-01T${timePart}`);
-                h = tmp.getHours();
-                m = tmp.getMinutes();
-            }
-            // apply
-            pd.setHours(h, m);
-            this.selectedDate = pd;
-            this.selectedHour = h;
-            this.selectedMinute = m;
-            // update calendar view
-            this.displayMonth = pd.getMonth();
-            this.displayYear = pd.getFullYear();
-            // write back into the input & notify
-            const out = this.formatOutput(pd);
-            this.inputControl.setValue(out, { emitEvent: false });
-            this.onChangeFn(out);
-            this.dateSelected.emit(pd);
-            this.blurEvent.emit();
-            return;
-        }
-        if (this.timeOnly) {
-            // try 24-hour HH:mm
-            let m = raw.match(/^(\d{1,2}):(\d{2})$/);
-            // or 12-hour h:mm AM/PM
-            const mAmPm = !m && raw.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
-            if (m) {
-                // 24h
-                const h = +m[1], min = +m[2];
-                if (h < 24 && min < 60) {
-                    this.selectedHour = h;
-                    this.selectedMinute = min;
-                }
-                else {
-                    return this.clearDate(new Event("manual"));
-                }
-            }
-            else if (mAmPm) {
-                // 12h
-                let h = +mAmPm[1], min = +mAmPm[2];
-                const ap = mAmPm[3].toUpperCase();
-                if (h >= 1 && h <= 12 && min < 60) {
-                    if (ap === "PM" && h < 12)
-                        h += 12;
-                    if (ap === "AM" && h === 12)
-                        h = 0;
-                    this.selectedHour = h;
-                    this.selectedMinute = min;
-                }
-                else {
-                    return this.clearDate(new Event("manual"));
-                }
-            }
-            else {
-                // not a valid time string
-                return this.clearDate(new Event("manual"));
-            }
-            const out = this.formatOutputTimeOnly();
-            this.inputControl.setValue(out, { emitEvent: false });
-            this.onChangeFn(out);
-            this.dateSelected.emit(this.selectedDate);
-            this.blurEvent.emit();
-            return;
-        }
-        if (this.showTime) {
-            this.blurEvent.emit();
-            return;
-        }
-        const parsed = this.parseDate(raw);
-        if (!parsed) {
-            this.clearDate(new Event("manual"));
-        }
-        else {
-            this.selectedDate = parsed;
-            this.displayMonth = parsed.getMonth();
-            this.displayYear = parsed.getFullYear();
-            this.selectedHour = parsed.getHours();
-            this.selectedMinute = parsed.getMinutes();
-            const formatted = this.formatOutput(parsed);
-            this.inputControl.setValue(formatted, { emitEvent: false });
-            this.onChangeFn(formatted);
-        }
-        this.blurEvent.emit();
-    }
-    onFocus() {
-        this.focus = true;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    onInputKeydown(event) {
-        switch (event.key) {
-            case "ArrowDown":
-                event.preventDefault();
-                this.toggleCalendar();
-                break;
-            case "Escape":
-                this.isOpen = false;
-                break;
-            case " ":
-            case "Spacebar":
-                event.preventDefault();
-                this.toggleCalendar();
-                break;
-            case "Tab":
-                this.isOpen = false;
-                break;
-        }
-    }
-    // day
-    selectDay(day) {
-        if (!day)
-            return;
-        const picked = this.showTime
-            ? this.buildDateWithTime(day)
-            : new Date(this.displayYear, this.displayMonth, day);
-        if (this.isDateDisabled(picked))
-            return;
-        this.selectedDate = picked;
-        const out = this.formatOutput(picked);
-        this.inputControl.setValue(out, { emitEvent: false });
-        this.onChangeFn(out);
-        this.onTouchedFn();
-        this.dateSelected.emit(picked);
-        this.isOpen = false;
-    }
-    get daysInMonth() {
-        const firstDay = new Date(this.displayYear, this.displayMonth, 1).getDay();
-        const totalDays = new Date(this.displayYear, this.displayMonth + 1, 0).getDate();
-        const offset = firstDay;
-        const daysArray = Array(offset).fill(null);
-        this.dayClassMap = {}; // Reset
-        for (let i = 1; i <= totalDays; i++) {
-            const date = new Date(this.displayYear, this.displayMonth, i);
-            this.dayClassMap[i] = {
-                disabled: this.isDateDisabled(date),
-                selected: this.selectedDate?.getFullYear() === this.displayYear &&
-                    this.selectedDate?.getMonth() === this.displayMonth &&
-                    this.selectedDate?.getDate() === i,
-                today: this.todayYear === this.displayYear &&
-                    this.todayMonth === this.displayMonth &&
-                    this.todayDate === i,
-            };
-            daysArray.push(i);
-        }
-        return daysArray;
-    }
-    parseDate(val) {
-        if (typeof val === "string") {
-            const m = val.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
-            if (m) {
-                const d = +m[1], mo = +m[2] - 1, y = +m[3];
-                return new Date(y, mo, d);
-            }
-        }
-        // fallback
-        const date = new Date(val);
-        return isNaN(date.getTime()) ? null : date;
-    }
-    formatOutput(date) {
-        const datePart = this.datePipe.transform(date, this.dateFormat);
-        if (this.showTime) {
-            const timeFormat = this.hourFormat === "12" ? "hh:mm a" : "HH:mm";
-            const timePart = this.datePipe.transform(date, timeFormat);
-            return `${datePart} ${timePart}`;
-        }
-        return datePart;
-    }
-    isSelectedDay(day) {
-        if (!this.selectedDate || !day)
-            return false;
-        return (this.selectedDate.getFullYear() === this.displayYear &&
-            this.selectedDate.getMonth() === this.displayMonth &&
-            this.selectedDate.getDate() === day);
-    }
-    isDateDisabled(d) {
-        if (this._minDate && d < new Date(this._minDate))
-            return true;
-        if (this._maxDate && d > new Date(this._maxDate))
-            return true;
-        return false;
-    }
-    isDayDisabled(day) {
-        return (day !== null &&
-            this.isDateDisabled(new Date(this.displayYear, this.displayMonth, day)));
-    }
-    // month
-    goToMonthView() {
-        this.currentView = "month";
-    }
-    months = [
-        "Jan",
-        "Feb",
-        "Mar",
-        "Apr",
-        "May",
-        "Jun",
-        "Jul",
-        "Aug",
-        "Sep",
-        "Oct",
-        "Nov",
-        "Dec",
-    ];
-    selectMonth(index) {
-        this.displayMonth = index;
-        this.currentView = "day";
-    }
-    get displayMonthName() {
-        return this.months[this.displayMonth];
-    }
-    prevMonth() {
-        if (this.displayMonth === 0) {
-            this.displayMonth = 11;
-            this.displayYear--;
-        }
-        else {
-            this.displayMonth--;
-        }
-    }
-    nextMonth() {
-        if (this.displayMonth === 11) {
-            this.displayMonth = 0;
-            this.displayYear++;
-        }
-        else {
-            this.displayMonth++;
-        }
-    }
-    // year
-    goToYearRangeView() {
-        this.currentView = "yearRange";
-    }
-    get yearRange() {
-        const startYear = this.getStartYearForRange();
-        const years = [];
-        for (let i = 0; i < this.yearRangeSize; i++) {
-            years.push(startYear + i);
-        }
-        return years;
-    }
-    getStartYearForRange() {
-        const remainder = this.displayYear % this.yearRangeSize;
-        return this.displayYear - remainder;
-    }
-    selectYear(year) {
-        this.displayYear = year;
-        this.currentView = "month";
-    }
-    prevYearRange() {
-        this.displayYear -= this.yearRangeSize;
-    }
-    nextYearRange() {
-        this.displayYear += this.yearRangeSize;
-    }
-    // time picker
-    formatOutputTimeOnly() {
-        // you could choose 12h vs 24h based on hourFormat
-        return this.datePipe.transform(new Date(0, 0, 0, this.selectedHour, this.selectedMinute), this.hourFormat === "12" ? "hh:mm a" : "HH:mm");
-    }
-    patchDateWithTime() {
-        if (!this.selectedDate) {
-            const now = new Date();
-            this.selectedDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), this.selectedHour, this.selectedMinute);
-        }
-        else {
-            this.selectedDate.setHours(this.selectedHour, this.selectedMinute);
-        }
-        const output = this.timeOnly
-            ? this.formatOutputTimeOnly()
-            : this.formatOutput(this.selectedDate);
-        this.inputControl.setValue(output, { emitEvent: false });
-        this.onChangeFn(output);
-        this.onTouchedFn();
-        this.dateSelected.emit(this.selectedDate);
-    }
-    setMeridian(value) {
-        if (this.meridian === value)
-            return;
-        if (value === "AM" && this.selectedHour >= 12) {
-            this.selectedHour -= 12;
-        }
-        else if (value === "PM" && this.selectedHour < 12) {
-            this.selectedHour += 12;
-        }
-        this.patchDateWithTime();
-    }
-    buildDateWithTime(day) {
-        return new Date(this.displayYear, this.displayMonth, day, this.selectedHour, this.selectedMinute);
-    }
-    incrementHour() {
-        this.selectedHour = (this.selectedHour + 1) % 24;
-        if (this.showTime || this.timeOnly)
-            this.patchDateWithTime();
-    }
-    decrementHour() {
-        this.selectedHour = (this.selectedHour + 23) % 24;
-        if (this.showTime || this.timeOnly)
-            this.patchDateWithTime();
-    }
-    incrementMinute() {
-        this.selectedMinute++;
-        if (this.selectedMinute >= 60) {
-            this.selectedMinute = 0;
-            this.selectedHour = (this.selectedHour + 1) % 24;
-        }
-        if (this.showTime || this.timeOnly) {
-            this.patchDateWithTime();
-        }
-    }
-    decrementMinute() {
-        this.selectedMinute--;
-        if (this.selectedMinute < 0) {
-            this.selectedMinute = 59;
-            // go back an hour, wrapping 0 → 23
-            this.selectedHour = (this.selectedHour + 23) % 24;
-        }
-        if (this.showTime || this.timeOnly) {
-            this.patchDateWithTime();
-        }
-    }
-    // popper
-    initializePopper() {
-        if (!this.popperInstance &&
-            this.inputEl?.nativeElement &&
-            this.datePickerEl?.nativeElement) {
-            this.popperInstance = createPopper(this.inputEl.nativeElement, this.datePickerEl.nativeElement, {
-                placement: "bottom-start",
-                modifiers: [
-                    { name: "offset", options: { offset: [0, 1] } },
-                    { name: "preventOverflow", options: { boundary: "viewport" } },
-                    { name: "flip", options: { fallbackPlacements: ["top-start"] } },
-                ],
-            });
-            this.popperInstance.update();
-        }
-    }
-    destroyPopper() {
-        if (this.popperInstance) {
-            this.popperInstance.destroy();
-            this.popperInstance = null;
-        }
-    }
-    // toggle, open, close and clear 
-    toggleCalendar() {
-        if (this.disabled || this.readonly)
-            return;
-        // if another calendar is open, close it
-        if (!this.isOpen &&
-            CalendarControl._currentlyOpen &&
-            CalendarControl._currentlyOpen !== this) {
-            CalendarControl._currentlyOpen.closeCalendar();
-        }
-        // flip open/close
-        this.isOpen = !this.isOpen;
-        if (this.isOpen) {
-            // mark this one as current
-            CalendarControl._currentlyOpen = this;
-            // reset the month/year view
-            this.currentView = "day";
-            if (this.selectedDate) {
-                this.displayMonth = this.selectedDate.getMonth();
-                this.displayYear = this.selectedDate.getFullYear();
-            }
-            else {
-                const now = new Date();
-                this.displayMonth = now.getMonth();
-                this.displayYear = now.getFullYear();
-            }
-            // destroy any old popper
-            if (this.popperInstance) {
-                this.popperInstance.destroy();
-                this.popperInstance = null;
-            }
-            if (this.inputEl && this.datePickerEl) {
-                this.popperInstance = createPopper(this.inputEl.nativeElement, this.datePickerEl.nativeElement, {
-                    placement: "bottom-start",
-                    modifiers: [
-                        { name: "offset", options: { offset: [0, 1] } },
-                        { name: "preventOverflow", options: { boundary: "viewport" } },
-                        { name: "flip", options: { fallbackPlacements: ["top-start"] } },
-                    ],
-                });
-                this.popperInstance.update();
-            }
-        }
-        else {
-            this.destroyPopper();
-        }
-    }
-    openCalendar() {
-        if (this.disabled || this.readonly || this.isOpen)
-            return;
-        this.toggleCalendar();
-    }
-    clickOutside(event) {
-        if (!this.rootElement.nativeElement.contains(event.target) && this.isOpen) {
-            this.isOpen = false;
-        }
-    }
-    closeCalendar() {
-        this.destroyPopper();
-        this.isOpen = false;
-        if (CalendarControl._currentlyOpen === this) {
-            CalendarControl._currentlyOpen = undefined;
-        }
-    }
-    clearDate(event) {
-        this.selectionCleared.emit();
-        event.stopPropagation();
-        this.selectedDate = null;
-        this.selectedHour = this.today.getHours();
-        this.selectedMinute = this.today.getMinutes();
-        this.inputControl.setValue("", { emitEvent: false });
-        this.onChangeFn(null);
-        this.onTouchedFn();
-        this.dateSelected.emit(null);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CalendarControl, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: CalendarControl, isStandalone: true, selector: "calendar-control", inputs: { title: "title", required: "required", customClass: "customClass", clearVal: "clearVal", deFocus: "deFocus", error: "error", errorMessage: "errorMessage", inputLoader: "inputLoader", hourFormat: "hourFormat", selectionMode: "selectionMode", timeOnly: "timeOnly", dateFormat: "dateFormat", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", submitted: "submitted", inputPlaceholder: "inputPlaceholder", closeVal: ["close-val", "closeVal"], showTime: "showTime", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectionCleared: "selectionCleared", blurEvent: "blurEvent", dateSelected: "dateSelected" }, host: { listeners: { "document:click": "clickOutside($event)" } }, providers: [
-            DatePipe,
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CalendarControl),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "rootElement", first: true, predicate: ["root"], descendants: true, static: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }, { propertyName: "datePickerEl", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"form-group calendar\" [ngClass]=\"customClass\">\r\n  <label class=\"inp-label\" [ngClass]=\"{'required' : required}\" *ngIf=\"title\">{{ title }}</label>\r\n  <div class=\"form-group calendar\" #root  (click)=\"openCalendar()\" >\r\n    <input type=\"text\" #inputEl [placeholder]=\"(inputPlaceholder && placeholder) ? placeholder : ''\"\r\n      [formControl]=\"inputControl\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\"\r\n      (focus)=\"onFocus()\"  (click)=\"openCalendar(); $event.stopPropagation()\" (keydown)=\"onInputKeydown($event)\" />\r\n\r\n    <span class=\"focus-border\" *ngIf=\"deFocus\"></span>\r\n    <span class=\"calendar-icon\">\r\n      <i class=\"he\" [ngClass]=\"!timeOnly ? 'he-calendar-blank' : 'he-clock'\"></i>\r\n    </span>\r\n    <label class=\"clear\" *ngIf=\"!inputLoader && (selectedDate && !disabled) && clearVal\" (click)=\"clearDate($event)\">\r\n      <i class=\"he he-close\"></i>\r\n    </label>\r\n    <label *ngIf=\"inputLoader\" class=\"loader input-loader\"></label>\r\n    <div *ngIf=\"error\" class=\"val-msg\">{{ errorMessage }}</div>\r\n\r\n    <div class=\"datepicker-group\" #datePicker *ngIf=\"isOpen\" (click)=\"$event.stopPropagation()\">\r\n      \r\n      <!-- time picker -->\r\n      <ng-container *ngIf=\"timeOnly\">\r\n        <div class=\"time-picker\">\r\n          <div class=\"time-select\">\r\n            <button (click)=\"incrementHour()\"><i class=\"he he-chevron-up\"></i></button>\r\n            <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n              <div class=\"time-value\">\r\n                {{ ((selectedHour % 12) || 12) | number:'2.0' }}\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #show24>\r\n              <div class=\"time-value\">\r\n                {{ selectedHour | number:'2.0' }}\r\n              </div>\r\n            </ng-template>\r\n\r\n            <button (click)=\"decrementHour()\"><i class=\"he he-chevron-down\"></i></button>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <div class=\"time-select\">\r\n            <button (click)=\"incrementMinute()\"><i class=\"he he-chevron-up\"></i></button>\r\n            <div class=\"time-value\">{{ selectedMinute | number:'2.0' }}</div>\r\n            <button (click)=\"decrementMinute()\"><i class=\"he he-chevron-down\"></i></button>\r\n          </div>\r\n          <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n            <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n            <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- day view -->\r\n      <ng-container *ngIf=\"!timeOnly && currentView === 'day'\">\r\n        <div class=\"header\">\r\n          <button class=\"calendar-arrow\" (click)=\"prevMonth()\"><i class=\"he he-chevron-left\"></i></button>\r\n          <div class=\"title\" (click)=\"goToMonthView()\">\r\n            <div>{{ displayMonthName }}</div>\r\n            <div>{{ displayYear }}</div>\r\n          </div>\r\n          <button class=\"calendar-arrow\" (click)=\"nextMonth()\"><i class=\"he he-chevron-right\"></i></button>\r\n        </div>\r\n        <div class=\"week-header\">\r\n          <div>Sun</div>\r\n          <div>Mon</div>\r\n          <div>Tue</div>\r\n          <div>Wed</div>\r\n          <div>Thu</div>\r\n          <div>Fri</div>\r\n          <div>Sat</div>\r\n        </div>\r\n        <div class=\"days-grid\">\r\n          <div class=\"day-cell\" *ngFor=\"let day of daysInMonth\" (click)=\"selectDay(day)\"\r\n            [class.disabled]=\"day !== null && dayClassMap[day].disabled\"\r\n            [class.selected]=\"day !== null && dayClassMap[day].selected\" [class.today]=\"\r\n                      day !== null &&\r\n                      displayYear === todayYear   &&\r\n                      displayMonth === todayMonth &&\r\n                      day === todayDate\r\n                    \">\r\n            {{day ? day : ''}}\r\n          </div>\r\n        </div>\r\n        <ng-container *ngIf=\"showTime\">\r\n          <div class=\"time-picker\">\r\n            <div class=\"time-select\">\r\n              <button type=\"button\" (click)=\"incrementHour()\">\r\n                <i class=\"he he-chevron-up\"></i>\r\n              </button>\r\n              <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n                <div class=\"time-value\">\r\n                  {{\r\n                  selectedHour % 12 === 0\r\n                  ? 12\r\n                  : selectedHour % 12\r\n                  | number:'2.0' }}\r\n                </div>\r\n              </ng-container>\r\n              <ng-template #show24>\r\n                <div class=\"time-value\">{{ selectedHour | number:'2.0' }}</div>\r\n              </ng-template>\r\n              <button type=\"button\" (click)=\"decrementHour()\">\r\n                <i class=\"he he-chevron-down\"></i>\r\n              </button>\r\n            </div>\r\n            <span class=\"time-separator\">:</span>\r\n            <div class=\"time-select\">\r\n              <button type=\"button\" (click)=\"incrementMinute()\">\r\n                <i class=\"he he-chevron-up\"></i>\r\n              </button>\r\n              <div class=\"time-value\">\r\n                {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>\r\n                  <button type=\"button\" (click)=\"decrementMinute()\">\r\n                    <i class=\"he he-chevron-down\"></i>\r\n                  </button>\r\n              </div>\r\n              <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n                <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n                <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n              </div>\r\n            </div>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <!-- month view -->\r\n      <ng-container *ngIf=\"!timeOnly && currentView === 'month'\">\r\n        <div class=\"header\">\r\n          <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear - 1\"><i\r\n              class=\"he he-chevron-left\"></i></button>\r\n          <div class=\"title\" (click)=\"goToYearRangeView()\">{{ displayYear }}</div>\r\n          <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear + 1\"><i\r\n              class=\"he he-chevron-right\"></i></button>\r\n        </div>\r\n        <div class=\"month-grid\">\r\n          <div class=\"month-cell\" *ngFor=\"let m of months; index as i\" (click)=\"selectMonth(i)\">{{ m }}\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- year range view -->\r\n      <ng-container *ngIf=\"!timeOnly && currentView === 'yearRange'\">\r\n        <div class=\"header\">\r\n          <button class=\"calendar-arrow\" (click)=\"prevYearRange()\"><i class=\"he he-chevron-left\"></i></button>\r\n          <div class=\"title\">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>\r\n          <button class=\"calendar-arrow\" (click)=\"nextYearRange()\"><i class=\"he he-chevron-right\"></i></button>\r\n        </div>\r\n        <div class=\"year-grid\">\r\n          <div class=\"year-cell\" *ngFor=\"let y of yearRange\" (click)=\"selectYear(y)\">{{ y }}</div>\r\n        </div>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </div>\r\n</div>", styles: [".form-group.calendar{position:relative}.form-group.calendar .clear{top:9px;right:34px}.form-group.calendar .datepicker-group{left:0;width:100%;z-index:1000;padding:.5rem;color:#495057;min-width:240px;border-radius:3px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.calendar .datepicker-group .header{display:flex;font-weight:600;padding:5px;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6}.form-group.calendar .datepicker-group .header .title{gap:8px;display:flex;font-size:15px;cursor:pointer;font-weight:600}.form-group.calendar .datepicker-group .header .calendar-arrow{width:28px;height:28px;border:none;line-height:1;cursor:pointer;background:none}.form-group.calendar .datepicker-group .header .calendar-arrow i{font-size:14px}.form-group.calendar .datepicker-group .header .calendar-arrow:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .week-header{display:grid;padding:8px 0;font-size:13px;font-weight:700;text-align:center;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid,.form-group.calendar .datepicker-group .month-grid,.form-group.calendar .datepicker-group .year-grid{gap:3px;padding:5px;display:grid;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{display:flex;font-size:14px;cursor:pointer;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .days-grid .day-cell.today,.form-group.calendar .datepicker-group .days-grid .month-cell.today,.form-group.calendar .datepicker-group .days-grid .year-cell.today,.form-group.calendar .datepicker-group .month-grid .day-cell.today,.form-group.calendar .datepicker-group .month-grid .month-cell.today,.form-group.calendar .datepicker-group .month-grid .year-cell.today,.form-group.calendar .datepicker-group .year-grid .day-cell.today,.form-group.calendar .datepicker-group .year-grid .month-cell.today,.form-group.calendar .datepicker-group .year-grid .year-cell.today{color:#37c0b3;font-weight:700;border:1px solid #37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.selected,.form-group.calendar .datepicker-group .days-grid .day-cell:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.selected,.form-group.calendar .datepicker-group .days-grid .month-cell:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.selected,.form-group.calendar .datepicker-group .days-grid .year-cell:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.selected,.form-group.calendar .datepicker-group .month-grid .day-cell:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.selected,.form-group.calendar .datepicker-group .month-grid .month-cell:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.selected,.form-group.calendar .datepicker-group .month-grid .year-cell:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.selected,.form-group.calendar .datepicker-group .year-grid .day-cell:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.selected,.form-group.calendar .datepicker-group .year-grid .month-cell:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.selected,.form-group.calendar .datepicker-group .year-grid .year-cell:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled{color:#e0e0e0;background:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today{color:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled:hover{color:#e0e0e0;background:transparent}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .day-cell{padding:5px 2px;border-radius:50%}.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{padding:8px 2px;border-radius:3px}.form-group.calendar .datepicker-group .month-grid{grid-template-columns:repeat(3,1fr)}.form-group.calendar .datepicker-group .year-grid{grid-template-columns:repeat(4,1fr)}.form-group.calendar .datepicker-group .time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle{gap:6px;display:flex;margin-left:1rem;flex-direction:column;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button{cursor:pointer;padding:3px 8px;font-size:.75rem;background:#fff;border:1px solid #cccccc}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button.active{color:#fff;border-color:#37c0b3;background-color:#37c0b3}.form-group.calendar .datepicker-group .time-picker .time-select{display:flex;margin:0 .75rem;align-items:center;flex-direction:column}.form-group.calendar .datepicker-group .time-picker .time-select button{border:none;cursor:pointer;padding:4px 8px;background:transparent}.form-group.calendar .datepicker-group .time-picker .time-select button i{font-size:1rem}.form-group.calendar .datepicker-group .time-picker .time-select button:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .time-picker .time-select .time-value{width:2rem;font-size:1rem;text-align:center;margin:2px 3px 4px}.form-group.calendar .datepicker-group .time-picker .time-separator{line-height:1;font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CalendarControl, decorators: [{
-            type: Component,
-            args: [{ selector: "calendar-control", standalone: true, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        FormsModule
-                    ], providers: [
-                        DatePipe,
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CalendarControl),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"form-group calendar\" [ngClass]=\"customClass\">\r\n  <label class=\"inp-label\" [ngClass]=\"{'required' : required}\" *ngIf=\"title\">{{ title }}</label>\r\n  <div class=\"form-group calendar\" #root  (click)=\"openCalendar()\" >\r\n    <input type=\"text\" #inputEl [placeholder]=\"(inputPlaceholder && placeholder) ? placeholder : ''\"\r\n      [formControl]=\"inputControl\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\"\r\n      (focus)=\"onFocus()\"  (click)=\"openCalendar(); $event.stopPropagation()\" (keydown)=\"onInputKeydown($event)\" />\r\n\r\n    <span class=\"focus-border\" *ngIf=\"deFocus\"></span>\r\n    <span class=\"calendar-icon\">\r\n      <i class=\"he\" [ngClass]=\"!timeOnly ? 'he-calendar-blank' : 'he-clock'\"></i>\r\n    </span>\r\n    <label class=\"clear\" *ngIf=\"!inputLoader && (selectedDate && !disabled) && clearVal\" (click)=\"clearDate($event)\">\r\n      <i class=\"he he-close\"></i>\r\n    </label>\r\n    <label *ngIf=\"inputLoader\" class=\"loader input-loader\"></label>\r\n    <div *ngIf=\"error\" class=\"val-msg\">{{ errorMessage }}</div>\r\n\r\n    <div class=\"datepicker-group\" #datePicker *ngIf=\"isOpen\" (click)=\"$event.stopPropagation()\">\r\n      \r\n      <!-- time picker -->\r\n      <ng-container *ngIf=\"timeOnly\">\r\n        <div class=\"time-picker\">\r\n          <div class=\"time-select\">\r\n            <button (click)=\"incrementHour()\"><i class=\"he he-chevron-up\"></i></button>\r\n            <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n              <div class=\"time-value\">\r\n                {{ ((selectedHour % 12) || 12) | number:'2.0' }}\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #show24>\r\n              <div class=\"time-value\">\r\n                {{ selectedHour | number:'2.0' }}\r\n              </div>\r\n            </ng-template>\r\n\r\n            <button (click)=\"decrementHour()\"><i class=\"he he-chevron-down\"></i></button>\r\n          </div>\r\n          <span class=\"time-separator\">:</span>\r\n          <div class=\"time-select\">\r\n            <button (click)=\"incrementMinute()\"><i class=\"he he-chevron-up\"></i></button>\r\n            <div class=\"time-value\">{{ selectedMinute | number:'2.0' }}</div>\r\n            <button (click)=\"decrementMinute()\"><i class=\"he he-chevron-down\"></i></button>\r\n          </div>\r\n          <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n            <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n            <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- day view -->\r\n      <ng-container *ngIf=\"!timeOnly && currentView === 'day'\">\r\n        <div class=\"header\">\r\n          <button class=\"calendar-arrow\" (click)=\"prevMonth()\"><i class=\"he he-chevron-left\"></i></button>\r\n          <div class=\"title\" (click)=\"goToMonthView()\">\r\n            <div>{{ displayMonthName }}</div>\r\n            <div>{{ displayYear }}</div>\r\n          </div>\r\n          <button class=\"calendar-arrow\" (click)=\"nextMonth()\"><i class=\"he he-chevron-right\"></i></button>\r\n        </div>\r\n        <div class=\"week-header\">\r\n          <div>Sun</div>\r\n          <div>Mon</div>\r\n          <div>Tue</div>\r\n          <div>Wed</div>\r\n          <div>Thu</div>\r\n          <div>Fri</div>\r\n          <div>Sat</div>\r\n        </div>\r\n        <div class=\"days-grid\">\r\n          <div class=\"day-cell\" *ngFor=\"let day of daysInMonth\" (click)=\"selectDay(day)\"\r\n            [class.disabled]=\"day !== null && dayClassMap[day].disabled\"\r\n            [class.selected]=\"day !== null && dayClassMap[day].selected\" [class.today]=\"\r\n                      day !== null &&\r\n                      displayYear === todayYear   &&\r\n                      displayMonth === todayMonth &&\r\n                      day === todayDate\r\n                    \">\r\n            {{day ? day : ''}}\r\n          </div>\r\n        </div>\r\n        <ng-container *ngIf=\"showTime\">\r\n          <div class=\"time-picker\">\r\n            <div class=\"time-select\">\r\n              <button type=\"button\" (click)=\"incrementHour()\">\r\n                <i class=\"he he-chevron-up\"></i>\r\n              </button>\r\n              <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n                <div class=\"time-value\">\r\n                  {{\r\n                  selectedHour % 12 === 0\r\n                  ? 12\r\n                  : selectedHour % 12\r\n                  | number:'2.0' }}\r\n                </div>\r\n              </ng-container>\r\n              <ng-template #show24>\r\n                <div class=\"time-value\">{{ selectedHour | number:'2.0' }}</div>\r\n              </ng-template>\r\n              <button type=\"button\" (click)=\"decrementHour()\">\r\n                <i class=\"he he-chevron-down\"></i>\r\n              </button>\r\n            </div>\r\n            <span class=\"time-separator\">:</span>\r\n            <div class=\"time-select\">\r\n              <button type=\"button\" (click)=\"incrementMinute()\">\r\n                <i class=\"he he-chevron-up\"></i>\r\n              </button>\r\n              <div class=\"time-value\">\r\n                {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>\r\n                  <button type=\"button\" (click)=\"decrementMinute()\">\r\n                    <i class=\"he he-chevron-down\"></i>\r\n                  </button>\r\n              </div>\r\n              <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n                <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n                <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n              </div>\r\n            </div>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <!-- month view -->\r\n      <ng-container *ngIf=\"!timeOnly && currentView === 'month'\">\r\n        <div class=\"header\">\r\n          <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear - 1\"><i\r\n              class=\"he he-chevron-left\"></i></button>\r\n          <div class=\"title\" (click)=\"goToYearRangeView()\">{{ displayYear }}</div>\r\n          <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear + 1\"><i\r\n              class=\"he he-chevron-right\"></i></button>\r\n        </div>\r\n        <div class=\"month-grid\">\r\n          <div class=\"month-cell\" *ngFor=\"let m of months; index as i\" (click)=\"selectMonth(i)\">{{ m }}\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <!-- year range view -->\r\n      <ng-container *ngIf=\"!timeOnly && currentView === 'yearRange'\">\r\n        <div class=\"header\">\r\n          <button class=\"calendar-arrow\" (click)=\"prevYearRange()\"><i class=\"he he-chevron-left\"></i></button>\r\n          <div class=\"title\">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>\r\n          <button class=\"calendar-arrow\" (click)=\"nextYearRange()\"><i class=\"he he-chevron-right\"></i></button>\r\n        </div>\r\n        <div class=\"year-grid\">\r\n          <div class=\"year-cell\" *ngFor=\"let y of yearRange\" (click)=\"selectYear(y)\">{{ y }}</div>\r\n        </div>\r\n      </ng-container>\r\n\r\n    </div>\r\n  </div>\r\n</div>", styles: [".form-group.calendar{position:relative}.form-group.calendar .clear{top:9px;right:34px}.form-group.calendar .datepicker-group{left:0;width:100%;z-index:1000;padding:.5rem;color:#495057;min-width:240px;border-radius:3px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.calendar .datepicker-group .header{display:flex;font-weight:600;padding:5px;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6}.form-group.calendar .datepicker-group .header .title{gap:8px;display:flex;font-size:15px;cursor:pointer;font-weight:600}.form-group.calendar .datepicker-group .header .calendar-arrow{width:28px;height:28px;border:none;line-height:1;cursor:pointer;background:none}.form-group.calendar .datepicker-group .header .calendar-arrow i{font-size:14px}.form-group.calendar .datepicker-group .header .calendar-arrow:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .week-header{display:grid;padding:8px 0;font-size:13px;font-weight:700;text-align:center;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid,.form-group.calendar .datepicker-group .month-grid,.form-group.calendar .datepicker-group .year-grid{gap:3px;padding:5px;display:grid;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{display:flex;font-size:14px;cursor:pointer;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .days-grid .day-cell.today,.form-group.calendar .datepicker-group .days-grid .month-cell.today,.form-group.calendar .datepicker-group .days-grid .year-cell.today,.form-group.calendar .datepicker-group .month-grid .day-cell.today,.form-group.calendar .datepicker-group .month-grid .month-cell.today,.form-group.calendar .datepicker-group .month-grid .year-cell.today,.form-group.calendar .datepicker-group .year-grid .day-cell.today,.form-group.calendar .datepicker-group .year-grid .month-cell.today,.form-group.calendar .datepicker-group .year-grid .year-cell.today{color:#37c0b3;font-weight:700;border:1px solid #37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.selected,.form-group.calendar .datepicker-group .days-grid .day-cell:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.selected,.form-group.calendar .datepicker-group .days-grid .month-cell:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.selected,.form-group.calendar .datepicker-group .days-grid .year-cell:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.selected,.form-group.calendar .datepicker-group .month-grid .day-cell:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.selected,.form-group.calendar .datepicker-group .month-grid .month-cell:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.selected,.form-group.calendar .datepicker-group .month-grid .year-cell:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.selected,.form-group.calendar .datepicker-group .year-grid .day-cell:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.selected,.form-group.calendar .datepicker-group .year-grid .month-cell:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.selected,.form-group.calendar .datepicker-group .year-grid .year-cell:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled{color:#e0e0e0;background:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today{color:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled:hover{color:#e0e0e0;background:transparent}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .day-cell{padding:5px 2px;border-radius:50%}.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{padding:8px 2px;border-radius:3px}.form-group.calendar .datepicker-group .month-grid{grid-template-columns:repeat(3,1fr)}.form-group.calendar .datepicker-group .year-grid{grid-template-columns:repeat(4,1fr)}.form-group.calendar .datepicker-group .time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle{gap:6px;display:flex;margin-left:1rem;flex-direction:column;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button{cursor:pointer;padding:3px 8px;font-size:.75rem;background:#fff;border:1px solid #cccccc}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button.active{color:#fff;border-color:#37c0b3;background-color:#37c0b3}.form-group.calendar .datepicker-group .time-picker .time-select{display:flex;margin:0 .75rem;align-items:center;flex-direction:column}.form-group.calendar .datepicker-group .time-picker .time-select button{border:none;cursor:pointer;padding:4px 8px;background:transparent}.form-group.calendar .datepicker-group .time-picker .time-select button i{font-size:1rem}.form-group.calendar .datepicker-group .time-picker .time-select button:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .time-picker .time-select .time-value{width:2rem;font-size:1rem;text-align:center;margin:2px 3px 4px}.form-group.calendar .datepicker-group .time-picker .time-separator{line-height:1;font-size:1rem}\n"] }]
-        }], ctorParameters: () => [{ type: i1.DatePipe }], propDecorators: { title: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], clearVal: [{
-                type: Input
-            }], deFocus: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], errorMessage: [{
-                type: Input
-            }], inputLoader: [{
-                type: Input
-            }], hourFormat: [{
-                type: Input
-            }], selectionMode: [{
-                type: Input
-            }], timeOnly: [{
-                type: Input
-            }], dateFormat: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], submitted: [{
-                type: Input
-            }], inputPlaceholder: [{
-                type: Input
-            }], closeVal: [{
-                type: Input,
-                args: ["close-val"]
-            }], showTime: [{
-                type: Input
-            }], selectionCleared: [{
-                type: Output
-            }], blurEvent: [{
-                type: Output
-            }], dateSelected: [{
-                type: Output
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], rootElement: [{
-                type: ViewChild,
-                args: ["root", { static: true }]
-            }], inputEl: [{
-                type: ViewChild,
-                args: ["inputEl", { static: true }]
-            }], datePickerEl: [{
-                type: ViewChild,
-                args: ["datePicker", { static: false }]
-            }], clickOutside: [{
-                type: HostListener,
-                args: ["document:click", ["$event"]]
-            }] } });
-
-class CheckboxControl {
-    _renderer;
-    _elementRef;
-    title;
-    customClass;
-    type = 'boolean';
-    set disabled(value) { this._disabled = value; this.setDisabledState(value); }
-    checkboxChange = new EventEmitter();
-    blurEvent = new EventEmitter();
-    checkboxContainer;
-    _disabled = false;
-    checkboxControl = new FormControl({ value: false, disabled: this._disabled });
-    onChange = () => { };
-    onTouched = () => { };
-    constructor(_renderer, _elementRef) {
-        this._renderer = _renderer;
-        this._elementRef = _elementRef;
-        this.checkboxControl.valueChanges.subscribe(value => {
-            const converted = this.convertType(value);
-            this.onChange(converted);
-            this.onTouched();
-            this.checkboxChange.emit(converted);
-        });
-    }
-    writeValue(value) {
-        if (value !== undefined && value !== null) {
-            this.checkboxControl.setValue(this.convertType(value), { emitEvent: false });
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    convertType(value) {
-        switch (this.type) {
-            case 'number':
-                return Number(value == 2 ? 0 : value == 0 ? 2 : value);
-            case 'string':
-                return String(value);
-            default:
-                return !!value;
-        }
-    }
-    // events
-    onFocus(event) {
-        const targetElement = event.target;
-        if (targetElement.matches(':focus-visible')) {
-            this.checkboxContainer.nativeElement.classList.add('focused');
-        }
-    }
-    onBlur() {
-        this.blurEvent.emit();
-        this.checkboxContainer.nativeElement.classList.remove('focused');
-    }
-    setDisabledState(isDisabled) {
-        this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
-        if (isDisabled) {
-            this.checkboxControl.disable();
-        }
-        else {
-            this.checkboxControl.enable();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CheckboxControl, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: CheckboxControl, isStandalone: true, selector: "checkbox-control", inputs: { title: "title", customClass: "customClass", type: "type", disabled: "disabled" }, outputs: { checkboxChange: "checkboxChange", blurEvent: "blurEvent" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CheckboxControl),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "checkboxContainer", first: true, predicate: ["checkboxContainer"], descendants: true }], ngImport: i0, template: "<label class=\"checkbox-container\" [ngClass]=\"customClass\" #checkboxContainer>\r\n    <input type=\"checkbox\" [formControl]=\"checkboxControl\" (focus)=\"onFocus($event)\" (blur)=\"onBlur()\" />\r\n    <span class=\"checkmark\"></span>{{ title }}\r\n</label>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CheckboxControl, decorators: [{
-            type: Component,
-            args: [{ selector: 'checkbox-control', standalone: true, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        FormsModule
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CheckboxControl),
-                            multi: true,
-                        },
-                    ], template: "<label class=\"checkbox-container\" [ngClass]=\"customClass\" #checkboxContainer>\r\n    <input type=\"checkbox\" [formControl]=\"checkboxControl\" (focus)=\"onFocus($event)\" (blur)=\"onBlur()\" />\r\n    <span class=\"checkmark\"></span>{{ title }}\r\n</label>" }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { title: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], checkboxChange: [{
-                type: Output
-            }], blurEvent: [{
-                type: Output
-            }], checkboxContainer: [{
-                type: ViewChild,
-                args: ['checkboxContainer']
-            }] } });
-
-class InputControl {
-    type = "text";
-    title;
-    placeholder = "";
-    customClass;
-    clearVal = true;
-    required = false;
-    deFocus = true;
-    error = false;
-    errorMessage = "";
-    autocomplete = '';
-    readonly = false;
-    search = false;
-    price = false;
-    maxlength;
-    ngModel;
-    advSearch = false;
-    inputLoader = false;
-    useReactiveForms = true;
-    blurEvent = new EventEmitter();
-    selectionCleared = new EventEmitter();
-    inputChange = new EventEmitter();
-    ngModelChange = new EventEmitter();
-    searchClicked = new EventEmitter();
-    advSearchClicked = new EventEmitter();
-    _disabled = false;
-    set disabled(isDisabled) {
-        this._disabled = isDisabled;
-        this.setDisabledState(isDisabled);
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    valueChangesSubscription;
-    onChange = () => { };
-    onTouched = () => { };
-    isFocused = false;
-    showPassword = false;
-    inputControl = new FormControl("");
-    ngOnInit() {
-        if (this.useReactiveForms) {
-            this.valueChangesSubscription = this.inputControl.valueChanges.subscribe((value) => {
-                this.onChange(value);
-                this.inputChange.emit(value ?? "");
-            });
-        }
-    }
-    ngOnDestroy() {
-        if (this.valueChangesSubscription) {
-            this.valueChangesSubscription.unsubscribe();
-        }
-    }
-    // input type
-    getInputType() {
-        return this.type === "password" && this.showPassword ? "text" : this.type;
-    }
-    writeValue(value) {
-        if (this.useReactiveForms) {
-            if (value !== undefined) {
-                this.inputControl.setValue(value, {
-                    emitEvent: false,
-                });
-                if (value != '') {
-                    this.onChange(value);
-                }
-            }
-            if (this.inputControl.disabled !== this.disabled) {
-                this.setDisabledState(this.disabled);
-            }
-        }
-        else {
-            this.ngModel = value;
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    // events
-    onBlur() {
-        this.blurEvent.emit();
-        setTimeout(() => {
-            this.isFocused = false;
-            this.onTouched();
-            if (!this.useReactiveForms) {
-                this.ngModelChange.emit(this.ngModel);
-            }
-        }, 200);
-    }
-    onFocus() {
-        this.isFocused = true;
-    }
-    onKeyPress(event) {
-        let allowedKeys = [];
-        switch (this.type) {
-            case "number":
-                allowedKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
-                break;
-            case "decimal":
-                allowedKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "."];
-                break;
-            default:
-                break;
-        }
-        if (this.search && event.key == "Enter") {
-            this.onSearchClick();
-        }
-        if ((this.type == "number" || this.type == "decimal") &&
-            !allowedKeys.includes(event.key)) {
-            event.preventDefault();
-            return;
-        }
-        if (this.maxlength != null && (this.type == "number" || this.type == "decimal")) {
-            const currentValue = this.inputControl.value ?? "";
-            if (currentValue.length >= this.maxlength) {
-                event.preventDefault();
-                return;
-            }
-        }
-    }
-    setDisabledState(isDisabled) {
-        this._disabled = isDisabled;
-        if (this._disabled && this.useReactiveForms) {
-            this.inputControl.disable({
-                emitEvent: false,
-            });
-        }
-        else if (this.useReactiveForms) {
-            this.inputControl.enable({
-                emitEvent: false,
-            });
-        }
-    }
-    // actions
-    passwordVisible() {
-        this.showPassword = !this.showPassword;
-    }
-    onSearchClick() {
-        this.searchClicked.emit();
-    }
-    onAdvSearchClick() {
-        this.advSearchClicked.emit();
-    }
-    // clear
-    showClearButton() {
-        return (this.isFocused &&
-            this.clearVal &&
-            this.inputControl.value &&
-            this.type !== "password");
-    }
-    resetInput() {
-        this.selectionCleared.emit();
-        if (this.useReactiveForms) {
-            this.inputControl.setValue("");
-            this.inputControl.markAsPristine({ onlySelf: true });
-        }
-        else {
-            this.ngModel = "";
-            this.ngModelChange.emit(this.ngModel);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: InputControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: InputControl, isStandalone: true, selector: "input-control", inputs: { type: "type", title: "title", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", required: "required", deFocus: "deFocus", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", readonly: "readonly", search: "search", price: "price", maxlength: "maxlength", ngModel: "ngModel", advSearch: "advSearch", inputLoader: "inputLoader", useReactiveForms: "useReactiveForms", disabled: "disabled" }, outputs: { blurEvent: "blurEvent", selectionCleared: "selectionCleared", inputChange: "inputChange", ngModelChange: "ngModelChange", searchClicked: "searchClicked", advSearchClicked: "advSearchClicked" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => InputControl),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<div class=\"form-group input\" [ngClass]=\"customClass\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  @if (useReactiveForms) {\r\n  <input [type]=\"getInputType()\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n    [ngClass]=\"{ 'is-invalid': error }\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [readonly]=\"readonly\"\r\n    (keypress)=\"onKeyPress($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n  } @else {\r\n  <input [type]=\"getInputType()\" class=\"form-control\" [placeholder]=\"placeholder\" [(ngModel)]=\"ngModel\"\r\n    [ngClass]=\"{ 'is-invalid': error }\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [readonly]=\"readonly\"\r\n    (keypress)=\"onKeyPress($event)\" />\r\n  }\r\n  @if(deFocus){\r\n  <span class=\"focus-border\"></span>\r\n  }\r\n  @if (!inputLoader && showClearButton()) {\r\n  <label class=\"clear\" (click)=\"resetInput()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (price) {\r\n  <label class=\"ls-price\">\r\n    <i class=\"he he-rupee\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (type === 'search') {\r\n  <label class=\"ls-search\">\r\n    <i class=\"he he-search\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (advSearch) {\r\n  <label class=\"rs-search\" (click)=\"onAdvSearchClick()\">\r\n    <i class=\"he he-search-adv\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (search) {\r\n  <label class=\"rs-search\" (click)=\"onSearchClick()\">\r\n    <i class=\"he he-search\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (type === 'password' && !disabled) {\r\n  <label class=\"toggle-eye\" (click)=\"passwordVisible()\">\r\n    <i class=\"he\" [ngClass]=\"showPassword ? 'he-eye-off' : 'he-eye'\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group .toggle-eye,.form-group ::ng-deep .toggle-eye{top:28px;right:10px;padding:5px;line-height:1;position:absolute}.form-group .toggle-eye .he,.form-group ::ng-deep .toggle-eye .he{font-size:18px}.form-group .toggle-eye .rb,.form-group ::ng-deep .toggle-eye .rb{font-size:17px;color:#5f6554}.form-group.no-label .toggle-eye{top:9px}.form-group.group-sm .toggle-eye{top:5px}.form-group.left-input-search .ls-search{top:9px;left:10px;position:absolute}.form-group.left-input-search .ls-search .he{font-size:1em;color:#807a7a;font-weight:600}.form-group.left-input-search .form-control{text-indent:1.25rem}.form-group.right-input-search .rs-search{top:27px;right:7px;padding:5px;width:30px;height:30px;display:grid;cursor:pointer;position:absolute;border-radius:5px;place-items:center}.form-group.right-input-search .rs-search i{font-size:16px;color:#807a7a}.form-group.right-input-search .rs-search:hover{background:#ff7f5d1a}.form-group.right-input-search .rs-search:hover i{color:#ff7f5d}.form-group.right-input-search .rs-search+.rs-search{right:37px}.form-group.right-input-search .clear{right:2.5rem}.form-group.right-input-search .form-control{padding-right:4rem}.form-group.right-input-search.no-label .rs-search{top:7px}.form-group.right-input-search.no-label .clear{top:10px}.form-group.right-input-search.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.right-input-search.group-sm.no-label .rs-search i{font-size:14px}.form-group.right-input-search.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.right-input-search.double-search .form-control{padding-right:6rem}.form-group.right-input-search.double-search .clear{right:4.5rem}.form-group.price-input .form-control{text-indent:1rem}.form-group.price-input .ls-price{top:21px;padding:8px;display:flex;color:#2ba599;position:absolute;align-items:center;height:calc(var(--input-height) - 2px)}.form-group.price-input .ls-price i{top:1px;color:inherit;cursor:default;font-size:12px}.form-group .clear{z-index:4;cursor:pointer;background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: InputControl, decorators: [{
-            type: Component,
-            args: [{ selector: "input-control", standalone: true, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        FormsModule
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => InputControl),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"form-group input\" [ngClass]=\"customClass\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  @if (useReactiveForms) {\r\n  <input [type]=\"getInputType()\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n    [ngClass]=\"{ 'is-invalid': error }\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [readonly]=\"readonly\"\r\n    (keypress)=\"onKeyPress($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n  } @else {\r\n  <input [type]=\"getInputType()\" class=\"form-control\" [placeholder]=\"placeholder\" [(ngModel)]=\"ngModel\"\r\n    [ngClass]=\"{ 'is-invalid': error }\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [readonly]=\"readonly\"\r\n    (keypress)=\"onKeyPress($event)\" />\r\n  }\r\n  @if(deFocus){\r\n  <span class=\"focus-border\"></span>\r\n  }\r\n  @if (!inputLoader && showClearButton()) {\r\n  <label class=\"clear\" (click)=\"resetInput()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (price) {\r\n  <label class=\"ls-price\">\r\n    <i class=\"he he-rupee\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (type === 'search') {\r\n  <label class=\"ls-search\">\r\n    <i class=\"he he-search\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (advSearch) {\r\n  <label class=\"rs-search\" (click)=\"onAdvSearchClick()\">\r\n    <i class=\"he he-search-adv\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (search) {\r\n  <label class=\"rs-search\" (click)=\"onSearchClick()\">\r\n    <i class=\"he he-search\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (type === 'password' && !disabled) {\r\n  <label class=\"toggle-eye\" (click)=\"passwordVisible()\">\r\n    <i class=\"he\" [ngClass]=\"showPassword ? 'he-eye-off' : 'he-eye'\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group .toggle-eye,.form-group ::ng-deep .toggle-eye{top:28px;right:10px;padding:5px;line-height:1;position:absolute}.form-group .toggle-eye .he,.form-group ::ng-deep .toggle-eye .he{font-size:18px}.form-group .toggle-eye .rb,.form-group ::ng-deep .toggle-eye .rb{font-size:17px;color:#5f6554}.form-group.no-label .toggle-eye{top:9px}.form-group.group-sm .toggle-eye{top:5px}.form-group.left-input-search .ls-search{top:9px;left:10px;position:absolute}.form-group.left-input-search .ls-search .he{font-size:1em;color:#807a7a;font-weight:600}.form-group.left-input-search .form-control{text-indent:1.25rem}.form-group.right-input-search .rs-search{top:27px;right:7px;padding:5px;width:30px;height:30px;display:grid;cursor:pointer;position:absolute;border-radius:5px;place-items:center}.form-group.right-input-search .rs-search i{font-size:16px;color:#807a7a}.form-group.right-input-search .rs-search:hover{background:#ff7f5d1a}.form-group.right-input-search .rs-search:hover i{color:#ff7f5d}.form-group.right-input-search .rs-search+.rs-search{right:37px}.form-group.right-input-search .clear{right:2.5rem}.form-group.right-input-search .form-control{padding-right:4rem}.form-group.right-input-search.no-label .rs-search{top:7px}.form-group.right-input-search.no-label .clear{top:10px}.form-group.right-input-search.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.right-input-search.group-sm.no-label .rs-search i{font-size:14px}.form-group.right-input-search.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.right-input-search.double-search .form-control{padding-right:6rem}.form-group.right-input-search.double-search .clear{right:4.5rem}.form-group.price-input .form-control{text-indent:1rem}.form-group.price-input .ls-price{top:21px;padding:8px;display:flex;color:#2ba599;position:absolute;align-items:center;height:calc(var(--input-height) - 2px)}.form-group.price-input .ls-price i{top:1px;color:inherit;cursor:default;font-size:12px}.form-group .clear{z-index:4;cursor:pointer;background-color:transparent}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], clearVal: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], deFocus: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], errorMessage: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], search: [{
-                type: Input
-            }], price: [{
-                type: Input
-            }], maxlength: [{
-                type: Input
-            }], ngModel: [{
-                type: Input
-            }], advSearch: [{
-                type: Input
-            }], inputLoader: [{
-                type: Input
-            }], useReactiveForms: [{
-                type: Input
-            }], blurEvent: [{
-                type: Output
-            }], selectionCleared: [{
-                type: Output
-            }], inputChange: [{
-                type: Output
-            }], ngModelChange: [{
-                type: Output
-            }], searchClicked: [{
-                type: Output
-            }], advSearchClicked: [{
-                type: Output
-            }], disabled: [{
-                type: Input
-            }] } });
-
-class ClickOutsideDirective {
-    clickOutside = new EventEmitter();
-    host = inject(ElementRef);
-    document = inject(DOCUMENT);
-    destroyRef = inject(DestroyRef);
-    constructor() {
-        fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            const clickedInside = this.host.nativeElement.contains(event.target);
-            if (!clickedInside) {
-                this.clickOutside.emit(event);
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clickOutside]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { clickOutside: [{
-                type: Output
-            }] } });
-
-class MultiselectControl {
-    cdRef;
-    subscription = new Subscription();
-    title;
-    selectedItems = [];
-    required = false;
-    placeholder;
-    customClass;
-    clearVal = true;
-    deFocus = true;
-    optionValueProperty = "id";
-    inputLoader = false;
-    error = false;
-    errorMessage = "";
-    autocomplete = "";
-    showSearch = false;
-    optionDisplayProperty = "displayname";
-    optionsSelected = new EventEmitter();
-    selectionCleared = new EventEmitter();
-    blurEvent = new EventEmitter();
-    inputControl = new FormControl({ value: "", disabled: false });
-    _options = [];
-    set options(arr) {
-        this._options = Array.isArray(arr) ? arr : [];
-        this.filteredOptions = [...this._options];
-        // If we previously received an array of primitive IDs, attempt to map them now that options have arrived
-        if (this._isPrimitivePatch && this._pendingPrimitiveValues.length > 0) {
-            this._mapPrimitivesToObjects();
-        }
-        this._recomputeSelectAllState();
-    }
-    get options() {
-        return this._options;
-    }
-    _disabled = false;
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = value;
-        if (this.inputControl) {
-            if (value) {
-                this.inputControl.disable({ emitEvent: false });
-            }
-            else {
-                this.inputControl.enable({ emitEvent: false });
-            }
-        }
-    }
-    _isPrimitivePatch = false;
-    _pendingPrimitiveValues = [];
-    onChange = () => { };
-    onTouched = () => { };
-    dropdown;
-    input;
-    filteredOptions = [];
-    isDropdownOpen = false;
-    selectAllChecked = false;
-    keySearch = "";
-    onSearch = new Subject();
-    selectedItemList = "";
-    highlightedIndex = null;
-    dropdownInitialized = false;
-    popperInstance;
-    constructor(cdRef) {
-        this.cdRef = cdRef;
-    }
-    ngOnInit() {
-        // Subscribe to search‐term changes, debounce, then filter
-        this.subscription = this.onSearch
-            .pipe(debounceTime(300), distinctUntilChanged())
-            .subscribe((searchText) => {
-            this._applyFilter(searchText);
-            this._recomputeSelectAllState();
-        });
-        // Initialize filteredOptions to match all options
-        this.filteredOptions = [...this.options];
-    }
-    ngAfterViewChecked() {
-        if (this.isDropdownOpen && !this.dropdownInitialized) {
-            this._createPopperInstance();
-            this.dropdownInitialized = true;
-        }
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-        if (this.popperInstance) {
-            this.popperInstance.destroy();
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes["options"]) {
-            // When the parent replaces “options,” we reapply any filtering and “select all” logic
-            this.filteredOptions = [...this.options];
-            this._recomputeSelectAllState();
-        }
-    }
-    writeValue(value) {
-        // If parent gave us something that is not an array, clear selection
-        if (!Array.isArray(value)) {
-            this._isPrimitivePatch = false;
-            this._pendingPrimitiveValues = [];
-            this.selectedItems = [];
-            this.selectedItemList = "";
-            this.selectAllChecked = false;
-            return;
-        }
-        // CASE A: array of primitive IDs, e.g. [12,17]
-        if (value.length > 0 &&
-            (typeof value[0] === "string" || typeof value[0] === "number")) {
-            this._isPrimitivePatch = true;
-            this._pendingPrimitiveValues = [...value];
-            this._mapPrimitivesToObjects();
-            this._recomputeSelectAllState();
-            return;
-        }
-        // CASE B: array of full objects (with `id` or whatever `optionValueProperty` is)
-        if (value.length > 0 &&
-            typeof value[0] === "object" &&
-            value[0][this.optionValueProperty] != null) {
-            // Convert to an array of IDs, then treat exactly like CASE A
-            const idArray = value.map((obj) => obj[this.optionValueProperty]);
-            this._isPrimitivePatch = true;
-            this._pendingPrimitiveValues = idArray;
-            this._mapPrimitivesToObjects();
-            this._recomputeSelectAllState();
-            return;
-        }
-        // CASE C: maybe parent passed the exact same object references that already exist in `options`
-        // In that case, we can just use them directly.
-        this._isPrimitivePatch = false;
-        this._pendingPrimitiveValues = [];
-        this.selectedItems = [...value];
-        this.selectedItemList = this.selectedItems
-            .map((item) => item[this.optionDisplayProperty])
-            .join(", ");
-        this.onChange(this.selectedItems);
-        this._recomputeSelectAllState();
-    }
-    _mapPrimitivesToObjects() {
-        if (!this._isPrimitivePatch ||
-            this._pendingPrimitiveValues.length === 0 ||
-            this._options.length === 0) {
-            return;
-        }
-        // Find matching option‐objects whose ID property is in the pending list
-        const matched = this._options.filter((opt) => this._pendingPrimitiveValues.includes(opt[this.optionValueProperty]));
-        this.selectedItems = matched;
-        this.selectedItemList = matched
-            .map((item) => item[this.optionDisplayProperty])
-            .join(", ");
-        // Notify “onChange” with the full‐object selection
-        this.onChange(this.selectedItems);
-        this._isPrimitivePatch = false;
-        this._pendingPrimitiveValues = [];
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    // events
-    isSelected(option) {
-        return (Array.isArray(this.selectedItems) && this.selectedItems.includes(option));
-    }
-    onBlur(event) {
-        this.blurEvent.emit();
-        // const target = event.relatedTarget as HTMLElement;
-        // if (
-        //   target &&
-        //   (target.closest(".option-list") || target.closest(".list-filter"))
-        // ) {
-        //   return;
-        // }
-        this.onTouched();
-        // setTimeout(() => {
-        //   this.isDropdownOpen = false;
-        // }, 100);
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        if (isDisabled) {
-            this.inputControl.disable({ emitEvent: false });
-        }
-        else {
-            this.inputControl.enable({ emitEvent: false });
-        }
-    }
-    // search box
-    handleInput(event) {
-        const txt = event.target.value;
-        this.onSearch.next(txt);
-    }
-    _applyFilter(value) {
-        const lower = value.toLowerCase();
-        this.filteredOptions = this._options
-            .filter((opt) => opt[this.optionDisplayProperty]?.toLowerCase().includes(lower))
-            .sort((a, b) => {
-            const aIndex = a[this.optionDisplayProperty]
-                .toLowerCase()
-                .indexOf(lower);
-            const bIndex = b[this.optionDisplayProperty]
-                .toLowerCase()
-                .indexOf(lower);
-            return aIndex - bIndex;
-        });
-        // If an item was previously selected but is no longer in filteredOptions, remove it temporarily
-        this.selectedItems = this.selectedItems.filter((item) => this.filteredOptions.includes(item));
-        this.selectedItemList = this.selectedItems
-            .map((item) => item[this.optionDisplayProperty])
-            .join(", ");
-        this.onChange(this.selectedItems);
-        this.optionsSelected.emit(this.selectedItems);
-        if (this.filteredOptions.length > 0) {
-            this.highlightedIndex = this._options.indexOf(this.filteredOptions[0]);
-        }
-        else {
-            this.highlightedIndex = null;
-        }
-        this._recomputeSelectAllState();
-        this.cdRef.detectChanges();
-    }
-    // checkbox events
-    _recomputeSelectAllState() {
-        if (!this.filteredOptions || this.filteredOptions.length === 0) {
-            this.selectAllChecked = false;
-            return;
-        }
-        this.selectAllChecked = this.filteredOptions.every((opt) => this.selectedItems.includes(opt));
-    }
-    onSelectAllChange(event) {
-        const input = event.target;
-        this.selectAllChecked = input.checked;
-        this._toggleSelectAll();
-    }
-    _toggleSelectAll() {
-        if (this.selectAllChecked) {
-            // Add all currently filtered options to selection
-            this.selectedItems = Array.from(new Set([...this.selectedItems, ...this.filteredOptions]));
-        }
-        else {
-            // Remove all filtered options from selection
-            this.selectedItems = this.selectedItems.filter((item) => !this.filteredOptions.includes(item));
-        }
-        this.selectedItemList = this.selectedItems
-            .map((item) => item[this.optionDisplayProperty])
-            .join(", ");
-        this.onChange(this.selectedItems);
-        this.optionsSelected.emit(this.selectedItems);
-    }
-    removeSelectedOption(option) {
-        this.selectedItems = this.selectedItems.filter((item) => item !== option);
-        this.selectedItemList = this.selectedItems
-            .map((item) => item[this.optionDisplayProperty])
-            .join(", ");
-        this.onChange(this.selectedItems);
-        this.onTouched();
-        this.optionsSelected.emit(this.selectedItems);
-    }
-    toggleCheckbox(option) {
-        if (this.isSelected(option)) {
-            this.selectedItems = this.selectedItems.filter((item) => item !== option);
-        }
-        else {
-            this.selectedItems = [...this.selectedItems, option];
-        }
-        this.selectedItemList = this.selectedItems
-            .map((item) => item[this.optionDisplayProperty])
-            .join(", ");
-        // Update “select all” checkbox
-        this._recomputeSelectAllState();
-        // Notify form that selection changed
-        this.onChange(this.selectedItems);
-        this.onTouched();
-        this.optionsSelected.emit(this.selectedItems);
-    }
-    // Keyboard navigation inside the dropdown
-    onKeyDown(event) {
-        if (this.isDropdownOpen) {
-            switch (event.key) {
-                case "ArrowDown":
-                    this._highlightNext();
-                    event.preventDefault();
-                    break;
-                case "ArrowUp":
-                    this._highlightPrevious();
-                    event.preventDefault();
-                    break;
-                case "Enter":
-                    if (this.highlightedIndex !== null &&
-                        this.highlightedIndex < this.filteredOptions.length) {
-                        this.toggleCheckbox(this.filteredOptions[this.highlightedIndex]);
-                    }
-                    event.preventDefault();
-                    break;
-                case "Escape":
-                    this.isDropdownOpen = false;
-                    break;
-                case "Tab":
-                    this.isDropdownOpen = false;
-                    break;
-            }
-        }
-        else if (event.key === " ") {
-            this.toggleDropdown();
-            event.preventDefault();
-        }
-    }
-    handleWindowKeydown(event) {
-        if (event.key === "Tab") {
-            this.isDropdownOpen = false;
-        }
-    }
-    _highlightNext() {
-        if (this.highlightedIndex === null ||
-            this.highlightedIndex === this.filteredOptions.length - 1) {
-            this.highlightedIndex = 0;
-        }
-        else {
-            this.highlightedIndex++;
-        }
-        this._scrollToHighlighted();
-    }
-    _highlightPrevious() {
-        if (this.highlightedIndex === null || this.highlightedIndex === 0) {
-            this.highlightedIndex = this.filteredOptions.length - 1;
-        }
-        else {
-            this.highlightedIndex--;
-        }
-        this._scrollToHighlighted();
-    }
-    _scrollToHighlighted() {
-        setTimeout(() => {
-            const container = document.querySelector(".option-list");
-            if (!container)
-                return;
-            const highlighted = container.querySelector(".highlighted");
-            if (highlighted) {
-                highlighted.scrollIntoView({ block: "nearest" });
-            }
-        }, 0);
-    }
-    // popper
-    _createPopperInstance() {
-        if (!this.dropdown || !this.input)
-            return;
-        this.popperInstance = createPopper(this.input.nativeElement, this.dropdown.nativeElement, {
-            placement: "bottom-start",
-            modifiers: [
-                {
-                    name: "offset",
-                    options: {
-                        offset: [0, 1],
-                    },
-                },
-                {
-                    name: "flip",
-                    options: {
-                        fallbackPlacements: ["top-start", "bottom-start"],
-                    },
-                },
-            ],
-        });
-    }
-    // toggle, reset, close and clear
-    toggleDropdown() {
-        if (this.inputControl.disabled)
-            return;
-        this.isDropdownOpen = !this.isDropdownOpen;
-        this.dropdownInitialized = false;
-        if (this.isDropdownOpen) {
-            this.filteredOptions = [...this.options];
-            this.highlightedIndex = null;
-        }
-    }
-    selectListOutsideClick() {
-        this.isDropdownOpen = false;
-    }
-    resetSelection() {
-        this.selectedItems = [];
-        this.selectedItemList = "";
-        this.onChange([]);
-        this.onTouched();
-        this.isDropdownOpen = false;
-        this.selectAllChecked = false;
-        this.selectionCleared.emit();
-    }
-    onCloseDropdown() {
-        this.isDropdownOpen = false;
-        this._recomputeSelectAllState();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MultiselectControl, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: MultiselectControl, isStandalone: true, selector: "multiselect-control", inputs: { title: "title", selectedItems: "selectedItems", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", deFocus: "deFocus", optionValueProperty: "optionValueProperty", inputLoader: "inputLoader", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", showSearch: "showSearch", optionDisplayProperty: "optionDisplayProperty", options: "options", disabled: "disabled" }, outputs: { optionsSelected: "optionsSelected", selectionCleared: "selectionCleared", blurEvent: "blurEvent" }, host: { listeners: { "window:keydown": "handleWindowKeydown($event)" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => MultiselectControl),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group multi-select\" [ngClass]=\"customClass\" (clickOutside)=\"selectListOutsideClick()\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  <input #input type=\"text\" class=\"form-control\" placeholder=\"{{ placeholder }}\" [formControl]=\"inputControl\"\r\n    [ngClass]=\"{'is-invalid': error}\" (blur)=\"onBlur($event)\" (click)=\"toggleDropdown()\" readonly\r\n    [value]=\"selectedItemList\" (keydown)=\"onKeyDown($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n  @if (deFocus) {\r\n  <span class=\"focus-border\"></span>\r\n  }\r\n\r\n  @if (!inputLoader && isDropdownOpen && clearVal && selectedItems.length > 0) {\r\n  <label class=\"clear\" (click)=\"resetSelection()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (!inputLoader) {\r\n  <label class=\"arrow\">\r\n    <i class=\"he he-chevron-down\"></i>\r\n  </label> }\r\n\r\n  @if (isDropdownOpen) {\r\n  <div #dropdown class=\"option-list\">\r\n    @if (showSearch && filteredOptions.length > 5) {\r\n    <div class=\"list-filter\">\r\n      <div>\r\n        <label class=\"checkbox-container select-all\">\r\n          <input type=\"checkbox\" [checked]=\"selectAllChecked\" (change)=\"onSelectAllChange($event)\" tabindex=\"-1\" />\r\n          <span class=\"checkmark\"></span>\r\n        </label>\r\n      </div>\r\n      <div class=\"form-group\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search...\" (input)=\"handleInput($event) \"\r\n          (keydown)=\"onKeyDown($event)\" />\r\n      </div>\r\n      <div class=\"ms-close\">\r\n        <button type=\"button\" class=\"icon-button\">\r\n          <a (click)=\"onCloseDropdown()\"><i class=\"he he-close\"></i></a>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"list-wrap\">\r\n      @for (option of filteredOptions; track option[optionDisplayProperty]; let i = $index) {\r\n      <div class=\"list-item\" (change)=\"toggleCheckbox(option)\" [ngClass]=\"{ 'highlighted': i === highlightedIndex }\">\r\n        <label class=\"checkbox-container multi-select\">\r\n          <input type=\"checkbox\" [checked]=\"isSelected(option)\" tabindex=\"-1\" />\r\n          <span class=\"checkmark\"></span>\r\n          {{ option[optionDisplayProperty] }}\r\n        </label>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    @if (filteredOptions.length === 0) {\r\n    <div class=\"no-results\">No results found</div>\r\n    }\r\n  </div>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group.multi-select .option-list .list-filter{gap:10px;display:flex;padding:9px 10px;align-items:center;border-bottom:1px solid #efefef}.form-group.multi-select .option-list .list-filter .checkbox-container.select-all{top:-10px;margin-bottom:0;padding-left:22px}.form-group.multi-select .option-list .list-filter .form-group{margin-bottom:0;width:calc(100% - 70px)}.form-group.multi-select .option-list .list-filter .form-group .form-control{height:34px;border-radius:5px;background:#fff;padding:.275rem .5rem;border:1px solid #cccccc!important}.form-group.multi-select .option-list .list-filter .form-group .form-control::placeholder{font-size:.925em}.form-group.multi-select .option-list .list-filter .ms-close .icon-button{background:#f0f0f0}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a{width:28px;height:28px;display:grid;cursor:pointer;position:relative;border-radius:5px;place-items:center;text-decoration:none;border:1px solid #efefef;box-shadow:0 0 3px #ebebeb}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a i{font-size:14px}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover{background:#ff7f5d1a}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover i{color:#ff7f5d}.form-group.multi-select .option-list .list-wrap{overflow:auto;max-height:180px}.form-group.multi-select .option-list .list-item{padding:0}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select{width:100%;font-size:1em;margin-bottom:0;font-weight:400;color:#584e4e;letter-spacing:.015rem;padding:10px 10px 10px 40px}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select .checkmark{top:9px;left:10px}.form-group.multi-select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.multi-select .clear{right:30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MultiselectControl, decorators: [{
-            type: Component,
-            args: [{ selector: "multiselect-control", standalone: true, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        ClickOutsideDirective
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => MultiselectControl),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"form-group multi-select\" [ngClass]=\"customClass\" (clickOutside)=\"selectListOutsideClick()\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  <input #input type=\"text\" class=\"form-control\" placeholder=\"{{ placeholder }}\" [formControl]=\"inputControl\"\r\n    [ngClass]=\"{'is-invalid': error}\" (blur)=\"onBlur($event)\" (click)=\"toggleDropdown()\" readonly\r\n    [value]=\"selectedItemList\" (keydown)=\"onKeyDown($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n  @if (deFocus) {\r\n  <span class=\"focus-border\"></span>\r\n  }\r\n\r\n  @if (!inputLoader && isDropdownOpen && clearVal && selectedItems.length > 0) {\r\n  <label class=\"clear\" (click)=\"resetSelection()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (!inputLoader) {\r\n  <label class=\"arrow\">\r\n    <i class=\"he he-chevron-down\"></i>\r\n  </label> }\r\n\r\n  @if (isDropdownOpen) {\r\n  <div #dropdown class=\"option-list\">\r\n    @if (showSearch && filteredOptions.length > 5) {\r\n    <div class=\"list-filter\">\r\n      <div>\r\n        <label class=\"checkbox-container select-all\">\r\n          <input type=\"checkbox\" [checked]=\"selectAllChecked\" (change)=\"onSelectAllChange($event)\" tabindex=\"-1\" />\r\n          <span class=\"checkmark\"></span>\r\n        </label>\r\n      </div>\r\n      <div class=\"form-group\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search...\" (input)=\"handleInput($event) \"\r\n          (keydown)=\"onKeyDown($event)\" />\r\n      </div>\r\n      <div class=\"ms-close\">\r\n        <button type=\"button\" class=\"icon-button\">\r\n          <a (click)=\"onCloseDropdown()\"><i class=\"he he-close\"></i></a>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"list-wrap\">\r\n      @for (option of filteredOptions; track option[optionDisplayProperty]; let i = $index) {\r\n      <div class=\"list-item\" (change)=\"toggleCheckbox(option)\" [ngClass]=\"{ 'highlighted': i === highlightedIndex }\">\r\n        <label class=\"checkbox-container multi-select\">\r\n          <input type=\"checkbox\" [checked]=\"isSelected(option)\" tabindex=\"-1\" />\r\n          <span class=\"checkmark\"></span>\r\n          {{ option[optionDisplayProperty] }}\r\n        </label>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    @if (filteredOptions.length === 0) {\r\n    <div class=\"no-results\">No results found</div>\r\n    }\r\n  </div>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group.multi-select .option-list .list-filter{gap:10px;display:flex;padding:9px 10px;align-items:center;border-bottom:1px solid #efefef}.form-group.multi-select .option-list .list-filter .checkbox-container.select-all{top:-10px;margin-bottom:0;padding-left:22px}.form-group.multi-select .option-list .list-filter .form-group{margin-bottom:0;width:calc(100% - 70px)}.form-group.multi-select .option-list .list-filter .form-group .form-control{height:34px;border-radius:5px;background:#fff;padding:.275rem .5rem;border:1px solid #cccccc!important}.form-group.multi-select .option-list .list-filter .form-group .form-control::placeholder{font-size:.925em}.form-group.multi-select .option-list .list-filter .ms-close .icon-button{background:#f0f0f0}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a{width:28px;height:28px;display:grid;cursor:pointer;position:relative;border-radius:5px;place-items:center;text-decoration:none;border:1px solid #efefef;box-shadow:0 0 3px #ebebeb}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a i{font-size:14px}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover{background:#ff7f5d1a}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover i{color:#ff7f5d}.form-group.multi-select .option-list .list-wrap{overflow:auto;max-height:180px}.form-group.multi-select .option-list .list-item{padding:0}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select{width:100%;font-size:1em;margin-bottom:0;font-weight:400;color:#584e4e;letter-spacing:.015rem;padding:10px 10px 10px 40px}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select .checkmark{top:9px;left:10px}.form-group.multi-select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.multi-select .clear{right:30px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
-                type: Input
-            }], selectedItems: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], clearVal: [{
-                type: Input
-            }], deFocus: [{
-                type: Input
-            }], optionValueProperty: [{
-                type: Input
-            }], inputLoader: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], errorMessage: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }], showSearch: [{
-                type: Input
-            }], optionDisplayProperty: [{
-                type: Input
-            }], optionsSelected: [{
-                type: Output
-            }], selectionCleared: [{
-                type: Output
-            }], blurEvent: [{
-                type: Output
-            }], options: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], dropdown: [{
-                type: ViewChild,
-                args: ["dropdown", { static: false }]
-            }], input: [{
-                type: ViewChild,
-                args: ["input", { static: false }]
-            }], handleWindowKeydown: [{
-                type: HostListener,
-                args: ["window:keydown", ["$event"]]
-            }] } });
-
-class SelectControl {
-    subscription = new Subscription();
-    optionDisplayProperty = "displayname";
-    required = false;
-    placeholder;
-    customClass;
-    clearVal = true;
-    deFocus = true;
-    error = false;
-    errorMessage = "";
-    autocomplete = "";
-    inputLoader = false;
-    isAddNewItem = false;
-    optionSelected = new EventEmitter();
-    selectionCleared = new EventEmitter();
-    addNewItemClicked = new EventEmitter();
-    blurEvent = new EventEmitter();
-    optionPatched = new EventEmitter();
-    title;
-    _options = [];
-    set options(opts) {
-        this._options = opts;
-        this.filteredOptions = [...this._options];
-        this.highlightSelectedItem();
-        this.processValueBuffer();
-    }
-    get options() {
-        return this._options;
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = value;
-        if (this.inputControl) {
-            if (value) {
-                this.inputControl.disable({ emitEvent: false });
-            }
-            else {
-                this.inputControl.enable({ emitEvent: false });
-            }
-        }
-    }
-    dropdown;
-    input;
-    filteredOptions = [];
-    keySearch = "";
-    selectedItem = null;
-    onSearch = new Subject();
-    inputControl = new FormControl({ value: "", disabled: false });
-    isDropdownOpen = false;
-    highlightedIndex = null;
-    onChange = () => { };
-    onTouched = () => { };
-    valueBuffer = null;
-    _disabled = false;
-    dropdownInitialized = false;
-    popperInstance;
-    ngOnInit() {
-        this.subscription = this.onSearch
-            .pipe(debounceTime(300), distinctUntilChanged())
-            .subscribe((searchText) => {
-            this.focusOption(searchText);
-            this.keySearch = "";
-        });
-        this.filteredOptions = this._options;
-        // Sync the input control value with the selected item
-        this.inputControl.valueChanges.subscribe((value) => {
-            this.onChange(value);
-        });
-    }
-    ngAfterViewChecked() {
-        if (this.isDropdownOpen && !this.dropdownInitialized) {
-            this.createPopperInstance();
-            this.dropdownInitialized = true;
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes["options"]) {
-            this.filteredOptions = [...this._options];
-            this.highlightSelectedItem();
-        }
-        if (changes["disabled"]) {
-            this.disabled = changes["disabled"].currentValue;
-        }
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    writeValue(value) {
-        if (this.inputControl.disabled !== this.disabled) {
-            this.setDisabledState(this.disabled);
-        }
-        this.valueBuffer = value;
-        this.processValueBuffer();
-    }
-    processValueBuffer() {
-        if (this.valueBuffer !== null &&
-            this._options &&
-            this._options.length > 0) {
-            // Try to match selected item by ID
-            const matchedItem = this._options.find((option) => option.id === this.valueBuffer);
-            if (matchedItem) {
-                this.selectedItem = matchedItem;
-                const displayValue = matchedItem[this.optionDisplayProperty];
-                this.inputControl.setValue(displayValue, { emitEvent: false });
-                this.filteredOptions = [...this._options];
-                this.onTouched();
-                this.inputControl.markAsDirty();
-                this.optionPatched.emit(this.selectedItem);
-            }
-            else {
-                // If not found, don't clear the field automatically
-                // You may choose to keep it or clear it. Here we clear it.
-                this.selectedItem = null;
-                this.inputControl.setValue("", { emitEvent: false });
-                this.highlightedIndex = null;
-            }
-        }
-        else if (this.valueBuffer === null) {
-            this.selectedItem = null;
-            this.inputControl.setValue("", { emitEvent: false });
-            this.highlightedIndex = null;
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    // events
-    onBlur() {
-        this.blurEvent.emit();
-        this.onTouched();
-        setTimeout(() => {
-            this.isDropdownOpen = false;
-        }, 300);
-    }
-    onKeyDown(event) {
-        const isAlphabetOrNumberKey = /^[a-zA-Z0-9]$/.test(event.key);
-        if (this.isDropdownOpen) {
-            switch (event.key) {
-                case "ArrowDown":
-                    this.highlightNext();
-                    event.preventDefault();
-                    break;
-                case "ArrowUp":
-                    this.highlightPrevious();
-                    event.preventDefault();
-                    break;
-                case "Enter":
-                    if (this.highlightedIndex !== null) {
-                        this.selectOption(this.filteredOptions[this.highlightedIndex]);
-                    }
-                    event.preventDefault();
-                    break;
-                case "Escape":
-                    this.isDropdownOpen = false;
-                    break;
-                default:
-                    if (isAlphabetOrNumberKey) {
-                        this.keySearch += event.key.toString();
-                        if (this.keySearch !== "") {
-                            this.onSearch.next(this.keySearch);
-                        }
-                    }
-                    break;
-            }
-        }
-        else if (event.key === " ") {
-            this.toggleDropdown();
-            event.preventDefault();
-        }
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        if (this.disabled) {
-            this.inputControl.disable({ emitEvent: false });
-        }
-        else {
-            this.inputControl.enable({ emitEvent: false });
-        }
-    }
-    selectOption(option) {
-        if (this.selectedItem !== option) {
-            this.selectedItem = option;
-            this.isDropdownOpen = false;
-            const displayValue = this.selectedItem[this.optionDisplayProperty];
-            this.inputControl.setValue(displayValue, { emitEvent: false });
-            this.onChange(this.selectedItem.id);
-            this.onTouched();
-            this.inputControl.markAsDirty();
-            this.optionSelected.emit(this.selectedItem);
-        }
-    }
-    // highlight
-    highlightSelectedItem() {
-        const selectedIndex = this.filteredOptions.findIndex((option) => option === this.selectedItem);
-        if (selectedIndex !== -1) {
-            this.highlightedIndex = selectedIndex;
-            this.scrollToHighlighted();
-        }
-        else {
-            this.highlightedIndex = null;
-        }
-    }
-    highlightNext() {
-        if (this.highlightedIndex === null ||
-            this.highlightedIndex === this.filteredOptions.length - 1) {
-            this.highlightedIndex = 0;
-        }
-        else {
-            this.highlightedIndex++;
-        }
-        this.scrollToHighlighted();
-    }
-    highlightPrevious() {
-        if (this.highlightedIndex === null || this.highlightedIndex === 0) {
-            this.highlightedIndex = this.filteredOptions.length - 1;
-        }
-        else {
-            this.highlightedIndex--;
-        }
-        this.scrollToHighlighted();
-    }
-    focusOption(value) {
-        const filterValue = value.toLowerCase();
-        let foundIndex = this._options.findIndex((option) => option[this.optionDisplayProperty]?.toLowerCase() === filterValue);
-        if (foundIndex === -1) {
-            foundIndex = this._options.findIndex((option) => option[this.optionDisplayProperty]
-                ?.toLowerCase()
-                .startsWith(filterValue));
-        }
-        if (foundIndex === -1) {
-            foundIndex = this._options.findIndex((option) => option[this.optionDisplayProperty]?.toLowerCase().includes(filterValue));
-        }
-        if (foundIndex !== -1) {
-            this.highlightedIndex = foundIndex;
-            this.scrollToHighlighted();
-        }
-        else {
-            this.highlightedIndex = null;
-        }
-    }
-    scrollToHighlighted() {
-        setTimeout(() => {
-            const container = document.querySelector(".option-list");
-            if (container) {
-                const highlighted = container.querySelector(".highlighted");
-                if (highlighted) {
-                    highlighted.scrollIntoView({ block: "nearest" });
-                }
-            }
-        }, 0);
-    }
-    // actions
-    onAddNewItemClick() {
-        this.addNewItemClicked.emit();
-    }
-    // popper
-    createPopperInstance() {
-        if (this.dropdown) {
-            this.popperInstance = createPopper(this.input.nativeElement, this.dropdown.nativeElement, {
-                placement: "bottom-start",
-                modifiers: [
-                    {
-                        name: "offset",
-                        options: {
-                            offset: [0, 1],
-                        },
-                    },
-                    {
-                        name: "flip",
-                        options: {
-                            fallbackPlacements: ["top-start", "bottom-start"],
-                        },
-                    },
-                ],
-            });
-        }
-    }
-    // toggle, open, hide, reset and clear
-    toggleDropdown() {
-        if (!this.inputControl.disabled) {
-            this.isDropdownOpen = !this.isDropdownOpen;
-            this.dropdownInitialized = false;
-            if (this.isDropdownOpen && this.selectedItem) {
-                this.highlightSelectedItem();
-            }
-        }
-    }
-    openDropdown(event) {
-        if (event.ctrlKey && event.key === "Enter") {
-            this.toggleDropdown();
-        }
-    }
-    selectListOutsideClick(e) {
-        this.isDropdownOpen = false;
-    }
-    hideDropdown() {
-        setTimeout(() => {
-            this.isDropdownOpen = false;
-        }, 200);
-    }
-    resetSelection() {
-        this.selectionCleared.emit();
-        this.selectedItem = null;
-        this.inputControl.setValue("", { emitEvent: false });
-        this.onChange(null);
-        this.onTouched();
-        this.valueBuffer = null;
-        this.isDropdownOpen = false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SelectControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: SelectControl, isStandalone: true, selector: "select-control", inputs: { optionDisplayProperty: "optionDisplayProperty", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", deFocus: "deFocus", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", inputLoader: "inputLoader", isAddNewItem: "isAddNewItem", title: "title", options: "options", disabled: "disabled" }, outputs: { optionSelected: "optionSelected", selectionCleared: "selectionCleared", addNewItemClicked: "addNewItemClicked", blurEvent: "blurEvent", optionPatched: "optionPatched" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => SelectControl),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group select\" [ngClass]=\"customClass\" (clickOutside)=\"selectListOutsideClick($event)\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  <input #input type=\"text\" class=\"form-control\" [placeholder]=\"placeholder ? placeholder : ''\"\r\n    [formControl]=\"inputControl\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\" (click)=\"toggleDropdown()\"\r\n    (keydown)=\"onKeyDown($event)\" readonly [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n  @if (deFocus) {\r\n  <span class=\"focus-border\"></span>\r\n  }\r\n\r\n  @if (!inputLoader && isDropdownOpen && selectedItem && clearVal) {\r\n  <label class=\"clear\" (click)=\"resetSelection()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label> }\r\n  @if (!inputLoader) {\r\n  <label class=\"arrow\">\r\n    <i class=\"he he-chevron-down\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (isDropdownOpen) {\r\n  <div #dropdown class=\"option-list\">\r\n    <div class=\"no-results\" *ngIf=\"filteredOptions.length === 0\">\r\n      <div>No results found</div>\r\n      <div *ngIf=\"isAddNewItem\" (click)=\"onAddNewItemClick()\" class=\"btn-new\">Add New Item</div>\r\n    </div>\r\n\r\n    @for (option of filteredOptions; track option[optionDisplayProperty]; let idx = $index) {\r\n    <div class=\"list-item\" [ngClass]=\"{\r\n              'active': option === selectedItem,\r\n              'highlighted': idx === highlightedIndex\r\n            }\" (click)=\"selectOption(option)\">\r\n      @if (option.countryCode) {\r\n      <img src=\"https://flagcdn.com/w80/{{ option.countryCode }}.png\" width=\"20\" alt=\"{{ option.countryCode }} flag\" loading=\"lazy\" />\r\n      }\r\n      {{ option[optionDisplayProperty] }}\r\n    </div>\r\n    }\r\n\r\n  </div>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group.select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.select .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}.form-group.select .clear{right:30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SelectControl, decorators: [{
-            type: Component,
-            args: [{ selector: "select-control", standalone: true, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        ClickOutsideDirective
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => SelectControl),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"form-group select\" [ngClass]=\"customClass\" (clickOutside)=\"selectListOutsideClick($event)\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n  }\r\n\r\n  <input #input type=\"text\" class=\"form-control\" [placeholder]=\"placeholder ? placeholder : ''\"\r\n    [formControl]=\"inputControl\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\" (click)=\"toggleDropdown()\"\r\n    (keydown)=\"onKeyDown($event)\" readonly [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n  @if (deFocus) {\r\n  <span class=\"focus-border\"></span>\r\n  }\r\n\r\n  @if (!inputLoader && isDropdownOpen && selectedItem && clearVal) {\r\n  <label class=\"clear\" (click)=\"resetSelection()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label> }\r\n  @if (!inputLoader) {\r\n  <label class=\"arrow\">\r\n    <i class=\"he he-chevron-down\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (isDropdownOpen) {\r\n  <div #dropdown class=\"option-list\">\r\n    <div class=\"no-results\" *ngIf=\"filteredOptions.length === 0\">\r\n      <div>No results found</div>\r\n      <div *ngIf=\"isAddNewItem\" (click)=\"onAddNewItemClick()\" class=\"btn-new\">Add New Item</div>\r\n    </div>\r\n\r\n    @for (option of filteredOptions; track option[optionDisplayProperty]; let idx = $index) {\r\n    <div class=\"list-item\" [ngClass]=\"{\r\n              'active': option === selectedItem,\r\n              'highlighted': idx === highlightedIndex\r\n            }\" (click)=\"selectOption(option)\">\r\n      @if (option.countryCode) {\r\n      <img src=\"https://flagcdn.com/w80/{{ option.countryCode }}.png\" width=\"20\" alt=\"{{ option.countryCode }} flag\" loading=\"lazy\" />\r\n      }\r\n      {{ option[optionDisplayProperty] }}\r\n    </div>\r\n    }\r\n\r\n  </div>\r\n  }\r\n\r\n  @if (inputLoader) {\r\n  <label class=\"loader input-loader\"></label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group.select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.select .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}.form-group.select .clear{right:30px}\n"] }]
-        }], propDecorators: { optionDisplayProperty: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], clearVal: [{
-                type: Input
-            }], deFocus: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], errorMessage: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }], inputLoader: [{
-                type: Input
-            }], isAddNewItem: [{
-                type: Input
-            }], optionSelected: [{
-                type: Output
-            }], selectionCleared: [{
-                type: Output
-            }], addNewItemClicked: [{
-                type: Output
-            }], blurEvent: [{
-                type: Output
-            }], optionPatched: [{
-                type: Output
-            }], title: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], dropdown: [{
-                type: ViewChild,
-                args: ["dropdown", { static: false }]
-            }], input: [{
-                type: ViewChild,
-                args: ["input", { static: false }]
-            }] } });
-
-class SwitchControl {
-    _renderer;
-    _elementRef;
-    title;
-    customClass;
-    set disabled(value) {
-        this._disabled = value;
-        this.setDisabledState(value);
-    }
-    set checked(value) {
-        this._checked = value;
-        this.switchControl.setValue(value, { emitEvent: false }); // set without emitting
-    }
-    switchChange = new EventEmitter();
-    blurEvent = new EventEmitter();
-    switchContainer;
-    get checked() {
-        return this._checked;
-    }
-    _checked = false;
-    _disabled = false;
-    switchControl = new FormControl({ value: false, disabled: this._disabled });
-    onChange = () => { };
-    onTouched = () => { };
-    constructor(_renderer, _elementRef) {
-        this._renderer = _renderer;
-        this._elementRef = _elementRef;
-        this.switchControl.valueChanges.subscribe(value => {
-            this.onChange(value ?? false);
-            this.onTouched();
-            this.switchChange.emit(value ?? false);
-        });
-    }
-    writeValue(value) {
-        if (value !== undefined) {
-            this.switchControl.setValue(value, { emitEvent: false });
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    // events
-    onFocus() {
-        this.switchContainer.nativeElement.classList.add('focused');
-    }
-    onBlur() {
-        this.blurEvent.emit();
-        this.onTouched();
-        this.switchContainer.nativeElement.classList.remove('focused');
-    }
-    setDisabledState(isDisabled) {
-        this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
-        if (isDisabled) {
-            this.switchControl.disable();
-        }
-        else {
-            this.switchControl.enable();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SwitchControl, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: SwitchControl, isStandalone: true, selector: "switch-control", inputs: { title: "title", customClass: "customClass", disabled: "disabled", checked: "checked" }, outputs: { switchChange: "switchChange", blurEvent: "blurEvent" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => SwitchControl),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "switchContainer", first: true, predicate: ["switchContainer"], descendants: true }], ngImport: i0, template: "<label class=\"switch-container\" [ngClass]=\"customClass\" #switchContainer>\r\n    <input type=\"checkbox\" [formControl]=\"switchControl\"  (focus)=\"onFocus()\" (blur)=\"onBlur()\">\r\n    <span class=\"switch-slider\"></span>\r\n</label>", styles: [".switch-container{top:4px;width:32px;height:14px;position:relative;display:inline-block}.switch-container .switch-slider{inset:0;cursor:pointer;transition:.4s;position:absolute;border-radius:34px;background-color:#ccc}.switch-container .switch-slider:before{left:0;content:\"\";width:18px;bottom:-2px;height:18px;transition:.4s;position:absolute;border-radius:50%;border:1px solid #cccccc;background-color:#fff}.switch-container input{width:0;height:0;opacity:0}.switch-container input:checked+.switch-slider{background-color:#12ceb7}.switch-container input:checked+.switch-slider:before{transform:translate(14px);border:1px solid #12ceb7}.switch-container input:focus+.switch-slider{box-shadow:0 0 1px #12ceb7}.switch-container.square .switch-slider{border-radius:0}.switch-container.square .switch-slider:before{border-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SwitchControl, decorators: [{
-            type: Component,
-            args: [{ selector: 'switch-control', standalone: true, imports: [
-                        CommonModule,
-                        ReactiveFormsModule
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => SwitchControl),
-                            multi: true,
-                        },
-                    ], template: "<label class=\"switch-container\" [ngClass]=\"customClass\" #switchContainer>\r\n    <input type=\"checkbox\" [formControl]=\"switchControl\"  (focus)=\"onFocus()\" (blur)=\"onBlur()\">\r\n    <span class=\"switch-slider\"></span>\r\n</label>", styles: [".switch-container{top:4px;width:32px;height:14px;position:relative;display:inline-block}.switch-container .switch-slider{inset:0;cursor:pointer;transition:.4s;position:absolute;border-radius:34px;background-color:#ccc}.switch-container .switch-slider:before{left:0;content:\"\";width:18px;bottom:-2px;height:18px;transition:.4s;position:absolute;border-radius:50%;border:1px solid #cccccc;background-color:#fff}.switch-container input{width:0;height:0;opacity:0}.switch-container input:checked+.switch-slider{background-color:#12ceb7}.switch-container input:checked+.switch-slider:before{transform:translate(14px);border:1px solid #12ceb7}.switch-container input:focus+.switch-slider{box-shadow:0 0 1px #12ceb7}.switch-container.square .switch-slider{border-radius:0}.switch-container.square .switch-slider:before{border-radius:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { title: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], switchChange: [{
-                type: Output
-            }], blurEvent: [{
-                type: Output
-            }], switchContainer: [{
-                type: ViewChild,
-                args: ['switchContainer']
-            }] } });
-
-class TextEditor {
-    header = true;
-    media = true;
-    link = true;
-    placeholder = 'Type here...';
-    editorRef;
-    onChange = () => { };
-    onTouch = () => { };
-    undoStack = [];
-    redoStack = [];
-    ngOnInit() { }
-    ngAfterViewInit() {
-        this.saveState();
-    }
-    writeValue(value) {
-        this.editorRef.nativeElement.innerHTML = value || '';
-        this.saveState();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    onInput() {
-        const html = this.editorRef.nativeElement.innerHTML;
-        this.onChange(html);
-        this.saveState();
-    }
-    // events
-    onTouched() {
-        this.onTouch();
-    }
-    setDisabledState(isDisabled) {
-        this.editorRef.nativeElement.contentEditable = (!isDisabled).toString();
-    }
-    // ---- Selection & Range Utilities ----
-    getSelectionRange() {
-        const selection = window.getSelection();
-        if (selection && selection.rangeCount > 0) {
-            return selection.getRangeAt(0);
-        }
-        return null;
-    }
-    wrapSelection(htmlTag, style) {
-        const range = this.getSelectionRange();
-        if (!range || range.collapsed)
-            return; // no selection
-        const selectedText = range.extractContents();
-        const el = document.createElement(htmlTag);
-        if (style) {
-            el.setAttribute('style', style);
-        }
-        el.appendChild(selectedText);
-        range.insertNode(el);
-        this.mergeAdjacentSimilarElements(el);
-        this.onInput();
-    }
-    // Merges adjacent spans with the same style to avoid clutter
-    mergeAdjacentSimilarElements(el) {
-        const parent = el.parentElement;
-        if (!parent)
-            return;
-        const siblings = Array.from(parent.childNodes);
-        for (let i = 0; i < siblings.length - 1; i++) {
-            const current = siblings[i];
-            const next = siblings[i + 1];
-            if (current.nodeType === 1 && next?.nodeType === 1) {
-                if (current.tagName === next.tagName && current.getAttribute('style') === next.getAttribute('style')) {
-                    // merge them
-                    while (next.firstChild) {
-                        current.appendChild(next.firstChild);
-                    }
-                    next.remove();
-                }
-            }
-        }
-    }
-    // ---- Inline Formatting ----
-    // applyInlineStyle() toggles inline styles by wrapping selection in a styled span
-    applyInlineStyle(styleType) {
-        let style = '';
-        if (styleType === 'bold')
-            style = 'font-weight:bold;';
-        else if (styleType === 'italic')
-            style = 'font-style:italic;';
-        else if (styleType === 'underline')
-            style = 'text-decoration:underline;';
-        this.wrapSelection('span', style);
-    }
-    applyColor(event) {
-        const input = event.target;
-        const color = input.value;
-        // Now `color` is a string and `input` is never null
-        this.wrapSelection('span', `color:${color};`);
-    }
-    applyHighlight(event) {
-        const input = event.target;
-        const color = input.value;
-        this.wrapSelection('span', `background-color:${color};`);
-    }
-    // ---- Block Formatting (Headings, Paragraph) ----
-    // Replaces the parent block element containing selection with a new block type
-    applyBlockFormat(blockTag) {
-        const range = this.getSelectionRange();
-        if (!range)
-            return;
-        // Find the nearest block element
-        let block = this.findBlockAncestor(range.commonAncestorContainer);
-        if (!block) {
-            // If no block found, wrap the selection in a block
-            const wrapper = document.createElement(blockTag);
-            wrapper.appendChild(range.extractContents());
-            range.insertNode(wrapper);
-        }
-        else {
-            // Replace the block with a new block type
-            const newBlock = document.createElement(blockTag);
-            // Move children
-            while (block.firstChild) {
-                newBlock.appendChild(block.firstChild);
-            }
-            block.replaceWith(newBlock);
-        }
-        this.onInput();
-    }
-    findBlockAncestor(node) {
-        while (node && node !== this.editorRef.nativeElement) {
-            if (this.isBlockElement(node)) {
-                return node;
-            }
-            node = node.parentNode;
-        }
-        return null;
-    }
-    isBlockElement(node) {
-        if (node.nodeType !== 1)
-            return false;
-        const display = window.getComputedStyle(node).display;
-        return display === 'block' || display === 'list-item';
-    }
-    // ---- Lists ----
-    // Convert selected lines into a list
-    applyList(listType) {
-        const range = this.getSelectionRange();
-        if (!range)
-            return;
-        const commonBlock = this.findBlockAncestor(range.commonAncestorContainer);
-        // Get the text in the selection
-        const content = range.extractContents();
-        const lines = this.splitContentByLine(content);
-        const listEl = document.createElement(listType);
-        for (const line of lines) {
-            const li = document.createElement('li');
-            li.appendChild(line);
-            listEl.appendChild(li);
-        }
-        if (commonBlock) {
-            // Insert the list right where the block was or at the selection
-            range.insertNode(listEl);
-        }
-        else {
-            // If no common block, just insert at current position
-            range.insertNode(listEl);
-        }
-        this.onInput();
-    }
-    splitContentByLine(fragment) {
-        // A very naive approach: split by <br> or block elements.
-        // For advanced logic, detect line breaks more thoroughly.
-        const lines = [];
-        let currentFrag = document.createDocumentFragment();
-        Array.from(fragment.childNodes).forEach((node) => {
-            if (node.nodeName === 'BR' || this.isBlockElement(node)) {
-                // This node signifies a new line
-                lines.push(currentFrag);
-                currentFrag = document.createDocumentFragment();
-                if (this.isBlockElement(node)) {
-                    while (node.firstChild) {
-                        currentFrag.appendChild(node.firstChild);
-                    }
-                    lines.push(currentFrag);
-                    currentFrag = document.createDocumentFragment();
-                }
-            }
-            else {
-                currentFrag.appendChild(node);
-            }
-        });
-        if (currentFrag.childNodes.length > 0) {
-            lines.push(currentFrag);
-        }
-        return lines;
-    }
-    // ---- Links ----
-    createLink() {
-        const url = prompt('Enter URL', 'https://');
-        if (!url)
-            return;
-        const range = this.getSelectionRange();
-        if (!range || range.collapsed)
-            return;
-        const selectedContent = range.extractContents();
-        const a = document.createElement('a');
-        a.href = url;
-        a.appendChild(selectedContent);
-        range.insertNode(a);
-        this.onInput();
-    }
-    // ---- Images ----
-    insertImage() {
-        const url = prompt('Enter image URL:');
-        if (!url)
-            return;
-        const range = this.getSelectionRange();
-        if (!range)
-            return;
-        const img = document.createElement('img');
-        img.src = url;
-        range.insertNode(img);
-        this.onInput();
-    }
-    // ---- Alignment ----
-    setAlignment(alignment) {
-        // Find the block and set text-align
-        const range = this.getSelectionRange();
-        if (!range)
-            return;
-        const block = this.findBlockAncestor(range.commonAncestorContainer);
-        if (block) {
-            block.style.textAlign = alignment;
-            this.onInput();
-        }
-    }
-    // ---- Clear Formatting ----
-    clearFormatting() {
-        const html = this.editorRef.nativeElement.innerText;
-        // Convert innerText to a plain <p> block for simplicity
-        this.editorRef.nativeElement.innerHTML = `<p>${html}</p>`;
-        this.onInput();
-    }
-    // ---- Undo/Redo ----
-    saveState() {
-        const currentHtml = this.editorRef.nativeElement.innerHTML;
-        if (this.undoStack.length === 0 || this.undoStack[this.undoStack.length - 1].html !== currentHtml) {
-            this.undoStack.push({ html: currentHtml });
-            this.redoStack = []; // clear redo on new input
-        }
-    }
-    // clear options
-    undo() {
-        if (this.undoStack.length > 1) {
-            const current = this.undoStack.pop();
-            this.redoStack.push(current);
-            const previous = this.undoStack[this.undoStack.length - 1];
-            this.editorRef.nativeElement.innerHTML = previous.html;
-            this.onChange(previous.html);
-        }
-    }
-    redo() {
-        if (this.redoStack.length > 0) {
-            const state = this.redoStack.pop();
-            this.undoStack.push(state);
-            this.editorRef.nativeElement.innerHTML = state.html;
-            this.onChange(state.html);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: TextEditor, isStandalone: true, selector: "app-text-editor", inputs: { header: "header", media: "media", link: "link", placeholder: "placeholder" }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div class=\"text-editor\">\r\n    <div class=\"toolbar\">\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"applyInlineStyle('bold')\" tooltip=\"Bold\">\r\n                <i class=\"he he-bold\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('italic')\" tooltip=\"italic\">\r\n                <i class=\"he he-italics\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('underline')\" tooltip=\"Underline\">\r\n                <i class=\"he he-underline\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"header\">\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h1')\" tooltip=\"Header 1\">\r\n                <i class=\"he he-heading-1\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h2')\" tooltip=\"Header 2\">\r\n                <i class=\"he he-heading-2\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items more-gap\">\r\n            <div class=\"input-wrap\" tooltip=\"Text Color\">\r\n                <i class=\"he he-text-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyColor($event)\" />\r\n            </div>\r\n            <div class=\"input-wrap\" tooltip=\"Background Color\">\r\n                <i class=\"he he-background-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyHighlight($event)\" />\r\n            </div>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"setAlignment('left')\" tooltip=\"Justify Left\">\r\n                <i class=\"he he-left-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('center')\" tooltip=\"Justify Center\">\r\n                <i class=\"he he-center-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('right')\" tooltip=\"Justify Right\">\r\n                <i class=\"he he-right-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('justify')\" tooltip=\"Justify Full\">\r\n                <i class=\"he he-justify\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" tooltip=\"Indent\">\r\n                <i class=\"he he-text-indent-left\"></i>\r\n            </button>\r\n            <button type=\"button\" tooltip=\"Outdent\">\r\n                <i class=\"he he-text-indent-right\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"media\">\r\n            <button type=\"button\" (click)=\"applyList('ul')\" tooltip=\"Unordered list\">\r\n                <i class=\"he he-unordered-list\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyList('ol')\" tooltip=\"Ordered list\">\r\n                <i class=\"he he-ordered-list\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"link\">\r\n            <button type=\"button\" (click)=\"createLink()\" tooltip=\"Link\">\r\n                <i class=\"he he-link\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"insertImage()\" tooltip=\"Image\">\r\n                <i class=\"he he-image\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"undo()\" tooltip=\"Undo\">\r\n                <i class=\"he he-undo\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"redo()\" tooltip=\"Redo\">\r\n                <i class=\"he he-redo\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"clearFormatting()\" tooltip=\"Clear Formatting\">\r\n                <i class=\"he he-text-clear-format\"></i>\r\n            </button>\r\n        </div>\r\n    </div>\r\n\r\n    <div #editor class=\"editor-content\" contenteditable=\"true\" (input)=\"onInput()\" (blur)=\"onTouched()\"\r\n        [attr.data-placeholder]=\"placeholder\">\r\n    </div>\r\n</div>", styles: [".text-editor{border:1px solid #ccc}.text-editor .toolbar{gap:.75rem;display:flex;flex-wrap:wrap;background:#f8f8f8;padding:.75rem;border-bottom:1px solid #cccccc}.text-editor .toolbar .toolbar-items{height:18px;display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;border-right:1px solid #969090}.text-editor .toolbar .toolbar-items button,.text-editor .toolbar .toolbar-items .input-wrap{cursor:pointer;min-width:25px;min-height:20px}.text-editor .toolbar .toolbar-items button:hover i,.text-editor .toolbar .toolbar-items .input-wrap:hover i{color:#000}.text-editor .toolbar .toolbar-items button{border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items .input-wrap{gap:2px;display:flex;cursor:pointer;align-items:center;flex-direction:column;justify-content:center}.text-editor .toolbar .toolbar-items .input-wrap input[type=color]{width:80%;padding:0;height:2px;border:none;cursor:inherit}.text-editor .toolbar .toolbar-items i{font-size:13px;color:#3c4148}.text-editor .toolbar .toolbar-items i.he-bold{font-weight:600}.text-editor .toolbar .toolbar-items i.he-underline{font-size:14px}.text-editor .toolbar .toolbar-items i.he-text-drop{font-size:12px}.text-editor .toolbar .toolbar-items i.he-background-drop{top:-1px;font-size:12px}.text-editor .toolbar .toolbar-items i.he-heading-1,.text-editor .toolbar .toolbar-items i.he-link,.text-editor .toolbar .toolbar-items i.he-left-align,.text-editor .toolbar .toolbar-items i.he-center-align,.text-editor .toolbar .toolbar-items i.he-right-align,.text-editor .toolbar .toolbar-items i.he-justify{font-size:16px}.text-editor .toolbar .toolbar-items i.he-text-indent-left,.text-editor .toolbar .toolbar-items i.he-text-indent-right{font-size:17px}.text-editor .toolbar .toolbar-items i.he-heading-2{top:1px;font-size:16px}.text-editor .toolbar .toolbar-items i.he-unordered-list,.text-editor .toolbar .toolbar-items i.he-ordered-list{top:-1px;font-size:20px}.text-editor .toolbar .toolbar-items i.he-image{font-size:15px;font-weight:600}.text-editor .toolbar .toolbar-items i.he-redo,.text-editor .toolbar .toolbar-items i.he-undo{top:-1px;font-size:14px}.text-editor .toolbar .toolbar-items.more-gap{gap:5px}.text-editor .toolbar .toolbar-items:last-child{border-right:0}.text-editor .editor-content{outline:none;min-height:200px;position:relative;background:#fff;padding:.75rem}.text-editor .editor-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none;position:absolute;left:.75rem;top:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextEditor, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-text-editor', imports: [CommonModule,
-                    ], template: "<div class=\"text-editor\">\r\n    <div class=\"toolbar\">\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"applyInlineStyle('bold')\" tooltip=\"Bold\">\r\n                <i class=\"he he-bold\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('italic')\" tooltip=\"italic\">\r\n                <i class=\"he he-italics\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyInlineStyle('underline')\" tooltip=\"Underline\">\r\n                <i class=\"he he-underline\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"header\">\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h1')\" tooltip=\"Header 1\">\r\n                <i class=\"he he-heading-1\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyBlockFormat('h2')\" tooltip=\"Header 2\">\r\n                <i class=\"he he-heading-2\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items more-gap\">\r\n            <div class=\"input-wrap\" tooltip=\"Text Color\">\r\n                <i class=\"he he-text-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyColor($event)\" />\r\n            </div>\r\n            <div class=\"input-wrap\" tooltip=\"Background Color\">\r\n                <i class=\"he he-background-drop\"></i>\r\n                <input type=\"color\" (change)=\"applyHighlight($event)\" />\r\n            </div>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"setAlignment('left')\" tooltip=\"Justify Left\">\r\n                <i class=\"he he-left-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('center')\" tooltip=\"Justify Center\">\r\n                <i class=\"he he-center-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('right')\" tooltip=\"Justify Right\">\r\n                <i class=\"he he-right-align\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"setAlignment('justify')\" tooltip=\"Justify Full\">\r\n                <i class=\"he he-justify\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" tooltip=\"Indent\">\r\n                <i class=\"he he-text-indent-left\"></i>\r\n            </button>\r\n            <button type=\"button\" tooltip=\"Outdent\">\r\n                <i class=\"he he-text-indent-right\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"media\">\r\n            <button type=\"button\" (click)=\"applyList('ul')\" tooltip=\"Unordered list\">\r\n                <i class=\"he he-unordered-list\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"applyList('ol')\" tooltip=\"Ordered list\">\r\n                <i class=\"he he-ordered-list\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\" *ngIf=\"link\">\r\n            <button type=\"button\" (click)=\"createLink()\" tooltip=\"Link\">\r\n                <i class=\"he he-link\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"insertImage()\" tooltip=\"Image\">\r\n                <i class=\"he he-image\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"undo()\" tooltip=\"Undo\">\r\n                <i class=\"he he-undo\"></i>\r\n            </button>\r\n            <button type=\"button\" (click)=\"redo()\" tooltip=\"Redo\">\r\n                <i class=\"he he-redo\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"toolbar-items\">\r\n            <button type=\"button\" (click)=\"clearFormatting()\" tooltip=\"Clear Formatting\">\r\n                <i class=\"he he-text-clear-format\"></i>\r\n            </button>\r\n        </div>\r\n    </div>\r\n\r\n    <div #editor class=\"editor-content\" contenteditable=\"true\" (input)=\"onInput()\" (blur)=\"onTouched()\"\r\n        [attr.data-placeholder]=\"placeholder\">\r\n    </div>\r\n</div>", styles: [".text-editor{border:1px solid #ccc}.text-editor .toolbar{gap:.75rem;display:flex;flex-wrap:wrap;background:#f8f8f8;padding:.75rem;border-bottom:1px solid #cccccc}.text-editor .toolbar .toolbar-items{height:18px;display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;border-right:1px solid #969090}.text-editor .toolbar .toolbar-items button,.text-editor .toolbar .toolbar-items .input-wrap{cursor:pointer;min-width:25px;min-height:20px}.text-editor .toolbar .toolbar-items button:hover i,.text-editor .toolbar .toolbar-items .input-wrap:hover i{color:#000}.text-editor .toolbar .toolbar-items button{border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items .input-wrap{gap:2px;display:flex;cursor:pointer;align-items:center;flex-direction:column;justify-content:center}.text-editor .toolbar .toolbar-items .input-wrap input[type=color]{width:80%;padding:0;height:2px;border:none;cursor:inherit}.text-editor .toolbar .toolbar-items i{font-size:13px;color:#3c4148}.text-editor .toolbar .toolbar-items i.he-bold{font-weight:600}.text-editor .toolbar .toolbar-items i.he-underline{font-size:14px}.text-editor .toolbar .toolbar-items i.he-text-drop{font-size:12px}.text-editor .toolbar .toolbar-items i.he-background-drop{top:-1px;font-size:12px}.text-editor .toolbar .toolbar-items i.he-heading-1,.text-editor .toolbar .toolbar-items i.he-link,.text-editor .toolbar .toolbar-items i.he-left-align,.text-editor .toolbar .toolbar-items i.he-center-align,.text-editor .toolbar .toolbar-items i.he-right-align,.text-editor .toolbar .toolbar-items i.he-justify{font-size:16px}.text-editor .toolbar .toolbar-items i.he-text-indent-left,.text-editor .toolbar .toolbar-items i.he-text-indent-right{font-size:17px}.text-editor .toolbar .toolbar-items i.he-heading-2{top:1px;font-size:16px}.text-editor .toolbar .toolbar-items i.he-unordered-list,.text-editor .toolbar .toolbar-items i.he-ordered-list{top:-1px;font-size:20px}.text-editor .toolbar .toolbar-items i.he-image{font-size:15px;font-weight:600}.text-editor .toolbar .toolbar-items i.he-redo,.text-editor .toolbar .toolbar-items i.he-undo{top:-1px;font-size:14px}.text-editor .toolbar .toolbar-items.more-gap{gap:5px}.text-editor .toolbar .toolbar-items:last-child{border-right:0}.text-editor .editor-content{outline:none;min-height:200px;position:relative;background:#fff;padding:.75rem}.text-editor .editor-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none;position:absolute;left:.75rem;top:.75rem}\n"] }]
-        }], propDecorators: { header: [{
-                type: Input
-            }], media: [{
-                type: Input
-            }], link: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], editorRef: [{
-                type: ViewChild,
-                args: ['editor']
-            }] } });
-
-class TextareaControl {
-    title;
-    placeholder = '';
-    customClass;
-    clearVal = true;
-    disabled = false;
-    required = false;
-    error = false; // New input for error state
-    errorMessage = ''; // New input for error message
-    textareaChange = new EventEmitter();
-    selectionCleared = new EventEmitter();
-    blurEvent = new EventEmitter();
-    onChange = () => { };
-    onTouched = () => { };
-    textareaControl = new FormControl('');
-    constructor() {
-        this.textareaControl.valueChanges.subscribe(value => {
-            this.onChange(value);
-            this.onTouched();
-            this.textareaChange.emit(value ?? '');
-        });
-    }
-    writeValue(value) {
-        if (value !== undefined) {
-            this.textareaControl.setValue(value, { emitEvent: false });
-        }
-        if (this.textareaControl.disabled !== this.disabled) {
-            this.setDisabledState(this.disabled);
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    // events
-    onBlur() {
-        this.blurEvent.emit();
-        this.onTouched();
-    }
-    setDisabledState(isDisabled) {
-        if (this.disabled) {
-            this.textareaControl.disable({ emitEvent: false });
-        }
-        else {
-            this.textareaControl.enable({ emitEvent: false });
-        }
-    }
-    // clear
-    resetTextarea() {
-        this.textareaControl.setValue('');
-        this.selectionCleared.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextareaControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: TextareaControl, isStandalone: true, selector: "textarea-control", inputs: { title: "title", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", disabled: "disabled", required: "required", error: "error", errorMessage: "errorMessage" }, outputs: { textareaChange: "textareaChange", selectionCleared: "selectionCleared", blurEvent: "blurEvent" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => TextareaControl),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<div class=\"form-group textarea\" [ngClass]=\"customClass\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{'required' : required}\">{{ title }}</label>\r\n  }\r\n  <textarea class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"textareaControl\"\r\n    [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\"></textarea>\r\n\r\n  <span class=\"focus-border\"></span>\r\n\r\n  @if (textareaControl.value && clearVal) {\r\n  <label class=\"clear\" (click)=\"resetTextarea()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group textarea{resize:none;min-height:100px}.form-group textarea.resize{resize:auto}.form-group textarea::-webkit-scrollbar-thumb{border-radius:10px}.form-group textarea::-webkit-scrollbar-track{background:#e8eaf1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextareaControl, decorators: [{
-            type: Component,
-            args: [{ selector: 'textarea-control', standalone: true, imports: [
-                        CommonModule,
-                        ReactiveFormsModule
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => TextareaControl),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"form-group textarea\" [ngClass]=\"customClass\">\r\n  @if (title) {\r\n  <label class=\"inp-label\" [ngClass]=\"{'required' : required}\">{{ title }}</label>\r\n  }\r\n  <textarea class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"textareaControl\"\r\n    [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\"></textarea>\r\n\r\n  <span class=\"focus-border\"></span>\r\n\r\n  @if (textareaControl.value && clearVal) {\r\n  <label class=\"clear\" (click)=\"resetTextarea()\">\r\n    <i class=\"he he-close\"></i>\r\n  </label>\r\n  }\r\n\r\n  @if (error) {\r\n  <div class=\"val-msg\">{{ errorMessage }}</div>\r\n  }\r\n</div>", styles: [".form-group textarea{resize:none;min-height:100px}.form-group textarea.resize{resize:auto}.form-group textarea::-webkit-scrollbar-thumb{border-radius:10px}.form-group textarea::-webkit-scrollbar-track{background:#e8eaf1}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { title: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], clearVal: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], errorMessage: [{
-                type: Input
-            }], textareaChange: [{
-                type: Output
-            }], selectionCleared: [{
-                type: Output
-            }], blurEvent: [{
-                type: Output
-            }] } });
-
-/*
- * Public API Surface of heal-lib
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AutocompleteControl, CalendarControl, CheckboxControl, InputControl, MultiselectControl, SelectControl, SwitchControl, TextEditor, TextareaControl };
-//# sourceMappingURL=nexheal-lib.mjs.map