@masterteam/components 0.0.149 → 0.0.151

package/fesm2022/masterteam-components-tabs.mjs

@@ -1,9 +1,11 @@
 import * as i0 from '@angular/core';
-import { input, model, output, booleanAttribute, effect, Component } from '@angular/core';
+import { input, model, output, booleanAttribute, inject, DestroyRef, viewChild, signal, computed, effect, afterNextRender, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { Icon } from '@masterteam/icons';
 import { SelectButton } from 'primeng/selectbutton';
+import { Popover } from 'primeng/popover';
+import { Button } from '@masterteam/components/button';
 
 class Tabs {
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
@@ -11,11 +13,21 @@ class Tabs {
     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('More', ...(ngDevMode ? [{ debugName: "moreLabel" }] : /* 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 });
-    // TODO: make a decision about this maybe we should remove it
+    destroyRef = inject(DestroyRef);
+    tabsContainer = viewChild('tabsContainer', ...(ngDevMode ? [{ debugName: "tabsContainer" }] : /* istanbul ignore next */ []));
+    measureRow = viewChild('measureRow', ...(ngDevMode ? [{ debugName: "measureRow" }] : /* istanbul ignore next */ []));
+    resizeObserver;
+    measureHandle = 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 */ []));
     constructor() {
         effect(() => {
             const options = this.options();
@@ -28,6 +40,87 @@ class Tabs {
                 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);
+            }
+        });
+    }
+    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);
@@ -63,6 +156,14 @@ class Tabs {
     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;
+    }
     isActiveOption(option) {
         return Object.is(this.active(), this.resolveValue(option));
     }
@@ -73,15 +174,15 @@ class Tabs {
         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 }, 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 } }, outputs: { active: "activeChange", onChange: "onChange" }, host: { properties: { "class.w-full": "fluid()" }, classAttribute: "grid gap-1" }, 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-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 {\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}\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"] }] });
