@crowdfarming/oliva-ds 1.58.0 → 1.59.0

package/fesm2022/crowdfarming-oliva-ds.mjs

@@ -2967,7 +2967,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             args: [{ selector: 'lib-input-label', imports: [CommonModule], template: "<label\n  [for]=\"for()\"\n  class=\"c-input-label\"\n  [ngClass]=\"{\n    'c-input-label--md': size() === 'md',\n    'c-input-label--disabled': disabled()\n  }\"\n>\n  @if (isLoading()) {\n  <div class=\"c-input-label__skeleton\">\n    <span aria-hidden=\"true\"></span>\n  </div>\n  } @else { @if (innerHTML()) {\n  <span [innerHTML]=\"innerHTML()\"></span>\n  } @else {\n  <span>{{ text() }}</span>\n  } @if (!required()) {\n  <span\n    class=\"c-input-label__optional\"\n    [ngClass]=\"{\n      'c-input-label__optional--disabled': disabled()\n    }\"\n    >(Opcional)</span\n  >\n  } }\n</label>\n", styles: [".c-input-label{display:flex;gap:var(--space-component-gap-sm);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing);color:var(--color-core-content-default)}.c-input-label--disabled{color:var(--color-textfield-content-disabled)}.c-input-label--md{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-input-label__optional{color:var(--color-core-content-soft)}.c-input-label__optional--disabled{color:var(--color-textfield-content-disabled)}.c-input-label__skeleton{display:flex;flex-grow:1;align-items:center;width:64px;height:20px}.c-input-label__skeleton span{display:block;width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, .25rem)}\n"] }]
         }] });
 
