@ngneers/controls 0.0.1-pre4 → 0.0.1-pre6

package/fesm2022/ngneers-controls-tabs.mjs

@@ -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.2", ngImport: i0, type: NgnTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.2", 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.2", 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.2", ngImport: i0, type: TabsTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.2", 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.2", 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,10 +268,10 @@ 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.2", ngImport: i0, type: NgnTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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]", 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.2", 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" }]
         }], 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', { ...{

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

@@ -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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"}
+{"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]=\"'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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"}

package/fesm2022/ngneers-controls-tag.mjs

@@ -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.2", ngImport: i0, type: NgnTag, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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.2", 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

@@ -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;;;;"}
+{"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;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;;;;"}

package/fesm2022/ngneers-controls-toast.mjs

@@ -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"] }, { 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.2", ngImport: i0, type: NgnToast, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToast, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", 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()',
@@ -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.2", ngImport: i0, type: NgnToastHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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.2", 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.2", ngImport: i0, type: NgnToastManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", 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.2", ngImport: i0, type: NgnToastManager, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 

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

@@ -1 +1 @@
-{"version":3,"file":"ngneers-controls-toast.mjs","sources":["../../src/toast/defaults.ts","../../src/toast/toast.ts","../../src/toast/toast.html","../../src/toast/toast-host.ts","../../src/toast/toast-host.html","../../src/toast/toast-manager.ts","../../src/toast/provider.ts","../../src/toast/toast-creator.ts","../../src/toast/ngneers-controls-toast.ts"],"sourcesContent":["import type { NgnToastOptions } from './types';\r\n\r\nexport const DEFAULT_TOAST_OPTIONS: NgnToastOptions = {\r\n  closable: false,\r\n  autoHide: 5000,\r\n};\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  input,\r\n  TemplateRef,\r\n  output,\r\n  type OnInit,\r\n} from '@angular/core';\r\nimport { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';\r\nimport { NgnButton } from '@ngneers/controls/button';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { toastControlTemplate } from '@ngneers/controls-themes/templates/toast';\r\n\r\nimport { DEFAULT_TOAST_OPTIONS } from './defaults';\r\n\r\nimport type { ContentTemplateType, HeaderTemplateType } from './types';\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-toast',\r\n  templateUrl: './toast.html',\r\n  imports: [NgTemplateOutlet, NgnPt, NgnButton, NgnIcon],\r\n  providers: [provideSelf(NgnToast)],\r\n  host: {\r\n    '(mouseenter)': 'mouseEnter()',\r\n    '(mouseleave)': 'mouseLeave()',\r\n    '[animate.enter]': \"theme.class('anim-enter')\",\r\n    '[animate.leave]': \"theme.class('anim-leave')\",\r\n    role: 'alert',\r\n    'aria-live': 'assertive',\r\n  },\r\n})\r\nexport class NgnToast extends NgnBase<'toast'> implements OnInit {\r\n  protected readonly theme = this.injectThemeTemplate(toastControlTemplate, 'root');\r\n\r\n  public readonly header = input<string>();\r\n  public readonly content = input<string>();\r\n\r\n  public readonly icon = input<IconType>();\r\n  public readonly closeIcon = input<IconType>();\r\n  public readonly closable = input<boolean | undefined>(DEFAULT_TOAST_OPTIONS.closable);\r\n  public readonly autoHide = input<number | false | undefined>(DEFAULT_TOAST_OPTIONS.autoHide);\r\n\r\n  public readonly templateContent = input<TemplateRef<ContentTemplateType> | null>();\r\n  public readonly templateHeader = input<TemplateRef<HeaderTemplateType> | null>();\r\n\r\n  public readonly closeToast = output<void>();\r\n  private _closeTimeout?: number;\r\n\r\n  public ngOnInit(): void {\r\n    this.startHideTimer();\r\n  }\r\n\r\n  private startHideTimer() {\r\n    const autoHide = this.autoHide();\r\n    if (autoHide && autoHide > 0) {\r\n      this._closeTimeout = setTimeout(() => this.close(), autoHide) as unknown as number;\r\n    }\r\n  }\r\n\r\n  protected close() {\r\n    this.closeToast.emit();\r\n    if (this._closeTimeout) {\r\n      clearTimeout(this._closeTimeout);\r\n    }\r\n  }\r\n\r\n  protected mouseEnter(): void {\r\n    if (this._closeTimeout) {\r\n      clearTimeout(this._closeTimeout);\r\n      this._closeTimeout = undefined;\r\n    }\r\n  }\r\n\r\n  protected mouseLeave(): void {\r\n    this.startHideTimer();\r\n  }\r\n}\r\n","@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","import {\r\n  afterNextRender,\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  inject,\r\n} from '@angular/core';\r\nimport { NgnBase } from '@ngneers/controls/base';\r\nimport { toastControlTemplate } from '@ngneers/controls-themes/templates/toast';\r\n\r\nimport { NgnToast } from './toast';\r\nimport { NgnToastManager } from './toast-manager';\r\n\r\n/**\r\n * The host component that renders toasts.\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-toast-host',\r\n  templateUrl: 'toast-host.html',\r\n  imports: [NgnToast],\r\n  host: {\r\n    '[attr.popover]': '\"manual\"',\r\n  },\r\n})\r\nexport class NgnToastHost extends NgnBase<'toast'> {\r\n  protected readonly theme = this.injectThemeTemplate(toastControlTemplate, 'host');\r\n  private readonly _toastManager = inject(NgnToastManager);\r\n  private readonly _el = inject<ElementRef<HTMLElement>>(ElementRef);\r\n\r\n  protected readonly toasts = this._toastManager.toasts;\r\n\r\n  constructor() {\r\n    super();\r\n    afterNextRender(() => {\r\n      this._el.nativeElement.showPopover();\r\n    });\r\n  }\r\n\r\n  protected removeToast(id: number): void {\r\n    this._toastManager.removeToast(id);\r\n  }\r\n}\r\n","@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","import {\r\n  ApplicationRef,\r\n  ComponentRef,\r\n  createComponent,\r\n  inject,\r\n  Injectable,\r\n  type OnDestroy,\r\n  signal,\r\n} from '@angular/core';\r\nimport { Platform } from '@ngneers/controls/api/ng';\r\nimport { NgnError } from '@ngneers/controls/utils';\r\nimport { injectOrThrow } from '@ngneers/controls/utils-ng';\r\n\r\nimport { DEFAULT_TOAST_OPTIONS } from './defaults';\r\nimport { NGN_TOAST_USER_DEFAULTS } from './provider';\r\nimport { NgnToastHost } from './toast-host';\r\n\r\nimport type { NgnToastOptions } from './types';\r\n\r\ntype ToastFull = NgnToastOptions & { id: number };\r\n\r\n@Injectable()\r\nexport class NgnToastManager implements OnDestroy {\r\n  private readonly _toasts = signal<ToastFull[]>([]);\r\n  private readonly _appRef = inject(ApplicationRef);\r\n  private readonly _userDefaults = injectOrThrow(\r\n    NGN_TOAST_USER_DEFAULTS,\r\n    'NgnToastManager',\r\n    'Failed to inject NGN_TOAST_USER_DEFAULTS, make sure to use withToasts() to provide ngn toasts!'\r\n  );\r\n  private _nextId = 0;\r\n\r\n  public readonly toasts = this._toasts.asReadonly();\r\n  private _component?: ComponentRef<NgnToastHost>;\r\n\r\n  constructor() {\r\n    if (!inject(Platform).isBrowser) {\r\n      return;\r\n    }\r\n    // Defer creation to avoid issues with Angular's injection tree during app initialization\r\n    queueMicrotask(() => {\r\n      // Create and attach the toast host component to the application's root\r\n      this._component = createComponent(NgnToastHost, {\r\n        environmentInjector: this._appRef.injector,\r\n      });\r\n      this._appRef.attachView(this._component.hostView);\r\n      const hostEl = this._component.location.nativeElement as HTMLElement;\r\n      const appRootEl = this._appRef.components[0]?.location.nativeElement as\r\n        | undefined\r\n        | HTMLElement;\r\n      if (!appRootEl) {\r\n        throw new NgnError(\r\n          'NgnToastManager',\r\n          'Failed to find application root element to attach toast host!'\r\n        );\r\n      }\r\n      appRootEl.appendChild(hostEl);\r\n    });\r\n  }\r\n\r\n  public ngOnDestroy(): void {\r\n    if (this._component) {\r\n      this._appRef.detachView(this._component.hostView);\r\n      this._component.destroy();\r\n      this._component = undefined;\r\n    }\r\n  }\r\n\r\n  public removeToast(id: number): void {\r\n    this._toasts.update(toasts => toasts.filter(t => t.id !== id));\r\n  }\r\n\r\n  public addToast(options: NgnToastOptions): number {\r\n    const id = this._nextId++;\r\n    const toast: ToastFull = { ...DEFAULT_TOAST_OPTIONS, ...this._userDefaults, ...options, id };\r\n    this._toasts.update(toasts => [...toasts, toast]);\r\n    return id;\r\n  }\r\n}\r\n","import { InjectionToken, type Provider } from '@angular/core';\r\n\r\nimport { NgnToastManager } from './toast-manager';\r\n\r\nimport type { NgnToastOptionsMeta } from './types';\r\n\r\nexport type NgnToastFeature = {\r\n  providers: Provider[];\r\n};\r\n\r\nexport const NGN_TOAST_USER_DEFAULTS = new InjectionToken<NgnToastOptionsMeta>(\r\n  'NGN_TOAST_USER_DEFAULTS'\r\n);\r\n\r\nexport function withToasts(defaultOptions?: NgnToastOptionsMeta): NgnToastFeature {\r\n  return {\r\n    providers: [\r\n      NgnToastManager,\r\n      {\r\n        provide: NGN_TOAST_USER_DEFAULTS,\r\n        useValue: defaultOptions || {},\r\n      },\r\n    ],\r\n  };\r\n}\r\n","import { Injector, runInInjectionContext } from '@angular/core';\r\nimport { injectOrThrow } from '@ngneers/controls/utils-ng';\r\n\r\nimport { NgnToastManager } from './toast-manager';\r\n\r\nimport type { NgnToastOptions, NgnToastRef } from './types';\r\n\r\nclass ToastCreator {\r\n  private readonly _manager: NgnToastManager;\r\n\r\n  constructor() {\r\n    this._manager = injectOrThrow(\r\n      NgnToastManager,\r\n      'injectToastCreator',\r\n      'NgnToastManager not found. Make sure to use withToasts() to provide ngn toasts!'\r\n    );\r\n  }\r\n\r\n  public show(options: NgnToastOptions): NgnToastRef {\r\n    const id = this._manager.addToast(options);\r\n    return {\r\n      hide: () => this._manager.removeToast(id),\r\n    };\r\n  }\r\n}\r\n\r\nexport function injectToastCreator(injector?: Injector): ToastCreator {\r\n  if (injector) {\r\n    return runInInjectionContext(injector, () => injectToastCreator());\r\n  }\r\n  return new ToastCreator();\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngneers-controls-toast.mjs","sources":["../../src/toast/defaults.ts","../../src/toast/toast.ts","../../src/toast/toast.html","../../src/toast/toast-host.ts","../../src/toast/toast-host.html","../../src/toast/toast-manager.ts","../../src/toast/provider.ts","../../src/toast/toast-creator.ts","../../src/toast/ngneers-controls-toast.ts"],"sourcesContent":["import type { NgnToastOptions } from './types';\r\n\r\nexport const DEFAULT_TOAST_OPTIONS: NgnToastOptions = {\r\n  closable: false,\r\n  autoHide: 5000,\r\n};\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  input,\r\n  TemplateRef,\r\n  output,\r\n  type OnInit,\r\n} from '@angular/core';\r\nimport { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';\r\nimport { NgnButton } from '@ngneers/controls/button';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { toastControlTemplate } from '@ngneers/controls-themes/templates/toast';\r\n\r\nimport { DEFAULT_TOAST_OPTIONS } from './defaults';\r\n\r\nimport type { ContentTemplateType, HeaderTemplateType } from './types';\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-toast',\r\n  templateUrl: './toast.html',\r\n  imports: [NgTemplateOutlet, NgnPt, NgnButton, NgnIcon],\r\n  providers: [provideSelf(NgnToast)],\r\n  host: {\r\n    '(mouseenter)': 'mouseEnter()',\r\n    '(mouseleave)': 'mouseLeave()',\r\n    '[animate.enter]': \"theme.class('anim-enter')\",\r\n    '[animate.leave]': \"theme.class('anim-leave')\",\r\n    role: 'alert',\r\n    'aria-live': 'assertive',\r\n  },\r\n})\r\nexport class NgnToast extends NgnBase<'toast'> implements OnInit {\r\n  protected readonly theme = this.injectThemeTemplate(toastControlTemplate, 'root');\r\n\r\n  public readonly header = input<string>();\r\n  public readonly content = input<string>();\r\n\r\n  public readonly icon = input<IconType>();\r\n  public readonly closeIcon = input<IconType>();\r\n  public readonly closable = input<boolean | undefined>(DEFAULT_TOAST_OPTIONS.closable);\r\n  public readonly autoHide = input<number | false | undefined>(DEFAULT_TOAST_OPTIONS.autoHide);\r\n\r\n  public readonly templateContent = input<TemplateRef<ContentTemplateType> | null>();\r\n  public readonly templateHeader = input<TemplateRef<HeaderTemplateType> | null>();\r\n\r\n  public readonly closeToast = output<void>();\r\n  private _closeTimeout?: number;\r\n\r\n  public ngOnInit(): void {\r\n    this.startHideTimer();\r\n  }\r\n\r\n  private startHideTimer() {\r\n    const autoHide = this.autoHide();\r\n    if (autoHide && autoHide > 0) {\r\n      this._closeTimeout = setTimeout(() => this.close(), autoHide) as unknown as number;\r\n    }\r\n  }\r\n\r\n  protected close() {\r\n    this.closeToast.emit();\r\n    if (this._closeTimeout) {\r\n      clearTimeout(this._closeTimeout);\r\n    }\r\n  }\r\n\r\n  protected mouseEnter(): void {\r\n    if (this._closeTimeout) {\r\n      clearTimeout(this._closeTimeout);\r\n      this._closeTimeout = undefined;\r\n    }\r\n  }\r\n\r\n  protected mouseLeave(): void {\r\n    this.startHideTimer();\r\n  }\r\n}\r\n","@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","import {\r\n  afterNextRender,\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  inject,\r\n} from '@angular/core';\r\nimport { NgnBase } from '@ngneers/controls/base';\r\nimport { toastControlTemplate } from '@ngneers/controls-themes/templates/toast';\r\n\r\nimport { NgnToast } from './toast';\r\nimport { NgnToastManager } from './toast-manager';\r\n\r\n/**\r\n * The host component that renders toasts.\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-toast-host',\r\n  templateUrl: 'toast-host.html',\r\n  imports: [NgnToast],\r\n  host: {\r\n    '[attr.popover]': '\"manual\"',\r\n  },\r\n})\r\nexport class NgnToastHost extends NgnBase<'toast'> {\r\n  protected readonly theme = this.injectThemeTemplate(toastControlTemplate, 'host');\r\n  private readonly _toastManager = inject(NgnToastManager);\r\n  private readonly _el = inject<ElementRef<HTMLElement>>(ElementRef);\r\n\r\n  protected readonly toasts = this._toastManager.toasts;\r\n\r\n  constructor() {\r\n    super();\r\n    afterNextRender(() => {\r\n      this._el.nativeElement.showPopover();\r\n    });\r\n  }\r\n\r\n  protected removeToast(id: number): void {\r\n    this._toastManager.removeToast(id);\r\n  }\r\n}\r\n","@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","import {\r\n  ApplicationRef,\r\n  ComponentRef,\r\n  createComponent,\r\n  inject,\r\n  Injectable,\r\n  type OnDestroy,\r\n  signal,\r\n} from '@angular/core';\r\nimport { Platform } from '@ngneers/controls/api/ng';\r\nimport { NgnError } from '@ngneers/controls/utils';\r\nimport { injectOrThrow } from '@ngneers/controls/utils-ng';\r\n\r\nimport { DEFAULT_TOAST_OPTIONS } from './defaults';\r\nimport { NGN_TOAST_USER_DEFAULTS } from './provider';\r\nimport { NgnToastHost } from './toast-host';\r\n\r\nimport type { NgnToastOptions } from './types';\r\n\r\ntype ToastFull = NgnToastOptions & { id: number };\r\n\r\n@Injectable()\r\nexport class NgnToastManager implements OnDestroy {\r\n  private readonly _toasts = signal<ToastFull[]>([]);\r\n  private readonly _appRef = inject(ApplicationRef);\r\n  private readonly _userDefaults = injectOrThrow(\r\n    NGN_TOAST_USER_DEFAULTS,\r\n    'NgnToastManager',\r\n    'Failed to inject NGN_TOAST_USER_DEFAULTS, make sure to use withToasts() to provide ngn toasts!'\r\n  );\r\n  private _nextId = 0;\r\n\r\n  public readonly toasts = this._toasts.asReadonly();\r\n  private _component?: ComponentRef<NgnToastHost>;\r\n\r\n  constructor() {\r\n    if (!inject(Platform).isBrowser) {\r\n      return;\r\n    }\r\n    // Defer creation to avoid issues with Angular's injection tree during app initialization\r\n    queueMicrotask(() => {\r\n      // Create and attach the toast host component to the application's root\r\n      this._component = createComponent(NgnToastHost, {\r\n        environmentInjector: this._appRef.injector,\r\n      });\r\n      this._appRef.attachView(this._component.hostView);\r\n      const hostEl = this._component.location.nativeElement as HTMLElement;\r\n      const appRootEl = this._appRef.components[0]?.location.nativeElement as\r\n        | undefined\r\n        | HTMLElement;\r\n      if (!appRootEl) {\r\n        throw new NgnError(\r\n          'NgnToastManager',\r\n          'Failed to find application root element to attach toast host!'\r\n        );\r\n      }\r\n      appRootEl.appendChild(hostEl);\r\n    });\r\n  }\r\n\r\n  public ngOnDestroy(): void {\r\n    if (this._component) {\r\n      this._appRef.detachView(this._component.hostView);\r\n      this._component.destroy();\r\n      this._component = undefined;\r\n    }\r\n  }\r\n\r\n  public removeToast(id: number): void {\r\n    this._toasts.update(toasts => toasts.filter(t => t.id !== id));\r\n  }\r\n\r\n  public addToast(options: NgnToastOptions): number {\r\n    const id = this._nextId++;\r\n    const toast: ToastFull = { ...DEFAULT_TOAST_OPTIONS, ...this._userDefaults, ...options, id };\r\n    this._toasts.update(toasts => [...toasts, toast]);\r\n    return id;\r\n  }\r\n}\r\n","import { InjectionToken, type Provider } from '@angular/core';\r\n\r\nimport { NgnToastManager } from './toast-manager';\r\n\r\nimport type { NgnToastOptionsMeta } from './types';\r\n\r\nexport type NgnToastFeature = {\r\n  providers: Provider[];\r\n};\r\n\r\nexport const NGN_TOAST_USER_DEFAULTS = new InjectionToken<NgnToastOptionsMeta>(\r\n  'NGN_TOAST_USER_DEFAULTS'\r\n);\r\n\r\nexport function withToasts(defaultOptions?: NgnToastOptionsMeta): NgnToastFeature {\r\n  return {\r\n    providers: [\r\n      NgnToastManager,\r\n      {\r\n        provide: NGN_TOAST_USER_DEFAULTS,\r\n        useValue: defaultOptions || {},\r\n      },\r\n    ],\r\n  };\r\n}\r\n","import { Injector, runInInjectionContext } from '@angular/core';\r\nimport { injectOrThrow } from '@ngneers/controls/utils-ng';\r\n\r\nimport { NgnToastManager } from './toast-manager';\r\n\r\nimport type { NgnToastOptions, NgnToastRef } from './types';\r\n\r\nclass ToastCreator {\r\n  private readonly _manager: NgnToastManager;\r\n\r\n  constructor() {\r\n    this._manager = injectOrThrow(\r\n      NgnToastManager,\r\n      'injectToastCreator',\r\n      'NgnToastManager not found. Make sure to use withToasts() to provide ngn toasts!'\r\n    );\r\n  }\r\n\r\n  public show(options: NgnToastOptions): NgnToastRef {\r\n    const id = this._manager.addToast(options);\r\n    return {\r\n      hide: () => this._manager.removeToast(id),\r\n    };\r\n  }\r\n}\r\n\r\nexport function injectToastCreator(injector?: Injector): ToastCreator {\r\n  if (injector) {\r\n    return runInInjectionContext(injector, () => injectToastCreator());\r\n  }\r\n  return new ToastCreator();\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}