@tapsellorg/angular-material-library/fesm2022/tapsellorg-angular-material-library-src-lib-tab-group.mjs

Angular library for Tapsell

import { NgComponentOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, input, signal, Component } from '@angular/core';
import * as i1 from '@angular/material/tabs';
import { MatTabsModule } from '@angular/material/tabs';
import { ActivatedRoute, Router } from '@angular/router';
import { MatIcon } from '@angular/material/icon';

const QUERY_PARAM_TAB = 'tab';

class PghTabGroupComponent {
    constructor() {
        this.activatedRoute = inject(ActivatedRoute);
        this.router = inject(Router);
        this.tabs = input.required();
        this.matStretchTabs = input(false);
        this.matAlignTabs = input('start');
        this.selectedTabIndex = signal(0);
    }
    ngOnInit() {
        this.handleQueryParamsSnapShot();
    }
    handleQueryParamsSnapShot() {
        const tabKey = this.activatedRoute.snapshot.queryParamMap.get(QUERY_PARAM_TAB);
        if (!tabKey) {
            this.onTabChange(0);
            return;
        }
        const index = this.tabs().findIndex(tab => tab.key === tabKey);
        this.selectedTabIndex.set(index !== -1 ? index : 0);
    }
    onTabChange(index) {
        const tabKey = this.tabs()[index]?.key;
        if (!tabKey)
            return;
        this.selectedTabIndex.set(index);
        this.router.navigate([], {
            relativeTo: this.activatedRoute,
            queryParams: { tab: tabKey },
            queryParamsHandling: 'merge',
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PghTabGroupComponent, isStandalone: true, selector: "pgh-tab-group", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, matStretchTabs: { classPropertyName: "matStretchTabs", publicName: "matStretchTabs", isSignal: true, isRequired: false, transformFunction: null }, matAlignTabs: { classPropertyName: "matAlignTabs", publicName: "matAlignTabs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-tab-group\n  [mat-stretch-tabs]=\"matStretchTabs()\"\n  [mat-align-tabs]=\"matAlignTabs()\"\n  [selectedIndex]=\"selectedTabIndex()\"\n  (selectedIndexChange)=\"onTabChange($event)\"\n>\n  @for (tab of tabs(); track tab.key) {\n  <mat-tab [disabled]=\"tab.disabled\">\n    <ng-template mat-tab-label>\n      <div class=\"d-flex align-items-end gap-1\">\n        @if(tab.preIcon) {\n        <mat-icon [svgIcon]=\"tab.preIcon\" />\n        }\n        <span>{{ tab.label }}</span>\n        @if(tab.suffixIcon) {\n        <mat-icon [svgIcon]=\"tab.suffixIcon\" />\n        }\n      </div>\n    </ng-template>\n    <ng-template matTabContent>\n      <ng-container *ngComponentOutlet=\"tab.component; inputs: tab.inputs\"></ng-container>\n    </ng-template>\n  </mat-tab>\n  }\n</mat-tab-group>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i1.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1.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: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghTabGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pgh-tab-group', imports: [MatTabsModule, NgComponentOutlet, MatIcon], standalone: true, template: "<mat-tab-group\n  [mat-stretch-tabs]=\"matStretchTabs()\"\n  [mat-align-tabs]=\"matAlignTabs()\"\n  [selectedIndex]=\"selectedTabIndex()\"\n  (selectedIndexChange)=\"onTabChange($event)\"\n>\n  @for (tab of tabs(); track tab.key) {\n  <mat-tab [disabled]=\"tab.disabled\">\n    <ng-template mat-tab-label>\n      <div class=\"d-flex align-items-end gap-1\">\n        @if(tab.preIcon) {\n        <mat-icon [svgIcon]=\"tab.preIcon\" />\n        }\n        <span>{{ tab.label }}</span>\n        @if(tab.suffixIcon) {\n        <mat-icon [svgIcon]=\"tab.suffixIcon\" />\n        }\n      </div>\n    </ng-template>\n    <ng-template matTabContent>\n      <ng-container *ngComponentOutlet=\"tab.component; inputs: tab.inputs\"></ng-container>\n    </ng-template>\n  </mat-tab>\n  }\n</mat-tab-group>\n" }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { PghTabGroupComponent };
//# sourceMappingURL=tapsellorg-angular-material-library-src-lib-tab-group.mjs.map