@ng-nest/ui 17.0.11 → 18.0.0

package/esm2022/collapse/collapse.property.mjs

@@ -1,6 +1,5 @@
-import { __decorate } from "tslib";
-import { XProperty, XInputBoolean, XWithConfig } from '@ng-nest/ui/core';
-import { Input, EventEmitter, Output, Component } from '@angular/core';
+import { XProperty, XPropertyFunction, XToBoolean } from '@ng-nest/ui/core';
+import { Component, input, model } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Collapse
@@ -8,65 +7,122 @@ import * as i0 from "@angular/core";
  * @decorator component
  */
 export const XCollapsePrefix = 'x-collapse';
-const X_CONFIG_NAME = 'collapse';
+const X_COLLAPSE_CONFIG_NAME = 'collapse';
 /**
  * Collapse Property
  */
-export class XCollapseProperty extends XProperty {
+export class XCollapseProperty extends XPropertyFunction(X_COLLAPSE_CONFIG_NAME) {
     constructor() {
         super(...arguments);
         /**
-         * @zh_CN 当前激活的面板序号
-         * @en_US The serial number of the currently active panel
+         * @zh_CN 是否以手风琴的方式展示，只展开一个面板
+         * @en_US Whether to display as an accordion, only expand one panel
+         * @example
+         *
+         * ```html
+         * <x-collapse accordion>
+         *   <x-collapse-panel label="Title 1"></x-collapse-panel>
+         *   <x-collapse-panel label="Title 2"></x-collapse-panel>
+         * </x-collapse>
+         * ```
+         *
+         */
+        this.accordion = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 显示的图标
+         * @en_US The icon displayed on the right
+         * @example
+         *
+         * ```html
+         * <x-collapse [icon]="iconTpl">
+         *   <x-collapse-panel label="Title 1"></x-collapse-panel>
+         *   <x-collapse-panel label="Title 2"></x-collapse-panel>
+         * </x-collapse>
+         * <ng-template #iconTpl>
+         *   <x-icon type="ado-caret-right"></x-icon>
+         * </ng-template>
+         * ```
+         *
+         */
+        this.icon = input();
+        /**
+         * @zh_CN 显示/隐藏图标
+         * @en_US Show / hide icon
+         * @example
+         *
+         * ```html
+         * <x-collapse showIcon="false">
+         *   <x-collapse-panel label="Title 1"></x-collapse-panel>
+         *   <x-collapse-panel label="Title 2"></x-collapse-panel>
+         * </x-collapse>
+         * ```
+         *
          */
-        this.active = [];
+        this.showIcon = input(this.config?.showIcon ?? true, { transform: XToBoolean });
         /**
-         * @zh_CN 激活的面板发生变化的事件
-         * @en_US The event that the activated panel changes
+         * @zh_CN 图标位置
+         * @en_US Icon position
+         * @example
+         *
+         * ```html
+         * <x-collapse iconPosition="left">
+         *   <x-collapse-panel label="Title 1"></x-collapse-panel>
+         *   <x-collapse-panel label="Title 2"></x-collapse-panel>
+         * </x-collapse>
+         * ```
+         *
          */
-        this.activeChange = new EventEmitter();
+        this.iconPosition = input(this.config?.iconPosition ?? 'right');
+        /**
+         * @zh_CN 幽灵面板
+         * @en_US Ghost panel
+         * @example
+         *
+         * ```html
+         * <x-collapse ghost>
+         *   <x-collapse-panel label="Title 1"></x-collapse-panel>
+         *   <x-collapse-panel label="Title 2"></x-collapse-panel>
+         * </x-collapse>
+         * ```
+         *
+         */
+        this.ghost = input(this.config?.ghost ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 边框
+         * @en_US border
+         * @example
+         *
+         * ```html
+         * <x-collapse bordered>
+         *   <x-collapse-panel label="Title 1"></x-collapse-panel>
+         *   <x-collapse-panel label="Title 2"></x-collapse-panel>
+         * </x-collapse>
+         * ```
+         *
+         */
+        this.bordered = input(this.config?.bordered ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 当前激活的面板序号
+         * @en_US The serial number of the currently active panel
+         * @example
+         *
+         * ```html
+         * <x-collapse [active]="[0, 1]">
+         *   <x-collapse-panel label="Title 1"></x-collapse-panel>
+         *   <x-collapse-panel label="Title 2"></x-collapse-panel>
+         * </x-collapse>
+         * ```
+         *
+         */
+        this.active = model([]);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCollapseProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XCollapseProperty, selector: "x-collapse-property", inputs: { accordion: "accordion", icon: "icon", showIcon: "showIcon", iconPosition: "iconPosition", ghost: "ghost", bordered: "bordered", active: "active" }, outputs: { activeChange: "activeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCollapseProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XCollapseProperty, selector: "x-collapse-property", inputs: { accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, ghost: { classPropertyName: "ghost", publicName: "ghost", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XInputBoolean()
-], XCollapseProperty.prototype, "accordion", void 0);
-__decorate([
-    XInputBoolean(),
-    XWithConfig(X_CONFIG_NAME, true)
-], XCollapseProperty.prototype, "showIcon", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'right')
-], XCollapseProperty.prototype, "iconPosition", void 0);
-__decorate([
-    XInputBoolean(),
-    XWithConfig(X_CONFIG_NAME, false)
-], XCollapseProperty.prototype, "ghost", void 0);
-__decorate([
-    XInputBoolean(),
-    XWithConfig(X_CONFIG_NAME, false)
-], XCollapseProperty.prototype, "bordered", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCollapseProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCollapseProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XCollapsePrefix}-property`, template: '' }]
-        }], propDecorators: { accordion: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], showIcon: [{
-                type: Input
-            }], iconPosition: [{
-                type: Input
-            }], ghost: [{
-                type: Input
-            }], bordered: [{
-                type: Input
-            }], active: [{
-                type: Input
-            }], activeChange: [{
-                type: Output
-            }] } });
+        }] });
 /**
  * Collapse Panel
  * @selector x-collapse-panel
@@ -77,23 +133,57 @@ export const XCollapsePanelPrefix = 'x-collapse-panel';
  * Collapse Panel Property
  */
 export class XCollapsePanelProperty extends XProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCollapsePanelProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XCollapsePanelProperty, selector: "x-collapse-panel-property", inputs: { label: "label", active: "active", disabled: "disabled" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 标题，支持模板自定义
+         * @en_US Title, support template customization
+         * @example
+         *
+         * ```html
+         * <x-collapse>
+         *   <x-collapse-panel label="Title 1"></x-collapse-panel>
+         *   <x-collapse-panel [label]="labelTpl"></x-collapse-panel>
+         * </x-collapse>
+         * <ng-template #labelTpl>Title 2</ng-template>
+         * ```
+         *
+         */
+        this.label = input();
+        /**
+         * @zh_CN 激活当前面板
+         * @en_US Activate the current panel
+         * @example
+         *
+         * ```html
+         * <x-collapse>
+         *   <x-collapse-panel label="Title 1"></x-collapse-panel>
+         *   <x-collapse-panel label="Title 2" active></x-collapse-panel>
+         * </x-collapse>
+         * ```
+         *
+         */
+        this.active = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 禁用
+         * @en_US disabled
+         * @example
+         *
+         * ```html
+         * <x-collapse>
+         *   <x-collapse-panel label="Title 1"></x-collapse-panel>
+         *   <x-collapse-panel label="Title 2" disabled></x-collapse-panel>
+         * </x-collapse>
+         * ```
+         *
+         */
+        this.disabled = input(false, { transform: XToBoolean });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCollapsePanelProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XCollapsePanelProperty, selector: "x-collapse-panel-property", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XInputBoolean()
-], XCollapsePanelProperty.prototype, "active", void 0);
-__decorate([
-    XInputBoolean()
-], XCollapsePanelProperty.prototype, "disabled", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XCollapsePanelProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XCollapsePanelProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XCollapsePanelPrefix}-property`, template: '' }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], active: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sbGFwc2UucHJvcGVydHkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWIvbmctbmVzdC91aS9jb2xsYXBzZS9jb2xsYXBzZS5wcm9wZXJ0eS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxhQUFhLEVBQWdDLFdBQVcsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQ3ZHLE9BQU8sRUFBRSxLQUFLLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBRXZFOzs7O0dBSUc7QUFDSCxNQUFNLENBQUMsTUFBTSxlQUFlLEdBQUcsWUFBWSxDQUFDO0FBQzVDLE1BQU0sYUFBYSxHQUFHLFVBQVUsQ0FBQztBQUVqQzs7R0FFRztBQUVILE1BQU0sT0FBTyxpQkFBa0IsU0FBUSxTQUFTO0lBRGhEOztRQWdDRTs7O1dBR0c7UUFDTSxXQUFNLEdBQXdCLEVBQUUsQ0FBQztRQUMxQzs7O1dBR0c7UUFDTyxpQkFBWSxHQUFHLElBQUksWUFBWSxFQUF1QixDQUFDO0tBQ2xFO2lJQXpDWSxpQkFBaUI7cUhBQWpCLGlCQUFpQiwyUkFEa0MsRUFBRTs7QUFNdEM7SUFBaEIsYUFBYSxFQUFFO29EQUFzQjtBQVVzQjtJQUEzRCxhQUFhLEVBQUU7SUFBRSxXQUFXLENBQVUsYUFBYSxFQUFFLElBQUksQ0FBQzttREFBb0I7QUFLbkI7SUFBM0QsV0FBVyxDQUF3QixhQUFhLEVBQUUsT0FBTyxDQUFDO3VEQUFzQztBQUtwQztJQUE1RCxhQUFhLEVBQUU7SUFBRSxXQUFXLENBQVUsYUFBYSxFQUFFLEtBQUssQ0FBQztnREFBa0I7QUFLakI7SUFBNUQsYUFBYSxFQUFFO0lBQUUsV0FBVyxDQUFVLGFBQWEsRUFBRSxLQUFLLENBQUM7bURBQXFCOzJGQTlCL0UsaUJBQWlCO2tCQUQ3QixTQUFTO21CQUFDLEVBQUUsUUFBUSxFQUFFLEdBQUcsZUFBZSxXQUFXLEVBQUUsUUFBUSxFQUFFLEVBQUUsRUFBRTs4QkFNeEMsU0FBUztzQkFBbEMsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUs7Z0JBSytELFFBQVE7c0JBQTVFLEtBQUs7Z0JBSytELFlBQVk7c0JBQWhGLEtBQUs7Z0JBS2dFLEtBQUs7c0JBQTFFLEtBQUs7Z0JBS2dFLFFBQVE7c0JBQTdFLEtBQUs7Z0JBS0csTUFBTTtzQkFBZCxLQUFLO2dCQUtJLFlBQVk7c0JBQXJCLE1BQU07O0FBU1Q7Ozs7R0FJRztBQUNILE1BQU0sQ0FBQyxNQUFNLG9CQUFvQixHQUFHLGtCQUFrQixDQUFDO0FBRXZEOztHQUVHO0FBRUgsTUFBTSxPQUFPLHNCQUF1QixTQUFRLFNBQVM7aUlBQXhDLHNCQUFzQjtxSEFBdEIsc0JBQXNCLDRKQURrQyxFQUFFOztBQVczQztJQUFoQixhQUFhLEVBQUU7c0RBQW1CO0FBS2xCO0lBQWhCLGFBQWEsRUFBRTt3REFBcUI7MkZBZm5DLHNCQUFzQjtrQkFEbEMsU0FBUzttQkFBQyxFQUFFLFFBQVEsRUFBRSxHQUFHLG9CQUFvQixXQUFXLEVBQUUsUUFBUSxFQUFFLEVBQUUsRUFBRTs4QkFNOUQsS0FBSztzQkFBYixLQUFLO2dCQUtvQixNQUFNO3NCQUEvQixLQUFLO2dCQUtvQixRQUFRO3NCQUFqQyxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgWFByb3BlcnR5LCBYSW5wdXRCb29sZWFuLCBYVGVtcGxhdGUsIFhOdW1iZXIsIFhCb29sZWFuLCBYV2l0aENvbmZpZyB9IGZyb20gJ0BuZy1uZXN0L3VpL2NvcmUnO1xyXG5pbXBvcnQgeyBJbnB1dCwgRXZlbnRFbWl0dGVyLCBPdXRwdXQsIENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuLyoqXHJcbiAqIENvbGxhcHNlXHJcbiAqIEBzZWxlY3RvciB4LWNvbGxhcHNlXHJcbiAqIEBkZWNvcmF0b3IgY29tcG9uZW50XHJcbiAqL1xyXG5leHBvcnQgY29uc3QgWENvbGxhcHNlUHJlZml4ID0gJ3gtY29sbGFwc2UnO1xyXG5jb25zdCBYX0NPTkZJR19OQU1FID0gJ2NvbGxhcHNlJztcclxuXHJcbi8qKlxyXG4gKiBDb2xsYXBzZSBQcm9wZXJ0eVxyXG4gKi9cclxuQENvbXBvbmVudCh7IHNlbGVjdG9yOiBgJHtYQ29sbGFwc2VQcmVmaXh9LXByb3BlcnR5YCwgdGVtcGxhdGU6ICcnIH0pXHJcbmV4cG9ydCBjbGFzcyBYQ29sbGFwc2VQcm9wZXJ0eSBleHRlbmRzIFhQcm9wZXJ0eSB7XHJcbiAgLyoqXHJcbiAgICogQHpoX0NOIOaYr+WQpuS7peaJi+mjjueQtOeahOaWueW8j+Wxleekuu+8jOWPquWxleW8gOS4gOS4qumdouadv1xyXG4gICAqIEBlbl9VUyBXaGV0aGVyIHRvIGRpc3BsYXkgYXMgYW4gYWNjb3JkaW9uLCBvbmx5IGV4cGFuZCBvbmUgcGFuZWxcclxuICAgKi9cclxuICBASW5wdXQoKSBAWElucHV0Qm9vbGVhbigpIGFjY29yZGlvbj86IFhCb29sZWFuO1xyXG4gIC8qKlxyXG4gICAqIEB6aF9DTiDmmL7npLrnmoTlm77moIdcclxuICAgKiBAZW5fVVMgVGhlIGljb24gZGlzcGxheWVkIG9uIHRoZSByaWdodFxyXG4gICAqL1xyXG4gIEBJbnB1dCgpIGljb24/OiBYVGVtcGxhdGU7XHJcbiAgLyoqXHJcbiAgICogQHpoX0NOIOaYvuekui/pmpDol4/lm77moIdcclxuICAgKiBAZW5fVVMgU2hvdyAvIGhpZGUgaWNvblxyXG4gICAqL1xyXG4gIEBJbnB1dCgpIEBYSW5wdXRCb29sZWFuKCkgQFhXaXRoQ29uZmlnPEJvb2xlYW4+KFhfQ09ORklHX05BTUUsIHRydWUpIHNob3dJY29uPzogQm9vbGVhbjtcclxuICAvKipcclxuICAgKiBAemhfQ04g5Zu+5qCH5L2N572uXHJcbiAgICogQGVuX1VTIEljb24gcG9zaXRpb25cclxuICAgKi9cclxuICBASW5wdXQoKSBAWFdpdGhDb25maWc8WENvbGxhcHNlSWNvblBvc2l0aW9uPihYX0NPTkZJR19OQU1FLCAncmlnaHQnKSBpY29uUG9zaXRpb24/OiBYQ29sbGFwc2VJY29uUG9zaXRpb247XHJcbiAgLyoqXHJcbiAgICogQHpoX0NOIOW5veeBtemdouadv1xyXG4gICAqIEBlbl9VUyBHaG9zdCBwYW5lbFxyXG4gICAqL1xyXG4gIEBJbnB1dCgpIEBYSW5wdXRCb29sZWFuKCkgQFhXaXRoQ29uZmlnPEJvb2xlYW4+KFhfQ09ORklHX05BTUUsIGZhbHNlKSBnaG9zdD86IFhCb29sZWFuO1xyXG4gIC8qKlxyXG4gICAqIEB6aF9DTiDovrnmoYZcclxuICAgKiBAZW5fVVMgYm9yZGVyXHJcbiAgICovXHJcbiAgQElucHV0KCkgQFhJbnB1dEJvb2xlYW4oKSBAWFdpdGhDb25maWc8Qm9vbGVhbj4oWF9DT05GSUdfTkFNRSwgZmFsc2UpIGJvcmRlcmVkPzogWEJvb2xlYW47XHJcbiAgLyoqXHJcbiAgICogQHpoX0NOIOW9k+WJjea/gOa0u+eahOmdouadv+W6j+WPt1xyXG4gICAqIEBlbl9VUyBUaGUgc2VyaWFsIG51bWJlciBvZiB0aGUgY3VycmVudGx5IGFjdGl2ZSBwYW5lbFxyXG4gICAqL1xyXG4gIEBJbnB1dCgpIGFjdGl2ZTogWE51bWJlciB8IFhOdW1iZXJbXSA9IFtdO1xyXG4gIC8qKlxyXG4gICAqIEB6aF9DTiDmv4DmtLvnmoTpnaLmnb/lj5HnlJ/lj5jljJbnmoTkuovku7ZcclxuICAgKiBAZW5fVVMgVGhlIGV2ZW50IHRoYXQgdGhlIGFjdGl2YXRlZCBwYW5lbCBjaGFuZ2VzXHJcbiAgICovXHJcbiAgQE91dHB1dCgpIGFjdGl2ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8WE51bWJlciB8IFhOdW1iZXJbXT4oKTtcclxufVxyXG5cclxuLyoqXHJcbiAqIEB6aF9DTiDlm77moIfkvY3nva5cclxuICogQGVuX1VTIEljb24gcG9zaXRpb25cclxuICovXHJcbmV4cG9ydCB0eXBlIFhDb2xsYXBzZUljb25Qb3NpdGlvbiA9ICdsZWZ0JyB8ICdyaWdodCc7XHJcblxyXG4vKipcclxuICogQ29sbGFwc2UgUGFuZWxcclxuICogQHNlbGVjdG9yIHgtY29sbGFwc2UtcGFuZWxcclxuICogQGRlY29yYXRvciBjb21wb25lbnRcclxuICovXHJcbmV4cG9ydCBjb25zdCBYQ29sbGFwc2VQYW5lbFByZWZpeCA9ICd4LWNvbGxhcHNlLXBhbmVsJztcclxuXHJcbi8qKlxyXG4gKiBDb2xsYXBzZSBQYW5lbCBQcm9wZXJ0eVxyXG4gKi9cclxuQENvbXBvbmVudCh7IHNlbGVjdG9yOiBgJHtYQ29sbGFwc2VQYW5lbFByZWZpeH0tcHJvcGVydHlgLCB0ZW1wbGF0ZTogJycgfSlcclxuZXhwb3J0IGNsYXNzIFhDb2xsYXBzZVBhbmVsUHJvcGVydHkgZXh0ZW5kcyBYUHJvcGVydHkge1xyXG4gIC8qKlxyXG4gICAqIEB6aF9DTiDmoIfpopjvvIzmlK/mjIHmqKHmnb/oh6rlrprkuYlcclxuICAgKiBAZW5fVVMgVGl0bGUsIHN1cHBvcnQgdGVtcGxhdGUgY3VzdG9taXphdGlvblxyXG4gICAqL1xyXG4gIEBJbnB1dCgpIGxhYmVsPzogWFRlbXBsYXRlO1xyXG4gIC8qKlxyXG4gICAqIEB6aF9DTiDmv4DmtLvlvZPliY3pnaLmnb9cclxuICAgKiBAZW5fVVMgQWN0aXZhdGUgdGhlIGN1cnJlbnQgcGFuZWxcclxuICAgKi9cclxuICBASW5wdXQoKSBAWElucHV0Qm9vbGVhbigpIGFjdGl2ZT86IFhCb29sZWFuO1xyXG4gIC8qKlxyXG4gICAqIEB6aF9DTiDnpoHnlKhcclxuICAgKiBAZW5fVVMgZGlzYWJsZWRcclxuICAgKi9cclxuICBASW5wdXQoKSBAWElucHV0Qm9vbGVhbigpIGRpc2FibGVkPzogWEJvb2xlYW47XHJcbn1cclxuIl19
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sbGFwc2UucHJvcGVydHkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWIvbmctbmVzdC91aS9jb2xsYXBzZS9jb2xsYXBzZS5wcm9wZXJ0eS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLGlCQUFpQixFQUFFLFVBQVUsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQzVFLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFHeEQ7Ozs7R0FJRztBQUNILE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxZQUFZLENBQUM7QUFDNUMsTUFBTSxzQkFBc0IsR0FBRyxVQUFVLENBQUM7QUFFMUM7O0dBRUc7QUFFSCxNQUFNLE9BQU8saUJBQWtCLFNBQVEsaUJBQWlCLENBQUMsc0JBQXNCLENBQUM7SUFEaEY7O1FBRUU7Ozs7Ozs7Ozs7OztXQVlHO1FBQ00sY0FBUyxHQUFHLEtBQUssQ0FBb0IsS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxDQUFDLENBQUM7UUFDaEY7Ozs7Ozs7Ozs7Ozs7OztXQWVHO1FBQ00sU0FBSSxHQUFHLEtBQUssRUFBYSxDQUFDO1FBQ25DOzs7Ozs7Ozs7Ozs7V0FZRztRQUNNLGFBQVEsR0FBRyxLQUFLLENBQW9CLElBQUksQ0FBQyxNQUFNLEVBQUUsUUFBUSxJQUFJLElBQUksRUFBRSxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsQ0FBQyxDQUFDO1FBQ3ZHOzs7Ozs7Ozs7Ozs7V0FZRztRQUNNLGlCQUFZLEdBQUcsS0FBSyxDQUF3QixJQUFJLENBQUMsTUFBTSxFQUFFLFlBQVksSUFBSSxPQUFPLENBQUMsQ0FBQztRQUMzRjs7Ozs7Ozs7Ozs7O1dBWUc7UUFDTSxVQUFLLEdBQUcsS0FBSyxDQUFvQixJQUFJLENBQUMsTUFBTSxFQUFFLEtBQUssSUFBSSxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQztRQUNsRzs7Ozs7Ozs7Ozs7O1dBWUc7UUFDTSxhQUFRLEdBQUcsS0FBSyxDQUFvQixJQUFJLENBQUMsTUFBTSxFQUFFLFFBQVEsSUFBSSxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQztRQUN4Rzs7Ozs7Ozs7Ozs7O1dBWUc7UUFDTSxXQUFNLEdBQUcsS0FBSyxDQUFXLEVBQUUsQ0FBQyxDQUFDO0tBQ3ZDO2lJQXRHWSxpQkFBaUI7cUhBQWpCLGlCQUFpQiw4L0JBRGtDLEVBQUU7OzJGQUNyRCxpQkFBaUI7a0JBRDdCLFNBQVM7bUJBQUMsRUFBRSxRQUFRLEVBQUUsR0FBRyxlQUFlLFdBQVcsRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFOztBQStHcEU7Ozs7R0FJRztBQUNILE1BQU0sQ0FBQyxNQUFNLG9CQUFvQixHQUFHLGtCQUFrQixDQUFDO0FBRXZEOztHQUVHO0FBRUgsTUFBTSxPQUFPLHNCQUF1QixTQUFRLFNBQVM7SUFEckQ7O1FBRUU7Ozs7Ozs7Ozs7Ozs7V0FhRztRQUNNLFVBQUssR0FBRyxLQUFLLEVBQWEsQ0FBQztRQUNwQzs7Ozs7Ozs7Ozs7O1dBWUc7UUFDTSxXQUFNLEdBQUcsS0FBSyxDQUFvQixLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQztRQUM3RTs7Ozs7Ozs7Ozs7O1dBWUc7UUFDTSxhQUFRLEdBQUcsS0FBSyxDQUFvQixLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQztLQUNoRjtpSUE1Q1ksc0JBQXNCO3FIQUF0QixzQkFBc0Isd2RBRGtDLEVBQUU7OzJGQUMxRCxzQkFBc0I7a0JBRGxDLFNBQVM7bUJBQUMsRUFBRSxRQUFRLEVBQUUsR0FBRyxvQkFBb0IsV0FBVyxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBYUHJvcGVydHksIFhQcm9wZXJ0eUZ1bmN0aW9uLCBYVG9Cb29sZWFuIH0gZnJvbSAnQG5nLW5lc3QvdWkvY29yZSc7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgaW5wdXQsIG1vZGVsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB0eXBlIHsgWFRlbXBsYXRlLCBYQm9vbGVhbiB9IGZyb20gJ0BuZy1uZXN0L3VpL2NvcmUnO1xyXG5cclxuLyoqXHJcbiAqIENvbGxhcHNlXHJcbiAqIEBzZWxlY3RvciB4LWNvbGxhcHNlXHJcbiAqIEBkZWNvcmF0b3IgY29tcG9uZW50XHJcbiAqL1xyXG5leHBvcnQgY29uc3QgWENvbGxhcHNlUHJlZml4ID0gJ3gtY29sbGFwc2UnO1xyXG5jb25zdCBYX0NPTExBUFNFX0NPTkZJR19OQU1FID0gJ2NvbGxhcHNlJztcclxuXHJcbi8qKlxyXG4gKiBDb2xsYXBzZSBQcm9wZXJ0eVxyXG4gKi9cclxuQENvbXBvbmVudCh7IHNlbGVjdG9yOiBgJHtYQ29sbGFwc2VQcmVmaXh9LXByb3BlcnR5YCwgdGVtcGxhdGU6ICcnIH0pXHJcbmV4cG9ydCBjbGFzcyBYQ29sbGFwc2VQcm9wZXJ0eSBleHRlbmRzIFhQcm9wZXJ0eUZ1bmN0aW9uKFhfQ09MTEFQU0VfQ09ORklHX05BTUUpIHtcclxuICAvKipcclxuICAgKiBAemhfQ04g5piv5ZCm5Lul5omL6aOO55C055qE5pa55byP5bGV56S677yM5Y+q5bGV5byA5LiA5Liq6Z2i5p2/XHJcbiAgICogQGVuX1VTIFdoZXRoZXIgdG8gZGlzcGxheSBhcyBhbiBhY2NvcmRpb24sIG9ubHkgZXhwYW5kIG9uZSBwYW5lbFxyXG4gICAqIEBleGFtcGxlXHJcbiAgICpcclxuICAgKiBgYGBodG1sXHJcbiAgICogPHgtY29sbGFwc2UgYWNjb3JkaW9uPlxyXG4gICAqICAgPHgtY29sbGFwc2UtcGFuZWwgbGFiZWw9XCJUaXRsZSAxXCI+PC94LWNvbGxhcHNlLXBhbmVsPlxyXG4gICAqICAgPHgtY29sbGFwc2UtcGFuZWwgbGFiZWw9XCJUaXRsZSAyXCI+PC94LWNvbGxhcHNlLXBhbmVsPlxyXG4gICAqIDwveC1jb2xsYXBzZT5cclxuICAgKiBgYGBcclxuICAgKlxyXG4gICAqL1xyXG4gIHJlYWRvbmx5IGFjY29yZGlvbiA9IGlucHV0PGJvb2xlYW4sIFhCb29sZWFuPihmYWxzZSwgeyB0cmFuc2Zvcm06IFhUb0Jvb2xlYW4gfSk7XHJcbiAgLyoqXHJcbiAgICogQHpoX0NOIOaYvuekuueahOWbvuagh1xyXG4gICAqIEBlbl9VUyBUaGUgaWNvbiBkaXNwbGF5ZWQgb24gdGhlIHJpZ2h0XHJcbiAgICogQGV4YW1wbGVcclxuICAgKlxyXG4gICAqIGBgYGh0bWxcclxuICAgKiA8eC1jb2xsYXBzZSBbaWNvbl09XCJpY29uVHBsXCI+XHJcbiAgICogICA8eC1jb2xsYXBzZS1wYW5lbCBsYWJlbD1cIlRpdGxlIDFcIj48L3gtY29sbGFwc2UtcGFuZWw+XHJcbiAgICogICA8eC1jb2xsYXBzZS1wYW5lbCBsYWJlbD1cIlRpdGxlIDJcIj48L3gtY29sbGFwc2UtcGFuZWw+XHJcbiAgICogPC94LWNvbGxhcHNlPlxyXG4gICAqIDxuZy10ZW1wbGF0ZSAjaWNvblRwbD5cclxuICAgKiAgIDx4LWljb24gdHlwZT1cImFkby1jYXJldC1yaWdodFwiPjwveC1pY29uPlxyXG4gICAqIDwvbmctdGVtcGxhdGU+XHJcbiAgICogYGBgXHJcbiAgICpcclxuICAgKi9cclxuICByZWFkb25seSBpY29uID0gaW5wdXQ8WFRlbXBsYXRlPigpO1xyXG4gIC8qKlxyXG4gICAqIEB6aF9DTiDmmL7npLov6ZqQ6JeP5Zu+5qCHXHJcbiAgICogQGVuX1VTIFNob3cgLyBoaWRlIGljb25cclxuICAgKiBAZXhhbXBsZVxyXG4gICAqXHJcbiAgICogYGBgaHRtbFxyXG4gICAqIDx4LWNvbGxhcHNlIHNob3dJY29uPVwiZmFsc2VcIj5cclxuICAgKiAgIDx4LWNvbGxhcHNlLXBhbmVsIGxhYmVsPVwiVGl0bGUgMVwiPjwveC1jb2xsYXBzZS1wYW5lbD5cclxuICAgKiAgIDx4LWNvbGxhcHNlLXBhbmVsIGxhYmVsPVwiVGl0bGUgMlwiPjwveC1jb2xsYXBzZS1wYW5lbD5cclxuICAgKiA8L3gtY29sbGFwc2U+XHJcbiAgICogYGBgXHJcbiAgICpcclxuICAgKi9cclxuICByZWFkb25seSBzaG93SWNvbiA9IGlucHV0PGJvb2xlYW4sIFhCb29sZWFuPih0aGlzLmNvbmZpZz8uc2hvd0ljb24gPz8gdHJ1ZSwgeyB0cmFuc2Zvcm06IFhUb0Jvb2xlYW4gfSk7XHJcbiAgLyoqXHJcbiAgICogQHpoX0NOIOWbvuagh+S9jee9rlxyXG4gICAqIEBlbl9VUyBJY29uIHBvc2l0aW9uXHJcbiAgICogQGV4YW1wbGVcclxuICAgKlxyXG4gICAqIGBgYGh0bWxcclxuICAgKiA8eC1jb2xsYXBzZSBpY29uUG9zaXRpb249XCJsZWZ0XCI+XHJcbiAgICogICA8eC1jb2xsYXBzZS1wYW5lbCBsYWJlbD1cIlRpdGxlIDFcIj48L3gtY29sbGFwc2UtcGFuZWw+XHJcbiAgICogICA8eC1jb2xsYXBzZS1wYW5lbCBsYWJlbD1cIlRpdGxlIDJcIj48L3gtY29sbGFwc2UtcGFuZWw+XHJcbiAgICogPC94LWNvbGxhcHNlPlxyXG4gICAqIGBgYFxyXG4gICAqXHJcbiAgICovXHJcbiAgcmVhZG9ubHkgaWNvblBvc2l0aW9uID0gaW5wdXQ8WENvbGxhcHNlSWNvblBvc2l0aW9uPih0aGlzLmNvbmZpZz8uaWNvblBvc2l0aW9uID8/ICdyaWdodCcpO1xyXG4gIC8qKlxyXG4gICAqIEB6aF9DTiDlub3ngbXpnaLmnb9cclxuICAgKiBAZW5fVVMgR2hvc3QgcGFuZWxcclxuICAgKiBAZXhhbXBsZVxyXG4gICAqXHJcbiAgICogYGBgaHRtbFxyXG4gICAqIDx4LWNvbGxhcHNlIGdob3N0PlxyXG4gICAqICAgPHgtY29sbGFwc2UtcGFuZWwgbGFiZWw9XCJUaXRsZSAxXCI+PC94LWNvbGxhcHNlLXBhbmVsPlxyXG4gICAqICAgPHgtY29sbGFwc2UtcGFuZWwgbGFiZWw9XCJUaXRsZSAyXCI+PC94LWNvbGxhcHNlLXBhbmVsPlxyXG4gICAqIDwveC1jb2xsYXBzZT5cclxuICAgKiBgYGBcclxuICAgKlxyXG4gICAqL1xyXG4gIHJlYWRvbmx5IGdob3N0ID0gaW5wdXQ8Ym9vbGVhbiwgWEJvb2xlYW4+KHRoaXMuY29uZmlnPy5naG9zdCA/PyBmYWxzZSwgeyB0cmFuc2Zvcm06IFhUb0Jvb2xlYW4gfSk7XHJcbiAgLyoqXHJcbiAgICogQHpoX0NOIOi+ueahhlxyXG4gICAqIEBlbl9VUyBib3JkZXJcclxuICAgKiBAZXhhbXBsZVxyXG4gICAqXHJcbiAgICogYGBgaHRtbFxyXG4gICAqIDx4LWNvbGxhcHNlIGJvcmRlcmVkPlxyXG4gICAqICAgPHgtY29sbGFwc2UtcGFuZWwgbGFiZWw9XCJUaXRsZSAxXCI+PC94LWNvbGxhcHNlLXBhbmVsPlxyXG4gICAqICAgPHgtY29sbGFwc2UtcGFuZWwgbGFiZWw9XCJUaXRsZSAyXCI+PC94LWNvbGxhcHNlLXBhbmVsPlxyXG4gICAqIDwveC1jb2xsYXBzZT5cclxuICAgKiBgYGBcclxuICAgKlxyXG4gICAqL1xyXG4gIHJlYWRvbmx5IGJvcmRlcmVkID0gaW5wdXQ8Ym9vbGVhbiwgWEJvb2xlYW4+KHRoaXMuY29uZmlnPy5ib3JkZXJlZCA/PyBmYWxzZSwgeyB0cmFuc2Zvcm06IFhUb0Jvb2xlYW4gfSk7XHJcbiAgLyoqXHJcbiAgICogQHpoX0NOIOW9k+WJjea/gOa0u+eahOmdouadv+W6j+WPt1xyXG4gICAqIEBlbl9VUyBUaGUgc2VyaWFsIG51bWJlciBvZiB0aGUgY3VycmVudGx5IGFjdGl2ZSBwYW5lbFxyXG4gICAqIEBleGFtcGxlXHJcbiAgICpcclxuICAgKiBgYGBodG1sXHJcbiAgICogPHgtY29sbGFwc2UgW2FjdGl2ZV09XCJbMCwgMV1cIj5cclxuICAgKiAgIDx4LWNvbGxhcHNlLXBhbmVsIGxhYmVsPVwiVGl0bGUgMVwiPjwveC1jb2xsYXBzZS1wYW5lbD5cclxuICAgKiAgIDx4LWNvbGxhcHNlLXBhbmVsIGxhYmVsPVwiVGl0bGUgMlwiPjwveC1jb2xsYXBzZS1wYW5lbD5cclxuICAgKiA8L3gtY29sbGFwc2U+XHJcbiAgICogYGBgXHJcbiAgICpcclxuICAgKi9cclxuICByZWFkb25seSBhY3RpdmUgPSBtb2RlbDxudW1iZXJbXT4oW10pO1xyXG59XHJcblxyXG4vKipcclxuICogQHpoX0NOIOWbvuagh+S9jee9rlxyXG4gKiBAZW5fVVMgSWNvbiBwb3NpdGlvblxyXG4gKi9cclxuZXhwb3J0IHR5cGUgWENvbGxhcHNlSWNvblBvc2l0aW9uID0gJ2xlZnQnIHwgJ3JpZ2h0JztcclxuXHJcbi8qKlxyXG4gKiBDb2xsYXBzZSBQYW5lbFxyXG4gKiBAc2VsZWN0b3IgeC1jb2xsYXBzZS1wYW5lbFxyXG4gKiBAZGVjb3JhdG9yIGNvbXBvbmVudFxyXG4gKi9cclxuZXhwb3J0IGNvbnN0IFhDb2xsYXBzZVBhbmVsUHJlZml4ID0gJ3gtY29sbGFwc2UtcGFuZWwnO1xyXG5cclxuLyoqXHJcbiAqIENvbGxhcHNlIFBhbmVsIFByb3BlcnR5XHJcbiAqL1xyXG5AQ29tcG9uZW50KHsgc2VsZWN0b3I6IGAke1hDb2xsYXBzZVBhbmVsUHJlZml4fS1wcm9wZXJ0eWAsIHRlbXBsYXRlOiAnJyB9KVxyXG5leHBvcnQgY2xhc3MgWENvbGxhcHNlUGFuZWxQcm9wZXJ0eSBleHRlbmRzIFhQcm9wZXJ0eSB7XHJcbiAgLyoqXHJcbiAgICogQHpoX0NOIOagh+mimO+8jOaUr+aMgeaooeadv+iHquWumuS5iVxyXG4gICAqIEBlbl9VUyBUaXRsZSwgc3VwcG9ydCB0ZW1wbGF0ZSBjdXN0b21pemF0aW9uXHJcbiAgICogQGV4YW1wbGVcclxuICAgKlxyXG4gICAqIGBgYGh0bWxcclxuICAgKiA8eC1jb2xsYXBzZT5cclxuICAgKiAgIDx4LWNvbGxhcHNlLXBhbmVsIGxhYmVsPVwiVGl0bGUgMVwiPjwveC1jb2xsYXBzZS1wYW5lbD5cclxuICAgKiAgIDx4LWNvbGxhcHNlLXBhbmVsIFtsYWJlbF09XCJsYWJlbFRwbFwiPjwveC1jb2xsYXBzZS1wYW5lbD5cclxuICAgKiA8L3gtY29sbGFwc2U+XHJcbiAgICogPG5nLXRlbXBsYXRlICNsYWJlbFRwbD5UaXRsZSAyPC9uZy10ZW1wbGF0ZT5cclxuICAgKiBgYGBcclxuICAgKlxyXG4gICAqL1xyXG4gIHJlYWRvbmx5IGxhYmVsID0gaW5wdXQ8WFRlbXBsYXRlPigpO1xyXG4gIC8qKlxyXG4gICAqIEB6aF9DTiDmv4DmtLvlvZPliY3pnaLmnb9cclxuICAgKiBAZW5fVVMgQWN0aXZhdGUgdGhlIGN1cnJlbnQgcGFuZWxcclxuICAgKiBAZXhhbXBsZVxyXG4gICAqXHJcbiAgICogYGBgaHRtbFxyXG4gICAqIDx4LWNvbGxhcHNlPlxyXG4gICAqICAgPHgtY29sbGFwc2UtcGFuZWwgbGFiZWw9XCJUaXRsZSAxXCI+PC94LWNvbGxhcHNlLXBhbmVsPlxyXG4gICAqICAgPHgtY29sbGFwc2UtcGFuZWwgbGFiZWw9XCJUaXRsZSAyXCIgYWN0aXZlPjwveC1jb2xsYXBzZS1wYW5lbD5cclxuICAgKiA8L3gtY29sbGFwc2U+XHJcbiAgICogYGBgXHJcbiAgICpcclxuICAgKi9cclxuICByZWFkb25seSBhY3RpdmUgPSBpbnB1dDxib29sZWFuLCBYQm9vbGVhbj4oZmFsc2UsIHsgdHJhbnNmb3JtOiBYVG9Cb29sZWFuIH0pO1xyXG4gIC8qKlxyXG4gICAqIEB6aF9DTiDnpoHnlKhcclxuICAgKiBAZW5fVVMgZGlzYWJsZWRcclxuICAgKiBAZXhhbXBsZVxyXG4gICAqXHJcbiAgICogYGBgaHRtbFxyXG4gICAqIDx4LWNvbGxhcHNlPlxyXG4gICAqICAgPHgtY29sbGFwc2UtcGFuZWwgbGFiZWw9XCJUaXRsZSAxXCI+PC94LWNvbGxhcHNlLXBhbmVsPlxyXG4gICAqICAgPHgtY29sbGFwc2UtcGFuZWwgbGFiZWw9XCJUaXRsZSAyXCIgZGlzYWJsZWQ+PC94LWNvbGxhcHNlLXBhbmVsPlxyXG4gICAqIDwveC1jb2xsYXBzZT5cclxuICAgKiBgYGBcclxuICAgKlxyXG4gICAqL1xyXG4gIHJlYWRvbmx5IGRpc2FibGVkID0gaW5wdXQ8Ym9vbGVhbiwgWEJvb2xlYW4+KGZhbHNlLCB7IHRyYW5zZm9ybTogWFRvQm9vbGVhbiB9KTtcclxufVxyXG4iXX0=

