@masterteam/components 0.0.162 → 0.0.164

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 (32) hide show
  1. package/assets/common.css +1 -1
  2. package/assets/i18n/ar.json +24 -0
  3. package/assets/i18n/en.json +24 -0
  4. package/fesm2022/masterteam-components-business-fields.mjs +290 -90
  5. package/fesm2022/masterteam-components-business-fields.mjs.map +1 -1
  6. package/fesm2022/masterteam-components-color-picker-field.mjs +11 -3
  7. package/fesm2022/masterteam-components-color-picker-field.mjs.map +1 -1
  8. package/fesm2022/masterteam-components-entities.mjs +3 -2
  9. package/fesm2022/masterteam-components-entities.mjs.map +1 -1
  10. package/fesm2022/masterteam-components-field-validation.mjs +19 -18
  11. package/fesm2022/masterteam-components-field-validation.mjs.map +1 -1
  12. package/fesm2022/masterteam-components-sidebar.mjs +2 -2
  13. package/fesm2022/masterteam-components-sidebar.mjs.map +1 -1
  14. package/fesm2022/masterteam-components-table.mjs +1 -11
  15. package/fesm2022/masterteam-components-table.mjs.map +1 -1
  16. package/fesm2022/masterteam-components-text-field.mjs +21 -26
  17. package/fesm2022/masterteam-components-text-field.mjs.map +1 -1
  18. package/fesm2022/masterteam-components-toast.mjs +28 -23
  19. package/fesm2022/masterteam-components-toast.mjs.map +1 -1
  20. package/fesm2022/masterteam-components-topbar.mjs +2 -2
  21. package/fesm2022/masterteam-components-topbar.mjs.map +1 -1
  22. package/fesm2022/masterteam-components-user-search-field.mjs +7 -3
  23. package/fesm2022/masterteam-components-user-search-field.mjs.map +1 -1
  24. package/fesm2022/masterteam-components.mjs +1 -1
  25. package/fesm2022/masterteam-components.mjs.map +1 -1
  26. package/package.json +2 -2
  27. package/types/masterteam-components-business-fields.d.ts +67 -21
  28. package/types/masterteam-components-entities.d.ts +1 -0
  29. package/types/masterteam-components-text-field.d.ts +11 -2
  30. package/types/masterteam-components-toast.d.ts +1 -0
  31. package/types/masterteam-components-user-search-field.d.ts +2 -0
  32. package/types/masterteam-components.d.ts +7 -5
