@ng-nest/ui 20.2.6 → 21.0.1

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

@@ -165,10 +165,10 @@ 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 }, 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorPickerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", 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 }] }], 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 }] }] } });
@@ -560,10 +560,10 @@ class XColorPickerPortalComponent {
         }
         return result;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorPickerPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.5", type: XColorPickerPortalComponent, isStandalone: true, selector: "x-color-picker-portal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputCom: { classPropertyName: "inputCom", publicName: "inputCom", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, panelTemplate: { classPropertyName: "panelTemplate", publicName: "panelTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", animating: "animating", nodeClick: "nodeClick" }, host: { listeners: { "animationend": "done()", "animationstart": "start()" }, properties: { "animate.enter": "this.animateEnter", "animate.leave": "this.animateLeave" } }, providers: [DecimalPipe, PercentPipe], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panelRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "plateRef", first: true, predicate: ["plateRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "transparentCom", first: true, predicate: ["transparentCom"], descendants: true, read: XSliderSelectComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"x-color-picker-portal\" tabindex=\"-1\" (click)=\"stopPropagation($event)\">\r\n  <div #panelRef class=\"x-color-picker-portal-panel\">\r\n    <div #plateRef class=\"x-color-picker-portal-plate\" (click)=\"plateClick($event)\">\r\n      <div class=\"x-color-picker-portal-white\"></div>\r\n      <div class=\"x-color-picker-portal-black\"></div>\r\n      <div\r\n        #dragCom\r\n        class=\"x-color-picker-portal-cursor\"\r\n        [style.left.px]=\"transformX()\"\r\n        [style.top.px]=\"transformY()\"\r\n        cdkDrag\r\n        [cdkDragBoundary]=\"panelRef\"\r\n        (cdkDragStarted)=\"started()\"\r\n        (cdkDragEnded)=\"ended()\"\r\n        (cdkDragMoved)=\"moved($event)\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-color-picker-portal-tool\">\r\n    <div class=\"x-color-picker-portal-operations\">\r\n      <!-- <x-button icon=\"fto-edit-2\" onlyIcon></x-button> -->\r\n      <div class=\"x-color-picker-portal-selected\">\r\n        <div [style.background-color]=\"value()\"></div>\r\n      </div>\r\n      <div class=\"x-color-picker-portal-area\">\r\n        <div class=\"x-color-picker-portal-slider\">\r\n          <x-slider-select\r\n            [style.width.%]=\"100\"\r\n            [(ngModel)]=\"hsla().h\"\r\n            min=\"0\"\r\n            max=\"360\"\r\n            step=\"1\"\r\n            (dragStartEmit)=\"started()\"\r\n            (dragEndEmit)=\"ended()\"\r\n            (ngModelChange)=\"hueChange()\"\r\n          ></x-slider-select>\r\n        </div>\r\n        <div class=\"x-color-picker-portal-transparent\">\r\n          <x-slider-select\r\n            [style.width.%]=\"100\"\r\n            #transparentCom\r\n            [(ngModel)]=\"hsla().a\"\r\n            min=\"0\"\r\n            max=\"1\"\r\n            step=\"0.01\"\r\n            (dragStarted)=\"started()\"\r\n            (dragEnded)=\"ended()\"\r\n            (ngModelChange)=\"transparentChange()\"\r\n          ></x-slider-select>\r\n          <div class=\"x-color-picker-portal-alpha\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"x-color-picker-portal-type\">\r\n      <x-tabs animated=\"false\" justify=\"center\">\r\n        <x-tab label=\"HEX\">\r\n          <div class=\"x-color-picker-portal-type-content\">\r\n            <x-input [style.width.%]=\"100\" [(ngModel)]=\"hex\" (ngModelChange)=\"hexChange()\"></x-input>\r\n          </div>\r\n        </x-tab>\r\n        <x-tab label=\"RGBA\">\r\n          <div class=\"x-color-picker-portal-type-content\">\r\n            <x-input [(ngModel)]=\"rgba().r\" disabled></x-input>\r\n            <x-input [(ngModel)]=\"rgba().g\" disabled></x-input>\r\n            <x-input [(ngModel)]=\"rgba().b\" disabled></x-input>\r\n            <x-input [(ngModel)]=\"rgba().a\" disabled></x-input>\r\n          </div>\r\n        </x-tab>\r\n        <x-tab label=\"HSLA\">\r\n          <div class=\"x-color-picker-portal-type-content\">\r\n            <x-input [(ngModel)]=\"hsla().h\" disabled></x-input>\r\n            <x-input [(ngModel)]=\"hsla().sp\" disabled></x-input>\r\n            <x-input [(ngModel)]=\"hsla().lp\" disabled></x-input>\r\n            <x-input [(ngModel)]=\"hsla().a\" disabled></x-input>\r\n          </div>\r\n        </x-tab>\r\n      </x-tabs>\r\n    </div>\r\n    <div class=\"x-color-picker-panel\">\r\n      <ng-container *ngTemplateOutlet=\"panelTemplate()!\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-color-picker-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);background-color:var(--x-background-100);width:17rem;overflow:hidden}.x-color-picker-portal:focus{outline:none}.x-color-picker-portal-panel{padding:.375rem;margin:-.375rem}.x-color-picker-portal-plate{width:100%;height:8rem;display:flex;border-radius:var(--x-border-small-radius);position:relative}.x-color-picker-portal-white,.x-color-picker-portal-black{position:absolute;inset:0}.x-color-picker-portal-white{background:linear-gradient(90deg,#fff,#fff0)}.x-color-picker-portal-black{background:linear-gradient(0deg,#000,transparent)}.x-color-picker-portal-cursor{position:absolute;width:.75rem;height:.75rem;display:inline-block;border-radius:50%;border:.0625rem solid var(--x-background-100)}.x-color-picker-portal-tool{padding:.4rem}.x-color-picker-portal-operations{display:flex;align-items:center;padding:.4rem 0}.x-color-picker-portal-selected{margin-left:.4rem;width:2rem;height:2rem;border-radius:2rem;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.x-color-picker-portal-selected>div{width:2rem;height:2rem;border-radius:2rem}.x-color-picker-portal-area{margin-left:.4rem;position:relative;flex:1}.x-color-picker-portal-area .x-slider-select:hover:not(.x-disabled) .x-slider-select-process{background-color:transparent}.x-color-picker-portal-area .x-slider-select>.x-slider-select-inner .x-slider-select-rail{height:.75rem}.x-color-picker-portal-area .x-slider-select>.x-slider-select-inner .x-slider-select-process{background-color:transparent}.x-color-picker-portal-area .x-slider-select>.x-slider-select-inner>.x-slider-select-drags>.x-slider-select-drag>.x-slider-select-button{border-color:var(--x-border);box-shadow:var(--x-box-shadow)}.x-color-picker-portal-slider{position:relative;width:100%;display:flex;align-items:center}.x-color-picker-portal-slider .x-slider-select>.x-slider-select-inner>.x-slider-select-rail{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.x-color-picker-portal-transparent{position:relative;width:100%;display:flex;align-items:center}.x-color-picker-portal-transparent .x-slider-select>.x-slider-select-inner>.x-slider-select-rail{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.x-color-picker-portal-type .x-tabs .x-tabs-list{display:flex;justify-content:center}.x-color-picker-portal-type-content{padding:.25rem;display:flex}.x-color-picker-portal-type-content .x-input .x-input-row input{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XSliderSelectComponent, selector: "x-slider-select" }, { kind: "component", type: XTabsComponent, selector: "x-tabs" }, { kind: "component", type: XTabComponent, selector: "x-tab" }, { kind: "component", type: XInputComponent, selector: "x-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorPickerPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: XColorPickerPortalComponent, isStandalone: true, selector: "x-color-picker-portal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputCom: { classPropertyName: "inputCom", publicName: "inputCom", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, panelTemplate: { classPropertyName: "panelTemplate", publicName: "panelTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", animating: "animating", nodeClick: "nodeClick" }, host: { listeners: { "animationend": "done()", "animationstart": "start()" }, properties: { "animate.enter": "this.animateEnter", "animate.leave": "this.animateLeave" } }, providers: [DecimalPipe, PercentPipe], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panelRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "plateRef", first: true, predicate: ["plateRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "transparentCom", first: true, predicate: ["transparentCom"], descendants: true, read: XSliderSelectComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"x-color-picker-portal\" tabindex=\"-1\" (click)=\"stopPropagation($event)\">\r\n  <div #panelRef class=\"x-color-picker-portal-panel\">\r\n    <div #plateRef class=\"x-color-picker-portal-plate\" (click)=\"plateClick($event)\">\r\n      <div class=\"x-color-picker-portal-white\"></div>\r\n      <div class=\"x-color-picker-portal-black\"></div>\r\n      <div\r\n        #dragCom\r\n        class=\"x-color-picker-portal-cursor\"\r\n        [style.left.px]=\"transformX()\"\r\n        [style.top.px]=\"transformY()\"\r\n        cdkDrag\r\n        [cdkDragBoundary]=\"panelRef\"\r\n        (cdkDragStarted)=\"started()\"\r\n        (cdkDragEnded)=\"ended()\"\r\n        (cdkDragMoved)=\"moved($event)\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-color-picker-portal-tool\">\r\n    <div class=\"x-color-picker-portal-operations\">\r\n      <!-- <x-button icon=\"fto-edit-2\" onlyIcon></x-button> -->\r\n      <div class=\"x-color-picker-portal-selected\">\r\n        <div [style.background-color]=\"value()\"></div>\r\n      </div>\r\n      <div class=\"x-color-picker-portal-area\">\r\n        <div class=\"x-color-picker-portal-slider\">\r\n          <x-slider-select\r\n            [style.width.%]=\"100\"\r\n            [(ngModel)]=\"hsla().h\"\r\n            min=\"0\"\r\n            max=\"360\"\r\n            step=\"1\"\r\n            (dragStartEmit)=\"started()\"\r\n            (dragEndEmit)=\"ended()\"\r\n            (ngModelChange)=\"hueChange()\"\r\n          ></x-slider-select>\r\n        </div>\r\n        <div class=\"x-color-picker-portal-transparent\">\r\n          <x-slider-select\r\n            [style.width.%]=\"100\"\r\n            #transparentCom\r\n            [(ngModel)]=\"hsla().a\"\r\n            min=\"0\"\r\n            max=\"1\"\r\n            step=\"0.01\"\r\n            (dragStarted)=\"started()\"\r\n            (dragEnded)=\"ended()\"\r\n            (ngModelChange)=\"transparentChange()\"\r\n          ></x-slider-select>\r\n          <div class=\"x-color-picker-portal-alpha\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"x-color-picker-portal-type\">\r\n      <x-tabs animated=\"false\" justify=\"center\">\r\n        <x-tab label=\"HEX\">\r\n          <div class=\"x-color-picker-portal-type-content\">\r\n            <x-input [style.width.%]=\"100\" [(ngModel)]=\"hex\" (ngModelChange)=\"hexChange()\"></x-input>\r\n          </div>\r\n        </x-tab>\r\n        <x-tab label=\"RGBA\">\r\n          <div class=\"x-color-picker-portal-type-content\">\r\n            <x-input [(ngModel)]=\"rgba().r\" disabled></x-input>\r\n            <x-input [(ngModel)]=\"rgba().g\" disabled></x-input>\r\n            <x-input [(ngModel)]=\"rgba().b\" disabled></x-input>\r\n            <x-input [(ngModel)]=\"rgba().a\" disabled></x-input>\r\n          </div>\r\n        </x-tab>\r\n        <x-tab label=\"HSLA\">\r\n          <div class=\"x-color-picker-portal-type-content\">\r\n            <x-input [(ngModel)]=\"hsla().h\" disabled></x-input>\r\n            <x-input [(ngModel)]=\"hsla().sp\" disabled></x-input>\r\n            <x-input [(ngModel)]=\"hsla().lp\" disabled></x-input>\r\n            <x-input [(ngModel)]=\"hsla().a\" disabled></x-input>\r\n          </div>\r\n        </x-tab>\r\n      </x-tabs>\r\n    </div>\r\n    <div class=\"x-color-picker-panel\">\r\n      <ng-container *ngTemplateOutlet=\"panelTemplate()!\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.x-color-picker-portal{margin:.0625rem 0;font-size:var(--x-font-size);color:var(--x-text);border-radius:var(--x-border-small-radius);box-shadow:var(--x-box-shadow);background-color:var(--x-background-100);width:17rem;overflow:hidden}.x-color-picker-portal:focus{outline:none}.x-color-picker-portal-panel{padding:.375rem;margin:-.375rem}.x-color-picker-portal-plate{width:100%;height:8rem;display:flex;border-radius:var(--x-border-small-radius);position:relative}.x-color-picker-portal-white,.x-color-picker-portal-black{position:absolute;inset:0}.x-color-picker-portal-white{background:linear-gradient(90deg,#fff,#fff0)}.x-color-picker-portal-black{background:linear-gradient(0deg,#000,transparent)}.x-color-picker-portal-cursor{position:absolute;width:.75rem;height:.75rem;display:inline-block;border-radius:50%;border:.0625rem solid var(--x-background-100)}.x-color-picker-portal-tool{padding:.4rem}.x-color-picker-portal-operations{display:flex;align-items:center;padding:.4rem 0}.x-color-picker-portal-selected{margin-left:.4rem;width:2rem;height:2rem;border-radius:2rem;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.x-color-picker-portal-selected>div{width:2rem;height:2rem;border-radius:2rem}.x-color-picker-portal-area{margin-left:.4rem;position:relative;flex:1}.x-color-picker-portal-area .x-slider-select:hover:not(.x-disabled) .x-slider-select-process{background-color:transparent}.x-color-picker-portal-area .x-slider-select>.x-slider-select-inner .x-slider-select-rail{height:.75rem}.x-color-picker-portal-area .x-slider-select>.x-slider-select-inner .x-slider-select-process{background-color:transparent}.x-color-picker-portal-area .x-slider-select>.x-slider-select-inner>.x-slider-select-drags>.x-slider-select-drag>.x-slider-select-button{border-color:var(--x-border);box-shadow:var(--x-box-shadow)}.x-color-picker-portal-slider{position:relative;width:100%;display:flex;align-items:center}.x-color-picker-portal-slider .x-slider-select>.x-slider-select-inner>.x-slider-select-rail{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.x-color-picker-portal-transparent{position:relative;width:100%;display:flex;align-items:center}.x-color-picker-portal-transparent .x-slider-select>.x-slider-select-inner>.x-slider-select-rail{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.x-color-picker-portal-type .x-tabs .x-tabs-list{display:flex;justify-content:center}.x-color-picker-portal-type-content{padding:.25rem;display:flex}.x-color-picker-portal-type-content .x-input .x-input-row input{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XSliderSelectComponent, selector: "x-slider-select" }, { kind: "component", type: XTabsComponent, selector: "x-tabs" }, { kind: "component", type: XTabComponent, selector: "x-tab" }, { 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: XColorPickerPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorPickerPortalComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XColorPickerPortalPrefix}`, imports: [
                         FormsModule,
@@ -920,10 +920,10 @@ class XColorPickerComponent extends XColorPickerProperty {
     setPortal() {
         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() && 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", 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() && 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 }] }] } });
@@ -940,10 +940,10 @@ class XColorPickerOptionDirective {
         if (this.colorPicker.onChange)
             this.colorPicker.onChange(this.colorPicker.value());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorPickerOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.5", type: XColorPickerOptionDirective, isStandalone: true, selector: "[x-color-picker-option], x-color-picker-option", inputs: { color: { classPropertyName: "color", publicName: "x-color-picker-option", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onSelectClick()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorPickerOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: XColorPickerOptionDirective, isStandalone: true, selector: "[x-color-picker-option], x-color-picker-option", inputs: { color: { classPropertyName: "color", publicName: "x-color-picker-option", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onSelectClick()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorPickerOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorPickerOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `[x-color-picker-option], x-color-picker-option`
@@ -954,11 +954,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
             }] } });
 
 class XColorPickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XColorPickerModule, imports: [XColorPickerComponent, XColorPickerOptionDirective], exports: [XColorPickerComponent, XColorPickerOptionDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorPickerModule, imports: [XColorPickerComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: XColorPickerModule, imports: [XColorPickerComponent, XColorPickerOptionDirective], exports: [XColorPickerComponent, XColorPickerOptionDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorPickerModule, imports: [XColorPickerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [XColorPickerComponent, XColorPickerOptionDirective],

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

@@ -63,10 +63,10 @@ class XColorProperty extends XPropertyFunction(X_COLOR_CONFIG_NAME) {
          */
         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], ...(ngDevMode ? [{ debugName: "amounts" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XColorProperty, isStandalone: true, 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XColorProperty, isStandalone: true, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XColorPrefix}-property`, template: '' }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hex: [{ type: i0.Input, args: [{ isSignal: true, alias: "hex", required: false }] }], merge: [{ type: i0.Input, args: [{ isSignal: true, alias: "merge", required: false }] }], amounts: [{ type: i0.Input, args: [{ isSignal: true, alias: "amounts", required: false }] }] } });
@@ -90,10 +90,10 @@ class XColorComponent extends XColorProperty {
             return colors;
         }, ...(ngDevMode ? [{ debugName: "colors" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", 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}.x-color{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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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}.x-color{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: "20.3.5", ngImport: i0, type: XColorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorComponent, decorators: [{
             type: Component,
             args: [{ selector: XColorPrefix, 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}.x-color{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: [{
@@ -102,11 +102,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
             }] } });
 
 class XColorModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XColorModule, imports: [XColorComponent], exports: [XColorComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: XColorModule, imports: [XColorComponent], exports: [XColorComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XColorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XColorModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XColorComponent],

package/fesm2022/ng-nest-ui-comment.mjs

@@ -60,10 +60,10 @@ class XCommentProperty extends XPropertyFunction(X_COMMENT_CONFIG_NAME) {
          */
         this.moreClick = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCommentProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XCommentProperty, isStandalone: true, selector: "x-comment-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, contentMax: { classPropertyName: "contentMax", publicName: "contentMax", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { likeClick: "likeClick", commentClick: "commentClick", replyClick: "replyClick", sureClick: "sureClick", moreClick: "moreClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCommentProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XCommentProperty, isStandalone: true, selector: "x-comment-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, contentMax: { classPropertyName: "contentMax", publicName: "contentMax", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { likeClick: "likeClick", commentClick: "commentClick", replyClick: "replyClick", sureClick: "sureClick", moreClick: "moreClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCommentProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCommentProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XCommentPrefix}-property`, template: '' }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], contentMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentMax", required: false }] }], likeClick: [{ type: i0.Output, args: ["likeClick"] }], commentClick: [{ type: i0.Output, args: ["commentClick"] }], replyClick: [{ type: i0.Output, args: ["replyClick"] }], sureClick: [{ type: i0.Output, args: ["sureClick"] }], moreClick: [{ type: i0.Output, args: ["moreClick"] }] } });
@@ -90,10 +90,10 @@ class XCommentReplyProperty extends XPropertyFunction(X_COMMENT_CONFIG_NAME) {
          */
         this.sureClick = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCommentReplyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XCommentReplyProperty, isStandalone: true, selector: "x-comment-reply-property", inputs: { maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sureClick: "sureClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCommentReplyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XCommentReplyProperty, isStandalone: true, selector: "x-comment-reply-property", inputs: { maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sureClick: "sureClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCommentReplyProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCommentReplyProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XCommentReplyPrefix}-property`, template: '' }]
         }], propDecorators: { maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], sureClick: [{ type: i0.Output, args: ["sureClick"] }] } });
@@ -106,10 +106,10 @@ class XCommentReplyComponent extends XCommentReplyProperty {
     sureOnClick() {
         this.sureClick.emit(this.inputValue());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCommentReplyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", type: XCommentReplyComponent, isStandalone: true, selector: "x-comment-reply", usesInheritance: true, ngImport: i0, template: "<div #commentReply class=\"x-comment-reply\">\r\n  <x-input\r\n    class=\"x-comment-reply-input\"\r\n    [placeholder]=\"'comment.placeholder' | xI18n\"\r\n    [maxlength]=\"maxlength()\"\r\n    [(ngModel)]=\"inputValue\"\r\n  ></x-input>\r\n  <div class=\"x-comment-reply-buttons\">\r\n    <x-button class=\"x-comment-sure-button\" type=\"primary\" flat (click)=\"sureOnClick()\">{{\r\n      'comment.sure' | xI18n\r\n    }}</x-button>\r\n  </div>\r\n</div>\r\n", styles: [".x-comment-reply{margin:0;padding:0}.x-comment-reply-buttons{display:flex;justify-content:space-between;align-items:center;margin-top:.625rem}.x-comment-reply-buttons .x-button-icon{padding:0}.x-comment-reply-buttons .x-button-icon>.x-button-inner>.x-icon{font-size:1.25rem}.x-comment-reply-buttons .x-buttons:not(.x-buttons-space)>.x-button:not(:first-child){margin-left:.5rem}.x-comment-reply-input{width:100%}.x-comment-reply-sure{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XInputComponent, selector: "x-input" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "pipe", type: XI18nPipe, name: "xI18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCommentReplyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: XCommentReplyComponent, isStandalone: true, selector: "x-comment-reply", usesInheritance: true, ngImport: i0, template: "<div #commentReply class=\"x-comment-reply\">\r\n  <x-input\r\n    class=\"x-comment-reply-input\"\r\n    [placeholder]=\"'comment.placeholder' | xI18n\"\r\n    [maxlength]=\"maxlength()\"\r\n    [(ngModel)]=\"inputValue\"\r\n  ></x-input>\r\n  <div class=\"x-comment-reply-buttons\">\r\n    <x-button class=\"x-comment-sure-button\" type=\"primary\" flat (click)=\"sureOnClick()\">{{\r\n      'comment.sure' | xI18n\r\n    }}</x-button>\r\n  </div>\r\n</div>\r\n", styles: [".x-comment-reply{margin:0;padding:0}.x-comment-reply-buttons{display:flex;justify-content:space-between;align-items:center;margin-top:.625rem}.x-comment-reply-buttons .x-button-icon{padding:0}.x-comment-reply-buttons .x-button-icon>.x-button-inner>.x-icon{font-size:1.25rem}.x-comment-reply-buttons .x-buttons:not(.x-buttons-space)>.x-button:not(:first-child){margin-left:.5rem}.x-comment-reply-input{width:100%}.x-comment-reply-sure{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XInputComponent, selector: "x-input" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "pipe", type: XI18nPipe, name: "xI18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCommentReplyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCommentReplyComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XCommentReplyPrefix}`, imports: [FormsModule, XInputComponent, XI18nPipe, XButtonComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #commentReply class=\"x-comment-reply\">\r\n  <x-input\r\n    class=\"x-comment-reply-input\"\r\n    [placeholder]=\"'comment.placeholder' | xI18n\"\r\n    [maxlength]=\"maxlength()\"\r\n    [(ngModel)]=\"inputValue\"\r\n  ></x-input>\r\n  <div class=\"x-comment-reply-buttons\">\r\n    <x-button class=\"x-comment-sure-button\" type=\"primary\" flat (click)=\"sureOnClick()\">{{\r\n      'comment.sure' | xI18n\r\n    }}</x-button>\r\n  </div>\r\n</div>\r\n", styles: [".x-comment-reply{margin:0;padding:0}.x-comment-reply-buttons{display:flex;justify-content:space-between;align-items:center;margin-top:.625rem}.x-comment-reply-buttons .x-button-icon{padding:0}.x-comment-reply-buttons .x-button-icon>.x-button-inner>.x-icon{font-size:1.25rem}.x-comment-reply-buttons .x-buttons:not(.x-buttons-space)>.x-button:not(:first-child){margin-left:.5rem}.x-comment-reply-input{width:100%}.x-comment-reply-sure{display:flex;align-items:center}\n"] }]
         }] });
@@ -140,10 +140,10 @@ class XCommentComponent extends XCommentProperty {
     hasMore(node) {
         return node.count > node.children?.length;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCommentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XCommentComponent, isStandalone: true, selector: "x-comment", usesInheritance: true, ngImport: i0, template: "<div #comment class=\"x-comment\">\r\n  <div class=\"x-comment-list\">\r\n    @for (node of nodes(); track node.id) {\r\n      <div class=\"x-comment-item\">\r\n        <div class=\"x-comment-avatar\">\r\n          <x-avatar [src]=\"node.src\"></x-avatar>\r\n        </div>\r\n        <div class=\"x-comment-content\">\r\n          <div class=\"x-comment-author\">\r\n            <x-link>{{ node.author }}</x-link>\r\n            <span class=\"x-comment-time\">{{ node.datetime | xTimeAgo }}</span>\r\n          </div>\r\n          <div>\r\n            <x-text-retract [content]=\"node.content\"></x-text-retract>\r\n          </div>\r\n          <div class=\"x-comment-action\">\r\n            <x-buttons boxShadow=\"false\">\r\n              <x-button\r\n                class=\"x-comment-button\"\r\n                icon=\"fto-message-square\"\r\n                [activated]=\"node.commentShow!\"\r\n                (click)=\"commentOnClick(node)\"\r\n                text\r\n              >\r\n                {{ 'comment.comments' | xI18n }} {{ node.count ? node.count : '' }}\r\n              </x-button>\r\n              <x-button class=\"x-comment-like\" icon=\"fto-thumbs-up\" (click)=\"likeOnClick(node)\" text>\r\n                {{ 'comment.giveALike' | xI18n }} {{ node.likes ? node.likes : '' }}\r\n              </x-button>\r\n            </x-buttons>\r\n          </div>\r\n          @if (node.commentShow) {\r\n            <x-comment-reply [maxlength]=\"contentMax()\" (sureClick)=\"sureOnClick($event, node)\"></x-comment-reply>\r\n          }\r\n          <ul>\r\n            @for (child of node.children; track child.id) {\r\n              <li>\r\n                <div>\r\n                  <div>\r\n                    <x-link>{{ child.author }}</x-link>\r\n                    @if (child.replyAuthor) {\r\n                      <span class=\"x-comment-reply\">{{ 'comment.reply' | xI18n }}</span>\r\n                      <x-link>{{ child.replyAuthor }}</x-link>\r\n                    }\r\n                    \uFF1A\r\n                    <span>\r\n                      <x-text-retract [content]=\"child.content\"></x-text-retract>\r\n                    </span>\r\n                  </div>\r\n                  <div class=\"x-comment-action\">\r\n                    <span class=\"x-comment-time\">{{ child.datetime | xTimeAgo }}</span>\r\n                    <x-buttons boxShadow=\"false\">\r\n                      <x-button\r\n                        class=\"x-comment-reply-button\"\r\n                        icon=\"fto-message-square\"\r\n                        [activated]=\"child.commentShow!\"\r\n                        (click)=\"replyOnClick(child)\"\r\n                        text\r\n                        >{{ 'comment.reply' | xI18n }}</x-button\r\n                      >\r\n                      <x-button class=\"x-comment-like\" icon=\"fto-thumbs-up\" (click)=\"likeOnClick(child)\" text>\r\n                        {{ 'comment.giveALike' | xI18n }} {{ child.likes ? child.likes : '' }}</x-button\r\n                      >\r\n                    </x-buttons>\r\n                  </div>\r\n                  @if (child.commentShow) {\r\n                    <x-comment-reply\r\n                      [maxlength]=\"contentMax()\"\r\n                      (sureClick)=\"sureOnClick($event, child)\"\r\n                    ></x-comment-reply>\r\n                  }\r\n                </div>\r\n              </li>\r\n            }\r\n            @if (hasMore(node)) {\r\n              <li class=\"x-comment-more\">\r\n                <x-link\r\n                  class=\"x-comment-more-button\"\r\n                  icon=\"fto-chevron-right\"\r\n                  type=\"primary\"\r\n                  (click)=\"moreOnClick(node)\"\r\n                  iconRight\r\n                  >{{ 'comment.more' | xI18n }}\r\n                </x-link>\r\n              </li>\r\n            }\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".x-comment{margin:0;padding:0}.x-comment{font-size:var(--x-font-size);box-sizing:border-box}.x-comment p{line-height:1.5;margin:.375rem 0}.x-comment-content{margin-left:1rem;flex:1}.x-comment-content ul,.x-comment-content li{margin:0;padding:0;list-style:none}.x-comment-content>ul{margin-top:.375rem}.x-comment-content>ul>li{padding:0 var(--x-font-size);background-color:var(--x-background);transition:.3s}.x-comment-content>ul>li>div{padding:.5rem 0}.x-comment-content>ul>li>div>p>span{color:var(--x-text-300)}.x-comment-content>ul>li>div>.x-comment-action{display:flex;justify-content:space-between;align-items:center}.x-comment-content>ul>li>div>.x-comment-action>.x-comment-time{margin-left:0}.x-comment-content>ul>li:not(:last-child)>div{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-comment-content>ul>li.x-comment-more{padding:var(--x-font-size)}.x-comment-content>ul>li:hover{background-color:var(--x-background-a100);border-color:transparent}.x-comment-content .x-comment-reply{margin:var(--x-font-size) 0 1rem}.x-comment-author{margin:.25rem 0;display:inline-flex;align-items:center;color:var(--x-text-300)}.x-comment-author>.x-button{padding:0}.x-comment-time{margin-left:.5rem;color:var(--x-text-400);font-size:var(--x-font-size)}.x-comment-action{text-align:right}.x-comment-action>.x-buttons>.x-button{padding:0}.x-comment-action>.x-buttons:not(.x-buttons-space)>.x-button:not(:first-child){margin-left:.65rem}.x-comment-item{display:flex;padding:1rem 0;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-comment-item:first-child{padding-top:0}.x-comment-reply{margin:0 .75rem}\n"], dependencies: [{ kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "component", type: XAvatarComponent, selector: "x-avatar" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XButtonsComponent, selector: "x-buttons" }, { kind: "component", type: XTextRetractComponent, selector: "x-text-retract" }, { kind: "component", type: XCommentReplyComponent, selector: "x-comment-reply" }, { kind: "pipe", type: XI18nPipe, name: "xI18n" }, { kind: "pipe", type: XTimeAgoPipe, name: "xTimeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCommentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: XCommentComponent, isStandalone: true, selector: "x-comment", usesInheritance: true, ngImport: i0, template: "<div #comment class=\"x-comment\">\r\n  <div class=\"x-comment-list\">\r\n    @for (node of nodes(); track node.id) {\r\n      <div class=\"x-comment-item\">\r\n        <div class=\"x-comment-avatar\">\r\n          <x-avatar [src]=\"node.src\"></x-avatar>\r\n        </div>\r\n        <div class=\"x-comment-content\">\r\n          <div class=\"x-comment-author\">\r\n            <x-link>{{ node.author }}</x-link>\r\n            <span class=\"x-comment-time\">{{ node.datetime | xTimeAgo }}</span>\r\n          </div>\r\n          <div>\r\n            <x-text-retract [content]=\"node.content\"></x-text-retract>\r\n          </div>\r\n          <div class=\"x-comment-action\">\r\n            <x-buttons boxShadow=\"false\">\r\n              <x-button\r\n                class=\"x-comment-button\"\r\n                icon=\"fto-message-square\"\r\n                [activated]=\"node.commentShow!\"\r\n                (click)=\"commentOnClick(node)\"\r\n                text\r\n              >\r\n                {{ 'comment.comments' | xI18n }} {{ node.count ? node.count : '' }}\r\n              </x-button>\r\n              <x-button class=\"x-comment-like\" icon=\"fto-thumbs-up\" (click)=\"likeOnClick(node)\" text>\r\n                {{ 'comment.giveALike' | xI18n }} {{ node.likes ? node.likes : '' }}\r\n              </x-button>\r\n            </x-buttons>\r\n          </div>\r\n          @if (node.commentShow) {\r\n            <x-comment-reply [maxlength]=\"contentMax()\" (sureClick)=\"sureOnClick($event, node)\"></x-comment-reply>\r\n          }\r\n          <ul>\r\n            @for (child of node.children; track child.id) {\r\n              <li>\r\n                <div>\r\n                  <div>\r\n                    <x-link>{{ child.author }}</x-link>\r\n                    @if (child.replyAuthor) {\r\n                      <span class=\"x-comment-reply\">{{ 'comment.reply' | xI18n }}</span>\r\n                      <x-link>{{ child.replyAuthor }}</x-link>\r\n                    }\r\n                    \uFF1A\r\n                    <span>\r\n                      <x-text-retract [content]=\"child.content\"></x-text-retract>\r\n                    </span>\r\n                  </div>\r\n                  <div class=\"x-comment-action\">\r\n                    <span class=\"x-comment-time\">{{ child.datetime | xTimeAgo }}</span>\r\n                    <x-buttons boxShadow=\"false\">\r\n                      <x-button\r\n                        class=\"x-comment-reply-button\"\r\n                        icon=\"fto-message-square\"\r\n                        [activated]=\"child.commentShow!\"\r\n                        (click)=\"replyOnClick(child)\"\r\n                        text\r\n                        >{{ 'comment.reply' | xI18n }}</x-button\r\n                      >\r\n                      <x-button class=\"x-comment-like\" icon=\"fto-thumbs-up\" (click)=\"likeOnClick(child)\" text>\r\n                        {{ 'comment.giveALike' | xI18n }} {{ child.likes ? child.likes : '' }}</x-button\r\n                      >\r\n                    </x-buttons>\r\n                  </div>\r\n                  @if (child.commentShow) {\r\n                    <x-comment-reply\r\n                      [maxlength]=\"contentMax()\"\r\n                      (sureClick)=\"sureOnClick($event, child)\"\r\n                    ></x-comment-reply>\r\n                  }\r\n                </div>\r\n              </li>\r\n            }\r\n            @if (hasMore(node)) {\r\n              <li class=\"x-comment-more\">\r\n                <x-link\r\n                  class=\"x-comment-more-button\"\r\n                  icon=\"fto-chevron-right\"\r\n                  type=\"primary\"\r\n                  (click)=\"moreOnClick(node)\"\r\n                  iconRight\r\n                  >{{ 'comment.more' | xI18n }}\r\n                </x-link>\r\n              </li>\r\n            }\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".x-comment{margin:0;padding:0}.x-comment{font-size:var(--x-font-size);box-sizing:border-box}.x-comment p{line-height:1.5;margin:.375rem 0}.x-comment-content{margin-left:1rem;flex:1}.x-comment-content ul,.x-comment-content li{margin:0;padding:0;list-style:none}.x-comment-content>ul{margin-top:.375rem}.x-comment-content>ul>li{padding:0 var(--x-font-size);background-color:var(--x-background);transition:.3s}.x-comment-content>ul>li>div{padding:.5rem 0}.x-comment-content>ul>li>div>p>span{color:var(--x-text-300)}.x-comment-content>ul>li>div>.x-comment-action{display:flex;justify-content:space-between;align-items:center}.x-comment-content>ul>li>div>.x-comment-action>.x-comment-time{margin-left:0}.x-comment-content>ul>li:not(:last-child)>div{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-comment-content>ul>li.x-comment-more{padding:var(--x-font-size)}.x-comment-content>ul>li:hover{background-color:var(--x-background-a100);border-color:transparent}.x-comment-content .x-comment-reply{margin:var(--x-font-size) 0 1rem}.x-comment-author{margin:.25rem 0;display:inline-flex;align-items:center;color:var(--x-text-300)}.x-comment-author>.x-button{padding:0}.x-comment-time{margin-left:.5rem;color:var(--x-text-400);font-size:var(--x-font-size)}.x-comment-action{text-align:right}.x-comment-action>.x-buttons>.x-button{padding:0}.x-comment-action>.x-buttons:not(.x-buttons-space)>.x-button:not(:first-child){margin-left:.65rem}.x-comment-item{display:flex;padding:1rem 0;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-comment-item:first-child{padding-top:0}.x-comment-reply{margin:0 .75rem}\n"], dependencies: [{ kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "component", type: XAvatarComponent, selector: "x-avatar" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XButtonsComponent, selector: "x-buttons" }, { kind: "component", type: XTextRetractComponent, selector: "x-text-retract" }, { kind: "component", type: XCommentReplyComponent, selector: "x-comment-reply" }, { kind: "pipe", type: XI18nPipe, name: "xI18n" }, { kind: "pipe", type: XTimeAgoPipe, name: "xTimeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCommentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCommentComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XCommentPrefix}`, imports: [
                         XI18nPipe,
@@ -158,11 +158,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
         }] });
 
 class XCommentModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCommentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XCommentModule, imports: [XCommentComponent, XCommentReplyComponent], exports: [XCommentComponent, XCommentReplyComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCommentModule, imports: [XCommentComponent, XCommentReplyComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCommentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: XCommentModule, imports: [XCommentComponent, XCommentReplyComponent], exports: [XCommentComponent, XCommentReplyComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCommentModule, imports: [XCommentComponent, XCommentReplyComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XCommentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XCommentModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XCommentComponent, XCommentReplyComponent],

package/fesm2022/ng-nest-ui-container.mjs

@@ -22,10 +22,10 @@ class XContainerProperty extends XPropertyFunction(X_CONTAINER_CONFIG_NAME) {
          */
         this.direction = input(this.config?.direction, ...(ngDevMode ? [{ debugName: "direction" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XContainerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XContainerProperty, isStandalone: true, selector: "x-container-property", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XContainerProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XContainerProperty, isStandalone: true, selector: "x-container-property", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XContainerProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XContainerProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XContainerPrefix}-property`, template: '' }]
         }], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }] } });
