@masterteam/components 0.0.167 → 0.0.169

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.
Files changed (17) hide show
  1. package/assets/common.css +1 -1
  2. package/assets/i18n/ar.json +3 -1
  3. package/assets/i18n/en.json +3 -1
  4. package/fesm2022/masterteam-components-entities.mjs +4 -2
  5. package/fesm2022/masterteam-components-entities.mjs.map +1 -1
  6. package/fesm2022/masterteam-components-formula.mjs +6 -6
  7. package/fesm2022/masterteam-components-formula.mjs.map +1 -1
  8. package/fesm2022/masterteam-components-page-header.mjs +1 -1
  9. package/fesm2022/masterteam-components-page-header.mjs.map +1 -1
  10. package/fesm2022/masterteam-components-table.mjs +1 -1
  11. package/fesm2022/masterteam-components-table.mjs.map +1 -1
  12. package/fesm2022/masterteam-components-tabs.mjs +42 -5
  13. package/fesm2022/masterteam-components-tabs.mjs.map +1 -1
  14. package/fesm2022/masterteam-components-user-search-field.mjs +23 -14
  15. package/fesm2022/masterteam-components-user-search-field.mjs.map +1 -1
  16. package/package.json +1 -1
  17. package/types/masterteam-components-tabs.d.ts +9 -1
package/fesm2022/masterteam-components-tabs.mjs CHANGED
@@ -2,11 +2,18 @@ import * as i0 from '@angular/core';
2
2
  import { inject, input, model, output, booleanAttribute, DestroyRef, viewChild, signal, computed, effect, afterNextRender, Component } from '@angular/core';
3
3
  import * as i1 from '@angular/forms';
4
4
  import { FormsModule } from '@angular/forms';
5
- import { TranslocoService } from '@jsverse/transloco';
5
+ import { TranslocoService, TranslocoPipe } from '@jsverse/transloco';
6
6
  import { Icon } from '@masterteam/icons';
7
7
  import { SelectButton } from 'primeng/selectbutton';
8
8
  import { Popover } from 'primeng/popover';
9
+ import * as i2 from 'primeng/inputtext';
10
+ import { InputTextModule } from 'primeng/inputtext';
11
+ import * as i3 from 'primeng/iconfield';
12
+ import { IconFieldModule } from 'primeng/iconfield';
13
+ import * as i4 from 'primeng/inputicon';
14
+ import { InputIconModule } from 'primeng/inputicon';
9
15
  import { Button } from '@masterteam/components/button';
16
+ import { Avatar } from '@masterteam/components/avatar';
10
17
 
