@sdcorejs/angular 19.1.6 → 19.2.1

package/fesm2022/sdcorejs-angular-forms-date-range.mjs

@@ -2,8 +2,9 @@ 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, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/forms';
-import { NgForm, FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgForm, FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import * as i5 from '@angular/material/datepicker';
 import { MatDateRangePicker, MatDatepickerModule } from '@angular/material/datepicker';
@@ -12,22 +13,61 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { SdLabelDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SD_FORM_CONFIGURATION, sdFormControlState, sdViewedTransform, sdViewedInline, ɵsdFormControlConnector as _sdFormControlConnector, provideSdStrictDateFnsAdapter } from '@sdcorejs/angular/forms/models';
+import { SD_FORM_CONFIGURATION, ɵsdTimerScope as _sdTimerScope, sdFormControlState, sdViewedTransform, sdViewedInline, ɵsdFormControlConnector as _sdFormControlConnector, ɵsdModelFacingControl as _sdModelFacingControl, sdSerializeTemporalValue, sdLocalStartOfDay, sdParseTransformedTemporal, provideSdStrictDateFnsAdapter } from '@sdcorejs/angular/forms/models';
 import { sdSerializeDataValue } from '@sdcorejs/angular/utilities/data-state';
 import { SdLabel } from '@sdcorejs/angular/forms/label';
 import { SdView } from '@sdcorejs/angular/components/view';
-import { I18nService, TranslatePipe } from '@sdcorejs/angular/i18n';
-import { DateUtilities } from '@sdcorejs/angular/utilities/extensions';
-import { Utilities, BrowserUtilities } from '@sdcorejs/utils/fns';
+import { I18nService, SdTranslatePipe } from '@sdcorejs/angular/i18n';
+import { Utilities, BrowserUtilities, DateUtilities } from '@sdcorejs/utils/fns';
 import { parse } from 'date-fns';
 import { enUS } from 'date-fns/locale';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
 
+function dateStamp(value) {
+    return value instanceof Date && !isNaN(value.getTime()) ? value.getTime() : null;
+}
+function sameRange(left, right) {
+    // why: lần đồng bộ đầu tiên phải luôn ghi, kể cả khi range rỗng — control khởi tạo là `null`
+    // còn contract của `formControl.value` (và `form.value[name]`) là object `{ from, to }`.
+    if (!left)
+        return false;
+    return dateStamp(left.from) === dateStamp(right.from) && dateStamp(left.to) === dateStamp(right.to);
+}
+/**
+ * Chữ ký lỗi ổn định của một control — GỒM CẢ payload, không chỉ tên key.
+ * why: fingerprint chỉ theo tên key thì đổi NỘI DUNG lỗi (vd `matDatepickerParse: { text }` từ
+ * `"11/1"` sang `"11/12"`) không làm validator tổng chạy lại, nên object lỗi đã copy sang
+ * `formControl` giữ nguyên payload cũ và consumer đọc ra text đã lỗi thời.
+ * Key được sort để cùng một tập lỗi luôn cho cùng một chữ ký bất kể thứ tự chèn.
+ */
+function serializeErrors(errors) {
+    if (!errors)
+        return '';
+    const keys = Object.keys(errors).sort();
+    try {
+        return JSON.stringify(keys.map(key => [key, errors[key]]));
+    }
+    catch {
+        // Payload không serialize được (tham chiếu vòng) — lùi về chữ ký theo tên key.
+        return keys.join(',');
+    }
+}
+/**
+ * why: `Validators.required` dùng `isEmptyInputValue`, mà value của control tổng LUÔN là object
+ * `{ from, to }` (ghi vô điều kiện mỗi lần đồng bộ) — object thì không bao giờ "empty", nên
+ * `[required]` trên `<sd-date-range>` TRƯỚC ĐÂY KHÔNG BAO GIỜ làm form cha invalid được.
+ * Ở đây phải kiểm tra thật sự từng đầu range.
+ */
+function rangeIsComplete(value) {
+    const range = value;
+    return !!range?.from && !!range?.to;
+}
 class SdDateRange {
     id1 = `I${Utilities.generateUuid()}`;
     id2 = `I${Utilities.generateUuid()}`;
-    #c1 = Utilities.generateUuid();
-    #c2 = Utilities.generateUuid();
+    /** why: id ổn định của <mat-error> để hai ô nhập 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.id1}-error`;
     // ==========================================
     // 1. SIGNAL QUERIES
     // ==========================================
@@ -39,6 +79,10 @@ class SdDateRange {
     cdRef = inject(ChangeDetectorRef);
     formConfig = inject(SD_FORM_CONFIGURATION, { optional: true });
     #i18n = inject(I18nService);
+    // why: onBlur hoãn 1 macrotask rồi mới emit sdChange. Không giữ handle thì blur ngay trước
+    // khi control bị tháo vẫn bắn output sau destroy — consumer đã unsubscribe, hoặc tệ hơn là
+    // nhận một lần emit "ma" cho control không còn tồn tại.
+    #timers = _sdTimerScope();
     // ==========================================
     // 3. SIGNAL INPUTS & MODEL
     // ==========================================
@@ -53,8 +97,14 @@ class SdDateRange {
         return id ? `${id}-to` : undefined;
     });
     #state = sdFormControlState(computed(() => this.formControl));
+    // why: control tổng KHÔNG phải nguồn duy nhất của trạng thái. Material bắn matDatepickerParse /
+    // matDatepickerMin / matDatepickerMax / matStartDateInvalid lên control1 + control2, và connector
+    // gắn/gỡ validator bằng `updateValueAndValidity({ emitEvent: false })` nên `#state` không tick theo.
+    // Thiếu 2 snapshot này thì mọi computed bên dưới đóng băng ở giá trị render đầu tiên dưới OnPush.
+    #state1 = sdFormControlState(computed(() => this.control1));
+    #state2 = sdFormControlState(computed(() => this.control2));
     dataDisabled = computed(() => (this.#state().disabled ? 'true' : 'false'));
-    dataInvalid = computed(() => (this.#state().invalid ? 'true' : 'false'));
+    dataInvalid = computed(() => (this.#state().invalid || this.#state1().invalid || this.#state2().invalid ? 'true' : 'false'));
     dataEmpty = computed(() => {
         const v = this.#state().value;
         const empty = !v || !v.from || !v.to;
@@ -93,10 +143,14 @@ class SdDateRange {
      * Tổng hợp error message để hiển thị trong tooltip khi hideInlineError = true.
      */
     errorMessage = computed(() => {
+        // why: message được nuôi bởi CẢ BA control — đọc đủ 3 snapshot thì computed mới invalidate.
+        // Trước đây chỉ `#state` được đọc, nên lỗi min/max của 2 đầu range không bao giờ vẽ ra message.
         void this.#state();
+        void this.#state1();
+        void this.#state2();
         const outerErrors = this.formControl.errors;
-        const c1Errors = this.control1?.errors;
-        const c2Errors = this.control2?.errors;
+        const c1Errors = this.control1.errors;
+        const c2Errors = this.control2.errors;
         if (outerErrors?.['required'] || c1Errors?.['required'] || c2Errors?.['required']) {
             return this.#i18n.t('core.form.date-range.required');
         }
@@ -161,6 +215,12 @@ class SdDateRange {
     resolvedMin = computed(() => this.#parseDateBoundary(this.minInput()));
     maxInput = input(undefined, { alias: 'max' });
     resolvedMax = computed(() => this.#parseDateBoundary(this.maxInput()));
+    /**
+     * Output serialization strategy applied to **each endpoint** of the committed range. Affects
+     * `model` / `modelChange` / `sdChange` and the registered form field only — the field keeps
+     * showing `dd/MM/yyyy → dd/MM/yyyy`. Left unset, endpoints stay canonical `yyyy/MM/dd` strings.
+     */
+    transform = input();
     valueModel = model(undefined, { alias: 'model' });
     // ==========================================
     // 4. SIGNAL OUTPUTS
@@ -173,81 +233,190 @@ class SdDateRange {
     formControl = new FormControl();
     control1 = new FormControl();
     control2 = new FormControl();
+    /**
+     * why: 2 control đầu range là CHI TIẾT NỘI BỘ. Trước đây chúng được đăng ký vào FormGroup của
+     * consumer dưới 2 tên UUID ngẫu nhiên (`#c1` / `#c2`), nên `form.value` mọc thêm 2 key đổi theo
+     * từng instance — vỡ shape giá trị gửi lên server và làm `form.reset(obj)` không thể viết đúng.
+     * Giờ CHỈ control tổng được đăng ký (dưới `name`); 2 connector này để `name` rỗng nên connector
+     * bỏ qua hẳn bước đăng ký, ta chỉ dùng phần quản lý validator/disabled dạng CỘNG DỒN của nó.
+     */
     #fromConnector = _sdFormControlConnector({
         form: this.form,
-        name: computed(() => this.#c1),
+        name: computed(() => undefined),
         control: computed(() => this.control1),
+        required: this.required,
+        disabled: this.disabled,
     });
     #toConnector = _sdFormControlConnector({
         form: this.form,
-        name: computed(() => this.#c2),
+        name: computed(() => undefined),
         control: computed(() => this.control2),
+        required: this.required,
+        disabled: this.disabled,
+    });
+    /**
+     * Chữ ký tập lỗi của 2 đầu range — TÊN KEY + PAYLOAD.
+     * why: dùng làm dependency cho `#validators` để validator tổng chỉ được hoán đổi khi lỗi thật sự
+     * đổi, thay vì mỗi event của control (computed so sánh kết quả bằng `Object.is`).
+     * why: chữ ký PHẢI gồm payload. Trước đây chỉ lấy tên key, nên `matDatepickerParse: { text: '11/1' }`
+     * đổi thành `{ text: '11/12' }` cho ra cùng chữ ký → validator không chạy lại → object lỗi đã copy
+     * sang `formControl` treo lại payload cũ.
+     */
+    #endpointErrorFingerprint = computed(() => {
+        void this.#state1();
+        void this.#state2();
+        return `${serializeErrors(this.control1.errors)}|${serializeErrors(this.control2.errors)}`;
+    });
+    #validators = computed(() => {
+        const isRequired = this.required();
+        void this.#endpointErrorFingerprint();
+        // why: chỉ control tổng được đăng ký vào form cha, nên lỗi Material nằm trên control1/control2
+        // phải được KÉO lên đây — nếu không form cha báo VALID trong khi UI đang đỏ và submit lọt.
+        const validator = control => {
+            const errors = { ...(this.control1.errors ?? {}), ...(this.control2.errors ?? {}) };
+            if (isRequired && !rangeIsComplete(control.value))
+                errors['required'] = true;
+            return Object.keys(errors).length > 0 ? errors : null;
+        };
+        return [validator];
+    });
+    /**
+     * why: control tổng giữ `{ from: Date, to: Date }` — biểu diễn của editor. Có `transform` thì
+     * consumer được hứa `form.get(name).value` bằng `model` (hai endpoint đã serialize), nên form phải
+     * nhận control này. Không có transform thì `registered` trả null, form vẫn nhận control tổng.
+     */
+    #modelFacing = _sdModelFacingControl({
+        active: computed(() => !!this.transform()),
+        model: this.valueModel,
+        writeModel: value => {
+            this.valueModel.set(value);
+            this.sdChange.emit(value);
+        },
+        source: computed(() => this.formControl),
+        modelEquals: (left, right) => (left?.from ?? null) === (right?.from ?? null) && (left?.to ?? null) === (right?.to ?? null),
     });
