@sdcorejs/angular 19.1.6 → 19.2.1

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

@@ -4,8 +4,8 @@ import * as i0 from '@angular/core';
 import { inject, TemplateRef, input, Directive, viewChild, contentChild, contentChildren, computed, ChangeDetectorRef, ElementRef, booleanAttribute, model, output, signal, isSignal, DestroyRef, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/forms';
-import { NgForm, FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { NgForm, FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatPseudoCheckbox } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
@@ -18,10 +18,10 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { SdView } from '@sdcorejs/angular/components/view';
 import { SdItemDefDefDirective, SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
 import { SdLabel } from '@sdcorejs/angular/forms/label';
-import { SD_FORM_CONFIGURATION, sdFormControlState, sdViewedTransform, sdViewedInline, SdFormControl, ɵsdFormControlConnector as _sdFormControlConnector, HandleSdCustomValidator, SdInlineErrorValidator } from '@sdcorejs/angular/forms/models';
-import { I18nService } from '@sdcorejs/angular/i18n';
+import { SD_FORM_CONFIGURATION, ɵsdTimerScope as _sdTimerScope, sdFormControlState, sdViewedTransform, sdViewedInline, SdFormControl, ɵsdFormControlConnector as _sdFormControlConnector, HandleSdCustomValidator, SdInlineErrorValidator } from '@sdcorejs/angular/forms/models';
+import { I18nService, SdTranslatePipe } from '@sdcorejs/angular/i18n';
 import { sdIsEmpty, sdSerializeDataValue } from '@sdcorejs/angular/utilities/data-state';
-import { Utilities, StringUtilities, ArrayUtilities } from '@sdcorejs/angular/utilities/extensions';
+import { Utilities, StringUtilities, ArrayUtilities } from '@sdcorejs/utils/fns';
 import { timer, combineLatest } from 'rxjs';
 import { tap, map, startWith, debounce, switchMap } from 'rxjs/operators';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
@@ -42,6 +42,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 
 class SdSelect {
     id = `I${Utilities.generateUuid()}`;
+    /** why: id ổn định của <mat-error> để control trỏ `aria-describedby` sang — thông báo lỗi
+     *  phải đọc được từ chính control, không chỉ hiện ra màn hình. */
+    errorId = `${this.id}-error`;
     // ==========================================
     // 1. SIGNAL QUERIES & INJECTS
     // ==========================================
@@ -71,6 +74,9 @@ class SdSelect {
     #formConfiguration = inject(SD_FORM_CONFIGURATION, { optional: true });
     #el = inject(ElementRef);
     #i18n = inject(I18nService);
+    // why: focus/mở panel + focus ô search đều hoãn 100ms; handle phải bị clear khi destroy,
+    // nếu không callback vẫn chạm selectRef/matInputRef của view đã tháo.
+    #timers = _sdTimerScope();
     // ==========================================
     // 2. SIGNAL INPUTS & MODEL
     // ==========================================
@@ -111,8 +117,13 @@ class SdSelect {
     label = input();
     helperText = input();
     placeholder = input();
-    valueField = input.required();
-    displayField = input.required();
+    // why: KHÔNG dùng input.required. Component nhận `T extends object | string | number` và template
+    // có nhánh riêng cho mảng primitive (`@else if (!_valueField && !_displayField)`), nhưng
+    // input.required làm nhánh đó không bao giờ tới được: `<sd-select [items]="['a','b']">` ném NG0950
+    // ngay lần render đầu vì template đọc valueField()/displayField() trước khi có giá trị.
+    // Mặc định '' (giống disabledField) → bỏ trống cả hai = item chính là value + label.
+    valueField = input('');
+    displayField = input('');
     disabledField = input('');
     cacheChecksum = input();
     limit = input(50);
@@ -126,6 +137,11 @@ class SdSelect {
     /** Display mode: `false` edit · `true` static view · `'inline'` view + click-to-edit (bare editor). */
     viewed = input(false, { transform: sdViewedTransform });
     multiple = input(false, { transform: booleanAttribute });
+    /**
+     * Hiện option "Tất cả" đầu panel (chỉ multiple + items là mảng tĩnh/Signal — ẩn với
+     * SdSearch lazy vì dataset không xác định). Opt-in, default `false`.
+     */
+    showSelectAll = input(false, { transform: booleanAttribute });
     /**
      * Whether the `viewed='inline'` text face shows a hover clear-× to empty the value.
      * Default `true`. Set `false` where the HOST owns removal (e.g. `<sd-query-bar>` chips,
@@ -146,8 +162,17 @@ class SdSelect {
     /**
      * Tổng hợp error message để hiển thị trong tooltip khi hideInlineError = true.
      */
+    // why: `required` và `inlineError` PHẢI được đọc VÔ ĐIỀU KIỆN. 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]` (hoặc set `[inlineError]`) lúc RUNTIME sẽ giữ nguyên message cũ dưới OnPush:
+    // control invalid, viền đỏ, nhưng KHÔNG có chữ. Đọc trong nhánh `errors[...]` là không đủ — lần
+    // chạy "không lỗi" thoát sớm ở `if (!errors)` nên không đăng ký được dependency nào.
+    // `customValidator` thì an toàn: nó tới từ async validator, `setErrors` mặc định CÓ phát event.
     errorMessage = computed(() => {
         void this.#state();
+        void this.required();
+        const inlineError = this.inlineError();
         const errors = this.formControl.errors;
         if (!errors)
             return undefined;
@@ -156,7 +181,7 @@ class SdSelect {
         if (errors['customValidator'])
             return errors['customValidator'];
         if (errors['inlineError'])
-            return this.inlineError();
+            return inlineError;
         return undefined;
     });
     appearanceInput = input(undefined, { alias: 'appearance' });
@@ -174,10 +199,20 @@ class SdSelect {
     // 4. INTERNAL STATE & STREAMS
     // ==========================================
     formControl = new SdFormControl();
+    // why: validator đi qua connector (addValidators/removeValidators — additive) thay vì
+    // clearValidators()+clearAsyncValidators()+setValidators() như trước. `formControl` là public API,
+    // consumer hoàn toàn có thể tự gắn validator lên nó; cách cũ xoá SẠCH những validator đó mỗi lần
+    // required/[validator]/inlineError đổi. Connector chỉ thêm/gỡ đúng phần component sở hữu.
     #formConnector = _sdFormControlConnector({
         form: this.form,
         name: this.name,
         control: computed(() => this.formControl),
+        required: this.required,
+        validators: computed(() => (this.inlineError() ? [SdInlineErrorValidator] : null)),
+        asyncValidators: computed(() => {
+            const custom = this.validator();
+            return custom ? [HandleSdCustomValidator(custom)] : null;
+        }),
     });
     inputControl = new FormControl('');
     loading = signal(false);
@@ -227,6 +262,41 @@ class SdSelect {
         return false;
     });
     delayTime = computed(() => (typeof this.actualItems() === 'function' ? 500 : 0));
+    /**
+     * Scope của "Tất cả": item enabled khớp search text hiện tại, tính trên MẢNG NGUỒN
+     * `actualItems()`.
+     */
+    // why: KHÔNG đọc filteredItems — nó đã bị cắt theo `limit` paging nên tick all sẽ thiếu item;
+    // luật khớp search phải trùng với filter của allItems$ (aliasIncludes trên cả value + display).
+    selectAllScope = computed(() => {
+        const data = this.actualItems();
+        if (!Array.isArray(data))
+            return [];
+        const sText = this.searchText() || '';
+        return data.filter(item => {
+            if (item == null || this.itemDisabled(item))
+                return false;
+            return StringUtilities.aliasIncludes(this.itemValue(item), sText) || StringUtilities.aliasIncludes(this.itemDisplay(item), sText);
+        });
+    });
+    /** Row "Tất cả" chỉ render khi opt-in + multiple + items tĩnh + scope có item để thao tác. */
+    selectAllVisible = computed(() => this.showSelectAll() && this.multiple() && Array.isArray(this.actualItems()) && this.selectAllScope().length > 0);
+    /** Trạng thái checkbox "Tất cả", tính trên items ENABLED trong scope (item disabled bỏ qua). */
+    selectAllState = computed(() => {
+        const scope = this.selectAllScope();
+        const val = this.normalizedValue();
+        const selected = new Set((Array.isArray(val) ? val : []).map(v => String(v)));
+        if (!scope.length || !selected.size)
+            return 'unchecked';
+        let count = 0;
+        for (const item of scope) {
+            if (selected.has(String(this.itemValue(item))))
+                count++;
+        }
+        if (count === 0)
+            return 'unchecked';
+        return count === scope.length ? 'checked' : 'indeterminate';
+    });
     // ==========================================
     // 5. GETTER & HELPERS
     // ==========================================
@@ -331,12 +401,6 @@ class SdSelect {
             else
                 this.formControl.enable({ emitEvent: false });
         });
-        effect(() => {
-            const req = this.required();
-            const val = this.validator();
-            const inl = this.inlineError();
-            untracked(() => this.#updateValidator(req, val, inl));
-        });
         effect(() => {
             const actions = this.footerActions();
             const context = this.footerActionContext();
@@ -482,21 +546,6 @@ class SdSelect {
             this.#ref.markForCheck();
         });
     }
-    #updateValidator = (req, val, inl) => {
-        this.formControl.clearValidators();
-        this.formControl.clearAsyncValidators();
-        const validators = [];
-        const asyncValidators = [];
-        if (req)
-            validators.push(Validators.required);
-        if (val)
-            asyncValidators.push(HandleSdCustomValidator(val));
-        if (inl)
-            validators.push(SdInlineErrorValidator);
-        this.formControl.setValidators(validators.length ? validators : null);
-        this.formControl.setAsyncValidators(asyncValidators.length ? asyncValidators : null);
-        this.formControl.updateValueAndValidity({ emitEvent: false });
-    };
     #loadSelectedItems = async (value, items) => {
         if (value === undefined || value === null || value === '')
             return [];
@@ -560,16 +609,61 @@ class SdSelect {
     onSelectionChange = (change) => {
         this.allSelected = !this.selectRef()?.options.some(e => !e.selected);
         const value = change?.value ?? '';
+        // why: KHÔNG dùng { emitEvent: false } khi mirror giá trị chọn sang formControl. formControl mang
+        // async [validator] (HandleSdCustomValidator). CVA của mat-select đã setValue (có event) trước khi
+        // (selectionChange) chạy; setValue im lặng ở đây HUỶ lần async đang pending đó rồi chạy lại im →
+        // setErrors lúc resolve cũng im → #state (sdFormControlState) không tick → errorMessage không
+        // recompute → viền đỏ nhưng KHÔNG có message.
+        // NHƯNG cũng KHÔNG được setValue vô điều kiện: control lúc này ĐÃ mang đúng giá trị (CVA vừa ghi),
+        // nên ghi lại sẽ phát valueChanges LẦN HAI trên chính control và trên FormGroup cha, đồng thời
+        // khởi động lại async [validator] hai lần cho mỗi lần chọn. Guard `!==` giữ đúng MỘT event:
+        // đi qua UI thì CVA lo, gọi trực tiếp (programmatic/test) thì nhánh setValue lo.
         if (this.multiple()) {
-            this.formControl.setValue(value || [], { emitEvent: false });
-            this.#onChange(value || []);
+            const next = value || [];
+            if (this.formControl.value !== next)
+                this.formControl.setValue(next);
+            this.#onChange(next);
         }
         else {
             this.clearSearch();
-            this.formControl.setValue(value, { emitEvent: false });
+            if (this.formControl.value !== value)
+                this.formControl.setValue(value);
             this.#onChange(value);
         }
     };
+    /**
+     * Toggle "Tất cả" theo scope hiện tại (items enabled khớp search):
+     * - Đang `checked` → BỎ chọn các value trong scope (giữ value ngoài scope, kể cả item disabled đã chọn).
+     * - Ngược lại → CHỌN THÊM toàn bộ scope, union với selection hiện có (additive khi đang search).
+     */
+    // why: KHÔNG emit sdChange/sdSelection ở đây — giữ đúng semantics hiện hành: hai output đó chỉ
+    // bắn khi panel đóng với giá trị đổi (onOpenedChange so hash).
+    // why: setValue KHÔNG dùng { emitEvent: false } — cùng lý do như onSelectionChange: formControl
+    // mang async [validator], setValue im lặng sẽ huỷ lần async pending rồi chạy lại im → setErrors
+    // không phát event → #state không tick → errorMessage stale (viền đỏ mà không có message).
+    // Guard `!==` giữ đúng MỘT event: đây là đường programmatic nên nhánh setValue luôn chạy.
+    toggleSelectAll = () => {
+        const scope = this.selectAllScope();
+        if (!scope.length)
+            return;
+        const current = this.normalizedValue();
+        // why: normalizedValue có nhánh bọc scalar boolean thành mảng — với multiple thực tế value là
+        // (number | string)[], cast để khớp chữ ký #onChange.
+        const currentArr = Array.isArray(current) ? [...current] : [];
+        const scopeValues = scope.map(item => this.itemValue(item));
+        let next;
+        if (this.selectAllState() === 'checked') {
+            const scopeKeys = new Set(scopeValues.map(v => String(v)));
+            next = currentArr.filter(v => !scopeKeys.has(String(v)));
+        }
+        else {
+            const existing = new Set(currentArr.map(v => String(v)));
+            next = [...currentArr, ...scopeValues.filter(v => !existing.has(String(v)))];
+        }
+        if (this.formControl.value !== next)
+            this.formControl.setValue(next);
+        this.#onChange(next);
+    };
     reValidate = () => {
         this.formControl.updateValueAndValidity({ emitEvent: true });
     };
@@ -603,7 +697,9 @@ class SdSelect {
     focus = () => {
         this.focused.set(true);
         this.updatePanelWidth();
-        setTimeout(() => {
+        // why: vẫn 100ms như cũ — chỉ scope handle theo DestroyRef. Mở panel trên mat-select đã
+        // destroy sẽ dựng overlay mồ côi không ai đóng.
+        this.#timers.schedule(() => {
             this.selectRef()?.focus();
             this.selectRef()?.open();
         }, 100);
@@ -634,7 +730,8 @@ class SdSelect {
         if (isOpened) {
             this.focused.set(true);
             this.clearSearch();
-            setTimeout(() => this.matInputRef()?.focus(), 100);
+            // why: vẫn 100ms như cũ — chỉ scope handle theo DestroyRef.
+            this.#timers.schedule(() => this.matInputRef()?.focus(), 100);
             this.#hashedValue = Utilities.hash({ value: this.formControl.value });
         }
         else {
@@ -663,7 +760,7 @@ class SdSelect {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdSelect, isStandalone: true, selector: "sd-select", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: true, transformFunction: null }, displayField: { classPropertyName: "displayField", publicName: "displayField", isSignal: true, isRequired: true, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, cacheChecksum: { classPropertyName: "cacheChecksum", publicName: "cacheChecksum", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, hyperlink: { classPropertyName: "hyperlink", publicName: "hyperlink", isSignal: true, isRequired: false, transformFunction: null }, minWidthPanel: { classPropertyName: "minWidthPanel", publicName: "minWidthPanel", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange", sdSelection: "sdSelection" }, host: { properties: { "class.sd-bare": "isInline()", "class.sd-viewed": "isViewed() || isInline()", "class.sd-has-label": "!!label()" } }, queries: [{ propertyName: "sdLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true, isSignal: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }, { propertyName: "sdSelectedTemplate", first: true, predicate: ["sdSelected"], descendants: true, isSignal: true }, { propertyName: "itemDef", first: true, predicate: SdItemDefDefDirective, descendants: true, isSignal: true }, { propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }, { propertyName: "footerActions", predicate: SdSelectFooterActionDirective, isSignal: true }], viewQueries: [{ propertyName: "matInputRef", first: true, predicate: MatInput, descendants: true, isSignal: true }, { propertyName: "selectRef", first: true, predicate: ["select"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _label = label();\n@let _appearance = appearance();\n@let _hideInlineError = hideInlineError();\n@let _errorMessage = errorMessage();\n@let _helperText = helperText();\n@let _multiple = multiple();\n@let _required = required();\n@let _normalizedValue = $any(normalizedValue());\n@let _focused = $any(focused());\n@let _isInline = isInline();\n@let _bare = _isInline;\n@let _hasValue = _multiple ? !!_normalizedValue?.length : _normalizedValue !== undefined && _normalizedValue !== null;\n@let _display = display();\n@let _size = size();\n@let _floatLabel = floatLabel();\n@let _valueField = valueField();\n@let _displayField = displayField();\n\n@if (isViewed()) {\n  <sd-view\n    [label]=\"_label\"\n    [labelTemplate]=\"sdLabelTemplate()\"\n    [value]=\"_normalizedValue\"\n    [display]=\"_display\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"viewTemplate()\"\n    [selectedItems]=\"selectedItems()\">\n  </sd-view>\n} @else {\n  @if (_isInline) {\n    <!-- why: inline \u2014 sd-view text l\u00E0 \"m\u1EB7t\" + trigger; editor v\u1EABn render b\u00EAn d\u01B0\u1EDBi (chrome \u1EA9n qua\n         .sd-inline-editor) \u0111\u1EC3 m\u1EDF panel. Text gi\u1EEF nguy\u00EAn, ch\u1EC9 \u0111\u1ED5i khi commit gi\u00E1 tr\u1ECB m\u1EDBi. -->\n    <span class=\"sd-inline-view\" role=\"button\" tabindex=\"0\" (click)=\"enterInlineEdit()\" (keydown.enter)=\"enterInlineEdit()\">\n      <sd-view\n        [label]=\"_label\"\n        [labelTemplate]=\"sdLabelTemplate()\"\n        [value]=\"_normalizedValue\"\n        [display]=\"_display\"\n        [hyperlink]=\"hyperlink()\"\n        [valueTemplate]=\"viewTemplate()\"\n        [selectedItems]=\"selectedItems()\">\n      </sd-view>\n\n      <!-- why: clear-\u00D7 ch\u1EC9 hi\u1EC7n khi hover (CSS), \u0111\u1EB7t CU\u1ED0I face + clear($event) stopPropagation \u2192\n           xo\u00E1 gi\u00E1 tr\u1ECB m\u00E0 KH\u00D4NG m\u1EDF panel; tr\u00E1nh bug c\u0169 (\u00D7 s\u00E1t trigger b\u1ECB b\u1EA5m nh\u1EA7m l\u00FAc \u0111\u00F3ng panel). -->\n      @if (clearable() && _hasValue && !_required && !formControl.disabled) {\n        <button type=\"button\" class=\"sd-inline-clear\" (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      }\n    </span>\n  }\n\n  @if (!_appearance) {\n    <ng-content select=\"[sdLabel]\">\n      @if (_label) {\n        <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\n      }\n    </ng-content>\n  }\n\n  <div\n    class=\"d-flex align-items-center\"\n    [class.sd-inline-editor]=\"_isInline\"\n    [class.c-focused]=\"_focused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    (mouseenter)=\"updatePanelWidth()\"\n    (focusin)=\"updatePanelWidth()\"\n    aria-hidden=\"true\">\n    @if (_multiple) {\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-select\n          #select\n          multiple\n          [formControl]=\"formControl\"\n          [placeholder]=\"placeholder() || _label || ''\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          disableOptionCentering=\"true\"\n          [panelWidth]=\"calculatedPanelWidth()\"\n          [panelClass]=\"['sd-select-panel', 'sd-multiple']\"\n          [class.sd-selected]=\"!_required && _normalizedValue?.length\"\n          [required]=\"_required\"\n          (openedChange)=\"onOpenedChange($event)\"\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-loading]=\"dataLoading()\"\n          [attr.data-required]=\"dataRequired()\"\n          [attr.data-error-message]=\"dataErrorMessage()\"\n          matTooltipClass=\"sd-multiline-tooltip\"\n          [matTooltipDisabled]=\"!formControl.disabled || !_normalizedValue?.length\"\n          [matTooltip]=\"tooltip() || ''\">\n          <mat-select-trigger>\n            @if (sdSelectedTemplate(); as _selTpl) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  _selTpl;\n                  context: { $implicit: selectedItems(), item: selectedItems(), items: selectedItems(), display: _display, multiple: true }\n                \">\n              </ng-container>\n            } @else {\n              <div class=\"sd-trigger-text\" [matTooltip]=\"_display || ''\" matTooltipPosition=\"above\">\n                {{ _display }}\n              </div>\n            }\n          </mat-select-trigger>\n\n          @if (filtered()) {\n            <div class=\"c-filter-input-container\">\n              <div class=\"filter-input-wrapper\">\n                <sd-icon name=\"search\"></sd-icon>\n                <input\n                  [formControl]=\"inputControl\"\n                  aria-hidden=\"true\"\n                  matInput\n                  autocomplete=\"off\"\n                  class=\"c-search-input\"\n                  (keydown)=\"$event.stopPropagation()\" />\n              </div>\n            </div>\n          }\n\n          @let _filteredItems = filteredItems();\n          @if (_filteredItems) {\n            @if (!_filteredItems.length && !loading()) {\n              <mat-option class=\"sd-empty\" disabled>\n                <img class=\"sd-image-data-empty\" alt=\"empty-image\" style=\"width: 95px\" />\n              </mat-option>\n            } @else {\n              @let iDefTpl = itemDef()?.templateRef;\n              @if (_valueField && _displayField) {\n                @for (item of _filteredItems; track itemValue(item)) {\n                  <mat-option [value]=\"itemValue(item)\" [disabled]=\"itemDisabled(item)\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ itemDisplay(item) }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              } @else if (!_valueField && !_displayField) {\n                @for (item of _filteredItems; track item) {\n                  <mat-option [value]=\"item\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ item }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              }\n            }\n          }\n\n          @if (loading()) {\n            <mat-option disabled class=\"sd-loading-option\">\n              <mat-spinner diameter=\"24\"></mat-spinner>\n            </mat-option>\n          }\n\n          @let _visibleFooterActions = visibleFooterActions();\n          @if (_visibleFooterActions.length) {\n            <div class=\"sd-select-footer-actions\">\n              @for (action of _visibleFooterActions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.templateRef; context: footerActionContext()\"> </ng-container>\n              }\n            </div>\n          }\n        </mat-select>\n\n        @if (_hideInlineError && _errorMessage && formControl.touched) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n\n        @if (!_hideInlineError && _errorMessage && formControl.touched) {\n          <mat-error>{{ _errorMessage }}</mat-error>\n        }\n\n        @if (_normalizedValue?.length && !_required && !formControl.disabled && !_bare) {\n          <button type=\"button\" class=\"sd-clear-btn\" matSuffix (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        } @else {\n          <sd-icon class=\"cursor-pointer sd-suffix-icon\" matSuffix name=\"keyboard_arrow_down\"></sd-icon>\n        }\n      </mat-form-field>\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 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-select\n          #select\n          [formControl]=\"formControl\"\n          [placeholder]=\"placeholder() || _label || ''\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          disableOptionCentering=\"true\"\n          [panelWidth]=\"calculatedPanelWidth()\"\n          [panelClass]=\"'sd-select-panel'\"\n          [class.sd-selected]=\"!_required && _normalizedValue !== undefined && _normalizedValue !== null\"\n          [required]=\"_required\"\n          (openedChange)=\"onOpenedChange($event)\"\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-loading]=\"dataLoading()\"\n          [attr.data-required]=\"dataRequired()\"\n          [attr.data-error-message]=\"dataErrorMessage()\"\n          matTooltipClass=\"sd-multiline-tooltip\"\n          [matTooltipDisabled]=\"!formControl.disabled || !_normalizedValue?.length\"\n          [matTooltip]=\"tooltip() || ''\">\n          <mat-select-trigger>\n            @if (sdSelectedTemplate(); as _selTpl) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  _selTpl;\n                  context: {\n                    $implicit: selectedItems()[0],\n                    item: selectedItems()[0],\n                    items: selectedItems(),\n                    display: _display,\n                    multiple: false,\n                  }\n                \">\n              </ng-container>\n            } @else {\n              {{ _display }}\n            }\n          </mat-select-trigger>\n\n          @if (filtered()) {\n            <div class=\"c-filter-input-container\">\n              <div class=\"filter-input-wrapper\">\n                <sd-icon name=\"search\"></sd-icon>\n                <input\n                  [formControl]=\"inputControl\"\n                  aria-hidden=\"true\"\n                  matInput\n                  autocomplete=\"off\"\n                  class=\"c-search-input\"\n                  (keydown)=\"$event.stopPropagation()\" />\n              </div>\n            </div>\n          }\n\n          @let _filteredItems = filteredItems();\n          @if (_filteredItems) {\n            @if (!_filteredItems.length && !loading()) {\n              <mat-option class=\"sd-empty\" disabled>\n                <img class=\"sd-image-data-empty\" alt=\"empty-image\" style=\"width: 95px\" />\n              </mat-option>\n            } @else {\n              @let iDefTpl = itemDef()?.templateRef;\n\n              @if (_valueField && _displayField) {\n                @for (item of _filteredItems; track itemValue(item)) {\n                  <mat-option [value]=\"itemValue(item)\" [disabled]=\"itemDisabled(item)\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ itemDisplay(item) }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              } @else if (!_valueField && !_displayField) {\n                @for (item of _filteredItems; track item) {\n                  <mat-option [value]=\"item\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ item }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              }\n            }\n          }\n\n          @if (loading()) {\n            <mat-option disabled class=\"sd-loading-option\">\n              <mat-spinner diameter=\"24\"></mat-spinner>\n            </mat-option>\n          }\n\n          @let _visibleFooterActions = visibleFooterActions();\n          @if (_visibleFooterActions.length) {\n            <div class=\"sd-select-footer-actions\">\n              @for (action of _visibleFooterActions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.templateRef; context: footerActionContext()\"> </ng-container>\n              }\n            </div>\n          }\n        </mat-select>\n\n        @if (_hideInlineError && _errorMessage && formControl.touched) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n\n        @if (!_hideInlineError && _errorMessage && formControl.touched) {\n          <mat-error>{{ _errorMessage }}</mat-error>\n        }\n\n        @if (_normalizedValue !== undefined && _normalizedValue !== null && !_required && !formControl.disabled && !_bare) {\n          <button type=\"button\" class=\"sd-clear-btn\" matSuffix (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        } @else {\n          <sd-icon class=\"cursor-pointer sd-suffix-icon\" matSuffix name=\"keyboard_arrow_down\"></sd-icon>\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;max-width:100%}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}::ng-deep .sd-loading-option{min-height:50px!important}::ng-deep .sd-loading-option .mat-pseudo-checkbox{display:none!important}::ng-deep .sd-loading-option .mdc-list-item__primary-text{width:100%;display:flex;justify-content:center;align-items:center}.sd-trigger-text{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .mat-mdc-select-value{max-width:100%;overflow:hidden;width:0;min-width:100%}:host ::ng-deep .sd-selected .mat-mdc-select-arrow{display:none}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}:host ::ng-deep .custom-arrow{pointer-events:none;position:absolute;right:1rem;top:50%;transform:translateY(-50%);display:flex;align-items:center}: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 mat-select.mat-mdc-select-disabled .mat-mdc-select-value{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}::ng-deep .sd-select-panel .mat-mdc-option.sd-empty .mat-pseudo-checkbox{display:none}::ng-deep .sd-select-panel .mat-mdc-option{min-height:36px!important;padding:8px 12px!important}::ng-deep .sd-select-panel .c-filter-input-container{position:sticky;top:0;background-color:#fff;box-shadow:0 1px #f2f2f2;padding:8px;margin-bottom:8px;z-index:1000}::ng-deep .sd-select-panel .c-filter-input-container .filter-input-wrapper{display:flex;align-items:center;padding:4px 8px;border:1px solid var(--sd-border);border-radius:4px;background-color:#fff}::ng-deep .sd-select-panel .c-filter-input-container .filter-input-wrapper sd-icon{color:#dadada}::ng-deep .sd-select-panel .c-filter-input-container .filter-input-wrapper .c-search-input{background-color:#fff;border:none;outline:none;flex:1;padding:4px}::ng-deep .sd-select-panel .sd-select-footer-actions{position:sticky;bottom:0;z-index:1000;display:flex;flex-direction:column;gap:4px;border-top:1px solid #f2f2f2;background-color:#fff}::ng-deep .sd-multiline-tooltip{white-space:pre-line}::ng-deep .mat-mdc-select-panel.sd-select-panel{padding:0}::ng-deep .mat-mdc-select-panel.sd-select-panel .mat-mdc-option.mdc-list-item--disabled.sd-empty .mdc-list-item__primary-text{opacity:.8;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}::ng-deep .sd-select-panel .mat-pseudo-checkbox-minimal{transform:scale(.7);transform-origin:center right}::ng-deep .sd-select-panel.sd-multiple .mat-pseudo-checkbox{transform:scale(.75);margin-right:8px!important}::ng-deep .sd-select-panel.sd-multiple .mdc-list-item__primary-text{font-size:14px;white-space:normal}::ng-deep .mat-mdc-select-panel.sd-select-panel{max-width:90vw!important}::ng-deep .mat-mdc-select-panel.sd-select-panel .mat-mdc-option .mdc-list-item__primary-text{white-space:normal;word-break:break-word;line-height:1.4}:host(.sd-bare){display:inline-flex;align-items:center}: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(.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}:host(.sd-bare) ::ng-deep .mat-mdc-select-arrow-wrapper{display:none}\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: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdSelect, isStandalone: true, selector: "sd-select", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, displayField: { classPropertyName: "displayField", publicName: "displayField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, cacheChecksum: { classPropertyName: "cacheChecksum", publicName: "cacheChecksum", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, hyperlink: { classPropertyName: "hyperlink", publicName: "hyperlink", isSignal: true, isRequired: false, transformFunction: null }, minWidthPanel: { classPropertyName: "minWidthPanel", publicName: "minWidthPanel", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange", sdSelection: "sdSelection" }, host: { properties: { "class.sd-bare": "isInline()", "class.sd-viewed": "isViewed() || isInline()", "class.sd-has-label": "!!label()" } }, queries: [{ propertyName: "sdLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true, isSignal: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }, { propertyName: "sdSelectedTemplate", first: true, predicate: ["sdSelected"], descendants: true, isSignal: true }, { propertyName: "itemDef", first: true, predicate: SdItemDefDefDirective, descendants: true, isSignal: true }, { propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }, { propertyName: "footerActions", predicate: SdSelectFooterActionDirective, isSignal: true }], viewQueries: [{ propertyName: "matInputRef", first: true, predicate: MatInput, descendants: true, isSignal: true }, { propertyName: "selectRef", first: true, predicate: ["select"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _label = label();\n@let _appearance = appearance();\n@let _hideInlineError = hideInlineError();\n@let _errorMessage = errorMessage();\n@let _helperText = helperText();\n@let _multiple = multiple();\n@let _required = required();\n@let _normalizedValue = $any(normalizedValue());\n@let _focused = $any(focused());\n@let _isInline = isInline();\n@let _bare = _isInline;\n@let _hasValue = _multiple ? !!_normalizedValue?.length : _normalizedValue !== undefined && _normalizedValue !== null;\n@let _display = display();\n@let _size = size();\n@let _floatLabel = floatLabel();\n@let _valueField = valueField();\n@let _displayField = displayField();\n@let _autoId = autoId();\n<!-- why: m\u1ED9t c\u1ED5ng gate duy nh\u1EA5t cho <mat-error>, aria-invalid v\u00E0 aria-describedby. -->\n@let _errorVisible = !!_errorMessage && formControl.touched;\n@let _showInlineError = !_hideInlineError && _errorVisible;\n\n@if (isViewed()) {\n  <sd-view\n    [label]=\"_label\"\n    [labelTemplate]=\"sdLabelTemplate()\"\n    [value]=\"_normalizedValue\"\n    [display]=\"_display\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"viewTemplate()\"\n    [selectedItems]=\"selectedItems()\">\n  </sd-view>\n} @else {\n  @if (_isInline) {\n    <!-- why: inline \u2014 sd-view text l\u00E0 \"m\u1EB7t\" + trigger; editor v\u1EABn render b\u00EAn d\u01B0\u1EDBi (chrome \u1EA9n qua\n         .sd-inline-editor) \u0111\u1EC3 m\u1EDF panel. Text gi\u1EEF nguy\u00EAn, ch\u1EC9 \u0111\u1ED5i khi commit gi\u00E1 tr\u1ECB m\u1EDBi. -->\n    <span class=\"sd-inline-view\" role=\"button\" tabindex=\"0\" (click)=\"enterInlineEdit()\" (keydown.enter)=\"enterInlineEdit()\">\n      <sd-view\n        [label]=\"_label\"\n        [labelTemplate]=\"sdLabelTemplate()\"\n        [value]=\"_normalizedValue\"\n        [display]=\"_display\"\n        [hyperlink]=\"hyperlink()\"\n        [valueTemplate]=\"viewTemplate()\"\n        [selectedItems]=\"selectedItems()\">\n      </sd-view>\n\n      <!-- why: clear-\u00D7 ch\u1EC9 hi\u1EC7n khi hover (CSS), \u0111\u1EB7t CU\u1ED0I face + clear($event) stopPropagation \u2192\n           xo\u00E1 gi\u00E1 tr\u1ECB m\u00E0 KH\u00D4NG m\u1EDF panel; tr\u00E1nh bug c\u0169 (\u00D7 s\u00E1t trigger b\u1ECB b\u1EA5m nh\u1EA7m l\u00FAc \u0111\u00F3ng panel). -->\n      @if (clearable() && _hasValue && !_required && !formControl.disabled) {\n        <button type=\"button\" class=\"sd-inline-clear\" (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      }\n    </span>\n  }\n\n  @if (!_appearance) {\n    <ng-content select=\"[sdLabel]\">\n      @if (_label) {\n        <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\n      }\n    </ng-content>\n  }\n\n  <!-- why: div ch\u1EC9 l\u00E0 h\u1ED9p layout. aria-hidden=\"true\" c\u0169 \u1EA9n C\u1EA2 c\u00E2y con \u2014 label, <mat-select>,\n       <mat-error>, n\u00FAt clear \u2014 kh\u1ECFi accessibility tree. role=\"presentation\" ch\u1EC9 v\u00F4 hi\u1EC7u ho\u00E1\n       ch\u00EDnh div, KH\u00D4NG lan xu\u1ED1ng con; (click) l\u00E0 ti\u1EC7n \u00EDch chu\u1ED9t, b\u00E0n ph\u00EDm Tab th\u1EB3ng v\u00E0o\n       <mat-select> v\u00E0 (focusin) \u0111\u00E3 lo ph\u1EA7n updatePanelWidth() t\u01B0\u01A1ng \u1EE9ng. -->\n  <div\n    class=\"d-flex align-items-center\"\n    role=\"presentation\"\n    [class.sd-inline-editor]=\"_isInline\"\n    [class.c-focused]=\"_focused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    (mouseenter)=\"updatePanelWidth()\"\n    (focusin)=\"updatePanelWidth()\">\n    @if (_multiple) {\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-select\n          #select\n          multiple\n          [formControl]=\"formControl\"\n          [placeholder]=\"placeholder() || _label || ''\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          disableOptionCentering=\"true\"\n          [panelWidth]=\"calculatedPanelWidth()\"\n          [panelClass]=\"['sd-select-panel', 'sd-multiple']\"\n          [class.sd-selected]=\"!_required && _normalizedValue?.length\"\n          [required]=\"_required\"\n          (openedChange)=\"onOpenedChange($event)\"\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-loading]=\"dataLoading()\"\n          [attr.data-required]=\"dataRequired()\"\n          [attr.data-error-message]=\"dataErrorMessage()\"\n          matTooltipClass=\"sd-multiline-tooltip\"\n          [matTooltipDisabled]=\"!formControl.disabled || !_normalizedValue?.length\"\n          [matTooltip]=\"tooltip() || ''\">\n          <mat-select-trigger>\n            @if (sdSelectedTemplate(); as _selTpl) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  _selTpl;\n                  context: { $implicit: selectedItems(), item: selectedItems(), items: selectedItems(), display: _display, multiple: true }\n                \">\n              </ng-container>\n            } @else {\n              <div class=\"sd-trigger-text\" [matTooltip]=\"_display || ''\" matTooltipPosition=\"above\">\n                {{ _display }}\n              </div>\n            }\n          </mat-select-trigger>\n\n          @if (filtered()) {\n            <div class=\"c-filter-input-container\">\n              <div class=\"filter-input-wrapper\">\n                <sd-icon name=\"search\" aria-hidden=\"true\"></sd-icon>\n                <!-- why: B\u1ECE aria-hidden \u2014 \u0111\u00E2y l\u00E0 \u00F4 l\u1ECDc TH\u1EACT, ng\u01B0\u1EDDi d\u00F9ng focus v\u00E0 g\u00F5 v\u00E0o \u0111\u01B0\u1EE3c, n\u00EAn\n                     aria-hidden ch\u1EC9 l\u00E0m screen reader c\u00E2m. Panel kh\u00F4ng c\u00F3 <label> n\u00E0o, n\u00EAn ph\u1EA3i\n                     t\u1EF1 \u0111\u1EB7t t\u00EAn b\u1EB1ng aria-label, n\u1EBFu kh\u00F4ng AT ch\u1EC9 \u0111\u1ECDc \"edit text\" tr\u1ED1ng tr\u01A1n. -->\n                <input\n                  [formControl]=\"inputControl\"\n                  matInput\n                  autocomplete=\"off\"\n                  class=\"c-search-input\"\n                  [attr.aria-label]=\"'core.form.select.search' | sdTranslate\"\n                  (keydown)=\"$event.stopPropagation()\" />\n              </div>\n            </div>\n          }\n\n          <!-- why: row \"T\u1EA5t c\u1EA3\" KH\u00D4NG ph\u1EA3i mat-option th\u1EADt \u2014 n\u1EBFu l\u00E0 option, gi\u00E1 tr\u1ECB c\u1EE7a n\u00F3 l\u1ECDt v\u00E0o\n               formControl.value v\u00E0 keyboard navigation c\u1EE7a mat-select. Nh\u01B0ng n\u00F3 ph\u1EA3i TR\u00D4NG y h\u1EC7t m\u1ED9t\n               option: d\u00F9ng ch\u00EDnh <mat-pseudo-checkbox> + .mdc-list-item__primary-text m\u00E0 mat-option\n               render, n\u00EAn \u0103n c\u00F9ng scale/margin (rule .sd-multiple) v\u00E0 c\u00F9ng m\u00E0u theme (panel mang\n               class mat-primary) \u2014 mat-checkbox MDC th\u1EADt th\u00EC l\u1EC7ch c\u1ED9t v\u00E0 \u0103n accent c\u1EE7a theme.\n               V\u00EC pseudo-checkbox l\u00E0 decorative + aria-hidden, ch\u00EDnh div mang role/aria/keyboard. -->\n          @if (selectAllVisible()) {\n            @let _selectAllState = selectAllState();\n            <div\n              class=\"sd-select-all-row\"\n              role=\"checkbox\"\n              tabindex=\"0\"\n              [attr.aria-checked]=\"_selectAllState === 'indeterminate' ? 'mixed' : _selectAllState === 'checked'\"\n              [attr.data-autoid]=\"_autoId ? _autoId + '-select-all' : null\"\n              (click)=\"toggleSelectAll()\"\n              (keydown.enter)=\"toggleSelectAll(); $event.preventDefault()\"\n              (keydown.space)=\"toggleSelectAll(); $event.preventDefault()\"\n              (keydown)=\"$event.stopPropagation()\">\n              <mat-pseudo-checkbox class=\"mat-mdc-option-pseudo-checkbox\" [state]=\"_selectAllState\" aria-hidden=\"true\"></mat-pseudo-checkbox>\n              <span class=\"mdc-list-item__primary-text\">{{ 'core.form.select.selectAll' | sdTranslate }}</span>\n            </div>\n          }\n\n          @let _filteredItems = filteredItems();\n          @if (_filteredItems) {\n            @if (!_filteredItems.length && !loading()) {\n              <mat-option class=\"sd-empty\" disabled>\n                <img class=\"sd-image-data-empty\" alt=\"empty-image\" style=\"width: 95px\" />\n              </mat-option>\n            } @else {\n              @let iDefTpl = itemDef()?.templateRef;\n              @if (_valueField && _displayField) {\n                @for (item of _filteredItems; track itemValue(item)) {\n                  <mat-option [value]=\"itemValue(item)\" [disabled]=\"itemDisabled(item)\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ itemDisplay(item) }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              } @else if (!_valueField && !_displayField) {\n                @for (item of _filteredItems; track item) {\n                  <mat-option [value]=\"item\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ item }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              }\n            }\n          }\n\n          @if (loading()) {\n            <mat-option disabled class=\"sd-loading-option\">\n              <mat-spinner diameter=\"24\"></mat-spinner>\n            </mat-option>\n          }\n\n          @let _visibleFooterActions = visibleFooterActions();\n          @if (_visibleFooterActions.length) {\n            <div class=\"sd-select-footer-actions\">\n              @for (action of _visibleFooterActions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.templateRef; context: footerActionContext()\"> </ng-container>\n              }\n            </div>\n          }\n        </mat-select>\n\n        @if (_hideInlineError && _errorVisible) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n        @if (_hideInlineError && _errorVisible) {\n          <span class=\"sd-visually-hidden\" matSuffix>{{ _errorMessage }}</span>\n        }\n\n        <!-- why: <mat-error> ph\u1EA3i c\u00F3 id \u1ED4N \u0110\u1ECANH. MatFormField t\u1EF1 n\u1ED1i id n\u00E0y v\u00E0o aria-describedby\n             c\u1EE7a <mat-select> (v\u00E0 host binding c\u1EE7a MatSelect lo aria-invalid), nh\u01B0ng ch\u1EC9 khi id\n             t\u1ED3n t\u1EA1i \u2014 id auto-gen c\u1EE7a Material \u0111\u1ED5i theo t\u1EEBng instance n\u00EAn test/AT kh\u00F4ng b\u00E1m \u0111\u01B0\u1EE3c. -->\n        @if (_showInlineError) {\n          <mat-error [id]=\"errorId\">{{ _errorMessage }}</mat-error>\n        }\n\n        @if (_normalizedValue?.length && !_required && !formControl.disabled && !_bare) {\n          <button type=\"button\" class=\"sd-clear-btn\" matSuffix (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        } @else {\n          <sd-icon class=\"cursor-pointer sd-suffix-icon\" matSuffix name=\"keyboard_arrow_down\"></sd-icon>\n        }\n      </mat-form-field>\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 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-select\n          #select\n          [formControl]=\"formControl\"\n          [placeholder]=\"placeholder() || _label || ''\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          disableOptionCentering=\"true\"\n          [panelWidth]=\"calculatedPanelWidth()\"\n          [panelClass]=\"'sd-select-panel'\"\n          [class.sd-selected]=\"!_required && _normalizedValue !== undefined && _normalizedValue !== null\"\n          [required]=\"_required\"\n          (openedChange)=\"onOpenedChange($event)\"\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-loading]=\"dataLoading()\"\n          [attr.data-required]=\"dataRequired()\"\n          [attr.data-error-message]=\"dataErrorMessage()\"\n          matTooltipClass=\"sd-multiline-tooltip\"\n          [matTooltipDisabled]=\"!formControl.disabled || !_normalizedValue?.length\"\n          [matTooltip]=\"tooltip() || ''\">\n          <mat-select-trigger>\n            @if (sdSelectedTemplate(); as _selTpl) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  _selTpl;\n                  context: {\n                    $implicit: selectedItems()[0],\n                    item: selectedItems()[0],\n                    items: selectedItems(),\n                    display: _display,\n                    multiple: false,\n                  }\n                \">\n              </ng-container>\n            } @else {\n              {{ _display }}\n            }\n          </mat-select-trigger>\n\n          @if (filtered()) {\n            <div class=\"c-filter-input-container\">\n              <div class=\"filter-input-wrapper\">\n                <sd-icon name=\"search\" aria-hidden=\"true\"></sd-icon>\n                <!-- why: B\u1ECE aria-hidden \u2014 \u0111\u00E2y l\u00E0 \u00F4 l\u1ECDc TH\u1EACT, ng\u01B0\u1EDDi d\u00F9ng focus v\u00E0 g\u00F5 v\u00E0o \u0111\u01B0\u1EE3c, n\u00EAn\n                     aria-hidden ch\u1EC9 l\u00E0m screen reader c\u00E2m. Panel kh\u00F4ng c\u00F3 <label> n\u00E0o, n\u00EAn ph\u1EA3i\n                     t\u1EF1 \u0111\u1EB7t t\u00EAn b\u1EB1ng aria-label, n\u1EBFu kh\u00F4ng AT ch\u1EC9 \u0111\u1ECDc \"edit text\" tr\u1ED1ng tr\u01A1n. -->\n                <input\n                  [formControl]=\"inputControl\"\n                  matInput\n                  autocomplete=\"off\"\n                  class=\"c-search-input\"\n                  [attr.aria-label]=\"'core.form.select.search' | sdTranslate\"\n                  (keydown)=\"$event.stopPropagation()\" />\n              </div>\n            </div>\n          }\n\n          @let _filteredItems = filteredItems();\n          @if (_filteredItems) {\n            @if (!_filteredItems.length && !loading()) {\n              <mat-option class=\"sd-empty\" disabled>\n                <img class=\"sd-image-data-empty\" alt=\"empty-image\" style=\"width: 95px\" />\n              </mat-option>\n            } @else {\n              @let iDefTpl = itemDef()?.templateRef;\n\n              @if (_valueField && _displayField) {\n                @for (item of _filteredItems; track itemValue(item)) {\n                  <mat-option [value]=\"itemValue(item)\" [disabled]=\"itemDisabled(item)\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ itemDisplay(item) }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              } @else if (!_valueField && !_displayField) {\n                @for (item of _filteredItems; track item) {\n                  <mat-option [value]=\"item\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ item }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              }\n            }\n          }\n\n          @if (loading()) {\n            <mat-option disabled class=\"sd-loading-option\">\n              <mat-spinner diameter=\"24\"></mat-spinner>\n            </mat-option>\n          }\n\n          @let _visibleFooterActions = visibleFooterActions();\n          @if (_visibleFooterActions.length) {\n            <div class=\"sd-select-footer-actions\">\n              @for (action of _visibleFooterActions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.templateRef; context: footerActionContext()\"> </ng-container>\n              }\n            </div>\n          }\n        </mat-select>\n\n        @if (_hideInlineError && _errorVisible) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n        @if (_hideInlineError && _errorVisible) {\n          <span class=\"sd-visually-hidden\" matSuffix>{{ _errorMessage }}</span>\n        }\n\n        <!-- why: <mat-error> ph\u1EA3i c\u00F3 id \u1ED4N \u0110\u1ECANH. MatFormField t\u1EF1 n\u1ED1i id n\u00E0y v\u00E0o aria-describedby\n             c\u1EE7a <mat-select> (v\u00E0 host binding c\u1EE7a MatSelect lo aria-invalid), nh\u01B0ng ch\u1EC9 khi id\n             t\u1ED3n t\u1EA1i \u2014 id auto-gen c\u1EE7a Material \u0111\u1ED5i theo t\u1EEBng instance n\u00EAn test/AT kh\u00F4ng b\u00E1m \u0111\u01B0\u1EE3c. -->\n        @if (_showInlineError) {\n          <mat-error [id]=\"errorId\">{{ _errorMessage }}</mat-error>\n        }\n\n        @if (_normalizedValue !== undefined && _normalizedValue !== null && !_required && !formControl.disabled && !_bare) {\n          <button type=\"button\" class=\"sd-clear-btn\" matSuffix (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        } @else {\n          <sd-icon class=\"cursor-pointer sd-suffix-icon\" matSuffix name=\"keyboard_arrow_down\"></sd-icon>\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;max-width:100%}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}::ng-deep .sd-loading-option{min-height:50px!important}::ng-deep .sd-loading-option .mat-pseudo-checkbox{display:none!important}::ng-deep .sd-loading-option .mdc-list-item__primary-text{width:100%;display:flex;justify-content:center;align-items:center}.sd-trigger-text{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .mat-mdc-select-value{max-width:100%;overflow:hidden;width:0;min-width:100%}:host ::ng-deep .sd-selected .mat-mdc-select-arrow{display:none}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}:host ::ng-deep .custom-arrow{pointer-events:none;position:absolute;right:1rem;top:50%;transform:translateY(-50%);display:flex;align-items:center}: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 mat-select.mat-mdc-select-disabled .mat-mdc-select-value{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}::ng-deep .sd-select-panel .mat-mdc-option.sd-empty .mat-pseudo-checkbox{display:none}::ng-deep .sd-select-panel .mat-mdc-option{min-height:36px!important;padding:8px 12px!important}::ng-deep .sd-select-panel .c-filter-input-container{position:sticky;top:0;background-color:#fff;box-shadow:0 1px #f2f2f2;padding:8px;margin-bottom:8px;z-index:1000}::ng-deep .sd-select-panel .c-filter-input-container .filter-input-wrapper{display:flex;align-items:center;padding:4px 8px;border:1px solid var(--sd-border);border-radius:4px;background-color:#fff}::ng-deep .sd-select-panel .c-filter-input-container .filter-input-wrapper sd-icon{color:#dadada}::ng-deep .sd-select-panel .c-filter-input-container .filter-input-wrapper .c-search-input{background-color:#fff;border:none;outline:none;flex:1;padding:4px}::ng-deep .sd-select-panel .sd-select-footer-actions{position:sticky;bottom:0;z-index:1000;display:flex;flex-direction:column;gap:4px;border-top:1px solid #f2f2f2;background-color:#fff}::ng-deep .sd-select-panel .sd-select-all-row{display:flex;align-items:center;justify-content:flex-start;min-height:36px;padding:8px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;border-bottom:1px solid var(--mat-sys-outline-variant, #f2f2f2)}::ng-deep .sd-select-panel .sd-select-all-row:hover,::ng-deep .sd-select-panel .sd-select-all-row:focus-visible{background-color:var(--mat-option-hover-state-layer-color, rgba(0, 0, 0, .04));outline:none}::ng-deep .sd-select-panel .sd-select-all-row .mdc-list-item__primary-text{font-size:14px;white-space:normal}::ng-deep .sd-multiline-tooltip{white-space:pre-line}::ng-deep .mat-mdc-select-panel.sd-select-panel{padding:0}::ng-deep .mat-mdc-select-panel.sd-select-panel .mat-mdc-option.mdc-list-item--disabled.sd-empty .mdc-list-item__primary-text{opacity:.8;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}::ng-deep .sd-select-panel .mat-pseudo-checkbox-minimal{transform:scale(.7);transform-origin:center right}::ng-deep .sd-select-panel.sd-multiple .mat-pseudo-checkbox{transform:scale(.75);margin-right:8px!important}::ng-deep .sd-select-panel.sd-multiple .mdc-list-item__primary-text{font-size:14px;white-space:normal}::ng-deep .mat-mdc-select-panel.sd-select-panel{max-width:90vw!important}::ng-deep .mat-mdc-select-panel.sd-select-panel .mat-mdc-option .mdc-list-item__primary-text{white-space:normal;word-break:break-word;line-height:1.4}:host(.sd-bare){display:inline-flex;align-items:center}: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(.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}:host(.sd-bare) ::ng-deep .mat-mdc-select-arrow-wrapper{display:none}\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: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatPseudoCheckbox, selector: "mat-pseudo-checkbox", inputs: ["state", "disabled", "appearance"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: SdSelect, decorators: [{
             type: Component,
@@ -676,12 +773,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         MatTooltipModule,
                         MatFormFieldModule,
                         MatSelectModule,
-                        MatCheckboxModule,
+                        MatPseudoCheckbox,
                         MatProgressSpinnerModule,
                         SdLabel,
                         SdView,
                         SdSelectFooterActionDirective,
-                    ], template: "@let _label = label();\n@let _appearance = appearance();\n@let _hideInlineError = hideInlineError();\n@let _errorMessage = errorMessage();\n@let _helperText = helperText();\n@let _multiple = multiple();\n@let _required = required();\n@let _normalizedValue = $any(normalizedValue());\n@let _focused = $any(focused());\n@let _isInline = isInline();\n@let _bare = _isInline;\n@let _hasValue = _multiple ? !!_normalizedValue?.length : _normalizedValue !== undefined && _normalizedValue !== null;\n@let _display = display();\n@let _size = size();\n@let _floatLabel = floatLabel();\n@let _valueField = valueField();\n@let _displayField = displayField();\n\n@if (isViewed()) {\n  <sd-view\n    [label]=\"_label\"\n    [labelTemplate]=\"sdLabelTemplate()\"\n    [value]=\"_normalizedValue\"\n    [display]=\"_display\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"viewTemplate()\"\n    [selectedItems]=\"selectedItems()\">\n  </sd-view>\n} @else {\n  @if (_isInline) {\n    <!-- why: inline \u2014 sd-view text l\u00E0 \"m\u1EB7t\" + trigger; editor v\u1EABn render b\u00EAn d\u01B0\u1EDBi (chrome \u1EA9n qua\n         .sd-inline-editor) \u0111\u1EC3 m\u1EDF panel. Text gi\u1EEF nguy\u00EAn, ch\u1EC9 \u0111\u1ED5i khi commit gi\u00E1 tr\u1ECB m\u1EDBi. -->\n    <span class=\"sd-inline-view\" role=\"button\" tabindex=\"0\" (click)=\"enterInlineEdit()\" (keydown.enter)=\"enterInlineEdit()\">\n      <sd-view\n        [label]=\"_label\"\n        [labelTemplate]=\"sdLabelTemplate()\"\n        [value]=\"_normalizedValue\"\n        [display]=\"_display\"\n        [hyperlink]=\"hyperlink()\"\n        [valueTemplate]=\"viewTemplate()\"\n        [selectedItems]=\"selectedItems()\">\n      </sd-view>\n\n      <!-- why: clear-\u00D7 ch\u1EC9 hi\u1EC7n khi hover (CSS), \u0111\u1EB7t CU\u1ED0I face + clear($event) stopPropagation \u2192\n           xo\u00E1 gi\u00E1 tr\u1ECB m\u00E0 KH\u00D4NG m\u1EDF panel; tr\u00E1nh bug c\u0169 (\u00D7 s\u00E1t trigger b\u1ECB b\u1EA5m nh\u1EA7m l\u00FAc \u0111\u00F3ng panel). -->\n      @if (clearable() && _hasValue && !_required && !formControl.disabled) {\n        <button type=\"button\" class=\"sd-inline-clear\" (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      }\n    </span>\n  }\n\n  @if (!_appearance) {\n    <ng-content select=\"[sdLabel]\">\n      @if (_label) {\n        <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\n      }\n    </ng-content>\n  }\n\n  <div\n    class=\"d-flex align-items-center\"\n    [class.sd-inline-editor]=\"_isInline\"\n    [class.c-focused]=\"_focused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    (mouseenter)=\"updatePanelWidth()\"\n    (focusin)=\"updatePanelWidth()\"\n    aria-hidden=\"true\">\n    @if (_multiple) {\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-select\n          #select\n          multiple\n          [formControl]=\"formControl\"\n          [placeholder]=\"placeholder() || _label || ''\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          disableOptionCentering=\"true\"\n          [panelWidth]=\"calculatedPanelWidth()\"\n          [panelClass]=\"['sd-select-panel', 'sd-multiple']\"\n          [class.sd-selected]=\"!_required && _normalizedValue?.length\"\n          [required]=\"_required\"\n          (openedChange)=\"onOpenedChange($event)\"\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-loading]=\"dataLoading()\"\n          [attr.data-required]=\"dataRequired()\"\n          [attr.data-error-message]=\"dataErrorMessage()\"\n          matTooltipClass=\"sd-multiline-tooltip\"\n          [matTooltipDisabled]=\"!formControl.disabled || !_normalizedValue?.length\"\n          [matTooltip]=\"tooltip() || ''\">\n          <mat-select-trigger>\n            @if (sdSelectedTemplate(); as _selTpl) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  _selTpl;\n                  context: { $implicit: selectedItems(), item: selectedItems(), items: selectedItems(), display: _display, multiple: true }\n                \">\n              </ng-container>\n            } @else {\n              <div class=\"sd-trigger-text\" [matTooltip]=\"_display || ''\" matTooltipPosition=\"above\">\n                {{ _display }}\n              </div>\n            }\n          </mat-select-trigger>\n\n          @if (filtered()) {\n            <div class=\"c-filter-input-container\">\n              <div class=\"filter-input-wrapper\">\n                <sd-icon name=\"search\"></sd-icon>\n                <input\n                  [formControl]=\"inputControl\"\n                  aria-hidden=\"true\"\n                  matInput\n                  autocomplete=\"off\"\n                  class=\"c-search-input\"\n                  (keydown)=\"$event.stopPropagation()\" />\n              </div>\n            </div>\n          }\n\n          @let _filteredItems = filteredItems();\n          @if (_filteredItems) {\n            @if (!_filteredItems.length && !loading()) {\n              <mat-option class=\"sd-empty\" disabled>\n                <img class=\"sd-image-data-empty\" alt=\"empty-image\" style=\"width: 95px\" />\n              </mat-option>\n            } @else {\n              @let iDefTpl = itemDef()?.templateRef;\n              @if (_valueField && _displayField) {\n                @for (item of _filteredItems; track itemValue(item)) {\n                  <mat-option [value]=\"itemValue(item)\" [disabled]=\"itemDisabled(item)\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ itemDisplay(item) }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              } @else if (!_valueField && !_displayField) {\n                @for (item of _filteredItems; track item) {\n                  <mat-option [value]=\"item\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ item }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              }\n            }\n          }\n\n          @if (loading()) {\n            <mat-option disabled class=\"sd-loading-option\">\n              <mat-spinner diameter=\"24\"></mat-spinner>\n            </mat-option>\n          }\n\n          @let _visibleFooterActions = visibleFooterActions();\n          @if (_visibleFooterActions.length) {\n            <div class=\"sd-select-footer-actions\">\n              @for (action of _visibleFooterActions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.templateRef; context: footerActionContext()\"> </ng-container>\n              }\n            </div>\n          }\n        </mat-select>\n\n        @if (_hideInlineError && _errorMessage && formControl.touched) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n\n        @if (!_hideInlineError && _errorMessage && formControl.touched) {\n          <mat-error>{{ _errorMessage }}</mat-error>\n        }\n\n        @if (_normalizedValue?.length && !_required && !formControl.disabled && !_bare) {\n          <button type=\"button\" class=\"sd-clear-btn\" matSuffix (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        } @else {\n          <sd-icon class=\"cursor-pointer sd-suffix-icon\" matSuffix name=\"keyboard_arrow_down\"></sd-icon>\n        }\n      </mat-form-field>\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 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-select\n          #select\n          [formControl]=\"formControl\"\n          [placeholder]=\"placeholder() || _label || ''\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          disableOptionCentering=\"true\"\n          [panelWidth]=\"calculatedPanelWidth()\"\n          [panelClass]=\"'sd-select-panel'\"\n          [class.sd-selected]=\"!_required && _normalizedValue !== undefined && _normalizedValue !== null\"\n          [required]=\"_required\"\n          (openedChange)=\"onOpenedChange($event)\"\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-loading]=\"dataLoading()\"\n          [attr.data-required]=\"dataRequired()\"\n          [attr.data-error-message]=\"dataErrorMessage()\"\n          matTooltipClass=\"sd-multiline-tooltip\"\n          [matTooltipDisabled]=\"!formControl.disabled || !_normalizedValue?.length\"\n          [matTooltip]=\"tooltip() || ''\">\n          <mat-select-trigger>\n            @if (sdSelectedTemplate(); as _selTpl) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  _selTpl;\n                  context: {\n                    $implicit: selectedItems()[0],\n                    item: selectedItems()[0],\n                    items: selectedItems(),\n                    display: _display,\n                    multiple: false,\n                  }\n                \">\n              </ng-container>\n            } @else {\n              {{ _display }}\n            }\n          </mat-select-trigger>\n\n          @if (filtered()) {\n            <div class=\"c-filter-input-container\">\n              <div class=\"filter-input-wrapper\">\n                <sd-icon name=\"search\"></sd-icon>\n                <input\n                  [formControl]=\"inputControl\"\n                  aria-hidden=\"true\"\n                  matInput\n                  autocomplete=\"off\"\n                  class=\"c-search-input\"\n                  (keydown)=\"$event.stopPropagation()\" />\n              </div>\n            </div>\n          }\n\n          @let _filteredItems = filteredItems();\n          @if (_filteredItems) {\n            @if (!_filteredItems.length && !loading()) {\n              <mat-option class=\"sd-empty\" disabled>\n                <img class=\"sd-image-data-empty\" alt=\"empty-image\" style=\"width: 95px\" />\n              </mat-option>\n            } @else {\n              @let iDefTpl = itemDef()?.templateRef;\n\n              @if (_valueField && _displayField) {\n                @for (item of _filteredItems; track itemValue(item)) {\n                  <mat-option [value]=\"itemValue(item)\" [disabled]=\"itemDisabled(item)\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ itemDisplay(item) }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              } @else if (!_valueField && !_displayField) {\n                @for (item of _filteredItems; track item) {\n                  <mat-option [value]=\"item\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ item }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              }\n            }\n          }\n\n          @if (loading()) {\n            <mat-option disabled class=\"sd-loading-option\">\n              <mat-spinner diameter=\"24\"></mat-spinner>\n            </mat-option>\n          }\n\n          @let _visibleFooterActions = visibleFooterActions();\n          @if (_visibleFooterActions.length) {\n            <div class=\"sd-select-footer-actions\">\n              @for (action of _visibleFooterActions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.templateRef; context: footerActionContext()\"> </ng-container>\n              }\n            </div>\n          }\n        </mat-select>\n\n        @if (_hideInlineError && _errorMessage && formControl.touched) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n\n        @if (!_hideInlineError && _errorMessage && formControl.touched) {\n          <mat-error>{{ _errorMessage }}</mat-error>\n        }\n\n        @if (_normalizedValue !== undefined && _normalizedValue !== null && !_required && !formControl.disabled && !_bare) {\n          <button type=\"button\" class=\"sd-clear-btn\" matSuffix (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        } @else {\n          <sd-icon class=\"cursor-pointer sd-suffix-icon\" matSuffix name=\"keyboard_arrow_down\"></sd-icon>\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;max-width:100%}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}::ng-deep .sd-loading-option{min-height:50px!important}::ng-deep .sd-loading-option .mat-pseudo-checkbox{display:none!important}::ng-deep .sd-loading-option .mdc-list-item__primary-text{width:100%;display:flex;justify-content:center;align-items:center}.sd-trigger-text{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .mat-mdc-select-value{max-width:100%;overflow:hidden;width:0;min-width:100%}:host ::ng-deep .sd-selected .mat-mdc-select-arrow{display:none}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}:host ::ng-deep .custom-arrow{pointer-events:none;position:absolute;right:1rem;top:50%;transform:translateY(-50%);display:flex;align-items:center}: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 mat-select.mat-mdc-select-disabled .mat-mdc-select-value{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}::ng-deep .sd-select-panel .mat-mdc-option.sd-empty .mat-pseudo-checkbox{display:none}::ng-deep .sd-select-panel .mat-mdc-option{min-height:36px!important;padding:8px 12px!important}::ng-deep .sd-select-panel .c-filter-input-container{position:sticky;top:0;background-color:#fff;box-shadow:0 1px #f2f2f2;padding:8px;margin-bottom:8px;z-index:1000}::ng-deep .sd-select-panel .c-filter-input-container .filter-input-wrapper{display:flex;align-items:center;padding:4px 8px;border:1px solid var(--sd-border);border-radius:4px;background-color:#fff}::ng-deep .sd-select-panel .c-filter-input-container .filter-input-wrapper sd-icon{color:#dadada}::ng-deep .sd-select-panel .c-filter-input-container .filter-input-wrapper .c-search-input{background-color:#fff;border:none;outline:none;flex:1;padding:4px}::ng-deep .sd-select-panel .sd-select-footer-actions{position:sticky;bottom:0;z-index:1000;display:flex;flex-direction:column;gap:4px;border-top:1px solid #f2f2f2;background-color:#fff}::ng-deep .sd-multiline-tooltip{white-space:pre-line}::ng-deep .mat-mdc-select-panel.sd-select-panel{padding:0}::ng-deep .mat-mdc-select-panel.sd-select-panel .mat-mdc-option.mdc-list-item--disabled.sd-empty .mdc-list-item__primary-text{opacity:.8;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}::ng-deep .sd-select-panel .mat-pseudo-checkbox-minimal{transform:scale(.7);transform-origin:center right}::ng-deep .sd-select-panel.sd-multiple .mat-pseudo-checkbox{transform:scale(.75);margin-right:8px!important}::ng-deep .sd-select-panel.sd-multiple .mdc-list-item__primary-text{font-size:14px;white-space:normal}::ng-deep .mat-mdc-select-panel.sd-select-panel{max-width:90vw!important}::ng-deep .mat-mdc-select-panel.sd-select-panel .mat-mdc-option .mdc-list-item__primary-text{white-space:normal;word-break:break-word;line-height:1.4}:host(.sd-bare){display:inline-flex;align-items:center}: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(.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}:host(.sd-bare) ::ng-deep .mat-mdc-select-arrow-wrapper{display:none}\n"] }]
+                        SdTranslatePipe,
+                    ], template: "@let _label = label();\n@let _appearance = appearance();\n@let _hideInlineError = hideInlineError();\n@let _errorMessage = errorMessage();\n@let _helperText = helperText();\n@let _multiple = multiple();\n@let _required = required();\n@let _normalizedValue = $any(normalizedValue());\n@let _focused = $any(focused());\n@let _isInline = isInline();\n@let _bare = _isInline;\n@let _hasValue = _multiple ? !!_normalizedValue?.length : _normalizedValue !== undefined && _normalizedValue !== null;\n@let _display = display();\n@let _size = size();\n@let _floatLabel = floatLabel();\n@let _valueField = valueField();\n@let _displayField = displayField();\n@let _autoId = autoId();\n<!-- why: m\u1ED9t c\u1ED5ng gate duy nh\u1EA5t cho <mat-error>, aria-invalid v\u00E0 aria-describedby. -->\n@let _errorVisible = !!_errorMessage && formControl.touched;\n@let _showInlineError = !_hideInlineError && _errorVisible;\n\n@if (isViewed()) {\n  <sd-view\n    [label]=\"_label\"\n    [labelTemplate]=\"sdLabelTemplate()\"\n    [value]=\"_normalizedValue\"\n    [display]=\"_display\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"viewTemplate()\"\n    [selectedItems]=\"selectedItems()\">\n  </sd-view>\n} @else {\n  @if (_isInline) {\n    <!-- why: inline \u2014 sd-view text l\u00E0 \"m\u1EB7t\" + trigger; editor v\u1EABn render b\u00EAn d\u01B0\u1EDBi (chrome \u1EA9n qua\n         .sd-inline-editor) \u0111\u1EC3 m\u1EDF panel. Text gi\u1EEF nguy\u00EAn, ch\u1EC9 \u0111\u1ED5i khi commit gi\u00E1 tr\u1ECB m\u1EDBi. -->\n    <span class=\"sd-inline-view\" role=\"button\" tabindex=\"0\" (click)=\"enterInlineEdit()\" (keydown.enter)=\"enterInlineEdit()\">\n      <sd-view\n        [label]=\"_label\"\n        [labelTemplate]=\"sdLabelTemplate()\"\n        [value]=\"_normalizedValue\"\n        [display]=\"_display\"\n        [hyperlink]=\"hyperlink()\"\n        [valueTemplate]=\"viewTemplate()\"\n        [selectedItems]=\"selectedItems()\">\n      </sd-view>\n\n      <!-- why: clear-\u00D7 ch\u1EC9 hi\u1EC7n khi hover (CSS), \u0111\u1EB7t CU\u1ED0I face + clear($event) stopPropagation \u2192\n           xo\u00E1 gi\u00E1 tr\u1ECB m\u00E0 KH\u00D4NG m\u1EDF panel; tr\u00E1nh bug c\u0169 (\u00D7 s\u00E1t trigger b\u1ECB b\u1EA5m nh\u1EA7m l\u00FAc \u0111\u00F3ng panel). -->\n      @if (clearable() && _hasValue && !_required && !formControl.disabled) {\n        <button type=\"button\" class=\"sd-inline-clear\" (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n          <sd-icon name=\"close\"></sd-icon>\n        </button>\n      }\n    </span>\n  }\n\n  @if (!_appearance) {\n    <ng-content select=\"[sdLabel]\">\n      @if (_label) {\n        <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\n      }\n    </ng-content>\n  }\n\n  <!-- why: div ch\u1EC9 l\u00E0 h\u1ED9p layout. aria-hidden=\"true\" c\u0169 \u1EA9n C\u1EA2 c\u00E2y con \u2014 label, <mat-select>,\n       <mat-error>, n\u00FAt clear \u2014 kh\u1ECFi accessibility tree. role=\"presentation\" ch\u1EC9 v\u00F4 hi\u1EC7u ho\u00E1\n       ch\u00EDnh div, KH\u00D4NG lan xu\u1ED1ng con; (click) l\u00E0 ti\u1EC7n \u00EDch chu\u1ED9t, b\u00E0n ph\u00EDm Tab th\u1EB3ng v\u00E0o\n       <mat-select> v\u00E0 (focusin) \u0111\u00E3 lo ph\u1EA7n updatePanelWidth() t\u01B0\u01A1ng \u1EE9ng. -->\n  <div\n    class=\"d-flex align-items-center\"\n    role=\"presentation\"\n    [class.sd-inline-editor]=\"_isInline\"\n    [class.c-focused]=\"_focused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    (mouseenter)=\"updatePanelWidth()\"\n    (focusin)=\"updatePanelWidth()\">\n    @if (_multiple) {\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-select\n          #select\n          multiple\n          [formControl]=\"formControl\"\n          [placeholder]=\"placeholder() || _label || ''\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          disableOptionCentering=\"true\"\n          [panelWidth]=\"calculatedPanelWidth()\"\n          [panelClass]=\"['sd-select-panel', 'sd-multiple']\"\n          [class.sd-selected]=\"!_required && _normalizedValue?.length\"\n          [required]=\"_required\"\n          (openedChange)=\"onOpenedChange($event)\"\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-loading]=\"dataLoading()\"\n          [attr.data-required]=\"dataRequired()\"\n          [attr.data-error-message]=\"dataErrorMessage()\"\n          matTooltipClass=\"sd-multiline-tooltip\"\n          [matTooltipDisabled]=\"!formControl.disabled || !_normalizedValue?.length\"\n          [matTooltip]=\"tooltip() || ''\">\n          <mat-select-trigger>\n            @if (sdSelectedTemplate(); as _selTpl) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  _selTpl;\n                  context: { $implicit: selectedItems(), item: selectedItems(), items: selectedItems(), display: _display, multiple: true }\n                \">\n              </ng-container>\n            } @else {\n              <div class=\"sd-trigger-text\" [matTooltip]=\"_display || ''\" matTooltipPosition=\"above\">\n                {{ _display }}\n              </div>\n            }\n          </mat-select-trigger>\n\n          @if (filtered()) {\n            <div class=\"c-filter-input-container\">\n              <div class=\"filter-input-wrapper\">\n                <sd-icon name=\"search\" aria-hidden=\"true\"></sd-icon>\n                <!-- why: B\u1ECE aria-hidden \u2014 \u0111\u00E2y l\u00E0 \u00F4 l\u1ECDc TH\u1EACT, ng\u01B0\u1EDDi d\u00F9ng focus v\u00E0 g\u00F5 v\u00E0o \u0111\u01B0\u1EE3c, n\u00EAn\n                     aria-hidden ch\u1EC9 l\u00E0m screen reader c\u00E2m. Panel kh\u00F4ng c\u00F3 <label> n\u00E0o, n\u00EAn ph\u1EA3i\n                     t\u1EF1 \u0111\u1EB7t t\u00EAn b\u1EB1ng aria-label, n\u1EBFu kh\u00F4ng AT ch\u1EC9 \u0111\u1ECDc \"edit text\" tr\u1ED1ng tr\u01A1n. -->\n                <input\n                  [formControl]=\"inputControl\"\n                  matInput\n                  autocomplete=\"off\"\n                  class=\"c-search-input\"\n                  [attr.aria-label]=\"'core.form.select.search' | sdTranslate\"\n                  (keydown)=\"$event.stopPropagation()\" />\n              </div>\n            </div>\n          }\n\n          <!-- why: row \"T\u1EA5t c\u1EA3\" KH\u00D4NG ph\u1EA3i mat-option th\u1EADt \u2014 n\u1EBFu l\u00E0 option, gi\u00E1 tr\u1ECB c\u1EE7a n\u00F3 l\u1ECDt v\u00E0o\n               formControl.value v\u00E0 keyboard navigation c\u1EE7a mat-select. Nh\u01B0ng n\u00F3 ph\u1EA3i TR\u00D4NG y h\u1EC7t m\u1ED9t\n               option: d\u00F9ng ch\u00EDnh <mat-pseudo-checkbox> + .mdc-list-item__primary-text m\u00E0 mat-option\n               render, n\u00EAn \u0103n c\u00F9ng scale/margin (rule .sd-multiple) v\u00E0 c\u00F9ng m\u00E0u theme (panel mang\n               class mat-primary) \u2014 mat-checkbox MDC th\u1EADt th\u00EC l\u1EC7ch c\u1ED9t v\u00E0 \u0103n accent c\u1EE7a theme.\n               V\u00EC pseudo-checkbox l\u00E0 decorative + aria-hidden, ch\u00EDnh div mang role/aria/keyboard. -->\n          @if (selectAllVisible()) {\n            @let _selectAllState = selectAllState();\n            <div\n              class=\"sd-select-all-row\"\n              role=\"checkbox\"\n              tabindex=\"0\"\n              [attr.aria-checked]=\"_selectAllState === 'indeterminate' ? 'mixed' : _selectAllState === 'checked'\"\n              [attr.data-autoid]=\"_autoId ? _autoId + '-select-all' : null\"\n              (click)=\"toggleSelectAll()\"\n              (keydown.enter)=\"toggleSelectAll(); $event.preventDefault()\"\n              (keydown.space)=\"toggleSelectAll(); $event.preventDefault()\"\n              (keydown)=\"$event.stopPropagation()\">\n              <mat-pseudo-checkbox class=\"mat-mdc-option-pseudo-checkbox\" [state]=\"_selectAllState\" aria-hidden=\"true\"></mat-pseudo-checkbox>\n              <span class=\"mdc-list-item__primary-text\">{{ 'core.form.select.selectAll' | sdTranslate }}</span>\n            </div>\n          }\n\n          @let _filteredItems = filteredItems();\n          @if (_filteredItems) {\n            @if (!_filteredItems.length && !loading()) {\n              <mat-option class=\"sd-empty\" disabled>\n                <img class=\"sd-image-data-empty\" alt=\"empty-image\" style=\"width: 95px\" />\n              </mat-option>\n            } @else {\n              @let iDefTpl = itemDef()?.templateRef;\n              @if (_valueField && _displayField) {\n                @for (item of _filteredItems; track itemValue(item)) {\n                  <mat-option [value]=\"itemValue(item)\" [disabled]=\"itemDisabled(item)\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ itemDisplay(item) }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              } @else if (!_valueField && !_displayField) {\n                @for (item of _filteredItems; track item) {\n                  <mat-option [value]=\"item\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ item }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              }\n            }\n          }\n\n          @if (loading()) {\n            <mat-option disabled class=\"sd-loading-option\">\n              <mat-spinner diameter=\"24\"></mat-spinner>\n            </mat-option>\n          }\n\n          @let _visibleFooterActions = visibleFooterActions();\n          @if (_visibleFooterActions.length) {\n            <div class=\"sd-select-footer-actions\">\n              @for (action of _visibleFooterActions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.templateRef; context: footerActionContext()\"> </ng-container>\n              }\n            </div>\n          }\n        </mat-select>\n\n        @if (_hideInlineError && _errorVisible) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n        @if (_hideInlineError && _errorVisible) {\n          <span class=\"sd-visually-hidden\" matSuffix>{{ _errorMessage }}</span>\n        }\n\n        <!-- why: <mat-error> ph\u1EA3i c\u00F3 id \u1ED4N \u0110\u1ECANH. MatFormField t\u1EF1 n\u1ED1i id n\u00E0y v\u00E0o aria-describedby\n             c\u1EE7a <mat-select> (v\u00E0 host binding c\u1EE7a MatSelect lo aria-invalid), nh\u01B0ng ch\u1EC9 khi id\n             t\u1ED3n t\u1EA1i \u2014 id auto-gen c\u1EE7a Material \u0111\u1ED5i theo t\u1EEBng instance n\u00EAn test/AT kh\u00F4ng b\u00E1m \u0111\u01B0\u1EE3c. -->\n        @if (_showInlineError) {\n          <mat-error [id]=\"errorId\">{{ _errorMessage }}</mat-error>\n        }\n\n        @if (_normalizedValue?.length && !_required && !formControl.disabled && !_bare) {\n          <button type=\"button\" class=\"sd-clear-btn\" matSuffix (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        } @else {\n          <sd-icon class=\"cursor-pointer sd-suffix-icon\" matSuffix name=\"keyboard_arrow_down\"></sd-icon>\n        }\n      </mat-form-field>\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 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-select\n          #select\n          [formControl]=\"formControl\"\n          [placeholder]=\"placeholder() || _label || ''\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          disableOptionCentering=\"true\"\n          [panelWidth]=\"calculatedPanelWidth()\"\n          [panelClass]=\"'sd-select-panel'\"\n          [class.sd-selected]=\"!_required && _normalizedValue !== undefined && _normalizedValue !== null\"\n          [required]=\"_required\"\n          (openedChange)=\"onOpenedChange($event)\"\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-loading]=\"dataLoading()\"\n          [attr.data-required]=\"dataRequired()\"\n          [attr.data-error-message]=\"dataErrorMessage()\"\n          matTooltipClass=\"sd-multiline-tooltip\"\n          [matTooltipDisabled]=\"!formControl.disabled || !_normalizedValue?.length\"\n          [matTooltip]=\"tooltip() || ''\">\n          <mat-select-trigger>\n            @if (sdSelectedTemplate(); as _selTpl) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  _selTpl;\n                  context: {\n                    $implicit: selectedItems()[0],\n                    item: selectedItems()[0],\n                    items: selectedItems(),\n                    display: _display,\n                    multiple: false,\n                  }\n                \">\n              </ng-container>\n            } @else {\n              {{ _display }}\n            }\n          </mat-select-trigger>\n\n          @if (filtered()) {\n            <div class=\"c-filter-input-container\">\n              <div class=\"filter-input-wrapper\">\n                <sd-icon name=\"search\" aria-hidden=\"true\"></sd-icon>\n                <!-- why: B\u1ECE aria-hidden \u2014 \u0111\u00E2y l\u00E0 \u00F4 l\u1ECDc TH\u1EACT, ng\u01B0\u1EDDi d\u00F9ng focus v\u00E0 g\u00F5 v\u00E0o \u0111\u01B0\u1EE3c, n\u00EAn\n                     aria-hidden ch\u1EC9 l\u00E0m screen reader c\u00E2m. Panel kh\u00F4ng c\u00F3 <label> n\u00E0o, n\u00EAn ph\u1EA3i\n                     t\u1EF1 \u0111\u1EB7t t\u00EAn b\u1EB1ng aria-label, n\u1EBFu kh\u00F4ng AT ch\u1EC9 \u0111\u1ECDc \"edit text\" tr\u1ED1ng tr\u01A1n. -->\n                <input\n                  [formControl]=\"inputControl\"\n                  matInput\n                  autocomplete=\"off\"\n                  class=\"c-search-input\"\n                  [attr.aria-label]=\"'core.form.select.search' | sdTranslate\"\n                  (keydown)=\"$event.stopPropagation()\" />\n              </div>\n            </div>\n          }\n\n          @let _filteredItems = filteredItems();\n          @if (_filteredItems) {\n            @if (!_filteredItems.length && !loading()) {\n              <mat-option class=\"sd-empty\" disabled>\n                <img class=\"sd-image-data-empty\" alt=\"empty-image\" style=\"width: 95px\" />\n              </mat-option>\n            } @else {\n              @let iDefTpl = itemDef()?.templateRef;\n\n              @if (_valueField && _displayField) {\n                @for (item of _filteredItems; track itemValue(item)) {\n                  <mat-option [value]=\"itemValue(item)\" [disabled]=\"itemDisabled(item)\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ itemDisplay(item) }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              } @else if (!_valueField && !_displayField) {\n                @for (item of _filteredItems; track item) {\n                  <mat-option [value]=\"item\">\n                    <div>\n                      @if (iDefTpl) {\n                        <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\n                      } @else {\n                        {{ item }}\n                      }\n                    </div>\n                  </mat-option>\n                }\n              }\n            }\n          }\n\n          @if (loading()) {\n            <mat-option disabled class=\"sd-loading-option\">\n              <mat-spinner diameter=\"24\"></mat-spinner>\n            </mat-option>\n          }\n\n          @let _visibleFooterActions = visibleFooterActions();\n          @if (_visibleFooterActions.length) {\n            <div class=\"sd-select-footer-actions\">\n              @for (action of _visibleFooterActions; track action) {\n                <ng-container *ngTemplateOutlet=\"action.templateRef; context: footerActionContext()\"> </ng-container>\n              }\n            </div>\n          }\n        </mat-select>\n\n        @if (_hideInlineError && _errorVisible) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n        @if (_hideInlineError && _errorVisible) {\n          <span class=\"sd-visually-hidden\" matSuffix>{{ _errorMessage }}</span>\n        }\n\n        <!-- why: <mat-error> ph\u1EA3i c\u00F3 id \u1ED4N \u0110\u1ECANH. MatFormField t\u1EF1 n\u1ED1i id n\u00E0y v\u00E0o aria-describedby\n             c\u1EE7a <mat-select> (v\u00E0 host binding c\u1EE7a MatSelect lo aria-invalid), nh\u01B0ng ch\u1EC9 khi id\n             t\u1ED3n t\u1EA1i \u2014 id auto-gen c\u1EE7a Material \u0111\u1ED5i theo t\u1EEBng instance n\u00EAn test/AT kh\u00F4ng b\u00E1m \u0111\u01B0\u1EE3c. -->\n        @if (_showInlineError) {\n          <mat-error [id]=\"errorId\">{{ _errorMessage }}</mat-error>\n        }\n\n        @if (_normalizedValue !== undefined && _normalizedValue !== null && !_required && !formControl.disabled && !_bare) {\n          <button type=\"button\" class=\"sd-clear-btn\" matSuffix (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        } @else {\n          <sd-icon class=\"cursor-pointer sd-suffix-icon\" matSuffix name=\"keyboard_arrow_down\"></sd-icon>\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;max-width:100%}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}::ng-deep .sd-loading-option{min-height:50px!important}::ng-deep .sd-loading-option .mat-pseudo-checkbox{display:none!important}::ng-deep .sd-loading-option .mdc-list-item__primary-text{width:100%;display:flex;justify-content:center;align-items:center}.sd-trigger-text{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .mat-mdc-select-value{max-width:100%;overflow:hidden;width:0;min-width:100%}:host ::ng-deep .sd-selected .mat-mdc-select-arrow{display:none}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}:host ::ng-deep .custom-arrow{pointer-events:none;position:absolute;right:1rem;top:50%;transform:translateY(-50%);display:flex;align-items:center}: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 mat-select.mat-mdc-select-disabled .mat-mdc-select-value{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}::ng-deep .sd-select-panel .mat-mdc-option.sd-empty .mat-pseudo-checkbox{display:none}::ng-deep .sd-select-panel .mat-mdc-option{min-height:36px!important;padding:8px 12px!important}::ng-deep .sd-select-panel .c-filter-input-container{position:sticky;top:0;background-color:#fff;box-shadow:0 1px #f2f2f2;padding:8px;margin-bottom:8px;z-index:1000}::ng-deep .sd-select-panel .c-filter-input-container .filter-input-wrapper{display:flex;align-items:center;padding:4px 8px;border:1px solid var(--sd-border);border-radius:4px;background-color:#fff}::ng-deep .sd-select-panel .c-filter-input-container .filter-input-wrapper sd-icon{color:#dadada}::ng-deep .sd-select-panel .c-filter-input-container .filter-input-wrapper .c-search-input{background-color:#fff;border:none;outline:none;flex:1;padding:4px}::ng-deep .sd-select-panel .sd-select-footer-actions{position:sticky;bottom:0;z-index:1000;display:flex;flex-direction:column;gap:4px;border-top:1px solid #f2f2f2;background-color:#fff}::ng-deep .sd-select-panel .sd-select-all-row{display:flex;align-items:center;justify-content:flex-start;min-height:36px;padding:8px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;border-bottom:1px solid var(--mat-sys-outline-variant, #f2f2f2)}::ng-deep .sd-select-panel .sd-select-all-row:hover,::ng-deep .sd-select-panel .sd-select-all-row:focus-visible{background-color:var(--mat-option-hover-state-layer-color, rgba(0, 0, 0, .04));outline:none}::ng-deep .sd-select-panel .sd-select-all-row .mdc-list-item__primary-text{font-size:14px;white-space:normal}::ng-deep .sd-multiline-tooltip{white-space:pre-line}::ng-deep .mat-mdc-select-panel.sd-select-panel{padding:0}::ng-deep .mat-mdc-select-panel.sd-select-panel .mat-mdc-option.mdc-list-item--disabled.sd-empty .mdc-list-item__primary-text{opacity:.8;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}::ng-deep .sd-select-panel .mat-pseudo-checkbox-minimal{transform:scale(.7);transform-origin:center right}::ng-deep .sd-select-panel.sd-multiple .mat-pseudo-checkbox{transform:scale(.75);margin-right:8px!important}::ng-deep .sd-select-panel.sd-multiple .mdc-list-item__primary-text{font-size:14px;white-space:normal}::ng-deep .mat-mdc-select-panel.sd-select-panel{max-width:90vw!important}::ng-deep .mat-mdc-select-panel.sd-select-panel .mat-mdc-option .mdc-list-item__primary-text{white-space:normal;word-break:break-word;line-height:1.4}:host(.sd-bare){display:inline-flex;align-items:center}: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(.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}:host(.sd-bare) ::ng-deep .mat-mdc-select-arrow-wrapper{display:none}\n"] }]
         }], ctorParameters: () => [] });
 
 /**