@masterteam/components 0.0.155 → 0.0.157
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/common.css +1 -1
- package/assets/i18n/ar.json +2 -0
- package/assets/i18n/en.json +2 -0
- package/fesm2022/masterteam-components-date-field.mjs +9 -0
- package/fesm2022/masterteam-components-date-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-drawer.mjs +75 -5
- package/fesm2022/masterteam-components-drawer.mjs.map +1 -1
- package/fesm2022/masterteam-components-dynamic-drawer.mjs +159 -19
- package/fesm2022/masterteam-components-dynamic-drawer.mjs.map +1 -1
- package/fesm2022/masterteam-components-entities.mjs +7 -3
- package/fesm2022/masterteam-components-entities.mjs.map +1 -1
- package/fesm2022/masterteam-components-runtime-action.mjs +363 -0
- package/fesm2022/masterteam-components-runtime-action.mjs.map +1 -0
- package/fesm2022/masterteam-components-table.mjs +2 -2
- package/fesm2022/masterteam-components-table.mjs.map +1 -1
- package/fesm2022/masterteam-components-tabs.mjs +2 -2
- package/fesm2022/masterteam-components-tabs.mjs.map +1 -1
- package/fesm2022/masterteam-components.mjs +1 -1
- package/fesm2022/masterteam-components.mjs.map +1 -1
- package/package.json +5 -1
- package/types/masterteam-components-drawer.d.ts +11 -1
- package/types/masterteam-components-dynamic-drawer.d.ts +28 -0
- package/types/masterteam-components-entities.d.ts +5 -1
- package/types/masterteam-components-runtime-action.d.ts +102 -0
|
@@ -174,14 +174,14 @@ class Tabs {
|
|
|
174
174
|
return this.resolveValue(option) ?? index;
|
|
175
175
|
}
|
|
176
176
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
177
|
-
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"] }] });
|
|
177
|
+
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-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]=\"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"] }] });
|
|
178
178
|
}
|
|
179
179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tabs, decorators: [{
|
|
180
180
|
type: Component,
|
|
181
181
|
args: [{ selector: 'mt-tabs', standalone: true, imports: [Icon, SelectButton, FormsModule, Button, Popover], host: {
|
|
182
182
|
class: 'grid min-w-0 gap-1',
|
|
183
183
|
'[class.w-full]': 'fluid()',
|
|
184
|
-
}, 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"] }]
|
|
184
|
+
}, 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-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]=\"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"] }]
|
|
185
185
|
}], 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 }] }] } });
|
|
186
186
|
|
|
187
187
|
/**
|
|
@@ -1 +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 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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"}
|
|
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 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-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]=\"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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"}
|
|
@@ -545,7 +545,7 @@ function provideMTConfirmation() {
|
|
|
545
545
|
|
|
546
546
|
const DEFAULT_MT_DATE_FORMATS = {
|
|
547
547
|
date: 'dd/MM/yyyy',
|
|
548
|
-
dateTime: '
|
|
548
|
+
dateTime: 'dd/MM/yyyy HH:mm',
|
|
549
549
|
};
|
|
550
550
|
const MT_DATE_FORMATS = new InjectionToken('MT_DATE_FORMATS', {
|
|
551
551
|
factory: () => ({ ...DEFAULT_MT_DATE_FORMATS }),
|