import * as i0 from '@angular/core';
import { inject, input, model, output, booleanAttribute, DestroyRef, viewChild, signal, computed, effect, afterNextRender, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { TranslocoService, TranslocoPipe } from '@jsverse/transloco';
import { Icon } from '@masterteam/icons';
import { SelectButton } from 'primeng/selectbutton';
import { Popover } from 'primeng/popover';
import * as i2 from 'primeng/inputtext';
import { InputTextModule } from 'primeng/inputtext';
import * as i3 from 'primeng/iconfield';
import { IconFieldModule } from 'primeng/iconfield';
import * as i4 from 'primeng/inputicon';
import { InputIconModule } from 'primeng/inputicon';
import { Button } from '@masterteam/components/button';
import { Avatar } from '@masterteam/components/avatar';

class Tabs {
    transloco = inject(TranslocoService);
    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
    optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
    optionValue = input('value', ...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
    active = model(null, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
    mode = input('horizontal', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
    moreLabel = input(this.transloco.translate('components.tabs.more'), ...(ngDevMode ? [{ debugName: "moreLabel" }] : /* istanbul ignore next */ []));
    defaultIcon = input('layout.align-left-02', ...(ngDevMode ? [{ debugName: "defaultIcon" }] : /* istanbul ignore next */ []));
    onChange = output();
    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
    fluid = input(false, { ...(ngDevMode ? { debugName: "fluid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    destroyRef = inject(DestroyRef);
    tabsContainer = viewChild('tabsContainer', ...(ngDevMode ? [{ debugName: "tabsContainer" }] : /* istanbul ignore next */ []));
    measureRow = viewChild('measureRow', ...(ngDevMode ? [{ debugName: "measureRow" }] : /* istanbul ignore next */ []));
    morePopover = viewChild(Popover, ...(ngDevMode ? [{ debugName: "morePopover" }] : /* istanbul ignore next */ []));
    resizeObserver;
    measureHandle = 0;
    alignHandle = 0;
    visibleCount = signal(Number.MAX_SAFE_INTEGER, ...(ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []));
    visibleOptions = computed(() => this.options().slice(0, this.visibleCount()), ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
    overflowOptions = computed(() => this.options().slice(this.visibleCount()), ...(ngDevMode ? [{ debugName: "overflowOptions" }] : /* istanbul ignore next */ []));
    hasOverflow = computed(() => this.overflowOptions().length > 0, ...(ngDevMode ? [{ debugName: "hasOverflow" }] : /* istanbul ignore next */ []));
    isActiveInOverflow = computed(() => this.overflowOptions().some((option) => this.isActiveOption(option)), ...(ngDevMode ? [{ debugName: "isActiveInOverflow" }] : /* istanbul ignore next */ []));
    searchThreshold = input(8, ...(ngDevMode ? [{ debugName: "searchThreshold" }] : /* istanbul ignore next */ []));
    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
    showOverflowSearch = computed(() => this.overflowOptions().length >= this.searchThreshold(), ...(ngDevMode ? [{ debugName: "showOverflowSearch" }] : /* istanbul ignore next */ []));
    filteredOverflowOptions = computed(() => {
        const term = this.searchTerm().trim().toLowerCase();
        if (!term)
            return this.overflowOptions();
        return this.overflowOptions().filter((option) => this.resolveLabel(option).toLowerCase().includes(term));
    }, ...(ngDevMode ? [{ debugName: "filteredOverflowOptions" }] : /* istanbul ignore next */ []));
    constructor() {
        effect(() => {
            const options = this.options();
            const active = this.active();
            if (!options.length) {
                return;
            }
            const hasActiveOption = options.some((option) => Object.is(this.resolveValue(option), active));
            if (!hasActiveOption) {
                this.active.set(this.resolveValue(options[0]));
            }
        });
        afterNextRender(() => {
            if (this.mode() !== 'underline')
                return;
            this.setupResizeObserver();
            this.scheduleMeasure();
        });
        effect(() => {
            // Re-measure when options or mode change.
            this.options();
            if (this.mode() !== 'underline')
                return;
            this.scheduleMeasure();
        });
        this.destroyRef.onDestroy(() => {
            this.resizeObserver?.disconnect();
            if (this.measureHandle) {
                cancelAnimationFrame(this.measureHandle);
            }
            if (this.alignHandle) {
                cancelAnimationFrame(this.alignHandle);
            }
        });
    }
    setupResizeObserver() {
        const container = this.tabsContainer()?.nativeElement;
        if (!container || typeof ResizeObserver === 'undefined')
            return;
        this.resizeObserver = new ResizeObserver(() => this.scheduleMeasure());
        this.resizeObserver.observe(container);
    }
    scheduleMeasure() {
        if (this.measureHandle) {
            cancelAnimationFrame(this.measureHandle);
        }
        this.measureHandle = requestAnimationFrame(() => {
            this.measureHandle = 0;
            this.measureAndUpdate();
        });
    }
    measureAndUpdate() {
        const container = this.tabsContainer()?.nativeElement;
        const measureRow = this.measureRow()?.nativeElement;
        if (!container || !measureRow)
            return;
        const optionsCount = this.options().length;
        if (optionsCount === 0) {
            this.visibleCount.set(0);
            return;
        }
        if (container.clientWidth === 0)
            return;
        // Inner width excludes the container's horizontal padding so we compare
        // against the actual space available to the flex tabs row.
        const style = getComputedStyle(container);
        const paddingX = (parseFloat(style.paddingLeft) || 0) +
            (parseFloat(style.paddingRight) || 0);
        const innerWidth = container.clientWidth - paddingX;
        if (innerWidth <= 0)
            return;
        const tabWidths = Array.from(measureRow.children).map((el) => el.getBoundingClientRect().width);
        if (tabWidths.length === 0)
            return;
        // Approximate gap-0.5 between tabs (2px).
        const gap = 2;
        const totalWidth = tabWidths.reduce((sum, width) => sum + width, 0) +
            Math.max(0, tabWidths.length - 1) * gap;
        // Everything fits — no more button needed.
        if (totalWidth <= innerWidth) {
            this.visibleCount.set(tabWidths.length);
            return;
        }
        // Reserve space for the More button (icon + label ~ 88px).
        const moreButtonReserve = 96;
        const available = innerWidth - moreButtonReserve;
        let cumulative = 0;
        let visibleCount = 0;
        for (let i = 0; i < tabWidths.length; i++) {
            const next = cumulative + tabWidths[i] + (i > 0 ? gap : 0);
            if (next > available)
                break;
            cumulative = next;
            visibleCount++;
        }
        this.visibleCount.set(Math.max(1, visibleCount));
    }
    onTabChange(value) {
        this.onChange.emit(value);
    }
    onOverflowSearch(value) {
        this.searchTerm.set(value ?? '');
        // Filtering shrinks/grows the popover content, but PrimeNG only positions
        // the popover on show. Re-align after the filtered list re-renders so a
        // popover opened above the trigger stays attached instead of overlapping.
        this.scheduleOverflowAlign();
    }
    scheduleOverflowAlign() {
        if (this.alignHandle) {
            cancelAnimationFrame(this.alignHandle);
        }
        this.alignHandle = requestAnimationFrame(() => {
            this.alignHandle = 0;
            const popover = this.morePopover();
            if (!popover?.overlayVisible)
                return;
            // Clear the stale flip marker so align() recomputes the arrow direction
            // for the new height instead of keeping the previous "above" state.
            const container = popover.container;
            if (container) {
                container.removeAttribute('data-p-popover-flipped');
                container.classList.remove('p-popover-flipped');
            }
            popover.align();
        });
    }
    onOverflowPopoverHide() {
        this.searchTerm.set('');
    }
    onOptionSelect(option) {
        if (this.disabled() || this.isOptionDisabled(option)) {
            return;
        }
        const value = this.resolveValue(option);
        this.active.set(value);
        this.onTabChange(value);
    }
    resolveLabel(option) {
        const labelKey = this.optionLabel();
        const label = option && typeof option === 'object'
            ? option[labelKey]
            : option;
        return typeof label === 'string' ? label : String(label ?? '');
    }
    resolveValue(option) {
        const valueKey = this.optionValue();
        if (option && typeof option === 'object' && valueKey in option) {
            return option[valueKey];
        }
        return option;
    }
    resolveIcon(option) {
        return typeof option?.icon === 'string' ? option.icon : null;
    }
    resolveIconOrDefault(option) {
        return this.resolveIcon(option) ?? this.defaultIcon();
    }
    resolveBadge(option) {
        return option?.badge ?? null;
    }
    hasBadge(option) {
        return option?.badge !== null && option?.badge !== undefined;
    }
    hasCountBadge(option) {
        const badge = option?.badge;
        if (badge === null || badge === undefined || badge === '') {
            return false;
        }
        const numeric = typeof badge === 'number' ? badge : Number(badge);
        return Number.isNaN(numeric) ? true : numeric > 0;
    }
    severity(option) {
        const severity = typeof option?.severity === 'string'
            ? option.severity.trim().toLowerCase()
            : '';
        if (severity === 'error')
            return 'danger';
        if (severity === 'warning')
            return 'warn';
        if (severity === 'secondary' ||
            severity === 'success' ||
            severity === 'info' ||
            severity === 'warn' ||
            severity === 'danger' ||
            severity === 'help' ||
            severity === 'contrast') {
            return severity;
        }
        return 'primary';
    }
    isSeverity(option, severity) {
        return this.severity(option) === severity;
    }
    hasNonPrimarySeverity(option) {
        return this.severity(option) !== 'primary';
    }
    isActiveOption(option) {
        return Object.is(this.active(), this.resolveValue(option));
    }
    isOptionDisabled(option) {
        return !!option?.disabled;
    }
    trackOption(option, index) {
        return this.resolveValue(option) ?? index;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Tabs, isStandalone: true, selector: "mt-tabs", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, moreLabel: { classPropertyName: "moreLabel", publicName: "moreLabel", isSignal: true, isRequired: false, transformFunction: null }, defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, searchThreshold: { classPropertyName: "searchThreshold", publicName: "searchThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", onChange: "onChange" }, host: { properties: { "class.w-full": "fluid()" }, classAttribute: "grid min-w-0 gap-1" }, viewQueries: [{ propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true, isSignal: true }, { propertyName: "measureRow", first: true, predicate: ["measureRow"], descendants: true, isSignal: true }, { propertyName: "morePopover", first: true, predicate: Popover, descendants: true, isSignal: true }], ngImport: i0, template: "@if (mode() === \"vertical\") {\r\n  <div\r\n    class=\"flex min-h-0 flex-col gap-1 rounded-2xl border border-surface-200 bg-white p-2\"\r\n    role=\"tablist\"\r\n    aria-orientation=\"vertical\"\r\n  >\r\n    @for (option of options(); track trackOption(option, $index)) {\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"group relative flex w-full items-center gap-3 overflow-hidden rounded-lg px-3 py-2.5 text-left text-sm transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary/20\"\r\n        [attr.aria-selected]=\"isActiveOption(option)\"\r\n        [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\r\n        [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n        [class.bg-primary-50]=\"isActiveOption(option)\"\r\n        [class.font-semibold]=\"isActiveOption(option)\"\r\n        [class.text-primary-700]=\"isActiveOption(option)\"\r\n        [class.text-surface-500]=\"!isActiveOption(option)\"\r\n        [class.hover:bg-surface-50]=\"!isActiveOption(option)\"\r\n        [class.cursor-pointer]=\"!(disabled() || isOptionDisabled(option))\"\r\n        [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\r\n        [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n        (click)=\"onOptionSelect(option)\"\r\n      >\r\n        @if (resolveIcon(option); as icon) {\r\n          <mt-icon\r\n            [icon]=\"icon\"\r\n            class=\"relative z-10 text-base\"\r\n            [class.text-primary]=\"isActiveOption(option)\"\r\n            [class.text-surface-400]=\"!isActiveOption(option)\"\r\n          />\r\n        }\r\n\r\n        <span class=\"relative z-10 min-w-0 flex-1 truncate\">\r\n          {{ resolveLabel(option) }}\r\n        </span>\r\n\r\n        @if (hasBadge(option)) {\r\n          <span\r\n            class=\"relative z-10 ms-auto inline-flex min-w-5 items-center justify-center rounded-full px-2 py-0.5 text-[11px] font-bold leading-none\"\r\n            [class.bg-primary]=\"isActiveOption(option)\"\r\n            [class.text-white]=\"isActiveOption(option)\"\r\n            [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n            [class.text-surface-600]=\"!isActiveOption(option)\"\r\n          >\r\n            {{ resolveBadge(option) }}\r\n          </span>\r\n        }\r\n      </button>\r\n    }\r\n  </div>\r\n} @else if (mode() === \"underline\") {\r\n  <div\r\n    #tabsContainer\r\n    class=\"relative flex w-full min-w-0 max-w-full items-center gap-0.5 overflow-x-clip\"\r\n    role=\"tablist\"\r\n    aria-orientation=\"horizontal\"\r\n  >\r\n    <!-- Invisible measurement ghost row: always renders every option at natural width -->\r\n    <div\r\n      #measureRow\r\n      aria-hidden=\"true\"\r\n      class=\"pointer-events-none invisible absolute top-0 left-0 flex flex-nowrap gap-0.5 -z-10\"\r\n    >\r\n      @for (option of options(); track trackOption(option, $index)) {\r\n        <span\r\n          class=\"inline-flex items-center gap-1.5 border-b-2 border-transparent px-3.5 py-2.5 text-sm font-semibold whitespace-nowrap\"\r\n        >\r\n          @if (resolveIcon(option); as icon) {\r\n            <mt-icon [icon]=\"icon\" class=\"text-base\" />\r\n          }\r\n          <span>{{ resolveLabel(option) }}</span>\r\n          @if (hasCountBadge(option)) {\r\n            <span\r\n              class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\r\n            >\r\n              {{ resolveBadge(option) }}\r\n            </span>\r\n          }\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <!-- Visible tabs row -->\r\n    <div\r\n      class=\"flex min-w-0 flex-1 items-center gap-0.5 overflow-x-clip border-b border-surface-200\"\r\n    >\r\n      @for (option of visibleOptions(); track trackOption(option, $index)) {\r\n        <button\r\n          type=\"button\"\r\n          role=\"tab\"\r\n          class=\"-mb-px inline-flex shrink-0 items-center gap-1.5 border-b-2 px-3.5 py-2.5 text-sm whitespace-nowrap transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary/20\"\r\n          [attr.aria-selected]=\"isActiveOption(option)\"\r\n          [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\r\n          [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n          [class.border-primary]=\"\r\n            isActiveOption(option) && isSeverity(option, 'primary')\r\n          \"\r\n          [class.text-primary]=\"\r\n            isActiveOption(option) && isSeverity(option, 'primary')\r\n          \"\r\n          [class.border-slate-500]=\"\r\n            isActiveOption(option) && isSeverity(option, 'secondary')\r\n          \"\r\n          [class.text-slate-600]=\"isSeverity(option, 'secondary')\"\r\n          [class.border-emerald-500]=\"\r\n            isActiveOption(option) && isSeverity(option, 'success')\r\n          \"\r\n          [class.text-emerald-600]=\"isSeverity(option, 'success')\"\r\n          [class.border-sky-500]=\"\r\n            isActiveOption(option) && isSeverity(option, 'info')\r\n          \"\r\n          [class.text-sky-600]=\"isSeverity(option, 'info')\"\r\n          [class.border-amber-500]=\"\r\n            isActiveOption(option) && isSeverity(option, 'warn')\r\n          \"\r\n          [class.text-amber-700]=\"isSeverity(option, 'warn')\"\r\n          [class.border-red-500]=\"\r\n            isActiveOption(option) && isSeverity(option, 'danger')\r\n          \"\r\n          [class.text-red-600]=\"isSeverity(option, 'danger')\"\r\n          [class.border-purple-500]=\"\r\n            isActiveOption(option) && isSeverity(option, 'help')\r\n          \"\r\n          [class.text-purple-600]=\"isSeverity(option, 'help')\"\r\n          [class.border-zinc-700]=\"\r\n            isActiveOption(option) && isSeverity(option, 'contrast')\r\n          \"\r\n          [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\r\n          [class.font-semibold]=\"isActiveOption(option)\"\r\n          [class.border-transparent]=\"!isActiveOption(option)\"\r\n          [class.text-surface-700]=\"\r\n            !isActiveOption(option) && !hasNonPrimarySeverity(option)\r\n          \"\r\n          [class.font-medium]=\"!isActiveOption(option)\"\r\n          [class.hover:text-primary-600]=\"\r\n            !isActiveOption(option) &&\r\n            !hasNonPrimarySeverity(option) &&\r\n            !(disabled() || isOptionDisabled(option))\r\n          \"\r\n          [class.hover:text-slate-700]=\"\r\n            !isActiveOption(option) && isSeverity(option, 'secondary')\r\n          \"\r\n          [class.hover:text-emerald-700]=\"\r\n            !isActiveOption(option) && isSeverity(option, 'success')\r\n          \"\r\n          [class.hover:text-sky-700]=\"\r\n            !isActiveOption(option) && isSeverity(option, 'info')\r\n          \"\r\n          [class.hover:text-amber-800]=\"\r\n            !isActiveOption(option) && isSeverity(option, 'warn')\r\n          \"\r\n          [class.hover:text-red-700]=\"\r\n            !isActiveOption(option) && isSeverity(option, 'danger')\r\n          \"\r\n          [class.hover:text-purple-700]=\"\r\n            !isActiveOption(option) && isSeverity(option, 'help')\r\n          \"\r\n          [class.hover:text-zinc-900]=\"\r\n            !isActiveOption(option) && isSeverity(option, 'contrast')\r\n          \"\r\n          [class.cursor-pointer]=\"!(disabled() || isOptionDisabled(option))\"\r\n          [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\r\n          [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n          (click)=\"onOptionSelect(option)\"\r\n        >\r\n          @if (resolveIcon(option); as icon) {\r\n            <mt-icon [icon]=\"icon\" class=\"text-base\" />\r\n          }\r\n\r\n          <span class=\"truncate\">{{ resolveLabel(option) }}</span>\r\n\r\n          @if (hasCountBadge(option)) {\r\n            <span\r\n              class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\r\n              [class.bg-primary-50]=\"isSeverity(option, 'primary')\"\r\n              [class.text-primary-700]=\"isSeverity(option, 'primary')\"\r\n              [class.bg-slate-100]=\"isSeverity(option, 'secondary')\"\r\n              [class.text-slate-700]=\"isSeverity(option, 'secondary')\"\r\n              [class.bg-emerald-50]=\"isSeverity(option, 'success')\"\r\n              [class.text-emerald-700]=\"isSeverity(option, 'success')\"\r\n              [class.bg-sky-50]=\"isSeverity(option, 'info')\"\r\n              [class.text-sky-700]=\"isSeverity(option, 'info')\"\r\n              [class.bg-amber-50]=\"isSeverity(option, 'warn')\"\r\n              [class.text-amber-800]=\"isSeverity(option, 'warn')\"\r\n              [class.bg-red-50]=\"isSeverity(option, 'danger')\"\r\n              [class.text-red-700]=\"isSeverity(option, 'danger')\"\r\n              [class.bg-purple-50]=\"isSeverity(option, 'help')\"\r\n              [class.text-purple-700]=\"isSeverity(option, 'help')\"\r\n              [class.bg-zinc-100]=\"isSeverity(option, 'contrast')\"\r\n              [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\r\n              [class.bg-surface-100]=\"\r\n                !isActiveOption(option) && !hasNonPrimarySeverity(option)\r\n              \"\r\n              [class.text-surface-500]=\"\r\n                !isActiveOption(option) && !hasNonPrimarySeverity(option)\r\n              \"\r\n            >\r\n              {{ resolveBadge(option) }}\r\n            </span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    @if (hasOverflow()) {\r\n      <div\r\n        class=\"flex shrink-0 items-center -mb-px border-b border-surface-200 pb-1\"\r\n      >\r\n        <mt-button\r\n          icon=\"arrow.chevron-down\"\r\n          [label]=\"moreLabel()\"\r\n          size=\"small\"\r\n          severity=\"primary\"\r\n          [text]=\"true\"\r\n          [rounded]=\"true\"\r\n          (onClick)=\"morePopover.toggle($event)\"\r\n        />\r\n        <p-popover\r\n          #morePopover\r\n          appendTo=\"body\"\r\n          (onHide)=\"onOverflowPopoverHide()\"\r\n        >\r\n          <div class=\"flex min-w-56 flex-col\">\r\n            @if (showOverflowSearch()) {\r\n              <div class=\"border-b border-surface-200 p-2\">\r\n                <p-iconfield iconPosition=\"left\">\r\n                  <p-inputicon>\r\n                    <mt-icon icon=\"general.search-md\" />\r\n                  </p-inputicon>\r\n                  <input\r\n                    pInputText\r\n                    type=\"text\"\r\n                    [value]=\"searchTerm()\"\r\n                    (input)=\"onOverflowSearch($any($event.target).value)\"\r\n                    [placeholder]=\"'components.tabs.search' | transloco\"\r\n                    class=\"w-full\"\r\n                  />\r\n                </p-iconfield>\r\n              </div>\r\n            }\r\n            <div\r\n              class=\"flex max-h-80 flex-col divide-y divide-surface-100 overflow-y-auto\"\r\n            >\r\n              @for (\r\n                option of filteredOverflowOptions();\r\n                track trackOption(option, $index)\r\n              ) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex w-full cursor-pointer items-center justify-start gap-2 px-2 py-1 text-start text-sm transition-colors [&_.p-avatar]:h-7 [&_.p-avatar]:w-7 [&_.p-avatar]:text-sm\"\r\n                  [class.bg-primary-50]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'primary')\r\n                  \"\r\n                  [class.text-primary]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'primary')\r\n                  \"\r\n                  [class.bg-slate-50]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'secondary')\r\n                  \"\r\n                  [class.text-slate-600]=\"isSeverity(option, 'secondary')\"\r\n                  [class.bg-emerald-50]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'success')\r\n                  \"\r\n                  [class.text-emerald-600]=\"isSeverity(option, 'success')\"\r\n                  [class.bg-sky-50]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'info')\r\n                  \"\r\n                  [class.text-sky-600]=\"isSeverity(option, 'info')\"\r\n                  [class.bg-amber-50]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'warn')\r\n                  \"\r\n                  [class.text-amber-700]=\"isSeverity(option, 'warn')\"\r\n                  [class.bg-red-50]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'danger')\r\n                  \"\r\n                  [class.text-red-600]=\"isSeverity(option, 'danger')\"\r\n                  [class.bg-purple-50]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'help')\r\n                  \"\r\n                  [class.text-purple-600]=\"isSeverity(option, 'help')\"\r\n                  [class.bg-zinc-100]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'contrast')\r\n                  \"\r\n                  [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\r\n                  [class.font-semibold]=\"isActiveOption(option)\"\r\n                  [class.text-surface-700]=\"\r\n                    !isActiveOption(option) && !hasNonPrimarySeverity(option)\r\n                  \"\r\n                  [class.hover:bg-surface-100]=\"!isActiveOption(option)\"\r\n                  [class.cursor-not-allowed]=\"\r\n                    disabled() || isOptionDisabled(option)\r\n                  \"\r\n                  [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n                  [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n                  (click)=\"onOptionSelect(option); morePopover.hide()\"\r\n                >\r\n                  <mt-avatar\r\n                    [icon]=\"resolveIconOrDefault(option)\"\r\n                    size=\"normal\"\r\n                    shape=\"circle\"\r\n                    styleClass=\"!bg-surface-100 !text-surface-600\"\r\n                  />\r\n                  <span class=\"flex-1 truncate text-start\">\r\n                    {{ resolveLabel(option) }}\r\n                  </span>\r\n                  @if (hasCountBadge(option)) {\r\n                    <span\r\n                      class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\r\n                      [class.bg-primary-100]=\"isSeverity(option, 'primary')\"\r\n                      [class.text-primary-700]=\"isSeverity(option, 'primary')\"\r\n                      [class.bg-slate-100]=\"isSeverity(option, 'secondary')\"\r\n                      [class.text-slate-700]=\"isSeverity(option, 'secondary')\"\r\n                      [class.bg-emerald-50]=\"isSeverity(option, 'success')\"\r\n                      [class.text-emerald-700]=\"isSeverity(option, 'success')\"\r\n                      [class.bg-sky-50]=\"isSeverity(option, 'info')\"\r\n                      [class.text-sky-700]=\"isSeverity(option, 'info')\"\r\n                      [class.bg-amber-50]=\"isSeverity(option, 'warn')\"\r\n                      [class.text-amber-800]=\"isSeverity(option, 'warn')\"\r\n                      [class.bg-red-50]=\"isSeverity(option, 'danger')\"\r\n                      [class.text-red-700]=\"isSeverity(option, 'danger')\"\r\n                      [class.bg-purple-50]=\"isSeverity(option, 'help')\"\r\n                      [class.text-purple-700]=\"isSeverity(option, 'help')\"\r\n                      [class.bg-zinc-100]=\"isSeverity(option, 'contrast')\"\r\n                      [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\r\n                      [class.bg-surface-100]=\"\r\n                        !isActiveOption(option) &&\r\n                        !hasNonPrimarySeverity(option)\r\n                      \"\r\n                      [class.text-surface-500]=\"\r\n                        !isActiveOption(option) &&\r\n                        !hasNonPrimarySeverity(option)\r\n                      \"\r\n                    >\r\n                      {{ resolveBadge(option) }}\r\n                    </span>\r\n                  }\r\n                </button>\r\n              } @empty {\r\n                <div class=\"px-3 py-4 text-center text-sm text-surface-500\">\r\n                  {{ \"components.tabs.no-results\" | transloco }}\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </p-popover>\r\n      </div>\r\n    }\r\n  </div>\r\n} @else {\r\n  <p-selectbutton\r\n    [options]=\"options()\"\r\n    [(ngModel)]=\"active\"\r\n    (ngModelChange)=\"onTabChange($event)\"\r\n    [optionLabel]=\"optionLabel()\"\r\n    [optionValue]=\"optionValue()\"\r\n    styleClass=\"my-tabs-button\"\r\n    [size]=\"size()\"\r\n    [fluid]=\"fluid()\"\r\n    [disabled]=\"disabled()\"\r\n    unselectable\r\n  >\r\n    <ng-template #item let-option>\r\n      <span class=\"inline-flex min-w-0 items-center gap-1.5\">\r\n        <span class=\"truncate\">{{ resolveLabel(option) }}</span>\r\n\r\n        @if (hasBadge(option)) {\r\n          <span\r\n            class=\"relative z-10 min-w-5 ms-auto inline-flex items-center justify-center rounded-full p-1 text-xs leading-none\"\r\n            [class.bg-primary]=\"isActiveOption(option)\"\r\n            [class.text-white]=\"isActiveOption(option)\"\r\n            [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n            [class.text-surface-600]=\"!isActiveOption(option)\"\r\n          >\r\n            {{ resolveBadge(option) }}\r\n          </span>\r\n        }\r\n      </span>\r\n    </ng-template>\r\n  </p-selectbutton>\r\n}\r\n", styles: [":host{min-width:0}\n"], dependencies: [{ kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i3.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i4.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tabs, decorators: [{
            type: Component,
            args: [{ selector: 'mt-tabs', standalone: true, imports: [
                        Icon,
                        SelectButton,
                        FormsModule,
                        Button,
                        Popover,
                        Avatar,
                        InputTextModule,
                        IconFieldModule,
                        InputIconModule,
                        TranslocoPipe,
                    ], host: {
                        class: 'grid min-w-0 gap-1',
                        '[class.w-full]': 'fluid()',
                    }, template: "@if (mode() === \"vertical\") {\r\n  <div\r\n    class=\"flex min-h-0 flex-col gap-1 rounded-2xl border border-surface-200 bg-white p-2\"\r\n    role=\"tablist\"\r\n    aria-orientation=\"vertical\"\r\n  >\r\n    @for (option of options(); track trackOption(option, $index)) {\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"group relative flex w-full items-center gap-3 overflow-hidden rounded-lg px-3 py-2.5 text-left text-sm transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary/20\"\r\n        [attr.aria-selected]=\"isActiveOption(option)\"\r\n        [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\r\n        [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n        [class.bg-primary-50]=\"isActiveOption(option)\"\r\n        [class.font-semibold]=\"isActiveOption(option)\"\r\n        [class.text-primary-700]=\"isActiveOption(option)\"\r\n        [class.text-surface-500]=\"!isActiveOption(option)\"\r\n        [class.hover:bg-surface-50]=\"!isActiveOption(option)\"\r\n        [class.cursor-pointer]=\"!(disabled() || isOptionDisabled(option))\"\r\n        [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\r\n        [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n        (click)=\"onOptionSelect(option)\"\r\n      >\r\n        @if (resolveIcon(option); as icon) {\r\n          <mt-icon\r\n            [icon]=\"icon\"\r\n            class=\"relative z-10 text-base\"\r\n            [class.text-primary]=\"isActiveOption(option)\"\r\n            [class.text-surface-400]=\"!isActiveOption(option)\"\r\n          />\r\n        }\r\n\r\n        <span class=\"relative z-10 min-w-0 flex-1 truncate\">\r\n          {{ resolveLabel(option) }}\r\n        </span>\r\n\r\n        @if (hasBadge(option)) {\r\n          <span\r\n            class=\"relative z-10 ms-auto inline-flex min-w-5 items-center justify-center rounded-full px-2 py-0.5 text-[11px] font-bold leading-none\"\r\n            [class.bg-primary]=\"isActiveOption(option)\"\r\n            [class.text-white]=\"isActiveOption(option)\"\r\n            [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n            [class.text-surface-600]=\"!isActiveOption(option)\"\r\n          >\r\n            {{ resolveBadge(option) }}\r\n          </span>\r\n        }\r\n      </button>\r\n    }\r\n  </div>\r\n} @else if (mode() === \"underline\") {\r\n  <div\r\n    #tabsContainer\r\n    class=\"relative flex w-full min-w-0 max-w-full items-center gap-0.5 overflow-x-clip\"\r\n    role=\"tablist\"\r\n    aria-orientation=\"horizontal\"\r\n  >\r\n    <!-- Invisible measurement ghost row: always renders every option at natural width -->\r\n    <div\r\n      #measureRow\r\n      aria-hidden=\"true\"\r\n      class=\"pointer-events-none invisible absolute top-0 left-0 flex flex-nowrap gap-0.5 -z-10\"\r\n    >\r\n      @for (option of options(); track trackOption(option, $index)) {\r\n        <span\r\n          class=\"inline-flex items-center gap-1.5 border-b-2 border-transparent px-3.5 py-2.5 text-sm font-semibold whitespace-nowrap\"\r\n        >\r\n          @if (resolveIcon(option); as icon) {\r\n            <mt-icon [icon]=\"icon\" class=\"text-base\" />\r\n          }\r\n          <span>{{ resolveLabel(option) }}</span>\r\n          @if (hasCountBadge(option)) {\r\n            <span\r\n              class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\r\n            >\r\n              {{ resolveBadge(option) }}\r\n            </span>\r\n          }\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <!-- Visible tabs row -->\r\n    <div\r\n      class=\"flex min-w-0 flex-1 items-center gap-0.5 overflow-x-clip border-b border-surface-200\"\r\n    >\r\n      @for (option of visibleOptions(); track trackOption(option, $index)) {\r\n        <button\r\n          type=\"button\"\r\n          role=\"tab\"\r\n          class=\"-mb-px inline-flex shrink-0 items-center gap-1.5 border-b-2 px-3.5 py-2.5 text-sm whitespace-nowrap transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary/20\"\r\n          [attr.aria-selected]=\"isActiveOption(option)\"\r\n          [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\r\n          [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n          [class.border-primary]=\"\r\n            isActiveOption(option) && isSeverity(option, 'primary')\r\n          \"\r\n          [class.text-primary]=\"\r\n            isActiveOption(option) && isSeverity(option, 'primary')\r\n          \"\r\n          [class.border-slate-500]=\"\r\n            isActiveOption(option) && isSeverity(option, 'secondary')\r\n          \"\r\n          [class.text-slate-600]=\"isSeverity(option, 'secondary')\"\r\n          [class.border-emerald-500]=\"\r\n            isActiveOption(option) && isSeverity(option, 'success')\r\n          \"\r\n          [class.text-emerald-600]=\"isSeverity(option, 'success')\"\r\n          [class.border-sky-500]=\"\r\n            isActiveOption(option) && isSeverity(option, 'info')\r\n          \"\r\n          [class.text-sky-600]=\"isSeverity(option, 'info')\"\r\n          [class.border-amber-500]=\"\r\n            isActiveOption(option) && isSeverity(option, 'warn')\r\n          \"\r\n          [class.text-amber-700]=\"isSeverity(option, 'warn')\"\r\n          [class.border-red-500]=\"\r\n            isActiveOption(option) && isSeverity(option, 'danger')\r\n          \"\r\n          [class.text-red-600]=\"isSeverity(option, 'danger')\"\r\n          [class.border-purple-500]=\"\r\n            isActiveOption(option) && isSeverity(option, 'help')\r\n          \"\r\n          [class.text-purple-600]=\"isSeverity(option, 'help')\"\r\n          [class.border-zinc-700]=\"\r\n            isActiveOption(option) && isSeverity(option, 'contrast')\r\n          \"\r\n          [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\r\n          [class.font-semibold]=\"isActiveOption(option)\"\r\n          [class.border-transparent]=\"!isActiveOption(option)\"\r\n          [class.text-surface-700]=\"\r\n            !isActiveOption(option) && !hasNonPrimarySeverity(option)\r\n          \"\r\n          [class.font-medium]=\"!isActiveOption(option)\"\r\n          [class.hover:text-primary-600]=\"\r\n            !isActiveOption(option) &&\r\n            !hasNonPrimarySeverity(option) &&\r\n            !(disabled() || isOptionDisabled(option))\r\n          \"\r\n          [class.hover:text-slate-700]=\"\r\n            !isActiveOption(option) && isSeverity(option, 'secondary')\r\n          \"\r\n          [class.hover:text-emerald-700]=\"\r\n            !isActiveOption(option) && isSeverity(option, 'success')\r\n          \"\r\n          [class.hover:text-sky-700]=\"\r\n            !isActiveOption(option) && isSeverity(option, 'info')\r\n          \"\r\n          [class.hover:text-amber-800]=\"\r\n            !isActiveOption(option) && isSeverity(option, 'warn')\r\n          \"\r\n          [class.hover:text-red-700]=\"\r\n            !isActiveOption(option) && isSeverity(option, 'danger')\r\n          \"\r\n          [class.hover:text-purple-700]=\"\r\n            !isActiveOption(option) && isSeverity(option, 'help')\r\n          \"\r\n          [class.hover:text-zinc-900]=\"\r\n            !isActiveOption(option) && isSeverity(option, 'contrast')\r\n          \"\r\n          [class.cursor-pointer]=\"!(disabled() || isOptionDisabled(option))\"\r\n          [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\r\n          [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n          (click)=\"onOptionSelect(option)\"\r\n        >\r\n          @if (resolveIcon(option); as icon) {\r\n            <mt-icon [icon]=\"icon\" class=\"text-base\" />\r\n          }\r\n\r\n          <span class=\"truncate\">{{ resolveLabel(option) }}</span>\r\n\r\n          @if (hasCountBadge(option)) {\r\n            <span\r\n              class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\r\n              [class.bg-primary-50]=\"isSeverity(option, 'primary')\"\r\n              [class.text-primary-700]=\"isSeverity(option, 'primary')\"\r\n              [class.bg-slate-100]=\"isSeverity(option, 'secondary')\"\r\n              [class.text-slate-700]=\"isSeverity(option, 'secondary')\"\r\n              [class.bg-emerald-50]=\"isSeverity(option, 'success')\"\r\n              [class.text-emerald-700]=\"isSeverity(option, 'success')\"\r\n              [class.bg-sky-50]=\"isSeverity(option, 'info')\"\r\n              [class.text-sky-700]=\"isSeverity(option, 'info')\"\r\n              [class.bg-amber-50]=\"isSeverity(option, 'warn')\"\r\n              [class.text-amber-800]=\"isSeverity(option, 'warn')\"\r\n              [class.bg-red-50]=\"isSeverity(option, 'danger')\"\r\n              [class.text-red-700]=\"isSeverity(option, 'danger')\"\r\n              [class.bg-purple-50]=\"isSeverity(option, 'help')\"\r\n              [class.text-purple-700]=\"isSeverity(option, 'help')\"\r\n              [class.bg-zinc-100]=\"isSeverity(option, 'contrast')\"\r\n              [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\r\n              [class.bg-surface-100]=\"\r\n                !isActiveOption(option) && !hasNonPrimarySeverity(option)\r\n              \"\r\n              [class.text-surface-500]=\"\r\n                !isActiveOption(option) && !hasNonPrimarySeverity(option)\r\n              \"\r\n            >\r\n              {{ resolveBadge(option) }}\r\n            </span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    @if (hasOverflow()) {\r\n      <div\r\n        class=\"flex shrink-0 items-center -mb-px border-b border-surface-200 pb-1\"\r\n      >\r\n        <mt-button\r\n          icon=\"arrow.chevron-down\"\r\n          [label]=\"moreLabel()\"\r\n          size=\"small\"\r\n          severity=\"primary\"\r\n          [text]=\"true\"\r\n          [rounded]=\"true\"\r\n          (onClick)=\"morePopover.toggle($event)\"\r\n        />\r\n        <p-popover\r\n          #morePopover\r\n          appendTo=\"body\"\r\n          (onHide)=\"onOverflowPopoverHide()\"\r\n        >\r\n          <div class=\"flex min-w-56 flex-col\">\r\n            @if (showOverflowSearch()) {\r\n              <div class=\"border-b border-surface-200 p-2\">\r\n                <p-iconfield iconPosition=\"left\">\r\n                  <p-inputicon>\r\n                    <mt-icon icon=\"general.search-md\" />\r\n                  </p-inputicon>\r\n                  <input\r\n                    pInputText\r\n                    type=\"text\"\r\n                    [value]=\"searchTerm()\"\r\n                    (input)=\"onOverflowSearch($any($event.target).value)\"\r\n                    [placeholder]=\"'components.tabs.search' | transloco\"\r\n                    class=\"w-full\"\r\n                  />\r\n                </p-iconfield>\r\n              </div>\r\n            }\r\n            <div\r\n              class=\"flex max-h-80 flex-col divide-y divide-surface-100 overflow-y-auto\"\r\n            >\r\n              @for (\r\n                option of filteredOverflowOptions();\r\n                track trackOption(option, $index)\r\n              ) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex w-full cursor-pointer items-center justify-start gap-2 px-2 py-1 text-start text-sm transition-colors [&_.p-avatar]:h-7 [&_.p-avatar]:w-7 [&_.p-avatar]:text-sm\"\r\n                  [class.bg-primary-50]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'primary')\r\n                  \"\r\n                  [class.text-primary]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'primary')\r\n                  \"\r\n                  [class.bg-slate-50]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'secondary')\r\n                  \"\r\n                  [class.text-slate-600]=\"isSeverity(option, 'secondary')\"\r\n                  [class.bg-emerald-50]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'success')\r\n                  \"\r\n                  [class.text-emerald-600]=\"isSeverity(option, 'success')\"\r\n                  [class.bg-sky-50]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'info')\r\n                  \"\r\n                  [class.text-sky-600]=\"isSeverity(option, 'info')\"\r\n                  [class.bg-amber-50]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'warn')\r\n                  \"\r\n                  [class.text-amber-700]=\"isSeverity(option, 'warn')\"\r\n                  [class.bg-red-50]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'danger')\r\n                  \"\r\n                  [class.text-red-600]=\"isSeverity(option, 'danger')\"\r\n                  [class.bg-purple-50]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'help')\r\n                  \"\r\n                  [class.text-purple-600]=\"isSeverity(option, 'help')\"\r\n                  [class.bg-zinc-100]=\"\r\n                    isActiveOption(option) && isSeverity(option, 'contrast')\r\n                  \"\r\n                  [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\r\n                  [class.font-semibold]=\"isActiveOption(option)\"\r\n                  [class.text-surface-700]=\"\r\n                    !isActiveOption(option) && !hasNonPrimarySeverity(option)\r\n                  \"\r\n                  [class.hover:bg-surface-100]=\"!isActiveOption(option)\"\r\n                  [class.cursor-not-allowed]=\"\r\n                    disabled() || isOptionDisabled(option)\r\n                  \"\r\n                  [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n                  [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n                  (click)=\"onOptionSelect(option); morePopover.hide()\"\r\n                >\r\n                  <mt-avatar\r\n                    [icon]=\"resolveIconOrDefault(option)\"\r\n                    size=\"normal\"\r\n                    shape=\"circle\"\r\n                    styleClass=\"!bg-surface-100 !text-surface-600\"\r\n                  />\r\n                  <span class=\"flex-1 truncate text-start\">\r\n                    {{ resolveLabel(option) }}\r\n                  </span>\r\n                  @if (hasCountBadge(option)) {\r\n                    <span\r\n                      class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\r\n                      [class.bg-primary-100]=\"isSeverity(option, 'primary')\"\r\n                      [class.text-primary-700]=\"isSeverity(option, 'primary')\"\r\n                      [class.bg-slate-100]=\"isSeverity(option, 'secondary')\"\r\n                      [class.text-slate-700]=\"isSeverity(option, 'secondary')\"\r\n                      [class.bg-emerald-50]=\"isSeverity(option, 'success')\"\r\n                      [class.text-emerald-700]=\"isSeverity(option, 'success')\"\r\n                      [class.bg-sky-50]=\"isSeverity(option, 'info')\"\r\n                      [class.text-sky-700]=\"isSeverity(option, 'info')\"\r\n                      [class.bg-amber-50]=\"isSeverity(option, 'warn')\"\r\n                      [class.text-amber-800]=\"isSeverity(option, 'warn')\"\r\n                      [class.bg-red-50]=\"isSeverity(option, 'danger')\"\r\n                      [class.text-red-700]=\"isSeverity(option, 'danger')\"\r\n                      [class.bg-purple-50]=\"isSeverity(option, 'help')\"\r\n                      [class.text-purple-700]=\"isSeverity(option, 'help')\"\r\n                      [class.bg-zinc-100]=\"isSeverity(option, 'contrast')\"\r\n                      [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\r\n                      [class.bg-surface-100]=\"\r\n                        !isActiveOption(option) &&\r\n                        !hasNonPrimarySeverity(option)\r\n                      \"\r\n                      [class.text-surface-500]=\"\r\n                        !isActiveOption(option) &&\r\n                        !hasNonPrimarySeverity(option)\r\n                      \"\r\n                    >\r\n                      {{ resolveBadge(option) }}\r\n                    </span>\r\n                  }\r\n                </button>\r\n              } @empty {\r\n                <div class=\"px-3 py-4 text-center text-sm text-surface-500\">\r\n                  {{ \"components.tabs.no-results\" | transloco }}\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </p-popover>\r\n      </div>\r\n    }\r\n  </div>\r\n} @else {\r\n  <p-selectbutton\r\n    [options]=\"options()\"\r\n    [(ngModel)]=\"active\"\r\n    (ngModelChange)=\"onTabChange($event)\"\r\n    [optionLabel]=\"optionLabel()\"\r\n    [optionValue]=\"optionValue()\"\r\n    styleClass=\"my-tabs-button\"\r\n    [size]=\"size()\"\r\n    [fluid]=\"fluid()\"\r\n    [disabled]=\"disabled()\"\r\n    unselectable\r\n  >\r\n    <ng-template #item let-option>\r\n      <span class=\"inline-flex min-w-0 items-center gap-1.5\">\r\n        <span class=\"truncate\">{{ resolveLabel(option) }}</span>\r\n\r\n        @if (hasBadge(option)) {\r\n          <span\r\n            class=\"relative z-10 min-w-5 ms-auto inline-flex items-center justify-center rounded-full p-1 text-xs leading-none\"\r\n            [class.bg-primary]=\"isActiveOption(option)\"\r\n            [class.text-white]=\"isActiveOption(option)\"\r\n            [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n            [class.text-surface-600]=\"!isActiveOption(option)\"\r\n          >\r\n            {{ resolveBadge(option) }}\r\n          </span>\r\n        }\r\n      </span>\r\n    </ng-template>\r\n  </p-selectbutton>\r\n}\r\n", styles: [":host{min-width:0}\n"] }]
        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], moreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreLabel", required: false }] }], defaultIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultIcon", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabsContainer: [{ type: i0.ViewChild, args: ['tabsContainer', { isSignal: true }] }], measureRow: [{ type: i0.ViewChild, args: ['measureRow', { isSignal: true }] }], morePopover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Popover), { isSignal: true }] }], searchThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchThreshold", required: false }] }] } });

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

export { Tabs };
//# sourceMappingURL=masterteam-components-tabs.mjs.map
