@ah-oh/ao-workspaces-design-system 0.0.47 → 0.0.48

package/fesm2022/ah-oh-ao-workspaces-design-system.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, inject, signal, Injectable, makeEnvironmentProviders, input, ChangeDetectionStrategy, computed, model, forwardRef, output, DestroyRef, ElementRef, HostListener, viewChild, TemplateRef, Directive, contentChildren, effect, ViewContainerRef, ViewChild, InjectionToken, ApplicationRef, Injector, EnvironmentInjector, createComponent, untracked, Optional, SkipSelf, NgModule, EventEmitter, PLATFORM_ID, Output, Input, Inject, viewChildren } from '@angular/core';
+import { Component, inject, signal, Injectable, makeEnvironmentProviders, input, ChangeDetectionStrategy, computed, model, forwardRef, output, DestroyRef, ElementRef, HostListener, viewChild, TemplateRef, Directive, contentChildren, effect, ViewContainerRef, ViewChild, InjectionToken, ApplicationRef, Injector, EnvironmentInjector, createComponent, runInInjectionContext, untracked, Optional, SkipSelf, NgModule, EventEmitter, PLATFORM_ID, Output, Input, Inject, viewChildren } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet, isPlatformBrowser, DatePipe } from '@angular/common';
 import * as i2 from '@angular/common/http';
 import { withInterceptors, HttpParams, HttpHeaders, HttpRequest, HttpResponse, HttpClient } from '@angular/common/http';
@@ -2767,16 +2767,19 @@ class TabsComponent {
     activeTab = model('', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     tabChange = output();
     panels = contentChildren(TabPanelComponent, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            const panelList = this.panels();
-            const currentActiveTab = untracked(() => this.activeTab());
-            if (panelList.length > 0 && !currentActiveTab) {
-                const firstEnabled = panelList.find((p) => !p.disabled());
-                if (firstEnabled) {
-                    this.activeTab.set(firstEnabled.id());
+    injector = inject(Injector);
+    ngAfterViewInit() {
+        runInInjectionContext(this.injector, () => {
+            effect(() => {
+                const panelList = this.panels();
+                const currentActiveTab = untracked(() => this.activeTab());
+                if (panelList.length > 0 && !currentActiveTab) {
+                    const firstEnabled = panelList.find(p => !p.disabled());
+                    if (firstEnabled) {
+                        this.activeTab.set(firstEnabled.id());
+                    }
                 }
-            }
+            });
         });
     }
     selectTab(panel) {
@@ -2788,19 +2791,17 @@ class TabsComponent {
         this.tabChange.emit({ previousTabId, currentTabId: panel.id() });
     }
     onKeydown(event, currentPanel) {
-        const enabledPanels = this.panels().filter((p) => !p.disabled());
-        const currentIndex = enabledPanels.findIndex((p) => p.id() === currentPanel.id());
+        const enabledPanels = this.panels().filter(p => !p.disabled());
+        const currentIndex = enabledPanels.findIndex(p => p.id() === currentPanel.id());
         if (currentIndex === -1)
             return;
         let targetIndex = null;
         switch (event.key) {
             case 'ArrowLeft':
-                targetIndex =
-                    currentIndex > 0 ? currentIndex - 1 : enabledPanels.length - 1;
+                targetIndex = currentIndex > 0 ? currentIndex - 1 : enabledPanels.length - 1;
                 break;
             case 'ArrowRight':
-                targetIndex =
-                    currentIndex < enabledPanels.length - 1 ? currentIndex + 1 : 0;
+                targetIndex = currentIndex < enabledPanels.length - 1 ? currentIndex + 1 : 0;
                 break;
             case 'Home':
                 targetIndex = 0;
@@ -2828,7 +2829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             args: [{ selector: 'ao-tabs', imports: [NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ao-tabs',
                     }, template: "<div class=\"ao-tabs__header\" role=\"tablist\">\n  @for (panel of panels(); track panel.id()) {\n    <button\n      class=\"ao-tabs__tab\"\n      role=\"tab\"\n      type=\"button\"\n      [class.ao-tabs__tab--active]=\"panel.id() === activeTab()\"\n      [class.ao-tabs__tab--disabled]=\"panel.disabled()\"\n      [attr.aria-selected]=\"panel.id() === activeTab()\"\n      [attr.aria-controls]=\"'panel-' + panel.id()\"\n      [attr.aria-disabled]=\"panel.disabled()\"\n      [attr.data-tab-id]=\"panel.id()\"\n      [attr.tabindex]=\"panel.id() === activeTab() ? 0 : -1\"\n      [disabled]=\"panel.disabled()\"\n      (click)=\"selectTab(panel)\"\n      (keydown)=\"onKeydown($event, panel)\"\n    >\n      @if (panel.icon()) {\n        <ao-icon [svg]=\"panel.icon()!\" size=\"sm\" />\n      }\n      {{ panel.label() }}\n    </button>\n  }\n</div>\n<div class=\"ao-tabs__content\">\n  @for (panel of panels(); track panel.id()) {\n    <div\n      class=\"ao-tabs__panel\"\n      role=\"tabpanel\"\n      [id]=\"'panel-' + panel.id()\"\n      [attr.aria-labelledby]=\"panel.id()\"\n      [class.ao-tabs__panel--active]=\"panel.id() === activeTab()\"\n      [attr.hidden]=\"panel.id() !== activeTab() ? true : null\"\n    >\n      @if (panel.id() === activeTab()) {\n        <ng-container [ngTemplateOutlet]=\"panel.panelContent()\" />\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.ao-tabs__header{display:flex;gap:20px;border-bottom:1px solid #e9e9e9}.ao-tabs__tab{font-size:13px;font-weight:700;line-height:19.5px;letter-spacing:0;position:relative;display:inline-flex;align-items:center;gap:5px;padding:10px 5px;background:transparent;border:none;color:#212121;cursor:pointer;transition:color .2s ease}.ao-tabs__tab:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:3px;background:transparent;transition:background-color .2s ease}.ao-tabs__tab:hover:not(:disabled){color:#ff004d}.ao-tabs__tab:focus-visible{outline:2px solid #ff004d;outline-offset:2px}.ao-tabs__tab--active{color:#ff004d}.ao-tabs__tab--active:after{background:#ff004d}.ao-tabs__tab--disabled{color:#909090;cursor:not-allowed}.ao-tabs__content{padding-top:15px}.ao-tabs__panel[hidden]{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabPanelComponent), { isSignal: true }] }] } });
+        }], propDecorators: { activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabPanelComponent), { isSignal: true }] }] } });
 
 class SideNavComponent {
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));