+    /** Control registered in the parent form while a `transform` is active; holds the public model. */
+    modelControl = this.#modelFacing.control;
     #rangeConnector = _sdFormControlConnector({
         form: this.form,
         name: this.name,
         control: computed(() => this.formControl),
+        registeredControl: this.#modelFacing.registered,
+        validators: this.#validators,
+        disabled: this.disabled,
     });
     #isFocus = false;
     #isModelChange = false;
     #isSdChangeEmittedByEnter = false;
     #isSdChangeEmittedByClear = false;
+    /** Cờ loại trừ giữa write đi XUỐNG (`#syncAggregate`) và write đi LÊN (subscriber bên dưới). */
+    #isWritingAggregate = false;
     constructor() {
         this.cdRef.markForCheck();
         // EFFECT 1: Sync model thay đổi từ bên ngoài vào control1 và control2
         effect(() => {
             const val = this.valueModel();
             untracked(() => {
-                const fromStr = DateUtilities.isDate(val?.from) ? DateUtilities.toFormat(val?.from, 'yyyy/MM/dd') : null;
-                const toStr = DateUtilities.isDate(val?.to) ? DateUtilities.toFormat(val?.to, 'yyyy/MM/dd') : null;
+                // why: đi qua `#coerceEndpoint` chứ không gọi thẳng `DateUtilities.isDate` — hàm đó từ chối
+                // chuỗi RFC-1123, nên `transform="UTCString"` sẽ không render được chính giá trị nó phát ra.
+                const fromDate = this.#coerceEndpoint(val?.from);
+                const toDate = this.#coerceEndpoint(val?.to);
+                const fromStr = fromDate ? DateUtilities.toFormat(fromDate, 'yyyy/MM/dd') : null;
+                const toStr = toDate ? DateUtilities.toFormat(toDate, 'yyyy/MM/dd') : null;
                 // Chỉ set value nếu có sự khác biệt (tránh loop)
                 // control1/control2 giờ giữ native Date (date-fns adapter), không cần .toDate() như Moment.
                 const currentFrom = this.control1.value ? DateUtilities.toFormat(this.control1.value, 'yyyy/MM/dd') : null;
                 const currentTo = this.control2.value ? DateUtilities.toFormat(this.control2.value, 'yyyy/MM/dd') : null;
+                // why: bỏ `{ emitEvent: false }` — nó chặn luôn `events` của control, nên `sdFormControlState`
+                // không tick và sau lần render đầu mọi computed (errorMessage, data-invalid, data-value,
+                // data-empty) lẫn `<mat-error>` đứng im dưới OnPush.
                 if (fromStr !== currentFrom) {
-                    this.control1.setValue(fromStr ? parse(fromStr, 'yyyy/MM/dd', new Date()) : null, { emitEvent: false });
+                    this.control1.setValue(fromStr ? parse(fromStr, 'yyyy/MM/dd', new Date()) : null);
                 }
                 if (toStr !== currentTo) {
-                    this.control2.setValue(toStr ? parse(toStr, 'yyyy/MM/dd', new Date()) : null, { emitEvent: false });
+                    this.control2.setValue(toStr ? parse(toStr, 'yyyy/MM/dd', new Date()) : null);
                 }
                 // Đồng bộ control tổng để required của form cha không bị invalid khi model default đã có giá trị.
-                this.formControl.setValue({ from: this.control1.value, to: this.control2.value }, { emitEvent: false });
-                this.formControl.updateValueAndValidity({ emitEvent: false });
+                this.#syncAggregate();
             });
         });
-        // EFFECT 2: Sync Disable
-        effect(() => {
-            if (this.disabled()) {
-                this.formControl.disable({ emitEvent: false });
-                this.control1.disable({ emitEvent: false });
-                this.control2.disable({ emitEvent: false });
-            }
-            else {
-                this.formControl.enable({ emitEvent: false });
-                this.control1.enable({ emitEvent: false });
-                this.control2.enable({ emitEvent: false });
-            }
-        });
-        // EFFECT 3: Sync Required
-        effect(() => {
-            const isReq = this.required();
-            untracked(() => {
-                if (isReq) {
-                    this.formControl.setValidators([Validators.required]);
-                    this.control1.setValidators([Validators.required]);
-                    this.control2.setValidators([Validators.required]);
-                }
-                else {
-                    this.formControl.clearValidators();
-                    this.control1.clearValidators();
-                    this.control2.clearValidators();
-                }
-                this.formControl.updateValueAndValidity({ emitEvent: false });
-                this.control1.updateValueAndValidity({ emitEvent: false });
-                this.control2.updateValueAndValidity({ emitEvent: false });
-            });
+        // SUBSCRIPTION: đẩy giá trị ghi từ NGOÀI vào control tổng ngược xuống 2 đầu range.
+        // why: từ khi control1/control2 không còn được đăng ký vào FormGroup của consumer, `fg.reset()`
+        // và `fg.patchValue({ period })` chỉ chạm tới control tổng — không còn ai đẩy giá trị đó xuống
+        // 2 đầu range nữa, nên `<mat-date-range-input>` vẫn hiện ngày cũ trong khi `form.value.period`
+        // đã null. Trước đây reset "vô tình" chạy đúng chỉ vì 2 đầu range nằm sẵn trong group dưới 2 key
+        // UUID — chính thứ đã bị gỡ bỏ.
+        this.formControl.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => {
+            // Write do chính ta phát ra thì bỏ qua, nếu không sẽ đá nhau với `#syncAggregate`.
+            if (this.#isWritingAggregate)
+                return;
+            this.#applyAggregate(value);
         });
     }
+    /**
+     * Ghi `{ from, to }` xuống control tổng, và CHỈ khi thật sự khác giá trị đang giữ.
+     * why: write giờ đã phát event; nếu ghi vô điều kiện thì mỗi lần model đổi sẽ bắn thêm một
+     * `valueChanges` thừa lên FormGroup cha (object mới luôn "khác" nếu so bằng tham chiếu).
+     */
+    #syncAggregate() {
+        const next = { from: this.control1.value ?? null, to: this.control2.value ?? null };
+        if (sameRange(this.formControl.value, next))
+            return;
+        this.#isWritingAggregate = true;
+        try {
+            this.formControl.setValue(next);
+        }
+        finally {
+            this.#isWritingAggregate = false;
+        }
+    }
+    /**
+     * Phân phối giá trị của control tổng xuống `control1` / `control2` / `valueModel`.
+     * why: đây là nửa còn thiếu của vòng đồng bộ sau khi 2 đầu range rời FormGroup — `fg.reset(obj)`
+     * và `fg.patchValue(obj)` chỉ biết tới control tổng.
+     */
+    #applyAggregate(value) {
+        const range = value;
+        const from = this.#coerceEndpoint(range?.from);
+        const to = this.#coerceEndpoint(range?.to);
+        if (dateStamp(this.control1.value) !== dateStamp(from))
+            this.control1.setValue(from);
+        if (dateStamp(this.control2.value) !== dateStamp(to))
+            this.control2.setValue(to);
+        // Model giữ contract chuỗi `yyyy/MM/dd` (giống `#emit`), không phải native Date.
+        const next = { from: this.#endpointOut(from), to: this.#endpointOut(to) };
+        const current = this.valueModel();
+        if (next.from !== (current?.from ?? null) || next.to !== (current?.to ?? null)) {
+            this.valueModel.set(next);
+            this.cdRef.markForCheck();
+        }
+    }
+    /**
+     * Serializes one endpoint. Each end is a date, so the instant is local start-of-day — the calendar
+     * day the user picked. The two ends are serialized independently; the range object itself is never
+     * turned into a single string.
+     */
+    #endpointOut(value) {
+        if (!value)
+            return null;
+        const transformed = sdSerializeTemporalValue(sdLocalStartOfDay(value), this.transform());
+        return transformed ?? DateUtilities.toFormat(value, 'yyyy/MM/dd') ?? null;
+    }
+    /** Consumer có thể ghi thẳng `Date` hoặc chuỗi ngày vào control tổng — chấp nhận cả hai. */
+    #coerceEndpoint(value) {
+        if (value instanceof Date)
+            return isNaN(value.getTime()) ? null : value;
+        if (typeof value !== 'string' || value.trim() === '')
+            return null;
+        if (!DateUtilities.isDate(value)) {
+            // why: `DateUtilities.isDate` từ chối chuỗi RFC-1123 của `toUTCString()`, nên không có nhánh
+            // này thì `<sd-date-range transform="UTCString">` không đọc lại được chính output của nó.
+            const parsedTransformed = sdParseTransformedTemporal(value);
+            return parsedTransformed ? sdLocalStartOfDay(parsedTransformed) : null;
+        }
+        const normalized = DateUtilities.toFormat(value, 'yyyy/MM/dd');
+        return normalized ? parse(normalized, 'yyyy/MM/dd', new Date()) : null;
+    }
     #parseDateBoundary(val) {
         if (val === 'TODAY')
             return new Date();
@@ -268,11 +437,11 @@ class SdDateRange {
         const from = this.control1.value || null;
         const to = this.control2.value || null;
         const currentModel = this.valueModel();
-        const newFrom = DateUtilities.isDate(from) ? DateUtilities.toFormat(from, 'yyyy/MM/dd') : null;
-        const newTo = DateUtilities.isDate(to) ? DateUtilities.toFormat(to, 'yyyy/MM/dd') : null;
+        const newFrom = DateUtilities.isDate(from) ? this.#endpointOut(from) : null;
+        const newTo = DateUtilities.isDate(to) ? this.#endpointOut(to) : null;
         if (newFrom !== currentModel?.from || newTo !== currentModel?.to) {
             const nextModel = { from: newFrom, to: newTo };
-            this.formControl.setValue({ from: this.control1.value, to: this.control2.value }, { emitEvent: false });
+            this.#syncAggregate();
             this.valueModel.set(nextModel);
             this.#isModelChange = true;
             this.cdRef.markForCheck();
@@ -280,9 +449,9 @@ class SdDateRange {
     };
     clear = () => {
         const emptyModel = { from: null, to: null };
-        this.control1.setValue(null, { emitEvent: false });
-        this.control2.setValue(null, { emitEvent: false });
-        this.formControl.setValue(emptyModel, { emitEvent: false });
+        this.control1.setValue(null);
+        this.control2.setValue(null);
+        this.#syncAggregate();
         this.valueModel.set(emptyModel);
         this.sdChange.emit(emptyModel);
         this.#isSdChangeEmittedByClear = true;
@@ -302,7 +471,9 @@ class SdDateRange {
     onBlur = () => {
         this.#isFocus = false;
         this.#emit();
-        setTimeout(() => {
+        // why: vẫn hoãn đúng 1 macrotask như cũ (để onFocus của ô kia kịp huỷ emit khi tab giữa
+        // from/to) — chỉ scope handle theo DestroyRef.
+        this.#timers.schedule(() => {
             if (!this.#isFocus && this.#isModelChange && !(this.#isSdChangeEmittedByEnter || this.#isSdChangeEmittedByClear)) {
                 this.sdChange.emit(this.valueModel());
             }
@@ -318,7 +489,7 @@ class SdDateRange {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdDateRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdDateRange, isStandalone: true, selector: "sd-date-range", 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 }, 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 }, clearable: { classPropertyName: "clearable", publicName: "clearable", 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 }, minInput: { classPropertyName: "minInput", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxInput: { classPropertyName: "maxInput", publicName: "max", 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-bare": "isInline()", "class.sd-viewed": "isViewed() || isInline()", "class.sd-has-label": "!!label()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdDateRange, isStandalone: true, selector: "sd-date-range", 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 }, 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 }, clearable: { classPropertyName: "clearable", publicName: "clearable", 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 }, minInput: { classPropertyName: "minInput", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxInput: { classPropertyName: "maxInput", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", 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-bare": "isInline()", "class.sd-viewed": "isViewed() || isInline()", "class.sd-has-label": "!!label()" } }, providers: [
             // DateFnsAdapter inject MAT_DATE_LOCALE; cấp default en-US để parse/format hoạt động.
             { provide: MAT_DATE_LOCALE, useValue: enUS },
             provideSdStrictDateFnsAdapter({
@@ -330,7 +501,7 @@ class SdDateRange {
                     monthYearA11yLabel: 'MMMM yyyy',
                 },
             }),
-        ], queries: [{ propertyName: "sdLabelDef", first: true, predicate: SdLabelDefDirective, descendants: true, isSignal: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "picker", first: true, predicate: MatDateRangePicker, descendants: true, isSignal: true }], ngImport: i0, template: "@let _sdLabelDef = sdLabelDef();\n@let _label = label();\n@let _appearance = appearance();\n@let _required = required();\n@let _hideInlineError = hideInlineError();\n@let _errorMessage = errorMessage();\n@let _helperText = helperText();\n@let _resolvedMin = resolvedMin();\n@let _resolvedMax = resolvedMax();\n@let _size = size();\n@let _isInline = isInline();\n@let _bare = _isInline;\n@let _hasValue = !!(control1.value || control2.value);\n@let _labelTemplate = _sdLabelDef?.templateRef ?? undefined;\n\n@if (isViewed()) {\n  <sd-view\n    [label]=\"_label\"\n    [labelTemplate]=\"_labelTemplate\"\n    [value]=\"valueModel()\"\n    [display]=\"formatted()\"\n    [valueTemplate]=\"sdValueTemplate()\">\n  </sd-view>\n} @else {\n  @if (_isInline) {\n    <!-- why: inline \u2014 sd-view l\u00E0 \"m\u1EB7t\" + trigger; range editor render \u1EA9n (.sd-inline-editor) ch\u1EC9 \u0111\u1EC3 m\u1EDF picker. -->\n    <span class=\"sd-inline-view\" role=\"button\" tabindex=\"0\" (click)=\"enterInlineEdit()\" (keydown.enter)=\"enterInlineEdit()\">\n      <sd-view\n        [label]=\"_label\"\n        [labelTemplate]=\"_labelTemplate\"\n        [value]=\"valueModel()\"\n        [display]=\"formatted()\"\n        [valueTemplate]=\"sdValueTemplate()\">\n      </sd-view>\n      @if (clearable() && _hasValue && !_required && !formControl.disabled) {\n        <button type=\"button\" class=\"sd-inline-clear\" (click)=\"$event.stopPropagation(); clear()\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      }\n    </span>\n  }\n\n  <div [class.sd-inline-editor]=\"_isInline\">\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    <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=\"below\" name=\"info\"></sd-icon>\n          }\n        </mat-label>\n      }\n\n      <mat-date-range-input\n        [max]=\"_resolvedMax\"\n        [min]=\"_resolvedMin\"\n        [rangePicker]=\"picker\"\n        [disabled]=\"formControl.disabled\"\n        [required]=\"_required\"\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-error-message]=\"dataErrorMessage()\">\n        <input\n          aria-hidden=\"true\"\n          [id]=\"id1\"\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          matStartDate\n          [formControl]=\"control1\"\n          [placeholder]=\"formControl.disabled ? '' : ('core.form.date-range.from' | translate)\"\n          (dateInput)=\"onStartChange($event)\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (keyup.enter)=\"onEnter()\"\n          [attr.data-qclabel]=\"_label\"\n          [attr.data-autoId]=\"fromAutoId()\" />\n\n        <input\n          aria-hidden=\"true\"\n          [id]=\"id2\"\n          [autocomplete]=\"id2\"\n          autocorrect=\"off\"\n          matEndDate\n          [formControl]=\"control2\"\n          [placeholder]=\"formControl.disabled ? '' : ('core.form.date-range.to' | translate)\"\n          (dateInput)=\"onEndChange($event)\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (keyup.enter)=\"onEnter()\"\n          [attr.data-qclabel]=\"_label\"\n          [attr.data-autoId]=\"toAutoId()\" />\n      </mat-date-range-input>\n\n      @if (_hideInlineError && _errorMessage && (formControl.touched || control1.touched || control2.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 || control1.touched || control2.touched)) {\n        <mat-error>{{ _errorMessage }}</mat-error>\n      }\n\n      @if ((control1.value || control2.value) && !_bare) {\n        <sd-icon class=\"cursor-pointer sd-suffix-icon\" (click)=\"clear()\" matSuffix name=\"cancel\"></sd-icon>\n      }\n\n      <sd-icon class=\"cursor-pointer sd-suffix-icon\" (click)=\"onOpenPicker($event)\" matSuffix name=\"today\"></sd-icon>\n\n      <mat-date-range-picker [touchUi]=\"isMobileOrTablet\" (closed)=\"onClosePicker()\" #picker></mat-date-range-picker>\n    </mat-form-field>\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}:host(.sd-bare){position:relative}.sd-inline-view{cursor:pointer;display:inline-flex;align-items:center;width:100%;padding:1px 6px;border-radius:4px;background-color:#0000000a;transition:background-color .15s ease}.sd-inline-view:hover{background-color:#00000014}.sd-inline-view .sd-inline-clear{display:none;align-items:center;margin-left:4px;padding:0;border:0;background:transparent;cursor:pointer;line-height:0;color:var(--sd-text-secondary, #6b7280);transition:color .15s ease}.sd-inline-view .sd-inline-clear sd-icon{font-size:16px;width:16px;height:16px}.sd-inline-view .sd-inline-clear:hover{color:var(--sd-error, #b32626)}.sd-inline-view:hover .sd-inline-clear{display:inline-flex}.sd-inline-editor{position:absolute;inset:0;opacity:0;pointer-events:none}.sd-inline-editor ::ng-deep *{pointer-events:none!important}:host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-disabled-bg)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-start-date:disabled,:host ::ng-deep .mat-mdc-form-field input.mat-mdc-end-date:disabled{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .sd-md mat-date-range-input{padding-top:12px;font-size:14px}:host ::ng-deep .sd-sm mat-date-range-input{padding-top:4px;font-size:14px}:host(.sd-bare){display:inline-flex;align-items:center}:host(.sd-bare) ::ng-deep .mat-mdc-form-field{width:auto}:host(.sd-bare) ::ng-deep .mat-mdc-text-field-wrapper{padding:0;background:transparent}:host(.sd-bare) ::ng-deep .mat-mdc-form-field-flex{padding:0;align-items:center}:host(.sd-bare) ::ng-deep .mdc-notched-outline{display:none}:host(.sd-bare) ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host(.sd-bare) ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}\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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "component", type: SdView, selector: "sd-view", inputs: ["label", "value", "display", "hyperlink", "labelTemplate", "valueTemplate", "selectedItems"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "sdLabelDef", first: true, predicate: SdLabelDefDirective, descendants: true, isSignal: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "picker", first: true, predicate: MatDateRangePicker, descendants: true, isSignal: true }], ngImport: i0, template: "@let _sdLabelDef = sdLabelDef();\r\n@let _label = label();\r\n@let _appearance = appearance();\r\n@let _required = required();\r\n@let _hideInlineError = hideInlineError();\r\n@let _errorMessage = errorMessage();\r\n@let _helperText = helperText();\r\n@let _resolvedMin = resolvedMin();\r\n@let _resolvedMax = resolvedMax();\r\n@let _size = size();\r\n@let _isInline = isInline();\r\n@let _bare = _isInline;\r\n@let _hasValue = !!(control1.value || control2.value);\r\n@let _labelTemplate = _sdLabelDef?.templateRef ?? undefined;\r\n<!-- why: m\u1ED9t c\u1ED5ng gate duy nh\u1EA5t cho <mat-error>, aria-invalid v\u00E0 aria-describedby \u2014 tr\u01B0\u1EDBc \u0111\u00E2y\r\n     message hi\u1EC7n m\u00E0 hai \u00F4 nh\u1EADp kh\u00F4ng h\u1EC1 b\u00E1o invalid n\u00EAn screen reader kh\u00F4ng bi\u1EBFt \u0111ang l\u1ED7i. -->\r\n@let _errorVisible = !!_errorMessage && (formControl.touched || control1.touched || control2.touched);\r\n@let _showInlineError = !_hideInlineError && _errorVisible;\r\n\r\n@if (isViewed()) {\r\n  <sd-view\r\n    [label]=\"_label\"\r\n    [labelTemplate]=\"_labelTemplate\"\r\n    [value]=\"valueModel()\"\r\n    [display]=\"formatted()\"\r\n    [valueTemplate]=\"sdValueTemplate()\">\r\n  </sd-view>\r\n} @else {\r\n  @if (_isInline) {\r\n    <!-- why: inline \u2014 sd-view l\u00E0 \"m\u1EB7t\" + trigger; range editor render \u1EA9n (.sd-inline-editor) ch\u1EC9 \u0111\u1EC3 m\u1EDF picker. -->\r\n    <span class=\"sd-inline-view\" role=\"button\" tabindex=\"0\" (click)=\"enterInlineEdit()\" (keydown.enter)=\"enterInlineEdit()\">\r\n      <sd-view\r\n        [label]=\"_label\"\r\n        [labelTemplate]=\"_labelTemplate\"\r\n        [value]=\"valueModel()\"\r\n        [display]=\"formatted()\"\r\n        [valueTemplate]=\"sdValueTemplate()\">\r\n      </sd-view>\r\n      @if (clearable() && _hasValue && !_required && !formControl.disabled) {\r\n        <button type=\"button\" class=\"sd-inline-clear\" (click)=\"$event.stopPropagation(); clear()\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\r\n          <sd-icon name=\"close\"></sd-icon>\r\n        </button>\r\n      }\r\n    </span>\r\n  }\r\n\r\n  <div [class.sd-inline-editor]=\"_isInline\">\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    <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=\"below\" name=\"info\"></sd-icon>\r\n          }\r\n        </mat-label>\r\n      }\r\n\r\n      <mat-date-range-input\r\n        [max]=\"_resolvedMax\"\r\n        [min]=\"_resolvedMin\"\r\n        [rangePicker]=\"picker\"\r\n        [disabled]=\"formControl.disabled\"\r\n        [required]=\"_required\"\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-error-message]=\"dataErrorMessage()\">\r\n        <!-- why: B\u1ECE aria-hidden tr\u00EAn hai \u00F4 nh\u1EADp TH\u1EACT \u2014 c\u1EA3 hai \u0111\u1EC1u Tab t\u1EDBi v\u00E0 g\u00F5 \u0111\u01B0\u1EE3c, aria-hidden\r\n             ch\u1EC9 khi\u1EBFn screen reader \u0111\u1ECDc ra kho\u1EA3ng l\u1EB7ng \u1EDF \u0111\u00FAng ch\u1ED7 ng\u01B0\u1EDDi d\u00F9ng \u0111ang \u0111\u1EE9ng. -->\r\n        <input\r\n          [id]=\"id1\"\r\n          autocomplete=\"off\"\r\n          autocorrect=\"off\"\r\n          matStartDate\r\n          [formControl]=\"control1\"\r\n          [placeholder]=\"formControl.disabled ? '' : ('core.form.date-range.from' | sdTranslate)\"\r\n          (dateInput)=\"onStartChange($event)\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          (keyup.enter)=\"onEnter()\"\r\n          [attr.data-qclabel]=\"_label\"\r\n          [attr.data-autoId]=\"fromAutoId()\"\r\n          [attr.aria-invalid]=\"_errorVisible ? 'true' : null\"\r\n          [attr.aria-describedby]=\"_errorMessage ? errorId : null\" />\r\n\r\n        <input\r\n          [id]=\"id2\"\r\n          [autocomplete]=\"id2\"\r\n          autocorrect=\"off\"\r\n          matEndDate\r\n          [formControl]=\"control2\"\r\n          [placeholder]=\"formControl.disabled ? '' : ('core.form.date-range.to' | sdTranslate)\"\r\n          (dateInput)=\"onEndChange($event)\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          (keyup.enter)=\"onEnter()\"\r\n          [attr.data-qclabel]=\"_label\"\r\n          [attr.data-autoId]=\"toAutoId()\"\r\n          [attr.aria-invalid]=\"_errorVisible ? 'true' : null\"\r\n          [attr.aria-describedby]=\"_errorMessage ? errorId : null\" />\r\n      </mat-date-range-input>\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      <!-- why: hai n\u00FAt suffix tr\u01B0\u1EDBc \u0111\u00E2y l\u00E0 <sd-icon (click)> tr\u1EA7n \u2014 kh\u00F4ng Tab t\u1EDBi \u0111\u01B0\u1EE3c, kh\u00F4ng c\u00F3\r\n           accessible name, v\u00E0 lint b\u1ECF qua v\u00EC <sd-icon> kh\u00F4ng ph\u1EA3i ph\u1EA7n t\u1EED DOM chu\u1EA9n. <button\r\n           type=\"button\"> l\u1EA5y s\u1EB5n Enter/Space + role; nh\u00E3n l\u1EA5y t\u1EEB i18n (xem m\u1EE5c compromise). -->\r\n      @if ((control1.value || control2.value) && !_bare) {\r\n        <button\r\n          type=\"button\"\r\n          matSuffix\r\n          class=\"cursor-pointer sd-suffix-icon sd-suffix-btn\"\r\n          [attr.aria-label]=\"'core.form.date-range.clear' | sdTranslate\"\r\n          (click)=\"clear()\">\r\n          <sd-icon name=\"cancel\"></sd-icon>\r\n        </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        matSuffix\r\n        class=\"cursor-pointer sd-suffix-icon sd-suffix-btn\"\r\n        [attr.aria-label]=\"'core.form.date-range.open-picker' | sdTranslate\"\r\n        (click)=\"onOpenPicker($event)\">\r\n        <sd-icon name=\"today\"></sd-icon>\r\n      </button>\r\n\r\n      <mat-date-range-picker [touchUi]=\"isMobileOrTablet\" (closed)=\"onClosePicker()\" #picker></mat-date-range-picker>\r\n    </mat-form-field>\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-suffix-btn{display:inline-flex;align-items:center;justify-content:center;border:0;padding:0;background:transparent;cursor:pointer;color:inherit}.sd-suffix-btn:disabled{cursor:default;opacity:.5}:host(.sd-bare){position:relative}.sd-inline-view{cursor:pointer;display:inline-flex;align-items:center;width:100%;padding:1px 6px;border-radius:4px;background-color:#0000000a;transition:background-color .15s ease}.sd-inline-view:hover{background-color:#00000014}.sd-inline-view .sd-inline-clear{display:none;align-items:center;margin-left:4px;padding:0;border:0;background:transparent;cursor:pointer;line-height:0;color:var(--sd-text-secondary, #6b7280);transition:color .15s ease}.sd-inline-view .sd-inline-clear sd-icon{font-size:16px;width:16px;height:16px}.sd-inline-view .sd-inline-clear:hover{color:var(--sd-error, #b32626)}.sd-inline-view:hover .sd-inline-clear{display:inline-flex}.sd-inline-editor{position:absolute;inset:0;opacity:0;pointer-events:none}.sd-inline-editor ::ng-deep *{pointer-events:none!important}:host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-disabled-bg)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-start-date:disabled,:host ::ng-deep .mat-mdc-form-field input.mat-mdc-end-date:disabled{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .sd-md mat-date-range-input{padding-top:12px;font-size:14px}:host ::ng-deep .sd-sm mat-date-range-input{padding-top:4px;font-size:14px}:host(.sd-bare){display:inline-flex;align-items:center}:host(.sd-bare) ::ng-deep .mat-mdc-form-field{width:auto}:host(.sd-bare) ::ng-deep .mat-mdc-text-field-wrapper{padding:0;background:transparent}:host(.sd-bare) ::ng-deep .mat-mdc-form-field-flex{padding:0;align-items:center}:host(.sd-bare) ::ng-deep .mdc-notched-outline{display:none}:host(.sd-bare) ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host(.sd-bare) ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}\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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "component", type: SdView, selector: "sd-view", inputs: ["label", "value", "display", "hyperlink", "labelTemplate", "valueTemplate", "selectedItems"] }, { kind: "pipe", type: SdTranslatePipe, name: "sdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdDateRange, decorators: [{
             type: Component,
@@ -357,8 +528,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         MatNativeDateModule,
                         SdLabel,
                         SdView,
-                        TranslatePipe,
-                    ], template: "@let _sdLabelDef = sdLabelDef();\n@let _label = label();\n@let _appearance = appearance();\n@let _required = required();\n@let _hideInlineError = hideInlineError();\n@let _errorMessage = errorMessage();\n@let _helperText = helperText();\n@let _resolvedMin = resolvedMin();\n@let _resolvedMax = resolvedMax();\n@let _size = size();\n@let _isInline = isInline();\n@let _bare = _isInline;\n@let _hasValue = !!(control1.value || control2.value);\n@let _labelTemplate = _sdLabelDef?.templateRef ?? undefined;\n\n@if (isViewed()) {\n  <sd-view\n    [label]=\"_label\"\n    [labelTemplate]=\"_labelTemplate\"\n    [value]=\"valueModel()\"\n    [display]=\"formatted()\"\n    [valueTemplate]=\"sdValueTemplate()\">\n  </sd-view>\n} @else {\n  @if (_isInline) {\n    <!-- why: inline \u2014 sd-view l\u00E0 \"m\u1EB7t\" + trigger; range editor render \u1EA9n (.sd-inline-editor) ch\u1EC9 \u0111\u1EC3 m\u1EDF picker. -->\n    <span class=\"sd-inline-view\" role=\"button\" tabindex=\"0\" (click)=\"enterInlineEdit()\" (keydown.enter)=\"enterInlineEdit()\">\n      <sd-view\n        [label]=\"_label\"\n        [labelTemplate]=\"_labelTemplate\"\n        [value]=\"valueModel()\"\n        [display]=\"formatted()\"\n        [valueTemplate]=\"sdValueTemplate()\">\n      </sd-view>\n      @if (clearable() && _hasValue && !_required && !formControl.disabled) {\n        <button type=\"button\" class=\"sd-inline-clear\" (click)=\"$event.stopPropagation(); clear()\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      }\n    </span>\n  }\n\n  <div [class.sd-inline-editor]=\"_isInline\">\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    <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=\"below\" name=\"info\"></sd-icon>\n          }\n        </mat-label>\n      }\n\n      <mat-date-range-input\n        [max]=\"_resolvedMax\"\n        [min]=\"_resolvedMin\"\n        [rangePicker]=\"picker\"\n        [disabled]=\"formControl.disabled\"\n        [required]=\"_required\"\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-error-message]=\"dataErrorMessage()\">\n        <input\n          aria-hidden=\"true\"\n          [id]=\"id1\"\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          matStartDate\n          [formControl]=\"control1\"\n          [placeholder]=\"formControl.disabled ? '' : ('core.form.date-range.from' | translate)\"\n          (dateInput)=\"onStartChange($event)\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (keyup.enter)=\"onEnter()\"\n          [attr.data-qclabel]=\"_label\"\n          [attr.data-autoId]=\"fromAutoId()\" />\n\n        <input\n          aria-hidden=\"true\"\n          [id]=\"id2\"\n          [autocomplete]=\"id2\"\n          autocorrect=\"off\"\n          matEndDate\n          [formControl]=\"control2\"\n          [placeholder]=\"formControl.disabled ? '' : ('core.form.date-range.to' | translate)\"\n          (dateInput)=\"onEndChange($event)\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (keyup.enter)=\"onEnter()\"\n          [attr.data-qclabel]=\"_label\"\n          [attr.data-autoId]=\"toAutoId()\" />\n      </mat-date-range-input>\n\n      @if (_hideInlineError && _errorMessage && (formControl.touched || control1.touched || control2.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 || control1.touched || control2.touched)) {\n        <mat-error>{{ _errorMessage }}</mat-error>\n      }\n\n      @if ((control1.value || control2.value) && !_bare) {\n        <sd-icon class=\"cursor-pointer sd-suffix-icon\" (click)=\"clear()\" matSuffix name=\"cancel\"></sd-icon>\n      }\n\n      <sd-icon class=\"cursor-pointer sd-suffix-icon\" (click)=\"onOpenPicker($event)\" matSuffix name=\"today\"></sd-icon>\n\n      <mat-date-range-picker [touchUi]=\"isMobileOrTablet\" (closed)=\"onClosePicker()\" #picker></mat-date-range-picker>\n    </mat-form-field>\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}:host(.sd-bare){position:relative}.sd-inline-view{cursor:pointer;display:inline-flex;align-items:center;width:100%;padding:1px 6px;border-radius:4px;background-color:#0000000a;transition:background-color .15s ease}.sd-inline-view:hover{background-color:#00000014}.sd-inline-view .sd-inline-clear{display:none;align-items:center;margin-left:4px;padding:0;border:0;background:transparent;cursor:pointer;line-height:0;color:var(--sd-text-secondary, #6b7280);transition:color .15s ease}.sd-inline-view .sd-inline-clear sd-icon{font-size:16px;width:16px;height:16px}.sd-inline-view .sd-inline-clear:hover{color:var(--sd-error, #b32626)}.sd-inline-view:hover .sd-inline-clear{display:inline-flex}.sd-inline-editor{position:absolute;inset:0;opacity:0;pointer-events:none}.sd-inline-editor ::ng-deep *{pointer-events:none!important}:host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-disabled-bg)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-start-date:disabled,:host ::ng-deep .mat-mdc-form-field input.mat-mdc-end-date:disabled{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .sd-md mat-date-range-input{padding-top:12px;font-size:14px}:host ::ng-deep .sd-sm mat-date-range-input{padding-top:4px;font-size:14px}:host(.sd-bare){display:inline-flex;align-items:center}:host(.sd-bare) ::ng-deep .mat-mdc-form-field{width:auto}:host(.sd-bare) ::ng-deep .mat-mdc-text-field-wrapper{padding:0;background:transparent}:host(.sd-bare) ::ng-deep .mat-mdc-form-field-flex{padding:0;align-items:center}:host(.sd-bare) ::ng-deep .mdc-notched-outline{display:none}:host(.sd-bare) ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host(.sd-bare) ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}\n"] }]
+                        SdTranslatePipe,
+                    ], template: "@let _sdLabelDef = sdLabelDef();\r\n@let _label = label();\r\n@let _appearance = appearance();\r\n@let _required = required();\r\n@let _hideInlineError = hideInlineError();\r\n@let _errorMessage = errorMessage();\r\n@let _helperText = helperText();\r\n@let _resolvedMin = resolvedMin();\r\n@let _resolvedMax = resolvedMax();\r\n@let _size = size();\r\n@let _isInline = isInline();\r\n@let _bare = _isInline;\r\n@let _hasValue = !!(control1.value || control2.value);\r\n@let _labelTemplate = _sdLabelDef?.templateRef ?? undefined;\r\n<!-- why: m\u1ED9t c\u1ED5ng gate duy nh\u1EA5t cho <mat-error>, aria-invalid v\u00E0 aria-describedby \u2014 tr\u01B0\u1EDBc \u0111\u00E2y\r\n     message hi\u1EC7n m\u00E0 hai \u00F4 nh\u1EADp kh\u00F4ng h\u1EC1 b\u00E1o invalid n\u00EAn screen reader kh\u00F4ng bi\u1EBFt \u0111ang l\u1ED7i. -->\r\n@let _errorVisible = !!_errorMessage && (formControl.touched || control1.touched || control2.touched);\r\n@let _showInlineError = !_hideInlineError && _errorVisible;\r\n\r\n@if (isViewed()) {\r\n  <sd-view\r\n    [label]=\"_label\"\r\n    [labelTemplate]=\"_labelTemplate\"\r\n    [value]=\"valueModel()\"\r\n    [display]=\"formatted()\"\r\n    [valueTemplate]=\"sdValueTemplate()\">\r\n  </sd-view>\r\n} @else {\r\n  @if (_isInline) {\r\n    <!-- why: inline \u2014 sd-view l\u00E0 \"m\u1EB7t\" + trigger; range editor render \u1EA9n (.sd-inline-editor) ch\u1EC9 \u0111\u1EC3 m\u1EDF picker. -->\r\n    <span class=\"sd-inline-view\" role=\"button\" tabindex=\"0\" (click)=\"enterInlineEdit()\" (keydown.enter)=\"enterInlineEdit()\">\r\n      <sd-view\r\n        [label]=\"_label\"\r\n        [labelTemplate]=\"_labelTemplate\"\r\n        [value]=\"valueModel()\"\r\n        [display]=\"formatted()\"\r\n        [valueTemplate]=\"sdValueTemplate()\">\r\n      </sd-view>\r\n      @if (clearable() && _hasValue && !_required && !formControl.disabled) {\r\n        <button type=\"button\" class=\"sd-inline-clear\" (click)=\"$event.stopPropagation(); clear()\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\r\n          <sd-icon name=\"close\"></sd-icon>\r\n        </button>\r\n      }\r\n    </span>\r\n  }\r\n\r\n  <div [class.sd-inline-editor]=\"_isInline\">\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    <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=\"below\" name=\"info\"></sd-icon>\r\n          }\r\n        </mat-label>\r\n      }\r\n\r\n      <mat-date-range-input\r\n        [max]=\"_resolvedMax\"\r\n        [min]=\"_resolvedMin\"\r\n        [rangePicker]=\"picker\"\r\n        [disabled]=\"formControl.disabled\"\r\n        [required]=\"_required\"\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-error-message]=\"dataErrorMessage()\">\r\n        <!-- why: B\u1ECE aria-hidden tr\u00EAn hai \u00F4 nh\u1EADp TH\u1EACT \u2014 c\u1EA3 hai \u0111\u1EC1u Tab t\u1EDBi v\u00E0 g\u00F5 \u0111\u01B0\u1EE3c, aria-hidden\r\n             ch\u1EC9 khi\u1EBFn screen reader \u0111\u1ECDc ra kho\u1EA3ng l\u1EB7ng \u1EDF \u0111\u00FAng ch\u1ED7 ng\u01B0\u1EDDi d\u00F9ng \u0111ang \u0111\u1EE9ng. -->\r\n        <input\r\n          [id]=\"id1\"\r\n          autocomplete=\"off\"\r\n          autocorrect=\"off\"\r\n          matStartDate\r\n          [formControl]=\"control1\"\r\n          [placeholder]=\"formControl.disabled ? '' : ('core.form.date-range.from' | sdTranslate)\"\r\n          (dateInput)=\"onStartChange($event)\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          (keyup.enter)=\"onEnter()\"\r\n          [attr.data-qclabel]=\"_label\"\r\n          [attr.data-autoId]=\"fromAutoId()\"\r\n          [attr.aria-invalid]=\"_errorVisible ? 'true' : null\"\r\n          [attr.aria-describedby]=\"_errorMessage ? errorId : null\" />\r\n\r\n        <input\r\n          [id]=\"id2\"\r\n          [autocomplete]=\"id2\"\r\n          autocorrect=\"off\"\r\n          matEndDate\r\n          [formControl]=\"control2\"\r\n          [placeholder]=\"formControl.disabled ? '' : ('core.form.date-range.to' | sdTranslate)\"\r\n          (dateInput)=\"onEndChange($event)\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          (keyup.enter)=\"onEnter()\"\r\n          [attr.data-qclabel]=\"_label\"\r\n          [attr.data-autoId]=\"toAutoId()\"\r\n          [attr.aria-invalid]=\"_errorVisible ? 'true' : null\"\r\n          [attr.aria-describedby]=\"_errorMessage ? errorId : null\" />\r\n      </mat-date-range-input>\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      <!-- why: hai n\u00FAt suffix tr\u01B0\u1EDBc \u0111\u00E2y l\u00E0 <sd-icon (click)> tr\u1EA7n \u2014 kh\u00F4ng Tab t\u1EDBi \u0111\u01B0\u1EE3c, kh\u00F4ng c\u00F3\r\n           accessible name, v\u00E0 lint b\u1ECF qua v\u00EC <sd-icon> kh\u00F4ng ph\u1EA3i ph\u1EA7n t\u1EED DOM chu\u1EA9n. <button\r\n           type=\"button\"> l\u1EA5y s\u1EB5n Enter/Space + role; nh\u00E3n l\u1EA5y t\u1EEB i18n (xem m\u1EE5c compromise). -->\r\n      @if ((control1.value || control2.value) && !_bare) {\r\n        <button\r\n          type=\"button\"\r\n          matSuffix\r\n          class=\"cursor-pointer sd-suffix-icon sd-suffix-btn\"\r\n          [attr.aria-label]=\"'core.form.date-range.clear' | sdTranslate\"\r\n          (click)=\"clear()\">\r\n          <sd-icon name=\"cancel\"></sd-icon>\r\n        </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        matSuffix\r\n        class=\"cursor-pointer sd-suffix-icon sd-suffix-btn\"\r\n        [attr.aria-label]=\"'core.form.date-range.open-picker' | sdTranslate\"\r\n        (click)=\"onOpenPicker($event)\">\r\n        <sd-icon name=\"today\"></sd-icon>\r\n      </button>\r\n\r\n      <mat-date-range-picker [touchUi]=\"isMobileOrTablet\" (closed)=\"onClosePicker()\" #picker></mat-date-range-picker>\r\n    </mat-form-field>\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-suffix-btn{display:inline-flex;align-items:center;justify-content:center;border:0;padding:0;background:transparent;cursor:pointer;color:inherit}.sd-suffix-btn:disabled{cursor:default;opacity:.5}:host(.sd-bare){position:relative}.sd-inline-view{cursor:pointer;display:inline-flex;align-items:center;width:100%;padding:1px 6px;border-radius:4px;background-color:#0000000a;transition:background-color .15s ease}.sd-inline-view:hover{background-color:#00000014}.sd-inline-view .sd-inline-clear{display:none;align-items:center;margin-left:4px;padding:0;border:0;background:transparent;cursor:pointer;line-height:0;color:var(--sd-text-secondary, #6b7280);transition:color .15s ease}.sd-inline-view .sd-inline-clear sd-icon{font-size:16px;width:16px;height:16px}.sd-inline-view .sd-inline-clear:hover{color:var(--sd-error, #b32626)}.sd-inline-view:hover .sd-inline-clear{display:inline-flex}.sd-inline-editor{position:absolute;inset:0;opacity:0;pointer-events:none}.sd-inline-editor ::ng-deep *{pointer-events:none!important}:host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-disabled-bg)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-start-date:disabled,:host ::ng-deep .mat-mdc-form-field input.mat-mdc-end-date:disabled{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}:host ::ng-deep .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .sd-md mat-date-range-input{padding-top:12px;font-size:14px}:host ::ng-deep .sd-sm mat-date-range-input{padding-top:4px;font-size:14px}:host(.sd-bare){display:inline-flex;align-items:center}:host(.sd-bare) ::ng-deep .mat-mdc-form-field{width:auto}:host(.sd-bare) ::ng-deep .mat-mdc-text-field-wrapper{padding:0;background:transparent}:host(.sd-bare) ::ng-deep .mat-mdc-form-field-flex{padding:0;align-items:center}:host(.sd-bare) ::ng-deep .mdc-notched-outline{display:none}:host(.sd-bare) ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}:host(.sd-bare) ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}\n"] }]
         }], ctorParameters: () => [] });
 
 /**