11
18
  class Tabs {
12
19
  transloco = inject(TranslocoService);
@@ -16,6 +23,7 @@ class Tabs {
16
23
  active = model(null, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
17
24
  mode = input('horizontal', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
18
25
  moreLabel = input(this.transloco.translate('components.tabs.more'), ...(ngDevMode ? [{ debugName: "moreLabel" }] : /* istanbul ignore next */ []));
26
+ defaultIcon = input('layout.align-left-02', ...(ngDevMode ? [{ debugName: "defaultIcon" }] : /* istanbul ignore next */ []));
19
27
  onChange = output();
20
28
  size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
21
29
  fluid = input(false, { ...(ngDevMode ? { debugName: "fluid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -30,6 +38,15 @@ class Tabs {
30
38
  overflowOptions = computed(() => this.options().slice(this.visibleCount()), ...(ngDevMode ? [{ debugName: "overflowOptions" }] : /* istanbul ignore next */ []));
31
39
  hasOverflow = computed(() => this.overflowOptions().length > 0, ...(ngDevMode ? [{ debugName: "hasOverflow" }] : /* istanbul ignore next */ []));
32
40
  isActiveInOverflow = computed(() => this.overflowOptions().some((option) => this.isActiveOption(option)), ...(ngDevMode ? [{ debugName: "isActiveInOverflow" }] : /* istanbul ignore next */ []));
41
+ searchThreshold = input(8, ...(ngDevMode ? [{ debugName: "searchThreshold" }] : /* istanbul ignore next */ []));
42
+ searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
43
+ showOverflowSearch = computed(() => this.overflowOptions().length >= this.searchThreshold(), ...(ngDevMode ? [{ debugName: "showOverflowSearch" }] : /* istanbul ignore next */ []));
44
+ filteredOverflowOptions = computed(() => {
45
+ const term = this.searchTerm().trim().toLowerCase();
46
+ if (!term)
47
+ return this.overflowOptions();
48
+ return this.overflowOptions().filter((option) => this.resolveLabel(option).toLowerCase().includes(term));
49
+ }, ...(ngDevMode ? [{ debugName: "filteredOverflowOptions" }] : /* istanbul ignore next */ []));
33
50
  constructor() {
34
51
  effect(() => {
35
52
  const options = this.options();
@@ -127,6 +144,12 @@ class Tabs {
127
144
  onTabChange(value) {
128
145
  this.onChange.emit(value);
129
146
  }
147
+ onOverflowSearch(value) {
148
+ this.searchTerm.set(value ?? '');
149
+ }
150
+ onOverflowPopoverHide() {
151
+ this.searchTerm.set('');
152
+ }
130
153
  onOptionSelect(option) {
131
154
  if (this.disabled() || this.isOptionDisabled(option)) {
132
155
  return;
@@ -152,6 +175,9 @@ class Tabs {
152
175
  resolveIcon(option) {
153
176
  return typeof option?.icon === 'string' ? option.icon : null;
154
177
  }
178
+ resolveIconOrDefault(option) {
179
+ return this.resolveIcon(option) ?? this.defaultIcon();
180
+ }
155
181
  resolveBadge(option) {
156
182
  return option?.badge ?? null;
157
183
  }
@@ -176,15 +202,26 @@ class Tabs {
176
202
  return this.resolveValue(option) ?? index;
177
203
  }
178
204
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
179
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Tabs, isStandalone: true, selector: "mt-tabs", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, moreLabel: { classPropertyName: "moreLabel", publicName: "moreLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", onChange: "onChange" }, host: { properties: { "class.w-full": "fluid()" }, classAttribute: "grid min-w-0 gap-1" }, viewQueries: [{ propertyName: "tabsContainer", first: true, predicate: ["tabsContainer"], descendants: true, isSignal: true }, { propertyName: "measureRow", first: true, predicate: ["measureRow"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (mode() === \"vertical\") {\r\n <div\r\n class=\"flex min-h-0 flex-col gap-1 rounded-2xl border border-surface-200 bg-white p-2\"\r\n role=\"tablist\"\r\n aria-orientation=\"vertical\"\r\n >\r\n @for (option of options(); track trackOption(option, $index)) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"group relative flex w-full items-center gap-3 overflow-hidden rounded-lg px-3 py-2.5 text-left text-sm transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary/20\"\r\n [attr.aria-selected]=\"isActiveOption(option)\"\r\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\r\n [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n [class.bg-primary-50]=\"isActiveOption(option)\"\r\n [class.font-semibold]=\"isActiveOption(option)\"\r\n [class.text-primary-700]=\"isActiveOption(option)\"\r\n [class.text-surface-500]=\"!isActiveOption(option)\"\r\n [class.hover:bg-surface-50]=\"!isActiveOption(option)\"\r\n [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\r\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n (click)=\"onOptionSelect(option)\"\r\n >\r\n @if (resolveIcon(option); as icon) {\r\n <mt-icon\r\n [icon]=\"icon\"\r\n class=\"relative z-10 text-base\"\r\n [class.text-primary]=\"isActiveOption(option)\"\r\n [class.text-surface-400]=\"!isActiveOption(option)\"\r\n />\r\n }\r\n\r\n <span class=\"relative z-10 min-w-0 flex-1 truncate\">\r\n {{ resolveLabel(option) }}\r\n </span>\r\n\r\n @if (hasBadge(option)) {\r\n <span\r\n class=\"relative z-10 ms-auto inline-flex min-w-5 items-center justify-center rounded-full px-2 py-0.5 text-[11px] font-bold leading-none\"\r\n [class.bg-primary]=\"isActiveOption(option)\"\r\n [class.text-white]=\"isActiveOption(option)\"\r\n [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n [class.text-surface-600]=\"!isActiveOption(option)\"\r\n >\r\n {{ resolveBadge(option) }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n} @else if (mode() === \"underline\") {\r\n <div\r\n #tabsContainer\r\n class=\"relative flex w-full min-w-0 max-w-full items-center gap-0.5 overflow-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 #morePopover appendTo=\"body\">\r\n <div class=\"flex flex-col min-w-40\">\r\n @for (\r\n option of overflowOptions();\r\n track trackOption(option, $index)\r\n ) {\r\n <button\r\n type=\"button\"\r\n class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-sm transition-colors\"\r\n [class.bg-primary-50]=\"isActiveOption(option)\"\r\n [class.text-primary]=\"isActiveOption(option)\"\r\n [class.font-semibold]=\"isActiveOption(option)\"\r\n [class.text-surface-700]=\"!isActiveOption(option)\"\r\n [class.hover:bg-surface-100]=\"!isActiveOption(option)\"\r\n [class.cursor-not-allowed]=\"\r\n disabled() || isOptionDisabled(option)\r\n \"\r\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n (click)=\"onOptionSelect(option); morePopover.hide()\"\r\n >\r\n @if (resolveIcon(option); as icon) {\r\n <mt-icon [icon]=\"icon\" class=\"text-base\" />\r\n }\r\n <span class=\"flex-1 truncate\">{{ resolveLabel(option) }}</span>\r\n @if (hasCountBadge(option)) {\r\n <span\r\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\r\n [class.bg-primary-100]=\"isActiveOption(option)\"\r\n [class.text-primary-700]=\"isActiveOption(option)\"\r\n [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n [class.text-surface-500]=\"!isActiveOption(option)\"\r\n >\r\n {{ resolveBadge(option) }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n </p-popover>\r\n </div>\r\n }\r\n </div>\r\n} @else {\r\n <p-selectbutton\r\n [options]=\"options()\"\r\n [(ngModel)]=\"active\"\r\n (ngModelChange)=\"onTabChange($event)\"\r\n [optionLabel]=\"optionLabel()\"\r\n [optionValue]=\"optionValue()\"\r\n styleClass=\"my-tabs-button\"\r\n [size]=\"size()\"\r\n [fluid]=\"fluid()\"\r\n [disabled]=\"disabled()\"\r\n unselectable\r\n />\r\n}\r\n", styles: [":host{min-width:0}\n"], dependencies: [{ kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }] });
205
+ 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 }], ngImport: i0, template: "@if (mode() === \"vertical\") {\r\n <div\r\n class=\"flex min-h-0 flex-col gap-1 rounded-2xl border border-surface-200 bg-white p-2\"\r\n role=\"tablist\"\r\n aria-orientation=\"vertical\"\r\n >\r\n @for (option of options(); track trackOption(option, $index)) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"group relative flex w-full items-center gap-3 overflow-hidden rounded-lg px-3 py-2.5 text-left text-sm transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary/20\"\r\n [attr.aria-selected]=\"isActiveOption(option)\"\r\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\r\n [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n [class.bg-primary-50]=\"isActiveOption(option)\"\r\n [class.font-semibold]=\"isActiveOption(option)\"\r\n [class.text-primary-700]=\"isActiveOption(option)\"\r\n [class.text-surface-500]=\"!isActiveOption(option)\"\r\n [class.hover:bg-surface-50]=\"!isActiveOption(option)\"\r\n [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\r\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n (click)=\"onOptionSelect(option)\"\r\n >\r\n @if (resolveIcon(option); as icon) {\r\n <mt-icon\r\n [icon]=\"icon\"\r\n class=\"relative z-10 text-base\"\r\n [class.text-primary]=\"isActiveOption(option)\"\r\n [class.text-surface-400]=\"!isActiveOption(option)\"\r\n />\r\n }\r\n\r\n <span class=\"relative z-10 min-w-0 flex-1 truncate\">\r\n {{ resolveLabel(option) }}\r\n </span>\r\n\r\n @if (hasBadge(option)) {\r\n <span\r\n class=\"relative z-10 ms-auto inline-flex min-w-5 items-center justify-center rounded-full px-2 py-0.5 text-[11px] font-bold leading-none\"\r\n [class.bg-primary]=\"isActiveOption(option)\"\r\n [class.text-white]=\"isActiveOption(option)\"\r\n [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n [class.text-surface-600]=\"!isActiveOption(option)\"\r\n >\r\n {{ resolveBadge(option) }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n} @else if (mode() === \"underline\") {\r\n <div\r\n #tabsContainer\r\n class=\"relative flex w-full min-w-0 max-w-full items-center gap-0.5 overflow-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" }] });
180
206
  }
181
207
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tabs, decorators: [{
182
208
  type: Component,
183
- args: [{ selector: 'mt-tabs', standalone: true, imports: [Icon, SelectButton, FormsModule, Button, Popover], host: {
209
+ args: [{ selector: 'mt-tabs', standalone: true, imports: [
210
+ Icon,
211
+ SelectButton,
212
+ FormsModule,
213
+ Button,
214
+ Popover,
215
+ Avatar,
216
+ InputTextModule,
217
+ IconFieldModule,
218
+ InputIconModule,
219
+ TranslocoPipe,
220
+ ], host: {
184
221
  class: 'grid min-w-0 gap-1',
185
222
  '[class.w-full]': 'fluid()',
186
- }, template: "@if (mode() === \"vertical\") {\r\n <div\r\n class=\"flex min-h-0 flex-col gap-1 rounded-2xl border border-surface-200 bg-white p-2\"\r\n role=\"tablist\"\r\n aria-orientation=\"vertical\"\r\n >\r\n @for (option of options(); track trackOption(option, $index)) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"group relative flex w-full items-center gap-3 overflow-hidden rounded-lg px-3 py-2.5 text-left text-sm transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary/20\"\r\n [attr.aria-selected]=\"isActiveOption(option)\"\r\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\r\n [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n [class.bg-primary-50]=\"isActiveOption(option)\"\r\n [class.font-semibold]=\"isActiveOption(option)\"\r\n [class.text-primary-700]=\"isActiveOption(option)\"\r\n [class.text-surface-500]=\"!isActiveOption(option)\"\r\n [class.hover:bg-surface-50]=\"!isActiveOption(option)\"\r\n [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\r\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n (click)=\"onOptionSelect(option)\"\r\n >\r\n @if (resolveIcon(option); as icon) {\r\n <mt-icon\r\n [icon]=\"icon\"\r\n class=\"relative z-10 text-base\"\r\n [class.text-primary]=\"isActiveOption(option)\"\r\n [class.text-surface-400]=\"!isActiveOption(option)\"\r\n />\r\n }\r\n\r\n <span class=\"relative z-10 min-w-0 flex-1 truncate\">\r\n {{ resolveLabel(option) }}\r\n </span>\r\n\r\n @if (hasBadge(option)) {\r\n <span\r\n class=\"relative z-10 ms-auto inline-flex min-w-5 items-center justify-center rounded-full px-2 py-0.5 text-[11px] font-bold leading-none\"\r\n [class.bg-primary]=\"isActiveOption(option)\"\r\n [class.text-white]=\"isActiveOption(option)\"\r\n [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n [class.text-surface-600]=\"!isActiveOption(option)\"\r\n >\r\n {{ resolveBadge(option) }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n} @else if (mode() === \"underline\") {\r\n <div\r\n #tabsContainer\r\n class=\"relative flex w-full min-w-0 max-w-full items-center gap-0.5 overflow-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 #morePopover appendTo=\"body\">\r\n <div class=\"flex flex-col min-w-40\">\r\n @for (\r\n option of overflowOptions();\r\n track trackOption(option, $index)\r\n ) {\r\n <button\r\n type=\"button\"\r\n class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-sm transition-colors\"\r\n [class.bg-primary-50]=\"isActiveOption(option)\"\r\n [class.text-primary]=\"isActiveOption(option)\"\r\n [class.font-semibold]=\"isActiveOption(option)\"\r\n [class.text-surface-700]=\"!isActiveOption(option)\"\r\n [class.hover:bg-surface-100]=\"!isActiveOption(option)\"\r\n [class.cursor-not-allowed]=\"\r\n disabled() || isOptionDisabled(option)\r\n \"\r\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n (click)=\"onOptionSelect(option); morePopover.hide()\"\r\n >\r\n @if (resolveIcon(option); as icon) {\r\n <mt-icon [icon]=\"icon\" class=\"text-base\" />\r\n }\r\n <span class=\"flex-1 truncate\">{{ resolveLabel(option) }}</span>\r\n @if (hasCountBadge(option)) {\r\n <span\r\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\r\n [class.bg-primary-100]=\"isActiveOption(option)\"\r\n [class.text-primary-700]=\"isActiveOption(option)\"\r\n [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n [class.text-surface-500]=\"!isActiveOption(option)\"\r\n >\r\n {{ resolveBadge(option) }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n </p-popover>\r\n </div>\r\n }\r\n </div>\r\n} @else {\r\n <p-selectbutton\r\n [options]=\"options()\"\r\n [(ngModel)]=\"active\"\r\n (ngModelChange)=\"onTabChange($event)\"\r\n [optionLabel]=\"optionLabel()\"\r\n [optionValue]=\"optionValue()\"\r\n styleClass=\"my-tabs-button\"\r\n [size]=\"size()\"\r\n [fluid]=\"fluid()\"\r\n [disabled]=\"disabled()\"\r\n unselectable\r\n />\r\n}\r\n", styles: [":host{min-width:0}\n"] }]
187
- }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], moreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreLabel", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabsContainer: [{ type: i0.ViewChild, args: ['tabsContainer', { isSignal: true }] }], measureRow: [{ type: i0.ViewChild, args: ['measureRow', { isSignal: true }] }] } });
223
+ }, template: "@if (mode() === \"vertical\") {\r\n <div\r\n class=\"flex min-h-0 flex-col gap-1 rounded-2xl border border-surface-200 bg-white p-2\"\r\n role=\"tablist\"\r\n aria-orientation=\"vertical\"\r\n >\r\n @for (option of options(); track trackOption(option, $index)) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"group relative flex w-full items-center gap-3 overflow-hidden rounded-lg px-3 py-2.5 text-left text-sm transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary/20\"\r\n [attr.aria-selected]=\"isActiveOption(option)\"\r\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\r\n [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n [class.bg-primary-50]=\"isActiveOption(option)\"\r\n [class.font-semibold]=\"isActiveOption(option)\"\r\n [class.text-primary-700]=\"isActiveOption(option)\"\r\n [class.text-surface-500]=\"!isActiveOption(option)\"\r\n [class.hover:bg-surface-50]=\"!isActiveOption(option)\"\r\n [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\r\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n (click)=\"onOptionSelect(option)\"\r\n >\r\n @if (resolveIcon(option); as icon) {\r\n <mt-icon\r\n [icon]=\"icon\"\r\n class=\"relative z-10 text-base\"\r\n [class.text-primary]=\"isActiveOption(option)\"\r\n [class.text-surface-400]=\"!isActiveOption(option)\"\r\n />\r\n }\r\n\r\n <span class=\"relative z-10 min-w-0 flex-1 truncate\">\r\n {{ resolveLabel(option) }}\r\n </span>\r\n\r\n @if (hasBadge(option)) {\r\n <span\r\n class=\"relative z-10 ms-auto inline-flex min-w-5 items-center justify-center rounded-full px-2 py-0.5 text-[11px] font-bold leading-none\"\r\n [class.bg-primary]=\"isActiveOption(option)\"\r\n [class.text-white]=\"isActiveOption(option)\"\r\n [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n [class.text-surface-600]=\"!isActiveOption(option)\"\r\n >\r\n {{ resolveBadge(option) }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n} @else if (mode() === \"underline\") {\r\n <div\r\n #tabsContainer\r\n class=\"relative flex w-full min-w-0 max-w-full items-center gap-0.5 overflow-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"] }]
224
+ }], 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 }] }], searchThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchThreshold", required: false }] }] } });
188
225
 
189
226
  /**
190
227
  * Generated bundle index. Do not edit.
package/fesm2022/masterteam-components-tabs.mjs.map CHANGED
@@ -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 { 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 { Button } from '@masterteam/components/button';\r\n\r\nexport interface OptionItem {\r\n label?: string;\r\n value?: any;\r\n icon?: MTIcon | null;\r\n badge?: number | string | null;\r\n disabled?: boolean;\r\n [key: string]: unknown;\r\n}\r\n\r\n@Component({\r\n selector: 'mt-tabs',\r\n standalone: true,\r\n imports: [Icon, SelectButton, FormsModule, Button, Popover],\r\n templateUrl: './tabs.html',\r\n styleUrls: ['./tabs.scss'],\r\n host: {\r\n class: 'grid min-w-0 gap-1',\r\n '[class.w-full]': 'fluid()',\r\n },\r\n})\r\nexport class Tabs {\r\n 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\r\n onChange = output<any>();\r\n\r\n readonly size = input<'small' | 'large' | undefined>();\r\n readonly fluid = input<boolean, unknown>(false, {\r\n transform: booleanAttribute,\r\n });\r\n disabled = input<boolean, unknown>(false, {\r\n transform: booleanAttribute,\r\n });\r\n\r\n private readonly destroyRef = inject(DestroyRef);\r\n private readonly tabsContainer =\r\n viewChild<ElementRef<HTMLElement>>('tabsContainer');\r\n private readonly measureRow =\r\n viewChild<ElementRef<HTMLElement>>('measureRow');\r\n private resizeObserver?: ResizeObserver;\r\n private measureHandle = 0;\r\n\r\n readonly visibleCount = signal<number>(Number.MAX_SAFE_INTEGER);\r\n readonly visibleOptions = computed(() =>\r\n this.options().slice(0, this.visibleCount()),\r\n );\r\n readonly overflowOptions = computed(() =>\r\n this.options().slice(this.visibleCount()),\r\n );\r\n readonly hasOverflow = computed(() => this.overflowOptions().length > 0);\r\n readonly isActiveInOverflow = computed(() =>\r\n this.overflowOptions().some((option) => this.isActiveOption(option)),\r\n );\r\n\r\n constructor() {\r\n effect(() => {\r\n const options = this.options();\r\n const active = this.active();\r\n if (!options.length) {\r\n return;\r\n }\r\n\r\n const hasActiveOption = options.some((option) =>\r\n Object.is(this.resolveValue(option), active),\r\n );\r\n if (!hasActiveOption) {\r\n this.active.set(this.resolveValue(options[0]));\r\n }\r\n });\r\n\r\n afterNextRender(() => {\r\n if (this.mode() !== 'underline') return;\r\n this.setupResizeObserver();\r\n this.scheduleMeasure();\r\n });\r\n\r\n effect(() => {\r\n // Re-measure when options or mode change.\r\n this.options();\r\n if (this.mode() !== 'underline') return;\r\n this.scheduleMeasure();\r\n });\r\n\r\n this.destroyRef.onDestroy(() => {\r\n this.resizeObserver?.disconnect();\r\n if (this.measureHandle) {\r\n cancelAnimationFrame(this.measureHandle);\r\n }\r\n });\r\n }\r\n\r\n private setupResizeObserver(): void {\r\n const container = this.tabsContainer()?.nativeElement;\r\n if (!container || typeof ResizeObserver === 'undefined') return;\r\n\r\n this.resizeObserver = new ResizeObserver(() => this.scheduleMeasure());\r\n this.resizeObserver.observe(container);\r\n }\r\n\r\n private scheduleMeasure(): void {\r\n if (this.measureHandle) {\r\n cancelAnimationFrame(this.measureHandle);\r\n }\r\n this.measureHandle = requestAnimationFrame(() => {\r\n this.measureHandle = 0;\r\n this.measureAndUpdate();\r\n });\r\n }\r\n\r\n private measureAndUpdate(): void {\r\n const container = this.tabsContainer()?.nativeElement;\r\n const measureRow = this.measureRow()?.nativeElement;\r\n if (!container || !measureRow) return;\r\n\r\n const optionsCount = this.options().length;\r\n if (optionsCount === 0) {\r\n this.visibleCount.set(0);\r\n return;\r\n }\r\n\r\n if (container.clientWidth === 0) return;\r\n\r\n // Inner width excludes the container's horizontal padding so we compare\r\n // against the actual space available to the flex tabs row.\r\n const style = getComputedStyle(container);\r\n const paddingX =\r\n (parseFloat(style.paddingLeft) || 0) +\r\n (parseFloat(style.paddingRight) || 0);\r\n const innerWidth = container.clientWidth - paddingX;\r\n if (innerWidth <= 0) return;\r\n\r\n const tabWidths = Array.from(measureRow.children).map(\r\n (el) => (el as HTMLElement).getBoundingClientRect().width,\r\n );\r\n\r\n if (tabWidths.length === 0) return;\r\n\r\n // Approximate gap-0.5 between tabs (2px).\r\n const gap = 2;\r\n const totalWidth =\r\n tabWidths.reduce((sum, width) => sum + width, 0) +\r\n Math.max(0, tabWidths.length - 1) * gap;\r\n\r\n // Everything fits — no more button needed.\r\n if (totalWidth <= innerWidth) {\r\n this.visibleCount.set(tabWidths.length);\r\n return;\r\n }\r\n\r\n // Reserve space for the More button (icon + label ~ 88px).\r\n const moreButtonReserve = 96;\r\n const available = innerWidth - moreButtonReserve;\r\n\r\n let cumulative = 0;\r\n let visibleCount = 0;\r\n for (let i = 0; i < tabWidths.length; i++) {\r\n const next = cumulative + tabWidths[i] + (i > 0 ? gap : 0);\r\n if (next > available) break;\r\n cumulative = next;\r\n visibleCount++;\r\n }\r\n\r\n this.visibleCount.set(Math.max(1, visibleCount));\r\n }\r\n\r\n onTabChange(value: any) {\r\n this.onChange.emit(value);\r\n }\r\n\r\n onOptionSelect(option: OptionItem): void {\r\n if (this.disabled() || this.isOptionDisabled(option)) {\r\n return;\r\n }\r\n\r\n const value = this.resolveValue(option);\r\n this.active.set(value);\r\n this.onTabChange(value);\r\n }\r\n\r\n resolveLabel(option: OptionItem): string {\r\n const labelKey = this.optionLabel();\r\n const label =\r\n option && typeof option === 'object'\r\n ? (option as Record<string, unknown>)[labelKey]\r\n : option;\r\n\r\n return typeof label === 'string' ? label : String(label ?? '');\r\n }\r\n\r\n resolveValue(option: OptionItem): unknown {\r\n const valueKey = this.optionValue();\r\n if (option && typeof option === 'object' && valueKey in option) {\r\n return (option as Record<string, unknown>)[valueKey];\r\n }\r\n\r\n return option;\r\n }\r\n\r\n resolveIcon(option: OptionItem): MTIcon | null {\r\n return typeof option?.icon === 'string' ? option.icon : null;\r\n }\r\n\r\n resolveBadge(option: OptionItem): number | string | null {\r\n return option?.badge ?? null;\r\n }\r\n\r\n hasBadge(option: OptionItem): boolean {\r\n return option?.badge !== null && option?.badge !== undefined;\r\n }\r\n\r\n hasCountBadge(option: OptionItem): boolean {\r\n const badge = option?.badge;\r\n if (badge === null || badge === undefined || badge === '') {\r\n return false;\r\n }\r\n const numeric = typeof badge === 'number' ? badge : Number(badge);\r\n return Number.isNaN(numeric) ? true : numeric > 0;\r\n }\r\n\r\n isActiveOption(option: OptionItem): boolean {\r\n return Object.is(this.active(), this.resolveValue(option));\r\n }\r\n\r\n isOptionDisabled(option: OptionItem): boolean {\r\n return !!option?.disabled;\r\n }\r\n\r\n trackOption(option: OptionItem, index: number): unknown {\r\n return this.resolveValue(option) ?? index;\r\n }\r\n}\r\n","@if (mode() === \"vertical\") {\r\n <div\r\n class=\"flex min-h-0 flex-col gap-1 rounded-2xl border border-surface-200 bg-white p-2\"\r\n role=\"tablist\"\r\n aria-orientation=\"vertical\"\r\n >\r\n @for (option of options(); track trackOption(option, $index)) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"group relative flex w-full items-center gap-3 overflow-hidden rounded-lg px-3 py-2.5 text-left text-sm transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary/20\"\r\n [attr.aria-selected]=\"isActiveOption(option)\"\r\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\r\n [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n [class.bg-primary-50]=\"isActiveOption(option)\"\r\n [class.font-semibold]=\"isActiveOption(option)\"\r\n [class.text-primary-700]=\"isActiveOption(option)\"\r\n [class.text-surface-500]=\"!isActiveOption(option)\"\r\n [class.hover:bg-surface-50]=\"!isActiveOption(option)\"\r\n [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\r\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n (click)=\"onOptionSelect(option)\"\r\n >\r\n @if (resolveIcon(option); as icon) {\r\n <mt-icon\r\n [icon]=\"icon\"\r\n class=\"relative z-10 text-base\"\r\n [class.text-primary]=\"isActiveOption(option)\"\r\n [class.text-surface-400]=\"!isActiveOption(option)\"\r\n />\r\n }\r\n\r\n <span class=\"relative z-10 min-w-0 flex-1 truncate\">\r\n {{ resolveLabel(option) }}\r\n </span>\r\n\r\n @if (hasBadge(option)) {\r\n <span\r\n class=\"relative z-10 ms-auto inline-flex min-w-5 items-center justify-center rounded-full px-2 py-0.5 text-[11px] font-bold leading-none\"\r\n [class.bg-primary]=\"isActiveOption(option)\"\r\n [class.text-white]=\"isActiveOption(option)\"\r\n [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n [class.text-surface-600]=\"!isActiveOption(option)\"\r\n >\r\n {{ resolveBadge(option) }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n} @else if (mode() === \"underline\") {\r\n <div\r\n #tabsContainer\r\n class=\"relative flex w-full min-w-0 max-w-full items-center gap-0.5 overflow-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 #morePopover appendTo=\"body\">\r\n <div class=\"flex flex-col min-w-40\">\r\n @for (\r\n option of overflowOptions();\r\n track trackOption(option, $index)\r\n ) {\r\n <button\r\n type=\"button\"\r\n class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-sm transition-colors\"\r\n [class.bg-primary-50]=\"isActiveOption(option)\"\r\n [class.text-primary]=\"isActiveOption(option)\"\r\n [class.font-semibold]=\"isActiveOption(option)\"\r\n [class.text-surface-700]=\"!isActiveOption(option)\"\r\n [class.hover:bg-surface-100]=\"!isActiveOption(option)\"\r\n [class.cursor-not-allowed]=\"\r\n disabled() || isOptionDisabled(option)\r\n \"\r\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n (click)=\"onOptionSelect(option); morePopover.hide()\"\r\n >\r\n @if (resolveIcon(option); as icon) {\r\n <mt-icon [icon]=\"icon\" class=\"text-base\" />\r\n }\r\n <span class=\"flex-1 truncate\">{{ resolveLabel(option) }}</span>\r\n @if (hasCountBadge(option)) {\r\n <span\r\n class=\"inline-grid min-w-[18px] place-items-center rounded-full px-1.5 text-[10px] leading-4 font-bold tabular-nums\"\r\n [class.bg-primary-100]=\"isActiveOption(option)\"\r\n [class.text-primary-700]=\"isActiveOption(option)\"\r\n [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n [class.text-surface-500]=\"!isActiveOption(option)\"\r\n >\r\n {{ resolveBadge(option) }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n </p-popover>\r\n </div>\r\n }\r\n </div>\r\n} @else {\r\n <p-selectbutton\r\n [options]=\"options()\"\r\n [(ngModel)]=\"active\"\r\n (ngModelChange)=\"onTabChange($event)\"\r\n [optionLabel]=\"optionLabel()\"\r\n [optionValue]=\"optionValue()\"\r\n styleClass=\"my-tabs-button\"\r\n [size]=\"size()\"\r\n [fluid]=\"fluid()\"\r\n [disabled]=\"disabled()\"\r\n unselectable\r\n />\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"masterteam-components-tabs.mjs","sources":["../../../../packages/masterteam/components/tabs/tabs.ts","../../../../packages/masterteam/components/tabs/tabs.html","../../../../packages/masterteam/components/tabs/masterteam-components-tabs.ts"],"sourcesContent":["import {\r\n afterNextRender,\r\n booleanAttribute,\r\n Component,\r\n computed,\r\n DestroyRef,\r\n effect,\r\n ElementRef,\r\n inject,\r\n input,\r\n model,\r\n output,\r\n signal,\r\n viewChild,\r\n} from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { 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 resizeObserver?: ResizeObserver;\r\n private measureHandle = 0;\r\n\r\n readonly visibleCount = signal<number>(Number.MAX_SAFE_INTEGER);\r\n readonly visibleOptions = computed(() =>\r\n this.options().slice(0, this.visibleCount()),\r\n );\r\n readonly overflowOptions = computed(() =>\r\n this.options().slice(this.visibleCount()),\r\n );\r\n readonly hasOverflow = computed(() => this.overflowOptions().length > 0);\r\n readonly isActiveInOverflow = computed(() =>\r\n this.overflowOptions().some((option) => this.isActiveOption(option)),\r\n );\r\n\r\n 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 });\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 }\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-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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"}
package/fesm2022/masterteam-components-user-search-field.mjs CHANGED
@@ -12,7 +12,7 @@ import { Tooltip } from '@masterteam/components/tooltip';
12
12
  import { FieldValidation } from '@masterteam/components/field-validation';
13
13
  import { isInvalid } from '@masterteam/components';
14
14
  import { Icon } from '@masterteam/icons';
15
- import { Subject, distinctUntilChanged, tap, switchMap, of, finalize, catchError } from 'rxjs';
15
+ import { Subject, debounceTime, tap, switchMap, of, finalize, catchError } from 'rxjs';
16
16
  import { HttpClient, HttpParams } from '@angular/common/http';
17
17
  import { Avatar } from '@masterteam/components/avatar';
18
18
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -63,11 +63,10 @@ class UserSearchField {
63
63
  this.styleClass = this.class();
64
64
  }
65
65
  search(event) {
66
- this.loading.set(true);
67
66
  this.searchTerms.next(event.query);
68
67
  }
69
68
  onFocus() {
70
- if (this.filteredUsers().length > 0 && this.autocomplete()) {
69
+ if (this.filteredUsers().length > 0) {
71
70
  this.autocomplete()?.show();
72
71
  }
73
72
  }
@@ -78,17 +77,20 @@ class UserSearchField {
78
77
  const updated = [...current, selectedUser];
79
78
  this.value.set(updated);
80
79
  this.onModelChange(updated);
80
+ const remaining = this.filteredUsers().filter((u) => u.id !== selectedUser.id);
81
+ this.filteredUsers.set(remaining);
82
+ if (remaining.length > 0) {
83
+ queueMicrotask(() => this.autocomplete()?.show());
84
+ }
81
85
  }
82
86
  else {
83
87
  this.value.set(selectedUser);
84
88
  this.onModelChange(selectedUser);
89
+ this.filteredUsers.set([]);
90
+ this.autocomplete()?.hide();
85
91
  }
86
92
  this.onTouched();
87
93
  this.loading.set(false);
88
- this.filteredUsers.set([]);
89
- if (!this.isMultiple() && this.autocomplete()) {
90
- this.autocomplete()?.hide();
91
- }
92
94
  }
93
95
  onUnselect(event) {
94
96
  const removedUser = event.value;
@@ -123,13 +125,14 @@ class UserSearchField {
123
125
  }
124
126
  getUsers() {
125
127
  this.searchTerms
126
- .pipe(takeUntilDestroyed(), distinctUntilChanged(), tap(() => this.loading.set(true)), switchMap((term) => {
127
- if (!term) {
128
+ .pipe(takeUntilDestroyed(), debounceTime(250), tap(() => this.loading.set(true)), switchMap((term) => {
129
+ const trimmed = term?.trim();
130
+ if (!trimmed) {
128
131
  this.filteredUsers.set([]);
129
132
  this.loading.set(false);
130
- return of([]);
133
+ return of({ [this.dataKey()]: [] });
131
134
  }
132
- const params = new HttpParams().set(this.paramName(), term);
135
+ const params = new HttpParams().set(this.paramName(), trimmed);
133
136
  return this.http
134
137
  .get(this.apiUrl(), {
135
138
  params,
@@ -137,13 +140,19 @@ class UserSearchField {
137
140
  })
138
141
  .pipe(finalize(() => this.loading.set(false)), catchError((err) => {
139
142
  console.error('API search failed:', err);
140
- this.filteredUsers.set([]);
141
143
  return of({ [this.dataKey()]: [] });
142
144
  }));
143
145
  }))
144
146
  .subscribe({
145
- next: (users) => {
146
- this.filteredUsers.set((users[this.dataKey()] ?? []));
147
+ next: (response) => {
148
+ const users = (response?.[this.dataKey()] ?? []);
149
+ if (this.isMultiple()) {
150
+ const selectedIds = new Set((this.value() ?? []).map((u) => u.id));
151
+ this.filteredUsers.set(users.filter((u) => !selectedIds.has(u.id)));
152
+ }
153
+ else {
154
+ this.filteredUsers.set(users);
155
+ }
147
156
  },
148
157
  });
149
158
  }
package/fesm2022/masterteam-components-user-search-field.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"masterteam-components-user-search-field.mjs","sources":["../../../../packages/masterteam/components/user-search-field/user-search-field.ts","../../../../packages/masterteam/components/user-search-field/user-search-field.html","../../../../packages/masterteam/components/user-search-field/masterteam-components-user-search-field.ts"],"sourcesContent":["import {\r\n Component,\r\n HostBinding,\r\n signal,\r\n input,\r\n OnInit,\r\n inject,\r\n ChangeDetectionStrategy,\r\n effect,\r\n viewChild,\r\n} from '@angular/core';\r\nimport {\r\n ControlValueAccessor,\r\n FormsModule,\r\n NgControl,\r\n Validators,\r\n} from '@angular/forms';\r\nimport { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';\r\nimport { InputGroupModule } from 'primeng/inputgroup';\r\nimport { InputGroupAddonModule } from 'primeng/inputgroupaddon';\r\nimport { Tooltip } from '@masterteam/components/tooltip';\r\nimport { FieldValidation } from '@masterteam/components/field-validation';\r\nimport { isInvalid } from '@masterteam/components';\r\nimport { Icon } from '@masterteam/icons';\r\nimport {\r\n Subject,\r\n distinctUntilChanged,\r\n switchMap,\r\n tap,\r\n of,\r\n finalize,\r\n catchError,\r\n} from 'rxjs';\r\nimport { HttpClient, HttpContext, HttpParams } from '@angular/common/http';\r\nimport { Avatar } from '@masterteam/components/avatar';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { TranslocoService, TranslocoPipe } from '@jsverse/transloco';\r\n\r\nexport interface User {\r\n isExternal: boolean;\r\n id: string;\r\n displayName: string;\r\n userName: string;\r\n photo: string;\r\n}\r\n\r\n@Component({\r\n selector: 'mt-user-search-field',\r\n standalone: true,\r\n imports: [\r\n FormsModule,\r\n AutoCompleteModule,\r\n Tooltip,\r\n InputGroupModule,\r\n InputGroupAddonModule,\r\n FieldValidation,\r\n Icon,\r\n Avatar,\r\n TranslocoPipe,\r\n ],\r\n templateUrl: './user-search-field.html',\r\n styleUrls: ['./user-search-field.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n class: 'grid gap-1',\r\n },\r\n})\r\nexport class UserSearchField implements ControlValueAccessor, OnInit {\r\n readonly hint = input<string>();\r\n readonly label = input<string>();\r\n readonly placeholder = input<string>();\r\n readonly class = input<string>('');\r\n readonly readonly = input<boolean>(false);\r\n readonly required = input<boolean>(false);\r\n readonly isMultiple = input<boolean>(false);\r\n readonly apiUrl = input.required<string>();\r\n readonly dataKey = input<string>('data');\r\n readonly paramName = input<string>('query');\r\n readonly context = input<HttpContext | undefined>(undefined);\r\n\r\n @HostBinding('class') styleClass: string;\r\n\r\n requiredValidator = Validators.required;\r\n value = signal<User | User[] | null>(null);\r\n disabled = signal<boolean>(false);\r\n loading = signal<boolean>(false);\r\n\r\n readonly size = input<'small' | 'large' | undefined>();\r\n\r\n filteredUsers = signal<User[]>([]);\r\n private searchTerms = new Subject<string>();\r\n\r\n private readonly translocoService = inject(TranslocoService);\r\n\r\n readonly autocomplete = viewChild<AutoComplete>('autocomplete');\r\n\r\n onTouched: () => void = () => {};\r\n onModelChange: (value: any) => void = () => {};\r\n\r\n public ngControl: NgControl | null = null;\r\n private http = inject(HttpClient);\r\n\r\n isInvalid = isInvalid;\r\n\r\n constructor() {\r\n this.ngControl = inject(NgControl, { self: true, optional: true });\r\n if (this.ngControl) {\r\n this.ngControl.valueAccessor = this;\r\n }\r\n effect(() => {\r\n if (this.ngControl?.control && this.required()) {\r\n this.ngControl.control.addValidators(Validators.required);\r\n this.ngControl.control.updateValueAndValidity();\r\n }\r\n });\r\n this.getUsers();\r\n }\r\n\r\n ngOnInit() {\r\n this.styleClass = this.class();\r\n }\r\n\r\n search(event: { query: string }) {\r\n this.loading.set(true);\r\n this.searchTerms.next(event.query);\r\n }\r\n\r\n onFocus() {\r\n if (this.filteredUsers().length > 0 && this.autocomplete()) {\r\n this.autocomplete()?.show();\r\n }\r\n }\r\n\r\n onSelect(event: { originalEvent: Event; value: User }) {\r\n const selectedUser = event.value;\r\n if (this.isMultiple()) {\r\n const current = (this.value() as User[]) || [];\r\n const updated = [...current, selectedUser];\r\n this.value.set(updated);\r\n this.onModelChange(updated);\r\n } else {\r\n this.value.set(selectedUser);\r\n this.onModelChange(selectedUser);\r\n }\r\n this.onTouched();\r\n this.loading.set(false);\r\n this.filteredUsers.set([]);\r\n if (!this.isMultiple() && this.autocomplete()) {\r\n this.autocomplete()?.hide();\r\n }\r\n }\r\n\r\n onUnselect(event: { originalEvent: Event; value: User }) {\r\n const removedUser = event.value;\r\n const current = (this.value() as User[]) || [];\r\n const updated = current.filter((u) => u.id !== removedUser.id);\r\n this.value.set(updated);\r\n this.onModelChange(updated);\r\n this.onTouched();\r\n }\r\n\r\n onClear() {\r\n this.value.set(this.isMultiple() ? [] : null);\r\n this.onModelChange(this.isMultiple() ? [] : null);\r\n this.filteredUsers.set([]);\r\n this.loading.set(false);\r\n }\r\n\r\n writeValue(value: User | User[] | null): void {\r\n if (this.isMultiple()) {\r\n this.value.set(Array.isArray(value) ? value : value ? [value] : []);\r\n } else {\r\n this.value.set(Array.isArray(value) ? (value[0] ?? null) : value);\r\n }\r\n }\r\n\r\n registerOnChange(fn: (value: User | null) => void) {\r\n this.onModelChange = fn;\r\n }\r\n\r\n registerOnTouched(fn: any) {\r\n this.onTouched = fn;\r\n }\r\n\r\n setDisabledState(disabled: boolean) {\r\n this.disabled.set(disabled);\r\n }\r\n\r\n getUsers() {\r\n this.searchTerms\r\n .pipe(\r\n takeUntilDestroyed(),\r\n distinctUntilChanged(),\r\n tap(() => this.loading.set(true)),\r\n switchMap((term: string) => {\r\n if (!term) {\r\n this.filteredUsers.set([]);\r\n this.loading.set(false);\r\n return of([]);\r\n }\r\n const params = new HttpParams().set(this.paramName(), term);\r\n return this.http\r\n .get<any>(this.apiUrl(), {\r\n params,\r\n context: this.context(),\r\n })\r\n .pipe(\r\n finalize(() => this.loading.set(false)),\r\n catchError((err) => {\r\n console.error('API search failed:', err);\r\n this.filteredUsers.set([]);\r\n return of({ [this.dataKey()]: [] });\r\n }),\r\n );\r\n }),\r\n )\r\n .subscribe({\r\n next: (users) => {\r\n this.filteredUsers.set((users[this.dataKey()] ?? []) as User[]);\r\n },\r\n });\r\n }\r\n}\r\n","@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >\r\n {{ label() }}\r\n </label>\r\n}\r\n<div class=\"relative\">\r\n <p-inputgroup>\r\n <p-autoComplete\r\n #autocomplete=\"\"\r\n [suggestions]=\"filteredUsers()\"\r\n (completeMethod)=\"search($event)\"\r\n (onSelect)=\"onSelect($event)\"\r\n (onUnselect)=\"onUnselect($event)\"\r\n (onClear)=\"onClear()\"\r\n (onFocus)=\"onFocus()\"\r\n (onBlur)=\"onTouched()\"\r\n [ngModel]=\"isMultiple() ? value() : value()?.['displayName']\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n [placeholder]=\"'components.userSearchField.search' | transloco\"\r\n [multiple]=\"isMultiple()\"\r\n [optionLabel]=\"'displayName'\"\r\n class=\"w-full\"\r\n appendTo=\"body\"\r\n styleClass=\"w-full\"\r\n [dropdown]=\"false\"\r\n [size]=\"size()\"\r\n >\r\n <ng-template let-user pTemplate=\"item\">\r\n <div class=\"flex items-center gap-2\">\r\n <mt-avatar size=\"small\" icon=\"user.user-01\" />\r\n <div class=\"flex align-items-center gap-3\">\r\n <span class=\"font-medium\">{{ user.displayName }}</span>\r\n <medium class=\"text-gray-500\">{{ \"@\" + user.userName }}</medium>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- <ng-template let-user #pTemplate=\"selecteditem\">\r\n <div class=\"flex items-center gap-2\">\r\n <mt-avatar size=\"small\" icon=\"user.user-01\" />\r\n <div class=\"flex align-items-center gap-3\">\r\n <span class=\"font-medium\">{{ user.displayName }}</span>\r\n <medium class=\"text-gray-500\">{{ \"@\" + user.userName }}</medium>\r\n </div>\r\n </div>\r\n </ng-template> -->\r\n </p-autoComplete>\r\n @if (hint()) {\r\n <p-inputgroup-addon [mtTooltip]=\"hint()\" tooltipPosition=\"top\">\r\n <mt-icon icon=\"general.help-circle\" />\r\n </p-inputgroup-addon>\r\n } @else {\r\n <p-inputgroup-addon tooltipPosition=\"top\">\r\n <mt-icon icon=\"user.user-03\" />\r\n </p-inputgroup-addon>\r\n }\r\n </p-inputgroup>\r\n\r\n @if (loading()) {\r\n <mt-icon\r\n icon=\"general.loading-01\"\r\n class=\"animate-spin absolute right-3 bg-white top-1/2 -translate-y-1/2\"\r\n />\r\n }\r\n</div>\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\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-user-search-field.mjs","sources":["../../../../packages/masterteam/components/user-search-field/user-search-field.ts","../../../../packages/masterteam/components/user-search-field/user-search-field.html","../../../../packages/masterteam/components/user-search-field/masterteam-components-user-search-field.ts"],"sourcesContent":["import {\r\n Component,\r\n HostBinding,\r\n signal,\r\n input,\r\n OnInit,\r\n inject,\r\n ChangeDetectionStrategy,\r\n effect,\r\n viewChild,\r\n} from '@angular/core';\r\nimport {\r\n ControlValueAccessor,\r\n FormsModule,\r\n NgControl,\r\n Validators,\r\n} from '@angular/forms';\r\nimport { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';\r\nimport { InputGroupModule } from 'primeng/inputgroup';\r\nimport { InputGroupAddonModule } from 'primeng/inputgroupaddon';\r\nimport { Tooltip } from '@masterteam/components/tooltip';\r\nimport { FieldValidation } from '@masterteam/components/field-validation';\r\nimport { isInvalid } from '@masterteam/components';\r\nimport { Icon } from '@masterteam/icons';\r\nimport {\r\n Subject,\r\n debounceTime,\r\n switchMap,\r\n tap,\r\n of,\r\n finalize,\r\n catchError,\r\n} from 'rxjs';\r\nimport { HttpClient, HttpContext, HttpParams } from '@angular/common/http';\r\nimport { Avatar } from '@masterteam/components/avatar';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { TranslocoService, TranslocoPipe } from '@jsverse/transloco';\r\n\r\nexport interface User {\r\n isExternal: boolean;\r\n id: string;\r\n displayName: string;\r\n userName: string;\r\n photo: string;\r\n}\r\n\r\n@Component({\r\n selector: 'mt-user-search-field',\r\n standalone: true,\r\n imports: [\r\n FormsModule,\r\n AutoCompleteModule,\r\n Tooltip,\r\n InputGroupModule,\r\n InputGroupAddonModule,\r\n FieldValidation,\r\n Icon,\r\n Avatar,\r\n TranslocoPipe,\r\n ],\r\n templateUrl: './user-search-field.html',\r\n styleUrls: ['./user-search-field.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n class: 'grid gap-1',\r\n },\r\n})\r\nexport class UserSearchField implements ControlValueAccessor, OnInit {\r\n readonly hint = input<string>();\r\n readonly label = input<string>();\r\n readonly placeholder = input<string>();\r\n readonly class = input<string>('');\r\n readonly readonly = input<boolean>(false);\r\n readonly required = input<boolean>(false);\r\n readonly isMultiple = input<boolean>(false);\r\n readonly apiUrl = input.required<string>();\r\n readonly dataKey = input<string>('data');\r\n readonly paramName = input<string>('query');\r\n readonly context = input<HttpContext | undefined>(undefined);\r\n\r\n @HostBinding('class') styleClass: string;\r\n\r\n requiredValidator = Validators.required;\r\n value = signal<User | User[] | null>(null);\r\n disabled = signal<boolean>(false);\r\n loading = signal<boolean>(false);\r\n\r\n readonly size = input<'small' | 'large' | undefined>();\r\n\r\n filteredUsers = signal<User[]>([]);\r\n private searchTerms = new Subject<string>();\r\n\r\n private readonly translocoService = inject(TranslocoService);\r\n\r\n readonly autocomplete = viewChild<AutoComplete>('autocomplete');\r\n\r\n onTouched: () => void = () => {};\r\n onModelChange: (value: any) => void = () => {};\r\n\r\n public ngControl: NgControl | null = null;\r\n private http = inject(HttpClient);\r\n\r\n isInvalid = isInvalid;\r\n\r\n constructor() {\r\n this.ngControl = inject(NgControl, { self: true, optional: true });\r\n if (this.ngControl) {\r\n this.ngControl.valueAccessor = this;\r\n }\r\n effect(() => {\r\n if (this.ngControl?.control && this.required()) {\r\n this.ngControl.control.addValidators(Validators.required);\r\n this.ngControl.control.updateValueAndValidity();\r\n }\r\n });\r\n this.getUsers();\r\n }\r\n\r\n ngOnInit() {\r\n this.styleClass = this.class();\r\n }\r\n\r\n search(event: { query: string }) {\r\n this.searchTerms.next(event.query);\r\n }\r\n\r\n onFocus() {\r\n if (this.filteredUsers().length > 0) {\r\n this.autocomplete()?.show();\r\n }\r\n }\r\n\r\n onSelect(event: { originalEvent: Event; value: User }) {\r\n const selectedUser = event.value;\r\n if (this.isMultiple()) {\r\n const current = (this.value() as User[]) || [];\r\n const updated = [...current, selectedUser];\r\n this.value.set(updated);\r\n this.onModelChange(updated);\r\n const remaining = this.filteredUsers().filter(\r\n (u) => u.id !== selectedUser.id,\r\n );\r\n this.filteredUsers.set(remaining);\r\n if (remaining.length > 0) {\r\n queueMicrotask(() => this.autocomplete()?.show());\r\n }\r\n } else {\r\n this.value.set(selectedUser);\r\n this.onModelChange(selectedUser);\r\n this.filteredUsers.set([]);\r\n this.autocomplete()?.hide();\r\n }\r\n this.onTouched();\r\n this.loading.set(false);\r\n }\r\n\r\n onUnselect(event: { originalEvent: Event; value: User }) {\r\n const removedUser = event.value;\r\n const current = (this.value() as User[]) || [];\r\n const updated = current.filter((u) => u.id !== removedUser.id);\r\n this.value.set(updated);\r\n this.onModelChange(updated);\r\n this.onTouched();\r\n }\r\n\r\n onClear() {\r\n this.value.set(this.isMultiple() ? [] : null);\r\n this.onModelChange(this.isMultiple() ? [] : null);\r\n this.filteredUsers.set([]);\r\n this.loading.set(false);\r\n }\r\n\r\n writeValue(value: User | User[] | null): void {\r\n if (this.isMultiple()) {\r\n this.value.set(Array.isArray(value) ? value : value ? [value] : []);\r\n } else {\r\n this.value.set(Array.isArray(value) ? (value[0] ?? null) : value);\r\n }\r\n }\r\n\r\n registerOnChange(fn: (value: User | null) => void) {\r\n this.onModelChange = fn;\r\n }\r\n\r\n registerOnTouched(fn: any) {\r\n this.onTouched = fn;\r\n }\r\n\r\n setDisabledState(disabled: boolean) {\r\n this.disabled.set(disabled);\r\n }\r\n\r\n getUsers() {\r\n this.searchTerms\r\n .pipe(\r\n takeUntilDestroyed(),\r\n debounceTime(250),\r\n tap(() => this.loading.set(true)),\r\n switchMap((term: string) => {\r\n const trimmed = term?.trim();\r\n if (!trimmed) {\r\n this.filteredUsers.set([]);\r\n this.loading.set(false);\r\n return of({ [this.dataKey()]: [] } as Record<string, User[]>);\r\n }\r\n const params = new HttpParams().set(this.paramName(), trimmed);\r\n return this.http\r\n .get<Record<string, User[]>>(this.apiUrl(), {\r\n params,\r\n context: this.context(),\r\n })\r\n .pipe(\r\n finalize(() => this.loading.set(false)),\r\n catchError((err) => {\r\n console.error('API search failed:', err);\r\n return of({ [this.dataKey()]: [] } as Record<string, User[]>);\r\n }),\r\n );\r\n }),\r\n )\r\n .subscribe({\r\n next: (response) => {\r\n const users = (response?.[this.dataKey()] ?? []) as User[];\r\n if (this.isMultiple()) {\r\n const selectedIds = new Set(\r\n ((this.value() as User[]) ?? []).map((u) => u.id),\r\n );\r\n this.filteredUsers.set(users.filter((u) => !selectedIds.has(u.id)));\r\n } else {\r\n this.filteredUsers.set(users);\r\n }\r\n },\r\n });\r\n }\r\n}\r\n","@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >\r\n {{ label() }}\r\n </label>\r\n}\r\n<div class=\"relative\">\r\n <p-inputgroup>\r\n <p-autoComplete\r\n #autocomplete=\"\"\r\n [suggestions]=\"filteredUsers()\"\r\n (completeMethod)=\"search($event)\"\r\n (onSelect)=\"onSelect($event)\"\r\n (onUnselect)=\"onUnselect($event)\"\r\n (onClear)=\"onClear()\"\r\n (onFocus)=\"onFocus()\"\r\n (onBlur)=\"onTouched()\"\r\n [ngModel]=\"isMultiple() ? value() : value()?.['displayName']\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n [placeholder]=\"'components.userSearchField.search' | transloco\"\r\n [multiple]=\"isMultiple()\"\r\n [optionLabel]=\"'displayName'\"\r\n class=\"w-full\"\r\n appendTo=\"body\"\r\n styleClass=\"w-full\"\r\n [dropdown]=\"false\"\r\n [size]=\"size()\"\r\n >\r\n <ng-template let-user pTemplate=\"item\">\r\n <div class=\"flex items-center gap-2\">\r\n <mt-avatar size=\"small\" icon=\"user.user-01\" />\r\n <div class=\"flex align-items-center gap-3\">\r\n <span class=\"font-medium\">{{ user.displayName }}</span>\r\n <medium class=\"text-gray-500\">{{ \"@\" + user.userName }}</medium>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- <ng-template let-user #pTemplate=\"selecteditem\">\r\n <div class=\"flex items-center gap-2\">\r\n <mt-avatar size=\"small\" icon=\"user.user-01\" />\r\n <div class=\"flex align-items-center gap-3\">\r\n <span class=\"font-medium\">{{ user.displayName }}</span>\r\n <medium class=\"text-gray-500\">{{ \"@\" + user.userName }}</medium>\r\n </div>\r\n </div>\r\n </ng-template> -->\r\n </p-autoComplete>\r\n @if (hint()) {\r\n <p-inputgroup-addon [mtTooltip]=\"hint()\" tooltipPosition=\"top\">\r\n <mt-icon icon=\"general.help-circle\" />\r\n </p-inputgroup-addon>\r\n } @else {\r\n <p-inputgroup-addon tooltipPosition=\"top\">\r\n <mt-icon icon=\"user.user-03\" />\r\n </p-inputgroup-addon>\r\n }\r\n </p-inputgroup>\r\n\r\n @if (loading()) {\r\n <mt-icon\r\n icon=\"general.loading-01\"\r\n class=\"animate-spin absolute right-3 bg-white top-1/2 -translate-y-1/2\"\r\n />\r\n }\r\n</div>\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@masterteam/components",
3
- "version": "0.0.167",
3
+ "version": "0.0.169",
4
4
  "publishConfig": {
5
5
  "directory": "../../../dist/masterteam/components",
6
6
  "linkDirectory": true,