@nexheal/nexheal-lib 0.0.5

package/fesm2022/nexheal-lib.mjs

@@ -0,0 +1,2852 @@
+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()\" [readonly]=\"readonly\" (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 && !readonly) && 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()\" [readonly]=\"readonly\" (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 && !readonly) && 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';
+    readonly = false;
+    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 => {
+            if (this.readonly)
+                return;
+            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", readonly: "readonly", 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, readonly ? 'readonly' : '']\" #checkboxContainer>\r\n    <input type=\"checkbox\" [formControl]=\"checkboxControl\" (focus)=\"onFocus($event)\" (blur)=\"onBlur()\" [attr.readonly]=\"readonly ? true : null\" />\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, readonly ? 'readonly' : '']\" #checkboxContainer>\r\n    <input type=\"checkbox\" [formControl]=\"checkboxControl\" (focus)=\"onFocus($event)\" (blur)=\"onBlur()\" [attr.readonly]=\"readonly ? true : null\" />\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
+            }], readonly: [{
+                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;
+    readonly = false;
+    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 => {
+            if (this.readonly)
+                return;
+            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", readonly: "readonly", 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, readonly ? 'readonly' : '']\" #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, readonly ? 'readonly' : '']\" #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
+            }], readonly: [{
+                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;
+    readonly = 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 => {
+            if (this.readonly)
+                return;
+            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 (isDisabled) {
+            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", readonly: "readonly", 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 }\" [readonly]=\"readonly\" (blur)=\"onBlur()\"></textarea>\r\n\r\n  <span class=\"focus-border\"></span>\r\n\r\n  @if (textareaControl.value && clearVal && !readonly) {\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 }\" [readonly]=\"readonly\" (blur)=\"onBlur()\"></textarea>\r\n\r\n  <span class=\"focus-border\"></span>\r\n\r\n  @if (textareaControl.value && clearVal && !readonly) {\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
+            }], readonly: [{
+                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