@ng-nest/ui 21.0.9 → 21.0.11

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

@@ -201,10 +201,10 @@ class XListProperty extends XFormControlFunction(X_LIST_CONFIG_NAME) {
          */
         this.size = input(this.config?.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XListProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: XListProperty, isStandalone: true, selector: "x-list-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, drag: { classPropertyName: "drag", publicName: "drag", isSignal: true, isRequired: false, transformFunction: null }, objectArray: { classPropertyName: "objectArray", publicName: "objectArray", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeStyle: { classPropertyName: "nodeStyle", publicName: "nodeStyle", isSignal: true, isRequired: false, transformFunction: null }, groupTpl: { classPropertyName: "groupTpl", publicName: "groupTpl", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, scrollElement: { classPropertyName: "scrollElement", publicName: "scrollElement", isSignal: true, isRequired: false, transformFunction: null }, isKeyboardControlled: { classPropertyName: "isKeyboardControlled", publicName: "isKeyboardControlled", isSignal: true, isRequired: false, transformFunction: null }, loadMore: { classPropertyName: "loadMore", publicName: "loadMore", isSignal: true, isRequired: false, transformFunction: null }, loadMoreText: { classPropertyName: "loadMoreText", publicName: "loadMoreText", isSignal: true, isRequired: false, transformFunction: null }, loadingMoreText: { classPropertyName: "loadingMoreText", publicName: "loadingMoreText", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, heightAdaption: { classPropertyName: "heightAdaption", publicName: "heightAdaption", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, inPortal: { classPropertyName: "inPortal", publicName: "inPortal", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectAll: "onSelectAll", nodeMouseenter: "nodeMouseenter", nodeMouseleave: "nodeMouseleave", nodeClick: "nodeClick", dropListDropped: "dropListDropped", keyManagerTabOut: "keyManagerTabOut", keyManagerChange: "keyManagerChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XListProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: XListProperty, isStandalone: true, selector: "x-list-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, drag: { classPropertyName: "drag", publicName: "drag", isSignal: true, isRequired: false, transformFunction: null }, objectArray: { classPropertyName: "objectArray", publicName: "objectArray", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeStyle: { classPropertyName: "nodeStyle", publicName: "nodeStyle", isSignal: true, isRequired: false, transformFunction: null }, groupTpl: { classPropertyName: "groupTpl", publicName: "groupTpl", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, scrollElement: { classPropertyName: "scrollElement", publicName: "scrollElement", isSignal: true, isRequired: false, transformFunction: null }, isKeyboardControlled: { classPropertyName: "isKeyboardControlled", publicName: "isKeyboardControlled", isSignal: true, isRequired: false, transformFunction: null }, loadMore: { classPropertyName: "loadMore", publicName: "loadMore", isSignal: true, isRequired: false, transformFunction: null }, loadMoreText: { classPropertyName: "loadMoreText", publicName: "loadMoreText", isSignal: true, isRequired: false, transformFunction: null }, loadingMoreText: { classPropertyName: "loadingMoreText", publicName: "loadingMoreText", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, heightAdaption: { classPropertyName: "heightAdaption", publicName: "heightAdaption", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, inPortal: { classPropertyName: "inPortal", publicName: "inPortal", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectAll: "onSelectAll", nodeMouseenter: "nodeMouseenter", nodeMouseleave: "nodeMouseleave", nodeClick: "nodeClick", dropListDropped: "dropListDropped", keyManagerTabOut: "keyManagerTabOut", keyManagerChange: "keyManagerChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XListProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XListProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XListPrefix}-property`, template: '' }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], drag: [{ type: i0.Input, args: [{ isSignal: true, alias: "drag", required: false }] }], objectArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectArray", required: false }] }], nodeTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTpl", required: false }] }], nodeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeStyle", required: false }] }], groupTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTpl", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], isKeyboardControlled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isKeyboardControlled", required: false }] }], loadMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMore", required: false }] }], loadMoreText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreText", required: false }] }], loadingMoreText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMoreText", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], heightAdaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightAdaption", required: false }] }], minBufferPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minBufferPx", required: false }] }], maxBufferPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxBufferPx", required: false }] }], keywordText: [{ type: i0.Input, args: [{ isSignal: true, alias: "keywordText", required: false }] }], caseSensitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "caseSensitive", required: false }] }], inPortal: [{ type: i0.Input, args: [{ isSignal: true, alias: "inPortal", required: false }] }], onSelectAll: [{ type: i0.Output, args: ["onSelectAll"] }], nodeMouseenter: [{ type: i0.Output, args: ["nodeMouseenter"] }], nodeMouseleave: [{ type: i0.Output, args: ["nodeMouseleave"] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], dropListDropped: [{ type: i0.Output, args: ["dropListDropped"] }], keyManagerTabOut: [{ type: i0.Output, args: ["keyManagerTabOut"] }], keyManagerChange: [{ type: i0.Output, args: ["keyManagerChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
@@ -310,10 +310,10 @@ class XListOptionProperty {
          */
         this.caseSensitive = input(true, { ...(ngDevMode ? { debugName: "caseSensitive" } : {}), transform: XToBoolean });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XListOptionProperty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: XListOptionProperty, isStandalone: true, selector: "x-list-option-property", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeStyle: { classPropertyName: "nodeStyle", publicName: "nodeStyle", isSignal: true, isRequired: false, transformFunction: null }, groupTpl: { classPropertyName: "groupTpl", publicName: "groupTpl", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, forbidden: { classPropertyName: "forbidden", publicName: "forbidden", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, openPortal: { classPropertyName: "openPortal", publicName: "openPortal", isSignal: true, isRequired: false, transformFunction: null }, optionClass: { classPropertyName: "optionClass", publicName: "optionClass", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, divided: { classPropertyName: "divided", publicName: "divided", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XListOptionProperty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: XListOptionProperty, isStandalone: true, selector: "x-list-option-property", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeStyle: { classPropertyName: "nodeStyle", publicName: "nodeStyle", isSignal: true, isRequired: false, transformFunction: null }, groupTpl: { classPropertyName: "groupTpl", publicName: "groupTpl", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, forbidden: { classPropertyName: "forbidden", publicName: "forbidden", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, openPortal: { classPropertyName: "openPortal", publicName: "openPortal", isSignal: true, isRequired: false, transformFunction: null }, optionClass: { classPropertyName: "optionClass", publicName: "optionClass", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, divided: { classPropertyName: "divided", publicName: "divided", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XListOptionProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XListOptionProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XListOptionPrefix}-property`, template: '' }]
         }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], nodeTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTpl", required: false }] }], nodeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeStyle", required: false }] }], groupTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTpl", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], groupable: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupable", required: false }] }], forbidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "forbidden", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], openPortal: [{ type: i0.Input, args: [{ isSignal: true, alias: "openPortal", required: false }] }], optionClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionClass", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], divided: [{ type: i0.Input, args: [{ isSignal: true, alias: "divided", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], leaf: [{ type: i0.Input, args: [{ isSignal: true, alias: "leaf", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], keywordText: [{ type: i0.Input, args: [{ isSignal: true, alias: "keywordText", required: false }] }], caseSensitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "caseSensitive", required: false }] }] } });
