@crowdfarming/oliva-ds 1.26.0-rc.9 → 1.26.0

package/fesm2022/crowdfarming-oliva-ds.mjs

@@ -3598,6 +3598,7 @@ class DropdownSelectComponent {
     disabled = input(false);
     cancelButtonText = input('Cancel');
     acceptButtonText = input('Accept');
+    position = input('right');
     // Outputs
     optionSelected = output();
     optionDeselected = output();
@@ -3637,6 +3638,7 @@ class DropdownSelectComponent {
     });
     getMenuClasses = computed(() => {
         const classes = ['c-dropdown-select__menu'];
+        classes.push(`c-dropdown-select__menu--${this.position()}`);
         return classes.join(' ');
     });
     // Computed values
@@ -3916,7 +3918,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 } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, template: "<div class=\"c-dropdown-select\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop for mobile -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-dropdown-select__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close dropdown\"\n  ></div>\n  }\n\n  <!-- Dropdown Menu -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-dropdown-select__menu\"\n    [ngClass]=\"getMenuClasses()\"\n    #dropdownMenu\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\n        (isMultiSelect()) {\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 -->\n    <div 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  </div>\n  }\n</div>\n", styles: [".c-dropdown-select{position:relative}.c-dropdown-select__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-dropdown-select__backdrop--open{opacity:1}.c-dropdown-select__menu{position:absolute;margin-top:2px;left:0;right:0;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;width:fit-content;min-width:200px;max-width:320px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:dropdown-enter .2s ease-out forwards;transform-origin:top center}.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--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:none;padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);justify-content:space-between;align-items:center}@keyframes dropdown-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dropdown-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-dropdown-select__backdrop{display:block;z-index:999}.c-dropdown-select__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex}.c-dropdown-select--open .c-dropdown-select__menu{transform:translateY(0)}.c-dropdown-select__mobile-actions{display:flex}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "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", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "iconBefore", "iconAfter"], outputs: ["clicked"] }] });
+    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 }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, template: "<div class=\"c-dropdown-select\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop for mobile -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-dropdown-select__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close dropdown\"\n  ></div>\n  }\n\n  <!-- Dropdown Menu -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-dropdown-select__menu\"\n    [ngClass]=\"getMenuClasses()\"\n    #dropdownMenu\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\n        (isMultiSelect()) {\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 -->\n    <div 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  </div>\n  }\n</div>\n", styles: [".c-dropdown-select{position:relative}.c-dropdown-select__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-dropdown-select__backdrop--open{opacity:1}.c-dropdown-select__menu{position:absolute;margin-top:2px;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;width:fit-content;min-width:200px;max-width:320px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:dropdown-enter .2s ease-out forwards;transform-origin:top center}.c-dropdown-select__menu--right{left:0;right:auto}.c-dropdown-select__menu--left{left:auto;right:0}.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--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:none;padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);justify-content:space-between;align-items:center}@keyframes dropdown-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dropdown-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-dropdown-select__backdrop{display:block;z-index:999}.c-dropdown-select__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex}.c-dropdown-select--open .c-dropdown-select__menu{transform:translateY(0)}.c-dropdown-select__mobile-actions{display:flex}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "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", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "iconBefore", "iconAfter"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, decorators: [{
             type: Component,
@@ -3927,7 +3929,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         CheckboxComponent,
                         InputSearchComponent,
                         LinkActionComponent,
-                    ], template: "<div class=\"c-dropdown-select\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop for mobile -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-dropdown-select__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close dropdown\"\n  ></div>\n  }\n\n  <!-- Dropdown Menu -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-dropdown-select__menu\"\n    [ngClass]=\"getMenuClasses()\"\n    #dropdownMenu\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\n        (isMultiSelect()) {\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 -->\n    <div 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  </div>\n  }\n</div>\n", styles: [".c-dropdown-select{position:relative}.c-dropdown-select__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-dropdown-select__backdrop--open{opacity:1}.c-dropdown-select__menu{position:absolute;margin-top:2px;left:0;right:0;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;width:fit-content;min-width:200px;max-width:320px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:dropdown-enter .2s ease-out forwards;transform-origin:top center}.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--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:none;padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);justify-content:space-between;align-items:center}@keyframes dropdown-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dropdown-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-dropdown-select__backdrop{display:block;z-index:999}.c-dropdown-select__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex}.c-dropdown-select--open .c-dropdown-select__menu{transform:translateY(0)}.c-dropdown-select__mobile-actions{display:flex}}\n"] }]
+                        ButtonIconComponent,
+                    ], template: "<div class=\"c-dropdown-select\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop for mobile -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-dropdown-select__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close dropdown\"\n  ></div>\n  }\n\n  <!-- Dropdown Menu -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-dropdown-select__menu\"\n    [ngClass]=\"getMenuClasses()\"\n    #dropdownMenu\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\n        (isMultiSelect()) {\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 -->\n    <div 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  </div>\n  }\n</div>\n", styles: [".c-dropdown-select{position:relative}.c-dropdown-select__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-dropdown-select__backdrop--open{opacity:1}.c-dropdown-select__menu{position:absolute;margin-top:2px;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;width:fit-content;min-width:200px;max-width:320px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:dropdown-enter .2s ease-out forwards;transform-origin:top center}.c-dropdown-select__menu--right{left:0;right:auto}.c-dropdown-select__menu--left{left:auto;right:0}.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--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:none;padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);justify-content:space-between;align-items:center}@keyframes dropdown-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dropdown-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-dropdown-select__backdrop{display:block;z-index:999}.c-dropdown-select__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex}.c-dropdown-select--open .c-dropdown-select__menu{transform:translateY(0)}.c-dropdown-select__mobile-actions{display:flex}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dropdownMenu: [{
                 type: ViewChild,
                 args: ['dropdownMenu']
@@ -5281,7 +5284,7 @@ class SelectComponent {
                 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  ></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      [disabled]=\"disabled()\"\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) {\n          <lib-icon\n            [name]=\"selectedOption()?.icon!\"\n            [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n            [color]=\"\n              disabled() || selectedOption()?.disabled\n                ? 'textfield-content-disabled'\n                : null\n            \"\n          >\n          </lib-icon>\n          }\n          {{ displayText() }}\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]=\"'Search options...'\"\n        [disabled]=\"disabled()\"\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  ></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  ></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;padding:6px 12px;padding:0 var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;padding:0 var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;padding:0 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{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}.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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.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)}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.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", "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"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled"] }, { kind: "component", type: DropdownSelectComponent, selector: "lib-dropdown-select", inputs: ["options", "variant", "selectedValues", "searchBarEnabled", "searchPlaceholder", "disabled", "cancelButtonText", "acceptButtonText"], 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  ></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      [disabled]=\"disabled()\"\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) {\n          <lib-icon\n            [name]=\"selectedOption()?.icon!\"\n            [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n            [color]=\"\n              disabled() || selectedOption()?.disabled\n                ? 'textfield-content-disabled'\n                : null\n            \"\n          >\n          </lib-icon>\n          }\n          {{ displayText() }}\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]=\"'Search options...'\"\n        [disabled]=\"disabled()\"\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  ></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  ></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;padding:6px 12px;padding:0 var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;padding:0 var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;padding:0 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{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}.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-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.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)}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.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", "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"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled"] }, { kind: "component", type: DropdownSelectComponent, selector: "lib-dropdown-select", inputs: ["options", "variant", "selectedValues", "searchBarEnabled", "searchPlaceholder", "disabled", "cancelButtonText", "acceptButtonText", "position"], 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,