package/fesm2022/masterteam-components-text-field.mjs CHANGED
@@ -1,25 +1,16 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, input, signal, computed, effect, HostBinding, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
2
+ import { input, signal, computed, inject, effect, HostBinding, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
3
3
  import * as i2 from 'primeng/inputtext';
4
4
  import { InputTextModule } from 'primeng/inputtext';
5
5
  import * as i1 from '@angular/forms';
6
6
  import { Validators, NgControl, FormsModule } from '@angular/forms';
7
- import * as i3 from 'primeng/inputgroup';
8
- import { InputGroupModule } from 'primeng/inputgroup';
9
- import * as i4 from 'primeng/inputgroupaddon';
10
- import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
11
7
  import { Tooltip } from '@masterteam/components/tooltip';
12
- import { InputIcon } from 'primeng/inputicon';
13
- import { IconField } from 'primeng/iconfield';
14
8
  import { FieldValidation } from '@masterteam/components/field-validation';
15
9
  import { isInvalid } from '@masterteam/components';
16
10
  import { Icon } from '@masterteam/icons';
17
- import { NgTemplateOutlet } from '@angular/common';
18
- import { Directionality } from '@angular/cdk/bidi';
19
11
 
20
12
  // TODO: text stuck when reset
21
13
  class TextField {
22
- dir = inject(Directionality, { optional: true });
23
14
  inputText;
24
15
  field = input(true, ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
25
16
  hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
@@ -38,14 +29,17 @@ class TextField {
38
29
  requiredValidator = Validators.required;
39
30
  value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
40
31
  disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
41
- iconPos = computed(() => {
42
- if (this.iconPosition() === 'start') {
43
- return this.dir?.value === 'rtl' ? 'right' : 'left';
44
- }
45
- else {
46
- return this.dir?.value === 'rtl' ? 'left' : 'right';
47
- }
48
- }, ...(ngDevMode ? [{ debugName: "iconPos" }] : /* istanbul ignore next */ []));
32
+ passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
33
+ isPasswordField = computed(() => this.type() === 'password', ...(ngDevMode ? [{ debugName: "isPasswordField" }] : /* istanbul ignore next */ []));
34
+ inputType = computed(() => this.isPasswordField() && this.passwordVisible() ? 'text' : this.type(), ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
35
+ hasStartIcon = computed(() => Boolean(this.icon()) && this.iconPosition() === 'start', ...(ngDevMode ? [{ debugName: "hasStartIcon" }] : /* istanbul ignore next */ []));
36
+ hasEndIcon = computed(() => this.isPasswordField() ||
37
+ (Boolean(this.icon()) && this.iconPosition() === 'end'), ...(ngDevMode ? [{ debugName: "hasEndIcon" }] : /* istanbul ignore next */ []));
38
+ hasHint = computed(() => Boolean(this.hint()), ...(ngDevMode ? [{ debugName: "hasHint" }] : /* istanbul ignore next */ []));
39
+ hasEndActions = computed(() => this.hasEndIcon() || this.hasHint(), ...(ngDevMode ? [{ debugName: "hasEndActions" }] : /* istanbul ignore next */ []));
40
+ hasTwoEndActions = computed(() => this.hasEndIcon() && this.hasHint(), ...(ngDevMode ? [{ debugName: "hasTwoEndActions" }] : /* istanbul ignore next */ []));
41
+ passwordToggleIcon = computed(() => this.passwordVisible() ? 'general.eye-off' : 'general.eye', ...(ngDevMode ? [{ debugName: "passwordToggleIcon" }] : /* istanbul ignore next */ []));
42
+ passwordToggleLabel = computed(() => this.passwordVisible() ? 'Hide password' : 'Show password', ...(ngDevMode ? [{ debugName: "passwordToggleLabel" }] : /* istanbul ignore next */ []));
49
43
  alphaNum = /[\u0621-\u064A\u0660-\u0669a-z0-9\s]/i;
50
44
  onTouched = () => { };
51
45
  onModelChange = () => { };
@@ -96,6 +90,12 @@ class TextField {
96
90
  this.onModelChange(value);
97
91
  this.onTouched();
98
92
  }
93
+ togglePasswordVisibility() {
94
+ if (this.disabled() || this.readonly()) {
95
+ return;
96
+ }
97
+ this.passwordVisible.update((visible) => !visible);
98
+ }
99
99
  ngOnChanges(changes) {
100
100
  if (changes['pInputs']) {
101
101
  this.applyInputsToInputText();
@@ -114,7 +114,7 @@ class TextField {
114
114
  this.disabled.set(disabled);
115
115
  }
116
116
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextField, deps: [], target: i0.ɵɵFactoryTarget.Component });
117
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TextField, isStandalone: true, selector: "mt-text-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pInputs: { classPropertyName: "pInputs", publicName: "pInputs", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.styleClass" }, classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "inputText", first: true, predicate: ["inputText"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n}\r\n@if (!hint()) {\r\n <ng-container *ngTemplateOutlet=\"inputTemp\"></ng-container>\r\n} @else {\r\n <p-inputgroup>\r\n <ng-container *ngTemplateOutlet=\"inputTemp\"></ng-container>\r\n <p-inputgroup-addon [mtTooltip]=\"hint()\" tooltipPosition=\"top\">\r\n <mt-icon icon=\"general.help-circle\" />\r\n </p-inputgroup-addon>\r\n </p-inputgroup>\r\n}\r\n\r\n<ng-template #inputTemp>\r\n @if (!icon()) {\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"type()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n } @else {\r\n <p-iconfield iconPosition=\"iconPos()\">\r\n <p-inputicon>\r\n <mt-icon [icon]=\"icon()\" />\r\n </p-inputicon>\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"type()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n </p-iconfield>\r\n }\r\n</ng-template>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "directive", type:
117
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TextField, isStandalone: true, selector: "mt-text-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pInputs: { classPropertyName: "pInputs", publicName: "pInputs", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.styleClass" }, classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "inputText", first: true, predicate: ["inputText"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n}\r\n\r\n<div\r\n class=\"mt-text-field__input\"\r\n [class.mt-text-field__input--start-icon]=\"hasStartIcon()\"\r\n [class.mt-text-field__input--end-action]=\"hasEndActions()\"\r\n [class.mt-text-field__input--two-end-actions]=\"hasTwoEndActions()\"\r\n>\r\n @if (icon() && iconPosition() === \"start\") {\r\n <span class=\"mt-text-field__icon mt-text-field__icon--start\">\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"inputType()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n\r\n @if (isPasswordField()) {\r\n <button\r\n type=\"button\"\r\n class=\"mt-text-field__action\"\r\n [class.mt-text-field__action--before-hint]=\"hasHint()\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [attr.aria-label]=\"passwordToggleLabel()\"\r\n [mtTooltip]=\"passwordToggleLabel()\"\r\n tooltipPosition=\"top\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <mt-icon [icon]=\"passwordToggleIcon()\" />\r\n </button>\r\n } @else if (icon() && iconPosition() === \"end\") {\r\n <span\r\n class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n [class.mt-text-field__icon--before-hint]=\"hasHint()\"\r\n >\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n @if (hint()) {\r\n <span\r\n class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n [mtTooltip]=\"hint()\"\r\n tooltipPosition=\"top\"\r\n >\r\n <mt-icon icon=\"general.info-circle\" />\r\n </span>\r\n }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [".mt-text-field__input{flex:1 1 auto;position:relative;width:100%}.mt-text-field__input--start-icon input{padding-inline-start:2.25rem}.mt-text-field__input--end-action input{padding-inline-end:2.25rem}.mt-text-field__input--two-end-actions input{padding-inline-end:4.25rem}.mt-text-field__icon,.mt-text-field__action{align-items:center;color:var(--p-text-muted-color);display:inline-flex;height:100%;inset-block-start:0;justify-content:center;position:absolute;width:2.25rem;z-index:1}.mt-text-field__icon--start{inset-inline-start:0}.mt-text-field__icon--end,.mt-text-field__action{inset-inline-end:0}.mt-text-field__icon--before-hint,.mt-text-field__action--before-hint{inset-inline-end:2rem}.mt-text-field__action{background:transparent;border:0;cursor:pointer;padding:0}.mt-text-field__action:disabled{cursor:default;opacity:.65}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type:
118
118
  // INFO: if we need this filter uncomment the import, and next line and add this to the template input
119
119
  //[pKeyFilter]="
120
120
  // pKeyFilter()
@@ -124,15 +124,13 @@ class TextField {
124
124
  // : null
125
125
  // "
126
126
  // KeyFilterModule,
127
- Tooltip, selector: "[mtTooltip]" }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i4.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
127
+ Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
128
128
  }
129
129
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextField, decorators: [{
130
130
  type: Component,
131
131
  args: [{ selector: 'mt-text-field', standalone: true, imports: [
132
132
  FormsModule,
133
133
  InputTextModule,
134
- InputIcon,
135
- IconField,
136
134
  // INFO: if we need this filter uncomment the import, and next line and add this to the template input
137
135
  //[pKeyFilter]="
138
136
  // pKeyFilter()
@@ -143,14 +141,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
143
141
  // "
144
142
  // KeyFilterModule,
145
143
  Tooltip,
146
- InputGroupModule,
147
- InputGroupAddonModule,
148
144
  FieldValidation,
149
145
  Icon,
150
- NgTemplateOutlet,
151
146
  ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
152
147
  class: 'grid gap-1',
153
- }, template: "@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n}\r\n@if (!hint()) {\r\n <ng-container *ngTemplateOutlet=\"inputTemp\"></ng-container>\r\n} @else {\r\n <p-inputgroup>\r\n <ng-container *ngTemplateOutlet=\"inputTemp\"></ng-container>\r\n <p-inputgroup-addon [mtTooltip]=\"hint()\" tooltipPosition=\"top\">\r\n <mt-icon icon=\"general.help-circle\" />\r\n </p-inputgroup-addon>\r\n </p-inputgroup>\r\n}\r\n\r\n<ng-template #inputTemp>\r\n @if (!icon()) {\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"type()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n } @else {\r\n <p-iconfield iconPosition=\"iconPos()\">\r\n <p-inputicon>\r\n <mt-icon [icon]=\"icon()\" />\r\n </p-inputicon>\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"type()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n </p-iconfield>\r\n }\r\n</ng-template>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n" }]
148
+ }, template: "@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n}\r\n\r\n<div\r\n class=\"mt-text-field__input\"\r\n [class.mt-text-field__input--start-icon]=\"hasStartIcon()\"\r\n [class.mt-text-field__input--end-action]=\"hasEndActions()\"\r\n [class.mt-text-field__input--two-end-actions]=\"hasTwoEndActions()\"\r\n>\r\n @if (icon() && iconPosition() === \"start\") {\r\n <span class=\"mt-text-field__icon mt-text-field__icon--start\">\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"inputType()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n\r\n @if (isPasswordField()) {\r\n <button\r\n type=\"button\"\r\n class=\"mt-text-field__action\"\r\n [class.mt-text-field__action--before-hint]=\"hasHint()\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [attr.aria-label]=\"passwordToggleLabel()\"\r\n [mtTooltip]=\"passwordToggleLabel()\"\r\n tooltipPosition=\"top\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <mt-icon [icon]=\"passwordToggleIcon()\" />\r\n </button>\r\n } @else if (icon() && iconPosition() === \"end\") {\r\n <span\r\n class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n [class.mt-text-field__icon--before-hint]=\"hasHint()\"\r\n >\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n @if (hint()) {\r\n <span\r\n class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n [mtTooltip]=\"hint()\"\r\n tooltipPosition=\"top\"\r\n >\r\n <mt-icon icon=\"general.info-circle\" />\r\n </span>\r\n }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [".mt-text-field__input{flex:1 1 auto;position:relative;width:100%}.mt-text-field__input--start-icon input{padding-inline-start:2.25rem}.mt-text-field__input--end-action input{padding-inline-end:2.25rem}.mt-text-field__input--two-end-actions input{padding-inline-end:4.25rem}.mt-text-field__icon,.mt-text-field__action{align-items:center;color:var(--p-text-muted-color);display:inline-flex;height:100%;inset-block-start:0;justify-content:center;position:absolute;width:2.25rem;z-index:1}.mt-text-field__icon--start{inset-inline-start:0}.mt-text-field__icon--end,.mt-text-field__action{inset-inline-end:0}.mt-text-field__icon--before-hint,.mt-text-field__action--before-hint{inset-inline-end:2rem}.mt-text-field__action{background:transparent;border:0;cursor:pointer;padding:0}.mt-text-field__action:disabled{cursor:default;opacity:.65}\n"] }]
154
149
  }], ctorParameters: () => [], propDecorators: { inputText: [{
155
150
  type: ViewChild,
156
151
  args: ['inputText', { static: true }]
package/fesm2022/masterteam-components-text-field.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"masterteam-components-text-field.mjs","sources":["../../../../packages/masterteam/components/text-field/text-field.ts","../../../../packages/masterteam/components/text-field/text-field.html","../../../../packages/masterteam/components/text-field/masterteam-components-text-field.ts"],"sourcesContent":["import {\r\n Component,\r\n HostBinding,\r\n SimpleChanges,\r\n ViewChild,\r\n signal,\r\n input,\r\n OnInit,\r\n OnChanges,\r\n inject,\r\n ChangeDetectionStrategy,\r\n effect,\r\n computed,\r\n} from '@angular/core';\r\nimport { InputTextModule } from 'primeng/inputtext';\r\nimport {\r\n ControlValueAccessor,\r\n FormsModule,\r\n NgControl,\r\n Validators,\r\n} from '@angular/forms';\r\n// import { KeyFilterModule, KeyFilterPattern } from 'primeng/keyfilter';\r\nimport { InputGroupModule } from 'primeng/inputgroup';\r\nimport { InputGroupAddonModule } from 'primeng/inputgroupaddon';\r\nimport { Tooltip } from '@masterteam/components/tooltip';\r\nimport { InputIcon } from 'primeng/inputicon';\r\nimport { IconField } from 'primeng/iconfield';\r\nimport { FieldValidation } from '@masterteam/components/field-validation';\r\nimport { isInvalid } from '@masterteam/components';\r\nimport { Icon, MTIcon } from '@masterteam/icons';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { Directionality } from '@angular/cdk/bidi';\r\n\r\n// TODO: text stuck when reset\r\n@Component({\r\n selector: 'mt-text-field',\r\n standalone: true,\r\n imports: [\r\n FormsModule,\r\n InputTextModule,\r\n InputIcon,\r\n IconField,\r\n // INFO: if we need this filter uncomment the import, and next line and add this to the template input\r\n //[pKeyFilter]=\"\r\n // pKeyFilter()\r\n // ? pKeyFilter() === 'alphanum'\r\n // ? alphaNum\r\n // : pKeyFilter()\r\n // : null\r\n // \"\r\n // KeyFilterModule,\r\n Tooltip,\r\n InputGroupModule,\r\n InputGroupAddonModule,\r\n FieldValidation,\r\n Icon,\r\n NgTemplateOutlet,\r\n ],\r\n templateUrl: './text-field.html',\r\n styleUrls: ['./text-field.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n class: 'grid gap-1',\r\n },\r\n})\r\nexport class TextField implements ControlValueAccessor, OnInit, OnChanges {\r\n private dir = inject(Directionality, { optional: true });\r\n\r\n @ViewChild('inputText', { static: true })\r\n inputText: HTMLInputElement;\r\n\r\n readonly field = input<boolean>(true);\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 type = input<string>('text');\r\n readonly readonly = input<boolean>(false);\r\n readonly pInputs = input<Partial<HTMLInputElement>>();\r\n // readonly pKeyFilter = input<KeyFilterPattern | RegExp>();\r\n readonly required = input<boolean>(false);\r\n readonly icon = input<MTIcon>();\r\n readonly iconPosition = input<'start' | 'end'>('start');\r\n // readonly externalControl = input<any>(null);\r\n\r\n @HostBinding('class') styleClass: string;\r\n\r\n requiredValidator = Validators.required;\r\n value = signal<string | null>(null);\r\n disabled = signal<boolean>(false);\r\n iconPos = computed(() => {\r\n if (this.iconPosition() === 'start') {\r\n return this.dir?.value === 'rtl' ? 'right' : 'left';\r\n } else {\r\n return this.dir?.value === 'rtl' ? 'left' : 'right';\r\n }\r\n });\r\n\r\n alphaNum: RegExp = /[\\u0621-\\u064A\\u0660-\\u0669a-z0-9\\s]/i;\r\n\r\n onTouched: () => void = () => {};\r\n onModelChange: (value: any) => void = () => {};\r\n\r\n public ngControl: NgControl | null = null;\r\n\r\n isInvalid = isInvalid;\r\n\r\n constructor() {\r\n try {\r\n // Try to inject NgControl if available\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 } catch (_e) {\r\n // If injection fails, ngControl will remain null\r\n this.ngControl = null;\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 }\r\n\r\n ngOnInit() {\r\n this.styleClass = this.class();\r\n // if (this.externalControl()) {\r\n // debugger\r\n // this.ngControl = this.externalControl();\r\n // }\r\n\r\n if (this.pInputs()) {\r\n this.applyInputsToInputText();\r\n }\r\n }\r\n\r\n applyInputsToInputText() {\r\n Object.assign(this.inputText, this.pInputs());\r\n }\r\n\r\n onValueChange(value: any) {\r\n this.value.set(value);\r\n\r\n const control = this.ngControl?.control;\r\n if (control) {\r\n control.setValue(value);\r\n control.markAsDirty();\r\n control.markAsTouched();\r\n control.updateValueAndValidity({ emitEvent: false });\r\n return;\r\n }\r\n\r\n this.onModelChange(value);\r\n this.onTouched();\r\n }\r\n ngOnChanges(changes: SimpleChanges) {\r\n if (changes['pInputs']) {\r\n this.applyInputsToInputText();\r\n }\r\n }\r\n\r\n writeValue(value: string) {\r\n this.value.set(value);\r\n }\r\n\r\n registerOnChange(fn: any) {\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","@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n}\r\n@if (!hint()) {\r\n <ng-container *ngTemplateOutlet=\"inputTemp\"></ng-container>\r\n} @else {\r\n <p-inputgroup>\r\n <ng-container *ngTemplateOutlet=\"inputTemp\"></ng-container>\r\n <p-inputgroup-addon [mtTooltip]=\"hint()\" tooltipPosition=\"top\">\r\n <mt-icon icon=\"general.help-circle\" />\r\n </p-inputgroup-addon>\r\n </p-inputgroup>\r\n}\r\n\r\n<ng-template #inputTemp>\r\n @if (!icon()) {\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"type()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n } @else {\r\n <p-iconfield iconPosition=\"iconPos()\">\r\n <p-inputicon>\r\n <mt-icon [icon]=\"icon()\" />\r\n </p-inputicon>\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"type()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n </p-iconfield>\r\n }\r\n</ng-template>\r\n\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-text-field.mjs","sources":["../../../../packages/masterteam/components/text-field/text-field.ts","../../../../packages/masterteam/components/text-field/text-field.html","../../../../packages/masterteam/components/text-field/masterteam-components-text-field.ts"],"sourcesContent":["import {\r\n Component,\r\n HostBinding,\r\n SimpleChanges,\r\n ViewChild,\r\n signal,\r\n input,\r\n OnInit,\r\n OnChanges,\r\n inject,\r\n ChangeDetectionStrategy,\r\n effect,\r\n computed,\r\n} from '@angular/core';\r\nimport { InputTextModule } from 'primeng/inputtext';\r\nimport {\r\n ControlValueAccessor,\r\n FormsModule,\r\n NgControl,\r\n Validators,\r\n} from '@angular/forms';\r\n// import { KeyFilterModule, KeyFilterPattern } from 'primeng/keyfilter';\r\nimport { Tooltip } from '@masterteam/components/tooltip';\r\nimport { FieldValidation } from '@masterteam/components/field-validation';\r\nimport { isInvalid } from '@masterteam/components';\r\nimport { Icon, MTIcon } from '@masterteam/icons';\r\n\r\n// TODO: text stuck when reset\r\n@Component({\r\n selector: 'mt-text-field',\r\n standalone: true,\r\n imports: [\r\n FormsModule,\r\n InputTextModule,\r\n // INFO: if we need this filter uncomment the import, and next line and add this to the template input\r\n //[pKeyFilter]=\"\r\n // pKeyFilter()\r\n // ? pKeyFilter() === 'alphanum'\r\n // ? alphaNum\r\n // : pKeyFilter()\r\n // : null\r\n // \"\r\n // KeyFilterModule,\r\n Tooltip,\r\n FieldValidation,\r\n Icon,\r\n ],\r\n templateUrl: './text-field.html',\r\n styleUrls: ['./text-field.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n class: 'grid gap-1',\r\n },\r\n})\r\nexport class TextField implements ControlValueAccessor, OnInit, OnChanges {\r\n @ViewChild('inputText', { static: true })\r\n inputText: HTMLInputElement;\r\n\r\n readonly field = input<boolean>(true);\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 type = input<string>('text');\r\n readonly readonly = input<boolean>(false);\r\n readonly pInputs = input<Partial<HTMLInputElement>>();\r\n // readonly pKeyFilter = input<KeyFilterPattern | RegExp>();\r\n readonly required = input<boolean>(false);\r\n readonly icon = input<MTIcon>();\r\n readonly iconPosition = input<'start' | 'end'>('start');\r\n // readonly externalControl = input<any>(null);\r\n\r\n @HostBinding('class') styleClass: string;\r\n\r\n requiredValidator = Validators.required;\r\n value = signal<string | null>(null);\r\n disabled = signal<boolean>(false);\r\n passwordVisible = signal<boolean>(false);\r\n isPasswordField = computed(() => this.type() === 'password');\r\n inputType = computed(() =>\r\n this.isPasswordField() && this.passwordVisible() ? 'text' : this.type(),\r\n );\r\n hasStartIcon = computed(\r\n () => Boolean(this.icon()) && this.iconPosition() === 'start',\r\n );\r\n hasEndIcon = computed(\r\n () =>\r\n this.isPasswordField() ||\r\n (Boolean(this.icon()) && this.iconPosition() === 'end'),\r\n );\r\n hasHint = computed(() => Boolean(this.hint()));\r\n hasEndActions = computed(() => this.hasEndIcon() || this.hasHint());\r\n hasTwoEndActions = computed(() => this.hasEndIcon() && this.hasHint());\r\n passwordToggleIcon = computed<MTIcon>(() =>\r\n this.passwordVisible() ? 'general.eye-off' : 'general.eye',\r\n );\r\n passwordToggleLabel = computed(() =>\r\n this.passwordVisible() ? 'Hide password' : 'Show password',\r\n );\r\n\r\n alphaNum: RegExp = /[\\u0621-\\u064A\\u0660-\\u0669a-z0-9\\s]/i;\r\n\r\n onTouched: () => void = () => {};\r\n onModelChange: (value: any) => void = () => {};\r\n\r\n public ngControl: NgControl | null = null;\r\n\r\n isInvalid = isInvalid;\r\n\r\n constructor() {\r\n try {\r\n // Try to inject NgControl if available\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 } catch (_e) {\r\n // If injection fails, ngControl will remain null\r\n this.ngControl = null;\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 }\r\n\r\n ngOnInit() {\r\n this.styleClass = this.class();\r\n // if (this.externalControl()) {\r\n // debugger\r\n // this.ngControl = this.externalControl();\r\n // }\r\n\r\n if (this.pInputs()) {\r\n this.applyInputsToInputText();\r\n }\r\n }\r\n\r\n applyInputsToInputText() {\r\n Object.assign(this.inputText, this.pInputs());\r\n }\r\n\r\n onValueChange(value: any) {\r\n this.value.set(value);\r\n\r\n const control = this.ngControl?.control;\r\n if (control) {\r\n control.setValue(value);\r\n control.markAsDirty();\r\n control.markAsTouched();\r\n control.updateValueAndValidity({ emitEvent: false });\r\n return;\r\n }\r\n\r\n this.onModelChange(value);\r\n this.onTouched();\r\n }\r\n\r\n togglePasswordVisibility() {\r\n if (this.disabled() || this.readonly()) {\r\n return;\r\n }\r\n\r\n this.passwordVisible.update((visible) => !visible);\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges) {\r\n if (changes['pInputs']) {\r\n this.applyInputsToInputText();\r\n }\r\n }\r\n\r\n writeValue(value: string) {\r\n this.value.set(value);\r\n }\r\n\r\n registerOnChange(fn: any) {\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","@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n}\r\n\r\n<div\r\n class=\"mt-text-field__input\"\r\n [class.mt-text-field__input--start-icon]=\"hasStartIcon()\"\r\n [class.mt-text-field__input--end-action]=\"hasEndActions()\"\r\n [class.mt-text-field__input--two-end-actions]=\"hasTwoEndActions()\"\r\n>\r\n @if (icon() && iconPosition() === \"start\") {\r\n <span class=\"mt-text-field__icon mt-text-field__icon--start\">\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"inputType()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n\r\n @if (isPasswordField()) {\r\n <button\r\n type=\"button\"\r\n class=\"mt-text-field__action\"\r\n [class.mt-text-field__action--before-hint]=\"hasHint()\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [attr.aria-label]=\"passwordToggleLabel()\"\r\n [mtTooltip]=\"passwordToggleLabel()\"\r\n tooltipPosition=\"top\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <mt-icon [icon]=\"passwordToggleIcon()\" />\r\n </button>\r\n } @else if (icon() && iconPosition() === \"end\") {\r\n <span\r\n class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n [class.mt-text-field__icon--before-hint]=\"hasHint()\"\r\n >\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n @if (hint()) {\r\n <span\r\n class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n [mtTooltip]=\"hint()\"\r\n tooltipPosition=\"top\"\r\n >\r\n <mt-icon icon=\"general.info-circle\" />\r\n </span>\r\n }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/fesm2022/masterteam-components-toast.mjs CHANGED
@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
2
2
  import { Component, inject, Injectable } from '@angular/core';
3
3
  import * as i1 from 'primeng/toast';
4
4
  import { ToastModule } from 'primeng/toast';
5
+ import { TranslocoService } from '@jsverse/transloco';
5
6
  import { MessageService } from 'primeng/api';
6
7
 
7
8
  class Toast {
@@ -17,7 +18,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
17
18
 
18
19
  class ToastService {
19
20
  messageService = inject(MessageService);
20
- // translateService = inject(TranslateService);
21
+ translocoService = inject(TranslocoService);
21
22
  add(message) {
22
23
  this.messageService.add(message);
23
24
  }
@@ -27,34 +28,38 @@ class ToastService {
27
28
  clear(key) {
28
29
  this.messageService.clear(key);
29
30
  }
30
- success(detail = '',
31
- // summary: string = this.translateService.instant('success')
32
- summary = 'Success') {
33
- this.messageService.add({ severity: 'success', summary, detail });
31
+ success(detail = '', summary) {
32
+ this.messageService.add({
33
+ severity: 'success',
34
+ summary: summary ?? this.translocoService.translate('components.toast.success'),
35
+ detail,
36
+ });
34
37
  }
35
- warn(detail = '',
36
- // summary: string = this.translateService.instant('error')
37
- summary = 'Warning') {
38
- this.messageService.add({ severity: 'warn', summary, detail });
38
+ warn(detail = '', summary) {
39
+ this.messageService.add({
40
+ severity: 'warn',
41
+ summary: summary ?? this.translocoService.translate('components.toast.warning'),
42
+ detail,
43
+ });
39
44
  }
40
- error(detail = '',
41
- // summary: string = this.translateService.instant('error')
42
- summary = 'Error') {
43
- this.messageService.add({ severity: 'error', summary, detail });
45
+ error(detail = '', summary) {
46
+ this.messageService.add({
47
+ severity: 'error',
48
+ summary: summary ?? this.translocoService.translate('components.toast.error'),
49
+ detail,
50
+ });
44
51
  }
45
- info(detail = '',
46
- // summary: string = this.translateService.instant('info')
47
- summary = 'Info') {
48
- this.messageService.add({ severity: 'info', summary, detail });
52
+ info(detail = '', summary) {
53
+ this.messageService.add({
54
+ severity: 'info',
55
+ summary: summary ?? this.translocoService.translate('components.toast.info'),
56
+ detail,
57
+ });
49
58
  }
50
- secondary(detail = '',
51
- // summary: string = this.translateService.instant('info')
52
- summary = '') {
59
+ secondary(detail = '', summary = '') {
53
60
  this.messageService.add({ severity: 'secondary', summary, detail });
54
61
  }
55
- contrast(detail = '',
56
- // summary: string = this.translateService.instant('info')
57
- summary = '') {
62
+ contrast(detail = '', summary = '') {
58
63
  this.messageService.add({ severity: 'contrast', summary, detail });
59
64
  }
60
65
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
package/fesm2022/masterteam-components-toast.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"masterteam-components-toast.mjs","sources":["../../../../packages/masterteam/components/toast/toast.ts","../../../../packages/masterteam/components/toast/toast.html","../../../../packages/masterteam/components/toast/toast.service.ts","../../../../packages/masterteam/components/toast/masterteam-components-toast.ts"],"sourcesContent":["import { Component } from '@angular/core';\r\nimport { ToastModule } from 'primeng/toast';\r\n\r\n@Component({\r\n standalone: true,\r\n imports: [ToastModule],\r\n selector: 'mt-toast',\r\n templateUrl: 'toast.html',\r\n})\r\nexport class Toast {\r\n protected readonly toastPosition = 'bottom-right';\r\n protected readonly toastTransX = 'translateX(100%)';\r\n\r\n // TODO: uncomment when we know how to handle i18n\r\n // toastPosition = computed(() =>\r\n // this.langService.rtl() ? 'top-left' : 'top-right'\r\n // );\r\n // toastTransX = computed(() =>\r\n // this.langService.rtl() ? 'translateX(-100%)' : 'translateX(100%)'\r\n // );\r\n}\r\n","<p-toast [position]=\"toastPosition\" [showTransformOptions]=\"toastTransX\">\r\n <!-- <ng-template let-message #headless let-closeFn=\"closeFn\"> -->\r\n <!-- <div> -->\r\n <!-- <div class=\"flex justify-between p-3\"> -->\r\n <!-- <h6> -->\r\n <!-- {{ message.summary }} -->\r\n <!-- </h6> -->\r\n <!-- <mt-button -->\r\n <!-- size=\"small\" -->\r\n <!-- icon=\"general.x\" -->\r\n <!-- severity=\"secondary\" -->\r\n <!-- text -->\r\n <!-- (onClick)=\"closeFn()\" -->\r\n <!-- /> -->\r\n <!-- </div> -->\r\n <!-- </div> -->\r\n <!-- </ng-template> -->\r\n</p-toast>\r\n","import { inject, Injectable } from '@angular/core';\r\n// import { TranslateService } from '@ngx-translate/core';\r\nimport { MessageService, ToastMessageOptions } from 'primeng/api';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class ToastService {\r\n messageService = inject(MessageService);\r\n // translateService = inject(TranslateService);\r\n\r\n add(message: ToastMessageOptions): void {\r\n this.messageService.add(message);\r\n }\r\n\r\n addAll(messages: ToastMessageOptions[]): void {\r\n this.messageService.addAll(messages);\r\n }\r\n\r\n clear(key?: string): void {\r\n this.messageService.clear(key);\r\n }\r\n\r\n success(\r\n detail: string = '',\r\n // summary: string = this.translateService.instant('success')\r\n summary: string = 'Success',\r\n ) {\r\n this.messageService.add({ severity: 'success', summary, detail });\r\n }\r\n\r\n warn(\r\n detail: string = '',\r\n // summary: string = this.translateService.instant('error')\r\n summary: string = 'Warning',\r\n ) {\r\n this.messageService.add({ severity: 'warn', summary, detail });\r\n }\r\n\r\n error(\r\n detail: string = '',\r\n // summary: string = this.translateService.instant('error')\r\n summary: string = 'Error',\r\n ) {\r\n this.messageService.add({ severity: 'error', summary, detail });\r\n }\r\n\r\n info(\r\n detail: string = '',\r\n // summary: string = this.translateService.instant('info')\r\n summary: string = 'Info',\r\n ) {\r\n this.messageService.add({ severity: 'info', summary, detail });\r\n }\r\n\r\n secondary(\r\n detail: string = '',\r\n // summary: string = this.translateService.instant('info')\r\n summary: string = '',\r\n ) {\r\n this.messageService.add({ severity: 'secondary', summary, detail });\r\n }\r\n\r\n contrast(\r\n detail: string = '',\r\n // summary: string = this.translateService.instant('info')\r\n summary: string = '',\r\n ) {\r\n this.messageService.add({ severity: 'contrast', summary, detail });\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-toast.mjs","sources":["../../../../packages/masterteam/components/toast/toast.ts","../../../../packages/masterteam/components/toast/toast.html","../../../../packages/masterteam/components/toast/toast.service.ts","../../../../packages/masterteam/components/toast/masterteam-components-toast.ts"],"sourcesContent":["import { Component } from '@angular/core';\r\nimport { ToastModule } from 'primeng/toast';\r\n\r\n@Component({\r\n standalone: true,\r\n imports: [ToastModule],\r\n selector: 'mt-toast',\r\n templateUrl: 'toast.html',\r\n})\r\nexport class Toast {\r\n protected readonly toastPosition = 'bottom-right';\r\n protected readonly toastTransX = 'translateX(100%)';\r\n\r\n // TODO: uncomment when we know how to handle i18n\r\n // toastPosition = computed(() =>\r\n // this.langService.rtl() ? 'top-left' : 'top-right'\r\n // );\r\n // toastTransX = computed(() =>\r\n // this.langService.rtl() ? 'translateX(-100%)' : 'translateX(100%)'\r\n // );\r\n}\r\n","<p-toast [position]=\"toastPosition\" [showTransformOptions]=\"toastTransX\">\r\n <!-- <ng-template let-message #headless let-closeFn=\"closeFn\"> -->\r\n <!-- <div> -->\r\n <!-- <div class=\"flex justify-between p-3\"> -->\r\n <!-- <h6> -->\r\n <!-- {{ message.summary }} -->\r\n <!-- </h6> -->\r\n <!-- <mt-button -->\r\n <!-- size=\"small\" -->\r\n <!-- icon=\"general.x\" -->\r\n <!-- severity=\"secondary\" -->\r\n <!-- text -->\r\n <!-- (onClick)=\"closeFn()\" -->\r\n <!-- /> -->\r\n <!-- </div> -->\r\n <!-- </div> -->\r\n <!-- </ng-template> -->\r\n</p-toast>\r\n","import { inject, Injectable } from '@angular/core';\r\nimport { TranslocoService } from '@jsverse/transloco';\r\nimport { MessageService, ToastMessageOptions } from 'primeng/api';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class ToastService {\r\n messageService = inject(MessageService);\r\n private readonly translocoService = inject(TranslocoService);\r\n\r\n add(message: ToastMessageOptions): void {\r\n this.messageService.add(message);\r\n }\r\n\r\n addAll(messages: ToastMessageOptions[]): void {\r\n this.messageService.addAll(messages);\r\n }\r\n\r\n clear(key?: string): void {\r\n this.messageService.clear(key);\r\n }\r\n\r\n success(detail: string = '', summary?: string) {\r\n this.messageService.add({\r\n severity: 'success',\r\n summary:\r\n summary ?? this.translocoService.translate('components.toast.success'),\r\n detail,\r\n });\r\n }\r\n\r\n warn(detail: string = '', summary?: string) {\r\n this.messageService.add({\r\n severity: 'warn',\r\n summary:\r\n summary ?? this.translocoService.translate('components.toast.warning'),\r\n detail,\r\n });\r\n }\r\n\r\n error(detail: string = '', summary?: string) {\r\n this.messageService.add({\r\n severity: 'error',\r\n summary:\r\n summary ?? this.translocoService.translate('components.toast.error'),\r\n detail,\r\n });\r\n }\r\n\r\n info(detail: string = '', summary?: string) {\r\n this.messageService.add({\r\n severity: 'info',\r\n summary:\r\n summary ?? this.translocoService.translate('components.toast.info'),\r\n detail,\r\n });\r\n }\r\n\r\n secondary(detail: string = '', summary: string = '') {\r\n this.messageService.add({ severity: 'secondary', summary, detail });\r\n }\r\n\r\n contrast(detail: string = '', summary: string = '') {\r\n this.messageService.add({ severity: 'contrast', summary, detail });\r\n }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MASa,KAAK,CAAA;IACG,aAAa,GAAG,cAAc;IAC9B,WAAW,GAAG,kBAAkB;uGAFxC,KAAK,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAL,KAAK,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTlB,kqBAkBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDbY,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,YAAA,EAAA,YAAA,EAAA,MAAA,EAAA,YAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,mBAAA,EAAA,sBAAA,EAAA,sBAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,eAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIV,KAAK,EAAA,UAAA,EAAA,CAAA;kBANjB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,CAAC,YACZ,UAAU,EAAA,QAAA,EAAA,kqBAAA,EAAA;;;MECT,YAAY,CAAA;AACvB,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;AACtB,IAAA,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAE5D,IAAA,GAAG,CAAC,OAA4B,EAAA;AAC9B,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;IAClC;AAEA,IAAA,MAAM,CAAC,QAA+B,EAAA;AACpC,QAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,CAAC;IACtC;AAEA,IAAA,KAAK,CAAC,GAAY,EAAA;AAChB,QAAA,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC;IAChC;AAEA,IAAA,OAAO,CAAC,MAAA,GAAiB,EAAE,EAAE,OAAgB,EAAA;AAC3C,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC;AACtB,YAAA,QAAQ,EAAE,SAAS;YACnB,OAAO,EACL,OAAO,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,0BAA0B,CAAC;YACxE,MAAM;AACP,SAAA,CAAC;IACJ;AAEA,IAAA,IAAI,CAAC,MAAA,GAAiB,EAAE,EAAE,OAAgB,EAAA;AACxC,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC;AACtB,YAAA,QAAQ,EAAE,MAAM;YAChB,OAAO,EACL,OAAO,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,0BAA0B,CAAC;YACxE,MAAM;AACP,SAAA,CAAC;IACJ;AAEA,IAAA,KAAK,CAAC,MAAA,GAAiB,EAAE,EAAE,OAAgB,EAAA;AACzC,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC;AACtB,YAAA,QAAQ,EAAE,OAAO;YACjB,OAAO,EACL,OAAO,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,wBAAwB,CAAC;YACtE,MAAM;AACP,SAAA,CAAC;IACJ;AAEA,IAAA,IAAI,CAAC,MAAA,GAAiB,EAAE,EAAE,OAAgB,EAAA;AACxC,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC;AACtB,YAAA,QAAQ,EAAE,MAAM;YAChB,OAAO,EACL,OAAO,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,uBAAuB,CAAC;YACrE,MAAM;AACP,SAAA,CAAC;IACJ;AAEA,IAAA,SAAS,CAAC,MAAA,GAAiB,EAAE,EAAE,UAAkB,EAAE,EAAA;AACjD,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;IACrE;AAEA,IAAA,QAAQ,CAAC,MAAA,GAAiB,EAAE,EAAE,UAAkB,EAAE,EAAA;AAChD,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;IACpE;uGA1DW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,cAFX,MAAM,EAAA,CAAA;;2FAEP,YAAY,EAAA,UAAA,EAAA,CAAA;kBAHxB,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;ACND;;AAEG;;;;"}
package/fesm2022/masterteam-components-topbar.mjs CHANGED
@@ -16,11 +16,11 @@ class Topbar {
16
16
  titleClass = input(...(ngDevMode ? [undefined, { debugName: "titleClass" }] : /* istanbul ignore next */ []));
17
17
  subTitleClass = input(...(ngDevMode ? [undefined, { debugName: "subTitleClass" }] : /* istanbul ignore next */ []));
18
18
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Topbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
19
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Topbar, isStandalone: true, selector: "mt-topbar", inputs: { logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, logoLink: { classPropertyName: "logoLink", publicName: "logoLink", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, bgImage: { classPropertyName: "bgImage", publicName: "bgImage", isSignal: true, isRequired: false, transformFunction: null }, bgRepeat: { classPropertyName: "bgRepeat", publicName: "bgRepeat", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, showBranding: { classPropertyName: "showBranding", publicName: "showBranding", isSignal: true, isRequired: false, transformFunction: null }, logoClass: { classPropertyName: "logoClass", publicName: "logoClass", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, subTitleClass: { classPropertyName: "subTitleClass", publicName: "subTitleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n class=\"w-full flex justify-between align-center bg-primary px-4 py-2 h-[var(--header-height)]\"\r\n [style.backgroundColor]=\"bgColor()\"\r\n [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n [class.bg-no-repeat]=\"!bgRepeat()\"\r\n [class.bg-repeat]=\"bgRepeat()\"\r\n>\r\n <div class=\"flex gap-4 items-center\" [style.color]=\"textColor()\">\r\n <div\r\n class=\"flex gap-3 items-center h-full overflow-hidden transition-all duration-400 ease-in-out\"\r\n [class.max-w-0]=\"!showBranding()\"\r\n [class.opacity-0]=\"!showBranding()\"\r\n [class.max-w-lg]=\"showBranding()\"\r\n [class.opacity-100]=\"showBranding()\"\r\n >\r\n @if (logo()) {\r\n <img\r\n [src]=\"logo()\"\r\n alt=\"Logo\"\r\n class=\"h-10 shrink-0\"\r\n [class]=\"logoClass()\"\r\n [routerLink]=\"logoLink()\"\r\n [class.cursor-pointer]=\"logoLink()\"\r\n />\r\n }\r\n @if (logo() && (title() || subTitle())) {\r\n <div class=\"h-3/4 w-[1px] bg-current shrink-0 opacity-30\"></div>\r\n }\r\n @if (title() || subTitle()) {\r\n <div class=\"flex flex-col shrink-0\">\r\n <h2\r\n class=\"text-md font-semibold product-name whitespace-nowrap\"\r\n [class]=\"titleClass()\"\r\n >\r\n {{ title() }}\r\n </h2>\r\n <span\r\n class=\"text-sm product-tagline whitespace-nowrap\"\r\n [class]=\"subTitleClass()\"\r\n >{{ subTitle() }}</span\r\n >\r\n </div>\r\n }\r\n </div>\r\n <ng-content select=\"[start]\"></ng-content>\r\n </div>\r\n <div class=\"flex gap-2 items-center\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
19
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Topbar, isStandalone: true, selector: "mt-topbar", inputs: { logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, logoLink: { classPropertyName: "logoLink", publicName: "logoLink", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, bgImage: { classPropertyName: "bgImage", publicName: "bgImage", isSignal: true, isRequired: false, transformFunction: null }, bgRepeat: { classPropertyName: "bgRepeat", publicName: "bgRepeat", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, showBranding: { classPropertyName: "showBranding", publicName: "showBranding", isSignal: true, isRequired: false, transformFunction: null }, logoClass: { classPropertyName: "logoClass", publicName: "logoClass", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, subTitleClass: { classPropertyName: "subTitleClass", publicName: "subTitleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n class=\"w-full flex justify-between align-center bg-primary px-4 py-2 h-[var(--header-height)]\"\r\n [style.backgroundColor]=\"bgColor()\"\r\n [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n [style.backgroundSize]=\"bgImage() && !bgRepeat() ? 'cover' : null\"\r\n [style.backgroundPosition]=\"bgImage() && !bgRepeat() ? 'center' : null\"\r\n [class.bg-no-repeat]=\"!bgRepeat()\"\r\n [class.bg-repeat]=\"bgRepeat()\"\r\n>\r\n <div class=\"flex gap-4 items-center\" [style.color]=\"textColor()\">\r\n <div\r\n class=\"flex gap-3 items-center h-full overflow-hidden transition-all duration-400 ease-in-out\"\r\n [class.max-w-0]=\"!showBranding()\"\r\n [class.opacity-0]=\"!showBranding()\"\r\n [class.max-w-lg]=\"showBranding()\"\r\n [class.opacity-100]=\"showBranding()\"\r\n >\r\n @if (logo()) {\r\n <img\r\n [src]=\"logo()\"\r\n alt=\"Logo\"\r\n class=\"h-10 shrink-0\"\r\n [class]=\"logoClass()\"\r\n [routerLink]=\"logoLink()\"\r\n [class.cursor-pointer]=\"logoLink()\"\r\n />\r\n }\r\n @if (logo() && (title() || subTitle())) {\r\n <div class=\"h-3/4 w-[1px] bg-current shrink-0 opacity-30\"></div>\r\n }\r\n @if (title() || subTitle()) {\r\n <div class=\"flex flex-col shrink-0\">\r\n <h2\r\n class=\"text-md font-semibold product-name whitespace-nowrap\"\r\n [class]=\"titleClass()\"\r\n >\r\n {{ title() }}\r\n </h2>\r\n <span\r\n class=\"text-sm product-tagline whitespace-nowrap\"\r\n [class]=\"subTitleClass()\"\r\n >{{ subTitle() }}</span\r\n >\r\n </div>\r\n }\r\n </div>\r\n <ng-content select=\"[start]\"></ng-content>\r\n </div>\r\n <div class=\"flex gap-2 items-center\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
20
20
  }
21
21
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Topbar, decorators: [{
22
22
  type: Component,
23
- args: [{ selector: 'mt-topbar', standalone: true, imports: [RouterLink], template: "<div\r\n class=\"w-full flex justify-between align-center bg-primary px-4 py-2 h-[var(--header-height)]\"\r\n [style.backgroundColor]=\"bgColor()\"\r\n [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n [class.bg-no-repeat]=\"!bgRepeat()\"\r\n [class.bg-repeat]=\"bgRepeat()\"\r\n>\r\n <div class=\"flex gap-4 items-center\" [style.color]=\"textColor()\">\r\n <div\r\n class=\"flex gap-3 items-center h-full overflow-hidden transition-all duration-400 ease-in-out\"\r\n [class.max-w-0]=\"!showBranding()\"\r\n [class.opacity-0]=\"!showBranding()\"\r\n [class.max-w-lg]=\"showBranding()\"\r\n [class.opacity-100]=\"showBranding()\"\r\n >\r\n @if (logo()) {\r\n <img\r\n [src]=\"logo()\"\r\n alt=\"Logo\"\r\n class=\"h-10 shrink-0\"\r\n [class]=\"logoClass()\"\r\n [routerLink]=\"logoLink()\"\r\n [class.cursor-pointer]=\"logoLink()\"\r\n />\r\n }\r\n @if (logo() && (title() || subTitle())) {\r\n <div class=\"h-3/4 w-[1px] bg-current shrink-0 opacity-30\"></div>\r\n }\r\n @if (title() || subTitle()) {\r\n <div class=\"flex flex-col shrink-0\">\r\n <h2\r\n class=\"text-md font-semibold product-name whitespace-nowrap\"\r\n [class]=\"titleClass()\"\r\n >\r\n {{ title() }}\r\n </h2>\r\n <span\r\n class=\"text-sm product-tagline whitespace-nowrap\"\r\n [class]=\"subTitleClass()\"\r\n >{{ subTitle() }}</span\r\n >\r\n </div>\r\n }\r\n </div>\r\n <ng-content select=\"[start]\"></ng-content>\r\n </div>\r\n <div class=\"flex gap-2 items-center\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n</div>\r\n" }]
23
+ args: [{ selector: 'mt-topbar', standalone: true, imports: [RouterLink], template: "<div\r\n class=\"w-full flex justify-between align-center bg-primary px-4 py-2 h-[var(--header-height)]\"\r\n [style.backgroundColor]=\"bgColor()\"\r\n [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n [style.backgroundSize]=\"bgImage() && !bgRepeat() ? 'cover' : null\"\r\n [style.backgroundPosition]=\"bgImage() && !bgRepeat() ? 'center' : null\"\r\n [class.bg-no-repeat]=\"!bgRepeat()\"\r\n [class.bg-repeat]=\"bgRepeat()\"\r\n>\r\n <div class=\"flex gap-4 items-center\" [style.color]=\"textColor()\">\r\n <div\r\n class=\"flex gap-3 items-center h-full overflow-hidden transition-all duration-400 ease-in-out\"\r\n [class.max-w-0]=\"!showBranding()\"\r\n [class.opacity-0]=\"!showBranding()\"\r\n [class.max-w-lg]=\"showBranding()\"\r\n [class.opacity-100]=\"showBranding()\"\r\n >\r\n @if (logo()) {\r\n <img\r\n [src]=\"logo()\"\r\n alt=\"Logo\"\r\n class=\"h-10 shrink-0\"\r\n [class]=\"logoClass()\"\r\n [routerLink]=\"logoLink()\"\r\n [class.cursor-pointer]=\"logoLink()\"\r\n />\r\n }\r\n @if (logo() && (title() || subTitle())) {\r\n <div class=\"h-3/4 w-[1px] bg-current shrink-0 opacity-30\"></div>\r\n }\r\n @if (title() || subTitle()) {\r\n <div class=\"flex flex-col shrink-0\">\r\n <h2\r\n class=\"text-md font-semibold product-name whitespace-nowrap\"\r\n [class]=\"titleClass()\"\r\n >\r\n {{ title() }}\r\n </h2>\r\n <span\r\n class=\"text-sm product-tagline whitespace-nowrap\"\r\n [class]=\"subTitleClass()\"\r\n >{{ subTitle() }}</span\r\n >\r\n </div>\r\n }\r\n </div>\r\n <ng-content select=\"[start]\"></ng-content>\r\n </div>\r\n <div class=\"flex gap-2 items-center\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n</div>\r\n" }]
24
24
  }], propDecorators: { logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], logoLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoLink", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], bgImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgImage", required: false }] }], bgRepeat: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgRepeat", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }], showBranding: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBranding", required: false }] }], logoClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoClass", required: false }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }], subTitleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitleClass", required: false }] }] } });
25
25
 
26
26
  /**
package/fesm2022/masterteam-components-topbar.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"masterteam-components-topbar.mjs","sources":["../../../../packages/masterteam/components/topbar/topbar.ts","../../../../packages/masterteam/components/topbar/topbar.html","../../../../packages/masterteam/components/topbar/masterteam-components-topbar.ts"],"sourcesContent":["import { booleanAttribute, Component, input } from '@angular/core';\r\nimport { RouterLink } from '@angular/router';\r\n\r\n@Component({\r\n selector: 'mt-topbar',\r\n standalone: true,\r\n imports: [RouterLink],\r\n templateUrl: './topbar.html',\r\n})\r\nexport class Topbar {\r\n logo = input<string>();\r\n logoLink = input<string | any[]>();\r\n bgColor = input<string>('var(--p-primary-color)');\r\n bgImage = input<string>();\r\n bgRepeat = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n textColor = input<string>('var(--p-primary-contrast-color)');\r\n title = input<string>();\r\n subTitle = input<string>();\r\n showBranding = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n logoClass = input<string>();\r\n titleClass = input<string>();\r\n subTitleClass = input<string>();\r\n}\r\n","<div\r\n class=\"w-full flex justify-between align-center bg-primary px-4 py-2 h-[var(--header-height)]\"\r\n [style.backgroundColor]=\"bgColor()\"\r\n [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n [class.bg-no-repeat]=\"!bgRepeat()\"\r\n [class.bg-repeat]=\"bgRepeat()\"\r\n>\r\n <div class=\"flex gap-4 items-center\" [style.color]=\"textColor()\">\r\n <div\r\n class=\"flex gap-3 items-center h-full overflow-hidden transition-all duration-400 ease-in-out\"\r\n [class.max-w-0]=\"!showBranding()\"\r\n [class.opacity-0]=\"!showBranding()\"\r\n [class.max-w-lg]=\"showBranding()\"\r\n [class.opacity-100]=\"showBranding()\"\r\n >\r\n @if (logo()) {\r\n <img\r\n [src]=\"logo()\"\r\n alt=\"Logo\"\r\n class=\"h-10 shrink-0\"\r\n [class]=\"logoClass()\"\r\n [routerLink]=\"logoLink()\"\r\n [class.cursor-pointer]=\"logoLink()\"\r\n />\r\n }\r\n @if (logo() && (title() || subTitle())) {\r\n <div class=\"h-3/4 w-[1px] bg-current shrink-0 opacity-30\"></div>\r\n }\r\n @if (title() || subTitle()) {\r\n <div class=\"flex flex-col shrink-0\">\r\n <h2\r\n class=\"text-md font-semibold product-name whitespace-nowrap\"\r\n [class]=\"titleClass()\"\r\n >\r\n {{ title() }}\r\n </h2>\r\n <span\r\n class=\"text-sm product-tagline whitespace-nowrap\"\r\n [class]=\"subTitleClass()\"\r\n >{{ subTitle() }}</span\r\n >\r\n </div>\r\n }\r\n </div>\r\n <ng-content select=\"[start]\"></ng-content>\r\n </div>\r\n <div class=\"flex gap-2 items-center\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n</div>\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-topbar.mjs","sources":["../../../../packages/masterteam/components/topbar/topbar.ts","../../../../packages/masterteam/components/topbar/topbar.html","../../../../packages/masterteam/components/topbar/masterteam-components-topbar.ts"],"sourcesContent":["import { booleanAttribute, Component, input } from '@angular/core';\r\nimport { RouterLink } from '@angular/router';\r\n\r\n@Component({\r\n selector: 'mt-topbar',\r\n standalone: true,\r\n imports: [RouterLink],\r\n templateUrl: './topbar.html',\r\n})\r\nexport class Topbar {\r\n logo = input<string>();\r\n logoLink = input<string | any[]>();\r\n bgColor = input<string>('var(--p-primary-color)');\r\n bgImage = input<string>();\r\n bgRepeat = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n textColor = input<string>('var(--p-primary-contrast-color)');\r\n title = input<string>();\r\n subTitle = input<string>();\r\n showBranding = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n logoClass = input<string>();\r\n titleClass = input<string>();\r\n subTitleClass = input<string>();\r\n}\r\n","<div\r\n class=\"w-full flex justify-between align-center bg-primary px-4 py-2 h-[var(--header-height)]\"\r\n [style.backgroundColor]=\"bgColor()\"\r\n [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n [style.backgroundSize]=\"bgImage() && !bgRepeat() ? 'cover' : null\"\r\n [style.backgroundPosition]=\"bgImage() && !bgRepeat() ? 'center' : null\"\r\n [class.bg-no-repeat]=\"!bgRepeat()\"\r\n [class.bg-repeat]=\"bgRepeat()\"\r\n>\r\n <div class=\"flex gap-4 items-center\" [style.color]=\"textColor()\">\r\n <div\r\n class=\"flex gap-3 items-center h-full overflow-hidden transition-all duration-400 ease-in-out\"\r\n [class.max-w-0]=\"!showBranding()\"\r\n [class.opacity-0]=\"!showBranding()\"\r\n [class.max-w-lg]=\"showBranding()\"\r\n [class.opacity-100]=\"showBranding()\"\r\n >\r\n @if (logo()) {\r\n <img\r\n [src]=\"logo()\"\r\n alt=\"Logo\"\r\n class=\"h-10 shrink-0\"\r\n [class]=\"logoClass()\"\r\n [routerLink]=\"logoLink()\"\r\n [class.cursor-pointer]=\"logoLink()\"\r\n />\r\n }\r\n @if (logo() && (title() || subTitle())) {\r\n <div class=\"h-3/4 w-[1px] bg-current shrink-0 opacity-30\"></div>\r\n }\r\n @if (title() || subTitle()) {\r\n <div class=\"flex flex-col shrink-0\">\r\n <h2\r\n class=\"text-md font-semibold product-name whitespace-nowrap\"\r\n [class]=\"titleClass()\"\r\n >\r\n {{ title() }}\r\n </h2>\r\n <span\r\n class=\"text-sm product-tagline whitespace-nowrap\"\r\n [class]=\"subTitleClass()\"\r\n >{{ subTitle() }}</span\r\n >\r\n </div>\r\n }\r\n </div>\r\n <ng-content select=\"[start]\"></ng-content>\r\n </div>\r\n <div class=\"flex gap-2 items-center\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n</div>\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
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, signal, viewChild, inject, effect, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
2
+ import { input, signal, inject, computed, viewChild, effect, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
3
3
  import * as i1 from '@angular/forms';
4
4
  import { Validators, NgControl, FormsModule } from '@angular/forms';
5
5
  import * as i2 from 'primeng/autocomplete';
@@ -16,6 +16,7 @@ import { Subject, distinctUntilChanged, tap, switchMap, of, finalize, catchError
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';
19
+ import { TranslocoService } from '@jsverse/transloco';
19
20
  import * as i3 from 'primeng/api';
20
21
 
21
22
  class UserSearchField {
@@ -38,6 +39,9 @@ class UserSearchField {
38
39
  size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
39
40
  filteredUsers = signal([], ...(ngDevMode ? [{ debugName: "filteredUsers" }] : /* istanbul ignore next */ []));
40
41
  searchTerms = new Subject();
42
+ translocoService = inject(TranslocoService);
43
+ translatedPlaceholder = computed(() => this.placeholder() ??
44
+ this.translocoService.translate('components.userSearchField.search'), ...(ngDevMode ? [{ debugName: "translatedPlaceholder" }] : /* istanbul ignore next */ []));
41
45
  autocomplete = viewChild('autocomplete', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
42
46
  onTouched = () => { };
43
47
  onModelChange = () => { };
@@ -146,7 +150,7 @@ class UserSearchField {
146
150
  });
147
151
  }
148
152
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UserSearchField, deps: [], target: i0.ɵɵFactoryTarget.Component });
149
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: UserSearchField, isStandalone: true, selector: "mt-user-search-field", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, apiUrl: { classPropertyName: "apiUrl", publicName: "apiUrl", isSignal: true, isRequired: true, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, paramName: { classPropertyName: "paramName", publicName: "paramName", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.styleClass" }, classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >\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]=\"placeholder()\"\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", styles: [":host ::ng-deep .p-autocomplete-input-multiple{border-start-end-radius:0;border-end-end-radius:0}\n"], dependencies: [{ 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: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i4.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i5.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
153
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: UserSearchField, isStandalone: true, selector: "mt-user-search-field", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, apiUrl: { classPropertyName: "apiUrl", publicName: "apiUrl", isSignal: true, isRequired: true, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, paramName: { classPropertyName: "paramName", publicName: "paramName", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.styleClass" }, classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >\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]=\"translatedPlaceholder()\"\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", styles: [":host ::ng-deep .p-autocomplete-input-multiple{border-start-end-radius:0;border-end-end-radius:0}\n"], dependencies: [{ 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: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i4.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i5.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
150
154
  }
151
155
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UserSearchField, decorators: [{
152
156
  type: Component,
@@ -161,7 +165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
161
165
  Avatar,
162
166
  ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
163
167
  class: 'grid gap-1',
164
- }, template: "@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]=\"placeholder()\"\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", styles: [":host ::ng-deep .p-autocomplete-input-multiple{border-start-end-radius:0;border-end-end-radius:0}\n"] }]
168
+ }, template: "@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]=\"translatedPlaceholder()\"\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", styles: [":host ::ng-deep .p-autocomplete-input-multiple{border-start-end-radius:0;border-end-end-radius:0}\n"] }]
165
169
  }], ctorParameters: () => [], propDecorators: { hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], isMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiple", required: false }] }], apiUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "apiUrl", required: true }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], paramName: [{ type: i0.Input, args: [{ isSignal: true, alias: "paramName", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], styleClass: [{
166
170
  type: HostBinding,
167
171
  args: ['class']