@m1z23r/ngx-ui 1.1.29 → 1.1.31

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -2831,6 +2831,8 @@ class TabComponent {
     iconDirective = contentChild(TabIconDirective, ...(ngDevMode ? [{ debugName: "iconDirective" }] : []));
     /** @internal */
     _index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+    /** @internal */
+    _renderMode = signal('conditional', ...(ngDevMode ? [{ debugName: "_renderMode" }] : []));
     _parent = null;
     iconTemplate = computed(() => {
         return this.iconDirective()?.templateRef ?? null;
@@ -2846,11 +2848,11 @@ class TabComponent {
         this._index.set(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TabComponent, isStandalone: true, selector: "ui-tab, [ui-tab]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconDirective", first: true, predicate: TabIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isActive()) {\n  <div\n    class=\"ui-tab-panel\"\n    role=\"tabpanel\"\n    [attr.id]=\"'panel-' + (id() || _index())\"\n    [attr.aria-labelledby]=\"'tab-' + (id() || _index())\"\n  >\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:block}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TabComponent, isStandalone: true, selector: "ui-tab, [ui-tab]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconDirective", first: true, predicate: TabIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (_renderMode() === 'persistent' || isActive()) {\n  <div\n    class=\"ui-tab-panel\"\n    [class.ui-tab-panel--hidden]=\"_renderMode() === 'persistent' && !isActive()\"\n    role=\"tabpanel\"\n    [attr.id]=\"'panel-' + (id() || _index())\"\n    [attr.aria-labelledby]=\"'tab-' + (id() || _index())\"\n  >\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:block}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}.ui-tab-panel--hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-tab, [ui-tab]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isActive()) {\n  <div\n    class=\"ui-tab-panel\"\n    role=\"tabpanel\"\n    [attr.id]=\"'panel-' + (id() || _index())\"\n    [attr.aria-labelledby]=\"'tab-' + (id() || _index())\"\n  >\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:block}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+            args: [{ selector: 'ui-tab, [ui-tab]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_renderMode() === 'persistent' || isActive()) {\n  <div\n    class=\"ui-tab-panel\"\n    [class.ui-tab-panel--hidden]=\"_renderMode() === 'persistent' && !isActive()\"\n    role=\"tabpanel\"\n    [attr.id]=\"'panel-' + (id() || _index())\"\n    [attr.aria-labelledby]=\"'tab-' + (id() || _index())\"\n  >\n    <ng-content />\n  </div>\n}\n", styles: [":host{display:block}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}.ui-tab-panel--hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TabIconDirective), { isSignal: true }] }] } });
 
 class TabActivePipe {
@@ -2877,6 +2879,7 @@ class TabsComponent {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    renderMode = input('conditional', ...(ngDevMode ? [{ debugName: "renderMode" }] : []));
     activeTab = model(0, ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
     tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
     tabList = viewChild('tabList', ...(ngDevMode ? [{ debugName: "tabList" }] : []));
@@ -2888,8 +2891,10 @@ class TabsComponent {
     constructor() {
         effect(() => {
             const tabList = this.tabs();
+            const renderMode = this.renderMode();
             tabList.forEach((tab, index) => {
                 tab._setTabsParent(this, index);
+                tab._renderMode.set(renderMode);
             });
         });
         afterRenderEffect(() => {
@@ -2987,12 +2992,12 @@ class TabsComponent {
         return active === index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TabsComponent, isStandalone: true, selector: "ui-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ui-tabs\" [class]=\"tabsClasses()\">\n  <div\n    #tabList\n    class=\"ui-tabs__list\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    @for (tab of tabs(); track tab.id() || $index; let i = $index) {\n      @let active = tab | tabActive:i:activeTab();\n      <button\n        #tabButton\n        type=\"button\"\n        class=\"ui-tabs__tab\"\n        role=\"tab\"\n        [class.ui-tabs__tab--active]=\"active\"\n        [class.ui-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-selected]=\"active\"\n        [attr.aria-controls]=\"'panel-' + (tab.id() || i)\"\n        [attr.tabindex]=\"active ? 0 : -1\"\n        [disabled]=\"tab.disabled()\"\n        (click)=\"selectTab(tab, i)\"\n        (keydown)=\"handleKeyDown($event, i)\"\n      >\n        @if (tab.iconTemplate()) {\n          <span class=\"ui-tabs__tab-icon\">\n            <ng-container *ngTemplateOutlet=\"tab.iconTemplate()!\" />\n          </span>\n        }\n        {{ tab.label() }}\n      </button>\n    }\n    @if (variant() === 'underline') {\n      <span\n        class=\"ui-tabs__indicator\"\n        [style.left.px]=\"indicatorLeft()\"\n        [style.width.px]=\"indicatorWidth()\"\n      ></span>\n    }\n  </div>\n  <div class=\"ui-tabs__panels\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TabActivePipe, name: "tabActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TabsComponent, isStandalone: true, selector: "ui-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ui-tabs\" [class]=\"tabsClasses()\">\n  <div\n    #tabList\n    class=\"ui-tabs__list\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    @for (tab of tabs(); track tab.id() || $index; let i = $index) {\n      @let active = tab | tabActive:i:activeTab();\n      <button\n        #tabButton\n        type=\"button\"\n        class=\"ui-tabs__tab\"\n        role=\"tab\"\n        [class.ui-tabs__tab--active]=\"active\"\n        [class.ui-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-selected]=\"active\"\n        [attr.aria-controls]=\"'panel-' + (tab.id() || i)\"\n        [attr.tabindex]=\"active ? 0 : -1\"\n        [disabled]=\"tab.disabled()\"\n        (click)=\"selectTab(tab, i)\"\n        (keydown)=\"handleKeyDown($event, i)\"\n      >\n        @if (tab.iconTemplate()) {\n          <span class=\"ui-tabs__tab-icon\">\n            <ng-container *ngTemplateOutlet=\"tab.iconTemplate()!\" />\n          </span>\n        }\n        {{ tab.label() }}\n      </button>\n    }\n    @if (variant() === 'underline') {\n      <span\n        class=\"ui-tabs__indicator\"\n        [style.left.px]=\"indicatorLeft()\"\n        [style.width.px]=\"indicatorWidth()\"\n      ></span>\n    }\n  </div>\n  <div class=\"ui-tabs__panels\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TabActivePipe, name: "tabActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-tabs', standalone: true, imports: [NgTemplateOutlet, TabActivePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-tabs\" [class]=\"tabsClasses()\">\n  <div\n    #tabList\n    class=\"ui-tabs__list\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    @for (tab of tabs(); track tab.id() || $index; let i = $index) {\n      @let active = tab | tabActive:i:activeTab();\n      <button\n        #tabButton\n        type=\"button\"\n        class=\"ui-tabs__tab\"\n        role=\"tab\"\n        [class.ui-tabs__tab--active]=\"active\"\n        [class.ui-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-selected]=\"active\"\n        [attr.aria-controls]=\"'panel-' + (tab.id() || i)\"\n        [attr.tabindex]=\"active ? 0 : -1\"\n        [disabled]=\"tab.disabled()\"\n        (click)=\"selectTab(tab, i)\"\n        (keydown)=\"handleKeyDown($event, i)\"\n      >\n        @if (tab.iconTemplate()) {\n          <span class=\"ui-tabs__tab-icon\">\n            <ng-container *ngTemplateOutlet=\"tab.iconTemplate()!\" />\n          </span>\n        }\n        {{ tab.label() }}\n      </button>\n    }\n    @if (variant() === 'underline') {\n      <span\n        class=\"ui-tabs__indicator\"\n        [style.left.px]=\"indicatorLeft()\"\n        [style.width.px]=\"indicatorWidth()\"\n      ></span>\n    }\n  </div>\n  <div class=\"ui-tabs__panels\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], tabList: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], renderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMode", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], tabList: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }] } });
 
 class DynamicTabsComponent {
     tabsService = inject(TabsService);
@@ -3000,6 +3005,7 @@ class DynamicTabsComponent {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    renderMode = input('conditional', ...(ngDevMode ? [{ debugName: "renderMode" }] : []));
     tabList = viewChild('tabList', ...(ngDevMode ? [{ debugName: "tabList" }] : []));
     indicatorLeft = signal(0, ...(ngDevMode ? [{ debugName: "indicatorLeft" }] : []));
     indicatorWidth = signal(0, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : []));
@@ -3102,7 +3108,7 @@ class DynamicTabsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DynamicTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DynamicTabsComponent, isStandalone: true, selector: "ui-dynamic-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DynamicTabsComponent, isStandalone: true, selector: "ui-dynamic-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="ui-tabs" [class]="tabsClasses()">
       <div
         #tabList
@@ -3164,9 +3170,10 @@ class DynamicTabsComponent {
       </div>
       <div class="ui-tabs__panels">
         @for (tab of tabs(); track tab.id) {
-          @if (tab.id === activeTabId()) {
+          @if (renderMode() === 'persistent' || tab.id === activeTabId()) {
             <div
               class="ui-tab-panel"
+              [class.ui-tab-panel--hidden]="renderMode() === 'persistent' && tab.id !== activeTabId()"
               role="tabpanel"
               [attr.id]="'panel-' + tab.id"
             >
@@ -3178,7 +3185,7 @@ class DynamicTabsComponent {
         }
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n", ".ui-tabs__tab--closable{padding-right:var(--ui-spacing-xs)}.ui-tabs__tab-label{flex:1}.ui-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:var(--ui-spacing-xs);padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;opacity:0;transition:all var(--ui-transition-fast)}.ui-tabs__tab:hover .ui-tabs__tab-close,.ui-tabs__tab:focus-within .ui-tabs__tab-close{opacity:1}.ui-tabs__tab-close:hover{background:var(--ui-bg-hover);color:var(--ui-danger)}.ui-tabs__tab-close:focus-visible{opacity:1;outline:2px solid var(--ui-primary);outline-offset:1px}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n", ".ui-tabs__tab--closable{padding-right:var(--ui-spacing-xs)}.ui-tabs__tab-label{flex:1}.ui-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:var(--ui-spacing-xs);padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;opacity:0;transition:all var(--ui-transition-fast)}.ui-tabs__tab:hover .ui-tabs__tab-close,.ui-tabs__tab:focus-within .ui-tabs__tab-close{opacity:1}.ui-tabs__tab-close:hover{background:var(--ui-bg-hover);color:var(--ui-danger)}.ui-tabs__tab-close:focus-visible{opacity:1;outline:2px solid var(--ui-primary);outline-offset:1px}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}.ui-tab-panel--hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DynamicTabsComponent, decorators: [{
             type: Component,
@@ -3244,9 +3251,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
       </div>
       <div class="ui-tabs__panels">
         @for (tab of tabs(); track tab.id) {
-          @if (tab.id === activeTabId()) {
+          @if (renderMode() === 'persistent' || tab.id === activeTabId()) {
             <div
               class="ui-tab-panel"
+              [class.ui-tab-panel--hidden]="renderMode() === 'persistent' && tab.id !== activeTabId()"
               role="tabpanel"
               [attr.id]="'panel-' + tab.id"
             >
@@ -3258,8 +3266,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
         }
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n", ".ui-tabs__tab--closable{padding-right:var(--ui-spacing-xs)}.ui-tabs__tab-label{flex:1}.ui-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:var(--ui-spacing-xs);padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;opacity:0;transition:all var(--ui-transition-fast)}.ui-tabs__tab:hover .ui-tabs__tab-close,.ui-tabs__tab:focus-within .ui-tabs__tab-close{opacity:1}.ui-tabs__tab-close:hover{background:var(--ui-bg-hover);color:var(--ui-danger)}.ui-tabs__tab-close:focus-visible{opacity:1;outline:2px solid var(--ui-primary);outline-offset:1px}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tabList: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n", ".ui-tabs__tab--closable{padding-right:var(--ui-spacing-xs)}.ui-tabs__tab-label{flex:1}.ui-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:var(--ui-spacing-xs);padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;opacity:0;transition:all var(--ui-transition-fast)}.ui-tabs__tab:hover .ui-tabs__tab-close,.ui-tabs__tab:focus-within .ui-tabs__tab-close{opacity:1}.ui-tabs__tab-close:hover{background:var(--ui-bg-hover);color:var(--ui-danger)}.ui-tabs__tab-close:focus-visible{opacity:1;outline:2px solid var(--ui-primary);outline-offset:1px}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}.ui-tab-panel--hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], renderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMode", required: false }] }], tabList: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }] } });
 
 class AccordionHeaderDirective {
     templateRef = inject(TemplateRef);
@@ -5980,6 +5988,220 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ selector: 'ui-tree', standalone: true, imports: [TreeNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: TREE_HOST, useExisting: TreeComponent }], template: "<div class=\"ui-tree\">\n  @for (node of nodes(); track node) {\n    <ui-tree-node\n      [node]=\"node\"\n      [level]=\"0\"\n      [indent]=\"indent()\"\n      (nodeClick)=\"_onNodeClick($event)\"\n      (nodeExpand)=\"_onNodeExpand($event)\"\n      (nodeCollapse)=\"_onNodeCollapse($event)\"\n    />\n  }\n</div>\n", styles: [":host{display:block}.ui-tree{font-size:var(--ui-font-sm);color:var(--ui-text);-webkit-user-select:none;user-select:none}\n"] }]
         }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], indent: [{ type: i0.Input, args: [{ isSignal: true, alias: "indent", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }] } });
 
+/** Directive to mark a custom variable popover template */
+class VariablePopoverDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: VariablePopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: VariablePopoverDirective, isStandalone: true, selector: "ng-template[uiVariablePopover]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: VariablePopoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[uiVariablePopover]',
+                    standalone: true,
+                }]
+        }] });
+class TemplateInputComponent {
+    renderer;
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    /** The template string value. Two-way bindable. */
+    value = model.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    /**
+     * Known variables with their values. Two-way bindable.
+     *
+     * The component detects `{{key}}` patterns in the value and resolves state:
+     * - Key found with a truthy value → 'resolved' (green)
+     * - Key found with empty/falsy value → 'unset' (amber)
+     * - Key NOT found in array → 'unknown' (red)
+     */
+    variables = model.required(...(ngDevMode ? [{ debugName: "variables" }] : []));
+    /** Emits the variable key on hover, or null when hover ends. */
+    variableHover = output();
+    /** Custom popover template for variables. Receives VariablePopoverContext. */
+    popoverTemplate = contentChild(VariablePopoverDirective, { ...(ngDevMode ? { debugName: "popoverTemplate" } : {}), read: TemplateRef });
+    static nextId = 0;
+    generatedId = `ui-template-input-${++TemplateInputComponent.nextId}`;
+    inputId = computed(() => this.id() || this.generatedId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    mirrorRef = viewChild('mirror', ...(ngDevMode ? [{ debugName: "mirrorRef" }] : []));
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+    // Popover state
+    popoverVisible = signal(false, ...(ngDevMode ? [{ debugName: "popoverVisible" }] : []));
+    popoverTop = signal(0, ...(ngDevMode ? [{ debugName: "popoverTop" }] : []));
+    popoverLeft = signal(0, ...(ngDevMode ? [{ debugName: "popoverLeft" }] : []));
+    popoverText = signal('', ...(ngDevMode ? [{ debugName: "popoverText" }] : []));
+    popoverVarKey = signal('', ...(ngDevMode ? [{ debugName: "popoverVarKey" }] : []));
+    popoverContext = computed(() => {
+        const key = this.popoverVarKey();
+        const vars = this.variables();
+        const entry = vars.find(v => v.key === key);
+        return {
+            $implicit: key,
+            key,
+            value: entry?.value ?? '',
+            state: this.resolveVarState(key, vars),
+            close: () => this.closePopover(),
+        };
+    }, ...(ngDevMode ? [{ debugName: "popoverContext" }] : []));
+    hoveredVar = null;
+    hideTimer = null;
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.injectStyles();
+    }
+    highlightedHtml = computed(() => {
+        const text = this.value();
+        if (!text)
+            return '\u200b';
+        const vars = this.variables();
+        const escaped = this.escapeHtml(text);
+        // Use CSS classes instead of data-* attributes since Angular's
+        // innerHTML sanitizer strips data attributes.
+        return (escaped.replace(/\{\{([^}]+)\}\}/g, (_match, varKey) => {
+            const state = this.resolveVarState(varKey, vars);
+            return `<span class="ui-tmpl__var ui-tmpl__var--${state}">{{${this.escapeHtml(varKey)}}}</span>`;
+        }) + '\u200b');
+    }, ...(ngDevMode ? [{ debugName: "highlightedHtml" }] : []));
+    syncScroll() {
+        const inputEl = this.inputRef()?.nativeElement;
+        const mirrorEl = this.mirrorRef()?.nativeElement;
+        if (inputEl && mirrorEl) {
+            mirrorEl.scrollLeft = inputEl.scrollLeft;
+        }
+    }
+    onInput() {
+        this.syncScroll();
+    }
+    onKeyDown() {
+        requestAnimationFrame(() => this.syncScroll());
+    }
+    onMouseMove(event) {
+        const mirrorEl = this.mirrorRef()?.nativeElement;
+        if (!mirrorEl) {
+            this.scheduleHide();
+            return;
+        }
+        const spans = mirrorEl.querySelectorAll('.ui-tmpl__var');
+        const { clientX, clientY } = event;
+        for (const span of spans) {
+            const rect = span.getBoundingClientRect();
+            if (clientX >= rect.left &&
+                clientX <= rect.right &&
+                clientY >= rect.top &&
+                clientY <= rect.bottom) {
+                // Extract variable key from text content: "{{varKey}}" → "varKey"
+                const varKey = (span.textContent || '').replace(/^\{\{|\}\}$/g, '');
+                this.cancelHide();
+                this.showPopover(varKey, rect);
+                return;
+            }
+        }
+        this.scheduleHide();
+    }
+    onContainerMouseLeave() {
+        this.scheduleHide();
+    }
+    onPopoverMouseEnter() {
+        this.cancelHide();
+    }
+    onPopoverMouseLeave() {
+        this.scheduleHide();
+    }
+    resolveVarState(varKey, vars) {
+        const entry = vars.find(v => v.key === varKey);
+        if (!entry)
+            return 'unknown';
+        return entry.value ? 'resolved' : 'unset';
+    }
+    showPopover(varKey, spanRect) {
+        if (this.hoveredVar !== varKey) {
+            this.hoveredVar = varKey;
+            this.variableHover.emit(varKey);
+        }
+        const vars = this.variables();
+        const entry = vars.find(v => v.key === varKey);
+        this.popoverVarKey.set(varKey);
+        this.popoverText.set(entry ? (entry.value || varKey) : varKey);
+        this.popoverTop.set(spanRect.top);
+        this.popoverLeft.set(spanRect.left + spanRect.width / 2);
+        this.popoverVisible.set(true);
+    }
+    closePopover() {
+        this.cancelHide();
+        this.popoverVisible.set(false);
+        if (this.hoveredVar !== null) {
+            this.hoveredVar = null;
+            this.variableHover.emit(null);
+        }
+    }
+    scheduleHide() {
+        if (this.hideTimer)
+            return;
+        this.hideTimer = setTimeout(() => {
+            this.hideTimer = null;
+            this.closePopover();
+        }, 200);
+    }
+    cancelHide() {
+        if (this.hideTimer) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+    }
+    escapeHtml(text) {
+        return text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+    }
+    static STYLE_CONTENT = `
+    .ui-tmpl__var {
+      border-radius: 0.125rem;
+    }
+    .ui-tmpl__var--resolved {
+      color: var(--ui-tmpl-resolved-color, var(--ui-success));
+      background: var(--ui-tmpl-resolved-bg, color-mix(in srgb, var(--ui-success) 12%, transparent));
+    }
+    .ui-tmpl__var--unset {
+      color: var(--ui-tmpl-unset-color, var(--ui-warning));
+      background: var(--ui-tmpl-unset-bg, color-mix(in srgb, var(--ui-warning) 12%, transparent));
+    }
+    .ui-tmpl__var--unknown {
+      color: var(--ui-tmpl-unknown-color, var(--ui-danger));
+      background: var(--ui-tmpl-unknown-bg, color-mix(in srgb, var(--ui-danger) 12%, transparent));
+    }
+  `;
+    injectStyles() {
+        const styleId = 'ui-tmpl-styles';
+        let existing = document.getElementById(styleId);
+        // Always replace to handle HMR / version upgrades
+        if (existing) {
+            existing.textContent = TemplateInputComponent.STYLE_CONTENT;
+            return;
+        }
+        const style = this.renderer.createElement('style');
+        this.renderer.setProperty(style, 'id', styleId);
+        this.renderer.setProperty(style, 'textContent', TemplateInputComponent.STYLE_CONTENT);
+        this.renderer.appendChild(document.head, style);
+    }
+    ngOnDestroy() {
+        this.cancelHide();
+        this.closePopover();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TemplateInputComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TemplateInputComponent, isStandalone: true, selector: "ui-template-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, variables: { classPropertyName: "variables", publicName: "variables", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange", variables: "variablesChange", variableHover: "variableHover" }, queries: [{ propertyName: "popoverTemplate", first: true, predicate: VariablePopoverDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "mirrorRef", first: true, predicate: ["mirror"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ui-template-input-wrapper\"\n  [class.ui-template-input-wrapper--error]=\"error()\"\n  [class.ui-template-input-wrapper--disabled]=\"disabled()\"\n>\n  @if (label()) {\n    <label class=\"ui-template-input__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ui-template-input__required\">*</span>\n      }\n    </label>\n  }\n  <div\n    class=\"ui-template-input__container\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mouseleave)=\"onContainerMouseLeave()\"\n  >\n    <div\n      class=\"ui-template-input__mirror\"\n      #mirror\n      [innerHTML]=\"highlightedHtml()\"\n    ></div>\n    <input\n      class=\"ui-template-input__input\"\n      #inputEl\n      [id]=\"inputId()\"\n      type=\"text\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [(ngModel)]=\"value\"\n      (input)=\"onInput()\"\n      (scroll)=\"syncScroll()\"\n      (click)=\"syncScroll()\"\n      (keydown)=\"onKeyDown()\"\n    />\n  </div>\n  @if (error()) {\n    <span class=\"ui-template-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-template-input__hint\">{{ hint() }}</span>\n  }\n</div>\n\n@if (popoverVisible()) {\n  <div\n    class=\"ui-tmpl-popover\"\n    [style.top.px]=\"popoverTop()\"\n    [style.left.px]=\"popoverLeft()\"\n    (mouseenter)=\"onPopoverMouseEnter()\"\n    (mouseleave)=\"onPopoverMouseLeave()\"\n  >\n    @if (popoverTemplate()) {\n      <ng-container\n        [ngTemplateOutlet]=\"popoverTemplate()!\"\n        [ngTemplateOutletContext]=\"popoverContext()\"\n      />\n    } @else {\n      <span class=\"ui-tmpl-popover__text\">{{ popoverText() }}</span>\n    }\n  </div>\n}\n", styles: [":host{display:block}.ui-template-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-template-input__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-template-input__required{color:var(--ui-danger);margin-left:2px}.ui-template-input__container{position:relative;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background-color:var(--ui-bg);transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);overflow:hidden}.ui-template-input__container:hover{border-color:var(--ui-border-hover)}.ui-template-input__container:focus-within{border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-template-input__mirror{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);line-height:1.5;color:var(--ui-text);white-space:pre;overflow:hidden;pointer-events:none}.ui-template-input__input{position:absolute;top:0;left:0;width:100%;height:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);line-height:1.5;color:transparent;caret-color:var(--ui-text);background:transparent;border:none;outline:none}.ui-template-input__input::placeholder{color:var(--ui-text-muted)}.ui-template-input__input:disabled{cursor:not-allowed}.ui-template-input-wrapper--disabled .ui-template-input__container{background-color:var(--ui-bg-secondary)}.ui-template-input-wrapper--disabled .ui-template-input__container:hover{border-color:var(--ui-border)}.ui-template-input-wrapper--disabled .ui-template-input__mirror{color:var(--ui-text-disabled)}.ui-template-input-wrapper--error .ui-template-input__container{border-color:var(--ui-danger)}.ui-template-input-wrapper--error .ui-template-input__container:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-template-input__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-template-input__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tmpl-popover{position:fixed;z-index:10000;transform:translate(-50%,-100%) translateY(-6px);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-lg);animation:ui-tmpl-popover-in .15s ease}.ui-tmpl-popover__text{display:block;padding:.375rem .625rem;font-size:var(--ui-font-sm);color:var(--ui-text);white-space:nowrap}@keyframes ui-tmpl-popover-in{0%{opacity:0;transform:translate(-50%,-100%) translateY(-2px)}to{opacity:1;transform:translate(-50%,-100%) translateY(-6px)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TemplateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-template-input', standalone: true, imports: [FormsModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ui-template-input-wrapper\"\n  [class.ui-template-input-wrapper--error]=\"error()\"\n  [class.ui-template-input-wrapper--disabled]=\"disabled()\"\n>\n  @if (label()) {\n    <label class=\"ui-template-input__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ui-template-input__required\">*</span>\n      }\n    </label>\n  }\n  <div\n    class=\"ui-template-input__container\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mouseleave)=\"onContainerMouseLeave()\"\n  >\n    <div\n      class=\"ui-template-input__mirror\"\n      #mirror\n      [innerHTML]=\"highlightedHtml()\"\n    ></div>\n    <input\n      class=\"ui-template-input__input\"\n      #inputEl\n      [id]=\"inputId()\"\n      type=\"text\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [(ngModel)]=\"value\"\n      (input)=\"onInput()\"\n      (scroll)=\"syncScroll()\"\n      (click)=\"syncScroll()\"\n      (keydown)=\"onKeyDown()\"\n    />\n  </div>\n  @if (error()) {\n    <span class=\"ui-template-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-template-input__hint\">{{ hint() }}</span>\n  }\n</div>\n\n@if (popoverVisible()) {\n  <div\n    class=\"ui-tmpl-popover\"\n    [style.top.px]=\"popoverTop()\"\n    [style.left.px]=\"popoverLeft()\"\n    (mouseenter)=\"onPopoverMouseEnter()\"\n    (mouseleave)=\"onPopoverMouseLeave()\"\n  >\n    @if (popoverTemplate()) {\n      <ng-container\n        [ngTemplateOutlet]=\"popoverTemplate()!\"\n        [ngTemplateOutletContext]=\"popoverContext()\"\n      />\n    } @else {\n      <span class=\"ui-tmpl-popover__text\">{{ popoverText() }}</span>\n    }\n  </div>\n}\n", styles: [":host{display:block}.ui-template-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-template-input__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-template-input__required{color:var(--ui-danger);margin-left:2px}.ui-template-input__container{position:relative;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background-color:var(--ui-bg);transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);overflow:hidden}.ui-template-input__container:hover{border-color:var(--ui-border-hover)}.ui-template-input__container:focus-within{border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-template-input__mirror{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);line-height:1.5;color:var(--ui-text);white-space:pre;overflow:hidden;pointer-events:none}.ui-template-input__input{position:absolute;top:0;left:0;width:100%;height:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);line-height:1.5;color:transparent;caret-color:var(--ui-text);background:transparent;border:none;outline:none}.ui-template-input__input::placeholder{color:var(--ui-text-muted)}.ui-template-input__input:disabled{cursor:not-allowed}.ui-template-input-wrapper--disabled .ui-template-input__container{background-color:var(--ui-bg-secondary)}.ui-template-input-wrapper--disabled .ui-template-input__container:hover{border-color:var(--ui-border)}.ui-template-input-wrapper--disabled .ui-template-input__mirror{color:var(--ui-text-disabled)}.ui-template-input-wrapper--error .ui-template-input__container{border-color:var(--ui-danger)}.ui-template-input-wrapper--error .ui-template-input__container:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-template-input__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-template-input__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tmpl-popover{position:fixed;z-index:10000;transform:translate(-50%,-100%) translateY(-6px);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-lg);animation:ui-tmpl-popover-in .15s ease}.ui-tmpl-popover__text{display:block;padding:.375rem .625rem;font-size:var(--ui-font-sm);color:var(--ui-text);white-space:nowrap}@keyframes ui-tmpl-popover-in{0%{opacity:0;transform:translate(-50%,-100%) translateY(-2px)}to{opacity:1;transform:translate(-50%,-100%) translateY(-6px)}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], variables: [{ type: i0.Input, args: [{ isSignal: true, alias: "variables", required: true }] }, { type: i0.Output, args: ["variablesChange"] }], variableHover: [{ type: i0.Output, args: ["variableHover"] }], popoverTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => VariablePopoverDirective), { ...{ read: TemplateRef }, isSignal: true }] }], mirrorRef: [{ type: i0.ViewChild, args: ['mirror', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
+
 /*
  * Public API Surface of @m1z23r/ngx-ui
  */
@@ -5989,5 +6211,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators };
+export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective };
 //# sourceMappingURL=m1z23r-ngx-ui.mjs.map