@ascentgl/ads-ui 20.13.0 → 20.15.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -6486,6 +6486,15 @@ class AbstractSideNavBarComponent {
         this.sidebarSize = signal(this.defaultExpandedWidth(), ...(ngDevMode ? [{ debugName: "sidebarSize" }] : []));
         /** @ignore */
         this.minWidth = 50;
+        effect(() => {
+            /**
+             * triggering window resize when sidebar size changes will allow
+             * other components to react to the change in sidebar size
+             */
+            if (this.sidebarSize()) {
+                DomHelper.triggerWindowResize();
+            }
+        });
     }
     /** @ignore */
     ngOnInit() {
@@ -6544,7 +6553,7 @@ class AbstractSideNavBarComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AbstractSideNavBarComponent, decorators: [{
             type: Directive
-        }] });
+        }], ctorParameters: () => [] });
 
 class AdsSideNavBarComponent extends AbstractSideNavBarComponent {
     /** @ignore */
@@ -7635,22 +7644,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class AdsTabsComponent {
     constructor() {
+        this.tabGroup = viewChild.required('tabGroup');
         this.tabs = [];
         this.selectedIndex = 0;
         this.selectedIndexChange = new EventEmitter();
+        this.tabChange = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        const tabGroup = this.tabGroup();
+        const handleClick = tabGroup._handleClick;
+        tabGroup._handleClick = (tab, tabHeader, index) => {
+            const originalClick = () => handleClick.call(tabGroup, tab, tabHeader, index);
+            this.tabChange.emit({ index, originalClick });
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AdsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AdsTabsComponent, isStandalone: false, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, ngImport: i0, template: "<mat-tab-group\r\n  [selectedIndex]=\"selectedIndex\"\r\n  (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\r\n  class=\"custom-tabs\"\r\n  [disableRipple]=\"true\"\r\n>\r\n  @for(tab of tabs; track $index) {\r\n    @if (tab.headerTemplate) {\r\n      <mat-tab [disabled]=\"tab.disabled\">\r\n        <ng-template mat-tab-label>\r\n          <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n        </ng-template>\r\n        @if(tab.template) {\r\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\r\n        }\r\n      </mat-tab>\r\n    } @else {\r\n      <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\r\n        @if(tab.template) {\r\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\r\n        }\r\n      </mat-tab>\r\n    }\r\n  }\r\n</mat-tab-group>\r\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30)}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--color-primary-hover)}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--color-primary-hover)!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"], dependencies: [{ kind: "component", type: i2$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AdsTabsComponent, isStandalone: false, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group\r\n  [selectedIndex]=\"selectedIndex\"\r\n  (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\r\n  class=\"custom-tabs\"\r\n  #tabGroup\r\n  [disableRipple]=\"true\"\r\n>\r\n  @for(tab of tabs; track $index) {\r\n    @if (tab.headerTemplate) {\r\n      <mat-tab [disabled]=\"tab.disabled\">\r\n        <ng-template mat-tab-label>\r\n          <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n        </ng-template>\r\n        @if(tab.template) {\r\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\r\n        }\r\n      </mat-tab>\r\n    } @else {\r\n      <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\r\n        @if(tab.template) {\r\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\r\n        }\r\n      </mat-tab>\r\n    }\r\n  }\r\n</mat-tab-group>\r\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30)}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--color-primary-hover)}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--color-primary-hover)!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"], dependencies: [{ kind: "component", type: i2$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AdsTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-tabs', standalone: false, template: "<mat-tab-group\r\n  [selectedIndex]=\"selectedIndex\"\r\n  (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\r\n  class=\"custom-tabs\"\r\n  [disableRipple]=\"true\"\r\n>\r\n  @for(tab of tabs; track $index) {\r\n    @if (tab.headerTemplate) {\r\n      <mat-tab [disabled]=\"tab.disabled\">\r\n        <ng-template mat-tab-label>\r\n          <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n        </ng-template>\r\n        @if(tab.template) {\r\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\r\n        }\r\n      </mat-tab>\r\n    } @else {\r\n      <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\r\n        @if(tab.template) {\r\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\r\n        }\r\n      </mat-tab>\r\n    }\r\n  }\r\n</mat-tab-group>\r\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30)}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--color-primary-hover)}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--color-primary-hover)!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"] }]
+            args: [{ selector: 'ads-tabs', standalone: false, template: "<mat-tab-group\r\n  [selectedIndex]=\"selectedIndex\"\r\n  (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\r\n  class=\"custom-tabs\"\r\n  #tabGroup\r\n  [disableRipple]=\"true\"\r\n>\r\n  @for(tab of tabs; track $index) {\r\n    @if (tab.headerTemplate) {\r\n      <mat-tab [disabled]=\"tab.disabled\">\r\n        <ng-template mat-tab-label>\r\n          <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n        </ng-template>\r\n        @if(tab.template) {\r\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\r\n        }\r\n      </mat-tab>\r\n    } @else {\r\n      <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\r\n        @if(tab.template) {\r\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\r\n        }\r\n      </mat-tab>\r\n    }\r\n  }\r\n</mat-tab-group>\r\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30)}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--color-primary-hover)}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--color-primary-hover)!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"] }]
         }], propDecorators: { tabs: [{
                 type: Input
             }], selectedIndex: [{
                 type: Input
             }], selectedIndexChange: [{
                 type: Output
+            }], tabChange: [{
+                type: Output
             }] } });
 
 class AdsTabsModule {