@softheon/armature 21.18.0 → 21.19.0

package/fesm2022/softheon-armature.mjs

@@ -3661,6 +3661,32 @@ var States;
     States["WY"] = "Wyoming";
 })(States || (States = {}));
 
+/**
+ * Helpers shared by the input filtering directives.
+ */
+/**
+ * Keys that never insert a character and must always reach the input:
+ * delete, backspace, tab, escape, enter, decimal point (numpad and keyboard).
+ */
+const NON_PRINTABLE_KEY_CODES = [46, 8, 9, 27, 13, 110, 190];
+/**
+ * Determines whether a keydown is a modifier driven editing shortcut.
+ *
+ * Copy, cut, paste, select all, undo and redo are triggered with `Ctrl` on
+ * Windows/Linux and with `Cmd` on macOS. macOS reports `Cmd` through
+ * `metaKey`, not `ctrlKey`, so both must be accepted or the filtering
+ * directives end up calling `preventDefault()` on those shortcuts.
+ *
+ * `altKey` is excluded on purpose: `AltGr` is reported as `Ctrl + Alt` on some
+ * layouts and is used to type characters that these directives still filter.
+ *
+ * @param event The keyboard event raised by the input.
+ * @returns True when the event is a non destructive modifier shortcut that must be allowed.
+ */
+function isEditingShortcut(event) {
+    return (event.ctrlKey || event.metaKey) && !event.altKey;
+}
+
 /**
  * Numbers only directive
  */
