@masterteam/components 0.0.145 → 0.0.147

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.
@@ -1,14 +1,16 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { input, model, output, booleanAttribute, effect, Component } from '@angular/core';
3
- import { SelectButton } from 'primeng/selectbutton';
4
3
  import * as i1 from '@angular/forms';
5
4
  import { FormsModule } from '@angular/forms';
5
+ import { Icon } from '@masterteam/icons';
6
+ import { SelectButton } from 'primeng/selectbutton';
6
7
 
7
8
  class Tabs {
8
9
  options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
9
10
  optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
10
11
  optionValue = input('value', ...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
11
12
  active = model(null, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
13
+ mode = input('horizontal', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
12
14
  onChange = output();
13
15
  size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
14
16
  fluid = input(false, { ...(ngDevMode ? { debugName: "fluid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -17,24 +19,69 @@ class Tabs {
17
19
  constructor() {
18
20
  effect(() => {
19
21
  const options = this.options();
20
- if (options && options.length > 0 && !this.active()) {
21
- this.active.set(options[0].value);
22
+ const active = this.active();
23
+ if (!options.length) {
24
+ return;
25
+ }
26
+ const hasActiveOption = options.some((option) => Object.is(this.resolveValue(option), active));
27
+ if (!hasActiveOption) {
28
+ this.active.set(this.resolveValue(options[0]));
22
29
  }
23
30
  });
24
31
  }
25
32
  onTabChange(value) {
26
33
  this.onChange.emit(value);
27
34
  }
35
+ onOptionSelect(option) {
36
+ if (this.disabled() || this.isOptionDisabled(option)) {
37
+ return;
38
+ }
39
+ const value = this.resolveValue(option);
40
+ this.active.set(value);
41
+ this.onTabChange(value);
42
+ }
43
+ resolveLabel(option) {
44
+ const labelKey = this.optionLabel();
45
+ const label = option && typeof option === 'object'
46
+ ? option[labelKey]
47
+ : option;
48
+ return typeof label === 'string' ? label : String(label ?? '');
49
+ }
50
+ resolveValue(option) {
51
+ const valueKey = this.optionValue();
52
+ if (option && typeof option === 'object' && valueKey in option) {
53
+ return option[valueKey];
54
+ }
55
+ return option;
56
+ }
57
+ resolveIcon(option) {
58
+ return typeof option?.icon === 'string' ? option.icon : null;
59
+ }
60
+ resolveBadge(option) {
61
+ return option?.badge ?? null;
62
+ }
63
+ hasBadge(option) {
64
+ return option?.badge !== null && option?.badge !== undefined;
65
+ }
66
+ isActiveOption(option) {
67
+ return Object.is(this.active(), this.resolveValue(option));
68
+ }
69
+ isOptionDisabled(option) {
70
+ return !!option?.disabled;
71
+ }
72
+ trackOption(option, index) {
73
+ return this.resolveValue(option) ?? index;
74
+ }
28
75
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
29
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", onChange: "onChange" }, host: { properties: { "class.w-full": "fluid()" }, classAttribute: "grid gap-1" }, ngImport: i0, template: "<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", styles: [""], dependencies: [{ 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"] }] });
76
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Tabs, isStandalone: true, selector: "mt-tabs", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", onChange: "onChange" }, host: { properties: { "class.w-full": "fluid()" }, classAttribute: "grid gap-1" }, ngImport: i0, template: "@if (mode() === \"vertical\") {\r\n <div\r\n class=\"flex min-h-0 flex-col gap-1 rounded-2xl border border-surface-200 bg-white p-2\"\r\n role=\"tablist\"\r\n aria-orientation=\"vertical\"\r\n >\r\n @for (option of options(); track trackOption(option, $index)) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n class=\"group relative flex w-full items-center gap-3 overflow-hidden rounded-lg px-3 py-2.5 text-left text-sm transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-primary/20\"\r\n [attr.aria-selected]=\"isActiveOption(option)\"\r\n [attr.tabindex]=\"isActiveOption(option) ? 0 : -1\"\r\n [disabled]=\"disabled() || isOptionDisabled(option)\"\r\n [class.bg-primary-50]=\"isActiveOption(option)\"\r\n [class.font-semibold]=\"isActiveOption(option)\"\r\n [class.text-primary-700]=\"isActiveOption(option)\"\r\n [class.text-surface-500]=\"!isActiveOption(option)\"\r\n [class.hover:bg-surface-50]=\"!isActiveOption(option)\"\r\n [class.cursor-not-allowed]=\"disabled() || isOptionDisabled(option)\"\r\n [class.opacity-60]=\"disabled() || isOptionDisabled(option)\"\r\n (click)=\"onOptionSelect(option)\"\r\n >\r\n @if (resolveIcon(option); as icon) {\r\n <mt-icon\r\n [icon]=\"icon\"\r\n class=\"relative z-10 text-base\"\r\n [class.text-primary]=\"isActiveOption(option)\"\r\n [class.text-surface-400]=\"!isActiveOption(option)\"\r\n />\r\n }\r\n\r\n <span class=\"relative z-10 min-w-0 flex-1 truncate\">\r\n {{ resolveLabel(option) }}\r\n </span>\r\n\r\n @if (hasBadge(option)) {\r\n <span\r\n class=\"relative z-10 ms-auto inline-flex min-w-5 items-center justify-center rounded-full px-2 py-0.5 text-[11px] font-bold leading-none\"\r\n [class.bg-primary]=\"isActiveOption(option)\"\r\n [class.text-white]=\"isActiveOption(option)\"\r\n [class.bg-surface-100]=\"!isActiveOption(option)\"\r\n [class.text-surface-600]=\"!isActiveOption(option)\"\r\n >\r\n {{ resolveBadge(option) }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n} @else {\n <p-selectbutton\n [options]=\"options()\"\n [(ngModel)]=\"active\"\n (ngModelChange)=\"onTabChange($event)\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n styleClass=\"my-tabs-button\"\n [size]=\"size()\"\n [fluid]=\"fluid()\"\n [disabled]=\"disabled()\"\n unselectable\n />\n}\n", styles: [":host{min-width:0}\n"], dependencies: [{ kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
30
77
  }
31
78
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Tabs, decorators: [{
32
79
  type: Component,
33
- args: [{ selector: 'mt-tabs', standalone: true, imports: [SelectButton, FormsModule], host: {
80
+ args: [{ selector: 'mt-tabs', standalone: true, imports: [Icon, SelectButton, FormsModule], host: {
34
81
  class: 'grid gap-1',
35
82
  '[class.w-full]': 'fluid()',
36
- }, template: "<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" }]
37
- }], 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"] }], 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 }] }] } });
83
+ }, 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 {\n <p-selectbutton\n [options]=\"options()\"\n [(ngModel)]=\"active\"\n (ngModelChange)=\"onTabChange($event)\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n styleClass=\"my-tabs-button\"\n [size]=\"size()\"\n [fluid]=\"fluid()\"\n [disabled]=\"disabled()\"\n unselectable\n />\n}\n", styles: [":host{min-width:0}\n"] }]
84
+ }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
38
85
 
39
86
  /**
40
87
  * Generated bundle index. Do not edit.
@@ -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 booleanAttribute,\r\n Component,\r\n input,\r\n effect,\r\n output,\r\n model,\r\n} from '@angular/core';\r\nimport { SelectButton } from 'primeng/selectbutton';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\nexport interface OptionItem {\r\n label: string;\r\n value: any;\r\n}\r\n\r\n@Component({\r\n selector: 'mt-tabs',\r\n standalone: true,\r\n imports: [SelectButton, FormsModule],\r\n templateUrl: './tabs.html',\r\n styleUrls: ['./tabs.scss'],\r\n host: {\r\n class: 'grid gap-1',\r\n '[class.w-full]': 'fluid()',\r\n },\r\n})\r\nexport class Tabs {\r\n options = input<any[]>([]);\r\n optionLabel = input<string>('label');\r\n optionValue = input<string>('value');\r\n active = model<any>(null);\r\n\r\n onChange = output<any>();\r\n\r\n readonly size = input<'small' | 'large' | undefined>();\r\n readonly fluid = input<boolean, unknown>(false, {\r\n transform: booleanAttribute,\r\n });\r\n disabled = input<boolean, unknown>(false, {\r\n transform: booleanAttribute,\r\n });\r\n\r\n // TODO: make a decision about this maybe we should remove it\r\n constructor() {\r\n effect(() => {\r\n const options = this.options();\r\n if (options && options.length > 0 && !this.active()) {\r\n this.active.set(options[0].value);\r\n }\r\n });\r\n }\r\n\r\n onTabChange(value: any) {\r\n this.onChange.emit(value);\r\n }\r\n}\r\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"masterteam-components-tabs.mjs","sources":["../../../../packages/masterteam/components/tabs/tabs.ts","../../../../packages/masterteam/components/tabs/tabs.html","../../../../packages/masterteam/components/tabs/masterteam-components-tabs.ts"],"sourcesContent":["import {\n booleanAttribute,\n Component,\n effect,\n input,\n model,\n output,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MTIcon, Icon } from '@masterteam/icons';\nimport { SelectButton } from 'primeng/selectbutton';\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({\n selector: 'mt-tabs',\n standalone: true,\n imports: [Icon, SelectButton, FormsModule],\n templateUrl: './tabs.html',\n styleUrls: ['./tabs.scss'],\n host: {\n class: 'grid gap-1',\r\n '[class.w-full]': 'fluid()',\r\n },\r\n})\r\nexport class Tabs {\r\n options = input<OptionItem[]>([]);\r\n optionLabel = input<string>('label');\r\n optionValue = input<string>('value');\r\n active = model<any>(null);\r\n readonly mode = input<'horizontal' | 'vertical'>('horizontal');\r\n\r\n onChange = output<any>();\r\n\r\n readonly size = input<'small' | 'large' | undefined>();\r\n readonly fluid = input<boolean, unknown>(false, {\r\n transform: booleanAttribute,\r\n });\r\n disabled = input<boolean, unknown>(false, {\r\n transform: booleanAttribute,\r\n });\r\n\r\n // TODO: make a decision about this maybe we should remove it\r\n constructor() {\r\n effect(() => {\r\n const options = this.options();\r\n const active = this.active();\r\n if (!options.length) {\r\n return;\r\n }\r\n\r\n const hasActiveOption = options.some((option) =>\r\n Object.is(this.resolveValue(option), active),\r\n );\r\n if (!hasActiveOption) {\r\n this.active.set(this.resolveValue(options[0]));\r\n }\r\n });\r\n }\r\n\r\n onTabChange(value: any) {\r\n this.onChange.emit(value);\r\n }\r\n\r\n onOptionSelect(option: OptionItem): void {\r\n if (this.disabled() || this.isOptionDisabled(option)) {\r\n return;\r\n }\r\n\r\n const value = this.resolveValue(option);\r\n this.active.set(value);\r\n this.onTabChange(value);\r\n }\r\n\r\n resolveLabel(option: OptionItem): string {\r\n const labelKey = this.optionLabel();\r\n const label =\r\n option && typeof option === 'object'\r\n ? (option as Record<string, unknown>)[labelKey]\r\n : option;\r\n\r\n return typeof label === 'string' ? label : String(label ?? '');\r\n }\r\n\r\n resolveValue(option: OptionItem): unknown {\r\n const valueKey = this.optionValue();\r\n if (option && typeof option === 'object' && valueKey in option) {\r\n return (option as Record<string, unknown>)[valueKey];\r\n }\r\n\r\n return option;\r\n }\r\n\r\n resolveIcon(option: OptionItem): MTIcon | null {\r\n return typeof option?.icon === 'string' ? option.icon : null;\r\n }\r\n\r\n resolveBadge(option: OptionItem): number | string | null {\r\n return option?.badge ?? null;\r\n }\r\n\r\n hasBadge(option: OptionItem): boolean {\r\n return option?.badge !== null && option?.badge !== undefined;\r\n }\r\n\r\n isActiveOption(option: OptionItem): boolean {\n return Object.is(this.active(), this.resolveValue(option));\n }\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 {\n <p-selectbutton\n [options]=\"options()\"\n [(ngModel)]=\"active\"\n (ngModelChange)=\"onTabChange($event)\"\n [optionLabel]=\"optionLabel()\"\n [optionValue]=\"optionValue()\"\n styleClass=\"my-tabs-button\"\n [size]=\"size()\"\n [fluid]=\"fluid()\"\n [disabled]=\"disabled()\"\n unselectable\n />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
@@ -160,6 +160,7 @@ function generateTailwindPalette(baseColorHex, baseColorShade = '500') {
160
160
  return palette;
161
161
  }
162
162
 
163
+ const inputBorderRadius = '{border.radius.md}';
163
164
  const toastStyle = {
164
165
  // borderColor: '{surface.300}',
165
166
  background: '{content.background}',
@@ -244,10 +245,20 @@ const MTPreset = (themeOptions) => {
244
245
  borderRadius: '{border.radius.lg}',
245
246
  },
246
247
  formField: {
247
- borderRadius: '{border.radius.lg}',
248
+ borderRadius: inputBorderRadius,
248
249
  },
249
250
  },
250
251
  components: {
252
+ autocomplete: {
253
+ root: {
254
+ borderRadius: inputBorderRadius,
255
+ },
256
+ },
257
+ cascadeselect: {
258
+ root: {
259
+ borderRadius: inputBorderRadius,
260
+ },
261
+ },
251
262
  dialog: {
252
263
  header: {
253
264
  padding: '0',
@@ -300,7 +311,28 @@ const MTPreset = (themeOptions) => {
300
311
  },
301
312
  button: {
302
313
  root: {
303
- borderRadius: '{border.radius.sm}',
314
+ borderRadius: '{border.radius.md}',
315
+ gap: '0.25rem',
316
+ },
317
+ css: () => `
318
+ .p-button.p-button-icon-only {
319
+ padding-inline: 0;
320
+ }
321
+ `,
322
+ },
323
+ inputtext: {
324
+ root: {
325
+ borderRadius: inputBorderRadius,
326
+ },
327
+ },
328
+ inputchips: {
329
+ root: {
330
+ borderRadius: inputBorderRadius,
331
+ },
332
+ },
333
+ listbox: {
334
+ root: {
335
+ borderRadius: inputBorderRadius,
304
336
  },
305
337
  },
306
338
  avatar: {
@@ -321,6 +353,21 @@ const MTPreset = (themeOptions) => {
321
353
  borderRadius: '{border.radius.md}',
322
354
  },
323
355
  },
356
+ multiselect: {
357
+ root: {
358
+ borderRadius: inputBorderRadius,
359
+ },
360
+ },
361
+ textarea: {
362
+ root: {
363
+ borderRadius: inputBorderRadius,
364
+ },
365
+ },
366
+ treeselect: {
367
+ root: {
368
+ borderRadius: inputBorderRadius,
369
+ },
370
+ },
324
371
  paginator: {
325
372
  root: {
326
373
  borderRadius: '{border.radius.md}',
@@ -437,6 +484,9 @@ const MTPreset = (themeOptions) => {
437
484
  },
438
485
  },
439
486
  select: {
487
+ root: {
488
+ borderRadius: inputBorderRadius,
489
+ },
440
490
  optionGroup: {
441
491
  fontWeight: 'bold',
442
492
  padding: '6px 8px',