@crowdfarming/oliva-ds 1.12.0 → 1.13.0-rc.1

package/fesm2022/crowdfarming-oliva-ds.mjs

@@ -2699,87 +2699,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 class CheckboxComponent {
     label = input('');
-    id = input('');
-    checked = input(false);
-    disabled = input(false);
-    error = input(false);
+    state = input('unchecked');
+    errorActive = input(false);
     skeletonActive = input(false);
-    indeterminate = input(false);
+    disabled = input(false);
+    name = input('');
+    value = input('');
     innerHTML = input('');
-    required = input(false);
-    checkChanged = output();
-    // Internal signal for form control
+    ariaLabel = input('');
+    changed = output();
+    // Internal signal for form control - using boolean for simpler form integration
     _internalChecked = signal(false);
+    _internalIndeterminate = signal(false);
+    // ControlValueAccessor callbacks
     onChangeFn = () => { };
     onTouchedFn = () => { };
-    // Use internal state, but sync it with external checked input when provided
+    // Computed properties that use internal state for form control
     isChecked = computed(() => this._internalChecked());
+    isIndeterminate = computed(() => this._internalIndeterminate());
+    isDisabled = computed(() => this.disabled());
+    isSkeleton = computed(() => this.skeletonActive());
+    isError = computed(() => this.errorActive());
     constructor() {
-        // Sync internal state with external checked input
+        // Sync internal state with external state input
         effect(() => {
-            const externalChecked = this.checked();
-            // When external checked changes, update internal state to match
-            this._internalChecked.set(externalChecked);
+            const externalState = this.state();
+            this._internalChecked.set(externalState === 'checked');
+            this._internalIndeterminate.set(externalState === 'undetermined');
         });
     }
-    writeValue(value) {
-        this._internalChecked.set(!!value);
-    }
-    registerOnChange(fn) {
-        this.onChangeFn = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedFn = fn;
-    }
+    computedAriaLabel = computed(() => {
+        if (this.ariaLabel())
+            return this.ariaLabel();
+        if (this.label())
+            return this.label();
+        return 'Checkbox';
+    });
+    // Improved ARIA handling
+    ariaChecked = computed(() => {
+        return this.isIndeterminate() ? 'mixed' : String(this.isChecked());
+    });
     handleChange(event) {
         // Ignore interactions when skeleton is active
-        if (this.skeletonActive())
+        if (this.isSkeleton())
             return;
         const input = event.target;
         const isChecked = input.checked;
+        // Update internal state
         this._internalChecked.set(isChecked);
+        this._internalIndeterminate.set(false); // Clear indeterminate when explicitly checked/unchecked
+        // Emit change event
+        this.changed.emit({
+            checked: isChecked,
+            value: this.value(),
+        });
+        // Notify reactive form
         this.onChangeFn(isChecked);
-        this.checkChanged.emit(isChecked);
-    }
-    onBlur() {
         this.onTouchedFn();
     }
-    ariaChecked = computed(() => {
-        return this.indeterminate() ? 'mixed' : String(this.isChecked());
-    });
-    onKeydown(event) {
+    handleKeyDown(event) {
         // Ignore interactions when skeleton is active
-        if (this.skeletonActive())
+        if (this.isSkeleton())
             return;
-        if ((event.code === 'Space' || event.key === ' ') && !this.disabled()) {
+        if ((event.code === 'Space' || event.key === ' ') && !this.isDisabled()) {
             event.preventDefault();
             const newValue = !this.isChecked();
+            // Update internal state
             this._internalChecked.set(newValue);
+            this._internalIndeterminate.set(false);
+            // Emit change event
+            this.changed.emit({
+                checked: newValue,
+                value: this.value(),
+            });
+            // Notify reactive form
             this.onChangeFn(newValue);
-            this.checkChanged.emit(newValue);
             this.onTouchedFn();
         }
     }
-    handleClick() {
-        // Ignore interactions when skeleton is active
-        if (this.skeletonActive())
-            return;
-        if (this.disabled())
-            return;
-        const newValue = !this.isChecked();
-        this._internalChecked.set(newValue);
-        this.onChangeFn(newValue);
-        this.checkChanged.emit(newValue);
-        this.onTouchedFn();
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this._internalChecked.set(!!value);
+        this._internalIndeterminate.set(false);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
     }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    classes = computed(() => {
+        const c = [
+            'c-checkbox',
+            `c-checkbox--${this.state()}`,
+            this.isSkeleton() ? 'c-checkbox--skeleton' : '',
+            this.isError() ? 'c-checkbox--error' : '',
+        ];
+        return c.filter(Boolean).join(' ');
+    });
+    inputClasses = computed(() => {
+        const c = [
+            'c-checkbox__input',
+            `c-checkbox__input--${this.state()}`,
+            this.isDisabled() ? 'c-checkbox__input--disabled' : '',
+            this.isSkeleton() ? 'c-checkbox__input--skeleton' : '',
+            this.isError() ? 'c-checkbox__input--error' : '',
+        ];
+        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 ɵ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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, innerHTML: { classPropertyName: "innerHTML", publicName: "innerHTML", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkChanged: "checkChanged" }, providers: [
+    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\n  class=\"c-checkbox\"\n  [class.has-error]=\"error() && !skeletonActive()\"\n  [class.disabled]=\"disabled() && !skeletonActive()\"\n  [class.skeleton]=\"skeletonActive()\"\n  (click)=\"handleClick()\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n  [attr.role]=\"'checkbox'\"\n  [attr.aria-checked]=\"ariaChecked()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"-1\"\n>\n  <input\n    type=\"checkbox\"\n    [id]=\"id()\"\n    class=\"c-checkbox__input\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"handleChange($event)\"\n    (blur)=\"onBlur()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n  />\n\n  <div class=\"c-checkbox__input-wrapper\">\n    <span\n      [attr.tabindex]=\"disabled() ? -1 : 0\"\n      class=\"c-checkbox__custom\"\n      [ngClass]=\"[\n        'c-checkbox__custom',\n        indeterminate() && !skeletonActive()\n          ? 'c-checkbox__custom--indeterminate'\n          : ''\n      ]\"\n      [class.checked]=\"isChecked() && !skeletonActive()\"\n      [class.disabled]=\"disabled() && !skeletonActive()\"\n      [class.skeleton]=\"skeletonActive()\"\n    >\n      @if (isChecked() && !indeterminate() && !skeletonActive()) {\n      <svg class=\"c-checkbox__tick\" viewBox=\"0 0 24 24\">\n        <polyline points=\"4 12 10 18 20 6\"></polyline>\n      </svg>\n      } @if (indeterminate() && !skeletonActive()) {\n      <div class=\"c-checkbox__indeterminate\"></div>\n      }\n    </span>\n  </div>\n\n  @if (skeletonActive()) {\n  <div class=\"c-checkbox__skeleton-bar\"><span></span></div>\n  } @else {\n  <lib-input-label\n    class=\"c-checkbox__text\"\n    [text]=\"label()\"\n    [innerHTML]=\"innerHTML()\"\n    [required]=\"required()\"\n    [disabled]=\"disabled()\"\n  ></lib-input-label>\n  }\n</div>\n", styles: [":host{display:block;height:20px}.c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm);cursor:pointer;-webkit-user-select:none;user-select:none;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);color:var(--color-core-content-default)}.c-checkbox__input{display:none}.c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom{background-color:var(--color-action-primary-selected-background-default);border-color:var(--color-action-primary-selected-background-default)}.c-checkbox__input:checked:hover+.c-checkbox__input-wrapper .c-checkbox__custom{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-background-hover)}.c-checkbox__input:focus+.c-checkbox__input-wrapper .c-checkbox__custom{outline:2px solid var(--focus-outset)}.c-checkbox__input:disabled+.c-checkbox__input-wrapper .c-checkbox__custom{border-color:var(--color-textfield-border-disabled)}.c-checkbox__input:disabled:checked+.c-checkbox__input-wrapper .c-checkbox__custom{border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-checkbox__input:disabled:checked+.c-checkbox__input-wrapper .c-checkbox__custom .c-checkbox__tick{stroke:var(--color-textfield-content-disabled)}.c-checkbox__input:disabled:checked~.c-checkbox__text,.c-checkbox__input:disabled~.c-checkbox__text{color:var(--color-textfield-content-disabled)}.c-checkbox.disabled{cursor:not-allowed}.c-checkbox.skeleton{cursor:progress!important;pointer-events:none!important}.c-checkbox.skeleton .c-checkbox__custom{border-color:var(--color-effect-skeleton-soft)!important;background-color:#fff!important;transition:none!important}.c-checkbox.skeleton .c-checkbox__custom:hover,.c-checkbox.skeleton .c-checkbox__custom:active,.c-checkbox.skeleton .c-checkbox__custom:focus,.c-checkbox.skeleton .c-checkbox__custom:focus-visible,.c-checkbox.skeleton .c-checkbox__custom.checked,.c-checkbox.skeleton .c-checkbox__custom.disabled,.c-checkbox.skeleton .c-checkbox__custom--indeterminate{border-color:var(--color-effect-skeleton-soft)!important;background-color:#fff!important;outline:none!important;box-shadow:none!important}.c-checkbox.skeleton .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton .c-checkbox__input:checked:hover+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton .c-checkbox__input:focus+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton .c-checkbox__input:disabled+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton .c-checkbox__input:disabled:checked+.c-checkbox__input-wrapper .c-checkbox__custom{border-color:var(--color-effect-skeleton-soft)!important;outline:none!important;box-shadow:none!important}.c-checkbox.skeleton .c-checkbox__input:disabled:checked~.c-checkbox__text,.c-checkbox.skeleton .c-checkbox__input:disabled~.c-checkbox__text{color:var(--color-core-content-default)!important}.c-checkbox.skeleton:hover:not(.disabled),.c-checkbox.skeleton:active:not(.disabled),.c-checkbox.skeleton.disabled,.c-checkbox.skeleton.has-error,.c-checkbox.skeleton.has-error:hover:not(.disabled),.c-checkbox.skeleton.has-error:active:not(.disabled){cursor:progress!important}.c-checkbox.skeleton:hover:not(.disabled) .c-checkbox__custom,.c-checkbox.skeleton:hover:not(.disabled) .c-checkbox__custom--indeterminate,.c-checkbox.skeleton:active:not(.disabled) .c-checkbox__custom,.c-checkbox.skeleton:active:not(.disabled) .c-checkbox__custom--indeterminate,.c-checkbox.skeleton.disabled .c-checkbox__custom,.c-checkbox.skeleton.disabled .c-checkbox__custom--indeterminate,.c-checkbox.skeleton.has-error .c-checkbox__custom,.c-checkbox.skeleton.has-error .c-checkbox__custom--indeterminate,.c-checkbox.skeleton.has-error:hover:not(.disabled) .c-checkbox__custom,.c-checkbox.skeleton.has-error:hover:not(.disabled) .c-checkbox__custom--indeterminate,.c-checkbox.skeleton.has-error:active:not(.disabled) .c-checkbox__custom,.c-checkbox.skeleton.has-error:active:not(.disabled) .c-checkbox__custom--indeterminate{border-color:var(--color-effect-skeleton-soft)!important}.c-checkbox.skeleton:hover:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton:active:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton.disabled .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton.has-error .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton.has-error:hover:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton.has-error:active:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom{border-color:var(--color-effect-skeleton-soft)!important}.c-checkbox.skeleton .c-checkbox__tick,.c-checkbox.skeleton .c-checkbox__indeterminate{display:none!important}.c-checkbox.has-error .c-checkbox__custom{border-color:var(--color-feedback-danger-surface-border)}.c-checkbox.has-error .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-checkbox.has-error .c-checkbox__custom--indeterminate{background-color:var(--color-feedback-danger-default);border-color:var(--color-feedback-danger-default)}.c-checkbox.has-error:hover:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-checkbox.has-error:hover:not(.disabled) .c-checkbox__custom--indeterminate{background-color:var(--color-feedback-danger-default);border-color:var(--color-feedback-danger-default)}.c-checkbox.has-error:active:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom{border-color:var(--color-feedback-danger-surface-border)}.c-checkbox.has-error:active:not(.disabled) .c-checkbox__custom--indeterminate{border-color:var(--color-feedback-danger-default)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border:var(--size-border-width-md) solid var(--color-textfield-border-default);border-radius:var(--size-border-radius-sm);background:#fff;transition:all .2s}.c-checkbox__custom--indeterminate{background-color:var(--color-action-primary-selected-background-default);border-color:var(--color-action-primary-selected-background-default)}.c-checkbox__custom:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox__tick{width:12px;height:12px;stroke:#fff;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;fill:none;display:block}.c-checkbox:hover:not(.disabled) .c-checkbox__custom{border-color:var(--color-textfield-border-hover)}.c-checkbox:hover:not(.disabled) .c-checkbox__custom--indeterminate{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-background-hover)}.c-checkbox:hover:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-background-hover)}.c-checkbox:active:not(.disabled) .c-checkbox__custom{border-color:var(--color-textfield-border-pressed)}.c-checkbox:active:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom{border-color:var(--color-action-primary-selected-background-default)}.c-checkbox:active:not(.disabled) .c-checkbox__custom--indeterminate{border-color:var(--color-action-primary-selected-background-default)}.c-checkbox__text{font-size:.875rem}.c-checkbox__indeterminate{width:12px;height:2px;border-radius:1px;background-color:#fff}.c-checkbox__skeleton-bar{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__skeleton-bar span{width:100%;height:8px;border-radius:4px;background-color:var(--color-effect-skeleton-default)}\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"] }] });
+        ], 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 {\n  <lib-input-label\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}\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -2789,7 +2824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"c-checkbox\"\n  [class.has-error]=\"error() && !skeletonActive()\"\n  [class.disabled]=\"disabled() && !skeletonActive()\"\n  [class.skeleton]=\"skeletonActive()\"\n  (click)=\"handleClick()\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n  [attr.role]=\"'checkbox'\"\n  [attr.aria-checked]=\"ariaChecked()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"-1\"\n>\n  <input\n    type=\"checkbox\"\n    [id]=\"id()\"\n    class=\"c-checkbox__input\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"handleChange($event)\"\n    (blur)=\"onBlur()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n  />\n\n  <div class=\"c-checkbox__input-wrapper\">\n    <span\n      [attr.tabindex]=\"disabled() ? -1 : 0\"\n      class=\"c-checkbox__custom\"\n      [ngClass]=\"[\n        'c-checkbox__custom',\n        indeterminate() && !skeletonActive()\n          ? 'c-checkbox__custom--indeterminate'\n          : ''\n      ]\"\n      [class.checked]=\"isChecked() && !skeletonActive()\"\n      [class.disabled]=\"disabled() && !skeletonActive()\"\n      [class.skeleton]=\"skeletonActive()\"\n    >\n      @if (isChecked() && !indeterminate() && !skeletonActive()) {\n      <svg class=\"c-checkbox__tick\" viewBox=\"0 0 24 24\">\n        <polyline points=\"4 12 10 18 20 6\"></polyline>\n      </svg>\n      } @if (indeterminate() && !skeletonActive()) {\n      <div class=\"c-checkbox__indeterminate\"></div>\n      }\n    </span>\n  </div>\n\n  @if (skeletonActive()) {\n  <div class=\"c-checkbox__skeleton-bar\"><span></span></div>\n  } @else {\n  <lib-input-label\n    class=\"c-checkbox__text\"\n    [text]=\"label()\"\n    [innerHTML]=\"innerHTML()\"\n    [required]=\"required()\"\n    [disabled]=\"disabled()\"\n  ></lib-input-label>\n  }\n</div>\n", styles: [":host{display:block;height:20px}.c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm);cursor:pointer;-webkit-user-select:none;user-select:none;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);color:var(--color-core-content-default)}.c-checkbox__input{display:none}.c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom{background-color:var(--color-action-primary-selected-background-default);border-color:var(--color-action-primary-selected-background-default)}.c-checkbox__input:checked:hover+.c-checkbox__input-wrapper .c-checkbox__custom{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-background-hover)}.c-checkbox__input:focus+.c-checkbox__input-wrapper .c-checkbox__custom{outline:2px solid var(--focus-outset)}.c-checkbox__input:disabled+.c-checkbox__input-wrapper .c-checkbox__custom{border-color:var(--color-textfield-border-disabled)}.c-checkbox__input:disabled:checked+.c-checkbox__input-wrapper .c-checkbox__custom{border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-checkbox__input:disabled:checked+.c-checkbox__input-wrapper .c-checkbox__custom .c-checkbox__tick{stroke:var(--color-textfield-content-disabled)}.c-checkbox__input:disabled:checked~.c-checkbox__text,.c-checkbox__input:disabled~.c-checkbox__text{color:var(--color-textfield-content-disabled)}.c-checkbox.disabled{cursor:not-allowed}.c-checkbox.skeleton{cursor:progress!important;pointer-events:none!important}.c-checkbox.skeleton .c-checkbox__custom{border-color:var(--color-effect-skeleton-soft)!important;background-color:#fff!important;transition:none!important}.c-checkbox.skeleton .c-checkbox__custom:hover,.c-checkbox.skeleton .c-checkbox__custom:active,.c-checkbox.skeleton .c-checkbox__custom:focus,.c-checkbox.skeleton .c-checkbox__custom:focus-visible,.c-checkbox.skeleton .c-checkbox__custom.checked,.c-checkbox.skeleton .c-checkbox__custom.disabled,.c-checkbox.skeleton .c-checkbox__custom--indeterminate{border-color:var(--color-effect-skeleton-soft)!important;background-color:#fff!important;outline:none!important;box-shadow:none!important}.c-checkbox.skeleton .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton .c-checkbox__input:checked:hover+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton .c-checkbox__input:focus+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton .c-checkbox__input:disabled+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton .c-checkbox__input:disabled:checked+.c-checkbox__input-wrapper .c-checkbox__custom{border-color:var(--color-effect-skeleton-soft)!important;outline:none!important;box-shadow:none!important}.c-checkbox.skeleton .c-checkbox__input:disabled:checked~.c-checkbox__text,.c-checkbox.skeleton .c-checkbox__input:disabled~.c-checkbox__text{color:var(--color-core-content-default)!important}.c-checkbox.skeleton:hover:not(.disabled),.c-checkbox.skeleton:active:not(.disabled),.c-checkbox.skeleton.disabled,.c-checkbox.skeleton.has-error,.c-checkbox.skeleton.has-error:hover:not(.disabled),.c-checkbox.skeleton.has-error:active:not(.disabled){cursor:progress!important}.c-checkbox.skeleton:hover:not(.disabled) .c-checkbox__custom,.c-checkbox.skeleton:hover:not(.disabled) .c-checkbox__custom--indeterminate,.c-checkbox.skeleton:active:not(.disabled) .c-checkbox__custom,.c-checkbox.skeleton:active:not(.disabled) .c-checkbox__custom--indeterminate,.c-checkbox.skeleton.disabled .c-checkbox__custom,.c-checkbox.skeleton.disabled .c-checkbox__custom--indeterminate,.c-checkbox.skeleton.has-error .c-checkbox__custom,.c-checkbox.skeleton.has-error .c-checkbox__custom--indeterminate,.c-checkbox.skeleton.has-error:hover:not(.disabled) .c-checkbox__custom,.c-checkbox.skeleton.has-error:hover:not(.disabled) .c-checkbox__custom--indeterminate,.c-checkbox.skeleton.has-error:active:not(.disabled) .c-checkbox__custom,.c-checkbox.skeleton.has-error:active:not(.disabled) .c-checkbox__custom--indeterminate{border-color:var(--color-effect-skeleton-soft)!important}.c-checkbox.skeleton:hover:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton:active:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton.disabled .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton.has-error .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton.has-error:hover:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom,.c-checkbox.skeleton.has-error:active:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom{border-color:var(--color-effect-skeleton-soft)!important}.c-checkbox.skeleton .c-checkbox__tick,.c-checkbox.skeleton .c-checkbox__indeterminate{display:none!important}.c-checkbox.has-error .c-checkbox__custom{border-color:var(--color-feedback-danger-surface-border)}.c-checkbox.has-error .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-checkbox.has-error .c-checkbox__custom--indeterminate{background-color:var(--color-feedback-danger-default);border-color:var(--color-feedback-danger-default)}.c-checkbox.has-error:hover:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-checkbox.has-error:hover:not(.disabled) .c-checkbox__custom--indeterminate{background-color:var(--color-feedback-danger-default);border-color:var(--color-feedback-danger-default)}.c-checkbox.has-error:active:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom{border-color:var(--color-feedback-danger-surface-border)}.c-checkbox.has-error:active:not(.disabled) .c-checkbox__custom--indeterminate{border-color:var(--color-feedback-danger-default)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border:var(--size-border-width-md) solid var(--color-textfield-border-default);border-radius:var(--size-border-radius-sm);background:#fff;transition:all .2s}.c-checkbox__custom--indeterminate{background-color:var(--color-action-primary-selected-background-default);border-color:var(--color-action-primary-selected-background-default)}.c-checkbox__custom:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox__tick{width:12px;height:12px;stroke:#fff;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;fill:none;display:block}.c-checkbox:hover:not(.disabled) .c-checkbox__custom{border-color:var(--color-textfield-border-hover)}.c-checkbox:hover:not(.disabled) .c-checkbox__custom--indeterminate{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-background-hover)}.c-checkbox:hover:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-background-hover)}.c-checkbox:active:not(.disabled) .c-checkbox__custom{border-color:var(--color-textfield-border-pressed)}.c-checkbox:active:not(.disabled) .c-checkbox__input:checked+.c-checkbox__input-wrapper .c-checkbox__custom{border-color:var(--color-action-primary-selected-background-default)}.c-checkbox:active:not(.disabled) .c-checkbox__custom--indeterminate{border-color:var(--color-action-primary-selected-background-default)}.c-checkbox__text{font-size:.875rem}.c-checkbox__indeterminate{width:12px;height:2px;border-radius:1px;background-color:#fff}.c-checkbox__skeleton-bar{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__skeleton-bar span{width:100%;height:8px;border-radius:4px;background-color:var(--color-effect-skeleton-default)}\n"] }]
+                    ], 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 {\n  <lib-input-label\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}\n"] }]
         }], ctorParameters: () => [] });
 
 class HelperTextComponent {
@@ -2837,37 +2872,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             }] } });
 
 class CheckboxGroupComponent {
-    legend = '';
-    parentLabel = '';
-    name = '';
-    helperText = '';
-    options = [];
-    skeletonActive = false;
+    legend = input('');
+    parentLabel = input('');
+    name = input('');
+    helperText = input('');
+    options = input([]);
+    skeletonActive = input(false);
+    required = input(false);
+    selectedChange = output();
+    // Internal state for options to make them reactive
+    optionsSignal = signal([]);
+    constructor() {
+        // Watch for changes to the options input and update internal signal
+        effect(() => {
+            this.optionsSignal.set(this.options());
+        });
+    }
     // Get currently selected values from options
     get selected() {
-        return this.options
+        return this.optionsSignal()
             .filter((option) => option.checked)
             .map((option) => option.value);
     }
-    selectedChange = new EventEmitter();
     // Parent checkbox state calculations
     get parentChecked() {
         // Parent is checked if ALL non-disabled children are checked
-        const enabledOptions = this.options.filter((option) => !option.disabled);
+        const enabledOptions = this.optionsSignal().filter((option) => !option.disabled);
         return (enabledOptions.length > 0 &&
             enabledOptions.every((option) => option.checked));
     }
     get parentIndeterminate() {
         // Parent is indeterminate if SOME (but not all) non-disabled children are checked
-        const enabledOptions = this.options.filter((option) => !option.disabled);
+        const enabledOptions = this.optionsSignal().filter((option) => !option.disabled);
         const checkedEnabledOptions = enabledOptions.filter((option) => option.checked);
         return (checkedEnabledOptions.length > 0 &&
             checkedEnabledOptions.length < enabledOptions.length);
     }
+    // Computed parent state for the checkbox component
+    get parentState() {
+        if (this.parentIndeterminate)
+            return 'undetermined';
+        if (this.parentChecked)
+            return 'checked';
+        return 'unchecked';
+    }
     onParentClick() {
+        const currentOptions = [...this.optionsSignal()];
         if (this.parentIndeterminate) {
             // Rule: If parent is indeterminate and clicked, check it (select all enabled)
-            this.options.forEach((option) => {
+            currentOptions.forEach((option) => {
                 if (!option.disabled) {
                     option.checked = true;
                 }
@@ -2875,7 +2928,7 @@ class CheckboxGroupComponent {
         }
         else if (this.parentChecked) {
             // Rule: If parent is checked and clicked, uncheck it (unselect all enabled)
-            this.options.forEach((option) => {
+            currentOptions.forEach((option) => {
                 if (!option.disabled) {
                     option.checked = false;
                 }
@@ -2883,51 +2936,44 @@ class CheckboxGroupComponent {
         }
         else {
             // Rule: If parent is unchecked and clicked, check it (select all enabled)
-            this.options.forEach((option) => {
+            currentOptions.forEach((option) => {
                 if (!option.disabled) {
                     option.checked = true;
                 }
             });
         }
+        this.optionsSignal.set(currentOptions);
         this.selectedChange.emit(this.selected);
     }
-    onChildChange(value, checked) {
+    onChildChange(value, event) {
+        const currentOptions = [...this.optionsSignal()];
         // Find and update the specific option
-        const option = this.options.find((opt) => opt.value === value);
+        const option = currentOptions.find((opt) => opt.value === value);
         if (option) {
-            option.checked = checked;
+            option.checked = event.checked;
         }
+        this.optionsSignal.set(currentOptions);
         this.selectedChange.emit(this.selected);
     }
     trackByValue(_idx, opt) {
         return opt.value;
     }
+    // Method to get options for template
+    getOptions() {
+        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: "14.0.0", version: "19.2.7", type: CheckboxGroupComponent, isStandalone: true, selector: "lib-checkbox-group", inputs: { legend: "legend", parentLabel: "parentLabel", name: "name", helperText: "helperText", options: "options", skeletonActive: "skeletonActive" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<fieldset class=\"c-checkbox-group\">\n  <lib-input-label\n    *ngIf=\"legend\"\n    [text]=\"legend\"\n    [required]=\"true\"\n    [size]=\"'sm'\"\n  ></lib-input-label>\n\n  <div class=\"c-checkbox-group__options\">\n    <lib-checkbox\n      [label]=\"parentLabel\"\n      [checked]=\"parentChecked\"\n      [indeterminate]=\"parentIndeterminate\"\n      (checkChanged)=\"onParentClick()\"\n      class=\"c-checkbox-group__parent\"\n      [skeletonActive]=\"skeletonActive\"\n      [required]=\"true\"\n    ></lib-checkbox>\n\n    <div class=\"c-checkbox-group__childrens\">\n      <lib-checkbox\n        *ngFor=\"let option of options; trackBy: trackByValue\"\n        [id]=\"name + '-' + option.value\"\n        [label]=\"option.label\"\n        [checked]=\"option.checked || false\"\n        [disabled]=\"option.disabled || false\"\n        [required]=\"option.required || false\"\n        (checkChanged)=\"onChildChange(option.value, $event)\"\n        class=\"c-checkbox-group__child\"\n        [skeletonActive]=\"skeletonActive\"\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", "id", "checked", "disabled", "error", "skeletonActive", "indeterminate", "innerHTML", "required"], outputs: ["checkChanged"] }, { 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"] }] });
+    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"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-checkbox-group', standalone: true, imports: [
+            args: [{ selector: 'lib-checkbox-group', imports: [
                         CommonModule,
                         CheckboxComponent,
                         InputLabelComponent,
                         HelperTextComponent,
-                    ], template: "<fieldset class=\"c-checkbox-group\">\n  <lib-input-label\n    *ngIf=\"legend\"\n    [text]=\"legend\"\n    [required]=\"true\"\n    [size]=\"'sm'\"\n  ></lib-input-label>\n\n  <div class=\"c-checkbox-group__options\">\n    <lib-checkbox\n      [label]=\"parentLabel\"\n      [checked]=\"parentChecked\"\n      [indeterminate]=\"parentIndeterminate\"\n      (checkChanged)=\"onParentClick()\"\n      class=\"c-checkbox-group__parent\"\n      [skeletonActive]=\"skeletonActive\"\n      [required]=\"true\"\n    ></lib-checkbox>\n\n    <div class=\"c-checkbox-group__childrens\">\n      <lib-checkbox\n        *ngFor=\"let option of options; trackBy: trackByValue\"\n        [id]=\"name + '-' + option.value\"\n        [label]=\"option.label\"\n        [checked]=\"option.checked || false\"\n        [disabled]=\"option.disabled || false\"\n        [required]=\"option.required || false\"\n        (checkChanged)=\"onChildChange(option.value, $event)\"\n        class=\"c-checkbox-group__child\"\n        [skeletonActive]=\"skeletonActive\"\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"] }]
-        }], propDecorators: { legend: [{
-                type: Input
-            }], parentLabel: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], helperText: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], skeletonActive: [{
-                type: Input
-            }], selectedChange: [{
-                type: Output
-            }] } });
+                    ], 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"] }]
+        }], ctorParameters: () => [] });
 
 class ChipsComponent {
     options = input([]);
@@ -4088,7 +4134,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["selectionContainer"], descendants: true, static: true }, { propertyName: "badgeElems", predicate: ["badgeElem"], descendants: true }], ngImport: i0, template: "<div\n  class=\"c-select\"\n  [class.c-select--multiple]=\"multiple\"\n  [class.c-select--full-width]=\"fullWidth\"\n>\n  <lib-input-label\n    *ngIf=\"label\"\n    [required]=\"required\"\n    [text]=\"label\"\n  ></lib-input-label>\n\n  <div\n    class=\"c-select__wrapper\"\n    aria-expanded=\"false\"\n    (click)=\"toggleDropdown()\"\n    (keydown.enter)=\"toggleDropdown()\"\n    (blur)=\"onBlur()\"\n    tabindex=\"0\"\n    role=\"combobox\"\n    aria-controls=\"selectionContainer\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-label]=\"label ? label : 'Select'\"\n  >\n    <div\n      class=\"c-select__selection\"\n      [class.is-error]=\"error\"\n      [class.is-success]=\"success\"\n      [class.is-disabled]=\"disabled\"\n      [class.is-readonly]=\"readonly\"\n      [class.c-select__selection--md]=\"size === 'md'\"\n      [class.c-select__selection--sm]=\"size === 'sm'\"\n      [class.c-select__selection--lg]=\"size === 'lg'\"\n      #selectionContainer\n      id=\"selectionContainer\"\n    >\n      <ng-container *ngIf=\"selectedOptions.length; else placeholderTpl\">\n        <span\n          #badgeElem\n          *ngFor=\"let sel of visibleBadges\"\n          class=\"c-select__badge\"\n          [class.c-select__badge--multiple]=\"multiple\"\n          [class.is-disabled]=\"disabled\"\n        >\n          {{ sel.label }}\n          <lib-icon\n            name=\"x-regular\"\n            *ngIf=\"multiple && !disabled\"\n            size=\"sm\"\n            (click)=\"onDelete(sel)\"\n            iconBefore\n          />\n          <lib-icon\n            name=\"x-regular\"\n            color=\"button-neutral-content-disabled\"\n            *ngIf=\"multiple && disabled\"\n            size=\"sm\"\n            iconBefore\n          />\n        </span>\n\n        <span\n          *ngIf=\"hiddenCount > 0\"\n          class=\"c-select__badge c-select__badge--more\"\n        >\n          +{{ hiddenCount }}\n        </span>\n      </ng-container>\n      <ng-template #placeholderTpl>{{ placeholder }}</ng-template>\n\n      <span class=\"c-select__arrow\" *ngIf=\"!isOpen\">\n        <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore/>\n      </span>\n      <span class=\"c-select__arrow\" *ngIf=\"isOpen\">\n        <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore/>\n      </span>\n    </div>\n\n    <div class=\"c-select__dropdown\" *ngIf=\"isOpen\" role=\"listbox\">\n      <div class=\"c-select__search-wrapper\" *ngIf=\"searchable\">\n        <lib-input-search\n          [(ngModel)]=\"filterText\"\n          (emitValue)=\"onSearch($event)\"\n          (input)=\"filterOptions()\"\n          placeholder=\"Search...\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Filtrar opciones\"\n        />\n      </div>\n\n      <div *ngFor=\"let group of filteredOptions\">\n        <div class=\"c-select__group-label\">{{ group.label }}</div>\n\n        <div\n          class=\"c-select__option\"\n          *ngFor=\"let opt of group.options\"\n          [class.is-selected]=\"isSelected(opt)\"\n          (click)=\"$event.stopPropagation(); selectOption(opt)\"\n          (keydown.enter)=\"$event.stopPropagation(); selectOption(opt)\"\n          tabindex=\"0\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n        >\n          <lib-checkbox\n            *ngIf=\"multiple\"\n            label=\"\"\n            [disabled]=\"disabled\"\n            [checked]=\"isSelected(opt)\"\n            class=\"c-tile__check\"\n          ></lib-checkbox>\n          <span class=\"c-select__option-label\">{{ opt.label }}</span>\n          <lib-icon\n          *ngIf=\"!multiple && !disabled && isSelected(opt)\"\n            name=\"checkcircle-regular\"\n            color=\"feedback-success-default\"\n            size=\"sm\"\n            iconBefore\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <span\n    *ngIf=\"helperText && !error && !success\"\n    id=\"password-input-helper\"\n    class=\"c-text-input__helper\"\n  >\n    <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n  </span>\n</div>\n", styles: [".c-select{display:flex;flex-direction:column;gap:var(--space-component-gap-sm, .25rem);max-width:300px}.c-select--full-width{max-width:100%}.c-select__search-wrapper{padding:var(--space-container-padding-sm, 1rem)}.c-select__dropdown{position:absolute;width:100%;max-height:25rem;overflow-y:auto;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scrollbar-width:thin;scrollbar-color:var(--color-effect-overlay, rgba(0, 0, 0, .16)) transparent}.c-select__badge{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge.is-disabled{background:var(--color-action-neutral-background-disabled, rgba(255, 255, 255, 0))}.c-select__badge--more{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge--multiple{display:flex;height:1.5rem;padding-left:var(--space-component-padding-sm, .5rem);padding-right:var(--space-component-padding-sm, .5rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);border-radius:var(--size-textfield-border-radius, .5rem);background:var(--color-feedback-neutral-surface-background, #dee7e6);color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--typography-label-xs-strong-family, Satoshi);font-size:var(--typography-label-xs-strong-size, .75rem);font-style:normal;font-weight:var(--typography-label-xs-strong-weight, 700);line-height:var(--typography-label-xs-strong-line-height, 1rem);letter-spacing:var(--typography-label-xs-strong-letter-spacing, 0rem)}.c-select__wrapper{position:relative}.c-select__group-label{display:flex;min-height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option{display:flex;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0));color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);cursor:pointer;justify-content:space-between}.c-select__option.is-selected{color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-select__option-label{display:flex;justify-self:flex-start;margin:0 auto 0 0}.c-select__selection{display:flex;padding:var(--space-component-padding-md, .75rem) 2.5rem var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-textfield-border-default, #929a99);background:var(--color-textfield-background-default, #fff);color:var(--color-textfield-content-placeholder, #676d6c);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem);cursor:pointer;overflow:hidden;position:relative}.c-select__selection:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-select__selection--sm,.c-select__selection--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-select__selection.is-error{border-color:var(--color-textfield-border-error)}.c-select__selection.is-success{border-color:var(--color-feedback-success-surface-border)}.c-select__selection.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-select__selection.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-select__arrow{position:absolute;right:1.5rem}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth"], outputs: ["emitValue"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "id", "checked", "disabled", "error", "skeletonActive", "indeterminate", "innerHTML", "required"], outputs: ["checkChanged"] }] });
+        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["selectionContainer"], descendants: true, static: true }, { propertyName: "badgeElems", predicate: ["badgeElem"], descendants: true }], ngImport: i0, template: "<div\n  class=\"c-select\"\n  [class.c-select--multiple]=\"multiple\"\n  [class.c-select--full-width]=\"fullWidth\"\n>\n  <lib-input-label\n    *ngIf=\"label\"\n    [required]=\"required\"\n    [text]=\"label\"\n  ></lib-input-label>\n\n  <div\n    class=\"c-select__wrapper\"\n    aria-expanded=\"false\"\n    (click)=\"toggleDropdown()\"\n    (keydown.enter)=\"toggleDropdown()\"\n    (blur)=\"onBlur()\"\n    tabindex=\"0\"\n    role=\"combobox\"\n    aria-controls=\"selectionContainer\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-label]=\"label ? label : 'Select'\"\n  >\n    <div\n      class=\"c-select__selection\"\n      [class.is-error]=\"error\"\n      [class.is-success]=\"success\"\n      [class.is-disabled]=\"disabled\"\n      [class.is-readonly]=\"readonly\"\n      [class.c-select__selection--md]=\"size === 'md'\"\n      [class.c-select__selection--sm]=\"size === 'sm'\"\n      [class.c-select__selection--lg]=\"size === 'lg'\"\n      #selectionContainer\n      id=\"selectionContainer\"\n    >\n      <ng-container *ngIf=\"selectedOptions.length; else placeholderTpl\">\n        <span\n          #badgeElem\n          *ngFor=\"let sel of visibleBadges\"\n          class=\"c-select__badge\"\n          [class.c-select__badge--multiple]=\"multiple\"\n          [class.is-disabled]=\"disabled\"\n        >\n          {{ sel.label }}\n          <lib-icon\n            name=\"x-regular\"\n            *ngIf=\"multiple && !disabled\"\n            size=\"sm\"\n            (click)=\"onDelete(sel)\"\n            iconBefore\n          />\n          <lib-icon\n            name=\"x-regular\"\n            color=\"button-neutral-content-disabled\"\n            *ngIf=\"multiple && disabled\"\n            size=\"sm\"\n            iconBefore\n          />\n        </span>\n\n        <span\n          *ngIf=\"hiddenCount > 0\"\n          class=\"c-select__badge c-select__badge--more\"\n        >\n          +{{ hiddenCount }}\n        </span>\n      </ng-container>\n      <ng-template #placeholderTpl>{{ placeholder }}</ng-template>\n\n      <span class=\"c-select__arrow\" *ngIf=\"!isOpen\">\n        <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n      </span>\n      <span class=\"c-select__arrow\" *ngIf=\"isOpen\">\n        <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n      </span>\n    </div>\n\n    <div class=\"c-select__dropdown\" *ngIf=\"isOpen\" role=\"listbox\">\n      <div class=\"c-select__search-wrapper\" *ngIf=\"searchable\">\n        <lib-input-search\n          [(ngModel)]=\"filterText\"\n          (emitValue)=\"onSearch($event)\"\n          (input)=\"filterOptions()\"\n          placeholder=\"Search...\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Filtrar opciones\"\n        />\n      </div>\n\n      <div *ngFor=\"let group of filteredOptions\">\n        <div class=\"c-select__group-label\">{{ group.label }}</div>\n\n        <div\n          class=\"c-select__option\"\n          *ngFor=\"let opt of group.options\"\n          [class.is-selected]=\"isSelected(opt)\"\n          (click)=\"$event.stopPropagation(); selectOption(opt)\"\n          (keydown.enter)=\"$event.stopPropagation(); selectOption(opt)\"\n          tabindex=\"0\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n        >\n          <lib-checkbox\n            *ngIf=\"multiple\"\n            label=\"\"\n            [disabled]=\"disabled\"\n            [state]=\"isSelected(opt) ? 'checked' : 'unchecked'\"\n            class=\"c-tile__check\"\n          ></lib-checkbox>\n          <span class=\"c-select__option-label\">{{ opt.label }}</span>\n          <lib-icon\n            *ngIf=\"!multiple && !disabled && isSelected(opt)\"\n            name=\"checkcircle-regular\"\n            color=\"feedback-success-default\"\n            size=\"sm\"\n            iconBefore\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <span\n    *ngIf=\"helperText && !error && !success\"\n    id=\"password-input-helper\"\n    class=\"c-text-input__helper\"\n  >\n    <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n  </span>\n</div>\n", styles: [".c-select{display:flex;flex-direction:column;gap:var(--space-component-gap-sm, .25rem);max-width:300px}.c-select--full-width{max-width:100%}.c-select__search-wrapper{padding:var(--space-container-padding-sm, 1rem)}.c-select__dropdown{position:absolute;width:100%;max-height:25rem;overflow-y:auto;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scrollbar-width:thin;scrollbar-color:var(--color-effect-overlay, rgba(0, 0, 0, .16)) transparent}.c-select__badge{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge.is-disabled{background:var(--color-action-neutral-background-disabled, rgba(255, 255, 255, 0))}.c-select__badge--more{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge--multiple{display:flex;height:1.5rem;padding-left:var(--space-component-padding-sm, .5rem);padding-right:var(--space-component-padding-sm, .5rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);border-radius:var(--size-textfield-border-radius, .5rem);background:var(--color-feedback-neutral-surface-background, #dee7e6);color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--typography-label-xs-strong-family, Satoshi);font-size:var(--typography-label-xs-strong-size, .75rem);font-style:normal;font-weight:var(--typography-label-xs-strong-weight, 700);line-height:var(--typography-label-xs-strong-line-height, 1rem);letter-spacing:var(--typography-label-xs-strong-letter-spacing, 0rem)}.c-select__wrapper{position:relative}.c-select__group-label{display:flex;min-height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option{display:flex;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0));color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);cursor:pointer;justify-content:space-between}.c-select__option.is-selected{color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-select__option-label{display:flex;justify-self:flex-start;margin:0 auto 0 0}.c-select__selection{display:flex;padding:var(--space-component-padding-md, .75rem) 2.5rem var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-textfield-border-default, #929a99);background:var(--color-textfield-background-default, #fff);color:var(--color-textfield-content-placeholder, #676d6c);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem);cursor:pointer;overflow:hidden;position:relative}.c-select__selection:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-select__selection--sm,.c-select__selection--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-select__selection.is-error{border-color:var(--color-textfield-border-error)}.c-select__selection.is-success{border-color:var(--color-feedback-success-surface-border)}.c-select__selection.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-select__selection.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-select__arrow{position:absolute;right:1.5rem}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth"], outputs: ["emitValue"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -4107,7 +4153,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--multiple]=\"multiple\"\n  [class.c-select--full-width]=\"fullWidth\"\n>\n  <lib-input-label\n    *ngIf=\"label\"\n    [required]=\"required\"\n    [text]=\"label\"\n  ></lib-input-label>\n\n  <div\n    class=\"c-select__wrapper\"\n    aria-expanded=\"false\"\n    (click)=\"toggleDropdown()\"\n    (keydown.enter)=\"toggleDropdown()\"\n    (blur)=\"onBlur()\"\n    tabindex=\"0\"\n    role=\"combobox\"\n    aria-controls=\"selectionContainer\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-label]=\"label ? label : 'Select'\"\n  >\n    <div\n      class=\"c-select__selection\"\n      [class.is-error]=\"error\"\n      [class.is-success]=\"success\"\n      [class.is-disabled]=\"disabled\"\n      [class.is-readonly]=\"readonly\"\n      [class.c-select__selection--md]=\"size === 'md'\"\n      [class.c-select__selection--sm]=\"size === 'sm'\"\n      [class.c-select__selection--lg]=\"size === 'lg'\"\n      #selectionContainer\n      id=\"selectionContainer\"\n    >\n      <ng-container *ngIf=\"selectedOptions.length; else placeholderTpl\">\n        <span\n          #badgeElem\n          *ngFor=\"let sel of visibleBadges\"\n          class=\"c-select__badge\"\n          [class.c-select__badge--multiple]=\"multiple\"\n          [class.is-disabled]=\"disabled\"\n        >\n          {{ sel.label }}\n          <lib-icon\n            name=\"x-regular\"\n            *ngIf=\"multiple && !disabled\"\n            size=\"sm\"\n            (click)=\"onDelete(sel)\"\n            iconBefore\n          />\n          <lib-icon\n            name=\"x-regular\"\n            color=\"button-neutral-content-disabled\"\n            *ngIf=\"multiple && disabled\"\n            size=\"sm\"\n            iconBefore\n          />\n        </span>\n\n        <span\n          *ngIf=\"hiddenCount > 0\"\n          class=\"c-select__badge c-select__badge--more\"\n        >\n          +{{ hiddenCount }}\n        </span>\n      </ng-container>\n      <ng-template #placeholderTpl>{{ placeholder }}</ng-template>\n\n      <span class=\"c-select__arrow\" *ngIf=\"!isOpen\">\n        <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore/>\n      </span>\n      <span class=\"c-select__arrow\" *ngIf=\"isOpen\">\n        <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore/>\n      </span>\n    </div>\n\n    <div class=\"c-select__dropdown\" *ngIf=\"isOpen\" role=\"listbox\">\n      <div class=\"c-select__search-wrapper\" *ngIf=\"searchable\">\n        <lib-input-search\n          [(ngModel)]=\"filterText\"\n          (emitValue)=\"onSearch($event)\"\n          (input)=\"filterOptions()\"\n          placeholder=\"Search...\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Filtrar opciones\"\n        />\n      </div>\n\n      <div *ngFor=\"let group of filteredOptions\">\n        <div class=\"c-select__group-label\">{{ group.label }}</div>\n\n        <div\n          class=\"c-select__option\"\n          *ngFor=\"let opt of group.options\"\n          [class.is-selected]=\"isSelected(opt)\"\n          (click)=\"$event.stopPropagation(); selectOption(opt)\"\n          (keydown.enter)=\"$event.stopPropagation(); selectOption(opt)\"\n          tabindex=\"0\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n        >\n          <lib-checkbox\n            *ngIf=\"multiple\"\n            label=\"\"\n            [disabled]=\"disabled\"\n            [checked]=\"isSelected(opt)\"\n            class=\"c-tile__check\"\n          ></lib-checkbox>\n          <span class=\"c-select__option-label\">{{ opt.label }}</span>\n          <lib-icon\n          *ngIf=\"!multiple && !disabled && isSelected(opt)\"\n            name=\"checkcircle-regular\"\n            color=\"feedback-success-default\"\n            size=\"sm\"\n            iconBefore\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <span\n    *ngIf=\"helperText && !error && !success\"\n    id=\"password-input-helper\"\n    class=\"c-text-input__helper\"\n  >\n    <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n  </span>\n</div>\n", styles: [".c-select{display:flex;flex-direction:column;gap:var(--space-component-gap-sm, .25rem);max-width:300px}.c-select--full-width{max-width:100%}.c-select__search-wrapper{padding:var(--space-container-padding-sm, 1rem)}.c-select__dropdown{position:absolute;width:100%;max-height:25rem;overflow-y:auto;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scrollbar-width:thin;scrollbar-color:var(--color-effect-overlay, rgba(0, 0, 0, .16)) transparent}.c-select__badge{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge.is-disabled{background:var(--color-action-neutral-background-disabled, rgba(255, 255, 255, 0))}.c-select__badge--more{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge--multiple{display:flex;height:1.5rem;padding-left:var(--space-component-padding-sm, .5rem);padding-right:var(--space-component-padding-sm, .5rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);border-radius:var(--size-textfield-border-radius, .5rem);background:var(--color-feedback-neutral-surface-background, #dee7e6);color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--typography-label-xs-strong-family, Satoshi);font-size:var(--typography-label-xs-strong-size, .75rem);font-style:normal;font-weight:var(--typography-label-xs-strong-weight, 700);line-height:var(--typography-label-xs-strong-line-height, 1rem);letter-spacing:var(--typography-label-xs-strong-letter-spacing, 0rem)}.c-select__wrapper{position:relative}.c-select__group-label{display:flex;min-height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option{display:flex;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0));color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);cursor:pointer;justify-content:space-between}.c-select__option.is-selected{color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-select__option-label{display:flex;justify-self:flex-start;margin:0 auto 0 0}.c-select__selection{display:flex;padding:var(--space-component-padding-md, .75rem) 2.5rem var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-textfield-border-default, #929a99);background:var(--color-textfield-background-default, #fff);color:var(--color-textfield-content-placeholder, #676d6c);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem);cursor:pointer;overflow:hidden;position:relative}.c-select__selection:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-select__selection--sm,.c-select__selection--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-select__selection.is-error{border-color:var(--color-textfield-border-error)}.c-select__selection.is-success{border-color:var(--color-feedback-success-surface-border)}.c-select__selection.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-select__selection.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-select__arrow{position:absolute;right:1.5rem}\n"] }]
+                    ], template: "<div\n  class=\"c-select\"\n  [class.c-select--multiple]=\"multiple\"\n  [class.c-select--full-width]=\"fullWidth\"\n>\n  <lib-input-label\n    *ngIf=\"label\"\n    [required]=\"required\"\n    [text]=\"label\"\n  ></lib-input-label>\n\n  <div\n    class=\"c-select__wrapper\"\n    aria-expanded=\"false\"\n    (click)=\"toggleDropdown()\"\n    (keydown.enter)=\"toggleDropdown()\"\n    (blur)=\"onBlur()\"\n    tabindex=\"0\"\n    role=\"combobox\"\n    aria-controls=\"selectionContainer\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-label]=\"label ? label : 'Select'\"\n  >\n    <div\n      class=\"c-select__selection\"\n      [class.is-error]=\"error\"\n      [class.is-success]=\"success\"\n      [class.is-disabled]=\"disabled\"\n      [class.is-readonly]=\"readonly\"\n      [class.c-select__selection--md]=\"size === 'md'\"\n      [class.c-select__selection--sm]=\"size === 'sm'\"\n      [class.c-select__selection--lg]=\"size === 'lg'\"\n      #selectionContainer\n      id=\"selectionContainer\"\n    >\n      <ng-container *ngIf=\"selectedOptions.length; else placeholderTpl\">\n        <span\n          #badgeElem\n          *ngFor=\"let sel of visibleBadges\"\n          class=\"c-select__badge\"\n          [class.c-select__badge--multiple]=\"multiple\"\n          [class.is-disabled]=\"disabled\"\n        >\n          {{ sel.label }}\n          <lib-icon\n            name=\"x-regular\"\n            *ngIf=\"multiple && !disabled\"\n            size=\"sm\"\n            (click)=\"onDelete(sel)\"\n            iconBefore\n          />\n          <lib-icon\n            name=\"x-regular\"\n            color=\"button-neutral-content-disabled\"\n            *ngIf=\"multiple && disabled\"\n            size=\"sm\"\n            iconBefore\n          />\n        </span>\n\n        <span\n          *ngIf=\"hiddenCount > 0\"\n          class=\"c-select__badge c-select__badge--more\"\n        >\n          +{{ hiddenCount }}\n        </span>\n      </ng-container>\n      <ng-template #placeholderTpl>{{ placeholder }}</ng-template>\n\n      <span class=\"c-select__arrow\" *ngIf=\"!isOpen\">\n        <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n      </span>\n      <span class=\"c-select__arrow\" *ngIf=\"isOpen\">\n        <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n      </span>\n    </div>\n\n    <div class=\"c-select__dropdown\" *ngIf=\"isOpen\" role=\"listbox\">\n      <div class=\"c-select__search-wrapper\" *ngIf=\"searchable\">\n        <lib-input-search\n          [(ngModel)]=\"filterText\"\n          (emitValue)=\"onSearch($event)\"\n          (input)=\"filterOptions()\"\n          placeholder=\"Search...\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Filtrar opciones\"\n        />\n      </div>\n\n      <div *ngFor=\"let group of filteredOptions\">\n        <div class=\"c-select__group-label\">{{ group.label }}</div>\n\n        <div\n          class=\"c-select__option\"\n          *ngFor=\"let opt of group.options\"\n          [class.is-selected]=\"isSelected(opt)\"\n          (click)=\"$event.stopPropagation(); selectOption(opt)\"\n          (keydown.enter)=\"$event.stopPropagation(); selectOption(opt)\"\n          tabindex=\"0\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n        >\n          <lib-checkbox\n            *ngIf=\"multiple\"\n            label=\"\"\n            [disabled]=\"disabled\"\n            [state]=\"isSelected(opt) ? 'checked' : 'unchecked'\"\n            class=\"c-tile__check\"\n          ></lib-checkbox>\n          <span class=\"c-select__option-label\">{{ opt.label }}</span>\n          <lib-icon\n            *ngIf=\"!multiple && !disabled && isSelected(opt)\"\n            name=\"checkcircle-regular\"\n            color=\"feedback-success-default\"\n            size=\"sm\"\n            iconBefore\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <span\n    *ngIf=\"helperText && !error && !success\"\n    id=\"password-input-helper\"\n    class=\"c-text-input__helper\"\n  >\n    <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n  </span>\n</div>\n", styles: [".c-select{display:flex;flex-direction:column;gap:var(--space-component-gap-sm, .25rem);max-width:300px}.c-select--full-width{max-width:100%}.c-select__search-wrapper{padding:var(--space-container-padding-sm, 1rem)}.c-select__dropdown{position:absolute;width:100%;max-height:25rem;overflow-y:auto;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scrollbar-width:thin;scrollbar-color:var(--color-effect-overlay, rgba(0, 0, 0, .16)) transparent}.c-select__badge{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge.is-disabled{background:var(--color-action-neutral-background-disabled, rgba(255, 255, 255, 0))}.c-select__badge--more{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge--multiple{display:flex;height:1.5rem;padding-left:var(--space-component-padding-sm, .5rem);padding-right:var(--space-component-padding-sm, .5rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);border-radius:var(--size-textfield-border-radius, .5rem);background:var(--color-feedback-neutral-surface-background, #dee7e6);color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--typography-label-xs-strong-family, Satoshi);font-size:var(--typography-label-xs-strong-size, .75rem);font-style:normal;font-weight:var(--typography-label-xs-strong-weight, 700);line-height:var(--typography-label-xs-strong-line-height, 1rem);letter-spacing:var(--typography-label-xs-strong-letter-spacing, 0rem)}.c-select__wrapper{position:relative}.c-select__group-label{display:flex;min-height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option{display:flex;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0));color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);cursor:pointer;justify-content:space-between}.c-select__option.is-selected{color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-select__option-label{display:flex;justify-self:flex-start;margin:0 auto 0 0}.c-select__selection{display:flex;padding:var(--space-component-padding-md, .75rem) 2.5rem var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-textfield-border-default, #929a99);background:var(--color-textfield-background-default, #fff);color:var(--color-textfield-content-placeholder, #676d6c);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem);cursor:pointer;overflow:hidden;position:relative}.c-select__selection:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-select__selection--sm,.c-select__selection--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-select__selection.is-error{border-color:var(--color-textfield-border-error)}.c-select__selection.is-success{border-color:var(--color-feedback-success-surface-border)}.c-select__selection.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-select__selection.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-select__arrow{position:absolute;right:1.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{
                 type: Input
             }], multiple: [{
@@ -4179,11 +4225,11 @@ class SocialLoginComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SocialLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SocialLoginComponent, isStandalone: true, selector: "lib-social-login", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  type=\"button\"\n  [ngClass]=\"classes\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"text()\"\n>\n  <!-- Square variant: centered icon only -->\n  @if (variant() === 'square') {\n  <div class=\"c-social-login__icon-container\">\n    <lib-icon [name]=\"getIconName()\" size=\"lg\"> </lib-icon>\n  </div>\n  }\n\n  <!-- Text variant: icon + text -->\n  @if (variant() === 'text') {\n  <div class=\"c-social-login__content\">\n    <lib-icon [name]=\"getIconName()\" size=\"lg\"> </lib-icon>\n    <span class=\"c-social-login__text\">{{ text() }}</span>\n  </div>\n  }\n</button>\n", styles: [".c-social-login{display:flex;align-items:center;justify-content:center;width:100%;height:48px;cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);border:var(--size-button-border-width) solid var(--color-action-neutral-border-default);border-radius:var(--size-button-border-radius);background-color:var(--color-button-neutral-background-default);color:var(--color-core-content-default)}.c-social-login:hover{background-color:var(--color-button-neutral-background-hover);border-color:var(--color-action-neutral-border-hover);color:var(--color-action-neutral-content-hover)}.c-social-login:active{background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-action-neutral-border-pressed);color:var(--color-action-neutral-content-pressed)}.c-social-login:focus-visible{outline:2px solid var(--color-effect-focus-color);outline-offset:2px;border-color:var(--color-action-neutral-border-default)}.c-social-login:disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);cursor:not-allowed;opacity:.24}.c-social-login--text{padding-inline:var(--space-component-padding-xl);gap:var(--space-component-gap-md)}.c-social-login--text .c-social-login__content{display:flex;align-items:center;justify-content:center;gap:var(--space-component-gap-md);width:100%}.c-social-login--square{width:48px}.c-social-login--square .c-social-login__icon-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SocialLoginComponent, isStandalone: true, selector: "lib-social-login", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  type=\"button\"\n  [ngClass]=\"classes\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"text()\"\n>\n  <!-- Square variant: centered icon only -->\n  @if (variant() === 'square') {\n  <div class=\"c-social-login__icon-container\">\n    <lib-icon [name]=\"getIconName()\" size=\"lg\"> </lib-icon>\n  </div>\n  }\n\n  <!-- Text variant: icon + text -->\n  @if (variant() === 'text') {\n  <div class=\"c-social-login__content\">\n    <div class=\"c-social-login__content__icon-container\">\n      <lib-icon [name]=\"getIconName()\" size=\"lg\"> </lib-icon>\n    </div>\n    <span class=\"c-social-login__text\">{{ text() }}</span>\n  </div>\n  }\n</button>\n", styles: [".c-social-login{display:flex;align-items:center;justify-content:center;width:100%;height:48px;cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);border:var(--size-button-border-width) solid var(--color-core-border-default);border-radius:var(--size-button-border-radius);background-color:var(--color-button-neutral-background-default);color:var(--color-button-neutral-content-default)}.c-social-login:hover{background-color:var(--color-button-neutral-background-hover);border-color:var(--color-core-border-default);color:var(--color-button-neutral-content-hover)}.c-social-login:active{background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-core-border-default);color:var(--color-button-neutral-content-pressed)}.c-social-login:focus-visible{color:var(--color-button-neutral-content-default);outline:2px solid var(--color-effect-focus-color);outline-offset:2px}.c-social-login:disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-core-border-soft);color:var(--color-button-neutral-content-disabled);cursor:not-allowed}.c-social-login:disabled .c-social-login__icon-container,.c-social-login:disabled .c-social-login__content__icon-container{opacity:.24}.c-social-login--text{padding-inline:var(--space-component-padding-xl);gap:var(--space-component-gap-md)}.c-social-login--text .c-social-login__content{display:flex;align-items:center;justify-content:center;gap:var(--space-component-gap-md);width:100%}.c-social-login--text .c-social-login__content__icon-container{display:flex;align-items:center}.c-social-login--square{width:48px}.c-social-login--square .c-social-login__icon-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SocialLoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-social-login', imports: [CommonModule, IconComponent], template: "<button\n  type=\"button\"\n  [ngClass]=\"classes\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"text()\"\n>\n  <!-- Square variant: centered icon only -->\n  @if (variant() === 'square') {\n  <div class=\"c-social-login__icon-container\">\n    <lib-icon [name]=\"getIconName()\" size=\"lg\"> </lib-icon>\n  </div>\n  }\n\n  <!-- Text variant: icon + text -->\n  @if (variant() === 'text') {\n  <div class=\"c-social-login__content\">\n    <lib-icon [name]=\"getIconName()\" size=\"lg\"> </lib-icon>\n    <span class=\"c-social-login__text\">{{ text() }}</span>\n  </div>\n  }\n</button>\n", styles: [".c-social-login{display:flex;align-items:center;justify-content:center;width:100%;height:48px;cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);border:var(--size-button-border-width) solid var(--color-action-neutral-border-default);border-radius:var(--size-button-border-radius);background-color:var(--color-button-neutral-background-default);color:var(--color-core-content-default)}.c-social-login:hover{background-color:var(--color-button-neutral-background-hover);border-color:var(--color-action-neutral-border-hover);color:var(--color-action-neutral-content-hover)}.c-social-login:active{background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-action-neutral-border-pressed);color:var(--color-action-neutral-content-pressed)}.c-social-login:focus-visible{outline:2px solid var(--color-effect-focus-color);outline-offset:2px;border-color:var(--color-action-neutral-border-default)}.c-social-login:disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);cursor:not-allowed;opacity:.24}.c-social-login--text{padding-inline:var(--space-component-padding-xl);gap:var(--space-component-gap-md)}.c-social-login--text .c-social-login__content{display:flex;align-items:center;justify-content:center;gap:var(--space-component-gap-md);width:100%}.c-social-login--square{width:48px}.c-social-login--square .c-social-login__icon-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
+            args: [{ selector: 'lib-social-login', imports: [CommonModule, IconComponent], template: "<button\n  type=\"button\"\n  [ngClass]=\"classes\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"text()\"\n>\n  <!-- Square variant: centered icon only -->\n  @if (variant() === 'square') {\n  <div class=\"c-social-login__icon-container\">\n    <lib-icon [name]=\"getIconName()\" size=\"lg\"> </lib-icon>\n  </div>\n  }\n\n  <!-- Text variant: icon + text -->\n  @if (variant() === 'text') {\n  <div class=\"c-social-login__content\">\n    <div class=\"c-social-login__content__icon-container\">\n      <lib-icon [name]=\"getIconName()\" size=\"lg\"> </lib-icon>\n    </div>\n    <span class=\"c-social-login__text\">{{ text() }}</span>\n  </div>\n  }\n</button>\n", styles: [".c-social-login{display:flex;align-items:center;justify-content:center;width:100%;height:48px;cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);border:var(--size-button-border-width) solid var(--color-core-border-default);border-radius:var(--size-button-border-radius);background-color:var(--color-button-neutral-background-default);color:var(--color-button-neutral-content-default)}.c-social-login:hover{background-color:var(--color-button-neutral-background-hover);border-color:var(--color-core-border-default);color:var(--color-button-neutral-content-hover)}.c-social-login:active{background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-core-border-default);color:var(--color-button-neutral-content-pressed)}.c-social-login:focus-visible{color:var(--color-button-neutral-content-default);outline:2px solid var(--color-effect-focus-color);outline-offset:2px}.c-social-login:disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-core-border-soft);color:var(--color-button-neutral-content-disabled);cursor:not-allowed}.c-social-login:disabled .c-social-login__icon-container,.c-social-login:disabled .c-social-login__content__icon-container{opacity:.24}.c-social-login--text{padding-inline:var(--space-component-padding-xl);gap:var(--space-component-gap-md)}.c-social-login--text .c-social-login__content{display:flex;align-items:center;justify-content:center;gap:var(--space-component-gap-md);width:100%}.c-social-login--text .c-social-login__content__icon-container{display:flex;align-items:center}.c-social-login--square{width:48px}.c-social-login--square .c-social-login__icon-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
         }] });
 
 class SwitchComponent {
@@ -4344,7 +4390,7 @@ class TextInputComponent {
                 useExisting: forwardRef(() => TextInputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n  <lib-input-label\n    *ngIf=\"label\"\n    [required]=\"required\"\n    [for]=\"name\"\n    [text]=\"label\"\n  ></lib-input-label>\n\n  <input\n    [type]=\"type\"\n    [class]=\"inputClass.join(' ')\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"_value\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-labelledby]=\"label\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <span\n    *ngIf=\"helperText && !error && !success\"\n    id=\"text-input-helper\"\n    class=\"c-text-input__helper\"\n    [class]=\"helperClass\"\n  >\n    {{ helperText }}\n  </span>\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-icon name=\"warning-regular\" color=\"feedback-danger-default\" size=\"md\"></lib-icon>{{ alertText }}\n  </span>\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-icon name=\"checkcircle-regular\" color=\"feedback-success-default\" size=\"md\"></lib-icon>{{ successText }}\n  </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
+        ], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n  <lib-input-label\n    *ngIf=\"label\"\n    [required]=\"required\"\n    [for]=\"name\"\n    [text]=\"label\"\n  ></lib-input-label>\n\n  <input\n    [type]=\"type\"\n    [class]=\"inputClass.join(' ')\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"_value\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-labelledby]=\"label\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <span\n    *ngIf=\"helperText && !error && !success\"\n    id=\"text-input-helper\"\n    class=\"c-text-input__helper\"\n    [class]=\"helperClass\"\n  >\n    {{ helperText }}\n  </span>\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-icon\n      name=\"warning-regular\"\n      color=\"feedback-danger-default\"\n      size=\"md\"\n    ></lib-icon\n    >{{ alertText }}\n  </span>\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-icon\n      name=\"checkcircle-regular\"\n      color=\"feedback-success-default\"\n      size=\"md\"\n    ></lib-icon\n    >{{ successText }}\n  </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
@@ -4359,7 +4405,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             useExisting: forwardRef(() => TextInputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n  <lib-input-label\n    *ngIf=\"label\"\n    [required]=\"required\"\n    [for]=\"name\"\n    [text]=\"label\"\n  ></lib-input-label>\n\n  <input\n    [type]=\"type\"\n    [class]=\"inputClass.join(' ')\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"_value\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-labelledby]=\"label\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <span\n    *ngIf=\"helperText && !error && !success\"\n    id=\"text-input-helper\"\n    class=\"c-text-input__helper\"\n    [class]=\"helperClass\"\n  >\n    {{ helperText }}\n  </span>\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-icon name=\"warning-regular\" color=\"feedback-danger-default\" size=\"md\"></lib-icon>{{ alertText }}\n  </span>\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-icon name=\"checkcircle-regular\" color=\"feedback-success-default\" size=\"md\"></lib-icon>{{ successText }}\n  </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"] }]
+                    ], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n  <lib-input-label\n    *ngIf=\"label\"\n    [required]=\"required\"\n    [for]=\"name\"\n    [text]=\"label\"\n  ></lib-input-label>\n\n  <input\n    [type]=\"type\"\n    [class]=\"inputClass.join(' ')\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"_value\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-labelledby]=\"label\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <span\n    *ngIf=\"helperText && !error && !success\"\n    id=\"text-input-helper\"\n    class=\"c-text-input__helper\"\n    [class]=\"helperClass\"\n  >\n    {{ helperText }}\n  </span>\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-icon\n      name=\"warning-regular\"\n      color=\"feedback-danger-default\"\n      size=\"md\"\n    ></lib-icon\n    >{{ alertText }}\n  </span>\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-icon\n      name=\"checkcircle-regular\"\n      color=\"feedback-success-default\"\n      size=\"md\"\n    ></lib-icon\n    >{{ successText }}\n  </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], name: [{
@@ -4530,11 +4576,11 @@ class TileComponent {
         this.valueExport.emit(this.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", title: "title", name: "name", value: "value", disabled: "disabled" }, outputs: { valueExport: "valueExport" }, ngImport: i0, template: "<div class=\"c-tile\" [class.c-tile--selected]=\"value\" [class.c-tile--neutral]=\"variant === 'neutral'\" [class.c-tile--disabled]=\"disabled\" tabindex=\"0\" role=\"button\" (click)=\"onClick()\" (keyup.enter)=\"onClick()\">\n    <div class=\"c-tile__wrapper\">\n        <p class=\"c-tile__title\">{{ title }}</p>\n        <lib-radio *ngIf=\"variant === 'radio'\" [name]=\"name\" label=\"\" [disabled]=\"disabled\" [value]=\"value ? 'true' : ''\" class=\"c-tile__check\"></lib-radio>\n        <lib-checkbox *ngIf=\"variant === 'checkbox'\" label=\"\" [disabled]=\"disabled\" [checked]=\"value\" class=\"c-tile__check\"></lib-checkbox>\n    </div>\n    <div class=\"c-tile__content\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [".c-tile{display:flex;width:18rem;padding:var(--space-page-padding-sm) var(--space-container-padding-sm);flex-direction:column;align-items:flex-start;gap:var(--space-container-gap-sm);border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--disabled,.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #EDFDFA)}.c-tile--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile:focus-visible .c-tile__check{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile__title{margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile__check{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["name", "label", "value", "disabled", "checked", "error", "isLoading", "id"], outputs: ["optionSelected"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "id", "checked", "disabled", "error", "skeletonActive", "indeterminate", "innerHTML", "required"], outputs: ["checkChanged"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", title: "title", name: "name", value: "value", disabled: "disabled" }, outputs: { valueExport: "valueExport" }, ngImport: i0, template: "<div\n  class=\"c-tile\"\n  [class.c-tile--selected]=\"value\"\n  [class.c-tile--neutral]=\"variant === 'neutral'\"\n  [class.c-tile--disabled]=\"disabled\"\n  tabindex=\"0\"\n  role=\"button\"\n  (click)=\"onClick()\"\n  (keyup.enter)=\"onClick()\"\n>\n  <div class=\"c-tile__wrapper\">\n    <p class=\"c-tile__title\">{{ title }}</p>\n    <lib-radio\n      *ngIf=\"variant === 'radio'\"\n      [name]=\"name\"\n      label=\"\"\n      [disabled]=\"disabled\"\n      [value]=\"value ? 'true' : ''\"\n      class=\"c-tile__check\"\n    ></lib-radio>\n    <lib-checkbox\n      *ngIf=\"variant === 'checkbox'\"\n      label=\"\"\n      [disabled]=\"disabled\"\n      [state]=\"value ? 'checked' : 'unchecked'\"\n      class=\"c-tile__check\"\n    ></lib-checkbox>\n  </div>\n  <div class=\"c-tile__content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".c-tile{display:flex;width:18rem;padding:var(--space-page-padding-sm) var(--space-container-padding-sm);flex-direction:column;align-items:flex-start;gap:var(--space-container-gap-sm);border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--disabled,.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #EDFDFA)}.c-tile--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile:focus-visible .c-tile__check{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile__title{margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile__check{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["name", "label", "value", "disabled", "checked", "error", "isLoading", "id"], outputs: ["optionSelected"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tile', imports: [CommonModule, RadioComponent, CheckboxComponent], template: "<div class=\"c-tile\" [class.c-tile--selected]=\"value\" [class.c-tile--neutral]=\"variant === 'neutral'\" [class.c-tile--disabled]=\"disabled\" tabindex=\"0\" role=\"button\" (click)=\"onClick()\" (keyup.enter)=\"onClick()\">\n    <div class=\"c-tile__wrapper\">\n        <p class=\"c-tile__title\">{{ title }}</p>\n        <lib-radio *ngIf=\"variant === 'radio'\" [name]=\"name\" label=\"\" [disabled]=\"disabled\" [value]=\"value ? 'true' : ''\" class=\"c-tile__check\"></lib-radio>\n        <lib-checkbox *ngIf=\"variant === 'checkbox'\" label=\"\" [disabled]=\"disabled\" [checked]=\"value\" class=\"c-tile__check\"></lib-checkbox>\n    </div>\n    <div class=\"c-tile__content\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [".c-tile{display:flex;width:18rem;padding:var(--space-page-padding-sm) var(--space-container-padding-sm);flex-direction:column;align-items:flex-start;gap:var(--space-container-gap-sm);border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--disabled,.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #EDFDFA)}.c-tile--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile:focus-visible .c-tile__check{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile__title{margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile__check{display:flex;align-items:center;justify-content:center}\n"] }]
+            args: [{ selector: 'lib-tile', imports: [CommonModule, RadioComponent, CheckboxComponent], template: "<div\n  class=\"c-tile\"\n  [class.c-tile--selected]=\"value\"\n  [class.c-tile--neutral]=\"variant === 'neutral'\"\n  [class.c-tile--disabled]=\"disabled\"\n  tabindex=\"0\"\n  role=\"button\"\n  (click)=\"onClick()\"\n  (keyup.enter)=\"onClick()\"\n>\n  <div class=\"c-tile__wrapper\">\n    <p class=\"c-tile__title\">{{ title }}</p>\n    <lib-radio\n      *ngIf=\"variant === 'radio'\"\n      [name]=\"name\"\n      label=\"\"\n      [disabled]=\"disabled\"\n      [value]=\"value ? 'true' : ''\"\n      class=\"c-tile__check\"\n    ></lib-radio>\n    <lib-checkbox\n      *ngIf=\"variant === 'checkbox'\"\n      label=\"\"\n      [disabled]=\"disabled\"\n      [state]=\"value ? 'checked' : 'unchecked'\"\n      class=\"c-tile__check\"\n    ></lib-checkbox>\n  </div>\n  <div class=\"c-tile__content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".c-tile{display:flex;width:18rem;padding:var(--space-page-padding-sm) var(--space-container-padding-sm);flex-direction:column;align-items:flex-start;gap:var(--space-container-gap-sm);border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--disabled,.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #EDFDFA)}.c-tile--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile:focus-visible .c-tile__check{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile__title{margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile__check{display:flex;align-items:center;justify-content:center}\n"] }]
         }], propDecorators: { variant: [{
                 type: Input
             }], title: [{