@gravionlabs/helix-core 22.0.0

package/fesm2022/gravionlabs-helix-core-tabs.mjs

@@ -0,0 +1,900 @@
+import * as i2 from '@angular/common';
+import { CommonModule, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, inject, model, input, booleanAttribute, numberAttribute, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChild, contentChildren, viewChild, forwardRef, computed, effect, ElementRef, NgModule } from '@angular/core';
+import { uuid, getWidth, isRTL, findSingle, getOuterWidth, getOffset, equals, getAttribute, focus } from '@gravionlabs/helix-core/uix/utils';
+import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
+import * as i1 from '@gravionlabs/helix-core/bind';
+import { Bind, BindModule } from '@gravionlabs/helix-core/bind';
+import { BaseStyle } from '@gravionlabs/helix-core/base';
+import { HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';
+import * as i3 from '@gravionlabs/helix-core/ripple';
+import { RippleModule, Ripple } from '@gravionlabs/helix-core/ripple';
+import { ChevronLeftIcon, ChevronRightIcon } from '@gravionlabs/helix-core/icons';
+
+const style = /*css*/ `
+    .h-tabs {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .h-tablist {
+        display: flex;
+        position: relative;
+        overflow: hidden;
+        background: dt('tabs.tablist.background');
+    }
+
+    .h-tablist-viewport {
+        overflow-x: auto;
+        overflow-y: hidden;
+        scroll-behavior: smooth;
+        scrollbar-width: none;
+        overscroll-behavior: contain auto;
+    }
+
+    .h-tablist-viewport::-webkit-scrollbar {
+        display: none;
+    }
+
+    .h-tablist-tab-list {
+        position: relative;
+        display: flex;
+        border-style: solid;
+        border-color: dt('tabs.tablist.border.color');
+        border-width: dt('tabs.tablist.border.width');
+    }
+
+    .h-tablist-content {
+        flex-grow: 1;
+    }
+
+    .h-tablist-nav-button {
+        all: unset;
+        position: absolute !important;
+        flex-shrink: 0;
+        inset-block-start: 0;
+        z-index: 2;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: dt('tabs.nav.button.background');
+        color: dt('tabs.nav.button.color');
+        width: dt('tabs.nav.button.width');
+        transition:
+            color dt('tabs.transition.duration'),
+            outline-color dt('tabs.transition.duration'),
+            box-shadow dt('tabs.transition.duration');
+        box-shadow: dt('tabs.nav.button.shadow');
+        outline-color: transparent;
+        cursor: pointer;
+    }
+
+    .h-tablist-nav-button:focus-visible {
+        z-index: 1;
+        box-shadow: dt('tabs.nav.button.focus.ring.shadow');
+        outline: dt('tabs.nav.button.focus.ring.width') dt('tabs.nav.button.focus.ring.style') dt('tabs.nav.button.focus.ring.color');
+        outline-offset: dt('tabs.nav.button.focus.ring.offset');
+    }
+
+    .h-tablist-nav-button:hover {
+        color: dt('tabs.nav.button.hover.color');
+    }
+
+    .h-tablist-prev-button {
+        inset-inline-start: 0;
+    }
+
+    .h-tablist-next-button {
+        inset-inline-end: 0;
+    }
+
+    .h-tablist-prev-button:dir(rtl),
+    .h-tablist-next-button:dir(rtl) {
+        transform: rotate(180deg);
+    }
+
+    .h-tab {
+        flex-shrink: 0;
+        cursor: pointer;
+        user-select: none;
+        position: relative;
+        border-style: solid;
+        white-space: nowrap;
+        gap: dt('tabs.tab.gap');
+        background: dt('tabs.tab.background');
+        border-width: dt('tabs.tab.border.width');
+        border-color: dt('tabs.tab.border.color');
+        color: dt('tabs.tab.color');
+        padding: dt('tabs.tab.padding');
+        font-weight: dt('tabs.tab.font.weight');
+        transition:
+            background dt('tabs.transition.duration'),
+            border-color dt('tabs.transition.duration'),
+            color dt('tabs.transition.duration'),
+            outline-color dt('tabs.transition.duration'),
+            box-shadow dt('tabs.transition.duration');
+        margin: dt('tabs.tab.margin');
+        outline-color: transparent;
+    }
+
+    .h-tab:not(.h-disabled):focus-visible {
+        z-index: 1;
+        box-shadow: dt('tabs.tab.focus.ring.shadow');
+        outline: dt('tabs.tab.focus.ring.width') dt('tabs.tab.focus.ring.style') dt('tabs.tab.focus.ring.color');
+        outline-offset: dt('tabs.tab.focus.ring.offset');
+    }
+
+    .h-tab:not(.h-tab-active):not(.h-disabled):hover {
+        background: dt('tabs.tab.hover.background');
+        border-color: dt('tabs.tab.hover.border.color');
+        color: dt('tabs.tab.hover.color');
+    }
+
+    .h-tab-active {
+        background: dt('tabs.tab.active.background');
+        border-color: dt('tabs.tab.active.border.color');
+        color: dt('tabs.tab.active.color');
+    }
+
+    .h-tabpanels {
+        background: dt('tabs.tabpanel.background');
+        color: dt('tabs.tabpanel.color');
+        padding: dt('tabs.tabpanel.padding');
+        outline: 0 none;
+    }
+
+    .h-tabpanel:focus-visible {
+        box-shadow: dt('tabs.tabpanel.focus.ring.shadow');
+        outline: dt('tabs.tabpanel.focus.ring.width') dt('tabs.tabpanel.focus.ring.style') dt('tabs.tabpanel.focus.ring.color');
+        outline-offset: dt('tabs.tabpanel.focus.ring.offset');
+    }
+
+    .h-tablist-active-bar {
+        z-index: 1;
+        display: block;
+        position: absolute;
+        inset-block-end: dt('tabs.active.bar.bottom');
+        height: dt('tabs.active.bar.height');
+        background: dt('tabs.active.bar.background');
+        transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
+    }
+`;
+
+const classes$4 = {
+    root: ({ instance }) => [
+        'h-tabs h-component',
+        {
+            'h-tabs-scrollable': instance.scrollable()
+        }
+    ]
+};
+class TabsStyle extends BaseStyle {
+    name = 'tabs';
+    style = style;
+    classes = classes$4;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Tabs facilitates seamless switching between different views.
+ *
+ * [Live Demo](https://www.primeng.org/tabs/)
+ *
+ * @module tabsstyle
+ *
+ */
+var TabsClasses;
+(function (TabsClasses) {
+    /**
+     * Class name of the root element
+     */
+    TabsClasses["root"] = "h-tabs";
+    /**
+     * Class name of the wrapper element
+     */
+    TabsClasses["list"] = "h-tablist";
+    /**
+     * Class name of the content element
+     */
+    TabsClasses["content"] = "h-tablist-content";
+    /**
+     * Class name of the tab list element
+     */
+    TabsClasses["tablist"] = "h-tablist-tab-list";
+    /**
+     * Class name of the tab list element
+     */
+    TabsClasses["tab"] = "h-tab";
+    /**
+     * Class name of the inkbar element
+     */
+    TabsClasses["inkbar"] = "h-tablist-active-bar";
+    /**
+     * Class name of the navigation buttons
+     */
+    TabsClasses["button"] = "h-tablist-nav-button";
+    /**
+     * Class name of the tab panels wrapper
+     */
+    TabsClasses["tabpanels"] = "h-tabpanels";
+    /**
+     * Class name of the tab panel element
+     */
+    TabsClasses["tabpanel"] = "h-tabs-panel";
+})(TabsClasses || (TabsClasses = {}));
+
+const TABS_INSTANCE = new InjectionToken('TABS_INSTANCE');
+/**
+ * Tabs facilitates seamless switching between different views.
+ * @group Components
+ */
+class Tabs extends BaseComponent {
+    componentName = 'Tabs';
+    $pcTabs = inject(TABS_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    /**
+     * Value of the active tab.
+     * @defaultValue undefined
+     * @group Props
+     */
+    value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * When specified, enables horizontal and/or vertical scrolling.
+     * @type boolean
+     * @defaultValue false
+     * @group Props
+     */
+    scrollable = input(false, { ...(ngDevMode ? { debugName: "scrollable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When enabled, tabs are not rendered until activation.
+     * @type boolean
+     * @defaultValue false
+     * @group Props
+     */
+    lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When enabled, the focused tab is activated.
+     * @type boolean
+     * @defaultValue false
+     * @group Props
+     */
+    selectOnFocus = input(false, { ...(ngDevMode ? { debugName: "selectOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to display navigation buttons in container when scrollable is enabled.
+     * @type boolean
+     * @defaultValue true
+     * @group Props
+     */
+    showNavigators = input(true, { ...(ngDevMode ? { debugName: "showNavigators" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Tabindex of the tab buttons.
+     * @type number
+     * @defaultValue 0
+     * @group Props
+     */
+    tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    id = signal(uuid('pn_id_'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    _componentStyle = inject(TabsStyle);
+    updateValue(newValue) {
+        this.value.update(() => newValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tabs, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: Tabs, isStandalone: true, selector: "h-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showNavigators: { classPropertyName: "showNavigators", publicName: "showNavigators", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "cx(\"root\")", "attr.id": "id()" } }, providers: [TabsStyle, { provide: TABS_INSTANCE, useExisting: Tabs }, { provide: PARENT_INSTANCE, useExisting: Tabs }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'h-tabs', standalone: true, imports: [CommonModule, BindModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [TabsStyle, { provide: TABS_INSTANCE, useExisting: Tabs }, { provide: PARENT_INSTANCE, useExisting: Tabs }], host: {
+                        '[class]': 'cx("root")',
+                        '[attr.id]': 'id()'
+                    }, hostDirectives: [Bind], template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], selectOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnFocus", required: false }] }], showNavigators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigators", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }] } });
+
+const classes$3 = {
+    root: ({ instance }) => [
+        'h-tab',
+        {
+            'h-tab-active': instance.active(),
+            'h-disabled': instance.disabled()
+        }
+    ]
+};
+class TabStyle extends BaseStyle {
+    name = 'tab';
+    classes = classes$3;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Tabs facilitates seamless switching between different views.
+ *
+ * [Live Demo](https://www.primeng.org/tabs/)
+ *
+ * @module tabsstyle
+ *
+ */
+var TabClasses;
+(function (TabClasses) {
+    /**
+     * Class name of the tab list element
+     */
+    TabClasses["tab"] = "h-tab";
+})(TabClasses || (TabClasses = {}));
+
+const classes$2 = {
+    root: 'h-tablist',
+    content: 'h-tablist-content h-tablist-viewport',
+    tabList: 'h-tablist-tab-list',
+    activeBar: 'h-tablist-active-bar',
+    prevButton: 'h-tablist-prev-button h-tablist-nav-button',
+    nextButton: 'h-tablist-next-button h-tablist-nav-button'
+};
+class TabListStyle extends BaseStyle {
+    name = 'tablist';
+    classes = classes$2;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabListStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabListStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabListStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Tabs facilitates seamless switching between different views.
+ *
+ * [Live Demo](https://www.primeng.org/tabs/)
+ *
+ * @module tabliststyle
+ *
+ */
+var TabListClasses;
+(function (TabListClasses) {
+    /**
+     * Class name of the root element
+     */
+    TabListClasses["root"] = "h-tablist";
+    /**
+     * Class name of the content element
+     */
+    TabListClasses["content"] = "h-tablist-content";
+    /**
+     * Class name of the tabs element
+     */
+    TabListClasses["tabList"] = "h-tablist-tab-list";
+    /**
+     * Class name of the activebar element
+     */
+    TabListClasses["activeBar"] = "h-tablist-active-bar";
+    /**
+     * Class name of the previous button element
+     */
+    TabListClasses["prevButton"] = "h-tablist-prev-button";
+    /**
+     * Class name of the next button element
+     */
+    TabListClasses["nextButton"] = "h-tablist-next-button";
+})(TabListClasses || (TabListClasses = {}));
+
+const TABLIST_INSTANCE = new InjectionToken('TABLIST_INSTANCE');
+/**
+ * TabList is a helper component for Tabs component.
+ * @group Components
+ */
+class TabList extends BaseComponent {
+    componentName = 'TabList';
+    $pcTabList = inject(TABLIST_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    /**
+     * A template reference variable that represents the previous icon in a UI component.
+     * @type {TemplateRef<any> | undefined}
+     * @group Templates
+     */
+    prevIconTemplate = contentChild('previcon', { ...(ngDevMode ? { debugName: "prevIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * A template reference variable that represents the next icon in a UI component.
+     * @type {TemplateRef<any> | undefined}
+     * @group Templates
+     */
+    nextIconTemplate = contentChild('nexticon', { ...(ngDevMode ? { debugName: "nextIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    templates = contentChildren(HelixTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    content = viewChild.required('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    prevButton = viewChild.required('prevButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prevButton" }] : /* istanbul ignore next */ []));
+    nextButton = viewChild.required('nextButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextButton" }] : /* istanbul ignore next */ []));
+    inkbar = viewChild.required('inkbar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inkbar" }] : /* istanbul ignore next */ []));
+    tabs = viewChild.required('tabs', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    pcTabs = inject(forwardRef(() => Tabs));
+    isPrevButtonEnabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPrevButtonEnabled" }] : /* istanbul ignore next */ []));
+    isNextButtonEnabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNextButtonEnabled" }] : /* istanbul ignore next */ []));
+    resizeObserver;
+    showNavigators = computed(() => this.pcTabs.showNavigators(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showNavigators" }] : /* istanbul ignore next */ []));
+    tabindex = computed(() => this.pcTabs.tabindex(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    scrollable = computed(() => this.pcTabs.scrollable(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
+    _componentStyle = inject(TabListStyle);
+    constructor() {
+        super();
+        effect(() => {
+            this.pcTabs.value();
+            if (isPlatformBrowser(this.platformId)) {
+                setTimeout(() => {
+                    this.updateInkBar();
+                });
+            }
+        });
+    }
+    get prevButtonAriaLabel() {
+        return this.config?.translation?.aria?.previous;
+    }
+    get nextButtonAriaLabel() {
+        return this.config?.translation?.aria?.next;
+    }
+    onAfterViewInit() {
+        if (this.showNavigators() && isPlatformBrowser(this.platformId)) {
+            this.updateButtonState();
+            this.bindResizeObserver();
+        }
+    }
+    _prevIconTemplate;
+    _nextIconTemplate;
+    onAfterContentInit() {
+        this.templates()?.forEach((t) => {
+            switch (t.getType()) {
+                case 'previcon':
+                    this._prevIconTemplate = t.template;
+                    break;
+                case 'nexticon':
+                    this._nextIconTemplate = t.template;
+                    break;
+            }
+        });
+    }
+    onDestroy() {
+        this.unbindResizeObserver();
+    }
+    onScroll(event) {
+        this.showNavigators() && this.updateButtonState();
+        event.preventDefault();
+    }
+    onPrevButtonClick() {
+        const _content = this.content().nativeElement;
+        const width = getWidth(_content);
+        const pos = Math.abs(_content.scrollLeft) - width;
+        const scrollLeft = pos <= 0 ? 0 : pos;
+        _content.scrollLeft = isRTL(_content) ? -1 * scrollLeft : scrollLeft;
+    }
+    onNextButtonClick() {
+        const _content = this.content().nativeElement;
+        const width = getWidth(_content) - this.getVisibleButtonWidths();
+        const pos = _content.scrollLeft + width;
+        const lastPos = _content.scrollWidth - width;
+        const scrollLeft = pos >= lastPos ? lastPos : pos;
+        _content.scrollLeft = isRTL(_content) ? -1 * scrollLeft : scrollLeft;
+    }
+    updateButtonState() {
+        const _content = this.content()?.nativeElement;
+        const _list = this.el?.nativeElement;
+        const { scrollWidth, offsetWidth } = _content;
+        const scrollLeft = Math.abs(_content.scrollLeft);
+        const width = getWidth(_content);
+        this.isPrevButtonEnabled.set(scrollLeft !== 0);
+        this.isNextButtonEnabled.set(_list.offsetWidth >= offsetWidth && Math.abs(scrollLeft - scrollWidth + width) > 1);
+    }
+    updateInkBar() {
+        const _content = this.content()?.nativeElement;
+        const _inkbar = this.inkbar()?.nativeElement;
+        const _tabs = this.tabs()?.nativeElement;
+        const activeTab = findSingle(_content, '[data-pc-name="tab"][data-h-active="true"]');
+        if (_inkbar) {
+            _inkbar.style.width = getOuterWidth(activeTab) + 'px';
+            _inkbar.style.left = getOffset(activeTab).left - getOffset(_tabs).left + 'px';
+        }
+    }
+    getVisibleButtonWidths() {
+        const _prevBtn = this.prevButton()?.nativeElement;
+        const _nextBtn = this.nextButton()?.nativeElement;
+        return [_prevBtn, _nextBtn].reduce((acc, el) => (el ? acc + getWidth(el) : acc), 0);
+    }
+    bindResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => this.updateButtonState());
+        this.resizeObserver.observe(this.el.nativeElement);
+    }
+    unbindResizeObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.unobserve(this.el.nativeElement);
+            this.resizeObserver = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TabList, isStandalone: true, selector: "h-tablist", host: { properties: { "class": "cx(\"root\")" } }, providers: [TabListStyle, { provide: TABLIST_INSTANCE, useExisting: TabList }, { provide: PARENT_INSTANCE, useExisting: TabList }], queries: [{ propertyName: "prevIconTemplate", first: true, predicate: ["previcon"], isSignal: true }, { propertyName: "nextIconTemplate", first: true, predicate: ["nexticon"], isSignal: true }, { propertyName: "templates", predicate: HelixTemplate, isSignal: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "prevButton", first: true, predicate: ["prevButton"], descendants: true, isSignal: true }, { propertyName: "nextButton", first: true, predicate: ["nextButton"], descendants: true, isSignal: true }, { propertyName: "inkbar", first: true, predicate: ["inkbar"], descendants: true, isSignal: true }, { propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "@if (showNavigators() && isPrevButtonEnabled()) {\n    <button\n        type=\"button\"\n        #prevButton\n        hRipple\n        [hBind]=\"ptm('prevButton')\"\n        [class]=\"cx('prevButton')\"\n        [attr.aria-label]=\"prevButtonAriaLabel\"\n        [attr.tabindex]=\"tabindex()\"\n        [attr.data-pc-group-section]=\"'navigator'\"\n        (click)=\"onPrevButtonClick()\"\n    >\n        @if (prevIconTemplate() || _prevIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"prevIconTemplate() || _prevIconTemplate\" />\n        } @else {\n            <svg data-h-icon=\"chevron-left\" />\n        }\n    </button>\n}\n<div #content [hBind]=\"ptm('content')\" [class]=\"cx('content')\" (scroll)=\"onScroll($event)\">\n    <div #tabs [hBind]=\"ptm('tabList')\" [class]=\"cx('tabList')\" role=\"tablist\">\n        <ng-content />\n        <span #inkbar [hBind]=\"ptm('activeBar')\" role=\"presentation\" [class]=\"cx('activeBar')\"></span>\n    </div>\n</div>\n@if (showNavigators() && isNextButtonEnabled()) {\n    <button\n        type=\"button\"\n        #nextButton\n        hRipple\n        [hBind]=\"ptm('nextButton')\"\n        [class]=\"cx('nextButton')\"\n        [attr.aria-label]=\"nextButtonAriaLabel\"\n        [attr.tabindex]=\"tabindex()\"\n        [attr.data-pc-group-section]=\"'navigator'\"\n        (click)=\"onNextButtonClick()\"\n    >\n        @if (nextIconTemplate() || _nextIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"nextIconTemplate() || _nextIconTemplate\" />\n        } @else {\n            <svg data-h-icon=\"chevron-right\" />\n        }\n    </button>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChevronLeftIcon, selector: "[data-h-icon=\"chevron-left\"]" }, { kind: "component", type: ChevronRightIcon, selector: "[data-h-icon=\"chevron-right\"]" }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3.Ripple, selector: "[hRipple]" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[hBind]", inputs: ["hBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabList, decorators: [{
+            type: Component,
+            args: [{ selector: 'h-tablist', standalone: true, imports: [CommonModule, ChevronLeftIcon, ChevronRightIcon, RippleModule, SharedModule, BindModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'cx("root")'
+                    }, providers: [TabListStyle, { provide: TABLIST_INSTANCE, useExisting: TabList }, { provide: PARENT_INSTANCE, useExisting: TabList }], hostDirectives: [Bind], template: "@if (showNavigators() && isPrevButtonEnabled()) {\n    <button\n        type=\"button\"\n        #prevButton\n        hRipple\n        [hBind]=\"ptm('prevButton')\"\n        [class]=\"cx('prevButton')\"\n        [attr.aria-label]=\"prevButtonAriaLabel\"\n        [attr.tabindex]=\"tabindex()\"\n        [attr.data-pc-group-section]=\"'navigator'\"\n        (click)=\"onPrevButtonClick()\"\n    >\n        @if (prevIconTemplate() || _prevIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"prevIconTemplate() || _prevIconTemplate\" />\n        } @else {\n            <svg data-h-icon=\"chevron-left\" />\n        }\n    </button>\n}\n<div #content [hBind]=\"ptm('content')\" [class]=\"cx('content')\" (scroll)=\"onScroll($event)\">\n    <div #tabs [hBind]=\"ptm('tabList')\" [class]=\"cx('tabList')\" role=\"tablist\">\n        <ng-content />\n        <span #inkbar [hBind]=\"ptm('activeBar')\" role=\"presentation\" [class]=\"cx('activeBar')\"></span>\n    </div>\n</div>\n@if (showNavigators() && isNextButtonEnabled()) {\n    <button\n        type=\"button\"\n        #nextButton\n        hRipple\n        [hBind]=\"ptm('nextButton')\"\n        [class]=\"cx('nextButton')\"\n        [attr.aria-label]=\"nextButtonAriaLabel\"\n        [attr.tabindex]=\"tabindex()\"\n        [attr.data-pc-group-section]=\"'navigator'\"\n        (click)=\"onNextButtonClick()\"\n    >\n        @if (nextIconTemplate() || _nextIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"nextIconTemplate() || _nextIconTemplate\" />\n        } @else {\n            <svg data-h-icon=\"chevron-right\" />\n        }\n    </button>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { prevIconTemplate: [{ type: i0.ContentChild, args: ['previcon', { ...{ descendants: false }, isSignal: true }] }], nextIconTemplate: [{ type: i0.ContentChild, args: ['nexticon', { ...{ descendants: false }, isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], prevButton: [{ type: i0.ViewChild, args: ['prevButton', { isSignal: true }] }], nextButton: [{ type: i0.ViewChild, args: ['nextButton', { isSignal: true }] }], inkbar: [{ type: i0.ViewChild, args: ['inkbar', { isSignal: true }] }], tabs: [{ type: i0.ViewChild, args: ['tabs', { isSignal: true }] }] } });
+
+const TAB_INSTANCE = new InjectionToken('TAB_INSTANCE');
+/**
+ * Defines valid properties in Tab component.
+ * @group Components
+ */
+class Tab extends BaseComponent {
+    componentName = 'Tab';
+    $pcTab = inject(TAB_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    /**
+     * Value of tab.
+     * @defaultValue undefined
+     * @group Props
+     */
+    value = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the tab is disabled.
+     * @defaultValue false
+     * @group Props
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    pcTabs = inject(forwardRef(() => Tabs));
+    pcTabList = inject(forwardRef(() => TabList));
+    el = inject(ElementRef);
+    _componentStyle = inject(TabStyle);
+    ripple = computed(() => this.config.ripple(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ripple" }] : /* istanbul ignore next */ []));
+    id = computed(() => `${this.pcTabs.id()}_tab_${this.value()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaControls = computed(() => `${this.pcTabs.id()}_tabpanel_${this.value()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
+    active = computed(() => equals(this.pcTabs.value(), this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    tabindex = computed(() => (this.disabled() ? -1 : this.active() ? this.pcTabs.tabindex() : -1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    mutationObserver;
+    onFocus(event) {
+        if (!this.disabled()) {
+            this.pcTabs.selectOnFocus() && this.changeActiveValue();
+        }
+    }
+    onClick(event) {
+        if (!this.disabled()) {
+            this.changeActiveValue();
+        }
+    }
+    onKeyDown(event) {
+        switch (event.code) {
+            case 'ArrowRight':
+                this.onArrowRightKey(event);
+                break;
+            case 'ArrowLeft':
+                this.onArrowLeftKey(event);
+                break;
+            case 'Home':
+                this.onHomeKey(event);
+                break;
+            case 'End':
+                this.onEndKey(event);
+                break;
+            case 'PageDown':
+                this.onPageDownKey(event);
+                break;
+            case 'PageUp':
+                this.onPageUpKey(event);
+                break;
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Space':
+                this.onEnterKey(event);
+                break;
+            default:
+                break;
+        }
+        event.stopPropagation();
+    }
+    onAfterViewInit() {
+        this.bindMutationObserver();
+    }
+    onArrowRightKey(event) {
+        const nextTab = this.findNextTab(event.currentTarget);
+        nextTab ? this.changeFocusedTab(event, nextTab) : this.onHomeKey(event);
+        event.preventDefault();
+    }
+    onArrowLeftKey(event) {
+        const prevTab = this.findPrevTab(event.currentTarget);
+        prevTab ? this.changeFocusedTab(event, prevTab) : this.onEndKey(event);
+        event.preventDefault();
+    }
+    onHomeKey(event) {
+        const firstTab = this.findFirstTab();
+        this.changeFocusedTab(event, firstTab);
+        event.preventDefault();
+    }
+    onEndKey(event) {
+        const lastTab = this.findLastTab();
+        this.changeFocusedTab(event, lastTab);
+        event.preventDefault();
+    }
+    onPageDownKey(event) {
+        this.scrollInView(this.findLastTab());
+        event.preventDefault();
+    }
+    onPageUpKey(event) {
+        this.scrollInView(this.findFirstTab());
+        event.preventDefault();
+    }
+    onEnterKey(event) {
+        if (!this.disabled()) {
+            this.changeActiveValue();
+        }
+        event.preventDefault();
+    }
+    findNextTab(tabElement, selfCheck = false) {
+        const element = selfCheck ? tabElement : tabElement.nextElementSibling;
+        return element ? (getAttribute(element, 'data-h-disabled') || getAttribute(element, 'data-pc-section') === 'activebar' ? this.findNextTab(element) : element) : null;
+    }
+    findPrevTab(tabElement, selfCheck = false) {
+        const element = selfCheck ? tabElement : tabElement.previousElementSibling;
+        return element ? (getAttribute(element, 'data-h-disabled') || getAttribute(element, 'data-pc-section') === 'activebar' ? this.findPrevTab(element) : element) : null;
+    }
+    findFirstTab() {
+        return this.findNextTab(this.pcTabList?.tabs?.nativeElement?.firstElementChild, true);
+    }
+    findLastTab() {
+        return this.findPrevTab(this.pcTabList?.tabs?.nativeElement?.lastElementChild, true);
+    }
+    changeActiveValue() {
+        this.pcTabs.updateValue(this.value());
+    }
+    changeFocusedTab(event, element) {
+        focus(element);
+        this.scrollInView(element);
+    }
+    scrollInView(element) {
+        element?.scrollIntoView?.({ block: 'nearest' });
+    }
+    bindMutationObserver() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.mutationObserver = new MutationObserver((mutations) => {
+                mutations.forEach(() => {
+                    if (this.active()) {
+                        this.pcTabList?.updateInkBar();
+                    }
+                });
+            });
+            this.mutationObserver.observe(this.el.nativeElement, { childList: true, characterData: true, subtree: true });
+        }
+    }
+    unbindMutationObserver() {
+        this.mutationObserver?.disconnect();
+    }
+    onDestroy() {
+        if (this.mutationObserver) {
+            this.unbindMutationObserver();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tab, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: Tab, isStandalone: true, selector: "h-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focus": "onFocus($event)", "click": "onClick($event)", "keydown": "onKeyDown($event)" }, properties: { "class": "cx(\"root\")", "attr.id": "id()", "attr.aria-controls": "ariaControls()", "attr.role": "\"tab\"", "attr.aria-selected": "active()", "attr.aria-disabled": "disabled()", "attr.data-h-disabled": "disabled()", "attr.data-h-active": "active()", "attr.tabindex": "tabindex()" } }, providers: [TabStyle, { provide: TAB_INSTANCE, useExisting: Tab }, { provide: PARENT_INSTANCE, useExisting: Tab }], usesInheritance: true, hostDirectives: [{ directive: i3.Ripple }, { directive: i1.Bind }], ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Tab, decorators: [{
+            type: Component,
+            args: [{ selector: 'h-tab', standalone: true, imports: [CommonModule, SharedModule, BindModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'cx("root")',
+                        '[attr.id]': 'id()',
+                        '[attr.aria-controls]': 'ariaControls()',
+                        '[attr.role]': '"tab"',
+                        '[attr.aria-selected]': 'active()',
+                        '[attr.aria-disabled]': 'disabled()',
+                        '[attr.data-h-disabled]': 'disabled()',
+                        '[attr.data-h-active]': 'active()',
+                        '[attr.tabindex]': 'tabindex()',
+                        '(focus)': 'onFocus($event)',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeyDown($event)'
+                    }, hostDirectives: [Ripple, Bind], providers: [TabStyle, { provide: TAB_INSTANCE, useExisting: Tab }, { provide: PARENT_INSTANCE, useExisting: Tab }], template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+const classes$1 = {
+    root: ({ instance }) => [
+        'h-tabpanel',
+        {
+            'h-tabpanel-active': instance.active()
+        }
+    ]
+};
+class TabPanelStyle extends BaseStyle {
+    name = 'tabpanel';
+    classes = classes$1;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabPanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabPanelStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabPanelStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Tab is a helper component for Tabs component.
+ *
+ * [Live Demo](https://www.primeng.org/tabs/)
+ *
+ * @module tabstyle
+ *
+ */
+var TabPanelClasses;
+(function (TabPanelClasses) {
+    /**
+     * Class name of the root element
+     */
+    TabPanelClasses["root"] = "h-tabpanel";
+})(TabPanelClasses || (TabPanelClasses = {}));
+
+const TABPANEL_INSTANCE = new InjectionToken('TABPANEL_INSTANCE');
+/**
+ * TabPanel is a helper component for Tabs component.
+ * @group Components
+ */
+class TabPanel extends BaseComponent {
+    componentName = 'TabPanel';
+    $pcTabPanel = inject(TABPANEL_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    pcTabs = inject(forwardRef(() => Tabs));
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    /**
+     * When enabled, tab is not rendered until activation.
+     * @type boolean
+     * @defaultValue false
+     * @group Props
+     */
+    lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Value of the active tab.
+     * @defaultValue undefined
+     * @group Props
+     */
+    value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Template for initializing complex content when lazy is enabled.
+     * @group Templates
+     */
+    content = contentChild('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    id = computed(() => `${this.pcTabs.id()}_tabpanel_${this.value()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabelledby = computed(() => `${this.pcTabs.id()}_tab_${this.value()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    active = computed(() => equals(this.pcTabs.value(), this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    isLazyEnabled = computed(() => this.pcTabs.lazy() || this.lazy(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLazyEnabled" }] : /* istanbul ignore next */ []));
+    hasBeenRendered = false;
+    shouldRender = computed(() => {
+        if (!this.isLazyEnabled() || this.hasBeenRendered) {
+            return true;
+        }
+        if (this.active()) {
+            this.hasBeenRendered = true;
+            return true;
+        }
+        return false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
+    _componentStyle = inject(TabPanelStyle);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TabPanel, isStandalone: true, selector: "h-tabpanel", inputs: { lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "cx(\"root\")", "attr.id": "id()", "attr.role": "\"tabpanel\"", "attr.aria-labelledby": "ariaLabelledby()", "attr.data-h-active": "active()", "hidden": "!active()" } }, providers: [TabPanelStyle, { provide: TABPANEL_INSTANCE, useExisting: TabPanel }, { provide: PARENT_INSTANCE, useExisting: TabPanel }], queries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "<ng-template #defaultContent>\n    <ng-content />\n</ng-template>\n\n@if (shouldRender()) {\n    <ng-container *ngTemplateOutlet=\"content() ? content() : defaultContent\" />\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'h-tabpanel', standalone: true, imports: [NgTemplateOutlet, BindModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [TabPanelStyle, { provide: TABPANEL_INSTANCE, useExisting: TabPanel }, { provide: PARENT_INSTANCE, useExisting: TabPanel }], host: {
+                        '[class]': 'cx("root")',
+                        '[attr.id]': 'id()',
+                        '[attr.role]': '"tabpanel"',
+                        '[attr.aria-labelledby]': 'ariaLabelledby()',
+                        '[attr.data-h-active]': 'active()',
+                        '[hidden]': '!active()'
+                    }, hostDirectives: [Bind], template: "<ng-template #defaultContent>\n    <ng-content />\n</ng-template>\n\n@if (shouldRender()) {\n    <ng-container *ngTemplateOutlet=\"content() ? content() : defaultContent\" />\n}\n" }]
+        }], propDecorators: { lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], content: [{ type: i0.ContentChild, args: ['content', { isSignal: true }] }] } });
+
+const classes = {
+    root: 'h-tabpanels'
+};
+class TabPanelsStyle extends BaseStyle {
+    name = 'tabpanels';
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabPanelsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabPanelsStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabPanelsStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Tab is a helper component for Tabs component.
+ *
+ * [Live Demo](https://www.primeng.org/tabs/)
+ *
+ * @module tabpanelstyle
+ *
+ */
+var TabPanelsClasses;
+(function (TabPanelsClasses) {
+    /**
+     * Class name of the root element
+     */
+    TabPanelsClasses["root"] = "h-tabpanels";
+})(TabPanelsClasses || (TabPanelsClasses = {}));
+
+const TABPANELS_INSTANCE = new InjectionToken('TABPANELS_INSTANCE');
+/**
+ * TabPanels is a helper component for Tabs component.
+ * @group Components
+ */
+class TabPanels extends BaseComponent {
+    componentName = 'TabPanels';
+    $pcTabPanels = inject(TABPANELS_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    _componentStyle = inject(TabPanelsStyle);
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabPanels, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: TabPanels, isStandalone: true, selector: "h-tabpanels", host: { properties: { "class": "cx(\"root\")", "attr.role": "\"presentation\"" } }, providers: [TabPanelsStyle, { provide: TABPANELS_INSTANCE, useExisting: TabPanels }, { provide: PARENT_INSTANCE, useExisting: TabPanels }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabPanels, decorators: [{
+            type: Component,
+            args: [{ selector: 'h-tabpanels', standalone: true, imports: [CommonModule, BindModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'cx("root")',
+                        '[attr.role]': '"presentation"'
+                    }, providers: [TabPanelsStyle, { provide: TABPANELS_INSTANCE, useExisting: TabPanels }, { provide: PARENT_INSTANCE, useExisting: TabPanels }], hostDirectives: [Bind], template: "<ng-content></ng-content>\n" }]
+        }] });
+
+class TabsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: TabsModule, imports: [Tabs, TabPanels, TabPanel, TabList, Tab, BindModule], exports: [Tabs, TabPanels, TabPanel, TabList, Tab, BindModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsModule, imports: [Tabs, TabPanels, TabPanel, TabList, Tab, BindModule, BindModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Tabs, TabPanels, TabPanel, TabList, Tab, BindModule],
+                    exports: [Tabs, TabPanels, TabPanel, TabList, Tab, BindModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Tab, TabList, TabPanel, TabPanels, Tabs, TabsClasses, TabsModule, TabsStyle };
+//# sourceMappingURL=gravionlabs-helix-core-tabs.mjs.map