@@ -348,10 +348,10 @@ class XListOptionComponent extends XListOptionProperty {
     getElementRef() {
         return this.elementRef;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XListOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: XListOptionComponent, isStandalone: true, selector: "x-list-option", host: { properties: { "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-list-option\"\r\n  [ngClass]=\"classMap()\"\r\n  [style]=\"nodeStyleComputed()\"\r\n  [class.x-selected]=\"selected()\"\r\n  [class.x-disabled]=\"forbidden()\"\r\n  [class.x-open-portal]=\"openPortal()\"\r\n  [class.x-active]=\"active()\"\r\n  [class.x-group]=\"groupable()\"\r\n  [class.x-list-icon]=\"icon()\"\r\n  [class.x-list-divided]=\"divided()\"\r\n>\r\n  <div class=\"x-list-option-content\">\r\n    @if (groupable() && groupTpl()) {\r\n      <ng-template *ngTemplateOutlet=\"groupTpl()!; context: { $group: label() }\"></ng-template>\r\n    } @else {\r\n      @if (nodeTpl()) {\r\n        <ng-template *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node() }\"></ng-template>\r\n      } @else {\r\n        @if (icon()) {\r\n          <x-icon class=\"x-list-option-icon\" [type]=\"icon()\"></x-icon>\r\n        }\r\n        <span x-keyword [text]=\"keywordText()\" [caseSensitive]=\"caseSensitive()\" [attr.title]=\"label()\">{{\r\n          label()\r\n        }}</span>\r\n      }\r\n    }\r\n  </div>\r\n  @if (leaf()) {\r\n    <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\"></x-icon>\r\n  }\r\n  @if (checked() && !leaf() && selected()) {\r\n    <x-icon class=\"x-list-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;cursor:pointer;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option-icon{margin-right:.25rem}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled,.x-group),.x-list-option.x-active:not(.x-disabled,.x-group){background-color:var(--x-background-a200)}.x-list-option.x-group{cursor:default;color:var(--x-text-400)}.x-list-option.x-group:hover{background-color:transparent}.x-list-option.x-list-divided{position:relative;margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-primary-900);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XListOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: XListOptionComponent, isStandalone: true, selector: "x-list-option", host: { properties: { "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-list-option\"\r\n  [ngClass]=\"classMap()\"\r\n  [style]=\"nodeStyleComputed()\"\r\n  [class.x-selected]=\"selected()\"\r\n  [class.x-disabled]=\"forbidden()\"\r\n  [class.x-open-portal]=\"openPortal()\"\r\n  [class.x-active]=\"active()\"\r\n  [class.x-group]=\"groupable()\"\r\n  [class.x-list-icon]=\"icon()\"\r\n  [class.x-list-divided]=\"divided()\"\r\n>\r\n  <div class=\"x-list-option-content\">\r\n    @if (groupable() && groupTpl()) {\r\n      <ng-template *ngTemplateOutlet=\"groupTpl()!; context: { $group: label() }\"></ng-template>\r\n    } @else {\r\n      @if (nodeTpl()) {\r\n        <ng-template *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node() }\"></ng-template>\r\n      } @else {\r\n        @if (icon()) {\r\n          <x-icon class=\"x-list-option-icon\" [type]=\"icon()\"></x-icon>\r\n        }\r\n        <span x-keyword [text]=\"keywordText()\" [caseSensitive]=\"caseSensitive()\" [attr.title]=\"label()\">{{\r\n          label()\r\n        }}</span>\r\n      }\r\n    }\r\n  </div>\r\n  @if (leaf()) {\r\n    <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\"></x-icon>\r\n  }\r\n  @if (checked() && !leaf() && selected()) {\r\n    <x-icon class=\"x-list-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;cursor:pointer;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option-icon{margin-right:.25rem}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled,.x-group),.x-list-option.x-active:not(.x-disabled,.x-group){background-color:var(--x-background-a200)}.x-list-option.x-group{cursor:default;color:var(--x-text-400)}.x-list-option.x-group:hover{background-color:transparent}.x-list-option.x-list-divided{position:relative;margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-primary-900);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XListOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XListOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XListOptionPrefix}`, imports: [NgClass, NgTemplateOutlet, XIconComponent, XKeywordDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-list-option\"\r\n  [ngClass]=\"classMap()\"\r\n  [style]=\"nodeStyleComputed()\"\r\n  [class.x-selected]=\"selected()\"\r\n  [class.x-disabled]=\"forbidden()\"\r\n  [class.x-open-portal]=\"openPortal()\"\r\n  [class.x-active]=\"active()\"\r\n  [class.x-group]=\"groupable()\"\r\n  [class.x-list-icon]=\"icon()\"\r\n  [class.x-list-divided]=\"divided()\"\r\n>\r\n  <div class=\"x-list-option-content\">\r\n    @if (groupable() && groupTpl()) {\r\n      <ng-template *ngTemplateOutlet=\"groupTpl()!; context: { $group: label() }\"></ng-template>\r\n    } @else {\r\n      @if (nodeTpl()) {\r\n        <ng-template *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node() }\"></ng-template>\r\n      } @else {\r\n        @if (icon()) {\r\n          <x-icon class=\"x-list-option-icon\" [type]=\"icon()\"></x-icon>\r\n        }\r\n        <span x-keyword [text]=\"keywordText()\" [caseSensitive]=\"caseSensitive()\" [attr.title]=\"label()\">{{\r\n          label()\r\n        }}</span>\r\n      }\r\n    }\r\n  </div>\r\n  @if (leaf()) {\r\n    <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\"></x-icon>\r\n  }\r\n  @if (checked() && !leaf() && selected()) {\r\n    <x-icon class=\"x-list-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;cursor:pointer;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option-icon{margin-right:.25rem}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled,.x-group),.x-list-option.x-active:not(.x-disabled,.x-group){background-color:var(--x-background-a200)}.x-list-option.x-group{cursor:default;color:var(--x-text-400)}.x-list-option.x-group:hover{background-color:transparent}.x-list-option.x-list-divided{position:relative;margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-primary-900);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { role: [{
@@ -383,10 +383,10 @@ class XListDropGroup {
     ngOnDestroy() {
         this.dropLists.clear();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XListDropGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: XListDropGroup, isStandalone: true, selector: "[xListDropGroup]", inputs: { disabled: { classPropertyName: "disabled", publicName: "xListDropGroupDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: X_LIST_DROP_GROUP, useExisting: XListDropGroup }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XListDropGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: XListDropGroup, isStandalone: true, selector: "[xListDropGroup]", inputs: { disabled: { classPropertyName: "disabled", publicName: "xListDropGroupDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: X_LIST_DROP_GROUP, useExisting: XListDropGroup }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XListDropGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XListDropGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[xListDropGroup]',
@@ -790,10 +790,10 @@ class XListComponent extends XListProperty {
             this.nodes()[num].active = false;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: XListComponent, isStandalone: true, selector: "x-list", host: { listeners: { "keydown": "keydown($event)" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, providers: [XValueAccessor(XListComponent), { provide: X_LIST_DROP_GROUP, useValue: undefined }], viewQueries: [{ propertyName: "headerRef", first: true, predicate: ["headerRef"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footerRef"], descendants: true, isSignal: true }, { propertyName: "selectAllRef", first: true, predicate: ["selectAllRef"], descendants: true, isSignal: true }, { propertyName: "loadMoreRef", first: true, predicate: ["loadMoreRef"], descendants: true, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true, isSignal: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }, { propertyName: "options", predicate: XListOptionComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-list\" [class.x-list-portal]=\"inPortal()\" [ngClass]=\"classMap()\">\r\n  @if (header()) {\r\n    <div #headerRef class=\"x-list-header\" *xOutlet=\"header()\">{{ header() }}</div>\r\n  }\r\n  @if (selectAll() && multiple() === 0) {\r\n    <div #selectAllRef class=\"x-list-select-all\">\r\n      <x-list-option\r\n        [size]=\"size()\"\r\n        [label]=\"getSelectAllText()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [checked]=\"true\"\r\n        [selected]=\"isSelectAll()\"\r\n        (click)=\"onSelectAllNodes()\"\r\n      ></x-list-option>\r\n    </div>\r\n  }\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      class=\"x-list-content\"\r\n      [style.height.px]=\"getVirtualScrollHeight()\"\r\n      [hidden]=\"isEmpty()\"\r\n    >\r\n      <x-list-option\r\n        *cdkVirtualFor=\"let node of nodes(); trackBy: trackByNode\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked()\"\r\n        [nodeTpl]=\"nodeTpl()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [groupTpl]=\"groupTpl()\"\r\n        [selected]=\"node.selected!\"\r\n        [groupable]=\"node.groupable!\"\r\n        [forbidden]=\"node.disabled!\"\r\n        [active]=\"node.active!\"\r\n        (activeChange)=\"node.active = $event\"\r\n        [openPortal]=\"node.openPortal!\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf!\"\r\n        [divided]=\"node.divided!\"\r\n        [size]=\"size()\"\r\n        [keywordText]=\"keywordText()\"\r\n        [caseSensitive]=\"caseSensitive()\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n        tabindex=\"-1\"\r\n      ></x-list-option>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"listTpl; context: { $list: nodes() }\"></ng-container>\r\n  }\r\n\r\n  @if (loadMore() && !isEmpty()) {\r\n    <div #loadMoreRef class=\"x-list-load-more\">\r\n      <x-list-option\r\n        [size]=\"size()\"\r\n        [nodeTpl]=\"loadMoreTpl\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        (click)=\"onLoadMore()\"\r\n      ></x-list-option>\r\n    </div>\r\n    <ng-template #loadMoreTpl>\r\n      @if (icon() && iconSpin()) {\r\n        <x-icon [type]=\"icon()\" [spin]=\"iconSpin()\"></x-icon>\r\n      }\r\n      {{ icon() && iconSpin() ? getLoadingMoreText() : getLoadMoreText() }}</ng-template\r\n    >\r\n  }\r\n  @if (isEmpty()) {\r\n    <x-empty></x-empty>\r\n  }\r\n  @if (footer()) {\r\n    <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer()\">{{ footer() }}</div>\r\n  }\r\n</div>\r\n\r\n<ng-template #listTpl let-list=\"$list\">\r\n  <div\r\n    class=\"x-list-content\"\r\n    cdkDropList\r\n    (cdkDropListDropped)=\"dropCdk($event)\"\r\n    [cdkDropListDisabled]=\"!drag()\"\r\n    [hidden]=\"isEmpty()\"\r\n    [cdkDropListData]=\"list\"\r\n    [cdkDropListEnterPredicate]=\"predicate\"\r\n  >\r\n    @for (node of list; track node.id) {\r\n      <x-list-option\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"node.disabled || node.groupable\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked()\"\r\n        [nodeTpl]=\"nodeTpl()\"\r\n        [groupTpl]=\"groupTpl()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [selected]=\"node.selected!\"\r\n        [groupable]=\"node.groupable!\"\r\n        [forbidden]=\"node.disabled!\"\r\n        [active]=\"node.active!\"\r\n        (activeChange)=\"node.active = $event\"\r\n        [openPortal]=\"node.openPortal!\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf!\"\r\n        [divided]=\"node.divided!\"\r\n        [size]=\"size()\"\r\n        [keywordText]=\"keywordText()\"\r\n        [caseSensitive]=\"caseSensitive()\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n        tabindex=\"-1\"\r\n      ></x-list-option>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0}.x-list{width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{font-weight:700}.x-list-portal{padding:.125rem .25rem}.x-list-portal x-list-option .x-list-option{padding:0 calc(var(--x-padding-medium) - .5rem);margin:.125rem 0;border-radius:var(--x-border-small-radius);transition:background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-portal x-list-option .x-list-option.x-list-divided{margin-top:.8125rem}.x-list-portal x-list-option .x-list-option.x-list-group{padding:0}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}.x-list-group.x-list-big .x-list-option:not(.x-group){padding:0 var(--x-padding-big) 0 calc(var(--x-padding-big) * 2.5)}.x-list-group.x-list-large .x-list-option:not(.x-group){padding:0 var(--x-padding-large) 0 calc(var(--x-padding-large) * 2.5)}.x-list-group.x-list-medium .x-list-option:not(.x-group){padding:0 var(--x-padding-medium) 0 calc(var(--x-padding-medium) * 2.5)}.x-list-group.x-list-small .x-list-option:not(.x-group){padding:0 var(--x-padding-small) 0 calc(var(--x-padding-small) * 2.5)}.x-list-group.x-list-mini .x-list-option:not(.x-group){padding:0 var(--x-padding-mini) 0 calc(var(--x-padding-mini) * 2.5)}.x-list-big .x-list-header,.x-list-big .x-list-footer,.x-list-big .x-list-option{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-large .x-list-header,.x-list-large .x-list-footer,.x-list-large .x-list-option{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-medium .x-list-header,.x-list-medium .x-list-footer,.x-list-medium .x-list-option{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-small .x-list-header,.x-list-small .x-list-footer,.x-list-small .x-list-option{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-mini .x-list-header,.x-list-mini .x-list-footer,.x-list-mini .x-list-option{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: 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: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XEmptyComponent, selector: "x-empty" }, { kind: "component", type: XListOptionComponent, selector: "x-list-option" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: XListComponent, isStandalone: true, selector: "x-list", host: { listeners: { "keydown": "keydown($event)" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, providers: [XValueAccessor(XListComponent), { provide: X_LIST_DROP_GROUP, useValue: undefined }], viewQueries: [{ propertyName: "headerRef", first: true, predicate: ["headerRef"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footerRef"], descendants: true, isSignal: true }, { propertyName: "selectAllRef", first: true, predicate: ["selectAllRef"], descendants: true, isSignal: true }, { propertyName: "loadMoreRef", first: true, predicate: ["loadMoreRef"], descendants: true, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true, isSignal: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }, { propertyName: "options", predicate: XListOptionComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-list\" [class.x-list-portal]=\"inPortal()\" [ngClass]=\"classMap()\">\r\n  @if (header()) {\r\n    <div #headerRef class=\"x-list-header\" *xOutlet=\"header()\">{{ header() }}</div>\r\n  }\r\n  @if (selectAll() && multiple() === 0) {\r\n    <div #selectAllRef class=\"x-list-select-all\">\r\n      <x-list-option\r\n        [size]=\"size()\"\r\n        [label]=\"getSelectAllText()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [checked]=\"true\"\r\n        [selected]=\"isSelectAll()\"\r\n        (click)=\"onSelectAllNodes()\"\r\n      ></x-list-option>\r\n    </div>\r\n  }\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      class=\"x-list-content\"\r\n      [style.height.px]=\"getVirtualScrollHeight()\"\r\n      [hidden]=\"isEmpty()\"\r\n    >\r\n      <x-list-option\r\n        *cdkVirtualFor=\"let node of nodes(); trackBy: trackByNode\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked()\"\r\n        [nodeTpl]=\"nodeTpl()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [groupTpl]=\"groupTpl()\"\r\n        [selected]=\"node.selected!\"\r\n        [groupable]=\"node.groupable!\"\r\n        [forbidden]=\"node.disabled!\"\r\n        [active]=\"node.active!\"\r\n        (activeChange)=\"node.active = $event\"\r\n        [openPortal]=\"node.openPortal!\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf!\"\r\n        [divided]=\"node.divided!\"\r\n        [size]=\"size()\"\r\n        [keywordText]=\"keywordText()\"\r\n        [caseSensitive]=\"caseSensitive()\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n        tabindex=\"-1\"\r\n      ></x-list-option>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"listTpl; context: { $list: nodes() }\"></ng-container>\r\n  }\r\n\r\n  @if (loadMore() && !isEmpty()) {\r\n    <div #loadMoreRef class=\"x-list-load-more\">\r\n      <x-list-option\r\n        [size]=\"size()\"\r\n        [nodeTpl]=\"loadMoreTpl\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        (click)=\"onLoadMore()\"\r\n      ></x-list-option>\r\n    </div>\r\n    <ng-template #loadMoreTpl>\r\n      @if (icon() && iconSpin()) {\r\n        <x-icon [type]=\"icon()\" [spin]=\"iconSpin()\"></x-icon>\r\n      }\r\n      {{ icon() && iconSpin() ? getLoadingMoreText() : getLoadMoreText() }}</ng-template\r\n    >\r\n  }\r\n  @if (isEmpty()) {\r\n    <x-empty></x-empty>\r\n  }\r\n  @if (footer()) {\r\n    <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer()\">{{ footer() }}</div>\r\n  }\r\n</div>\r\n\r\n<ng-template #listTpl let-list=\"$list\">\r\n  <div\r\n    class=\"x-list-content\"\r\n    cdkDropList\r\n    (cdkDropListDropped)=\"dropCdk($event)\"\r\n    [cdkDropListDisabled]=\"!drag()\"\r\n    [hidden]=\"isEmpty()\"\r\n    [cdkDropListData]=\"list\"\r\n    [cdkDropListEnterPredicate]=\"predicate\"\r\n  >\r\n    @for (node of list; track node.id) {\r\n      <x-list-option\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"node.disabled || node.groupable\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked()\"\r\n        [nodeTpl]=\"nodeTpl()\"\r\n        [groupTpl]=\"groupTpl()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [selected]=\"node.selected!\"\r\n        [groupable]=\"node.groupable!\"\r\n        [forbidden]=\"node.disabled!\"\r\n        [active]=\"node.active!\"\r\n        (activeChange)=\"node.active = $event\"\r\n        [openPortal]=\"node.openPortal!\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf!\"\r\n        [divided]=\"node.divided!\"\r\n        [size]=\"size()\"\r\n        [keywordText]=\"keywordText()\"\r\n        [caseSensitive]=\"caseSensitive()\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n        tabindex=\"-1\"\r\n      ></x-list-option>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0}.x-list{width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{font-weight:700}.x-list-portal{padding:.125rem .25rem}.x-list-portal x-list-option .x-list-option{padding:0 calc(var(--x-padding-medium) - .5rem);margin:.125rem 0;border-radius:var(--x-border-small-radius);transition:background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-portal x-list-option .x-list-option.x-list-divided{margin-top:.8125rem}.x-list-portal x-list-option .x-list-option.x-list-group{padding:0}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}.x-list-group.x-list-big .x-list-option:not(.x-group){padding:0 var(--x-padding-big) 0 calc(var(--x-padding-big) * 2.5)}.x-list-group.x-list-large .x-list-option:not(.x-group){padding:0 var(--x-padding-large) 0 calc(var(--x-padding-large) * 2.5)}.x-list-group.x-list-medium .x-list-option:not(.x-group){padding:0 var(--x-padding-medium) 0 calc(var(--x-padding-medium) * 2.5)}.x-list-group.x-list-small .x-list-option:not(.x-group){padding:0 var(--x-padding-small) 0 calc(var(--x-padding-small) * 2.5)}.x-list-group.x-list-mini .x-list-option:not(.x-group){padding:0 var(--x-padding-mini) 0 calc(var(--x-padding-mini) * 2.5)}.x-list-big .x-list-header,.x-list-big .x-list-footer,.x-list-big .x-list-option{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-large .x-list-header,.x-list-large .x-list-footer,.x-list-large .x-list-option{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-medium .x-list-header,.x-list-medium .x-list-footer,.x-list-medium .x-list-option{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-small .x-list-header,.x-list-small .x-list-footer,.x-list-small .x-list-option{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-mini .x-list-header,.x-list-mini .x-list-footer,.x-list-mini .x-list-option{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: 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: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XEmptyComponent, selector: "x-empty" }, { kind: "component", type: XListOptionComponent, selector: "x-list-option" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XListComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XListPrefix}`, imports: [
                         NgClass,
@@ -823,11 +823,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             }] } });
 
 class XListModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: XListModule, imports: [XListComponent, XListDropGroup, XListOptionComponent], exports: [XListComponent, XListDropGroup, XListOptionComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XListModule, imports: [XListComponent, XListOptionComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: XListModule, imports: [XListComponent, XListDropGroup, XListOptionComponent], exports: [XListComponent, XListDropGroup, XListOptionComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XListModule, imports: [XListComponent, XListOptionComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XListModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XListComponent, XListDropGroup, XListOptionComponent],

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

@@ -80,10 +80,10 @@ class XLoadingProperty extends XPropertyFunction(X_LOADING_CONFIG_NAME) {
          */
         this.inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : {}), transform: XToBoolean });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XLoadingProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: XLoadingProperty, isStandalone: true, selector: "x-loading-property", inputs: { loading: { classPropertyName: "loading", publicName: "x-loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, customTpl: { classPropertyName: "customTpl", publicName: "customTpl", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", 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.1.1", ngImport: i0, type: XLoadingProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: XLoadingProperty, isStandalone: true, selector: "x-loading-property", inputs: { loading: { classPropertyName: "loading", publicName: "x-loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, customTpl: { classPropertyName: "customTpl", publicName: "customTpl", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XLoadingProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XLoadingProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XLoadingPrefix}-property`, template: '' }]
         }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "x-loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], customTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTpl", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], fullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreen", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }] } });
@@ -146,10 +146,10 @@ class XLoadingComponent extends XLoadingProperty {
             this.portalRef.overlayRef.detach();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: XLoadingComponent, isStandalone: true, selector: "x-loading, [x-loading]", host: { properties: { "class.x-loading-parent": "this.getLoading" } }, viewQueries: [{ propertyName: "loadingTpl", first: true, predicate: ["loadingTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n@if (!fullScreen()) {\r\n  <ng-container *ngTemplateOutlet=\"loadingTpl\"></ng-container>\r\n}\r\n\r\n<ng-template #loadingTpl>\r\n  @if (loading()) {\r\n    <div\r\n      #loading\r\n      class=\"x-loading\"\r\n      [ngClass]=\"classMap()\"\r\n      [style.background]=\"background()\"\r\n      [style.zIndex]=\"zIndex()\"\r\n      [class.x-loading-radius]=\"isRadius()\"\r\n      [class.x-loading-top-left-radius]=\"includeRadius('top-start')\"\r\n      [class.x-loading-top-right-radius]=\"includeRadius('top-end')\"\r\n      [class.x-loading-bottom-left-radius]=\"includeRadius('bottom-start')\"\r\n      [class.x-loading-bottom-left-radius]=\"includeRadius('bottom-end')\"\r\n      [class.x-loading-inline]=\"inline()\"\r\n    >\r\n      <div class=\"x-loading-inner\" [style.color]=\"color()\">\r\n        @if (customTpl()) {\r\n          <ng-template *ngTemplateOutlet=\"customTpl()!\"></ng-template>\r\n        } @else {\r\n          @if (icon()) {\r\n            <div class=\"x-loading-icon\" [style.font-size.px]=\"sizeNumber()\">\r\n              <x-icon [type]=\"icon()!\"></x-icon>\r\n            </div>\r\n          } @else {\r\n            @switch (type()) {\r\n              @case ('circular') {\r\n                <ng-container *ngTemplateOutlet=\"circularTpl\"></ng-container>\r\n              }\r\n              @case ('spinner') {\r\n                <ng-container *ngTemplateOutlet=\"spinnerTpl\"></ng-container>\r\n              }\r\n              @case ('ripple') {\r\n                <ng-container *ngTemplateOutlet=\"rippleTpl\"></ng-container>\r\n              }\r\n              @case ('dual-ring') {\r\n                <ng-container *ngTemplateOutlet=\"dualRingTpl\"></ng-container>\r\n              }\r\n              @case ('dual-ball') {\r\n                <ng-container *ngTemplateOutlet=\"dualBallTpl\"></ng-container>\r\n              }\r\n              @case ('bars') {\r\n                <ng-container *ngTemplateOutlet=\"barsTpl\"></ng-container>\r\n              }\r\n              @default {\r\n                <ng-container *ngTemplateOutlet=\"circularTpl\"></ng-container>\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <div class=\"x-loading-text\">\r\n          <ng-container *xOutlet=\"text()\">{{ text() }}</ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #circularTpl>\r\n  <svg\r\n    class=\"x-loading-circular\"\r\n    [style.width.px]=\"sizeNumber()\"\r\n    [style.height.px]=\"sizeNumber()\"\r\n    viewBox=\"25 25 50 50\"\r\n  >\r\n    <circle class=\"x-loading-path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #spinnerTpl>\r\n  <svg class=\"x-loading-spinner\" [style.width.px]=\"sizeNumber()\" [style.height.px]=\"sizeNumber()\" viewBox=\"25 25 50 50\">\r\n    <g>\r\n      <g transform=\"rotate(0 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.9166666666666666s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(30 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.8333333333333334s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(60 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.75s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(90 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.6666666666666666s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(120 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.5833333333333334s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(150 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.5s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(180 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.4166666666666667s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(210 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.3333333333333333s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(240 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.25s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(270 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.16666666666666666s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(300 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.08333333333333333s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(330 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"0s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g></g>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #rippleTpl>\r\n  <svg class=\"x-loading-ripple\" [style.width.px]=\"sizeNumber()\" [style.height.px]=\"sizeNumber()\" viewBox=\"0 0 100 100\">\r\n    <g>\r\n      <circle stroke-width=\"6\" stroke=\"currentColor\" fill=\"none\" r=\"0\" cy=\"50\" cx=\"50\">\r\n        <animate\r\n          begin=\"0s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0 0.2 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"0;40\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"r\"\r\n        ></animate>\r\n        <animate\r\n          begin=\"0s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0.2 0 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"1;0\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </circle>\r\n      <circle stroke-width=\"6\" stroke=\"currentColor\" fill=\"none\" r=\"0\" cy=\"50\" cx=\"50\">\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0 0.2 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"0;40\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"r\"\r\n        ></animate>\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0.2 0 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"1;0\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </circle>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #dualRingTpl>\r\n  <svg\r\n    class=\"x-loading-dual-ring\"\r\n    [style.width.px]=\"sizeNumber()\"\r\n    [style.height.px]=\"sizeNumber()\"\r\n    viewBox=\"0 0 100 100\"\r\n  >\r\n    <g>\r\n      <circle\r\n        stroke-linecap=\"round\"\r\n        fill=\"none\"\r\n        stroke-dasharray=\"50.26548245743669 50.26548245743669\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"8\"\r\n        r=\"32\"\r\n        cy=\"50\"\r\n        cx=\"50\"\r\n      >\r\n        <animateTransform\r\n          values=\"0 50 50;360 50 50\"\r\n          keyTimes=\"0;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          type=\"rotate\"\r\n          attributeName=\"transform\"\r\n        ></animateTransform>\r\n      </circle>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #dualBallTpl>\r\n  <svg\r\n    class=\"x-loading-dual-ball\"\r\n    [style.width.px]=\"sizeNumber()\"\r\n    [style.height.px]=\"sizeNumber()\"\r\n    viewBox=\"0 0 100 100\"\r\n  >\r\n    <g>\r\n      <circle r=\"20\" fill=\"currentColor\" cy=\"50\" cx=\"30\">\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          values=\"30;70;30\"\r\n          keyTimes=\"0;0.5;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"cx\"\r\n        ></animate>\r\n      </circle>\r\n      <circle r=\"20\" fill=\"var(--x-primary-500)\" cy=\"50\" cx=\"70\">\r\n        <animate\r\n          begin=\"0s\"\r\n          values=\"30;70;30\"\r\n          keyTimes=\"0;0.5;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"cx\"\r\n        ></animate>\r\n      </circle>\r\n      <circle r=\"20\" fill=\"currentColor\" cy=\"50\" cx=\"30\">\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          values=\"30;70;30\"\r\n          keyTimes=\"0;0.5;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"cx\"\r\n        ></animate>\r\n        <animate\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          keyTimes=\"0;0.499;0.5;1\"\r\n          calcMode=\"discrete\"\r\n          values=\"0;0;1;1\"\r\n          attributeName=\"fill-opacity\"\r\n        ></animate>\r\n      </circle>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #barsTpl>\r\n  <svg class=\"x-loading-bars\" [style.width.px]=\"sizeNumber()\" [style.height.px]=\"sizeNumber()\" viewBox=\"0 0 100 100\">\r\n    <g>\r\n      <rect fill=\"currentColor\" height=\"40\" width=\"10\" y=\"30\" x=\"15\">\r\n        <animate\r\n          begin=\"-0.6\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n      <rect fill=\"var(--x-primary-200)\" height=\"40\" width=\"10\" y=\"30\" x=\"35\">\r\n        <animate\r\n          begin=\"-0.4\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n      <rect fill=\"var(--x-primary-400)\" height=\"40\" width=\"10\" y=\"30\" x=\"55\">\r\n        <animate\r\n          begin=\"-0.2\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n      <rect fill=\"var(--x-primary-600)\" height=\"40\" width=\"10\" y=\"30\" x=\"75\">\r\n        <animate\r\n          begin=\"-1\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n", styles: ["@keyframes loading-rotate{to{transform:rotate(360deg)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-2.5rem}to{stroke-dasharray:90,150;stroke-dashoffset:-7.5rem}}.x-loading-parent{position:relative}.x-loading{margin:0;padding:0}.x-loading{position:absolute;background-color:var(--x-background);opacity:.85;margin:0;inset:0;display:flex;justify-content:center;align-items:center}.x-loading-inline{position:initial}.x-loading-inner{color:var(--x-primary);text-align:center;line-height:1}.x-loading-circular{animation:loading-rotate 2s linear infinite}.x-loading-icon{animation:loading-rotate 2s linear infinite;display:inline-flex}.x-loading-path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:4;stroke:var(--x-primary);stroke-linecap:round}.x-loading-radius{border-radius:var(--x-border-radius)}.x-loading-top-left-radius{border-top-left-radius:var(--x-border-radius)}.x-loading-top-right-radius{border-top-right-radius:var(--x-border-radius)}.x-loading-bottom-left-radius{border-bottom-left-radius:var(--x-border-radius)}.x-loading-bottom-right-radius{border-bottom-right-radius:var(--x-border-radius)}.x-loading-big .x-loading-circular,.x-loading-big .x-loading-spinner{height:2.175rem;width:2.175rem}.x-loading-big .x-loading-dual-ring,.x-loading-big .x-loading-dual-ball,.x-loading-big .x-loading-bars{height:2.61rem;width:2.61rem}.x-loading-big .x-loading-ripple{height:3.2625rem;width:3.2625rem}.x-loading-big .x-loading-icon{font-size:2.175rem}.x-loading-large .x-loading-circular,.x-loading-large .x-loading-spinner{height:1.875rem;width:1.875rem}.x-loading-large .x-loading-dual-ring,.x-loading-large .x-loading-dual-ball,.x-loading-large .x-loading-bars{height:2.25rem;width:2.25rem}.x-loading-large .x-loading-ripple{height:2.8125rem;width:2.8125rem}.x-loading-large .x-loading-icon{font-size:1.875rem}.x-loading-medium .x-loading-circular,.x-loading-medium .x-loading-spinner{height:1.675rem;width:1.675rem}.x-loading-medium .x-loading-dual-ring,.x-loading-medium .x-loading-dual-ball,.x-loading-medium .x-loading-bars{height:2.01rem;width:2.01rem}.x-loading-medium .x-loading-ripple{height:2.5125rem;width:2.5125rem}.x-loading-medium .x-loading-icon{font-size:1.675rem}.x-loading-small .x-loading-circular,.x-loading-small .x-loading-spinner{height:1.5rem;width:1.5rem}.x-loading-small .x-loading-dual-ring,.x-loading-small .x-loading-dual-ball,.x-loading-small .x-loading-bars{height:1.8rem;width:1.8rem}.x-loading-small .x-loading-ripple{height:2.25rem;width:2.25rem}.x-loading-small .x-loading-icon{font-size:1.5rem}.x-loading-mini .x-loading-circular,.x-loading-mini .x-loading-spinner{height:1.375rem;width:1.375rem}.x-loading-mini .x-loading-dual-ring,.x-loading-mini .x-loading-dual-ball,.x-loading-mini .x-loading-bars{height:1.65rem;width:1.65rem}.x-loading-mini .x-loading-ripple{height:2.0625rem;width:2.0625rem}.x-loading-mini .x-loading-icon{font-size:1.375rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: XLoadingComponent, isStandalone: true, selector: "x-loading, [x-loading]", host: { properties: { "class.x-loading-parent": "this.getLoading" } }, viewQueries: [{ propertyName: "loadingTpl", first: true, predicate: ["loadingTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n@if (!fullScreen()) {\r\n  <ng-container *ngTemplateOutlet=\"loadingTpl\"></ng-container>\r\n}\r\n\r\n<ng-template #loadingTpl>\r\n  @if (loading()) {\r\n    <div\r\n      #loading\r\n      class=\"x-loading\"\r\n      [ngClass]=\"classMap()\"\r\n      [style.background]=\"background()\"\r\n      [style.zIndex]=\"zIndex()\"\r\n      [class.x-loading-radius]=\"isRadius()\"\r\n      [class.x-loading-top-left-radius]=\"includeRadius('top-start')\"\r\n      [class.x-loading-top-right-radius]=\"includeRadius('top-end')\"\r\n      [class.x-loading-bottom-left-radius]=\"includeRadius('bottom-start')\"\r\n      [class.x-loading-bottom-left-radius]=\"includeRadius('bottom-end')\"\r\n      [class.x-loading-inline]=\"inline()\"\r\n    >\r\n      <div class=\"x-loading-inner\" [style.color]=\"color()\">\r\n        @if (customTpl()) {\r\n          <ng-template *ngTemplateOutlet=\"customTpl()!\"></ng-template>\r\n        } @else {\r\n          @if (icon()) {\r\n            <div class=\"x-loading-icon\" [style.font-size.px]=\"sizeNumber()\">\r\n              <x-icon [type]=\"icon()!\"></x-icon>\r\n            </div>\r\n          } @else {\r\n            @switch (type()) {\r\n              @case ('circular') {\r\n                <ng-container *ngTemplateOutlet=\"circularTpl\"></ng-container>\r\n              }\r\n              @case ('spinner') {\r\n                <ng-container *ngTemplateOutlet=\"spinnerTpl\"></ng-container>\r\n              }\r\n              @case ('ripple') {\r\n                <ng-container *ngTemplateOutlet=\"rippleTpl\"></ng-container>\r\n              }\r\n              @case ('dual-ring') {\r\n                <ng-container *ngTemplateOutlet=\"dualRingTpl\"></ng-container>\r\n              }\r\n              @case ('dual-ball') {\r\n                <ng-container *ngTemplateOutlet=\"dualBallTpl\"></ng-container>\r\n              }\r\n              @case ('bars') {\r\n                <ng-container *ngTemplateOutlet=\"barsTpl\"></ng-container>\r\n              }\r\n              @default {\r\n                <ng-container *ngTemplateOutlet=\"circularTpl\"></ng-container>\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <div class=\"x-loading-text\">\r\n          <ng-container *xOutlet=\"text()\">{{ text() }}</ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #circularTpl>\r\n  <svg\r\n    class=\"x-loading-circular\"\r\n    [style.width.px]=\"sizeNumber()\"\r\n    [style.height.px]=\"sizeNumber()\"\r\n    viewBox=\"25 25 50 50\"\r\n  >\r\n    <circle class=\"x-loading-path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #spinnerTpl>\r\n  <svg class=\"x-loading-spinner\" [style.width.px]=\"sizeNumber()\" [style.height.px]=\"sizeNumber()\" viewBox=\"25 25 50 50\">\r\n    <g>\r\n      <g transform=\"rotate(0 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.9166666666666666s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(30 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.8333333333333334s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(60 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.75s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(90 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.6666666666666666s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(120 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.5833333333333334s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(150 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.5s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(180 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.4166666666666667s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(210 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.3333333333333333s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(240 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.25s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(270 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.16666666666666666s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(300 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.08333333333333333s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(330 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"0s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g></g>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #rippleTpl>\r\n  <svg class=\"x-loading-ripple\" [style.width.px]=\"sizeNumber()\" [style.height.px]=\"sizeNumber()\" viewBox=\"0 0 100 100\">\r\n    <g>\r\n      <circle stroke-width=\"6\" stroke=\"currentColor\" fill=\"none\" r=\"0\" cy=\"50\" cx=\"50\">\r\n        <animate\r\n          begin=\"0s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0 0.2 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"0;40\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"r\"\r\n        ></animate>\r\n        <animate\r\n          begin=\"0s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0.2 0 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"1;0\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </circle>\r\n      <circle stroke-width=\"6\" stroke=\"currentColor\" fill=\"none\" r=\"0\" cy=\"50\" cx=\"50\">\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0 0.2 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"0;40\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"r\"\r\n        ></animate>\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0.2 0 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"1;0\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </circle>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #dualRingTpl>\r\n  <svg\r\n    class=\"x-loading-dual-ring\"\r\n    [style.width.px]=\"sizeNumber()\"\r\n    [style.height.px]=\"sizeNumber()\"\r\n    viewBox=\"0 0 100 100\"\r\n  >\r\n    <g>\r\n      <circle\r\n        stroke-linecap=\"round\"\r\n        fill=\"none\"\r\n        stroke-dasharray=\"50.26548245743669 50.26548245743669\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"8\"\r\n        r=\"32\"\r\n        cy=\"50\"\r\n        cx=\"50\"\r\n      >\r\n        <animateTransform\r\n          values=\"0 50 50;360 50 50\"\r\n          keyTimes=\"0;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          type=\"rotate\"\r\n          attributeName=\"transform\"\r\n        ></animateTransform>\r\n      </circle>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #dualBallTpl>\r\n  <svg\r\n    class=\"x-loading-dual-ball\"\r\n    [style.width.px]=\"sizeNumber()\"\r\n    [style.height.px]=\"sizeNumber()\"\r\n    viewBox=\"0 0 100 100\"\r\n  >\r\n    <g>\r\n      <circle r=\"20\" fill=\"currentColor\" cy=\"50\" cx=\"30\">\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          values=\"30;70;30\"\r\n          keyTimes=\"0;0.5;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"cx\"\r\n        ></animate>\r\n      </circle>\r\n      <circle r=\"20\" fill=\"var(--x-primary-500)\" cy=\"50\" cx=\"70\">\r\n        <animate\r\n          begin=\"0s\"\r\n          values=\"30;70;30\"\r\n          keyTimes=\"0;0.5;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"cx\"\r\n        ></animate>\r\n      </circle>\r\n      <circle r=\"20\" fill=\"currentColor\" cy=\"50\" cx=\"30\">\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          values=\"30;70;30\"\r\n          keyTimes=\"0;0.5;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"cx\"\r\n        ></animate>\r\n        <animate\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          keyTimes=\"0;0.499;0.5;1\"\r\n          calcMode=\"discrete\"\r\n          values=\"0;0;1;1\"\r\n          attributeName=\"fill-opacity\"\r\n        ></animate>\r\n      </circle>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #barsTpl>\r\n  <svg class=\"x-loading-bars\" [style.width.px]=\"sizeNumber()\" [style.height.px]=\"sizeNumber()\" viewBox=\"0 0 100 100\">\r\n    <g>\r\n      <rect fill=\"currentColor\" height=\"40\" width=\"10\" y=\"30\" x=\"15\">\r\n        <animate\r\n          begin=\"-0.6\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n      <rect fill=\"var(--x-primary-200)\" height=\"40\" width=\"10\" y=\"30\" x=\"35\">\r\n        <animate\r\n          begin=\"-0.4\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n      <rect fill=\"var(--x-primary-400)\" height=\"40\" width=\"10\" y=\"30\" x=\"55\">\r\n        <animate\r\n          begin=\"-0.2\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n      <rect fill=\"var(--x-primary-600)\" height=\"40\" width=\"10\" y=\"30\" x=\"75\">\r\n        <animate\r\n          begin=\"-1\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n", styles: ["@keyframes loading-rotate{to{transform:rotate(360deg)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-2.5rem}to{stroke-dasharray:90,150;stroke-dashoffset:-7.5rem}}.x-loading-parent{position:relative}.x-loading{margin:0;padding:0}.x-loading{position:absolute;background-color:var(--x-background);opacity:.85;margin:0;inset:0;display:flex;justify-content:center;align-items:center}.x-loading-inline{position:initial}.x-loading-inner{color:var(--x-primary);text-align:center;line-height:1}.x-loading-circular{animation:loading-rotate 2s linear infinite}.x-loading-icon{animation:loading-rotate 2s linear infinite;display:inline-flex}.x-loading-path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:4;stroke:var(--x-primary);stroke-linecap:round}.x-loading-radius{border-radius:var(--x-border-radius)}.x-loading-top-left-radius{border-top-left-radius:var(--x-border-radius)}.x-loading-top-right-radius{border-top-right-radius:var(--x-border-radius)}.x-loading-bottom-left-radius{border-bottom-left-radius:var(--x-border-radius)}.x-loading-bottom-right-radius{border-bottom-right-radius:var(--x-border-radius)}.x-loading-big .x-loading-circular,.x-loading-big .x-loading-spinner{height:2.175rem;width:2.175rem}.x-loading-big .x-loading-dual-ring,.x-loading-big .x-loading-dual-ball,.x-loading-big .x-loading-bars{height:2.61rem;width:2.61rem}.x-loading-big .x-loading-ripple{height:3.2625rem;width:3.2625rem}.x-loading-big .x-loading-icon{font-size:2.175rem}.x-loading-large .x-loading-circular,.x-loading-large .x-loading-spinner{height:1.875rem;width:1.875rem}.x-loading-large .x-loading-dual-ring,.x-loading-large .x-loading-dual-ball,.x-loading-large .x-loading-bars{height:2.25rem;width:2.25rem}.x-loading-large .x-loading-ripple{height:2.8125rem;width:2.8125rem}.x-loading-large .x-loading-icon{font-size:1.875rem}.x-loading-medium .x-loading-circular,.x-loading-medium .x-loading-spinner{height:1.675rem;width:1.675rem}.x-loading-medium .x-loading-dual-ring,.x-loading-medium .x-loading-dual-ball,.x-loading-medium .x-loading-bars{height:2.01rem;width:2.01rem}.x-loading-medium .x-loading-ripple{height:2.5125rem;width:2.5125rem}.x-loading-medium .x-loading-icon{font-size:1.675rem}.x-loading-small .x-loading-circular,.x-loading-small .x-loading-spinner{height:1.5rem;width:1.5rem}.x-loading-small .x-loading-dual-ring,.x-loading-small .x-loading-dual-ball,.x-loading-small .x-loading-bars{height:1.8rem;width:1.8rem}.x-loading-small .x-loading-ripple{height:2.25rem;width:2.25rem}.x-loading-small .x-loading-icon{font-size:1.5rem}.x-loading-mini .x-loading-circular,.x-loading-mini .x-loading-spinner{height:1.375rem;width:1.375rem}.x-loading-mini .x-loading-dual-ring,.x-loading-mini .x-loading-dual-ball,.x-loading-mini .x-loading-bars{height:1.65rem;width:1.65rem}.x-loading-mini .x-loading-ripple{height:2.0625rem;width:2.0625rem}.x-loading-mini .x-loading-icon{font-size:1.375rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XLoadingComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XLoadingPrefix}, [${XLoadingPrefix}]`, imports: [NgClass, NgTemplateOutlet, XIconComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n\r\n@if (!fullScreen()) {\r\n  <ng-container *ngTemplateOutlet=\"loadingTpl\"></ng-container>\r\n}\r\n\r\n<ng-template #loadingTpl>\r\n  @if (loading()) {\r\n    <div\r\n      #loading\r\n      class=\"x-loading\"\r\n      [ngClass]=\"classMap()\"\r\n      [style.background]=\"background()\"\r\n      [style.zIndex]=\"zIndex()\"\r\n      [class.x-loading-radius]=\"isRadius()\"\r\n      [class.x-loading-top-left-radius]=\"includeRadius('top-start')\"\r\n      [class.x-loading-top-right-radius]=\"includeRadius('top-end')\"\r\n      [class.x-loading-bottom-left-radius]=\"includeRadius('bottom-start')\"\r\n      [class.x-loading-bottom-left-radius]=\"includeRadius('bottom-end')\"\r\n      [class.x-loading-inline]=\"inline()\"\r\n    >\r\n      <div class=\"x-loading-inner\" [style.color]=\"color()\">\r\n        @if (customTpl()) {\r\n          <ng-template *ngTemplateOutlet=\"customTpl()!\"></ng-template>\r\n        } @else {\r\n          @if (icon()) {\r\n            <div class=\"x-loading-icon\" [style.font-size.px]=\"sizeNumber()\">\r\n              <x-icon [type]=\"icon()!\"></x-icon>\r\n            </div>\r\n          } @else {\r\n            @switch (type()) {\r\n              @case ('circular') {\r\n                <ng-container *ngTemplateOutlet=\"circularTpl\"></ng-container>\r\n              }\r\n              @case ('spinner') {\r\n                <ng-container *ngTemplateOutlet=\"spinnerTpl\"></ng-container>\r\n              }\r\n              @case ('ripple') {\r\n                <ng-container *ngTemplateOutlet=\"rippleTpl\"></ng-container>\r\n              }\r\n              @case ('dual-ring') {\r\n                <ng-container *ngTemplateOutlet=\"dualRingTpl\"></ng-container>\r\n              }\r\n              @case ('dual-ball') {\r\n                <ng-container *ngTemplateOutlet=\"dualBallTpl\"></ng-container>\r\n              }\r\n              @case ('bars') {\r\n                <ng-container *ngTemplateOutlet=\"barsTpl\"></ng-container>\r\n              }\r\n              @default {\r\n                <ng-container *ngTemplateOutlet=\"circularTpl\"></ng-container>\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        <div class=\"x-loading-text\">\r\n          <ng-container *xOutlet=\"text()\">{{ text() }}</ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #circularTpl>\r\n  <svg\r\n    class=\"x-loading-circular\"\r\n    [style.width.px]=\"sizeNumber()\"\r\n    [style.height.px]=\"sizeNumber()\"\r\n    viewBox=\"25 25 50 50\"\r\n  >\r\n    <circle class=\"x-loading-path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" />\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #spinnerTpl>\r\n  <svg class=\"x-loading-spinner\" [style.width.px]=\"sizeNumber()\" [style.height.px]=\"sizeNumber()\" viewBox=\"25 25 50 50\">\r\n    <g>\r\n      <g transform=\"rotate(0 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.9166666666666666s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(30 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.8333333333333334s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(60 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.75s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(90 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.6666666666666666s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(120 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.5833333333333334s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(150 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.5s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(180 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.4166666666666667s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(210 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.3333333333333333s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(240 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.25s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(270 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.16666666666666666s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(300 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"-0.08333333333333333s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g transform=\"rotate(330 50 50)\">\r\n        <rect fill=\"currentColor\" height=\"11\" width=\"6\" ry=\"0.66\" rx=\"0.66\" y=\"25.5\" x=\"47\">\r\n          <animate\r\n            repeatCount=\"indefinite\"\r\n            begin=\"0s\"\r\n            dur=\"1s\"\r\n            keyTimes=\"0;1\"\r\n            values=\"1;0\"\r\n            attributeName=\"opacity\"\r\n          ></animate>\r\n        </rect>\r\n      </g>\r\n      <g></g>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #rippleTpl>\r\n  <svg class=\"x-loading-ripple\" [style.width.px]=\"sizeNumber()\" [style.height.px]=\"sizeNumber()\" viewBox=\"0 0 100 100\">\r\n    <g>\r\n      <circle stroke-width=\"6\" stroke=\"currentColor\" fill=\"none\" r=\"0\" cy=\"50\" cx=\"50\">\r\n        <animate\r\n          begin=\"0s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0 0.2 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"0;40\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"r\"\r\n        ></animate>\r\n        <animate\r\n          begin=\"0s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0.2 0 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"1;0\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </circle>\r\n      <circle stroke-width=\"6\" stroke=\"currentColor\" fill=\"none\" r=\"0\" cy=\"50\" cx=\"50\">\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0 0.2 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"0;40\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"r\"\r\n        ></animate>\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          calcMode=\"spline\"\r\n          keySplines=\"0.2 0 0.8 1\"\r\n          keyTimes=\"0;1\"\r\n          values=\"1;0\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </circle>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #dualRingTpl>\r\n  <svg\r\n    class=\"x-loading-dual-ring\"\r\n    [style.width.px]=\"sizeNumber()\"\r\n    [style.height.px]=\"sizeNumber()\"\r\n    viewBox=\"0 0 100 100\"\r\n  >\r\n    <g>\r\n      <circle\r\n        stroke-linecap=\"round\"\r\n        fill=\"none\"\r\n        stroke-dasharray=\"50.26548245743669 50.26548245743669\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"8\"\r\n        r=\"32\"\r\n        cy=\"50\"\r\n        cx=\"50\"\r\n      >\r\n        <animateTransform\r\n          values=\"0 50 50;360 50 50\"\r\n          keyTimes=\"0;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          type=\"rotate\"\r\n          attributeName=\"transform\"\r\n        ></animateTransform>\r\n      </circle>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #dualBallTpl>\r\n  <svg\r\n    class=\"x-loading-dual-ball\"\r\n    [style.width.px]=\"sizeNumber()\"\r\n    [style.height.px]=\"sizeNumber()\"\r\n    viewBox=\"0 0 100 100\"\r\n  >\r\n    <g>\r\n      <circle r=\"20\" fill=\"currentColor\" cy=\"50\" cx=\"30\">\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          values=\"30;70;30\"\r\n          keyTimes=\"0;0.5;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"cx\"\r\n        ></animate>\r\n      </circle>\r\n      <circle r=\"20\" fill=\"var(--x-primary-500)\" cy=\"50\" cx=\"70\">\r\n        <animate\r\n          begin=\"0s\"\r\n          values=\"30;70;30\"\r\n          keyTimes=\"0;0.5;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"cx\"\r\n        ></animate>\r\n      </circle>\r\n      <circle r=\"20\" fill=\"currentColor\" cy=\"50\" cx=\"30\">\r\n        <animate\r\n          begin=\"-0.5s\"\r\n          values=\"30;70;30\"\r\n          keyTimes=\"0;0.5;1\"\r\n          dur=\"1s\"\r\n          repeatCount=\"indefinite\"\r\n          attributeName=\"cx\"\r\n        ></animate>\r\n        <animate\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          keyTimes=\"0;0.499;0.5;1\"\r\n          calcMode=\"discrete\"\r\n          values=\"0;0;1;1\"\r\n          attributeName=\"fill-opacity\"\r\n        ></animate>\r\n      </circle>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #barsTpl>\r\n  <svg class=\"x-loading-bars\" [style.width.px]=\"sizeNumber()\" [style.height.px]=\"sizeNumber()\" viewBox=\"0 0 100 100\">\r\n    <g>\r\n      <rect fill=\"currentColor\" height=\"40\" width=\"10\" y=\"30\" x=\"15\">\r\n        <animate\r\n          begin=\"-0.6\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n      <rect fill=\"var(--x-primary-200)\" height=\"40\" width=\"10\" y=\"30\" x=\"35\">\r\n        <animate\r\n          begin=\"-0.4\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n      <rect fill=\"var(--x-primary-400)\" height=\"40\" width=\"10\" y=\"30\" x=\"55\">\r\n        <animate\r\n          begin=\"-0.2\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n      <rect fill=\"var(--x-primary-600)\" height=\"40\" width=\"10\" y=\"30\" x=\"75\">\r\n        <animate\r\n          begin=\"-1\"\r\n          values=\"1;0.2;1\"\r\n          keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1\"\r\n          keyTimes=\"0;0.5;1\"\r\n          calcMode=\"spline\"\r\n          repeatCount=\"indefinite\"\r\n          dur=\"1s\"\r\n          attributeName=\"opacity\"\r\n        ></animate>\r\n      </rect>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n", styles: ["@keyframes loading-rotate{to{transform:rotate(360deg)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-2.5rem}to{stroke-dasharray:90,150;stroke-dashoffset:-7.5rem}}.x-loading-parent{position:relative}.x-loading{margin:0;padding:0}.x-loading{position:absolute;background-color:var(--x-background);opacity:.85;margin:0;inset:0;display:flex;justify-content:center;align-items:center}.x-loading-inline{position:initial}.x-loading-inner{color:var(--x-primary);text-align:center;line-height:1}.x-loading-circular{animation:loading-rotate 2s linear infinite}.x-loading-icon{animation:loading-rotate 2s linear infinite;display:inline-flex}.x-loading-path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:4;stroke:var(--x-primary);stroke-linecap:round}.x-loading-radius{border-radius:var(--x-border-radius)}.x-loading-top-left-radius{border-top-left-radius:var(--x-border-radius)}.x-loading-top-right-radius{border-top-right-radius:var(--x-border-radius)}.x-loading-bottom-left-radius{border-bottom-left-radius:var(--x-border-radius)}.x-loading-bottom-right-radius{border-bottom-right-radius:var(--x-border-radius)}.x-loading-big .x-loading-circular,.x-loading-big .x-loading-spinner{height:2.175rem;width:2.175rem}.x-loading-big .x-loading-dual-ring,.x-loading-big .x-loading-dual-ball,.x-loading-big .x-loading-bars{height:2.61rem;width:2.61rem}.x-loading-big .x-loading-ripple{height:3.2625rem;width:3.2625rem}.x-loading-big .x-loading-icon{font-size:2.175rem}.x-loading-large .x-loading-circular,.x-loading-large .x-loading-spinner{height:1.875rem;width:1.875rem}.x-loading-large .x-loading-dual-ring,.x-loading-large .x-loading-dual-ball,.x-loading-large .x-loading-bars{height:2.25rem;width:2.25rem}.x-loading-large .x-loading-ripple{height:2.8125rem;width:2.8125rem}.x-loading-large .x-loading-icon{font-size:1.875rem}.x-loading-medium .x-loading-circular,.x-loading-medium .x-loading-spinner{height:1.675rem;width:1.675rem}.x-loading-medium .x-loading-dual-ring,.x-loading-medium .x-loading-dual-ball,.x-loading-medium .x-loading-bars{height:2.01rem;width:2.01rem}.x-loading-medium .x-loading-ripple{height:2.5125rem;width:2.5125rem}.x-loading-medium .x-loading-icon{font-size:1.675rem}.x-loading-small .x-loading-circular,.x-loading-small .x-loading-spinner{height:1.5rem;width:1.5rem}.x-loading-small .x-loading-dual-ring,.x-loading-small .x-loading-dual-ball,.x-loading-small .x-loading-bars{height:1.8rem;width:1.8rem}.x-loading-small .x-loading-ripple{height:2.25rem;width:2.25rem}.x-loading-small .x-loading-icon{font-size:1.5rem}.x-loading-mini .x-loading-circular,.x-loading-mini .x-loading-spinner{height:1.375rem;width:1.375rem}.x-loading-mini .x-loading-dual-ring,.x-loading-mini .x-loading-dual-ball,.x-loading-mini .x-loading-bars{height:1.65rem;width:1.65rem}.x-loading-mini .x-loading-ripple{height:2.0625rem;width:2.0625rem}.x-loading-mini .x-loading-icon{font-size:1.375rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { getLoading: [{
@@ -158,11 +158,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             }], loadingTpl: [{ type: i0.ViewChild, args: ['loadingTpl', { isSignal: true }] }] } });
 
 class XLoadingModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: XLoadingModule, imports: [XLoadingComponent], exports: [XLoadingComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XLoadingModule, imports: [XLoadingComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: XLoadingModule, imports: [XLoadingComponent], exports: [XLoadingComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XLoadingModule, imports: [XLoadingComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XLoadingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XLoadingModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XLoadingComponent],

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

@@ -87,10 +87,10 @@ class XMenuProperty extends XPropertyFunction(X_MENU_CONFIG_NAME) {
          */
         this.nodeClick = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XMenuProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: XMenuProperty, isStandalone: true, selector: "x-menu-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, expandedAll: { classPropertyName: "expandedAll", publicName: "expandedAll", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, activatedId: { classPropertyName: "activatedId", publicName: "activatedId", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, portalMinWidth: { classPropertyName: "portalMinWidth", publicName: "portalMinWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activatedId: "activatedIdChange", nodeClick: "nodeClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XMenuProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: XMenuProperty, isStandalone: true, selector: "x-menu-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, expandedAll: { classPropertyName: "expandedAll", publicName: "expandedAll", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, activatedId: { classPropertyName: "activatedId", publicName: "activatedId", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, portalMinWidth: { classPropertyName: "portalMinWidth", publicName: "portalMinWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activatedId: "activatedIdChange", nodeClick: "nodeClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XMenuProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XMenuProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XMenuPrefix}-property`, template: '' }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], nodeTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTpl", required: false }] }], expandedAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedAll", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], activatedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activatedId", required: false }] }, { type: i0.Output, args: ["activatedIdChange"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], portalMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "portalMinWidth", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }] } });
@@ -104,10 +104,10 @@ const XMenuNodePrefix = 'x-menu-node';
  * Menu Node Property
  */
 class XMenuNodeProperty extends XProperty {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XMenuNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: XMenuNodeProperty, isStandalone: true, selector: "x-menu-node-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XMenuNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: XMenuNodeProperty, isStandalone: true, selector: "x-menu-node-property", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XMenuNodeProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XMenuNodeProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XMenuNodePrefix}-property`, template: '' }]
         }] });
@@ -133,10 +133,10 @@ class XMenuNodeComponent extends XMenuNodeProperty {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XMenuNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: XMenuNodeComponent, isStandalone: true, selector: "x-menu-node", inputs: { routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (routerLink() && !leaf()) {\r\n  <a [routerLink]=\"routerLink()\">\r\n    <ng-container *ngTemplateOutlet=\"menuTpl\"></ng-container>\r\n  </a>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"menuTpl\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n  @if (icon()) {\r\n    <x-icon class=\"x-menu-icon\" [type]=\"icon()\"></x-icon>\r\n  }\r\n  @if (nodeTpl()) {\r\n    <ng-container *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node()! }\"></ng-container>\r\n  } @else if (label()) {\r\n    <span class=\"x-menu-text\">{{ label() }} </span>\r\n  }\r\n  @if (label()) {}\r\n  @if (leaf()) {\r\n    <x-icon class=\"x-menu-arrow\" [class.is-open]=\"open()\" type=\"fto-chevron-down\"></x-icon>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XMenuNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: XMenuNodeComponent, isStandalone: true, selector: "x-menu-node", inputs: { routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (routerLink() && !leaf()) {\r\n  <a [routerLink]=\"routerLink()\">\r\n    <ng-container *ngTemplateOutlet=\"menuTpl\"></ng-container>\r\n  </a>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"menuTpl\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n  @if (icon()) {\r\n    <x-icon class=\"x-menu-icon\" [type]=\"icon()\"></x-icon>\r\n  }\r\n  @if (nodeTpl()) {\r\n    <ng-container *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node()! }\"></ng-container>\r\n  } @else if (label()) {\r\n    <span class=\"x-menu-text\">{{ label() }} </span>\r\n  }\r\n  @if (label()) {}\r\n  @if (leaf()) {\r\n    <x-icon class=\"x-menu-arrow\" [class.is-open]=\"open()\" type=\"fto-chevron-down\"></x-icon>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XMenuNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XMenuNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XMenuNodePrefix}`, imports: [NgTemplateOutlet, XIconComponent, RouterModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (routerLink() && !leaf()) {\r\n  <a [routerLink]=\"routerLink()\">\r\n    <ng-container *ngTemplateOutlet=\"menuTpl\"></ng-container>\r\n  </a>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"menuTpl\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n  @if (icon()) {\r\n    <x-icon class=\"x-menu-icon\" [type]=\"icon()\"></x-icon>\r\n  }\r\n  @if (nodeTpl()) {\r\n    <ng-container *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node()! }\"></ng-container>\r\n  } @else if (label()) {\r\n    <span class=\"x-menu-text\">{{ label() }} </span>\r\n  }\r\n  @if (label()) {}\r\n  @if (leaf()) {\r\n    <x-icon class=\"x-menu-arrow\" [class.is-open]=\"open()\" type=\"fto-chevron-down\"></x-icon>\r\n  }\r\n</ng-template>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], leaf: [{ type: i0.Input, args: [{ isSignal: true, alias: "leaf", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], nodeTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTpl", required: false }] }] } });
@@ -300,15 +300,15 @@ class XMenuComponent extends XMenuProperty {
         };
         getParent(node);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: XMenuComponent, isStandalone: true, selector: "x-menu", providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: XMenuComponent, isStandalone: true, selector: "x-menu", providers: [
             {
                 provide: X_MENU_CONTEXT,
                 useExisting: XMenuComponent
             }
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #menu class=\"x-menu\" [ngClass]=\"classMap()\" [style.width]=\"layout() === 'column' ? width() : ''\">\r\n  @if (layout() === 'column') {\r\n    <div class=\"x-menu-nodes\">\r\n      @for (node of nodes(); track node.id) {\r\n        <ng-container *ngTemplateOutlet=\"nodeColumnTpl; context: { $node: node, $children: true }\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n  @if (layout() === 'row') {\r\n    <x-slider\r\n      [data]=\"nodes()\"\r\n      [size]=\"size()\"\r\n      [nodeTpl]=\"nodeRowTpl\"\r\n      [nodeJustify]=\"'center'\"\r\n      [activatedIndex]=\"rootIndex()\"\r\n      (indexChange)=\"rootIndexChange($event)\"\r\n    ></x-slider>\r\n  }\r\n</div>\r\n\r\n<ng-template #nodeTemplate let-node=\"$node\">\r\n  @if (node.level === 0 && collapsed()) {\r\n    <x-dropdown\r\n      [disabled]=\"!node.leaf\"\r\n      [data]=\"node.children\"\r\n      [trigger]=\"trigger()\"\r\n      placement=\"right-start\"\r\n      [(activatedId)]=\"activatedId\"\r\n      (nodeClick)=\"onNodeClick($event)\"\r\n      [portalMinWidth]=\"portalMinWidth()\"\r\n      [size]=\"size()\"\r\n      children\r\n    >\r\n      <x-menu-node\r\n        [routerLink]=\"node.routerLink\"\r\n        [leaf]=\"node.leaf\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [open]=\"node.open\"\r\n        [id]=\"node.id\"\r\n        [nodeTpl]=\"nodeTpl()\"\r\n        [node]=\"node\"\r\n      ></x-menu-node>\r\n    </x-dropdown>\r\n  }\r\n  @if (!collapsed()) {\r\n    <x-menu-node\r\n      [routerLink]=\"node.routerLink\"\r\n      [leaf]=\"node.leaf\"\r\n      [icon]=\"node.icon\"\r\n      [label]=\"node.label\"\r\n      [open]=\"node.open\"\r\n      [id]=\"node.id\"\r\n      [nodeTpl]=\"nodeTpl()\"\r\n      [node]=\"node\"\r\n    ></x-menu-node>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #nodeRowTpl let-node=\"$node\">\r\n  <x-dropdown\r\n    [disabled]=\"!node.leaf\"\r\n    [data]=\"node.children\"\r\n    [trigger]=\"trigger()\"\r\n    [(activatedId)]=\"activatedId\"\r\n    (nodeClick)=\"onNodeClick($event)\"\r\n    [portalMinWidth]=\"portalMinWidth()\"\r\n    [size]=\"size()\"\r\n    children\r\n  >\r\n    <div class=\"x-menu-node\" [ngClass]=\"nodeClassMap()\">\r\n      <ng-container *ngTemplateOutlet=\"nodeTemplate; context: { $node: node }\"></ng-container>\r\n    </div>\r\n  </x-dropdown>\r\n</ng-template>\r\n\r\n<ng-template #nodeColumnTpl let-node=\"$node\">\r\n  <div\r\n    class=\"x-menu-node\"\r\n    [class.x-activated]=\"activated()?.id === node.id\"\r\n    [class.x-menu-category]=\"node.categoryNode\"\r\n    [ngClass]=\"nodeClassMap()\"\r\n    (click)=\"onToggle($event, node)\"\r\n    [style.padding-left.rem]=\"(node.level + 1) * 0.875\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"nodeTemplate; context: { $node: node }\"></ng-container>\r\n  </div>\r\n  @if (node.childrenLoaded || (node.leaf && node.open)) {\r\n    <div class=\"x-menu-nodes\" [hidden]=\"!node.open\">\r\n      @for (child of node.children; track child.id) {\r\n        <ng-container *ngTemplateOutlet=\"nodeColumnTpl; context: { $node: child }\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: ["x-menu{display:block}.x-menu{margin:0;padding:0}.x-menu-icon.x-icon{width:1rem;height:1rem;font-size:1rem;transition:opacity var(--x-animation-duration-base)}.x-menu-arrow.x-icon{width:1rem;height:1rem;transition:opacity var(--x-animation-duration-base)}.x-menu-arrow.x-icon.is-open{transform:rotate(180deg)}.x-menu-node.x-size-big{padding:0 calc(var(--x-padding-big) + .25rem);height:calc(var(--x-height-big) + .75rem);line-height:calc(var(--x-height-big) + .75rem)}.x-menu-node.x-size-big.x-menu-category{height:calc(calc(var(--x-height-big) + .75rem) * 1.5)}.x-menu-node.x-size-large{padding:0 calc(var(--x-padding-large) + .25rem);height:calc(var(--x-height-large) + .75rem);line-height:calc(var(--x-height-large) + .75rem)}.x-menu-node.x-size-large.x-menu-category{height:calc(calc(var(--x-height-large) + .75rem) * 1.5)}.x-menu-node.x-size-medium{padding:0 calc(var(--x-padding-medium) + .25rem);height:calc(var(--x-height-medium) + .75rem);line-height:calc(var(--x-height-medium) + .75rem)}.x-menu-node.x-size-medium.x-menu-category{height:calc(calc(var(--x-height-medium) + .75rem) * 1.5)}.x-menu-node.x-size-small{padding:0 var(--x-padding-small);height:calc(var(--x-height-small) + .5rem);line-height:calc(var(--x-height-small) + .5rem)}.x-menu-node.x-size-small.x-menu-category{height:calc(calc(var(--x-height-small) + .5rem) * 1.5)}.x-menu-node.x-size-mini{padding:0 var(--x-padding-mini);height:calc(var(--x-height-mini) + .5rem);line-height:calc(var(--x-height-mini) + .5rem)}.x-menu-node.x-size-mini.x-menu-category{height:calc(calc(var(--x-height-mini) + .5rem) * 1.5)}.x-menu x-slider .x-slider-scroll>ul>li>x-link{height:inherit!important;line-height:inherit!important}.x-menu-column{width:16rem;transition:var(--x-animation-duration-base)}.x-menu-row .x-menu-text{margin-left:.25rem}.x-menu-nodes .x-menu-node{cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:width var(--x-animation-duration-base),background-color var(--x-animation-duration-base);position:relative;-webkit-user-select:none;user-select:none;padding-right:var(--x-font-size);border-radius:var(--x-border-radius);margin:.125rem 0}.x-menu-nodes .x-menu-node .x-menu-text{flex:1;margin:0 .25rem;transition:background-color var(--x-animation-duration-base),opacity var(--x-animation-duration-base);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-menu-nodes .x-menu-node:hover{color:var(--x-primary);background-color:var(--x-background-a200)}.x-menu-nodes .x-menu-node x-menu-node{flex:1;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.x-menu-nodes .x-menu-node x-menu-node>a{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;color:var(--x-text)}.x-menu-nodes .x-menu-node.x-activated{color:var(--x-primary);background-color:var(--x-primary-900)}.x-menu-nodes .x-menu-node.x-activated:after{content:\"\";position:absolute;height:100%;right:-.125rem;top:0}.x-menu-nodes .x-menu-node.x-activated x-menu-node>a{color:var(--x-primary)}.x-menu-nodes .x-menu-node.x-menu-category{cursor:inherit;color:var(--x-text-400)}.x-menu-nodes .x-menu-node.x-menu-category:hover{background-color:transparent}.x-menu-nodes .x-menu-node.x-menu-category>x-menu-node{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-menu-collapsed.x-menu-column{width:3rem!important}.x-menu-collapsed .x-menu-nodes x-dropdown,.x-menu-collapsed .x-menu-nodes .x-dropdown{display:flex;flex:1}.x-menu-collapsed .x-menu-nodes .x-menu-node{padding-left:0!important;padding-right:0}.x-menu-collapsed .x-menu-nodes .x-menu-node x-menu-node{padding-left:var(--x-font-size)}.x-menu-collapsed .x-menu-nodes .x-menu-node .x-menu-text{opacity:0;width:0}.x-menu-collapsed .x-menu-nodes .x-menu-nodes{display:none}.x-menu-collapsed .x-menu-arrow.x-icon{opacity:0;width:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XSliderComponent, selector: "x-slider" }, { kind: "component", type: XDropdownComponent, selector: "x-dropdown" }, { kind: "component", type: XMenuNodeComponent, selector: "x-menu-node", inputs: ["routerLink", "leaf", "icon", "label", "open", "id", "node", "nodeTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XMenuPrefix}`, imports: [NgClass, NgTemplateOutlet, XSliderComponent, XDropdownComponent, XMenuNodeComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -319,11 +319,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         }], ctorParameters: () => [] });
 
 class XMenuModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: XMenuModule, imports: [XMenuComponent, XMenuNodeComponent], exports: [XMenuComponent, XMenuNodeComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XMenuModule, imports: [XMenuComponent, XMenuNodeComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: XMenuModule, imports: [XMenuComponent, XMenuNodeComponent], exports: [XMenuComponent, XMenuNodeComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XMenuModule, imports: [XMenuComponent, XMenuNodeComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: XMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XMenuComponent, XMenuNodeComponent],