@unipin/angular-applet 18.9.7 → 21.0.1

package/fesm2022/unipin-angular-applet-forms.mjs

@@ -0,0 +1,1699 @@
+import * as i0 from '@angular/core';
+import { signal, inject, Injector, Injectable, input, computed, forwardRef, Directive, HostListener, model, booleanAttribute, ChangeDetectionStrategy, Component, output, contentChild, ViewEncapsulation, viewChild, effect } from '@angular/core';
+import * as i1$1 from '@unipin/angular-applet/common';
+import { up } from '@unipin/angular-applet/common';
+import * as i1 from '@angular/forms';
+import { NgControl, NgForm, FormGroupDirective, FormsModule } from '@angular/forms';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { matVisibilityOffRound, matVisibilityRound, matCalendarMonthRound } from '@ng-icons/material-icons/round';
+import { NgSelectComponent } from '@ng-select/ng-select';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { Subject, distinctUntilChanged, debounceTime, tap, switchMap, map, catchError, of } from 'rxjs';
+import { format } from 'date-fns';
+import { UpButtonDirective } from '@unipin/angular-applet/buttons';
+import { UpCalendarComponent } from '@unipin/angular-applet/calendar';
+import { UpPopoverComponent, UpPopoverTriggerDirective, UpPopoverContentRefDirective } from '@unipin/angular-applet/popover';
+
+const errMessage = {
+    email: (label) => `${label} is not a valid email`,
+    required: (label) => `${label} is required`,
+    minlength: (label, length) => `${label} must be at least ${length} characters`,
+    maxlength: (label, length) => `${label} must not exceed ${length} characters`,
+    max: (label, max) => `${label} value must be lower than ${max}`,
+    min: (label, min) => `${label} value must be larger than ${min}`,
+};
+const extraParamKey = {
+    max: 'max',
+    min: 'min',
+    minlength: 'requiredLength',
+    maxlength: 'requiredLength',
+};
+class UpFieldControl {
+}
+class UpFieldControlComponent {
+    constructor() {
+        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+        this.injector = inject(Injector);
+        this.ngControl = this.injector.get(NgControl, null);
+        this._parentForm = inject(NgForm, { optional: true });
+        this._parentFormGroup = inject(FormGroupDirective, { optional: true });
+        this._controlName = '';
+    }
+    ngDoCheck() {
+        this.updateErrorState();
+    }
+    setControlName(name) {
+        this._controlName = name;
+    }
+    updateErrorState() {
+        const control = this.ngControl?.control ?? null;
+        if (!control ||
+            !control.touched ||
+            !control.dirty) {
+            return;
+        }
+        if (!control.errors) {
+            this.error.set('');
+            return;
+        }
+        const errKey = Object.keys(control.errors)[0];
+        const newState = errMessage[errKey](this._controlName ?? 'Field', control.errors[errKey][extraParamKey[errKey]]);
+        if (newState !== this.error()) {
+            this.error.set(newState);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpFieldControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpFieldControlComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpFieldControlComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class UpInputDirective extends UpFieldControlComponent {
+    constructor() {
+        super(...arguments);
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this._computedClass = computed(() => {
+            return up('peer file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium file:h-7 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-none', this.error() ? 'ring-destructive/20 dark:ring-destructive/40 border-destructive focus-visible:ring-destructive/50' : '', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: UpInputDirective, isStandalone: true, selector: "[upInput]", inputs: { inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [
+            {
+                provide: UpFieldControl,
+                useExisting: forwardRef(() => UpInputDirective)
+            }
+        ], exportAs: ["upInput"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    exportAs: 'upInput',
+                    selector: '[upInput]',
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    providers: [
+                        {
+                            provide: UpFieldControl,
+                            useExisting: forwardRef(() => UpInputDirective)
+                        }
+                    ]
+                }]
+        }], propDecorators: { inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class UpNumberDirective extends UpInputDirective {
+    constructor(renderer, el) {
+        super();
+        this.renderer = renderer;
+        this.el = el;
+        this.magnifyValue = input(1, ...(ngDevMode ? [{ debugName: "magnifyValue" }] : []));
+        this.maxDecimalDigits = computed(() => {
+            if (!this.magnifyValue() ||
+                this.magnifyValue() === 1) {
+                return 0;
+            }
+            const floatPoint = Math.log10(this.magnifyValue());
+            return floatPoint % 1 !== 0 ? 0 : floatPoint;
+        }, ...(ngDevMode ? [{ debugName: "maxDecimalDigits" }] : []));
+        this.lastCaretPos = 0;
+        this.lastRawValue = '';
+        this.lastKey = null;
+        /**
+         * Callback function to handle value changes in the password input.
+         * @type {(_val: any) => void}
+         */
+        this._onChange = (_val) => { };
+        /**
+         * Callback function to handle touch events in the password input.
+         * @type {() => void}
+         */
+        this._onTouched = () => { };
+        if (this.ngControl !== null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    onBlur() {
+        this._onTouched();
+        const input = this.el.nativeElement;
+        if (!input.value.trim()) {
+            input.value = '';
+            this._onChange(null);
+            return;
+        }
+        const { integer, decimal } = this.sanitizeNumber(input.value);
+        const cleanedInteger = integer.replace(/^0+/, '') || '';
+        const cleanedDecimal = decimal ?? '';
+        let formatted;
+        if ((!cleanedInteger ||
+            /^0+$/.test(cleanedInteger)) &&
+            (!cleanedDecimal ||
+                /^0+$/.test(cleanedDecimal))) {
+            formatted = '0';
+        }
+        else if (!cleanedDecimal) {
+            formatted = this.formatWithThousandSeparator(cleanedInteger || '0');
+        }
+        else {
+            formatted = `${this.formatWithThousandSeparator(cleanedInteger || '0')},${cleanedDecimal}`;
+        }
+        input.value = formatted;
+    }
+    onInput(event) {
+        const input = event.target;
+        const postRaw = input.value;
+        const postCaret = input.selectionStart ?? postRaw.length;
+        const formatted = this.formatNumber(postRaw);
+        input.value = formatted;
+        const numericValue = Number(formatted.replace(/\./g, '').replace(',', '.'));
+        this._onChange(numericValue);
+        const digitsBefore = postRaw.slice(0, postCaret).replace(/\D/g, '').length;
+        let newCaret = this.lastKey === ',' ? this.findCommaCaret(formatted, digitsBefore) : this.mapDigitsToIndex(formatted, digitsBefore);
+        input.setSelectionRange(newCaret, newCaret);
+        this.lastKey = null;
+        this.lastRawValue = postRaw;
+        this.lastCaretPos = newCaret;
+    }
+    onKeyDown(event) {
+        const input = event.target;
+        const allowedKeys = [
+            'Backspace',
+            'Tab',
+            'Enter',
+            'Escape',
+            'Delete',
+            'ArrowLeft',
+            'ArrowRight',
+            'Home',
+            'End',
+        ];
+        this.lastKey = event.key;
+        this.lastRawValue = input.value;
+        this.lastCaretPos = input.selectionStart ?? input.value.length;
+        if ((event.ctrlKey ||
+            event.metaKey) &&
+            ['a', 'c', 'v', 'x'].includes(event.key.toLowerCase())) {
+            return;
+        }
+        if (allowedKeys.includes(event.key))
+            return;
+        if (event.key === ',') {
+            if (this.maxDecimalDigits() === 0 ||
+                input.value.includes(',')) {
+                event.preventDefault();
+            }
+            return;
+        }
+        if (!/^[0-9,]$/.test(event.key)) {
+            event.preventDefault();
+        }
+    }
+    /**
+     * Registers a callback function to be called when the password input value changes.
+     * @param {(_val: any) => void} fn - Callback function for value changes.
+     */
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    /**
+     * Registers a callback function to be called when the password input is touched.
+     * @param {() => void} fn - Callback function for touch events.
+     */
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.renderer.setProperty(this.el.nativeElement, 'disabled', isDisabled);
+    }
+    writeValue(value) {
+        this.el.nativeElement.value = this.formatNumber(String(value ?? ''));
+    }
+    findCommaCaret(formatted, digitsBefore) {
+        const commaIndex = formatted.indexOf(',');
+        return commaIndex >= 0 ? commaIndex + 1 : this.mapDigitsToIndex(formatted, digitsBefore);
+    }
+    mapDigitsToIndex(formatted, digitsBefore) {
+        if (digitsBefore <= 0)
+            return 0;
+        let count = 0;
+        for (let i = 0; i < formatted.length; i++) {
+            if (/\d/.test(formatted[i])) {
+                count++;
+                if (count === digitsBefore) {
+                    return i + 1;
+                }
+            }
+        }
+        return formatted.length;
+    }
+    formatNumber(value) {
+        if (!value) {
+            return '';
+        }
+        const { integer, decimal } = this.sanitizeNumber(value);
+        const formattedInt = this.formatWithThousandSeparator(integer || '');
+        if (decimal !== undefined) {
+            return `${formattedInt || '0'},${decimal}`;
+        }
+        return formattedInt || '0';
+    }
+    formatWithThousandSeparator(value) {
+        return value.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+    }
+    sanitizeNumber(value) {
+        const onlyDigitsComma = value.replace(/[^0-9,]/g, '');
+        const singleComma = onlyDigitsComma.replace(/,/g, (_, i) => onlyDigitsComma.indexOf(',') === i ? ',' : '');
+        const [integerPart, decimalPart] = singleComma.split(',');
+        return {
+            integer: integerPart || '',
+            decimal: decimalPart?.slice(0, this.maxDecimalDigits()),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpNumberDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: UpNumberDirective, isStandalone: true, selector: "[upNumber]", inputs: { magnifyValue: { classPropertyName: "magnifyValue", publicName: "magnifyValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "blur": "onBlur()", "input": "onInput($event)", "keydown": "onKeyDown($event)" }, properties: { "class": "_computedClass()" } }, providers: [
+            {
+                provide: UpFieldControl,
+                useExisting: forwardRef(() => UpNumberDirective),
+            },
+        ], exportAs: ["upNumber"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpNumberDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    exportAs: 'upNumber',
+                    selector: '[upNumber]',
+                    host: {
+                        '[class]': '_computedClass()'
+                    },
+                    providers: [
+                        {
+                            provide: UpFieldControl,
+                            useExisting: forwardRef(() => UpNumberDirective),
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { magnifyValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "magnifyValue", required: false }] }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class UpCheckboxDirective extends UpFieldControlComponent {
+    constructor() {
+        super(...arguments);
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this._computedClass = computed(() => {
+            return up('peer dark:bg-input/30 border-input size-5 min-w-0 rounded-md border bg-transparent shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-border/40 relative cursor-pointer', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-none', 'appearance-none checked:border-primary checked:bg-primary', 'checked:after:content-[\'\'] checked:after:absolute checked:after:border-white checked:after:border-b-2 checked:after:border-r-2 checked:after:w-1.5 checked:after:h-2.5 checked:after:rounded-br-xs checked:after:rotate-45 checked:after:left-1.5 checked:after:top-0.75', this.error() ? 'ring-destructive/20 dark:ring-destructive/40 border-destructive focus-visible:ring-destructive/50' : '', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpCheckboxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: UpCheckboxDirective, isStandalone: true, selector: "[upCheckbox]", inputs: { inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "checkbox" }, properties: { "class": "_computedClass()" } }, providers: [
+            {
+                provide: UpFieldControl,
+                useExisting: forwardRef(() => UpCheckboxDirective)
+            }
+        ], exportAs: ["upCheckbox"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    exportAs: 'upCheckbox',
+                    selector: '[upCheckbox]',
+                    host: {
+                        type: 'checkbox',
+                        '[class]': '_computedClass()',
+                    },
+                    providers: [
+                        {
+                            provide: UpFieldControl,
+                            useExisting: forwardRef(() => UpCheckboxDirective)
+                        }
+                    ]
+                }]
+        }], propDecorators: { inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class UpSwitchComponent extends UpFieldControlComponent {
+    constructor() {
+        super();
+        this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{
+                transform: booleanAttribute
+            }]));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
+                transform: booleanAttribute
+            }]));
+        this.isTouched = false;
+        this._computedClass = computed(() => {
+            return up(`
+          relative w-9 h-5 flex items-center justify-start flex-shrink-0 outline outline-input bg-input rounded-full 
+          transition-colors duration-300 ease-in-out 
+          peer-checked:bg-primary after:absolute 
+          after:top-1/2 after:left-[2px] after:-translate-y-1/2
+          after:w-4 after:h-4 after:bg-white after:rounded-full after:shadow-md
+          after:transition-transform after:duration-300 after:ease-in-out
+          peer-checked:after:translate-x-[15px]
+          peer-focus-visible:ring-2 peer-focus-visible:ring-primary peer-focus-visible:ring-offset-2
+        `, this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+        this._onChange = (_val) => { };
+        this._onTouched = () => { };
+        if (this.ngControl !== null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    writeValue(value) {
+        this.checked.set(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    touch() {
+        if (!this.isTouched) {
+            this._onTouched();
+            this.isTouched = true;
+        }
+    }
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        this.checked.set(!this.checked());
+        this._onChange(this.checked());
+        this._onTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: UpSwitchComponent, isStandalone: true, selector: "up-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { classAttribute: "inline-flex items-center cursor-pointer" }, providers: [
+            {
+                provide: UpFieldControl,
+                useExisting: forwardRef(() => UpSwitchComponent),
+            }
+        ], usesInheritance: true, ngImport: i0, template: `
+    <input
+      type="checkbox" 
+      class="sr-only peer"
+      [checked]="checked()"
+      [required]="required()"
+      [disabled]="disabled()"
+      (blur)="touch()"
+    />
+    
+    <span 
+      (click)="toggle()"
+      [class]="_computedClass()"
+    >
+    </span>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpSwitchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'up-switch',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'inline-flex items-center cursor-pointer'
+                    },
+                    providers: [
+                        {
+                            provide: UpFieldControl,
+                            useExisting: forwardRef(() => UpSwitchComponent),
+                        }
+                    ],
+                    template: `
+    <input
+      type="checkbox" 
+      class="sr-only peer"
+      [checked]="checked()"
+      [required]="required()"
+      [disabled]="disabled()"
+      (blur)="touch()"
+    />
+    
+    <span 
+      (click)="toggle()"
+      [class]="_computedClass()"
+    >
+    </span>
+  `
+                }]
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class UpPasswordComponent extends UpFieldControlComponent {
+    constructor() {
+        super();
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this.autocomplete = input('off', ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
+        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{
+                transform: booleanAttribute
+            }]));
+        this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.type = signal('password', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.isTouched = false;
+        this._computedClass = computed(() => {
+            return up('pr-10 peer', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+        /**
+         * Callback function to handle value changes in the password input.
+         * @type {(_val: any) => void}
+         */
+        this._onChange = (_val) => { };
+        /**
+         * Callback function to handle touch events in the password input.
+         * @type {() => void}
+         */
+        this._onTouched = () => { };
+        if (this.ngControl !== null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    /**
+     * Registers a callback function to be called when the password input value changes.
+     * @param {(_val: any) => void} fn - Callback function for value changes.
+     */
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    /**
+     * Registers a callback function to be called when the password input is touched.
+     * @param {() => void} fn - Callback function for touch events.
+     */
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /**
+     * Writes a new value to the password input.
+     * @param {*} val - The new value to be set.
+     */
+    writeValue(val) {
+        this.value.set(val ?? '');
+    }
+    /**
+     * Function that is called by the forms API when the control status change to or from 'DISABLED'.
+     * Depending on the status, it enables or disables the appropriate DOM element
+     * @param {boolean} isDisabled - disable state
+    */
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    /**
+     * Toggles the type of the password input between text and password.
+     */
+    changeType() {
+        if (!this.disabled()) {
+            this.type.set(this.type() === 'text' ? 'password' : 'text');
+        }
+    }
+    /**
+     * Event handler to handle touch status.
+     *
+     * @returns {void}
+     */
+    touch() {
+        if (!this.isTouched) {
+            this._onTouched();
+            this.isTouched = true;
+        }
+    }
+    /**
+     * Event handler for changes in the password input.
+     * If not touched, marks the input as touched.
+     * Updates the value and triggers change detection.
+     * @param {any} param - Event detail containing the new password input value.
+     */
+    change({ value }) {
+        if (!this.isTouched) {
+            this._onTouched();
+            this.isTouched = true;
+        }
+        this.value.set(value);
+        this._onChange(this.value());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: UpPasswordComponent, isStandalone: true, selector: "up-password", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { classAttribute: "block relative" }, providers: [
+            {
+                provide: UpFieldControl,
+                useExisting: forwardRef(() => UpPasswordComponent)
+            },
+            provideIcons({
+                matVisibilityRound,
+                matVisibilityOffRound
+            }),
+        ], usesInheritance: true, ngImport: i0, template: `
+    <input
+      upInput
+      maxlength="64"
+      [type]="type()"
+      [value]="value()"
+      [required]="required()"
+      [disabled]="disabled()"
+      [class]="_computedClass()"
+      [placeholder]="placeholder()?? ''"
+      [attr.autocomplete]="autocomplete()"
+      (blur)="touch()"
+      (input)="change($event.target)"
+    />
+    
+    <ng-icon
+      class="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer text-gray-500 hover:text-primary peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"
+      [name]="type() === 'password'? 'matVisibilityRound' : 'matVisibilityOffRound'"
+      (click)="changeType()"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: UpInputDirective, selector: "[upInput]", inputs: ["class"], exportAs: ["upInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpPasswordComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'up-password',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'block relative',
+                    },
+                    imports: [
+                        NgIcon,
+                        UpInputDirective
+                    ],
+                    providers: [
+                        {
+                            provide: UpFieldControl,
+                            useExisting: forwardRef(() => UpPasswordComponent)
+                        },
+                        provideIcons({
+                            matVisibilityRound,
+                            matVisibilityOffRound
+                        }),
+                    ],
+                    template: `
+    <input
+      upInput
+      maxlength="64"
+      [type]="type()"
+      [value]="value()"
+      [required]="required()"
+      [disabled]="disabled()"
+      [class]="_computedClass()"
+      [placeholder]="placeholder()?? ''"
+      [attr.autocomplete]="autocomplete()"
+      (blur)="touch()"
+      (input)="change($event.target)"
+    />
+    
+    <ng-icon
+      class="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer text-gray-500 hover:text-primary peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"
+      [name]="type() === 'password'? 'matVisibilityRound' : 'matVisibilityOffRound'"
+      (click)="changeType()"
+    />
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }] } });
+
+class UpSelectComponent extends UpFieldControlComponent {
+    constructor() {
+        super();
+        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.appendTo = input('', ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.bindLabel = input('label', ...(ngDevMode ? [{ debugName: "bindLabel" }] : []));
+        this.bindValue = input('value', ...(ngDevMode ? [{ debugName: "bindValue" }] : []));
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+        this.addTag = input(false, ...(ngDevMode ? [{ debugName: "addTag", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.virtualScroll = input(false, ...(ngDevMode ? [{ debugName: "virtualScroll", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.changed = output();
+        this.control = contentChild(UpFieldControl, ...(ngDevMode ? [{ debugName: "control" }] : []));
+        this._computedClass = computed(() => {
+            return up('w-full min-w-0 h-9', 'data-[disabled=true]:[&>.ng-select-container]:cursor-not-allowed! data-[disabled=true]:[&>.ng-select-container]:opacity-50! data-[disabled=true]:[&>.ng-select-container]:bg-transparent!', '[&>.ng-select-container]:border! [&>.ng-select-container]:border-input! [&>.ng-select-container]:rounded-md! [&>.ng-select-container]:cursor-pointer! [&>.ng-select-container]:shadow-xs! [&>.ng-select-container]:items-center!', '[&>.ng-select-container>.ng-value-container>.ng-placeholder]:text-base! md:[&>.ng-select-container>.ng-value-container>.ng-placeholder]:text-sm!', '[&>.ng-select-container>.ng-value-container>.ng-value]:text-base! md:[&>.ng-select-container>.ng-value-container>.ng-value]:text-sm! [&>.ng-select-container>.ng-value-container>.ng-value]:text-black!', '[&.ng-select-focused>.ng-select-container]:border-ring! [&.ng-select-focused>.ng-select-container]:ring-ring/50! [&.ng-select-focused>.ng-select-container]:ring-[3px]!', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+        this.isTouched = false;
+        this._onTouched = () => { };
+        this._onChange = (_val) => { };
+        if (this.ngControl !== null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    /**
+     * Lifecycle hook — initializes the control name for form integration.
+     */
+    ngOnInit() {
+        this.setControlName(this.ngControl?.name);
+    }
+    /**
+     * Writes a new value from the form model into the view.
+     *
+     * @param {any} value - The value to assign to the select.
+     */
+    writeValue(value) {
+        this.value.set(value);
+    }
+    /**
+     * Registers a callback function to be called when the select value changes.
+     *
+     * @param {(val: any) => void} fn - Callback function to handle value changes.
+     */
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    /**
+     * Registers a callback function to be called when the component is touched.
+     *
+     * @param {() => void} fn - Callback function for touch events.
+     */
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /**
+     * Marks the component as touched (used for form validation state).
+     */
+    touch() {
+        if (!this.isTouched) {
+            this._onTouched();
+            this.isTouched = true;
+        }
+    }
+    /**
+     * Handles changes from the dropdown and propagates them to the form model.
+     *
+     * @param {any} e - The new value emitted by the ng-select component.
+     */
+    change(e) {
+        if (!this.isTouched) {
+            this._onTouched();
+            this.isTouched = true;
+        }
+        if (!this.disabled()) {
+            this.value.set(e);
+            this._onChange(this.value());
+            this.changed.emit(this.value());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: UpSelectComponent, isStandalone: true, selector: "up-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, addTag: { classPropertyName: "addTag", publicName: "addTag", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { classAttribute: "block relative" }, providers: [
+            {
+                provide: UpFieldControl,
+                useExisting: forwardRef(() => UpSelectComponent)
+            }
+        ], queries: [{ propertyName: "control", first: true, predicate: UpFieldControl, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-select
+      [items]="items()"
+      [ngModel]="value()"
+      [addTag]="addTag()"
+      [loading]="loading()"
+      [multiple]="multiple()"
+      [readonly]="disabled()"
+      [appendTo]="appendTo()"
+      [clearable]="clearable()"
+      [bindLabel]="bindLabel()"
+      [bindValue]="bindValue()"
+      [class]="_computedClass()"
+      [searchable]="searchable()"
+      [placeholder]="placeholder()"
+      [virtualScroll]="virtualScroll()"
+      [attr.data-disabled]="disabled()"
+      (blur)="touch()"
+      (ngModelChange)="change($event)"
+    />
+  `, isInline: true, styles: [".ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--accent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right-color:color-mix(in oklab,var(--primary) 50%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:color-mix(in oklab,var(--primary) 40%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:50%!important;padding-bottom:0!important;transform:translateY(-50%)!important}.ng-select .ng-select-container{transition:all .2s ease}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:.75rem}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--muted-foreground)}.ng-select .ng-select-container .ng-arrow-wrapper{padding-right:.75rem}.ng-select .ng-select-container .ng-clear-wrapper{margin-right:.25rem;transition:color .2s ease}.ng-select .ng-select-container .ng-clear-wrapper:hover .ng-clear{color:var(--destructive)}.ng-dropdown-panel{overflow:hidden;margin-top:.25rem!important;border-color:var(--border)!important;border-radius:calc(var(--radius) - 2px)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ng-dropdown-panel .ng-option-label{color:#000;font-size:1rem}@media screen and (min-width:48rem){.ng-dropdown-panel .ng-option-label{font-size:.875rem}}.ng-dropdown-panel .ng-option:hover,.ng-dropdown-panel .ng-option-marked{background-color:var(--accent)!important}.ng-dropdown-panel .ng-option-selected{color:#000!important;background-color:color-mix(in oklab,var(--primary) 15%,transparent)!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpSelectComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'up-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'block relative',
+                    }, imports: [
+                        FormsModule,
+                        NgSelectComponent
+                    ], providers: [
+                        {
+                            provide: UpFieldControl,
+                            useExisting: forwardRef(() => UpSelectComponent)
+                        }
+                    ], template: `
+    <ng-select
+      [items]="items()"
+      [ngModel]="value()"
+      [addTag]="addTag()"
+      [loading]="loading()"
+      [multiple]="multiple()"
+      [readonly]="disabled()"
+      [appendTo]="appendTo()"
+      [clearable]="clearable()"
+      [bindLabel]="bindLabel()"
+      [bindValue]="bindValue()"
+      [class]="_computedClass()"
+      [searchable]="searchable()"
+      [placeholder]="placeholder()"
+      [virtualScroll]="virtualScroll()"
+      [attr.data-disabled]="disabled()"
+      (blur)="touch()"
+      (ngModelChange)="change($event)"
+    />
+  `, styles: [".ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--accent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right-color:color-mix(in oklab,var(--primary) 50%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:color-mix(in oklab,var(--primary) 40%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:50%!important;padding-bottom:0!important;transform:translateY(-50%)!important}.ng-select .ng-select-container{transition:all .2s ease}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:.75rem}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--muted-foreground)}.ng-select .ng-select-container .ng-arrow-wrapper{padding-right:.75rem}.ng-select .ng-select-container .ng-clear-wrapper{margin-right:.25rem;transition:color .2s ease}.ng-select .ng-select-container .ng-clear-wrapper:hover .ng-clear{color:var(--destructive)}.ng-dropdown-panel{overflow:hidden;margin-top:.25rem!important;border-color:var(--border)!important;border-radius:calc(var(--radius) - 2px)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ng-dropdown-panel .ng-option-label{color:#000;font-size:1rem}@media screen and (min-width:48rem){.ng-dropdown-panel .ng-option-label{font-size:.875rem}}.ng-dropdown-panel .ng-option:hover,.ng-dropdown-panel .ng-option-marked{background-color:var(--accent)!important}.ng-dropdown-panel .ng-option-selected{color:#000!important;background-color:color-mix(in oklab,var(--primary) 15%,transparent)!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], addTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTag", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UpFieldControl), { isSignal: true }] }] } });
+
+class UpCountrySelectComponent extends UpFieldControlComponent {
+    constructor(service) {
+        super();
+        this.service = service;
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        this.clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+        this.placeholder = input('Select country', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.changed = output();
+        this.countries = signal([], ...(ngDevMode ? [{ debugName: "countries" }] : []));
+        this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+        this.isTouched = false;
+        this._onTouched = () => { };
+        this._onChange = (_val) => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        this.sub = this.service.query().subscribe({
+            error: () => {
+                this.countries.set([]);
+                this.isLoading.set(false);
+            },
+            next: ({ data: { webConfigMsCountry: { data } } }) => {
+                this.countries.set(data);
+                this.isLoading.set(false);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    onTouched() {
+        if (!this.isTouched) {
+            this._onTouched();
+            this.isTouched = true;
+        }
+    }
+    change(value) {
+        if (!this.isTouched) {
+            this._onTouched();
+            this.isTouched = true;
+        }
+        if (!this.disabled()) {
+            this.value.set(value);
+            this._onChange(value);
+            this.changed.emit(this.countries().find(c => c.code === value));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpCountrySelectComponent, deps: [{ token: i1$1.CountryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: UpCountrySelectComponent, isStandalone: true, selector: "up-country-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { classAttribute: "block" }, providers: [
+            {
+                provide: UpFieldControl,
+                useExisting: forwardRef(() => UpCountrySelectComponent),
+            }
+        ], usesInheritance: true, ngImport: i0, template: `
+    <up-select
+      searchable
+      virtualScroll  
+      appendTo="body"
+      bindValue="code"
+      bindLabel="name"
+      [value]="value()"
+      [items]="countries()"
+      [loading]="isLoading()"
+      [multiple]="multiple()"
+      [class]="inlineClass()"
+      [clearable]="clearable()"
+      [placeholder]="placeholder()"
+      [disabled]="disabled() || _disabled()"
+      (blur)="onTouched()"
+      (changed)="change($event)"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: UpSelectComponent, selector: "up-select", inputs: ["items", "label", "appendTo", "placeholder", "bindLabel", "bindValue", "value", "class", "loading", "multiple", "required", "disabled", "clearable", "addTag", "searchable", "virtualScroll"], outputs: ["valueChange", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpCountrySelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'up-country-select',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'block'
+                    },
+                    imports: [
+                        UpSelectComponent
+                    ],
+                    providers: [
+                        {
+                            provide: UpFieldControl,
+                            useExisting: forwardRef(() => UpCountrySelectComponent),
+                        }
+                    ],
+                    template: `
+    <up-select
+      searchable
+      virtualScroll  
+      appendTo="body"
+      bindValue="code"
+      bindLabel="name"
+      [value]="value()"
+      [items]="countries()"
+      [loading]="isLoading()"
+      [multiple]="multiple()"
+      [class]="inlineClass()"
+      [clearable]="clearable()"
+      [placeholder]="placeholder()"
+      [disabled]="disabled() || _disabled()"
+      (blur)="onTouched()"
+      (changed)="change($event)"
+    />
+  `,
+                }]
+        }], ctorParameters: () => [{ type: i1$1.CountryService }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+class UpCurrencySelectComponent extends UpFieldControlComponent {
+    constructor(service) {
+        super();
+        this.service = service;
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        this.clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+        this.placeholder = input('Select currency', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.changed = output();
+        this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+        this.currencies = signal([], ...(ngDevMode ? [{ debugName: "currencies" }] : []));
+        this.isTouched = false;
+        this._onTouched = () => { };
+        this._onChange = (_val) => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        this.sub = this.service.query().subscribe({
+            error: () => {
+                this.currencies.set([]);
+                this.isLoading.set(false);
+            },
+            next: ({ data: { webConfigMsCurrency: { data } } }) => {
+                this.currencies.set(data.map(({ code, name, ...ccy }) => {
+                    return {
+                        ...ccy,
+                        code,
+                        name,
+                        displayLabel: `${code} - ${name}`
+                    };
+                }));
+                this.isLoading.set(false);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    onTouched() {
+        if (!this.isTouched) {
+            this._onTouched();
+            this.isTouched = true;
+        }
+    }
+    change(value) {
+        if (!this.isTouched) {
+            this._onTouched();
+            this.isTouched = true;
+        }
+        if (!this.disabled()) {
+            this.value.set(value);
+            this._onChange(value);
+            this.changed.emit(this.currencies().find(c => c.code === value));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpCurrencySelectComponent, deps: [{ token: i1$1.CurrencyService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: UpCurrencySelectComponent, isStandalone: true, selector: "up-currency-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { classAttribute: "block" }, providers: [
+            {
+                provide: UpFieldControl,
+                useExisting: forwardRef(() => UpCurrencySelectComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: `
+    <up-select
+      searchable
+      virtualScroll  
+      appendTo="body"
+      bindValue="code"
+      bindLabel="displayLabel"
+      [value]="value()"
+      [items]="currencies()"
+      [loading]="isLoading()"
+      [multiple]="multiple()"
+      [class]="inlineClass()"
+      [clearable]="clearable()"
+      [placeholder]="placeholder()"
+      [disabled]="disabled() || _disabled()"
+      (blur)="onTouched()"
+      (changed)="change($event)"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: UpSelectComponent, selector: "up-select", inputs: ["items", "label", "appendTo", "placeholder", "bindLabel", "bindValue", "value", "class", "loading", "multiple", "required", "disabled", "clearable", "addTag", "searchable", "virtualScroll"], outputs: ["valueChange", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpCurrencySelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'up-currency-select',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'block'
+                    },
+                    imports: [
+                        UpSelectComponent
+                    ],
+                    providers: [
+                        {
+                            provide: UpFieldControl,
+                            useExisting: forwardRef(() => UpCurrencySelectComponent)
+                        }
+                    ],
+                    template: `
+    <up-select
+      searchable
+      virtualScroll  
+      appendTo="body"
+      bindValue="code"
+      bindLabel="displayLabel"
+      [value]="value()"
+      [items]="currencies()"
+      [loading]="isLoading()"
+      [multiple]="multiple()"
+      [class]="inlineClass()"
+      [clearable]="clearable()"
+      [placeholder]="placeholder()"
+      [disabled]="disabled() || _disabled()"
+      (blur)="onTouched()"
+      (changed)="change($event)"
+    />
+  `,
+                }]
+        }], ctorParameters: () => [{ type: i1$1.CurrencyService }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+class UpSearchableSelectComponent extends UpFieldControlComponent {
+    constructor() {
+        super();
+        this.query = input.required(...(ngDevMode ? [{ debugName: "query" }] : []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.appendTo = input('', ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.initialItems = input([], ...(ngDevMode ? [{ debugName: "initialItems" }] : []));
+        this.bindLabel = input('label', ...(ngDevMode ? [{ debugName: "bindLabel" }] : []));
+        this.bindValue = input('value', ...(ngDevMode ? [{ debugName: "bindValue" }] : []));
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this.addTag = input(false, ...(ngDevMode ? [{ debugName: "addTag", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.virtualScroll = input(false, ...(ngDevMode ? [{ debugName: "virtualScroll", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.loading = model(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.changed = output();
+        this.control = contentChild(UpFieldControl, ...(ngDevMode ? [{ debugName: "control" }] : []));
+        this._computedClass = computed(() => {
+            return up('w-full min-w-0 h-9', 'data-[disabled=true]:[&>.ng-select-container]:cursor-not-allowed! data-[disabled=true]:[&>.ng-select-container]:opacity-50! data-[disabled=true]:[&>.ng-select-container]:bg-transparent!', '[&>.ng-select-container]:border! [&>.ng-select-container]:border-input! [&>.ng-select-container]:rounded-md! [&>.ng-select-container]:cursor-pointer! [&>.ng-select-container]:shadow-xs! [&>.ng-select-container]:items-center!', '[&>.ng-select-container>.ng-value-container>.ng-placeholder]:text-base! md:[&>.ng-select-container>.ng-value-container>.ng-placeholder]:text-sm!', '[&>.ng-select-container>.ng-value-container>.ng-value]:text-base! md:[&>.ng-select-container>.ng-value-container>.ng-value]:text-sm! [&>.ng-select-container>.ng-value-container>.ng-value]:text-black!', '[&.ng-select-focused>.ng-select-container]:border-ring! [&.ng-select-focused>.ng-select-container]:ring-ring/50! [&.ng-select-focused>.ng-select-container]:ring-[3px]!', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+        this.items = computed(() => {
+            const results = this._queryResults();
+            return results.length > 0 ? results : this.initialItems();
+        }, ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.typeahead = new Subject();
+        this.query$ = this.typeahead.pipe(distinctUntilChanged(), debounceTime(300), tap(() => this.loading.set(true)), switchMap((k) => {
+            return this.query()(k).pipe(map((result) => !result.length ? this.initialItems() : result), catchError(() => of(this.initialItems())));
+        }), tap(() => this.loading.set(false)));
+        this._queryResults = toSignal(this.query$, { initialValue: [] });
+        this.isTouched = false;
+        this._onTouched = () => { };
+        this._onChange = (_val) => { };
+        if (this.ngControl !== null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        this.setControlName(this.ngControl?.name);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    touch() {
+        if (!this.isTouched) {
+            this._onTouched();
+            this.isTouched = true;
+        }
+    }
+    change(e) {
+        if (!this.isTouched) {
+            this._onTouched();
+            this.isTouched = true;
+        }
+        if (!this.disabled()) {
+            if (!e) {
+                this.value.set(null);
+            }
+            else {
+                this.value.set(!this.multiple() ? e[this.bindValue()] : e.map((o) => o[this.bindValue()]));
+            }
+            this._onChange(this.value());
+            this.changed.emit(this.value());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpSearchableSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: UpSearchableSelectComponent, isStandalone: true, selector: "up-searchable-select", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, initialItems: { classPropertyName: "initialItems", publicName: "initialItems", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, addTag: { classPropertyName: "addTag", publicName: "addTag", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", value: "valueChange", changed: "changed" }, host: { classAttribute: "block relative" }, providers: [
+            {
+                provide: UpFieldControl,
+                useExisting: forwardRef(() => UpSearchableSelectComponent)
+            }
+        ], queries: [{ propertyName: "control", first: true, predicate: UpFieldControl, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-select
+      typeToSearchText="Please enter 3 or more characters"
+      [minTermLength]="3"
+      [virtualScroll]="true"
+      [editableSearchTerm]="true"
+      
+      [typeahead]="typeahead"
+      
+      [items]="items()"
+      [ngModel]="value()"
+      [addTag]="addTag()"
+      [loading]="loading()"
+      [multiple]="multiple()"
+      [readonly]="disabled()"
+      [appendTo]="appendTo()"
+      [clearable]="clearable()"
+      [bindLabel]="bindLabel()"
+      [bindValue]="bindValue()"
+      [class]="_computedClass()"
+      [placeholder]="placeholder()"
+      [virtualScroll]="virtualScroll()"
+      [attr.data-disabled]="disabled()"
+      
+      (blur)="touch()"
+      (change)="change($event)"
+    />
+  `, isInline: true, styles: [".ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--accent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right-color:color-mix(in oklab,var(--primary) 50%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:color-mix(in oklab,var(--primary) 40%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:50%!important;padding-bottom:0!important;transform:translateY(-50%)!important}.ng-select .ng-select-container{transition:all .2s ease}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:.75rem}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--muted-foreground)}.ng-select .ng-select-container .ng-arrow-wrapper{padding-right:.75rem}.ng-select .ng-select-container .ng-clear-wrapper{margin-right:.25rem;transition:color .2s ease}.ng-select .ng-select-container .ng-clear-wrapper:hover .ng-clear{color:var(--destructive)}.ng-dropdown-panel{overflow:hidden;margin-top:.25rem!important;border-color:var(--border)!important;border-radius:calc(var(--radius) - 2px)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ng-dropdown-panel .ng-option-label{color:#000;font-size:1rem}@media screen and (min-width:48rem){.ng-dropdown-panel .ng-option-label{font-size:.875rem}}.ng-dropdown-panel .ng-option:hover,.ng-dropdown-panel .ng-option-marked{background-color:var(--accent)!important}.ng-dropdown-panel .ng-option-selected{color:#000!important;background-color:color-mix(in oklab,var(--primary) 15%,transparent)!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpSearchableSelectComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'up-searchable-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'block relative',
+                    }, imports: [
+                        FormsModule,
+                        NgSelectComponent
+                    ], providers: [
+                        {
+                            provide: UpFieldControl,
+                            useExisting: forwardRef(() => UpSearchableSelectComponent)
+                        }
+                    ], template: `
+    <ng-select
+      typeToSearchText="Please enter 3 or more characters"
+      [minTermLength]="3"
+      [virtualScroll]="true"
+      [editableSearchTerm]="true"
+      
+      [typeahead]="typeahead"
+      
+      [items]="items()"
+      [ngModel]="value()"
+      [addTag]="addTag()"
+      [loading]="loading()"
+      [multiple]="multiple()"
+      [readonly]="disabled()"
+      [appendTo]="appendTo()"
+      [clearable]="clearable()"
+      [bindLabel]="bindLabel()"
+      [bindValue]="bindValue()"
+      [class]="_computedClass()"
+      [placeholder]="placeholder()"
+      [virtualScroll]="virtualScroll()"
+      [attr.data-disabled]="disabled()"
+      
+      (blur)="touch()"
+      (change)="change($event)"
+    />
+  `, styles: [".ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--accent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right-color:color-mix(in oklab,var(--primary) 50%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:color-mix(in oklab,var(--primary) 40%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:50%!important;padding-bottom:0!important;transform:translateY(-50%)!important}.ng-select .ng-select-container{transition:all .2s ease}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:.75rem}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--muted-foreground)}.ng-select .ng-select-container .ng-arrow-wrapper{padding-right:.75rem}.ng-select .ng-select-container .ng-clear-wrapper{margin-right:.25rem;transition:color .2s ease}.ng-select .ng-select-container .ng-clear-wrapper:hover .ng-clear{color:var(--destructive)}.ng-dropdown-panel{overflow:hidden;margin-top:.25rem!important;border-color:var(--border)!important;border-radius:calc(var(--radius) - 2px)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ng-dropdown-panel .ng-option-label{color:#000;font-size:1rem}@media screen and (min-width:48rem){.ng-dropdown-panel .ng-option-label{font-size:.875rem}}.ng-dropdown-panel .ng-option:hover,.ng-dropdown-panel .ng-option-marked{background-color:var(--accent)!important}.ng-dropdown-panel .ng-option-selected{color:#000!important;background-color:color-mix(in oklab,var(--primary) 15%,transparent)!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], initialItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialItems", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], addTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTag", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UpFieldControl), { isSignal: true }] }] } });
+
+class UpDatepickerComponent extends UpFieldControlComponent {
+    constructor() {
+        super();
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+        this.maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this.dateFormat = input('dd LLL yyyy', ...(ngDevMode ? [{ debugName: "dateFormat", alias: 'format' }] : [{ alias: 'format' }]));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
+                transform: booleanAttribute
+            }]));
+        this.btnTrigger = viewChild('btnTrigger', ...(ngDevMode ? [{ debugName: "btnTrigger" }] : []));
+        this.value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+        this.formattedDate = computed(() => {
+            return this.value() ? format(this.value(), this.dateFormat()) : '';
+        }, ...(ngDevMode ? [{ debugName: "formattedDate" }] : []));
+        this._computedClass = computed(() => {
+            return up('flex justify-between px-3 border border-border min-w-48 w-full font-normal hover:not-disabled:text-primary! data-[has-value=false]:text-muted-foreground', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+        this._isTouched = false;
+        this._onTouched = () => { };
+        this._onChange = () => { };
+        if (this.ngControl !== null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    writeValue(value) {
+        this.value.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    touch() {
+        this._markTouched();
+    }
+    selectedDate(day) {
+        this.value.set(day);
+        this._onChange(day);
+        this._markTouched();
+        this.btnTrigger()?.nativeElement.click();
+    }
+    _markTouched() {
+        if (this._isTouched)
+            return;
+        this._onTouched();
+        this._isTouched = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: UpDatepickerComponent, isStandalone: true, selector: "up-datepicker", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: UpFieldControl,
+                useExisting: forwardRef(() => UpDatepickerComponent),
+            },
+            provideIcons({
+                matCalendarMonthRound
+            }),
+        ], viewQueries: [{ propertyName: "btnTrigger", first: true, predicate: ["btnTrigger"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <up-popover 
+      alignment="start" 
+      placementOffset="4"
+    >
+      <button
+        upButton
+        upPopoverTrigger
+        type="button"
+        variant="ghost"
+        [class]="_computedClass()"
+        [disabled]="disabled() || _disabled()"
+        [attr.data-has-value]="value()? true : false"
+        (blur)="touch()"
+        #btnTrigger
+      >
+        {{ value()? formattedDate() : placeholder() }}
+
+        <ng-icon
+          size="16"
+          class="ml-auto"
+          name="matCalendarMonthRound"
+        />
+      </button>
+
+      <ng-container *upPopoverContentRef>
+        <up-calendar
+          [activeDay]="value()"
+          [minDate]="minDate()"
+          [maxDate]="maxDate()"
+          (selected)="selectedDate($event)"
+        />
+      </ng-container>
+    </up-popover>
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: UpButtonDirective, selector: "[upButton]", inputs: ["size", "variant", "class"], exportAs: ["upButton"] }, { kind: "component", type: UpPopoverComponent, selector: "up-popover", inputs: ["placement", "alignment", "placementOffset", "alignmentOffset"] }, { kind: "component", type: UpCalendarComponent, selector: "up-calendar", inputs: ["minDate", "maxDate", "variant", "activeDay", "activeRangeDay"], outputs: ["selected", "rangeSelected", "activeDayChange", "activeRangeDayChange"] }, { kind: "directive", type: UpPopoverTriggerDirective, selector: "[upPopoverTrigger]", exportAs: ["upPopoverTrigger"] }, { kind: "directive", type: UpPopoverContentRefDirective, selector: "[upPopoverContentRef]", exportAs: ["upPopoverContentRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'up-datepicker',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: UpFieldControl,
+                            useExisting: forwardRef(() => UpDatepickerComponent),
+                        },
+                        provideIcons({
+                            matCalendarMonthRound
+                        }),
+                    ],
+                    imports: [
+                        NgIcon,
+                        UpButtonDirective,
+                        UpPopoverComponent,
+                        UpCalendarComponent,
+                        UpPopoverTriggerDirective,
+                        UpPopoverContentRefDirective
+                    ],
+                    template: `
+    <up-popover 
+      alignment="start" 
+      placementOffset="4"
+    >
+      <button
+        upButton
+        upPopoverTrigger
+        type="button"
+        variant="ghost"
+        [class]="_computedClass()"
+        [disabled]="disabled() || _disabled()"
+        [attr.data-has-value]="value()? true : false"
+        (blur)="touch()"
+        #btnTrigger
+      >
+        {{ value()? formattedDate() : placeholder() }}
+
+        <ng-icon
+          size="16"
+          class="ml-auto"
+          name="matCalendarMonthRound"
+        />
+      </button>
+
+      <ng-container *upPopoverContentRef>
+        <up-calendar
+          [activeDay]="value()"
+          [minDate]="minDate()"
+          [maxDate]="maxDate()"
+          (selected)="selectedDate($event)"
+        />
+      </ng-container>
+    </up-popover>
+  `
+                }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], btnTrigger: [{ type: i0.ViewChild, args: ['btnTrigger', { isSignal: true }] }] } });
+
+class UpDateRangePickerComponent extends UpFieldControlComponent {
+    constructor() {
+        super();
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+        this.maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this.dateFormat = input('dd LLL yyyy', ...(ngDevMode ? [{ debugName: "dateFormat", alias: 'format' }] : [{ alias: 'format' }]));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
+                transform: booleanAttribute
+            }]));
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+        this.value = signal({ from: null, to: null }, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.formattedDate = computed(() => {
+            return this.value().from && this.value().to ? `${format(this.value().from, this.dateFormat())} - ${format(this.value().to, this.dateFormat())}` : '';
+        }, ...(ngDevMode ? [{ debugName: "formattedDate" }] : []));
+        this._computedClass = computed(() => {
+            return up('flex justify-between px-3 border border-border min-w-60 w-full font-normal hover:not-disabled:text-primary! data-[has-value=false]:text-muted-foreground', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+        this._isTouched = false;
+        this._onTouched = () => { };
+        this._onChange = () => { };
+        if (this.ngControl !== null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    writeValue(value) {
+        this.value.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    touch() {
+        this._markTouched();
+    }
+    selectedDate(range) {
+        this.value.set(range);
+        this._onChange(range);
+        this._markTouched();
+    }
+    _markTouched() {
+        if (this._isTouched)
+            return;
+        this._onTouched();
+        this._isTouched = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: UpDateRangePickerComponent, isStandalone: true, selector: "up-date-range-picker", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: UpFieldControl,
+                useExisting: forwardRef(() => UpDateRangePickerComponent)
+            },
+            provideIcons({
+                matCalendarMonthRound
+            }),
+        ], usesInheritance: true, ngImport: i0, template: `
+    <up-popover 
+      alignment="start" 
+      placementOffset="4"
+    >
+      <button
+        upButton
+        upPopoverTrigger
+        type="button"
+        variant="ghost"
+        [class]="_computedClass()"
+        [disabled]="disabled() || _disabled()"
+        [attr.data-has-value]="value().from && value().to? true : false"
+        (blur)="touch()"
+      >
+        {{ value().from && value().to? formattedDate() : placeholder()}}
+
+        <ng-icon
+          size="16"
+          class="ml-auto"
+          name="matCalendarMonthRound"
+        />
+      </button>
+
+      <ng-container *upPopoverContentRef>
+        <up-calendar
+          variant="range"
+          [activeDay]="null"
+          [activeRangeDay]="value()"
+          [minDate]="minDate()"
+          [maxDate]="maxDate()"
+          (rangeSelected)="selectedDate($event)"
+        />
+      </ng-container>
+    </up-popover>
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: UpButtonDirective, selector: "[upButton]", inputs: ["size", "variant", "class"], exportAs: ["upButton"] }, { kind: "component", type: UpPopoverComponent, selector: "up-popover", inputs: ["placement", "alignment", "placementOffset", "alignmentOffset"] }, { kind: "component", type: UpCalendarComponent, selector: "up-calendar", inputs: ["minDate", "maxDate", "variant", "activeDay", "activeRangeDay"], outputs: ["selected", "rangeSelected", "activeDayChange", "activeRangeDayChange"] }, { kind: "directive", type: UpPopoverTriggerDirective, selector: "[upPopoverTrigger]", exportAs: ["upPopoverTrigger"] }, { kind: "directive", type: UpPopoverContentRefDirective, selector: "[upPopoverContentRef]", exportAs: ["upPopoverContentRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpDateRangePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'up-date-range-picker',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: UpFieldControl,
+                            useExisting: forwardRef(() => UpDateRangePickerComponent)
+                        },
+                        provideIcons({
+                            matCalendarMonthRound
+                        }),
+                    ],
+                    imports: [
+                        NgIcon,
+                        UpButtonDirective,
+                        UpPopoverComponent,
+                        UpCalendarComponent,
+                        UpPopoverTriggerDirective,
+                        UpPopoverContentRefDirective
+                    ],
+                    template: `
+    <up-popover 
+      alignment="start" 
+      placementOffset="4"
+    >
+      <button
+        upButton
+        upPopoverTrigger
+        type="button"
+        variant="ghost"
+        [class]="_computedClass()"
+        [disabled]="disabled() || _disabled()"
+        [attr.data-has-value]="value().from && value().to? true : false"
+        (blur)="touch()"
+      >
+        {{ value().from && value().to? formattedDate() : placeholder()}}
+
+        <ng-icon
+          size="16"
+          class="ml-auto"
+          name="matCalendarMonthRound"
+        />
+      </button>
+
+      <ng-container *upPopoverContentRef>
+        <up-calendar
+          variant="range"
+          [activeDay]="null"
+          [activeRangeDay]="value()"
+          [minDate]="minDate()"
+          [maxDate]="maxDate()"
+          (rangeSelected)="selectedDate($event)"
+        />
+      </ng-container>
+    </up-popover>
+  `
+                }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class UpFormFieldComponent {
+    constructor() {
+        this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+        this.hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this.control = contentChild(UpFieldControl, ...(ngDevMode ? [{ debugName: "control" }] : []));
+        this._computedClass = computed(() => {
+            return up('block space-y-2', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+        effect(() => {
+            if (!this.control()) {
+                throw new Error('Form field must contain a field control, eg: input, checkbox, textarea, etc.');
+            }
+            this.control().setControlName(this.label());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: UpFormFieldComponent, isStandalone: true, selector: "up-form-field", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, queries: [{ propertyName: "control", first: true, predicate: UpFieldControl, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div 
+      class="
+        group flex flex-col gap-2
+        has-[input[type='checkbox']]:flex-row has-[input[type='checkbox']]:items-center
+      "
+    >
+      @if (label()) {
+        <label 
+          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 select-none group-has-[input[type='checkbox']]:order-2"
+          [for]="name()"
+          [class.text-destructive]="control()?.error()"
+        >
+          {{ label() }}
+        </label>
+      }
+
+      <ng-content />
+    </div>
+
+    @if (control()?.error()) {
+      <p class="text-xs font-medium text-destructive">
+        {{ control()?.error() }}
+      </p>
+    }
+    @else if (hint()) {
+      <p class="text-xs text-muted-foreground">
+        {{ hint() }}
+      </p>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'up-form-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    template: `
+    <div 
+      class="
+        group flex flex-col gap-2
+        has-[input[type='checkbox']]:flex-row has-[input[type='checkbox']]:items-center
+      "
+    >
+      @if (label()) {
+        <label 
+          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 select-none group-has-[input[type='checkbox']]:order-2"
+          [for]="name()"
+          [class.text-destructive]="control()?.error()"
+        >
+          {{ label() }}
+        </label>
+      }
+
+      <ng-content />
+    </div>
+
+    @if (control()?.error()) {
+      <p class="text-xs font-medium text-destructive">
+        {{ control()?.error() }}
+      </p>
+    }
+    @else if (hint()) {
+      <p class="text-xs text-muted-foreground">
+        {{ hint() }}
+      </p>
+    }
+  `
+                }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UpFieldControl), { isSignal: true }] }] } });
+
+function setValidator(form, keys, validators) {
+    if (!keys.length ||
+        keys.length === 1) {
+        throw new Error('Use normal action for single keys and keys cannot be empty.');
+    }
+    keys.forEach((key) => {
+        const control = form.get(key);
+        if (control) {
+            control.setValidators(validators);
+            control.updateValueAndValidity();
+        }
+    });
+}
+
+function toggleFormControls(form, keys, mode) {
+    if (!keys.length ||
+        keys.length === 1) {
+        throw new Error('Use normal action for single keys and keys cannot be empty.');
+    }
+    keys.forEach((key) => form.get(key)?.[mode]());
+}
+
+function prettifyLabel(name) {
+    return name
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .replace(/_/g, ' ')
+        .replace(/\b\w/g, char => char.toUpperCase());
+}
+function convertToDate(value) {
+    if (value instanceof Date)
+        return value;
+    if (typeof value === 'string' &&
+        !isNaN(Date.parse(value))) {
+        return new Date(value);
+    }
+    return null;
+}
+/**
+ * Range validator for number and date values.
+ * @param {string} fromKey - The "from" control name
+ * @param {string} toKey - The "to" control name
+ * @returns {ValidatorFn} Throw error message when fromKey is greater than toKey
+ *
+ * Usage:
+ * this.form = new FormGroup({
+ *   agingFrom: new FormControl(),
+ *   agingTo: new FormControl(),
+ * }, { validators: rangeValidator('agingFrom', 'agingTo') });
+ */
+function validRangeValidator(fromKey, toKey) {
+    return (group) => {
+        if (!group) {
+            return null;
+        }
+        const toControl = group.get(toKey);
+        const fromControl = group.get(fromKey);
+        if (!fromControl ||
+            !toControl) {
+            return null;
+        }
+        const toValue = toControl.value;
+        const fromValue = fromControl.value;
+        if (fromValue === null ||
+            toValue === null ||
+            fromValue === '' ||
+            toValue === '') {
+            return null;
+        }
+        let isInvalid = false;
+        const toDate = convertToDate(toValue);
+        const fromDate = convertToDate(fromValue);
+        if (fromDate && toDate) {
+            isInvalid = toDate <= fromDate;
+        }
+        else if (!isNaN(fromValue) &&
+            !isNaN(toValue)) {
+            isInvalid = Number(toValue) <= Number(fromValue);
+        }
+        return !isInvalid ? null : {
+            rangeInvalid: {
+                to: toKey,
+                from: fromKey,
+                message: `${prettifyLabel(toKey)} must be greater than ${prettifyLabel(fromKey)}`
+            }
+        };
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UpCheckboxDirective, UpCountrySelectComponent, UpCurrencySelectComponent, UpDateRangePickerComponent, UpDatepickerComponent, UpFieldControl, UpFieldControlComponent, UpFormFieldComponent, UpInputDirective, UpNumberDirective, UpPasswordComponent, UpSearchableSelectComponent, UpSelectComponent, UpSwitchComponent, setValidator, toggleFormControls, validRangeValidator };
+//# sourceMappingURL=unipin-angular-applet-forms.mjs.map