@ngneers/controls 0.0.1-next.0

package/fesm2022/ngneers-controls-tabs.mjs

@@ -0,0 +1,336 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, signal, contentChild, afterRenderEffect, Component, computed, Directive, booleanAttribute, model, contentChildren, viewChild, ElementRef, viewChildren, inject, effect } from '@angular/core';
+import { elementSizeSignal, elementsSizesSignal, Platform } from '@ngneers/controls/api/ng';
+import { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';
+import { NgnDefer } from '@ngneers/controls/defer';
+import { NgnScrollAmount, NgnDragScroll } from '@ngneers/controls/directives';
+import { NgnIcon } from '@ngneers/controls/icon';
+import { NgnError } from '@ngneers/controls/utils';
+import { generateElementId } from '@ngneers/controls/utils-ng';
+import { tabsControlTemplate } from '@ngneers/controls-themes/templates/tabs';
+
+/**
+ * @category control
+ */
+class NgnTab extends NgnBase {
+    theme = null;
+    /**
+     * The unique identifier for the tab.
+     */
+    tabId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
+    /**
+     * Useful for accessing the {@link tabId} in a safe way, without worrying about timing.
+     */
+    safeTabId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "safeTabId" }] : /* istanbul ignore next */ []));
+    content = contentChild('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    header = contentChild('header', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        afterRenderEffect(() => {
+            this.safeTabId.set(this.tabId());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: NgnTab, isStandalone: true, selector: "ngn-tab", inputs: { tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: true, transformFunction: null } }, providers: [provideSelf(NgnTab)], queries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTab, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngn-tab',
+                    imports: [],
+                    template: '',
+                    providers: [provideSelf(NgnTab)],
+                }]
+        }], ctorParameters: () => [], propDecorators: { tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabId", required: true }] }], content: [{ type: i0.ContentChild, args: ['content', { isSignal: true }] }], header: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }] } });
+
+class TabsTemplates extends NgnBase {
+    // Header left template
+    _userHeaderLeftTemplate = contentChild('headerLeft', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userHeaderLeftTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Set a custom template for the left side of the tabs header.
+     * Can also be set using an `<ng-template>` element with `#headerLeft` template reference variable.
+     */
+    templateHeaderLeft = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateHeaderLeft" }] : /* istanbul ignore next */ []));
+    headerLeftTemplate = computed(() => this._userHeaderLeftTemplate() ?? this.templateHeaderLeft(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerLeftTemplate" }] : /* istanbul ignore next */ []));
+    // Header right template
+    _userHeaderRightTemplate = contentChild('headerRight', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userHeaderRightTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Set a custom template for the right side of the tabs header.
+     * Can also be set using an `<ng-template>` element with `#headerRight` template reference variable.
+     */
+    templateHeaderRight = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateHeaderRight" }] : /* istanbul ignore next */ []));
+    headerRightTemplate = computed(() => this._userHeaderRightTemplate() ?? this.templateHeaderRight(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerRightTemplate" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TabsTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: TabsTemplates, isStandalone: true, inputs: { templateHeaderLeft: { classPropertyName: "templateHeaderLeft", publicName: "templateHeaderLeft", isSignal: true, isRequired: false, transformFunction: null }, templateHeaderRight: { classPropertyName: "templateHeaderRight", publicName: "templateHeaderRight", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_userHeaderLeftTemplate", first: true, predicate: ["headerLeft"], descendants: true, isSignal: true }, { propertyName: "_userHeaderRightTemplate", first: true, predicate: ["headerRight"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TabsTemplates, decorators: [{
+            type: Directive
+        }], propDecorators: { _userHeaderLeftTemplate: [{ type: i0.ContentChild, args: ['headerLeft', { isSignal: true }] }], templateHeaderLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateHeaderLeft", required: false }] }], _userHeaderRightTemplate: [{ type: i0.ContentChild, args: ['headerRight', { isSignal: true }] }], templateHeaderRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateHeaderRight", required: false }] }] } });
+
+const PADDING_FOR_STICKY_ELEMENTS = 15;
+/**
+ * @category control
+ */
+class NgnTabs extends TabsTemplates {
+    theme = this.injectThemeTemplate(tabsControlTemplate, 'root');
+    /**
+     * Whether to lazy load the tab contents when they become visible.
+     * @default false
+     */
+    lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to cache the tab contents. Only applies to {@link lazy} loaded tabs.
+     * @default false
+     */
+    cache = input(false, { ...(ngDevMode ? { debugName: "cache" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Get or set the active tab ID.
+     */
+    activeTab = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    /**
+     * Icon for the left scroll button.
+     */
+    iconScrollLeft = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "iconScrollLeft" }] : /* istanbul ignore next */ []));
+    /**
+     * Icon for the right scroll button.
+     */
+    iconScrollRight = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "iconScrollRight" }] : /* istanbul ignore next */ []));
+    isFirstRender = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFirstRender" }] : /* istanbul ignore next */ []));
+    elementId = generateElementId();
+    indicatorWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : /* istanbul ignore next */ []));
+    indicatorLeft = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorLeft" }] : /* istanbul ignore next */ []));
+    _tabs = contentChildren(NgnTab, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tabs" }] : /* istanbul ignore next */ []));
+    _tabList = viewChild.required('tabList', {
+        read: (ElementRef),
+    });
+    _tabListScrollDirective = viewChild.required('tabList', {
+        read: NgnScrollAmount,
+    });
+    _tabListScroll = computed(() => this._tabListScrollDirective().scrollLeft(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tabListScroll" }] : /* istanbul ignore next */ []));
+    _tabListSize = elementSizeSignal(this._tabList);
+    _renderedTabHeaders = viewChildren('tabHeader', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_renderedTabHeaders" }] : /* istanbul ignore next */ []));
+    _headerElements = computed(() => this._renderedTabHeaders().map(header => header.nativeElement), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_headerElements" }] : /* istanbul ignore next */ []));
+    _headerSizes = elementsSizesSignal(this._headerElements);
+    headers = computed(() => this._tabs().map(tab => ({
+        id: tab.tabId(),
+        template: tab.header(),
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headers" }] : /* istanbul ignore next */ []));
+    contents = computed(() => this._tabs().map(tab => ({
+        id: tab.tabId(),
+        template: tab.content(),
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contents" }] : /* istanbul ignore next */ []));
+    /**
+     * Inter-header gap (theme-defined — e.g. shade renders the header row as a padded tray with a
+     * `gap` between pills). Read from the resolved column-gap and re-evaluated whenever the list
+     * resizes or its header set changes (covers theme swaps). Included in the width math below so
+     * overflow detection isn't thrown off by the spacing between headers.
+     */
+    _platform = inject(Platform);
+    _headerGap = computed(() => {
+        // getComputedStyle is browser-only; on the server there is no layout, so the gap is irrelevant.
+        if (!this._platform.isBrowser) {
+            return 0;
+        }
+        this._tabListSize();
+        this._headerSizes();
+        const gap = parseFloat(getComputedStyle(this._tabList().nativeElement).columnGap);
+        return Number.isFinite(gap) ? gap : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_headerGap" }] : /* istanbul ignore next */ []));
+    _totalTabsWidth = computed(() => {
+        const sizes = this._headerSizes();
+        const totalWidth = sizes.reduce((sum, size) => sum + size.width, 0);
+        // Gaps sit between headers: N headers → N-1 gaps. Without this the summed header widths
+        // under-report the real scroll width and the right arrow hides while content still overflows.
+        return totalWidth + this._headerGap() * Math.max(0, sizes.length - 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_totalTabsWidth" }] : /* istanbul ignore next */ []));
+    tabsOverflowingRight = computed(() => {
+        const tabListWidth = this._tabListSize().width;
+        const scrollAmount = this._tabListScroll();
+        // Use the signal-tracked total width instead of reading scrollWidth
+        // directly, which would force a synchronous layout.
+        const totalHeadersWidth = this._totalTabsWidth();
+        return totalHeadersWidth - scrollAmount > tabListWidth + 0.5;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabsOverflowingRight" }] : /* istanbul ignore next */ []));
+    tabsOverflowingLeft = computed(() => this._tabListScroll() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabsOverflowingLeft" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        afterRenderEffect(() => {
+            if (!this.activeTab() || !this._tabs().find(tab => tab.safeTabId() === this.activeTab())) {
+                this.activeTab.set(this._tabs()[0]?.tabId() ?? '');
+            }
+        });
+        effect(() => {
+            const activeTabIndex = this._tabs().findIndex(tab => tab.safeTabId() === this.activeTab());
+            const headersizes = this._headerSizes();
+            const headerSizesBeforeActive = headersizes
+                .slice(0, activeTabIndex)
+                .map(size => size.width)
+                .reduce((partialSum, a) => partialSum + a, 0);
+            this.indicatorWidth.set(headersizes[activeTabIndex]?.width ?? 0);
+            this.indicatorLeft.set(headerSizesBeforeActive);
+        });
+    }
+    ngAfterViewInit() {
+        if (!this.activeTab()) {
+            this.activeTab.set(this._tabs()[0]?.tabId() ?? '');
+        }
+        setTimeout(() => {
+            this.isFirstRender.set(false);
+        });
+    }
+    selectTab(tabId) {
+        this.activeTab.set(tabId);
+        this.ensureTabHeaderIsScrolledIntoView(this._tabs().findIndex(tab => tab.safeTabId() === tabId));
+    }
+    handleTabKeyPress(event, tabId) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.selectTab(tabId);
+            return;
+        }
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            const focussedTabElement = this._headerElements().findIndex(element => element === document.activeElement);
+            const indexOfCurrentTab = focussedTabElement !== -1
+                ? focussedTabElement
+                : this._tabs().findIndex(tab => tab.safeTabId() === tabId);
+            if (indexOfCurrentTab === -1) {
+                return;
+            }
+            const nextIndex = event.key === 'ArrowRight' ? indexOfCurrentTab + 1 : indexOfCurrentTab - 1;
+            // overflow
+            const safeNextIndex = (nextIndex + this._tabs().length) % this._tabs().length;
+            this.ensureTabHeaderIsScrolledIntoView(safeNextIndex);
+            const tabElement = document.getElementById(`${this.elementId}_tab_${this._tabs()[safeNextIndex]?.safeTabId()}`);
+            if (tabElement) {
+                tabElement.focus();
+            }
+        }
+    }
+    ensureTabHeaderIsScrolledIntoView(index) {
+        const { left: leftCutOffTabHeaderIndex, right: rightCutOffTabHeaderIndex } = this.getCutOffTabHeaders();
+        const tablistElement = this._tabList().nativeElement;
+        if (index <= leftCutOffTabHeaderIndex) {
+            const newScrollLeft = this.calculateHeaderSliceWidth(0, index) - PADDING_FOR_STICKY_ELEMENTS;
+            setTimeout(() => {
+                tablistElement.scrollTo({ left: newScrollLeft, behavior: 'smooth' });
+            });
+        }
+        else if (index >= rightCutOffTabHeaderIndex && rightCutOffTabHeaderIndex >= 0) {
+            const rightCutOffHeader = this._headerSizes()[rightCutOffTabHeaderIndex];
+            if (!rightCutOffHeader) {
+                throw new NgnError('NgnTabs', `Right cut off header is undefined for index ${rightCutOffTabHeaderIndex}`);
+            }
+            const newScrollLeft = this.calculateHeaderSliceWidth(0, index) -
+                this._tabListSize().width +
+                rightCutOffHeader.width +
+                PADDING_FOR_STICKY_ELEMENTS;
+            setTimeout(() => {
+                tablistElement.scrollTo({ left: newScrollLeft, behavior: 'smooth' });
+            });
+        }
+    }
+    calculateHeaderSliceWidth(fromIndex, toIndex) {
+        const headers = this._headerSizes().map(s => s.width);
+        return headers.slice(fromIndex, toIndex).reduce((a, b) => a + b, 0);
+    }
+    getCutOffTabHeaders() {
+        const headers = this._headerSizes().map(s => s.width);
+        const tabListElement = this._tabList().nativeElement;
+        const tabListWidth = tabListElement.clientWidth - PADDING_FOR_STICKY_ELEMENTS; // account for right padding
+        const scrollAmount = this._tabListScroll();
+        let leftCutOffTabHeaderIndex = -1;
+        let rightCutOffTabHeaderIndex = -1;
+        let cumulativeWidth = PADDING_FOR_STICKY_ELEMENTS; // account for left padding
+        headers.forEach(header => {
+            for (let i = 0; i < headers.length; i++) {
+                const headerStart = cumulativeWidth;
+                const headerEnd = cumulativeWidth + header;
+                cumulativeWidth = headerEnd;
+                if (leftCutOffTabHeaderIndex === -1 && headerEnd > scrollAmount) {
+                    leftCutOffTabHeaderIndex = i;
+                }
+                if (rightCutOffTabHeaderIndex === -1 &&
+                    headerStart < scrollAmount + tabListWidth &&
+                    headerEnd > scrollAmount + tabListWidth) {
+                    rightCutOffTabHeaderIndex = i;
+                }
+            }
+        });
+        return {
+            left: leftCutOffTabHeaderIndex,
+            right: rightCutOffTabHeaderIndex,
+        };
+    }
+    scrollHeaders(direction) {
+        const tabListElement = this._tabList().nativeElement;
+        const headers = this._headerSizes().map(s => s.width);
+        const tabListWidth = tabListElement.clientWidth - PADDING_FOR_STICKY_ELEMENTS; // account for right padding
+        const { left: leftCutOffTabHeaderIndex, right: rightCutOffTabHeaderIndex } = this.getCutOffTabHeaders();
+        if (direction === 'right') {
+            const newScrollAmount = this.calculateHeaderSliceWidth(0, rightCutOffTabHeaderIndex);
+            const scrollAmountFixed = newScrollAmount >= tabListElement.scrollWidth
+                ? newScrollAmount
+                : newScrollAmount - PADDING_FOR_STICKY_ELEMENTS;
+            tabListElement.scrollTo({ left: scrollAmountFixed, behavior: 'smooth' });
+        }
+        else {
+            let usedUpSpace = 0;
+            let indexOfFirstVisibleTab = leftCutOffTabHeaderIndex;
+            while (usedUpSpace < tabListWidth - PADDING_FOR_STICKY_ELEMENTS * 2 &&
+                indexOfFirstVisibleTab >= 0) {
+                usedUpSpace += headers[indexOfFirstVisibleTab] ?? 0;
+                indexOfFirstVisibleTab--;
+            }
+            const scrollTo = indexOfFirstVisibleTab < 0
+                ? 0
+                : headers.slice(0, indexOfFirstVisibleTab + 2).reduce((a, b) => a + b, 0) -
+                    PADDING_FOR_STICKY_ELEMENTS;
+            tabListElement.scrollTo({ left: scrollTo, behavior: 'smooth' });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnTabs, isStandalone: true, selector: "ngn-tabs", inputs: { lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, cache: { classPropertyName: "cache", publicName: "cache", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, iconScrollLeft: { classPropertyName: "iconScrollLeft", publicName: "iconScrollLeft", isSignal: true, isRequired: false, transformFunction: null }, iconScrollRight: { classPropertyName: "iconScrollRight", publicName: "iconScrollRight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, providers: [provideSelf(NgnTabs)], queries: [{ propertyName: "_tabs", predicate: NgnTab, isSignal: true }], viewQueries: [{ propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_tabListScrollDirective", first: true, predicate: ["tabList"], descendants: true, read: NgnScrollAmount, isSignal: true }, { propertyName: "_renderedTabHeaders", predicate: ["tabHeader"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [ptInt]=\"this\" [ptClass]=\"'headers-container'\">\n  <ng-container [ngTemplateOutlet]=\"headerLeftTemplate()\" />\n  <div\n    ngnScrollAmount\n    ngnDragScroll\n    #tabList\n    role=\"tablist\"\n    [ptInt]=\"this\"\n    [ptClass]=\"'headers'\"\n    [id]=\"elementId + '_tablist'\"\n  >\n    @if (tabsOverflowingLeft()) {\n      <button\n        tabindex=\"-1\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'scroll-left'\"\n        (click)=\"scrollHeaders('left')\"\n      >\n        <ngn-icon [icon]=\"iconScrollLeft()\" [defaultIcon]=\"'tabs-scroll-left'\" />\n      </button>\n    }\n\n    @for (header of headers(); track header.id; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [aria-selected]=\"header.id === activeTab()\"\n        [id]=\"elementId + '_tab_' + header.id\"\n        [attr.aria-controls]=\"elementId + '_tabpanel_' + header.id\"\n        [tabindex]=\"header.id === activeTab() ? 0 : -1\"\n        (keydown)=\"handleTabKeyPress($event, header.id)\"\n        #tabHeader\n        [ptInt]=\"this\"\n        [ptClass]=\"{\n          header: true,\n          'header-active': header.id === activeTab(),\n        }\"\n        (click)=\"selectTab(header.id)\"\n      >\n        <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\n      </button>\n    }\n    @if (tabsOverflowingRight()) {\n      <button\n        tabindex=\"-1\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'scroll-right'\"\n        (click)=\"scrollHeaders('right')\"\n      >\n        <ngn-icon [icon]=\"iconScrollRight()\" [defaultIcon]=\"'tabs-scroll-right'\" />\n      </button>\n    }\n    <div\n      [ptInt]=\"this\"\n      [ptClass]=\"'header-active-indicator'\"\n      [style.width.px]=\"indicatorWidth()\"\n      [style.left.px]=\"indicatorLeft()\"\n      [style.transitionDuration.ms]=\"isFirstRender() ? 0 : undefined\"\n    ></div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"headerRightTemplate()\" />\n</div>\n@for (content of contents(); track content.id; let i = $index) {\n  <div\n    role=\"tabpanel\"\n    [ptInt]=\"this\"\n    [ptClass]=\"{ content: content.id === activeTab() }\"\n    [id]=\"elementId + '_tabpanel_' + content.id\"\n    [attr.aria-labelledby]=\"elementId + '_tab_' + content.id\"\n  >\n    <ngn-defer\n      [lazyContent]=\"content.template\"\n      [open]=\"content.id === activeTab()\"\n      [cache]=\"cache()\"\n      [lazy]=\"lazy()\"\n    />\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "component", type: NgnDefer, selector: "ngn-defer", inputs: ["lazyContent", "lazyContentContext", "open", "lazy", "cache", "hiddenOnClosed"] }, { kind: "directive", type: NgnScrollAmount, selector: "[ngnScrollAmount]", inputs: ["ngnScrollAmountContainer"] }, { kind: "directive", type: NgnDragScroll, selector: "[ngnDragScroll]" }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-tabs', imports: [NgTemplateOutlet, NgnPt, NgnDefer, NgnScrollAmount, NgnDragScroll, NgnIcon], providers: [provideSelf(NgnTabs)], template: "<div [ptInt]=\"this\" [ptClass]=\"'headers-container'\">\n  <ng-container [ngTemplateOutlet]=\"headerLeftTemplate()\" />\n  <div\n    ngnScrollAmount\n    ngnDragScroll\n    #tabList\n    role=\"tablist\"\n    [ptInt]=\"this\"\n    [ptClass]=\"'headers'\"\n    [id]=\"elementId + '_tablist'\"\n  >\n    @if (tabsOverflowingLeft()) {\n      <button\n        tabindex=\"-1\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'scroll-left'\"\n        (click)=\"scrollHeaders('left')\"\n      >\n        <ngn-icon [icon]=\"iconScrollLeft()\" [defaultIcon]=\"'tabs-scroll-left'\" />\n      </button>\n    }\n\n    @for (header of headers(); track header.id; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [aria-selected]=\"header.id === activeTab()\"\n        [id]=\"elementId + '_tab_' + header.id\"\n        [attr.aria-controls]=\"elementId + '_tabpanel_' + header.id\"\n        [tabindex]=\"header.id === activeTab() ? 0 : -1\"\n        (keydown)=\"handleTabKeyPress($event, header.id)\"\n        #tabHeader\n        [ptInt]=\"this\"\n        [ptClass]=\"{\n          header: true,\n          'header-active': header.id === activeTab(),\n        }\"\n        (click)=\"selectTab(header.id)\"\n      >\n        <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\n      </button>\n    }\n    @if (tabsOverflowingRight()) {\n      <button\n        tabindex=\"-1\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'scroll-right'\"\n        (click)=\"scrollHeaders('right')\"\n      >\n        <ngn-icon [icon]=\"iconScrollRight()\" [defaultIcon]=\"'tabs-scroll-right'\" />\n      </button>\n    }\n    <div\n      [ptInt]=\"this\"\n      [ptClass]=\"'header-active-indicator'\"\n      [style.width.px]=\"indicatorWidth()\"\n      [style.left.px]=\"indicatorLeft()\"\n      [style.transitionDuration.ms]=\"isFirstRender() ? 0 : undefined\"\n    ></div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"headerRightTemplate()\" />\n</div>\n@for (content of contents(); track content.id; let i = $index) {\n  <div\n    role=\"tabpanel\"\n    [ptInt]=\"this\"\n    [ptClass]=\"{ content: content.id === activeTab() }\"\n    [id]=\"elementId + '_tabpanel_' + content.id\"\n    [attr.aria-labelledby]=\"elementId + '_tab_' + content.id\"\n  >\n    <ngn-defer\n      [lazyContent]=\"content.template\"\n      [open]=\"content.id === activeTab()\"\n      [cache]=\"cache()\"\n      [lazy]=\"lazy()\"\n    />\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], cache: [{ type: i0.Input, args: [{ isSignal: true, alias: "cache", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], iconScrollLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconScrollLeft", required: false }] }], iconScrollRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconScrollRight", required: false }] }], _tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NgnTab), { isSignal: true }] }], _tabList: [{ type: i0.ViewChild, args: ['tabList', { ...{
+                            read: (ElementRef),
+                        }, isSignal: true }] }], _tabListScrollDirective: [{ type: i0.ViewChild, args: ['tabList', { ...{
+                            read: NgnScrollAmount,
+                        }, isSignal: true }] }], _renderedTabHeaders: [{ type: i0.ViewChildren, args: ['tabHeader', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnTab, NgnTabs };
+//# sourceMappingURL=ngneers-controls-tabs.mjs.map

package/fesm2022/ngneers-controls-tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-tabs.mjs","sources":["../../src/tabs/tab.ts","../../src/tabs/tabs-templates.ts","../../src/tabs/tabs.ts","../../src/tabs/tabs.html","../../src/tabs/ngneers-controls-tabs.ts"],"sourcesContent":["import {\n  afterRenderEffect,\n  Component,\n  contentChild,\n  input,\n  signal,\n  TemplateRef,\n} from '@angular/core';\nimport { NgnBase, provideSelf } from '@ngneers/controls/base';\n\n/**\n * @category control\n */\n@Component({\n  selector: 'ngn-tab',\n  imports: [],\n  template: '',\n\n  providers: [provideSelf(NgnTab)],\n})\nexport class NgnTab extends NgnBase<'tabs'> {\n  protected readonly theme = null;\n  /**\n   * The unique identifier for the tab.\n   */\n  public readonly tabId = input.required<string>();\n\n  /**\n   * Useful for accessing the {@link tabId} in a safe way, without worrying about timing.\n   */\n  public readonly safeTabId = signal<string | null>(null);\n\n  public readonly content = contentChild<TemplateRef<unknown>>('content');\n  public readonly header = contentChild<TemplateRef<unknown>>('header');\n\n  constructor() {\n    super();\n\n    afterRenderEffect(() => {\n      this.safeTabId.set(this.tabId());\n    });\n  }\n}\n","import { computed, contentChild, Directive, input, TemplateRef } from '@angular/core';\nimport { NgnBase } from '@ngneers/controls/base';\n\n@Directive()\nexport abstract class TabsTemplates extends NgnBase<'tabs'> {\n  // Header left template\n  private readonly _userHeaderLeftTemplate = contentChild<TemplateRef<unknown>>('headerLeft');\n  /**\n   * Set a custom template for the left side of the tabs header.\n   * Can also be set using an `<ng-template>` element with `#headerLeft` template reference variable.\n   */\n  public readonly templateHeaderLeft = input<TemplateRef<unknown> | null>(null);\n  protected readonly headerLeftTemplate = computed(\n    () => this._userHeaderLeftTemplate() ?? this.templateHeaderLeft()\n  );\n\n  // Header right template\n  private readonly _userHeaderRightTemplate = contentChild<TemplateRef<unknown>>('headerRight');\n  /**\n   * Set a custom template for the right side of the tabs header.\n   * Can also be set using an `<ng-template>` element with `#headerRight` template reference variable.\n   */\n  public readonly templateHeaderRight = input<TemplateRef<unknown> | null>(null);\n  protected readonly headerRightTemplate = computed(\n    () => this._userHeaderRightTemplate() ?? this.templateHeaderRight()\n  );\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n  afterRenderEffect,\n  type AfterViewInit,\n  booleanAttribute,\n  Component,\n  computed,\n  contentChildren,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  model,\n  signal,\n  viewChild,\n  viewChildren,\n} from '@angular/core';\nimport { elementSizeSignal, elementsSizesSignal, Platform } from '@ngneers/controls/api/ng';\nimport { NgnPt, provideSelf } from '@ngneers/controls/base';\nimport { NgnDefer } from '@ngneers/controls/defer';\nimport { NgnDragScroll, NgnScrollAmount } from '@ngneers/controls/directives';\nimport { NgnIcon } from '@ngneers/controls/icon';\nimport { NgnError } from '@ngneers/controls/utils';\nimport { generateElementId } from '@ngneers/controls/utils-ng';\nimport { tabsControlTemplate } from '@ngneers/controls-themes/templates/tabs';\n\nimport { NgnTab } from './tab';\nimport { TabsTemplates } from './tabs-templates';\n\nimport type { IconType } from '@ngneers/controls-custom-types';\n\nconst PADDING_FOR_STICKY_ELEMENTS = 15;\n\n/**\n * @category control\n */\n@Component({\n  selector: 'ngn-tabs',\n  imports: [NgTemplateOutlet, NgnPt, NgnDefer, NgnScrollAmount, NgnDragScroll, NgnIcon],\n  templateUrl: './tabs.html',\n\n  providers: [provideSelf(NgnTabs)],\n})\nexport class NgnTabs extends TabsTemplates implements AfterViewInit {\n  protected readonly theme = this.injectThemeTemplate(tabsControlTemplate, 'root');\n  /**\n   * Whether to lazy load the tab contents when they become visible.\n   * @default false\n   */\n  public readonly lazy = input(false, { transform: booleanAttribute });\n  /**\n   * Whether to cache the tab contents. Only applies to {@link lazy} loaded tabs.\n   * @default false\n   */\n  public readonly cache = input(false, { transform: booleanAttribute });\n  /**\n   * Get or set the active tab ID.\n   */\n  public readonly activeTab = model<string>('');\n  /**\n   * Icon for the left scroll button.\n   */\n  public readonly iconScrollLeft = input<IconType>();\n  /**\n   * Icon for the right scroll button.\n   */\n  public readonly iconScrollRight = input<IconType>();\n\n  protected readonly isFirstRender = signal(true);\n\n  protected readonly elementId = generateElementId();\n  protected readonly indicatorWidth = signal(0);\n  protected readonly indicatorLeft = signal(0);\n\n  private readonly _tabs = contentChildren(NgnTab);\n  private readonly _tabList = viewChild.required<unknown, ElementRef<HTMLDivElement>>('tabList', {\n    read: ElementRef<HTMLDivElement>,\n  });\n  private readonly _tabListScrollDirective = viewChild.required('tabList', {\n    read: NgnScrollAmount,\n  });\n  private readonly _tabListScroll = computed(() => this._tabListScrollDirective().scrollLeft());\n  private readonly _tabListSize = elementSizeSignal(this._tabList);\n\n  private readonly _renderedTabHeaders = viewChildren<ElementRef<HTMLButtonElement>>('tabHeader');\n  private readonly _headerElements = computed(() =>\n    this._renderedTabHeaders().map(header => header.nativeElement)\n  );\n  private readonly _headerSizes = elementsSizesSignal(this._headerElements);\n\n  protected readonly headers = computed(() =>\n    this._tabs().map(tab => ({\n      id: tab.tabId(),\n      template: tab.header(),\n    }))\n  );\n\n  protected readonly contents = computed(() =>\n    this._tabs().map(tab => ({\n      id: tab.tabId(),\n      template: tab.content(),\n    }))\n  );\n\n  /**\n   * Inter-header gap (theme-defined — e.g. shade renders the header row as a padded tray with a\n   * `gap` between pills). Read from the resolved column-gap and re-evaluated whenever the list\n   * resizes or its header set changes (covers theme swaps). Included in the width math below so\n   * overflow detection isn't thrown off by the spacing between headers.\n   */\n  private readonly _platform = inject(Platform);\n  private readonly _headerGap = computed(() => {\n    // getComputedStyle is browser-only; on the server there is no layout, so the gap is irrelevant.\n    if (!this._platform.isBrowser) {\n      return 0;\n    }\n    this._tabListSize();\n    this._headerSizes();\n    const gap = parseFloat(getComputedStyle(this._tabList().nativeElement).columnGap);\n    return Number.isFinite(gap) ? gap : 0;\n  });\n\n  private readonly _totalTabsWidth = computed(() => {\n    const sizes = this._headerSizes();\n    const totalWidth = sizes.reduce((sum, size) => sum + size.width, 0);\n    // Gaps sit between headers: N headers → N-1 gaps. Without this the summed header widths\n    // under-report the real scroll width and the right arrow hides while content still overflows.\n    return totalWidth + this._headerGap() * Math.max(0, sizes.length - 1);\n  });\n\n  protected readonly tabsOverflowingRight = computed(() => {\n    const tabListWidth = this._tabListSize().width;\n    const scrollAmount = this._tabListScroll();\n    // Use the signal-tracked total width instead of reading scrollWidth\n    // directly, which would force a synchronous layout.\n    const totalHeadersWidth = this._totalTabsWidth();\n\n    return totalHeadersWidth - scrollAmount > tabListWidth + 0.5;\n  });\n\n  protected readonly tabsOverflowingLeft = computed(() => this._tabListScroll() > 0);\n\n  constructor() {\n    super();\n\n    afterRenderEffect(() => {\n      if (!this.activeTab() || !this._tabs().find(tab => tab.safeTabId() === this.activeTab())) {\n        this.activeTab.set(this._tabs()[0]?.tabId() ?? '');\n      }\n    });\n\n    effect(() => {\n      const activeTabIndex = this._tabs().findIndex(tab => tab.safeTabId() === this.activeTab());\n\n      const headersizes = this._headerSizes();\n      const headerSizesBeforeActive = headersizes\n        .slice(0, activeTabIndex)\n        .map(size => size.width)\n        .reduce((partialSum, a) => partialSum + a, 0);\n\n      this.indicatorWidth.set(headersizes[activeTabIndex]?.width ?? 0);\n      this.indicatorLeft.set(headerSizesBeforeActive);\n    });\n  }\n\n  public ngAfterViewInit() {\n    if (!this.activeTab()) {\n      this.activeTab.set(this._tabs()[0]?.tabId() ?? '');\n    }\n    setTimeout(() => {\n      this.isFirstRender.set(false);\n    });\n  }\n\n  protected selectTab(tabId: string) {\n    this.activeTab.set(tabId);\n    this.ensureTabHeaderIsScrolledIntoView(\n      this._tabs().findIndex(tab => tab.safeTabId() === tabId)\n    );\n  }\n\n  protected handleTabKeyPress(event: KeyboardEvent, tabId: string) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.selectTab(tabId);\n      return;\n    }\n    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n\n      const focussedTabElement = this._headerElements().findIndex(\n        element => element === document.activeElement\n      );\n\n      const indexOfCurrentTab =\n        focussedTabElement !== -1\n          ? focussedTabElement\n          : this._tabs().findIndex(tab => tab.safeTabId() === tabId);\n      if (indexOfCurrentTab === -1) {\n        return;\n      }\n\n      const nextIndex = event.key === 'ArrowRight' ? indexOfCurrentTab + 1 : indexOfCurrentTab - 1;\n      // overflow\n      const safeNextIndex = (nextIndex + this._tabs().length) % this._tabs().length;\n\n      this.ensureTabHeaderIsScrolledIntoView(safeNextIndex);\n\n      const tabElement = document.getElementById(\n        `${this.elementId}_tab_${this._tabs()[safeNextIndex]?.safeTabId()}`\n      ) as HTMLElement;\n      if (tabElement) {\n        tabElement.focus();\n      }\n    }\n  }\n\n  private ensureTabHeaderIsScrolledIntoView(index: number) {\n    const { left: leftCutOffTabHeaderIndex, right: rightCutOffTabHeaderIndex } =\n      this.getCutOffTabHeaders();\n    const tablistElement = this._tabList().nativeElement;\n    if (index <= leftCutOffTabHeaderIndex) {\n      const newScrollLeft = this.calculateHeaderSliceWidth(0, index) - PADDING_FOR_STICKY_ELEMENTS;\n      setTimeout(() => {\n        tablistElement.scrollTo({ left: newScrollLeft, behavior: 'smooth' });\n      });\n    } else if (index >= rightCutOffTabHeaderIndex && rightCutOffTabHeaderIndex >= 0) {\n      const rightCutOffHeader = this._headerSizes()[rightCutOffTabHeaderIndex];\n      if (!rightCutOffHeader) {\n        throw new NgnError(\n          'NgnTabs',\n          `Right cut off header is undefined for index ${rightCutOffTabHeaderIndex}`\n        );\n      }\n      const newScrollLeft =\n        this.calculateHeaderSliceWidth(0, index) -\n        this._tabListSize().width +\n        rightCutOffHeader.width +\n        PADDING_FOR_STICKY_ELEMENTS;\n      setTimeout(() => {\n        tablistElement.scrollTo({ left: newScrollLeft, behavior: 'smooth' });\n      });\n    }\n  }\n\n  private calculateHeaderSliceWidth(fromIndex: number, toIndex: number) {\n    const headers = this._headerSizes().map(s => s.width);\n    return headers.slice(fromIndex, toIndex).reduce((a, b) => a + b, 0);\n  }\n\n  private getCutOffTabHeaders() {\n    const headers = this._headerSizes().map(s => s.width);\n    const tabListElement = this._tabList().nativeElement;\n\n    const tabListWidth = tabListElement.clientWidth - PADDING_FOR_STICKY_ELEMENTS; // account for right padding\n\n    const scrollAmount = this._tabListScroll();\n    let leftCutOffTabHeaderIndex = -1;\n    let rightCutOffTabHeaderIndex = -1;\n    let cumulativeWidth = PADDING_FOR_STICKY_ELEMENTS; // account for left padding\n\n    headers.forEach(header => {\n      for (let i = 0; i < headers.length; i++) {\n        const headerStart = cumulativeWidth;\n        const headerEnd = cumulativeWidth + header;\n        cumulativeWidth = headerEnd;\n\n        if (leftCutOffTabHeaderIndex === -1 && headerEnd > scrollAmount) {\n          leftCutOffTabHeaderIndex = i;\n        }\n        if (\n          rightCutOffTabHeaderIndex === -1 &&\n          headerStart < scrollAmount + tabListWidth &&\n          headerEnd > scrollAmount + tabListWidth\n        ) {\n          rightCutOffTabHeaderIndex = i;\n        }\n      }\n    });\n    return {\n      left: leftCutOffTabHeaderIndex,\n      right: rightCutOffTabHeaderIndex,\n    };\n  }\n\n  protected scrollHeaders(direction: 'left' | 'right') {\n    const tabListElement = this._tabList().nativeElement;\n    const headers = this._headerSizes().map(s => s.width);\n\n    const tabListWidth = tabListElement.clientWidth - PADDING_FOR_STICKY_ELEMENTS; // account for right padding\n\n    const { left: leftCutOffTabHeaderIndex, right: rightCutOffTabHeaderIndex } =\n      this.getCutOffTabHeaders();\n\n    if (direction === 'right') {\n      const newScrollAmount = this.calculateHeaderSliceWidth(0, rightCutOffTabHeaderIndex);\n\n      const scrollAmountFixed =\n        newScrollAmount >= tabListElement.scrollWidth\n          ? newScrollAmount\n          : newScrollAmount - PADDING_FOR_STICKY_ELEMENTS;\n      tabListElement.scrollTo({ left: scrollAmountFixed, behavior: 'smooth' });\n    } else {\n      let usedUpSpace = 0;\n      let indexOfFirstVisibleTab = leftCutOffTabHeaderIndex;\n      while (\n        usedUpSpace < tabListWidth - PADDING_FOR_STICKY_ELEMENTS * 2 &&\n        indexOfFirstVisibleTab >= 0\n      ) {\n        usedUpSpace += headers[indexOfFirstVisibleTab] ?? 0;\n        indexOfFirstVisibleTab--;\n      }\n\n      const scrollTo =\n        indexOfFirstVisibleTab < 0\n          ? 0\n          : headers.slice(0, indexOfFirstVisibleTab + 2).reduce((a, b) => a + b, 0) -\n            PADDING_FOR_STICKY_ELEMENTS;\n\n      tabListElement.scrollTo({ left: scrollTo, behavior: 'smooth' });\n    }\n  }\n}\n","<div [ptInt]=\"this\" [ptClass]=\"'headers-container'\">\n  <ng-container [ngTemplateOutlet]=\"headerLeftTemplate()\" />\n  <div\n    ngnScrollAmount\n    ngnDragScroll\n    #tabList\n    role=\"tablist\"\n    [ptInt]=\"this\"\n    [ptClass]=\"'headers'\"\n    [id]=\"elementId + '_tablist'\"\n  >\n    @if (tabsOverflowingLeft()) {\n      <button\n        tabindex=\"-1\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'scroll-left'\"\n        (click)=\"scrollHeaders('left')\"\n      >\n        <ngn-icon [icon]=\"iconScrollLeft()\" [defaultIcon]=\"'tabs-scroll-left'\" />\n      </button>\n    }\n\n    @for (header of headers(); track header.id; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [aria-selected]=\"header.id === activeTab()\"\n        [id]=\"elementId + '_tab_' + header.id\"\n        [attr.aria-controls]=\"elementId + '_tabpanel_' + header.id\"\n        [tabindex]=\"header.id === activeTab() ? 0 : -1\"\n        (keydown)=\"handleTabKeyPress($event, header.id)\"\n        #tabHeader\n        [ptInt]=\"this\"\n        [ptClass]=\"{\n          header: true,\n          'header-active': header.id === activeTab(),\n        }\"\n        (click)=\"selectTab(header.id)\"\n      >\n        <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\n      </button>\n    }\n    @if (tabsOverflowingRight()) {\n      <button\n        tabindex=\"-1\"\n        [ptInt]=\"this\"\n        [ptClass]=\"'scroll-right'\"\n        (click)=\"scrollHeaders('right')\"\n      >\n        <ngn-icon [icon]=\"iconScrollRight()\" [defaultIcon]=\"'tabs-scroll-right'\" />\n      </button>\n    }\n    <div\n      [ptInt]=\"this\"\n      [ptClass]=\"'header-active-indicator'\"\n      [style.width.px]=\"indicatorWidth()\"\n      [style.left.px]=\"indicatorLeft()\"\n      [style.transitionDuration.ms]=\"isFirstRender() ? 0 : undefined\"\n    ></div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"headerRightTemplate()\" />\n</div>\n@for (content of contents(); track content.id; let i = $index) {\n  <div\n    role=\"tabpanel\"\n    [ptInt]=\"this\"\n    [ptClass]=\"{ content: content.id === activeTab() }\"\n    [id]=\"elementId + '_tabpanel_' + content.id\"\n    [attr.aria-labelledby]=\"elementId + '_tab_' + content.id\"\n  >\n    <ngn-defer\n      [lazyContent]=\"content.template\"\n      [open]=\"content.id === activeTab()\"\n      [cache]=\"cache()\"\n      [lazy]=\"lazy()\"\n    />\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngneers-controls-tag.mjs

@@ -0,0 +1,30 @@
+import * as i0 from '@angular/core';
+import { input, Component } from '@angular/core';
+import { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { NgnIcon } from '@ngneers/controls/icon';
+import { tagControlTemplate } from '@ngneers/controls-themes/templates/tag';
+
+/**
+ * @category control
+ */
+class NgnTag extends NgnBase {
+    theme = this.injectThemeTemplate(tagControlTemplate, 'root');
+    /**
+     * Set an icon to display before the text.
+     */
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTag, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnTag, isStandalone: true, selector: "ngn-tag", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideSelf(NgnTag)], usesInheritance: true, ngImport: i0, template: "@if (icon()) {\n  <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"icon()\" />\n}\n<div [ptInt]=\"this\" [ptClass]=\"'content'\">\n  <ng-content />\n</div>\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnTag, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-tag', imports: [NgnPt, NgnIcon], providers: [provideSelf(NgnTag)], template: "@if (icon()) {\n  <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"icon()\" />\n}\n<div [ptInt]=\"this\" [ptClass]=\"'content'\">\n  <ng-content />\n</div>\n" }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnTag };
+//# sourceMappingURL=ngneers-controls-tag.mjs.map

package/fesm2022/ngneers-controls-tag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-tag.mjs","sources":["../../src/tag/tag.ts","../../src/tag/tag.html","../../src/tag/ngneers-controls-tag.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\nimport { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';\nimport { NgnIcon } from '@ngneers/controls/icon';\nimport { tagControlTemplate } from '@ngneers/controls-themes/templates/tag';\n\nimport type { IconType } from '@ngneers/controls-custom-types';\n\n/**\n * @category control\n */\n@Component({\n  selector: 'ngn-tag',\n  templateUrl: './tag.html',\n  imports: [NgnPt, NgnIcon],\n  providers: [provideSelf(NgnTag)],\n})\nexport class NgnTag extends NgnBase<'tag'> {\n  protected readonly theme = this.injectThemeTemplate(tagControlTemplate, 'root');\n\n  /**\n   * Set an icon to display before the text.\n   */\n  public readonly icon = input<IconType>();\n}\n","@if (icon()) {\n  <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"icon()\" />\n}\n<div [ptInt]=\"this\" [ptClass]=\"'content'\">\n  <ng-content />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAOA;;AAEG;AAOG,MAAO,MAAO,SAAQ,OAAc,CAAA;IACrB,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,MAAM,CAAC;AAE/E;;AAEG;AACa,IAAA,IAAI,GAAG,KAAK;wFAAY;uGAN7B,MAAM,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EAFN,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdlC,uKAMA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDOY,KAAK,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAGb,MAAM,EAAA,UAAA,EAAA,CAAA;kBANlB,SAAS;+BACE,SAAS,EAAA,OAAA,EAEV,CAAC,KAAK,EAAE,OAAO,CAAC,EAAA,SAAA,EACd,CAAC,WAAW,CAAA,MAAA,CAAQ,CAAC,EAAA,QAAA,EAAA,uKAAA,EAAA;;;AEdlC;;AAEG;;;;"}