@m1z23r/ngx-ui 1.1.13 → 1.1.14

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, PLATFORM_ID, signal, Injectable, computed, InjectionToken, ApplicationRef, EnvironmentInjector, createComponent, Injector, input, output, ChangeDetectionStrategy, Component, ElementRef, HostListener, effect, Directive, model, Pipe, contentChildren, ViewChild, TemplateRef, contentChild, viewChild, DestroyRef } from '@angular/core';
-import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, DecimalPipe } from '@angular/common';
+import { isPlatformBrowser, NgTemplateOutlet, NgComponentOutlet, DOCUMENT, DecimalPipe } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
@@ -535,6 +535,226 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Reference to a dynamically created tab.
+ * Provides methods to close the tab and access its result.
+ */
+class TabRef {
+    closeFn;
+    activateFn;
+    resolvePromise;
+    resultPromise;
+    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
+    /** Unique identifier for this tab */
+    id;
+    /** Whether this tab is currently active */
+    isActive = this._isActive.asReadonly();
+    constructor(id, closeFn, activateFn) {
+        this.closeFn = closeFn;
+        this.activateFn = activateFn;
+        this.id = id;
+        this.resultPromise = new Promise((resolve) => {
+            this.resolvePromise = resolve;
+        });
+    }
+    /**
+     * Closes the tab with an optional result value.
+     */
+    close(result) {
+        this.resolvePromise(result);
+        this.closeFn(this);
+    }
+    /**
+     * Activates this tab.
+     */
+    activate() {
+        this.activateFn(this);
+    }
+    /**
+     * Returns a promise that resolves when the tab is closed.
+     * The promise resolves with the result passed to close(), or undefined if closed without a result.
+     */
+    afterClosed() {
+        return this.resultPromise;
+    }
+    /** @internal */
+    _setActive(active) {
+        this._isActive.set(active);
+    }
+}
+
+/**
+ * Injection token for tab data passed to the component.
+ */
+const TAB_DATA = new InjectionToken('TAB_DATA');
+/**
+ * Injection token for the tab reference.
+ */
+const TAB_REF = new InjectionToken('TAB_REF');
+/**
+ * Default configuration for dynamic tabs.
+ */
+const DEFAULT_TAB_CONFIG = {
+    closable: true,
+    activate: true,
+};
+
+/**
+ * Service for managing dynamic tabs.
+ *
+ * @example
+ * ```typescript
+ * @Component({ ... })
+ * export class MyTabContent {
+ *   private tabRef = inject(TAB_REF) as TabRef<string>;
+ *   private data = inject(TAB_DATA) as { message: string };
+ *
+ *   save() {
+ *     this.tabRef.close('saved');
+ *   }
+ * }
+ *
+ * // In parent component:
+ * const tabRef = this.tabsService.open(MyTabContent, {
+ *   label: 'New Tab',
+ *   data: { message: 'Hello' },
+ *   closable: true
+ * });
+ *
+ * const result = await tabRef.afterClosed();
+ * ```
+ */
+class TabsService {
+    _tabs = signal([], ...(ngDevMode ? [{ debugName: "_tabs" }] : []));
+    _activeTabId = signal(null, ...(ngDevMode ? [{ debugName: "_activeTabId" }] : []));
+    idCounter = 0;
+    /** All currently open tabs */
+    tabs = this._tabs.asReadonly();
+    /** ID of the currently active tab */
+    activeTabId = this._activeTabId.asReadonly();
+    /** The currently active tab */
+    activeTab = computed(() => {
+        const activeId = this._activeTabId();
+        return this._tabs().find((t) => t.id === activeId) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    /**
+     * Opens a new tab with the specified component.
+     *
+     * @param component - The component to render inside the tab
+     * @param config - Configuration options for the tab
+     * @returns A TabRef that can be used to close the tab and get results
+     */
+    open(component, config) {
+        const mergedConfig = { ...DEFAULT_TAB_CONFIG, ...config };
+        const id = config.id ?? `tab-${++this.idCounter}`;
+        const tabRef = new TabRef(id, (ref) => this.close(ref), (ref) => this.activate(ref));
+        const tab = {
+            id,
+            label: config.label,
+            icon: config.icon,
+            component,
+            data: config.data,
+            closable: mergedConfig.closable,
+            tabRef: tabRef,
+        };
+        this._tabs.update((tabs) => [...tabs, tab]);
+        if (mergedConfig.activate) {
+            this.activateById(id);
+        }
+        return tabRef;
+    }
+    /**
+     * Closes a tab by its TabRef.
+     */
+    close(tabRef) {
+        this.closeById(tabRef.id);
+    }
+    /**
+     * Closes a tab by its ID.
+     */
+    closeById(id) {
+        const tabs = this._tabs();
+        const index = tabs.findIndex((t) => t.id === id);
+        if (index === -1)
+            return;
+        // If closing the active tab, activate another one
+        if (this._activeTabId() === id) {
+            const newActiveTab = tabs[index + 1] ?? tabs[index - 1];
+            this._activeTabId.set(newActiveTab?.id ?? null);
+            if (newActiveTab) {
+                newActiveTab.tabRef._setActive(true);
+            }
+        }
+        // Update the closed tab's active state
+        tabs[index].tabRef._setActive(false);
+        this._tabs.update((t) => t.filter((tab) => tab.id !== id));
+    }
+    /**
+     * Closes all tabs.
+     */
+    closeAll() {
+        this._tabs().forEach((tab) => {
+            tab.tabRef._setActive(false);
+        });
+        this._tabs.set([]);
+        this._activeTabId.set(null);
+    }
+    /**
+     * Activates a tab by its TabRef.
+     */
+    activate(tabRef) {
+        this.activateById(tabRef.id);
+    }
+    /**
+     * Activates a tab by its ID.
+     */
+    activateById(id) {
+        const tabs = this._tabs();
+        const tab = tabs.find((t) => t.id === id);
+        if (!tab)
+            return;
+        // Deactivate current tab
+        const currentActive = tabs.find((t) => t.id === this._activeTabId());
+        if (currentActive) {
+            currentActive.tabRef._setActive(false);
+        }
+        // Activate new tab
+        tab.tabRef._setActive(true);
+        this._activeTabId.set(id);
+    }
+    /**
+     * Creates an injector with TAB_DATA and TAB_REF for a tab component.
+     * @internal
+     */
+    _createInjector(parentInjector, data, tabRef) {
+        return Injector.create({
+            providers: [
+                { provide: TAB_DATA, useValue: data },
+                { provide: TAB_REF, useValue: tabRef },
+            ],
+            parent: parentInjector,
+        });
+    }
+    /**
+     * Gets a tab by its ID.
+     */
+    getTab(id) {
+        return this._tabs().find((t) => t.id === id);
+    }
+    /**
+     * Updates a tab's label.
+     */
+    updateLabel(id, label) {
+        this._tabs.update((tabs) => tabs.map((tab) => (tab.id === id ? { ...tab, label } : tab)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TabsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TabsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Modal wrapper component with backdrop, header, body, and footer slots.
  * Uses content projection for flexible content.
@@ -2500,6 +2720,273 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             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 }] }] } });
 
