npm - @ngneers/controls - Versions diffs - 0.0.1-pre5 → 0.0.1-pre7 - Mend

@ngneers/controls 0.0.1-pre5 → 0.0.1-pre7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (168) hide show

package/fesm2022/ngneers-controls-tabs.mjs CHANGED Viewed

@@ -18,23 +18,23 @@ class NgnTab extends NgnBase {
     /**
      * The unique identifier for the tab.
      */
-    tabId = input.required(...(ngDevMode ? [{ debugName: "tabId" }] : []));
+    tabId = input.required(...(ngDevMode ? [{ debugName: "tabId" }] : /* istanbul ignore next */ []));
     /**
      * Useful for accessing the {@link tabId} in a safe way, without worrying about timing.
      */
-    safeTabId = signal(null, ...(ngDevMode ? [{ debugName: "safeTabId" }] : []));
-    content = contentChild('content', ...(ngDevMode ? [{ debugName: "content" }] : []));
-    header = contentChild('header', ...(ngDevMode ? [{ debugName: "header" }] : []));
+    safeTabId = signal(null, ...(ngDevMode ? [{ debugName: "safeTabId" }] : /* istanbul ignore next */ []));
+    content = contentChild('content', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    header = contentChild('header', ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         afterRenderEffect(() => {
             this.safeTabId.set(this.tabId());
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTab, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngn-tab',
@@ -47,25 +47,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 class TabsTemplates extends NgnBase {
     // Header left template
-    _userHeaderLeftTemplate = contentChild('headerLeft', ...(ngDevMode ? [{ debugName: "_userHeaderLeftTemplate" }] : []));
+    _userHeaderLeftTemplate = contentChild('headerLeft', ...(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, ...(ngDevMode ? [{ debugName: "templateHeaderLeft" }] : []));
-    headerLeftTemplate = computed(() => this._userHeaderLeftTemplate() ?? this.templateHeaderLeft(), ...(ngDevMode ? [{ debugName: "headerLeftTemplate" }] : []));
+    templateHeaderLeft = input(null, ...(ngDevMode ? [{ debugName: "templateHeaderLeft" }] : /* istanbul ignore next */ []));
+    headerLeftTemplate = computed(() => this._userHeaderLeftTemplate() ?? this.templateHeaderLeft(), ...(ngDevMode ? [{ debugName: "headerLeftTemplate" }] : /* istanbul ignore next */ []));
     // Header right template
-    _userHeaderRightTemplate = contentChild('headerRight', ...(ngDevMode ? [{ debugName: "_userHeaderRightTemplate" }] : []));
+    _userHeaderRightTemplate = contentChild('headerRight', ...(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, ...(ngDevMode ? [{ debugName: "templateHeaderRight" }] : []));
-    headerRightTemplate = computed(() => this._userHeaderRightTemplate() ?? this.templateHeaderRight(), ...(ngDevMode ? [{ debugName: "headerRightTemplate" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TabsTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", 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 });
+    templateHeaderRight = input(null, ...(ngDevMode ? [{ debugName: "templateHeaderRight" }] : /* istanbul ignore next */ []));
+    headerRightTemplate = computed(() => this._userHeaderRightTemplate() ?? this.templateHeaderRight(), ...(ngDevMode ? [{ debugName: "headerRightTemplate" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TabsTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.10", 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: "21.1.0", ngImport: i0, type: TabsTemplates, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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 }] }] } });
@@ -78,58 +78,59 @@ class NgnTabs extends TabsTemplates {
     /**
      * Whether to lazy load the tab contents when they become visible.
      */
-    lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : {}), transform: booleanAttribute });
+    lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Whether to cache the tab contents. Only applies to {@link lazy} loaded tabs.
      */
-    cache = input(false, { ...(ngDevMode ? { debugName: "cache" } : {}), transform: booleanAttribute });
+    cache = input(false, { ...(ngDevMode ? { debugName: "cache" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Get or set the active tab ID.
      */
-    activeTab = model('', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    activeTab = model('', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     /**
      * Icon for the left scroll button.
      */
-    iconScrollLeft = input(...(ngDevMode ? [undefined, { debugName: "iconScrollLeft" }] : []));
+    iconScrollLeft = input(...(ngDevMode ? [undefined, { debugName: "iconScrollLeft" }] : /* istanbul ignore next */ []));
     /**
      * Icon for the right scroll button.
      */
-    iconScrollRight = input(...(ngDevMode ? [undefined, { debugName: "iconScrollRight" }] : []));
-    isFirstRender = signal(true, ...(ngDevMode ? [{ debugName: "isFirstRender" }] : []));
+    iconScrollRight = input(...(ngDevMode ? [undefined, { debugName: "iconScrollRight" }] : /* istanbul ignore next */ []));
+    isFirstRender = signal(true, ...(ngDevMode ? [{ debugName: "isFirstRender" }] : /* istanbul ignore next */ []));
     elementId = generateElementId();
-    indicatorWidth = signal(0, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : []));
-    indicatorLeft = signal(0, ...(ngDevMode ? [{ debugName: "indicatorLeft" }] : []));
-    _tabs = contentChildren(NgnTab, ...(ngDevMode ? [{ debugName: "_tabs" }] : []));
+    indicatorWidth = signal(0, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : /* istanbul ignore next */ []));
+    indicatorLeft = signal(0, ...(ngDevMode ? [{ debugName: "indicatorLeft" }] : /* istanbul ignore next */ []));
+    _tabs = contentChildren(NgnTab, ...(ngDevMode ? [{ debugName: "_tabs" }] : /* istanbul ignore next */ []));
     _tabList = viewChild.required('tabList', {
         read: (ElementRef),
     });
     _tabListScrollDirective = viewChild.required('tabList', {
         read: NgnScrollAmount,
     });
-    _tabListScroll = computed(() => this._tabListScrollDirective().scrollLeft(), ...(ngDevMode ? [{ debugName: "_tabListScroll" }] : []));
+    _tabListScroll = computed(() => this._tabListScrollDirective().scrollLeft(), ...(ngDevMode ? [{ debugName: "_tabListScroll" }] : /* istanbul ignore next */ []));
     _tabListSize = elementSizeSignal(this._tabList);
-    _renderedTabHeaders = viewChildren('tabHeader', ...(ngDevMode ? [{ debugName: "_renderedTabHeaders" }] : []));
-    _headerElements = computed(() => this._renderedTabHeaders().map(header => header.nativeElement), ...(ngDevMode ? [{ debugName: "_headerElements" }] : []));
+    _renderedTabHeaders = viewChildren('tabHeader', ...(ngDevMode ? [{ debugName: "_renderedTabHeaders" }] : /* istanbul ignore next */ []));
+    _headerElements = computed(() => this._renderedTabHeaders().map(header => header.nativeElement), ...(ngDevMode ? [{ debugName: "_headerElements" }] : /* istanbul ignore next */ []));
     _headerSizes = elementsSizesSignal(this._headerElements);
     headers = computed(() => this._tabs().map(tab => ({
         id: tab.tabId(),
         template: tab.header(),
-    })), ...(ngDevMode ? [{ debugName: "headers" }] : []));
+    })), ...(ngDevMode ? [{ debugName: "headers" }] : /* istanbul ignore next */ []));
     contents = computed(() => this._tabs().map(tab => ({
         id: tab.tabId(),
         template: tab.content(),
-    })), ...(ngDevMode ? [{ debugName: "contents" }] : []));
+    })), ...(ngDevMode ? [{ debugName: "contents" }] : /* istanbul ignore next */ []));
     _totalTabsWidth = computed(() => {
         return this._headerSizes().reduce((sum, size) => sum + size.width, 0);
-    }, ...(ngDevMode ? [{ debugName: "_totalTabsWidth" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "_totalTabsWidth" }] : /* istanbul ignore next */ []));
     tabsOverflowingRight = computed(() => {
         const tabListWidth = this._tabListSize().width;
-        const tabListScrollWidth = this._tabList().nativeElement.scrollWidth - 0.5; // to avoid rounding issues
         const scrollAmount = this._tabListScroll();
-        const _totalHeadersWidth = this._totalTabsWidth(); // retrigger calculation
-        return tabListScrollWidth - scrollAmount > tabListWidth;
-    }, ...(ngDevMode ? [{ debugName: "tabsOverflowingRight" }] : []));
-    tabsOverflowingLeft = computed(() => this._tabListScroll() > 0, ...(ngDevMode ? [{ debugName: "tabsOverflowingLeft" }] : []));
+        // 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;
+    }, ...(ngDevMode ? [{ debugName: "tabsOverflowingRight" }] : /* istanbul ignore next */ []));
+    tabsOverflowingLeft = computed(() => this._tabListScroll() > 0, ...(ngDevMode ? [{ debugName: "tabsOverflowingLeft" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         afterRenderEffect(() => {
@@ -267,12 +268,12 @@ class NgnTabs extends TabsTemplates {
             tabListElement.scrollTo({ left: scrollTo, behavior: 'smooth' });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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'\">\r\n  <ng-container [ngTemplateOutlet]=\"headerLeftTemplate()\" />\r\n  <div\r\n    ngnScrollAmount\r\n    ngnDragScroll\r\n    #tabList\r\n    role=\"tablist\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'headers'\"\r\n    [id]=\"elementId + '_tablist'\"\r\n  >\r\n    @if (tabsOverflowingLeft()) {\r\n      <button\r\n        tabindex=\"-1\"\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"'scroll-left'\"\r\n        (click)=\"scrollHeaders('left')\"\r\n      >\r\n        <ngn-icon [icon]=\"iconScrollLeft()\" [defaultIcon]=\"'chevron_left'\" />\r\n      </button>\r\n    }\r\n\r\n    @for (header of headers(); track header.id; let i = $index) {\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        [aria-selected]=\"header.id === activeTab()\"\r\n        [id]=\"elementId + '_tab_' + header.id\"\r\n        [attr.aria-controls]=\"elementId + '_tabpanel_' + header.id\"\r\n        [tabindex]=\"header.id === activeTab() ? 0 : -1\"\r\n        (keydown)=\"handleTabKeyPress($event, header.id)\"\r\n        #tabHeader\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"{\r\n          header: true,\r\n          'header-active': header.id === activeTab(),\r\n        }\"\r\n        (click)=\"selectTab(header.id)\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\r\n      </button>\r\n    }\r\n    @if (tabsOverflowingRight()) {\r\n      <button\r\n        tabindex=\"-1\"\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"'scroll-right'\"\r\n        (click)=\"scrollHeaders('right')\"\r\n      >\r\n        <ngn-icon [icon]=\"iconScrollRight()\" [defaultIcon]=\"'chevron_right'\" />\r\n      </button>\r\n    }\r\n    <div\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'header-active-indicator'\"\r\n      [style.width.px]=\"indicatorWidth()\"\r\n      [style.left.px]=\"indicatorLeft()\"\r\n      [style.transitionDuration.ms]=\"isFirstRender() ? 0 : undefined\"\r\n    ></div>\r\n  </div>\r\n  <ng-container [ngTemplateOutlet]=\"headerRightTemplate()\" />\r\n</div>\r\n@for (content of contents(); track content.id; let i = $index) {\r\n  <div\r\n    role=\"tabpanel\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"{ content: content.id === activeTab() }\"\r\n    [id]=\"elementId + '_tabpanel_' + content.id\"\r\n    [attr.aria-labelledby]=\"elementId + '_tab_' + content.id\"\r\n  >\r\n    <ngn-defer\r\n      [lazyContent]=\"content.template\"\r\n      [open]=\"content.id === activeTab()\"\r\n      [cache]=\"cache()\"\r\n      [lazy]=\"lazy()\"\r\n    />\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnDefer, selector: "ngn-defer", inputs: ["lazyContent", "lazyContentContext", "open", "lazy", "cache", "hiddenOnClosed"] }, { kind: "directive", type: NgnScrollAmount, selector: "[ngnScrollAmount]" }, { kind: "directive", type: NgnDragScroll, selector: "[ngnDragScroll]" }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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'\">\r\n  <ng-container [ngTemplateOutlet]=\"headerLeftTemplate()\" />\r\n  <div\r\n    ngnScrollAmount\r\n    ngnDragScroll\r\n    #tabList\r\n    role=\"tablist\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'headers'\"\r\n    [id]=\"elementId + '_tablist'\"\r\n  >\r\n    @if (tabsOverflowingLeft()) {\r\n      <button\r\n        tabindex=\"-1\"\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"'scroll-left'\"\r\n        (click)=\"scrollHeaders('left')\"\r\n      >\r\n        <ngn-icon [icon]=\"iconScrollLeft()\" [defaultIcon]=\"'tabs-scroll-left'\" />\r\n      </button>\r\n    }\r\n\r\n    @for (header of headers(); track header.id; let i = $index) {\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        [aria-selected]=\"header.id === activeTab()\"\r\n        [id]=\"elementId + '_tab_' + header.id\"\r\n        [attr.aria-controls]=\"elementId + '_tabpanel_' + header.id\"\r\n        [tabindex]=\"header.id === activeTab() ? 0 : -1\"\r\n        (keydown)=\"handleTabKeyPress($event, header.id)\"\r\n        #tabHeader\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"{\r\n          header: true,\r\n          'header-active': header.id === activeTab(),\r\n        }\"\r\n        (click)=\"selectTab(header.id)\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\r\n      </button>\r\n    }\r\n    @if (tabsOverflowingRight()) {\r\n      <button\r\n        tabindex=\"-1\"\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"'scroll-right'\"\r\n        (click)=\"scrollHeaders('right')\"\r\n      >\r\n        <ngn-icon [icon]=\"iconScrollRight()\" [defaultIcon]=\"'tabs-scroll-right'\" />\r\n      </button>\r\n    }\r\n    <div\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'header-active-indicator'\"\r\n      [style.width.px]=\"indicatorWidth()\"\r\n      [style.left.px]=\"indicatorLeft()\"\r\n      [style.transitionDuration.ms]=\"isFirstRender() ? 0 : undefined\"\r\n    ></div>\r\n  </div>\r\n  <ng-container [ngTemplateOutlet]=\"headerRightTemplate()\" />\r\n</div>\r\n@for (content of contents(); track content.id; let i = $index) {\r\n  <div\r\n    role=\"tabpanel\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"{ content: content.id === activeTab() }\"\r\n    [id]=\"elementId + '_tabpanel_' + content.id\"\r\n    [attr.aria-labelledby]=\"elementId + '_tab_' + content.id\"\r\n  >\r\n    <ngn-defer\r\n      [lazyContent]=\"content.template\"\r\n      [open]=\"content.id === activeTab()\"\r\n      [cache]=\"cache()\"\r\n      [lazy]=\"lazy()\"\r\n    />\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnDefer, selector: "ngn-defer", inputs: ["lazyContent", "lazyContentContext", "open", "lazy", "cache", "hiddenOnClosed"] }, { kind: "directive", type: NgnScrollAmount, selector: "[ngnScrollAmount]", inputs: ["scrollContainer"] }, { kind: "directive", type: NgnDragScroll, selector: "[ngnDragScroll]" }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTabs, decorators: [{
             type: Component,
-            args: [{ selector: 'ngn-tabs', imports: [NgTemplateOutlet, NgnPt, NgnDefer, NgnScrollAmount, NgnDragScroll, NgnIcon], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideSelf(NgnTabs)], template: "<div [ptInt]=\"this\" [ptClass]=\"'headers-container'\">\r\n  <ng-container [ngTemplateOutlet]=\"headerLeftTemplate()\" />\r\n  <div\r\n    ngnScrollAmount\r\n    ngnDragScroll\r\n    #tabList\r\n    role=\"tablist\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'headers'\"\r\n    [id]=\"elementId + '_tablist'\"\r\n  >\r\n    @if (tabsOverflowingLeft()) {\r\n      <button\r\n        tabindex=\"-1\"\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"'scroll-left'\"\r\n        (click)=\"scrollHeaders('left')\"\r\n      >\r\n        <ngn-icon [icon]=\"iconScrollLeft()\" [defaultIcon]=\"'chevron_left'\" />\r\n      </button>\r\n    }\r\n\r\n    @for (header of headers(); track header.id; let i = $index) {\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        [aria-selected]=\"header.id === activeTab()\"\r\n        [id]=\"elementId + '_tab_' + header.id\"\r\n        [attr.aria-controls]=\"elementId + '_tabpanel_' + header.id\"\r\n        [tabindex]=\"header.id === activeTab() ? 0 : -1\"\r\n        (keydown)=\"handleTabKeyPress($event, header.id)\"\r\n        #tabHeader\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"{\r\n          header: true,\r\n          'header-active': header.id === activeTab(),\r\n        }\"\r\n        (click)=\"selectTab(header.id)\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\r\n      </button>\r\n    }\r\n    @if (tabsOverflowingRight()) {\r\n      <button\r\n        tabindex=\"-1\"\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"'scroll-right'\"\r\n        (click)=\"scrollHeaders('right')\"\r\n      >\r\n        <ngn-icon [icon]=\"iconScrollRight()\" [defaultIcon]=\"'chevron_right'\" />\r\n      </button>\r\n    }\r\n    <div\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'header-active-indicator'\"\r\n      [style.width.px]=\"indicatorWidth()\"\r\n      [style.left.px]=\"indicatorLeft()\"\r\n      [style.transitionDuration.ms]=\"isFirstRender() ? 0 : undefined\"\r\n    ></div>\r\n  </div>\r\n  <ng-container [ngTemplateOutlet]=\"headerRightTemplate()\" />\r\n</div>\r\n@for (content of contents(); track content.id; let i = $index) {\r\n  <div\r\n    role=\"tabpanel\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"{ content: content.id === activeTab() }\"\r\n    [id]=\"elementId + '_tabpanel_' + content.id\"\r\n    [attr.aria-labelledby]=\"elementId + '_tab_' + content.id\"\r\n  >\r\n    <ngn-defer\r\n      [lazyContent]=\"content.template\"\r\n      [open]=\"content.id === activeTab()\"\r\n      [cache]=\"cache()\"\r\n      [lazy]=\"lazy()\"\r\n    />\r\n  </div>\r\n}\r\n" }]
+            args: [{ selector: 'ngn-tabs', imports: [NgTemplateOutlet, NgnPt, NgnDefer, NgnScrollAmount, NgnDragScroll, NgnIcon], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideSelf(NgnTabs)], template: "<div [ptInt]=\"this\" [ptClass]=\"'headers-container'\">\r\n  <ng-container [ngTemplateOutlet]=\"headerLeftTemplate()\" />\r\n  <div\r\n    ngnScrollAmount\r\n    ngnDragScroll\r\n    #tabList\r\n    role=\"tablist\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'headers'\"\r\n    [id]=\"elementId + '_tablist'\"\r\n  >\r\n    @if (tabsOverflowingLeft()) {\r\n      <button\r\n        tabindex=\"-1\"\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"'scroll-left'\"\r\n        (click)=\"scrollHeaders('left')\"\r\n      >\r\n        <ngn-icon [icon]=\"iconScrollLeft()\" [defaultIcon]=\"'tabs-scroll-left'\" />\r\n      </button>\r\n    }\r\n\r\n    @for (header of headers(); track header.id; let i = $index) {\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        [aria-selected]=\"header.id === activeTab()\"\r\n        [id]=\"elementId + '_tab_' + header.id\"\r\n        [attr.aria-controls]=\"elementId + '_tabpanel_' + header.id\"\r\n        [tabindex]=\"header.id === activeTab() ? 0 : -1\"\r\n        (keydown)=\"handleTabKeyPress($event, header.id)\"\r\n        #tabHeader\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"{\r\n          header: true,\r\n          'header-active': header.id === activeTab(),\r\n        }\"\r\n        (click)=\"selectTab(header.id)\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\r\n      </button>\r\n    }\r\n    @if (tabsOverflowingRight()) {\r\n      <button\r\n        tabindex=\"-1\"\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"'scroll-right'\"\r\n        (click)=\"scrollHeaders('right')\"\r\n      >\r\n        <ngn-icon [icon]=\"iconScrollRight()\" [defaultIcon]=\"'tabs-scroll-right'\" />\r\n      </button>\r\n    }\r\n    <div\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'header-active-indicator'\"\r\n      [style.width.px]=\"indicatorWidth()\"\r\n      [style.left.px]=\"indicatorLeft()\"\r\n      [style.transitionDuration.ms]=\"isFirstRender() ? 0 : undefined\"\r\n    ></div>\r\n  </div>\r\n  <ng-container [ngTemplateOutlet]=\"headerRightTemplate()\" />\r\n</div>\r\n@for (content of contents(); track content.id; let i = $index) {\r\n  <div\r\n    role=\"tabpanel\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"{ content: content.id === activeTab() }\"\r\n    [id]=\"elementId + '_tabpanel_' + content.id\"\r\n    [attr.aria-labelledby]=\"elementId + '_tab_' + content.id\"\r\n  >\r\n    <ngn-defer\r\n      [lazyContent]=\"content.template\"\r\n      [open]=\"content.id === activeTab()\"\r\n      [cache]=\"cache()\"\r\n      [lazy]=\"lazy()\"\r\n    />\r\n  </div>\r\n}\r\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', { ...{

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

	@@ -1 +1 @@
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 {\r\n afterRenderEffect,\r\n ChangeDetectionStrategy,\r\n Component,\r\n contentChild,\r\n input,\r\n signal,\r\n TemplateRef,\r\n} from '@angular/core';\r\nimport { NgnBase, provideSelf } from '@ngneers/controls/base';\r\n\r\n/*\r\n @category control\r\n /\r\n@Component({\r\n selector: 'ngn-tab',\r\n imports: [],\r\n template: '',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n providers: [provideSelf(NgnTab)],\r\n})\r\nexport class NgnTab extends NgnBase<'tabs'> {\r\n protected readonly theme = null;\r\n /\r\n The unique identifier for the tab.\r\n /\r\n public readonly tabId = input.required<string>();\r\n\r\n /\r\n Useful for accessing the {@link tabId} in a safe way, without worrying about timing.\r\n /\r\n public readonly safeTabId = signal<string \| null>(null);\r\n\r\n public readonly content = contentChild<TemplateRef<unknown>>('content');\r\n public readonly header = contentChild<TemplateRef<unknown>>('header');\r\n\r\n constructor() {\r\n super();\r\n\r\n afterRenderEffect(() => {\r\n this.safeTabId.set(this.tabId());\r\n });\r\n }\r\n}\r\n","import { computed, contentChild, Directive, input, TemplateRef } from '@angular/core';\r\nimport { NgnBase } from '@ngneers/controls/base';\r\n\r\n@Directive()\r\nexport abstract class TabsTemplates extends NgnBase<'tabs'> {\r\n // Header left template\r\n private readonly _userHeaderLeftTemplate = contentChild<TemplateRef<unknown>>('headerLeft');\r\n /\r\n Set a custom template for the left side of the tabs header.\r\n * Can also be set using an `<ng-template>` element with `#headerLeft` template reference variable.\r\n /\r\n public readonly templateHeaderLeft = input<TemplateRef<unknown> \| null>(null);\r\n protected readonly headerLeftTemplate = computed(\r\n () => this._userHeaderLeftTemplate() ?? this.templateHeaderLeft()\r\n );\r\n\r\n // Header right template\r\n private readonly _userHeaderRightTemplate = contentChild<TemplateRef<unknown>>('headerRight');\r\n /\r\n Set a custom template for the right side of the tabs header.\r\n * Can also be set using an `<ng-template>` element with `#headerRight` template reference variable.\r\n /\r\n public readonly templateHeaderRight = input<TemplateRef<unknown> \| null>(null);\r\n protected readonly headerRightTemplate = computed(\r\n () => this._userHeaderRightTemplate() ?? this.templateHeaderRight()\r\n );\r\n}\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n afterRenderEffect,\r\n type AfterViewInit,\r\n booleanAttribute,\r\n ChangeDetectionStrategy,\r\n Component,\r\n computed,\r\n contentChildren,\r\n effect,\r\n ElementRef,\r\n input,\r\n model,\r\n signal,\r\n viewChild,\r\n viewChildren,\r\n} from '@angular/core';\r\nimport { elementSizeSignal, elementsSizesSignal } from '@ngneers/controls/api/ng';\r\nimport { NgnPt, provideSelf } from '@ngneers/controls/base';\r\nimport { NgnDefer } from '@ngneers/controls/defer';\r\nimport { NgnDragScroll, NgnScrollAmount } from '@ngneers/controls/directives';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { NgnError } from '@ngneers/controls/utils';\r\nimport { generateElementId } from '@ngneers/controls/utils-ng';\r\nimport { tabsControlTemplate } from '@ngneers/controls-themes/templates/tabs';\r\n\r\nimport { NgnTab } from './tab';\r\nimport { TabsTemplates } from './tabs-templates';\r\n\r\nimport type { IconType } from '@ngneers/controls-custom-types';\r\n\r\nconst PADDING_FOR_STICKY_ELEMENTS = 15;\r\n\r\n/\r\n @category control\r\n /\r\n@Component({\r\n selector: 'ngn-tabs',\r\n imports: [NgTemplateOutlet, NgnPt, NgnDefer, NgnScrollAmount, NgnDragScroll, NgnIcon],\r\n templateUrl: './tabs.html',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n providers: [provideSelf(NgnTabs)],\r\n})\r\nexport class NgnTabs extends TabsTemplates implements AfterViewInit {\r\n protected readonly theme = this.injectThemeTemplate(tabsControlTemplate, 'root');\r\n /\r\n Whether to lazy load the tab contents when they become visible.\r\n /\r\n public readonly lazy = input(false, { transform: booleanAttribute });\r\n /\r\n Whether to cache the tab contents. Only applies to {@link lazy} loaded tabs.\r\n /\r\n public readonly cache = input(false, { transform: booleanAttribute });\r\n /\r\n Get or set the active tab ID.\r\n /\r\n public readonly activeTab = model<string>('');\r\n /\r\n Icon for the left scroll button.\r\n /\r\n public readonly iconScrollLeft = input<IconType>();\r\n /\r\n Icon for the right scroll button.\r\n /\r\n public readonly iconScrollRight = input<IconType>();\r\n\r\n protected readonly isFirstRender = signal(true);\r\n\r\n protected readonly elementId = generateElementId();\r\n protected readonly indicatorWidth = signal(0);\r\n protected readonly indicatorLeft = signal(0);\r\n\r\n private readonly _tabs = contentChildren(NgnTab);\r\n private readonly _tabList = viewChild.required<unknown, ElementRef<HTMLDivElement>>('tabList', {\r\n read: ElementRef<HTMLDivElement>,\r\n });\r\n private readonly _tabListScrollDirective = viewChild.required('tabList', {\r\n read: NgnScrollAmount,\r\n });\r\n private readonly _tabListScroll = computed(() => this._tabListScrollDirective().scrollLeft());\r\n private readonly _tabListSize = elementSizeSignal(this._tabList);\r\n\r\n private readonly _renderedTabHeaders = viewChildren<ElementRef<HTMLButtonElement>>('tabHeader');\r\n private readonly _headerElements = computed(() =>\r\n this._renderedTabHeaders().map(header => header.nativeElement)\r\n );\r\n private readonly _headerSizes = elementsSizesSignal(this._headerElements);\r\n\r\n protected readonly headers = computed(() =>\r\n this._tabs().map(tab => ({\r\n id: tab.tabId(),\r\n template: tab.header(),\r\n }))\r\n );\r\n\r\n protected readonly contents = computed(() =>\r\n this._tabs().map(tab => ({\r\n id: tab.tabId(),\r\n template: tab.content(),\r\n }))\r\n );\r\n\r\n private readonly _totalTabsWidth = computed(() => {\r\n return this._headerSizes().reduce((sum, size) => sum + size.width, 0);\r\n });\r\n\r\n protected readonly tabsOverflowingRight = computed(() => {\r\n const tabListWidth = this._tabListSize().width;\r\n const tabListScrollWidth = this._tabList().nativeElement.scrollWidth - 0.5; // to avoid rounding issues\r\n const scrollAmount = this._tabListScroll();\r\n const _totalHeadersWidth = this._totalTabsWidth(); // retrigger calculation\r\n\r\n return tabListScrollWidth - scrollAmount > tabListWidth;\r\n });\r\n\r\n protected readonly tabsOverflowingLeft = computed(() => this._tabListScroll() > 0);\r\n\r\n constructor() {\r\n super();\r\n\r\n afterRenderEffect(() => {\r\n if (!this.activeTab() \|\| !this._tabs().find(tab => tab.safeTabId() === this.activeTab())) {\r\n this.activeTab.set(this._tabs()[0]?.tabId() ?? '');\r\n }\r\n });\r\n\r\n effect(() => {\r\n const activeTabIndex = this._tabs().findIndex(tab => tab.safeTabId() === this.activeTab());\r\n\r\n const headersizes = this._headerSizes();\r\n const headerSizesBeforeActive = headersizes\r\n .slice(0, activeTabIndex)\r\n .map(size => size.width)\r\n .reduce((partialSum, a) => partialSum + a, 0);\r\n\r\n this.indicatorWidth.set(headersizes[activeTabIndex]?.width ?? 0);\r\n this.indicatorLeft.set(headerSizesBeforeActive);\r\n });\r\n }\r\n\r\n public ngAfterViewInit() {\r\n if (!this.activeTab()) {\r\n this.activeTab.set(this._tabs()[0]?.tabId() ?? '');\r\n }\r\n setTimeout(() => {\r\n this.isFirstRender.set(false);\r\n });\r\n }\r\n\r\n protected selectTab(tabId: string) {\r\n this.activeTab.set(tabId);\r\n this.ensureTabHeaderIsScrolledIntoView(\r\n this._tabs().findIndex(tab => tab.safeTabId() === tabId)\r\n );\r\n }\r\n\r\n protected handleTabKeyPress(event: KeyboardEvent, tabId: string) {\r\n if (event.key === 'Enter' \|\| event.key === ' ') {\r\n event.preventDefault();\r\n this.selectTab(tabId);\r\n return;\r\n }\r\n if (event.key === 'ArrowRight' \|\| event.key === 'ArrowLeft') {\r\n event.preventDefault();\r\n\r\n const focussedTabElement = this._headerElements().findIndex(\r\n element => element === document.activeElement\r\n );\r\n\r\n const indexOfCurrentTab =\r\n focussedTabElement !== -1\r\n ? focussedTabElement\r\n : this._tabs().findIndex(tab => tab.safeTabId() === tabId);\r\n if (indexOfCurrentTab === -1) {\r\n return;\r\n }\r\n\r\n const nextIndex = event.key === 'ArrowRight' ? indexOfCurrentTab + 1 : indexOfCurrentTab - 1;\r\n // overflow\r\n const safeNextIndex = (nextIndex + this._tabs().length) % this._tabs().length;\r\n\r\n this.ensureTabHeaderIsScrolledIntoView(safeNextIndex);\r\n\r\n const tabElement = document.getElementById(\r\n `${this.elementId}_tab_${this._tabs()[safeNextIndex]?.safeTabId()}`\r\n ) as HTMLElement;\r\n if (tabElement) {\r\n tabElement.focus();\r\n }\r\n }\r\n }\r\n\r\n private ensureTabHeaderIsScrolledIntoView(index: number) {\r\n const { left: leftCutOffTabHeaderIndex, right: rightCutOffTabHeaderIndex } =\r\n this.getCutOffTabHeaders();\r\n const tablistElement = this._tabList().nativeElement;\r\n if (index <= leftCutOffTabHeaderIndex) {\r\n const newScrollLeft = this.calculateHeaderSliceWidth(0, index) - PADDING_FOR_STICKY_ELEMENTS;\r\n setTimeout(() => {\r\n tablistElement.scrollTo({ left: newScrollLeft, behavior: 'smooth' });\r\n });\r\n } else if (index >= rightCutOffTabHeaderIndex && rightCutOffTabHeaderIndex >= 0) {\r\n const rightCutOffHeader = this._headerSizes()[rightCutOffTabHeaderIndex];\r\n if (!rightCutOffHeader) {\r\n throw new NgnError(\r\n 'NgnTabs',\r\n `Right cut off header is undefined for index ${rightCutOffTabHeaderIndex}`\r\n );\r\n }\r\n const newScrollLeft =\r\n this.calculateHeaderSliceWidth(0, index) -\r\n this._tabListSize().width +\r\n rightCutOffHeader.width +\r\n PADDING_FOR_STICKY_ELEMENTS;\r\n setTimeout(() => {\r\n tablistElement.scrollTo({ left: newScrollLeft, behavior: 'smooth' });\r\n });\r\n }\r\n }\r\n\r\n private calculateHeaderSliceWidth(fromIndex: number, toIndex: number) {\r\n const headers = this._headerSizes().map(s => s.width);\r\n return headers.slice(fromIndex, toIndex).reduce((a, b) => a + b, 0);\r\n }\r\n\r\n private getCutOffTabHeaders() {\r\n const headers = this._headerSizes().map(s => s.width);\r\n const tabListElement = this._tabList().nativeElement;\r\n\r\n const tabListWidth = tabListElement.clientWidth - PADDING_FOR_STICKY_ELEMENTS; // account for right padding\r\n\r\n const scrollAmount = this._tabListScroll();\r\n let leftCutOffTabHeaderIndex = -1;\r\n let rightCutOffTabHeaderIndex = -1;\r\n let cumulativeWidth = PADDING_FOR_STICKY_ELEMENTS; // account for left padding\r\n\r\n headers.forEach(header => {\r\n for (let i = 0; i < headers.length; i++) {\r\n const headerStart = cumulativeWidth;\r\n const headerEnd = cumulativeWidth + header;\r\n cumulativeWidth = headerEnd;\r\n\r\n if (leftCutOffTabHeaderIndex === -1 && headerEnd > scrollAmount) {\r\n leftCutOffTabHeaderIndex = i;\r\n }\r\n if (\r\n rightCutOffTabHeaderIndex === -1 &&\r\n headerStart < scrollAmount + tabListWidth &&\r\n headerEnd > scrollAmount + tabListWidth\r\n ) {\r\n rightCutOffTabHeaderIndex = i;\r\n }\r\n }\r\n });\r\n return {\r\n left: leftCutOffTabHeaderIndex,\r\n right: rightCutOffTabHeaderIndex,\r\n };\r\n }\r\n\r\n protected scrollHeaders(direction: 'left' \| 'right') {\r\n const tabListElement = this._tabList().nativeElement;\r\n const headers = this._headerSizes().map(s => s.width);\r\n\r\n const tabListWidth = tabListElement.clientWidth - PADDING_FOR_STICKY_ELEMENTS; // account for right padding\r\n\r\n const { left: leftCutOffTabHeaderIndex, right: rightCutOffTabHeaderIndex } =\r\n this.getCutOffTabHeaders();\r\n\r\n if (direction === 'right') {\r\n const newScrollAmount = this.calculateHeaderSliceWidth(0, rightCutOffTabHeaderIndex);\r\n\r\n const scrollAmountFixed =\r\n newScrollAmount >= tabListElement.scrollWidth\r\n ? newScrollAmount\r\n : newScrollAmount - PADDING_FOR_STICKY_ELEMENTS;\r\n tabListElement.scrollTo({ left: scrollAmountFixed, behavior: 'smooth' });\r\n } else {\r\n let usedUpSpace = 0;\r\n let indexOfFirstVisibleTab = leftCutOffTabHeaderIndex;\r\n while (\r\n usedUpSpace < tabListWidth - PADDING_FOR_STICKY_ELEMENTS 2 &&\r\n indexOfFirstVisibleTab >= 0\r\n ) {\r\n usedUpSpace += headers[indexOfFirstVisibleTab] ?? 0;\r\n indexOfFirstVisibleTab--;\r\n }\r\n\r\n const scrollTo =\r\n indexOfFirstVisibleTab < 0\r\n ? 0\r\n : headers.slice(0, indexOfFirstVisibleTab + 2).reduce((a, b) => a + b, 0) -\r\n PADDING_FOR_STICKY_ELEMENTS;\r\n\r\n tabListElement.scrollTo({ left: scrollTo, behavior: 'smooth' });\r\n }\r\n }\r\n}\r\n","<div [ptInt]=\"this\" [ptClass]=\"'headers-container'\">\r\n <ng-container [ngTemplateOutlet]=\"headerLeftTemplate()\" />\r\n <div\r\n ngnScrollAmount\r\n ngnDragScroll\r\n #tabList\r\n role=\"tablist\"\r\n [ptInt]=\"this\"\r\n [ptClass]=\"'headers'\"\r\n [id]=\"elementId + '_tablist'\"\r\n >\r\n @if (tabsOverflowingLeft()) {\r\n <button\r\n tabindex=\"-1\"\r\n [ptInt]=\"this\"\r\n [ptClass]=\"'scroll-left'\"\r\n (click)=\"scrollHeaders('left')\"\r\n >\r\n <ngn-icon [icon]=\"iconScrollLeft()\" [defaultIcon]=\"'chevron_left'\" />\r\n </button>\r\n }\r\n\r\n @for (header of headers(); track header.id; let i = $index) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n [aria-selected]=\"header.id === activeTab()\"\r\n [id]=\"elementId + '_tab_' + header.id\"\r\n [attr.aria-controls]=\"elementId + '_tabpanel_' + header.id\"\r\n [tabindex]=\"header.id === activeTab() ? 0 : -1\"\r\n (keydown)=\"handleTabKeyPress($event, header.id)\"\r\n #tabHeader\r\n [ptInt]=\"this\"\r\n [ptClass]=\"{\r\n header: true,\r\n 'header-active': header.id === activeTab(),\r\n }\"\r\n (click)=\"selectTab(header.id)\"\r\n >\r\n <ng-container ngTemplateOutlet=\"header.template\"></ng-container>\r\n </button>\r\n }\r\n @if (tabsOverflowingRight()) {\r\n <button\r\n tabindex=\"-1\"\r\n [ptInt]=\"this\"\r\n [ptClass]=\"'scroll-right'\"\r\n (click)=\"scrollHeaders('right')\"\r\n >\r\n <ngn-icon [icon]=\"iconScrollRight()\" [defaultIcon]=\"'chevron_right'\" />\r\n </button>\r\n }\r\n <div\r\n [ptInt]=\"this\"\r\n [ptClass]=\"'header-active-indicator'\"\r\n [style.width.px]=\"indicatorWidth()\"\r\n [style.left.px]=\"indicatorLeft()\"\r\n [style.transitionDuration.ms]=\"isFirstRender() ? 0 : undefined\"\r\n ></div>\r\n </div>\r\n <ng-container [ngTemplateOutlet]=\"headerRightTemplate()\" />\r\n</div>\r\n@for (content of contents(); track content.id; let i = $index) {\r\n <div\r\n role=\"tabpanel\"\r\n [ptInt]=\"this\"\r\n [ptClass]=\"{ content: content.id === activeTab() }\"\r\n [id]=\"elementId + '_tabpanel_' + content.id\"\r\n [attr.aria-labelledby]=\"elementId + '_tab_' + content.id\"\r\n >\r\n <ngn-defer\r\n [lazyContent]=\"content.template\"\r\n [open]=\"content.id === activeTab()\"\r\n [cache]=\"cache()\"\r\n [lazy]=\"lazy()\"\r\n />\r\n </div>\r\n}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
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 {\r\n afterRenderEffect,\r\n ChangeDetectionStrategy,\r\n Component,\r\n contentChild,\r\n input,\r\n signal,\r\n TemplateRef,\r\n} from '@angular/core';\r\nimport { NgnBase, provideSelf } from '@ngneers/controls/base';\r\n\r\n/*\r\n @category control\r\n /\r\n@Component({\r\n selector: 'ngn-tab',\r\n imports: [],\r\n template: '',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n providers: [provideSelf(NgnTab)],\r\n})\r\nexport class NgnTab extends NgnBase<'tabs'> {\r\n protected readonly theme = null;\r\n /\r\n The unique identifier for the tab.\r\n /\r\n public readonly tabId = input.required<string>();\r\n\r\n /\r\n Useful for accessing the {@link tabId} in a safe way, without worrying about timing.\r\n /\r\n public readonly safeTabId = signal<string \| null>(null);\r\n\r\n public readonly content = contentChild<TemplateRef<unknown>>('content');\r\n public readonly header = contentChild<TemplateRef<unknown>>('header');\r\n\r\n constructor() {\r\n super();\r\n\r\n afterRenderEffect(() => {\r\n this.safeTabId.set(this.tabId());\r\n });\r\n }\r\n}\r\n","import { computed, contentChild, Directive, input, TemplateRef } from '@angular/core';\r\nimport { NgnBase } from '@ngneers/controls/base';\r\n\r\n@Directive()\r\nexport abstract class TabsTemplates extends NgnBase<'tabs'> {\r\n // Header left template\r\n private readonly _userHeaderLeftTemplate = contentChild<TemplateRef<unknown>>('headerLeft');\r\n /\r\n Set a custom template for the left side of the tabs header.\r\n * Can also be set using an `<ng-template>` element with `#headerLeft` template reference variable.\r\n /\r\n public readonly templateHeaderLeft = input<TemplateRef<unknown> \| null>(null);\r\n protected readonly headerLeftTemplate = computed(\r\n () => this._userHeaderLeftTemplate() ?? this.templateHeaderLeft()\r\n );\r\n\r\n // Header right template\r\n private readonly _userHeaderRightTemplate = contentChild<TemplateRef<unknown>>('headerRight');\r\n /\r\n Set a custom template for the right side of the tabs header.\r\n * Can also be set using an `<ng-template>` element with `#headerRight` template reference variable.\r\n /\r\n public readonly templateHeaderRight = input<TemplateRef<unknown> \| null>(null);\r\n protected readonly headerRightTemplate = computed(\r\n () => this._userHeaderRightTemplate() ?? this.templateHeaderRight()\r\n );\r\n}\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n afterRenderEffect,\r\n type AfterViewInit,\r\n booleanAttribute,\r\n ChangeDetectionStrategy,\r\n Component,\r\n computed,\r\n contentChildren,\r\n effect,\r\n ElementRef,\r\n input,\r\n model,\r\n signal,\r\n viewChild,\r\n viewChildren,\r\n} from '@angular/core';\r\nimport { elementSizeSignal, elementsSizesSignal } from '@ngneers/controls/api/ng';\r\nimport { NgnPt, provideSelf } from '@ngneers/controls/base';\r\nimport { NgnDefer } from '@ngneers/controls/defer';\r\nimport { NgnDragScroll, NgnScrollAmount } from '@ngneers/controls/directives';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { NgnError } from '@ngneers/controls/utils';\r\nimport { generateElementId } from '@ngneers/controls/utils-ng';\r\nimport { tabsControlTemplate } from '@ngneers/controls-themes/templates/tabs';\r\n\r\nimport { NgnTab } from './tab';\r\nimport { TabsTemplates } from './tabs-templates';\r\n\r\nimport type { IconType } from '@ngneers/controls-custom-types';\r\n\r\nconst PADDING_FOR_STICKY_ELEMENTS = 15;\r\n\r\n/\r\n @category control\r\n /\r\n@Component({\r\n selector: 'ngn-tabs',\r\n imports: [NgTemplateOutlet, NgnPt, NgnDefer, NgnScrollAmount, NgnDragScroll, NgnIcon],\r\n templateUrl: './tabs.html',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n providers: [provideSelf(NgnTabs)],\r\n})\r\nexport class NgnTabs extends TabsTemplates implements AfterViewInit {\r\n protected readonly theme = this.injectThemeTemplate(tabsControlTemplate, 'root');\r\n /\r\n Whether to lazy load the tab contents when they become visible.\r\n /\r\n public readonly lazy = input(false, { transform: booleanAttribute });\r\n /\r\n Whether to cache the tab contents. Only applies to {@link lazy} loaded tabs.\r\n /\r\n public readonly cache = input(false, { transform: booleanAttribute });\r\n /\r\n Get or set the active tab ID.\r\n /\r\n public readonly activeTab = model<string>('');\r\n /\r\n Icon for the left scroll button.\r\n /\r\n public readonly iconScrollLeft = input<IconType>();\r\n /\r\n Icon for the right scroll button.\r\n /\r\n public readonly iconScrollRight = input<IconType>();\r\n\r\n protected readonly isFirstRender = signal(true);\r\n\r\n protected readonly elementId = generateElementId();\r\n protected readonly indicatorWidth = signal(0);\r\n protected readonly indicatorLeft = signal(0);\r\n\r\n private readonly _tabs = contentChildren(NgnTab);\r\n private readonly _tabList = viewChild.required<unknown, ElementRef<HTMLDivElement>>('tabList', {\r\n read: ElementRef<HTMLDivElement>,\r\n });\r\n private readonly _tabListScrollDirective = viewChild.required('tabList', {\r\n read: NgnScrollAmount,\r\n });\r\n private readonly _tabListScroll = computed(() => this._tabListScrollDirective().scrollLeft());\r\n private readonly _tabListSize = elementSizeSignal(this._tabList);\r\n\r\n private readonly _renderedTabHeaders = viewChildren<ElementRef<HTMLButtonElement>>('tabHeader');\r\n private readonly _headerElements = computed(() =>\r\n this._renderedTabHeaders().map(header => header.nativeElement)\r\n );\r\n private readonly _headerSizes = elementsSizesSignal(this._headerElements);\r\n\r\n protected readonly headers = computed(() =>\r\n this._tabs().map(tab => ({\r\n id: tab.tabId(),\r\n template: tab.header(),\r\n }))\r\n );\r\n\r\n protected readonly contents = computed(() =>\r\n this._tabs().map(tab => ({\r\n id: tab.tabId(),\r\n template: tab.content(),\r\n }))\r\n );\r\n\r\n private readonly _totalTabsWidth = computed(() => {\r\n return this._headerSizes().reduce((sum, size) => sum + size.width, 0);\r\n });\r\n\r\n protected readonly tabsOverflowingRight = computed(() => {\r\n const tabListWidth = this._tabListSize().width;\r\n const scrollAmount = this._tabListScroll();\r\n // Use the signal-tracked total width instead of reading scrollWidth\r\n // directly, which would force a synchronous layout.\r\n const totalHeadersWidth = this._totalTabsWidth();\r\n\r\n return totalHeadersWidth - scrollAmount > tabListWidth + 0.5;\r\n });\r\n\r\n protected readonly tabsOverflowingLeft = computed(() => this._tabListScroll() > 0);\r\n\r\n constructor() {\r\n super();\r\n\r\n afterRenderEffect(() => {\r\n if (!this.activeTab() \|\| !this._tabs().find(tab => tab.safeTabId() === this.activeTab())) {\r\n this.activeTab.set(this._tabs()[0]?.tabId() ?? '');\r\n }\r\n });\r\n\r\n effect(() => {\r\n const activeTabIndex = this._tabs().findIndex(tab => tab.safeTabId() === this.activeTab());\r\n\r\n const headersizes = this._headerSizes();\r\n const headerSizesBeforeActive = headersizes\r\n .slice(0, activeTabIndex)\r\n .map(size => size.width)\r\n .reduce((partialSum, a) => partialSum + a, 0);\r\n\r\n this.indicatorWidth.set(headersizes[activeTabIndex]?.width ?? 0);\r\n this.indicatorLeft.set(headerSizesBeforeActive);\r\n });\r\n }\r\n\r\n public ngAfterViewInit() {\r\n if (!this.activeTab()) {\r\n this.activeTab.set(this._tabs()[0]?.tabId() ?? '');\r\n }\r\n setTimeout(() => {\r\n this.isFirstRender.set(false);\r\n });\r\n }\r\n\r\n protected selectTab(tabId: string) {\r\n this.activeTab.set(tabId);\r\n this.ensureTabHeaderIsScrolledIntoView(\r\n this._tabs().findIndex(tab => tab.safeTabId() === tabId)\r\n );\r\n }\r\n\r\n protected handleTabKeyPress(event: KeyboardEvent, tabId: string) {\r\n if (event.key === 'Enter' \|\| event.key === ' ') {\r\n event.preventDefault();\r\n this.selectTab(tabId);\r\n return;\r\n }\r\n if (event.key === 'ArrowRight' \|\| event.key === 'ArrowLeft') {\r\n event.preventDefault();\r\n\r\n const focussedTabElement = this._headerElements().findIndex(\r\n element => element === document.activeElement\r\n );\r\n\r\n const indexOfCurrentTab =\r\n focussedTabElement !== -1\r\n ? focussedTabElement\r\n : this._tabs().findIndex(tab => tab.safeTabId() === tabId);\r\n if (indexOfCurrentTab === -1) {\r\n return;\r\n }\r\n\r\n const nextIndex = event.key === 'ArrowRight' ? indexOfCurrentTab + 1 : indexOfCurrentTab - 1;\r\n // overflow\r\n const safeNextIndex = (nextIndex + this._tabs().length) % this._tabs().length;\r\n\r\n this.ensureTabHeaderIsScrolledIntoView(safeNextIndex);\r\n\r\n const tabElement = document.getElementById(\r\n `${this.elementId}_tab_${this._tabs()[safeNextIndex]?.safeTabId()}`\r\n ) as HTMLElement;\r\n if (tabElement) {\r\n tabElement.focus();\r\n }\r\n }\r\n }\r\n\r\n private ensureTabHeaderIsScrolledIntoView(index: number) {\r\n const { left: leftCutOffTabHeaderIndex, right: rightCutOffTabHeaderIndex } =\r\n this.getCutOffTabHeaders();\r\n const tablistElement = this._tabList().nativeElement;\r\n if (index <= leftCutOffTabHeaderIndex) {\r\n const newScrollLeft = this.calculateHeaderSliceWidth(0, index) - PADDING_FOR_STICKY_ELEMENTS;\r\n setTimeout(() => {\r\n tablistElement.scrollTo({ left: newScrollLeft, behavior: 'smooth' });\r\n });\r\n } else if (index >= rightCutOffTabHeaderIndex && rightCutOffTabHeaderIndex >= 0) {\r\n const rightCutOffHeader = this._headerSizes()[rightCutOffTabHeaderIndex];\r\n if (!rightCutOffHeader) {\r\n throw new NgnError(\r\n 'NgnTabs',\r\n `Right cut off header is undefined for index ${rightCutOffTabHeaderIndex}`\r\n );\r\n }\r\n const newScrollLeft =\r\n this.calculateHeaderSliceWidth(0, index) -\r\n this._tabListSize().width +\r\n rightCutOffHeader.width +\r\n PADDING_FOR_STICKY_ELEMENTS;\r\n setTimeout(() => {\r\n tablistElement.scrollTo({ left: newScrollLeft, behavior: 'smooth' });\r\n });\r\n }\r\n }\r\n\r\n private calculateHeaderSliceWidth(fromIndex: number, toIndex: number) {\r\n const headers = this._headerSizes().map(s => s.width);\r\n return headers.slice(fromIndex, toIndex).reduce((a, b) => a + b, 0);\r\n }\r\n\r\n private getCutOffTabHeaders() {\r\n const headers = this._headerSizes().map(s => s.width);\r\n const tabListElement = this._tabList().nativeElement;\r\n\r\n const tabListWidth = tabListElement.clientWidth - PADDING_FOR_STICKY_ELEMENTS; // account for right padding\r\n\r\n const scrollAmount = this._tabListScroll();\r\n let leftCutOffTabHeaderIndex = -1;\r\n let rightCutOffTabHeaderIndex = -1;\r\n let cumulativeWidth = PADDING_FOR_STICKY_ELEMENTS; // account for left padding\r\n\r\n headers.forEach(header => {\r\n for (let i = 0; i < headers.length; i++) {\r\n const headerStart = cumulativeWidth;\r\n const headerEnd = cumulativeWidth + header;\r\n cumulativeWidth = headerEnd;\r\n\r\n if (leftCutOffTabHeaderIndex === -1 && headerEnd > scrollAmount) {\r\n leftCutOffTabHeaderIndex = i;\r\n }\r\n if (\r\n rightCutOffTabHeaderIndex === -1 &&\r\n headerStart < scrollAmount + tabListWidth &&\r\n headerEnd > scrollAmount + tabListWidth\r\n ) {\r\n rightCutOffTabHeaderIndex = i;\r\n }\r\n }\r\n });\r\n return {\r\n left: leftCutOffTabHeaderIndex,\r\n right: rightCutOffTabHeaderIndex,\r\n };\r\n }\r\n\r\n protected scrollHeaders(direction: 'left' \| 'right') {\r\n const tabListElement = this._tabList().nativeElement;\r\n const headers = this._headerSizes().map(s => s.width);\r\n\r\n const tabListWidth = tabListElement.clientWidth - PADDING_FOR_STICKY_ELEMENTS; // account for right padding\r\n\r\n const { left: leftCutOffTabHeaderIndex, right: rightCutOffTabHeaderIndex } =\r\n this.getCutOffTabHeaders();\r\n\r\n if (direction === 'right') {\r\n const newScrollAmount = this.calculateHeaderSliceWidth(0, rightCutOffTabHeaderIndex);\r\n\r\n const scrollAmountFixed =\r\n newScrollAmount >= tabListElement.scrollWidth\r\n ? newScrollAmount\r\n : newScrollAmount - PADDING_FOR_STICKY_ELEMENTS;\r\n tabListElement.scrollTo({ left: scrollAmountFixed, behavior: 'smooth' });\r\n } else {\r\n let usedUpSpace = 0;\r\n let indexOfFirstVisibleTab = leftCutOffTabHeaderIndex;\r\n while (\r\n usedUpSpace < tabListWidth - PADDING_FOR_STICKY_ELEMENTS 2 &&\r\n indexOfFirstVisibleTab >= 0\r\n ) {\r\n usedUpSpace += headers[indexOfFirstVisibleTab] ?? 0;\r\n indexOfFirstVisibleTab--;\r\n }\r\n\r\n const scrollTo =\r\n indexOfFirstVisibleTab < 0\r\n ? 0\r\n : headers.slice(0, indexOfFirstVisibleTab + 2).reduce((a, b) => a + b, 0) -\r\n PADDING_FOR_STICKY_ELEMENTS;\r\n\r\n tabListElement.scrollTo({ left: scrollTo, behavior: 'smooth' });\r\n }\r\n }\r\n}\r\n","<div [ptInt]=\"this\" [ptClass]=\"'headers-container'\">\r\n <ng-container [ngTemplateOutlet]=\"headerLeftTemplate()\" />\r\n <div\r\n ngnScrollAmount\r\n ngnDragScroll\r\n #tabList\r\n role=\"tablist\"\r\n [ptInt]=\"this\"\r\n [ptClass]=\"'headers'\"\r\n [id]=\"elementId + '_tablist'\"\r\n >\r\n @if (tabsOverflowingLeft()) {\r\n <button\r\n tabindex=\"-1\"\r\n [ptInt]=\"this\"\r\n [ptClass]=\"'scroll-left'\"\r\n (click)=\"scrollHeaders('left')\"\r\n >\r\n <ngn-icon [icon]=\"iconScrollLeft()\" [defaultIcon]=\"'tabs-scroll-left'\" />\r\n </button>\r\n }\r\n\r\n @for (header of headers(); track header.id; let i = $index) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n [aria-selected]=\"header.id === activeTab()\"\r\n [id]=\"elementId + '_tab_' + header.id\"\r\n [attr.aria-controls]=\"elementId + '_tabpanel_' + header.id\"\r\n [tabindex]=\"header.id === activeTab() ? 0 : -1\"\r\n (keydown)=\"handleTabKeyPress($event, header.id)\"\r\n #tabHeader\r\n [ptInt]=\"this\"\r\n [ptClass]=\"{\r\n header: true,\r\n 'header-active': header.id === activeTab(),\r\n }\"\r\n (click)=\"selectTab(header.id)\"\r\n >\r\n <ng-container ngTemplateOutlet=\"header.template\"></ng-container>\r\n </button>\r\n }\r\n @if (tabsOverflowingRight()) {\r\n <button\r\n tabindex=\"-1\"\r\n [ptInt]=\"this\"\r\n [ptClass]=\"'scroll-right'\"\r\n (click)=\"scrollHeaders('right')\"\r\n >\r\n <ngn-icon [icon]=\"iconScrollRight()\" [defaultIcon]=\"'tabs-scroll-right'\" />\r\n </button>\r\n }\r\n <div\r\n [ptInt]=\"this\"\r\n [ptClass]=\"'header-active-indicator'\"\r\n [style.width.px]=\"indicatorWidth()\"\r\n [style.left.px]=\"indicatorLeft()\"\r\n [style.transitionDuration.ms]=\"isFirstRender() ? 0 : undefined\"\r\n ></div>\r\n </div>\r\n <ng-container [ngTemplateOutlet]=\"headerRightTemplate()\" />\r\n</div>\r\n@for (content of contents(); track content.id; let i = $index) {\r\n <div\r\n role=\"tabpanel\"\r\n [ptInt]=\"this\"\r\n [ptClass]=\"{ content: content.id === activeTab() }\"\r\n [id]=\"elementId + '_tabpanel_' + content.id\"\r\n [attr.aria-labelledby]=\"elementId + '_tab_' + content.id\"\r\n >\r\n <ngn-defer\r\n [lazyContent]=\"content.template\"\r\n [open]=\"content.id === activeTab()\"\r\n [cache]=\"cache()\"\r\n [lazy]=\"lazy()\"\r\n />\r\n </div>\r\n}\r\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 CHANGED Viewed

@@ -12,11 +12,11 @@ class NgnTag extends NgnBase {
     /**
      * Set an icon to display before the text.
      */
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTag, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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()) {\r\n  <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"icon()\" />\r\n}\r\n<div [ptInt]=\"this\" [ptClass]=\"'content'\">\r\n  <ng-content />\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTag, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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()) {\r\n  <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"icon()\" />\r\n}\r\n<div [ptInt]=\"this\" [ptClass]=\"'content'\">\r\n  <ng-content />\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTag, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTag, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-tag', imports: [NgnPt, NgnIcon], providers: [provideSelf(NgnTag)], template: "@if (icon()) {\r\n  <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"icon()\" />\r\n}\r\n<div [ptInt]=\"this\" [ptClass]=\"'content'\">\r\n  <ng-content />\r\n</div>\r\n" }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });

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

	@@ -1 +1 @@
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, ChangeDetectionStrategy } from '@angular/core';\r\nimport { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { tagControlTemplate } from '@ngneers/controls-themes/templates/tag';\r\n\r\nimport type { IconType } from '@ngneers/controls-custom-types';\r\n\r\n/*\r\n @category control\r\n /\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'ngn-tag',\r\n templateUrl: './tag.html',\r\n imports: [NgnPt, NgnIcon],\r\n providers: [provideSelf(NgnTag)],\r\n})\r\nexport class NgnTag extends NgnBase<'tag'> {\r\n protected readonly theme = this.injectThemeTemplate(tagControlTemplate, 'root');\r\n\r\n /\r\n Set an icon to display before the text.\r\n /\r\n public readonly icon = input<IconType>();\r\n}\r\n","@if (icon()) {\r\n <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"icon()\" />\r\n}\r\n<div [ptInt]=\"this\" [ptClass]=\"'content'\">\r\n <ng-content />\r\n</div>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;AAOA;;AAEG;AAQG,MAAO,MAAO,SAAQ,OAAc,CAAA;IACrB,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,MAAM,CAAC;AAE/E;;AAEG;IACa,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,~~GAAA~~,EAAA,CAAA,CAAY;~~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,ECflC,mLAMA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDQY,KAAK,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,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,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;~~2FAGb~~,MAAM,EAAA,UAAA,EAAA,CAAA;kBAPlB,SAAS;AACS,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,SAAS,WAEV,CAAC,KAAK,EAAE,OAAO,CAAC,EAAA,SAAA,EACd,CAAC,WAAW,QAAQ,CAAC,EAAA,QAAA,EAAA,mLAAA,EAAA;;;AEflC;;AAEG;;;;"}
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, ChangeDetectionStrategy } from '@angular/core';\r\nimport { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { tagControlTemplate } from '@ngneers/controls-themes/templates/tag';\r\n\r\nimport type { IconType } from '@ngneers/controls-custom-types';\r\n\r\n/*\r\n @category control\r\n /\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'ngn-tag',\r\n templateUrl: './tag.html',\r\n imports: [NgnPt, NgnIcon],\r\n providers: [provideSelf(NgnTag)],\r\n})\r\nexport class NgnTag extends NgnBase<'tag'> {\r\n protected readonly theme = this.injectThemeTemplate(tagControlTemplate, 'root');\r\n\r\n /\r\n Set an icon to display before the text.\r\n /\r\n public readonly icon = input<IconType>();\r\n}\r\n","@if (icon()) {\r\n <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"icon()\" />\r\n}\r\n<div [ptInt]=\"this\" [ptClass]=\"'content'\">\r\n <ng-content />\r\n</div>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;AAOA;;AAEG;AAQG,MAAO,MAAO,SAAQ,OAAc,CAAA;IACrB,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,MAAM,CAAC;AAE/E;;AAEG;IACa,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAY;wGAN7B,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,SAAA,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,ECflC,mLAMA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDQY,KAAK,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,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,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAGb,MAAM,EAAA,UAAA,EAAA,CAAA;kBAPlB,SAAS;AACS,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,SAAS,WAEV,CAAC,KAAK,EAAE,OAAO,CAAC,EAAA,SAAA,EACd,CAAC,WAAW,QAAQ,CAAC,EAAA,QAAA,EAAA,mLAAA,EAAA;;;AEflC;;AAEG;;;;"}

package/fesm2022/ngneers-controls-toast.mjs CHANGED Viewed

@@ -19,14 +19,14 @@ const DEFAULT_TOAST_OPTIONS = {
  */
 class NgnToast extends NgnBase {
     theme = this.injectThemeTemplate(toastControlTemplate, 'root');
-    header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : []));
-    content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
-    closeIcon = input(...(ngDevMode ? [undefined, { debugName: "closeIcon" }] : []));
-    closable = input(DEFAULT_TOAST_OPTIONS.closable, ...(ngDevMode ? [{ debugName: "closable" }] : []));
-    autoHide = input(DEFAULT_TOAST_OPTIONS.autoHide, ...(ngDevMode ? [{ debugName: "autoHide" }] : []));
-    templateContent = input(...(ngDevMode ? [undefined, { debugName: "templateContent" }] : []));
-    templateHeader = input(...(ngDevMode ? [undefined, { debugName: "templateHeader" }] : []));
+    header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
+    content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : /* istanbul ignore next */ []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    closeIcon = input(...(ngDevMode ? [undefined, { debugName: "closeIcon" }] : /* istanbul ignore next */ []));
+    closable = input(DEFAULT_TOAST_OPTIONS.closable, ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+    autoHide = input(DEFAULT_TOAST_OPTIONS.autoHide, ...(ngDevMode ? [{ debugName: "autoHide" }] : /* istanbul ignore next */ []));
+    templateContent = input(...(ngDevMode ? [undefined, { debugName: "templateContent" }] : /* istanbul ignore next */ []));
+    templateHeader = input(...(ngDevMode ? [undefined, { debugName: "templateHeader" }] : /* istanbul ignore next */ []));
     closeToast = output();
     _closeTimeout;
     ngOnInit() {
@@ -53,10 +53,10 @@ class NgnToast extends NgnBase {
     mouseLeave() {
         this.startHideTimer();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToast, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NgnToast, isStandalone: true, selector: "ngn-toast", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeIcon: { classPropertyName: "closeIcon", publicName: "closeIcon", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, templateContent: { classPropertyName: "templateContent", publicName: "templateContent", isSignal: true, isRequired: false, transformFunction: null }, templateHeader: { classPropertyName: "templateHeader", publicName: "templateHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeToast: "closeToast" }, host: { attributes: { "role": "alert", "aria-live": "assertive" }, listeners: { "mouseenter": "mouseEnter()", "mouseleave": "mouseLeave()" }, properties: { "animate.enter": "theme.class('anim-enter')", "animate.leave": "theme.class('anim-leave')" } }, providers: [provideSelf(NgnToast)], usesInheritance: true, ngImport: i0, template: "@if (templateHeader(); as headerTemplate) {\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"headerTemplate\"\r\n    [ngTemplateOutletContext]=\"{\r\n      header: header(),\r\n      closable: !!closable(),\r\n      closeToast: close.bind(this),\r\n    }\"\r\n  ></ng-container>\r\n} @else {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'defaultHeader'\">\r\n    <span [ptInt]=\"this\" [ptClass]=\"'defaultHeaderText'\">\r\n      @if (icon(); as icon) {\r\n        <ngn-icon [icon]=\"icon\" />\r\n      }\r\n      {{ header() }}\r\n    </span>\r\n    @if (closable()) {\r\n      <button ngnButton kind=\"icon\" (click)=\"close()\">\r\n        <ngn-icon [defaultIcon]=\"'xmark'\" [icon]=\"closeIcon()\" />\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n@if (templateContent(); as contentTemplate) {\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"contentTemplate\"\r\n    [ngTemplateOutletContext]=\"{\r\n      content: content(),\r\n    }\"\r\n  ></ng-container>\r\n} @else {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'defaultContent'\">\r\n    {{ content() }}\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["inline"], exportAs: ["ngnButton"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnToast, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: NgnToast, isStandalone: true, selector: "ngn-toast", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeIcon: { classPropertyName: "closeIcon", publicName: "closeIcon", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, templateContent: { classPropertyName: "templateContent", publicName: "templateContent", isSignal: true, isRequired: false, transformFunction: null }, templateHeader: { classPropertyName: "templateHeader", publicName: "templateHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeToast: "closeToast" }, host: { attributes: { "role": "alert", "aria-live": "assertive" }, listeners: { "mouseenter": "mouseEnter()", "mouseleave": "mouseLeave()" }, properties: { "animate.enter": "theme.class('anim-enter')", "animate.leave": "theme.class('anim-leave')" } }, providers: [provideSelf(NgnToast)], usesInheritance: true, ngImport: i0, template: "@if (templateHeader(); as headerTemplate) {\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"headerTemplate\"\r\n    [ngTemplateOutletContext]=\"{\r\n      header: header(),\r\n      closable: !!closable(),\r\n      closeToast: close.bind(this),\r\n    }\"\r\n  ></ng-container>\r\n} @else {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'defaultHeader'\">\r\n    <span [ptInt]=\"this\" [ptClass]=\"'defaultHeaderText'\">\r\n      @if (icon(); as icon) {\r\n        <ngn-icon [icon]=\"icon\" />\r\n      }\r\n      {{ header() }}\r\n    </span>\r\n    @if (closable()) {\r\n      <button ngnButton kind=\"icon\" (click)=\"close()\">\r\n        <ngn-icon [defaultIcon]=\"'toast-close'\" [icon]=\"closeIcon()\" />\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n@if (templateContent(); as contentTemplate) {\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"contentTemplate\"\r\n    [ngTemplateOutletContext]=\"{\r\n      content: content(),\r\n    }\"\r\n  ></ng-container>\r\n} @else {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'defaultContent'\">\r\n    {{ content() }}\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["inline"], exportAs: ["ngnButton"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToast, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnToast, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-toast', imports: [NgTemplateOutlet, NgnPt, NgnButton, NgnIcon], providers: [provideSelf(NgnToast)], host: {
                         '(mouseenter)': 'mouseEnter()',
@@ -65,7 +65,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[animate.leave]': "theme.class('anim-leave')",
                         role: 'alert',
                         'aria-live': 'assertive',
-                    }, template: "@if (templateHeader(); as headerTemplate) {\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"headerTemplate\"\r\n    [ngTemplateOutletContext]=\"{\r\n      header: header(),\r\n      closable: !!closable(),\r\n      closeToast: close.bind(this),\r\n    }\"\r\n  ></ng-container>\r\n} @else {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'defaultHeader'\">\r\n    <span [ptInt]=\"this\" [ptClass]=\"'defaultHeaderText'\">\r\n      @if (icon(); as icon) {\r\n        <ngn-icon [icon]=\"icon\" />\r\n      }\r\n      {{ header() }}\r\n    </span>\r\n    @if (closable()) {\r\n      <button ngnButton kind=\"icon\" (click)=\"close()\">\r\n        <ngn-icon [defaultIcon]=\"'xmark'\" [icon]=\"closeIcon()\" />\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n@if (templateContent(); as contentTemplate) {\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"contentTemplate\"\r\n    [ngTemplateOutletContext]=\"{\r\n      content: content(),\r\n    }\"\r\n  ></ng-container>\r\n} @else {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'defaultContent'\">\r\n    {{ content() }}\r\n  </div>\r\n}\r\n" }]
+                    }, template: "@if (templateHeader(); as headerTemplate) {\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"headerTemplate\"\r\n    [ngTemplateOutletContext]=\"{\r\n      header: header(),\r\n      closable: !!closable(),\r\n      closeToast: close.bind(this),\r\n    }\"\r\n  ></ng-container>\r\n} @else {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'defaultHeader'\">\r\n    <span [ptInt]=\"this\" [ptClass]=\"'defaultHeaderText'\">\r\n      @if (icon(); as icon) {\r\n        <ngn-icon [icon]=\"icon\" />\r\n      }\r\n      {{ header() }}\r\n    </span>\r\n    @if (closable()) {\r\n      <button ngnButton kind=\"icon\" (click)=\"close()\">\r\n        <ngn-icon [defaultIcon]=\"'toast-close'\" [icon]=\"closeIcon()\" />\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n@if (templateContent(); as contentTemplate) {\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"contentTemplate\"\r\n    [ngTemplateOutletContext]=\"{\r\n      content: content(),\r\n    }\"\r\n  ></ng-container>\r\n} @else {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'defaultContent'\">\r\n    {{ content() }}\r\n  </div>\r\n}\r\n" }]
         }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeIcon", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], templateContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateContent", required: false }] }], templateHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateHeader", required: false }] }], closeToast: [{ type: i0.Output, args: ["closeToast"] }] } });
 /**
@@ -85,10 +85,10 @@ class NgnToastHost extends NgnBase {
     removeToast(id) {
         this._toastManager.removeToast(id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToastHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NgnToastHost, isStandalone: true, selector: "ngn-toast-host", host: { properties: { "attr.popover": "\"manual\"" } }, usesInheritance: true, ngImport: i0, template: "@for (toast of toasts(); track toast.id) {\r\n  <ngn-toast\r\n    [header]=\"toast.header\"\r\n    [content]=\"toast.content\"\r\n    [color]=\"toast.color\"\r\n    [icon]=\"toast.icon\"\r\n    [autoHide]=\"toast.autoHide\"\r\n    [templateContent]=\"toast.contentTemplate\"\r\n    [templateHeader]=\"toast.headerTemplate\"\r\n    [closable]=\"!!toast.closable\"\r\n    (closeToast)=\"removeToast(toast.id)\"\r\n  />\r\n}\r\n", dependencies: [{ kind: "component", type: NgnToast, selector: "ngn-toast", inputs: ["header", "content", "icon", "closeIcon", "closable", "autoHide", "templateContent", "templateHeader"], outputs: ["closeToast"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnToastHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: NgnToastHost, isStandalone: true, selector: "ngn-toast-host", host: { properties: { "attr.popover": "\"manual\"" } }, usesInheritance: true, ngImport: i0, template: "@for (toast of toasts(); track toast.id) {\r\n  <ngn-toast\r\n    [header]=\"toast.header\"\r\n    [content]=\"toast.content\"\r\n    [color]=\"toast.color\"\r\n    [icon]=\"toast.icon\"\r\n    [autoHide]=\"toast.autoHide\"\r\n    [templateContent]=\"toast.contentTemplate\"\r\n    [templateHeader]=\"toast.headerTemplate\"\r\n    [closable]=\"!!toast.closable\"\r\n    (closeToast)=\"removeToast(toast.id)\"\r\n  />\r\n}\r\n", dependencies: [{ kind: "component", type: NgnToast, selector: "ngn-toast", inputs: ["header", "content", "icon", "closeIcon", "closable", "autoHide", "templateContent", "templateHeader"], outputs: ["closeToast"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToastHost, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnToastHost, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-toast-host', imports: [NgnToast], host: {
                         '[attr.popover]': '"manual"',
@@ -96,7 +96,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
         }], ctorParameters: () => [] });
 class NgnToastManager {
-    _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : []));
+    _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : /* istanbul ignore next */ []));
     _appRef = inject(ApplicationRef);
     _userDefaults = injectOrThrow(NGN_TOAST_USER_DEFAULTS, 'NgnToastManager', 'Failed to inject NGN_TOAST_USER_DEFAULTS, make sure to use withToasts() to provide ngn toasts!');
     _nextId = 0;
@@ -137,10 +137,10 @@ class NgnToastManager {
         this._toasts.update(toasts => [...toasts, toast]);
         return id;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToastManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToastManager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnToastManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnToastManager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToastManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnToastManager, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });