import * as i0 from '@angular/core';
import { inject, ViewContainerRef, Directive, EventEmitter, HostListener, Input, Output, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, Renderer2, input, viewChild, NgZone, PLATFORM_ID, signal, effect, HostBinding, ContentChildren, NgModule } from '@angular/core';
import { MXInteractiveComponent, AXComponent, AXEvent, MXBaseComponent } from '@acorex/cdk/common';
import { NgTemplateOutlet, isPlatformBrowser, CommonModule } from '@angular/common';
import { AXDecoratorModule } from '@acorex/components/decorators';
import { PortalModule } from '@angular/cdk/portal';

class AXTabContentDirective {
    constructor() {
        this._viewContainerRef = inject(ViewContainerRef);
    }
    get portal() {
        return this._portal;
    }
    set portal(v) {
        if (v) {
            this._portal = v;
            this._viewContainerRef.clear();
            this._viewContainerRef.createEmbeddedView(v, null, 0);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: AXTabContentDirective, isStandalone: true, selector: "[axTabContent]", inputs: { portal: ["axTabContent", "portal"] }, exportAs: ["axTabContent"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTabContentDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[axTabContent]',
                    exportAs: 'axTabContent',
                    inputs: ['portal: axTabContent'],
                }]
        }] });

/**
 * @category
 *  Represents an individual tab item in a tab component.
 */