+    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 }, 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 } }, 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 }], 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-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-hidden\"\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-hidden 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]=\"isActiveOption(option)\"\r\n          [class.text-primary]=\"isActiveOption(option)\"\r\n          [class.font-semibold]=\"isActiveOption(option)\"\r\n          [class.border-transparent]=\"!isActiveOption(option)\"\r\n          [class.text-surface-700]=\"!isActiveOption(option)\"\r\n          [class.font-medium]=\"!isActiveOption(option)\"\r\n          [class.hover:text-primary-600]=\"\r\n            !isActiveOption(option) && !(disabled() || isOptionDisabled(option))\r\n          \"\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]=\"isActiveOption(option)\"\r\n              [class.text-primary-700]=\"isActiveOption(option)\"\r\n              [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n              [class.text-surface-500]=\"!isActiveOption(option)\"\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 #morePopover appendTo=\"body\">\r\n          <div class=\"flex flex-col min-w-40\">\r\n            @for (\r\n              option of overflowOptions();\r\n              track trackOption(option, $index)\r\n            ) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-sm transition-colors\"\r\n                [class.bg-primary-50]=\"isActiveOption(option)\"\r\n                [class.text-primary]=\"isActiveOption(option)\"\r\n                [class.font-semibold]=\"isActiveOption(option)\"\r\n                [class.text-surface-700]=\"!isActiveOption(option)\"\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                @if (resolveIcon(option); as icon) {\r\n                  <mt-icon [icon]=\"icon\" class=\"text-base\" />\r\n                }\r\n                <span class=\"flex-1 truncate\">{{ 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                    [class.bg-primary-100]=\"isActiveOption(option)\"\r\n                    [class.text-primary-700]=\"isActiveOption(option)\"\r\n                    [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n                    [class.text-surface-500]=\"!isActiveOption(option)\"\r\n                  >\r\n                    {{ resolveBadge(option) }}\r\n                  </span>\r\n                }\r\n              </button>\r\n            }\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}\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"] }] });
 }
 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], host: {
-                        class: 'grid gap-1',
+            args: [{ selector: 'mt-tabs', standalone: true, imports: [Icon, SelectButton, FormsModule, Button, Popover], 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-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 {\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}\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 }] }], 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 }] }] } });
+                    }, 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-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-hidden\"\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-hidden 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]=\"isActiveOption(option)\"\r\n          [class.text-primary]=\"isActiveOption(option)\"\r\n          [class.font-semibold]=\"isActiveOption(option)\"\r\n          [class.border-transparent]=\"!isActiveOption(option)\"\r\n          [class.text-surface-700]=\"!isActiveOption(option)\"\r\n          [class.font-medium]=\"!isActiveOption(option)\"\r\n          [class.hover:text-primary-600]=\"\r\n            !isActiveOption(option) && !(disabled() || isOptionDisabled(option))\r\n          \"\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]=\"isActiveOption(option)\"\r\n              [class.text-primary-700]=\"isActiveOption(option)\"\r\n              [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n              [class.text-surface-500]=\"!isActiveOption(option)\"\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 #morePopover appendTo=\"body\">\r\n          <div class=\"flex flex-col min-w-40\">\r\n            @for (\r\n              option of overflowOptions();\r\n              track trackOption(option, $index)\r\n            ) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-sm transition-colors\"\r\n                [class.bg-primary-50]=\"isActiveOption(option)\"\r\n                [class.text-primary]=\"isActiveOption(option)\"\r\n                [class.font-semibold]=\"isActiveOption(option)\"\r\n                [class.text-surface-700]=\"!isActiveOption(option)\"\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                @if (resolveIcon(option); as icon) {\r\n                  <mt-icon [icon]=\"icon\" class=\"text-base\" />\r\n                }\r\n                <span class=\"flex-1 truncate\">{{ 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                    [class.bg-primary-100]=\"isActiveOption(option)\"\r\n                    [class.text-primary-700]=\"isActiveOption(option)\"\r\n                    [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n                    [class.text-surface-500]=\"!isActiveOption(option)\"\r\n                  >\r\n                    {{ resolveBadge(option) }}\r\n                  </span>\r\n                }\r\n              </button>\r\n            }\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}\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 }] }], 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 }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/masterteam-components-tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"masterteam-components-tabs.mjs","sources":["../../../../packages/masterteam/components/tabs/tabs.ts","../../../../packages/masterteam/components/tabs/tabs.html","../../../../packages/masterteam/components/tabs/masterteam-components-tabs.ts"],"sourcesContent":["import {\r\n  booleanAttribute,\r\n  Component,\r\n  effect,\r\n  input,\r\n  model,\r\n  output,\r\n} from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { MTIcon, Icon } from '@masterteam/icons';\r\nimport { SelectButton } from 'primeng/selectbutton';\r\n\r\nexport interface OptionItem {\r\n  label?: string;\r\n  value?: any;\r\n  icon?: MTIcon | null;\r\n  badge?: number | string | null;\r\n  disabled?: boolean;\r\n  [key: string]: unknown;\r\n}\r\n\r\n@Component({\r\n  selector: 'mt-tabs',\r\n  standalone: true,\r\n  imports: [Icon, SelectButton, FormsModule],\r\n  templateUrl: './tabs.html',\r\n  styleUrls: ['./tabs.scss'],\r\n  host: {\r\n    class: 'grid gap-1',\r\n    '[class.w-full]': 'fluid()',\r\n  },\r\n})\r\nexport class Tabs {\r\n  options = input<OptionItem[]>([]);\r\n  optionLabel = input<string>('label');\r\n  optionValue = input<string>('value');\r\n  active = model<any>(null);\r\n  readonly mode = input<'horizontal' | 'vertical'>('horizontal');\r\n\r\n  onChange = output<any>();\r\n\r\n  readonly size = input<'small' | 'large' | undefined>();\r\n  readonly fluid = input<boolean, unknown>(false, {\r\n    transform: booleanAttribute,\r\n  });\r\n  disabled = input<boolean, unknown>(false, {\r\n    transform: booleanAttribute,\r\n  });\r\n\r\n  // TODO: make a decision about this maybe we should remove it\r\n  constructor() {\r\n    effect(() => {\r\n      const options = this.options();\r\n      const active = this.active();\r\n      if (!options.length) {\r\n        return;\r\n      }\r\n\r\n      const hasActiveOption = options.some((option) =>\r\n        Object.is(this.resolveValue(option), active),\r\n      );\r\n      if (!hasActiveOption) {\r\n        this.active.set(this.resolveValue(options[0]));\r\n      }\r\n    });\r\n  }\r\n\r\n  onTabChange(value: any) {\r\n    this.onChange.emit(value);\r\n  }\r\n\r\n  onOptionSelect(option: OptionItem): void {\r\n    if (this.disabled() || this.isOptionDisabled(option)) {\r\n      return;\r\n    }\r\n\r\n    const value = this.resolveValue(option);\r\n    this.active.set(value);\r\n    this.onTabChange(value);\r\n  }\r\n\r\n  resolveLabel(option: OptionItem): string {\r\n    const labelKey = this.optionLabel();\r\n    const label =\r\n      option && typeof option === 'object'\r\n        ? (option as Record<string, unknown>)[labelKey]\r\n        : option;\r\n\r\n    return typeof label === 'string' ? label : String(label ?? '');\r\n  }\r\n\r\n  resolveValue(option: OptionItem): unknown {\r\n    const valueKey = this.optionValue();\r\n    if (option && typeof option === 'object' && valueKey in option) {\r\n      return (option as Record<string, unknown>)[valueKey];\r\n    }\r\n\r\n    return option;\r\n  }\r\n\r\n  resolveIcon(option: OptionItem): MTIcon | null {\r\n    return typeof option?.icon === 'string' ? option.icon : null;\r\n  }\r\n\r\n  resolveBadge(option: OptionItem): number | string | null {\r\n    return option?.badge ?? null;\r\n  }\r\n\r\n  hasBadge(option: OptionItem): boolean {\r\n    return option?.badge !== null && option?.badge !== undefined;\r\n  }\r\n\r\n  isActiveOption(option: OptionItem): boolean {\r\n    return Object.is(this.active(), this.resolveValue(option));\r\n  }\r\n\r\n  isOptionDisabled(option: OptionItem): boolean {\r\n    return !!option?.disabled;\r\n  }\r\n\r\n  trackOption(option: OptionItem, index: number): unknown {\r\n    return this.resolveValue(option) ?? index;\r\n  }\r\n}\r\n","@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-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 {\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}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"masterteam-components-tabs.mjs","sources":["../../../../packages/masterteam/components/tabs/tabs.ts","../../../../packages/masterteam/components/tabs/tabs.html","../../../../packages/masterteam/components/tabs/masterteam-components-tabs.ts"],"sourcesContent":["import {\r\n  afterNextRender,\r\n  booleanAttribute,\r\n  Component,\r\n  computed,\r\n  DestroyRef,\r\n  effect,\r\n  ElementRef,\r\n  inject,\r\n  input,\r\n  model,\r\n  output,\r\n  signal,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { MTIcon, Icon } from '@masterteam/icons';\r\nimport { SelectButton } from 'primeng/selectbutton';\r\nimport { Popover } from 'primeng/popover';\r\nimport { Button } from '@masterteam/components/button';\r\n\r\nexport interface OptionItem {\r\n  label?: string;\r\n  value?: any;\r\n  icon?: MTIcon | null;\r\n  badge?: number | string | null;\r\n  disabled?: boolean;\r\n  [key: string]: unknown;\r\n}\r\n\r\n@Component({\r\n  selector: 'mt-tabs',\r\n  standalone: true,\r\n  imports: [Icon, SelectButton, FormsModule, Button, Popover],\r\n  templateUrl: './tabs.html',\r\n  styleUrls: ['./tabs.scss'],\r\n  host: {\r\n    class: 'grid min-w-0 gap-1',\r\n    '[class.w-full]': 'fluid()',\r\n  },\r\n})\r\nexport class Tabs {\r\n  options = input<OptionItem[]>([]);\r\n  optionLabel = input<string>('label');\r\n  optionValue = input<string>('value');\r\n  active = model<any>(null);\r\n  readonly mode = input<'horizontal' | 'vertical' | 'underline'>('horizontal');\r\n  readonly moreLabel = input<string>('More');\r\n\r\n  onChange = output<any>();\r\n\r\n  readonly size = input<'small' | 'large' | undefined>();\r\n  readonly fluid = input<boolean, unknown>(false, {\r\n    transform: booleanAttribute,\r\n  });\r\n  disabled = input<boolean, unknown>(false, {\r\n    transform: booleanAttribute,\r\n  });\r\n\r\n  private readonly destroyRef = inject(DestroyRef);\r\n  private readonly tabsContainer =\r\n    viewChild<ElementRef<HTMLElement>>('tabsContainer');\r\n  private readonly measureRow =\r\n    viewChild<ElementRef<HTMLElement>>('measureRow');\r\n  private resizeObserver?: ResizeObserver;\r\n  private measureHandle = 0;\r\n\r\n  readonly visibleCount = signal<number>(Number.MAX_SAFE_INTEGER);\r\n  readonly visibleOptions = computed(() =>\r\n    this.options().slice(0, this.visibleCount()),\r\n  );\r\n  readonly overflowOptions = computed(() =>\r\n    this.options().slice(this.visibleCount()),\r\n  );\r\n  readonly hasOverflow = computed(() => this.overflowOptions().length > 0);\r\n  readonly isActiveInOverflow = computed(() =>\r\n    this.overflowOptions().some((option) => this.isActiveOption(option)),\r\n  );\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      const options = this.options();\r\n      const active = this.active();\r\n      if (!options.length) {\r\n        return;\r\n      }\r\n\r\n      const hasActiveOption = options.some((option) =>\r\n        Object.is(this.resolveValue(option), active),\r\n      );\r\n      if (!hasActiveOption) {\r\n        this.active.set(this.resolveValue(options[0]));\r\n      }\r\n    });\r\n\r\n    afterNextRender(() => {\r\n      if (this.mode() !== 'underline') return;\r\n      this.setupResizeObserver();\r\n      this.scheduleMeasure();\r\n    });\r\n\r\n    effect(() => {\r\n      // Re-measure when options or mode change.\r\n      this.options();\r\n      if (this.mode() !== 'underline') return;\r\n      this.scheduleMeasure();\r\n    });\r\n\r\n    this.destroyRef.onDestroy(() => {\r\n      this.resizeObserver?.disconnect();\r\n      if (this.measureHandle) {\r\n        cancelAnimationFrame(this.measureHandle);\r\n      }\r\n    });\r\n  }\r\n\r\n  private setupResizeObserver(): void {\r\n    const container = this.tabsContainer()?.nativeElement;\r\n    if (!container || typeof ResizeObserver === 'undefined') return;\r\n\r\n    this.resizeObserver = new ResizeObserver(() => this.scheduleMeasure());\r\n    this.resizeObserver.observe(container);\r\n  }\r\n\r\n  private scheduleMeasure(): void {\r\n    if (this.measureHandle) {\r\n      cancelAnimationFrame(this.measureHandle);\r\n    }\r\n    this.measureHandle = requestAnimationFrame(() => {\r\n      this.measureHandle = 0;\r\n      this.measureAndUpdate();\r\n    });\r\n  }\r\n\r\n  private measureAndUpdate(): void {\r\n    const container = this.tabsContainer()?.nativeElement;\r\n    const measureRow = this.measureRow()?.nativeElement;\r\n    if (!container || !measureRow) return;\r\n\r\n    const optionsCount = this.options().length;\r\n    if (optionsCount === 0) {\r\n      this.visibleCount.set(0);\r\n      return;\r\n    }\r\n\r\n    if (container.clientWidth === 0) return;\r\n\r\n    // Inner width excludes the container's horizontal padding so we compare\r\n    // against the actual space available to the flex tabs row.\r\n    const style = getComputedStyle(container);\r\n    const paddingX =\r\n      (parseFloat(style.paddingLeft) || 0) +\r\n      (parseFloat(style.paddingRight) || 0);\r\n    const innerWidth = container.clientWidth - paddingX;\r\n    if (innerWidth <= 0) return;\r\n\r\n    const tabWidths = Array.from(measureRow.children).map(\r\n      (el) => (el as HTMLElement).getBoundingClientRect().width,\r\n    );\r\n\r\n    if (tabWidths.length === 0) return;\r\n\r\n    // Approximate gap-0.5 between tabs (2px).\r\n    const gap = 2;\r\n    const totalWidth =\r\n      tabWidths.reduce((sum, width) => sum + width, 0) +\r\n      Math.max(0, tabWidths.length - 1) * gap;\r\n\r\n    // Everything fits — no more button needed.\r\n    if (totalWidth <= innerWidth) {\r\n      this.visibleCount.set(tabWidths.length);\r\n      return;\r\n    }\r\n\r\n    // Reserve space for the More button (icon + label ~ 88px).\r\n    const moreButtonReserve = 96;\r\n    const available = innerWidth - moreButtonReserve;\r\n\r\n    let cumulative = 0;\r\n    let visibleCount = 0;\r\n    for (let i = 0; i < tabWidths.length; i++) {\r\n      const next = cumulative + tabWidths[i] + (i > 0 ? gap : 0);\r\n      if (next > available) break;\r\n      cumulative = next;\r\n      visibleCount++;\r\n    }\r\n\r\n    this.visibleCount.set(Math.max(1, visibleCount));\r\n  }\r\n\r\n  onTabChange(value: any) {\r\n    this.onChange.emit(value);\r\n  }\r\n\r\n  onOptionSelect(option: OptionItem): void {\r\n    if (this.disabled() || this.isOptionDisabled(option)) {\r\n      return;\r\n    }\r\n\r\n    const value = this.resolveValue(option);\r\n    this.active.set(value);\r\n    this.onTabChange(value);\r\n  }\r\n\r\n  resolveLabel(option: OptionItem): string {\r\n    const labelKey = this.optionLabel();\r\n    const label =\r\n      option && typeof option === 'object'\r\n        ? (option as Record<string, unknown>)[labelKey]\r\n        : option;\r\n\r\n    return typeof label === 'string' ? label : String(label ?? '');\r\n  }\r\n\r\n  resolveValue(option: OptionItem): unknown {\r\n    const valueKey = this.optionValue();\r\n    if (option && typeof option === 'object' && valueKey in option) {\r\n      return (option as Record<string, unknown>)[valueKey];\r\n    }\r\n\r\n    return option;\r\n  }\r\n\r\n  resolveIcon(option: OptionItem): MTIcon | null {\r\n    return typeof option?.icon === 'string' ? option.icon : null;\r\n  }\r\n\r\n  resolveBadge(option: OptionItem): number | string | null {\r\n    return option?.badge ?? null;\r\n  }\r\n\r\n  hasBadge(option: OptionItem): boolean {\r\n    return option?.badge !== null && option?.badge !== undefined;\r\n  }\r\n\r\n  hasCountBadge(option: OptionItem): boolean {\r\n    const badge = option?.badge;\r\n    if (badge === null || badge === undefined || badge === '') {\r\n      return false;\r\n    }\r\n    const numeric = typeof badge === 'number' ? badge : Number(badge);\r\n    return Number.isNaN(numeric) ? true : numeric > 0;\r\n  }\r\n\r\n  isActiveOption(option: OptionItem): boolean {\r\n    return Object.is(this.active(), this.resolveValue(option));\r\n  }\r\n\r\n  isOptionDisabled(option: OptionItem): boolean {\r\n    return !!option?.disabled;\r\n  }\r\n\r\n  trackOption(option: OptionItem, index: number): unknown {\r\n    return this.resolveValue(option) ?? index;\r\n  }\r\n}\r\n","@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-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-hidden\"\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-hidden 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]=\"isActiveOption(option)\"\r\n          [class.text-primary]=\"isActiveOption(option)\"\r\n          [class.font-semibold]=\"isActiveOption(option)\"\r\n          [class.border-transparent]=\"!isActiveOption(option)\"\r\n          [class.text-surface-700]=\"!isActiveOption(option)\"\r\n          [class.font-medium]=\"!isActiveOption(option)\"\r\n          [class.hover:text-primary-600]=\"\r\n            !isActiveOption(option) && !(disabled() || isOptionDisabled(option))\r\n          \"\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]=\"isActiveOption(option)\"\r\n              [class.text-primary-700]=\"isActiveOption(option)\"\r\n              [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n              [class.text-surface-500]=\"!isActiveOption(option)\"\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 #morePopover appendTo=\"body\">\r\n          <div class=\"flex flex-col min-w-40\">\r\n            @for (\r\n              option of overflowOptions();\r\n              track trackOption(option, $index)\r\n            ) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-sm transition-colors\"\r\n                [class.bg-primary-50]=\"isActiveOption(option)\"\r\n                [class.text-primary]=\"isActiveOption(option)\"\r\n                [class.font-semibold]=\"isActiveOption(option)\"\r\n                [class.text-surface-700]=\"!isActiveOption(option)\"\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                @if (resolveIcon(option); as icon) {\r\n                  <mt-icon [icon]=\"icon\" class=\"text-base\" />\r\n                }\r\n                <span class=\"flex-1 truncate\">{{ 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                    [class.bg-primary-100]=\"isActiveOption(option)\"\r\n                    [class.text-primary-700]=\"isActiveOption(option)\"\r\n                    [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n                    [class.text-surface-500]=\"!isActiveOption(option)\"\r\n                  >\r\n                    {{ resolveBadge(option) }}\r\n                  </span>\r\n                }\r\n              </button>\r\n            }\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}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@masterteam/components",
-  "version": "0.0.149",
+  "version": "0.0.151",
   "publishConfig": {
     "directory": "../../../dist/masterteam/components",
     "linkDirectory": true,

package/types/masterteam-components-entities.d.ts

@@ -5,6 +5,37 @@ import { HttpContext } from '@angular/common/http';
 import { MTIcon } from '@masterteam/icons';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 
+interface ComparisonValueSide {
+    raw: unknown;
+    value: unknown;
+    display?: string | null;
+}
+interface ValueComparison {
+    kind: 'Value';
+    oldValue: ComparisonValueSide;
+    newValue: ComparisonValueSide;
+}
+interface EntityComparisonField {
+    propertyKey: string;
+    label: string;
+    value: unknown;
+    display?: string | null;
+}
+type EntityComparisonOperation = 'CreateRecord' | 'UpdateRecord' | 'DeleteRecord';
+interface EntityListComparisonRow {
+    kind: 'ModuleRecord';
+    operation: EntityComparisonOperation;
+    entityId: number;
+    oldValues: EntityComparisonField[];
+    newValues: EntityComparisonField[];
+}
+interface EntityListComparison {
+    kind: 'EntityList';
+    targetModuleKey: string;
+    rows: EntityListComparisonRow[];
+}
+type PropertyValueComparison = ValueComparison | EntityListComparison;
+
 type EntityViewType = 'Text' | 'LongText' | 'Date' | 'DateTime' | 'Percentage' | 'Status' | 'Currency' | 'Checkbox' | 'User' | 'Lookup' | 'Attachment' | 'LookupMatrix' | 'LeafDetails';
 type EntityLabelPosition = 'top' | 'bottom';
 /** Entity size – controls column span (1-24) inside a 24-column grid */
@@ -142,6 +173,8 @@ interface EntityData {
     viewType: EntityViewType;
     type?: string;
     configuration?: EntityConfiguration;
+    /** Present on submitted ChangeRequest records — frozen old→new snapshot. */
+    comparison?: PropertyValueComparison;
 }
 /** Emitted when an entity is resized via the drag handle */
 interface EntityResizeEvent {
@@ -371,24 +404,90 @@ declare function expandLeafDetailsEntity(entity: EntityData): EntityData[];
 declare function buildDisplayEntities(entities: EntityData[]): EntityData[];
 
 declare class EntityPreview {
-    /** Single entity data to display */
     readonly data: _angular_core.InputSignal<EntityData>;
     readonly attachmentShape: _angular_core.InputSignal<"compact" | "default">;
-    readonly previewType: _angular_core.Signal<"Text" | "LongText" | "Date" | "DateTime" | "Percentage" | "Status" | "Currency" | "Checkbox" | "User" | "Lookup" | "Attachment" | "LeafDetails">;
+    readonly comparisonKind: _angular_core.Signal<"Value" | "EntityList" | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EntityPreview, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EntityPreview, "mt-entity-preview", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "attachmentShape": { "alias": "attachmentShape"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+declare class EntityPreviewBody {
+    readonly data: _angular_core.InputSignal<EntityData>;
+    readonly attachmentShape: _angular_core.InputSignal<"compact" | "default">;
+    readonly previewType: _angular_core.Signal<"Text" | "LongText" | "Date" | "DateTime" | "Percentage" | "Status" | "Currency" | "Checkbox" | "User" | "Lookup" | "Attachment" | "LeafDetails">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EntityPreviewBody, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EntityPreviewBody, "mt-entity-preview-body", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "attachmentShape": { "alias": "attachmentShape"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class ComparisonValue {
+    readonly data: _angular_core.InputSignal<EntityData>;
+    readonly comparison: _angular_core.Signal<ValueComparison | null>;
+    readonly oldEntity: _angular_core.Signal<EntityData | null>;
+    readonly newEntity: _angular_core.Signal<EntityData | null>;
+    private buildSide;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComparisonValue, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComparisonValue, "mt-comparison-value", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface OperationBadge {
+    label: string;
+    classes: string;
+}
+declare class ComparisonEntityList {
+    readonly data: _angular_core.InputSignal<EntityData>;
+    readonly comparison: _angular_core.Signal<EntityListComparison | null>;
+    readonly rows: _angular_core.Signal<EntityListComparisonRow[]>;
+    readonly targetModuleKey: _angular_core.Signal<string>;
+    readonly label: _angular_core.Signal<string>;
+    badgeFor(op: EntityComparisonOperation): OperationBadge;
+    displayField(value: unknown, display?: string | null): string;
+    rowId(_i: number, row: EntityListComparisonRow): number | string;
+    oldField(row: EntityListComparisonRow, propertyKey: string): {
+        value: unknown;
+        display?: string | null;
+    } | undefined;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComparisonEntityList, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComparisonEntityList, "mt-comparison-entity-list", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface EntityClickEvent {
+    entity: EntityData;
+    key: string;
+    source: MouseEvent;
+}
 declare class EntitiesPreview {
     /** Array of entity data to display */
     readonly entities: _angular_core.InputSignal<EntityData[]>;
     readonly attachmentShape: _angular_core.InputSignal<"compact" | "default">;
+    /**
+     * Set of entity keys that should appear interactive (cursor pointer,
+     * clicks emit). Pass `new Set([...])` from a computed signal in the host
+     * for reactive enabling — when the host's set changes, Angular re-renders
+     * via its normal change detection, no manual subscriptions required.
+     */
+    readonly clickableKeys: _angular_core.InputSignal<ReadonlySet<string>>;
+    /**
+     * Set of entity keys that should render with the "active" treatment
+     * (e.g. currently the filter source). Same reactive pattern as
+     * `clickableKeys` — host owns a computed signal and passes the value.
+     */
+    readonly activeKeys: _angular_core.InputSignal<ReadonlySet<string>>;
+    /**
+     * Emits when an individual entity slot is clicked. Only fires when the
+     * entity's key is present in `clickableKeys`.
+     */
+    readonly entityClick: _angular_core.OutputEmitterRef<EntityClickEvent>;
     /** Entities expanded and sorted by order */
     readonly displayEntities: _angular_core.Signal<EntityData[]>;
     /** Returns the grid-column span for a given entity size (1-24) */
     getColSpan(entity: EntityData): string;
+    /** Stable key resolution shared with the host — must agree on order. */
+    private resolveKey;
+    protected isClickable(entity: EntityData): boolean;
+    protected isActive(entity: EntityData): boolean;
+    protected onEntityClick(source: MouseEvent, entity: EntityData): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EntitiesPreview, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EntitiesPreview, "mt-entities-preview", never, { "entities": { "alias": "entities"; "required": true; "isSignal": true; }; "attachmentShape": { "alias": "attachmentShape"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EntitiesPreview, "mt-entities-preview", never, { "entities": { "alias": "entities"; "required": true; "isSignal": true; }; "attachmentShape": { "alias": "attachmentShape"; "required": false; "isSignal": true; }; "clickableKeys": { "alias": "clickableKeys"; "required": false; "isSignal": true; }; "activeKeys": { "alias": "activeKeys"; "required": false; "isSignal": true; }; }, { "entityClick": "entityClick"; }, never, never, true, never>;
 }
 
 /**
@@ -459,5 +558,5 @@ declare class EntitiesManage extends EntitiesResizeBase {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EntitiesManage, "mt-entities-manage", never, { "entities": { "alias": "entities"; "required": true; "isSignal": true; }; }, { "entities": "entitiesChange"; "entitiesReordered": "entitiesReordered"; "entityClicked": "entityClicked"; }, never, never, true, never>;
 }
 
-export { EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityAttachment, EntityCheckbox, EntityCurrency, EntityDate, EntityField, EntityLeafDetails, EntityLongText, EntityLookup, EntityPercentage, EntityPreview, EntityStatus, EntityText, EntityUser, LEAF_DETAILS_KEY_SEPARATOR, buildDisplayEntities, expandLeafDetailsEntity, isLeafDetailsCatalogConfiguration, isLeafDetailsCollectionValue, isLeafDetailsRuntimeValue, isLeafDetailsSyntheticKey, isLeafDetailsValue };
-export type { EntityAttachmentItemValue, EntityAttachmentValue, EntityBaseConfig, EntityConfiguration, EntityData, EntityLabelPosition, EntityLeafDetailsConfig, EntityLookupValue, EntityPercentageConfig, EntityPropertyConfiguration, EntityResizeEvent, EntitySize, EntityStatusValue, EntityUserConfig, EntityUserValue, EntityViewType, LeafDetailsCatalogConfiguration, LeafDetailsCatalogLevelValue, LeafDetailsCatalogStatusValue, LeafDetailsEntityCollectionValue, LeafDetailsEntityValue, LeafDetailsRuntimeChildSchema, LeafDetailsRuntimeStatusCount, LeafDetailsRuntimeStatusDetails, LeafDetailsRuntimeValue, LeafDetailsStatusSummary, LeafLevelSavedConfig };
+export { ComparisonEntityList, ComparisonValue, EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityAttachment, EntityCheckbox, EntityCurrency, EntityDate, EntityField, EntityLeafDetails, EntityLongText, EntityLookup, EntityPercentage, EntityPreview, EntityPreviewBody, EntityStatus, EntityText, EntityUser, LEAF_DETAILS_KEY_SEPARATOR, buildDisplayEntities, expandLeafDetailsEntity, isLeafDetailsCatalogConfiguration, isLeafDetailsCollectionValue, isLeafDetailsRuntimeValue, isLeafDetailsSyntheticKey, isLeafDetailsValue };
+export type { ComparisonValueSide, EntityAttachmentItemValue, EntityAttachmentValue, EntityBaseConfig, EntityClickEvent, EntityComparisonField, EntityComparisonOperation, EntityConfiguration, EntityData, EntityLabelPosition, EntityLeafDetailsConfig, EntityListComparison, EntityListComparisonRow, EntityLookupValue, EntityPercentageConfig, EntityPropertyConfiguration, EntityResizeEvent, EntitySize, EntityStatusValue, EntityUserConfig, EntityUserValue, EntityViewType, LeafDetailsCatalogConfiguration, LeafDetailsCatalogLevelValue, LeafDetailsCatalogStatusValue, LeafDetailsEntityCollectionValue, LeafDetailsEntityValue, LeafDetailsRuntimeChildSchema, LeafDetailsRuntimeStatusCount, LeafDetailsRuntimeStatusDetails, LeafDetailsRuntimeValue, LeafDetailsStatusSummary, LeafLevelSavedConfig, PropertyValueComparison, ValueComparison };