+class DynamicTabsComponent {
+    tabsService = inject(TabsService);
+    injector = inject(Injector);
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    tabList = viewChild('tabList', ...(ngDevMode ? [{ debugName: "tabList" }] : []));
+    indicatorLeft = signal(0, ...(ngDevMode ? [{ debugName: "indicatorLeft" }] : []));
+    indicatorWidth = signal(0, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : []));
+    tabs = this.tabsService.tabs;
+    activeTabId = this.tabsService.activeTabId;
+    injectorCache = new Map();
+    tabsClasses = computed(() => {
+        return `ui-tabs--${this.variant()} ui-tabs--${this.size()}`;
+    }, ...(ngDevMode ? [{ debugName: "tabsClasses" }] : []));
+    constructor() {
+        effect(() => {
+            const _ = this.activeTabId();
+            this.updateIndicator();
+        });
+        // Clean up injector cache when tabs are removed
+        effect(() => {
+            const currentTabs = this.tabs();
+            const currentIds = new Set(currentTabs.map((t) => t.id));
+            for (const id of this.injectorCache.keys()) {
+                if (!currentIds.has(id)) {
+                    this.injectorCache.delete(id);
+                }
+            }
+        });
+    }
+    getInjector(tab) {
+        let injector = this.injectorCache.get(tab.id);
+        if (!injector) {
+            injector = this.tabsService._createInjector(this.injector, tab.data, tab.tabRef);
+            this.injectorCache.set(tab.id, injector);
+        }
+        return injector;
+    }
+    selectTab(tab) {
+        this.tabsService.activateById(tab.id);
+    }
+    closeTab(event, tab) {
+        event.stopPropagation();
+        tab.tabRef.close();
+    }
+    handleKeyDown(event, currentTab) {
+        const tabList = this.tabs();
+        if (tabList.length === 0)
+            return;
+        const currentIndex = tabList.findIndex((t) => t.id === currentTab.id);
+        let nextIndex = -1;
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                nextIndex = (currentIndex - 1 + tabList.length) % tabList.length;
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                nextIndex = (currentIndex + 1) % tabList.length;
+                break;
+            case 'Home':
+                event.preventDefault();
+                nextIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                nextIndex = tabList.length - 1;
+                break;
+            case 'Delete':
+                if (currentTab.closable) {
+                    event.preventDefault();
+                    currentTab.tabRef.close();
+                }
+                return;
+            default:
+                return;
+        }
+        if (nextIndex >= 0) {
+            const nextTab = tabList[nextIndex];
+            this.tabsService.activateById(nextTab.id);
+            this.focusTab(nextIndex);
+        }
+    }
+    focusTab(index) {
+        const tabListEl = this.tabList()?.nativeElement;
+        if (!tabListEl)
+            return;
+        const buttons = tabListEl.querySelectorAll('.ui-tabs__tab');
+        buttons[index]?.focus();
+    }
+    updateIndicator() {
+        if (this.variant() !== 'underline')
+            return;
+        const tabListEl = this.tabList()?.nativeElement;
+        if (!tabListEl)
+            return;
+        const buttons = tabListEl.querySelectorAll('.ui-tabs__tab');
+        const activeId = this.activeTabId();
+        const tabs = this.tabs();
+        const activeIndex = tabs.findIndex((t) => t.id === activeId);
+        if (activeIndex >= 0 && activeIndex < buttons.length) {
+            const activeButton = buttons[activeIndex];
+            this.indicatorLeft.set(activeButton.offsetLeft);
+            this.indicatorWidth.set(activeButton.offsetWidth);
+        }
+    }
+    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: `
+    <div class="ui-tabs" [class]="tabsClasses()">
+      <div
+        #tabList
+        class="ui-tabs__list"
+        role="tablist"
+        [attr.aria-label]="ariaLabel()"
+      >
+        @for (tab of tabs(); track tab.id) {
+          @let active = tab.id === activeTabId();
+          <button
+            type="button"
+            class="ui-tabs__tab"
+            role="tab"
+            [class.ui-tabs__tab--active]="active"
+            [class.ui-tabs__tab--closable]="tab.closable"
+            [attr.aria-selected]="active"
+            [attr.aria-controls]="'panel-' + tab.id"
+            [attr.tabindex]="active ? 0 : -1"
+            (click)="selectTab(tab)"
+            (keydown)="handleKeyDown($event, tab)"
+          >
+            @if (tab.icon) {
+              <span class="ui-tabs__tab-icon">
+                <ng-container *ngTemplateOutlet="tab.icon" />
+              </span>
+            }
+            <span class="ui-tabs__tab-label">{{ tab.label }}</span>
+            @if (tab.closable) {
+              <button
+                type="button"
+                class="ui-tabs__tab-close"
+                aria-label="Close tab"
+                (click)="closeTab($event, tab)"
+              >
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+              </button>
+            }
+          </button>
+        }
+        @if (variant() === 'underline') {
+          <span
+            class="ui-tabs__indicator"
+            [style.left.px]="indicatorLeft()"
+            [style.width.px]="indicatorWidth()"
+          ></span>
+        }
+      </div>
+      <div class="ui-tabs__panels">
+        @for (tab of tabs(); track tab.id) {
+          @if (tab.id === activeTabId()) {
+            <div
+              class="ui-tab-panel"
+              role="tabpanel"
+              [attr.id]="'panel-' + tab.id"
+            >
+              <ng-container
+                *ngComponentOutlet="tab.component; injector: getInjector(tab)"
+              />
+            </div>
+          }
+        }
+      </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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DynamicTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-dynamic-tabs', standalone: true, imports: [NgComponentOutlet, NgTemplateOutlet], template: `
+    <div class="ui-tabs" [class]="tabsClasses()">
+      <div
+        #tabList
+        class="ui-tabs__list"
+        role="tablist"
+        [attr.aria-label]="ariaLabel()"
+      >
+        @for (tab of tabs(); track tab.id) {
+          @let active = tab.id === activeTabId();
+          <button
+            type="button"
+            class="ui-tabs__tab"
+            role="tab"
+            [class.ui-tabs__tab--active]="active"
+            [class.ui-tabs__tab--closable]="tab.closable"
+            [attr.aria-selected]="active"
+            [attr.aria-controls]="'panel-' + tab.id"
+            [attr.tabindex]="active ? 0 : -1"
+            (click)="selectTab(tab)"
+            (keydown)="handleKeyDown($event, tab)"
+          >
+            @if (tab.icon) {
+              <span class="ui-tabs__tab-icon">
+                <ng-container *ngTemplateOutlet="tab.icon" />
+              </span>
+            }
+            <span class="ui-tabs__tab-label">{{ tab.label }}</span>
+            @if (tab.closable) {
+              <button
+                type="button"
+                class="ui-tabs__tab-close"
+                aria-label="Close tab"
+                (click)="closeTab($event, tab)"
+              >
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+              </button>
+            }
+          </button>
+        }
+        @if (variant() === 'underline') {
+          <span
+            class="ui-tabs__indicator"
+            [style.left.px]="indicatorLeft()"
+            [style.width.px]="indicatorWidth()"
+          ></span>
+        }
+      </div>
+      <div class="ui-tabs__panels">
+        @for (tab of tabs(); track tab.id) {
+          @if (tab.id === activeTabId()) {
+            <div
+              class="ui-tab-panel"
+              role="tabpanel"
+              [attr.id]="'panel-' + tab.id"
+            >
+              <ng-container
+                *ngComponentOutlet="tab.component; injector: getInjector(tab)"
+              />
+            </div>
+          }
+        }
+      </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 }] }] } });
+
 class AccordionHeaderDirective {
     templateRef = inject(TemplateRef);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -5137,5 +5624,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, 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, TabActivePipe, TabComponent, TabIconDirective, TableComponent, TabsComponent, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent };
+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, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent };
 //# sourceMappingURL=m1z23r-ngx-ui.mjs.map