+const checkboxIcons = {
+    check: `<svg viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.20117 0.396036L3.42117 5.39604L1.79117 3.28604C1.62806 3.07651 1.3884 2.94037 1.12491 2.90755C0.861421 2.87473 0.595687 2.94793 0.386166 3.11104C0.176645 3.27414 0.0404994 3.5138 0.00768058 3.77729C-0.0251383 4.04078 0.0480575 4.30652 0.211166 4.51604L2.64117 7.62604C2.73534 7.74521 2.85542 7.84137 2.99231 7.90722C3.12919 7.97306 3.27927 8.00685 3.43117 8.00604C3.58388 8.00567 3.73449 7.97033 3.87143 7.90272C4.00837 7.83512 4.12801 7.73705 4.22117 7.61604L8.79117 1.61604C8.95295 1.40386 9.02382 1.13611 8.98819 0.871686C8.95255 0.60726 8.81334 0.367818 8.60117 0.206036C8.38899 0.0442537 8.12124 -0.0266167 7.85682 0.00901524C7.59239 0.0446472 7.35295 0.183863 7.19116 0.396036H7.20117Z" fill="currentColor"/>
+</svg>
+`,
+    dash: `<svg viewBox="0 0 10 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0L1 0C0.45 0 0 0.45 0 1C0 1.55 0.45 2 1 2H9C9.55 2 10 1.55 10 1C10 0.45 9.55 0 9 0Z" fill="currentColor"/>
+</svg>
+`,
+};
+
 class CheckboxComponent {
+    sanitizer;
     label = input('');
     state = input('unchecked');
     errorActive = input(false);
@@ -2990,7 +3002,12 @@ class CheckboxComponent {
     isDisabled = computed(() => this.disabled());
     isSkeleton = computed(() => this.skeletonActive());
     isError = computed(() => this.errorActive());
-    constructor() {
+    checkIcon;
+    dashIcon;
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.checkIcon = this.sanitizer.bypassSecurityTrustHtml(checkboxIcons.check);
+        this.dashIcon = this.sanitizer.bypassSecurityTrustHtml(checkboxIcons.dash);
         // Sync internal state with external state input
         effect(() => {
             const externalState = this.state();
@@ -3077,14 +3094,14 @@ class CheckboxComponent {
         ];
         return c.filter(Boolean).join(' ');
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: CheckboxComponent, isStandalone: true, selector: "lib-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, errorActive: { classPropertyName: "errorActive", publicName: "errorActive", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, innerHTML: { classPropertyName: "innerHTML", publicName: "innerHTML", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CheckboxComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n  <div class=\"c-checkbox__input-wrapper\">\n    <input\n      type=\"checkbox\"\n      [id]=\"name()\"\n      [ngClass]=\"inputClasses()\"\n      [checked]=\"isChecked()\"\n      [indeterminate]=\"isIndeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      (change)=\"handleChange($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n    />\n  </div>\n  @if(isSkeleton()) {\n  <div class=\"c-checkbox__label__skeleton\">\n    <span></span>\n  </div>\n  } @else { @if(label() || innerHTML()) {\n  <lib-input-label\n    size=\"md\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [required]=\"true\"\n    [for]=\"name()\"\n    [innerHTML]=\"innerHTML()\"\n  ></lib-input-label>\n  } }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading"] }] });
+        ], ngImport: i0, template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n  <div class=\"c-checkbox__input-wrapper\">\n    <input\n      type=\"checkbox\"\n      [id]=\"name()\"\n      [ngClass]=\"inputClasses()\"\n      [checked]=\"isChecked()\"\n      [indeterminate]=\"isIndeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      (change)=\"handleChange($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n    />\n    @if(isChecked() && !isSkeleton()) {\n      <span\n        class=\"c-checkbox__icon c-checkbox__icon--check\"\n        [innerHTML]=\"checkIcon\"\n      ></span>\n    }\n    @if(isIndeterminate() && !isSkeleton()) {\n      <span\n        class=\"c-checkbox__icon c-checkbox__icon--dash\"\n        [innerHTML]=\"dashIcon\"\n      ></span>\n    }\n  </div>\n  @if(isSkeleton()) {\n  <div class=\"c-checkbox__label__skeleton\">\n    <span></span>\n  </div>\n  } @else { @if(label() || innerHTML()) {\n  <lib-input-label\n    size=\"md\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [required]=\"true\"\n    [for]=\"name()\"\n    [innerHTML]=\"innerHTML()\"\n  ></lib-input-label>\n  } }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center;position:relative}.c-checkbox__icon{position:absolute;inset:0;pointer-events:none;color:var(--color-action-primary-selected-content-default);display:flex;align-items:center;justify-content:center;margin:auto}.c-checkbox__icon--check{width:9px;height:8px}.c-checkbox__icon--dash{width:10px;height:2px}.c-checkbox__icon--check svg,.c-checkbox__icon--dash svg{width:100%;height:100%}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:3px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled+.c-checkbox__icon,.c-checkbox input[type=checkbox]:indeterminate:disabled+.c-checkbox__icon{color:#7d8483;margin:3px}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox--skeleton .c-checkbox__icon{display:none}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -3094,8 +3111,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n  <div class=\"c-checkbox__input-wrapper\">\n    <input\n      type=\"checkbox\"\n      [id]=\"name()\"\n      [ngClass]=\"inputClasses()\"\n      [checked]=\"isChecked()\"\n      [indeterminate]=\"isIndeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      (change)=\"handleChange($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n    />\n  </div>\n  @if(isSkeleton()) {\n  <div class=\"c-checkbox__label__skeleton\">\n    <span></span>\n  </div>\n  } @else { @if(label() || innerHTML()) {\n  <lib-input-label\n    size=\"md\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [required]=\"true\"\n    [for]=\"name()\"\n    [innerHTML]=\"innerHTML()\"\n  ></lib-input-label>\n  } }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"] }]
-        }], ctorParameters: () => [] });
+                    ], template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n  <div class=\"c-checkbox__input-wrapper\">\n    <input\n      type=\"checkbox\"\n      [id]=\"name()\"\n      [ngClass]=\"inputClasses()\"\n      [checked]=\"isChecked()\"\n      [indeterminate]=\"isIndeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      (change)=\"handleChange($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n    />\n    @if(isChecked() && !isSkeleton()) {\n      <span\n        class=\"c-checkbox__icon c-checkbox__icon--check\"\n        [innerHTML]=\"checkIcon\"\n      ></span>\n    }\n    @if(isIndeterminate() && !isSkeleton()) {\n      <span\n        class=\"c-checkbox__icon c-checkbox__icon--dash\"\n        [innerHTML]=\"dashIcon\"\n      ></span>\n    }\n  </div>\n  @if(isSkeleton()) {\n  <div class=\"c-checkbox__label__skeleton\">\n    <span></span>\n  </div>\n  } @else { @if(label() || innerHTML()) {\n  <lib-input-label\n    size=\"md\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [required]=\"true\"\n    [for]=\"name()\"\n    [innerHTML]=\"innerHTML()\"\n  ></lib-input-label>\n  } }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center;position:relative}.c-checkbox__icon{position:absolute;inset:0;pointer-events:none;color:var(--color-action-primary-selected-content-default);display:flex;align-items:center;justify-content:center;margin:auto}.c-checkbox__icon--check{width:9px;height:8px}.c-checkbox__icon--dash{width:10px;height:2px}.c-checkbox__icon--check svg,.c-checkbox__icon--dash svg{width:100%;height:100%}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:3px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled+.c-checkbox__icon,.c-checkbox input[type=checkbox]:indeterminate:disabled+.c-checkbox__icon{color:#7d8483;margin:3px}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox--skeleton .c-checkbox__icon{display:none}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
 
 class HelperTextComponent {
     variant = input('default');
@@ -3231,7 +3248,7 @@ class CheckboxGroupComponent {
         return this.optionsSignal();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: CheckboxGroupComponent, isStandalone: true, selector: "lib-checkbox-group", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, parentLabel: { classPropertyName: "parentLabel", publicName: "parentLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<fieldset class=\"c-checkbox-group\">\n  <lib-input-label\n    *ngIf=\"legend()\"\n    [text]=\"legend()\"\n    [required]=\"required()\"\n    [size]=\"'sm'\"\n  ></lib-input-label>\n\n  <div class=\"c-checkbox-group__options\">\n    <lib-checkbox\n      [label]=\"parentLabel()\"\n      [state]=\"parentState\"\n      (changed)=\"onParentClick()\"\n      class=\"c-checkbox-group__parent\"\n      [skeletonActive]=\"skeletonActive()\"\n      [name]=\"name() + '-parent'\"\n      [value]=\"'parent'\"\n    ></lib-checkbox>\n\n    <div class=\"c-checkbox-group__childrens\">\n      <lib-checkbox\n        *ngFor=\"let option of getOptions(); trackBy: trackByValue\"\n        [label]=\"option.label\"\n        [state]=\"option.checked ? 'checked' : 'unchecked'\"\n        [disabled]=\"option.disabled || false\"\n        (changed)=\"onChildChange(option.value, $event)\"\n        class=\"c-checkbox-group__child\"\n        [skeletonActive]=\"skeletonActive()\"\n        [name]=\"name() + '-' + option.value\"\n        [value]=\"option.value\"\n      ></lib-checkbox>\n    </div>\n    <p *ngIf=\"helperText()\" class=\"c-checkbox-group__helper\">\n      <lib-helper-text variant=\"danger\" [text]=\"helperText()\"></lib-helper-text>\n    </p>\n  </div>\n</fieldset>\n", styles: [".c-checkbox-group{display:flex;flex-direction:column;gap:var(--space-container-gap-sm);border:0;padding:0}.c-checkbox-group__options{display:flex;flex-direction:column;gap:var(--space-container-gap-md);padding-left:6px}.c-checkbox-group__childrens{display:flex;flex-direction:column;gap:var(--space-container-gap-md);padding-left:var(--space-container-padding-md)}.c-checkbox-group__helper{display:flex;align-items:center;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-size);line-height:var(--typography-label-sm-line-height);letter-spacing:var(--typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0;padding-left:var(--space-container-padding-md)}.c-checkbox-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: CheckboxGroupComponent, isStandalone: true, selector: "lib-checkbox-group", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, parentLabel: { classPropertyName: "parentLabel", publicName: "parentLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<fieldset class=\"c-checkbox-group\">\n  <lib-input-label\n    *ngIf=\"legend()\"\n    [text]=\"legend()\"\n    [required]=\"required()\"\n    [size]=\"'sm'\"\n  ></lib-input-label>\n\n  <div\n    class=\"c-checkbox-group__options\"\n    [class.c-checkbox-group__options--no-parent]=\"!parentLabel()\"\n  >\n    <lib-checkbox\n      *ngIf=\"parentLabel()\"\n      [label]=\"parentLabel()\"\n      [state]=\"parentState\"\n      (changed)=\"onParentClick()\"\n      class=\"c-checkbox-group__parent\"\n      [skeletonActive]=\"skeletonActive()\"\n      [name]=\"name() + '-parent'\"\n      [value]=\"'parent'\"\n    ></lib-checkbox>\n\n    <div class=\"c-checkbox-group__childrens\">\n      <lib-checkbox\n        *ngFor=\"let option of getOptions(); trackBy: trackByValue\"\n        [label]=\"option.label\"\n        [state]=\"option.checked ? 'checked' : 'unchecked'\"\n        [disabled]=\"option.disabled || false\"\n        (changed)=\"onChildChange(option.value, $event)\"\n        class=\"c-checkbox-group__child\"\n        [skeletonActive]=\"skeletonActive()\"\n        [name]=\"name() + '-' + option.value\"\n        [value]=\"option.value\"\n      ></lib-checkbox>\n    </div>\n    <p *ngIf=\"helperText()\" class=\"c-checkbox-group__helper\">\n      <lib-helper-text variant=\"danger\" [text]=\"helperText()\"></lib-helper-text>\n    </p>\n  </div>\n</fieldset>\n", styles: [".c-checkbox-group{display:flex;flex-direction:column;gap:var(--space-container-gap-sm);border:0;padding:0}.c-checkbox-group__options{display:flex;flex-direction:column;gap:var(--space-container-gap-md);padding-left:6px}.c-checkbox-group__options--no-parent .c-checkbox-group__childrens,.c-checkbox-group__options--no-parent .c-checkbox-group__helper{padding-left:0}.c-checkbox-group__childrens{display:flex;flex-direction:column;gap:var(--space-container-gap-md);padding-left:var(--space-container-padding-md)}.c-checkbox-group__helper{display:flex;align-items:center;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-size);line-height:var(--typography-label-sm-line-height);letter-spacing:var(--typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0;padding-left:var(--space-container-padding-md)}.c-checkbox-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
             type: Component,
@@ -3240,7 +3257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         CheckboxComponent,
                         InputLabelComponent,
                         HelperTextComponent,
-                    ], template: "<fieldset class=\"c-checkbox-group\">\n  <lib-input-label\n    *ngIf=\"legend()\"\n    [text]=\"legend()\"\n    [required]=\"required()\"\n    [size]=\"'sm'\"\n  ></lib-input-label>\n\n  <div class=\"c-checkbox-group__options\">\n    <lib-checkbox\n      [label]=\"parentLabel()\"\n      [state]=\"parentState\"\n      (changed)=\"onParentClick()\"\n      class=\"c-checkbox-group__parent\"\n      [skeletonActive]=\"skeletonActive()\"\n      [name]=\"name() + '-parent'\"\n      [value]=\"'parent'\"\n    ></lib-checkbox>\n\n    <div class=\"c-checkbox-group__childrens\">\n      <lib-checkbox\n        *ngFor=\"let option of getOptions(); trackBy: trackByValue\"\n        [label]=\"option.label\"\n        [state]=\"option.checked ? 'checked' : 'unchecked'\"\n        [disabled]=\"option.disabled || false\"\n        (changed)=\"onChildChange(option.value, $event)\"\n        class=\"c-checkbox-group__child\"\n        [skeletonActive]=\"skeletonActive()\"\n        [name]=\"name() + '-' + option.value\"\n        [value]=\"option.value\"\n      ></lib-checkbox>\n    </div>\n    <p *ngIf=\"helperText()\" class=\"c-checkbox-group__helper\">\n      <lib-helper-text variant=\"danger\" [text]=\"helperText()\"></lib-helper-text>\n    </p>\n  </div>\n</fieldset>\n", styles: [".c-checkbox-group{display:flex;flex-direction:column;gap:var(--space-container-gap-sm);border:0;padding:0}.c-checkbox-group__options{display:flex;flex-direction:column;gap:var(--space-container-gap-md);padding-left:6px}.c-checkbox-group__childrens{display:flex;flex-direction:column;gap:var(--space-container-gap-md);padding-left:var(--space-container-padding-md)}.c-checkbox-group__helper{display:flex;align-items:center;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-size);line-height:var(--typography-label-sm-line-height);letter-spacing:var(--typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0;padding-left:var(--space-container-padding-md)}.c-checkbox-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+                    ], template: "<fieldset class=\"c-checkbox-group\">\n  <lib-input-label\n    *ngIf=\"legend()\"\n    [text]=\"legend()\"\n    [required]=\"required()\"\n    [size]=\"'sm'\"\n  ></lib-input-label>\n\n  <div\n    class=\"c-checkbox-group__options\"\n    [class.c-checkbox-group__options--no-parent]=\"!parentLabel()\"\n  >\n    <lib-checkbox\n      *ngIf=\"parentLabel()\"\n      [label]=\"parentLabel()\"\n      [state]=\"parentState\"\n      (changed)=\"onParentClick()\"\n      class=\"c-checkbox-group__parent\"\n      [skeletonActive]=\"skeletonActive()\"\n      [name]=\"name() + '-parent'\"\n      [value]=\"'parent'\"\n    ></lib-checkbox>\n\n    <div class=\"c-checkbox-group__childrens\">\n      <lib-checkbox\n        *ngFor=\"let option of getOptions(); trackBy: trackByValue\"\n        [label]=\"option.label\"\n        [state]=\"option.checked ? 'checked' : 'unchecked'\"\n        [disabled]=\"option.disabled || false\"\n        (changed)=\"onChildChange(option.value, $event)\"\n        class=\"c-checkbox-group__child\"\n        [skeletonActive]=\"skeletonActive()\"\n        [name]=\"name() + '-' + option.value\"\n        [value]=\"option.value\"\n      ></lib-checkbox>\n    </div>\n    <p *ngIf=\"helperText()\" class=\"c-checkbox-group__helper\">\n      <lib-helper-text variant=\"danger\" [text]=\"helperText()\"></lib-helper-text>\n    </p>\n  </div>\n</fieldset>\n", styles: [".c-checkbox-group{display:flex;flex-direction:column;gap:var(--space-container-gap-sm);border:0;padding:0}.c-checkbox-group__options{display:flex;flex-direction:column;gap:var(--space-container-gap-md);padding-left:6px}.c-checkbox-group__options--no-parent .c-checkbox-group__childrens,.c-checkbox-group__options--no-parent .c-checkbox-group__helper{padding-left:0}.c-checkbox-group__childrens{display:flex;flex-direction:column;gap:var(--space-container-gap-md);padding-left:var(--space-container-padding-md)}.c-checkbox-group__helper{display:flex;align-items:center;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-size);line-height:var(--typography-label-sm-line-height);letter-spacing:var(--typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0;padding-left:var(--space-container-padding-md)}.c-checkbox-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
         }], ctorParameters: () => [] });
 
 class ChipsComponent {
@@ -3994,8 +4011,8 @@ class DropdownSelectComponent {
     searchBarEnabled = input(false);
     searchPlaceholder = input('Search options...');
     disabled = input(false);
-    cancelButtonText = input('Cancel');
-    acceptButtonText = input('Accept');
+    cancelButtonText = input.required();
+    acceptButtonText = input.required();
     align = input('left');
     direction = input('down');
     appendToBody = input(false);
@@ -4278,7 +4295,7 @@ class DropdownSelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownSelectComponent, isStandalone: true, selector: "lib-dropdown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n  [align]=\"align()\"\n  [direction]=\"direction()\"\n  [appendToBody]=\"appendToBody()\"\n  [disabled]=\"disabled()\"\n  [autoFocus]=\"autoFocus()\"\n  [width]=\"width()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n>\n  <!-- Search Input (if enabled and not multiselect) -->\n  @if (showSearchBar()) {\n  <div class=\"c-dropdown-select__search\">\n    <lib-input-search\n      [placeholder]=\"searchPlaceholder()\"\n      [formControl]=\"searchControl\"\n      size=\"lg\"\n      [fullWidth]=\"true\"\n    ></lib-input-search>\n  </div>\n  }\n\n  <!-- Options List -->\n  <div class=\"c-dropdown-select__options\">\n    @for (group of filteredOptions(); track group.label) {\n    <!-- Option Group -->\n    <div class=\"c-dropdown-select__group\">\n      <!-- Group Label -->\n      @if (group.label) {\n      <div class=\"c-dropdown-select__group-label\">\n        {{ group.label }}\n      </div>\n      }\n      <!-- Group Options -->\n      @for (option of group.options; track option.value) { @if (isMultiSelect())\n      {\n      <!-- For multiselect: use full checkbox component with label -->\n      <div\n        class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n      >\n        <lib-checkbox\n          [label]=\"option.label\"\n          [name]=\"'option-' + option.value\"\n          [value]=\"option.value\"\n          [ariaLabel]=\"'Select ' + option.label\"\n          [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n          [disabled]=\"option.disabled || false\"\n          (changed)=\"onCheckboxChange(option, $event.checked)\"\n        ></lib-checkbox>\n      </div>\n      } @else {\n      <!-- For single select: use button with icon and label -->\n      <button\n        type=\"button\"\n        class=\"c-dropdown-select__option\"\n        [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n        [disabled]=\"option.disabled\"\n        (click)=\"selectOption(option)\"\n      >\n        @if (option.icon) {\n        <lib-icon\n          [name]=\"option.icon\"\n          size=\"lg\"\n          class=\"c-dropdown-select__option-icon\"\n        >\n        </lib-icon>\n        }\n\n        <span class=\"c-dropdown-select__option-label\">\n          {{ option.label }}\n        </span>\n\n        <!-- Check icon for selected option in single select -->\n        @if (isSelected(option)) {\n        <lib-icon\n          name=\"checkcircle-fill\"\n          size=\"lg\"\n          color=\"action-primary-selected-background-default\"\n        >\n        </lib-icon>\n        }\n      </button>\n      } }\n    </div>\n    }\n  </div>\n\n  <!-- Mobile Action Buttons in footer slot -->\n  @if (showMobileActions()) {\n  <div slot=\"footer\" class=\"c-dropdown-select__mobile-actions\">\n    <lib-link-action\n      [text]=\"cancelButtonText()\"\n      variant=\"neutral\"\n      size=\"md\"\n      weight=\"bold\"\n      (clicked)=\"onCancelClick()\"\n    ></lib-link-action>\n    <lib-link-action\n      [text]=\"acceptButtonText()\"\n      variant=\"primary\"\n      size=\"md\"\n      weight=\"bold\"\n      (clicked)=\"onAcceptClick()\"\n    ></lib-link-action>\n  </div>\n  }\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--selected{-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%;height:56px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "isLoading", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "underline", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["disabled", "width", "direction", "align", "appendToBody", "autoFocus"], outputs: ["opened", "closed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownSelectComponent, isStandalone: true, selector: "lib-dropdown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: true, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n  [align]=\"align()\"\n  [direction]=\"direction()\"\n  [appendToBody]=\"appendToBody()\"\n  [disabled]=\"disabled()\"\n  [autoFocus]=\"autoFocus()\"\n  [width]=\"width()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n>\n  <!-- Search Input (if enabled and not multiselect) -->\n  @if (showSearchBar()) {\n  <div class=\"c-dropdown-select__search\">\n    <lib-input-search\n      [placeholder]=\"searchPlaceholder()\"\n      [formControl]=\"searchControl\"\n      size=\"lg\"\n      [fullWidth]=\"true\"\n    ></lib-input-search>\n  </div>\n  }\n\n  <!-- Options List -->\n  <div class=\"c-dropdown-select__options\">\n    @for (group of filteredOptions(); track group.label) {\n    <!-- Option Group -->\n    <div class=\"c-dropdown-select__group\">\n      <!-- Group Label -->\n      @if (group.label) {\n      <div class=\"c-dropdown-select__group-label\">\n        {{ group.label }}\n      </div>\n      }\n      <!-- Group Options -->\n      @for (option of group.options; track option.value) { @if (isMultiSelect())\n      {\n      <!-- For multiselect: use full checkbox component with label -->\n      <div\n        class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n      >\n        <lib-checkbox\n          [label]=\"option.label\"\n          [name]=\"'option-' + option.value\"\n          [value]=\"option.value\"\n          [ariaLabel]=\"'Select ' + option.label\"\n          [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n          [disabled]=\"option.disabled || false\"\n          (changed)=\"onCheckboxChange(option, $event.checked)\"\n        ></lib-checkbox>\n      </div>\n      } @else {\n      <!-- For single select: use button with icon and label -->\n      <button\n        type=\"button\"\n        class=\"c-dropdown-select__option\"\n        [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n        [disabled]=\"option.disabled\"\n        (click)=\"selectOption(option)\"\n      >\n        @if (option.icon) {\n        <lib-icon\n          [name]=\"option.icon\"\n          size=\"lg\"\n          class=\"c-dropdown-select__option-icon\"\n        >\n        </lib-icon>\n        }\n\n        <span class=\"c-dropdown-select__option-label\">\n          {{ option.label }}\n        </span>\n\n        <!-- Check icon for selected option in single select -->\n        @if (isSelected(option)) {\n        <lib-icon\n          name=\"checkcircle-fill\"\n          size=\"lg\"\n          color=\"action-primary-selected-background-default\"\n        >\n        </lib-icon>\n        }\n      </button>\n      } }\n    </div>\n    }\n  </div>\n\n  <!-- Mobile Action Buttons in footer slot -->\n  @if (showMobileActions()) {\n  <div slot=\"footer\" class=\"c-dropdown-select__mobile-actions\">\n    <lib-link-action\n      [text]=\"cancelButtonText()\"\n      variant=\"neutral\"\n      size=\"md\"\n      weight=\"bold\"\n      (clicked)=\"onCancelClick()\"\n    ></lib-link-action>\n    <lib-link-action\n      [text]=\"acceptButtonText()\"\n      variant=\"primary\"\n      size=\"md\"\n      weight=\"bold\"\n      (clicked)=\"onAcceptClick()\"\n    ></lib-link-action>\n  </div>\n  }\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--selected{-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%;height:56px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "isLoading", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "underline", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["disabled", "width", "direction", "align", "appendToBody", "autoFocus"], outputs: ["opened", "closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, decorators: [{
             type: Component,
@@ -6022,6 +6039,8 @@ class SelectComponent {
     direction = input('down');
     appendToBody = input(false);
     autoFocus = input(true);
+    cancelButtonText = input.required();
+    acceptButtonText = input.required();
     valueChange = output();
     // Private signals
     _selectedOptions = signal([]);
@@ -6255,13 +6274,13 @@ class SelectComponent {
         this.onChange(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "lib-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "lib-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: true, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"c-select\"\n  [class.c-select--full-width]=\"fullWidth()\"\n  [class.c-select--disabled]=\"disabled()\"\n  [class.c-select--error]=\"isError()\"\n  [class.c-select--size-sm]=\"size() === 'sm'\"\n  [class.c-select--size-md]=\"size() === 'md'\"\n  [class.c-select--size-lg]=\"size() === 'lg'\"\n>\n  <!-- Label -->\n  @if (label()) {\n  <lib-input-label\n    size=\"sm\"\n    [required]=\"required()\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [isLoading]=\"isLoading()\"\n  ></lib-input-label>\n  }\n\n  <!-- Select Container -->\n  <div class=\"c-select__container\">\n    <!-- Select Trigger -->\n    <button\n      type=\"button\"\n      class=\"c-select__trigger\"\n      [class.is-loading]=\"isLoading()\"\n      [disabled]=\"disabled() || isLoading()\"\n      [libDropdownSelectTriggerFor]=\"dropdownSelect\"\n      [attr.aria-haspopup]=\"true\"\n      [attr.aria-label]=\"placeholder()\"\n    >\n      <!-- Selected Content Display -->\n      <div class=\"c-select__content\">\n        @if (isMultiSelect() && hasSelection()) {\n        <!-- Multi-select: Show tags -->\n        <div class=\"c-select__tags\">\n          @for (option of visibleTags(); track option.value) {\n          <lib-tag\n            [text]=\"option.label\"\n            variant=\"neutral\"\n            size=\"xs\"\n            [closeActive]=\"true\"\n            [showBadge]=\"false\"\n            (closeEvent)=\"removeOption(option)\"\n          >\n          </lib-tag>\n          } @if (hiddenTagsCount() > 0) {\n          <span class=\"c-select__counter\"> +{{ hiddenTagsCount() }} </span>\n          }\n        </div>\n        } @else {\n        <!-- Single select: Show text -->\n        <span\n          class=\"c-select__text\"\n          [class.c-select__text--placeholder]=\"!hasSelection()\"\n        >\n          <!-- Icon for single select -->\n          @if (selectedOption()?.icon && !isLoading()) {\n          <lib-icon\n            [name]=\"selectedOption()?.icon!\"\n            [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n            [disabled]=\"disabled() && hasSelection()\"\n          >\n          </lib-icon>\n          }\n          <span class=\"c-select__text-value\">\n            {{ isLoading() ? '' : displayText() }}\n          </span>\n        </span>\n        }\n      </div>\n\n      <!-- Caret Icon -->\n      <lib-icon\n        name=\"caretdown-regular\"\n        [color]=\"\n          disabled()\n            ? 'textfield-content-disabled'\n            : 'textfield-content-default'\n        \"\n        size=\"md\"\n      >\n      </lib-icon>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div class=\"c-select__dropdown\">\n      <lib-dropdown-select\n        #dropdownSelect\n        [options]=\"filteredOptions()\"\n        [variant]=\"variant()\"\n        [selectedValues]=\"getSelectedValues()\"\n        [searchBarEnabled]=\"searchBarEnabled()\"\n        [searchPlaceholder]=\"searchPlaceholder()\"\n        [disabled]=\"disabled()\"\n        [align]=\"align()\"\n        [direction]=\"direction()\"\n        [appendToBody]=\"appendToBody()\"\n        [autoFocus]=\"autoFocus()\"\n        [width]=\"'stretch'\"\n        (searchChanged)=\"onDropdownSearchChanged($event)\"\n        (valueChange)=\"onDropdownValueChange($event)\"\n      ></lib-dropdown-select>\n    </div>\n  </div>\n\n  <!-- Helper Text -->\n  @if (helperText() && !isError()) {\n  <lib-helper-text\n    [text]=\"helperText()\"\n    [disabled]=\"disabled()\"\n    [isLoading]=\"isLoading()\"\n  ></lib-helper-text>\n  }\n\n  <!-- Error Text -->\n  @if (errorText() && isError()) {\n  <lib-helper-text\n    variant=\"danger\"\n    [text]=\"errorText()\"\n    [disabled]=\"disabled()\"\n    [isLoading]=\"isLoading()\"\n  ></lib-helper-text>\n  }\n</div>\n", styles: [".c-select{max-width:300px;display:flex;flex-direction:column;position:relative;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-select--size-sm .c-select__trigger{min-height:32px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg)}.c-select--full-width{max-width:100%}.c-select--error .c-select__trigger{border-color:var(--color-textfield-border-error)}.c-select--disabled .c-select__trigger{cursor:not-allowed;border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-select--disabled .c-select__text--placeholder,.c-select--disabled .c-select__text{color:var(--color-textfield-content-disabled)}.c-select__required{color:var(--color-feedback-danger-default);margin-left:2px}.c-select__container{position:relative}.c-select__trigger{--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg);display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);border-radius:var(--size-textfield-border-radius);cursor:pointer;text-align:left;padding:var(--select-padding-y) var(--select-padding-x)}.c-select__trigger:hover:not(:disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-select__trigger:focus-visible:not(:disabled){border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--select-padding-y) - 1px) calc(var(--select-padding-x) - 1px);box-shadow:none;outline:none}.c-select__trigger.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-select__content{flex:1;display:flex;align-items:center;min-width:0}.c-select__text{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-textfield-content-default);display:flex;align-items:center;gap:var(--space-container-gap-xs);min-width:0}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.c-select__text-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.c-select__tags{display:flex;flex-wrap:nowrap;gap:var(--space-component-gap-sm);align-items:center;min-width:0;overflow:hidden}.c-select__counter{background-color:var(--color-core-background-soft);color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }, { kind: "component", type: DropdownSelectComponent, selector: "lib-dropdown-select", inputs: ["options", "variant", "selectedValues", "searchBarEnabled", "searchPlaceholder", "disabled", "cancelButtonText", "acceptButtonText", "align", "direction", "appendToBody", "autoFocus", "width"], outputs: ["optionSelected", "optionDeselected", "searchChanged", "valueChange", "cancelClicked", "acceptClicked"] }, { kind: "directive", type: DropdownSelectTriggerDirective, selector: "[libDropdownSelectTriggerFor]", inputs: ["libDropdownSelectTriggerFor"] }] });
+        ], ngImport: i0, template: "<div\n  class=\"c-select\"\n  [class.c-select--full-width]=\"fullWidth()\"\n  [class.c-select--disabled]=\"disabled()\"\n  [class.c-select--error]=\"isError()\"\n  [class.c-select--size-sm]=\"size() === 'sm'\"\n  [class.c-select--size-md]=\"size() === 'md'\"\n  [class.c-select--size-lg]=\"size() === 'lg'\"\n>\n  <!-- Label -->\n  @if (label()) {\n  <lib-input-label\n    size=\"sm\"\n    [required]=\"required()\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [isLoading]=\"isLoading()\"\n  ></lib-input-label>\n  }\n\n  <!-- Select Container -->\n  <div class=\"c-select__container\">\n    <!-- Select Trigger -->\n    <button\n      type=\"button\"\n      class=\"c-select__trigger\"\n      [class.is-loading]=\"isLoading()\"\n      [disabled]=\"disabled() || isLoading()\"\n      [libDropdownSelectTriggerFor]=\"dropdownSelect\"\n      [attr.aria-haspopup]=\"true\"\n      [attr.aria-label]=\"placeholder()\"\n    >\n      <!-- Selected Content Display -->\n      <div class=\"c-select__content\">\n        @if (isMultiSelect() && hasSelection()) {\n        <!-- Multi-select: Show tags -->\n        <div class=\"c-select__tags\">\n          @for (option of visibleTags(); track option.value) {\n          <lib-tag\n            [text]=\"option.label\"\n            variant=\"neutral\"\n            size=\"xs\"\n            [closeActive]=\"true\"\n            [showBadge]=\"false\"\n            (closeEvent)=\"removeOption(option)\"\n          >\n          </lib-tag>\n          } @if (hiddenTagsCount() > 0) {\n          <span class=\"c-select__counter\"> +{{ hiddenTagsCount() }} </span>\n          }\n        </div>\n        } @else {\n        <!-- Single select: Show text -->\n        <span\n          class=\"c-select__text\"\n          [class.c-select__text--placeholder]=\"!hasSelection()\"\n        >\n          <!-- Icon for single select -->\n          @if (selectedOption()?.icon && !isLoading()) {\n          <lib-icon\n            [name]=\"selectedOption()?.icon!\"\n            [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n            [disabled]=\"disabled() && hasSelection()\"\n          >\n          </lib-icon>\n          }\n          <span class=\"c-select__text-value\">\n            {{ isLoading() ? '' : displayText() }}\n          </span>\n        </span>\n        }\n      </div>\n\n      <!-- Caret Icon -->\n      <lib-icon\n        name=\"caretdown-regular\"\n        [color]=\"\n          disabled()\n            ? 'textfield-content-disabled'\n            : 'textfield-content-default'\n        \"\n        size=\"md\"\n      >\n      </lib-icon>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div class=\"c-select__dropdown\">\n      <lib-dropdown-select\n        #dropdownSelect\n        [options]=\"filteredOptions()\"\n        [variant]=\"variant()\"\n        [selectedValues]=\"getSelectedValues()\"\n        [searchBarEnabled]=\"searchBarEnabled()\"\n        [searchPlaceholder]=\"searchPlaceholder()\"\n        [disabled]=\"disabled()\"\n        [align]=\"align()\"\n        [direction]=\"direction()\"\n        [appendToBody]=\"appendToBody()\"\n        [autoFocus]=\"autoFocus()\"\n        [cancelButtonText]=\"cancelButtonText()\"\n        [acceptButtonText]=\"acceptButtonText()\"\n        [width]=\"'stretch'\"\n        (searchChanged)=\"onDropdownSearchChanged($event)\"\n        (valueChange)=\"onDropdownValueChange($event)\"\n      ></lib-dropdown-select>\n    </div>\n  </div>\n\n  <!-- Helper Text -->\n  @if (helperText() && !isError()) {\n  <lib-helper-text\n    [text]=\"helperText()\"\n    [disabled]=\"disabled()\"\n    [isLoading]=\"isLoading()\"\n  ></lib-helper-text>\n  }\n\n  <!-- Error Text -->\n  @if (errorText() && isError()) {\n  <lib-helper-text\n    variant=\"danger\"\n    [text]=\"errorText()\"\n    [disabled]=\"disabled()\"\n    [isLoading]=\"isLoading()\"\n  ></lib-helper-text>\n  }\n</div>\n", styles: [".c-select{max-width:300px;display:flex;flex-direction:column;position:relative;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-select--size-sm .c-select__trigger{min-height:32px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg)}.c-select--full-width{max-width:100%}.c-select--error .c-select__trigger{border-color:var(--color-textfield-border-error)}.c-select--disabled .c-select__trigger{cursor:not-allowed;border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-select--disabled .c-select__text--placeholder,.c-select--disabled .c-select__text{color:var(--color-textfield-content-disabled)}.c-select__required{color:var(--color-feedback-danger-default);margin-left:2px}.c-select__container{position:relative}.c-select__trigger{--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg);display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);border-radius:var(--size-textfield-border-radius);cursor:pointer;text-align:left;padding:var(--select-padding-y) var(--select-padding-x)}.c-select__trigger:hover:not(:disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-select__trigger:focus-visible:not(:disabled){border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--select-padding-y) - 1px) calc(var(--select-padding-x) - 1px);box-shadow:none;outline:none}.c-select__trigger.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-select__content{flex:1;display:flex;align-items:center;min-width:0}.c-select__text{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-textfield-content-default);display:flex;align-items:center;gap:var(--space-container-gap-xs);min-width:0}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.c-select__text-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.c-select__tags{display:flex;flex-wrap:nowrap;gap:var(--space-component-gap-sm);align-items:center;min-width:0;overflow:hidden}.c-select__counter{background-color:var(--color-core-background-soft);color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }, { kind: "component", type: DropdownSelectComponent, selector: "lib-dropdown-select", inputs: ["options", "variant", "selectedValues", "searchBarEnabled", "searchPlaceholder", "disabled", "cancelButtonText", "acceptButtonText", "align", "direction", "appendToBody", "autoFocus", "width"], outputs: ["optionSelected", "optionDeselected", "searchChanged", "valueChange", "cancelClicked", "acceptClicked"] }, { kind: "directive", type: DropdownSelectTriggerDirective, selector: "[libDropdownSelectTriggerFor]", inputs: ["libDropdownSelectTriggerFor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -6281,7 +6300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"c-select\"\n  [class.c-select--full-width]=\"fullWidth()\"\n  [class.c-select--disabled]=\"disabled()\"\n  [class.c-select--error]=\"isError()\"\n  [class.c-select--size-sm]=\"size() === 'sm'\"\n  [class.c-select--size-md]=\"size() === 'md'\"\n  [class.c-select--size-lg]=\"size() === 'lg'\"\n>\n  <!-- Label -->\n  @if (label()) {\n  <lib-input-label\n    size=\"sm\"\n    [required]=\"required()\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [isLoading]=\"isLoading()\"\n  ></lib-input-label>\n  }\n\n  <!-- Select Container -->\n  <div class=\"c-select__container\">\n    <!-- Select Trigger -->\n    <button\n      type=\"button\"\n      class=\"c-select__trigger\"\n      [class.is-loading]=\"isLoading()\"\n      [disabled]=\"disabled() || isLoading()\"\n      [libDropdownSelectTriggerFor]=\"dropdownSelect\"\n      [attr.aria-haspopup]=\"true\"\n      [attr.aria-label]=\"placeholder()\"\n    >\n      <!-- Selected Content Display -->\n      <div class=\"c-select__content\">\n        @if (isMultiSelect() && hasSelection()) {\n        <!-- Multi-select: Show tags -->\n        <div class=\"c-select__tags\">\n          @for (option of visibleTags(); track option.value) {\n          <lib-tag\n            [text]=\"option.label\"\n            variant=\"neutral\"\n            size=\"xs\"\n            [closeActive]=\"true\"\n            [showBadge]=\"false\"\n            (closeEvent)=\"removeOption(option)\"\n          >\n          </lib-tag>\n          } @if (hiddenTagsCount() > 0) {\n          <span class=\"c-select__counter\"> +{{ hiddenTagsCount() }} </span>\n          }\n        </div>\n        } @else {\n        <!-- Single select: Show text -->\n        <span\n          class=\"c-select__text\"\n          [class.c-select__text--placeholder]=\"!hasSelection()\"\n        >\n          <!-- Icon for single select -->\n          @if (selectedOption()?.icon && !isLoading()) {\n          <lib-icon\n            [name]=\"selectedOption()?.icon!\"\n            [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n            [disabled]=\"disabled() && hasSelection()\"\n          >\n          </lib-icon>\n          }\n          <span class=\"c-select__text-value\">\n            {{ isLoading() ? '' : displayText() }}\n          </span>\n        </span>\n        }\n      </div>\n\n      <!-- Caret Icon -->\n      <lib-icon\n        name=\"caretdown-regular\"\n        [color]=\"\n          disabled()\n            ? 'textfield-content-disabled'\n            : 'textfield-content-default'\n        \"\n        size=\"md\"\n      >\n      </lib-icon>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div class=\"c-select__dropdown\">\n      <lib-dropdown-select\n        #dropdownSelect\n        [options]=\"filteredOptions()\"\n        [variant]=\"variant()\"\n        [selectedValues]=\"getSelectedValues()\"\n        [searchBarEnabled]=\"searchBarEnabled()\"\n        [searchPlaceholder]=\"searchPlaceholder()\"\n        [disabled]=\"disabled()\"\n        [align]=\"align()\"\n        [direction]=\"direction()\"\n        [appendToBody]=\"appendToBody()\"\n        [autoFocus]=\"autoFocus()\"\n        [width]=\"'stretch'\"\n        (searchChanged)=\"onDropdownSearchChanged($event)\"\n        (valueChange)=\"onDropdownValueChange($event)\"\n      ></lib-dropdown-select>\n    </div>\n  </div>\n\n  <!-- Helper Text -->\n  @if (helperText() && !isError()) {\n  <lib-helper-text\n    [text]=\"helperText()\"\n    [disabled]=\"disabled()\"\n    [isLoading]=\"isLoading()\"\n  ></lib-helper-text>\n  }\n\n  <!-- Error Text -->\n  @if (errorText() && isError()) {\n  <lib-helper-text\n    variant=\"danger\"\n    [text]=\"errorText()\"\n    [disabled]=\"disabled()\"\n    [isLoading]=\"isLoading()\"\n  ></lib-helper-text>\n  }\n</div>\n", styles: [".c-select{max-width:300px;display:flex;flex-direction:column;position:relative;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-select--size-sm .c-select__trigger{min-height:32px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg)}.c-select--full-width{max-width:100%}.c-select--error .c-select__trigger{border-color:var(--color-textfield-border-error)}.c-select--disabled .c-select__trigger{cursor:not-allowed;border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-select--disabled .c-select__text--placeholder,.c-select--disabled .c-select__text{color:var(--color-textfield-content-disabled)}.c-select__required{color:var(--color-feedback-danger-default);margin-left:2px}.c-select__container{position:relative}.c-select__trigger{--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg);display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);border-radius:var(--size-textfield-border-radius);cursor:pointer;text-align:left;padding:var(--select-padding-y) var(--select-padding-x)}.c-select__trigger:hover:not(:disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-select__trigger:focus-visible:not(:disabled){border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--select-padding-y) - 1px) calc(var(--select-padding-x) - 1px);box-shadow:none;outline:none}.c-select__trigger.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-select__content{flex:1;display:flex;align-items:center;min-width:0}.c-select__text{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-textfield-content-default);display:flex;align-items:center;gap:var(--space-container-gap-xs);min-width:0}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.c-select__text-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.c-select__tags{display:flex;flex-wrap:nowrap;gap:var(--space-component-gap-sm);align-items:center;min-width:0;overflow:hidden}.c-select__counter{background-color:var(--color-core-background-soft);color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}\n"] }]
+                    ], template: "<div\n  class=\"c-select\"\n  [class.c-select--full-width]=\"fullWidth()\"\n  [class.c-select--disabled]=\"disabled()\"\n  [class.c-select--error]=\"isError()\"\n  [class.c-select--size-sm]=\"size() === 'sm'\"\n  [class.c-select--size-md]=\"size() === 'md'\"\n  [class.c-select--size-lg]=\"size() === 'lg'\"\n>\n  <!-- Label -->\n  @if (label()) {\n  <lib-input-label\n    size=\"sm\"\n    [required]=\"required()\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [isLoading]=\"isLoading()\"\n  ></lib-input-label>\n  }\n\n  <!-- Select Container -->\n  <div class=\"c-select__container\">\n    <!-- Select Trigger -->\n    <button\n      type=\"button\"\n      class=\"c-select__trigger\"\n      [class.is-loading]=\"isLoading()\"\n      [disabled]=\"disabled() || isLoading()\"\n      [libDropdownSelectTriggerFor]=\"dropdownSelect\"\n      [attr.aria-haspopup]=\"true\"\n      [attr.aria-label]=\"placeholder()\"\n    >\n      <!-- Selected Content Display -->\n      <div class=\"c-select__content\">\n        @if (isMultiSelect() && hasSelection()) {\n        <!-- Multi-select: Show tags -->\n        <div class=\"c-select__tags\">\n          @for (option of visibleTags(); track option.value) {\n          <lib-tag\n            [text]=\"option.label\"\n            variant=\"neutral\"\n            size=\"xs\"\n            [closeActive]=\"true\"\n            [showBadge]=\"false\"\n            (closeEvent)=\"removeOption(option)\"\n          >\n          </lib-tag>\n          } @if (hiddenTagsCount() > 0) {\n          <span class=\"c-select__counter\"> +{{ hiddenTagsCount() }} </span>\n          }\n        </div>\n        } @else {\n        <!-- Single select: Show text -->\n        <span\n          class=\"c-select__text\"\n          [class.c-select__text--placeholder]=\"!hasSelection()\"\n        >\n          <!-- Icon for single select -->\n          @if (selectedOption()?.icon && !isLoading()) {\n          <lib-icon\n            [name]=\"selectedOption()?.icon!\"\n            [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n            [disabled]=\"disabled() && hasSelection()\"\n          >\n          </lib-icon>\n          }\n          <span class=\"c-select__text-value\">\n            {{ isLoading() ? '' : displayText() }}\n          </span>\n        </span>\n        }\n      </div>\n\n      <!-- Caret Icon -->\n      <lib-icon\n        name=\"caretdown-regular\"\n        [color]=\"\n          disabled()\n            ? 'textfield-content-disabled'\n            : 'textfield-content-default'\n        \"\n        size=\"md\"\n      >\n      </lib-icon>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div class=\"c-select__dropdown\">\n      <lib-dropdown-select\n        #dropdownSelect\n        [options]=\"filteredOptions()\"\n        [variant]=\"variant()\"\n        [selectedValues]=\"getSelectedValues()\"\n        [searchBarEnabled]=\"searchBarEnabled()\"\n        [searchPlaceholder]=\"searchPlaceholder()\"\n        [disabled]=\"disabled()\"\n        [align]=\"align()\"\n        [direction]=\"direction()\"\n        [appendToBody]=\"appendToBody()\"\n        [autoFocus]=\"autoFocus()\"\n        [cancelButtonText]=\"cancelButtonText()\"\n        [acceptButtonText]=\"acceptButtonText()\"\n        [width]=\"'stretch'\"\n        (searchChanged)=\"onDropdownSearchChanged($event)\"\n        (valueChange)=\"onDropdownValueChange($event)\"\n      ></lib-dropdown-select>\n    </div>\n  </div>\n\n  <!-- Helper Text -->\n  @if (helperText() && !isError()) {\n  <lib-helper-text\n    [text]=\"helperText()\"\n    [disabled]=\"disabled()\"\n    [isLoading]=\"isLoading()\"\n  ></lib-helper-text>\n  }\n\n  <!-- Error Text -->\n  @if (errorText() && isError()) {\n  <lib-helper-text\n    variant=\"danger\"\n    [text]=\"errorText()\"\n    [disabled]=\"disabled()\"\n    [isLoading]=\"isLoading()\"\n  ></lib-helper-text>\n  }\n</div>\n", styles: [".c-select{max-width:300px;display:flex;flex-direction:column;position:relative;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-select--size-sm .c-select__trigger{min-height:32px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;--select-padding-y: var(--space-component-padding-xs);--select-padding-x: var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg)}.c-select--full-width{max-width:100%}.c-select--error .c-select__trigger{border-color:var(--color-textfield-border-error)}.c-select--disabled .c-select__trigger{cursor:not-allowed;border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-select--disabled .c-select__text--placeholder,.c-select--disabled .c-select__text{color:var(--color-textfield-content-disabled)}.c-select__required{color:var(--color-feedback-danger-default);margin-left:2px}.c-select__container{position:relative}.c-select__trigger{--select-padding-y: var(--space-component-padding-md);--select-padding-x: var(--space-component-padding-lg);display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);border-radius:var(--size-textfield-border-radius);cursor:pointer;text-align:left;padding:var(--select-padding-y) var(--select-padding-x)}.c-select__trigger:hover:not(:disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-select__trigger:focus-visible:not(:disabled){border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--select-padding-y) - 1px) calc(var(--select-padding-x) - 1px);box-shadow:none;outline:none}.c-select__trigger.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-select__content{flex:1;display:flex;align-items:center;min-width:0}.c-select__text{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-textfield-content-default);display:flex;align-items:center;gap:var(--space-container-gap-xs);min-width:0}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.c-select__text-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.c-select__tags{display:flex;flex-wrap:nowrap;gap:var(--space-component-gap-sm);align-items:center;min-width:0;overflow:hidden}.c-select__counter{background-color:var(--color-core-background-soft);color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}\n"] }]
         }], ctorParameters: () => [] });
 
 /**