@sdcorejs/angular 20.1.6 → 20.2.0

package/fesm2022/sdcorejs-angular-forms-chip-calendar.mjs

@@ -3,7 +3,7 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Pipe, inject, ChangeDetectorRef, viewChild, input, computed, booleanAttribute, model, output, contentChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
-import { Utilities } from '@sdcorejs/utils/fns';
+import { Utilities, DateUtilities } from '@sdcorejs/utils/fns';
 import * as i2 from '@angular/forms';
 import { NgForm, FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -23,10 +23,9 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { SdView } from '@sdcorejs/angular/components/view';
 import { SdViewDefDirective, SdLabelDefDirective } from '@sdcorejs/angular/forms/directives';
 import { SdLabel } from '@sdcorejs/angular/forms/label';
-import { sdFormControlState, sdViewedTransform, sdViewedInline, SdFormControl, ɵsdFormControlConnector as _sdFormControlConnector } from '@sdcorejs/angular/forms/models';
+import { ɵsdTimerScope as _sdTimerScope, sdFormControlState, sdViewedTransform, sdViewedInline, SdFormControl, ɵsdFormControlConnector as _sdFormControlConnector } from '@sdcorejs/angular/forms/models';
 import { I18nService } from '@sdcorejs/angular/i18n';
 import { sdIsEmpty, sdSerializeDataValue } from '@sdcorejs/angular/utilities/data-state';
-import { DateUtilities } from '@sdcorejs/angular/utilities';
 import { Subscription } from 'rxjs';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
 
@@ -61,9 +60,15 @@ class SdChipCalendarErrorStateMatcher {
 class SdChipCalendar {
     #ref = inject(ChangeDetectorRef);
     #i18n = inject(I18nService);
+    // why: focus hoãn 100ms; handle phải bị clear khi destroy, nếu không timer vẫn chạm
+    // input của view đã tháo.
+    #timers = _sdTimerScope();
     #subscription = new Subscription();
     #name = Utilities.generateUuid();
     #isBlurring = false;
+    /** why: id ổn định của <mat-error> để ô nhập chip 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 = `sd-chip-calendar-error-${Utilities.generateUuid()}`;
     menuTrigger = viewChild(MatMenuTrigger, ...(ngDevMode ? [{ debugName: "menuTrigger" }] : []));
     calendar = viewChild(MatCalendar, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
     autoIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "autoIdInput", alias: 'autoId',
@@ -162,20 +167,29 @@ class SdChipCalendar {
     isFocused = false;
     #inputControl = new FormControl();
     #formControl = new SdFormControl();
+    // why: `min`/`max` là validator do CHÍNH component sở hữu; `required` đi qua option riêng của
+    // connector. Connector chỉ add/remove đúng phần này nên validator do consumer tự gắn vào
+    // `formControl` public không bị xoá — trước đây `clearValidators()` + `setValidators()` xoá sạch.
+    #validators = computed(() => {
+        const validators = [];
+        const min = this.min();
+        const max = this.max();
+        if (min > 0)
+            validators.push(Validators.minLength(min));
+        if (max > 0)
+            validators.push(Validators.maxLength(max));
+        return validators;
+    }, ...(ngDevMode ? [{ debugName: "#validators" }] : []));
     #formConnector = _sdFormControlConnector({
         form: this.form,
         name: computed(() => this.name() || this.#name),
         control: computed(() => this.#formControl),
+        validators: this.#validators,
+        required: this.required,
     });
     #matcher;
     separatorKeysCodes = [ENTER, COMMA];
     constructor() {
-        effect(() => {
-            this.required();
-            this.min();
-            this.max();
-            this.#updateValidator();
-        });
         effect(() => {
             const values = this.model();
             if (Array.isArray(values)) {
@@ -207,17 +221,26 @@ class SdChipCalendar {
     get inputControl() {
         return this.#inputControl;
     }
+    // why: PHẢI đọc `required`/`min`/`max` VÔ ĐIỀU KIỆN ở đây. Connector cài/gỡ validator bằng
+    // `updateValueAndValidity({ emitEvent: false })` → `formControl.errors` đổi mà KHÔNG phát event
+    // nào → `#state` (sdFormControlState) không tick. Nếu computed chỉ phụ thuộc `#state` thì bật
+    // `[required]` lúc RUNTIME sẽ giữ nguyên message cũ dưới OnPush: control invalid, viền đỏ, nhưng
+    // KHÔNG có chữ. Đọc sớm (trước `if (!errors) return`) để dependency được ghi nhận cả khi control
+    // đang hợp lệ — đọc trong nhánh `errors[...]` thì lần chạy "không lỗi" không đăng ký dependency.
     errorMessage = computed(() => {
         void this.#state();
+        void this.required();
+        const min = this.min();
+        const max = this.max();
         const errors = this.#formControl.errors;
         if (!errors)
             return undefined;
         if (errors['required'])
             return this.#i18n.t('core.form.chip-calendar.required');
         if (errors['minlength'])
-            return this.#i18n.t('core.form.chip-calendar.minlength', { min: this.min() });
+            return this.#i18n.t('core.form.chip-calendar.minlength', { min });
         if (errors['maxlength'])
-            return this.#i18n.t('core.form.chip-calendar.maxlength', { max: this.max() });
+            return this.#i18n.t('core.form.chip-calendar.maxlength', { max });
         return undefined;
     }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
     get matcher() {
@@ -231,24 +254,6 @@ class SdChipCalendar {
     ngOnDestroy() {
         this.#subscription.unsubscribe();
     }
-    #updateValidator = () => {
-        this.#formControl.clearValidators();
-        this.#formControl.clearAsyncValidators();
-        const validators = [];
-        const asyncValidators = [];
-        if (this.required()) {
-            validators.push(Validators.required);
-        }
-        if (this.min() > 0) {
-            validators.push(Validators.minLength(this.min()));
-        }
-        if (this.max() > 0) {
-            validators.push(Validators.maxLength(this.max()));
-        }
-        this.#formControl.setValidators(validators);
-        this.#formControl.setAsyncValidators(asyncValidators);
-        this.#formControl.updateValueAndValidity();
-    };
     #clickChip = (event, item) => {
         event.stopPropagation();
         event.stopImmediatePropagation();
@@ -259,9 +264,11 @@ class SdChipCalendar {
     #remove = (item) => {
         const values = this.#formControl.value ?? [];
         if (typeof item === 'string') {
-            this.#formControl.setValue(values.filter(value => item !== value));
-            this.model.set(this.#formControl.value);
-            this.sdChange.emit(this.#formControl.value);
+            // why: `filter` đã trả mảng mới nên reference đổi → `model.set` phát `modelChange`.
+            const next = values.filter(value => item !== value);
+            this.#formControl.setValue(next);
+            this.model.set(next);
+            this.sdChange.emit(next);
         }
         this.#inputControl.setValue('');
         this.#focus();
@@ -272,10 +279,13 @@ class SdChipCalendar {
         if (item) {
             if (typeof item === 'string' || typeof item === 'number') {
                 if (!values.includes(item)) {
-                    values.push(item);
-                    this.#formControl.setValue(values);
-                    this.model.set(this.#formControl.value);
-                    this.sdChange.emit(this.#formControl.value);
+                    // why: PHẢI tạo mảng MỚI. `values` là chính mảng của consumer (model đi thẳng vào
+                    // formControl), nên `push` vừa sửa trộm mảng của họ, vừa giữ nguyên reference —
+                    // `model()` dùng equality Object.is nên `model.set(sameRef)` KHÔNG phát `modelChange`.
+                    const next = [...values, item];
+                    this.#formControl.setValue(next);
+                    this.model.set(next);
+                    this.sdChange.emit(next);
                 }
             }
             const inputEl = this.input();
@@ -296,7 +306,8 @@ class SdChipCalendar {
     #focus = () => {
         this.isFocused = true;
         this.#isBlurring = false;
-        setTimeout(() => {
+        // why: vẫn 100ms như cũ — chỉ scope handle theo DestroyRef.
+        this.#timers.schedule(() => {
             if (this.isFocused) {
                 this.input()?.nativeElement?.focus();
             }
@@ -314,17 +325,13 @@ class SdChipCalendar {
         const value = DateUtilities.toFormat(date, 'yyyy/MM/dd');
         const values = this.#formControl.value ?? [];
         if (value) {
-            if (!values.includes(value)) {
-                values.push(value);
-                this.#formControl.setValue(values);
-                this.model.set(this.#formControl.value);
-                this.sdChange.emit(this.#formControl.value);
-            }
-            else {
-                this.#formControl.setValue(values.filter(date => value !== date));
-                this.model.set(this.#formControl.value);
-                this.sdChange.emit(this.#formControl.value);
-            }
+            // why: toggle ngày — cả nhánh thêm lẫn nhánh bỏ đều dựng mảng MỚI. Nhánh thêm trước đây
+            // `push` thẳng vào mảng của consumer: reference không đổi nên `model.set` im lặng
+            // (Object.is) → `[(model)]` không nhận ngày vừa chọn, mà mảng gốc lại bị sửa trộm.
+            const next = values.includes(value) ? values.filter(date => value !== date) : [...values, value];
+            this.#formControl.setValue(next);
+            this.model.set(next);
+            this.sdChange.emit(next);
             this.calendar()?.updateTodaysDate();
             this.#ref.markForCheck();
         }
@@ -345,12 +352,22 @@ class SdChipCalendar {
     onRemove = (item) => this.#remove(item);
     onSelect = (event) => this.#select(event);
     onClick = () => this.#onClick();
+    /**
+     * why: khi `sdViewDef` đang hiển thị thì bên trong KHÔNG còn phần tử nào focus được, nên
+     * click là lối vào DUY NHẤT để chuyển sang chế độ sửa. Bàn phím phải mở được y hệt chuột
+     * → Enter/Space chạy chung handler. preventDefault chặn Space cuộn trang (hành vi mặc
+     * định của phần tử không phải <button>).
+     */
+    onViewKeydown = (event) => {
+        event.preventDefault();
+        this.#onClick();
+    };
     onClear = (evt) => this.#clear(evt);
     onSelectDate = (date) => this.#selectDate(date);
     onCloseCalendar = () => this.#closeCalendar();
     dateClass = (cellDate) => this.#dateClass(cellDate);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdChipCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdChipCalendar, isStandalone: true, selector: "sd-chip-calendar", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", 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 }, hyperlink: { classPropertyName: "hyperlink", publicName: "hyperlink", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", sdChange: "sdChange" }, host: { properties: { "class.sd-has-label": "!!label()", "class.sd-viewed": "isViewed()" } }, queries: [{ propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }, { propertyName: "sdLabelDef", first: true, predicate: SdLabelDefDirective, descendants: true, isSignal: true }, { propertyName: "sdLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true, isSignal: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: MatCalendar, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _label = label();\n@let _appearance = appearance();\n@let _required = required();\n@let _isViewed = isViewed();\n@let _hideInlineError = hideInlineError();\n@let _sdViewDef = sdViewDef();\n@let _labelTemplate = (sdLabelTemplate() ?? sdLabelDef()?.templateRef) || undefined;\n@let _valueTemplate = (sdValueTemplate() ?? _sdViewDef?.templateRef) || undefined;\n@let _errorMessage = errorMessage();\n@let _size = size();\n@let _removable = removable();\n\n@if (_isViewed) {\n  <sd-view\n    [label]=\"_label\"\n    [labelTemplate]=\"_labelTemplate\"\n    [value]=\"formControl.value\"\n    [display]=\"formControl.value\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"_valueTemplate\">\n  </sd-view>\n} @else {\n  @if (!_appearance && _labelTemplate) {\n    <ng-container *ngTemplateOutlet=\"_labelTemplate\"></ng-container>\n  }\n  @if (!_appearance && _label && !_labelTemplate) {\n    <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\n  }\n\n  <div\n    class=\"d-flex align-items-center\"\n    [class.sd-view]=\"!!_sdViewDef?.templateRef\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\n    @if (_sdViewDef?.templateRef && !isFocused) {\n      <ng-container *ngTemplateOutlet=\"_sdViewDef!.templateRef; context: { value: formControl.value }\"></ng-container>\n    } @else {\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>{{ _label }}</mat-label>\n        }\n        <mat-chip-grid [formControl]=\"formControl\" #chipList [class.sd-md]=\"_size === 'md'\" [class.sd-sm]=\"_size === 'sm'\">\n          @for (item of formControl.value; track item) {\n            @if (item) {\n              <mat-chip-row\n                [class.sd-md]=\"_size === 'md'\"\n                [class.sd-sm]=\"_size === 'sm'\"\n                [removable]=\"_removable\"\n                (removed)=\"onRemove(item)\"\n                [disabled]=\"inputControl.disabled\"\n                (click)=\"onClickChip($event, item)\"\n                [value]=\"item\">\n                <span>{{ item | date: 'dd/MM/yyyy' }}</span>\n                @if (!inputControl.disabled && item | sdRemovableChip: _removable) {\n                  <sd-icon matChipRemove name=\"cancel\"></sd-icon>\n                }\n              </mat-chip-row>\n            }\n          }\n\n          <input\n            class=\"sd-chip-input\"\n            [formControl]=\"inputControl\"\n            [placeholder]=\"placeholder() || _label\"\n            [matChipInputFor]=\"chipList\"\n            autocomplete=\"off\"\n            [errorStateMatcher]=\"matcher\"\n            [matMenuTriggerFor]=\"calendarMenu\"\n            [required]=\"_required\"\n            matInput\n            [attr.data-autoId]=\"autoId()\"\n            [attr.data-disabled]=\"dataDisabled()\"\n            [attr.data-empty]=\"dataEmpty()\"\n            [attr.data-value]=\"dataValue()\"\n            [attr.data-count]=\"dataCount()\"\n            [attr.data-required]=\"dataRequired()\"\n            [attr.data-error-message]=\"dataErrorMessage()\"\n            readonly\n            #input />\n        </mat-chip-grid>\n\n        <mat-menu #calendarMenu=\"matMenu\" overlapTrigger=\"false\" (closed)=\"onCloseCalendar()\">\n          <div style=\"width: 280px\" (click)=\"$event.stopPropagation()\" aria-hidden=\"true\">\n            <mat-calendar (selectedChange)=\"onSelectDate($event)\" [dateClass]=\"dateClass\"> </mat-calendar>\n          </div>\n        </mat-menu>\n        @if (_hideInlineError && _errorMessage && formControl.touched) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n\n        @if (!_hideInlineError && _errorMessage && formControl.touched) {\n          <mat-error>{{ _errorMessage }}</mat-error>\n        }\n      </mat-form-field>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.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{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep .mat-mdc-form-field.no-padding-wrapper .mat-mdc-text-field-wrapper{padding-bottom:0}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip{padding:7px 10px;min-height:26px}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{padding:7px 7px 7px 10px}:host ::ng-deep .mat-mdc-chip-row.sd-sm{--mdc-chip-label-text-size: 12px;--mdc-chip-container-height: 20px}:host ::ng-deep .mat-mdc-chip-set.sd-md{margin-top:10px}:host ::ng-deep .mat-mdc-chip-set.sd-sm{margin-top:2px}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}mat-form-field{width:100%}mat-chip-listbox{display:flex;flex-wrap:wrap;gap:4px}::ng-deep .sd-chip-calendar-selected-date .mat-calendar-body-cell-content{background-color:var(--sd-primary-light)!important;color:var(--sd-primary)!important;border-radius:50%}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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: i1.DatePipe, name: "date" }, { kind: "pipe", type: SdRemovableChipPipe, name: "sdRemovableChip" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdChipCalendar, isStandalone: true, selector: "sd-chip-calendar", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", 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 }, hyperlink: { classPropertyName: "hyperlink", publicName: "hyperlink", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", sdChange: "sdChange" }, host: { properties: { "class.sd-has-label": "!!label()", "class.sd-viewed": "isViewed()" } }, queries: [{ propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }, { propertyName: "sdLabelDef", first: true, predicate: SdLabelDefDirective, descendants: true, isSignal: true }, { propertyName: "sdLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true, isSignal: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: MatCalendar, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _label = label();\r\n@let _appearance = appearance();\r\n@let _required = required();\r\n@let _isViewed = isViewed();\r\n@let _hideInlineError = hideInlineError();\r\n@let _sdViewDef = sdViewDef();\r\n@let _labelTemplate = (sdLabelTemplate() ?? sdLabelDef()?.templateRef) || undefined;\r\n@let _valueTemplate = (sdValueTemplate() ?? _sdViewDef?.templateRef) || undefined;\r\n@let _errorMessage = errorMessage();\r\n@let _size = size();\r\n@let _removable = removable();\r\n<!-- why: m\u1ED9t c\u1ED5ng gate duy nh\u1EA5t cho <mat-error>, aria-invalid v\u00E0 aria-describedby. -->\r\n@let _errorVisible = !!_errorMessage && formControl.touched;\r\n@let _showInlineError = !_hideInlineError && _errorVisible;\r\n@let _viewTemplate = _sdViewDef?.templateRef;\r\n\r\n@if (_isViewed) {\r\n  <sd-view\r\n    [label]=\"_label\"\r\n    [labelTemplate]=\"_labelTemplate\"\r\n    [value]=\"formControl.value\"\r\n    [display]=\"formControl.value\"\r\n    [hyperlink]=\"hyperlink()\"\r\n    [valueTemplate]=\"_valueTemplate\">\r\n  </sd-view>\r\n} @else {\r\n  @if (!_appearance && _labelTemplate) {\r\n    <ng-container *ngTemplateOutlet=\"_labelTemplate\"></ng-container>\r\n  }\r\n  @if (!_appearance && _label && !_labelTemplate) {\r\n    <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\r\n  }\r\n\r\n  <!-- why: div ch\u1EC9 l\u00E0 h\u1ED9p layout \u2014 aria-hidden=\"true\" c\u0169 \u1EA9n C\u1EA2 c\u00E2y con (chip, \u00F4 nh\u1EADp, <mat-error>)\r\n       kh\u1ECFi accessibility tree. \u1EDE \u0111\u00E2y (click) KH\u00D4NG ph\u1EA3i ti\u1EC7n \u00EDch chu\u1ED9t th\u1EEBa nh\u01B0 c\u00E1c control kh\u00E1c:\r\n       khi sdViewDef \u0111ang hi\u1EC3n th\u1ECB th\u00EC kh\u00F4ng c\u00F3 ph\u1EA7n t\u1EED focus \u0111\u01B0\u1EE3c n\u00E0o b\u00EAn trong, n\u00EAn click l\u00E0 l\u1ED1i\r\n       v\u00E0o DUY NH\u1EA4T. V\u00EC v\u1EADy handler \u0111\u01B0\u1EE3c chuy\u1EC3n h\u1EB3n xu\u1ED1ng ph\u1EA7n t\u1EED view v\u00E0 ph\u1EA7n t\u1EED \u0111\u00F3 nh\u1EADn\r\n       role=\"button\" + tabindex=\"0\" + keydown Enter/Space; div ngo\u00E0i kh\u00F4ng c\u00F2n handler n\u00E0o. -->\r\n  <div\r\n    class=\"d-flex align-items-center\"\r\n    [class.sd-view]=\"!!_viewTemplate\"\r\n    [class.c-focused]=\"isFocused\"\r\n    [class.c-disabled]=\"formControl.disabled\">\r\n    @if (_viewTemplate && !isFocused) {\r\n      <!-- why: KH\u00D4NG \u0111\u1EB7t aria-label \u2014 n\u1ED9i dung sdViewDef ch\u00EDnh l\u00E0 nh\u00E3n nh\u00ECn th\u1EA5y \u0111\u01B0\u1EE3c, aria-label\r\n           s\u1EBD ghi \u0111\u00E8 v\u00E0 l\u00E0m AT \u0111\u1ECDc kh\u00E1c ch\u1EEF tr\u00EAn m\u00E0n h\u00ECnh. -->\r\n      <div\r\n        class=\"sd-chip-calendar__view-trigger\"\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        (click)=\"onClick()\"\r\n        (keydown.enter)=\"onViewKeydown($event)\"\r\n        (keydown.space)=\"onViewKeydown($event)\">\r\n        <ng-container *ngTemplateOutlet=\"_viewTemplate; context: { value: formControl.value }\"></ng-container>\r\n      </div>\r\n    } @else {\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>{{ _label }}</mat-label>\r\n        }\r\n        <mat-chip-grid [formControl]=\"formControl\" #chipList [class.sd-md]=\"_size === 'md'\" [class.sd-sm]=\"_size === 'sm'\">\r\n          @for (item of formControl.value; track item) {\r\n            @if (item) {\r\n              <mat-chip-row\r\n                [class.sd-md]=\"_size === 'md'\"\r\n                [class.sd-sm]=\"_size === 'sm'\"\r\n                [removable]=\"_removable\"\r\n                (removed)=\"onRemove(item)\"\r\n                [disabled]=\"inputControl.disabled\"\r\n                (click)=\"onClickChip($event, item)\"\r\n                [value]=\"item\">\r\n                <span>{{ item | date: 'dd/MM/yyyy' }}</span>\r\n                @if (!inputControl.disabled && item | sdRemovableChip: _removable) {\r\n                  <sd-icon matChipRemove name=\"cancel\"></sd-icon>\r\n                }\r\n              </mat-chip-row>\r\n            }\r\n          }\r\n\r\n          <input\r\n            class=\"sd-chip-input\"\r\n            [formControl]=\"inputControl\"\r\n            [placeholder]=\"placeholder() || _label\"\r\n            [matChipInputFor]=\"chipList\"\r\n            autocomplete=\"off\"\r\n            [errorStateMatcher]=\"matcher\"\r\n            [matMenuTriggerFor]=\"calendarMenu\"\r\n            [required]=\"_required\"\r\n            matInput\r\n            [attr.data-autoId]=\"autoId()\"\r\n            [attr.data-disabled]=\"dataDisabled()\"\r\n            [attr.data-empty]=\"dataEmpty()\"\r\n            [attr.data-value]=\"dataValue()\"\r\n            [attr.data-count]=\"dataCount()\"\r\n            [attr.data-required]=\"dataRequired()\"\r\n            [attr.data-error-message]=\"dataErrorMessage()\"\r\n            [attr.aria-invalid]=\"_errorVisible ? 'true' : null\"\r\n            [attr.aria-describedby]=\"_errorMessage ? errorId : null\"\r\n            readonly\r\n            #input />\r\n        </mat-chip-grid>\r\n\r\n        <mat-menu #calendarMenu=\"matMenu\" overlapTrigger=\"false\" (closed)=\"onCloseCalendar()\">\r\n          <!-- why: aria-hidden=\"true\" \u1EDF \u0111\u00E2y t\u1EEBng \u1EA9n NGUY\u00CAN <mat-calendar> \u2014 t\u1EE9c to\u00E0n b\u1ED9 l\u01B0\u1EDBi ng\u00E0y,\r\n               n\u00FAt chuy\u1EC3n th\u00E1ng v\u00E0 \u00F4 ng\u00E0y \u0111ang ch\u1ECDn \u2014 kh\u1ECFi accessibility tree, d\u00F9 l\u1ECBch v\u1EABn nh\u1EADn\r\n               focus v\u00E0 \u0111i\u1EC1u h\u01B0\u1EDBng b\u1EB1ng ph\u00EDm m\u0169i t\u00EAn. role=\"presentation\" ch\u1EC9 v\u00F4 hi\u1EC7u ho\u00E1 c\u00E1i div\r\n               b\u1ECDc (n\u00F3 ch\u1EC9 t\u1ED3n t\u1EA1i \u0111\u1EC3 ch\u1EB7n n\u1ED5i b\u1ECDt click l\u00E0m \u0111\u00F3ng menu), KH\u00D4NG lan xu\u1ED1ng l\u1ECBch. -->\r\n          <div style=\"width: 280px\" role=\"presentation\" (click)=\"$event.stopPropagation()\">\r\n            <mat-calendar (selectedChange)=\"onSelectDate($event)\" [dateClass]=\"dateClass\"> </mat-calendar>\r\n          </div>\r\n        </mat-menu>\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      </mat-form-field>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";.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{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep .mat-mdc-form-field.no-padding-wrapper .mat-mdc-text-field-wrapper{padding-bottom:0}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip{padding:7px 10px;min-height:26px}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{padding:7px 7px 7px 10px}:host ::ng-deep .mat-mdc-chip-row.sd-sm{--mdc-chip-label-text-size: 12px;--mdc-chip-container-height: 20px}:host ::ng-deep .mat-mdc-chip-set.sd-md{margin-top:10px}:host ::ng-deep .mat-mdc-chip-set.sd-sm{margin-top:2px}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}mat-form-field{width:100%}mat-chip-listbox{display:flex;flex-wrap:wrap;gap:4px}::ng-deep .sd-chip-calendar-selected-date .mat-calendar-body-cell-content{background-color:var(--sd-primary-light)!important;color:var(--sd-primary)!important;border-radius:50%}.sd-chip-calendar__view-trigger{display:flex;align-items:center;width:100%;cursor:pointer}.sd-chip-calendar__view-trigger:focus-visible{outline:2px solid var(--sd-primary, #1565c0);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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: i1.DatePipe, name: "date" }, { kind: "pipe", type: SdRemovableChipPipe, name: "sdRemovableChip" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdChipCalendar, decorators: [{
             type: Component,
@@ -371,7 +388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         SdLabel,
                         SdView,
                         SdRemovableChipPipe,
-                    ], template: "@let _label = label();\n@let _appearance = appearance();\n@let _required = required();\n@let _isViewed = isViewed();\n@let _hideInlineError = hideInlineError();\n@let _sdViewDef = sdViewDef();\n@let _labelTemplate = (sdLabelTemplate() ?? sdLabelDef()?.templateRef) || undefined;\n@let _valueTemplate = (sdValueTemplate() ?? _sdViewDef?.templateRef) || undefined;\n@let _errorMessage = errorMessage();\n@let _size = size();\n@let _removable = removable();\n\n@if (_isViewed) {\n  <sd-view\n    [label]=\"_label\"\n    [labelTemplate]=\"_labelTemplate\"\n    [value]=\"formControl.value\"\n    [display]=\"formControl.value\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"_valueTemplate\">\n  </sd-view>\n} @else {\n  @if (!_appearance && _labelTemplate) {\n    <ng-container *ngTemplateOutlet=\"_labelTemplate\"></ng-container>\n  }\n  @if (!_appearance && _label && !_labelTemplate) {\n    <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\n  }\n\n  <div\n    class=\"d-flex align-items-center\"\n    [class.sd-view]=\"!!_sdViewDef?.templateRef\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\n    @if (_sdViewDef?.templateRef && !isFocused) {\n      <ng-container *ngTemplateOutlet=\"_sdViewDef!.templateRef; context: { value: formControl.value }\"></ng-container>\n    } @else {\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>{{ _label }}</mat-label>\n        }\n        <mat-chip-grid [formControl]=\"formControl\" #chipList [class.sd-md]=\"_size === 'md'\" [class.sd-sm]=\"_size === 'sm'\">\n          @for (item of formControl.value; track item) {\n            @if (item) {\n              <mat-chip-row\n                [class.sd-md]=\"_size === 'md'\"\n                [class.sd-sm]=\"_size === 'sm'\"\n                [removable]=\"_removable\"\n                (removed)=\"onRemove(item)\"\n                [disabled]=\"inputControl.disabled\"\n                (click)=\"onClickChip($event, item)\"\n                [value]=\"item\">\n                <span>{{ item | date: 'dd/MM/yyyy' }}</span>\n                @if (!inputControl.disabled && item | sdRemovableChip: _removable) {\n                  <sd-icon matChipRemove name=\"cancel\"></sd-icon>\n                }\n              </mat-chip-row>\n            }\n          }\n\n          <input\n            class=\"sd-chip-input\"\n            [formControl]=\"inputControl\"\n            [placeholder]=\"placeholder() || _label\"\n            [matChipInputFor]=\"chipList\"\n            autocomplete=\"off\"\n            [errorStateMatcher]=\"matcher\"\n            [matMenuTriggerFor]=\"calendarMenu\"\n            [required]=\"_required\"\n            matInput\n            [attr.data-autoId]=\"autoId()\"\n            [attr.data-disabled]=\"dataDisabled()\"\n            [attr.data-empty]=\"dataEmpty()\"\n            [attr.data-value]=\"dataValue()\"\n            [attr.data-count]=\"dataCount()\"\n            [attr.data-required]=\"dataRequired()\"\n            [attr.data-error-message]=\"dataErrorMessage()\"\n            readonly\n            #input />\n        </mat-chip-grid>\n\n        <mat-menu #calendarMenu=\"matMenu\" overlapTrigger=\"false\" (closed)=\"onCloseCalendar()\">\n          <div style=\"width: 280px\" (click)=\"$event.stopPropagation()\" aria-hidden=\"true\">\n            <mat-calendar (selectedChange)=\"onSelectDate($event)\" [dateClass]=\"dateClass\"> </mat-calendar>\n          </div>\n        </mat-menu>\n        @if (_hideInlineError && _errorMessage && formControl.touched) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n\n        @if (!_hideInlineError && _errorMessage && formControl.touched) {\n          <mat-error>{{ _errorMessage }}</mat-error>\n        }\n      </mat-form-field>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.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{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep .mat-mdc-form-field.no-padding-wrapper .mat-mdc-text-field-wrapper{padding-bottom:0}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip{padding:7px 10px;min-height:26px}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{padding:7px 7px 7px 10px}:host ::ng-deep .mat-mdc-chip-row.sd-sm{--mdc-chip-label-text-size: 12px;--mdc-chip-container-height: 20px}:host ::ng-deep .mat-mdc-chip-set.sd-md{margin-top:10px}:host ::ng-deep .mat-mdc-chip-set.sd-sm{margin-top:2px}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}mat-form-field{width:100%}mat-chip-listbox{display:flex;flex-wrap:wrap;gap:4px}::ng-deep .sd-chip-calendar-selected-date .mat-calendar-body-cell-content{background-color:var(--sd-primary-light)!important;color:var(--sd-primary)!important;border-radius:50%}\n"] }]
+                    ], template: "@let _label = label();\r\n@let _appearance = appearance();\r\n@let _required = required();\r\n@let _isViewed = isViewed();\r\n@let _hideInlineError = hideInlineError();\r\n@let _sdViewDef = sdViewDef();\r\n@let _labelTemplate = (sdLabelTemplate() ?? sdLabelDef()?.templateRef) || undefined;\r\n@let _valueTemplate = (sdValueTemplate() ?? _sdViewDef?.templateRef) || undefined;\r\n@let _errorMessage = errorMessage();\r\n@let _size = size();\r\n@let _removable = removable();\r\n<!-- why: m\u1ED9t c\u1ED5ng gate duy nh\u1EA5t cho <mat-error>, aria-invalid v\u00E0 aria-describedby. -->\r\n@let _errorVisible = !!_errorMessage && formControl.touched;\r\n@let _showInlineError = !_hideInlineError && _errorVisible;\r\n@let _viewTemplate = _sdViewDef?.templateRef;\r\n\r\n@if (_isViewed) {\r\n  <sd-view\r\n    [label]=\"_label\"\r\n    [labelTemplate]=\"_labelTemplate\"\r\n    [value]=\"formControl.value\"\r\n    [display]=\"formControl.value\"\r\n    [hyperlink]=\"hyperlink()\"\r\n    [valueTemplate]=\"_valueTemplate\">\r\n  </sd-view>\r\n} @else {\r\n  @if (!_appearance && _labelTemplate) {\r\n    <ng-container *ngTemplateOutlet=\"_labelTemplate\"></ng-container>\r\n  }\r\n  @if (!_appearance && _label && !_labelTemplate) {\r\n    <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\r\n  }\r\n\r\n  <!-- why: div ch\u1EC9 l\u00E0 h\u1ED9p layout \u2014 aria-hidden=\"true\" c\u0169 \u1EA9n C\u1EA2 c\u00E2y con (chip, \u00F4 nh\u1EADp, <mat-error>)\r\n       kh\u1ECFi accessibility tree. \u1EDE \u0111\u00E2y (click) KH\u00D4NG ph\u1EA3i ti\u1EC7n \u00EDch chu\u1ED9t th\u1EEBa nh\u01B0 c\u00E1c control kh\u00E1c:\r\n       khi sdViewDef \u0111ang hi\u1EC3n th\u1ECB th\u00EC kh\u00F4ng c\u00F3 ph\u1EA7n t\u1EED focus \u0111\u01B0\u1EE3c n\u00E0o b\u00EAn trong, n\u00EAn click l\u00E0 l\u1ED1i\r\n       v\u00E0o DUY NH\u1EA4T. V\u00EC v\u1EADy handler \u0111\u01B0\u1EE3c chuy\u1EC3n h\u1EB3n xu\u1ED1ng ph\u1EA7n t\u1EED view v\u00E0 ph\u1EA7n t\u1EED \u0111\u00F3 nh\u1EADn\r\n       role=\"button\" + tabindex=\"0\" + keydown Enter/Space; div ngo\u00E0i kh\u00F4ng c\u00F2n handler n\u00E0o. -->\r\n  <div\r\n    class=\"d-flex align-items-center\"\r\n    [class.sd-view]=\"!!_viewTemplate\"\r\n    [class.c-focused]=\"isFocused\"\r\n    [class.c-disabled]=\"formControl.disabled\">\r\n    @if (_viewTemplate && !isFocused) {\r\n      <!-- why: KH\u00D4NG \u0111\u1EB7t aria-label \u2014 n\u1ED9i dung sdViewDef ch\u00EDnh l\u00E0 nh\u00E3n nh\u00ECn th\u1EA5y \u0111\u01B0\u1EE3c, aria-label\r\n           s\u1EBD ghi \u0111\u00E8 v\u00E0 l\u00E0m AT \u0111\u1ECDc kh\u00E1c ch\u1EEF tr\u00EAn m\u00E0n h\u00ECnh. -->\r\n      <div\r\n        class=\"sd-chip-calendar__view-trigger\"\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        (click)=\"onClick()\"\r\n        (keydown.enter)=\"onViewKeydown($event)\"\r\n        (keydown.space)=\"onViewKeydown($event)\">\r\n        <ng-container *ngTemplateOutlet=\"_viewTemplate; context: { value: formControl.value }\"></ng-container>\r\n      </div>\r\n    } @else {\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>{{ _label }}</mat-label>\r\n        }\r\n        <mat-chip-grid [formControl]=\"formControl\" #chipList [class.sd-md]=\"_size === 'md'\" [class.sd-sm]=\"_size === 'sm'\">\r\n          @for (item of formControl.value; track item) {\r\n            @if (item) {\r\n              <mat-chip-row\r\n                [class.sd-md]=\"_size === 'md'\"\r\n                [class.sd-sm]=\"_size === 'sm'\"\r\n                [removable]=\"_removable\"\r\n                (removed)=\"onRemove(item)\"\r\n                [disabled]=\"inputControl.disabled\"\r\n                (click)=\"onClickChip($event, item)\"\r\n                [value]=\"item\">\r\n                <span>{{ item | date: 'dd/MM/yyyy' }}</span>\r\n                @if (!inputControl.disabled && item | sdRemovableChip: _removable) {\r\n                  <sd-icon matChipRemove name=\"cancel\"></sd-icon>\r\n                }\r\n              </mat-chip-row>\r\n            }\r\n          }\r\n\r\n          <input\r\n            class=\"sd-chip-input\"\r\n            [formControl]=\"inputControl\"\r\n            [placeholder]=\"placeholder() || _label\"\r\n            [matChipInputFor]=\"chipList\"\r\n            autocomplete=\"off\"\r\n            [errorStateMatcher]=\"matcher\"\r\n            [matMenuTriggerFor]=\"calendarMenu\"\r\n            [required]=\"_required\"\r\n            matInput\r\n            [attr.data-autoId]=\"autoId()\"\r\n            [attr.data-disabled]=\"dataDisabled()\"\r\n            [attr.data-empty]=\"dataEmpty()\"\r\n            [attr.data-value]=\"dataValue()\"\r\n            [attr.data-count]=\"dataCount()\"\r\n            [attr.data-required]=\"dataRequired()\"\r\n            [attr.data-error-message]=\"dataErrorMessage()\"\r\n            [attr.aria-invalid]=\"_errorVisible ? 'true' : null\"\r\n            [attr.aria-describedby]=\"_errorMessage ? errorId : null\"\r\n            readonly\r\n            #input />\r\n        </mat-chip-grid>\r\n\r\n        <mat-menu #calendarMenu=\"matMenu\" overlapTrigger=\"false\" (closed)=\"onCloseCalendar()\">\r\n          <!-- why: aria-hidden=\"true\" \u1EDF \u0111\u00E2y t\u1EEBng \u1EA9n NGUY\u00CAN <mat-calendar> \u2014 t\u1EE9c to\u00E0n b\u1ED9 l\u01B0\u1EDBi ng\u00E0y,\r\n               n\u00FAt chuy\u1EC3n th\u00E1ng v\u00E0 \u00F4 ng\u00E0y \u0111ang ch\u1ECDn \u2014 kh\u1ECFi accessibility tree, d\u00F9 l\u1ECBch v\u1EABn nh\u1EADn\r\n               focus v\u00E0 \u0111i\u1EC1u h\u01B0\u1EDBng b\u1EB1ng ph\u00EDm m\u0169i t\u00EAn. role=\"presentation\" ch\u1EC9 v\u00F4 hi\u1EC7u ho\u00E1 c\u00E1i div\r\n               b\u1ECDc (n\u00F3 ch\u1EC9 t\u1ED3n t\u1EA1i \u0111\u1EC3 ch\u1EB7n n\u1ED5i b\u1ECDt click l\u00E0m \u0111\u00F3ng menu), KH\u00D4NG lan xu\u1ED1ng l\u1ECBch. -->\r\n          <div style=\"width: 280px\" role=\"presentation\" (click)=\"$event.stopPropagation()\">\r\n            <mat-calendar (selectedChange)=\"onSelectDate($event)\" [dateClass]=\"dateClass\"> </mat-calendar>\r\n          </div>\r\n        </mat-menu>\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      </mat-form-field>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";.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{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep .mat-mdc-form-field.no-padding-wrapper .mat-mdc-text-field-wrapper{padding-bottom:0}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip{padding:7px 10px;min-height:26px}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{padding:7px 7px 7px 10px}:host ::ng-deep .mat-mdc-chip-row.sd-sm{--mdc-chip-label-text-size: 12px;--mdc-chip-container-height: 20px}:host ::ng-deep .mat-mdc-chip-set.sd-md{margin-top:10px}:host ::ng-deep .mat-mdc-chip-set.sd-sm{margin-top:2px}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}mat-form-field{width:100%}mat-chip-listbox{display:flex;flex-wrap:wrap;gap:4px}::ng-deep .sd-chip-calendar-selected-date .mat-calendar-body-cell-content{background-color:var(--sd-primary-light)!important;color:var(--sd-primary)!important;border-radius:50%}.sd-chip-calendar__view-trigger{display:flex;align-items:center;width:100%;cursor:pointer}.sd-chip-calendar__view-trigger:focus-visible{outline:2px solid var(--sd-primary, #1565c0);outline-offset:2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menuTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatCalendar), { isSignal: true }] }], autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], hideInlineError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideInlineError", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], viewed: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewed", required: false }] }], hyperlink: [{ type: i0.Input, args: [{ isSignal: true, alias: "hyperlink", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], sdChange: [{ type: i0.Output, args: ["sdChange"] }], input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], sdViewDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdViewDefDirective), { isSignal: true }] }], sdLabelDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdLabelDefDirective), { isSignal: true }] }], sdLabelTemplate: [{ type: i0.ContentChild, args: ['sdLabel', { isSignal: true }] }], sdValueTemplate: [{ type: i0.ContentChild, args: ['sdValue', { isSignal: true }] }] } });
 
 /**