@vallift/ngl 22.0.24 → 22.0.26

package/fesm2022/vallift-ngl.mjs

@@ -967,19 +967,20 @@ class OverlayService {
         return dialogRef;
     }
     openModal(component, options) {
-        const { disableClose = false, maxHeightClass, data, panelClass } = options ?? {};
+        const { disableClose = false, maxHeightClass, data, fitContent = false, panelClass } = options ?? {};
         const positionStrategy = this.overlay
             .position()
             .global()
             .centerHorizontally()
             .centerVertically();
+        const widthClasses = fitContent
+            ? ['w-fit', 'max-w-[calc(100%-2rem)]']
+            : ['sm:w-4/5', 'md:w-3/5', 'lg:w-2/5'];
         const defaultPanelClass = [
             ...this.basePanelClass,
             maxHeightClass ?? this.modalMaxHeightClass,
             'rounded-3xl',
-            'sm:w-4/5',
-            'md:w-3/5',
-            'lg:w-2/5',
+            ...widthClasses,
         ];
         let dialogRef = this.dialog.open(component, {
             positionStrategy: positionStrategy,
@@ -2506,7 +2507,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
             }] } });
 
 class ColorPickerDirective {
-    colorChanged = new EventEmitter(false);
+    initialHexColor = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialHexColor" }] : /* istanbul ignore next */ []));
+    enableAlpha = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableAlpha" }] : /* istanbul ignore next */ []));
+    enableAdditionalColor = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableAdditionalColor" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    colorChanged = output();
+    pickerClosed = output();
     componentRef = null;
     overlay = null;
     elementRef = inject(ElementRef);
@@ -2514,6 +2524,9 @@ class ColorPickerDirective {
     appRef = inject(ApplicationRef);
     injector = inject(Injector);
     onClick() {
+        if (this.disabled()) {
+            return;
+        }
         if (this.componentRef) {
             this.closeColorPicker();
             return;
@@ -2521,7 +2534,7 @@ class ColorPickerDirective {
         this.initializeColorPicker();
     }
     initializeColorPicker() {
-        if (this.componentRef !== null) {
+        if (this.disabled() || this.componentRef !== null) {
             return;
         }
         const componentRef = createComponent(ColorPickerComponent, {
@@ -2529,8 +2542,12 @@ class ColorPickerDirective {
             elementInjector: this.injector,
         });
         this.componentRef = componentRef;
+        componentRef.setInput('hexColor', this.initialHexColor() || '#000000');
+        componentRef.setInput('enableAlpha', this.enableAlpha());
+        componentRef.setInput('enableAdditionalColor', this.enableAdditionalColor());
+        componentRef.changeDetectorRef.detectChanges();
         this.appRef.attachView(componentRef.hostView);
-        const [domElement] = componentRef.hostView.rootNodes;
+        const pickerElement = componentRef.location.nativeElement;
         const elementRect = this.elementRef.nativeElement.getBoundingClientRect();
         this.overlay = document.createElement('div');
         this.overlay.id = 'ng-color-picker';
@@ -2541,10 +2558,10 @@ class ColorPickerDirective {
         this.overlay.style.zIndex = '2000';
         this.overlay.style.top = '0';
         this.overlay.style.left = '0';
-        componentRef.location.nativeElement.style.position = 'absolute';
-        componentRef.location.nativeElement.style.zIndex = '2001';
-        componentRef.location.nativeElement.style.top = `${elementRect.bottom + 20}px`;
-        componentRef.location.nativeElement.style.left = `${elementRect.left}px`;
+        pickerElement.style.position = 'absolute';
+        pickerElement.style.zIndex = '2001';
+        pickerElement.style.top = `${elementRect.bottom + 20}px`;
+        pickerElement.style.left = `${elementRect.left}px`;
         componentRef.instance.COLOR_PICKER_HEIGHT.set(140);
         componentRef.instance.COLOR_PICKER_WIDTH.set(250);
         componentRef.instance.isTooltip.set(true);
@@ -2556,7 +2573,8 @@ class ColorPickerDirective {
             this.closeColorPicker();
         });
         document.body.appendChild(this.overlay);
-        document.body.appendChild(domElement);
+        document.body.appendChild(pickerElement);
+        componentRef.changeDetectorRef.detectChanges();
     }
     closeColorPicker() {
         if (!this.componentRef) {
@@ -2567,12 +2585,13 @@ class ColorPickerDirective {
         this.overlay?.remove();
         this.overlay = null;
         this.componentRef = null;
+        this.pickerClosed.emit();
     }
     ngOnDestroy() {
         this.closeColorPicker();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: ColorPickerDirective, isStandalone: true, selector: "[appColorPicker]", outputs: { colorChanged: "colorChanged" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: ColorPickerDirective, isStandalone: true, selector: "[appColorPicker]", inputs: { initialHexColor: { classPropertyName: "initialHexColor", publicName: "initialHexColor", isSignal: true, isRequired: false, transformFunction: null }, enableAlpha: { classPropertyName: "enableAlpha", publicName: "enableAlpha", isSignal: true, isRequired: false, transformFunction: null }, enableAdditionalColor: { classPropertyName: "enableAdditionalColor", publicName: "enableAdditionalColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged", pickerClosed: "pickerClosed" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ColorPickerDirective, decorators: [{
             type: Directive,
@@ -2580,9 +2599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     selector: '[appColorPicker]',
                     standalone: true,
                 }]
-        }], propDecorators: { colorChanged: [{
-                type: Output
-            }], onClick: [{
+        }], propDecorators: { initialHexColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialHexColor", required: false }] }], enableAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableAlpha", required: false }] }], enableAdditionalColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableAdditionalColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], colorChanged: [{ type: i0.Output, args: ["colorChanged"] }], pickerClosed: [{ type: i0.Output, args: ["pickerClosed"] }], onClick: [{
                 type: HostListener,
                 args: ['click']
             }] } });
@@ -14696,6 +14713,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 args: ['trackRef']
             }] } });
 