package/esm2022/color/color.component.mjs

@@ -1,36 +1,35 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Renderer2, ElementRef, inject } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, inject, computed, HostBinding } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { XColorPrefix, XColorProperty } from './color.property';
-import { toHex, mixColors, XConfigService, XComputed } from '@ng-nest/ui/core';
+import { XToHex, XMixColors, XComputed } from '@ng-nest/ui/core';
 import * as i0 from "@angular/core";
 export class XColorComponent extends XColorProperty {
     constructor() {
         super(...arguments);
-        this.colors = [];
+        this.className = XColorPrefix;
         this.doc = inject(DOCUMENT);
-        this.renderer = inject(Renderer2);
-        this.elementRef = inject(ElementRef);
-        this.configService = inject(XConfigService);
+        this.hexSignal = computed(() => {
+            if (!this.hex() || this.hex() === 'var(--x-primary)') {
+                return XComputed(this.doc.documentElement).getPropertyValue('--x-primary');
+            }
+            return this.hex();
+        });
+        this.colors = computed(() => {
+            const colors = [];
+            for (let amount of this.amounts()) {
+                colors.push(XToHex(XMixColors(this.merge(), this.hexSignal().trim(), amount)));
+            }
+            return colors;
+        });
     }
-    ngOnInit() {
-        this.renderer.addClass(this.elementRef.nativeElement, XColorPrefix);
-        if (!this.hex || this.hex === 'var(--x-primary)')
-            this.hex = XComputed(this.doc.documentElement).getPropertyValue('--x-primary');
-        if (this.hex)
-            this.setColors();
-    }
-    setColors() {
-        let colors = [];
-        for (let amount of this.amounts) {
-            colors.push(toHex(mixColors(this.merge, this.hex.trim(), amount)));
-        }
-        this.colors = colors;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XColorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: XColorComponent, isStandalone: true, selector: "x-color", usesInheritance: true, ngImport: i0, template: "<div class=\"x-color-box\">\r\n  <div class=\"x-color-primary\" [style.background-color]=\"hex\" [class.x-color-only]=\"colors.length === 0\">\r\n    <span>{{ label }}</span>\r\n    <span class=\"x-color-hex\">{{ hex }}</span>\r\n  </div>\r\n  <div class=\"x-color-gradual\">\r\n    @for (color of colors; track color; let i = $index) {\r\n      <div class=\"x-color-item\" [style.background-color]=\"color\"></div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".x-color{margin:0;padding:0;display:block;color:var(--x-white)}.x-color-primary{padding:1rem;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.x-color-only{border-bottom-left-radius:.125rem;border-bottom-right-radius:.125rem}.x-color-hex{margin-top:.25rem;display:block;font-size:.75rem;opacity:.7}.x-color-gradual{display:flex}.x-color-item{flex:1;height:2.5rem}.x-color-item:first-child{border-bottom-left-radius:.125rem}.x-color-item:last-child{border-bottom-right-radius:.125rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XColorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XColorComponent, isStandalone: true, selector: "x-color", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"x-color-box\">\r\n  <div class=\"x-color-primary\" [style.background-color]=\"hexSignal()\" [class.x-color-only]=\"colors().length === 0\">\r\n    <span>{{ label() }}</span>\r\n    <span class=\"x-color-hex\">{{ hexSignal() }}</span>\r\n  </div>\r\n  <div class=\"x-color-gradual\">\r\n    @for (color of colors(); track color) {\r\n      <div class=\"x-color-item\" [style.background-color]=\"color\"></div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".x-color{margin:0;padding:0;display:block;color:var(--x-white)}.x-color-primary{padding:1rem;border-top-left-radius:var(--x-border-radius);border-top-right-radius:var(--x-border-radius)}.x-color-only{border-bottom-left-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.x-color-hex{margin-top:.25rem;display:block;font-size:var(--x-font-size-small);opacity:.7}.x-color-gradual{display:flex}.x-color-item{flex:1;height:2.5rem}.x-color-item:first-child{border-bottom-left-radius:var(--x-border-radius)}.x-color-item:last-child{border-bottom-right-radius:var(--x-border-radius)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XColorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XColorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'x-color', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-color-box\">\r\n  <div class=\"x-color-primary\" [style.background-color]=\"hex\" [class.x-color-only]=\"colors.length === 0\">\r\n    <span>{{ label }}</span>\r\n    <span class=\"x-color-hex\">{{ hex }}</span>\r\n  </div>\r\n  <div class=\"x-color-gradual\">\r\n    @for (color of colors; track color; let i = $index) {\r\n      <div class=\"x-color-item\" [style.background-color]=\"color\"></div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".x-color{margin:0;padding:0;display:block;color:var(--x-white)}.x-color-primary{padding:1rem;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.x-color-only{border-bottom-left-radius:.125rem;border-bottom-right-radius:.125rem}.x-color-hex{margin-top:.25rem;display:block;font-size:.75rem;opacity:.7}.x-color-gradual{display:flex}.x-color-item{flex:1;height:2.5rem}.x-color-item:first-child{border-bottom-left-radius:.125rem}.x-color-item:last-child{border-bottom-right-radius:.125rem}\n"] }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGliL25nLW5lc3QvdWkvY29sb3IvY29sb3IuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vbGliL25nLW5lc3QvdWkvY29sb3IvY29sb3IuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFFVCxpQkFBaUIsRUFDakIsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsTUFBTSxFQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMzQyxPQUFPLEVBQUUsWUFBWSxFQUFFLGNBQWMsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQ2hFLE9BQU8sRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLGNBQWMsRUFBRSxTQUFTLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7QUFVL0UsTUFBTSxPQUFPLGVBQWdCLFNBQVEsY0FBYztJQVJuRDs7UUFTRSxXQUFNLEdBQWEsRUFBRSxDQUFDO1FBQ2QsUUFBRyxHQUFHLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN2QixhQUFRLEdBQUcsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBQzdCLGVBQVUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDeEMsa0JBQWEsR0FBRyxNQUFNLENBQUMsY0FBYyxDQUFDLENBQUM7S0FnQnhDO0lBZEMsUUFBUTtRQUNOLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLFlBQVksQ0FBQyxDQUFDO1FBQ3BFLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxJQUFJLElBQUksQ0FBQyxHQUFHLEtBQUssa0JBQWtCO1lBQzlDLElBQUksQ0FBQyxHQUFHLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsZUFBZSxDQUFDLENBQUMsZ0JBQWdCLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDakYsSUFBSSxJQUFJLENBQUMsR0FBRztZQUFFLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNqQyxDQUFDO0lBRUQsU0FBUztRQUNQLElBQUksTUFBTSxHQUFHLEVBQUUsQ0FBQztRQUNoQixLQUFLLElBQUksTUFBTSxJQUFJLElBQUksQ0FBQyxPQUF3QixFQUFFO1lBQ2hELE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsS0FBZSxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxFQUFFLEVBQUUsTUFBZ0IsQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUN4RjtRQUNELElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO0lBQ3ZCLENBQUM7aUlBcEJVLGVBQWU7cUhBQWYsZUFBZSwwRkNyQjVCLG9jQVdBOzsyRkRVYSxlQUFlO2tCQVIzQixTQUFTOytCQUNFLFNBQVMsY0FDUCxJQUFJLGlCQUdELGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIENvbXBvbmVudCxcclxuICBPbkluaXQsXHJcbiAgVmlld0VuY2Fwc3VsYXRpb24sXHJcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXHJcbiAgUmVuZGVyZXIyLFxyXG4gIEVsZW1lbnRSZWYsXHJcbiAgaW5qZWN0XHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IERPQ1VNRU5UIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgWENvbG9yUHJlZml4LCBYQ29sb3JQcm9wZXJ0eSB9IGZyb20gJy4vY29sb3IucHJvcGVydHknO1xyXG5pbXBvcnQgeyB0b0hleCwgbWl4Q29sb3JzLCBYQ29uZmlnU2VydmljZSwgWENvbXB1dGVkIH0gZnJvbSAnQG5nLW5lc3QvdWkvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3gtY29sb3InLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2NvbG9yLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9zdHlsZS9pbmRleC5zY3NzJ10sXHJcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxyXG59KVxyXG5leHBvcnQgY2xhc3MgWENvbG9yQ29tcG9uZW50IGV4dGVuZHMgWENvbG9yUHJvcGVydHkgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIGNvbG9yczogc3RyaW5nW10gPSBbXTtcclxuICBwcml2YXRlIGRvYyA9IGluamVjdChET0NVTUVOVCk7XHJcbiAgcHJpdmF0ZSByZW5kZXJlciA9IGluamVjdChSZW5kZXJlcjIpO1xyXG4gIHByaXZhdGUgZWxlbWVudFJlZiA9IGluamVjdChFbGVtZW50UmVmKTtcclxuICBjb25maWdTZXJ2aWNlID0gaW5qZWN0KFhDb25maWdTZXJ2aWNlKTtcclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCBYQ29sb3JQcmVmaXgpO1xyXG4gICAgaWYgKCF0aGlzLmhleCB8fCB0aGlzLmhleCA9PT0gJ3ZhcigtLXgtcHJpbWFyeSknKVxyXG4gICAgICB0aGlzLmhleCA9IFhDb21wdXRlZCh0aGlzLmRvYy5kb2N1bWVudEVsZW1lbnQpLmdldFByb3BlcnR5VmFsdWUoJy0teC1wcmltYXJ5Jyk7XHJcbiAgICBpZiAodGhpcy5oZXgpIHRoaXMuc2V0Q29sb3JzKCk7XHJcbiAgfVxyXG5cclxuICBzZXRDb2xvcnMoKSB7XHJcbiAgICBsZXQgY29sb3JzID0gW107XHJcbiAgICBmb3IgKGxldCBhbW91bnQgb2YgdGhpcy5hbW91bnRzIGFzIEFycmF5PG51bWJlcj4pIHtcclxuICAgICAgY29sb3JzLnB1c2godG9IZXgobWl4Q29sb3JzKHRoaXMubWVyZ2UgYXMgc3RyaW5nLCB0aGlzLmhleC50cmltKCksIGFtb3VudCBhcyBudW1iZXIpKSk7XHJcbiAgICB9XHJcbiAgICB0aGlzLmNvbG9ycyA9IGNvbG9ycztcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cIngtY29sb3ItYm94XCI+XHJcbiAgPGRpdiBjbGFzcz1cIngtY29sb3ItcHJpbWFyeVwiIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cImhleFwiIFtjbGFzcy54LWNvbG9yLW9ubHldPVwiY29sb3JzLmxlbmd0aCA9PT0gMFwiPlxyXG4gICAgPHNwYW4+e3sgbGFiZWwgfX08L3NwYW4+XHJcbiAgICA8c3BhbiBjbGFzcz1cIngtY29sb3ItaGV4XCI+e3sgaGV4IH19PC9zcGFuPlxyXG4gIDwvZGl2PlxyXG4gIDxkaXYgY2xhc3M9XCJ4LWNvbG9yLWdyYWR1YWxcIj5cclxuICAgIEBmb3IgKGNvbG9yIG9mIGNvbG9yczsgdHJhY2sgY29sb3I7IGxldCBpID0gJGluZGV4KSB7XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJ4LWNvbG9yLWl0ZW1cIiBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJjb2xvclwiPjwvZGl2PlxyXG4gICAgfVxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19
+            args: [{ selector: XColorPrefix, standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-color-box\">\r\n  <div class=\"x-color-primary\" [style.background-color]=\"hexSignal()\" [class.x-color-only]=\"colors().length === 0\">\r\n    <span>{{ label() }}</span>\r\n    <span class=\"x-color-hex\">{{ hexSignal() }}</span>\r\n  </div>\r\n  <div class=\"x-color-gradual\">\r\n    @for (color of colors(); track color) {\r\n      <div class=\"x-color-item\" [style.background-color]=\"color\"></div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".x-color{margin:0;padding:0;display:block;color:var(--x-white)}.x-color-primary{padding:1rem;border-top-left-radius:var(--x-border-radius);border-top-right-radius:var(--x-border-radius)}.x-color-only{border-bottom-left-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.x-color-hex{margin-top:.25rem;display:block;font-size:var(--x-font-size-small);opacity:.7}.x-color-gradual{display:flex}.x-color-item{flex:1;height:2.5rem}.x-color-item:first-child{border-bottom-left-radius:var(--x-border-radius)}.x-color-item:last-child{border-bottom-right-radius:var(--x-border-radius)}\n"] }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGliL25nLW5lc3QvdWkvY29sb3IvY29sb3IuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vbGliL25nLW5lc3QvdWkvY29sb3IvY29sb3IuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBRSx1QkFBdUIsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNySCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDM0MsT0FBTyxFQUFFLFlBQVksRUFBRSxjQUFjLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNoRSxPQUFPLEVBQUUsTUFBTSxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7QUFVakUsTUFBTSxPQUFPLGVBQWdCLFNBQVEsY0FBYztJQVJuRDs7UUFTd0IsY0FBUyxHQUFHLFlBQVksQ0FBQztRQUN2QyxRQUFHLEdBQUcsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBRS9CLGNBQVMsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFO1lBQ3hCLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLElBQUksSUFBSSxDQUFDLEdBQUcsRUFBRSxLQUFLLGtCQUFrQixFQUFFLENBQUM7Z0JBQ3JELE9BQU8sU0FBUyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsZUFBZSxDQUFDLENBQUMsZ0JBQWdCLENBQUMsYUFBYSxDQUFDLENBQUM7WUFDN0UsQ0FBQztZQUNELE9BQU8sSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDO1FBQ3BCLENBQUMsQ0FBQyxDQUFDO1FBRUgsV0FBTSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDckIsTUFBTSxNQUFNLEdBQUcsRUFBRSxDQUFDO1lBQ2xCLEtBQUssSUFBSSxNQUFNLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUM7Z0JBQ2xDLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLEVBQUUsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLElBQUksRUFBRSxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUNqRixDQUFDO1lBQ0QsT0FBTyxNQUFNLENBQUM7UUFDaEIsQ0FBQyxDQUFDLENBQUM7S0FDSjtpSUFsQlksZUFBZTtxSEFBZixlQUFlLCtJQ2I1QiwwY0FXQTs7MkZERWEsZUFBZTtrQkFSM0IsU0FBUzsrQkFDRSxZQUFZLGNBQ1YsSUFBSSxpQkFHRCxpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNOzhCQUd6QixTQUFTO3NCQUE5QixXQUFXO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIFZpZXdFbmNhcHN1bGF0aW9uLCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgaW5qZWN0LCBjb21wdXRlZCwgSG9zdEJpbmRpbmcgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRE9DVU1FTlQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBYQ29sb3JQcmVmaXgsIFhDb2xvclByb3BlcnR5IH0gZnJvbSAnLi9jb2xvci5wcm9wZXJ0eSc7XHJcbmltcG9ydCB7IFhUb0hleCwgWE1peENvbG9ycywgWENvbXB1dGVkIH0gZnJvbSAnQG5nLW5lc3QvdWkvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogWENvbG9yUHJlZml4LFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2NvbG9yLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9zdHlsZS9pbmRleC5zY3NzJ10sXHJcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxyXG59KVxyXG5leHBvcnQgY2xhc3MgWENvbG9yQ29tcG9uZW50IGV4dGVuZHMgWENvbG9yUHJvcGVydHkge1xyXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKSBjbGFzc05hbWUgPSBYQ29sb3JQcmVmaXg7XHJcbiAgcHJpdmF0ZSBkb2MgPSBpbmplY3QoRE9DVU1FTlQpO1xyXG5cclxuICBoZXhTaWduYWwgPSBjb21wdXRlZCgoKSA9PiB7XHJcbiAgICBpZiAoIXRoaXMuaGV4KCkgfHwgdGhpcy5oZXgoKSA9PT0gJ3ZhcigtLXgtcHJpbWFyeSknKSB7XHJcbiAgICAgIHJldHVybiBYQ29tcHV0ZWQodGhpcy5kb2MuZG9jdW1lbnRFbGVtZW50KS5nZXRQcm9wZXJ0eVZhbHVlKCctLXgtcHJpbWFyeScpO1xyXG4gICAgfVxyXG4gICAgcmV0dXJuIHRoaXMuaGV4KCk7XHJcbiAgfSk7XHJcblxyXG4gIGNvbG9ycyA9IGNvbXB1dGVkKCgpID0+IHtcclxuICAgIGNvbnN0IGNvbG9ycyA9IFtdO1xyXG4gICAgZm9yIChsZXQgYW1vdW50IG9mIHRoaXMuYW1vdW50cygpKSB7XHJcbiAgICAgIGNvbG9ycy5wdXNoKFhUb0hleChYTWl4Q29sb3JzKHRoaXMubWVyZ2UoKSwgdGhpcy5oZXhTaWduYWwoKS50cmltKCksIGFtb3VudCkpKTtcclxuICAgIH1cclxuICAgIHJldHVybiBjb2xvcnM7XHJcbiAgfSk7XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cIngtY29sb3ItYm94XCI+XHJcbiAgPGRpdiBjbGFzcz1cIngtY29sb3ItcHJpbWFyeVwiIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cImhleFNpZ25hbCgpXCIgW2NsYXNzLngtY29sb3Itb25seV09XCJjb2xvcnMoKS5sZW5ndGggPT09IDBcIj5cclxuICAgIDxzcGFuPnt7IGxhYmVsKCkgfX08L3NwYW4+XHJcbiAgICA8c3BhbiBjbGFzcz1cIngtY29sb3ItaGV4XCI+e3sgaGV4U2lnbmFsKCkgfX08L3NwYW4+XHJcbiAgPC9kaXY+XHJcbiAgPGRpdiBjbGFzcz1cIngtY29sb3ItZ3JhZHVhbFwiPlxyXG4gICAgQGZvciAoY29sb3Igb2YgY29sb3JzKCk7IHRyYWNrIGNvbG9yKSB7XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJ4LWNvbG9yLWl0ZW1cIiBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJjb2xvclwiPjwvZGl2PlxyXG4gICAgfVxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19

package/esm2022/color/color.module.mjs

@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { XColorComponent } from './color.component';
 import * as i0 from "@angular/core";
 export class XColorModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XColorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: XColorModule, imports: [XColorComponent], exports: [XColorComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XColorModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XColorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XColorModule, imports: [XColorComponent], exports: [XColorComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XColorModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XColorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XColorModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XColorComponent],

package/esm2022/color/color.property.mjs

@@ -1,6 +1,5 @@
-import { __decorate } from "tslib";
-import { XProperty, XWithConfig } from '@ng-nest/ui/core';
-import { Input, Component } from '@angular/core';
+import { XPropertyFunction } from '@ng-nest/ui/core';
+import { Component, input } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Color
@@ -8,44 +7,65 @@ import * as i0 from "@angular/core";
  * @decorator component
  */
 export const XColorPrefix = 'x-color';
-const X_CONFIG_NAME = 'color';
-export const XAmounts = [-0.1, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
+const X_COLOR_CONFIG_NAME = 'color';
 /**
  * Color Property
  */
-export class XColorProperty extends XProperty {
+export class XColorProperty extends XPropertyFunction(X_COLOR_CONFIG_NAME) {
     constructor() {
         super(...arguments);
         /**
          * @zh_CN 颜色名称
          * @en_US Color name
+         * @example
+         *
+         * ```html
+         * <x-color label="primary"></x-color>
+         * ```
+         *
          */
-        this.label = 'color';
+        this.label = input('color');
         /**
          * @zh_CN 十六进制颜色码，此处默认读取 css 变量中的主色
          * @en_US Hexadecimal color code, here the main color in the css variable is read by default
+         * @default 'var(--x-primary)'
+         * @example
+         *
+         * ```html
+         * <x-color hex="#67c23a"></x-color>
+         * ```
+         *
          */
-        this.hex = 'var(--x-primary)';
+        this.hex = input('var(--x-primary)');
+        /**
+         * @zh_CN 混合的颜色
+         * @en_US Mixed colors
+         * @example
+         *
+         * ```html
+         * <x-color merge="#ffffff"></x-color>
+         * ```
+         *
+         */
+        this.merge = input(this.config?.merge ?? '#ffffff');
+        /**
+         * @zh_CN 混合的颜色占比
+         * @en_US Proportion of mixed colors
+         * @default [-0.1, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]
+         * @example
+         *
+         * ```html
+         * <x-color [amounts]="[0.8, 0.9]"></x-color>
+         * ```
+         *
+         */
+        this.amounts = input(this.config?.amounts ?? [-0.1, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XColorProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: XColorProperty, selector: "x-color-property", inputs: { label: "label", hex: "hex", merge: "merge", amounts: "amounts" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XColorProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XColorProperty, selector: "x-color-property", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hex: { classPropertyName: "hex", publicName: "hex", isSignal: true, isRequired: false, transformFunction: null }, merge: { classPropertyName: "merge", publicName: "merge", isSignal: true, isRequired: false, transformFunction: null }, amounts: { classPropertyName: "amounts", publicName: "amounts", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XWithConfig(X_CONFIG_NAME, '#ffffff')
-], XColorProperty.prototype, "merge", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, XAmounts)
-], XColorProperty.prototype, "amounts", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: XColorProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XColorProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XColorPrefix}-property`, template: '' }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], hex: [{
-                type: Input
-            }], merge: [{
-                type: Input
-            }], amounts: [{
-                type: Input
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3IucHJvcGVydHkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWIvbmctbmVzdC91aS9jb2xvci9jb2xvci5wcm9wZXJ0eS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVyxXQUFXLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNuRSxPQUFPLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFFakQ7Ozs7R0FJRztBQUNILE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxTQUFTLENBQUM7QUFFdEMsTUFBTSxhQUFhLEdBQUcsT0FBTyxDQUFDO0FBRTlCLE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxDQUFDLENBQUMsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxDQUFDLENBQUM7QUFFNUU7O0dBRUc7QUFFSCxNQUFNLE9BQU8sY0FBZSxTQUFRLFNBQVM7SUFEN0M7O1FBRUU7OztXQUdHO1FBQ00sVUFBSyxHQUFXLE9BQU8sQ0FBQztRQUNqQzs7O1dBR0c7UUFDTSxRQUFHLEdBQVcsa0JBQWtCLENBQUM7S0FXM0M7aUlBckJZLGNBQWM7cUhBQWQsY0FBYywySkFEa0MsRUFBRTs7QUFnQkw7SUFBOUMsV0FBVyxDQUFTLGFBQWEsRUFBRSxTQUFTLENBQUM7NkNBQWdCO0FBS2I7SUFBaEQsV0FBVyxDQUFZLGFBQWEsRUFBRSxRQUFRLENBQUM7K0NBQXFCOzJGQXBCbkUsY0FBYztrQkFEMUIsU0FBUzttQkFBQyxFQUFFLFFBQVEsRUFBRSxHQUFHLFlBQVksV0FBVyxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUU7OEJBTXRELEtBQUs7c0JBQWIsS0FBSztnQkFLRyxHQUFHO3NCQUFYLEtBQUs7Z0JBS2tELEtBQUs7c0JBQTVELEtBQUs7Z0JBS29ELE9BQU87c0JBQWhFLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBYUHJvcGVydHksIFhOdW1iZXIsIFhXaXRoQ29uZmlnIH0gZnJvbSAnQG5nLW5lc3QvdWkvY29yZSc7XHJcbmltcG9ydCB7IElucHV0LCBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbi8qKlxyXG4gKiBDb2xvclxyXG4gKiBAc2VsZWN0b3IgeC1jb2xvclxyXG4gKiBAZGVjb3JhdG9yIGNvbXBvbmVudFxyXG4gKi9cclxuZXhwb3J0IGNvbnN0IFhDb2xvclByZWZpeCA9ICd4LWNvbG9yJztcclxuXHJcbmNvbnN0IFhfQ09ORklHX05BTUUgPSAnY29sb3InO1xyXG5cclxuZXhwb3J0IGNvbnN0IFhBbW91bnRzID0gWy0wLjEsIDAuMSwgMC4yLCAwLjMsIDAuNCwgMC41LCAwLjYsIDAuNywgMC44LCAwLjldO1xyXG5cclxuLyoqXHJcbiAqIENvbG9yIFByb3BlcnR5XHJcbiAqL1xyXG5AQ29tcG9uZW50KHsgc2VsZWN0b3I6IGAke1hDb2xvclByZWZpeH0tcHJvcGVydHlgLCB0ZW1wbGF0ZTogJycgfSlcclxuZXhwb3J0IGNsYXNzIFhDb2xvclByb3BlcnR5IGV4dGVuZHMgWFByb3BlcnR5IHtcclxuICAvKipcclxuICAgKiBAemhfQ04g6aKc6Imy5ZCN56ewXHJcbiAgICogQGVuX1VTIENvbG9yIG5hbWVcclxuICAgKi9cclxuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nID0gJ2NvbG9yJztcclxuICAvKipcclxuICAgKiBAemhfQ04g5Y2B5YWt6L+b5Yi26aKc6Imy56CB77yM5q2k5aSE6buY6K6k6K+75Y+WIGNzcyDlj5jph4/kuK3nmoTkuLvoibJcclxuICAgKiBAZW5fVVMgSGV4YWRlY2ltYWwgY29sb3IgY29kZSwgaGVyZSB0aGUgbWFpbiBjb2xvciBpbiB0aGUgY3NzIHZhcmlhYmxlIGlzIHJlYWQgYnkgZGVmYXVsdFxyXG4gICAqL1xyXG4gIEBJbnB1dCgpIGhleDogc3RyaW5nID0gJ3ZhcigtLXgtcHJpbWFyeSknO1xyXG4gIC8qKlxyXG4gICAqIEB6aF9DTiDmt7flkIjnmoTpopzoibJcclxuICAgKiBAZW5fVVMgTWl4ZWQgY29sb3JzXHJcbiAgICovXHJcbiAgQElucHV0KCkgQFhXaXRoQ29uZmlnPHN0cmluZz4oWF9DT05GSUdfTkFNRSwgJyNmZmZmZmYnKSBtZXJnZT86IHN0cmluZztcclxuICAvKipcclxuICAgKiBAemhfQ04g5re35ZCI55qE6aKc6Imy5Y2g5q+UXHJcbiAgICogQGVuX1VTIFByb3BvcnRpb24gb2YgbWl4ZWQgY29sb3JzXHJcbiAgICovXHJcbiAgQElucHV0KCkgQFhXaXRoQ29uZmlnPFhOdW1iZXJbXT4oWF9DT05GSUdfTkFNRSwgWEFtb3VudHMpIGFtb3VudHM/OiBYTnVtYmVyW107XHJcbn1cclxuIl19
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3IucHJvcGVydHkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWIvbmctbmVzdC91aS9jb2xvci9jb2xvci5wcm9wZXJ0eS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNyRCxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFFakQ7Ozs7R0FJRztBQUNILE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxTQUFTLENBQUM7QUFDdEMsTUFBTSxtQkFBbUIsR0FBRyxPQUFPLENBQUM7QUFFcEM7O0dBRUc7QUFFSCxNQUFNLE9BQU8sY0FBZSxTQUFRLGlCQUFpQixDQUFDLG1CQUFtQixDQUFDO0lBRDFFOztRQUVFOzs7Ozs7Ozs7V0FTRztRQUNNLFVBQUssR0FBRyxLQUFLLENBQVMsT0FBTyxDQUFDLENBQUM7UUFDeEM7Ozs7Ozs7Ozs7V0FVRztRQUNNLFFBQUcsR0FBRyxLQUFLLENBQVMsa0JBQWtCLENBQUMsQ0FBQztRQUNqRDs7Ozs7Ozs7O1dBU0c7UUFDTSxVQUFLLEdBQUcsS0FBSyxDQUFTLElBQUksQ0FBQyxNQUFNLEVBQUUsS0FBSyxJQUFJLFNBQVMsQ0FBQyxDQUFDO1FBQ2hFOzs7Ozs7Ozs7O1dBVUc7UUFDTSxZQUFPLEdBQUcsS0FBSyxDQUFXLElBQUksQ0FBQyxNQUFNLEVBQUUsT0FBTyxJQUFJLENBQUMsQ0FBQyxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLENBQUMsQ0FBQyxDQUFDO0tBQ2pIO2lJQS9DWSxjQUFjO3FIQUFkLGNBQWMsMmpCQURrQyxFQUFFOzsyRkFDbEQsY0FBYztrQkFEMUIsU0FBUzttQkFBQyxFQUFFLFFBQVEsRUFBRSxHQUFHLFlBQVksV0FBVyxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBYUHJvcGVydHlGdW5jdGlvbiB9IGZyb20gJ0BuZy1uZXN0L3VpL2NvcmUnO1xyXG5pbXBvcnQgeyBDb21wb25lbnQsIGlucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG4vKipcclxuICogQ29sb3JcclxuICogQHNlbGVjdG9yIHgtY29sb3JcclxuICogQGRlY29yYXRvciBjb21wb25lbnRcclxuICovXHJcbmV4cG9ydCBjb25zdCBYQ29sb3JQcmVmaXggPSAneC1jb2xvcic7XHJcbmNvbnN0IFhfQ09MT1JfQ09ORklHX05BTUUgPSAnY29sb3InO1xyXG5cclxuLyoqXHJcbiAqIENvbG9yIFByb3BlcnR5XHJcbiAqL1xyXG5AQ29tcG9uZW50KHsgc2VsZWN0b3I6IGAke1hDb2xvclByZWZpeH0tcHJvcGVydHlgLCB0ZW1wbGF0ZTogJycgfSlcclxuZXhwb3J0IGNsYXNzIFhDb2xvclByb3BlcnR5IGV4dGVuZHMgWFByb3BlcnR5RnVuY3Rpb24oWF9DT0xPUl9DT05GSUdfTkFNRSkge1xyXG4gIC8qKlxyXG4gICAqIEB6aF9DTiDpopzoibLlkI3np7BcclxuICAgKiBAZW5fVVMgQ29sb3IgbmFtZVxyXG4gICAqIEBleGFtcGxlXHJcbiAgICpcclxuICAgKiBgYGBodG1sXHJcbiAgICogPHgtY29sb3IgbGFiZWw9XCJwcmltYXJ5XCI+PC94LWNvbG9yPlxyXG4gICAqIGBgYFxyXG4gICAqXHJcbiAgICovXHJcbiAgcmVhZG9ubHkgbGFiZWwgPSBpbnB1dDxzdHJpbmc+KCdjb2xvcicpO1xyXG4gIC8qKlxyXG4gICAqIEB6aF9DTiDljYHlha3ov5vliLbpopzoibLnoIHvvIzmraTlpITpu5jorqTor7vlj5YgY3NzIOWPmOmHj+S4reeahOS4u+iJslxyXG4gICAqIEBlbl9VUyBIZXhhZGVjaW1hbCBjb2xvciBjb2RlLCBoZXJlIHRoZSBtYWluIGNvbG9yIGluIHRoZSBjc3MgdmFyaWFibGUgaXMgcmVhZCBieSBkZWZhdWx0XHJcbiAgICogQGRlZmF1bHQgJ3ZhcigtLXgtcHJpbWFyeSknXHJcbiAgICogQGV4YW1wbGVcclxuICAgKlxyXG4gICAqIGBgYGh0bWxcclxuICAgKiA8eC1jb2xvciBoZXg9XCIjNjdjMjNhXCI+PC94LWNvbG9yPlxyXG4gICAqIGBgYFxyXG4gICAqXHJcbiAgICovXHJcbiAgcmVhZG9ubHkgaGV4ID0gaW5wdXQ8c3RyaW5nPigndmFyKC0teC1wcmltYXJ5KScpO1xyXG4gIC8qKlxyXG4gICAqIEB6aF9DTiDmt7flkIjnmoTpopzoibJcclxuICAgKiBAZW5fVVMgTWl4ZWQgY29sb3JzXHJcbiAgICogQGV4YW1wbGVcclxuICAgKlxyXG4gICAqIGBgYGh0bWxcclxuICAgKiA8eC1jb2xvciBtZXJnZT1cIiNmZmZmZmZcIj48L3gtY29sb3I+XHJcbiAgICogYGBgXHJcbiAgICpcclxuICAgKi9cclxuICByZWFkb25seSBtZXJnZSA9IGlucHV0PHN0cmluZz4odGhpcy5jb25maWc/Lm1lcmdlID8/ICcjZmZmZmZmJyk7XHJcbiAgLyoqXHJcbiAgICogQHpoX0NOIOa3t+WQiOeahOminOiJsuWNoOavlFxyXG4gICAqIEBlbl9VUyBQcm9wb3J0aW9uIG9mIG1peGVkIGNvbG9yc1xyXG4gICAqIEBkZWZhdWx0IFstMC4xLCAwLjEsIDAuMiwgMC4zLCAwLjQsIDAuNSwgMC42LCAwLjcsIDAuOCwgMC45XVxyXG4gICAqIEBleGFtcGxlXHJcbiAgICpcclxuICAgKiBgYGBodG1sXHJcbiAgICogPHgtY29sb3IgW2Ftb3VudHNdPVwiWzAuOCwgMC45XVwiPjwveC1jb2xvcj5cclxuICAgKiBgYGBcclxuICAgKlxyXG4gICAqL1xyXG4gIHJlYWRvbmx5IGFtb3VudHMgPSBpbnB1dDxudW1iZXJbXT4odGhpcy5jb25maWc/LmFtb3VudHMgPz8gWy0wLjEsIDAuMSwgMC4yLCAwLjMsIDAuNCwgMC41LCAwLjYsIDAuNywgMC44LCAwLjldKTtcclxufVxyXG4iXX0=