@masterteam/components 0.0.180 → 0.0.182
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/masterteam-components-drawer.mjs +2 -2
- package/fesm2022/masterteam-components-drawer.mjs.map +1 -1
- package/fesm2022/masterteam-components-dynamic-drawer.mjs.map +1 -1
- package/fesm2022/masterteam-components-entities.mjs +16 -16
- package/fesm2022/masterteam-components-entities.mjs.map +1 -1
- package/fesm2022/masterteam-components-field-validation.mjs +24 -4
- package/fesm2022/masterteam-components-field-validation.mjs.map +1 -1
- package/fesm2022/masterteam-components-location-field.mjs +4 -4
- package/fesm2022/masterteam-components-location-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-number-field.mjs +2 -2
- package/fesm2022/masterteam-components-number-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-radio-cards-field.mjs +2 -2
- package/fesm2022/masterteam-components-radio-cards-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-runtime-action.mjs.map +1 -1
- package/fesm2022/masterteam-components-select-field.mjs +2 -2
- package/fesm2022/masterteam-components-select-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-table.mjs +25 -11
- package/fesm2022/masterteam-components-table.mjs.map +1 -1
- package/fesm2022/masterteam-components-text-field.mjs +2 -2
- package/fesm2022/masterteam-components-text-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-textarea-field.mjs +2 -2
- package/fesm2022/masterteam-components-textarea-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-toggle-field.mjs +2 -2
- package/fesm2022/masterteam-components-toggle-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-user-search-field.mjs +34 -4
- package/fesm2022/masterteam-components-user-search-field.mjs.map +1 -1
- package/fesm2022/masterteam-components.mjs +3 -3
- package/fesm2022/masterteam-components.mjs.map +1 -1
- package/package.json +4 -4
- package/types/masterteam-components-field-validation.d.ts +8 -0
- package/types/masterteam-components-table.d.ts +2 -0
- package/types/masterteam-components-user-search-field.d.ts +2 -0
|
@@ -145,7 +145,7 @@ class TextField {
|
|
|
145
145
|
this.disabled.set(disabled);
|
|
146
146
|
}
|
|
147
147
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
148
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TextField, isStandalone: true, selector: "mt-text-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pInputs: { classPropertyName: "pInputs", publicName: "pInputs", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.styleClass" }, classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "inputText", first: true, predicate: ["inputText"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n}\r\n\r\n<div\r\n class=\"mt-text-field__input\"\r\n [class.mt-text-field__input--start-icon]=\"hasStartIcon()\"\r\n [class.mt-text-field__input--end-action]=\"hasEndActions()\"\r\n [class.mt-text-field__input--two-end-actions]=\"hasTwoEndActions()\"\r\n>\r\n @if (icon() && iconPosition() === \"start\") {\r\n <span class=\"mt-text-field__icon mt-text-field__icon--start\">\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"inputType()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n\r\n @if (isPasswordField()) {\r\n <button\r\n type=\"button\"\r\n class=\"mt-text-field__action\"\r\n [class.mt-text-field__action--before-hint]=\"hasHint()\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [attr.aria-label]=\"passwordToggleLabel()\"\r\n [mtTooltip]=\"passwordToggleLabel()\"\r\n tooltipPosition=\"top\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <mt-icon [icon]=\"passwordToggleIcon()\" />\r\n </button>\r\n } @else if (icon() && iconPosition() === \"end\") {\r\n <span\r\n class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n [class.mt-text-field__icon--before-hint]=\"hasHint()\"\r\n >\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n @if (hint()) {\
|
|
148
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TextField, isStandalone: true, selector: "mt-text-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pInputs: { classPropertyName: "pInputs", publicName: "pInputs", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.styleClass" }, classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "inputText", first: true, predicate: ["inputText"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n}\r\n\r\n<div\r\n class=\"mt-text-field__input\"\r\n [class.mt-text-field__input--start-icon]=\"hasStartIcon()\"\r\n [class.mt-text-field__input--end-action]=\"hasEndActions()\"\r\n [class.mt-text-field__input--two-end-actions]=\"hasTwoEndActions()\"\r\n>\r\n @if (icon() && iconPosition() === \"start\") {\r\n <span class=\"mt-text-field__icon mt-text-field__icon--start\">\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"inputType()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n\r\n @if (isPasswordField()) {\r\n <button\r\n type=\"button\"\r\n class=\"mt-text-field__action\"\r\n [class.mt-text-field__action--before-hint]=\"hasHint()\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [attr.aria-label]=\"passwordToggleLabel()\"\r\n [mtTooltip]=\"passwordToggleLabel()\"\r\n tooltipPosition=\"top\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <mt-icon [icon]=\"passwordToggleIcon()\" />\r\n </button>\r\n } @else if (icon() && iconPosition() === \"end\") {\r\n <span\r\n class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n [class.mt-text-field__icon--before-hint]=\"hasHint()\"\r\n >\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n @if (hint()) {\n <span\n class=\"mt-text-field__icon mt-text-field__icon--end\"\n [mtTooltip]=\"hint()\"\n tooltipPosition=\"top\"\n >\n <mt-icon icon=\"general.info-circle\" />\r\n </span>\r\n }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [".mt-text-field__input{flex:1 1 auto;position:relative;width:100%}.mt-text-field__input--start-icon input{padding-inline-start:2.25rem}.mt-text-field__input--end-action input{padding-inline-end:2.25rem}.mt-text-field__input--two-end-actions input{padding-inline-end:4.25rem}.mt-text-field__icon,.mt-text-field__action{align-items:center;color:var(--p-text-muted-color);display:inline-flex;height:100%;inset-block-start:0;justify-content:center;position:absolute;width:2.25rem;z-index:1}.mt-text-field__icon--start{inset-inline-start:0}.mt-text-field__icon--end,.mt-text-field__action{inset-inline-end:0}.mt-text-field__icon--before-hint,.mt-text-field__action--before-hint{inset-inline-end:2rem}.mt-text-field__action{background:transparent;border:0;cursor:pointer;padding:0}.mt-text-field__action:disabled{cursor:default;opacity:.65}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type:
|
|
149
149
|
// INFO: if we need this filter uncomment the import, and next line and add this to the template input
|
|
150
150
|
//[pKeyFilter]="
|
|
151
151
|
// pKeyFilter()
|
|
@@ -176,7 +176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
176
176
|
Icon,
|
|
177
177
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
178
178
|
class: 'grid gap-1',
|
|
179
|
-
}, template: "@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n}\r\n\r\n<div\r\n class=\"mt-text-field__input\"\r\n [class.mt-text-field__input--start-icon]=\"hasStartIcon()\"\r\n [class.mt-text-field__input--end-action]=\"hasEndActions()\"\r\n [class.mt-text-field__input--two-end-actions]=\"hasTwoEndActions()\"\r\n>\r\n @if (icon() && iconPosition() === \"start\") {\r\n <span class=\"mt-text-field__icon mt-text-field__icon--start\">\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"inputType()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n\r\n @if (isPasswordField()) {\r\n <button\r\n type=\"button\"\r\n class=\"mt-text-field__action\"\r\n [class.mt-text-field__action--before-hint]=\"hasHint()\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [attr.aria-label]=\"passwordToggleLabel()\"\r\n [mtTooltip]=\"passwordToggleLabel()\"\r\n tooltipPosition=\"top\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <mt-icon [icon]=\"passwordToggleIcon()\" />\r\n </button>\r\n } @else if (icon() && iconPosition() === \"end\") {\r\n <span\r\n class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n [class.mt-text-field__icon--before-hint]=\"hasHint()\"\r\n >\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n @if (hint()) {\
|
|
179
|
+
}, template: "@if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n}\r\n\r\n<div\r\n class=\"mt-text-field__input\"\r\n [class.mt-text-field__input--start-icon]=\"hasStartIcon()\"\r\n [class.mt-text-field__input--end-action]=\"hasEndActions()\"\r\n [class.mt-text-field__input--two-end-actions]=\"hasTwoEndActions()\"\r\n>\r\n @if (icon() && iconPosition() === \"start\") {\r\n <span class=\"mt-text-field__icon mt-text-field__icon--start\">\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n <input\r\n #inputText=\"\"\r\n pInputText=\"\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [type]=\"inputType()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n />\r\n\r\n @if (isPasswordField()) {\r\n <button\r\n type=\"button\"\r\n class=\"mt-text-field__action\"\r\n [class.mt-text-field__action--before-hint]=\"hasHint()\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [attr.aria-label]=\"passwordToggleLabel()\"\r\n [mtTooltip]=\"passwordToggleLabel()\"\r\n tooltipPosition=\"top\"\r\n (click)=\"togglePasswordVisibility()\"\r\n >\r\n <mt-icon [icon]=\"passwordToggleIcon()\" />\r\n </button>\r\n } @else if (icon() && iconPosition() === \"end\") {\r\n <span\r\n class=\"mt-text-field__icon mt-text-field__icon--end\"\r\n [class.mt-text-field__icon--before-hint]=\"hasHint()\"\r\n >\r\n <mt-icon [icon]=\"icon()\" />\r\n </span>\r\n }\r\n\r\n @if (hint()) {\n <span\n class=\"mt-text-field__icon mt-text-field__icon--end\"\n [mtTooltip]=\"hint()\"\n tooltipPosition=\"top\"\n >\n <mt-icon icon=\"general.info-circle\" />\r\n </span>\r\n }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [".mt-text-field__input{flex:1 1 auto;position:relative;width:100%}.mt-text-field__input--start-icon input{padding-inline-start:2.25rem}.mt-text-field__input--end-action input{padding-inline-end:2.25rem}.mt-text-field__input--two-end-actions input{padding-inline-end:4.25rem}.mt-text-field__icon,.mt-text-field__action{align-items:center;color:var(--p-text-muted-color);display:inline-flex;height:100%;inset-block-start:0;justify-content:center;position:absolute;width:2.25rem;z-index:1}.mt-text-field__icon--start{inset-inline-start:0}.mt-text-field__icon--end,.mt-text-field__action{inset-inline-end:0}.mt-text-field__icon--before-hint,.mt-text-field__action--before-hint{inset-inline-end:2rem}.mt-text-field__action{background:transparent;border:0;cursor:pointer;padding:0}.mt-text-field__action:disabled{cursor:default;opacity:.65}\n"] }]
|
|
180
180
|
}], ctorParameters: () => [], propDecorators: { inputText: [{
|
|
181
181
|
type: ViewChild,
|
|
182
182
|
args: ['inputText', { static: true }]
|
|
@@ -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 numberAttribute,\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 AbstractControl,\r\n ControlValueAccessor,\r\n FormsModule,\r\n NgControl,\r\n ValidationErrors,\r\n ValidatorFn,\r\n} from '@angular/forms';\r\n// import { KeyFilterModule, KeyFilterPattern } from 'primeng/keyfilter';\r\nimport { Tooltip } from '@masterteam/components/tooltip';\r\nimport {\r\n characterLimitValidator,\r\n FieldValidation,\r\n} from '@masterteam/components/field-validation';\r\nimport { isInvalid } from '@masterteam/components';\r\nimport { Icon, MTIcon } from '@masterteam/icons';\r\nimport { TranslocoService } from '@jsverse/transloco';\r\n\r\nconst requiredNoWhitespace: ValidatorFn = (\r\n control: AbstractControl,\r\n): ValidationErrors | null => {\r\n const value = control.value;\r\n if (value === null || value === undefined) return { required: true };\r\n if (typeof value === 'string' && value.trim() === '')\r\n return { required: true };\r\n return null;\r\n};\r\n\r\nconst TEXT_FIELD_MAX_LENGTH = 300;\r\n\r\nconst optionalNumberAttribute = (value: unknown): number | null =>\r\n value === null || value === undefined\r\n ? null\r\n : numberAttribute(value, TEXT_FIELD_MAX_LENGTH);\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 maxLength = input<number | null, unknown>(TEXT_FIELD_MAX_LENGTH, {\r\n transform: optionalNumberAttribute,\r\n });\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: ValidatorFn = requiredNoWhitespace;\r\n private maxLengthValidator: ValidatorFn | null = null;\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 private readonly transloco = inject(TranslocoService);\r\n passwordToggleLabel = computed(() =>\r\n this.passwordVisible()\r\n ? this.transloco.translate('components.textField.hidePassword')\r\n : this.transloco.translate('components.textField.showPassword'),\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 const control = this.ngControl?.control;\r\n if (!control) {\r\n return;\r\n }\r\n\r\n if (this.required()) {\r\n control.addValidators(this.requiredValidator);\r\n }\r\n\r\n if (this.maxLengthValidator) {\r\n control.removeValidators(this.maxLengthValidator);\r\n this.maxLengthValidator = null;\r\n }\r\n\r\n const maxLength = this.maxLength();\r\n if (maxLength !== null) {\r\n this.maxLengthValidator = characterLimitValidator(maxLength);\r\n control.addValidators(this.maxLengthValidator);\r\n }\r\n\r\n control.updateValueAndValidity({ emitEvent: false });\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":";;;;;;;;;;;;AAkCA,MAAM,oBAAoB,GAAgB,CACxC,OAAwB,KACG;AAC3B,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK;AAC3B,IAAA,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS;AAAE,QAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE;IACpE,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE;AAClD,QAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE;AAC3B,IAAA,OAAO,IAAI;AACb,CAAC;AAED,MAAM,qBAAqB,GAAG,GAAG;AAEjC,MAAM,uBAAuB,GAAG,CAAC,KAAc,KAC7C,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK;AAC1B,MAAE;AACF,MAAE,eAAe,CAAC,KAAK,EAAE,qBAAqB,CAAC;AAEnD;MA2Ba,SAAS,CAAA;AAEpB,IAAA,SAAS;AAEA,IAAA,KAAK,GAAG,KAAK,CAAU,IAAI,4EAAC;IAC5B,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;IACtB,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;IACvB,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAC7B,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AACzB,IAAA,IAAI,GAAG,KAAK,CAAS,MAAM,2EAAC;AAC5B,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;IAChC,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAA6B;;AAE5C,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;IAChC,SAAS,GAAG,KAAK,CAAyB,qBAAqB,iFACtE,SAAS,EAAE,uBAAuB,EAAA,CAClC;IACO,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AACtB,IAAA,YAAY,GAAG,KAAK,CAAkB,OAAO,mFAAC;;AAGjC,IAAA,UAAU;IAEhC,iBAAiB,GAAgB,oBAAoB;IAC7C,kBAAkB,GAAuB,IAAI;AACrD,IAAA,KAAK,GAAG,MAAM,CAAgB,IAAI,4EAAC;AACnC,IAAA,QAAQ,GAAG,MAAM,CAAU,KAAK,+EAAC;AACjC,IAAA,eAAe,GAAG,MAAM,CAAU,KAAK,sFAAC;AACxC,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,KAAK,UAAU,sFAAC;IAC5D,SAAS,GAAG,QAAQ,CAAC,MACnB,IAAI,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC,IAAI,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CACxE;IACD,YAAY,GAAG,QAAQ,CACrB,MAAM,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE,KAAK,OAAO,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,cAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAC9D;IACD,UAAU,GAAG,QAAQ,CACnB,MACE,IAAI,CAAC,eAAe,EAAE;AACtB,SAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE,KAAK,KAAK,CAAC,iFAC1D;AACD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,8EAAC;AAC9C,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,oFAAC;AACnE,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,uFAAC;AACtE,IAAA,kBAAkB,GAAG,QAAQ,CAAS,MACpC,IAAI,CAAC,eAAe,EAAE,GAAG,iBAAiB,GAAG,aAAa,yFAC3D;AACgB,IAAA,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC;IACrD,mBAAmB,GAAG,QAAQ,CAAC,MAC7B,IAAI,CAAC,eAAe;UAChB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,mCAAmC;UAC5D,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,mCAAmC,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,qBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAClE;IAED,QAAQ,GAAW,uCAAuC;AAE1D,IAAA,SAAS,GAAe,MAAK,EAAE,CAAC;AAChC,IAAA,aAAa,GAAyB,MAAK,EAAE,CAAC;IAEvC,SAAS,GAAqB,IAAI;IAEzC,SAAS,GAAG,SAAS;AAErB,IAAA,WAAA,GAAA;AACE,QAAA,IAAI;;AAEF,YAAA,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAClE,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,gBAAA,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI;YACrC;QACF;QAAE,OAAO,EAAE,EAAE;;AAEX,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;QACvB;QACA,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO;YACvC,IAAI,CAAC,OAAO,EAAE;gBACZ;YACF;AAEA,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,gBAAA,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC;YAC/C;AAEA,YAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE;AAC3B,gBAAA,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC;AACjD,gBAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI;YAChC;AAEA,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE;AAClC,YAAA,IAAI,SAAS,KAAK,IAAI,EAAE;AACtB,gBAAA,IAAI,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,SAAS,CAAC;AAC5D,gBAAA,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,kBAAkB,CAAC;YAChD;YAEA,OAAO,CAAC,sBAAsB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AACtD,QAAA,CAAC,CAAC;IACJ;IAEA,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE;;;;;AAM9B,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;YAClB,IAAI,CAAC,sBAAsB,EAAE;QAC/B;IACF;IAEA,sBAAsB,GAAA;AACpB,QAAA,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;IAC/C;AAEA,IAAA,aAAa,CAAC,KAAU,EAAA;AACtB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AAErB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO;QACvC,IAAI,OAAO,EAAE;AACX,YAAA,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC;YACvB,OAAO,CAAC,WAAW,EAAE;YACrB,OAAO,CAAC,aAAa,EAAE;YACvB,OAAO,CAAC,sBAAsB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;YACpD;QACF;AAEA,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,SAAS,EAAE;IAClB;IAEA,wBAAwB,GAAA;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACtC;QACF;AAEA,QAAA,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC;IACpD;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,CAAC,SAAS,CAAC,EAAE;YACtB,IAAI,CAAC,sBAAsB,EAAE;QAC/B;IACF;AAEA,IAAA,UAAU,CAAC,KAAa,EAAA;AACtB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;IACvB;AAEA,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,aAAa,GAAG,EAAE;IACzB;AAEA,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,gBAAgB,CAAC,QAAiB,EAAA;AAChC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC;IAC7B;uGA9JW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,EAAA,cAAA,EAAA,YAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9EtB,6nEAoEA,EAAA,MAAA,EAAA,CAAA,q0BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDZI,WAAW,8mBACX,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,aAAA,EAAA,cAAA,EAAA,oBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;;;;;;;;;gBAUf,OAAO,EAAA,QAAA,EAAA,aAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,eAAe,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,IAAI,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FASK,SAAS,EAAA,UAAA,EAAA,CAAA;kBA1BrB,SAAS;+BACE,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,OAAA,EACP;wBACP,WAAW;wBACX,eAAe;;;;;;;;;;wBAUf,OAAO;wBACP,eAAe;wBACf,IAAI;qBACL,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,KAAK,EAAE,YAAY;AACpB,qBAAA,EAAA,QAAA,EAAA,6nEAAA,EAAA,MAAA,EAAA,CAAA,q0BAAA,CAAA,EAAA;;sBAGA,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;sBAoBvC,WAAW;uBAAC,OAAO;;;AEnGtB;;AAEG;;;;"}
|
|
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 numberAttribute,\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 AbstractControl,\r\n ControlValueAccessor,\r\n FormsModule,\r\n NgControl,\r\n ValidationErrors,\r\n ValidatorFn,\r\n} from '@angular/forms';\r\n// import { KeyFilterModule, KeyFilterPattern } from 'primeng/keyfilter';\r\nimport { Tooltip } from '@masterteam/components/tooltip';\r\nimport {\r\n characterLimitValidator,\r\n FieldValidation,\r\n} from '@masterteam/components/field-validation';\r\nimport { isInvalid } from '@masterteam/components';\r\nimport { Icon, MTIcon } from '@masterteam/icons';\r\nimport { TranslocoService } from '@jsverse/transloco';\r\n\r\nconst requiredNoWhitespace: ValidatorFn = (\r\n control: AbstractControl,\r\n): ValidationErrors | null => {\r\n const value = control.value;\r\n if (value === null || value === undefined) return { required: true };\r\n if (typeof value === 'string' && value.trim() === '')\r\n return { required: true };\r\n return null;\r\n};\r\n\r\nconst TEXT_FIELD_MAX_LENGTH = 300;\r\n\r\nconst optionalNumberAttribute = (value: unknown): number | null =>\r\n value === null || value === undefined\r\n ? null\r\n : numberAttribute(value, TEXT_FIELD_MAX_LENGTH);\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);\n readonly hint = input<string>();\n readonly label = input<string>();\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 maxLength = input<number | null, unknown>(TEXT_FIELD_MAX_LENGTH, {\r\n transform: optionalNumberAttribute,\r\n });\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: ValidatorFn = requiredNoWhitespace;\r\n private maxLengthValidator: ValidatorFn | null = null;\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()));\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 private readonly transloco = inject(TranslocoService);\r\n passwordToggleLabel = computed(() =>\r\n this.passwordVisible()\r\n ? this.transloco.translate('components.textField.hidePassword')\r\n : this.transloco.translate('components.textField.showPassword'),\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 const control = this.ngControl?.control;\r\n if (!control) {\r\n return;\r\n }\r\n\r\n if (this.required()) {\r\n control.addValidators(this.requiredValidator);\r\n }\r\n\r\n if (this.maxLengthValidator) {\r\n control.removeValidators(this.maxLengthValidator);\r\n this.maxLengthValidator = null;\r\n }\r\n\r\n const maxLength = this.maxLength();\r\n if (maxLength !== null) {\r\n this.maxLengthValidator = characterLimitValidator(maxLength);\r\n control.addValidators(this.maxLengthValidator);\r\n }\r\n\r\n control.updateValueAndValidity({ emitEvent: false });\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()) {\n <span\n class=\"mt-text-field__icon mt-text-field__icon--end\"\n [mtTooltip]=\"hint()\"\n tooltipPosition=\"top\"\n >\n <mt-icon icon=\"general.info-circle\" />\r\n </span>\r\n }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -99,13 +99,13 @@ class TextareaField {
|
|
|
99
99
|
this.disabled.set(disabled);
|
|
100
100
|
}
|
|
101
101
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextareaField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
102
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TextareaField, isStandalone: true, selector: "mt-textarea-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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, noErrorStyle: { classPropertyName: "noErrorStyle", publicName: "noErrorStyle", isSignal: true, isRequired: false, transformFunction: null }, pInputs: { classPropertyName: "pInputs", publicName: "pInputs", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.styleClass" }, classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (label() || hint()) {\
|
|
102
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TextareaField, isStandalone: true, selector: "mt-textarea-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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, noErrorStyle: { classPropertyName: "noErrorStyle", publicName: "noErrorStyle", isSignal: true, isRequired: false, transformFunction: null }, pInputs: { classPropertyName: "pInputs", publicName: "pInputs", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.styleClass" }, classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (label() || hint()) {\n <div class=\"flex items-center gap-1\">\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()) {\n <span\n class=\"inline-flex text-surface-400\"\n [mtTooltip]=\"hint()\"\n tooltipPosition=\"top\"\n >\n <mt-icon icon=\"general.help-circle\" />\r\n </span>\r\n }\r\n </div>\r\n}\r\n<textarea\r\n #textarea\r\n pTextarea\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (blur)=\"onTouched()\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"!noErrorStyle() && isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n [rows]=\"rows()\"\r\n style=\"resize: none\"\r\n></textarea>\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: TextareaModule }, { kind: "directive", type: i2.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
103
103
|
}
|
|
104
104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextareaField, decorators: [{
|
|
105
105
|
type: Component,
|
|
106
106
|
args: [{ selector: 'mt-textarea-field', standalone: true, imports: [FormsModule, TextareaModule, FieldValidation, Tooltip, Icon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
107
107
|
class: 'grid gap-1',
|
|
108
|
-
}, template: "@if (label() || hint()) {\
|
|
108
|
+
}, template: "@if (label() || hint()) {\n <div class=\"flex items-center gap-1\">\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()) {\n <span\n class=\"inline-flex text-surface-400\"\n [mtTooltip]=\"hint()\"\n tooltipPosition=\"top\"\n >\n <mt-icon icon=\"general.help-circle\" />\r\n </span>\r\n }\r\n </div>\r\n}\r\n<textarea\r\n #textarea\r\n pTextarea\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (blur)=\"onTouched()\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"!noErrorStyle() && isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n [rows]=\"rows()\"\r\n style=\"resize: none\"\r\n></textarea>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n" }]
|
|
109
109
|
}], ctorParameters: () => [], propDecorators: { textarea: [{
|
|
110
110
|
type: ViewChild,
|
|
111
111
|
args: ['textarea', { static: true }]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"masterteam-components-textarea-field.mjs","sources":["../../../../packages/masterteam/components/textarea-field/textarea-field.ts","../../../../packages/masterteam/components/textarea-field/textarea-field.html","../../../../packages/masterteam/components/textarea-field/masterteam-components-textarea-field.ts"],"sourcesContent":["import {\r\n Component,\r\n HostBinding,\r\n SimpleChanges,\r\n ViewChild,\r\n numberAttribute,\r\n signal,\r\n input,\r\n OnInit,\r\n OnChanges,\r\n inject,\r\n ChangeDetectionStrategy,\r\n effect,\r\n} from '@angular/core';\r\nimport { TextareaModule } from 'primeng/textarea';\r\nimport {\r\n ControlValueAccessor,\r\n FormsModule,\r\n NgControl,\r\n ValidatorFn,\r\n Validators,\r\n} from '@angular/forms';\r\nimport {\r\n characterLimitValidator,\r\n FieldValidation,\r\n} from '@masterteam/components/field-validation';\r\nimport { isInvalid } from '@masterteam/components';\r\nimport { Tooltip } from '@masterteam/components/tooltip';\r\nimport { Icon } from '@masterteam/icons';\r\n\r\nconst TEXTAREA_FIELD_MAX_LENGTH = 2000;\r\n\r\nconst optionalNumberAttribute = (value: unknown): number | null =>\r\n value === null || value === undefined\r\n ? null\r\n : numberAttribute(value, TEXTAREA_FIELD_MAX_LENGTH);\r\n\r\n// TODO: text stuck when reset\r\n@Component({\r\n selector: 'mt-textarea-field',\r\n standalone: true,\r\n imports: [FormsModule, TextareaModule, FieldValidation, Tooltip, Icon],\r\n templateUrl: './textarea-field.html',\r\n styleUrls: ['./textarea-field.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n class: 'grid gap-1',\r\n },\r\n})\r\nexport class TextareaField implements ControlValueAccessor, OnInit, OnChanges {\r\n @ViewChild('textarea', { static: true })\r\n textarea: HTMLTextAreaElement;\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 readonly = input<boolean>(false);\r\n readonly noErrorStyle = input<boolean>(false);\r\n readonly pInputs = input<Partial<HTMLTextAreaElement>>();\r\n readonly rows = input<string>('4');\r\n readonly required = input<boolean>(false);\r\n readonly maxLength = input<number | null, unknown>(\r\n TEXTAREA_FIELD_MAX_LENGTH,\r\n {\r\n transform: optionalNumberAttribute,\r\n },\r\n );\r\n\r\n @HostBinding('class') styleClass: string;\r\n\r\n requiredValidator = Validators.required;\r\n private maxLengthValidator: ValidatorFn | null = null;\r\n value = signal<string | null>(null);\r\n disabled = signal<boolean>(false);\r\n\r\n onTouched: () => void = () => {};\r\n onModelChange: (value: string | null) => void = () => {};\r\n\r\n public ngControl = inject(NgControl, { self: true, optional: true });\r\n\r\n isInvalid = isInvalid;\r\n\r\n constructor() {\r\n if (this.ngControl) {\r\n this.ngControl.valueAccessor = this;\r\n }\r\n effect(() => {\r\n const control = this.ngControl?.control;\r\n if (!control) {\r\n return;\r\n }\r\n\r\n if (this.required()) {\r\n control.addValidators(this.requiredValidator);\r\n }\r\n\r\n if (this.maxLengthValidator) {\r\n control.removeValidators(this.maxLengthValidator);\r\n this.maxLengthValidator = null;\r\n }\r\n\r\n const maxLength = this.maxLength();\r\n if (maxLength !== null) {\r\n this.maxLengthValidator = characterLimitValidator(maxLength);\r\n control.addValidators(this.maxLengthValidator);\r\n }\r\n\r\n control.updateValueAndValidity({ emitEvent: false });\r\n });\r\n }\r\n\r\n applyInputsToTextarea() {\r\n Object.assign(this.textarea, this.pInputs());\r\n }\r\n\r\n ngOnInit() {\r\n this.styleClass = this.class();\r\n if (this.pInputs()) {\r\n this.applyInputsToTextarea();\r\n }\r\n }\r\n\r\n onValueChange(value: string | null) {\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 }\r\n\r\n ngOnChanges(changes: SimpleChanges) {\r\n if (changes['pInputs']) {\r\n this.applyInputsToTextarea();\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() || hint()) {\r\n <div class=\"flex items-center gap-1\">\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 <span\r\n class=\"inline-flex text-surface-400\"\r\n [mtTooltip]=\"hint()\"\r\n tooltipPosition=\"top\"\r\n >\r\n <mt-icon icon=\"general.help-circle\" />\r\n </span>\r\n }\r\n </div>\r\n}\r\n<textarea\r\n #textarea\r\n pTextarea\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (blur)=\"onTouched()\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"!noErrorStyle() && isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n [rows]=\"rows()\"\r\n style=\"resize: none\"\r\n></textarea>\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-textarea-field.mjs","sources":["../../../../packages/masterteam/components/textarea-field/textarea-field.ts","../../../../packages/masterteam/components/textarea-field/textarea-field.html","../../../../packages/masterteam/components/textarea-field/masterteam-components-textarea-field.ts"],"sourcesContent":["import {\r\n Component,\r\n HostBinding,\r\n SimpleChanges,\r\n ViewChild,\r\n numberAttribute,\r\n signal,\r\n input,\r\n OnInit,\r\n OnChanges,\r\n inject,\n ChangeDetectionStrategy,\n effect,\n} from '@angular/core';\nimport { TextareaModule } from 'primeng/textarea';\r\nimport {\r\n ControlValueAccessor,\r\n FormsModule,\r\n NgControl,\r\n ValidatorFn,\r\n Validators,\r\n} from '@angular/forms';\r\nimport {\r\n characterLimitValidator,\r\n FieldValidation,\r\n} from '@masterteam/components/field-validation';\r\nimport { isInvalid } from '@masterteam/components';\r\nimport { Tooltip } from '@masterteam/components/tooltip';\r\nimport { Icon } from '@masterteam/icons';\r\n\r\nconst TEXTAREA_FIELD_MAX_LENGTH = 2000;\r\n\r\nconst optionalNumberAttribute = (value: unknown): number | null =>\r\n value === null || value === undefined\r\n ? null\r\n : numberAttribute(value, TEXTAREA_FIELD_MAX_LENGTH);\r\n\r\n// TODO: text stuck when reset\r\n@Component({\r\n selector: 'mt-textarea-field',\r\n standalone: true,\r\n imports: [FormsModule, TextareaModule, FieldValidation, Tooltip, Icon],\r\n templateUrl: './textarea-field.html',\r\n styleUrls: ['./textarea-field.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n class: 'grid gap-1',\r\n },\r\n})\r\nexport class TextareaField implements ControlValueAccessor, OnInit, OnChanges {\r\n @ViewChild('textarea', { static: true })\r\n textarea: HTMLTextAreaElement;\r\n\r\n readonly field = input<boolean>(true);\n readonly hint = input<string>();\n readonly label = input<string>();\n readonly placeholder = input<string>();\r\n readonly class = input<string>('');\r\n readonly readonly = input<boolean>(false);\r\n readonly noErrorStyle = input<boolean>(false);\r\n readonly pInputs = input<Partial<HTMLTextAreaElement>>();\r\n readonly rows = input<string>('4');\r\n readonly required = input<boolean>(false);\r\n readonly maxLength = input<number | null, unknown>(\r\n TEXTAREA_FIELD_MAX_LENGTH,\r\n {\r\n transform: optionalNumberAttribute,\r\n },\r\n );\r\n\r\n @HostBinding('class') styleClass: string;\r\n\r\n requiredValidator = Validators.required;\r\n private maxLengthValidator: ValidatorFn | null = null;\n value = signal<string | null>(null);\n disabled = signal<boolean>(false);\n\n onTouched: () => void = () => {};\n onModelChange: (value: string | null) => void = () => {};\r\n\r\n public ngControl = inject(NgControl, { self: true, optional: true });\r\n\r\n isInvalid = isInvalid;\r\n\r\n constructor() {\r\n if (this.ngControl) {\r\n this.ngControl.valueAccessor = this;\r\n }\r\n effect(() => {\r\n const control = this.ngControl?.control;\r\n if (!control) {\r\n return;\r\n }\r\n\r\n if (this.required()) {\r\n control.addValidators(this.requiredValidator);\r\n }\r\n\r\n if (this.maxLengthValidator) {\r\n control.removeValidators(this.maxLengthValidator);\r\n this.maxLengthValidator = null;\r\n }\r\n\r\n const maxLength = this.maxLength();\r\n if (maxLength !== null) {\r\n this.maxLengthValidator = characterLimitValidator(maxLength);\r\n control.addValidators(this.maxLengthValidator);\r\n }\r\n\r\n control.updateValueAndValidity({ emitEvent: false });\r\n });\r\n }\r\n\r\n applyInputsToTextarea() {\r\n Object.assign(this.textarea, this.pInputs());\r\n }\r\n\r\n ngOnInit() {\r\n this.styleClass = this.class();\r\n if (this.pInputs()) {\r\n this.applyInputsToTextarea();\r\n }\r\n }\r\n\r\n onValueChange(value: string | null) {\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 }\r\n\r\n ngOnChanges(changes: SimpleChanges) {\r\n if (changes['pInputs']) {\r\n this.applyInputsToTextarea();\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() || hint()) {\n <div class=\"flex items-center gap-1\">\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()) {\n <span\n class=\"inline-flex text-surface-400\"\n [mtTooltip]=\"hint()\"\n tooltipPosition=\"top\"\n >\n <mt-icon icon=\"general.help-circle\" />\r\n </span>\r\n }\r\n </div>\r\n}\r\n<textarea\r\n #textarea\r\n pTextarea\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (blur)=\"onTouched()\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [id]=\"ngControl?.name || label()\"\r\n [invalid]=\"!noErrorStyle() && isInvalid(ngControl?.control)\"\r\n (blur)=\"onTouched()\"\r\n placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n class=\"w-full\"\r\n [rows]=\"rows()\"\r\n style=\"resize: none\"\r\n></textarea>\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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"}
|
|
@@ -89,7 +89,7 @@ class ToggleField {
|
|
|
89
89
|
this.disabled.set(disabled);
|
|
90
90
|
}
|
|
91
91
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToggleField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
92
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ToggleField, isStandalone: true, selector: "mt-toggle-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, toggleShape: { classPropertyName: "toggleShape", publicName: "toggleShape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, descriptionCard: { classPropertyName: "descriptionCard", publicName: "descriptionCard", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, host: { classAttribute: "grid gap-1" }, queries: [{ propertyName: "toggleCardBottom", first: true, predicate: ["toggleCardBottom"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, static: true }], ngImport: i0, template: "@if (toggleShape() === \"card\") {\r\n <mt-card\r\n class=\"cursor-pointer transition-all hover:border-primary\"\r\n [class.border-primary]=\"value()\"\r\n [class.opacity-60]=\"disabled() || readonly()\"\r\n >\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"flex flex-1 items-center gap-3\">\r\n @if (icon()) {\r\n <mt-avatar [icon]=\"icon()\" size=\"normal\" />\r\n }\r\n <div class=\"flex flex-col\">\r\n @if (label()) {\r\n <label\r\n [class.required]=\"\r\n ngControl?.control?.hasValidator(requiredValidator)\r\n \"\r\n [for]=\"resolvedInputId()\"\r\n class=\"cursor-pointer font-medium\"\r\n >{{ label() }}</label\r\n >\r\n }\r\n @if (descriptionCard()) {\
|
|
92
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ToggleField, isStandalone: true, selector: "mt-toggle-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, toggleShape: { classPropertyName: "toggleShape", publicName: "toggleShape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, descriptionCard: { classPropertyName: "descriptionCard", publicName: "descriptionCard", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, host: { classAttribute: "grid gap-1" }, queries: [{ propertyName: "toggleCardBottom", first: true, predicate: ["toggleCardBottom"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, static: true }], ngImport: i0, template: "@if (toggleShape() === \"card\") {\r\n <mt-card\r\n class=\"cursor-pointer transition-all hover:border-primary\"\r\n [class.border-primary]=\"value()\"\r\n [class.opacity-60]=\"disabled() || readonly()\"\r\n >\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"flex flex-1 items-center gap-3\">\r\n @if (icon()) {\r\n <mt-avatar [icon]=\"icon()\" size=\"normal\" />\r\n }\r\n <div class=\"flex flex-col\">\r\n @if (label()) {\r\n <label\r\n [class.required]=\"\r\n ngControl?.control?.hasValidator(requiredValidator)\r\n \"\r\n [for]=\"resolvedInputId()\"\r\n class=\"cursor-pointer font-medium\"\r\n >{{ label() }}</label\r\n >\r\n }\r\n @if (descriptionCard()) {\n <span class=\"text-sm text-muted-color\">{{\n descriptionCard()\n }}</span>\n }\n </div>\r\n </div>\r\n <p-toggleswitch\r\n #checkbox\r\n [ngModel]=\"value()\"\r\n [size]=\"size()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (onChange)=\"onTouched(); onChange.emit($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [inputId]=\"resolvedInputId()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n class=\"leading-none\"\r\n ></p-toggleswitch>\r\n </div>\r\n @if (toggleCardBottom()) {\r\n <ng-container *ngTemplateOutlet=\"toggleCardBottom()!\"></ng-container>\r\n }\r\n </mt-card>\r\n} @else {\r\n <div\r\n class=\"flex gap-1\"\r\n [class.items-center]=\"!isVertical()\"\r\n [class.gap-2]=\"!isVertical()\"\r\n [class.flex-col]=\"isVertical()\"\r\n [class.flex-col-reverse]=\"labelPosition() === 'top'\"\r\n [class.flex-row-reverse]=\"labelPosition() === 'start'\"\r\n [class.justify-end]=\"labelPosition() === 'start'\"\r\n >\r\n <p-toggleswitch\r\n #checkbox\r\n [size]=\"size()\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (onChange)=\"onTouched(); onChange.emit($event)\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [inputId]=\"resolvedInputId()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n class=\"leading-none\"\r\n ></p-toggleswitch>\r\n @if (label()) {\n <label\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n [for]=\"resolvedInputId()\"\n >{{ label() }}</label\n >\n }\n </div>\n}\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [":host ::ng-deep .p-toggleswitch.p-disabled.p-toggleswitch-checked .p-toggleswitch-slider{background:color-mix(in srgb,var(--p-primary-color) 25%,var(--p-surface-300));border-color:color-mix(in srgb,var(--p-surface-200),var(--p-surface-500))}:host ::ng-deep .p-toggleswitch.p-disabled.p-toggleswitch-checked .p-toggleswitch-handle{background:var(--p-surface-50, #fff);box-shadow:0 0 0 1px color-mix(in srgb,var(--p-primary-color) 16%,transparent)}\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: ToggleSwitchModule }, { kind: "component", type: i2.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
93
93
|
}
|
|
94
94
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToggleField, decorators: [{
|
|
95
95
|
type: Component,
|
|
@@ -102,7 +102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
102
102
|
NgTemplateOutlet,
|
|
103
103
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
104
104
|
class: 'grid gap-1',
|
|
105
|
-
}, template: "@if (toggleShape() === \"card\") {\r\n <mt-card\r\n class=\"cursor-pointer transition-all hover:border-primary\"\r\n [class.border-primary]=\"value()\"\r\n [class.opacity-60]=\"disabled() || readonly()\"\r\n >\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"flex flex-1 items-center gap-3\">\r\n @if (icon()) {\r\n <mt-avatar [icon]=\"icon()\" size=\"normal\" />\r\n }\r\n <div class=\"flex flex-col\">\r\n @if (label()) {\r\n <label\r\n [class.required]=\"\r\n ngControl?.control?.hasValidator(requiredValidator)\r\n \"\r\n [for]=\"resolvedInputId()\"\r\n class=\"cursor-pointer font-medium\"\r\n >{{ label() }}</label\r\n >\r\n }\r\n @if (descriptionCard()) {\
|
|
105
|
+
}, template: "@if (toggleShape() === \"card\") {\r\n <mt-card\r\n class=\"cursor-pointer transition-all hover:border-primary\"\r\n [class.border-primary]=\"value()\"\r\n [class.opacity-60]=\"disabled() || readonly()\"\r\n >\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"flex flex-1 items-center gap-3\">\r\n @if (icon()) {\r\n <mt-avatar [icon]=\"icon()\" size=\"normal\" />\r\n }\r\n <div class=\"flex flex-col\">\r\n @if (label()) {\r\n <label\r\n [class.required]=\"\r\n ngControl?.control?.hasValidator(requiredValidator)\r\n \"\r\n [for]=\"resolvedInputId()\"\r\n class=\"cursor-pointer font-medium\"\r\n >{{ label() }}</label\r\n >\r\n }\r\n @if (descriptionCard()) {\n <span class=\"text-sm text-muted-color\">{{\n descriptionCard()\n }}</span>\n }\n </div>\r\n </div>\r\n <p-toggleswitch\r\n #checkbox\r\n [ngModel]=\"value()\"\r\n [size]=\"size()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (onChange)=\"onTouched(); onChange.emit($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [inputId]=\"resolvedInputId()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n class=\"leading-none\"\r\n ></p-toggleswitch>\r\n </div>\r\n @if (toggleCardBottom()) {\r\n <ng-container *ngTemplateOutlet=\"toggleCardBottom()!\"></ng-container>\r\n }\r\n </mt-card>\r\n} @else {\r\n <div\r\n class=\"flex gap-1\"\r\n [class.items-center]=\"!isVertical()\"\r\n [class.gap-2]=\"!isVertical()\"\r\n [class.flex-col]=\"isVertical()\"\r\n [class.flex-col-reverse]=\"labelPosition() === 'top'\"\r\n [class.flex-row-reverse]=\"labelPosition() === 'start'\"\r\n [class.justify-end]=\"labelPosition() === 'start'\"\r\n >\r\n <p-toggleswitch\r\n #checkbox\r\n [size]=\"size()\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (onChange)=\"onTouched(); onChange.emit($event)\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [inputId]=\"resolvedInputId()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n class=\"leading-none\"\r\n ></p-toggleswitch>\r\n @if (label()) {\n <label\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n [for]=\"resolvedInputId()\"\n >{{ label() }}</label\n >\n }\n </div>\n}\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [":host ::ng-deep .p-toggleswitch.p-disabled.p-toggleswitch-checked .p-toggleswitch-slider{background:color-mix(in srgb,var(--p-primary-color) 25%,var(--p-surface-300));border-color:color-mix(in srgb,var(--p-surface-200),var(--p-surface-500))}:host ::ng-deep .p-toggleswitch.p-disabled.p-toggleswitch-checked .p-toggleswitch-handle{background:var(--p-surface-50, #fff);box-shadow:0 0 0 1px color-mix(in srgb,var(--p-primary-color) 16%,transparent)}\n"] }]
|
|
106
106
|
}], ctorParameters: () => [], propDecorators: { toggle: [{
|
|
107
107
|
type: ViewChild,
|
|
108
108
|
args: ['toggle', { static: true }]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"masterteam-components-toggle-field.mjs","sources":["../../../../packages/masterteam/components/toggle-field/toggle-field.ts","../../../../packages/masterteam/components/toggle-field/toggle-field.html","../../../../packages/masterteam/components/toggle-field/masterteam-components-toggle-field.ts"],"sourcesContent":["import {\r\n Component,\r\n ViewChild,\r\n signal,\r\n input,\r\n output,\r\n inject,\r\n ChangeDetectionStrategy,\r\n computed,\r\n effect,\r\n contentChild,\r\n TemplateRef,\r\n} from '@angular/core';\r\nimport {\r\n ControlValueAccessor,\r\n FormsModule,\r\n NgControl,\r\n Validators,\r\n} from '@angular/forms';\r\nimport {\r\n ToggleSwitchModule,\r\n ToggleSwitch,\r\n ToggleSwitchChangeEvent,\r\n} from 'primeng/toggleswitch';\r\nimport { FieldValidation } from '@masterteam/components/field-validation';\r\nimport { isInvalid } from '@masterteam/components';\r\nimport { Card } from '@masterteam/components/card';\r\nimport { Avatar } from '@masterteam/components/avatar';\r\nimport { MTIcon } from '@masterteam/icons';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\n\r\nlet nextToggleFieldId = 0;\r\n\r\n@Component({\r\n selector: 'mt-toggle-field',\r\n standalone: true,\r\n imports: [\r\n FormsModule,\r\n ToggleSwitchModule,\r\n FieldValidation,\r\n Card,\r\n Avatar,\r\n NgTemplateOutlet,\r\n ],\r\n templateUrl: './toggle-field.html',\r\n styleUrls: ['./toggle-field.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n class: 'grid gap-1',\r\n },\r\n})\r\nexport class ToggleField implements ControlValueAccessor {\r\n @ViewChild('toggle', { static: true })\r\n toggle: ToggleSwitch;\r\n\r\n label = input<string>();\r\n inputId = input<string>();\r\n labelPosition = input<'top' | 'start' | 'end' | 'bottom'>('end');\r\n placeholder = input<string>();\r\n readonly = input<boolean>(false);\r\n pInputs = input<Partial<ToggleSwitch>>();\r\n required = input<boolean>(false);\r\n toggleShape = input<'toggle' | 'card'>('toggle');\r\n size = input<'small' | 'large'>('large');\r\n\r\n icon = input<MTIcon>();\r\n descriptionCard = input<string>();\r\n\r\n // Content child for custom bottom content in card shape\r\n toggleCardBottom = contentChild<TemplateRef<unknown>>('toggleCardBottom');\r\n\r\n onChange = output<ToggleSwitchChangeEvent>();\r\n\r\n public ngControl = inject(NgControl, { self: true });\r\n\r\n isInvalid = isInvalid;\r\n\r\n isVertical = computed(\r\n () => this.labelPosition() === 'top' || this.labelPosition() === 'bottom',\r\n );\r\n private readonly generatedInputId = `mt-toggle-field-${nextToggleFieldId++}`;\r\n readonly resolvedInputId = computed(() => {\r\n const explicitId = this.inputId();\r\n if (explicitId) return explicitId;\r\n\r\n const controlName = this.ngControl?.name;\r\n if (controlName) return controlName.toString();\r\n\r\n return this.generatedInputId;\r\n });\r\n\r\n requiredValidator = Validators.required;\r\n value = signal<boolean | null>(null);\r\n disabled = signal<boolean>(false);\r\n\r\n onTouched: () => void = () => {};\r\n onModelChange: (value: boolean | null) => void = () => {};\r\n\r\n constructor() {\r\n if (this.ngControl) {\r\n this.ngControl.valueAccessor = this;\r\n }\r\n\r\n // Effect to apply pInputs reactively when the pInputs signal changes\r\n effect(() => {\r\n const currentPInputs = this.pInputs();\r\n // Ensure checkbox ViewChild is initialized and pInputs has a value\r\n // @ViewChild with static: true makes 'checkbox' available during construction/ngOnInit\r\n if (this.toggle && currentPInputs) {\r\n this.applyInputsToCheckbox();\r\n }\r\n });\r\n\r\n // Effect to add required validator if required input is true\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 applyInputsToCheckbox() {\r\n const currentPInputs = this.pInputs();\r\n if (currentPInputs) {\r\n Object.assign(this.toggle, currentPInputs);\r\n }\r\n }\r\n\r\n onValueChange(value: boolean | null) {\r\n this.onModelChange(value);\r\n this.value.set(value);\r\n }\r\n\r\n writeValue(value: boolean | null) {\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 (toggleShape() === \"card\") {\r\n <mt-card\r\n class=\"cursor-pointer transition-all hover:border-primary\"\r\n [class.border-primary]=\"value()\"\r\n [class.opacity-60]=\"disabled() || readonly()\"\r\n >\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"flex flex-1 items-center gap-3\">\r\n @if (icon()) {\r\n <mt-avatar [icon]=\"icon()\" size=\"normal\" />\r\n }\r\n <div class=\"flex flex-col\">\r\n @if (label()) {\r\n <label\r\n [class.required]=\"\r\n ngControl?.control?.hasValidator(requiredValidator)\r\n \"\r\n [for]=\"resolvedInputId()\"\r\n class=\"cursor-pointer font-medium\"\r\n >{{ label() }}</label\r\n >\r\n }\r\n @if (descriptionCard()) {\r\n <span class=\"text-sm text-muted-color\">{{\r\n descriptionCard()\r\n }}</span>\r\n }\r\n </div>\r\n </div>\r\n <p-toggleswitch\r\n #checkbox\r\n [ngModel]=\"value()\"\r\n [size]=\"size()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (onChange)=\"onTouched(); onChange.emit($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [inputId]=\"resolvedInputId()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n class=\"leading-none\"\r\n ></p-toggleswitch>\r\n </div>\r\n @if (toggleCardBottom()) {\r\n <ng-container *ngTemplateOutlet=\"toggleCardBottom()!\"></ng-container>\r\n }\r\n </mt-card>\r\n} @else {\r\n <div\r\n class=\"flex gap-1\"\r\n [class.items-center]=\"!isVertical()\"\r\n [class.gap-2]=\"!isVertical()\"\r\n [class.flex-col]=\"isVertical()\"\r\n [class.flex-col-reverse]=\"labelPosition() === 'top'\"\r\n [class.flex-row-reverse]=\"labelPosition() === 'start'\"\r\n [class.justify-end]=\"labelPosition() === 'start'\"\r\n >\r\n <p-toggleswitch\r\n #checkbox\r\n [size]=\"size()\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (onChange)=\"onTouched(); onChange.emit($event)\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [inputId]=\"resolvedInputId()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n class=\"leading-none\"\r\n ></p-toggleswitch>\r\n @if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"resolvedInputId()\"\r\n >{{ label() }}</label\r\n >\r\n }\r\n </div>\r\n}\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-toggle-field.mjs","sources":["../../../../packages/masterteam/components/toggle-field/toggle-field.ts","../../../../packages/masterteam/components/toggle-field/toggle-field.html","../../../../packages/masterteam/components/toggle-field/masterteam-components-toggle-field.ts"],"sourcesContent":["import {\r\n Component,\r\n ViewChild,\r\n signal,\r\n input,\r\n output,\r\n inject,\r\n ChangeDetectionStrategy,\r\n computed,\r\n effect,\r\n contentChild,\r\n TemplateRef,\r\n} from '@angular/core';\r\nimport {\r\n ControlValueAccessor,\r\n FormsModule,\r\n NgControl,\r\n Validators,\r\n} from '@angular/forms';\r\nimport {\r\n ToggleSwitchModule,\r\n ToggleSwitch,\r\n ToggleSwitchChangeEvent,\r\n} from 'primeng/toggleswitch';\r\nimport { FieldValidation } from '@masterteam/components/field-validation';\nimport { isInvalid } from '@masterteam/components';\nimport { Card } from '@masterteam/components/card';\nimport { Avatar } from '@masterteam/components/avatar';\nimport { MTIcon } from '@masterteam/icons';\nimport { NgTemplateOutlet } from '@angular/common';\n\r\nlet nextToggleFieldId = 0;\r\n\r\n@Component({\r\n selector: 'mt-toggle-field',\r\n standalone: true,\r\n imports: [\r\n FormsModule,\r\n ToggleSwitchModule,\r\n FieldValidation,\n Card,\n Avatar,\n NgTemplateOutlet,\n ],\n templateUrl: './toggle-field.html',\r\n styleUrls: ['./toggle-field.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n host: {\r\n class: 'grid gap-1',\r\n },\r\n})\r\nexport class ToggleField implements ControlValueAccessor {\r\n @ViewChild('toggle', { static: true })\r\n toggle: ToggleSwitch;\r\n\r\n label = input<string>();\r\n inputId = input<string>();\n labelPosition = input<'top' | 'start' | 'end' | 'bottom'>('end');\n placeholder = input<string>();\n readonly = input<boolean>(false);\n pInputs = input<Partial<ToggleSwitch>>();\r\n required = input<boolean>(false);\r\n toggleShape = input<'toggle' | 'card'>('toggle');\r\n size = input<'small' | 'large'>('large');\r\n\n icon = input<MTIcon>();\n descriptionCard = input<string>();\n\n // Content child for custom bottom content in card shape\n toggleCardBottom = contentChild<TemplateRef<unknown>>('toggleCardBottom');\r\n\r\n onChange = output<ToggleSwitchChangeEvent>();\r\n\r\n public ngControl = inject(NgControl, { self: true });\r\n\r\n isInvalid = isInvalid;\r\n\r\n isVertical = computed(\r\n () => this.labelPosition() === 'top' || this.labelPosition() === 'bottom',\r\n );\r\n private readonly generatedInputId = `mt-toggle-field-${nextToggleFieldId++}`;\r\n readonly resolvedInputId = computed(() => {\r\n const explicitId = this.inputId();\r\n if (explicitId) return explicitId;\r\n\r\n const controlName = this.ngControl?.name;\r\n if (controlName) return controlName.toString();\r\n\r\n return this.generatedInputId;\r\n });\r\n\r\n requiredValidator = Validators.required;\r\n value = signal<boolean | null>(null);\r\n disabled = signal<boolean>(false);\r\n\r\n onTouched: () => void = () => {};\r\n onModelChange: (value: boolean | null) => void = () => {};\r\n\r\n constructor() {\r\n if (this.ngControl) {\r\n this.ngControl.valueAccessor = this;\r\n }\r\n\r\n // Effect to apply pInputs reactively when the pInputs signal changes\r\n effect(() => {\r\n const currentPInputs = this.pInputs();\r\n // Ensure checkbox ViewChild is initialized and pInputs has a value\r\n // @ViewChild with static: true makes 'checkbox' available during construction/ngOnInit\r\n if (this.toggle && currentPInputs) {\r\n this.applyInputsToCheckbox();\r\n }\r\n });\r\n\r\n // Effect to add required validator if required input is true\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 applyInputsToCheckbox() {\r\n const currentPInputs = this.pInputs();\r\n if (currentPInputs) {\r\n Object.assign(this.toggle, currentPInputs);\r\n }\r\n }\r\n\r\n onValueChange(value: boolean | null) {\r\n this.onModelChange(value);\r\n this.value.set(value);\r\n }\r\n\r\n writeValue(value: boolean | null) {\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 (toggleShape() === \"card\") {\r\n <mt-card\r\n class=\"cursor-pointer transition-all hover:border-primary\"\r\n [class.border-primary]=\"value()\"\r\n [class.opacity-60]=\"disabled() || readonly()\"\r\n >\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"flex flex-1 items-center gap-3\">\r\n @if (icon()) {\r\n <mt-avatar [icon]=\"icon()\" size=\"normal\" />\r\n }\r\n <div class=\"flex flex-col\">\r\n @if (label()) {\r\n <label\r\n [class.required]=\"\r\n ngControl?.control?.hasValidator(requiredValidator)\r\n \"\r\n [for]=\"resolvedInputId()\"\r\n class=\"cursor-pointer font-medium\"\r\n >{{ label() }}</label\r\n >\r\n }\r\n @if (descriptionCard()) {\n <span class=\"text-sm text-muted-color\">{{\n descriptionCard()\n }}</span>\n }\n </div>\r\n </div>\r\n <p-toggleswitch\r\n #checkbox\r\n [ngModel]=\"value()\"\r\n [size]=\"size()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (onChange)=\"onTouched(); onChange.emit($event)\"\r\n [disabled]=\"disabled() || readonly()\"\r\n [inputId]=\"resolvedInputId()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n class=\"leading-none\"\r\n ></p-toggleswitch>\r\n </div>\r\n @if (toggleCardBottom()) {\r\n <ng-container *ngTemplateOutlet=\"toggleCardBottom()!\"></ng-container>\r\n }\r\n </mt-card>\r\n} @else {\r\n <div\r\n class=\"flex gap-1\"\r\n [class.items-center]=\"!isVertical()\"\r\n [class.gap-2]=\"!isVertical()\"\r\n [class.flex-col]=\"isVertical()\"\r\n [class.flex-col-reverse]=\"labelPosition() === 'top'\"\r\n [class.flex-row-reverse]=\"labelPosition() === 'start'\"\r\n [class.justify-end]=\"labelPosition() === 'start'\"\r\n >\r\n <p-toggleswitch\r\n #checkbox\r\n [size]=\"size()\"\r\n [ngModel]=\"value()\"\r\n (ngModelChange)=\"onValueChange($event)\"\r\n (onChange)=\"onTouched(); onChange.emit($event)\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [inputId]=\"resolvedInputId()\"\r\n [invalid]=\"isInvalid(ngControl?.control)\"\r\n class=\"leading-none\"\r\n ></p-toggleswitch>\r\n @if (label()) {\n <label\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n [for]=\"resolvedInputId()\"\n >{{ label() }}</label\n >\n }\n </div>\n}\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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"}
|
|
@@ -69,8 +69,7 @@ class UserSearchField {
|
|
|
69
69
|
const autocomplete = this.autocomplete();
|
|
70
70
|
if (!autocomplete)
|
|
71
71
|
return;
|
|
72
|
-
const inputEl = autocomplete
|
|
73
|
-
autocomplete.inputEL?.nativeElement;
|
|
72
|
+
const inputEl = this.getInputElement(autocomplete);
|
|
74
73
|
const typed = (inputEl?.value ?? '').trim();
|
|
75
74
|
if (!typed) {
|
|
76
75
|
this.filteredUsers.set([]);
|
|
@@ -80,6 +79,32 @@ class UserSearchField {
|
|
|
80
79
|
autocomplete.show();
|
|
81
80
|
}
|
|
82
81
|
}
|
|
82
|
+
onBlur() {
|
|
83
|
+
this.onTouched();
|
|
84
|
+
const autocomplete = this.autocomplete();
|
|
85
|
+
if (!autocomplete || this.filteredUsers().length > 0)
|
|
86
|
+
return;
|
|
87
|
+
const inputEl = this.getInputElement(autocomplete);
|
|
88
|
+
const typed = (inputEl?.value ?? '').trim();
|
|
89
|
+
if (!typed)
|
|
90
|
+
return;
|
|
91
|
+
if (!this.isMultiple()) {
|
|
92
|
+
const value = this.value();
|
|
93
|
+
const selectedLabel = Array.isArray(value)
|
|
94
|
+
? value[0]?.displayName
|
|
95
|
+
: value?.displayName;
|
|
96
|
+
if (selectedLabel?.trim() === typed)
|
|
97
|
+
return;
|
|
98
|
+
this.value.set(null);
|
|
99
|
+
this.onModelChange(null);
|
|
100
|
+
}
|
|
101
|
+
if (inputEl) {
|
|
102
|
+
inputEl.value = '';
|
|
103
|
+
}
|
|
104
|
+
this.filteredUsers.set([]);
|
|
105
|
+
this.loading.set(false);
|
|
106
|
+
autocomplete.hide();
|
|
107
|
+
}
|
|
83
108
|
onSelect(event) {
|
|
84
109
|
const selectedUser = event.value;
|
|
85
110
|
if (this.isMultiple()) {
|
|
@@ -166,8 +191,13 @@ class UserSearchField {
|
|
|
166
191
|
},
|
|
167
192
|
});
|
|
168
193
|
}
|
|
194
|
+
getInputElement(autocomplete) {
|
|
195
|
+
return (autocomplete.multiInputEl?.nativeElement ??
|
|
196
|
+
autocomplete.inputEL?.nativeElement ??
|
|
197
|
+
null);
|
|
198
|
+
}
|
|
169
199
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UserSearchField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
170
|
-
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()) {\
|
|
200
|
+
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()) {\n <label\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n [for]=\"ngControl?.name || label()\"\n >\n {{ label() }}\n </label>\n}\n<div class=\"relative\">\n <p-inputgroup>\n <p-autoComplete\n #autocomplete=\"\"\n [suggestions]=\"filteredUsers()\"\n (completeMethod)=\"search($event)\"\n (onSelect)=\"onSelect($event)\"\n (onUnselect)=\"onUnselect($event)\"\n (onClear)=\"onClear()\"\n (onFocus)=\"onFocus()\"\n (onBlur)=\"onBlur()\"\n [ngModel]=\"isMultiple() ? value() : value()?.['displayName']\"\n [disabled]=\"disabled() || readonly()\"\n [id]=\"ngControl?.name || label()\"\n [invalid]=\"isInvalid(ngControl?.control)\"\n [placeholder]=\"'components.userSearchField.search' | transloco\"\n [multiple]=\"isMultiple()\"\n [optionLabel]=\"'displayName'\"\n class=\"w-full\"\n appendTo=\"body\"\n styleClass=\"w-full\"\n [dropdown]=\"false\"\n [size]=\"size()\"\n >\n <ng-template let-user pTemplate=\"item\">\n <div class=\"flex items-center gap-2\">\n <mt-avatar size=\"small\" icon=\"user.user-01\" />\n <div class=\"flex align-items-center gap-3\">\n <span class=\"font-medium\">{{ user.displayName }}</span>\n <medium class=\"text-gray-500\">{{ \"@\" + user.userName }}</medium>\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-template let-user #pTemplate=\"selecteditem\">\n <div class=\"flex items-center gap-2\">\n <mt-avatar size=\"small\" icon=\"user.user-01\" />\n <div class=\"flex align-items-center gap-3\">\n <span class=\"font-medium\">{{ user.displayName }}</span>\n <medium class=\"text-gray-500\">{{ \"@\" + user.userName }}</medium>\n </div>\n </div>\n </ng-template> -->\n </p-autoComplete>\n @if (hint()) {\n <p-inputgroup-addon [mtTooltip]=\"hint()\" tooltipPosition=\"top\">\n <mt-icon icon=\"general.help-circle\" />\n </p-inputgroup-addon>\n } @else {\n <p-inputgroup-addon tooltipPosition=\"top\">\n <mt-icon icon=\"user.user-03\" />\n </p-inputgroup-addon>\n }\n </p-inputgroup>\n\n @if (loading()) {\n <mt-icon\n icon=\"general.loading-01\"\n class=\"animate-spin absolute right-3 bg-white top-1/2 -translate-y-1/2\"\n />\n }\n</div>\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\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"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
171
201
|
}
|
|
172
202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UserSearchField, decorators: [{
|
|
173
203
|
type: Component,
|
|
@@ -183,7 +213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
183
213
|
TranslocoPipe,
|
|
184
214
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
185
215
|
class: 'grid gap-1',
|
|
186
|
-
}, template: "@if (label()) {\
|
|
216
|
+
}, template: "@if (label()) {\n <label\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n [for]=\"ngControl?.name || label()\"\n >\n {{ label() }}\n </label>\n}\n<div class=\"relative\">\n <p-inputgroup>\n <p-autoComplete\n #autocomplete=\"\"\n [suggestions]=\"filteredUsers()\"\n (completeMethod)=\"search($event)\"\n (onSelect)=\"onSelect($event)\"\n (onUnselect)=\"onUnselect($event)\"\n (onClear)=\"onClear()\"\n (onFocus)=\"onFocus()\"\n (onBlur)=\"onBlur()\"\n [ngModel]=\"isMultiple() ? value() : value()?.['displayName']\"\n [disabled]=\"disabled() || readonly()\"\n [id]=\"ngControl?.name || label()\"\n [invalid]=\"isInvalid(ngControl?.control)\"\n [placeholder]=\"'components.userSearchField.search' | transloco\"\n [multiple]=\"isMultiple()\"\n [optionLabel]=\"'displayName'\"\n class=\"w-full\"\n appendTo=\"body\"\n styleClass=\"w-full\"\n [dropdown]=\"false\"\n [size]=\"size()\"\n >\n <ng-template let-user pTemplate=\"item\">\n <div class=\"flex items-center gap-2\">\n <mt-avatar size=\"small\" icon=\"user.user-01\" />\n <div class=\"flex align-items-center gap-3\">\n <span class=\"font-medium\">{{ user.displayName }}</span>\n <medium class=\"text-gray-500\">{{ \"@\" + user.userName }}</medium>\n </div>\n </div>\n </ng-template>\n\n <!-- <ng-template let-user #pTemplate=\"selecteditem\">\n <div class=\"flex items-center gap-2\">\n <mt-avatar size=\"small\" icon=\"user.user-01\" />\n <div class=\"flex align-items-center gap-3\">\n <span class=\"font-medium\">{{ user.displayName }}</span>\n <medium class=\"text-gray-500\">{{ \"@\" + user.userName }}</medium>\n </div>\n </div>\n </ng-template> -->\n </p-autoComplete>\n @if (hint()) {\n <p-inputgroup-addon [mtTooltip]=\"hint()\" tooltipPosition=\"top\">\n <mt-icon icon=\"general.help-circle\" />\n </p-inputgroup-addon>\n } @else {\n <p-inputgroup-addon tooltipPosition=\"top\">\n <mt-icon icon=\"user.user-03\" />\n </p-inputgroup-addon>\n }\n </p-inputgroup>\n\n @if (loading()) {\n <mt-icon\n icon=\"general.loading-01\"\n class=\"animate-spin absolute right-3 bg-white top-1/2 -translate-y-1/2\"\n />\n }\n</div>\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n", styles: [":host ::ng-deep .p-autocomplete-input-multiple{border-start-end-radius:0;border-end-end-radius:0}\n"] }]
|
|
187
217
|
}], 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: [{
|
|
188
218
|
type: HostBinding,
|
|
189
219
|
args: ['class']
|