+let nextColorFieldId = 0;
+const DEFAULT_COLOR = '#000000';
+const HEX_COLOR_PATTERN = /^#[0-9A-Fa-f]{6}$/;
+class SignalColorField extends BaseSignalTextInputControl {
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    id = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    colorInputRef;
+    instanceId = ++nextColorFieldId;
+    colorInputId = computed(() => this.id() ?? `signal-color-field-${this.instanceId}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorInputId" }] : /* istanbul ignore next */ []));
+    isInteractive = computed(() => !this.disabled() && !this.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
+    usesPeerFloatingLabel = computed(() => usesPeerFloatingLabel(this.appearance()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "usesPeerFloatingLabel" }] : /* istanbul ignore next */ []));
+    resolvedColor = computed(() => {
+        const current = this.value();
+        return current && HEX_COLOR_PATTERN.test(current) ? current : DEFAULT_COLOR;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
+    displayHex = computed(() => {
+        const current = this.value();
+        return current && HEX_COLOR_PATTERN.test(current) ? current : this.resolvedColor();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayHex" }] : /* istanbul ignore next */ []));
+    appearanceWrapperClasses = computed(() => {
+        const base = getAppearanceWrapperClasses(this.appearance(), this.isFocused(), this.disabled());
+        if (this.showError() && !this.disabled()) {
+            return `${base} border-error ring-4 ring-error-subtle`;
+        }
+        return base;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearanceWrapperClasses" }] : /* istanbul ignore next */ []));
+    wrapperHeightClasses = computed(() => getWrapperHeightClasses(this.appearance(), this.size()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wrapperHeightClasses" }] : /* istanbul ignore next */ []));
+    inputSizeClasses = computed(() => getInputSizeClasses(this.appearance(), this.size(), this.isFocused(), this.displayHex()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputSizeClasses" }] : /* istanbul ignore next */ []));
+    horizontalPaddingClasses = computed(() => getHorizontalPaddingClasses(this.appearance(), this.size(), false, true, false, false, false, false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "horizontalPaddingClasses" }] : /* istanbul ignore next */ []));
+    inFieldLabelLeftClasses = computed(() => getInFieldLabelLeftClasses(this.size(), false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inFieldLabelLeftClasses" }] : /* istanbul ignore next */ []));
+    floatingLabelClasses = computed(() => getFloatingLabelClasses(this.size()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingLabelClasses" }] : /* istanbul ignore next */ []));
+    iftaLabelClasses = computed(() => getIftaLabelClasses(this.size()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iftaLabelClasses" }] : /* istanbul ignore next */ []));
+    floatingOutlineLabelClasses = computed(() => getFloatingOutlineLabelClasses(this.size(), false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingOutlineLabelClasses" }] : /* istanbul ignore next */ []));
+    openColorPicker() {
+        if (!this.isInteractive()) {
+            return;
+        }
+        this.colorInputRef?.nativeElement.click();
+    }
+    onInput(event) {
+        if (!this.isInteractive()) {
+            return;
+        }
+        const nextValue = event.target.value;
+        this.setValue(nextValue);
+        this.valueChange.emit(nextValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalColorField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalColorField, isStandalone: true, selector: "lib-signal-color-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"colorInputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class.opacity-70]=\"disabled()\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [id]=\"colorInputId()\"\n          [value]=\"displayHex()\" />\n      }\n\n      <button\n        type=\"button\"\n        class=\"relative h-full w-full text-left font-mono transition outline-none bg-transparent border-0 rounded-none truncate\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-body]=\"!disabled()\"\n        [class.cursor-pointer]=\"isInteractive()\"\n        [class.cursor-default]=\"readonly() && !disabled()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [id]=\"usesPeerFloatingLabel() ? null : colorInputId()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        (click)=\"openColorPicker()\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\">\n        {{ displayHex() }}\n      </button>\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"colorInputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"colorInputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"colorInputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    <span class=\"relative mr-3 h-7 w-7 shrink-0\">\n      <span\n        aria-hidden=\"true\"\n        class=\"block h-7 w-7 rounded-full border border-default\"\n        [style.background-color]=\"resolvedColor()\"></span>\n\n      <input\n        #colorInputRef\n        type=\"color\"\n        class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n        [class.cursor-default]=\"readonly()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [class.pointer-events-none]=\"!isInteractive()\"\n        [value]=\"resolvedColor()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\" />\n    </span>\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalColorField, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-signal-color-field', imports: [BaseSignalInput], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"colorInputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class.opacity-70]=\"disabled()\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [id]=\"colorInputId()\"\n          [value]=\"displayHex()\" />\n      }\n\n      <button\n        type=\"button\"\n        class=\"relative h-full w-full text-left font-mono transition outline-none bg-transparent border-0 rounded-none truncate\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-body]=\"!disabled()\"\n        [class.cursor-pointer]=\"isInteractive()\"\n        [class.cursor-default]=\"readonly() && !disabled()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [id]=\"usesPeerFloatingLabel() ? null : colorInputId()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        (click)=\"openColorPicker()\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\">\n        {{ displayHex() }}\n      </button>\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"colorInputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"colorInputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"colorInputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    <span class=\"relative mr-3 h-7 w-7 shrink-0\">\n      <span\n        aria-hidden=\"true\"\n        class=\"block h-7 w-7 rounded-full border border-default\"\n        [style.background-color]=\"resolvedColor()\"></span>\n\n      <input\n        #colorInputRef\n        type=\"color\"\n        class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n        [class.cursor-default]=\"readonly()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [class.pointer-events-none]=\"!isInteractive()\"\n        [value]=\"resolvedColor()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\" />\n    </span>\n  </div>\n\n</lib-base-signal-input>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], colorInputRef: [{
+                type: ViewChild,
+                args: ['colorInputRef']
+            }] } });
+
 function signalValidationError(kind, message) {
     return { kind, message };
 }
@@ -15397,5 +15490,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseSignalInput, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_NGL_BUTTON_CONFIG, DEFAULT_NGL_INPUT_CONFIG, DEFAULT_NGL_LIST_RESPONSE, DEFAULT_PHONE_COUNTRIES, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InfiniteScrollDirective, InfiniteScrollModule, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OpenFloatingMenuDirective, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SIGNAL_FORM_ERRORS, SharedConstants, ShimmerComponent, SignalButton, SignalCheckbox, SignalDataTableComponent, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalError, SignalFormDirective, SignalFormValidators, SignalMultiSelectDropdown, SignalNumberField, SignalOtpField, SignalPhoneNumberField, SignalRadio, SignalRadioGroup, SignalRangeSlider, SignalRating, SignalSlider, SignalSwitch, SignalTextField, SignalTextarea, SignalTimeField, SignalTimePicker, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, ThemeService, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipDirective, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, defaultSignalFormErrors, getDynamicTypeStructure, getSignalButtonClasses, getSignalButtonIconClasses, getSignalButtonSpinnerBorderClass, getSignalFieldErrorMessage, getSignalValidationErrorMessage, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase, validateSignalForm };
+export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseSignalInput, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_NGL_BUTTON_CONFIG, DEFAULT_NGL_INPUT_CONFIG, DEFAULT_NGL_LIST_RESPONSE, DEFAULT_PHONE_COUNTRIES, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InfiniteScrollDirective, InfiniteScrollModule, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OpenFloatingMenuDirective, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SIGNAL_FORM_ERRORS, SharedConstants, ShimmerComponent, SignalButton, SignalCheckbox, SignalColorField, SignalDataTableComponent, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalError, SignalFormDirective, SignalFormValidators, SignalMultiSelectDropdown, SignalNumberField, SignalOtpField, SignalPhoneNumberField, SignalRadio, SignalRadioGroup, SignalRangeSlider, SignalRating, SignalSlider, SignalSwitch, SignalTextField, SignalTextarea, SignalTimeField, SignalTimePicker, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, ThemeService, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipDirective, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, defaultSignalFormErrors, getDynamicTypeStructure, getSignalButtonClasses, getSignalButtonIconClasses, getSignalButtonSpinnerBorderClass, getSignalFieldErrorMessage, getSignalValidationErrorMessage, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase, validateSignalForm };
 //# sourceMappingURL=vallift-ngl.mjs.map