class AXTabItemComponent extends MXInteractiveComponent {
    constructor() {
        super(...arguments);
        /**
         * Emits an event when the `active` state of the component changes.
         * @event
         */
        this.activeChange = new EventEmitter();
        /**
         * Emits an event when the component is clicked.
         * @event
         */
        this.onClick = new EventEmitter();
        /** @ignore */
        this._active = false;
    }
    /**
     * Gets or sets the component's active state, controlling its behavior and appearance.
     * @param value {boolean}
     */
    get active() {
        return this._active;
    }
    set active(value) {
        this.setOption({
            name: 'active',
            value,
            afterCallback: () => {
                this.cdr.markForCheck();
            },
        });
    }
    /**
     * @ignore
     */
    __hostClick(e) {
        if (!this.disabled) {
            this.getHostElement().scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
            this.onClick.emit({
                component: this,
                htmlElement: this.getHostElement(),
                nativeEvent: e,
            });
        }
    }
    /**
     * @ignore
     */
    internalOptionChanged(option) {
        //TODO: change to hostbind
        const classListRef = this.getHostElement().classList;
        if (option.name == 'disabled') {
            option.value ? classListRef.add('ax-state-disabled') : classListRef.remove('ax-state-disabled');
        }
        if (option.name == 'active') {
            option.value ? classListRef.add('ax-state-active') : classListRef.remove('ax-state-active');
        }
    }
    /**
     * Gets the component's position and size statistics.
     *
     * @returns object with width, height, left, and top properties
     */
    getStats() {
        return {
            width: this.getHostElement().clientWidth,
            height: this.getHostElement().clientHeight,
            left: this.getHostElement().offsetLeft,
            top: this.getHostElement().offsetTop,
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXTabItemComponent, isStandalone: true, selector: "ax-tab-item", inputs: { disabled: "disabled", text: "text", key: "key", headerTemplate: "headerTemplate", active: "active" }, outputs: { disabledChange: "disabledChange", onClick: "onClick", onBlur: "onBlur", onFocus: "onFocus", activeChange: "activeChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "click": "__hostClick($event)" } }, providers: [{ provide: AXComponent, useExisting: AXTabItemComponent }], viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
    @if (headerTemplate) {
      <ng-container
        [ngTemplateOutlet]="headerTemplate"
        [ngTemplateOutletContext]="{
          $implicit: {
            text: this.text,
            key: this.key,
            active: this.active,
            disabled: this.disabled,
          },
        }"
      ></ng-container>
    } @else {
      <div>
        <ng-content select="ax-prefix"></ng-content>
        <div class="ax-tab-item-text">{{ text }}</div>
      </div>
      <ng-content select="ax-suffix"></ng-content>
    }
    <ng-template #content>
      <ng-content select="ax-content"> </ng-content>
    </ng-template>
  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTabItemComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'ax-tab-item',
                    template: `
    @if (headerTemplate) {
      <ng-container
        [ngTemplateOutlet]="headerTemplate"
        [ngTemplateOutletContext]="{
          $implicit: {
            text: this.text,
            key: this.key,
            active: this.active,
            disabled: this.disabled,
          },
        }"
      ></ng-container>
    } @else {
      <div>
        <ng-content select="ax-prefix"></ng-content>
        <div class="ax-tab-item-text">{{ text }}</div>
      </div>
      <ng-content select="ax-suffix"></ng-content>
    }
    <ng-template #content>
      <ng-content select="ax-content"> </ng-content>
    </ng-template>
  `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    inputs: ['disabled'],
                    outputs: ['disabledChange', 'onClick', 'onBlur', 'onFocus'],
                    host: { ngSkipHydration: 'true' },
                    imports: [NgTemplateOutlet],
                    providers: [{ provide: AXComponent, useExisting: AXTabItemComponent }],
                }]
        }], propDecorators: { text: [{
                type: Input
            }], key: [{
                type: Input
            }], template: [{
                type: ViewChild,
                args: ['content']
            }], headerTemplate: [{
                type: Input
            }], activeChange: [{
                type: Output
            }], onClick: [{
                type: Output
            }], active: [{
                type: Input
            }], __hostClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

class AXTabStripChangedEvent extends AXEvent {
}

/**
 * @category
 * A component that serves as a container for tab items.
 */
class AXTabsComponent extends MXBaseComponent {
    constructor() {
        super(...arguments);
        this.renderer = inject(Renderer2);
        /**
         * Sets the appearance style of the tab component.
         *  @defaultValue 'default'
         */
        this.look = input('default', ...(ngDevMode ? [{ debugName: "look" }] : []));
        /**
         * Specifies the position of the tab component.
         * @defaultValue 'bottom'
         */
        this.location = input('bottom', ...(ngDevMode ? [{ debugName: "location" }] : []));
        /**
         * @defaultValue 'false'
         * Specifies whether the component should resize to fit its parent container.
         */
        this.fitParent = false;
        /**
         * @defaultValue 'false'
         * Applies a minimum width constraint to the component.
         */
        this.minWidth = false;
        this.indicator = viewChild('indicator', ...(ngDevMode ? [{ debugName: "indicator" }] : []));
        this.zone = inject(NgZone);
        this.platformId = inject(PLATFORM_ID);
        /** @ignore */
        this._isUserInteraction = false;
        this.activeTab = signal(null, ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
        this.#tabChange = effect(() => {
            if (this.activeTab() && this.location()) {
                if (this.look() === 'with-line-color' || this.look() === 'with-line') {
                    setTimeout(() => {
                        this.setIndicatorPosition(this.activeTab());
                    });
                }
            }
        }, ...(ngDevMode ? [{ debugName: "#tabChange" }] : []));
        /**
         * @event
         */
        this.onActiveTabChanged = new EventEmitter();
    }
    get items() {
        return this._contentTabs.toArray();
    }
    /** @ignore */
    get selectedIndex() {
        return this.items.indexOf(this._selectedItem);
    }
    /** @ignore */
    get selectedItem() {
        return this._selectedItem;
    }
    #tabChange;
    /** @ignore */
    get __hostClass() {
        const cssClasses = [];
        cssClasses.push(`ax-${this.look()}`);
        cssClasses.push(`ax-${this.location()}`);
        if (this.fitParent)
            cssClasses.push(`ax-tabs-fit`);
        return cssClasses;
    }
    /** @ignore */
    ngAfterContentInit() {
        this._contentTabs.changes.subscribe(() => {
            this._bindOnClickEvent();
        });
    }
    /** @ignore */
    ngAfterViewInit() {
        this._bindOnClickEvent();
        if (isPlatformBrowser(this.platformId)) {
            this.zone.runOutsideAngular(() => {
                this.changes = new ResizeObserver((entries) => {
                    const activeTab = this.activeTab();
                    if (entries[0].contentRect.width && activeTab) {
                        this.renderer.setStyle(this.indicator().nativeElement, 'transition', 'none');
                        this.setIndicatorPosition(activeTab);
                        this.renderer.removeStyle(this.indicator().nativeElement, 'transition');
                    }
                });
                const activeTab = this.activeTab();
                if (activeTab)
                    this.changes.observe(activeTab.getHostElement());
                this.changes.observe(this.getHostElement());
            });
        }
    }
    ngOnDestroy() {
        this.changes?.disconnect();
    }
    /** @ignore */
    _bindOnClickEvent() {
        const selected = this.items.find((c) => c.active) || this.items[0];
        this.select(selected);
        this.items.forEach((c) => {
            if (!c.onClick.length) {
                c.onClick.subscribe((t) => {
                    this._isUserInteraction = t.nativeEvent?.isTrusted;
                    this.select(c);
                });
            }
        });
    }
    /**
     * Activates the specified tab and updates the content.
     *
     * @param tab - The tab to select, either by index (number) or by component instance
     */
    select(tab) {
        const tabItem = typeof tab == 'number' ? this.items[tab] : tab;
        this.activeTab.set(tabItem);
        //
        if (!tabItem || this.selectedItem == tabItem)
            return;
        this._selectedItem = tabItem;
        //
        this.items.forEach((c) => (c.active = false));
        tabItem.active = true;
        if (this.content) {
            this.content.portal = tabItem.template;
        }
        this.cdr.markForCheck();
        this.onActiveTabChanged.emit({
            component: this,
            isUserInteraction: this._isUserInteraction,
            tab: tabItem,
            index: this.selectedIndex,
        });
        this._isUserInteraction = false;
    }
    setIndicatorPosition(tabItem) {
        const indicatorStyle = this.indicator().nativeElement.style;
        const itemStats = tabItem.getStats();
        if (this.location() === 'top' || this.location() === 'bottom') {
            indicatorStyle.width = `${itemStats.width}px`;
            indicatorStyle.height = `var(--ax-comp-tabs-indicator-size)`;
            indicatorStyle.left = `${itemStats.left}px`;
            indicatorStyle.right = `unset`;
            if (this.location() === 'top') {
                indicatorStyle.top = `0px`;
                indicatorStyle.bottom = `unset`;
            }
            if (this.location() === 'bottom') {
                indicatorStyle.top = `unset`;
                indicatorStyle.bottom = `0px`;
            }
        }
        if (this.location() === 'start' || this.location() === 'end') {
            indicatorStyle.width = ` var(--ax-comp-tabs-indicator-size)`;
            indicatorStyle.height = `${itemStats.height}px`;
            indicatorStyle.top = `${itemStats.top}px`;
            indicatorStyle.bottom = `unset`;
            if (this.location() === 'start') {
                indicatorStyle.insetInlineStart = `0px`;
                indicatorStyle.insetInlineEnd = `unset`;
            }
            if (this.location() === 'end') {
                indicatorStyle.insetInlineStart = `unset`;
                indicatorStyle.insetInlineEnd = `0px`;
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXTabsComponent, isStandalone: true, selector: "ax-tabs", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, fitParent: { classPropertyName: "fitParent", publicName: "fitParent", isSignal: false, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onActiveTabChanged: "onActiveTabChanged" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXTabsComponent }], queries: [{ propertyName: "_contentTabs", predicate: AXTabItemComponent }], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<div class="ax-tabs-scroll-area">
    <ng-content select="ax-tab-item"></ng-content><span class="ax-tab-indicator" #indicator></span>
  </div>`, isInline: true, styles: ["ax-tabs{--ax-comp-tabs-indicator-size: 2px}ax-tabs.ax-classic{--ax-comp-tabs-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-surface)}ax-tabs.ax-classic ax-tab-item{border-width:var(--ax-comp-tabs-border-width, 1px);border-color:rgba(var(--ax-comp-tabs-border-color, var(--ax-sys-color-border-lightest-surface)))}ax-tabs.ax-classic.ax-top,ax-tabs.ax-classic.ax-bottom{padding-inline:1rem}ax-tabs.ax-classic.ax-start,ax-tabs.ax-classic.ax-end{padding-block:.5rem}ax-tabs.ax-classic.ax-top{border-top-width:var(--ax-comp-tabs-border-width, 1px)}ax-tabs.ax-classic.ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent}ax-tabs.ax-classic.ax-bottom{border-bottom-width:var(--ax-comp-tabs-border-width, 1px)}ax-tabs.ax-classic.ax-bottom ax-tab-item{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}ax-tabs.ax-classic.ax-start{border-inline-start-width:var(--ax-comp-tabs-border-width, 1px)}ax-tabs.ax-classic.ax-start ax-tab-item{border-end-start-radius:0;border-start-start-radius:0;border-inline-start-color:transparent}ax-tabs.ax-classic.ax-end{border-inline-end-width:var(--ax-comp-tabs-border-width, 1px)}ax-tabs.ax-classic.ax-end ax-tab-item{border-end-end-radius:0;border-start-end-radius:0;border-inline-end-color:transparent}ax-tabs.ax-default{--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lightest-surface);padding:.25rem;background-color:rgba(var(--ax-sys-color-lighter-surface));border-radius:var(--ax-comp-tabs-default-border-radius, calc(var(--ax-sys-border-radius) * 1.25))}ax-tabs.ax-default ax-tab-item.ax-state-active{--ax-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--ax-shadow-colored: 0 1px 3px 0 var(--ax-shadow-color), 0 1px 2px -1px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow)}.ax-dark ax-tabs.ax-default{--ax-comp-tabs-active-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-darkest-surface)}ax-tabs.ax-pills-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .2}ax-tabs.ax-pills{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lighter-surface)}ax-tabs.ax-with-line-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .05;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .1}ax-tabs.ax-with-line,ax-tabs.ax-with-line-color{--ax-comp-tabs-indicator-color: var(--ax-sys-color-primary-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-primary-surface)}ax-tabs.ax-with-line ax-tab-item.ax-state-active ax-icon,ax-tabs.ax-with-line-color ax-tab-item.ax-state-active ax-icon{opacity:1!important}ax-tabs.ax-with-line .ax-tab-indicator,ax-tabs.ax-with-line-color .ax-tab-indicator{display:block;position:absolute;background-color:rgba(var(--ax-comp-tabs-indicator-color));z-index:1}ax-tabs.ax-with-line.ax-top .ax-tab-indicator,ax-tabs.ax-with-line.ax-bottom .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-top .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-bottom .ax-tab-indicator{height:3px;width:0;transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);transition-property:width,left}ax-tabs.ax-with-line.ax-start .ax-tab-indicator,ax-tabs.ax-with-line.ax-end .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-start .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-end .ax-tab-indicator{height:0;transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);transition-property:height,top}ax-tabs.ax-with-line.ax-start ax-tab-item,ax-tabs.ax-with-line.ax-end ax-tab-item,ax-tabs.ax-with-line-color.ax-start ax-tab-item,ax-tabs.ax-with-line-color.ax-end ax-tab-item{padding:.625rem .75rem}ax-tabs.ax-with-line.ax-top .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-top .ax-tab-indicator{top:0}ax-tabs.ax-with-line.ax-top .ax-tabs-scroll-area,ax-tabs.ax-with-line-color.ax-top .ax-tabs-scroll-area{box-shadow:inset 0 var(--ax-comp-tabs-indicator-size) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-with-line.ax-top ax-tab-item,ax-tabs.ax-with-line-color.ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent;border-top-width:var(--ax-comp-tabs-indicator-size)}ax-tabs.ax-with-line.ax-bottom .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-bottom .ax-tab-indicator{bottom:0}ax-tabs.ax-with-line.ax-bottom .ax-tabs-scroll-area,ax-tabs.ax-with-line-color.ax-bottom .ax-tabs-scroll-area{box-shadow:inset 0 calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-with-line.ax-bottom ax-tab-item,ax-tabs.ax-with-line-color.ax-bottom ax-tab-item{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent;border-bottom-width:var(--ax-comp-tabs-indicator-size)}ax-tabs.ax-with-line.ax-start .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-start .ax-tab-indicator{inset-inline-start:0}ax-tabs.ax-with-line.ax-start .ax-tabs-scroll-area,ax-tabs.ax-with-line-color.ax-start .ax-tabs-scroll-area{box-shadow:inset var(--ax-comp-tabs-indicator-size) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-with-line.ax-start ax-tab-item,ax-tabs.ax-with-line-color.ax-start ax-tab-item{border-end-start-radius:0;border-start-start-radius:0;border-inline-start-color:transparent;border-inline-start-width:var(--ax-comp-tabs-indicator-size)}ax-tabs.ax-with-line.ax-end .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-end .ax-tab-indicator{inset-inline-end:0}ax-tabs.ax-with-line.ax-end .ax-tabs-scroll-area,ax-tabs.ax-with-line-color.ax-end .ax-tabs-scroll-area{box-shadow:inset calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-with-line.ax-end ax-tab-item,ax-tabs.ax-with-line-color.ax-end ax-tab-item{border-end-end-radius:0;border-start-end-radius:0;border-inline-end-color:transparent;border-inline-end-width:var(--ax-comp-tabs-indicator-size)}ax-tabs.ax-with-line ax-icon,ax-tabs.ax-with-line-color ax-icon{opacity:.6}ax-tabs.ax-with-line ax-suffix,ax-tabs.ax-with-line-color ax-suffix{padding-inline-end:.5rem}ax-tabs.ax-with-line ax-prefix,ax-tabs.ax-with-line-color ax-prefix{padding-inline-start:.5rem}ax-tabs{gap:.5rem;width:100%;display:flex;position:relative;font-weight:var(--ax-comp-tabs-font-weight, 500)}ax-tabs .ax-tabs-scroll-area{flex:none;gap:.5rem;min-width:100%;position:relative;display:inline-flex}ax-tabs .ax-tab-indicator{display:none}ax-tabs ax-tab-item{display:flex;justify-content:space-between;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding:.5rem .75rem;font-size:var(--ax-comp-tabs-font-size, .875rem);line-height:var(--ax-comp-tabs-line-height, 1.25rem);color:rgba(var(--ax-comp-tabs-text-color, inherit));background-color:rgba(var(--ax-comp-tabs-bg-color, inherit));border-radius:var(--ax-comp-tabs-default-border-radius, var(--ax-sys-border-radius));transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);transition-property:color,background-color}ax-tabs ax-tab-item:hover{color:rgba(var(--ax-comp-tabs-hover-text-color, inherit));background-color:rgba(var(--ax-comp-tabs-hover-bg-color, inherit))}ax-tabs ax-tab-item.ax-state-active{color:rgba(var(--ax-comp-tabs-active-text-color, inherit));background-color:rgba(var(--ax-comp-tabs-active-bg-color, inherit))}ax-tabs ax-tab-item.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-tabs-disabled-opacity, .5)}ax-tabs ax-tab-item .ax-tab-item-text{display:inline-flex;flex-wrap:nowrap;padding-left:.5rem;padding-right:.5rem}ax-tabs ax-tab-item .ax-tab-item-text{white-space:nowrap}ax-tabs.ax-tabs-fit ax-tab-item{flex:1 1 0%}ax-tabs.ax-top,ax-tabs.ax-bottom{flex-direction:row;overflow-x:auto;overflow-y:hidden}ax-tabs.ax-top .ax-tabs-scroll-area,ax-tabs.ax-bottom .ax-tabs-scroll-area{flex-direction:row}ax-tabs.ax-top ax-tab-item,ax-tabs.ax-bottom ax-tab-item{align-items:center;justify-content:center}ax-tabs.ax-start,ax-tabs.ax-end{flex-direction:column;overflow-y:auto;overflow-x:hidden}ax-tabs.ax-start .ax-tabs-scroll-area,ax-tabs.ax-end .ax-tabs-scroll-area{flex-direction:column}ax-tabs.ax-start ax-tab-item,ax-tabs.ax-end ax-tab-item{width:100%}ax-tabs.ax-start{align-items:flex-start}ax-tabs.ax-end{align-items:flex-end}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTabsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-tabs', template: `<div class="ax-tabs-scroll-area">
    <ng-content select="ax-tab-item"></ng-content><span class="ax-tab-indicator" #indicator></span>
  </div>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXTabsComponent }], styles: ["ax-tabs{--ax-comp-tabs-indicator-size: 2px}ax-tabs.ax-classic{--ax-comp-tabs-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-surface)}ax-tabs.ax-classic ax-tab-item{border-width:var(--ax-comp-tabs-border-width, 1px);border-color:rgba(var(--ax-comp-tabs-border-color, var(--ax-sys-color-border-lightest-surface)))}ax-tabs.ax-classic.ax-top,ax-tabs.ax-classic.ax-bottom{padding-inline:1rem}ax-tabs.ax-classic.ax-start,ax-tabs.ax-classic.ax-end{padding-block:.5rem}ax-tabs.ax-classic.ax-top{border-top-width:var(--ax-comp-tabs-border-width, 1px)}ax-tabs.ax-classic.ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent}ax-tabs.ax-classic.ax-bottom{border-bottom-width:var(--ax-comp-tabs-border-width, 1px)}ax-tabs.ax-classic.ax-bottom ax-tab-item{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}ax-tabs.ax-classic.ax-start{border-inline-start-width:var(--ax-comp-tabs-border-width, 1px)}ax-tabs.ax-classic.ax-start ax-tab-item{border-end-start-radius:0;border-start-start-radius:0;border-inline-start-color:transparent}ax-tabs.ax-classic.ax-end{border-inline-end-width:var(--ax-comp-tabs-border-width, 1px)}ax-tabs.ax-classic.ax-end ax-tab-item{border-end-end-radius:0;border-start-end-radius:0;border-inline-end-color:transparent}ax-tabs.ax-default{--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lightest-surface);padding:.25rem;background-color:rgba(var(--ax-sys-color-lighter-surface));border-radius:var(--ax-comp-tabs-default-border-radius, calc(var(--ax-sys-border-radius) * 1.25))}ax-tabs.ax-default ax-tab-item.ax-state-active{--ax-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--ax-shadow-colored: 0 1px 3px 0 var(--ax-shadow-color), 0 1px 2px -1px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow)}.ax-dark ax-tabs.ax-default{--ax-comp-tabs-active-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-darkest-surface)}ax-tabs.ax-pills-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .2}ax-tabs.ax-pills{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-hover-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-tabs-active-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-on-lighter-surface)}ax-tabs.ax-with-line-color{--ax-comp-tabs-hover-bg-color: var(--ax-sys-color-primary-surface), .05;--ax-comp-tabs-active-bg-color: var(--ax-sys-color-primary-surface), .1}ax-tabs.ax-with-line,ax-tabs.ax-with-line-color{--ax-comp-tabs-indicator-color: var(--ax-sys-color-primary-surface);--ax-comp-tabs-active-text-color: var(--ax-sys-color-primary-surface)}ax-tabs.ax-with-line ax-tab-item.ax-state-active ax-icon,ax-tabs.ax-with-line-color ax-tab-item.ax-state-active ax-icon{opacity:1!important}ax-tabs.ax-with-line .ax-tab-indicator,ax-tabs.ax-with-line-color .ax-tab-indicator{display:block;position:absolute;background-color:rgba(var(--ax-comp-tabs-indicator-color));z-index:1}ax-tabs.ax-with-line.ax-top .ax-tab-indicator,ax-tabs.ax-with-line.ax-bottom .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-top .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-bottom .ax-tab-indicator{height:3px;width:0;transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);transition-property:width,left}ax-tabs.ax-with-line.ax-start .ax-tab-indicator,ax-tabs.ax-with-line.ax-end .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-start .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-end .ax-tab-indicator{height:0;transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);transition-property:height,top}ax-tabs.ax-with-line.ax-start ax-tab-item,ax-tabs.ax-with-line.ax-end ax-tab-item,ax-tabs.ax-with-line-color.ax-start ax-tab-item,ax-tabs.ax-with-line-color.ax-end ax-tab-item{padding:.625rem .75rem}ax-tabs.ax-with-line.ax-top .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-top .ax-tab-indicator{top:0}ax-tabs.ax-with-line.ax-top .ax-tabs-scroll-area,ax-tabs.ax-with-line-color.ax-top .ax-tabs-scroll-area{box-shadow:inset 0 var(--ax-comp-tabs-indicator-size) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-with-line.ax-top ax-tab-item,ax-tabs.ax-with-line-color.ax-top ax-tab-item{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent;border-top-width:var(--ax-comp-tabs-indicator-size)}ax-tabs.ax-with-line.ax-bottom .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-bottom .ax-tab-indicator{bottom:0}ax-tabs.ax-with-line.ax-bottom .ax-tabs-scroll-area,ax-tabs.ax-with-line-color.ax-bottom .ax-tabs-scroll-area{box-shadow:inset 0 calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-with-line.ax-bottom ax-tab-item,ax-tabs.ax-with-line-color.ax-bottom ax-tab-item{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent;border-bottom-width:var(--ax-comp-tabs-indicator-size)}ax-tabs.ax-with-line.ax-start .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-start .ax-tab-indicator{inset-inline-start:0}ax-tabs.ax-with-line.ax-start .ax-tabs-scroll-area,ax-tabs.ax-with-line-color.ax-start .ax-tabs-scroll-area{box-shadow:inset var(--ax-comp-tabs-indicator-size) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-with-line.ax-start ax-tab-item,ax-tabs.ax-with-line-color.ax-start ax-tab-item{border-end-start-radius:0;border-start-start-radius:0;border-inline-start-color:transparent;border-inline-start-width:var(--ax-comp-tabs-indicator-size)}ax-tabs.ax-with-line.ax-end .ax-tab-indicator,ax-tabs.ax-with-line-color.ax-end .ax-tab-indicator{inset-inline-end:0}ax-tabs.ax-with-line.ax-end .ax-tabs-scroll-area,ax-tabs.ax-with-line-color.ax-end .ax-tabs-scroll-area{box-shadow:inset calc(var(--ax-comp-tabs-indicator-size) * -1) 0 0 0 rgba(var(--ax-sys-color-border-lightest-surface))}ax-tabs.ax-with-line.ax-end ax-tab-item,ax-tabs.ax-with-line-color.ax-end ax-tab-item{border-end-end-radius:0;border-start-end-radius:0;border-inline-end-color:transparent;border-inline-end-width:var(--ax-comp-tabs-indicator-size)}ax-tabs.ax-with-line ax-icon,ax-tabs.ax-with-line-color ax-icon{opacity:.6}ax-tabs.ax-with-line ax-suffix,ax-tabs.ax-with-line-color ax-suffix{padding-inline-end:.5rem}ax-tabs.ax-with-line ax-prefix,ax-tabs.ax-with-line-color ax-prefix{padding-inline-start:.5rem}ax-tabs{gap:.5rem;width:100%;display:flex;position:relative;font-weight:var(--ax-comp-tabs-font-weight, 500)}ax-tabs .ax-tabs-scroll-area{flex:none;gap:.5rem;min-width:100%;position:relative;display:inline-flex}ax-tabs .ax-tab-indicator{display:none}ax-tabs ax-tab-item{display:flex;justify-content:space-between;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding:.5rem .75rem;font-size:var(--ax-comp-tabs-font-size, .875rem);line-height:var(--ax-comp-tabs-line-height, 1.25rem);color:rgba(var(--ax-comp-tabs-text-color, inherit));background-color:rgba(var(--ax-comp-tabs-bg-color, inherit));border-radius:var(--ax-comp-tabs-default-border-radius, var(--ax-sys-border-radius));transition-timing-function:var(--ax-sys-transition-timing-function);transition-duration:var(--ax-sys-transition-duration);transition-property:color,background-color}ax-tabs ax-tab-item:hover{color:rgba(var(--ax-comp-tabs-hover-text-color, inherit));background-color:rgba(var(--ax-comp-tabs-hover-bg-color, inherit))}ax-tabs ax-tab-item.ax-state-active{color:rgba(var(--ax-comp-tabs-active-text-color, inherit));background-color:rgba(var(--ax-comp-tabs-active-bg-color, inherit))}ax-tabs ax-tab-item.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-tabs-disabled-opacity, .5)}ax-tabs ax-tab-item .ax-tab-item-text{display:inline-flex;flex-wrap:nowrap;padding-left:.5rem;padding-right:.5rem}ax-tabs ax-tab-item .ax-tab-item-text{white-space:nowrap}ax-tabs.ax-tabs-fit ax-tab-item{flex:1 1 0%}ax-tabs.ax-top,ax-tabs.ax-bottom{flex-direction:row;overflow-x:auto;overflow-y:hidden}ax-tabs.ax-top .ax-tabs-scroll-area,ax-tabs.ax-bottom .ax-tabs-scroll-area{flex-direction:row}ax-tabs.ax-top ax-tab-item,ax-tabs.ax-bottom ax-tab-item{align-items:center;justify-content:center}ax-tabs.ax-start,ax-tabs.ax-end{flex-direction:column;overflow-y:auto;overflow-x:hidden}ax-tabs.ax-start .ax-tabs-scroll-area,ax-tabs.ax-end .ax-tabs-scroll-area{flex-direction:column}ax-tabs.ax-start ax-tab-item,ax-tabs.ax-end ax-tab-item{width:100%}ax-tabs.ax-start{align-items:flex-start}ax-tabs.ax-end{align-items:flex-end}\n"] }]
        }], propDecorators: { _contentTabs: [{
                type: ContentChildren,
                args: [AXTabItemComponent]
            }], fitParent: [{
                type: Input
            }], minWidth: [{
                type: Input
            }], content: [{
                type: Input
            }], onActiveTabChanged: [{
                type: Output
            }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

const COMPONENT = [AXTabsComponent, AXTabItemComponent, AXTabContentDirective];
const MODULES = [CommonModule, PortalModule, AXDecoratorModule];
class AXTabsModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXTabsModule, imports: [CommonModule, PortalModule, AXDecoratorModule, AXTabsComponent, AXTabItemComponent, AXTabContentDirective], exports: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTabsModule, imports: [MODULES] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXTabsModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [...MODULES, ...COMPONENT],
                    exports: [...COMPONENT],
                    providers: [],
                }]
        }] });

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

export { AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule };
//# sourceMappingURL=acorex-components-tabs.mjs.map
