@unipin/angular-applet 21.6.1 → 21.6.5

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { signal, inject, Injector, Injectable, input, computed, forwardRef, Directive, HostListener, booleanAttribute, model, ChangeDetectionStrategy, Component, contentChildren, output, contentChild, ViewEncapsulation, viewChild, Pipe, afterNextRender, effect } from '@angular/core';
+import { signal, inject, Injector, Injectable, input, computed, forwardRef, Directive, model, viewChildren, ChangeDetectionStrategy, Component, HostListener, booleanAttribute, contentChildren, output, contentChild, ViewEncapsulation, viewChild, Pipe, afterNextRender, effect } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NgControl, NgForm, FormGroupDirective, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i1$1 from '@unipin/angular-applet/common';
 import { up, compressImage, UpFileDragNDropDirective } 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, matWatchLaterRound } from '@ng-icons/material-icons/round';
 import { NgSelectComponent } from '@ng-select/ng-select';
@@ -41,14 +41,14 @@ function toggleFormControls(form, keys, mode) {
 function prettifyLabel(name) {
     return name
         .replace(/([a-z])([A-Z])/g, '$1 $2')
-        .replace(/_/g, ' ')
+        .replaceAll('_', ' ')
         .replace(/\b\w/g, char => char.toUpperCase());
 }
 function convertToDate(value) {
     if (value instanceof Date)
         return value;
     if (typeof value === 'string' &&
-        !isNaN(Date.parse(value))) {
+        !Number.isNaN(Date.parse(value))) {
         return new Date(value);
     }
     return null;
@@ -90,8 +90,8 @@ function validRangeValidator(fromKey, toKey) {
         if (fromDate && toDate) {
             isInvalid = toDate <= fromDate;
         }
-        else if (!isNaN(fromValue) &&
-            !isNaN(toValue)) {
+        else if (!Number.isNaN(fromValue) &&
+            !Number.isNaN(toValue)) {
             isInvalid = Number(toValue) <= Number(fromValue);
         }
         return !isInvalid ? null : {
@@ -143,7 +143,7 @@ function isEqualValidator(controlNames, message) {
             const labels = controlNames.map((name) => {
                 return name
                     .replace(/([a-z])([A-Z])/g, '$1 $2')
-                    .replace(/_/g, ' ')
+                    .replaceAll('_', ' ')
                     .replace(/\b\w/g, char => char.toUpperCase());
             });
             return {
@@ -197,7 +197,7 @@ function isNotEqualValidator(controlNames, message) {
             const labels = controlNames.map((name) => {
                 return name
                     .replace(/([a-z])([A-Z])/g, '$1 $2')
-                    .replace(/_/g, ' ')
+                    .replaceAll('_', ' ')
                     .replace(/\b\w/g, char => char.toUpperCase());
             });
             return {
@@ -267,10 +267,10 @@ class UpFieldControlComponent {
             this.error.set(newState);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpFieldControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpFieldControlComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpFieldControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpFieldControlComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpFieldControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpFieldControlComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -282,15 +282,15 @@ class UpInputDirective extends UpFieldControlComponent {
             return up('peer file:text-foreground placeholder:text-muted-foreground/30 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" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: UpInputDirective, isStandalone: true, selector: "[upInput]", inputs: { inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.18", 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.2.11", ngImport: i0, type: UpInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpInputDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'upInput',
@@ -307,6 +307,212 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 }]
         }], propDecorators: { inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+class UpPinComponent {
+    constructor() {
+        this.length = input(6, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
+        this.obscure = model(true, ...(ngDevMode ? [{ debugName: "obscure" }] : /* istanbul ignore next */ []));
+        this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass" }] : /* istanbul ignore next */ []));
+        this._pinInputs = viewChildren('pinInput', ...(ngDevMode ? [{ debugName: "_pinInputs" }] : /* istanbul ignore next */ []));
+        this._focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_focusedIndex" }] : /* istanbul ignore next */ []));
+        this._values = signal([], ...(ngDevMode ? [{ debugName: "_values" }] : /* istanbul ignore next */ []));
+        this._slots = computed(() => Array.from({ length: this.length() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "_slots" }] : /* istanbul ignore next */ []));
+        this._displayValues = computed(() => Array.from({ length: this.length() }, (_, i) => this._values()[i] ?? ''), ...(ngDevMode ? [{ debugName: "_displayValues" }] : /* istanbul ignore next */ []));
+        this._hostClass = computed(() => up('flex gap-2', this.inlineClass()), ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
+        this._inputClass = computed(() => up('size-11 max-w-13 p-0', 'text-center text-base leading-none'), ...(ngDevMode ? [{ debugName: "_inputClass" }] : /* istanbul ignore next */ []));
+        this._isTouched = false;
+        this._onTouched = () => { };
+        this._onChange = () => { };
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    writeValue(val) {
+        if (!val) {
+            this._values.set(new Array(this.length()).fill(''));
+            return;
+        }
+        const chars = val.slice(0, this.length()).split('');
+        const values = [
+            ...chars,
+            ...new Array(Math.max(0, this.length() - chars.length)).fill(''),
+        ];
+        this._values.set(values);
+    }
+    _emitChange() {
+        this._onChange(this._values().join(''));
+    }
+    _onBlur() {
+        this._focusedIndex.set(-1);
+        if (!this._isTouched) {
+            this._onTouched();
+            this._isTouched = true;
+        }
+    }
+    _moveFocus(index) {
+        const inputs = this._pinInputs();
+        if (inputs[index]) {
+            inputs[index].nativeElement.focus();
+        }
+    }
+    _onFocus(index) {
+        this._focusedIndex.set(index);
+        const inputs = this._pinInputs();
+        if (inputs[index]) {
+            inputs[index].nativeElement.select();
+        }
+    }
+    _getValues() {
+        const len = this.length();
+        const vals = [...this._values()];
+        while (vals.length < len) {
+            vals.push('');
+        }
+        return vals.slice(0, len);
+    }
+    _onPaste(event) {
+        event.preventDefault();
+        const pasted = event.clipboardData?.getData('text') ?? '';
+        const startIndex = Math.max(0, this._focusedIndex());
+        const chars = pasted.slice(0, this.length() - startIndex).split('');
+        const values = this._getValues();
+        chars.forEach((char, i) => {
+            values[startIndex + i] = char;
+        });
+        this._values.set(values);
+        this._emitChange();
+        const focusTarget = Math.min(startIndex + chars.length, this.length() - 1);
+        this._moveFocus(focusTarget);
+    }
+    _onInput(event, index) {
+        const inputEl = event.target;
+        const val = inputEl.value.slice(-1);
+        const values = this._getValues();
+        values[index] = val;
+        this._values.set(values);
+        this._emitChange();
+        if (val && index < this.length() - 1) {
+            this._moveFocus(index + 1);
+        }
+    }
+    _onKeydown(event, index) {
+        const values = this._getValues();
+        switch (event.key) {
+            case 'Backspace':
+                event.preventDefault();
+                if (values[index]) {
+                    values[index] = '';
+                    this._values.set(values);
+                    this._emitChange();
+                }
+                else if (index > 0) {
+                    values[index - 1] = '';
+                    this._values.set(values);
+                    this._emitChange();
+                    this._moveFocus(index - 1);
+                }
+                break;
+            case 'Delete':
+                event.preventDefault();
+                values[index] = '';
+                this._values.set(values);
+                this._emitChange();
+                break;
+            case 'ArrowLeft':
+                if (index > 0) {
+                    event.preventDefault();
+                    this._moveFocus(index - 1);
+                }
+                break;
+            case 'ArrowRight':
+                if (index < this.length() - 1) {
+                    event.preventDefault();
+                    this._moveFocus(index + 1);
+                }
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpPinComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: UpPinComponent, isStandalone: true, selector: "up-pin", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, obscure: { classPropertyName: "obscure", publicName: "obscure", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "inlineClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { obscure: "obscureChange", disabled: "disabledChange" }, host: { properties: { "class": "_hostClass()" } }, providers: [
+            {
+                multi: true,
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UpPinComponent),
+            },
+        ], viewQueries: [{ propertyName: "_pinInputs", predicate: ["pinInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @for (slot of _slots(); track slot) {
+      <input
+        upInput
+        maxlength="1"
+        autocomplete="off"
+        inputmode="numeric"
+
+        [class]="_inputClass()"
+        [disabled]="disabled()"
+        [value]="_displayValues()[slot]"
+        [type]="obscure()? 'password' : 'text'"
+
+        (blur)="_onBlur()"
+        (focus)="_onFocus(slot)"
+        (paste)="_onPaste($event)"
+        (input)="_onInput($event, slot)"
+        (keydown)="_onKeydown($event, slot)"
+
+        #pinInput
+      />
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: UpInputDirective, selector: "[upInput]", inputs: ["class"], exportAs: ["upInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpPinComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'up-pin',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': '_hostClass()',
+                    },
+                    imports: [
+                        UpInputDirective,
+                    ],
+                    providers: [
+                        {
+                            multi: true,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UpPinComponent),
+                        },
+                    ],
+                    template: `
+    @for (slot of _slots(); track slot) {
+      <input
+        upInput
+        maxlength="1"
+        autocomplete="off"
+        inputmode="numeric"
+
+        [class]="_inputClass()"
+        [disabled]="disabled()"
+        [value]="_displayValues()[slot]"
+        [type]="obscure()? 'password' : 'text'"
+
+        (blur)="_onBlur()"
+        (focus)="_onFocus(slot)"
+        (paste)="_onPaste($event)"
+        (input)="_onInput($event, slot)"
+        (keydown)="_onKeydown($event, slot)"
+
+        #pinInput
+      />
+    }
+  `,
+                }]
+        }], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], obscure: [{ type: i0.Input, args: [{ isSignal: true, alias: "obscure", required: false }] }, { type: i0.Output, args: ["obscureChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineClass", required: false }] }], _pinInputs: [{ type: i0.ViewChildren, args: ['pinInput', { isSignal: true }] }] } });
+
 class UpNumberDirective extends UpInputDirective {
     constructor(renderer, el) {
         super();
@@ -319,7 +525,7 @@ class UpNumberDirective extends UpInputDirective {
                 return 0;
             }
             const floatPoint = Math.log10(this.magnifyValue());
-            return floatPoint % 1 !== 0 ? 0 : floatPoint;
+            return floatPoint % 1 === 0 ? floatPoint : 0;
         }, ...(ngDevMode ? [{ debugName: "maxDecimalDigits" }] : /* istanbul ignore next */ []));
         this.lastCaretPos = 0;
         this.lastRawValue = '';
@@ -356,11 +562,11 @@ class UpNumberDirective extends UpInputDirective {
                 /^0+$/.test(cleanedDecimal))) {
             formatted = '0';
         }
-        else if (!cleanedDecimal) {
-            formatted = this.formatWithThousandSeparator(cleanedInteger || '0');
+        else if (cleanedDecimal) {
+            formatted = `${this.formatWithThousandSeparator(cleanedInteger || '0')},${cleanedDecimal}`;
         }
         else {
-            formatted = `${this.formatWithThousandSeparator(cleanedInteger || '0')},${cleanedDecimal}`;
+            formatted = this.formatWithThousandSeparator(cleanedInteger || '0');
         }
         input.value = formatted;
     }
@@ -370,7 +576,7 @@ class UpNumberDirective extends UpInputDirective {
         const postCaret = input.selectionStart ?? postRaw.length;
         const formatted = this.formatNumber(postRaw);
         input.value = formatted;
-        const numericValue = Number(formatted.replace(/\./g, '').replace(',', '.'));
+        const numericValue = Number(formatted.replaceAll('.', '').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);
@@ -463,26 +669,48 @@ class UpNumberDirective extends UpInputDirective {
         return formattedInt || '0';
     }
     formatWithThousandSeparator(value) {
-        return value.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+        if (!value) {
+            return value;
+        }
+        let firstNonZeroIndex = 0;
+        while (firstNonZeroIndex < value.length - 1 &&
+            value[firstNonZeroIndex] === '0') {
+            firstNonZeroIndex++;
+        }
+        const cleanedValue = firstNonZeroIndex > 0 ? value.slice(firstNonZeroIndex) : value;
+        if (cleanedValue.length <= 3) {
+            return cleanedValue;
+        }
+        const formatted = [];
+        const firstGroupLength = cleanedValue.length % 3 || 3;
+        for (let i = 0; i < cleanedValue.length; i++) {
+            if (i > 0 &&
+                (i - firstGroupLength) % 3 === 0) {
+                formatted.push('.');
+            }
+            formatted.push(cleanedValue[i]);
+        }
+        return formatted.join('');
     }
     sanitizeNumber(value) {
         const onlyDigitsComma = value.replace(/[^0-9,]/g, '');
-        const singleComma = onlyDigitsComma.replace(/,/g, (_, i) => onlyDigitsComma.indexOf(',') === i ? ',' : '');
+        const singleComma = onlyDigitsComma.replaceAll(',', (_, i) => onlyDigitsComma.indexOf(',') === i ? ',' : '');
         const [integerPart, decimalPart] = singleComma.split(',');
+        const maxDecimals = this.maxDecimalDigits();
         return {
             integer: integerPart || '',
-            decimal: decimalPart?.slice(0, this.maxDecimalDigits()),
+            decimal: decimalPart && maxDecimals > 0 ? decimalPart.slice(0, maxDecimals) : decimalPart,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", 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.2.11", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", 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.2.18", 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.2.11", ngImport: i0, type: UpNumberDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpNumberDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'upNumber',
@@ -598,8 +826,8 @@ class UpPasswordComponent extends UpFieldControlComponent {
         this.value.set(value);
         this._onChange(this.value());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", 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)
@@ -630,7 +858,7 @@ class UpPasswordComponent extends UpFieldControlComponent {
     />
   `, 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.2.11", ngImport: i0, type: UpPasswordComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpPasswordComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'up-password',
@@ -710,15 +938,15 @@ class UpRadioGroupComponent extends UpFieldControlComponent {
             this._onChange(val);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: UpRadioGroupComponent, isStandalone: true, selector: "up-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: UpRadioGroupComponent, isStandalone: true, selector: "up-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
             {
                 provide: UpFieldControl,
                 useExisting: forwardRef(() => UpRadioGroupComponent)
             },
         ], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpRadioGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpRadioGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'up-radio-group',
@@ -750,10 +978,10 @@ class UpRadioDirective {
         ev.stopPropagation();
         this.radioGroup.select(this.value());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpRadioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: UpRadioDirective, isStandalone: true, selector: "input[upRadio]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "radio" }, listeners: { "change": "toggle($event)" }, properties: { "checked": "checked()", "disabled": "disabled()", "class": "_computedClass()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpRadioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.18", type: UpRadioDirective, isStandalone: true, selector: "input[upRadio]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "radio" }, listeners: { "change": "toggle($event)" }, properties: { "checked": "checked()", "disabled": "disabled()", "class": "_computedClass()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpRadioDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpRadioDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[upRadio]',
@@ -817,8 +1045,8 @@ class UpSwitchComponent extends UpFieldControlComponent {
         this._onChange(this.checked());
         this._onTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", 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),
@@ -840,7 +1068,7 @@ class UpSwitchComponent extends UpFieldControlComponent {
     </span>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpSwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpSwitchComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'up-switch',
@@ -881,15 +1109,15 @@ class UpCheckboxDirective extends UpFieldControlComponent {
             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" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpCheckboxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpCheckboxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.18", 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.2.11", ngImport: i0, type: UpCheckboxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpCheckboxDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'upCheckbox',
@@ -914,12 +1142,12 @@ class UpOptionComponent {
         this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpOptionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: UpOptionComponent, isStandalone: true, selector: "up-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpOptionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: UpOptionComponent, isStandalone: true, selector: "up-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <ng-content />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpOptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'up-option',
@@ -1029,8 +1257,8 @@ class UpSelectComponent extends UpFieldControlComponent {
             this.changed.emit(this.value());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: UpSelectComponent, isStandalone: true, selector: "up-select", inputs: { label: { classPropertyName: "label", publicName: "label", 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 }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", 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 }, items: { classPropertyName: "items", publicName: "items", 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 relative" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: UpSelectComponent, isStandalone: true, selector: "up-select", inputs: { label: { classPropertyName: "label", publicName: "label", 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 }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", 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 }, items: { classPropertyName: "items", publicName: "items", 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 relative" }, providers: [
             {
                 provide: UpFieldControl,
                 useExisting: forwardRef(() => UpSelectComponent)
@@ -1058,7 +1286,7 @@ class UpSelectComponent extends UpFieldControlComponent {
     />
   `, 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{opacity:30%;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", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "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.2.11", ngImport: i0, type: UpSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'up-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'block relative',
@@ -1160,8 +1388,8 @@ class UpCountrySelectComponent extends UpFieldControlComponent {
             this.changed.emit(this.countries().find(c => c.code === value));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpCountrySelectComponent, deps: [{ token: i1$1.CountryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", 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 }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpCountrySelectComponent, deps: [{ token: i1$1.CountryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", 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 }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", 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),
@@ -1186,7 +1414,7 @@ class UpCountrySelectComponent extends UpFieldControlComponent {
     />
   `, isInline: true, dependencies: [{ kind: "component", type: UpSelectComponent, selector: "up-select", inputs: ["label", "placeholder", "bindLabel", "bindValue", "appendTo", "class", "loading", "multiple", "required", "disabled", "clearable", "addTag", "searchable", "virtualScroll", "items", "value"], outputs: ["valueChange", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpCountrySelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpCountrySelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'up-country-select',
@@ -1298,8 +1526,8 @@ class UpCurrencySelectComponent extends UpFieldControlComponent {
             this.changed.emit(this.currencies().find(c => c.code === value));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpCurrencySelectComponent, deps: [{ token: i1$1.CurrencyService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", 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 }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpCurrencySelectComponent, deps: [{ token: i1$1.CurrencyService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", 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 }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", 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)
@@ -1324,7 +1552,7 @@ class UpCurrencySelectComponent extends UpFieldControlComponent {
     />
   `, isInline: true, dependencies: [{ kind: "component", type: UpSelectComponent, selector: "up-select", inputs: ["label", "placeholder", "bindLabel", "bindValue", "appendTo", "class", "loading", "multiple", "required", "disabled", "clearable", "addTag", "searchable", "virtualScroll", "items", "value"], outputs: ["valueChange", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpCurrencySelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpCurrencySelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'up-currency-select',
@@ -1393,7 +1621,7 @@ class UpSearchableSelectComponent extends UpFieldControlComponent {
         }, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         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())));
+            return this.query()(k).pipe(map((result) => result.length ? result : this.initialItems()), catchError(() => of(this.initialItems())));
         }), tap(() => this.loading.set(false)));
         this._queryResults = toSignal(this.query$, { initialValue: [] });
         this.isTouched = false;
@@ -1431,14 +1659,14 @@ class UpSearchableSelectComponent extends UpFieldControlComponent {
                 this.value.set(null);
             }
             else {
-                this.value.set(!this.multiple() ? e[this.bindValue()] : e.map((o) => o[this.bindValue()]));
+                this.value.set(this.multiple() ? e.map((o) => o[this.bindValue()]) : e[this.bindValue()]);
             }
             this._onChange(this.value());
             this.changed.emit(this.value());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpSearchableSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", 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 }, 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 }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpSearchableSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", 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 }, 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 }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", 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)
@@ -1473,7 +1701,7 @@ class UpSearchableSelectComponent extends UpFieldControlComponent {
     />
   `, 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{opacity:30%;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", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "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.2.11", ngImport: i0, type: UpSearchableSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpSearchableSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'up-searchable-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'block relative',
@@ -1591,8 +1819,8 @@ class UpRateGroupCodeSelectComponent extends UpFieldControlComponent {
             this.changed.emit(value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpRateGroupCodeSelectComponent, deps: [{ token: i1$1.RateGroupCodeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: UpRateGroupCodeSelectComponent, isStandalone: true, selector: "up-rate-group-code-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpRateGroupCodeSelectComponent, deps: [{ token: i1$1.RateGroupCodeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: UpRateGroupCodeSelectComponent, isStandalone: true, selector: "up-rate-group-code-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", 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(() => UpRateGroupCodeSelectComponent),
@@ -1617,7 +1845,7 @@ class UpRateGroupCodeSelectComponent extends UpFieldControlComponent {
     />
   `, isInline: true, dependencies: [{ kind: "component", type: UpSearchableSelectComponent, selector: "up-searchable-select", inputs: ["query", "label", "placeholder", "initialItems", "bindLabel", "bindValue", "appendTo", "class", "addTag", "multiple", "required", "disabled", "clearable", "virtualScroll", "loading", "value"], outputs: ["loadingChange", "valueChange", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpRateGroupCodeSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpRateGroupCodeSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'up-rate-group-code-select',
@@ -1708,8 +1936,8 @@ class UpDatepickerComponent extends UpFieldControlComponent {
         this._onTouched();
         this._isTouched = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", 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),
@@ -1753,7 +1981,7 @@ class UpDatepickerComponent extends UpFieldControlComponent {
     </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.2.11", ngImport: i0, type: UpDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpDatepickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'up-datepicker',
@@ -1825,7 +2053,8 @@ class UpDateRangePickerComponent extends UpFieldControlComponent {
         this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         this.value = signal({ from: null, to: null }, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.formattedDate = computed(() => {
-            return this.value().from && this.value().to ? `${format(this.value().from, this.dateFormat())} - ${format(this.value().to, this.dateFormat())}` : '';
+            const value = this.value();
+            return value.from && value.to ? `${format(value.from, this.dateFormat())} - ${format(value.to, this.dateFormat())}` : '';
         }, ...(ngDevMode ? [{ debugName: "formattedDate" }] : /* istanbul ignore next */ []));
         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());
@@ -1838,7 +2067,7 @@ class UpDateRangePickerComponent extends UpFieldControlComponent {
         }
     }
     writeValue(value) {
-        this.value.set(value ?? null);
+        this.value.set(value ?? { from: null, to: null });
     }
     registerOnChange(fn) {
         this._onChange = fn;
@@ -1863,8 +2092,8 @@ class UpDateRangePickerComponent extends UpFieldControlComponent {
         this._onTouched();
         this._isTouched = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", 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)
@@ -1909,7 +2138,7 @@ class UpDateRangePickerComponent extends UpFieldControlComponent {
     </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.2.11", ngImport: i0, type: UpDateRangePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpDateRangePickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'up-date-range-picker',
@@ -1992,6 +2221,17 @@ function scrollImmediate(el, itemHeight, index) {
     }
     el.scrollTop = index * itemHeight;
 }
+function findFirstIndexAtLeast(values, target) {
+    return values.findIndex((value) => value >= target);
+}
+function findLastIndexAtMost(values, target) {
+    for (let i = values.length - 1; i >= 0; i--) {
+        if (values[i] <= target) {
+            return i;
+        }
+    }
+    return -1;
+}
 function findClosestIndex(values, target) {
     let closestIdx = 0;
     let minDiff = Math.abs(values[0] - target);
@@ -2019,10 +2259,10 @@ class OpacityPipe {
                 return 'opacity-15';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: OpacityPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: OpacityPipe, isStandalone: true, name: "opacity" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: OpacityPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: OpacityPipe, isStandalone: true, name: "opacity" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: OpacityPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: OpacityPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'opacity',
@@ -2053,8 +2293,8 @@ class UpTimeComponent {
         }, ...(ngDevMode ? [{ debugName: "minutes" }] : /* istanbul ignore next */ []));
         this.hourInvisible = computed(() => {
             return this.hours.map((hour) => {
-                return hour < (this.minTime()?.hour ?? 0) ||
-                    hour > (this.maxTime()?.hour ?? 23);
+                return (hour < (this.minTime()?.hour ?? 0) ||
+                    hour > (this.maxTime()?.hour ?? 23));
             });
         }, ...(ngDevMode ? [{ debugName: "hourInvisible" }] : /* istanbul ignore next */ []));
         this.minuteInvisible = computed(() => {
@@ -2110,133 +2350,69 @@ class UpTimeComponent {
         }, 150);
     }
     clampSelectionToValidRange() {
-        const hours = this.hours;
-        const minutes = this.minutes();
-        let hourIdx = this.selectedHourIndex();
-        const currentHour = hours[hourIdx] ?? 0;
-        if (currentHour < this.minHour()) {
-            hourIdx = hours.indexOf(this.minHour());
-            if (hourIdx === -1) {
-                for (let i = 0; i < hours.length; i++) {
-                    if (hours[i] >= this.minHour()) {
-                        hourIdx = i;
-                        break;
-                    }
-                }
-            }
-            this.selectedHourIndex.set(hourIdx);
-            this.scrollToHourImmediate(hourIdx);
-        }
-        else if (currentHour > this.maxHour()) {
-            hourIdx = hours.indexOf(this.maxHour());
-            if (hourIdx === -1) {
-                for (let i = hours.length - 1; i >= 0; i--) {
-                    if (hours[i] <= this.maxHour()) {
-                        hourIdx = i;
-                        break;
-                    }
-                }
-            }
-            this.selectedHourIndex.set(hourIdx);
-            this.scrollToHourImmediate(hourIdx);
-        }
-        const { min: minMinute, max: maxMinute } = this.validMinuteRange();
-        let minuteIdx = this.selectedMinuteIndex();
-        const currentMinute = minutes[minuteIdx] ?? 0;
-        if (currentMinute < minMinute) {
-            let newIdx = -1;
-            for (let i = 0; i < minutes.length; i++) {
-                if (minutes[i] >= minMinute) {
-                    newIdx = i;
-                    break;
-                }
-            }
-            if (newIdx !== -1) {
-                this.selectedMinuteIndex.set(newIdx);
-                this.scrollToMinuteImmediate(newIdx);
-            }
-        }
-        else if (currentMinute > maxMinute) {
-            let newIdx = -1;
-            for (let i = minutes.length - 1; i >= 0; i--) {
-                if (minutes[i] <= maxMinute) {
-                    newIdx = i;
-                    break;
-                }
-            }
-            if (newIdx !== -1) {
-                this.selectedMinuteIndex.set(newIdx);
-                this.scrollToMinuteImmediate(newIdx);
-            }
-        }
+        this.clampHourSelection();
+        this.clampMinuteSelection();
     }
     updateHourSelection() {
-        updateScrollSelection(this.hoursScroll().nativeElement, this.itemHeight, this.hours.length - 1, (v) => this.selectedHourIndex.set(v));
+        const hoursScrollEl = this.hoursScroll();
+        if (!hoursScrollEl) {
+            return;
+        }
+        updateScrollSelection(hoursScrollEl.nativeElement, this.itemHeight, this.hours.length - 1, (v) => this.selectedHourIndex.set(v));
     }
     updateMinuteSelection() {
-        updateScrollSelection(this.minutesScroll().nativeElement, this.itemHeight, this.minutes().length - 1, (v) => this.selectedMinuteIndex.set(v));
+        const minutesScrollEl = this.minutesScroll();
+        if (!minutesScrollEl) {
+            return;
+        }
+        updateScrollSelection(minutesScrollEl.nativeElement, this.itemHeight, this.minutes().length - 1, (v) => this.selectedMinuteIndex.set(v));
     }
     snapHours() {
-        snapScroll(this.hoursScroll().nativeElement, this.itemHeight, this.selectedHourIndex());
+        const hoursScrollEl = this.hoursScroll();
+        if (!hoursScrollEl) {
+            return;
+        }
+        snapScroll(hoursScrollEl.nativeElement, this.itemHeight, this.selectedHourIndex());
     }
     snapMinutes() {
-        snapScroll(this.minutesScroll().nativeElement, this.itemHeight, this.selectedMinuteIndex());
+        const minutesScrollEl = this.minutesScroll();
+        if (!minutesScrollEl) {
+            return;
+        }
+        snapScroll(minutesScrollEl.nativeElement, this.itemHeight, this.selectedMinuteIndex());
     }
     scrollToHour(index) {
         const clamped = Math.max(0, Math.min(23, index));
-        this.selectedHourIndex.set(clamped);
-        this.scrollToHourImmediate(clamped);
+        this.updateHourIndex(clamped);
         this.emitTime();
     }
     scrollToMinute(index) {
         const maxIdx = this.minutes().length - 1;
         const clamped = Math.max(0, Math.min(maxIdx, index));
-        this.selectedMinuteIndex.set(clamped);
-        this.scrollToMinuteImmediate(clamped);
+        this.updateMinuteIndex(clamped);
         this.emitTime();
     }
     scrollToHourImmediate(index) {
-        scrollImmediate(this.hoursScroll().nativeElement, this.itemHeight, index);
+        const hoursScrollEl = this.hoursScroll();
+        if (!hoursScrollEl) {
+            return;
+        }
+        scrollImmediate(hoursScrollEl.nativeElement, this.itemHeight, index);
     }
     scrollToMinuteImmediate(index) {
-        scrollImmediate(this.minutesScroll().nativeElement, this.itemHeight, index);
+        const minutesScrollEl = this.minutesScroll();
+        if (!minutesScrollEl) {
+            return;
+        }
+        scrollImmediate(minutesScrollEl.nativeElement, this.itemHeight, index);
     }
     clampTime(time) {
-        let { hour, minute } = time;
-        const min = this.minTime();
-        const max = this.maxTime();
-        if (min) {
-            if (hour < (min.hour ?? 0)) {
-                hour = min.hour;
-                minute = min.minute ?? 0;
-            }
-            else if (hour === (min.hour ?? 0) && min.minute !== undefined) {
-                minute = Math.max(min.minute, minute);
-            }
-        }
-        if (max) {
-            if (hour > (max.hour ?? 23)) {
-                hour = max.hour;
-                minute = max.minute ?? 59;
-            }
-            else if (hour === (max.hour ?? 23) && max.minute !== undefined) {
-                minute = Math.min(max.minute, minute);
-            }
-        }
-        const minuteValues = this.minutes();
-        if (!minuteValues.includes(minute)) {
-            let closest = minuteValues[0];
-            let minDiff = Math.abs(minuteValues[0] - minute);
-            for (let m of minuteValues) {
-                const diff = Math.abs(m - minute);
-                if (diff < minDiff) {
-                    closest = m;
-                    minDiff = diff;
-                }
-            }
-            minute = closest;
-        }
-        return { hour, minute };
+        const clampedMin = this.clampToMin(time);
+        const clampedMax = this.clampToMax(clampedMin);
+        return {
+            ...clampedMax,
+            minute: this.snapMinuteToInterval(clampedMax.minute),
+        };
     }
     emitTime() {
         let time = {
@@ -2244,197 +2420,116 @@ class UpTimeComponent {
             minute: this.minutes()[this.selectedMinuteIndex()],
         };
         time = this.clampTime(time);
-        if (!this.lastEmittedTime ||
-            this.lastEmittedTime.hour !== time.hour ||
-            this.lastEmittedTime.minute !== time.minute) {
+        if (this.lastEmittedTime?.hour !== time.hour ||
+            this.lastEmittedTime?.minute !== time.minute) {
             this.lastEmittedTime = time;
             this.timeChanged.emit(time);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: UpTimeComponent, isStandalone: true, selector: "up-time", inputs: { minuteInterval: { classPropertyName: "minuteInterval", publicName: "minuteInterval", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeChanged: "timeChanged" }, viewQueries: [{ propertyName: "hoursScroll", first: true, predicate: ["hoursScroll"], descendants: true, isSignal: true }, { propertyName: "minutesScroll", first: true, predicate: ["minutesScroll"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div
-      class="relative w-37 flex gap-2 rounded-xl border border-border bg-white p-3 shadow-lg"
-      [style.height.px]="containerHeight"
-    >
-      <!-- Hours scroll wheel -->
-      <div class="flex-1 relative overflow-hidden">
-        <div
-          class="
-            h-full overflow-y-scroll snap-y snap-mandatory overscroll-contain 
-            [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]
-          "
-          (scroll)="onHoursScroll()"
-
-          #hoursScroll
-        >
-          <!-- Top padding -->
-          <div [style.height.px]="padding"></div>
-
-          <!-- Hour items -->
-          @for (hour of hours; track $index) {
-            <div
-              [class.invisible]="hourInvisible()[$index]"
-              [class]="
-                'h-10 flex items-center justify-center cursor-pointer transition-opacity duration-200 snap-center ' +
-                ($index | opacity: selectedHourIndex())
-              "
-              (click)="scrollToHour($index)"
-            >
-              <span class="text-xl font-medium">
-                {{ hour | number:'2.0-0' }}
-              </span>
-            </div>
-          }
-
-          <!-- Bottom padding -->
-          <div [style.height.px]="padding"></div>
-        </div>
-      </div>
-
-      <!-- Minutes scroll wheel -->
-      <div class="flex-1 relative overflow-hidden">
-        <div
-          #minutesScroll
-          class="
-            h-full overflow-y-scroll snap-y snap-mandatory overscroll-contain
-            [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]
-          "
-          (scroll)="onMinutesScroll()"
-        >
-          <!-- Top padding -->
-          <div [style.height.px]="padding"></div>
-
-          <!-- Minute items -->
-          @for (minute of minutes(); track $index) {
-            <div
-              [class.invisible]="minuteInvisible()[$index]"
-              [class]="
-                'h-10 flex items-center justify-center cursor-pointer transition-opacity duration-200 snap-center ' +
-                ($index | opacity: selectedMinuteIndex())
-              "
-              (click)="scrollToMinute($index)"
-            >
-              <span class="text-xl font-medium">
-                {{ minute | number:'2.0-0' }}
-              </span>
-            </div>
-          }
-
-          <!-- Bottom padding -->
-          <div [style.height.px]="padding"></div>
-        </div>
-      </div>
-
-      <!-- Center highlight -->
-      <div
-        class="absolute inset-x-0 left-3 right-3 pointer-events-none flex items-center justify-center"
-        [style.top.px]="highlightTop"
-        [style.height.px]="itemHeight"
-      >
-        <div class="flex items-center justify-center font-medium w-full h-full bg-accent/30 border border-primary rounded-md shadow-inner">
-          :
-        </div>
-      </div>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: OpacityPipe, name: "opacity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    updateHourIndex(index) {
+        this.selectedHourIndex.set(index);
+        this.scrollToHourImmediate(index);
+    }
+    updateMinuteIndex(index) {
+        this.selectedMinuteIndex.set(index);
+        this.scrollToMinuteImmediate(index);
+    }
+    findHourIndex(target) {
+        const exact = this.hours.indexOf(target);
+        if (exact !== -1) {
+            return exact;
+        }
+        return findFirstIndexAtLeast(this.hours, target);
+    }
+    snapMinuteToInterval(minute) {
+        const minuteValues = this.minutes();
+        if (minuteValues.includes(minute)) {
+            return minute;
+        }
+        return minuteValues[findClosestIndex(minuteValues, minute)];
+    }
+    clampToMin(time) {
+        const min = this.minTime();
+        if (!min) {
+            return time;
+        }
+        let { hour, minute } = time;
+        if (hour < (min.hour ?? 0)) {
+            return {
+                hour: min.hour,
+                minute: min.minute ?? 0,
+            };
+        }
+        if (hour === (min.hour ?? 0) && min.minute !== undefined) {
+            minute = Math.max(min.minute, minute);
+        }
+        return {
+            hour,
+            minute,
+        };
+    }
+    clampToMax(time) {
+        const max = this.maxTime();
+        if (!max) {
+            return time;
+        }
+        let { hour, minute } = time;
+        if (hour > (max.hour ?? 23)) {
+            return {
+                hour: max.hour,
+                minute: max.minute ?? 59,
+            };
+        }
+        if (hour === (max.hour ?? 23) && max.minute !== undefined) {
+            minute = Math.min(max.minute, minute);
+        }
+        return {
+            hour,
+            minute,
+        };
+    }
+    clampHourSelection() {
+        const hours = this.hours;
+        let hourIdx = this.selectedHourIndex();
+        const currentHour = hours[hourIdx] ?? 0;
+        if (currentHour < this.minHour()) {
+            hourIdx = this.findHourIndex(this.minHour());
+            this.updateHourIndex(hourIdx);
+            return;
+        }
+        if (currentHour > this.maxHour()) {
+            hourIdx = this.findHourIndex(this.maxHour());
+            this.updateHourIndex(hourIdx);
+        }
+    }
+    clampMinuteSelection() {
+        const minutes = this.minutes();
+        const { min: minMinute, max: maxMinute } = this.validMinuteRange();
+        const minuteIdx = this.selectedMinuteIndex();
+        const currentMinute = minutes[minuteIdx] ?? 0;
+        if (currentMinute < minMinute) {
+            const newIdx = findFirstIndexAtLeast(minutes, minMinute);
+            if (newIdx !== -1) {
+                this.updateMinuteIndex(newIdx);
+            }
+            return;
+        }
+        if (currentMinute > maxMinute) {
+            const newIdx = findLastIndexAtMost(minutes, maxMinute);
+            if (newIdx !== -1) {
+                this.updateMinuteIndex(newIdx);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: UpTimeComponent, isStandalone: true, selector: "up-time", inputs: { minuteInterval: { classPropertyName: "minuteInterval", publicName: "minuteInterval", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeChanged: "timeChanged" }, viewQueries: [{ propertyName: "hoursScroll", first: true, predicate: ["hoursScroll"], descendants: true, isSignal: true }, { propertyName: "minutesScroll", first: true, predicate: ["minutesScroll"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    class=\"relative w-37 flex gap-2 rounded-xl border border-border bg-white p-3 shadow-lg\"\n    [style.height.px]=\"containerHeight\"\n>\n    <!-- Hours scroll wheel -->\n    <div class=\"flex-1 relative overflow-hidden\">\n        <div\n            class=\"h-full overflow-y-scroll snap-y snap-mandatory overscroll-contain [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]\"\n            (scroll)=\"onHoursScroll()\"\n            #hoursScroll\n        >\n            <div [style.height.px]=\"padding\"></div>\n\n            @for (hour of hours; track $index) {\n                <div\n                    [class.invisible]=\"hourInvisible()[$index]\"\n                    [class]=\"\n                        'h-10 flex items-center justify-center cursor-pointer transition-opacity duration-200 snap-center ' +\n                        ($index | opacity: selectedHourIndex())\n                    \"\n                    \n                    (click)=\"scrollToHour($index)\"\n                    (keydown.enter)=\"scrollToHour($index)\"\n                >\n                    <span class=\"text-xl font-medium select-none\">\n                        {{ hour | number: \"2.0-0\" }}\n                    </span>\n                </div>\n            }\n\n            <div [style.height.px]=\"padding\"></div>\n        </div>\n    </div>\n\n    <!-- Minutes scroll wheel -->\n    <div class=\"flex-1 relative overflow-hidden\">\n        <div\n            #minutesScroll\n            class=\"h-full overflow-y-scroll snap-y snap-mandatory overscroll-contain [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]\"\n            (scroll)=\"onMinutesScroll()\"\n        >\n            <div [style.height.px]=\"padding\"></div>\n\n            @for (minute of minutes(); track $index) {\n                <div\n                    [class.invisible]=\"minuteInvisible()[$index]\"\n                    [class]=\"\n                        'h-10 flex items-center justify-center cursor-pointer transition-opacity duration-200 snap-center ' +\n                        ($index | opacity: selectedMinuteIndex())\n                    \"\n                    \n                    (click)=\"scrollToMinute($index)\"\n                    (keydown.enter)=\"scrollToMinute($index)\"\n                >\n                    <span class=\"text-xl font-medium select-none\">\n                        {{ minute | number: \"2.0-0\" }}\n                    </span>\n                </div>\n            }\n\n            <div [style.height.px]=\"padding\"></div>\n        </div>\n    </div>\n\n    <!-- Center highlight -->\n    <div\n        class=\"absolute inset-x-0 left-3 right-3 pointer-events-none flex items-center justify-center\"\n        [style.top.px]=\"highlightTop\"\n        [style.height.px]=\"itemHeight\"\n    >\n        <div class=\"flex items-center justify-center font-medium w-full h-full bg-accent/30 border border-primary rounded-md shadow-inner\">\n            :\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: OpacityPipe, name: "opacity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpTimeComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'up-time',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
+            args: [{ selector: 'up-time', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         DecimalPipe,
                         OpacityPipe,
-                    ],
-                    template: `
-    <div
-      class="relative w-37 flex gap-2 rounded-xl border border-border bg-white p-3 shadow-lg"
-      [style.height.px]="containerHeight"
-    >
-      <!-- Hours scroll wheel -->
-      <div class="flex-1 relative overflow-hidden">
-        <div
-          class="
-            h-full overflow-y-scroll snap-y snap-mandatory overscroll-contain 
-            [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]
-          "
-          (scroll)="onHoursScroll()"
-
-          #hoursScroll
-        >
-          <!-- Top padding -->
-          <div [style.height.px]="padding"></div>
-
-          <!-- Hour items -->
-          @for (hour of hours; track $index) {
-            <div
-              [class.invisible]="hourInvisible()[$index]"
-              [class]="
-                'h-10 flex items-center justify-center cursor-pointer transition-opacity duration-200 snap-center ' +
-                ($index | opacity: selectedHourIndex())
-              "
-              (click)="scrollToHour($index)"
-            >
-              <span class="text-xl font-medium">
-                {{ hour | number:'2.0-0' }}
-              </span>
-            </div>
-          }
-
-          <!-- Bottom padding -->
-          <div [style.height.px]="padding"></div>
-        </div>
-      </div>
-
-      <!-- Minutes scroll wheel -->
-      <div class="flex-1 relative overflow-hidden">
-        <div
-          #minutesScroll
-          class="
-            h-full overflow-y-scroll snap-y snap-mandatory overscroll-contain
-            [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]
-          "
-          (scroll)="onMinutesScroll()"
-        >
-          <!-- Top padding -->
-          <div [style.height.px]="padding"></div>
-
-          <!-- Minute items -->
-          @for (minute of minutes(); track $index) {
-            <div
-              [class.invisible]="minuteInvisible()[$index]"
-              [class]="
-                'h-10 flex items-center justify-center cursor-pointer transition-opacity duration-200 snap-center ' +
-                ($index | opacity: selectedMinuteIndex())
-              "
-              (click)="scrollToMinute($index)"
-            >
-              <span class="text-xl font-medium">
-                {{ minute | number:'2.0-0' }}
-              </span>
-            </div>
-          }
-
-          <!-- Bottom padding -->
-          <div [style.height.px]="padding"></div>
-        </div>
-      </div>
-
-      <!-- Center highlight -->
-      <div
-        class="absolute inset-x-0 left-3 right-3 pointer-events-none flex items-center justify-center"
-        [style.top.px]="highlightTop"
-        [style.height.px]="itemHeight"
-      >
-        <div class="flex items-center justify-center font-medium w-full h-full bg-accent/30 border border-primary rounded-md shadow-inner">
-          :
-        </div>
-      </div>
-    </div>
-  `,
-                }]
+                    ], template: "<div\n    class=\"relative w-37 flex gap-2 rounded-xl border border-border bg-white p-3 shadow-lg\"\n    [style.height.px]=\"containerHeight\"\n>\n    <!-- Hours scroll wheel -->\n    <div class=\"flex-1 relative overflow-hidden\">\n        <div\n            class=\"h-full overflow-y-scroll snap-y snap-mandatory overscroll-contain [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]\"\n            (scroll)=\"onHoursScroll()\"\n            #hoursScroll\n        >\n            <div [style.height.px]=\"padding\"></div>\n\n            @for (hour of hours; track $index) {\n                <div\n                    [class.invisible]=\"hourInvisible()[$index]\"\n                    [class]=\"\n                        'h-10 flex items-center justify-center cursor-pointer transition-opacity duration-200 snap-center ' +\n                        ($index | opacity: selectedHourIndex())\n                    \"\n                    \n                    (click)=\"scrollToHour($index)\"\n                    (keydown.enter)=\"scrollToHour($index)\"\n                >\n                    <span class=\"text-xl font-medium select-none\">\n                        {{ hour | number: \"2.0-0\" }}\n                    </span>\n                </div>\n            }\n\n            <div [style.height.px]=\"padding\"></div>\n        </div>\n    </div>\n\n    <!-- Minutes scroll wheel -->\n    <div class=\"flex-1 relative overflow-hidden\">\n        <div\n            #minutesScroll\n            class=\"h-full overflow-y-scroll snap-y snap-mandatory overscroll-contain [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]\"\n            (scroll)=\"onMinutesScroll()\"\n        >\n            <div [style.height.px]=\"padding\"></div>\n\n            @for (minute of minutes(); track $index) {\n                <div\n                    [class.invisible]=\"minuteInvisible()[$index]\"\n                    [class]=\"\n                        'h-10 flex items-center justify-center cursor-pointer transition-opacity duration-200 snap-center ' +\n                        ($index | opacity: selectedMinuteIndex())\n                    \"\n                    \n                    (click)=\"scrollToMinute($index)\"\n                    (keydown.enter)=\"scrollToMinute($index)\"\n                >\n                    <span class=\"text-xl font-medium select-none\">\n                        {{ minute | number: \"2.0-0\" }}\n                    </span>\n                </div>\n            }\n\n            <div [style.height.px]=\"padding\"></div>\n        </div>\n    </div>\n\n    <!-- Center highlight -->\n    <div\n        class=\"absolute inset-x-0 left-3 right-3 pointer-events-none flex items-center justify-center\"\n        [style.top.px]=\"highlightTop\"\n        [style.height.px]=\"itemHeight\"\n    >\n        <div class=\"flex items-center justify-center font-medium w-full h-full bg-accent/30 border border-primary rounded-md shadow-inner\">\n            :\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { hoursScroll: [{ type: i0.ViewChild, args: ['hoursScroll', { isSignal: true }] }], minutesScroll: [{ type: i0.ViewChild, args: ['minutesScroll', { isSignal: true }] }], minuteInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteInterval", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], timeChanged: [{ type: i0.Output, args: ["timeChanged"] }] } });
 
 class UpTimepickerComponent extends UpFieldControlComponent {
@@ -2503,8 +2598,8 @@ class UpTimepickerComponent extends UpFieldControlComponent {
         this._onTouched();
         this._isTouched = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: UpTimepickerComponent, isStandalone: true, selector: "up-timepicker", inputs: { minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, initialHour: { classPropertyName: "initialHour", publicName: "initialHour", isSignal: true, isRequired: false, transformFunction: null }, initialMinute: { classPropertyName: "initialMinute", publicName: "initialMinute", isSignal: true, isRequired: false, transformFunction: null }, minuteInterval: { classPropertyName: "minuteInterval", publicName: "minuteInterval", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: UpTimepickerComponent, isStandalone: true, selector: "up-timepicker", inputs: { minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, initialHour: { classPropertyName: "initialHour", publicName: "initialHour", isSignal: true, isRequired: false, transformFunction: null }, initialMinute: { classPropertyName: "initialMinute", publicName: "initialMinute", isSignal: true, isRequired: false, transformFunction: null }, minuteInterval: { classPropertyName: "minuteInterval", publicName: "minuteInterval", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: UpFieldControl,
                 useExisting: forwardRef(() => UpTimepickerComponent),
@@ -2548,7 +2643,7 @@ class UpTimepickerComponent extends UpFieldControlComponent {
     </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: "directive", type: UpPopoverTriggerDirective, selector: "[upPopoverTrigger]", exportAs: ["upPopoverTrigger"] }, { kind: "directive", type: UpPopoverContentRefDirective, selector: "[upPopoverContentRef]", exportAs: ["upPopoverContentRef"] }, { kind: "component", type: UpTimeComponent, selector: "up-time", inputs: ["minuteInterval", "minTime", "maxTime", "value"], outputs: ["timeChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpTimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpTimepickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'up-timepicker',
@@ -2626,8 +2721,8 @@ class UpFormFieldComponent {
             this.control().setControlName(this.label());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 }, hideAsterisk: { classPropertyName: "hideAsterisk", publicName: "hideAsterisk", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, queries: [{ propertyName: "control", first: true, predicate: UpFieldControl, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", 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 }, hideAsterisk: { classPropertyName: "hideAsterisk", publicName: "hideAsterisk", 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
@@ -2666,7 +2761,7 @@ class UpFormFieldComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpFormFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'up-form-field',
@@ -2762,7 +2857,7 @@ class UpImagePickerComponent extends UpFieldControlComponent {
     async selectPhoto(files) {
         if (files?.target?.files)
             files = files.target.files;
-        if (files && files[0]) {
+        if (files?.[0]) {
             const compressedFile = await compressImage({
                 quality: 0.8,
                 file: files[0],
@@ -2776,8 +2871,8 @@ class UpImagePickerComponent extends UpFieldControlComponent {
             this._onChange(compressedFile);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpImagePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: UpImagePickerComponent, isStandalone: true, selector: "up-image-picker", inputs: { ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imgSrc: "srcChange", changed: "changed" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpImagePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: UpImagePickerComponent, isStandalone: true, selector: "up-image-picker", inputs: { ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imgSrc: "srcChange", changed: "changed" }, providers: [
             {
                 provide: UpFieldControl,
                 useExisting: forwardRef(() => UpImagePickerComponent)
@@ -2786,9 +2881,9 @@ class UpImagePickerComponent extends UpFieldControlComponent {
                 matUpload,
                 matDelete
             })
-        ], viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div \n    upFileDragNDrop \n    draggedClass=\"border-dashed border-2 border-foreground/20\"\n    [class]=\"_computedClass()\"\n    [style.aspect-ratio]=\"ratio()\"\n    (fileDropped)=\"selectPhoto($event)\"\n>\n    @if (imgSrc()) {\n        <img \n            class=\"overflow-hidden object-cover size-full\"\n            [alt]=\"fileName\" \n            [src]=\"imgSrc()\" \n            [style.aspect-ratio]=\"ratio()\"\n        />\n    }\n   \n    <div \n        class=\"absolute inset-0 p-2 flex flex-col items-center justify-center text-muted-foreground cursor-pointer opacity-80 group-hover:opacity-100 transition\"\n        [style.aspect-ratio]=\"ratio()\"\n    >\n        @if (imgSrc() === '') {\n            <div \n                class=\"flex flex-col items-center\"\n                (click)=\"file.click()\"\n            >\n                <ng-icon\n                    size=\"24px\"\n                    name=\"matUpload\"\n                />\n                <span>Choose Image or Drag here.</span>\n            </div>\n        }\n        @else {\n            <div \n                class=\"absolute flex items-center ustify-center opacity-0 group-hover:opacity-100 transition text-destructive\"\n                (click)=\"clear($event)\"\n            >\n                <ng-icon\n                    size=\"24px\"\n                    name=\"matDelete\"\n                />\n            </div>\n        }\n    </div>\n\n    <input \n        type=\"file\" \n        hidden \n        accept=\"image/png, image/jpeg, image/jpg\" \n        (change)=\"selectPhoto($event)\" \n        #file\n    />\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: UpFileDragNDropDirective, selector: "[upFileDragNDrop]", inputs: ["draggedClass"], outputs: ["fileDropped"], exportAs: ["upFileDragNDrop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div \n    upFileDragNDrop \n    draggedClass=\"border-dashed border-2 border-foreground/20\"\n    [class]=\"_computedClass()\"\n    [style.aspect-ratio]=\"ratio()\"\n    (fileDropped)=\"selectPhoto($event)\"\n>\n    @if (imgSrc()) {\n        <img \n            class=\"overflow-hidden object-cover size-full\"\n            [alt]=\"fileName\" \n            [src]=\"imgSrc()\" \n            [style.aspect-ratio]=\"ratio()\"\n        />\n    }\n   \n    <div \n        class=\"absolute inset-0 p-2 flex flex-col items-center justify-center text-muted-foreground cursor-pointer opacity-80 group-hover:opacity-100 transition\"\n        [style.aspect-ratio]=\"ratio()\"\n    >\n        @if (imgSrc() === '') {\n            <div \n                class=\"flex flex-col items-center\"\n                (click)=\"file.click()\"\n                (keydown.enter)=\"file.click()\"\n            >\n                <ng-icon\n                    size=\"24px\"\n                    name=\"matUpload\"\n                />\n                <span>Choose Image or Drag here.</span>\n            </div>\n        }\n        @else {\n            <div \n                class=\"absolute flex items-center ustify-center opacity-0 group-hover:opacity-100 transition text-destructive\"\n                (click)=\"clear($event)\"\n                (keydown.enter)=\"clear($event)\"\n            >\n                <ng-icon\n                    size=\"24px\"\n                    name=\"matDelete\"\n                />\n            </div>\n        }\n    </div>\n\n    <input \n        type=\"file\" \n        hidden \n        accept=\"image/png, image/jpeg, image/jpg\" \n        (change)=\"selectPhoto($event)\" \n        #file\n    />\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: UpFileDragNDropDirective, selector: "[upFileDragNDrop]", inputs: ["draggedClass"], outputs: ["fileDropped"], exportAs: ["upFileDragNDrop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: UpImagePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: UpImagePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'up-image-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -2802,12 +2897,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     ], imports: [
                         NgIcon,
                         UpFileDragNDropDirective
-                    ], template: "<div \n    upFileDragNDrop \n    draggedClass=\"border-dashed border-2 border-foreground/20\"\n    [class]=\"_computedClass()\"\n    [style.aspect-ratio]=\"ratio()\"\n    (fileDropped)=\"selectPhoto($event)\"\n>\n    @if (imgSrc()) {\n        <img \n            class=\"overflow-hidden object-cover size-full\"\n            [alt]=\"fileName\" \n            [src]=\"imgSrc()\" \n            [style.aspect-ratio]=\"ratio()\"\n        />\n    }\n   \n    <div \n        class=\"absolute inset-0 p-2 flex flex-col items-center justify-center text-muted-foreground cursor-pointer opacity-80 group-hover:opacity-100 transition\"\n        [style.aspect-ratio]=\"ratio()\"\n    >\n        @if (imgSrc() === '') {\n            <div \n                class=\"flex flex-col items-center\"\n                (click)=\"file.click()\"\n            >\n                <ng-icon\n                    size=\"24px\"\n                    name=\"matUpload\"\n                />\n                <span>Choose Image or Drag here.</span>\n            </div>\n        }\n        @else {\n            <div \n                class=\"absolute flex items-center ustify-center opacity-0 group-hover:opacity-100 transition text-destructive\"\n                (click)=\"clear($event)\"\n            >\n                <ng-icon\n                    size=\"24px\"\n                    name=\"matDelete\"\n                />\n            </div>\n        }\n    </div>\n\n    <input \n        type=\"file\" \n        hidden \n        accept=\"image/png, image/jpeg, image/jpg\" \n        (change)=\"selectPhoto($event)\" \n        #file\n    />\n</div>\n" }]
+                    ], template: "<div \n    upFileDragNDrop \n    draggedClass=\"border-dashed border-2 border-foreground/20\"\n    [class]=\"_computedClass()\"\n    [style.aspect-ratio]=\"ratio()\"\n    (fileDropped)=\"selectPhoto($event)\"\n>\n    @if (imgSrc()) {\n        <img \n            class=\"overflow-hidden object-cover size-full\"\n            [alt]=\"fileName\" \n            [src]=\"imgSrc()\" \n            [style.aspect-ratio]=\"ratio()\"\n        />\n    }\n   \n    <div \n        class=\"absolute inset-0 p-2 flex flex-col items-center justify-center text-muted-foreground cursor-pointer opacity-80 group-hover:opacity-100 transition\"\n        [style.aspect-ratio]=\"ratio()\"\n    >\n        @if (imgSrc() === '') {\n            <div \n                class=\"flex flex-col items-center\"\n                (click)=\"file.click()\"\n                (keydown.enter)=\"file.click()\"\n            >\n                <ng-icon\n                    size=\"24px\"\n                    name=\"matUpload\"\n                />\n                <span>Choose Image or Drag here.</span>\n            </div>\n        }\n        @else {\n            <div \n                class=\"absolute flex items-center ustify-center opacity-0 group-hover:opacity-100 transition text-destructive\"\n                (click)=\"clear($event)\"\n                (keydown.enter)=\"clear($event)\"\n            >\n                <ng-icon\n                    size=\"24px\"\n                    name=\"matDelete\"\n                />\n            </div>\n        }\n    </div>\n\n    <input \n        type=\"file\" \n        hidden \n        accept=\"image/png, image/jpeg, image/jpg\" \n        (change)=\"selectPhoto($event)\" \n        #file\n    />\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], imgSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }, { type: i0.Output, args: ["srcChange"] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], file: [{ type: i0.ViewChild, args: ['file', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { UpCheckboxDirective, UpCountrySelectComponent, UpCurrencySelectComponent, UpDateRangePickerComponent, UpDatepickerComponent, UpFieldControl, UpFieldControlComponent, UpFormFieldComponent, UpImagePickerComponent, UpInputDirective, UpNumberDirective, UpOptionComponent, UpPasswordComponent, UpRadioDirective, UpRadioGroupComponent, UpRateGroupCodeSelectComponent, UpSearchableSelectComponent, UpSelectComponent, UpSwitchComponent, UpTimeComponent, UpTimepickerComponent, isEqualValidator, isNotEqualValidator, setValidator, toggleFormControls, validRangeValidator };
+export { UpCheckboxDirective, UpCountrySelectComponent, UpCurrencySelectComponent, UpDateRangePickerComponent, UpDatepickerComponent, UpFieldControl, UpFieldControlComponent, UpFormFieldComponent, UpImagePickerComponent, UpInputDirective, UpNumberDirective, UpOptionComponent, UpPasswordComponent, UpPinComponent, UpRadioDirective, UpRadioGroupComponent, UpRateGroupCodeSelectComponent, UpSearchableSelectComponent, UpSelectComponent, UpSwitchComponent, UpTimeComponent, UpTimepickerComponent, isEqualValidator, isNotEqualValidator, setValidator, toggleFormControls, validRangeValidator };
 //# sourceMappingURL=unipin-angular-applet-forms.mjs.map