@@ -3679,15 +3705,11 @@ class NumbersOnlyDirective {
     onKeyDown(event) {
         const e = event;
         if (this.sofArNumbersOnly) {
-            if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
-                // Allow: Ctrl+A
-                (e.keyCode === 65 && e.ctrlKey) ||
-                // Allow: Ctrl+C
-                (e.keyCode === 67 && e.ctrlKey) ||
-                // Allow: Ctrl+X
-                (e.keyCode === 88 && e.ctrlKey) ||
-                // Allow: Ctrl+V
-                (e.keyCode === 86 && e.ctrlKey) ||
+            // Allow Ctrl/Cmd shortcuts (copy, cut, paste, select all, undo, redo).
+            if (isEditingShortcut(e)) {
+                return;
+            }
+            if (NON_PRINTABLE_KEY_CODES.indexOf(e.keyCode) !== -1 ||
                 // Allow: home, end, left, right
                 (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
@@ -3838,13 +3860,11 @@ class AlphaNumericDirective {
         // Reset values each time
         this.isNumber = false;
         this.isLetter = false;
-        if (this.allowedKeys.indexOf(e.code.toLowerCase()) !== -1 ||
-            // Allow: Ctrl+A
-            (e.code.toLowerCase() === 'keya' && e.ctrlKey) ||
-            // Allow: Ctrl+C
-            (e.code.toLowerCase() === 'keyc' && e.ctrlKey) ||
-            // Allow: Ctrl+X
-            (e.code.toLowerCase() === 'keyx' && e.ctrlKey)) {
+        // Allow Ctrl/Cmd shortcuts (copy, cut, paste, select all, undo, redo).
+        if (isEditingShortcut(e)) {
+            return;
+        }
+        if (this.allowedKeys.indexOf(e.code.toLowerCase()) !== -1) {
             // let it happen, don't do anything
             return;
         }
@@ -4021,13 +4041,11 @@ class LettersCharactersDirective {
     onKeyDown(event) {
         const e = event;
         if (this.sofArLettersAndSpecialCharacters) {
-            if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
-                // Allow: Ctrl+A
-                (e.keyCode === 65 && e.ctrlKey) ||
-                // Allow: Ctrl+C
-                (e.keyCode === 67 && e.ctrlKey) ||
-                // Allow: Ctrl+X
-                (e.keyCode === 88 && e.ctrlKey) ||
+            // Allow Ctrl/Cmd shortcuts (copy, cut, paste, select all, undo, redo).
+            if (isEditingShortcut(e)) {
+                return;
+            }
+            if (NON_PRINTABLE_KEY_CODES.indexOf(e.keyCode) !== -1 ||
                 // Allow: spaces
                 (e.keyCode === 32) ||
                 // Allow: - (minus sign) on numpad or alphabet keyboard key
@@ -4107,13 +4125,11 @@ class LettersOnlyDirective {
     onKeyDown(event) {
         const e = event;
         if (this.sofArLettersOnly) {
-            if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
-                // Allow: Ctrl+A
-                (e.keyCode === 65 && e.ctrlKey) ||
-                // Allow: Ctrl+C
-                (e.keyCode === 67 && e.ctrlKey) ||
-                // Allow: Ctrl+X
-                (e.keyCode === 88 && e.ctrlKey) ||
+            // Allow Ctrl/Cmd shortcuts (copy, cut, paste, select all, undo, redo).
+            if (isEditingShortcut(e)) {
+                return;
+            }
+            if (NON_PRINTABLE_KEY_CODES.indexOf(e.keyCode) !== -1 ||
                 // Allow: spaces
                 (e.keyCode === 32) ||
                 // Allow: - (minus sign) on numpad or alphabet keyboard key
@@ -8291,7 +8307,7 @@ class SofSelectComponent {
         return this.derivedFormControl?.errors ?? null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SofSelectComponent, deps: [{ token: i1$7.NgControl, host: true, optional: true, self: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SofSelectComponent, isStandalone: true, selector: "sof-select", inputs: { id: "id", options: "options", label: "label", helpText: "helpText", multiple: "multiple", showSelectAll: "showSelectAll", maxSelections: "maxSelections", isDisabled: "isDisabled", width: "width", useWhiteBackground: "useWhiteBackground", errorMessages: "errorMessages" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown": "handleKeydown($event)" }, properties: { "class.full-width": "this.width === \"full\"" } }, viewQueries: [{ propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true }, { propertyName: "multiChipContainer", first: true, predicate: ["multiChipContainer"], descendants: true }], ngImport: i0, template: "<div \r\n  class=\"sof-select-field\"\r\n  [class.full-width]=\"width === 'full'\">\r\n  @if (hasSelectedItems()) {\r\n    <label \r\n      [for]=\"id + '-select-trigger'\"\r\n      [class.text-low-emphasis]=\"isDisabled\"\r\n      [class.has-error]=\"errorMessage()?.length\">\r\n      {{label | translate}}\r\n    </label>\r\n  }\r\n  <div class=\"relative-container\">\r\n    <button \r\n      [id]=\"id + '-select-trigger'\" \r\n      [name]=\"controlName\"\r\n      class=\"trigger p-v-8 p-h-16\" \r\n      [class.has-error]=\"errorMessage()?.length\"\r\n      [class.expanded]=\"expanded()\"\r\n      [class.white-bg]=\"useWhiteBackground\"\r\n      [disabled]=\"isDisabled\"\r\n      type=\"button\" \r\n      role=\"combobox\" \r\n      [attr.aria-expanded]=\"expanded()\" \r\n      [attr.aria-controls]=\"expanded() ? id + '-listbox' : null\"\r\n      [attr.aria-label]=\"label | translate\"\r\n      aria-haspopup=\"listbox\" \r\n      (click)=\"togglePanel()\">\r\n      @if (multiple) {\r\n        <div #multiChipContainer class=\"multi-chip-container\">\r\n          @if (hasSelectedItems()) {\r\n            @if (isAllSelected()) {\r\n              <sof-chip \r\n                class=\"visible-chip\"\r\n                theme=\"primary\"\r\n                [label]=\"'armature.select.all'\"\r\n                [removeButtonId]=\"`${id}-select-chip-remove-all`\"\r\n                (removeEvent)=\"removeChip($event)\"\r\n              />\r\n            } @else {\r\n              @for (label of visibleChips(); let i = $index; track i) {\r\n                <sof-chip \r\n                  class=\"visible-chip\"\r\n                  theme=\"primary\"\r\n                  [label]=\"label\"\r\n                  [removeButtonId]=\"`${id}-select-chip-remove-${i}`\"\r\n                  (removeEvent)=\"removeChip($event)\"\r\n                />\r\n              }\r\n              @if (hiddenChipsCount()) {\r\n                <sof-chip \r\n                  theme=\"primary\"\r\n                  [label]=\"`+${hiddenChipsCount()}`\"\r\n                  [canRemove]=\"false\"\r\n                  m-l-auto\r\n                />\r\n              }\r\n            }\r\n          } @else {\r\n            <span class=\"body1 text-high-emphasis\">\r\n              {{selectedLabelsMultiple()[0] | translate}}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <span class=\"body1 text-high-emphasis\">\r\n          {{selectedLabelSingle() | translate}}\r\n        </span>\r\n      }\r\n      @if (errorMessage()?.length && !expanded()) {\r\n        <i class=\"ph-bold ph-warning-circle error-icon color-error m-l-auto\"></i>\r\n      }\r\n      <i \r\n        class=\"ph-bold ph-caret-{{expanded() ? 'up':'down'}} arrow-icon\" \r\n        [class.m-l-auto]=\"!errorMessage()?.length || (errorMessage()?.length && expanded())\">\r\n      </i>\r\n    </button>\r\n    @if (expanded()) {\r\n      <div \r\n        class=\"options-list-wrap\"\r\n        [class.white-bg]=\"useWhiteBackground\"\r\n        [class.has-error]=\"errorMessage()?.length\">\r\n        <ul \r\n          #listboxRef \r\n          [id]=\"id + '-listbox'\" \r\n          class=\"options-list\"\r\n          role=\"listbox\" \r\n          tabindex=\"0\"\r\n          [attr.aria-multiselectable]=\"multiple\">\r\n          @if (multiple && showSelectAll) {\r\n            <li \r\n              [id]=\"id + '-list-option-all'\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isAllSelected()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"activeIndex === 0\"\r\n              [class.selected]=\"isAllSelected()\" \r\n              [class.disabled]=\"isMaxSelectionsReached() && !isAllSelected()\"\r\n              (click)=\"onOptionClick('ALL')\">\r\n              @if (isAllSelected()) {\r\n                <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n              } @else if (hasSelectedItems()) {\r\n                <ng-container *ngTemplateOutlet=\"selectAllIndeterminateSvg\"></ng-container>\r\n              } @else {\r\n                <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis\">\r\n                {{'armature.select.all' | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n          @for (option of readOptions(); let i = $index; track i) {\r\n            <li \r\n              [id]=\"`${id}-list-option-${i}`\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isSelected(option.value)()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"i + ((multiple && showSelectAll) ? 1 : 0) === activeIndex\"\r\n              [class.selected]=\"isSelected(option.value)()\"\r\n              [class.disabled]=\"isOptionDisabled(option)()\"\r\n              (click)=\"onOptionClick(option)\">\r\n              @if (multiple) {\r\n                @if (isSelected(option.value)()) {\r\n                  @if (option.isDisabled) {\r\n                    <ng-container *ngTemplateOutlet=\"checkedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n                  }\r\n                } @else {\r\n                  @if (isOptionDisabled(option)()) {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n                  }\r\n                }\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis text-overflow-ellipsis\">\r\n                {{option.label | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (errorMessage()?.length) {\r\n    <span class=\"error-message color-error body3 fw-500\">\r\n      {{errorMessage() | translate}}\r\n    </span>\r\n  } @else {\r\n    @if (helpText?.length) {\r\n      <span \r\n        class=\"help-message body3 fw-400 text-medium-emphasis\"\r\n        [class.text-low-emphasis]=\"isDisabled\">\r\n        {{helpText | translate}}\r\n      </span>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #checkedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_1718)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"var(--primary-color-500-parts, #146EF6)\" stroke=\"var(--primary-color-500-parts, #146EF6)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12.75L10.5 15L15.75 9.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_1718\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #checkedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_5591)\">\r\n      <path d=\"M19.6055 3C20.5594 3 21.333 3.77359 21.333 4.72754V19.2725C21.333 20.2264 20.5594 21 19.6055 21H5.06055C4.1066 21 3.33301 20.2264 3.33301 19.2725V4.72754C3.33301 3.77359 4.1066 3 5.06055 3H19.6055Z\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.58301 12.75L10.833 15L16.083 9.75\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_5591\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.333008)\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_3289)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"var(--neutral-color-500-parts, #515151)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_3289\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3763)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"#515151\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3763\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #selectAllIndeterminateSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3054)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"#146EF6\" stroke=\"#146EF6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12H15.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3054\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:root{--primary-color-50-parts: #f3f5ff;--primary-color-100-parts: #E8EBFF;--primary-color-200-parts: #B5BEFF;--primary-color-300-parts: #687AFF;--primary-color-400-parts: #455BFF;--primary-color-500-parts: #1C37FF;--primary-color-600-parts: #001EFC;--primary-color-700-parts: #001ADE;--primary-color-800-parts: #0018C9;--primary-color-900-parts: #0016B5;--primary-color-A50-parts: rgba(28, 55, 255, .04);--primary-color-A100-parts: rgba(28, 55, 255, .08);--primary-color-A200-parts: rgba(28, 55, 255, .16);--primary-color-A300-parts: rgba(28, 55, 255, .24);--primary-color-A400-parts: rgba(28, 55, 255, .32);--primary-color-A500-parts: rgba(28, 55, 255, .4);--primary-color-A600-parts: rgba(28, 55, 255, .48);--primary-color-A700-parts: rgba(28, 55, 255, .56);--primary-color-A800-parts: rgba(28, 55, 255, .64);--primary-color-A900-parts: rgba(28, 55, 255, .72);--primary-color-contrast-50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-400-parts: rgba(255, 255, 255, 1);--primary-color-contrast-500-parts: rgba(255, 255, 255, 1);--primary-color-contrast-600-parts: rgba(255, 255, 255, 1);--primary-color-contrast-700-parts: rgba(255, 255, 255, 1);--primary-color-contrast-800-parts: rgba(255, 255, 255, 1);--primary-color-contrast-900-parts: rgba(255, 255, 255, 1);--primary-color-contrast-A50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A500-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A600-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A700-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A800-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A900-parts: rgba(0, 0, 0, .87);--primary-color-50-parts-rgb: 243, 245, 255;--primary-color-100-parts-rgb: 232, 235, 255;--primary-color-200-parts-rgb: 181, 190, 255;--primary-color-300-parts-rgb: 104, 122, 255;--primary-color-400-parts-rgb: 69, 91, 255;--primary-color-500-parts-rgb: 28, 55, 255;--primary-color-600-parts-rgb: 0, 30, 252;--primary-color-700-parts-rgb: 0, 26, 222;--primary-color-800-parts-rgb: 0, 24, 201;--primary-color-900-parts-rgb: 0, 22, 181;--accent-color-50-parts: #e0f2f1;--accent-color-100-parts: #b2dfdb;--accent-color-200-parts: #80cbc4;--accent-color-300-parts: #4db6ac;--accent-color-400-parts: #26a69a;--accent-color-500-parts: #009688;--accent-color-600-parts: #00897b;--accent-color-700-parts: #00796b;--accent-color-800-parts: #00695c;--accent-color-900-parts: #004d40;--accent-color-A50-parts: rgba(0, 150, 136, .04);--accent-color-A100-parts: rgba(0, 150, 136, .08);--accent-color-A200-parts: rgba(0, 150, 136, .16);--accent-color-A300-parts: rgba(0, 150, 136, .24);--accent-color-A400-parts: rgba(0, 150, 136, .32);--accent-color-A500-parts: rgba(0, 150, 136, .4);--accent-color-A600-parts: rgba(0, 150, 136, .48);--accent-color-A700-parts: rgba(0, 150, 136, .56);--accent-color-A800-parts: rgba(0, 150, 136, .64);--accent-color-A900-parts: rgba(0, 150, 136, .72);--accent-color-contrast-50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-500-parts: rgba(255, 255, 255, 1);--accent-color-contrast-600-parts: rgba(255, 255, 255, 1);--accent-color-contrast-700-parts: rgba(255, 255, 255, 1);--accent-color-contrast-800-parts: rgba(255, 255, 255, 1);--accent-color-contrast-900-parts: rgba(255, 255, 255, 1);--accent-color-contrast-A50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A500-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A600-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A700-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A800-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A900-parts: rgba(0, 0, 0, .87);--accent-color-50-parts-rgb: 224, 242, 241;--accent-color-100-parts-rgb: 178, 223, 219;--accent-color-200-parts-rgb: 128, 203, 196;--accent-color-300-parts-rgb: 77, 182, 172;--accent-color-400-parts-rgb: 38, 166, 154;--accent-color-500-parts-rgb: 0, 150, 136;--accent-color-600-parts-rgb: 0, 137, 123;--accent-color-700-parts-rgb: 0, 121, 107;--accent-color-800-parts-rgb: 0, 105, 92;--accent-color-900-parts-rgb: 0, 77, 64;--warn-color-50-parts: #fceee3;--warn-color-100-parts: #f8d4b9;--warn-color-200-parts: #f4b78b;--warn-color-300-parts: #ef9a5d;--warn-color-400-parts: #eb843a;--warn-color-500-parts: #e86e17;--warn-color-600-parts: #e56614;--warn-color-700-parts: #e25b11;--warn-color-800-parts: #de510d;--warn-color-900-parts: #d83f07;--warn-color-A50-parts: rgba(232, 110, 23, .04);--warn-color-A100-parts: rgba(232, 110, 23, .08);--warn-color-A200-parts: rgba(232, 110, 23, .16);--warn-color-A300-parts: rgba(232, 110, 23, .24);--warn-color-A400-parts: rgba(232, 110, 23, .32);--warn-color-A500-parts: rgba(232, 110, 23, .4);--warn-color-A600-parts: rgba(232, 110, 23, .48);--warn-color-A700-parts: rgba(232, 110, 23, .56);--warn-color-A800-parts: rgba(232, 110, 23, .64);--warn-color-A900-parts: rgba(232, 110, 23, .72);--warn-color-contrast-50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-900-parts: rgba(255, 255, 255, 1);--warn-color-contrast-A50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A900-parts: rgba(0, 0, 0, .87);--warn-color-50-parts-rgb: 252, 238, 227;--warn-color-100-parts-rgb: 248, 212, 185;--warn-color-200-parts-rgb: 244, 183, 139;--warn-color-300-parts-rgb: 239, 154, 93;--warn-color-400-parts-rgb: 235, 132, 58;--warn-color-500-parts-rgb: 232, 110, 23;--warn-color-600-parts-rgb: 229, 102, 20;--warn-color-700-parts-rgb: 226, 91, 17;--warn-color-800-parts-rgb: 222, 81, 13;--warn-color-900-parts-rgb: 216, 63, 7;--info-color-50-parts: #F3F5FF;--info-color-100-parts: #E8EBFF;--info-color-200-parts: #B5BEFF;--info-color-300-parts: #687AFF;--info-color-400-parts: #455BFF;--info-color-500-parts: #1C37FF;--info-color-600-parts: #001EFC;--info-color-700-parts: #001ADE;--info-color-800-parts: #0018C9;--info-color-900-parts: #0016B5;--info-color-A50-parts: rgba(28, 55, 255, .04);--info-color-A100-parts: rgba(28, 55, 255, .08);--info-color-A200-parts: rgba(28, 55, 255, .16);--info-color-A300-parts: rgba(28, 55, 255, .24);--info-color-A400-parts: rgba(28, 55, 255, .32);--info-color-A500-parts: rgba(28, 55, 255, .4);--info-color-A600-parts: rgba(28, 55, 255, .48);--info-color-A700-parts: rgba(28, 55, 255, .56);--info-color-A800-parts: rgba(28, 55, 255, .64);--info-color-A900-parts: rgba(28, 55, 255, .72);--info-color-contrast-50-parts: rgba(0, 0, 0, .87);--info-color-contrast-100-parts: rgba(0, 0, 0, .87);--info-color-contrast-200-parts: rgba(0, 0, 0, .87);--info-color-contrast-300-parts: rgba(0, 0, 0, .87);--info-color-contrast-400-parts: rgba(255, 255, 255, 1);--info-color-contrast-500-parts: rgba(255, 255, 255, 1);--info-color-contrast-600-parts: rgba(255, 255, 255, 1);--info-color-contrast-700-parts: rgba(255, 255, 255, 1);--info-color-contrast-800-parts: rgba(255, 255, 255, 1);--info-color-contrast-900-parts: rgba(255, 255, 255, 1);--info-color-contrast-A50-parts: rgba(0, 0, 0, .87);--info-color-contrast-A100-parts: rgba(0, 0, 0, .87);--info-color-contrast-A200-parts: rgba(0, 0, 0, .87);--info-color-contrast-A300-parts: rgba(0, 0, 0, .87);--info-color-contrast-A400-parts: rgba(0, 0, 0, .87);--info-color-contrast-A500-parts: rgba(0, 0, 0, .87);--info-color-contrast-A600-parts: rgba(0, 0, 0, .87);--info-color-contrast-A700-parts: rgba(0, 0, 0, .87);--info-color-contrast-A800-parts: rgba(0, 0, 0, .87);--info-color-contrast-A900-parts: rgba(0, 0, 0, .87);--info-color-50-parts-rgb: 243, 245, 255;--info-color-100-parts-rgb: 232, 235, 255;--info-color-200-parts-rgb: 181, 190, 255;--info-color-300-parts-rgb: 104, 122, 255;--info-color-400-parts-rgb: 69, 91, 255;--info-color-500-parts-rgb: 28, 55, 255;--info-color-600-parts-rgb: 0, 30, 252;--info-color-700-parts-rgb: 0, 26, 222;--info-color-800-parts-rgb: 0, 24, 201;--info-color-900-parts-rgb: 0, 22, 181;--success-color-50-parts: #e7f0e6;--success-color-100-parts: #c4dac1;--success-color-200-parts: #9cc198;--success-color-300-parts: #74a86e;--success-color-400-parts: #57954f;--success-color-500-parts: #398230;--success-color-600-parts: #337a2b;--success-color-700-parts: #2c6f24;--success-color-800-parts: #24651e;--success-color-900-parts: #175213;--success-color-A50-parts: rgba(57, 130, 48, .04);--success-color-A100-parts: rgba(57, 130, 48, .08);--success-color-A200-parts: rgba(57, 130, 48, .16);--success-color-A300-parts: rgba(57, 130, 48, .24);--success-color-A400-parts: rgba(57, 130, 48, .32);--success-color-A500-parts: rgba(57, 130, 48, .4);--success-color-A600-parts: rgba(57, 130, 48, .48);--success-color-A700-parts: rgba(57, 130, 48, .56);--success-color-A800-parts: rgba(57, 130, 48, .64);--success-color-A900-parts: rgba(57, 130, 48, .72);--success-color-contrast-50-parts: rgba(0, 0, 0, .87);--success-color-contrast-100-parts: rgba(0, 0, 0, .87);--success-color-contrast-200-parts: rgba(0, 0, 0, .87);--success-color-contrast-300-parts: rgba(0, 0, 0, .87);--success-color-contrast-400-parts: rgba(0, 0, 0, .87);--success-color-contrast-500-parts: rgba(255, 255, 255, 1);--success-color-contrast-600-parts: rgba(255, 255, 255, 1);--success-color-contrast-700-parts: rgba(255, 255, 255, 1);--success-color-contrast-800-parts: rgba(255, 255, 255, 1);--success-color-contrast-900-parts: rgba(255, 255, 255, 1);--success-color-contrast-A50-parts: rgba(0, 0, 0, .87);--success-color-contrast-A100-parts: rgba(0, 0, 0, .87);--success-color-contrast-A200-parts: rgba(0, 0, 0, .87);--success-color-contrast-A300-parts: rgba(0, 0, 0, .87);--success-color-contrast-A400-parts: rgba(0, 0, 0, .87);--success-color-contrast-A500-parts: rgba(0, 0, 0, .87);--success-color-contrast-A600-parts: rgba(0, 0, 0, .87);--success-color-contrast-A700-parts: rgba(0, 0, 0, .87);--success-color-contrast-A800-parts: rgba(0, 0, 0, .87);--success-color-contrast-A900-parts: rgba(0, 0, 0, .87);--success-color-50-parts-rgb: 231, 240, 230;--success-color-100-parts-rgb: 196, 218, 193;--success-color-200-parts-rgb: 156, 193, 152;--success-color-300-parts-rgb: 116, 168, 110;--success-color-400-parts-rgb: 87, 149, 79;--success-color-500-parts-rgb: 57, 130, 48;--success-color-600-parts-rgb: 51, 122, 43;--success-color-700-parts-rgb: 44, 111, 36;--success-color-800-parts-rgb: 36, 101, 30;--success-color-900-parts-rgb: 23, 82, 19;--error-color-50-parts: #fae5e4;--error-color-100-parts: #f3bdba;--error-color-200-parts: #eb928d;--error-color-300-parts: #e3665f;--error-color-400-parts: #dd453c;--error-color-500-parts: #d7241a;--error-color-600-parts: #d32017;--error-color-700-parts: #cd1b13;--error-color-800-parts: #c7160f;--error-color-900-parts: #be0d08;--error-color-A50-parts: rgba(215, 36, 26, .04);--error-color-A100-parts: rgba(215, 36, 26, .08);--error-color-A200-parts: rgba(215, 36, 26, .16);--error-color-A300-parts: rgba(215, 36, 26, .24);--error-color-A400-parts: rgba(215, 36, 26, .32);--error-color-A500-parts: rgba(215, 36, 26, .4);--error-color-A600-parts: rgba(215, 36, 26, .48);--error-color-A700-parts: rgba(215, 36, 26, .56);--error-color-A800-parts: rgba(215, 36, 26, .64);--error-color-A900-parts: rgba(215, 36, 26, .72);--error-color-contrast-50-parts: rgba(0, 0, 0, .87);--error-color-contrast-100-parts: rgba(0, 0, 0, .87);--error-color-contrast-200-parts: rgba(0, 0, 0, .87);--error-color-contrast-300-parts: rgba(0, 0, 0, .87);--error-color-contrast-400-parts: rgba(0, 0, 0, .87);--error-color-contrast-500-parts: rgba(255, 255, 255, 1);--error-color-contrast-600-parts: rgba(255, 255, 255, 1);--error-color-contrast-700-parts: rgba(255, 255, 255, 1);--error-color-contrast-800-parts: rgba(255, 255, 255, 1);--error-color-contrast-900-parts: rgba(255, 255, 255, 1);--error-color-contrast-A50-parts: rgba(0, 0, 0, .87);--error-color-contrast-A100-parts: rgba(0, 0, 0, .87);--error-color-contrast-A200-parts: rgba(0, 0, 0, .87);--error-color-contrast-A300-parts: rgba(0, 0, 0, .87);--error-color-contrast-A400-parts: rgba(0, 0, 0, .87);--error-color-contrast-A500-parts: rgba(0, 0, 0, .87);--error-color-contrast-A600-parts: rgba(0, 0, 0, .87);--error-color-contrast-A700-parts: rgba(0, 0, 0, .87);--error-color-contrast-A800-parts: rgba(0, 0, 0, .87);--error-color-contrast-A900-parts: rgba(0, 0, 0, .87);--error-color-50-parts-rgb: 250, 229, 228;--error-color-100-parts-rgb: 243, 189, 186;--error-color-200-parts-rgb: 235, 146, 141;--error-color-300-parts-rgb: 227, 102, 95;--error-color-400-parts-rgb: 221, 69, 60;--error-color-500-parts-rgb: 215, 36, 26;--error-color-600-parts-rgb: 211, 32, 23;--error-color-700-parts-rgb: 205, 27, 19;--error-color-800-parts-rgb: 199, 22, 15;--error-color-900-parts-rgb: 190, 13, 8;--neutral-color-50-parts: #e9e9e9;--neutral-color-100-parts: #dddddd;--neutral-color-200-parts: #cccccc;--neutral-color-300-parts: #b0b0b0;--neutral-color-400-parts: #909090;--neutral-color-500-parts: #515151;--neutral-color-600-parts: #424242;--neutral-color-700-parts: #333333;--neutral-color-800-parts: #212121;--neutral-color-900-parts: #141414;--neutral-color-A50-parts: rgba(81, 81, 81, .04);--neutral-color-A100-parts: rgba(81, 81, 81, .08);--neutral-color-A200-parts: rgba(81, 81, 81, .16);--neutral-color-A300-parts: rgba(81, 81, 81, .24);--neutral-color-A400-parts: rgba(81, 81, 81, .32);--neutral-color-A500-parts: rgba(81, 81, 81, .4);--neutral-color-A600-parts: rgba(81, 81, 81, .48);--neutral-color-A700-parts: rgba(81, 81, 81, .56);--neutral-color-A800-parts: rgba(81, 81, 81, .64);--neutral-color-A900-parts: rgba(81, 81, 81, .72);--neutral-color-contrast-50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-400-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-500-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-600-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-700-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-800-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-900-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-A50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A400-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A500-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A600-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A700-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A800-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A900-parts: rgba(0, 0, 0, .87);--neutral-color-50-parts-rgb: 233, 233, 233;--neutral-color-100-parts-rgb: 221, 221, 221;--neutral-color-200-parts-rgb: 204, 204, 204;--neutral-color-300-parts-rgb: 176, 176, 176;--neutral-color-400-parts-rgb: 144, 144, 144;--neutral-color-500-parts-rgb: 81, 81, 81;--neutral-color-600-parts-rgb: 66, 66, 66;--neutral-color-700-parts-rgb: 51, 51, 51;--neutral-color-800-parts-rgb: 33, 33, 33;--neutral-color-900-parts-rgb: 20, 20, 20;--help-color-50-parts: #EFE3FE;--help-color-100-parts: #E0CAFD;--help-color-200-parts: #C194FB;--help-color-300-parts: #994FF8;--help-color-400-parts: #8831F7;--help-color-500-parts: #7714F6;--help-color-600-parts: #6809E3;--help-color-700-parts: #5B08C5;--help-color-800-parts: #4D06A8;--help-color-900-parts: #40058A;--help-color-A50-parts: rgba(119, 20, 246, .04);--help-color-A100-parts: rgba(119, 20, 246, .08);--help-color-A200-parts: rgba(119, 20, 246, .16);--help-color-A300-parts: rgba(119, 20, 246, .24);--help-color-A400-parts: rgba(119, 20, 246, .32);--help-color-A500-parts: rgba(119, 20, 246, .4);--help-color-A600-parts: rgba(119, 20, 246, .48);--help-color-A700-parts: rgba(119, 20, 246, .56);--help-color-A800-parts: rgba(119, 20, 246, .64);--help-color-A900-parts: rgba(119, 20, 246, .72);--help-color-contrast-50-parts: rgba(0, 0, 0, .87);--help-color-contrast-100-parts: rgba(0, 0, 0, .87);--help-color-contrast-200-parts: rgba(0, 0, 0, .87);--help-color-contrast-300-parts: rgba(255, 255, 255, 1);--help-color-contrast-400-parts: rgba(255, 255, 255, 1);--help-color-contrast-500-parts: rgba(255, 255, 255, 1);--help-color-contrast-600-parts: rgba(255, 255, 255, 1);--help-color-contrast-700-parts: rgba(255, 255, 255, 1);--help-color-contrast-800-parts: rgba(255, 255, 255, 1);--help-color-contrast-900-parts: rgba(255, 255, 255, 1);--help-color-contrast-A50-parts: rgba(0, 0, 0, .87);--help-color-contrast-A100-parts: rgba(0, 0, 0, .87);--help-color-contrast-A200-parts: rgba(0, 0, 0, .87);--help-color-contrast-A300-parts: rgba(0, 0, 0, .87);--help-color-contrast-A400-parts: rgba(0, 0, 0, .87);--help-color-contrast-A500-parts: rgba(0, 0, 0, .87);--help-color-contrast-A600-parts: rgba(0, 0, 0, .87);--help-color-contrast-A700-parts: rgba(0, 0, 0, .87);--help-color-contrast-A800-parts: rgba(0, 0, 0, .87);--help-color-contrast-A900-parts: rgba(0, 0, 0, .87);--help-color-50-parts-rgb: 239, 227, 254;--help-color-100-parts-rgb: 224, 202, 253;--help-color-200-parts-rgb: 193, 148, 251;--help-color-300-parts-rgb: 153, 79, 248;--help-color-400-parts-rgb: 136, 49, 247;--help-color-500-parts-rgb: 119, 20, 246;--help-color-600-parts-rgb: 104, 9, 227;--help-color-700-parts-rgb: 91, 8, 197;--help-color-800-parts-rgb: 77, 6, 168;--help-color-900-parts-rgb: 64, 5, 138}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes floatingLabel{0%{transform:translate(16px,32px);opacity:0}to{transform:translate(0);opacity:1}}:host{display:inline-block;width:300px;min-width:300px}:host *{box-sizing:border-box}.sof-select-field{display:flex;flex-direction:column;position:relative}.sof-select-field label{position:absolute;top:-22px;display:inline-block;line-height:16px;z-index:1;font-size:12px;padding-left:2px;font-weight:500!important;color:#0009;transform:none;opacity:1;animation:floatingLabel .2s ease-in}.sof-select-field label.has-error{color:var(--error-color-500-parts)}.sof-select-field .relative-container{position:relative}.sof-select-field .relative-container .trigger{min-height:40px;height:40px;max-height:40px;display:flex;align-items:center;gap:8px;width:100%;border-radius:8px;background:#fafafa;border:2px solid transparent;cursor:pointer}.sof-select-field .relative-container .trigger.white-bg{background:#fff}.sof-select-field .relative-container .trigger.expanded{box-shadow:0 10px 10px #0000001a}.sof-select-field .relative-container .trigger:focus{outline:3px solid var(--primary-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger.has-error{border-color:var(--error-color-500-parts)}.sof-select-field .relative-container .trigger.has-error:focus{outline:3px solid var(--error-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger:disabled{cursor:default}.sof-select-field .relative-container .trigger:disabled span.body1,.sof-select-field .relative-container .trigger:disabled .arrow-icon{color:#00000061}.sof-select-field .relative-container .trigger span.body1{line-height:24px}.sof-select-field .relative-container .trigger .arrow-icon,.sof-select-field .relative-container .trigger .error-icon{pointer-events:none;font-size:20px}.sof-select-field .relative-container .trigger .error-icon{animation:fadeIn .2s ease-in}.sof-select-field .relative-container .trigger .arrow-icon{color:#333}.sof-select-field .relative-container .trigger .multi-chip-container{display:flex;gap:8px;width:100%;overflow:hidden}.sof-select-field .relative-container .options-list-wrap{position:absolute;z-index:10;top:32px;width:100%;padding-top:6px;border-radius:0 0 8px 8px;background:#fafafa}.sof-select-field .relative-container .options-list-wrap.white-bg{background:#fff}.sof-select-field .relative-container .options-list-wrap.has-error{border:2px solid var(--error-color-500-parts);border-top:none}.sof-select-field .relative-container .options-list-wrap:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list{max-height:200px;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;list-style:none;border-radius:0 0 8px 8px;box-shadow:0 10px 10px #0000001a;scrollbar-color:#E9E9E9 transparent}.sof-select-field .relative-container .options-list-wrap .options-list:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list li{cursor:pointer;border-left:4px solid transparent;display:flex;align-items:center;gap:8px}.sof-select-field .relative-container .options-list-wrap .options-list li:hover,.sof-select-field .relative-container .options-list-wrap .options-list li.active{background-color:var(--neutral-color-A50-parts);border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.selected{font-weight:500;border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled{pointer-events:none;cursor:not-allowed;color:#00000061;opacity:.6}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled .option-label{color:#00000061}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled svg{opacity:.5}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled:hover,.sof-select-field .relative-container .options-list-wrap .options-list li.disabled.active{background-color:transparent;border-color:transparent}.sof-select-field .relative-container .options-list-wrap .options-list li svg{pointer-events:none;min-height:24px;min-width:24px;height:24px;width:24px;max-height:24px;max-width:24px}.sof-select-field .relative-container .options-list-wrap .options-list li .option-label{line-height:24px}.sof-select-field .help-message,.sof-select-field .error-message{display:inline-block;line-height:8px;margin-top:8px;padding-left:2px;animation:fadeIn .2s ease-in}.visible-chip{animation:fadeIn .2s ease-in}:host ::ng-deep .sof-chip span{cursor:pointer!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SofChipComponent, selector: "sof-chip", inputs: ["label", "canRemove", "theme", "iconClass", "removeButtonId"], outputs: ["removeEvent"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: SofSelectComponent, isStandalone: true, selector: "sof-select", inputs: { id: "id", options: "options", label: "label", helpText: "helpText", multiple: "multiple", showSelectAll: "showSelectAll", maxSelections: "maxSelections", isDisabled: "isDisabled", width: "width", useWhiteBackground: "useWhiteBackground", errorMessages: "errorMessages" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown": "handleKeydown($event)" }, properties: { "class.full-width": "this.width === \"full\"" } }, viewQueries: [{ propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true }, { propertyName: "multiChipContainer", first: true, predicate: ["multiChipContainer"], descendants: true }], ngImport: i0, template: "<div \r\n  class=\"sof-select-field\"\r\n  [class.full-width]=\"width === 'full'\">\r\n  @if (hasSelectedItems()) {\r\n    <label \r\n      [for]=\"id + '-select-trigger'\"\r\n      [class.text-low-emphasis]=\"isDisabled\"\r\n      [class.has-error]=\"errorMessage()?.length\">\r\n      {{label | translate}}\r\n    </label>\r\n  }\r\n  <div class=\"relative-container\">\r\n    <button \r\n      [id]=\"id + '-select-trigger'\" \r\n      [name]=\"controlName\"\r\n      class=\"trigger p-v-8 p-h-16\" \r\n      [class.has-error]=\"errorMessage()?.length\"\r\n      [class.expanded]=\"expanded()\"\r\n      [class.white-bg]=\"useWhiteBackground\"\r\n      [disabled]=\"isDisabled\"\r\n      type=\"button\" \r\n      role=\"combobox\" \r\n      [attr.aria-expanded]=\"expanded()\" \r\n      [attr.aria-controls]=\"expanded() ? id + '-listbox' : null\"\r\n      [attr.aria-label]=\"label | translate\"\r\n      aria-haspopup=\"listbox\" \r\n      (click)=\"togglePanel()\">\r\n      @if (multiple) {\r\n        <div #multiChipContainer class=\"multi-chip-container\">\r\n          @if (hasSelectedItems()) {\r\n            @if (isAllSelected()) {\r\n              <sof-chip \r\n                class=\"visible-chip\"\r\n                theme=\"primary\"\r\n                [label]=\"'armature.select.all'\"\r\n                [removeButtonId]=\"`${id}-select-chip-remove-all`\"\r\n                (removeEvent)=\"removeChip($event)\"\r\n              />\r\n            } @else {\r\n              @for (label of visibleChips(); let i = $index; track i) {\r\n                <sof-chip \r\n                  class=\"visible-chip\"\r\n                  theme=\"primary\"\r\n                  [label]=\"label\"\r\n                  [removeButtonId]=\"`${id}-select-chip-remove-${i}`\"\r\n                  (removeEvent)=\"removeChip($event)\"\r\n                />\r\n              }\r\n              @if (hiddenChipsCount()) {\r\n                <sof-chip \r\n                  theme=\"primary\"\r\n                  [label]=\"`+${hiddenChipsCount()}`\"\r\n                  [canRemove]=\"false\"\r\n                  m-l-auto\r\n                />\r\n              }\r\n            }\r\n          } @else {\r\n            <span class=\"body1\" [class.text-medium-emphasis]=\"selectedLabelsMultiple()[0] === label\">\r\n              {{selectedLabelsMultiple()[0] | translate}}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <span class=\"body1\" [class.text-medium-emphasis]=\"selectedLabelSingle() === label\">\r\n          {{selectedLabelSingle() | translate}}\r\n        </span>\r\n      }\r\n      @if (errorMessage()?.length && !expanded()) {\r\n        <i class=\"ph-bold ph-warning-circle error-icon color-error m-l-auto\"></i>\r\n      }\r\n      <i \r\n        class=\"ph-bold ph-caret-{{expanded() ? 'up':'down'}} arrow-icon\" \r\n        [class.m-l-auto]=\"!errorMessage()?.length || (errorMessage()?.length && expanded())\">\r\n      </i>\r\n    </button>\r\n    @if (expanded()) {\r\n      <div \r\n        class=\"options-list-wrap\"\r\n        [class.white-bg]=\"useWhiteBackground\"\r\n        [class.has-error]=\"errorMessage()?.length\">\r\n        <ul \r\n          #listboxRef \r\n          [id]=\"id + '-listbox'\" \r\n          class=\"options-list\"\r\n          role=\"listbox\" \r\n          tabindex=\"0\"\r\n          [attr.aria-multiselectable]=\"multiple\">\r\n          @if (multiple && showSelectAll) {\r\n            <li \r\n              [id]=\"id + '-list-option-all'\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isAllSelected()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"activeIndex === 0\"\r\n              [class.selected]=\"isAllSelected()\" \r\n              [class.disabled]=\"isMaxSelectionsReached() && !isAllSelected()\"\r\n              (click)=\"onOptionClick('ALL')\">\r\n              @if (isAllSelected()) {\r\n                <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n              } @else if (hasSelectedItems()) {\r\n                <ng-container *ngTemplateOutlet=\"selectAllIndeterminateSvg\"></ng-container>\r\n              } @else {\r\n                <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis\">\r\n                {{'armature.select.all' | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n          @for (option of readOptions(); let i = $index; track i) {\r\n            <li \r\n              [id]=\"`${id}-list-option-${i}`\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isSelected(option.value)()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"i + ((multiple && showSelectAll) ? 1 : 0) === activeIndex\"\r\n              [class.selected]=\"isSelected(option.value)()\"\r\n              [class.disabled]=\"isOptionDisabled(option)()\"\r\n              (click)=\"onOptionClick(option)\">\r\n              @if (multiple) {\r\n                @if (isSelected(option.value)()) {\r\n                  @if (option.isDisabled) {\r\n                    <ng-container *ngTemplateOutlet=\"checkedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n                  }\r\n                } @else {\r\n                  @if (isOptionDisabled(option)()) {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n                  }\r\n                }\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis text-overflow-ellipsis\">\r\n                {{option.label | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (errorMessage()?.length) {\r\n    <span class=\"error-message color-error body3 fw-500\">\r\n      {{errorMessage() | translate}}\r\n    </span>\r\n  } @else {\r\n    @if (helpText?.length) {\r\n      <span \r\n        class=\"help-message body3 fw-400 text-medium-emphasis\"\r\n        [class.text-low-emphasis]=\"isDisabled\">\r\n        {{helpText | translate}}\r\n      </span>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #checkedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_1718)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"var(--primary-color-500-parts, #146EF6)\" stroke=\"var(--primary-color-500-parts, #146EF6)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12.75L10.5 15L15.75 9.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_1718\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #checkedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_5591)\">\r\n      <path d=\"M19.6055 3C20.5594 3 21.333 3.77359 21.333 4.72754V19.2725C21.333 20.2264 20.5594 21 19.6055 21H5.06055C4.1066 21 3.33301 20.2264 3.33301 19.2725V4.72754C3.33301 3.77359 4.1066 3 5.06055 3H19.6055Z\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.58301 12.75L10.833 15L16.083 9.75\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_5591\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.333008)\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_3289)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"var(--neutral-color-500-parts, #515151)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_3289\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3763)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"#515151\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3763\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #selectAllIndeterminateSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3054)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"#146EF6\" stroke=\"#146EF6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12H15.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3054\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:root{--primary-color-50-parts: #f3f5ff;--primary-color-100-parts: #E8EBFF;--primary-color-200-parts: #B5BEFF;--primary-color-300-parts: #687AFF;--primary-color-400-parts: #455BFF;--primary-color-500-parts: #1C37FF;--primary-color-600-parts: #001EFC;--primary-color-700-parts: #001ADE;--primary-color-800-parts: #0018C9;--primary-color-900-parts: #0016B5;--primary-color-A50-parts: rgba(28, 55, 255, .04);--primary-color-A100-parts: rgba(28, 55, 255, .08);--primary-color-A200-parts: rgba(28, 55, 255, .16);--primary-color-A300-parts: rgba(28, 55, 255, .24);--primary-color-A400-parts: rgba(28, 55, 255, .32);--primary-color-A500-parts: rgba(28, 55, 255, .4);--primary-color-A600-parts: rgba(28, 55, 255, .48);--primary-color-A700-parts: rgba(28, 55, 255, .56);--primary-color-A800-parts: rgba(28, 55, 255, .64);--primary-color-A900-parts: rgba(28, 55, 255, .72);--primary-color-contrast-50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-400-parts: rgba(255, 255, 255, 1);--primary-color-contrast-500-parts: rgba(255, 255, 255, 1);--primary-color-contrast-600-parts: rgba(255, 255, 255, 1);--primary-color-contrast-700-parts: rgba(255, 255, 255, 1);--primary-color-contrast-800-parts: rgba(255, 255, 255, 1);--primary-color-contrast-900-parts: rgba(255, 255, 255, 1);--primary-color-contrast-A50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A500-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A600-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A700-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A800-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A900-parts: rgba(0, 0, 0, .87);--primary-color-50-parts-rgb: 243, 245, 255;--primary-color-100-parts-rgb: 232, 235, 255;--primary-color-200-parts-rgb: 181, 190, 255;--primary-color-300-parts-rgb: 104, 122, 255;--primary-color-400-parts-rgb: 69, 91, 255;--primary-color-500-parts-rgb: 28, 55, 255;--primary-color-600-parts-rgb: 0, 30, 252;--primary-color-700-parts-rgb: 0, 26, 222;--primary-color-800-parts-rgb: 0, 24, 201;--primary-color-900-parts-rgb: 0, 22, 181;--accent-color-50-parts: #e0f2f1;--accent-color-100-parts: #b2dfdb;--accent-color-200-parts: #80cbc4;--accent-color-300-parts: #4db6ac;--accent-color-400-parts: #26a69a;--accent-color-500-parts: #009688;--accent-color-600-parts: #00897b;--accent-color-700-parts: #00796b;--accent-color-800-parts: #00695c;--accent-color-900-parts: #004d40;--accent-color-A50-parts: rgba(0, 150, 136, .04);--accent-color-A100-parts: rgba(0, 150, 136, .08);--accent-color-A200-parts: rgba(0, 150, 136, .16);--accent-color-A300-parts: rgba(0, 150, 136, .24);--accent-color-A400-parts: rgba(0, 150, 136, .32);--accent-color-A500-parts: rgba(0, 150, 136, .4);--accent-color-A600-parts: rgba(0, 150, 136, .48);--accent-color-A700-parts: rgba(0, 150, 136, .56);--accent-color-A800-parts: rgba(0, 150, 136, .64);--accent-color-A900-parts: rgba(0, 150, 136, .72);--accent-color-contrast-50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-500-parts: rgba(255, 255, 255, 1);--accent-color-contrast-600-parts: rgba(255, 255, 255, 1);--accent-color-contrast-700-parts: rgba(255, 255, 255, 1);--accent-color-contrast-800-parts: rgba(255, 255, 255, 1);--accent-color-contrast-900-parts: rgba(255, 255, 255, 1);--accent-color-contrast-A50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A500-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A600-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A700-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A800-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A900-parts: rgba(0, 0, 0, .87);--accent-color-50-parts-rgb: 224, 242, 241;--accent-color-100-parts-rgb: 178, 223, 219;--accent-color-200-parts-rgb: 128, 203, 196;--accent-color-300-parts-rgb: 77, 182, 172;--accent-color-400-parts-rgb: 38, 166, 154;--accent-color-500-parts-rgb: 0, 150, 136;--accent-color-600-parts-rgb: 0, 137, 123;--accent-color-700-parts-rgb: 0, 121, 107;--accent-color-800-parts-rgb: 0, 105, 92;--accent-color-900-parts-rgb: 0, 77, 64;--warn-color-50-parts: #fceee3;--warn-color-100-parts: #f8d4b9;--warn-color-200-parts: #f4b78b;--warn-color-300-parts: #ef9a5d;--warn-color-400-parts: #eb843a;--warn-color-500-parts: #e86e17;--warn-color-600-parts: #e56614;--warn-color-700-parts: #e25b11;--warn-color-800-parts: #de510d;--warn-color-900-parts: #d83f07;--warn-color-A50-parts: rgba(232, 110, 23, .04);--warn-color-A100-parts: rgba(232, 110, 23, .08);--warn-color-A200-parts: rgba(232, 110, 23, .16);--warn-color-A300-parts: rgba(232, 110, 23, .24);--warn-color-A400-parts: rgba(232, 110, 23, .32);--warn-color-A500-parts: rgba(232, 110, 23, .4);--warn-color-A600-parts: rgba(232, 110, 23, .48);--warn-color-A700-parts: rgba(232, 110, 23, .56);--warn-color-A800-parts: rgba(232, 110, 23, .64);--warn-color-A900-parts: rgba(232, 110, 23, .72);--warn-color-contrast-50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-900-parts: rgba(255, 255, 255, 1);--warn-color-contrast-A50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A900-parts: rgba(0, 0, 0, .87);--warn-color-50-parts-rgb: 252, 238, 227;--warn-color-100-parts-rgb: 248, 212, 185;--warn-color-200-parts-rgb: 244, 183, 139;--warn-color-300-parts-rgb: 239, 154, 93;--warn-color-400-parts-rgb: 235, 132, 58;--warn-color-500-parts-rgb: 232, 110, 23;--warn-color-600-parts-rgb: 229, 102, 20;--warn-color-700-parts-rgb: 226, 91, 17;--warn-color-800-parts-rgb: 222, 81, 13;--warn-color-900-parts-rgb: 216, 63, 7;--info-color-50-parts: #F3F5FF;--info-color-100-parts: #E8EBFF;--info-color-200-parts: #B5BEFF;--info-color-300-parts: #687AFF;--info-color-400-parts: #455BFF;--info-color-500-parts: #1C37FF;--info-color-600-parts: #001EFC;--info-color-700-parts: #001ADE;--info-color-800-parts: #0018C9;--info-color-900-parts: #0016B5;--info-color-A50-parts: rgba(28, 55, 255, .04);--info-color-A100-parts: rgba(28, 55, 255, .08);--info-color-A200-parts: rgba(28, 55, 255, .16);--info-color-A300-parts: rgba(28, 55, 255, .24);--info-color-A400-parts: rgba(28, 55, 255, .32);--info-color-A500-parts: rgba(28, 55, 255, .4);--info-color-A600-parts: rgba(28, 55, 255, .48);--info-color-A700-parts: rgba(28, 55, 255, .56);--info-color-A800-parts: rgba(28, 55, 255, .64);--info-color-A900-parts: rgba(28, 55, 255, .72);--info-color-contrast-50-parts: rgba(0, 0, 0, .87);--info-color-contrast-100-parts: rgba(0, 0, 0, .87);--info-color-contrast-200-parts: rgba(0, 0, 0, .87);--info-color-contrast-300-parts: rgba(0, 0, 0, .87);--info-color-contrast-400-parts: rgba(255, 255, 255, 1);--info-color-contrast-500-parts: rgba(255, 255, 255, 1);--info-color-contrast-600-parts: rgba(255, 255, 255, 1);--info-color-contrast-700-parts: rgba(255, 255, 255, 1);--info-color-contrast-800-parts: rgba(255, 255, 255, 1);--info-color-contrast-900-parts: rgba(255, 255, 255, 1);--info-color-contrast-A50-parts: rgba(0, 0, 0, .87);--info-color-contrast-A100-parts: rgba(0, 0, 0, .87);--info-color-contrast-A200-parts: rgba(0, 0, 0, .87);--info-color-contrast-A300-parts: rgba(0, 0, 0, .87);--info-color-contrast-A400-parts: rgba(0, 0, 0, .87);--info-color-contrast-A500-parts: rgba(0, 0, 0, .87);--info-color-contrast-A600-parts: rgba(0, 0, 0, .87);--info-color-contrast-A700-parts: rgba(0, 0, 0, .87);--info-color-contrast-A800-parts: rgba(0, 0, 0, .87);--info-color-contrast-A900-parts: rgba(0, 0, 0, .87);--info-color-50-parts-rgb: 243, 245, 255;--info-color-100-parts-rgb: 232, 235, 255;--info-color-200-parts-rgb: 181, 190, 255;--info-color-300-parts-rgb: 104, 122, 255;--info-color-400-parts-rgb: 69, 91, 255;--info-color-500-parts-rgb: 28, 55, 255;--info-color-600-parts-rgb: 0, 30, 252;--info-color-700-parts-rgb: 0, 26, 222;--info-color-800-parts-rgb: 0, 24, 201;--info-color-900-parts-rgb: 0, 22, 181;--success-color-50-parts: #e7f0e6;--success-color-100-parts: #c4dac1;--success-color-200-parts: #9cc198;--success-color-300-parts: #74a86e;--success-color-400-parts: #57954f;--success-color-500-parts: #398230;--success-color-600-parts: #337a2b;--success-color-700-parts: #2c6f24;--success-color-800-parts: #24651e;--success-color-900-parts: #175213;--success-color-A50-parts: rgba(57, 130, 48, .04);--success-color-A100-parts: rgba(57, 130, 48, .08);--success-color-A200-parts: rgba(57, 130, 48, .16);--success-color-A300-parts: rgba(57, 130, 48, .24);--success-color-A400-parts: rgba(57, 130, 48, .32);--success-color-A500-parts: rgba(57, 130, 48, .4);--success-color-A600-parts: rgba(57, 130, 48, .48);--success-color-A700-parts: rgba(57, 130, 48, .56);--success-color-A800-parts: rgba(57, 130, 48, .64);--success-color-A900-parts: rgba(57, 130, 48, .72);--success-color-contrast-50-parts: rgba(0, 0, 0, .87);--success-color-contrast-100-parts: rgba(0, 0, 0, .87);--success-color-contrast-200-parts: rgba(0, 0, 0, .87);--success-color-contrast-300-parts: rgba(0, 0, 0, .87);--success-color-contrast-400-parts: rgba(0, 0, 0, .87);--success-color-contrast-500-parts: rgba(255, 255, 255, 1);--success-color-contrast-600-parts: rgba(255, 255, 255, 1);--success-color-contrast-700-parts: rgba(255, 255, 255, 1);--success-color-contrast-800-parts: rgba(255, 255, 255, 1);--success-color-contrast-900-parts: rgba(255, 255, 255, 1);--success-color-contrast-A50-parts: rgba(0, 0, 0, .87);--success-color-contrast-A100-parts: rgba(0, 0, 0, .87);--success-color-contrast-A200-parts: rgba(0, 0, 0, .87);--success-color-contrast-A300-parts: rgba(0, 0, 0, .87);--success-color-contrast-A400-parts: rgba(0, 0, 0, .87);--success-color-contrast-A500-parts: rgba(0, 0, 0, .87);--success-color-contrast-A600-parts: rgba(0, 0, 0, .87);--success-color-contrast-A700-parts: rgba(0, 0, 0, .87);--success-color-contrast-A800-parts: rgba(0, 0, 0, .87);--success-color-contrast-A900-parts: rgba(0, 0, 0, .87);--success-color-50-parts-rgb: 231, 240, 230;--success-color-100-parts-rgb: 196, 218, 193;--success-color-200-parts-rgb: 156, 193, 152;--success-color-300-parts-rgb: 116, 168, 110;--success-color-400-parts-rgb: 87, 149, 79;--success-color-500-parts-rgb: 57, 130, 48;--success-color-600-parts-rgb: 51, 122, 43;--success-color-700-parts-rgb: 44, 111, 36;--success-color-800-parts-rgb: 36, 101, 30;--success-color-900-parts-rgb: 23, 82, 19;--error-color-50-parts: #fae5e4;--error-color-100-parts: #f3bdba;--error-color-200-parts: #eb928d;--error-color-300-parts: #e3665f;--error-color-400-parts: #dd453c;--error-color-500-parts: #d7241a;--error-color-600-parts: #d32017;--error-color-700-parts: #cd1b13;--error-color-800-parts: #c7160f;--error-color-900-parts: #be0d08;--error-color-A50-parts: rgba(215, 36, 26, .04);--error-color-A100-parts: rgba(215, 36, 26, .08);--error-color-A200-parts: rgba(215, 36, 26, .16);--error-color-A300-parts: rgba(215, 36, 26, .24);--error-color-A400-parts: rgba(215, 36, 26, .32);--error-color-A500-parts: rgba(215, 36, 26, .4);--error-color-A600-parts: rgba(215, 36, 26, .48);--error-color-A700-parts: rgba(215, 36, 26, .56);--error-color-A800-parts: rgba(215, 36, 26, .64);--error-color-A900-parts: rgba(215, 36, 26, .72);--error-color-contrast-50-parts: rgba(0, 0, 0, .87);--error-color-contrast-100-parts: rgba(0, 0, 0, .87);--error-color-contrast-200-parts: rgba(0, 0, 0, .87);--error-color-contrast-300-parts: rgba(0, 0, 0, .87);--error-color-contrast-400-parts: rgba(0, 0, 0, .87);--error-color-contrast-500-parts: rgba(255, 255, 255, 1);--error-color-contrast-600-parts: rgba(255, 255, 255, 1);--error-color-contrast-700-parts: rgba(255, 255, 255, 1);--error-color-contrast-800-parts: rgba(255, 255, 255, 1);--error-color-contrast-900-parts: rgba(255, 255, 255, 1);--error-color-contrast-A50-parts: rgba(0, 0, 0, .87);--error-color-contrast-A100-parts: rgba(0, 0, 0, .87);--error-color-contrast-A200-parts: rgba(0, 0, 0, .87);--error-color-contrast-A300-parts: rgba(0, 0, 0, .87);--error-color-contrast-A400-parts: rgba(0, 0, 0, .87);--error-color-contrast-A500-parts: rgba(0, 0, 0, .87);--error-color-contrast-A600-parts: rgba(0, 0, 0, .87);--error-color-contrast-A700-parts: rgba(0, 0, 0, .87);--error-color-contrast-A800-parts: rgba(0, 0, 0, .87);--error-color-contrast-A900-parts: rgba(0, 0, 0, .87);--error-color-50-parts-rgb: 250, 229, 228;--error-color-100-parts-rgb: 243, 189, 186;--error-color-200-parts-rgb: 235, 146, 141;--error-color-300-parts-rgb: 227, 102, 95;--error-color-400-parts-rgb: 221, 69, 60;--error-color-500-parts-rgb: 215, 36, 26;--error-color-600-parts-rgb: 211, 32, 23;--error-color-700-parts-rgb: 205, 27, 19;--error-color-800-parts-rgb: 199, 22, 15;--error-color-900-parts-rgb: 190, 13, 8;--neutral-color-50-parts: #e9e9e9;--neutral-color-100-parts: #dddddd;--neutral-color-200-parts: #cccccc;--neutral-color-300-parts: #b0b0b0;--neutral-color-400-parts: #909090;--neutral-color-500-parts: #515151;--neutral-color-600-parts: #424242;--neutral-color-700-parts: #333333;--neutral-color-800-parts: #212121;--neutral-color-900-parts: #141414;--neutral-color-A50-parts: rgba(81, 81, 81, .04);--neutral-color-A100-parts: rgba(81, 81, 81, .08);--neutral-color-A200-parts: rgba(81, 81, 81, .16);--neutral-color-A300-parts: rgba(81, 81, 81, .24);--neutral-color-A400-parts: rgba(81, 81, 81, .32);--neutral-color-A500-parts: rgba(81, 81, 81, .4);--neutral-color-A600-parts: rgba(81, 81, 81, .48);--neutral-color-A700-parts: rgba(81, 81, 81, .56);--neutral-color-A800-parts: rgba(81, 81, 81, .64);--neutral-color-A900-parts: rgba(81, 81, 81, .72);--neutral-color-contrast-50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-400-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-500-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-600-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-700-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-800-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-900-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-A50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A400-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A500-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A600-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A700-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A800-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A900-parts: rgba(0, 0, 0, .87);--neutral-color-50-parts-rgb: 233, 233, 233;--neutral-color-100-parts-rgb: 221, 221, 221;--neutral-color-200-parts-rgb: 204, 204, 204;--neutral-color-300-parts-rgb: 176, 176, 176;--neutral-color-400-parts-rgb: 144, 144, 144;--neutral-color-500-parts-rgb: 81, 81, 81;--neutral-color-600-parts-rgb: 66, 66, 66;--neutral-color-700-parts-rgb: 51, 51, 51;--neutral-color-800-parts-rgb: 33, 33, 33;--neutral-color-900-parts-rgb: 20, 20, 20;--help-color-50-parts: #EFE3FE;--help-color-100-parts: #E0CAFD;--help-color-200-parts: #C194FB;--help-color-300-parts: #994FF8;--help-color-400-parts: #8831F7;--help-color-500-parts: #7714F6;--help-color-600-parts: #6809E3;--help-color-700-parts: #5B08C5;--help-color-800-parts: #4D06A8;--help-color-900-parts: #40058A;--help-color-A50-parts: rgba(119, 20, 246, .04);--help-color-A100-parts: rgba(119, 20, 246, .08);--help-color-A200-parts: rgba(119, 20, 246, .16);--help-color-A300-parts: rgba(119, 20, 246, .24);--help-color-A400-parts: rgba(119, 20, 246, .32);--help-color-A500-parts: rgba(119, 20, 246, .4);--help-color-A600-parts: rgba(119, 20, 246, .48);--help-color-A700-parts: rgba(119, 20, 246, .56);--help-color-A800-parts: rgba(119, 20, 246, .64);--help-color-A900-parts: rgba(119, 20, 246, .72);--help-color-contrast-50-parts: rgba(0, 0, 0, .87);--help-color-contrast-100-parts: rgba(0, 0, 0, .87);--help-color-contrast-200-parts: rgba(0, 0, 0, .87);--help-color-contrast-300-parts: rgba(255, 255, 255, 1);--help-color-contrast-400-parts: rgba(255, 255, 255, 1);--help-color-contrast-500-parts: rgba(255, 255, 255, 1);--help-color-contrast-600-parts: rgba(255, 255, 255, 1);--help-color-contrast-700-parts: rgba(255, 255, 255, 1);--help-color-contrast-800-parts: rgba(255, 255, 255, 1);--help-color-contrast-900-parts: rgba(255, 255, 255, 1);--help-color-contrast-A50-parts: rgba(0, 0, 0, .87);--help-color-contrast-A100-parts: rgba(0, 0, 0, .87);--help-color-contrast-A200-parts: rgba(0, 0, 0, .87);--help-color-contrast-A300-parts: rgba(0, 0, 0, .87);--help-color-contrast-A400-parts: rgba(0, 0, 0, .87);--help-color-contrast-A500-parts: rgba(0, 0, 0, .87);--help-color-contrast-A600-parts: rgba(0, 0, 0, .87);--help-color-contrast-A700-parts: rgba(0, 0, 0, .87);--help-color-contrast-A800-parts: rgba(0, 0, 0, .87);--help-color-contrast-A900-parts: rgba(0, 0, 0, .87);--help-color-50-parts-rgb: 239, 227, 254;--help-color-100-parts-rgb: 224, 202, 253;--help-color-200-parts-rgb: 193, 148, 251;--help-color-300-parts-rgb: 153, 79, 248;--help-color-400-parts-rgb: 136, 49, 247;--help-color-500-parts-rgb: 119, 20, 246;--help-color-600-parts-rgb: 104, 9, 227;--help-color-700-parts-rgb: 91, 8, 197;--help-color-800-parts-rgb: 77, 6, 168;--help-color-900-parts-rgb: 64, 5, 138}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes floatingLabel{0%{transform:translate(16px,32px);opacity:0}to{transform:translate(0);opacity:1}}:host{display:inline-block;width:300px;min-width:300px}:host *{box-sizing:border-box}.sof-select-field{display:flex;flex-direction:column;position:relative}.sof-select-field label{position:absolute;top:-22px;display:inline-block;line-height:16px;z-index:1;font-size:12px;padding-left:2px;font-weight:500!important;color:#0009;transform:none;opacity:1;animation:floatingLabel .2s ease-in}.sof-select-field label.has-error{color:var(--error-color-500-parts)}.sof-select-field .relative-container{position:relative}.sof-select-field .relative-container .trigger{min-height:40px;height:40px;max-height:40px;display:flex;align-items:center;gap:8px;width:100%;border-radius:8px;background:#fafafa;border:2px solid transparent;cursor:pointer}.sof-select-field .relative-container .trigger.white-bg{background:#fff}.sof-select-field .relative-container .trigger.expanded{box-shadow:0 10px 10px #0000001a}.sof-select-field .relative-container .trigger:focus{outline:3px solid var(--primary-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger.has-error{border-color:var(--error-color-500-parts)}.sof-select-field .relative-container .trigger.has-error:focus{outline:3px solid var(--error-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger:disabled{cursor:default}.sof-select-field .relative-container .trigger:disabled span.body1,.sof-select-field .relative-container .trigger:disabled .arrow-icon{color:#00000061}.sof-select-field .relative-container .trigger span.body1{line-height:24px}.sof-select-field .relative-container .trigger .arrow-icon,.sof-select-field .relative-container .trigger .error-icon{pointer-events:none;font-size:20px}.sof-select-field .relative-container .trigger .error-icon{animation:fadeIn .2s ease-in}.sof-select-field .relative-container .trigger .arrow-icon{color:#333}.sof-select-field .relative-container .trigger .multi-chip-container{display:flex;gap:8px;width:100%;overflow:hidden}.sof-select-field .relative-container .options-list-wrap{position:absolute;z-index:10;top:32px;width:100%;padding-top:6px;border-radius:0 0 8px 8px;background:#fafafa}.sof-select-field .relative-container .options-list-wrap.white-bg{background:#fff}.sof-select-field .relative-container .options-list-wrap.has-error{border:2px solid var(--error-color-500-parts);border-top:none}.sof-select-field .relative-container .options-list-wrap:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list{max-height:200px;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;list-style:none;border-radius:0 0 8px 8px;box-shadow:0 10px 10px #0000001a;scrollbar-color:#E9E9E9 transparent}.sof-select-field .relative-container .options-list-wrap .options-list:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list li{cursor:pointer;border-left:4px solid transparent;display:flex;align-items:center;gap:8px;min-height:40px}.sof-select-field .relative-container .options-list-wrap .options-list li:hover,.sof-select-field .relative-container .options-list-wrap .options-list li.active{background-color:var(--neutral-color-A50-parts);border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.selected{font-weight:500;border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled{pointer-events:none;cursor:not-allowed;color:#00000061;opacity:.6}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled .option-label{color:#00000061}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled svg{opacity:.5}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled:hover,.sof-select-field .relative-container .options-list-wrap .options-list li.disabled.active{background-color:transparent;border-color:transparent}.sof-select-field .relative-container .options-list-wrap .options-list li svg{pointer-events:none;min-height:24px;min-width:24px;height:24px;width:24px;max-height:24px;max-width:24px}.sof-select-field .relative-container .options-list-wrap .options-list li .option-label{line-height:24px}.sof-select-field .help-message,.sof-select-field .error-message{display:inline-block;line-height:8px;margin-top:8px;padding-left:2px;animation:fadeIn .2s ease-in}.visible-chip{animation:fadeIn .2s ease-in}:host ::ng-deep .sof-chip span{cursor:pointer!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SofChipComponent, selector: "sof-chip", inputs: ["label", "canRemove", "theme", "iconClass", "removeButtonId"], outputs: ["removeEvent"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SofSelectComponent, decorators: [{
             type: Component,
@@ -8303,7 +8319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         SofChipComponent
                     ], host: {
                         '[class.full-width]': 'this.width === "full"'
-                    }, template: "<div \r\n  class=\"sof-select-field\"\r\n  [class.full-width]=\"width === 'full'\">\r\n  @if (hasSelectedItems()) {\r\n    <label \r\n      [for]=\"id + '-select-trigger'\"\r\n      [class.text-low-emphasis]=\"isDisabled\"\r\n      [class.has-error]=\"errorMessage()?.length\">\r\n      {{label | translate}}\r\n    </label>\r\n  }\r\n  <div class=\"relative-container\">\r\n    <button \r\n      [id]=\"id + '-select-trigger'\" \r\n      [name]=\"controlName\"\r\n      class=\"trigger p-v-8 p-h-16\" \r\n      [class.has-error]=\"errorMessage()?.length\"\r\n      [class.expanded]=\"expanded()\"\r\n      [class.white-bg]=\"useWhiteBackground\"\r\n      [disabled]=\"isDisabled\"\r\n      type=\"button\" \r\n      role=\"combobox\" \r\n      [attr.aria-expanded]=\"expanded()\" \r\n      [attr.aria-controls]=\"expanded() ? id + '-listbox' : null\"\r\n      [attr.aria-label]=\"label | translate\"\r\n      aria-haspopup=\"listbox\" \r\n      (click)=\"togglePanel()\">\r\n      @if (multiple) {\r\n        <div #multiChipContainer class=\"multi-chip-container\">\r\n          @if (hasSelectedItems()) {\r\n            @if (isAllSelected()) {\r\n              <sof-chip \r\n                class=\"visible-chip\"\r\n                theme=\"primary\"\r\n                [label]=\"'armature.select.all'\"\r\n                [removeButtonId]=\"`${id}-select-chip-remove-all`\"\r\n                (removeEvent)=\"removeChip($event)\"\r\n              />\r\n            } @else {\r\n              @for (label of visibleChips(); let i = $index; track i) {\r\n                <sof-chip \r\n                  class=\"visible-chip\"\r\n                  theme=\"primary\"\r\n                  [label]=\"label\"\r\n                  [removeButtonId]=\"`${id}-select-chip-remove-${i}`\"\r\n                  (removeEvent)=\"removeChip($event)\"\r\n                />\r\n              }\r\n              @if (hiddenChipsCount()) {\r\n                <sof-chip \r\n                  theme=\"primary\"\r\n                  [label]=\"`+${hiddenChipsCount()}`\"\r\n                  [canRemove]=\"false\"\r\n                  m-l-auto\r\n                />\r\n              }\r\n            }\r\n          } @else {\r\n            <span class=\"body1 text-high-emphasis\">\r\n              {{selectedLabelsMultiple()[0] | translate}}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <span class=\"body1 text-high-emphasis\">\r\n          {{selectedLabelSingle() | translate}}\r\n        </span>\r\n      }\r\n      @if (errorMessage()?.length && !expanded()) {\r\n        <i class=\"ph-bold ph-warning-circle error-icon color-error m-l-auto\"></i>\r\n      }\r\n      <i \r\n        class=\"ph-bold ph-caret-{{expanded() ? 'up':'down'}} arrow-icon\" \r\n        [class.m-l-auto]=\"!errorMessage()?.length || (errorMessage()?.length && expanded())\">\r\n      </i>\r\n    </button>\r\n    @if (expanded()) {\r\n      <div \r\n        class=\"options-list-wrap\"\r\n        [class.white-bg]=\"useWhiteBackground\"\r\n        [class.has-error]=\"errorMessage()?.length\">\r\n        <ul \r\n          #listboxRef \r\n          [id]=\"id + '-listbox'\" \r\n          class=\"options-list\"\r\n          role=\"listbox\" \r\n          tabindex=\"0\"\r\n          [attr.aria-multiselectable]=\"multiple\">\r\n          @if (multiple && showSelectAll) {\r\n            <li \r\n              [id]=\"id + '-list-option-all'\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isAllSelected()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"activeIndex === 0\"\r\n              [class.selected]=\"isAllSelected()\" \r\n              [class.disabled]=\"isMaxSelectionsReached() && !isAllSelected()\"\r\n              (click)=\"onOptionClick('ALL')\">\r\n              @if (isAllSelected()) {\r\n                <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n              } @else if (hasSelectedItems()) {\r\n                <ng-container *ngTemplateOutlet=\"selectAllIndeterminateSvg\"></ng-container>\r\n              } @else {\r\n                <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis\">\r\n                {{'armature.select.all' | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n          @for (option of readOptions(); let i = $index; track i) {\r\n            <li \r\n              [id]=\"`${id}-list-option-${i}`\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isSelected(option.value)()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"i + ((multiple && showSelectAll) ? 1 : 0) === activeIndex\"\r\n              [class.selected]=\"isSelected(option.value)()\"\r\n              [class.disabled]=\"isOptionDisabled(option)()\"\r\n              (click)=\"onOptionClick(option)\">\r\n              @if (multiple) {\r\n                @if (isSelected(option.value)()) {\r\n                  @if (option.isDisabled) {\r\n                    <ng-container *ngTemplateOutlet=\"checkedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n                  }\r\n                } @else {\r\n                  @if (isOptionDisabled(option)()) {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n                  }\r\n                }\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis text-overflow-ellipsis\">\r\n                {{option.label | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (errorMessage()?.length) {\r\n    <span class=\"error-message color-error body3 fw-500\">\r\n      {{errorMessage() | translate}}\r\n    </span>\r\n  } @else {\r\n    @if (helpText?.length) {\r\n      <span \r\n        class=\"help-message body3 fw-400 text-medium-emphasis\"\r\n        [class.text-low-emphasis]=\"isDisabled\">\r\n        {{helpText | translate}}\r\n      </span>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #checkedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_1718)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"var(--primary-color-500-parts, #146EF6)\" stroke=\"var(--primary-color-500-parts, #146EF6)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12.75L10.5 15L15.75 9.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_1718\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #checkedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_5591)\">\r\n      <path d=\"M19.6055 3C20.5594 3 21.333 3.77359 21.333 4.72754V19.2725C21.333 20.2264 20.5594 21 19.6055 21H5.06055C4.1066 21 3.33301 20.2264 3.33301 19.2725V4.72754C3.33301 3.77359 4.1066 3 5.06055 3H19.6055Z\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.58301 12.75L10.833 15L16.083 9.75\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_5591\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.333008)\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_3289)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"var(--neutral-color-500-parts, #515151)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_3289\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3763)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"#515151\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3763\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #selectAllIndeterminateSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3054)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"#146EF6\" stroke=\"#146EF6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12H15.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3054\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:root{--primary-color-50-parts: #f3f5ff;--primary-color-100-parts: #E8EBFF;--primary-color-200-parts: #B5BEFF;--primary-color-300-parts: #687AFF;--primary-color-400-parts: #455BFF;--primary-color-500-parts: #1C37FF;--primary-color-600-parts: #001EFC;--primary-color-700-parts: #001ADE;--primary-color-800-parts: #0018C9;--primary-color-900-parts: #0016B5;--primary-color-A50-parts: rgba(28, 55, 255, .04);--primary-color-A100-parts: rgba(28, 55, 255, .08);--primary-color-A200-parts: rgba(28, 55, 255, .16);--primary-color-A300-parts: rgba(28, 55, 255, .24);--primary-color-A400-parts: rgba(28, 55, 255, .32);--primary-color-A500-parts: rgba(28, 55, 255, .4);--primary-color-A600-parts: rgba(28, 55, 255, .48);--primary-color-A700-parts: rgba(28, 55, 255, .56);--primary-color-A800-parts: rgba(28, 55, 255, .64);--primary-color-A900-parts: rgba(28, 55, 255, .72);--primary-color-contrast-50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-400-parts: rgba(255, 255, 255, 1);--primary-color-contrast-500-parts: rgba(255, 255, 255, 1);--primary-color-contrast-600-parts: rgba(255, 255, 255, 1);--primary-color-contrast-700-parts: rgba(255, 255, 255, 1);--primary-color-contrast-800-parts: rgba(255, 255, 255, 1);--primary-color-contrast-900-parts: rgba(255, 255, 255, 1);--primary-color-contrast-A50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A500-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A600-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A700-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A800-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A900-parts: rgba(0, 0, 0, .87);--primary-color-50-parts-rgb: 243, 245, 255;--primary-color-100-parts-rgb: 232, 235, 255;--primary-color-200-parts-rgb: 181, 190, 255;--primary-color-300-parts-rgb: 104, 122, 255;--primary-color-400-parts-rgb: 69, 91, 255;--primary-color-500-parts-rgb: 28, 55, 255;--primary-color-600-parts-rgb: 0, 30, 252;--primary-color-700-parts-rgb: 0, 26, 222;--primary-color-800-parts-rgb: 0, 24, 201;--primary-color-900-parts-rgb: 0, 22, 181;--accent-color-50-parts: #e0f2f1;--accent-color-100-parts: #b2dfdb;--accent-color-200-parts: #80cbc4;--accent-color-300-parts: #4db6ac;--accent-color-400-parts: #26a69a;--accent-color-500-parts: #009688;--accent-color-600-parts: #00897b;--accent-color-700-parts: #00796b;--accent-color-800-parts: #00695c;--accent-color-900-parts: #004d40;--accent-color-A50-parts: rgba(0, 150, 136, .04);--accent-color-A100-parts: rgba(0, 150, 136, .08);--accent-color-A200-parts: rgba(0, 150, 136, .16);--accent-color-A300-parts: rgba(0, 150, 136, .24);--accent-color-A400-parts: rgba(0, 150, 136, .32);--accent-color-A500-parts: rgba(0, 150, 136, .4);--accent-color-A600-parts: rgba(0, 150, 136, .48);--accent-color-A700-parts: rgba(0, 150, 136, .56);--accent-color-A800-parts: rgba(0, 150, 136, .64);--accent-color-A900-parts: rgba(0, 150, 136, .72);--accent-color-contrast-50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-500-parts: rgba(255, 255, 255, 1);--accent-color-contrast-600-parts: rgba(255, 255, 255, 1);--accent-color-contrast-700-parts: rgba(255, 255, 255, 1);--accent-color-contrast-800-parts: rgba(255, 255, 255, 1);--accent-color-contrast-900-parts: rgba(255, 255, 255, 1);--accent-color-contrast-A50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A500-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A600-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A700-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A800-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A900-parts: rgba(0, 0, 0, .87);--accent-color-50-parts-rgb: 224, 242, 241;--accent-color-100-parts-rgb: 178, 223, 219;--accent-color-200-parts-rgb: 128, 203, 196;--accent-color-300-parts-rgb: 77, 182, 172;--accent-color-400-parts-rgb: 38, 166, 154;--accent-color-500-parts-rgb: 0, 150, 136;--accent-color-600-parts-rgb: 0, 137, 123;--accent-color-700-parts-rgb: 0, 121, 107;--accent-color-800-parts-rgb: 0, 105, 92;--accent-color-900-parts-rgb: 0, 77, 64;--warn-color-50-parts: #fceee3;--warn-color-100-parts: #f8d4b9;--warn-color-200-parts: #f4b78b;--warn-color-300-parts: #ef9a5d;--warn-color-400-parts: #eb843a;--warn-color-500-parts: #e86e17;--warn-color-600-parts: #e56614;--warn-color-700-parts: #e25b11;--warn-color-800-parts: #de510d;--warn-color-900-parts: #d83f07;--warn-color-A50-parts: rgba(232, 110, 23, .04);--warn-color-A100-parts: rgba(232, 110, 23, .08);--warn-color-A200-parts: rgba(232, 110, 23, .16);--warn-color-A300-parts: rgba(232, 110, 23, .24);--warn-color-A400-parts: rgba(232, 110, 23, .32);--warn-color-A500-parts: rgba(232, 110, 23, .4);--warn-color-A600-parts: rgba(232, 110, 23, .48);--warn-color-A700-parts: rgba(232, 110, 23, .56);--warn-color-A800-parts: rgba(232, 110, 23, .64);--warn-color-A900-parts: rgba(232, 110, 23, .72);--warn-color-contrast-50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-900-parts: rgba(255, 255, 255, 1);--warn-color-contrast-A50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A900-parts: rgba(0, 0, 0, .87);--warn-color-50-parts-rgb: 252, 238, 227;--warn-color-100-parts-rgb: 248, 212, 185;--warn-color-200-parts-rgb: 244, 183, 139;--warn-color-300-parts-rgb: 239, 154, 93;--warn-color-400-parts-rgb: 235, 132, 58;--warn-color-500-parts-rgb: 232, 110, 23;--warn-color-600-parts-rgb: 229, 102, 20;--warn-color-700-parts-rgb: 226, 91, 17;--warn-color-800-parts-rgb: 222, 81, 13;--warn-color-900-parts-rgb: 216, 63, 7;--info-color-50-parts: #F3F5FF;--info-color-100-parts: #E8EBFF;--info-color-200-parts: #B5BEFF;--info-color-300-parts: #687AFF;--info-color-400-parts: #455BFF;--info-color-500-parts: #1C37FF;--info-color-600-parts: #001EFC;--info-color-700-parts: #001ADE;--info-color-800-parts: #0018C9;--info-color-900-parts: #0016B5;--info-color-A50-parts: rgba(28, 55, 255, .04);--info-color-A100-parts: rgba(28, 55, 255, .08);--info-color-A200-parts: rgba(28, 55, 255, .16);--info-color-A300-parts: rgba(28, 55, 255, .24);--info-color-A400-parts: rgba(28, 55, 255, .32);--info-color-A500-parts: rgba(28, 55, 255, .4);--info-color-A600-parts: rgba(28, 55, 255, .48);--info-color-A700-parts: rgba(28, 55, 255, .56);--info-color-A800-parts: rgba(28, 55, 255, .64);--info-color-A900-parts: rgba(28, 55, 255, .72);--info-color-contrast-50-parts: rgba(0, 0, 0, .87);--info-color-contrast-100-parts: rgba(0, 0, 0, .87);--info-color-contrast-200-parts: rgba(0, 0, 0, .87);--info-color-contrast-300-parts: rgba(0, 0, 0, .87);--info-color-contrast-400-parts: rgba(255, 255, 255, 1);--info-color-contrast-500-parts: rgba(255, 255, 255, 1);--info-color-contrast-600-parts: rgba(255, 255, 255, 1);--info-color-contrast-700-parts: rgba(255, 255, 255, 1);--info-color-contrast-800-parts: rgba(255, 255, 255, 1);--info-color-contrast-900-parts: rgba(255, 255, 255, 1);--info-color-contrast-A50-parts: rgba(0, 0, 0, .87);--info-color-contrast-A100-parts: rgba(0, 0, 0, .87);--info-color-contrast-A200-parts: rgba(0, 0, 0, .87);--info-color-contrast-A300-parts: rgba(0, 0, 0, .87);--info-color-contrast-A400-parts: rgba(0, 0, 0, .87);--info-color-contrast-A500-parts: rgba(0, 0, 0, .87);--info-color-contrast-A600-parts: rgba(0, 0, 0, .87);--info-color-contrast-A700-parts: rgba(0, 0, 0, .87);--info-color-contrast-A800-parts: rgba(0, 0, 0, .87);--info-color-contrast-A900-parts: rgba(0, 0, 0, .87);--info-color-50-parts-rgb: 243, 245, 255;--info-color-100-parts-rgb: 232, 235, 255;--info-color-200-parts-rgb: 181, 190, 255;--info-color-300-parts-rgb: 104, 122, 255;--info-color-400-parts-rgb: 69, 91, 255;--info-color-500-parts-rgb: 28, 55, 255;--info-color-600-parts-rgb: 0, 30, 252;--info-color-700-parts-rgb: 0, 26, 222;--info-color-800-parts-rgb: 0, 24, 201;--info-color-900-parts-rgb: 0, 22, 181;--success-color-50-parts: #e7f0e6;--success-color-100-parts: #c4dac1;--success-color-200-parts: #9cc198;--success-color-300-parts: #74a86e;--success-color-400-parts: #57954f;--success-color-500-parts: #398230;--success-color-600-parts: #337a2b;--success-color-700-parts: #2c6f24;--success-color-800-parts: #24651e;--success-color-900-parts: #175213;--success-color-A50-parts: rgba(57, 130, 48, .04);--success-color-A100-parts: rgba(57, 130, 48, .08);--success-color-A200-parts: rgba(57, 130, 48, .16);--success-color-A300-parts: rgba(57, 130, 48, .24);--success-color-A400-parts: rgba(57, 130, 48, .32);--success-color-A500-parts: rgba(57, 130, 48, .4);--success-color-A600-parts: rgba(57, 130, 48, .48);--success-color-A700-parts: rgba(57, 130, 48, .56);--success-color-A800-parts: rgba(57, 130, 48, .64);--success-color-A900-parts: rgba(57, 130, 48, .72);--success-color-contrast-50-parts: rgba(0, 0, 0, .87);--success-color-contrast-100-parts: rgba(0, 0, 0, .87);--success-color-contrast-200-parts: rgba(0, 0, 0, .87);--success-color-contrast-300-parts: rgba(0, 0, 0, .87);--success-color-contrast-400-parts: rgba(0, 0, 0, .87);--success-color-contrast-500-parts: rgba(255, 255, 255, 1);--success-color-contrast-600-parts: rgba(255, 255, 255, 1);--success-color-contrast-700-parts: rgba(255, 255, 255, 1);--success-color-contrast-800-parts: rgba(255, 255, 255, 1);--success-color-contrast-900-parts: rgba(255, 255, 255, 1);--success-color-contrast-A50-parts: rgba(0, 0, 0, .87);--success-color-contrast-A100-parts: rgba(0, 0, 0, .87);--success-color-contrast-A200-parts: rgba(0, 0, 0, .87);--success-color-contrast-A300-parts: rgba(0, 0, 0, .87);--success-color-contrast-A400-parts: rgba(0, 0, 0, .87);--success-color-contrast-A500-parts: rgba(0, 0, 0, .87);--success-color-contrast-A600-parts: rgba(0, 0, 0, .87);--success-color-contrast-A700-parts: rgba(0, 0, 0, .87);--success-color-contrast-A800-parts: rgba(0, 0, 0, .87);--success-color-contrast-A900-parts: rgba(0, 0, 0, .87);--success-color-50-parts-rgb: 231, 240, 230;--success-color-100-parts-rgb: 196, 218, 193;--success-color-200-parts-rgb: 156, 193, 152;--success-color-300-parts-rgb: 116, 168, 110;--success-color-400-parts-rgb: 87, 149, 79;--success-color-500-parts-rgb: 57, 130, 48;--success-color-600-parts-rgb: 51, 122, 43;--success-color-700-parts-rgb: 44, 111, 36;--success-color-800-parts-rgb: 36, 101, 30;--success-color-900-parts-rgb: 23, 82, 19;--error-color-50-parts: #fae5e4;--error-color-100-parts: #f3bdba;--error-color-200-parts: #eb928d;--error-color-300-parts: #e3665f;--error-color-400-parts: #dd453c;--error-color-500-parts: #d7241a;--error-color-600-parts: #d32017;--error-color-700-parts: #cd1b13;--error-color-800-parts: #c7160f;--error-color-900-parts: #be0d08;--error-color-A50-parts: rgba(215, 36, 26, .04);--error-color-A100-parts: rgba(215, 36, 26, .08);--error-color-A200-parts: rgba(215, 36, 26, .16);--error-color-A300-parts: rgba(215, 36, 26, .24);--error-color-A400-parts: rgba(215, 36, 26, .32);--error-color-A500-parts: rgba(215, 36, 26, .4);--error-color-A600-parts: rgba(215, 36, 26, .48);--error-color-A700-parts: rgba(215, 36, 26, .56);--error-color-A800-parts: rgba(215, 36, 26, .64);--error-color-A900-parts: rgba(215, 36, 26, .72);--error-color-contrast-50-parts: rgba(0, 0, 0, .87);--error-color-contrast-100-parts: rgba(0, 0, 0, .87);--error-color-contrast-200-parts: rgba(0, 0, 0, .87);--error-color-contrast-300-parts: rgba(0, 0, 0, .87);--error-color-contrast-400-parts: rgba(0, 0, 0, .87);--error-color-contrast-500-parts: rgba(255, 255, 255, 1);--error-color-contrast-600-parts: rgba(255, 255, 255, 1);--error-color-contrast-700-parts: rgba(255, 255, 255, 1);--error-color-contrast-800-parts: rgba(255, 255, 255, 1);--error-color-contrast-900-parts: rgba(255, 255, 255, 1);--error-color-contrast-A50-parts: rgba(0, 0, 0, .87);--error-color-contrast-A100-parts: rgba(0, 0, 0, .87);--error-color-contrast-A200-parts: rgba(0, 0, 0, .87);--error-color-contrast-A300-parts: rgba(0, 0, 0, .87);--error-color-contrast-A400-parts: rgba(0, 0, 0, .87);--error-color-contrast-A500-parts: rgba(0, 0, 0, .87);--error-color-contrast-A600-parts: rgba(0, 0, 0, .87);--error-color-contrast-A700-parts: rgba(0, 0, 0, .87);--error-color-contrast-A800-parts: rgba(0, 0, 0, .87);--error-color-contrast-A900-parts: rgba(0, 0, 0, .87);--error-color-50-parts-rgb: 250, 229, 228;--error-color-100-parts-rgb: 243, 189, 186;--error-color-200-parts-rgb: 235, 146, 141;--error-color-300-parts-rgb: 227, 102, 95;--error-color-400-parts-rgb: 221, 69, 60;--error-color-500-parts-rgb: 215, 36, 26;--error-color-600-parts-rgb: 211, 32, 23;--error-color-700-parts-rgb: 205, 27, 19;--error-color-800-parts-rgb: 199, 22, 15;--error-color-900-parts-rgb: 190, 13, 8;--neutral-color-50-parts: #e9e9e9;--neutral-color-100-parts: #dddddd;--neutral-color-200-parts: #cccccc;--neutral-color-300-parts: #b0b0b0;--neutral-color-400-parts: #909090;--neutral-color-500-parts: #515151;--neutral-color-600-parts: #424242;--neutral-color-700-parts: #333333;--neutral-color-800-parts: #212121;--neutral-color-900-parts: #141414;--neutral-color-A50-parts: rgba(81, 81, 81, .04);--neutral-color-A100-parts: rgba(81, 81, 81, .08);--neutral-color-A200-parts: rgba(81, 81, 81, .16);--neutral-color-A300-parts: rgba(81, 81, 81, .24);--neutral-color-A400-parts: rgba(81, 81, 81, .32);--neutral-color-A500-parts: rgba(81, 81, 81, .4);--neutral-color-A600-parts: rgba(81, 81, 81, .48);--neutral-color-A700-parts: rgba(81, 81, 81, .56);--neutral-color-A800-parts: rgba(81, 81, 81, .64);--neutral-color-A900-parts: rgba(81, 81, 81, .72);--neutral-color-contrast-50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-400-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-500-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-600-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-700-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-800-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-900-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-A50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A400-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A500-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A600-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A700-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A800-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A900-parts: rgba(0, 0, 0, .87);--neutral-color-50-parts-rgb: 233, 233, 233;--neutral-color-100-parts-rgb: 221, 221, 221;--neutral-color-200-parts-rgb: 204, 204, 204;--neutral-color-300-parts-rgb: 176, 176, 176;--neutral-color-400-parts-rgb: 144, 144, 144;--neutral-color-500-parts-rgb: 81, 81, 81;--neutral-color-600-parts-rgb: 66, 66, 66;--neutral-color-700-parts-rgb: 51, 51, 51;--neutral-color-800-parts-rgb: 33, 33, 33;--neutral-color-900-parts-rgb: 20, 20, 20;--help-color-50-parts: #EFE3FE;--help-color-100-parts: #E0CAFD;--help-color-200-parts: #C194FB;--help-color-300-parts: #994FF8;--help-color-400-parts: #8831F7;--help-color-500-parts: #7714F6;--help-color-600-parts: #6809E3;--help-color-700-parts: #5B08C5;--help-color-800-parts: #4D06A8;--help-color-900-parts: #40058A;--help-color-A50-parts: rgba(119, 20, 246, .04);--help-color-A100-parts: rgba(119, 20, 246, .08);--help-color-A200-parts: rgba(119, 20, 246, .16);--help-color-A300-parts: rgba(119, 20, 246, .24);--help-color-A400-parts: rgba(119, 20, 246, .32);--help-color-A500-parts: rgba(119, 20, 246, .4);--help-color-A600-parts: rgba(119, 20, 246, .48);--help-color-A700-parts: rgba(119, 20, 246, .56);--help-color-A800-parts: rgba(119, 20, 246, .64);--help-color-A900-parts: rgba(119, 20, 246, .72);--help-color-contrast-50-parts: rgba(0, 0, 0, .87);--help-color-contrast-100-parts: rgba(0, 0, 0, .87);--help-color-contrast-200-parts: rgba(0, 0, 0, .87);--help-color-contrast-300-parts: rgba(255, 255, 255, 1);--help-color-contrast-400-parts: rgba(255, 255, 255, 1);--help-color-contrast-500-parts: rgba(255, 255, 255, 1);--help-color-contrast-600-parts: rgba(255, 255, 255, 1);--help-color-contrast-700-parts: rgba(255, 255, 255, 1);--help-color-contrast-800-parts: rgba(255, 255, 255, 1);--help-color-contrast-900-parts: rgba(255, 255, 255, 1);--help-color-contrast-A50-parts: rgba(0, 0, 0, .87);--help-color-contrast-A100-parts: rgba(0, 0, 0, .87);--help-color-contrast-A200-parts: rgba(0, 0, 0, .87);--help-color-contrast-A300-parts: rgba(0, 0, 0, .87);--help-color-contrast-A400-parts: rgba(0, 0, 0, .87);--help-color-contrast-A500-parts: rgba(0, 0, 0, .87);--help-color-contrast-A600-parts: rgba(0, 0, 0, .87);--help-color-contrast-A700-parts: rgba(0, 0, 0, .87);--help-color-contrast-A800-parts: rgba(0, 0, 0, .87);--help-color-contrast-A900-parts: rgba(0, 0, 0, .87);--help-color-50-parts-rgb: 239, 227, 254;--help-color-100-parts-rgb: 224, 202, 253;--help-color-200-parts-rgb: 193, 148, 251;--help-color-300-parts-rgb: 153, 79, 248;--help-color-400-parts-rgb: 136, 49, 247;--help-color-500-parts-rgb: 119, 20, 246;--help-color-600-parts-rgb: 104, 9, 227;--help-color-700-parts-rgb: 91, 8, 197;--help-color-800-parts-rgb: 77, 6, 168;--help-color-900-parts-rgb: 64, 5, 138}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes floatingLabel{0%{transform:translate(16px,32px);opacity:0}to{transform:translate(0);opacity:1}}:host{display:inline-block;width:300px;min-width:300px}:host *{box-sizing:border-box}.sof-select-field{display:flex;flex-direction:column;position:relative}.sof-select-field label{position:absolute;top:-22px;display:inline-block;line-height:16px;z-index:1;font-size:12px;padding-left:2px;font-weight:500!important;color:#0009;transform:none;opacity:1;animation:floatingLabel .2s ease-in}.sof-select-field label.has-error{color:var(--error-color-500-parts)}.sof-select-field .relative-container{position:relative}.sof-select-field .relative-container .trigger{min-height:40px;height:40px;max-height:40px;display:flex;align-items:center;gap:8px;width:100%;border-radius:8px;background:#fafafa;border:2px solid transparent;cursor:pointer}.sof-select-field .relative-container .trigger.white-bg{background:#fff}.sof-select-field .relative-container .trigger.expanded{box-shadow:0 10px 10px #0000001a}.sof-select-field .relative-container .trigger:focus{outline:3px solid var(--primary-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger.has-error{border-color:var(--error-color-500-parts)}.sof-select-field .relative-container .trigger.has-error:focus{outline:3px solid var(--error-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger:disabled{cursor:default}.sof-select-field .relative-container .trigger:disabled span.body1,.sof-select-field .relative-container .trigger:disabled .arrow-icon{color:#00000061}.sof-select-field .relative-container .trigger span.body1{line-height:24px}.sof-select-field .relative-container .trigger .arrow-icon,.sof-select-field .relative-container .trigger .error-icon{pointer-events:none;font-size:20px}.sof-select-field .relative-container .trigger .error-icon{animation:fadeIn .2s ease-in}.sof-select-field .relative-container .trigger .arrow-icon{color:#333}.sof-select-field .relative-container .trigger .multi-chip-container{display:flex;gap:8px;width:100%;overflow:hidden}.sof-select-field .relative-container .options-list-wrap{position:absolute;z-index:10;top:32px;width:100%;padding-top:6px;border-radius:0 0 8px 8px;background:#fafafa}.sof-select-field .relative-container .options-list-wrap.white-bg{background:#fff}.sof-select-field .relative-container .options-list-wrap.has-error{border:2px solid var(--error-color-500-parts);border-top:none}.sof-select-field .relative-container .options-list-wrap:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list{max-height:200px;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;list-style:none;border-radius:0 0 8px 8px;box-shadow:0 10px 10px #0000001a;scrollbar-color:#E9E9E9 transparent}.sof-select-field .relative-container .options-list-wrap .options-list:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list li{cursor:pointer;border-left:4px solid transparent;display:flex;align-items:center;gap:8px}.sof-select-field .relative-container .options-list-wrap .options-list li:hover,.sof-select-field .relative-container .options-list-wrap .options-list li.active{background-color:var(--neutral-color-A50-parts);border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.selected{font-weight:500;border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled{pointer-events:none;cursor:not-allowed;color:#00000061;opacity:.6}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled .option-label{color:#00000061}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled svg{opacity:.5}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled:hover,.sof-select-field .relative-container .options-list-wrap .options-list li.disabled.active{background-color:transparent;border-color:transparent}.sof-select-field .relative-container .options-list-wrap .options-list li svg{pointer-events:none;min-height:24px;min-width:24px;height:24px;width:24px;max-height:24px;max-width:24px}.sof-select-field .relative-container .options-list-wrap .options-list li .option-label{line-height:24px}.sof-select-field .help-message,.sof-select-field .error-message{display:inline-block;line-height:8px;margin-top:8px;padding-left:2px;animation:fadeIn .2s ease-in}.visible-chip{animation:fadeIn .2s ease-in}:host ::ng-deep .sof-chip span{cursor:pointer!important}\n"] }]
+                    }, template: "<div \r\n  class=\"sof-select-field\"\r\n  [class.full-width]=\"width === 'full'\">\r\n  @if (hasSelectedItems()) {\r\n    <label \r\n      [for]=\"id + '-select-trigger'\"\r\n      [class.text-low-emphasis]=\"isDisabled\"\r\n      [class.has-error]=\"errorMessage()?.length\">\r\n      {{label | translate}}\r\n    </label>\r\n  }\r\n  <div class=\"relative-container\">\r\n    <button \r\n      [id]=\"id + '-select-trigger'\" \r\n      [name]=\"controlName\"\r\n      class=\"trigger p-v-8 p-h-16\" \r\n      [class.has-error]=\"errorMessage()?.length\"\r\n      [class.expanded]=\"expanded()\"\r\n      [class.white-bg]=\"useWhiteBackground\"\r\n      [disabled]=\"isDisabled\"\r\n      type=\"button\" \r\n      role=\"combobox\" \r\n      [attr.aria-expanded]=\"expanded()\" \r\n      [attr.aria-controls]=\"expanded() ? id + '-listbox' : null\"\r\n      [attr.aria-label]=\"label | translate\"\r\n      aria-haspopup=\"listbox\" \r\n      (click)=\"togglePanel()\">\r\n      @if (multiple) {\r\n        <div #multiChipContainer class=\"multi-chip-container\">\r\n          @if (hasSelectedItems()) {\r\n            @if (isAllSelected()) {\r\n              <sof-chip \r\n                class=\"visible-chip\"\r\n                theme=\"primary\"\r\n                [label]=\"'armature.select.all'\"\r\n                [removeButtonId]=\"`${id}-select-chip-remove-all`\"\r\n                (removeEvent)=\"removeChip($event)\"\r\n              />\r\n            } @else {\r\n              @for (label of visibleChips(); let i = $index; track i) {\r\n                <sof-chip \r\n                  class=\"visible-chip\"\r\n                  theme=\"primary\"\r\n                  [label]=\"label\"\r\n                  [removeButtonId]=\"`${id}-select-chip-remove-${i}`\"\r\n                  (removeEvent)=\"removeChip($event)\"\r\n                />\r\n              }\r\n              @if (hiddenChipsCount()) {\r\n                <sof-chip \r\n                  theme=\"primary\"\r\n                  [label]=\"`+${hiddenChipsCount()}`\"\r\n                  [canRemove]=\"false\"\r\n                  m-l-auto\r\n                />\r\n              }\r\n            }\r\n          } @else {\r\n            <span class=\"body1\" [class.text-medium-emphasis]=\"selectedLabelsMultiple()[0] === label\">\r\n              {{selectedLabelsMultiple()[0] | translate}}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <span class=\"body1\" [class.text-medium-emphasis]=\"selectedLabelSingle() === label\">\r\n          {{selectedLabelSingle() | translate}}\r\n        </span>\r\n      }\r\n      @if (errorMessage()?.length && !expanded()) {\r\n        <i class=\"ph-bold ph-warning-circle error-icon color-error m-l-auto\"></i>\r\n      }\r\n      <i \r\n        class=\"ph-bold ph-caret-{{expanded() ? 'up':'down'}} arrow-icon\" \r\n        [class.m-l-auto]=\"!errorMessage()?.length || (errorMessage()?.length && expanded())\">\r\n      </i>\r\n    </button>\r\n    @if (expanded()) {\r\n      <div \r\n        class=\"options-list-wrap\"\r\n        [class.white-bg]=\"useWhiteBackground\"\r\n        [class.has-error]=\"errorMessage()?.length\">\r\n        <ul \r\n          #listboxRef \r\n          [id]=\"id + '-listbox'\" \r\n          class=\"options-list\"\r\n          role=\"listbox\" \r\n          tabindex=\"0\"\r\n          [attr.aria-multiselectable]=\"multiple\">\r\n          @if (multiple && showSelectAll) {\r\n            <li \r\n              [id]=\"id + '-list-option-all'\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isAllSelected()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"activeIndex === 0\"\r\n              [class.selected]=\"isAllSelected()\" \r\n              [class.disabled]=\"isMaxSelectionsReached() && !isAllSelected()\"\r\n              (click)=\"onOptionClick('ALL')\">\r\n              @if (isAllSelected()) {\r\n                <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n              } @else if (hasSelectedItems()) {\r\n                <ng-container *ngTemplateOutlet=\"selectAllIndeterminateSvg\"></ng-container>\r\n              } @else {\r\n                <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis\">\r\n                {{'armature.select.all' | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n          @for (option of readOptions(); let i = $index; track i) {\r\n            <li \r\n              [id]=\"`${id}-list-option-${i}`\"\r\n              role=\"option\" \r\n              [attr.aria-selected]=\"isSelected(option.value)()\" \r\n              class=\"p-v-8 p-r-16 p-l-12\"\r\n              [class.active]=\"i + ((multiple && showSelectAll) ? 1 : 0) === activeIndex\"\r\n              [class.selected]=\"isSelected(option.value)()\"\r\n              [class.disabled]=\"isOptionDisabled(option)()\"\r\n              (click)=\"onOptionClick(option)\">\r\n              @if (multiple) {\r\n                @if (isSelected(option.value)()) {\r\n                  @if (option.isDisabled) {\r\n                    <ng-container *ngTemplateOutlet=\"checkedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"checkedSvg\"></ng-container>\r\n                  }\r\n                } @else {\r\n                  @if (isOptionDisabled(option)()) {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedDisabledSvg\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngTemplateOutlet=\"uncheckedSvg\"></ng-container>\r\n                  }\r\n                }\r\n              }\r\n              <span class=\"option-label body1 text-high-emphasis text-overflow-ellipsis\">\r\n                {{option.label | translate}}\r\n              </span>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (errorMessage()?.length) {\r\n    <span class=\"error-message color-error body3 fw-500\">\r\n      {{errorMessage() | translate}}\r\n    </span>\r\n  } @else {\r\n    @if (helpText?.length) {\r\n      <span \r\n        class=\"help-message body3 fw-400 text-medium-emphasis\"\r\n        [class.text-low-emphasis]=\"isDisabled\">\r\n        {{helpText | translate}}\r\n      </span>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #checkedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_1718)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"var(--primary-color-500-parts, #146EF6)\" stroke=\"var(--primary-color-500-parts, #146EF6)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12.75L10.5 15L15.75 9.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_1718\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #checkedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_5591)\">\r\n      <path d=\"M19.6055 3C20.5594 3 21.333 3.77359 21.333 4.72754V19.2725C21.333 20.2264 20.5594 21 19.6055 21H5.06055C4.1066 21 3.33301 20.2264 3.33301 19.2725V4.72754C3.33301 3.77359 4.1066 3 5.06055 3H19.6055Z\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.58301 12.75L10.833 15L16.083 9.75\" stroke=\"var(--neutral-color-300-parts, #B0B0B0)\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_5591\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.333008)\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19053_3289)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"var(--neutral-color-500-parts, #515151)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19053_3289\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #uncheckedDisabledSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3763)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" stroke=\"#515151\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3763\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #selectAllIndeterminateSvg>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n    <g clip-path=\"url(#clip0_19094_3054)\">\r\n      <path d=\"M19.2725 3C20.2264 3 21 3.77359 21 4.72754V19.2725C21 20.2264 20.2264 21 19.2725 21H4.72754C3.77359 21 3 20.2264 3 19.2725V4.72754C3 3.77359 3.77359 3 4.72754 3H19.2725Z\" fill=\"#146EF6\" stroke=\"#146EF6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M8.25 12H15.75\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"square\" stroke-linejoin=\"round\"/>\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_19094_3054\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:root{--primary-color-50-parts: #f3f5ff;--primary-color-100-parts: #E8EBFF;--primary-color-200-parts: #B5BEFF;--primary-color-300-parts: #687AFF;--primary-color-400-parts: #455BFF;--primary-color-500-parts: #1C37FF;--primary-color-600-parts: #001EFC;--primary-color-700-parts: #001ADE;--primary-color-800-parts: #0018C9;--primary-color-900-parts: #0016B5;--primary-color-A50-parts: rgba(28, 55, 255, .04);--primary-color-A100-parts: rgba(28, 55, 255, .08);--primary-color-A200-parts: rgba(28, 55, 255, .16);--primary-color-A300-parts: rgba(28, 55, 255, .24);--primary-color-A400-parts: rgba(28, 55, 255, .32);--primary-color-A500-parts: rgba(28, 55, 255, .4);--primary-color-A600-parts: rgba(28, 55, 255, .48);--primary-color-A700-parts: rgba(28, 55, 255, .56);--primary-color-A800-parts: rgba(28, 55, 255, .64);--primary-color-A900-parts: rgba(28, 55, 255, .72);--primary-color-contrast-50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-400-parts: rgba(255, 255, 255, 1);--primary-color-contrast-500-parts: rgba(255, 255, 255, 1);--primary-color-contrast-600-parts: rgba(255, 255, 255, 1);--primary-color-contrast-700-parts: rgba(255, 255, 255, 1);--primary-color-contrast-800-parts: rgba(255, 255, 255, 1);--primary-color-contrast-900-parts: rgba(255, 255, 255, 1);--primary-color-contrast-A50-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A100-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A200-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A300-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A400-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A500-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A600-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A700-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A800-parts: rgba(0, 0, 0, .87);--primary-color-contrast-A900-parts: rgba(0, 0, 0, .87);--primary-color-50-parts-rgb: 243, 245, 255;--primary-color-100-parts-rgb: 232, 235, 255;--primary-color-200-parts-rgb: 181, 190, 255;--primary-color-300-parts-rgb: 104, 122, 255;--primary-color-400-parts-rgb: 69, 91, 255;--primary-color-500-parts-rgb: 28, 55, 255;--primary-color-600-parts-rgb: 0, 30, 252;--primary-color-700-parts-rgb: 0, 26, 222;--primary-color-800-parts-rgb: 0, 24, 201;--primary-color-900-parts-rgb: 0, 22, 181;--accent-color-50-parts: #e0f2f1;--accent-color-100-parts: #b2dfdb;--accent-color-200-parts: #80cbc4;--accent-color-300-parts: #4db6ac;--accent-color-400-parts: #26a69a;--accent-color-500-parts: #009688;--accent-color-600-parts: #00897b;--accent-color-700-parts: #00796b;--accent-color-800-parts: #00695c;--accent-color-900-parts: #004d40;--accent-color-A50-parts: rgba(0, 150, 136, .04);--accent-color-A100-parts: rgba(0, 150, 136, .08);--accent-color-A200-parts: rgba(0, 150, 136, .16);--accent-color-A300-parts: rgba(0, 150, 136, .24);--accent-color-A400-parts: rgba(0, 150, 136, .32);--accent-color-A500-parts: rgba(0, 150, 136, .4);--accent-color-A600-parts: rgba(0, 150, 136, .48);--accent-color-A700-parts: rgba(0, 150, 136, .56);--accent-color-A800-parts: rgba(0, 150, 136, .64);--accent-color-A900-parts: rgba(0, 150, 136, .72);--accent-color-contrast-50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-500-parts: rgba(255, 255, 255, 1);--accent-color-contrast-600-parts: rgba(255, 255, 255, 1);--accent-color-contrast-700-parts: rgba(255, 255, 255, 1);--accent-color-contrast-800-parts: rgba(255, 255, 255, 1);--accent-color-contrast-900-parts: rgba(255, 255, 255, 1);--accent-color-contrast-A50-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A100-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A200-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A300-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A400-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A500-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A600-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A700-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A800-parts: rgba(0, 0, 0, .87);--accent-color-contrast-A900-parts: rgba(0, 0, 0, .87);--accent-color-50-parts-rgb: 224, 242, 241;--accent-color-100-parts-rgb: 178, 223, 219;--accent-color-200-parts-rgb: 128, 203, 196;--accent-color-300-parts-rgb: 77, 182, 172;--accent-color-400-parts-rgb: 38, 166, 154;--accent-color-500-parts-rgb: 0, 150, 136;--accent-color-600-parts-rgb: 0, 137, 123;--accent-color-700-parts-rgb: 0, 121, 107;--accent-color-800-parts-rgb: 0, 105, 92;--accent-color-900-parts-rgb: 0, 77, 64;--warn-color-50-parts: #fceee3;--warn-color-100-parts: #f8d4b9;--warn-color-200-parts: #f4b78b;--warn-color-300-parts: #ef9a5d;--warn-color-400-parts: #eb843a;--warn-color-500-parts: #e86e17;--warn-color-600-parts: #e56614;--warn-color-700-parts: #e25b11;--warn-color-800-parts: #de510d;--warn-color-900-parts: #d83f07;--warn-color-A50-parts: rgba(232, 110, 23, .04);--warn-color-A100-parts: rgba(232, 110, 23, .08);--warn-color-A200-parts: rgba(232, 110, 23, .16);--warn-color-A300-parts: rgba(232, 110, 23, .24);--warn-color-A400-parts: rgba(232, 110, 23, .32);--warn-color-A500-parts: rgba(232, 110, 23, .4);--warn-color-A600-parts: rgba(232, 110, 23, .48);--warn-color-A700-parts: rgba(232, 110, 23, .56);--warn-color-A800-parts: rgba(232, 110, 23, .64);--warn-color-A900-parts: rgba(232, 110, 23, .72);--warn-color-contrast-50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-900-parts: rgba(255, 255, 255, 1);--warn-color-contrast-A50-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A100-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A200-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A300-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A400-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A500-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A600-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A700-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A800-parts: rgba(0, 0, 0, .87);--warn-color-contrast-A900-parts: rgba(0, 0, 0, .87);--warn-color-50-parts-rgb: 252, 238, 227;--warn-color-100-parts-rgb: 248, 212, 185;--warn-color-200-parts-rgb: 244, 183, 139;--warn-color-300-parts-rgb: 239, 154, 93;--warn-color-400-parts-rgb: 235, 132, 58;--warn-color-500-parts-rgb: 232, 110, 23;--warn-color-600-parts-rgb: 229, 102, 20;--warn-color-700-parts-rgb: 226, 91, 17;--warn-color-800-parts-rgb: 222, 81, 13;--warn-color-900-parts-rgb: 216, 63, 7;--info-color-50-parts: #F3F5FF;--info-color-100-parts: #E8EBFF;--info-color-200-parts: #B5BEFF;--info-color-300-parts: #687AFF;--info-color-400-parts: #455BFF;--info-color-500-parts: #1C37FF;--info-color-600-parts: #001EFC;--info-color-700-parts: #001ADE;--info-color-800-parts: #0018C9;--info-color-900-parts: #0016B5;--info-color-A50-parts: rgba(28, 55, 255, .04);--info-color-A100-parts: rgba(28, 55, 255, .08);--info-color-A200-parts: rgba(28, 55, 255, .16);--info-color-A300-parts: rgba(28, 55, 255, .24);--info-color-A400-parts: rgba(28, 55, 255, .32);--info-color-A500-parts: rgba(28, 55, 255, .4);--info-color-A600-parts: rgba(28, 55, 255, .48);--info-color-A700-parts: rgba(28, 55, 255, .56);--info-color-A800-parts: rgba(28, 55, 255, .64);--info-color-A900-parts: rgba(28, 55, 255, .72);--info-color-contrast-50-parts: rgba(0, 0, 0, .87);--info-color-contrast-100-parts: rgba(0, 0, 0, .87);--info-color-contrast-200-parts: rgba(0, 0, 0, .87);--info-color-contrast-300-parts: rgba(0, 0, 0, .87);--info-color-contrast-400-parts: rgba(255, 255, 255, 1);--info-color-contrast-500-parts: rgba(255, 255, 255, 1);--info-color-contrast-600-parts: rgba(255, 255, 255, 1);--info-color-contrast-700-parts: rgba(255, 255, 255, 1);--info-color-contrast-800-parts: rgba(255, 255, 255, 1);--info-color-contrast-900-parts: rgba(255, 255, 255, 1);--info-color-contrast-A50-parts: rgba(0, 0, 0, .87);--info-color-contrast-A100-parts: rgba(0, 0, 0, .87);--info-color-contrast-A200-parts: rgba(0, 0, 0, .87);--info-color-contrast-A300-parts: rgba(0, 0, 0, .87);--info-color-contrast-A400-parts: rgba(0, 0, 0, .87);--info-color-contrast-A500-parts: rgba(0, 0, 0, .87);--info-color-contrast-A600-parts: rgba(0, 0, 0, .87);--info-color-contrast-A700-parts: rgba(0, 0, 0, .87);--info-color-contrast-A800-parts: rgba(0, 0, 0, .87);--info-color-contrast-A900-parts: rgba(0, 0, 0, .87);--info-color-50-parts-rgb: 243, 245, 255;--info-color-100-parts-rgb: 232, 235, 255;--info-color-200-parts-rgb: 181, 190, 255;--info-color-300-parts-rgb: 104, 122, 255;--info-color-400-parts-rgb: 69, 91, 255;--info-color-500-parts-rgb: 28, 55, 255;--info-color-600-parts-rgb: 0, 30, 252;--info-color-700-parts-rgb: 0, 26, 222;--info-color-800-parts-rgb: 0, 24, 201;--info-color-900-parts-rgb: 0, 22, 181;--success-color-50-parts: #e7f0e6;--success-color-100-parts: #c4dac1;--success-color-200-parts: #9cc198;--success-color-300-parts: #74a86e;--success-color-400-parts: #57954f;--success-color-500-parts: #398230;--success-color-600-parts: #337a2b;--success-color-700-parts: #2c6f24;--success-color-800-parts: #24651e;--success-color-900-parts: #175213;--success-color-A50-parts: rgba(57, 130, 48, .04);--success-color-A100-parts: rgba(57, 130, 48, .08);--success-color-A200-parts: rgba(57, 130, 48, .16);--success-color-A300-parts: rgba(57, 130, 48, .24);--success-color-A400-parts: rgba(57, 130, 48, .32);--success-color-A500-parts: rgba(57, 130, 48, .4);--success-color-A600-parts: rgba(57, 130, 48, .48);--success-color-A700-parts: rgba(57, 130, 48, .56);--success-color-A800-parts: rgba(57, 130, 48, .64);--success-color-A900-parts: rgba(57, 130, 48, .72);--success-color-contrast-50-parts: rgba(0, 0, 0, .87);--success-color-contrast-100-parts: rgba(0, 0, 0, .87);--success-color-contrast-200-parts: rgba(0, 0, 0, .87);--success-color-contrast-300-parts: rgba(0, 0, 0, .87);--success-color-contrast-400-parts: rgba(0, 0, 0, .87);--success-color-contrast-500-parts: rgba(255, 255, 255, 1);--success-color-contrast-600-parts: rgba(255, 255, 255, 1);--success-color-contrast-700-parts: rgba(255, 255, 255, 1);--success-color-contrast-800-parts: rgba(255, 255, 255, 1);--success-color-contrast-900-parts: rgba(255, 255, 255, 1);--success-color-contrast-A50-parts: rgba(0, 0, 0, .87);--success-color-contrast-A100-parts: rgba(0, 0, 0, .87);--success-color-contrast-A200-parts: rgba(0, 0, 0, .87);--success-color-contrast-A300-parts: rgba(0, 0, 0, .87);--success-color-contrast-A400-parts: rgba(0, 0, 0, .87);--success-color-contrast-A500-parts: rgba(0, 0, 0, .87);--success-color-contrast-A600-parts: rgba(0, 0, 0, .87);--success-color-contrast-A700-parts: rgba(0, 0, 0, .87);--success-color-contrast-A800-parts: rgba(0, 0, 0, .87);--success-color-contrast-A900-parts: rgba(0, 0, 0, .87);--success-color-50-parts-rgb: 231, 240, 230;--success-color-100-parts-rgb: 196, 218, 193;--success-color-200-parts-rgb: 156, 193, 152;--success-color-300-parts-rgb: 116, 168, 110;--success-color-400-parts-rgb: 87, 149, 79;--success-color-500-parts-rgb: 57, 130, 48;--success-color-600-parts-rgb: 51, 122, 43;--success-color-700-parts-rgb: 44, 111, 36;--success-color-800-parts-rgb: 36, 101, 30;--success-color-900-parts-rgb: 23, 82, 19;--error-color-50-parts: #fae5e4;--error-color-100-parts: #f3bdba;--error-color-200-parts: #eb928d;--error-color-300-parts: #e3665f;--error-color-400-parts: #dd453c;--error-color-500-parts: #d7241a;--error-color-600-parts: #d32017;--error-color-700-parts: #cd1b13;--error-color-800-parts: #c7160f;--error-color-900-parts: #be0d08;--error-color-A50-parts: rgba(215, 36, 26, .04);--error-color-A100-parts: rgba(215, 36, 26, .08);--error-color-A200-parts: rgba(215, 36, 26, .16);--error-color-A300-parts: rgba(215, 36, 26, .24);--error-color-A400-parts: rgba(215, 36, 26, .32);--error-color-A500-parts: rgba(215, 36, 26, .4);--error-color-A600-parts: rgba(215, 36, 26, .48);--error-color-A700-parts: rgba(215, 36, 26, .56);--error-color-A800-parts: rgba(215, 36, 26, .64);--error-color-A900-parts: rgba(215, 36, 26, .72);--error-color-contrast-50-parts: rgba(0, 0, 0, .87);--error-color-contrast-100-parts: rgba(0, 0, 0, .87);--error-color-contrast-200-parts: rgba(0, 0, 0, .87);--error-color-contrast-300-parts: rgba(0, 0, 0, .87);--error-color-contrast-400-parts: rgba(0, 0, 0, .87);--error-color-contrast-500-parts: rgba(255, 255, 255, 1);--error-color-contrast-600-parts: rgba(255, 255, 255, 1);--error-color-contrast-700-parts: rgba(255, 255, 255, 1);--error-color-contrast-800-parts: rgba(255, 255, 255, 1);--error-color-contrast-900-parts: rgba(255, 255, 255, 1);--error-color-contrast-A50-parts: rgba(0, 0, 0, .87);--error-color-contrast-A100-parts: rgba(0, 0, 0, .87);--error-color-contrast-A200-parts: rgba(0, 0, 0, .87);--error-color-contrast-A300-parts: rgba(0, 0, 0, .87);--error-color-contrast-A400-parts: rgba(0, 0, 0, .87);--error-color-contrast-A500-parts: rgba(0, 0, 0, .87);--error-color-contrast-A600-parts: rgba(0, 0, 0, .87);--error-color-contrast-A700-parts: rgba(0, 0, 0, .87);--error-color-contrast-A800-parts: rgba(0, 0, 0, .87);--error-color-contrast-A900-parts: rgba(0, 0, 0, .87);--error-color-50-parts-rgb: 250, 229, 228;--error-color-100-parts-rgb: 243, 189, 186;--error-color-200-parts-rgb: 235, 146, 141;--error-color-300-parts-rgb: 227, 102, 95;--error-color-400-parts-rgb: 221, 69, 60;--error-color-500-parts-rgb: 215, 36, 26;--error-color-600-parts-rgb: 211, 32, 23;--error-color-700-parts-rgb: 205, 27, 19;--error-color-800-parts-rgb: 199, 22, 15;--error-color-900-parts-rgb: 190, 13, 8;--neutral-color-50-parts: #e9e9e9;--neutral-color-100-parts: #dddddd;--neutral-color-200-parts: #cccccc;--neutral-color-300-parts: #b0b0b0;--neutral-color-400-parts: #909090;--neutral-color-500-parts: #515151;--neutral-color-600-parts: #424242;--neutral-color-700-parts: #333333;--neutral-color-800-parts: #212121;--neutral-color-900-parts: #141414;--neutral-color-A50-parts: rgba(81, 81, 81, .04);--neutral-color-A100-parts: rgba(81, 81, 81, .08);--neutral-color-A200-parts: rgba(81, 81, 81, .16);--neutral-color-A300-parts: rgba(81, 81, 81, .24);--neutral-color-A400-parts: rgba(81, 81, 81, .32);--neutral-color-A500-parts: rgba(81, 81, 81, .4);--neutral-color-A600-parts: rgba(81, 81, 81, .48);--neutral-color-A700-parts: rgba(81, 81, 81, .56);--neutral-color-A800-parts: rgba(81, 81, 81, .64);--neutral-color-A900-parts: rgba(81, 81, 81, .72);--neutral-color-contrast-50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-400-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-500-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-600-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-700-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-800-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-900-parts: rgba(255, 255, 255, 1);--neutral-color-contrast-A50-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A100-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A200-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A300-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A400-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A500-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A600-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A700-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A800-parts: rgba(0, 0, 0, .87);--neutral-color-contrast-A900-parts: rgba(0, 0, 0, .87);--neutral-color-50-parts-rgb: 233, 233, 233;--neutral-color-100-parts-rgb: 221, 221, 221;--neutral-color-200-parts-rgb: 204, 204, 204;--neutral-color-300-parts-rgb: 176, 176, 176;--neutral-color-400-parts-rgb: 144, 144, 144;--neutral-color-500-parts-rgb: 81, 81, 81;--neutral-color-600-parts-rgb: 66, 66, 66;--neutral-color-700-parts-rgb: 51, 51, 51;--neutral-color-800-parts-rgb: 33, 33, 33;--neutral-color-900-parts-rgb: 20, 20, 20;--help-color-50-parts: #EFE3FE;--help-color-100-parts: #E0CAFD;--help-color-200-parts: #C194FB;--help-color-300-parts: #994FF8;--help-color-400-parts: #8831F7;--help-color-500-parts: #7714F6;--help-color-600-parts: #6809E3;--help-color-700-parts: #5B08C5;--help-color-800-parts: #4D06A8;--help-color-900-parts: #40058A;--help-color-A50-parts: rgba(119, 20, 246, .04);--help-color-A100-parts: rgba(119, 20, 246, .08);--help-color-A200-parts: rgba(119, 20, 246, .16);--help-color-A300-parts: rgba(119, 20, 246, .24);--help-color-A400-parts: rgba(119, 20, 246, .32);--help-color-A500-parts: rgba(119, 20, 246, .4);--help-color-A600-parts: rgba(119, 20, 246, .48);--help-color-A700-parts: rgba(119, 20, 246, .56);--help-color-A800-parts: rgba(119, 20, 246, .64);--help-color-A900-parts: rgba(119, 20, 246, .72);--help-color-contrast-50-parts: rgba(0, 0, 0, .87);--help-color-contrast-100-parts: rgba(0, 0, 0, .87);--help-color-contrast-200-parts: rgba(0, 0, 0, .87);--help-color-contrast-300-parts: rgba(255, 255, 255, 1);--help-color-contrast-400-parts: rgba(255, 255, 255, 1);--help-color-contrast-500-parts: rgba(255, 255, 255, 1);--help-color-contrast-600-parts: rgba(255, 255, 255, 1);--help-color-contrast-700-parts: rgba(255, 255, 255, 1);--help-color-contrast-800-parts: rgba(255, 255, 255, 1);--help-color-contrast-900-parts: rgba(255, 255, 255, 1);--help-color-contrast-A50-parts: rgba(0, 0, 0, .87);--help-color-contrast-A100-parts: rgba(0, 0, 0, .87);--help-color-contrast-A200-parts: rgba(0, 0, 0, .87);--help-color-contrast-A300-parts: rgba(0, 0, 0, .87);--help-color-contrast-A400-parts: rgba(0, 0, 0, .87);--help-color-contrast-A500-parts: rgba(0, 0, 0, .87);--help-color-contrast-A600-parts: rgba(0, 0, 0, .87);--help-color-contrast-A700-parts: rgba(0, 0, 0, .87);--help-color-contrast-A800-parts: rgba(0, 0, 0, .87);--help-color-contrast-A900-parts: rgba(0, 0, 0, .87);--help-color-50-parts-rgb: 239, 227, 254;--help-color-100-parts-rgb: 224, 202, 253;--help-color-200-parts-rgb: 193, 148, 251;--help-color-300-parts-rgb: 153, 79, 248;--help-color-400-parts-rgb: 136, 49, 247;--help-color-500-parts-rgb: 119, 20, 246;--help-color-600-parts-rgb: 104, 9, 227;--help-color-700-parts-rgb: 91, 8, 197;--help-color-800-parts-rgb: 77, 6, 168;--help-color-900-parts-rgb: 64, 5, 138}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes floatingLabel{0%{transform:translate(16px,32px);opacity:0}to{transform:translate(0);opacity:1}}:host{display:inline-block;width:300px;min-width:300px}:host *{box-sizing:border-box}.sof-select-field{display:flex;flex-direction:column;position:relative}.sof-select-field label{position:absolute;top:-22px;display:inline-block;line-height:16px;z-index:1;font-size:12px;padding-left:2px;font-weight:500!important;color:#0009;transform:none;opacity:1;animation:floatingLabel .2s ease-in}.sof-select-field label.has-error{color:var(--error-color-500-parts)}.sof-select-field .relative-container{position:relative}.sof-select-field .relative-container .trigger{min-height:40px;height:40px;max-height:40px;display:flex;align-items:center;gap:8px;width:100%;border-radius:8px;background:#fafafa;border:2px solid transparent;cursor:pointer}.sof-select-field .relative-container .trigger.white-bg{background:#fff}.sof-select-field .relative-container .trigger.expanded{box-shadow:0 10px 10px #0000001a}.sof-select-field .relative-container .trigger:focus{outline:3px solid var(--primary-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger.has-error{border-color:var(--error-color-500-parts)}.sof-select-field .relative-container .trigger.has-error:focus{outline:3px solid var(--error-color-A500-parts);outline-offset:2px}.sof-select-field .relative-container .trigger:disabled{cursor:default}.sof-select-field .relative-container .trigger:disabled span.body1,.sof-select-field .relative-container .trigger:disabled .arrow-icon{color:#00000061}.sof-select-field .relative-container .trigger span.body1{line-height:24px}.sof-select-field .relative-container .trigger .arrow-icon,.sof-select-field .relative-container .trigger .error-icon{pointer-events:none;font-size:20px}.sof-select-field .relative-container .trigger .error-icon{animation:fadeIn .2s ease-in}.sof-select-field .relative-container .trigger .arrow-icon{color:#333}.sof-select-field .relative-container .trigger .multi-chip-container{display:flex;gap:8px;width:100%;overflow:hidden}.sof-select-field .relative-container .options-list-wrap{position:absolute;z-index:10;top:32px;width:100%;padding-top:6px;border-radius:0 0 8px 8px;background:#fafafa}.sof-select-field .relative-container .options-list-wrap.white-bg{background:#fff}.sof-select-field .relative-container .options-list-wrap.has-error{border:2px solid var(--error-color-500-parts);border-top:none}.sof-select-field .relative-container .options-list-wrap:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list{max-height:200px;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;list-style:none;border-radius:0 0 8px 8px;box-shadow:0 10px 10px #0000001a;scrollbar-color:#E9E9E9 transparent}.sof-select-field .relative-container .options-list-wrap .options-list:focus-visible{outline:none}.sof-select-field .relative-container .options-list-wrap .options-list li{cursor:pointer;border-left:4px solid transparent;display:flex;align-items:center;gap:8px;min-height:40px}.sof-select-field .relative-container .options-list-wrap .options-list li:hover,.sof-select-field .relative-container .options-list-wrap .options-list li.active{background-color:var(--neutral-color-A50-parts);border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.selected{font-weight:500;border-color:var(--primary-color-500-parts)}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled{pointer-events:none;cursor:not-allowed;color:#00000061;opacity:.6}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled .option-label{color:#00000061}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled svg{opacity:.5}.sof-select-field .relative-container .options-list-wrap .options-list li.disabled:hover,.sof-select-field .relative-container .options-list-wrap .options-list li.disabled.active{background-color:transparent;border-color:transparent}.sof-select-field .relative-container .options-list-wrap .options-list li svg{pointer-events:none;min-height:24px;min-width:24px;height:24px;width:24px;max-height:24px;max-width:24px}.sof-select-field .relative-container .options-list-wrap .options-list li .option-label{line-height:24px}.sof-select-field .help-message,.sof-select-field .error-message{display:inline-block;line-height:8px;margin-top:8px;padding-left:2px;animation:fadeIn .2s ease-in}.visible-chip{animation:fadeIn .2s ease-in}:host ::ng-deep .sof-chip span{cursor:pointer!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$7.NgControl, decorators: [{
                     type: Self
                 }, {