@unipin/angular-applet 21.1.3 → 21.3.1

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

@@ -1,11 +1,11 @@
 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, effect } 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 * 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 } from '@ng-icons/material-icons/round';
+import { matVisibilityOffRound, matVisibilityRound, matCalendarMonthRound, matWatchLaterRound } from '@ng-icons/material-icons/round';
 import { NgSelectComponent } from '@ng-select/ng-select';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Subject, distinctUntilChanged, debounceTime, tap, switchMap, map, catchError, of } from 'rxjs';
@@ -13,15 +13,211 @@ import { format } from 'date-fns';
 import { UpButtonDirective } from '@unipin/angular-applet/buttons';
 import { UpCalendarComponent } from '@unipin/angular-applet/calendar';
 import { UpPopoverComponent, UpPopoverTriggerDirective, UpPopoverContentRefDirective } from '@unipin/angular-applet/popover';
+import { DecimalPipe } from '@angular/common';
 import { matDelete, matUpload } from '@ng-icons/material-icons/baseline';
 
+function setValidator(form, keys, validators) {
+    if (!keys.length ||
+        keys.length === 1) {
+        throw new Error('Use normal action for single keys and keys cannot be empty.');
+    }
+    keys.forEach((key) => {
+        const control = form.get(key);
+        if (control) {
+            control.setValidators(validators);
+            control.updateValueAndValidity();
+        }
+    });
+}
+
+function toggleFormControls(form, keys, mode) {
+    if (!keys.length ||
+        keys.length === 1) {
+        throw new Error('Use normal action for single keys and keys cannot be empty.');
+    }
+    keys.forEach((key) => form.get(key)?.[mode]());
+}
+
+function prettifyLabel(name) {
+    return name
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .replace(/_/g, ' ')
+        .replace(/\b\w/g, char => char.toUpperCase());
+}
+function convertToDate(value) {
+    if (value instanceof Date)
+        return value;
+    if (typeof value === 'string' &&
+        !isNaN(Date.parse(value))) {
+        return new Date(value);
+    }
+    return null;
+}
+/**
+ * Range validator for number and date values.
+ * @param {string} fromKey - The "from" control name
+ * @param {string} toKey - The "to" control name
+ * @returns {ValidatorFn} Throw error message when fromKey is greater than toKey
+ *
+ * Usage:
+ * this.form = new FormGroup({
+ *   agingFrom: new FormControl(),
+ *   agingTo: new FormControl(),
+ * }, { validators: rangeValidator('agingFrom', 'agingTo') });
+ */
+function validRangeValidator(fromKey, toKey) {
+    return (group) => {
+        if (!group) {
+            return null;
+        }
+        const toControl = group.get(toKey);
+        const fromControl = group.get(fromKey);
+        if (!fromControl ||
+            !toControl) {
+            return null;
+        }
+        const toValue = toControl.value;
+        const fromValue = fromControl.value;
+        if (fromValue === null ||
+            toValue === null ||
+            fromValue === '' ||
+            toValue === '') {
+            return null;
+        }
+        let isInvalid = false;
+        const toDate = convertToDate(toValue);
+        const fromDate = convertToDate(fromValue);
+        if (fromDate && toDate) {
+            isInvalid = toDate <= fromDate;
+        }
+        else if (!isNaN(fromValue) &&
+            !isNaN(toValue)) {
+            isInvalid = Number(toValue) <= Number(fromValue);
+        }
+        return !isInvalid ? null : {
+            rangeInvalid: {
+                to: toKey,
+                from: fromKey,
+                message: `${prettifyLabel(toKey)} must be greater than ${prettifyLabel(fromKey)}`
+            }
+        };
+    };
+}
+
+/**
+ * Validator that requires all specified form controls to have the same value.
+ *
+ * @param {string[]} controlNames - The names of the controls that must match
+ * @param {string} [message] - Optional custom error message
+ * @returns {ValidatorFn} A validator function producing an `isEqual` error if values do not match
+ *
+ * @example
+ * this.form = new FormGroup({
+ *   password: new FormControl(''),
+ *   confirmPassword: new FormControl(''),
+ * }, { validators: isEqualValidator(['password', 'confirmPassword']) });
+ */
+function isEqualValidator(controlNames, message) {
+    return (group) => {
+        if (!group ||
+            controlNames.length < 2) {
+            return null;
+        }
+        let isEmpty = false;
+        const values = controlNames.reduce((acc, name) => {
+            const control = group.get(name);
+            if (!control) {
+                return acc;
+            }
+            if (!control.value) {
+                isEmpty = true;
+                return acc;
+            }
+            acc.push(control.value);
+            return acc;
+        }, []);
+        if (isEmpty) {
+            return null;
+        }
+        if (!values.every(v => v === values[0])) {
+            const labels = controlNames.map((name) => {
+                return name
+                    .replace(/([a-z])([A-Z])/g, '$1 $2')
+                    .replace(/_/g, ' ')
+                    .replace(/\b\w/g, char => char.toUpperCase());
+            });
+            return {
+                isEqual: {
+                    fields: controlNames,
+                    message: message || `${labels.join(', ')} should have the same value`
+                }
+            };
+        }
+        return null;
+    };
+}
+
+/**
+ * Validator that requires all specified form controls to have different values.
+ *
+ * @param {string[]} controlNames - The names of the controls that must all be unique
+ * @param {string} [message] - Optional custom error message
+ * @returns {ValidatorFn} A validator function producing an `isNotEqual` error if duplicate values exist
+ *
+ * @example
+ * this.form = new FormGroup({
+ *   primaryEmail: new FormControl(''),
+ *   secondaryEmail: new FormControl(''),
+ *   backupEmail: new FormControl(''),
+ * }, { validators: isNotEqualValidator(['primaryEmail', 'secondaryEmail', 'backupEmail']) });
+ */
+function isNotEqualValidator(controlNames, message) {
+    return (group) => {
+        if (!group ||
+            controlNames.length < 2) {
+            return null;
+        }
+        let isEmpty = false;
+        const values = controlNames.reduce((acc, name) => {
+            const control = group.get(name);
+            if (!control) {
+                return acc;
+            }
+            if (!control.value) {
+                isEmpty = true;
+                return acc;
+            }
+            acc.push(control.value);
+            return acc;
+        }, []);
+        if (isEmpty) {
+            return null;
+        }
+        if (new Set(values).size !== values.length) {
+            const labels = controlNames.map((name) => {
+                return name
+                    .replace(/([a-z])([A-Z])/g, '$1 $2')
+                    .replace(/_/g, ' ')
+                    .replace(/\b\w/g, char => char.toUpperCase());
+            });
+            return {
+                isNotEqual: {
+                    fields: controlNames,
+                    message: message || `${labels.join(', ')} should have different values`
+                }
+            };
+        }
+        return null;
+    };
+}
+
 const errMessage = {
     email: (label) => `${label} is not a valid email`,
     required: (label) => `${label} is required`,
     minlength: (label, length) => `${label} must be at least ${length} characters`,
     maxlength: (label, length) => `${label} must not exceed ${length} characters`,
     max: (label, max) => `${label} value must be lower than ${max}`,
-    min: (label, min) => `${label} value must be larger than ${min}`,
+    min: (label, min) => `${label} value must be larger than ${min}`
 };
 const extraParamKey = {
     max: 'max',
@@ -58,15 +254,23 @@ class UpFieldControlComponent {
             return;
         }
         const errKey = Object.keys(control.errors)[0];
-        const newState = errMessage[errKey](this._controlName ?? 'Field', control.errors[errKey][extraParamKey[errKey]]);
+        const errorData = control.errors[errKey];
+        if (errorData?.message) {
+            const newState = errorData.message;
+            if (newState !== this.error()) {
+                this.error.set(newState);
+            }
+            return;
+        }
+        const newState = errMessage[errKey](this._controlName ?? 'Field', errorData[extraParamKey[errKey]]);
         if (newState !== this.error()) {
             this.error.set(newState);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpFieldControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpFieldControlComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpFieldControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpFieldControlComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpFieldControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpFieldControlComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -75,18 +279,18 @@ class UpInputDirective extends UpFieldControlComponent {
         super(...arguments);
         this.inlineClass = input('', { ...(ngDevMode ? { debugName: "inlineClass" } : {}), alias: 'class' });
         this._computedClass = computed(() => {
-            return up('peer file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium file:h-7 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-none', this.error() ? 'ring-destructive/20 dark:ring-destructive/40 border-destructive focus-visible:ring-destructive/50' : '', this.inlineClass());
+            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" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", 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.1.5", ngImport: i0, type: UpInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: UpInputDirective, isStandalone: true, selector: "[upInput]", inputs: { inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [
             {
                 provide: UpFieldControl,
                 useExisting: forwardRef(() => UpInputDirective)
             }
         ], exportAs: ["upInput"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpInputDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -271,15 +475,15 @@ class UpNumberDirective extends UpInputDirective {
             decimal: decimalPart?.slice(0, this.maxDecimalDigits()),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpNumberDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", 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.1.5", 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.1.5", type: UpNumberDirective, isStandalone: true, selector: "[upNumber]", inputs: { magnifyValue: { classPropertyName: "magnifyValue", publicName: "magnifyValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "blur": "onBlur()", "input": "onInput($event)", "keydown": "onKeyDown($event)" }, properties: { "class": "_computedClass()" } }, providers: [
             {
                 provide: UpFieldControl,
                 useExisting: forwardRef(() => UpNumberDirective),
             },
         ], exportAs: ["upNumber"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpNumberDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpNumberDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -396,8 +600,8 @@ class UpPasswordComponent extends UpFieldControlComponent {
         this.value.set(value);
         this._onChange(this.value());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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.1.5", ngImport: i0, type: UpPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", 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)
@@ -428,7 +632,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.0.6", ngImport: i0, type: UpPasswordComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpPasswordComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -483,15 +687,15 @@ class UpRadioDirective extends UpFieldControlComponent {
             return up('peer dark:bg-input/30 border-input size-4 min-w-0 rounded-full 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:after:content-[\'\'] checked:after:absolute checked:after:bg-primary checked:after:rounded-full checked:after:size-2 checked:after:left-1/2 checked:after:top-1/2 checked:after:-translate-x-1/2 checked:after:-translate-y-1/2', this.error() ? 'ring-destructive/20 dark:ring-destructive/40 border-destructive focus-visible:ring-destructive/50' : '', this.inlineClass());
         }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpRadioDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: UpRadioDirective, isStandalone: true, selector: "[upRadio]", inputs: { inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "radio" }, properties: { "class": "_computedClass()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpRadioDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: UpRadioDirective, isStandalone: true, selector: "[upRadio]", inputs: { inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "radio" }, properties: { "class": "_computedClass()" } }, providers: [
             {
                 provide: UpFieldControl,
                 useExisting: forwardRef(() => UpRadioDirective)
             }
         ], exportAs: ["upRadio"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpRadioDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpRadioDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'upRadio',
@@ -558,8 +762,8 @@ class UpSwitchComponent extends UpFieldControlComponent {
         this._onChange(this.checked());
         this._onTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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.1.5", ngImport: i0, type: UpSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", 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),
@@ -581,7 +785,7 @@ class UpSwitchComponent extends UpFieldControlComponent {
     </span>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpSwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpSwitchComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -623,15 +827,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" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpCheckboxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", 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.1.5", ngImport: i0, type: UpCheckboxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: UpCheckboxDirective, isStandalone: true, selector: "[upCheckbox]", inputs: { inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "checkbox" }, properties: { "class": "_computedClass()" } }, providers: [
             {
                 provide: UpFieldControl,
                 useExisting: forwardRef(() => UpCheckboxDirective)
             }
         ], exportAs: ["upCheckbox"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpCheckboxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpCheckboxDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -657,12 +861,12 @@ class UpOptionComponent {
         this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpOptionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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.1.5", ngImport: i0, type: UpOptionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", 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.0.6", ngImport: i0, type: UpOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpOptionComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -773,8 +977,8 @@ class UpSelectComponent extends UpFieldControlComponent {
             this.changed.emit(this.value());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", 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.1.5", ngImport: i0, type: UpSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", 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)
@@ -800,9 +1004,9 @@ class UpSelectComponent extends UpFieldControlComponent {
       (blur)="touch()"
       (ngModelChange)="change($event)"
     />
-  `, isInline: true, styles: [".ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--accent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right-color:color-mix(in oklab,var(--primary) 50%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:color-mix(in oklab,var(--primary) 40%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:50%!important;padding-bottom:0!important;transform:translateY(-50%)!important}.ng-select .ng-select-container{transition:all .2s ease}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:.75rem}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--muted-foreground)}.ng-select .ng-select-container .ng-arrow-wrapper{padding-right:.75rem}.ng-select .ng-select-container .ng-clear-wrapper{margin-right:.25rem;transition:color .2s ease}.ng-select .ng-select-container .ng-clear-wrapper:hover .ng-clear{color:var(--destructive)}.ng-dropdown-panel{overflow:hidden;margin-top:.25rem!important;border-color:var(--border)!important;border-radius:calc(var(--radius) - 2px)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ng-dropdown-panel .ng-option-label{color:#000;font-size:1rem}@media screen and (min-width:48rem){.ng-dropdown-panel .ng-option-label{font-size:.875rem}}.ng-dropdown-panel .ng-option:hover,.ng-dropdown-panel .ng-option-marked{background-color:var(--accent)!important}.ng-dropdown-panel .ng-option-selected{color:#000!important;background-color:color-mix(in oklab,var(--primary) 15%,transparent)!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, 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", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpSelectComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'block relative',
@@ -835,7 +1039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
       (blur)="touch()"
       (ngModelChange)="change($event)"
     />
-  `, styles: [".ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--accent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right-color:color-mix(in oklab,var(--primary) 50%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:color-mix(in oklab,var(--primary) 40%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:50%!important;padding-bottom:0!important;transform:translateY(-50%)!important}.ng-select .ng-select-container{transition:all .2s ease}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:.75rem}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--muted-foreground)}.ng-select .ng-select-container .ng-arrow-wrapper{padding-right:.75rem}.ng-select .ng-select-container .ng-clear-wrapper{margin-right:.25rem;transition:color .2s ease}.ng-select .ng-select-container .ng-clear-wrapper:hover .ng-clear{color:var(--destructive)}.ng-dropdown-panel{overflow:hidden;margin-top:.25rem!important;border-color:var(--border)!important;border-radius:calc(var(--radius) - 2px)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ng-dropdown-panel .ng-option-label{color:#000;font-size:1rem}@media screen and (min-width:48rem){.ng-dropdown-panel .ng-option-label{font-size:.875rem}}.ng-dropdown-panel .ng-option:hover,.ng-dropdown-panel .ng-option-marked{background-color:var(--accent)!important}.ng-dropdown-panel .ng-option-selected{color:#000!important;background-color:color-mix(in oklab,var(--primary) 15%,transparent)!important}\n"] }]
+  `, 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"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UpOptionComponent), { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], addTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTag", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UpFieldControl), { isSignal: true }] }] } });
 
 class UpCountrySelectComponent extends UpFieldControlComponent {
@@ -903,8 +1107,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.0.6", ngImport: i0, type: UpCountrySelectComponent, deps: [{ token: i1$1.CountryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: UpCountrySelectComponent, isStandalone: true, selector: "up-country-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { classAttribute: "block" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpCountrySelectComponent, deps: [{ token: i1$1.CountryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: UpCountrySelectComponent, isStandalone: true, selector: "up-country-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { classAttribute: "block" }, providers: [
             {
                 provide: UpFieldControl,
                 useExisting: forwardRef(() => UpCountrySelectComponent),
@@ -929,7 +1133,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.0.6", ngImport: i0, type: UpCountrySelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpCountrySelectComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -1041,8 +1245,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.0.6", ngImport: i0, type: UpCurrencySelectComponent, deps: [{ token: i1$1.CurrencyService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: UpCurrencySelectComponent, isStandalone: true, selector: "up-currency-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { classAttribute: "block" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpCurrencySelectComponent, deps: [{ token: i1$1.CurrencyService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: UpCurrencySelectComponent, isStandalone: true, selector: "up-currency-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { classAttribute: "block" }, providers: [
             {
                 provide: UpFieldControl,
                 useExisting: forwardRef(() => UpCurrencySelectComponent)
@@ -1067,7 +1271,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.0.6", ngImport: i0, type: UpCurrencySelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpCurrencySelectComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -1181,8 +1385,8 @@ class UpSearchableSelectComponent extends UpFieldControlComponent {
             this.changed.emit(this.value());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpSearchableSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", 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.1.5", ngImport: i0, type: UpSearchableSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", 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)
@@ -1215,9 +1419,9 @@ class UpSearchableSelectComponent extends UpFieldControlComponent {
       (blur)="touch()"
       (change)="change($event)"
     />
-  `, isInline: true, styles: [".ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--accent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right-color:color-mix(in oklab,var(--primary) 50%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:color-mix(in oklab,var(--primary) 40%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:50%!important;padding-bottom:0!important;transform:translateY(-50%)!important}.ng-select .ng-select-container{transition:all .2s ease}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:.75rem}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--muted-foreground)}.ng-select .ng-select-container .ng-arrow-wrapper{padding-right:.75rem}.ng-select .ng-select-container .ng-clear-wrapper{margin-right:.25rem;transition:color .2s ease}.ng-select .ng-select-container .ng-clear-wrapper:hover .ng-clear{color:var(--destructive)}.ng-dropdown-panel{overflow:hidden;margin-top:.25rem!important;border-color:var(--border)!important;border-radius:calc(var(--radius) - 2px)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ng-dropdown-panel .ng-option-label{color:#000;font-size:1rem}@media screen and (min-width:48rem){.ng-dropdown-panel .ng-option-label{font-size:.875rem}}.ng-dropdown-panel .ng-option:hover,.ng-dropdown-panel .ng-option-marked{background-color:var(--accent)!important}.ng-dropdown-panel .ng-option-selected{color:#000!important;background-color:color-mix(in oklab,var(--primary) 15%,transparent)!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, 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", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpSearchableSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpSearchableSelectComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-searchable-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'block relative',
@@ -1257,7 +1461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
       (blur)="touch()"
       (change)="change($event)"
     />
-  `, styles: [".ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--accent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right-color:color-mix(in oklab,var(--primary) 50%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:color-mix(in oklab,var(--primary) 40%,transparent)!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:50%!important;padding-bottom:0!important;transform:translateY(-50%)!important}.ng-select .ng-select-container{transition:all .2s ease}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:.75rem}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--muted-foreground)}.ng-select .ng-select-container .ng-arrow-wrapper{padding-right:.75rem}.ng-select .ng-select-container .ng-clear-wrapper{margin-right:.25rem;transition:color .2s ease}.ng-select .ng-select-container .ng-clear-wrapper:hover .ng-clear{color:var(--destructive)}.ng-dropdown-panel{overflow:hidden;margin-top:.25rem!important;border-color:var(--border)!important;border-radius:calc(var(--radius) - 2px)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ng-dropdown-panel .ng-option-label{color:#000;font-size:1rem}@media screen and (min-width:48rem){.ng-dropdown-panel .ng-option-label{font-size:.875rem}}.ng-dropdown-panel .ng-option:hover,.ng-dropdown-panel .ng-option-marked{background-color:var(--accent)!important}.ng-dropdown-panel .ng-option-selected{color:#000!important;background-color:color-mix(in oklab,var(--primary) 15%,transparent)!important}\n"] }]
+  `, 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"] }]
         }], ctorParameters: () => [], propDecorators: { query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], initialItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialItems", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], addTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTag", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UpFieldControl), { isSignal: true }] }] } });
 
 class UpRateGroupCodeSelectComponent extends UpFieldControlComponent {
@@ -1335,8 +1539,8 @@ class UpRateGroupCodeSelectComponent extends UpFieldControlComponent {
             this.changed.emit(value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpRateGroupCodeSelectComponent, deps: [{ token: i1$1.RateGroupCodeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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.1.5", ngImport: i0, type: UpRateGroupCodeSelectComponent, deps: [{ token: i1$1.RateGroupCodeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", 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),
@@ -1361,7 +1565,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.0.6", ngImport: i0, type: UpRateGroupCodeSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpRateGroupCodeSelectComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -1453,8 +1657,8 @@ class UpDatepickerComponent extends UpFieldControlComponent {
         this._onTouched();
         this._isTouched = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", 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.1.5", ngImport: i0, type: UpDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", 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),
@@ -1498,7 +1702,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.0.6", ngImport: i0, type: UpDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpDatepickerComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -1609,8 +1813,8 @@ class UpDateRangePickerComponent extends UpFieldControlComponent {
         this._onTouched();
         this._isTouched = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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.1.5", ngImport: i0, type: UpDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", 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)
@@ -1655,7 +1859,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.0.6", ngImport: i0, type: UpDateRangePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpDateRangePickerComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -1717,68 +1921,707 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
-class UpFormFieldComponent {
-    constructor() {
-        this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
-        this.hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
-        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
-        this.inlineClass = input('', { ...(ngDevMode ? { debugName: "inlineClass" } : {}), alias: 'class' });
-        this.control = contentChild(UpFieldControl, ...(ngDevMode ? [{ debugName: "control" }] : []));
-        this._computedClass = computed(() => {
-            return up('block space-y-2', this.inlineClass());
-        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
-        effect(() => {
-            if (!this.control()) {
-                throw new Error('Form field must contain a field control, eg: input, checkbox, textarea, etc.');
-            }
-            this.control().setControlName(this.label());
-        });
+function updateScrollSelection(el, itemHeight, maxIndex, setIndex) {
+    if (!el) {
+        return;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: UpFormFieldComponent, isStandalone: true, selector: "up-form-field", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, queries: [{ propertyName: "control", first: true, predicate: UpFieldControl, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div 
-      class="
-        group flex flex-col gap-2
-        has-[input[type='radio']]:flex-row has-[input[type='radio']]:items-center
-        has-[input[type='checkbox']]:flex-row has-[input[type='checkbox']]:items-center
-      "
-    >
-      @if (label()) {
-        <label 
-          class="
-            text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 select-none
-            group-has-[input[type='checkbox']]:order-2 group-has-[input[type='radio']]:order-2
-          "
-          [for]="name()"
-          [class.text-destructive]="control()?.error()"
-        >
-          {{ label() }}
-        </label>
-      }
-
-      <ng-content />
-    </div>
-
-    @if (control()?.error()) {
-      <p class="text-xs font-medium text-destructive">
-        {{ control()?.error() }}
-      </p>
+    const index = Math.round(el.scrollTop / itemHeight);
+    setIndex(Math.max(0, Math.min(maxIndex, index)));
+}
+function snapScroll(el, itemHeight, index) {
+    if (!el) {
+        return;
     }
-    @else if (hint()) {
-      <p class="text-xs text-muted-foreground">
-        {{ hint() }}
-      </p>
+    el.scrollTo({
+        behavior: 'smooth',
+        top: index * itemHeight,
+    });
+}
+function scrollImmediate(el, itemHeight, index) {
+    if (!el) {
+        return;
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    el.scrollTop = index * itemHeight;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpFormFieldComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: true,
-                    selector: 'up-form-field',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': '_computedClass()',
+function findClosestIndex(values, target) {
+    let closestIdx = 0;
+    let minDiff = Math.abs(values[0] - target);
+    for (let i = 1; i < values.length; i++) {
+        const diff = Math.abs(values[i] - target);
+        if (diff < minDiff) {
+            minDiff = diff;
+            closestIdx = i;
+        }
+    }
+    return closestIdx;
+}
+
+class OpacityPipe {
+    transform(itemIndex, selectedIndex) {
+        const distance = Math.abs(itemIndex - selectedIndex);
+        switch (distance) {
+            case 0:
+                return 'opacity-100';
+            case 1:
+                return 'opacity-20';
+            case 2:
+                return 'opacity-10';
+            default:
+                return 'opacity-15';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: OpacityPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: OpacityPipe, isStandalone: true, name: "opacity" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: OpacityPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'opacity',
+                    pure: true,
+                }]
+        }] });
+
+class UpTimeComponent {
+    constructor() {
+        this.hoursScroll = viewChild('hoursScroll', ...(ngDevMode ? [{ debugName: "hoursScroll" }] : []));
+        this.minutesScroll = viewChild('minutesScroll', ...(ngDevMode ? [{ debugName: "minutesScroll" }] : []));
+        this.minuteInterval = input(1, ...(ngDevMode ? [{ debugName: "minuteInterval" }] : []));
+        this.minTime = input(...(ngDevMode ? [undefined, { debugName: "minTime" }] : []));
+        this.maxTime = input(...(ngDevMode ? [undefined, { debugName: "maxTime" }] : []));
+        this.value = input({ hour: 0, minute: 0 }, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.timeChanged = output();
+        this.selectedHourIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedHourIndex" }] : []));
+        this.selectedMinuteIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedMinuteIndex" }] : []));
+        this.minHour = computed(() => this.minTime()?.hour ?? 0, ...(ngDevMode ? [{ debugName: "minHour" }] : []));
+        this.maxHour = computed(() => this.maxTime()?.hour ?? 23, ...(ngDevMode ? [{ debugName: "maxHour" }] : []));
+        this.minMinute = computed(() => this.minTime()?.minute ?? 0, ...(ngDevMode ? [{ debugName: "minMinute" }] : []));
+        this.maxMinute = computed(() => this.maxTime()?.minute ?? 59, ...(ngDevMode ? [{ debugName: "maxMinute" }] : []));
+        this.hours = Array.from({ length: 24 }, (_, i) => i);
+        this.minutes = computed(() => {
+            const interval = Math.max(1, Math.min(60, this.minuteInterval()));
+            const count = Math.ceil(60 / interval);
+            return Array.from({ length: count }, (_, i) => i * interval).filter((m) => m < 60);
+        }, ...(ngDevMode ? [{ debugName: "minutes" }] : []));
+        this.hourInvisible = computed(() => {
+            return this.hours.map((hour) => {
+                return hour < (this.minTime()?.hour ?? 0) ||
+                    hour > (this.maxTime()?.hour ?? 23);
+            });
+        }, ...(ngDevMode ? [{ debugName: "hourInvisible" }] : []));
+        this.minuteInvisible = computed(() => {
+            const selectedHour = this.hours[this.selectedHourIndex()] ?? 0;
+            return this.minutes().map((minute) => (selectedHour === this.minHour() && minute < this.minMinute()) ||
+                (selectedHour === this.maxHour() && minute > this.maxMinute()));
+        }, ...(ngDevMode ? [{ debugName: "minuteInvisible" }] : []));
+        this.validMinuteRange = computed(() => {
+            const selectedHour = this.hours[this.selectedHourIndex()] ?? 0;
+            let min = 0;
+            let max = 59;
+            if (selectedHour === this.minHour()) {
+                min = this.minMinute();
+            }
+            if (selectedHour === this.maxHour()) {
+                max = this.maxMinute();
+            }
+            return { min, max };
+        }, ...(ngDevMode ? [{ debugName: "validMinuteRange" }] : []));
+        this.itemHeight = 40;
+        this.visibleItems = 5;
+        this.containerHeight = this.itemHeight * this.visibleItems;
+        this.padding = (this.itemHeight * this.visibleItems - this.itemHeight) / 2;
+        this.highlightTop = this.padding;
+        this.scrollTimeout = null;
+        this.lastEmittedTime = null;
+        afterNextRender(() => this.initializeScrollPosition());
+    }
+    initializeScrollPosition() {
+        const hourIdx = this.hours.indexOf(this.value().hour);
+        const minuteIdx = findClosestIndex(this.minutes(), this.value().minute);
+        if (hourIdx !== -1) {
+            this.selectedHourIndex.set(hourIdx);
+        }
+        this.selectedMinuteIndex.set(minuteIdx);
+        this.scrollToHourImmediate(hourIdx);
+        this.scrollToMinuteImmediate(minuteIdx);
+        this.emitTime();
+    }
+    onHoursScroll() {
+        this.updateHourSelection();
+        this.debounceEmit();
+    }
+    onMinutesScroll() {
+        this.updateMinuteSelection();
+        this.debounceEmit();
+    }
+    debounceEmit() {
+        clearTimeout(this.scrollTimeout);
+        this.scrollTimeout = setTimeout(() => {
+            this.clampSelectionToValidRange();
+            this.emitTime();
+        }, 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);
+            }
+        }
+    }
+    updateHourSelection() {
+        updateScrollSelection(this.hoursScroll().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));
+    }
+    snapHours() {
+        snapScroll(this.hoursScroll().nativeElement, this.itemHeight, this.selectedHourIndex());
+    }
+    snapMinutes() {
+        snapScroll(this.minutesScroll().nativeElement, this.itemHeight, this.selectedMinuteIndex());
+    }
+    scrollToHour(index) {
+        const clamped = Math.max(0, Math.min(23, index));
+        this.selectedHourIndex.set(clamped);
+        this.scrollToHourImmediate(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.emitTime();
+    }
+    scrollToHourImmediate(index) {
+        scrollImmediate(this.hoursScroll().nativeElement, this.itemHeight, index);
+    }
+    scrollToMinuteImmediate(index) {
+        scrollImmediate(this.minutesScroll().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 };
+    }
+    emitTime() {
+        let time = {
+            hour: this.hours[this.selectedHourIndex()],
+            minute: this.minutes()[this.selectedMinuteIndex()],
+        };
+        time = this.clampTime(time);
+        if (!this.lastEmittedTime ||
+            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.1.5", ngImport: i0, type: UpTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpTimeComponent, decorators: [{
+            type: Component,
+            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>
+  `,
+                }]
+        }], 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 {
+    constructor() {
+        super();
+        this.minTime = input(...(ngDevMode ? [undefined, { debugName: "minTime" }] : []));
+        this.maxTime = input(...(ngDevMode ? [undefined, { debugName: "maxTime" }] : []));
+        this.inlineClass = input('', { ...(ngDevMode ? { debugName: "inlineClass" } : {}), alias: 'class' });
+        this.initialHour = input(0, ...(ngDevMode ? [{ debugName: "initialHour" }] : []));
+        this.initialMinute = input(0, ...(ngDevMode ? [{ debugName: "initialMinute" }] : []));
+        this.minuteInterval = input(1, ...(ngDevMode ? [{ debugName: "minuteInterval" }] : []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+        this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+        this.value = signal({ hour: 0, minute: 0 }, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.formattedTime = computed(() => {
+            const time = this.value();
+            if (!time) {
+                return '--:--';
+            }
+            const hour = time.hour ?? 0;
+            const minute = time.minute ?? 0;
+            return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+        }, ...(ngDevMode ? [{ debugName: "formattedTime" }] : []));
+        this._computedClass = computed(() => {
+            return up('flex justify-between px-3 border border-border min-w-40 w-full font-normal hover:not-disabled:text-primary! data-[has-value=false]:text-muted-foreground', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+        this._isTouched = false;
+        this._onTouched = () => { };
+        this._onChange = () => { };
+        if (this.ngControl !== null) {
+            this.ngControl.valueAccessor = this;
+        }
+        effect(() => {
+            if (!this.ngControl) {
+                this.value.set({
+                    hour: this.initialHour(),
+                    minute: this.initialMinute(),
+                });
+            }
+        });
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    touch() {
+        this._markTouched();
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    selectedTime(time) {
+        this._markTouched();
+        this.value.set(time);
+        this._onChange(time);
+    }
+    _markTouched() {
+        if (this._isTouched) {
+            return;
+        }
+        this._onTouched();
+        this._isTouched = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", 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),
+            },
+            provideIcons({
+                matWatchLaterRound,
+            }),
+        ], usesInheritance: true, ngImport: i0, template: `
+    <up-popover placementOffset="4">
+      <button
+        upButton
+        upPopoverTrigger
+        type="button"
+        variant="ghost"
+        
+        [class]="_computedClass()"
+        [disabled]="disabled() || _disabled()"
+        [attr.data-has-value]="value() ? true : false"
+        
+        (blur)="touch()"
+      >
+        {{ formattedTime() }}
+
+        <ng-icon size="16" class="ml-auto" name="matWatchLaterRound" />
+      </button>
+
+      <ng-container *upPopoverContentRef>
+        <div
+          animate.enter="animate-in fade-in"
+          animate.leave="animate-out fade-out"
+        >
+          <up-time
+            [value]="value()"
+            [minTime]="minTime()"
+            [maxTime]="maxTime()"
+            [minuteInterval]="minuteInterval()"
+            (timeChanged)="selectedTime($event)"
+          />
+        </div>
+      </ng-container>
+    </up-popover>
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: UpButtonDirective, selector: "[upButton]", inputs: ["size", "variant", "class"], exportAs: ["upButton"] }, { kind: "component", type: UpPopoverComponent, selector: "up-popover", inputs: ["placement", "alignment", "placementOffset", "alignmentOffset"] }, { kind: "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.1.5", ngImport: i0, type: UpTimepickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'up-timepicker',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: UpFieldControl,
+                            useExisting: forwardRef(() => UpTimepickerComponent),
+                        },
+                        provideIcons({
+                            matWatchLaterRound,
+                        }),
+                    ],
+                    imports: [
+                        NgIcon,
+                        UpButtonDirective,
+                        UpPopoverComponent,
+                        UpPopoverTriggerDirective,
+                        UpPopoverContentRefDirective,
+                        UpTimeComponent,
+                    ],
+                    template: `
+    <up-popover placementOffset="4">
+      <button
+        upButton
+        upPopoverTrigger
+        type="button"
+        variant="ghost"
+        
+        [class]="_computedClass()"
+        [disabled]="disabled() || _disabled()"
+        [attr.data-has-value]="value() ? true : false"
+        
+        (blur)="touch()"
+      >
+        {{ formattedTime() }}
+
+        <ng-icon size="16" class="ml-auto" name="matWatchLaterRound" />
+      </button>
+
+      <ng-container *upPopoverContentRef>
+        <div
+          animate.enter="animate-in fade-in"
+          animate.leave="animate-out fade-out"
+        >
+          <up-time
+            [value]="value()"
+            [minTime]="minTime()"
+            [maxTime]="maxTime()"
+            [minuteInterval]="minuteInterval()"
+            (timeChanged)="selectedTime($event)"
+          />
+        </div>
+      </ng-container>
+    </up-popover>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], initialHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialHour", required: false }] }], initialMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialMinute", required: false }] }], minuteInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteInterval", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class UpFormFieldComponent {
+    constructor() {
+        this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+        this.hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.inlineClass = input('', { ...(ngDevMode ? { debugName: "inlineClass" } : {}), alias: 'class' });
+        this.control = contentChild(UpFieldControl, ...(ngDevMode ? [{ debugName: "control" }] : []));
+        this._computedClass = computed(() => {
+            return up('block space-y-2', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+        effect(() => {
+            if (!this.control()) {
+                throw new Error('Form field must contain a field control, eg: input, checkbox, textarea, etc.');
+            }
+            this.control().setControlName(this.label());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: UpFormFieldComponent, isStandalone: true, selector: "up-form-field", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, queries: [{ propertyName: "control", first: true, predicate: UpFieldControl, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div 
+      class="
+        group flex flex-col gap-2
+        has-[input[type='radio']]:flex-row has-[input[type='radio']]:items-center
+        has-[input[type='checkbox']]:flex-row has-[input[type='checkbox']]:items-center
+      "
+      [attr.data-state]="control()?.error()? 'error' : 'default'"
+    >
+      @if (label()) {
+        <label 
+          class="
+            text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 select-none
+            group-has-[input[type='checkbox']]:order-2 group-has-[input[type='radio']]:order-2
+          "
+          [for]="name()"
+          [class.text-destructive]="control()?.error()"
+        >
+          {{ label() }}
+        </label>
+      }
+
+      <ng-content />
+    </div>
+
+    @if (control()?.error()) {
+      <p class="text-xs font-medium text-destructive">
+        {{ control()?.error() }}
+      </p>
+    }
+    @else if (hint()) {
+      <p class="text-xs text-muted-foreground">
+        {{ hint() }}
+      </p>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'up-form-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': '_computedClass()',
                     },
                     template: `
     <div 
@@ -1787,6 +2630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         has-[input[type='radio']]:flex-row has-[input[type='radio']]:items-center
         has-[input[type='checkbox']]:flex-row has-[input[type='checkbox']]:items-center
       "
+      [attr.data-state]="control()?.error()? 'error' : 'default'"
     >
       @if (label()) {
         <label 
@@ -1879,8 +2723,8 @@ class UpImagePickerComponent extends UpFieldControlComponent {
             this._onChange(compressedFile);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpImagePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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.1.5", ngImport: i0, type: UpImagePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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)
@@ -1891,7 +2735,7 @@ class UpImagePickerComponent extends UpFieldControlComponent {
             })
         ], 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpImagePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpImagePickerComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'up-image-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1908,204 +2752,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     ], 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" }]
         }], 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 }] }] } });
 
-function setValidator(form, keys, validators) {
-    if (!keys.length ||
-        keys.length === 1) {
-        throw new Error('Use normal action for single keys and keys cannot be empty.');
-    }
-    keys.forEach((key) => {
-        const control = form.get(key);
-        if (control) {
-            control.setValidators(validators);
-            control.updateValueAndValidity();
-        }
-    });
-}
-
-function toggleFormControls(form, keys, mode) {
-    if (!keys.length ||
-        keys.length === 1) {
-        throw new Error('Use normal action for single keys and keys cannot be empty.');
-    }
-    keys.forEach((key) => form.get(key)?.[mode]());
-}
-
-function prettifyLabel(name) {
-    return name
-        .replace(/([a-z])([A-Z])/g, '$1 $2')
-        .replace(/_/g, ' ')
-        .replace(/\b\w/g, char => char.toUpperCase());
-}
-function convertToDate(value) {
-    if (value instanceof Date)
-        return value;
-    if (typeof value === 'string' &&
-        !isNaN(Date.parse(value))) {
-        return new Date(value);
-    }
-    return null;
-}
-/**
- * Range validator for number and date values.
- * @param {string} fromKey - The "from" control name
- * @param {string} toKey - The "to" control name
- * @returns {ValidatorFn} Throw error message when fromKey is greater than toKey
- *
- * Usage:
- * this.form = new FormGroup({
- *   agingFrom: new FormControl(),
- *   agingTo: new FormControl(),
- * }, { validators: rangeValidator('agingFrom', 'agingTo') });
- */
-function validRangeValidator(fromKey, toKey) {
-    return (group) => {
-        if (!group) {
-            return null;
-        }
-        const toControl = group.get(toKey);
-        const fromControl = group.get(fromKey);
-        if (!fromControl ||
-            !toControl) {
-            return null;
-        }
-        const toValue = toControl.value;
-        const fromValue = fromControl.value;
-        if (fromValue === null ||
-            toValue === null ||
-            fromValue === '' ||
-            toValue === '') {
-            return null;
-        }
-        let isInvalid = false;
-        const toDate = convertToDate(toValue);
-        const fromDate = convertToDate(fromValue);
-        if (fromDate && toDate) {
-            isInvalid = toDate <= fromDate;
-        }
-        else if (!isNaN(fromValue) &&
-            !isNaN(toValue)) {
-            isInvalid = Number(toValue) <= Number(fromValue);
-        }
-        return !isInvalid ? null : {
-            rangeInvalid: {
-                to: toKey,
-                from: fromKey,
-                message: `${prettifyLabel(toKey)} must be greater than ${prettifyLabel(fromKey)}`
-            }
-        };
-    };
-}
-
-/**
- * Validator that requires all specified form controls to have the same value.
- *
- * @param {string[]} controlNames - The names of the controls that must match
- * @param {string} [message] - Optional custom error message
- * @returns {ValidatorFn} A validator function producing an `isEqual` error if values do not match
- *
- * @example
- * this.form = new FormGroup({
- *   password: new FormControl(''),
- *   confirmPassword: new FormControl(''),
- * }, { validators: isEqualValidator(['password', 'confirmPassword']) });
- */
-function isEqualValidator(controlNames, message) {
-    return (group) => {
-        if (!group ||
-            controlNames.length < 2) {
-            return null;
-        }
-        let isEmpty = false;
-        const values = controlNames.reduce((acc, name) => {
-            const control = group.get(name);
-            if (!control) {
-                return acc;
-            }
-            if (!control.value) {
-                isEmpty = true;
-                return acc;
-            }
-            acc.push(control.value);
-            return acc;
-        }, []);
-        if (isEmpty) {
-            return null;
-        }
-        if (!values.every(v => v === values[0])) {
-            const labels = controlNames.map((name) => {
-                return name
-                    .replace(/([a-z])([A-Z])/g, '$1 $2')
-                    .replace(/_/g, ' ')
-                    .replace(/\b\w/g, char => char.toUpperCase());
-            });
-            return {
-                isEqual: {
-                    fields: controlNames,
-                    message: message || `${labels.join(', ')} should have the same value`
-                }
-            };
-        }
-        return null;
-    };
-}
-
-/**
- * Validator that requires all specified form controls to have different values.
- *
- * @param {string[]} controlNames - The names of the controls that must all be unique
- * @param {string} [message] - Optional custom error message
- * @returns {ValidatorFn} A validator function producing an `isNotEqual` error if duplicate values exist
- *
- * @example
- * this.form = new FormGroup({
- *   primaryEmail: new FormControl(''),
- *   secondaryEmail: new FormControl(''),
- *   backupEmail: new FormControl(''),
- * }, { validators: isNotEqualValidator(['primaryEmail', 'secondaryEmail', 'backupEmail']) });
- */
-function isNotEqualValidator(controlNames, message) {
-    return (group) => {
-        if (!group ||
-            controlNames.length < 2) {
-            return null;
-        }
-        let isEmpty = false;
-        const values = controlNames.reduce((acc, name) => {
-            const control = group.get(name);
-            if (!control) {
-                return acc;
-            }
-            if (!control.value) {
-                isEmpty = true;
-                return acc;
-            }
-            acc.push(control.value);
-            return acc;
-        }, []);
-        if (isEmpty) {
-            return null;
-        }
-        if (new Set(values).size !== values.length) {
-            const labels = controlNames.map((name) => {
-                return name
-                    .replace(/([a-z])([A-Z])/g, '$1 $2')
-                    .replace(/_/g, ' ')
-                    .replace(/\b\w/g, char => char.toUpperCase());
-            });
-            return {
-                isNotEqual: {
-                    fields: controlNames,
-                    message: message || `${labels.join(', ')} should have different values`
-                }
-            };
-        }
-        return null;
-    };
-}
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { UpCheckboxDirective, UpCountrySelectComponent, UpCurrencySelectComponent, UpDateRangePickerComponent, UpDatepickerComponent, UpFieldControl, UpFieldControlComponent, UpFormFieldComponent, UpImagePickerComponent, UpInputDirective, UpNumberDirective, UpOptionComponent, UpPasswordComponent, UpRadioDirective, UpRateGroupCodeSelectComponent, UpSearchableSelectComponent, UpSelectComponent, UpSwitchComponent, isEqualValidator, isNotEqualValidator, setValidator, toggleFormControls, validRangeValidator };
+export { UpCheckboxDirective, UpCountrySelectComponent, UpCurrencySelectComponent, UpDateRangePickerComponent, UpDatepickerComponent, UpFieldControl, UpFieldControlComponent, UpFormFieldComponent, UpImagePickerComponent, UpInputDirective, UpNumberDirective, UpOptionComponent, UpPasswordComponent, UpRadioDirective, UpRateGroupCodeSelectComponent, UpSearchableSelectComponent, UpSelectComponent, UpSwitchComponent, UpTimeComponent, UpTimepickerComponent, isEqualValidator, isNotEqualValidator, setValidator, toggleFormControls, validRangeValidator };
 //# sourceMappingURL=unipin-angular-applet-forms.mjs.map