@sdcorejs/angular 21.1.6 → 21.2.0

package/fesm2022/sdcorejs-angular-forms-switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sdcorejs-angular-forms-switch.mjs","sources":["../../../projects/sdcorejs-angular/forms/switch/src/switch.component.ts","../../../projects/sdcorejs-angular/forms/switch/src/switch.component.html","../../../projects/sdcorejs-angular/forms/switch/sdcorejs-angular-forms-switch.ts"],"sourcesContent":["import { Utilities } from '@sdcorejs/utils/fns';\n\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  computed,\n  inject,\n  input,\n  model,\n  OnDestroy,\n  OnInit,\n  output,\n} from '@angular/core';\nimport { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSlideToggleModule } from '@angular/material/slide-toggle';\nimport { SdLabel } from '@sdcorejs/angular/forms/label';\nimport { TranslatePipe } from '@sdcorejs/angular/i18n';\nimport {\n  SdFormControl,\n  sdFormControlState,\n  SdViewed,\n  SdViewedInput,\n  sdViewedInline,\n  sdViewedTransform,\n  ɵsdFormControlConnector,\n  ɵSdFormControlParent,\n} from '@sdcorejs/angular/forms/models';\nimport { sdIsEmpty, sdSerializeDataValue } from '@sdcorejs/angular/utilities/data-state';\nimport { Color } from '@sdcorejs/utils/models';\nimport { Subscription } from 'rxjs';\n\n@Component({\n  selector: 'sd-switch',\n  templateUrl: './switch.component.html',\n  styleUrl: './switch.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    // why: dùng host class .sd-c-<x> (thay vì data-attr) để reactivity host-binding với\n    // signal chắc chắn áp dụng + có default fallback `sd-c-primary` khi color() là 'primary'.\n    // Test cũ assert data-sd-color đã được thay bằng class assert tương ứng.\n    '[class.sd-c-primary]': \"color() === 'primary'\",\n    '[class.sd-c-secondary]': \"color() === 'secondary'\",\n    '[class.sd-c-info]': \"color() === 'info'\",\n    '[class.sd-c-success]': \"color() === 'success'\",\n    '[class.sd-c-warning]': \"color() === 'warning'\",\n    '[class.sd-c-error]': \"color() === 'error'\",\n  },\n  imports: [FormsModule, ReactiveFormsModule, MatSlideToggleModule, MatFormFieldModule, SdLabel, TranslatePipe],\n})\nexport class SdSwitch implements OnInit, OnDestroy {\n  readonly #ref = inject(ChangeDetectorRef);\n\n  id = `I${Utilities.generateUuid()}`;\n  readonly #defaultName = Utilities.generateUuid();\n  formControl = new SdFormControl();\n  #subscription = new Subscription();\n\n  // Inputs — accept null|undefined at boundary, transform to canonical\n  readonly autoIdInput = input<string | undefined, string | null | undefined>(undefined, {\n    alias: 'autoId',\n    transform: (v): string | undefined => v ?? undefined,\n  });\n  readonly name = input<string | undefined, string | null | undefined>(undefined, {\n    transform: (v): string | undefined => v ?? undefined,\n  });\n  readonly form = input<ɵSdFormControlParent>(undefined);\n  readonly label = input<string | undefined, string | null | undefined>(undefined, {\n    transform: (v): string | undefined => v ?? undefined,\n  });\n  // why: legacy callers pass `null` to mean \"fallback to primary\" — keep that contract\n  readonly color = input<Color, Color | null | undefined>('primary', {\n    transform: (v): Color => v || 'primary',\n  });\n  readonly disabled = input(false, { transform: booleanAttribute });\n  /** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */\n  readonly viewed = input<SdViewed, SdViewedInput>(false, { transform: sdViewedTransform });\n\n  // why: tri-state viewed — `'inline'` keeps the switch interactive; disabled `'inline'` → static.\n  readonly #viewedState = sdViewedInline(this.viewed, undefined, this.disabled);\n  /** `true` when the static read-only view should render. */\n  readonly isViewed = this.#viewedState.isViewed;\n  readonly hideInlineError = input(false, { transform: booleanAttribute });\n  readonly required = input(false, { transform: booleanAttribute });\n\n  // Two-way model\n  readonly model = model<boolean | null | undefined>(false);\n\n  // Outputs\n  readonly sdChange = output<unknown>();\n\n  // Computed (template bindings)\n  readonly autoId = computed(() => (this.autoIdInput() ? `forms-switch-${this.autoIdInput()}` : undefined));\n  readonly #state = sdFormControlState(computed(() => this.formControl));\n  readonly dataDisabled = computed(() => (this.#state().disabled ? 'true' : 'false'));\n  readonly dataEmpty = computed(() => (sdIsEmpty(this.#state().value) ? 'true' : 'false'));\n  readonly dataValue = computed(() => sdSerializeDataValue(this.#state().value));\n  readonly dataRequired = computed(() => (this.required() ? 'true' : 'false'));\n\n  readonly #formConnector = ɵsdFormControlConnector<boolean | null | undefined, boolean | null | undefined>({\n    form: this.form,\n    name: computed(() => this.name() || this.#defaultName),\n    control: computed(() => this.formControl),\n    model: this.model,\n    writeModel: value => {\n      this.model.set(value);\n      this.sdChange.emit(value);\n    },\n    validators: computed(() => (this.required() ? Validators.required : null)),\n    disabled: this.disabled,\n    controlEquals: (controlValue, modelValue) => (controlValue === null && modelValue === false) || Object.is(controlValue, modelValue),\n  });\n\n  ngOnInit() {\n    this.#subscription.add(\n      this.formControl.sdChanges.subscribe(() => {\n        this.#ref.markForCheck();\n      })\n    );\n  }\n\n  ngOnDestroy() {\n    this.#subscription.unsubscribe();\n  }\n}\n","@if (isViewed()) {\n  @if (label()) {\n    <div class=\"T14R text-secondary\">{{ label() }}</div>\n  }\n  <div class=\"T14M\">{{ (model() ? 'core.form.switch.on' : 'core.form.switch.off') | translate }}</div>\n} @else {\n  <mat-slide-toggle\n    [formControl]=\"formControl\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-disabled]=\"dataDisabled()\"\n    [attr.data-empty]=\"dataEmpty()\"\n    [attr.data-value]=\"dataValue()\"\n    [attr.data-required]=\"dataRequired()\">\n    <sd-label [label]=\"label()\" [required]=\"required()\"></sd-label>\n  </mat-slide-toggle>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ɵsdFormControlConnector"],"mappings":"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"}
+{"version":3,"file":"sdcorejs-angular-forms-switch.mjs","sources":["../../../projects/sdcorejs-angular/forms/switch/src/switch.component.ts","../../../projects/sdcorejs-angular/forms/switch/src/switch.component.html","../../../projects/sdcorejs-angular/forms/switch/sdcorejs-angular-forms-switch.ts"],"sourcesContent":["import { Utilities } from '@sdcorejs/utils/fns';\n\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  computed,\n  inject,\n  input,\n  model,\n  OnDestroy,\n  OnInit,\n  output,\n} from '@angular/core';\nimport { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSlideToggleModule } from '@angular/material/slide-toggle';\nimport { SdLabel } from '@sdcorejs/angular/forms/label';\nimport { I18nService, SdTranslatePipe } from '@sdcorejs/angular/i18n';\nimport {\n  SdFormControl,\n  sdFormControlState,\n  SdViewed,\n  SdViewedInput,\n  sdViewedInline,\n  sdViewedTransform,\n  ɵsdFormControlConnector,\n  ɵSdFormControlParent,\n} from '@sdcorejs/angular/forms/models';\nimport { sdIsEmpty, sdSerializeDataValue } from '@sdcorejs/angular/utilities/data-state';\nimport { Color } from '@sdcorejs/utils/models';\nimport { Subscription } from 'rxjs';\n\n@Component({\n  selector: 'sd-switch',\n  templateUrl: './switch.component.html',\n  styleUrl: './switch.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    // why: dùng host class .sd-c-<x> (thay vì data-attr) để reactivity host-binding với\n    // signal chắc chắn áp dụng + có default fallback `sd-c-primary` khi color() là 'primary'.\n    // Test cũ assert data-sd-color đã được thay bằng class assert tương ứng.\n    '[class.sd-c-primary]': \"color() === 'primary'\",\n    '[class.sd-c-secondary]': \"color() === 'secondary'\",\n    '[class.sd-c-info]': \"color() === 'info'\",\n    '[class.sd-c-success]': \"color() === 'success'\",\n    '[class.sd-c-warning]': \"color() === 'warning'\",\n    '[class.sd-c-error]': \"color() === 'error'\",\n  },\n  imports: [FormsModule, ReactiveFormsModule, MatSlideToggleModule, MatFormFieldModule, SdLabel, SdTranslatePipe],\n})\nexport class SdSwitch implements OnInit, OnDestroy {\n  readonly #ref = inject(ChangeDetectorRef);\n  readonly #i18n = inject(I18nService);\n\n  id = `I${Utilities.generateUuid()}`;\n  readonly #defaultName = Utilities.generateUuid();\n  formControl = new SdFormControl();\n  #subscription = new Subscription();\n\n  // Inputs — accept null|undefined at boundary, transform to canonical\n  readonly autoIdInput = input<string | undefined, string | null | undefined>(undefined, {\n    alias: 'autoId',\n    transform: (v): string | undefined => v ?? undefined,\n  });\n  readonly name = input<string | undefined, string | null | undefined>(undefined, {\n    transform: (v): string | undefined => v ?? undefined,\n  });\n  readonly form = input<ɵSdFormControlParent>(undefined);\n  readonly label = input<string | undefined, string | null | undefined>(undefined, {\n    transform: (v): string | undefined => v ?? undefined,\n  });\n  // why: legacy callers pass `null` to mean \"fallback to primary\" — keep that contract\n  readonly color = input<Color, Color | null | undefined>('primary', {\n    transform: (v): Color => v || 'primary',\n  });\n  readonly disabled = input(false, { transform: booleanAttribute });\n  /** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */\n  readonly viewed = input<SdViewed, SdViewedInput>(false, { transform: sdViewedTransform });\n\n  // why: tri-state viewed — `'inline'` keeps the switch interactive; disabled `'inline'` → static.\n  readonly #viewedState = sdViewedInline(this.viewed, undefined, this.disabled);\n  /** `true` when the static read-only view should render. */\n  readonly isViewed = this.#viewedState.isViewed;\n  readonly hideInlineError = input(false, { transform: booleanAttribute });\n  readonly required = input(false, { transform: booleanAttribute });\n\n  // Two-way model\n  readonly model = model<boolean | null | undefined>(false);\n\n  // Outputs\n  readonly sdChange = output<unknown>();\n\n  // Computed (template bindings)\n  readonly autoId = computed(() => (this.autoIdInput() ? `forms-switch-${this.autoIdInput()}` : undefined));\n  readonly #state = sdFormControlState(computed(() => this.formControl));\n  readonly dataDisabled = computed(() => (this.#state().disabled ? 'true' : 'false'));\n  readonly dataEmpty = computed(() => (sdIsEmpty(this.#state().value) ? 'true' : 'false'));\n  readonly dataValue = computed(() => sdSerializeDataValue(this.#state().value));\n  readonly dataRequired = computed(() => (this.required() ? 'true' : 'false'));\n\n  // why: `[required]` gắn Validators.required nhưng template TRƯỚC ĐÂY không render bất kỳ\n  // message nào, nên switch bắt buộc để OFF chặn submit mà người dùng không thấy lý do —\n  // đúng loại bug \"error invalid nhưng message ẩn\". Dùng lại key `core.form.input.required`\n  // ('Vui lòng nhập thông tin') vì catalog i18n chưa có key riêng cho switch.\n  readonly errorMessage = computed<string | undefined>(() => {\n    void this.#state();\n    return this.formControl.errors?.['required'] ? this.#i18n.t('core.form.input.required') : undefined;\n  });\n\n  readonly #formConnector = ɵsdFormControlConnector<boolean | null | undefined, boolean | null | undefined>({\n    form: this.form,\n    name: computed(() => this.name() || this.#defaultName),\n    control: computed(() => this.formControl),\n    model: this.model,\n    writeModel: value => {\n      this.model.set(value);\n      this.sdChange.emit(value);\n    },\n    validators: computed(() => (this.required() ? Validators.required : null)),\n    disabled: this.disabled,\n    validationError: this.errorMessage,\n    controlEquals: (controlValue, modelValue) => (controlValue === null && modelValue === false) || Object.is(controlValue, modelValue),\n  });\n\n  /** Shared reactive form policy — `validationError` is already interaction-gated (touched/dirty). */\n  readonly connectorState = this.#formConnector.state;\n  /** Message to render inline; `undefined` while untouched, or when `hideInlineError` is set. */\n  readonly visibleErrorMessage = computed(() => (this.hideInlineError() ? undefined : this.connectorState().validationError));\n\n  ngOnInit() {\n    this.#subscription.add(\n      this.formControl.sdChanges.subscribe(() => {\n        this.#ref.markForCheck();\n      })\n    );\n  }\n\n  ngOnDestroy() {\n    this.#subscription.unsubscribe();\n  }\n}\n","@if (isViewed()) {\n  @if (label()) {\n    <div class=\"T14R text-secondary\">{{ label() }}</div>\n  }\n  <div class=\"T14M\">{{ (model() ? 'core.form.switch.on' : 'core.form.switch.off') | sdTranslate }}</div>\n} @else {\n  <mat-slide-toggle\n    [formControl]=\"formControl\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-disabled]=\"dataDisabled()\"\n    [attr.data-empty]=\"dataEmpty()\"\n    [attr.data-value]=\"dataValue()\"\n    [attr.data-required]=\"dataRequired()\">\n    <sd-label [label]=\"label()\" [required]=\"required()\"></sd-label>\n  </mat-slide-toggle>\n  @let _errorMessage = visibleErrorMessage();\n  @if (_errorMessage) {\n    <mat-error>{{ _errorMessage }}</mat-error>\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ɵsdFormControlConnector"],"mappings":"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"}

package/fesm2022/sdcorejs-angular-forms-textarea.mjs

@@ -1,8 +1,8 @@
-import { Utilities } from '@sdcorejs/utils/fns';
+import { Utilities, NumberUtilities } from '@sdcorejs/utils/fns';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { viewChild, contentChild, inject, ChangeDetectorRef, input, computed, booleanAttribute, model, output, effect, untracked, Component } from '@angular/core';
+import { viewChild, contentChild, inject, ChangeDetectorRef, input, computed, booleanAttribute, model, output, effect, untracked, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { NgForm, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i3 from '@angular/material/form-field';
@@ -12,17 +12,19 @@ import { MatInputModule } from '@angular/material/input';
 import * as i5 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { SdViewDefDirective, SdLabelDefDirective, SdSuffixDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SD_FORM_CONFIGURATION, sdFormControlState, sdViewedTransform, sdViewedInline, SdFormControl, ɵsdFormControlConnector as _sdFormControlConnector, SdInlineErrorValidator } from '@sdcorejs/angular/forms/models';
+import { SD_FORM_CONFIGURATION, ɵsdTimerScope as _sdTimerScope, sdFormControlState, sdViewedTransform, sdViewedInline, SdFormControl, SdInlineErrorValidator, HandleSdCustomValidator, ɵsdFormControlConnector as _sdFormControlConnector } from '@sdcorejs/angular/forms/models';
 import { sdIsEmpty, sdSerializeDataValue } from '@sdcorejs/angular/utilities/data-state';
-import { NumberUtilities } from '@sdcorejs/angular/utilities/extensions';
 import { Subscription } from 'rxjs';
 import { SdLabel } from '@sdcorejs/angular/forms/label';
-import { I18nService, TranslatePipe } from '@sdcorejs/angular/i18n';
+import { I18nService, SdTranslatePipe } from '@sdcorejs/angular/i18n';
 import { SdEmptyPipe } from '@sdcorejs/angular/pipes';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
 
 class SdTextarea {
     id = `I${Utilities.generateUuid()}`;
+    /** why: id ổn định của <mat-error> để control trỏ `aria-describedby` sang — thông báo lỗi
+     *  phải đọc được từ chính control, không chỉ hiện ra màn hình. */
+    errorId = `${this.id}-error`;
     // ==========================================
     // 1. SIGNAL QUERIES
     // ==========================================
@@ -36,6 +38,9 @@ class SdTextarea {
     #ref = inject(ChangeDetectorRef);
     #formConfiguration = inject(SD_FORM_CONFIGURATION, { optional: true });
     #i18n = inject(I18nService);
+    // why: focus() hoãn 100ms; handle phải bị clear khi destroy, nếu không timer vẫn chạy
+    // trên view đã tháo.
+    #timers = _sdTimerScope();
     // ==========================================
     // 3. SIGNAL INPUTS & MODEL
     // ==========================================
@@ -134,10 +139,36 @@ class SdTextarea {
     formControl = new SdFormControl();
     #subscription = new Subscription();
     isFocused = false;
+    #validators = computed(() => {
+        const validators = [];
+        const maxLen = this.maxlength();
+        const pattern = this.pattern();
+        if (maxLen != null)
+            validators.push(Validators.maxLength(maxLen));
+        if (pattern)
+            validators.push(Validators.pattern(pattern));
+        if (this.inlineError())
+            validators.push(SdInlineErrorValidator);
+        return validators;
+    }, ...(ngDevMode ? [{ debugName: "#validators" }] : /* istanbul ignore next */ []));
+    #asyncValidators = computed(() => {
+        const validator = this.validator();
+        // why: dùng helper dùng chung thay vì bản copy nội bộ. Bản copy cũ coerce
+        // `c.value || null` nên số 0 hợp lệ bị nuốt thành null trước khi tới validator
+        // của consumer; HandleSdCustomValidator giữ nguyên 0 (`c.value === 0 ? c.value : ...`).
+        return validator ? [HandleSdCustomValidator(validator)] : [];
+    }, ...(ngDevMode ? [{ debugName: "#asyncValidators" }] : /* istanbul ignore next */ []));
+    // why: validator đi qua connector (addValidators/removeValidators — CỘNG DỒN) thay cho
+    // clearValidators()+setValidators() cũ. `formControl` là public: consumer hoàn toàn có
+    // thể tự gắn validator lên nó, và block cũ xoá sạch mọi validator đó mỗi lần bất kỳ
+    // input nào (required/maxlength/pattern/validator/inlineError) đổi.
     #formConnector = _sdFormControlConnector({
         form: this.form,
         name: this.name,
         control: computed(() => this.formControl),
+        validators: this.#validators,
+        asyncValidators: this.#asyncValidators,
+        required: this.required,
     });
     constructor() {
         // EFFECT 1: Sync model thay đổi từ bên ngoài
@@ -159,25 +190,21 @@ class SdTextarea {
             else
                 this.formControl.enable({ emitEvent: false });
         });
-        // EFFECT 3: Update Validators
-        effect(() => {
-            const req = this.required();
-            const maxLen = this.maxlength();
-            const pat = this.pattern();
-            const val = this.validator();
-            const inl = this.inlineError();
-            untracked(() => this.#updateValidator(req, maxLen, pat, val, inl));
+        // EFFECT 3 (cũ) đã bỏ: validator giờ do ɵsdFormControlConnector quản lý cộng dồn
+        // qua #validators / #asyncValidators / required ở trên.
+        // why: đo scrollHeight phải chờ textarea render xong — trước đây là
+        // `ngAfterViewInit` + `setTimeout(..., 0)` mà không giữ handle, nên component bị tháo
+        // ngay sau init (route đổi nhanh) vẫn chạm nativeElement đã detach. `afterNextRender`
+        // diễn đạt đúng ý định "sau lần render kế tiếp" VÀ tự huỷ theo injector.
+        afterNextRender(() => {
+            if (this.autoHeight())
+                this.#adjustHeight();
         });
     }
     ngOnInit() {
         this.#subscription.add(this.formControl.sdChanges.subscribe(() => this.#ref.markForCheck()));
         this.#subscription.add(this.formControl.valueChanges.subscribe(this.#onChange));
     }
-    ngAfterViewInit() {
-        if (this.autoHeight()) {
-            setTimeout(() => this.#adjustHeight(), 0);
-        }
-    }
     ngOnDestroy() {
         this.#subscription.unsubscribe();
     }
@@ -212,9 +239,8 @@ class SdTextarea {
     };
     focus = () => {
         this.isFocused = true;
-        setTimeout(() => {
-            this.textareaRef()?.nativeElement?.focus();
-        }, 100);
+        // why: vẫn 100ms như cũ — chỉ scope handle theo DestroyRef.
+        this.#timers.schedule(() => this.textareaRef()?.nativeElement?.focus(), 100);
     };
     #onChange = (value) => {
         if (this.autoHeight()) {
@@ -223,25 +249,6 @@ class SdTextarea {
         this.valueModel.set(value);
         this.sdChange.emit(value);
     };
-    #updateValidator = (req, maxLen, pat, val, inl) => {
-        this.formControl.clearValidators();
-        this.formControl.clearAsyncValidators();
-        const validators = [];
-        const asyncValidators = [];
-        if (req)
-            validators.push(Validators.required);
-        if (maxLen != null)
-            validators.push(Validators.maxLength(maxLen));
-        if (pat)
-            validators.push(Validators.pattern(pat));
-        if (val)
-            asyncValidators.push(this.#customValidator(val));
-        if (inl)
-            validators.push(SdInlineErrorValidator);
-        this.formControl.setValidators(validators.length ? validators : null);
-        this.formControl.setAsyncValidators(asyncValidators.length ? asyncValidators : null);
-        this.formControl.updateValueAndValidity({ emitEvent: false });
-    };
     getCurrentLength = () => {
         return (this.formControl.value ?? '').toString().length;
     };
@@ -249,30 +256,12 @@ class SdTextarea {
         const max = this.maxlength();
         return !!(max && max > 0 && this.getCurrentLength() > max);
     };
-    #customValidator = (func) => {
-        return async (c) => {
-            const value = c.value || null;
-            if (func && typeof func === 'function') {
-                const result = func(value);
-                if (result instanceof Promise) {
-                    const message = await result;
-                    if (message)
-                        return { customValidator: message };
-                    return null;
-                }
-                if (result)
-                    return { customValidator: result };
-                return null;
-            }
-            return null;
-        };
-    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdTextarea, isStandalone: true, selector: "sd-textarea", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, hideInlineError: { classPropertyName: "hideInlineError", publicName: "hideInlineError", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, autoHeight: { classPropertyName: "autoHeight", publicName: "autoHeight", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange" }, host: { properties: { "class.sd-has-label": "!!label()", "class.sd-viewed": "isViewed() || isInline()" } }, queries: [{ propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }, { propertyName: "sdLabelDef", first: true, predicate: SdLabelDefDirective, descendants: true, isSignal: true }, { propertyName: "sdSuffixDef", first: true, predicate: SdSuffixDefDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _label = label();\n@let _appearance = appearance();\n@let _hideInlineError = hideInlineError();\n@let _errorMessage = errorMessage();\n@let _sdLabelDef = sdLabelDef();\n@let _helperText = helperText();\n@let _required = required();\n@let _maxLength = maxlength();\n@let _isInline = isInline();\n\n@if (isViewed()) {\n  @if (_sdLabelDef?.templateRef) {\n    <ng-container *ngTemplateOutlet=\"_sdLabelDef!.templateRef\"> </ng-container>\n  } @else if (_label) {\n    <div class=\"T14R text-secondary\">{{ _label }}</div>\n  }\n  <div class=\"T14M\">{{ formControl.value | sdEmpty }}</div>\n} @else {\n  @if (!_appearance && _sdLabelDef?.templateRef) {\n    <ng-container *ngTemplateOutlet=\"_sdLabelDef!.templateRef\"> </ng-container>\n  }\n  @if (!_appearance && _label && !_sdLabelDef?.templateRef) {\n    <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\n  }\n\n  <div\n    class=\"d-flex align-items-center sd-textarea-container\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\n    <div class=\"sd-textarea-field-wrap\" [class.sd-inline-textarea]=\"_isInline\">\n      <mat-form-field\n        [class.sd-md]=\"size() === 'md'\"\n        [class.sd-sm]=\"size() === 'sm'\"\n        [class.hide-inline-error]=\"_hideInlineError\"\n        [appearance]=\"_appearance!\"\n        [floatLabel]=\"floatLabel()\">\n        @if (_appearance && _label) {\n          <mat-label class=\"sd-form-field-label\">\n            <span>{{ _label }}</span>\n            @if (_helperText) {\n              <sd-icon [matTooltip]=\"_helperText\" matTooltipPosition=\"above\" name=\"info\"></sd-icon>\n            }\n          </mat-label>\n        }\n\n        <textarea\n          matInput\n          [placeholder]=\"placeholder() || _label || ''\"\n          [formControl]=\"formControl\"\n          [required]=\"_required\"\n          autocomplete=\"off\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          [rows]=\"rows()\"\n          [attr.data-autoId]=\"autoId()\"\n          [attr.data-disabled]=\"dataDisabled()\"\n          [attr.data-invalid]=\"dataInvalid()\"\n          [attr.data-empty]=\"dataEmpty()\"\n          [attr.data-value]=\"dataValue()\"\n          [attr.data-required]=\"dataRequired()\"\n          [attr.data-maxlength]=\"dataMaxLength()\"\n          [attr.data-pattern]=\"dataPattern()\"\n          [attr.data-error-message]=\"dataErrorMessage()\"\n          spellcheck=\"false\"\n          #textarea>\n        </textarea>\n\n        @if (_hideInlineError && _errorMessage && formControl.touched) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n\n        @if (!_hideInlineError && _errorMessage && formControl.touched) {\n          <mat-error>{{ _errorMessage }}</mat-error>\n        }\n\n        @if (sdSuffixDef()?.templateRef; as suffixRef) {\n          <ng-container matSuffix>\n            <ng-container *ngTemplateOutlet=\"suffixRef\"></ng-container>\n          </ng-container>\n        }\n        <!-- <ng-container matSuffix>\n            <ng-content select=\"[sdSuffix]\"></ng-content>\n          </ng-container> -->\n      </mat-form-field>\n\n      @if (_maxLength !== null && !_hideInlineError && !formControl.disabled) {\n        <div\n          class=\"sd-maxlength-counter\"\n          [class.sd-maxlength-counter--visible]=\"isFocused\"\n          [class.sd-maxlength-counter--exceeded]=\"isMaxlengthExceeded()\"\n          [attr.title]=\"isMaxlengthExceeded() ? ('core.form.textarea.exceeded' | translate) : null\">\n          {{ getCurrentLength() }}/{{ _maxLength }}\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}.sd-inline-textarea{cursor:text;border-radius:4px;background-color:#0000000a;transition:background-color .15s ease}.sd-inline-textarea:hover{background-color:#00000014}.sd-inline-textarea:focus-within{background-color:#0000000f;box-shadow:inset 0 0 0 1px var(--sd-primary, #1f6feb)}.sd-inline-textarea ::ng-deep .mat-mdc-text-field-wrapper{padding:0 6px;background:transparent}.sd-inline-textarea ::ng-deep .mat-mdc-form-field-flex{padding:0}.sd-inline-textarea ::ng-deep .mdc-notched-outline{display:none}.sd-inline-textarea ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.sd-inline-textarea ::ng-deep .mat-mdc-form-field-infix{padding:4px 0;min-height:0;border:0}:host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep textarea.mat-mdc-input-element{resize:none}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-text-field--disabled{background:var(--sd-disabled-bg)}:host ::ng-deep .mat-mdc-form-field textarea.mat-mdc-input-element:disabled{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}.sd-textarea-field-wrap{position:relative;flex:1;min-width:0}.sd-maxlength-counter{position:absolute;right:4px;top:calc(100% - 16px);opacity:0;font-size:10px;line-height:1.1;color:#00000061;pointer-events:none;transition:opacity .12s ease;z-index:1}.sd-maxlength-counter--exceeded{color:var(--sd-error);font-weight:600}:host ::ng-deep .sd-textarea-container.c-focused .sd-maxlength-counter,:host ::ng-deep .sd-textarea-container:hover .sd-maxlength-counter,:host ::ng-deep .sd-textarea-container .sd-maxlength-counter.sd-maxlength-counter--visible{opacity:1}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "pipe", type: SdEmptyPipe, name: "sdEmpty" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdTextarea, isStandalone: true, selector: "sd-textarea", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, hideInlineError: { classPropertyName: "hideInlineError", publicName: "hideInlineError", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, autoHeight: { classPropertyName: "autoHeight", publicName: "autoHeight", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange" }, host: { properties: { "class.sd-has-label": "!!label()", "class.sd-viewed": "isViewed() || isInline()" } }, queries: [{ propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }, { propertyName: "sdLabelDef", first: true, predicate: SdLabelDefDirective, descendants: true, isSignal: true }, { propertyName: "sdSuffixDef", first: true, predicate: SdSuffixDefDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _label = label();\r\n@let _appearance = appearance();\r\n@let _hideInlineError = hideInlineError();\r\n@let _errorMessage = errorMessage();\r\n@let _sdLabelDef = sdLabelDef();\r\n@let _helperText = helperText();\r\n@let _required = required();\r\n@let _maxLength = maxlength();\r\n@let _isInline = isInline();\r\n<!-- why: m\u1ED9t c\u1ED5ng gate duy nh\u1EA5t cho <mat-error>, aria-invalid v\u00E0 aria-describedby \u2014 message\r\n     hi\u1EC7n m\u00E0 control kh\u00F4ng b\u00E1o invalid th\u00EC screen reader kh\u00F4ng bi\u1EBFt \u00F4 \u0111ang l\u1ED7i. -->\r\n@let _errorVisible = !!_errorMessage && formControl.touched;\r\n@let _showInlineError = !_hideInlineError && _errorVisible;\r\n\r\n@if (isViewed()) {\r\n  @if (_sdLabelDef?.templateRef) {\r\n    <ng-container *ngTemplateOutlet=\"_sdLabelDef!.templateRef\"> </ng-container>\r\n  } @else if (_label) {\r\n    <div class=\"T14R text-secondary\">{{ _label }}</div>\r\n  }\r\n  <div class=\"T14M\">{{ formControl.value | sdEmpty }}</div>\r\n} @else {\r\n  @if (!_appearance && _sdLabelDef?.templateRef) {\r\n    <ng-container *ngTemplateOutlet=\"_sdLabelDef!.templateRef\"> </ng-container>\r\n  }\r\n  @if (!_appearance && _label && !_sdLabelDef?.templateRef) {\r\n    <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\r\n  }\r\n\r\n  <!-- why: div ch\u1EC9 l\u00E0 h\u1ED9p layout. aria-hidden=\"true\" c\u0169 \u1EA9n C\u1EA2 c\u00E2y con \u2014 label, <textarea>,\r\n       <mat-error> \u2014 kh\u1ECFi accessibility tree. role=\"presentation\" ch\u1EC9 v\u00F4 hi\u1EC7u ho\u00E1 ch\u00EDnh div,\r\n       KH\u00D4NG lan xu\u1ED1ng con; (click) l\u00E0 ti\u1EC7n \u00EDch chu\u1ED9t m\u00E0 b\u00E0n ph\u00EDm \u0111\u00E3 c\u00F3 qua Tab. -->\r\n  <div\r\n    class=\"d-flex align-items-center sd-textarea-container\"\r\n    role=\"presentation\"\r\n    [class.c-focused]=\"isFocused\"\r\n    [class.c-disabled]=\"formControl.disabled\"\r\n    (click)=\"onClick()\">\r\n    <div class=\"sd-textarea-field-wrap\" [class.sd-inline-textarea]=\"_isInline\">\r\n      <mat-form-field\r\n        [class.sd-md]=\"size() === 'md'\"\r\n        [class.sd-sm]=\"size() === 'sm'\"\r\n        [class.hide-inline-error]=\"_hideInlineError\"\r\n        [appearance]=\"_appearance!\"\r\n        [floatLabel]=\"floatLabel()\">\r\n        @if (_appearance && _label) {\r\n          <mat-label class=\"sd-form-field-label\">\r\n            <span>{{ _label }}</span>\r\n            @if (_helperText) {\r\n              <sd-icon [matTooltip]=\"_helperText\" matTooltipPosition=\"above\" name=\"info\"></sd-icon>\r\n            }\r\n          </mat-label>\r\n        }\r\n\r\n        <textarea\r\n          matInput\r\n          [placeholder]=\"placeholder() || _label || ''\"\r\n          [formControl]=\"formControl\"\r\n          [required]=\"_required\"\r\n          autocomplete=\"off\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          [rows]=\"rows()\"\r\n          [attr.data-autoId]=\"autoId()\"\r\n          [attr.data-disabled]=\"dataDisabled()\"\r\n          [attr.data-invalid]=\"dataInvalid()\"\r\n          [attr.data-empty]=\"dataEmpty()\"\r\n          [attr.data-value]=\"dataValue()\"\r\n          [attr.data-required]=\"dataRequired()\"\r\n          [attr.data-maxlength]=\"dataMaxLength()\"\r\n          [attr.data-pattern]=\"dataPattern()\"\r\n          [attr.data-error-message]=\"dataErrorMessage()\"\r\n          [attr.aria-invalid]=\"_errorVisible ? 'true' : null\"\r\n          [attr.aria-describedby]=\"_errorMessage ? errorId : null\"\r\n          spellcheck=\"false\"\r\n          #textarea>\r\n        </textarea>\r\n\r\n        @if (_hideInlineError && _errorVisible) {\r\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\r\n        @if (_hideInlineError && _errorVisible) {\r\n          <span class=\"sd-visually-hidden\" [id]=\"errorId\" matSuffix>{{ _errorMessage }}</span>\r\r\n        }\r\n\r\n        @if (_showInlineError) {\r\n          <mat-error [id]=\"errorId\">{{ _errorMessage }}</mat-error>\r\n        }\r\n\r\n        @if (sdSuffixDef()?.templateRef; as suffixRef) {\r\n          <ng-container matSuffix>\r\n            <ng-container *ngTemplateOutlet=\"suffixRef\"></ng-container>\r\n          </ng-container>\r\n        }\r\n        <!-- <ng-container matSuffix>\r\n            <ng-content select=\"[sdSuffix]\"></ng-content>\r\n          </ng-container> -->\r\n      </mat-form-field>\r\n\r\n      @if (_maxLength !== null && !_hideInlineError && !formControl.disabled) {\r\n        <div\r\n          class=\"sd-maxlength-counter\"\r\n          [class.sd-maxlength-counter--visible]=\"isFocused\"\r\n          [class.sd-maxlength-counter--exceeded]=\"isMaxlengthExceeded()\"\r\n          [attr.title]=\"isMaxlengthExceeded() ? ('core.form.textarea.exceeded' | sdTranslate) : null\">\r\n          {{ getCurrentLength() }}/{{ _maxLength }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}.sd-inline-textarea{cursor:text;border-radius:4px;background-color:#0000000a;transition:background-color .15s ease}.sd-inline-textarea:hover{background-color:#00000014}.sd-inline-textarea:focus-within{background-color:#0000000f;box-shadow:inset 0 0 0 1px var(--sd-primary, #1f6feb)}.sd-inline-textarea ::ng-deep .mat-mdc-text-field-wrapper{padding:0 6px;background:transparent}.sd-inline-textarea ::ng-deep .mat-mdc-form-field-flex{padding:0}.sd-inline-textarea ::ng-deep .mdc-notched-outline{display:none}.sd-inline-textarea ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.sd-inline-textarea ::ng-deep .mat-mdc-form-field-infix{padding:4px 0;min-height:0;border:0}:host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep textarea.mat-mdc-input-element{resize:none}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-text-field--disabled{background:var(--sd-disabled-bg)}:host ::ng-deep .mat-mdc-form-field textarea.mat-mdc-input-element:disabled{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}.sd-textarea-field-wrap{position:relative;flex:1;min-width:0}.sd-maxlength-counter{position:absolute;right:4px;top:calc(100% - 16px);opacity:0;font-size:10px;line-height:1.1;color:#00000061;pointer-events:none;transition:opacity .12s ease;z-index:1}.sd-maxlength-counter--exceeded{color:var(--sd-error);font-weight:600}:host ::ng-deep .sd-textarea-container.c-focused .sd-maxlength-counter,:host ::ng-deep .sd-textarea-container:hover .sd-maxlength-counter,:host ::ng-deep .sd-textarea-container .sd-maxlength-counter.sd-maxlength-counter--visible{opacity:1}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "pipe", type: SdEmptyPipe, name: "sdEmpty" }, { kind: "pipe", type: SdTranslatePipe, name: "sdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdTextarea, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-textarea', standalone: true, host: { '[class.sd-has-label]': '!!label()', '[class.sd-viewed]': 'isViewed() || isInline()' }, imports: [
+            args: [{ selector: 'sd-textarea', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: { '[class.sd-has-label]': '!!label()', '[class.sd-viewed]': 'isViewed() || isInline()' }, imports: [
                         SdIcon,
                         CommonModule,
                         FormsModule,
@@ -282,8 +271,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         MatTooltipModule,
                         SdLabel,
                         SdEmptyPipe,
-                        TranslatePipe,
-                    ], template: "@let _label = label();\n@let _appearance = appearance();\n@let _hideInlineError = hideInlineError();\n@let _errorMessage = errorMessage();\n@let _sdLabelDef = sdLabelDef();\n@let _helperText = helperText();\n@let _required = required();\n@let _maxLength = maxlength();\n@let _isInline = isInline();\n\n@if (isViewed()) {\n  @if (_sdLabelDef?.templateRef) {\n    <ng-container *ngTemplateOutlet=\"_sdLabelDef!.templateRef\"> </ng-container>\n  } @else if (_label) {\n    <div class=\"T14R text-secondary\">{{ _label }}</div>\n  }\n  <div class=\"T14M\">{{ formControl.value | sdEmpty }}</div>\n} @else {\n  @if (!_appearance && _sdLabelDef?.templateRef) {\n    <ng-container *ngTemplateOutlet=\"_sdLabelDef!.templateRef\"> </ng-container>\n  }\n  @if (!_appearance && _label && !_sdLabelDef?.templateRef) {\n    <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\n  }\n\n  <div\n    class=\"d-flex align-items-center sd-textarea-container\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\n    <div class=\"sd-textarea-field-wrap\" [class.sd-inline-textarea]=\"_isInline\">\n      <mat-form-field\n        [class.sd-md]=\"size() === 'md'\"\n        [class.sd-sm]=\"size() === 'sm'\"\n        [class.hide-inline-error]=\"_hideInlineError\"\n        [appearance]=\"_appearance!\"\n        [floatLabel]=\"floatLabel()\">\n        @if (_appearance && _label) {\n          <mat-label class=\"sd-form-field-label\">\n            <span>{{ _label }}</span>\n            @if (_helperText) {\n              <sd-icon [matTooltip]=\"_helperText\" matTooltipPosition=\"above\" name=\"info\"></sd-icon>\n            }\n          </mat-label>\n        }\n\n        <textarea\n          matInput\n          [placeholder]=\"placeholder() || _label || ''\"\n          [formControl]=\"formControl\"\n          [required]=\"_required\"\n          autocomplete=\"off\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          [rows]=\"rows()\"\n          [attr.data-autoId]=\"autoId()\"\n          [attr.data-disabled]=\"dataDisabled()\"\n          [attr.data-invalid]=\"dataInvalid()\"\n          [attr.data-empty]=\"dataEmpty()\"\n          [attr.data-value]=\"dataValue()\"\n          [attr.data-required]=\"dataRequired()\"\n          [attr.data-maxlength]=\"dataMaxLength()\"\n          [attr.data-pattern]=\"dataPattern()\"\n          [attr.data-error-message]=\"dataErrorMessage()\"\n          spellcheck=\"false\"\n          #textarea>\n        </textarea>\n\n        @if (_hideInlineError && _errorMessage && formControl.touched) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n\n        @if (!_hideInlineError && _errorMessage && formControl.touched) {\n          <mat-error>{{ _errorMessage }}</mat-error>\n        }\n\n        @if (sdSuffixDef()?.templateRef; as suffixRef) {\n          <ng-container matSuffix>\n            <ng-container *ngTemplateOutlet=\"suffixRef\"></ng-container>\n          </ng-container>\n        }\n        <!-- <ng-container matSuffix>\n            <ng-content select=\"[sdSuffix]\"></ng-content>\n          </ng-container> -->\n      </mat-form-field>\n\n      @if (_maxLength !== null && !_hideInlineError && !formControl.disabled) {\n        <div\n          class=\"sd-maxlength-counter\"\n          [class.sd-maxlength-counter--visible]=\"isFocused\"\n          [class.sd-maxlength-counter--exceeded]=\"isMaxlengthExceeded()\"\n          [attr.title]=\"isMaxlengthExceeded() ? ('core.form.textarea.exceeded' | translate) : null\">\n          {{ getCurrentLength() }}/{{ _maxLength }}\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}.sd-inline-textarea{cursor:text;border-radius:4px;background-color:#0000000a;transition:background-color .15s ease}.sd-inline-textarea:hover{background-color:#00000014}.sd-inline-textarea:focus-within{background-color:#0000000f;box-shadow:inset 0 0 0 1px var(--sd-primary, #1f6feb)}.sd-inline-textarea ::ng-deep .mat-mdc-text-field-wrapper{padding:0 6px;background:transparent}.sd-inline-textarea ::ng-deep .mat-mdc-form-field-flex{padding:0}.sd-inline-textarea ::ng-deep .mdc-notched-outline{display:none}.sd-inline-textarea ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.sd-inline-textarea ::ng-deep .mat-mdc-form-field-infix{padding:4px 0;min-height:0;border:0}:host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep textarea.mat-mdc-input-element{resize:none}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-text-field--disabled{background:var(--sd-disabled-bg)}:host ::ng-deep .mat-mdc-form-field textarea.mat-mdc-input-element:disabled{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}.sd-textarea-field-wrap{position:relative;flex:1;min-width:0}.sd-maxlength-counter{position:absolute;right:4px;top:calc(100% - 16px);opacity:0;font-size:10px;line-height:1.1;color:#00000061;pointer-events:none;transition:opacity .12s ease;z-index:1}.sd-maxlength-counter--exceeded{color:var(--sd-error);font-weight:600}:host ::ng-deep .sd-textarea-container.c-focused .sd-maxlength-counter,:host ::ng-deep .sd-textarea-container:hover .sd-maxlength-counter,:host ::ng-deep .sd-textarea-container .sd-maxlength-counter.sd-maxlength-counter--visible{opacity:1}\n"] }]
+                        SdTranslatePipe,
+                    ], template: "@let _label = label();\r\n@let _appearance = appearance();\r\n@let _hideInlineError = hideInlineError();\r\n@let _errorMessage = errorMessage();\r\n@let _sdLabelDef = sdLabelDef();\r\n@let _helperText = helperText();\r\n@let _required = required();\r\n@let _maxLength = maxlength();\r\n@let _isInline = isInline();\r\n<!-- why: m\u1ED9t c\u1ED5ng gate duy nh\u1EA5t cho <mat-error>, aria-invalid v\u00E0 aria-describedby \u2014 message\r\n     hi\u1EC7n m\u00E0 control kh\u00F4ng b\u00E1o invalid th\u00EC screen reader kh\u00F4ng bi\u1EBFt \u00F4 \u0111ang l\u1ED7i. -->\r\n@let _errorVisible = !!_errorMessage && formControl.touched;\r\n@let _showInlineError = !_hideInlineError && _errorVisible;\r\n\r\n@if (isViewed()) {\r\n  @if (_sdLabelDef?.templateRef) {\r\n    <ng-container *ngTemplateOutlet=\"_sdLabelDef!.templateRef\"> </ng-container>\r\n  } @else if (_label) {\r\n    <div class=\"T14R text-secondary\">{{ _label }}</div>\r\n  }\r\n  <div class=\"T14M\">{{ formControl.value | sdEmpty }}</div>\r\n} @else {\r\n  @if (!_appearance && _sdLabelDef?.templateRef) {\r\n    <ng-container *ngTemplateOutlet=\"_sdLabelDef!.templateRef\"> </ng-container>\r\n  }\r\n  @if (!_appearance && _label && !_sdLabelDef?.templateRef) {\r\n    <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\r\n  }\r\n\r\n  <!-- why: div ch\u1EC9 l\u00E0 h\u1ED9p layout. aria-hidden=\"true\" c\u0169 \u1EA9n C\u1EA2 c\u00E2y con \u2014 label, <textarea>,\r\n       <mat-error> \u2014 kh\u1ECFi accessibility tree. role=\"presentation\" ch\u1EC9 v\u00F4 hi\u1EC7u ho\u00E1 ch\u00EDnh div,\r\n       KH\u00D4NG lan xu\u1ED1ng con; (click) l\u00E0 ti\u1EC7n \u00EDch chu\u1ED9t m\u00E0 b\u00E0n ph\u00EDm \u0111\u00E3 c\u00F3 qua Tab. -->\r\n  <div\r\n    class=\"d-flex align-items-center sd-textarea-container\"\r\n    role=\"presentation\"\r\n    [class.c-focused]=\"isFocused\"\r\n    [class.c-disabled]=\"formControl.disabled\"\r\n    (click)=\"onClick()\">\r\n    <div class=\"sd-textarea-field-wrap\" [class.sd-inline-textarea]=\"_isInline\">\r\n      <mat-form-field\r\n        [class.sd-md]=\"size() === 'md'\"\r\n        [class.sd-sm]=\"size() === 'sm'\"\r\n        [class.hide-inline-error]=\"_hideInlineError\"\r\n        [appearance]=\"_appearance!\"\r\n        [floatLabel]=\"floatLabel()\">\r\n        @if (_appearance && _label) {\r\n          <mat-label class=\"sd-form-field-label\">\r\n            <span>{{ _label }}</span>\r\n            @if (_helperText) {\r\n              <sd-icon [matTooltip]=\"_helperText\" matTooltipPosition=\"above\" name=\"info\"></sd-icon>\r\n            }\r\n          </mat-label>\r\n        }\r\n\r\n        <textarea\r\n          matInput\r\n          [placeholder]=\"placeholder() || _label || ''\"\r\n          [formControl]=\"formControl\"\r\n          [required]=\"_required\"\r\n          autocomplete=\"off\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          [rows]=\"rows()\"\r\n          [attr.data-autoId]=\"autoId()\"\r\n          [attr.data-disabled]=\"dataDisabled()\"\r\n          [attr.data-invalid]=\"dataInvalid()\"\r\n          [attr.data-empty]=\"dataEmpty()\"\r\n          [attr.data-value]=\"dataValue()\"\r\n          [attr.data-required]=\"dataRequired()\"\r\n          [attr.data-maxlength]=\"dataMaxLength()\"\r\n          [attr.data-pattern]=\"dataPattern()\"\r\n          [attr.data-error-message]=\"dataErrorMessage()\"\r\n          [attr.aria-invalid]=\"_errorVisible ? 'true' : null\"\r\n          [attr.aria-describedby]=\"_errorMessage ? errorId : null\"\r\n          spellcheck=\"false\"\r\n          #textarea>\r\n        </textarea>\r\n\r\n        @if (_hideInlineError && _errorVisible) {\r\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\r\n        @if (_hideInlineError && _errorVisible) {\r\n          <span class=\"sd-visually-hidden\" [id]=\"errorId\" matSuffix>{{ _errorMessage }}</span>\r\r\n        }\r\n\r\n        @if (_showInlineError) {\r\n          <mat-error [id]=\"errorId\">{{ _errorMessage }}</mat-error>\r\n        }\r\n\r\n        @if (sdSuffixDef()?.templateRef; as suffixRef) {\r\n          <ng-container matSuffix>\r\n            <ng-container *ngTemplateOutlet=\"suffixRef\"></ng-container>\r\n          </ng-container>\r\n        }\r\n        <!-- <ng-container matSuffix>\r\n            <ng-content select=\"[sdSuffix]\"></ng-content>\r\n          </ng-container> -->\r\n      </mat-form-field>\r\n\r\n      @if (_maxLength !== null && !_hideInlineError && !formControl.disabled) {\r\n        <div\r\n          class=\"sd-maxlength-counter\"\r\n          [class.sd-maxlength-counter--visible]=\"isFocused\"\r\n          [class.sd-maxlength-counter--exceeded]=\"isMaxlengthExceeded()\"\r\n          [attr.title]=\"isMaxlengthExceeded() ? ('core.form.textarea.exceeded' | sdTranslate) : null\">\r\n          {{ getCurrentLength() }}/{{ _maxLength }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}.sd-inline-textarea{cursor:text;border-radius:4px;background-color:#0000000a;transition:background-color .15s ease}.sd-inline-textarea:hover{background-color:#00000014}.sd-inline-textarea:focus-within{background-color:#0000000f;box-shadow:inset 0 0 0 1px var(--sd-primary, #1f6feb)}.sd-inline-textarea ::ng-deep .mat-mdc-text-field-wrapper{padding:0 6px;background:transparent}.sd-inline-textarea ::ng-deep .mat-mdc-form-field-flex{padding:0}.sd-inline-textarea ::ng-deep .mdc-notched-outline{display:none}.sd-inline-textarea ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.sd-inline-textarea ::ng-deep .mat-mdc-form-field-infix{padding:4px 0;min-height:0;border:0}:host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep textarea.mat-mdc-input-element{resize:none}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-text-field--disabled{background:var(--sd-disabled-bg)}:host ::ng-deep .mat-mdc-form-field textarea.mat-mdc-input-element:disabled{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}.sd-textarea-field-wrap{position:relative;flex:1;min-width:0}.sd-maxlength-counter{position:absolute;right:4px;top:calc(100% - 16px);opacity:0;font-size:10px;line-height:1.1;color:#00000061;pointer-events:none;transition:opacity .12s ease;z-index:1}.sd-maxlength-counter--exceeded{color:var(--sd-error);font-weight:600}:host ::ng-deep .sd-textarea-container.c-focused .sd-maxlength-counter,:host ::ng-deep .sd-textarea-container:hover .sd-maxlength-counter,:host ::ng-deep .sd-textarea-container .sd-maxlength-counter.sd-maxlength-counter--visible{opacity:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { textareaRef: [{ type: i0.ViewChild, args: ['textarea', { isSignal: true }] }], sdViewDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdViewDefDirective), { isSignal: true }] }], sdLabelDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdLabelDefDirective), { isSignal: true }] }], sdSuffixDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdSuffixDefDirective), { isSignal: true }] }], autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], hideInlineError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideInlineError", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], viewed: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewed", required: false }] }], autoHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHeight", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], validator: [{ type: i0.Input, args: [{ isSignal: true, alias: "validator", required: false }] }], inlineError: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineError", required: false }] }], appearanceInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], valueModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], sdChange: [{ type: i0.Output, args: ["sdChange"] }] } });
 
 /**