@ng-nest/ui 20.2.2 → 20.2.3

package/color-picker/index.d.ts

@@ -82,11 +82,23 @@ declare class XColorPickerProperty extends XColorPickerProperty_base {
      * @en_US Display position
      */
     readonly placement: _angular_core.InputSignal<XCorner>;
+    /**
+     * @zh_CN 清除按钮
+     * @en_US Clear button
+     */
+    readonly clearable: _angular_core.InputSignalWithTransform<boolean, XBoolean>;
     /**
      * @zh_CN 显示边框
      * @en_US Display Border
      */
     readonly bordered: _angular_core.InputSignalWithTransform<boolean, XBoolean>;
+    /**
+     * @zh_CN 输入框样式
+     * @en_US Input Style
+     */
+    readonly inputStyle: _angular_core.InputSignal<{
+        [style: string]: any;
+    } | undefined>;
     /**
      * @zh_CN 浮动标签
      * @en_US Float label
@@ -199,7 +211,7 @@ declare class XColorPickerProperty extends XColorPickerProperty_base {
      */
     readonly inputValidator: _angular_core.InputSignal<((value: any) => boolean) | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<XColorPickerProperty, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XColorPickerProperty, "x-color-picker-property", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatFixed": { "alias": "floatFixed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pointer": { "alias": "pointer"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "labelAlign": { "alias": "labelAlign"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "valueTpl": { "alias": "valueTpl"; "required": false; "isSignal": true; }; "valueTplContext": { "alias": "valueTplContext"; "required": false; "isSignal": true; }; "before": { "alias": "before"; "required": false; "isSignal": true; }; "after": { "alias": "after"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "inputValidator": { "alias": "inputValidator"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XColorPickerProperty, "x-color-picker-property", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "inputStyle": { "alias": "inputStyle"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatFixed": { "alias": "floatFixed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pointer": { "alias": "pointer"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "labelAlign": { "alias": "labelAlign"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "valueTpl": { "alias": "valueTpl"; "required": false; "isSignal": true; }; "valueTplContext": { "alias": "valueTplContext"; "required": false; "isSignal": true; }; "before": { "alias": "before"; "required": false; "isSignal": true; }; "after": { "alias": "after"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "inputValidator": { "alias": "inputValidator"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, never, never, true, never>;
 }
 /**
  * ColorPicker Option
@@ -472,13 +484,14 @@ declare class XColorPickerComponent extends XColorPickerProperty implements OnIn
     panelTemplate: _angular_core.Signal<TemplateRef<any>>;
     private doc;
     primaryColor: string;
-    inputStyle: _angular_core.Signal<{
+    inputStyleComputed: _angular_core.Signal<{
         backgroundColor: any;
         color: string;
     }>;
-    clearable: _angular_core.WritableSignal<boolean>;
+    inputClearable: _angular_core.WritableSignal<boolean>;
     enter: _angular_core.WritableSignal<boolean>;
     animating: _angular_core.WritableSignal<boolean>;
+    allowAgian: _angular_core.WritableSignal<boolean>;
     portal: XPortalOverlayRef<XColorPickerPortalComponent>;
     icon: _angular_core.WritableSignal<string>;
     closeSubject: Subject<void>;

package/core/index.d.ts

@@ -1349,6 +1349,7 @@ interface XColorPickerConfig {
     floatFixed?: boolean;
     variant?: XVariant;
     placement?: XCorner;
+    clearable?: boolean;
     size?: XSize;
     bordered?: boolean;
 }

package/fesm2022/ng-nest-ui-color-picker.mjs

@@ -3,7 +3,7 @@ import { input, model, Component, viewChild, ElementRef, output, signal, inject,
 import { XToBoolean, XToCssPixelValue, XIsChange, XComputed, XIsEmpty, XParents } from '@ng-nest/ui/core';
 import { XFormControlFunction, XValueAccessor } from '@ng-nest/ui/base-form';
 import { XSliderSelectComponent } from '@ng-nest/ui/slider-select';
-import { Subject, fromEvent } from 'rxjs';
+import { Subject, of, fromEvent } from 'rxjs';
 import { DecimalPipe, PercentPipe, NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import { XInputComponent } from '@ng-nest/ui/input';
 import * as i2 from '@angular/cdk/drag-drop';
@@ -13,7 +13,7 @@ import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { XPortalService, XPortalConnectedPosition } from '@ng-nest/ui/portal';
 import { Overlay } from '@angular/cdk/overlay';
-import { takeUntil, filter } from 'rxjs/operators';
+import { takeUntil, delay, filter } from 'rxjs/operators';
 
 /**
  * ColorPicker
@@ -38,11 +38,21 @@ class XColorPickerProperty extends XFormControlFunction(X_COLOR_CONFIG_NAME) {
          * @en_US Display position
          */
         this.placement = input(this.config?.placement ?? 'bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+        /**
+         * @zh_CN 清除按钮
+         * @en_US Clear button
+         */
+        this.clearable = input(this.config?.clearable ?? true, ...(ngDevMode ? [{ debugName: "clearable", transform: XToBoolean }] : [{ transform: XToBoolean }]));
         /**
          * @zh_CN 显示边框
          * @en_US Display Border
          */
         this.bordered = input(this.config?.bordered ?? true, ...(ngDevMode ? [{ debugName: "bordered", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 输入框样式
+         * @en_US Input Style
+         */
+        this.inputStyle = input(...(ngDevMode ? [undefined, { debugName: "inputStyle" }] : []));
         /**
          * @zh_CN 浮动标签
          * @en_US Float label
@@ -156,12 +166,12 @@ class XColorPickerProperty extends XFormControlFunction(X_COLOR_CONFIG_NAME) {
         this.inputValidator = input(...(ngDevMode ? [undefined, { debugName: "inputValidator" }] : []));
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorPickerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XColorPickerProperty, isStandalone: true, selector: "x-color-picker-property", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatFixed: { classPropertyName: "floatFixed", publicName: "floatFixed", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pointer: { classPropertyName: "pointer", publicName: "pointer", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, labelAlign: { classPropertyName: "labelAlign", publicName: "labelAlign", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTplContext: { classPropertyName: "valueTplContext", publicName: "valueTplContext", isSignal: true, isRequired: false, transformFunction: null }, before: { classPropertyName: "before", publicName: "before", isSignal: true, isRequired: false, transformFunction: null }, after: { classPropertyName: "after", publicName: "after", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, inputValidator: { classPropertyName: "inputValidator", publicName: "inputValidator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XColorPickerProperty, isStandalone: true, selector: "x-color-picker-property", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatFixed: { classPropertyName: "floatFixed", publicName: "floatFixed", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pointer: { classPropertyName: "pointer", publicName: "pointer", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, labelAlign: { classPropertyName: "labelAlign", publicName: "labelAlign", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTplContext: { classPropertyName: "valueTplContext", publicName: "valueTplContext", isSignal: true, isRequired: false, transformFunction: null }, before: { classPropertyName: "before", publicName: "before", isSignal: true, isRequired: false, transformFunction: null }, after: { classPropertyName: "after", publicName: "after", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, inputValidator: { classPropertyName: "inputValidator", publicName: "inputValidator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorPickerProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XColorPickerPrefix}-property`, template: '' }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatFixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatFixed", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pointer: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointer", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], labelAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelAlign", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], valueTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTpl", required: false }] }], valueTplContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTplContext", required: false }] }], before: [{ type: i0.Input, args: [{ isSignal: true, alias: "before", required: false }] }], after: [{ type: i0.Input, args: [{ isSignal: true, alias: "after", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], inputValidator: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValidator", required: false }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatFixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatFixed", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pointer: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointer", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], labelAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelAlign", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], valueTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTpl", required: false }] }], valueTplContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTplContext", required: false }] }], before: [{ type: i0.Input, args: [{ isSignal: true, alias: "before", required: false }] }], after: [{ type: i0.Input, args: [{ isSignal: true, alias: "after", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], inputValidator: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValidator", required: false }] }] } });
 /**
  * ColorPicker-Portal
  * @selector x-color-picker-portal
@@ -737,13 +747,15 @@ class XColorPickerComponent extends XColorPickerProperty {
         this.panelTemplate = viewChild.required('panelTemplate');
         this.doc = inject(DOCUMENT);
         this.primaryColor = XComputed(this.doc.documentElement).getPropertyValue('--x-primary').trim();
-        this.inputStyle = computed(() => ({
+        this.inputStyleComputed = computed(() => ({
             backgroundColor: this.value(),
-            color: 'transparent'
-        }), ...(ngDevMode ? [{ debugName: "inputStyle" }] : []));
-        this.clearable = signal(false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+            color: 'transparent',
+            ...this.inputStyle()
+        }), ...(ngDevMode ? [{ debugName: "inputStyleComputed" }] : []));
+        this.inputClearable = signal(false, ...(ngDevMode ? [{ debugName: "inputClearable" }] : []));
         this.enter = signal(false, ...(ngDevMode ? [{ debugName: "enter" }] : []));
         this.animating = signal(false, ...(ngDevMode ? [{ debugName: "animating" }] : []));
+        this.allowAgian = signal(true, ...(ngDevMode ? [{ debugName: "allowAgian" }] : []));
         this.icon = signal('fto-chevron-down', ...(ngDevMode ? [{ debugName: "icon" }] : []));
         this.closeSubject = new Subject();
         this.document = inject(DOCUMENT);
@@ -788,18 +800,22 @@ class XColorPickerComponent extends XColorPickerProperty {
         if (this.disabledComputed())
             return;
         this.enter.set(true);
+        if (!this.clearable())
+            return;
         if (!XIsEmpty(this.value())) {
             this.icon.set('');
-            this.clearable.set(true);
+            this.inputClearable.set(true);
         }
     }
     mleave() {
         if (this.disabledComputed())
             return;
         this.enter.set(false);
-        if (this.clearable()) {
+        if (!this.clearable())
+            return;
+        if (this.inputClearable()) {
             this.icon.set('fto-chevron-down');
-            this.clearable.set(false);
+            this.inputClearable.set(false);
         }
     }
     clearEmit() {
@@ -815,10 +831,14 @@ class XColorPickerComponent extends XColorPickerProperty {
         if (this.portalAttached()) {
             this.portalOverlayRef()?.detach();
             this.active.set(false);
+            this.allowAgian.set(false);
+            of(true)
+                .pipe(delay(200))
+                .subscribe(() => this.allowAgian.set(true));
         }
     }
     showPortal() {
-        if (this.disabledComputed() || this.animating())
+        if (this.disabledComputed() || !this.allowAgian() || this.animating())
             return;
         this.active.set(true);
         const config = {
@@ -901,11 +921,11 @@ class XColorPickerComponent extends XColorPickerProperty {
         this.portalAttached() && this.portalOverlayRef()?.updatePositionStrategy(this.setPlacement());
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.5", type: XColorPickerComponent, isStandalone: true, selector: "x-color-picker", providers: [XValueAccessor(XColorPickerComponent)], viewQueries: [{ propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, read: XInputComponent, isSignal: true }, { propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #colorPicker class=\"x-color-picker\">\r\n  <div class=\"x-color-picker-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label()\"\r\n      [labelWidth]=\"labelWidth()\"\r\n      [labelAlign]=\"labelAlign()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()\"\r\n      [inputValidator]=\"inputValidator()\"\r\n      [icon]=\"icon()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"readonly()\"\r\n      [clearable]=\"clearable()\"\r\n      [(ngModel)]=\"value\"\r\n      [valueTpl]=\"valueTpl() ? valueTpl() : valueTemplate\"\r\n      [valueTplContext]=\"valueTplContext()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"pointer()\"\r\n      [variant]=\"variant()\"\r\n      [floatLabel]=\"floatLabel()\"\r\n      [floatFixed]=\"floatFixed()\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xClick)=\"showPortal()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n\r\n    <ng-template #valueTemplate>\r\n      <div class=\"x-color-picker-template-value\">\r\n        <div\r\n          class=\"x-color-picker-template-color\"\r\n          [style]=\"inputStyle()\"\r\n          [attr.title]=\"inputStyle().backgroundColor\"\r\n        ></div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #panelTemplate>\r\n      <ng-content select=\"[xColorPickerPanel]\"></ng-content>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-color-picker{display:inline-block;width:12rem}.x-color-picker{margin:0;padding:0}.x-color-picker{width:100%}.x-color-picker x-input{width:100%}.x-color-picker x-input .x-input-value-template-value{left:.25rem!important}.x-color-picker-template-value{width:100%;height:100%;padding:.25rem 0;content:\" \";position:absolute;display:flex;align-items:center;justify-content:center}.x-color-picker-template-color{width:100%;height:100%;border-radius:var(--x-border-small-radius)}.x-color-picker .x-input-mini.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-mini) - var(--x-padding-mini) * .5)}.x-color-picker .x-input-mini .x-input-value-template-value{width:calc(100% - var(--x-height-mini))!important}.x-color-picker .x-input-small.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-small) - var(--x-padding-small) * .5)}.x-color-picker .x-input-small .x-input-value-template-value{width:calc(100% - var(--x-height-small))!important}.x-color-picker .x-input-medium.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-medium) - var(--x-padding-medium) * .5)}.x-color-picker .x-input-medium .x-input-value-template-value{width:calc(100% - var(--x-height-medium))!important}.x-color-picker .x-input-large.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-large) - var(--x-padding-large) * .5)}.x-color-picker .x-input-large .x-input-value-template-value{width:calc(100% - var(--x-height-large))!important}.x-color-picker .x-input-big.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-big) - var(--x-padding-big) * .5)}.x-color-picker .x-input-big .x-input-value-template-value{width:calc(100% - var(--x-height-big))!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.5", type: XColorPickerComponent, isStandalone: true, selector: "x-color-picker", providers: [XValueAccessor(XColorPickerComponent)], viewQueries: [{ propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "inputCom", first: true, predicate: ["inputCom"], descendants: true, read: XInputComponent, isSignal: true }, { propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #colorPicker class=\"x-color-picker\">\r\n  <div class=\"x-color-picker-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label()\"\r\n      [labelWidth]=\"labelWidth()\"\r\n      [labelAlign]=\"labelAlign()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()\"\r\n      [inputValidator]=\"inputValidator()\"\r\n      [icon]=\"icon()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"readonly()\"\r\n      [clearable]=\"clearable() && inputClearable()\"\r\n      [(ngModel)]=\"value\"\r\n      [valueTpl]=\"valueTpl() ? valueTpl() : valueTemplate\"\r\n      [valueTplContext]=\"valueTplContext()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"pointer()\"\r\n      [variant]=\"variant()\"\r\n      [floatLabel]=\"floatLabel()\"\r\n      [floatFixed]=\"floatFixed()\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xClick)=\"showPortal()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n\r\n    <ng-template #valueTemplate>\r\n      <div class=\"x-color-picker-template-value\">\r\n        <div\r\n          class=\"x-color-picker-template-color\"\r\n          [style]=\"inputStyleComputed()\"\r\n          [attr.title]=\"inputStyleComputed().backgroundColor\"\r\n        ></div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #panelTemplate>\r\n      <ng-content select=\"[xColorPickerPanel]\"></ng-content>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-color-picker{display:inline-block;width:12rem}.x-color-picker{margin:0;padding:0}.x-color-picker{width:100%}.x-color-picker x-input{width:100%}.x-color-picker x-input .x-input-value-template-value{left:.25rem!important}.x-color-picker-template-value{width:100%;height:100%;padding:.25rem 0;content:\" \";position:absolute;display:flex;align-items:center;justify-content:center}.x-color-picker-template-color{width:100%;height:100%;border-radius:var(--x-border-small-radius)}.x-color-picker .x-input-mini.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-mini) - var(--x-padding-mini) * .5)}.x-color-picker .x-input-mini .x-input-value-template-value{width:calc(100% - var(--x-height-mini))!important}.x-color-picker .x-input-small.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-small) - var(--x-padding-small) * .5)}.x-color-picker .x-input-small .x-input-value-template-value{width:calc(100% - var(--x-height-small))!important}.x-color-picker .x-input-medium.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-medium) - var(--x-padding-medium) * .5)}.x-color-picker .x-input-medium .x-input-value-template-value{width:calc(100% - var(--x-height-medium))!important}.x-color-picker .x-input-large.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-large) - var(--x-padding-large) * .5)}.x-color-picker .x-input-large .x-input-value-template-value{width:calc(100% - var(--x-height-large))!important}.x-color-picker .x-input-big.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-big) - var(--x-padding-big) * .5)}.x-color-picker .x-input-big .x-input-value-template-value{width:calc(100% - var(--x-height-big))!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'x-color-picker', imports: [FormsModule, ReactiveFormsModule, XInputComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XColorPickerComponent)], template: "<div #colorPicker class=\"x-color-picker\">\r\n  <div class=\"x-color-picker-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label()\"\r\n      [labelWidth]=\"labelWidth()\"\r\n      [labelAlign]=\"labelAlign()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()\"\r\n      [inputValidator]=\"inputValidator()\"\r\n      [icon]=\"icon()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"readonly()\"\r\n      [clearable]=\"clearable()\"\r\n      [(ngModel)]=\"value\"\r\n      [valueTpl]=\"valueTpl() ? valueTpl() : valueTemplate\"\r\n      [valueTplContext]=\"valueTplContext()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"pointer()\"\r\n      [variant]=\"variant()\"\r\n      [floatLabel]=\"floatLabel()\"\r\n      [floatFixed]=\"floatFixed()\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xClick)=\"showPortal()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n\r\n    <ng-template #valueTemplate>\r\n      <div class=\"x-color-picker-template-value\">\r\n        <div\r\n          class=\"x-color-picker-template-color\"\r\n          [style]=\"inputStyle()\"\r\n          [attr.title]=\"inputStyle().backgroundColor\"\r\n        ></div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #panelTemplate>\r\n      <ng-content select=\"[xColorPickerPanel]\"></ng-content>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-color-picker{display:inline-block;width:12rem}.x-color-picker{margin:0;padding:0}.x-color-picker{width:100%}.x-color-picker x-input{width:100%}.x-color-picker x-input .x-input-value-template-value{left:.25rem!important}.x-color-picker-template-value{width:100%;height:100%;padding:.25rem 0;content:\" \";position:absolute;display:flex;align-items:center;justify-content:center}.x-color-picker-template-color{width:100%;height:100%;border-radius:var(--x-border-small-radius)}.x-color-picker .x-input-mini.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-mini) - var(--x-padding-mini) * .5)}.x-color-picker .x-input-mini .x-input-value-template-value{width:calc(100% - var(--x-height-mini))!important}.x-color-picker .x-input-small.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-small) - var(--x-padding-small) * .5)}.x-color-picker .x-input-small .x-input-value-template-value{width:calc(100% - var(--x-height-small))!important}.x-color-picker .x-input-medium.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-medium) - var(--x-padding-medium) * .5)}.x-color-picker .x-input-medium .x-input-value-template-value{width:calc(100% - var(--x-height-medium))!important}.x-color-picker .x-input-large.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-large) - var(--x-padding-large) * .5)}.x-color-picker .x-input-large .x-input-value-template-value{width:calc(100% - var(--x-height-large))!important}.x-color-picker .x-input-big.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-big) - var(--x-padding-big) * .5)}.x-color-picker .x-input-big .x-input-value-template-value{width:calc(100% - var(--x-height-big))!important}\n"] }]
+            args: [{ selector: 'x-color-picker', imports: [FormsModule, ReactiveFormsModule, XInputComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XColorPickerComponent)], template: "<div #colorPicker class=\"x-color-picker\">\r\n  <div class=\"x-color-picker-row\">\r\n    <x-input\r\n      #inputCom\r\n      type=\"text\"\r\n      [label]=\"label()\"\r\n      [labelWidth]=\"labelWidth()\"\r\n      [labelAlign]=\"labelAlign()\"\r\n      [justify]=\"justify()\"\r\n      [align]=\"align()\"\r\n      [direction]=\"direction()\"\r\n      [disabled]=\"disabledComputed()\"\r\n      [required]=\"requiredComputed()\"\r\n      [validator]=\"validatorComputed()\"\r\n      [inputValidator]=\"inputValidator()\"\r\n      [icon]=\"icon()\"\r\n      [placeholder]=\"placeholder()\"\r\n      [readonly]=\"readonly()\"\r\n      [clearable]=\"clearable() && inputClearable()\"\r\n      [(ngModel)]=\"value\"\r\n      [valueTpl]=\"valueTpl() ? valueTpl() : valueTemplate\"\r\n      [valueTplContext]=\"valueTplContext()\"\r\n      [size]=\"size()\"\r\n      [bordered]=\"bordered()\"\r\n      [before]=\"before()\"\r\n      [after]=\"after()\"\r\n      [pattern]=\"patternComputed()\"\r\n      [message]=\"messageComputed()\"\r\n      [pointer]=\"pointer()\"\r\n      [variant]=\"variant()\"\r\n      [floatLabel]=\"floatLabel()\"\r\n      [floatFixed]=\"floatFixed()\"\r\n      [(active)]=\"active\"\r\n      (clearEmit)=\"clearEmit()\"\r\n      (xClick)=\"showPortal()\"\r\n      (xMouseenter)=\"menter()\"\r\n      (xMouseleave)=\"mleave()\"\r\n    ></x-input>\r\n\r\n    <ng-template #valueTemplate>\r\n      <div class=\"x-color-picker-template-value\">\r\n        <div\r\n          class=\"x-color-picker-template-color\"\r\n          [style]=\"inputStyleComputed()\"\r\n          [attr.title]=\"inputStyleComputed().backgroundColor\"\r\n        ></div>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #panelTemplate>\r\n      <ng-content select=\"[xColorPickerPanel]\"></ng-content>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-color-picker{display:inline-block;width:12rem}.x-color-picker{margin:0;padding:0}.x-color-picker{width:100%}.x-color-picker x-input{width:100%}.x-color-picker x-input .x-input-value-template-value{left:.25rem!important}.x-color-picker-template-value{width:100%;height:100%;padding:.25rem 0;content:\" \";position:absolute;display:flex;align-items:center;justify-content:center}.x-color-picker-template-color{width:100%;height:100%;border-radius:var(--x-border-small-radius)}.x-color-picker .x-input-mini.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-mini) - var(--x-padding-mini) * .5)}.x-color-picker .x-input-mini .x-input-value-template-value{width:calc(100% - var(--x-height-mini))!important}.x-color-picker .x-input-small.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-small) - var(--x-padding-small) * .5)}.x-color-picker .x-input-small .x-input-value-template-value{width:calc(100% - var(--x-height-small))!important}.x-color-picker .x-input-medium.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-medium) - var(--x-padding-medium) * .5)}.x-color-picker .x-input-medium .x-input-value-template-value{width:calc(100% - var(--x-height-medium))!important}.x-color-picker .x-input-large.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-large) - var(--x-padding-large) * .5)}.x-color-picker .x-input-large .x-input-value-template-value{width:calc(100% - var(--x-height-large))!important}.x-color-picker .x-input-big.x-input-float-label-in>.x-input-row>.x-input-input>.x-input-value-template-value{padding:0!important;margin-top:calc(var(--x-height-big) - var(--x-padding-big) * .5)}.x-color-picker .x-input-big .x-input-value-template-value{width:calc(100% - var(--x-height-big))!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { colorPicker: [{ type: i0.ViewChild, args: ['colorPicker', { ...{ read: (ElementRef) }, isSignal: true }] }], inputCom: [{ type: i0.ViewChild, args: ['inputCom', { ...{ read: XInputComponent }, isSignal: true }] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }] } });
 
 class XColorPickerOptionDirective {