@masterteam/components 0.0.175 → 0.0.177
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 +19 -1
- package/assets/i18n/en.json +19 -1
- package/fesm2022/masterteam-components-business-fields.mjs +50 -34
- package/fesm2022/masterteam-components-business-fields.mjs.map +1 -1
- package/fesm2022/masterteam-components-color-picker-field.mjs +2 -2
- package/fesm2022/masterteam-components-color-picker-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-field-validation.mjs +21 -1
- package/fesm2022/masterteam-components-field-validation.mjs.map +1 -1
- package/fesm2022/masterteam-components-formula.mjs +20 -3
- package/fesm2022/masterteam-components-formula.mjs.map +1 -1
- package/fesm2022/masterteam-components-location-field.mjs +1 -1
- package/fesm2022/masterteam-components-location-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-number-field.mjs +2 -2
- package/fesm2022/masterteam-components-number-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-property-filter-builder.mjs +1 -1
- package/fesm2022/masterteam-components-property-filter-builder.mjs.map +1 -1
- package/fesm2022/masterteam-components-select-field.mjs +2 -2
- package/fesm2022/masterteam-components-select-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-table.mjs +112 -24
- package/fesm2022/masterteam-components-table.mjs.map +1 -1
- package/fesm2022/masterteam-components-tabs.mjs +27 -2
- package/fesm2022/masterteam-components-tabs.mjs.map +1 -1
- package/fesm2022/masterteam-components-text-field.mjs +27 -8
- package/fesm2022/masterteam-components-text-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-textarea-field.mjs +28 -9
- package/fesm2022/masterteam-components-textarea-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-toggle-field.mjs +2 -2
- package/fesm2022/masterteam-components-toggle-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-treeselect-field.mjs +265 -0
- package/fesm2022/masterteam-components-treeselect-field.mjs.map +1 -0
- package/fesm2022/masterteam-components-upload-field.mjs +16 -7
- package/fesm2022/masterteam-components-upload-field.mjs.map +1 -1
- package/fesm2022/masterteam-components.mjs +2 -2
- package/fesm2022/masterteam-components.mjs.map +1 -1
- package/package.json +5 -1
- package/types/masterteam-components-business-fields.d.ts +8 -5
- package/types/masterteam-components-field-validation.d.ts +4 -2
- package/types/masterteam-components-formula.d.ts +4 -0
- package/types/masterteam-components-table.d.ts +13 -3
- package/types/masterteam-components-tabs.d.ts +7 -1
- package/types/masterteam-components-text-field.d.ts +3 -1
- package/types/masterteam-components-textarea-field.d.ts +4 -2
- package/types/masterteam-components-treeselect-field.d.ts +79 -0
- package/types/masterteam-components-upload-field.d.ts +3 -1
- package/types/masterteam-components.d.ts +5 -5
|
@@ -220,6 +220,31 @@ class Tabs {
|
|
|
220
220
|
const numeric = typeof badge === 'number' ? badge : Number(badge);
|
|
221
221
|
return Number.isNaN(numeric) ? true : numeric > 0;
|
|
222
222
|
}
|
|
223
|
+
severity(option) {
|
|
224
|
+
const severity = typeof option?.severity === 'string'
|
|
225
|
+
? option.severity.trim().toLowerCase()
|
|
226
|
+
: '';
|
|
227
|
+
if (severity === 'error')
|
|
228
|
+
return 'danger';
|
|
229
|
+
if (severity === 'warning')
|
|
230
|
+
return 'warn';
|
|
231
|
+
if (severity === 'secondary' ||
|
|
232
|
+
severity === 'success' ||
|
|
233
|
+
severity === 'info' ||
|
|
234
|
+
severity === 'warn' ||
|
|
235
|
+
severity === 'danger' ||
|
|
236
|
+
severity === 'help' ||
|
|
237
|
+
severity === 'contrast') {
|
|
238
|
+
return severity;
|
|
239
|
+
}
|
|
240
|
+
return 'primary';
|
|
241
|
+
}
|
|
242
|
+
isSeverity(option, severity) {
|
|
243
|
+
return this.severity(option) === severity;
|
|
244
|
+
}
|
|
245
|
+
hasNonPrimarySeverity(option) {
|
|
246
|
+
return this.severity(option) !== 'primary';
|
|
247
|
+
}
|
|
223
248
|
isActiveOption(option) {
|
|
224
249
|
return Object.is(this.active(), this.resolveValue(option));
|
|
225
250
|
}
|
|
@@ -230,7 +255,7 @@ class Tabs {
|
|
|
230
255
|
return this.resolveValue(option) ?? index;
|
|
231
256
|
}
|
|
232
257
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
233
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Tabs, isStandalone: true, selector: "mt-tabs", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, moreLabel: { classPropertyName: "moreLabel", publicName: "moreLabel", isSignal: true, isRequired: false, transformFunction: null }, defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, searchThreshold: { classPropertyName: "searchThreshold", publicName: "searchThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", onChange: "onChange" }, host: { properties: { "class.w-full": "fluid()" }, classAttribute: "grid min-w-0 gap-1" }, viewQueries: [{ propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true, isSignal: true }, { propertyName: "measureRow", first: true, predicate: ["measureRow"], descendants: true, isSignal: true }, { propertyName: "morePopover", first: true, predicate: Popover, descendants: true, isSignal: true }], ngImport: i0, template: "@if (mode() === \"vertical\") {\r\n <div\r\n class=\"flex min-h-0 flex-col gap-1 rounded-2xl border border-surface-200 bg-white p-2\"\r\n role=\"tablist\"\r\n aria-orientation=\"vertical\"\r\n >\r\n @for (option of options(); track trackOption(option, $index)) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"group relative flex w-full items-center gap-3 overflow-hidden rounded-lg px-3 py-2.5 text-left text-sm transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary/20\"\r\n [attr.aria-selected]=\"isActiveOption(option)\"\r\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\r\n [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n [class.bg-primary-50]=\"isActiveOption(option)\"\r\n [class.font-semibold]=\"isActiveOption(option)\"\r\n [class.text-primary-700]=\"isActiveOption(option)\"\r\n [class.text-surface-500]=\"!isActiveOption(option)\"\r\n [class.hover:bg-surface-50]=\"!isActiveOption(option)\"\r\n [class.cursor-pointer]=\"!(disabled() || isOptionDisabled(option))\"\r\n [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\r\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n (click)=\"onOptionSelect(option)\"\r\n >\r\n @if (resolveIcon(option); as icon) {\r\n <mt-icon\r\n [icon]=\"icon\"\r\n class=\"relative z-10 text-base\"\r\n [class.text-primary]=\"isActiveOption(option)\"\r\n [class.text-surface-400]=\"!isActiveOption(option)\"\r\n />\r\n }\r\n\r\n <span class=\"relative z-10 min-w-0 flex-1 truncate\">\r\n {{ resolveLabel(option) }}\r\n </span>\r\n\r\n @if (hasBadge(option)) {\r\n <span\r\n class=\"relative z-10 ms-auto inline-flex min-w-5 items-center justify-center rounded-full px-2 py-0.5 text-[11px] font-bold leading-none\"\r\n [class.bg-primary]=\"isActiveOption(option)\"\r\n [class.text-white]=\"isActiveOption(option)\"\r\n [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n [class.text-surface-600]=\"!isActiveOption(option)\"\r\n >\r\n {{ resolveBadge(option) }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n} @else if (mode() === \"underline\") {\r\n <div\r\n #tabsContainer\r\n class=\"relative flex w-full min-w-0 max-w-full items-center gap-0.5 overflow-x-clip\"\r\n role=\"tablist\"\r\n aria-orientation=\"horizontal\"\r\n >\r\n <!-- Invisible measurement ghost row: always renders every option at natural width -->\r\n <div\r\n #measureRow\r\n aria-hidden=\"true\"\r\n class=\"pointer-events-none invisible absolute top-0 left-0 flex flex-nowrap gap-0.5 -z-10\"\r\n >\r\n @for (option of options(); track trackOption(option, $index)) {\r\n <span\r\n class=\"inline-flex items-center gap-1.5 border-b-2 border-transparent px-3.5 py-2.5 text-sm font-semibold whitespace-nowrap\"\r\n >\r\n @if (resolveIcon(option); as icon) {\r\n <mt-icon [icon]=\"icon\" class=\"text-base\" />\r\n }\r\n <span>{{ resolveLabel(option) }}</span>\r\n @if (hasCountBadge(option)) {\r\n <span\r\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\r\n >\r\n {{ resolveBadge(option) }}\r\n </span>\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- Visible tabs row -->\r\n <div\r\n class=\"flex min-w-0 flex-1 items-center gap-0.5 overflow-x-clip border-b border-surface-200\"\r\n >\r\n @for (option of visibleOptions(); track trackOption(option, $index)) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"-mb-px inline-flex shrink-0 items-center gap-1.5 border-b-2 px-3.5 py-2.5 text-sm whitespace-nowrap transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary/20\"\r\n [attr.aria-selected]=\"isActiveOption(option)\"\r\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\r\n [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n [class.border-primary]=\"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\r\n #morePopover\r\n appendTo=\"body\"\r\n (onHide)=\"onOverflowPopoverHide()\"\r\n >\r\n <div class=\"flex min-w-56 flex-col\">\r\n @if (showOverflowSearch()) {\r\n <div class=\"border-b border-surface-200 p-2\">\r\n <p-iconfield iconPosition=\"left\">\r\n <p-inputicon>\r\n <mt-icon icon=\"general.search-md\" />\r\n </p-inputicon>\r\n <input\r\n pInputText\r\n type=\"text\"\r\n [value]=\"searchTerm()\"\r\n (input)=\"onOverflowSearch($any($event.target).value)\"\r\n [placeholder]=\"'components.tabs.search' | transloco\"\r\n class=\"w-full\"\r\n />\r\n </p-iconfield>\r\n </div>\r\n }\r\n <div\r\n class=\"flex max-h-80 flex-col divide-y divide-surface-100 overflow-y-auto\"\r\n >\r\n @for (\r\n option of filteredOverflowOptions();\r\n track trackOption(option, $index)\r\n ) {\r\n <button\r\n type=\"button\"\r\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 px-2 py-1 text-start text-sm transition-colors [&_.p-avatar]:h-7 [&_.p-avatar]:w-7 [&_.p-avatar]:text-sm\"\r\n [class.bg-primary-50]=\"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 <mt-avatar\r\n [icon]=\"resolveIconOrDefault(option)\"\r\n size=\"normal\"\r\n shape=\"circle\"\r\n styleClass=\"!bg-surface-100 !text-surface-600\"\r\n />\r\n <span class=\"flex-1 truncate text-start\">\r\n {{ resolveLabel(option) }}\r\n </span>\r\n @if (hasCountBadge(option)) {\r\n <span\r\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\r\n [class.bg-primary-100]=\"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 } @empty {\r\n <div class=\"px-3 py-4 text-center text-sm text-surface-500\">\r\n {{ \"components.tabs.no-results\" | transloco }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </p-popover>\r\n </div>\r\n }\r\n </div>\r\n} @else {\r\n <p-selectbutton\r\n [options]=\"options()\"\r\n [(ngModel)]=\"active\"\r\n (ngModelChange)=\"onTabChange($event)\"\r\n [optionLabel]=\"optionLabel()\"\r\n [optionValue]=\"optionValue()\"\r\n styleClass=\"my-tabs-button\"\r\n [size]=\"size()\"\r\n [fluid]=\"fluid()\"\r\n [disabled]=\"disabled()\"\r\n unselectable\r\n />\r\n}\r\n", styles: [":host{min-width:0}\n"], dependencies: [{ kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i3.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i4.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
258
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Tabs, isStandalone: true, selector: "mt-tabs", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, moreLabel: { classPropertyName: "moreLabel", publicName: "moreLabel", isSignal: true, isRequired: false, transformFunction: null }, defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, searchThreshold: { classPropertyName: "searchThreshold", publicName: "searchThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", onChange: "onChange" }, host: { properties: { "class.w-full": "fluid()" }, classAttribute: "grid min-w-0 gap-1" }, viewQueries: [{ propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true, isSignal: true }, { propertyName: "measureRow", first: true, predicate: ["measureRow"], descendants: true, isSignal: true }, { propertyName: "morePopover", first: true, predicate: Popover, descendants: true, isSignal: true }], ngImport: i0, template: "@if (mode() === \"vertical\") {\n <div\n class=\"flex min-h-0 flex-col gap-1 rounded-2xl border border-surface-200 bg-white p-2\"\n role=\"tablist\"\n aria-orientation=\"vertical\"\n >\n @for (option of options(); track trackOption(option, $index)) {\n <button\n type=\"button\"\n role=\"tab\"\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\"\n [attr.aria-selected]=\"isActiveOption(option)\"\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\n [disabled]=\"disabled() || isOptionDisabled(option)\"\n [class.bg-primary-50]=\"isActiveOption(option)\"\n [class.font-semibold]=\"isActiveOption(option)\"\n [class.text-primary-700]=\"isActiveOption(option)\"\n [class.text-surface-500]=\"!isActiveOption(option)\"\n [class.hover:bg-surface-50]=\"!isActiveOption(option)\"\n [class.cursor-pointer]=\"!(disabled() || isOptionDisabled(option))\"\n [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\n (click)=\"onOptionSelect(option)\"\n >\n @if (resolveIcon(option); as icon) {\n <mt-icon\n [icon]=\"icon\"\n class=\"relative z-10 text-base\"\n [class.text-primary]=\"isActiveOption(option)\"\n [class.text-surface-400]=\"!isActiveOption(option)\"\n />\n }\n\n <span class=\"relative z-10 min-w-0 flex-1 truncate\">\n {{ resolveLabel(option) }}\n </span>\n\n @if (hasBadge(option)) {\n <span\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\"\n [class.bg-primary]=\"isActiveOption(option)\"\n [class.text-white]=\"isActiveOption(option)\"\n [class.bg-surface-100]=\"!isActiveOption(option)\"\n [class.text-surface-600]=\"!isActiveOption(option)\"\n >\n {{ resolveBadge(option) }}\n </span>\n }\n </button>\n }\n </div>\n} @else if (mode() === \"underline\") {\n <div\n #tabsContainer\n class=\"relative flex w-full min-w-0 max-w-full items-center gap-0.5 overflow-x-clip\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n >\n <!-- Invisible measurement ghost row: always renders every option at natural width -->\n <div\n #measureRow\n aria-hidden=\"true\"\n class=\"pointer-events-none invisible absolute top-0 left-0 flex flex-nowrap gap-0.5 -z-10\"\n >\n @for (option of options(); track trackOption(option, $index)) {\n <span\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\"\n >\n @if (resolveIcon(option); as icon) {\n <mt-icon [icon]=\"icon\" class=\"text-base\" />\n }\n <span>{{ resolveLabel(option) }}</span>\n @if (hasCountBadge(option)) {\n <span\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\n >\n {{ resolveBadge(option) }}\n </span>\n }\n </span>\n }\n </div>\n\n <!-- Visible tabs row -->\n <div\n class=\"flex min-w-0 flex-1 items-center gap-0.5 overflow-x-clip border-b border-surface-200\"\n >\n @for (option of visibleOptions(); track trackOption(option, $index)) {\n <button\n type=\"button\"\n role=\"tab\"\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\"\n [attr.aria-selected]=\"isActiveOption(option)\"\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\n [disabled]=\"disabled() || isOptionDisabled(option)\"\n [class.border-primary]=\"\n isActiveOption(option) && isSeverity(option, 'primary')\n \"\n [class.text-primary]=\"\n isActiveOption(option) && isSeverity(option, 'primary')\n \"\n [class.border-slate-500]=\"\n isActiveOption(option) && isSeverity(option, 'secondary')\n \"\n [class.text-slate-600]=\"isSeverity(option, 'secondary')\"\n [class.border-emerald-500]=\"\n isActiveOption(option) && isSeverity(option, 'success')\n \"\n [class.text-emerald-600]=\"isSeverity(option, 'success')\"\n [class.border-sky-500]=\"\n isActiveOption(option) && isSeverity(option, 'info')\n \"\n [class.text-sky-600]=\"isSeverity(option, 'info')\"\n [class.border-amber-500]=\"\n isActiveOption(option) && isSeverity(option, 'warn')\n \"\n [class.text-amber-700]=\"isSeverity(option, 'warn')\"\n [class.border-red-500]=\"\n isActiveOption(option) && isSeverity(option, 'danger')\n \"\n [class.text-red-600]=\"isSeverity(option, 'danger')\"\n [class.border-purple-500]=\"\n isActiveOption(option) && isSeverity(option, 'help')\n \"\n [class.text-purple-600]=\"isSeverity(option, 'help')\"\n [class.border-zinc-700]=\"\n isActiveOption(option) && isSeverity(option, 'contrast')\n \"\n [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\n [class.font-semibold]=\"isActiveOption(option)\"\n [class.border-transparent]=\"!isActiveOption(option)\"\n [class.text-surface-700]=\"\n !isActiveOption(option) && !hasNonPrimarySeverity(option)\n \"\n [class.font-medium]=\"!isActiveOption(option)\"\n [class.hover:text-primary-600]=\"\n !isActiveOption(option) &&\n !hasNonPrimarySeverity(option) &&\n !(disabled() || isOptionDisabled(option))\n \"\n [class.hover:text-slate-700]=\"\n !isActiveOption(option) && isSeverity(option, 'secondary')\n \"\n [class.hover:text-emerald-700]=\"\n !isActiveOption(option) && isSeverity(option, 'success')\n \"\n [class.hover:text-sky-700]=\"\n !isActiveOption(option) && isSeverity(option, 'info')\n \"\n [class.hover:text-amber-800]=\"\n !isActiveOption(option) && isSeverity(option, 'warn')\n \"\n [class.hover:text-red-700]=\"\n !isActiveOption(option) && isSeverity(option, 'danger')\n \"\n [class.hover:text-purple-700]=\"\n !isActiveOption(option) && isSeverity(option, 'help')\n \"\n [class.hover:text-zinc-900]=\"\n !isActiveOption(option) && isSeverity(option, 'contrast')\n \"\n [class.cursor-pointer]=\"!(disabled() || isOptionDisabled(option))\"\n [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\n (click)=\"onOptionSelect(option)\"\n >\n @if (resolveIcon(option); as icon) {\n <mt-icon [icon]=\"icon\" class=\"text-base\" />\n }\n\n <span class=\"truncate\">{{ resolveLabel(option) }}</span>\n\n @if (hasCountBadge(option)) {\n <span\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\n [class.bg-primary-50]=\"isSeverity(option, 'primary')\"\n [class.text-primary-700]=\"isSeverity(option, 'primary')\"\n [class.bg-slate-100]=\"isSeverity(option, 'secondary')\"\n [class.text-slate-700]=\"isSeverity(option, 'secondary')\"\n [class.bg-emerald-50]=\"isSeverity(option, 'success')\"\n [class.text-emerald-700]=\"isSeverity(option, 'success')\"\n [class.bg-sky-50]=\"isSeverity(option, 'info')\"\n [class.text-sky-700]=\"isSeverity(option, 'info')\"\n [class.bg-amber-50]=\"isSeverity(option, 'warn')\"\n [class.text-amber-800]=\"isSeverity(option, 'warn')\"\n [class.bg-red-50]=\"isSeverity(option, 'danger')\"\n [class.text-red-700]=\"isSeverity(option, 'danger')\"\n [class.bg-purple-50]=\"isSeverity(option, 'help')\"\n [class.text-purple-700]=\"isSeverity(option, 'help')\"\n [class.bg-zinc-100]=\"isSeverity(option, 'contrast')\"\n [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\n [class.bg-surface-100]=\"\n !isActiveOption(option) && !hasNonPrimarySeverity(option)\n \"\n [class.text-surface-500]=\"\n !isActiveOption(option) && !hasNonPrimarySeverity(option)\n \"\n >\n {{ resolveBadge(option) }}\n </span>\n }\n </button>\n }\n </div>\n\n @if (hasOverflow()) {\n <div\n class=\"flex shrink-0 items-center -mb-px border-b border-surface-200 pb-1\"\n >\n <mt-button\n icon=\"arrow.chevron-down\"\n [label]=\"moreLabel()\"\n size=\"small\"\n severity=\"primary\"\n [text]=\"true\"\n [rounded]=\"true\"\n (onClick)=\"morePopover.toggle($event)\"\n />\n <p-popover\n #morePopover\n appendTo=\"body\"\n (onHide)=\"onOverflowPopoverHide()\"\n >\n <div class=\"flex min-w-56 flex-col\">\n @if (showOverflowSearch()) {\n <div class=\"border-b border-surface-200 p-2\">\n <p-iconfield iconPosition=\"left\">\n <p-inputicon>\n <mt-icon icon=\"general.search-md\" />\n </p-inputicon>\n <input\n pInputText\n type=\"text\"\n [value]=\"searchTerm()\"\n (input)=\"onOverflowSearch($any($event.target).value)\"\n [placeholder]=\"'components.tabs.search' | transloco\"\n class=\"w-full\"\n />\n </p-iconfield>\n </div>\n }\n <div\n class=\"flex max-h-80 flex-col divide-y divide-surface-100 overflow-y-auto\"\n >\n @for (\n option of filteredOverflowOptions();\n track trackOption(option, $index)\n ) {\n <button\n type=\"button\"\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 px-2 py-1 text-start text-sm transition-colors [&_.p-avatar]:h-7 [&_.p-avatar]:w-7 [&_.p-avatar]:text-sm\"\n [class.bg-primary-50]=\"\n isActiveOption(option) && isSeverity(option, 'primary')\n \"\n [class.text-primary]=\"\n isActiveOption(option) && isSeverity(option, 'primary')\n \"\n [class.bg-slate-50]=\"\n isActiveOption(option) && isSeverity(option, 'secondary')\n \"\n [class.text-slate-600]=\"isSeverity(option, 'secondary')\"\n [class.bg-emerald-50]=\"\n isActiveOption(option) && isSeverity(option, 'success')\n \"\n [class.text-emerald-600]=\"isSeverity(option, 'success')\"\n [class.bg-sky-50]=\"\n isActiveOption(option) && isSeverity(option, 'info')\n \"\n [class.text-sky-600]=\"isSeverity(option, 'info')\"\n [class.bg-amber-50]=\"\n isActiveOption(option) && isSeverity(option, 'warn')\n \"\n [class.text-amber-700]=\"isSeverity(option, 'warn')\"\n [class.bg-red-50]=\"\n isActiveOption(option) && isSeverity(option, 'danger')\n \"\n [class.text-red-600]=\"isSeverity(option, 'danger')\"\n [class.bg-purple-50]=\"\n isActiveOption(option) && isSeverity(option, 'help')\n \"\n [class.text-purple-600]=\"isSeverity(option, 'help')\"\n [class.bg-zinc-100]=\"\n isActiveOption(option) && isSeverity(option, 'contrast')\n \"\n [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\n [class.font-semibold]=\"isActiveOption(option)\"\n [class.text-surface-700]=\"\n !isActiveOption(option) && !hasNonPrimarySeverity(option)\n \"\n [class.hover:bg-surface-100]=\"!isActiveOption(option)\"\n [class.cursor-not-allowed]=\"\n disabled() || isOptionDisabled(option)\n \"\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\n [disabled]=\"disabled() || isOptionDisabled(option)\"\n (click)=\"onOptionSelect(option); morePopover.hide()\"\n >\n <mt-avatar\n [icon]=\"resolveIconOrDefault(option)\"\n size=\"normal\"\n shape=\"circle\"\n styleClass=\"!bg-surface-100 !text-surface-600\"\n />\n <span class=\"flex-1 truncate text-start\">\n {{ resolveLabel(option) }}\n </span>\n @if (hasCountBadge(option)) {\n <span\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\n [class.bg-primary-100]=\"isSeverity(option, 'primary')\"\n [class.text-primary-700]=\"isSeverity(option, 'primary')\"\n [class.bg-slate-100]=\"isSeverity(option, 'secondary')\"\n [class.text-slate-700]=\"isSeverity(option, 'secondary')\"\n [class.bg-emerald-50]=\"isSeverity(option, 'success')\"\n [class.text-emerald-700]=\"isSeverity(option, 'success')\"\n [class.bg-sky-50]=\"isSeverity(option, 'info')\"\n [class.text-sky-700]=\"isSeverity(option, 'info')\"\n [class.bg-amber-50]=\"isSeverity(option, 'warn')\"\n [class.text-amber-800]=\"isSeverity(option, 'warn')\"\n [class.bg-red-50]=\"isSeverity(option, 'danger')\"\n [class.text-red-700]=\"isSeverity(option, 'danger')\"\n [class.bg-purple-50]=\"isSeverity(option, 'help')\"\n [class.text-purple-700]=\"isSeverity(option, 'help')\"\n [class.bg-zinc-100]=\"isSeverity(option, 'contrast')\"\n [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\n [class.bg-surface-100]=\"\n !isActiveOption(option) &&\n !hasNonPrimarySeverity(option)\n \"\n [class.text-surface-500]=\"\n !isActiveOption(option) &&\n !hasNonPrimarySeverity(option)\n \"\n >\n {{ resolveBadge(option) }}\n </span>\n }\n </button>\n } @empty {\n <div class=\"px-3 py-4 text-center text-sm text-surface-500\">\n {{ \"components.tabs.no-results\" | transloco }}\n </div>\n }\n </div>\n </div>\n </p-popover>\n </div>\n }\n </div>\n} @else {\n <p-selectbutton\n [options]=\"options()\"\n [(ngModel)]=\"active\"\n (ngModelChange)=\"onTabChange($event)\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n styleClass=\"my-tabs-button\"\n [size]=\"size()\"\n [fluid]=\"fluid()\"\n [disabled]=\"disabled()\"\n unselectable\n />\n}\n", styles: [":host{min-width:0}\n"], dependencies: [{ kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i3.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i4.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
234
259
|
}
|
|
235
260
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tabs, decorators: [{
|
|
236
261
|
type: Component,
|
|
@@ -248,7 +273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
248
273
|
], host: {
|
|
249
274
|
class: 'grid min-w-0 gap-1',
|
|
250
275
|
'[class.w-full]': 'fluid()',
|
|
251
|
-
}, template: "@if (mode() === \"vertical\") {\r\n <div\r\n class=\"flex min-h-0 flex-col gap-1 rounded-2xl border border-surface-200 bg-white p-2\"\r\n role=\"tablist\"\r\n aria-orientation=\"vertical\"\r\n >\r\n @for (option of options(); track trackOption(option, $index)) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"group relative flex w-full items-center gap-3 overflow-hidden rounded-lg px-3 py-2.5 text-left text-sm transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary/20\"\r\n [attr.aria-selected]=\"isActiveOption(option)\"\r\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\r\n [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n [class.bg-primary-50]=\"isActiveOption(option)\"\r\n [class.font-semibold]=\"isActiveOption(option)\"\r\n [class.text-primary-700]=\"isActiveOption(option)\"\r\n [class.text-surface-500]=\"!isActiveOption(option)\"\r\n [class.hover:bg-surface-50]=\"!isActiveOption(option)\"\r\n [class.cursor-pointer]=\"!(disabled() || isOptionDisabled(option))\"\r\n [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\r\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n (click)=\"onOptionSelect(option)\"\r\n >\r\n @if (resolveIcon(option); as icon) {\r\n <mt-icon\r\n [icon]=\"icon\"\r\n class=\"relative z-10 text-base\"\r\n [class.text-primary]=\"isActiveOption(option)\"\r\n [class.text-surface-400]=\"!isActiveOption(option)\"\r\n />\r\n }\r\n\r\n <span class=\"relative z-10 min-w-0 flex-1 truncate\">\r\n {{ resolveLabel(option) }}\r\n </span>\r\n\r\n @if (hasBadge(option)) {\r\n <span\r\n class=\"relative z-10 ms-auto inline-flex min-w-5 items-center justify-center rounded-full px-2 py-0.5 text-[11px] font-bold leading-none\"\r\n [class.bg-primary]=\"isActiveOption(option)\"\r\n [class.text-white]=\"isActiveOption(option)\"\r\n [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n [class.text-surface-600]=\"!isActiveOption(option)\"\r\n >\r\n {{ resolveBadge(option) }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n} @else if (mode() === \"underline\") {\r\n <div\r\n #tabsContainer\r\n class=\"relative flex w-full min-w-0 max-w-full items-center gap-0.5 overflow-x-clip\"\r\n role=\"tablist\"\r\n aria-orientation=\"horizontal\"\r\n >\r\n <!-- Invisible measurement ghost row: always renders every option at natural width -->\r\n <div\r\n #measureRow\r\n aria-hidden=\"true\"\r\n class=\"pointer-events-none invisible absolute top-0 left-0 flex flex-nowrap gap-0.5 -z-10\"\r\n >\r\n @for (option of options(); track trackOption(option, $index)) {\r\n <span\r\n class=\"inline-flex items-center gap-1.5 border-b-2 border-transparent px-3.5 py-2.5 text-sm font-semibold whitespace-nowrap\"\r\n >\r\n @if (resolveIcon(option); as icon) {\r\n <mt-icon [icon]=\"icon\" class=\"text-base\" />\r\n }\r\n <span>{{ resolveLabel(option) }}</span>\r\n @if (hasCountBadge(option)) {\r\n <span\r\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\r\n >\r\n {{ resolveBadge(option) }}\r\n </span>\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- Visible tabs row -->\r\n <div\r\n class=\"flex min-w-0 flex-1 items-center gap-0.5 overflow-x-clip border-b border-surface-200\"\r\n >\r\n @for (option of visibleOptions(); track trackOption(option, $index)) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"-mb-px inline-flex shrink-0 items-center gap-1.5 border-b-2 px-3.5 py-2.5 text-sm whitespace-nowrap transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary/20\"\r\n [attr.aria-selected]=\"isActiveOption(option)\"\r\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\r\n [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n [class.border-primary]=\"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\r\n #morePopover\r\n appendTo=\"body\"\r\n (onHide)=\"onOverflowPopoverHide()\"\r\n >\r\n <div class=\"flex min-w-56 flex-col\">\r\n @if (showOverflowSearch()) {\r\n <div class=\"border-b border-surface-200 p-2\">\r\n <p-iconfield iconPosition=\"left\">\r\n <p-inputicon>\r\n <mt-icon icon=\"general.search-md\" />\r\n </p-inputicon>\r\n <input\r\n pInputText\r\n type=\"text\"\r\n [value]=\"searchTerm()\"\r\n (input)=\"onOverflowSearch($any($event.target).value)\"\r\n [placeholder]=\"'components.tabs.search' | transloco\"\r\n class=\"w-full\"\r\n />\r\n </p-iconfield>\r\n </div>\r\n }\r\n <div\r\n class=\"flex max-h-80 flex-col divide-y divide-surface-100 overflow-y-auto\"\r\n >\r\n @for (\r\n option of filteredOverflowOptions();\r\n track trackOption(option, $index)\r\n ) {\r\n <button\r\n type=\"button\"\r\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 px-2 py-1 text-start text-sm transition-colors [&_.p-avatar]:h-7 [&_.p-avatar]:w-7 [&_.p-avatar]:text-sm\"\r\n [class.bg-primary-50]=\"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 <mt-avatar\r\n [icon]=\"resolveIconOrDefault(option)\"\r\n size=\"normal\"\r\n shape=\"circle\"\r\n styleClass=\"!bg-surface-100 !text-surface-600\"\r\n />\r\n <span class=\"flex-1 truncate text-start\">\r\n {{ resolveLabel(option) }}\r\n </span>\r\n @if (hasCountBadge(option)) {\r\n <span\r\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\r\n [class.bg-primary-100]=\"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 } @empty {\r\n <div class=\"px-3 py-4 text-center text-sm text-surface-500\">\r\n {{ \"components.tabs.no-results\" | transloco }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </p-popover>\r\n </div>\r\n }\r\n </div>\r\n} @else {\r\n <p-selectbutton\r\n [options]=\"options()\"\r\n [(ngModel)]=\"active\"\r\n (ngModelChange)=\"onTabChange($event)\"\r\n [optionLabel]=\"optionLabel()\"\r\n [optionValue]=\"optionValue()\"\r\n styleClass=\"my-tabs-button\"\r\n [size]=\"size()\"\r\n [fluid]=\"fluid()\"\r\n [disabled]=\"disabled()\"\r\n unselectable\r\n />\r\n}\r\n", styles: [":host{min-width:0}\n"] }]
|
|
276
|
+
}, template: "@if (mode() === \"vertical\") {\n <div\n class=\"flex min-h-0 flex-col gap-1 rounded-2xl border border-surface-200 bg-white p-2\"\n role=\"tablist\"\n aria-orientation=\"vertical\"\n >\n @for (option of options(); track trackOption(option, $index)) {\n <button\n type=\"button\"\n role=\"tab\"\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\"\n [attr.aria-selected]=\"isActiveOption(option)\"\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\n [disabled]=\"disabled() || isOptionDisabled(option)\"\n [class.bg-primary-50]=\"isActiveOption(option)\"\n [class.font-semibold]=\"isActiveOption(option)\"\n [class.text-primary-700]=\"isActiveOption(option)\"\n [class.text-surface-500]=\"!isActiveOption(option)\"\n [class.hover:bg-surface-50]=\"!isActiveOption(option)\"\n [class.cursor-pointer]=\"!(disabled() || isOptionDisabled(option))\"\n [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\n (click)=\"onOptionSelect(option)\"\n >\n @if (resolveIcon(option); as icon) {\n <mt-icon\n [icon]=\"icon\"\n class=\"relative z-10 text-base\"\n [class.text-primary]=\"isActiveOption(option)\"\n [class.text-surface-400]=\"!isActiveOption(option)\"\n />\n }\n\n <span class=\"relative z-10 min-w-0 flex-1 truncate\">\n {{ resolveLabel(option) }}\n </span>\n\n @if (hasBadge(option)) {\n <span\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\"\n [class.bg-primary]=\"isActiveOption(option)\"\n [class.text-white]=\"isActiveOption(option)\"\n [class.bg-surface-100]=\"!isActiveOption(option)\"\n [class.text-surface-600]=\"!isActiveOption(option)\"\n >\n {{ resolveBadge(option) }}\n </span>\n }\n </button>\n }\n </div>\n} @else if (mode() === \"underline\") {\n <div\n #tabsContainer\n class=\"relative flex w-full min-w-0 max-w-full items-center gap-0.5 overflow-x-clip\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n >\n <!-- Invisible measurement ghost row: always renders every option at natural width -->\n <div\n #measureRow\n aria-hidden=\"true\"\n class=\"pointer-events-none invisible absolute top-0 left-0 flex flex-nowrap gap-0.5 -z-10\"\n >\n @for (option of options(); track trackOption(option, $index)) {\n <span\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\"\n >\n @if (resolveIcon(option); as icon) {\n <mt-icon [icon]=\"icon\" class=\"text-base\" />\n }\n <span>{{ resolveLabel(option) }}</span>\n @if (hasCountBadge(option)) {\n <span\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\n >\n {{ resolveBadge(option) }}\n </span>\n }\n </span>\n }\n </div>\n\n <!-- Visible tabs row -->\n <div\n class=\"flex min-w-0 flex-1 items-center gap-0.5 overflow-x-clip border-b border-surface-200\"\n >\n @for (option of visibleOptions(); track trackOption(option, $index)) {\n <button\n type=\"button\"\n role=\"tab\"\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\"\n [attr.aria-selected]=\"isActiveOption(option)\"\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\n [disabled]=\"disabled() || isOptionDisabled(option)\"\n [class.border-primary]=\"\n isActiveOption(option) && isSeverity(option, 'primary')\n \"\n [class.text-primary]=\"\n isActiveOption(option) && isSeverity(option, 'primary')\n \"\n [class.border-slate-500]=\"\n isActiveOption(option) && isSeverity(option, 'secondary')\n \"\n [class.text-slate-600]=\"isSeverity(option, 'secondary')\"\n [class.border-emerald-500]=\"\n isActiveOption(option) && isSeverity(option, 'success')\n \"\n [class.text-emerald-600]=\"isSeverity(option, 'success')\"\n [class.border-sky-500]=\"\n isActiveOption(option) && isSeverity(option, 'info')\n \"\n [class.text-sky-600]=\"isSeverity(option, 'info')\"\n [class.border-amber-500]=\"\n isActiveOption(option) && isSeverity(option, 'warn')\n \"\n [class.text-amber-700]=\"isSeverity(option, 'warn')\"\n [class.border-red-500]=\"\n isActiveOption(option) && isSeverity(option, 'danger')\n \"\n [class.text-red-600]=\"isSeverity(option, 'danger')\"\n [class.border-purple-500]=\"\n isActiveOption(option) && isSeverity(option, 'help')\n \"\n [class.text-purple-600]=\"isSeverity(option, 'help')\"\n [class.border-zinc-700]=\"\n isActiveOption(option) && isSeverity(option, 'contrast')\n \"\n [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\n [class.font-semibold]=\"isActiveOption(option)\"\n [class.border-transparent]=\"!isActiveOption(option)\"\n [class.text-surface-700]=\"\n !isActiveOption(option) && !hasNonPrimarySeverity(option)\n \"\n [class.font-medium]=\"!isActiveOption(option)\"\n [class.hover:text-primary-600]=\"\n !isActiveOption(option) &&\n !hasNonPrimarySeverity(option) &&\n !(disabled() || isOptionDisabled(option))\n \"\n [class.hover:text-slate-700]=\"\n !isActiveOption(option) && isSeverity(option, 'secondary')\n \"\n [class.hover:text-emerald-700]=\"\n !isActiveOption(option) && isSeverity(option, 'success')\n \"\n [class.hover:text-sky-700]=\"\n !isActiveOption(option) && isSeverity(option, 'info')\n \"\n [class.hover:text-amber-800]=\"\n !isActiveOption(option) && isSeverity(option, 'warn')\n \"\n [class.hover:text-red-700]=\"\n !isActiveOption(option) && isSeverity(option, 'danger')\n \"\n [class.hover:text-purple-700]=\"\n !isActiveOption(option) && isSeverity(option, 'help')\n \"\n [class.hover:text-zinc-900]=\"\n !isActiveOption(option) && isSeverity(option, 'contrast')\n \"\n [class.cursor-pointer]=\"!(disabled() || isOptionDisabled(option))\"\n [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\n (click)=\"onOptionSelect(option)\"\n >\n @if (resolveIcon(option); as icon) {\n <mt-icon [icon]=\"icon\" class=\"text-base\" />\n }\n\n <span class=\"truncate\">{{ resolveLabel(option) }}</span>\n\n @if (hasCountBadge(option)) {\n <span\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\n [class.bg-primary-50]=\"isSeverity(option, 'primary')\"\n [class.text-primary-700]=\"isSeverity(option, 'primary')\"\n [class.bg-slate-100]=\"isSeverity(option, 'secondary')\"\n [class.text-slate-700]=\"isSeverity(option, 'secondary')\"\n [class.bg-emerald-50]=\"isSeverity(option, 'success')\"\n [class.text-emerald-700]=\"isSeverity(option, 'success')\"\n [class.bg-sky-50]=\"isSeverity(option, 'info')\"\n [class.text-sky-700]=\"isSeverity(option, 'info')\"\n [class.bg-amber-50]=\"isSeverity(option, 'warn')\"\n [class.text-amber-800]=\"isSeverity(option, 'warn')\"\n [class.bg-red-50]=\"isSeverity(option, 'danger')\"\n [class.text-red-700]=\"isSeverity(option, 'danger')\"\n [class.bg-purple-50]=\"isSeverity(option, 'help')\"\n [class.text-purple-700]=\"isSeverity(option, 'help')\"\n [class.bg-zinc-100]=\"isSeverity(option, 'contrast')\"\n [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\n [class.bg-surface-100]=\"\n !isActiveOption(option) && !hasNonPrimarySeverity(option)\n \"\n [class.text-surface-500]=\"\n !isActiveOption(option) && !hasNonPrimarySeverity(option)\n \"\n >\n {{ resolveBadge(option) }}\n </span>\n }\n </button>\n }\n </div>\n\n @if (hasOverflow()) {\n <div\n class=\"flex shrink-0 items-center -mb-px border-b border-surface-200 pb-1\"\n >\n <mt-button\n icon=\"arrow.chevron-down\"\n [label]=\"moreLabel()\"\n size=\"small\"\n severity=\"primary\"\n [text]=\"true\"\n [rounded]=\"true\"\n (onClick)=\"morePopover.toggle($event)\"\n />\n <p-popover\n #morePopover\n appendTo=\"body\"\n (onHide)=\"onOverflowPopoverHide()\"\n >\n <div class=\"flex min-w-56 flex-col\">\n @if (showOverflowSearch()) {\n <div class=\"border-b border-surface-200 p-2\">\n <p-iconfield iconPosition=\"left\">\n <p-inputicon>\n <mt-icon icon=\"general.search-md\" />\n </p-inputicon>\n <input\n pInputText\n type=\"text\"\n [value]=\"searchTerm()\"\n (input)=\"onOverflowSearch($any($event.target).value)\"\n [placeholder]=\"'components.tabs.search' | transloco\"\n class=\"w-full\"\n />\n </p-iconfield>\n </div>\n }\n <div\n class=\"flex max-h-80 flex-col divide-y divide-surface-100 overflow-y-auto\"\n >\n @for (\n option of filteredOverflowOptions();\n track trackOption(option, $index)\n ) {\n <button\n type=\"button\"\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 px-2 py-1 text-start text-sm transition-colors [&_.p-avatar]:h-7 [&_.p-avatar]:w-7 [&_.p-avatar]:text-sm\"\n [class.bg-primary-50]=\"\n isActiveOption(option) && isSeverity(option, 'primary')\n \"\n [class.text-primary]=\"\n isActiveOption(option) && isSeverity(option, 'primary')\n \"\n [class.bg-slate-50]=\"\n isActiveOption(option) && isSeverity(option, 'secondary')\n \"\n [class.text-slate-600]=\"isSeverity(option, 'secondary')\"\n [class.bg-emerald-50]=\"\n isActiveOption(option) && isSeverity(option, 'success')\n \"\n [class.text-emerald-600]=\"isSeverity(option, 'success')\"\n [class.bg-sky-50]=\"\n isActiveOption(option) && isSeverity(option, 'info')\n \"\n [class.text-sky-600]=\"isSeverity(option, 'info')\"\n [class.bg-amber-50]=\"\n isActiveOption(option) && isSeverity(option, 'warn')\n \"\n [class.text-amber-700]=\"isSeverity(option, 'warn')\"\n [class.bg-red-50]=\"\n isActiveOption(option) && isSeverity(option, 'danger')\n \"\n [class.text-red-600]=\"isSeverity(option, 'danger')\"\n [class.bg-purple-50]=\"\n isActiveOption(option) && isSeverity(option, 'help')\n \"\n [class.text-purple-600]=\"isSeverity(option, 'help')\"\n [class.bg-zinc-100]=\"\n isActiveOption(option) && isSeverity(option, 'contrast')\n \"\n [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\n [class.font-semibold]=\"isActiveOption(option)\"\n [class.text-surface-700]=\"\n !isActiveOption(option) && !hasNonPrimarySeverity(option)\n \"\n [class.hover:bg-surface-100]=\"!isActiveOption(option)\"\n [class.cursor-not-allowed]=\"\n disabled() || isOptionDisabled(option)\n \"\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\n [disabled]=\"disabled() || isOptionDisabled(option)\"\n (click)=\"onOptionSelect(option); morePopover.hide()\"\n >\n <mt-avatar\n [icon]=\"resolveIconOrDefault(option)\"\n size=\"normal\"\n shape=\"circle\"\n styleClass=\"!bg-surface-100 !text-surface-600\"\n />\n <span class=\"flex-1 truncate text-start\">\n {{ resolveLabel(option) }}\n </span>\n @if (hasCountBadge(option)) {\n <span\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\n [class.bg-primary-100]=\"isSeverity(option, 'primary')\"\n [class.text-primary-700]=\"isSeverity(option, 'primary')\"\n [class.bg-slate-100]=\"isSeverity(option, 'secondary')\"\n [class.text-slate-700]=\"isSeverity(option, 'secondary')\"\n [class.bg-emerald-50]=\"isSeverity(option, 'success')\"\n [class.text-emerald-700]=\"isSeverity(option, 'success')\"\n [class.bg-sky-50]=\"isSeverity(option, 'info')\"\n [class.text-sky-700]=\"isSeverity(option, 'info')\"\n [class.bg-amber-50]=\"isSeverity(option, 'warn')\"\n [class.text-amber-800]=\"isSeverity(option, 'warn')\"\n [class.bg-red-50]=\"isSeverity(option, 'danger')\"\n [class.text-red-700]=\"isSeverity(option, 'danger')\"\n [class.bg-purple-50]=\"isSeverity(option, 'help')\"\n [class.text-purple-700]=\"isSeverity(option, 'help')\"\n [class.bg-zinc-100]=\"isSeverity(option, 'contrast')\"\n [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\n [class.bg-surface-100]=\"\n !isActiveOption(option) &&\n !hasNonPrimarySeverity(option)\n \"\n [class.text-surface-500]=\"\n !isActiveOption(option) &&\n !hasNonPrimarySeverity(option)\n \"\n >\n {{ resolveBadge(option) }}\n </span>\n }\n </button>\n } @empty {\n <div class=\"px-3 py-4 text-center text-sm text-surface-500\">\n {{ \"components.tabs.no-results\" | transloco }}\n </div>\n }\n </div>\n </div>\n </p-popover>\n </div>\n }\n </div>\n} @else {\n <p-selectbutton\n [options]=\"options()\"\n [(ngModel)]=\"active\"\n (ngModelChange)=\"onTabChange($event)\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n styleClass=\"my-tabs-button\"\n [size]=\"size()\"\n [fluid]=\"fluid()\"\n [disabled]=\"disabled()\"\n unselectable\n />\n}\n", styles: [":host{min-width:0}\n"] }]
|
|
252
277
|
}], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], moreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreLabel", required: false }] }], defaultIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultIcon", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabsContainer: [{ type: i0.ViewChild, args: ['tabsContainer', { isSignal: true }] }], measureRow: [{ type: i0.ViewChild, args: ['measureRow', { isSignal: true }] }], morePopover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Popover), { isSignal: true }] }], searchThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchThreshold", required: false }] }] } });
|
|
253
278
|
|
|
254
279
|
/**
|
|
@@ -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 { TranslocoPipe, TranslocoService } from '@jsverse/transloco';\r\nimport { MTIcon, Icon } from '@masterteam/icons';\r\nimport { SelectButton } from 'primeng/selectbutton';\r\nimport { Popover } from 'primeng/popover';\r\nimport { InputTextModule } from 'primeng/inputtext';\r\nimport { IconFieldModule } from 'primeng/iconfield';\r\nimport { InputIconModule } from 'primeng/inputicon';\r\nimport { Button } from '@masterteam/components/button';\r\nimport { Avatar } from '@masterteam/components/avatar';\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: [\r\n Icon,\r\n SelectButton,\r\n FormsModule,\r\n Button,\r\n Popover,\r\n Avatar,\r\n InputTextModule,\r\n IconFieldModule,\r\n InputIconModule,\r\n TranslocoPipe,\r\n ],\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 private readonly transloco = inject(TranslocoService);\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>(\r\n this.transloco.translate('components.tabs.more'),\r\n );\r\n readonly defaultIcon = input<MTIcon>('layout.align-left-02');\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 readonly morePopover = viewChild(Popover);\r\n private resizeObserver?: ResizeObserver;\r\n private measureHandle = 0;\r\n private alignHandle = 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 readonly searchThreshold = input<number>(8);\r\n readonly searchTerm = signal<string>('');\r\n readonly showOverflowSearch = computed(\r\n () => this.overflowOptions().length >= this.searchThreshold(),\r\n );\r\n readonly filteredOverflowOptions = computed(() => {\r\n const term = this.searchTerm().trim().toLowerCase();\r\n if (!term) return this.overflowOptions();\r\n return this.overflowOptions().filter((option) =>\r\n this.resolveLabel(option).toLowerCase().includes(term),\r\n );\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 if (this.alignHandle) {\r\n cancelAnimationFrame(this.alignHandle);\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 onOverflowSearch(value: string): void {\r\n this.searchTerm.set(value ?? '');\r\n // Filtering shrinks/grows the popover content, but PrimeNG only positions\r\n // the popover on show. Re-align after the filtered list re-renders so a\r\n // popover opened above the trigger stays attached instead of overlapping.\r\n this.scheduleOverflowAlign();\r\n }\r\n\r\n private scheduleOverflowAlign(): void {\r\n if (this.alignHandle) {\r\n cancelAnimationFrame(this.alignHandle);\r\n }\r\n this.alignHandle = requestAnimationFrame(() => {\r\n this.alignHandle = 0;\r\n const popover = this.morePopover();\r\n if (!popover?.overlayVisible) return;\r\n\r\n // Clear the stale flip marker so align() recomputes the arrow direction\r\n // for the new height instead of keeping the previous \"above\" state.\r\n const container = popover.container;\r\n if (container) {\r\n container.removeAttribute('data-p-popover-flipped');\r\n container.classList.remove('p-popover-flipped');\r\n }\r\n popover.align();\r\n });\r\n }\r\n\r\n onOverflowPopoverHide(): void {\r\n this.searchTerm.set('');\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 resolveIconOrDefault(option: OptionItem): MTIcon {\r\n return this.resolveIcon(option) ?? this.defaultIcon();\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-pointer]=\"!(disabled() || isOptionDisabled(option))\"\r\n [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\r\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n (click)=\"onOptionSelect(option)\"\r\n >\r\n @if (resolveIcon(option); as icon) {\r\n <mt-icon\r\n [icon]=\"icon\"\r\n class=\"relative z-10 text-base\"\r\n [class.text-primary]=\"isActiveOption(option)\"\r\n [class.text-surface-400]=\"!isActiveOption(option)\"\r\n />\r\n }\r\n\r\n <span class=\"relative z-10 min-w-0 flex-1 truncate\">\r\n {{ resolveLabel(option) }}\r\n </span>\r\n\r\n @if (hasBadge(option)) {\r\n <span\r\n class=\"relative z-10 ms-auto inline-flex min-w-5 items-center justify-center rounded-full px-2 py-0.5 text-[11px] font-bold leading-none\"\r\n [class.bg-primary]=\"isActiveOption(option)\"\r\n [class.text-white]=\"isActiveOption(option)\"\r\n [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n [class.text-surface-600]=\"!isActiveOption(option)\"\r\n >\r\n {{ resolveBadge(option) }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n} @else if (mode() === \"underline\") {\r\n <div\r\n #tabsContainer\r\n class=\"relative flex w-full min-w-0 max-w-full items-center gap-0.5 overflow-x-clip\"\r\n role=\"tablist\"\r\n aria-orientation=\"horizontal\"\r\n >\r\n <!-- Invisible measurement ghost row: always renders every option at natural width -->\r\n <div\r\n #measureRow\r\n aria-hidden=\"true\"\r\n class=\"pointer-events-none invisible absolute top-0 left-0 flex flex-nowrap gap-0.5 -z-10\"\r\n >\r\n @for (option of options(); track trackOption(option, $index)) {\r\n <span\r\n class=\"inline-flex items-center gap-1.5 border-b-2 border-transparent px-3.5 py-2.5 text-sm font-semibold whitespace-nowrap\"\r\n >\r\n @if (resolveIcon(option); as icon) {\r\n <mt-icon [icon]=\"icon\" class=\"text-base\" />\r\n }\r\n <span>{{ resolveLabel(option) }}</span>\r\n @if (hasCountBadge(option)) {\r\n <span\r\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\r\n >\r\n {{ resolveBadge(option) }}\r\n </span>\r\n }\r\n </span>\r\n }\r\n </div>\r\n\r\n <!-- Visible tabs row -->\r\n <div\r\n class=\"flex min-w-0 flex-1 items-center gap-0.5 overflow-x-clip border-b border-surface-200\"\r\n >\r\n @for (option of visibleOptions(); track trackOption(option, $index)) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"-mb-px inline-flex shrink-0 items-center gap-1.5 border-b-2 px-3.5 py-2.5 text-sm whitespace-nowrap transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary/20\"\r\n [attr.aria-selected]=\"isActiveOption(option)\"\r\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\r\n [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n [class.border-primary]=\"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\r\n #morePopover\r\n appendTo=\"body\"\r\n (onHide)=\"onOverflowPopoverHide()\"\r\n >\r\n <div class=\"flex min-w-56 flex-col\">\r\n @if (showOverflowSearch()) {\r\n <div class=\"border-b border-surface-200 p-2\">\r\n <p-iconfield iconPosition=\"left\">\r\n <p-inputicon>\r\n <mt-icon icon=\"general.search-md\" />\r\n </p-inputicon>\r\n <input\r\n pInputText\r\n type=\"text\"\r\n [value]=\"searchTerm()\"\r\n (input)=\"onOverflowSearch($any($event.target).value)\"\r\n [placeholder]=\"'components.tabs.search' | transloco\"\r\n class=\"w-full\"\r\n />\r\n </p-iconfield>\r\n </div>\r\n }\r\n <div\r\n class=\"flex max-h-80 flex-col divide-y divide-surface-100 overflow-y-auto\"\r\n >\r\n @for (\r\n option of filteredOverflowOptions();\r\n track trackOption(option, $index)\r\n ) {\r\n <button\r\n type=\"button\"\r\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 px-2 py-1 text-start text-sm transition-colors [&_.p-avatar]:h-7 [&_.p-avatar]:w-7 [&_.p-avatar]:text-sm\"\r\n [class.bg-primary-50]=\"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 <mt-avatar\r\n [icon]=\"resolveIconOrDefault(option)\"\r\n size=\"normal\"\r\n shape=\"circle\"\r\n styleClass=\"!bg-surface-100 !text-surface-600\"\r\n />\r\n <span class=\"flex-1 truncate text-start\">\r\n {{ resolveLabel(option) }}\r\n </span>\r\n @if (hasCountBadge(option)) {\r\n <span\r\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\r\n [class.bg-primary-100]=\"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 } @empty {\r\n <div class=\"px-3 py-4 text-center text-sm text-surface-500\">\r\n {{ \"components.tabs.no-results\" | transloco }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </p-popover>\r\n </div>\r\n }\r\n </div>\r\n} @else {\r\n <p-selectbutton\r\n [options]=\"options()\"\r\n [(ngModel)]=\"active\"\r\n (ngModelChange)=\"onTabChange($event)\"\r\n [optionLabel]=\"optionLabel()\"\r\n [optionValue]=\"optionValue()\"\r\n styleClass=\"my-tabs-button\"\r\n [size]=\"size()\"\r\n [fluid]=\"fluid()\"\r\n [disabled]=\"disabled()\"\r\n unselectable\r\n />\r\n}\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 {\n afterNextRender,\n booleanAttribute,\n Component,\n computed,\n DestroyRef,\n effect,\n ElementRef,\n inject,\n input,\n model,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { TranslocoPipe, TranslocoService } from '@jsverse/transloco';\nimport { MTIcon, Icon } from '@masterteam/icons';\nimport { SelectButton } from 'primeng/selectbutton';\nimport { Popover } from 'primeng/popover';\nimport { InputTextModule } from 'primeng/inputtext';\nimport { IconFieldModule } from 'primeng/iconfield';\nimport { InputIconModule } from 'primeng/inputicon';\nimport { Button } from '@masterteam/components/button';\nimport { Avatar } from '@masterteam/components/avatar';\n\nexport type TabSeverity =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'info'\n | 'warn'\n | 'warning'\n | 'danger'\n | 'error'\n | 'help'\n | 'contrast';\n\nexport interface OptionItem {\n label?: string;\n value?: any;\n icon?: MTIcon | null;\n badge?: number | string | null;\n severity?: TabSeverity | null;\n disabled?: boolean;\n [key: string]: unknown;\n}\n\ntype NormalizedTabSeverity =\n | 'primary'\n | 'secondary'\n | 'success'\n | 'info'\n | 'warn'\n | 'danger'\n | 'help'\n | 'contrast';\n\n@Component({\n selector: 'mt-tabs',\n standalone: true,\n imports: [\n Icon,\n SelectButton,\n FormsModule,\n Button,\n Popover,\n Avatar,\n InputTextModule,\n IconFieldModule,\n InputIconModule,\n TranslocoPipe,\n ],\n templateUrl: './tabs.html',\n styleUrls: ['./tabs.scss'],\n host: {\n class: 'grid min-w-0 gap-1',\n '[class.w-full]': 'fluid()',\n },\n})\nexport class Tabs {\n private readonly transloco = inject(TranslocoService);\n options = input<OptionItem[]>([]);\n optionLabel = input<string>('label');\n optionValue = input<string>('value');\n active = model<any>(null);\n readonly mode = input<'horizontal' | 'vertical' | 'underline'>('horizontal');\n readonly moreLabel = input<string>(\n this.transloco.translate('components.tabs.more'),\n );\n readonly defaultIcon = input<MTIcon>('layout.align-left-02');\n\n onChange = output<any>();\n\n readonly size = input<'small' | 'large' | undefined>();\n readonly fluid = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n disabled = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n\n private readonly destroyRef = inject(DestroyRef);\n private readonly tabsContainer =\n viewChild<ElementRef<HTMLElement>>('tabsContainer');\n private readonly measureRow =\n viewChild<ElementRef<HTMLElement>>('measureRow');\n private readonly morePopover = viewChild(Popover);\n private resizeObserver?: ResizeObserver;\n private measureHandle = 0;\n private alignHandle = 0;\n\n readonly visibleCount = signal<number>(Number.MAX_SAFE_INTEGER);\n readonly visibleOptions = computed(() =>\n this.options().slice(0, this.visibleCount()),\n );\n readonly overflowOptions = computed(() =>\n this.options().slice(this.visibleCount()),\n );\n readonly hasOverflow = computed(() => this.overflowOptions().length > 0);\n readonly isActiveInOverflow = computed(() =>\n this.overflowOptions().some((option) => this.isActiveOption(option)),\n );\n\n readonly searchThreshold = input<number>(8);\n readonly searchTerm = signal<string>('');\n readonly showOverflowSearch = computed(\n () => this.overflowOptions().length >= this.searchThreshold(),\n );\n readonly filteredOverflowOptions = computed(() => {\n const term = this.searchTerm().trim().toLowerCase();\n if (!term) return this.overflowOptions();\n return this.overflowOptions().filter((option) =>\n this.resolveLabel(option).toLowerCase().includes(term),\n );\n });\n\n constructor() {\n effect(() => {\n const options = this.options();\n const active = this.active();\n if (!options.length) {\n return;\n }\n\n const hasActiveOption = options.some((option) =>\n Object.is(this.resolveValue(option), active),\n );\n if (!hasActiveOption) {\n this.active.set(this.resolveValue(options[0]));\n }\n });\n\n afterNextRender(() => {\n if (this.mode() !== 'underline') return;\n this.setupResizeObserver();\n this.scheduleMeasure();\n });\n\n effect(() => {\n // Re-measure when options or mode change.\n this.options();\n if (this.mode() !== 'underline') return;\n this.scheduleMeasure();\n });\n\n this.destroyRef.onDestroy(() => {\n this.resizeObserver?.disconnect();\n if (this.measureHandle) {\n cancelAnimationFrame(this.measureHandle);\n }\n if (this.alignHandle) {\n cancelAnimationFrame(this.alignHandle);\n }\n });\n }\n\n private setupResizeObserver(): void {\n const container = this.tabsContainer()?.nativeElement;\n if (!container || typeof ResizeObserver === 'undefined') return;\n\n this.resizeObserver = new ResizeObserver(() => this.scheduleMeasure());\n this.resizeObserver.observe(container);\n }\n\n private scheduleMeasure(): void {\n if (this.measureHandle) {\n cancelAnimationFrame(this.measureHandle);\n }\n this.measureHandle = requestAnimationFrame(() => {\n this.measureHandle = 0;\n this.measureAndUpdate();\n });\n }\n\n private measureAndUpdate(): void {\n const container = this.tabsContainer()?.nativeElement;\n const measureRow = this.measureRow()?.nativeElement;\n if (!container || !measureRow) return;\n\n const optionsCount = this.options().length;\n if (optionsCount === 0) {\n this.visibleCount.set(0);\n return;\n }\n\n if (container.clientWidth === 0) return;\n\n // Inner width excludes the container's horizontal padding so we compare\n // against the actual space available to the flex tabs row.\n const style = getComputedStyle(container);\n const paddingX =\n (parseFloat(style.paddingLeft) || 0) +\n (parseFloat(style.paddingRight) || 0);\n const innerWidth = container.clientWidth - paddingX;\n if (innerWidth <= 0) return;\n\n const tabWidths = Array.from(measureRow.children).map(\n (el) => (el as HTMLElement).getBoundingClientRect().width,\n );\n\n if (tabWidths.length === 0) return;\n\n // Approximate gap-0.5 between tabs (2px).\n const gap = 2;\n const totalWidth =\n tabWidths.reduce((sum, width) => sum + width, 0) +\n Math.max(0, tabWidths.length - 1) * gap;\n\n // Everything fits — no more button needed.\n if (totalWidth <= innerWidth) {\n this.visibleCount.set(tabWidths.length);\n return;\n }\n\n // Reserve space for the More button (icon + label ~ 88px).\n const moreButtonReserve = 96;\n const available = innerWidth - moreButtonReserve;\n\n let cumulative = 0;\n let visibleCount = 0;\n for (let i = 0; i < tabWidths.length; i++) {\n const next = cumulative + tabWidths[i] + (i > 0 ? gap : 0);\n if (next > available) break;\n cumulative = next;\n visibleCount++;\n }\n\n this.visibleCount.set(Math.max(1, visibleCount));\n }\n\n onTabChange(value: any) {\n this.onChange.emit(value);\n }\n\n onOverflowSearch(value: string): void {\n this.searchTerm.set(value ?? '');\n // Filtering shrinks/grows the popover content, but PrimeNG only positions\n // the popover on show. Re-align after the filtered list re-renders so a\n // popover opened above the trigger stays attached instead of overlapping.\n this.scheduleOverflowAlign();\n }\n\n private scheduleOverflowAlign(): void {\n if (this.alignHandle) {\n cancelAnimationFrame(this.alignHandle);\n }\n this.alignHandle = requestAnimationFrame(() => {\n this.alignHandle = 0;\n const popover = this.morePopover();\n if (!popover?.overlayVisible) return;\n\n // Clear the stale flip marker so align() recomputes the arrow direction\n // for the new height instead of keeping the previous \"above\" state.\n const container = popover.container;\n if (container) {\n container.removeAttribute('data-p-popover-flipped');\n container.classList.remove('p-popover-flipped');\n }\n popover.align();\n });\n }\n\n onOverflowPopoverHide(): void {\n this.searchTerm.set('');\n }\n\n onOptionSelect(option: OptionItem): void {\n if (this.disabled() || this.isOptionDisabled(option)) {\n return;\n }\n\n const value = this.resolveValue(option);\n this.active.set(value);\n this.onTabChange(value);\n }\n\n resolveLabel(option: OptionItem): string {\n const labelKey = this.optionLabel();\n const label =\n option && typeof option === 'object'\n ? (option as Record<string, unknown>)[labelKey]\n : option;\n\n return typeof label === 'string' ? label : String(label ?? '');\n }\n\n resolveValue(option: OptionItem): unknown {\n const valueKey = this.optionValue();\n if (option && typeof option === 'object' && valueKey in option) {\n return (option as Record<string, unknown>)[valueKey];\n }\n\n return option;\n }\n\n resolveIcon(option: OptionItem): MTIcon | null {\n return typeof option?.icon === 'string' ? option.icon : null;\n }\n\n resolveIconOrDefault(option: OptionItem): MTIcon {\n return this.resolveIcon(option) ?? this.defaultIcon();\n }\n\n resolveBadge(option: OptionItem): number | string | null {\n return option?.badge ?? null;\n }\n\n hasBadge(option: OptionItem): boolean {\n return option?.badge !== null && option?.badge !== undefined;\n }\n\n hasCountBadge(option: OptionItem): boolean {\n const badge = option?.badge;\n if (badge === null || badge === undefined || badge === '') {\n return false;\n }\n const numeric = typeof badge === 'number' ? badge : Number(badge);\n return Number.isNaN(numeric) ? true : numeric > 0;\n }\n\n severity(option: OptionItem): NormalizedTabSeverity {\n const severity =\n typeof option?.severity === 'string'\n ? option.severity.trim().toLowerCase()\n : '';\n if (severity === 'error') return 'danger';\n if (severity === 'warning') return 'warn';\n if (\n severity === 'secondary' ||\n severity === 'success' ||\n severity === 'info' ||\n severity === 'warn' ||\n severity === 'danger' ||\n severity === 'help' ||\n severity === 'contrast'\n ) {\n return severity;\n }\n\n return 'primary';\n }\n\n isSeverity(option: OptionItem, severity: NormalizedTabSeverity): boolean {\n return this.severity(option) === severity;\n }\n\n hasNonPrimarySeverity(option: OptionItem): boolean {\n return this.severity(option) !== 'primary';\n }\n\n isActiveOption(option: OptionItem): boolean {\n return Object.is(this.active(), this.resolveValue(option));\n }\n\n isOptionDisabled(option: OptionItem): boolean {\n return !!option?.disabled;\n }\n\n trackOption(option: OptionItem, index: number): unknown {\n return this.resolveValue(option) ?? index;\n }\n}\n","@if (mode() === \"vertical\") {\n <div\n class=\"flex min-h-0 flex-col gap-1 rounded-2xl border border-surface-200 bg-white p-2\"\n role=\"tablist\"\n aria-orientation=\"vertical\"\n >\n @for (option of options(); track trackOption(option, $index)) {\n <button\n type=\"button\"\n role=\"tab\"\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\"\n [attr.aria-selected]=\"isActiveOption(option)\"\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\n [disabled]=\"disabled() || isOptionDisabled(option)\"\n [class.bg-primary-50]=\"isActiveOption(option)\"\n [class.font-semibold]=\"isActiveOption(option)\"\n [class.text-primary-700]=\"isActiveOption(option)\"\n [class.text-surface-500]=\"!isActiveOption(option)\"\n [class.hover:bg-surface-50]=\"!isActiveOption(option)\"\n [class.cursor-pointer]=\"!(disabled() || isOptionDisabled(option))\"\n [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\n (click)=\"onOptionSelect(option)\"\n >\n @if (resolveIcon(option); as icon) {\n <mt-icon\n [icon]=\"icon\"\n class=\"relative z-10 text-base\"\n [class.text-primary]=\"isActiveOption(option)\"\n [class.text-surface-400]=\"!isActiveOption(option)\"\n />\n }\n\n <span class=\"relative z-10 min-w-0 flex-1 truncate\">\n {{ resolveLabel(option) }}\n </span>\n\n @if (hasBadge(option)) {\n <span\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\"\n [class.bg-primary]=\"isActiveOption(option)\"\n [class.text-white]=\"isActiveOption(option)\"\n [class.bg-surface-100]=\"!isActiveOption(option)\"\n [class.text-surface-600]=\"!isActiveOption(option)\"\n >\n {{ resolveBadge(option) }}\n </span>\n }\n </button>\n }\n </div>\n} @else if (mode() === \"underline\") {\n <div\n #tabsContainer\n class=\"relative flex w-full min-w-0 max-w-full items-center gap-0.5 overflow-x-clip\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n >\n <!-- Invisible measurement ghost row: always renders every option at natural width -->\n <div\n #measureRow\n aria-hidden=\"true\"\n class=\"pointer-events-none invisible absolute top-0 left-0 flex flex-nowrap gap-0.5 -z-10\"\n >\n @for (option of options(); track trackOption(option, $index)) {\n <span\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\"\n >\n @if (resolveIcon(option); as icon) {\n <mt-icon [icon]=\"icon\" class=\"text-base\" />\n }\n <span>{{ resolveLabel(option) }}</span>\n @if (hasCountBadge(option)) {\n <span\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\n >\n {{ resolveBadge(option) }}\n </span>\n }\n </span>\n }\n </div>\n\n <!-- Visible tabs row -->\n <div\n class=\"flex min-w-0 flex-1 items-center gap-0.5 overflow-x-clip border-b border-surface-200\"\n >\n @for (option of visibleOptions(); track trackOption(option, $index)) {\n <button\n type=\"button\"\n role=\"tab\"\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\"\n [attr.aria-selected]=\"isActiveOption(option)\"\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\n [disabled]=\"disabled() || isOptionDisabled(option)\"\n [class.border-primary]=\"\n isActiveOption(option) && isSeverity(option, 'primary')\n \"\n [class.text-primary]=\"\n isActiveOption(option) && isSeverity(option, 'primary')\n \"\n [class.border-slate-500]=\"\n isActiveOption(option) && isSeverity(option, 'secondary')\n \"\n [class.text-slate-600]=\"isSeverity(option, 'secondary')\"\n [class.border-emerald-500]=\"\n isActiveOption(option) && isSeverity(option, 'success')\n \"\n [class.text-emerald-600]=\"isSeverity(option, 'success')\"\n [class.border-sky-500]=\"\n isActiveOption(option) && isSeverity(option, 'info')\n \"\n [class.text-sky-600]=\"isSeverity(option, 'info')\"\n [class.border-amber-500]=\"\n isActiveOption(option) && isSeverity(option, 'warn')\n \"\n [class.text-amber-700]=\"isSeverity(option, 'warn')\"\n [class.border-red-500]=\"\n isActiveOption(option) && isSeverity(option, 'danger')\n \"\n [class.text-red-600]=\"isSeverity(option, 'danger')\"\n [class.border-purple-500]=\"\n isActiveOption(option) && isSeverity(option, 'help')\n \"\n [class.text-purple-600]=\"isSeverity(option, 'help')\"\n [class.border-zinc-700]=\"\n isActiveOption(option) && isSeverity(option, 'contrast')\n \"\n [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\n [class.font-semibold]=\"isActiveOption(option)\"\n [class.border-transparent]=\"!isActiveOption(option)\"\n [class.text-surface-700]=\"\n !isActiveOption(option) && !hasNonPrimarySeverity(option)\n \"\n [class.font-medium]=\"!isActiveOption(option)\"\n [class.hover:text-primary-600]=\"\n !isActiveOption(option) &&\n !hasNonPrimarySeverity(option) &&\n !(disabled() || isOptionDisabled(option))\n \"\n [class.hover:text-slate-700]=\"\n !isActiveOption(option) && isSeverity(option, 'secondary')\n \"\n [class.hover:text-emerald-700]=\"\n !isActiveOption(option) && isSeverity(option, 'success')\n \"\n [class.hover:text-sky-700]=\"\n !isActiveOption(option) && isSeverity(option, 'info')\n \"\n [class.hover:text-amber-800]=\"\n !isActiveOption(option) && isSeverity(option, 'warn')\n \"\n [class.hover:text-red-700]=\"\n !isActiveOption(option) && isSeverity(option, 'danger')\n \"\n [class.hover:text-purple-700]=\"\n !isActiveOption(option) && isSeverity(option, 'help')\n \"\n [class.hover:text-zinc-900]=\"\n !isActiveOption(option) && isSeverity(option, 'contrast')\n \"\n [class.cursor-pointer]=\"!(disabled() || isOptionDisabled(option))\"\n [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\n (click)=\"onOptionSelect(option)\"\n >\n @if (resolveIcon(option); as icon) {\n <mt-icon [icon]=\"icon\" class=\"text-base\" />\n }\n\n <span class=\"truncate\">{{ resolveLabel(option) }}</span>\n\n @if (hasCountBadge(option)) {\n <span\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\n [class.bg-primary-50]=\"isSeverity(option, 'primary')\"\n [class.text-primary-700]=\"isSeverity(option, 'primary')\"\n [class.bg-slate-100]=\"isSeverity(option, 'secondary')\"\n [class.text-slate-700]=\"isSeverity(option, 'secondary')\"\n [class.bg-emerald-50]=\"isSeverity(option, 'success')\"\n [class.text-emerald-700]=\"isSeverity(option, 'success')\"\n [class.bg-sky-50]=\"isSeverity(option, 'info')\"\n [class.text-sky-700]=\"isSeverity(option, 'info')\"\n [class.bg-amber-50]=\"isSeverity(option, 'warn')\"\n [class.text-amber-800]=\"isSeverity(option, 'warn')\"\n [class.bg-red-50]=\"isSeverity(option, 'danger')\"\n [class.text-red-700]=\"isSeverity(option, 'danger')\"\n [class.bg-purple-50]=\"isSeverity(option, 'help')\"\n [class.text-purple-700]=\"isSeverity(option, 'help')\"\n [class.bg-zinc-100]=\"isSeverity(option, 'contrast')\"\n [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\n [class.bg-surface-100]=\"\n !isActiveOption(option) && !hasNonPrimarySeverity(option)\n \"\n [class.text-surface-500]=\"\n !isActiveOption(option) && !hasNonPrimarySeverity(option)\n \"\n >\n {{ resolveBadge(option) }}\n </span>\n }\n </button>\n }\n </div>\n\n @if (hasOverflow()) {\n <div\n class=\"flex shrink-0 items-center -mb-px border-b border-surface-200 pb-1\"\n >\n <mt-button\n icon=\"arrow.chevron-down\"\n [label]=\"moreLabel()\"\n size=\"small\"\n severity=\"primary\"\n [text]=\"true\"\n [rounded]=\"true\"\n (onClick)=\"morePopover.toggle($event)\"\n />\n <p-popover\n #morePopover\n appendTo=\"body\"\n (onHide)=\"onOverflowPopoverHide()\"\n >\n <div class=\"flex min-w-56 flex-col\">\n @if (showOverflowSearch()) {\n <div class=\"border-b border-surface-200 p-2\">\n <p-iconfield iconPosition=\"left\">\n <p-inputicon>\n <mt-icon icon=\"general.search-md\" />\n </p-inputicon>\n <input\n pInputText\n type=\"text\"\n [value]=\"searchTerm()\"\n (input)=\"onOverflowSearch($any($event.target).value)\"\n [placeholder]=\"'components.tabs.search' | transloco\"\n class=\"w-full\"\n />\n </p-iconfield>\n </div>\n }\n <div\n class=\"flex max-h-80 flex-col divide-y divide-surface-100 overflow-y-auto\"\n >\n @for (\n option of filteredOverflowOptions();\n track trackOption(option, $index)\n ) {\n <button\n type=\"button\"\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 px-2 py-1 text-start text-sm transition-colors [&_.p-avatar]:h-7 [&_.p-avatar]:w-7 [&_.p-avatar]:text-sm\"\n [class.bg-primary-50]=\"\n isActiveOption(option) && isSeverity(option, 'primary')\n \"\n [class.text-primary]=\"\n isActiveOption(option) && isSeverity(option, 'primary')\n \"\n [class.bg-slate-50]=\"\n isActiveOption(option) && isSeverity(option, 'secondary')\n \"\n [class.text-slate-600]=\"isSeverity(option, 'secondary')\"\n [class.bg-emerald-50]=\"\n isActiveOption(option) && isSeverity(option, 'success')\n \"\n [class.text-emerald-600]=\"isSeverity(option, 'success')\"\n [class.bg-sky-50]=\"\n isActiveOption(option) && isSeverity(option, 'info')\n \"\n [class.text-sky-600]=\"isSeverity(option, 'info')\"\n [class.bg-amber-50]=\"\n isActiveOption(option) && isSeverity(option, 'warn')\n \"\n [class.text-amber-700]=\"isSeverity(option, 'warn')\"\n [class.bg-red-50]=\"\n isActiveOption(option) && isSeverity(option, 'danger')\n \"\n [class.text-red-600]=\"isSeverity(option, 'danger')\"\n [class.bg-purple-50]=\"\n isActiveOption(option) && isSeverity(option, 'help')\n \"\n [class.text-purple-600]=\"isSeverity(option, 'help')\"\n [class.bg-zinc-100]=\"\n isActiveOption(option) && isSeverity(option, 'contrast')\n \"\n [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\n [class.font-semibold]=\"isActiveOption(option)\"\n [class.text-surface-700]=\"\n !isActiveOption(option) && !hasNonPrimarySeverity(option)\n \"\n [class.hover:bg-surface-100]=\"!isActiveOption(option)\"\n [class.cursor-not-allowed]=\"\n disabled() || isOptionDisabled(option)\n \"\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\n [disabled]=\"disabled() || isOptionDisabled(option)\"\n (click)=\"onOptionSelect(option); morePopover.hide()\"\n >\n <mt-avatar\n [icon]=\"resolveIconOrDefault(option)\"\n size=\"normal\"\n shape=\"circle\"\n styleClass=\"!bg-surface-100 !text-surface-600\"\n />\n <span class=\"flex-1 truncate text-start\">\n {{ resolveLabel(option) }}\n </span>\n @if (hasCountBadge(option)) {\n <span\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\n [class.bg-primary-100]=\"isSeverity(option, 'primary')\"\n [class.text-primary-700]=\"isSeverity(option, 'primary')\"\n [class.bg-slate-100]=\"isSeverity(option, 'secondary')\"\n [class.text-slate-700]=\"isSeverity(option, 'secondary')\"\n [class.bg-emerald-50]=\"isSeverity(option, 'success')\"\n [class.text-emerald-700]=\"isSeverity(option, 'success')\"\n [class.bg-sky-50]=\"isSeverity(option, 'info')\"\n [class.text-sky-700]=\"isSeverity(option, 'info')\"\n [class.bg-amber-50]=\"isSeverity(option, 'warn')\"\n [class.text-amber-800]=\"isSeverity(option, 'warn')\"\n [class.bg-red-50]=\"isSeverity(option, 'danger')\"\n [class.text-red-700]=\"isSeverity(option, 'danger')\"\n [class.bg-purple-50]=\"isSeverity(option, 'help')\"\n [class.text-purple-700]=\"isSeverity(option, 'help')\"\n [class.bg-zinc-100]=\"isSeverity(option, 'contrast')\"\n [class.text-zinc-800]=\"isSeverity(option, 'contrast')\"\n [class.bg-surface-100]=\"\n !isActiveOption(option) &&\n !hasNonPrimarySeverity(option)\n \"\n [class.text-surface-500]=\"\n !isActiveOption(option) &&\n !hasNonPrimarySeverity(option)\n \"\n >\n {{ resolveBadge(option) }}\n </span>\n }\n </button>\n } @empty {\n <div class=\"px-3 py-4 text-center text-sm text-surface-500\">\n {{ \"components.tabs.no-results\" | transloco }}\n </div>\n }\n </div>\n </div>\n </p-popover>\n </div>\n }\n </div>\n} @else {\n <p-selectbutton\n [options]=\"options()\"\n [(ngModel)]=\"active\"\n (ngModelChange)=\"onTabChange($event)\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n styleClass=\"my-tabs-button\"\n [size]=\"size()\"\n [fluid]=\"fluid()\"\n [disabled]=\"disabled()\"\n unselectable\n />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, signal, computed, inject, effect, HostBinding, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
+
import { numberAttribute, input, signal, computed, inject, effect, HostBinding, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import * as i2 from 'primeng/inputtext';
|
|
4
4
|
import { InputTextModule } from 'primeng/inputtext';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { NgControl, FormsModule } from '@angular/forms';
|
|
7
7
|
import { Tooltip } from '@masterteam/components/tooltip';
|
|
8
|
-
import { FieldValidation } from '@masterteam/components/field-validation';
|
|
8
|
+
import { characterLimitValidator, FieldValidation } from '@masterteam/components/field-validation';
|
|
9
9
|
import { isInvalid } from '@masterteam/components';
|
|
10
10
|
import { Icon } from '@masterteam/icons';
|
|
11
11
|
import { TranslocoService } from '@jsverse/transloco';
|
|
@@ -18,6 +18,10 @@ const requiredNoWhitespace = (control) => {
|
|
|
18
18
|
return { required: true };
|
|
19
19
|
return null;
|
|
20
20
|
};
|
|
21
|
+
const TEXT_FIELD_MAX_LENGTH = 300;
|
|
22
|
+
const optionalNumberAttribute = (value) => value === null || value === undefined
|
|
23
|
+
? null
|
|
24
|
+
: numberAttribute(value, TEXT_FIELD_MAX_LENGTH);
|
|
21
25
|
// TODO: text stuck when reset
|
|
22
26
|
class TextField {
|
|
23
27
|
inputText;
|
|
@@ -31,11 +35,13 @@ class TextField {
|
|
|
31
35
|
pInputs = input(...(ngDevMode ? [undefined, { debugName: "pInputs" }] : /* istanbul ignore next */ []));
|
|
32
36
|
// readonly pKeyFilter = input<KeyFilterPattern | RegExp>();
|
|
33
37
|
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
38
|
+
maxLength = input(TEXT_FIELD_MAX_LENGTH, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
|
|
34
39
|
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
35
40
|
iconPosition = input('start', ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
|
|
36
41
|
// readonly externalControl = input<any>(null);
|
|
37
42
|
styleClass;
|
|
38
43
|
requiredValidator = requiredNoWhitespace;
|
|
44
|
+
maxLengthValidator = null;
|
|
39
45
|
value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
40
46
|
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
41
47
|
passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
|
|
@@ -70,10 +76,23 @@ class TextField {
|
|
|
70
76
|
this.ngControl = null;
|
|
71
77
|
}
|
|
72
78
|
effect(() => {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
79
|
+
const control = this.ngControl?.control;
|
|
80
|
+
if (!control) {
|
|
81
|
+
return;
|
|
76
82
|
}
|
|
83
|
+
if (this.required()) {
|
|
84
|
+
control.addValidators(this.requiredValidator);
|
|
85
|
+
}
|
|
86
|
+
if (this.maxLengthValidator) {
|
|
87
|
+
control.removeValidators(this.maxLengthValidator);
|
|
88
|
+
this.maxLengthValidator = null;
|
|
89
|
+
}
|
|
90
|
+
const maxLength = this.maxLength();
|
|
91
|
+
if (maxLength !== null) {
|
|
92
|
+
this.maxLengthValidator = characterLimitValidator(maxLength);
|
|
93
|
+
control.addValidators(this.maxLengthValidator);
|
|
94
|
+
}
|
|
95
|
+
control.updateValueAndValidity({ emitEvent: false });
|
|
77
96
|
});
|
|
78
97
|
}
|
|
79
98
|
ngOnInit() {
|
|
@@ -126,7 +145,7 @@ class TextField {
|
|
|
126
145
|
this.disabled.set(disabled);
|
|
127
146
|
}
|
|
128
147
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
129
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TextField, isStandalone: true, selector: "mt-text-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pInputs: { classPropertyName: "pInputs", publicName: "pInputs", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.styleClass" }, classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "inputText", first: true, predicate: ["inputText"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n}\r\n\r\n<div\r\n class=\"mt-text-field__input\"\r\n [class.mt-text-field__input--start-icon]=\"hasStartIcon()\"\r\n [class.mt-text-field__input--end-action]=\"hasEndActions()\"\r\n [class.mt-text-field__input--two-end-actions]=\"hasTwoEndActions()\"\r\n>\r\n @if (icon() && iconPosition() === \"start\") {\r\n <span class=\"mt-text-field__icon mt-text-field__icon--start\">\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"inputType()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n\r\n @if (isPasswordField()) {\r\n <button\r\n type=\"button\"\r\n class=\"mt-text-field__action\"\r\n [class.mt-text-field__action--before-hint]=\"hasHint()\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [attr.aria-label]=\"passwordToggleLabel()\"\r\n [mtTooltip]=\"passwordToggleLabel()\"\r\n tooltipPosition=\"top\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <mt-icon [icon]=\"passwordToggleIcon()\" />\r\n </button>\r\n } @else if (icon() && iconPosition() === \"end\") {\r\n <span\r\n class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n [class.mt-text-field__icon--before-hint]=\"hasHint()\"\r\n >\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n @if (hint()) {\
|
|
148
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TextField, isStandalone: true, selector: "mt-text-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pInputs: { classPropertyName: "pInputs", publicName: "pInputs", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.styleClass" }, classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "inputText", first: true, predicate: ["inputText"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n}\r\n\r\n<div\r\n class=\"mt-text-field__input\"\r\n [class.mt-text-field__input--start-icon]=\"hasStartIcon()\"\r\n [class.mt-text-field__input--end-action]=\"hasEndActions()\"\r\n [class.mt-text-field__input--two-end-actions]=\"hasTwoEndActions()\"\r\n>\r\n @if (icon() && iconPosition() === \"start\") {\r\n <span class=\"mt-text-field__icon mt-text-field__icon--start\">\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"inputType()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n\r\n @if (isPasswordField()) {\r\n <button\r\n type=\"button\"\r\n class=\"mt-text-field__action\"\r\n [class.mt-text-field__action--before-hint]=\"hasHint()\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [attr.aria-label]=\"passwordToggleLabel()\"\r\n [mtTooltip]=\"passwordToggleLabel()\"\r\n tooltipPosition=\"top\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <mt-icon [icon]=\"passwordToggleIcon()\" />\r\n </button>\r\n } @else if (icon() && iconPosition() === \"end\") {\r\n <span\r\n class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n [class.mt-text-field__icon--before-hint]=\"hasHint()\"\r\n >\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n @if (hint()) {\n <span\n class=\"mt-text-field__icon mt-text-field__icon--end\"\n [mtTooltip]=\"hint()\"\n tooltipPosition=\"top\"\n >\n <mt-icon icon=\"general.info-circle\" />\r\n </span>\r\n }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [".mt-text-field__input{flex:1 1 auto;position:relative;width:100%}.mt-text-field__input--start-icon input{padding-inline-start:2.25rem}.mt-text-field__input--end-action input{padding-inline-end:2.25rem}.mt-text-field__input--two-end-actions input{padding-inline-end:4.25rem}.mt-text-field__icon,.mt-text-field__action{align-items:center;color:var(--p-text-muted-color);display:inline-flex;height:100%;inset-block-start:0;justify-content:center;position:absolute;width:2.25rem;z-index:1}.mt-text-field__icon--start{inset-inline-start:0}.mt-text-field__icon--end,.mt-text-field__action{inset-inline-end:0}.mt-text-field__icon--before-hint,.mt-text-field__action--before-hint{inset-inline-end:2rem}.mt-text-field__action{background:transparent;border:0;cursor:pointer;padding:0}.mt-text-field__action:disabled{cursor:default;opacity:.65}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type:
|
|
130
149
|
// INFO: if we need this filter uncomment the import, and next line and add this to the template input
|
|
131
150
|
//[pKeyFilter]="
|
|
132
151
|
// pKeyFilter()
|
|
@@ -157,11 +176,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
157
176
|
Icon,
|
|
158
177
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
159
178
|
class: 'grid gap-1',
|
|
160
|
-
}, template: "@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n}\r\n\r\n<div\r\n class=\"mt-text-field__input\"\r\n [class.mt-text-field__input--start-icon]=\"hasStartIcon()\"\r\n [class.mt-text-field__input--end-action]=\"hasEndActions()\"\r\n [class.mt-text-field__input--two-end-actions]=\"hasTwoEndActions()\"\r\n>\r\n @if (icon() && iconPosition() === \"start\") {\r\n <span class=\"mt-text-field__icon mt-text-field__icon--start\">\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"inputType()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n\r\n @if (isPasswordField()) {\r\n <button\r\n type=\"button\"\r\n class=\"mt-text-field__action\"\r\n [class.mt-text-field__action--before-hint]=\"hasHint()\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [attr.aria-label]=\"passwordToggleLabel()\"\r\n [mtTooltip]=\"passwordToggleLabel()\"\r\n tooltipPosition=\"top\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <mt-icon [icon]=\"passwordToggleIcon()\" />\r\n </button>\r\n } @else if (icon() && iconPosition() === \"end\") {\r\n <span\r\n class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n [class.mt-text-field__icon--before-hint]=\"hasHint()\"\r\n >\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n @if (hint()) {\
|
|
179
|
+
}, template: "@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n}\r\n\r\n<div\r\n class=\"mt-text-field__input\"\r\n [class.mt-text-field__input--start-icon]=\"hasStartIcon()\"\r\n [class.mt-text-field__input--end-action]=\"hasEndActions()\"\r\n [class.mt-text-field__input--two-end-actions]=\"hasTwoEndActions()\"\r\n>\r\n @if (icon() && iconPosition() === \"start\") {\r\n <span class=\"mt-text-field__icon mt-text-field__icon--start\">\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"inputType()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n\r\n @if (isPasswordField()) {\r\n <button\r\n type=\"button\"\r\n class=\"mt-text-field__action\"\r\n [class.mt-text-field__action--before-hint]=\"hasHint()\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [attr.aria-label]=\"passwordToggleLabel()\"\r\n [mtTooltip]=\"passwordToggleLabel()\"\r\n tooltipPosition=\"top\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <mt-icon [icon]=\"passwordToggleIcon()\" />\r\n </button>\r\n } @else if (icon() && iconPosition() === \"end\") {\r\n <span\r\n class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n [class.mt-text-field__icon--before-hint]=\"hasHint()\"\r\n >\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n @if (hint()) {\n <span\n class=\"mt-text-field__icon mt-text-field__icon--end\"\n [mtTooltip]=\"hint()\"\n tooltipPosition=\"top\"\n >\n <mt-icon icon=\"general.info-circle\" />\r\n </span>\r\n }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [".mt-text-field__input{flex:1 1 auto;position:relative;width:100%}.mt-text-field__input--start-icon input{padding-inline-start:2.25rem}.mt-text-field__input--end-action input{padding-inline-end:2.25rem}.mt-text-field__input--two-end-actions input{padding-inline-end:4.25rem}.mt-text-field__icon,.mt-text-field__action{align-items:center;color:var(--p-text-muted-color);display:inline-flex;height:100%;inset-block-start:0;justify-content:center;position:absolute;width:2.25rem;z-index:1}.mt-text-field__icon--start{inset-inline-start:0}.mt-text-field__icon--end,.mt-text-field__action{inset-inline-end:0}.mt-text-field__icon--before-hint,.mt-text-field__action--before-hint{inset-inline-end:2rem}.mt-text-field__action{background:transparent;border:0;cursor:pointer;padding:0}.mt-text-field__action:disabled{cursor:default;opacity:.65}\n"] }]
|
|
161
180
|
}], ctorParameters: () => [], propDecorators: { inputText: [{
|
|
162
181
|
type: ViewChild,
|
|
163
182
|
args: ['inputText', { static: true }]
|
|
164
|
-
}], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], pInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "pInputs", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], styleClass: [{
|
|
183
|
+
}], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], pInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "pInputs", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], styleClass: [{
|
|
165
184
|
type: HostBinding,
|
|
166
185
|
args: ['class']
|
|
167
186
|
}] } });
|