@@ -48,10 +48,10 @@ class XHeaderProperty extends XPropertyFunction(X_HEADER_CONFIG_NAME) {
          */
         this.height = input(this.config?.height ?? '3rem', ...(ngDevMode ? [{ debugName: "height", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XHeaderProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XHeaderProperty, isStandalone: true, selector: "x-header-property", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XHeaderProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XHeaderProperty, isStandalone: true, selector: "x-header-property", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XHeaderProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XHeaderProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XHeaderPrefix}-property`, template: '' }]
         }], propDecorators: { height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
@@ -74,10 +74,10 @@ class XAsideProperty extends XPropertyFunction(X_ASIDE_CONFIG_NAME) {
          */
         this.width = input(this.config?.width ?? '12rem', ...(ngDevMode ? [{ debugName: "width", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAsideProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XAsideProperty, isStandalone: true, selector: "x-aside-property", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XAsideProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XAsideProperty, isStandalone: true, selector: "x-aside-property", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAsideProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XAsideProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XAsidePrefix}-property`, template: '' }]
         }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
@@ -106,10 +106,10 @@ class XFooterProperty extends XPropertyFunction(X_FOOTER_CONFIG_NAME) {
          */
         this.height = input(this.config?.height ?? '3rem', ...(ngDevMode ? [{ debugName: "height", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XFooterProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XFooterProperty, isStandalone: true, selector: "x-footer-property", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XFooterProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XFooterProperty, isStandalone: true, selector: "x-footer-property", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XFooterProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XFooterProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XFooterPrefix}-property`, template: '' }]
         }], propDecorators: { height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
@@ -131,10 +131,10 @@ class XContainerComponent extends XContainerProperty {
     get className() {
         return `${XContainerPrefix} ${this.directionClass()}`;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", type: XContainerComponent, isStandalone: true, selector: "x-container", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".x-container{margin:0;padding:0}.x-container{display:flex;flex-direction:row;flex:1;flex-basis:auto;box-sizing:border-box;min-width:0}.x-container.x-direction-column{flex-direction:column}.x-container.x-direction-column-reverse{flex-direction:column-reverse}.x-container.x-direction-row{flex-direction:row}.x-container.x-direction-row-reverse{flex-direction:row-reverse}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: XContainerComponent, isStandalone: true, selector: "x-container", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".x-container{margin:0;padding:0}.x-container{display:flex;flex-direction:row;flex:1;flex-basis:auto;box-sizing:border-box;min-width:0}.x-container.x-direction-column{flex-direction:column}.x-container.x-direction-column-reverse{flex-direction:column-reverse}.x-container.x-direction-row{flex-direction:row}.x-container.x-direction-row-reverse{flex-direction:row-reverse}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XContainerPrefix}`, template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".x-container{margin:0;padding:0}.x-container{display:flex;flex-direction:row;flex:1;flex-basis:auto;box-sizing:border-box;min-width:0}.x-container.x-direction-column{flex-direction:column}.x-container.x-direction-column-reverse{flex-direction:column-reverse}.x-container.x-direction-row{flex-direction:row}.x-container.x-direction-row-reverse{flex-direction:row-reverse}\n"] }]
         }], propDecorators: { className: [{
@@ -159,10 +159,10 @@ class XHeaderComponent extends XHeaderProperty {
             return;
         this.container.directionSignal.set('column');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", type: XHeaderComponent, isStandalone: true, selector: "x-header", host: { properties: { "class": "this.className", "style.height": "this.getHeight" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".x-header{margin:0;padding:0}.x-header{flex-shrink:0;padding:0 1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: XHeaderComponent, isStandalone: true, selector: "x-header", host: { properties: { "class": "this.className", "style.height": "this.getHeight" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".x-header{margin:0;padding:0}.x-header{flex-shrink:0;padding:0 1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XHeaderPrefix}`, template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".x-header{margin:0;padding:0}.x-header{flex-shrink:0;padding:0 1rem}\n"] }]
         }], propDecorators: { className: [{
@@ -181,10 +181,10 @@ class XAsideComponent extends XAsideProperty {
     get getWidth() {
         return this.width();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAsideComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", type: XAsideComponent, isStandalone: true, selector: "x-aside", host: { properties: { "class": "this.className", "style.width": "this.getWidth" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".x-aside{margin:0;padding:0}.x-aside{overflow:auto;flex-shrink:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XAsideComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: XAsideComponent, isStandalone: true, selector: "x-aside", host: { properties: { "class": "this.className", "style.width": "this.getWidth" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".x-aside{margin:0;padding:0}.x-aside{overflow:auto;flex-shrink:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XAsideComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XAsideComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XAsidePrefix}`, template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".x-aside{margin:0;padding:0}.x-aside{overflow:auto;flex-shrink:0}\n"] }]
         }], propDecorators: { className: [{
@@ -199,10 +199,10 @@ class XMainComponent {
     constructor() {
         this.className = XMainPrefix;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", type: XMainComponent, isStandalone: true, selector: "x-main", host: { properties: { "class": "this.className" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".x-main{margin:0;padding:0}.x-main{display:block;flex:1;flex-basis:auto;padding:1rem;overflow:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: XMainComponent, isStandalone: true, selector: "x-main", host: { properties: { "class": "this.className" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".x-main{margin:0;padding:0}.x-main{display:block;flex:1;flex-basis:auto;padding:1rem;overflow:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XMainComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XMainComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XMainPrefix}`, template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".x-main{margin:0;padding:0}.x-main{display:block;flex:1;flex-basis:auto;padding:1rem;overflow:auto}\n"] }]
         }], propDecorators: { className: [{
@@ -227,10 +227,10 @@ class XFooterComponent extends XFooterProperty {
             return;
         this.container.directionSignal.set('column');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", type: XFooterComponent, isStandalone: true, selector: "x-footer", host: { properties: { "class": "this.className", "style.height": "this.getHeight" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".x-footer{margin:0;padding:0}.x-footer{flex-shrink:0;padding:0 1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XFooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: XFooterComponent, isStandalone: true, selector: "x-footer", host: { properties: { "class": "this.className", "style.height": "this.getHeight" } }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".x-footer{margin:0;padding:0}.x-footer{flex-shrink:0;padding:0 1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XFooterPrefix}`, template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".x-footer{margin:0;padding:0}.x-footer{flex-shrink:0;padding:0 1rem}\n"] }]
         }], propDecorators: { className: [{
@@ -242,11 +242,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
             }] } });
 
 class XContainerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XContainerModule, imports: [XContainerComponent, XHeaderComponent, XAsideComponent, XMainComponent, XFooterComponent], exports: [XContainerComponent, XHeaderComponent, XAsideComponent, XMainComponent, XFooterComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XContainerModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: XContainerModule, imports: [XContainerComponent, XHeaderComponent, XAsideComponent, XMainComponent, XFooterComponent], exports: [XContainerComponent, XHeaderComponent, XAsideComponent, XMainComponent, XFooterComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XContainerModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XContainerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XContainerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [XContainerComponent, XHeaderComponent, XAsideComponent, XMainComponent, XFooterComponent],