@crowdfarming/oliva-ds 1.73.0 → 1.74.0-rc.2

package/fesm2022/crowdfarming-oliva-ds.mjs

@@ -8,6 +8,7 @@ import { RouterModule, RouterLink, Router, NavigationStart } from '@angular/rout
 import * as i1$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { map, distinctUntilChanged } from 'rxjs/operators';
 import { filter } from 'rxjs';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i1$4 from '@angular/cdk/overlay';
@@ -4510,52 +4511,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 type: Output
             }] } });
 
-class InputNumberComponent {
-    initialValue = input(undefined);
+class TextInputComponent {
     label = '';
+    name = '';
     placeholder = '';
     helperText = '';
-    alertText = '';
-    successText = '';
     error = false;
     success = false;
+    successText = '';
+    alertText = '';
     disabled = false;
+    readonly = false;
     required = false;
     optionalLabel = '';
-    readonly = false;
     isLoading = false;
+    type = 'text';
+    inputmode;
+    step;
     size = 'md';
-    variant = 'default';
     fullWidth = false;
-    minimum = 1;
-    maximum;
-    step = 1;
+    autocomplete = 'off';
+    regex;
     emitValue = new EventEmitter();
-    value = signal(this.minimum);
-    // Effective maximum value (Infinity if not set)
-    get maxValue() {
-        return this.maximum ?? Infinity;
-    }
-    // Computed signals to disable buttons at limits
-    isAtMinimum = computed(() => this.value() <= this.minimum);
-    isAtMaximum = computed(() => this.maxValue !== Infinity && this.value() >= this.maxValue);
-    constructor() {
-        this.value.set(this.minimum);
-        effect(() => {
-            const initial = this.initialValue();
-            if (initial !== undefined) {
-                let clampedValue = Math.max(this.minimum, initial);
-                if (this.maxValue !== Infinity) {
-                    clampedValue = Math.min(this.maxValue, clampedValue);
-                }
-                this.value.set(clampedValue);
-            }
-        });
-    }
+    _value = '';
     onChangeFn = () => { };
     onTouchedFn = () => { };
+    isFullPattern() {
+        return (!!this.regex &&
+            this.regex.startsWith('^') &&
+            this.regex.endsWith('$'));
+    }
+    testRegex(value) {
+        if (!this.regex)
+            return true;
+        return new RegExp(this.regex).test(value);
+    }
     writeValue(value) {
-        this.value.set(value ?? this.minimum);
+        this._value = value ?? '';
     }
     registerOnChange(fn) {
         this.onChangeFn = fn;
@@ -4570,117 +4562,241 @@ class InputNumberComponent {
         return [
             'c-text-input__input',
             `c-text-input__input--${this.size}`,
-            this.error ? 'is-error' : '',
-            this.success ? 'is-success' : '',
+            this.error ? 'is-error' : this.success ? 'is-success' : 'is-default',
             this.disabled ? 'is-disabled' : '',
             this.readonly ? 'is-readonly' : '',
             this.isLoading ? 'is-loading' : '',
         ].filter(Boolean);
     }
     get ariaDescribedBy() {
-        return this.helperText ? 'search-input-helper' : null;
+        return this.helperText ? 'text-input-helper' : null;
     }
-    onType(event) {
-        const input = event.target;
-        let newVal = input.value === '' ? this.minimum : Number(input.value);
-        // Clamp value to minimum, and to maximum if defined
-        if (newVal < this.minimum) {
-            newVal = this.minimum;
-        }
-        else if (this.maxValue !== Infinity && newVal > this.maxValue) {
-            newVal = this.maxValue;
-        }
-        // Update the input value to reflect the clamped value
-        input.value = newVal.toString();
-        this.value.set(newVal);
-        this.onChangeFn(newVal);
-        this.emitValue.emit(newVal);
-    }
-    upNumber() {
-        const currentValue = this.value();
-        const newValue = currentValue + this.step;
-        if (this.maxValue === Infinity || newValue <= this.maxValue) {
-            this.value.set(newValue);
-            this.onChangeFn(newValue);
-            this.emitValue.emit(newValue);
+    // Blocks chars (no visual feedback), input sanitizes as fallback
+    onBeforeInput(event) {
+        if (!this.regex || !event.data)
+            return;
+        // For full string patterns, validate the entire resulting value
+        if (this.isFullPattern()) {
+            const input = event.target;
+            const start = input.selectionStart ?? 0;
+            const end = input.selectionEnd ?? 0;
+            const newValue = input.value.slice(0, start) + event.data + input.value.slice(end);
+            if (!this.testRegex(newValue)) {
+                event.preventDefault();
+            }
+        }
+        else {
+            // For char patterns, block invalid characters
+            if (!this.testRegex(event.data)) {
+                event.preventDefault();
+            }
         }
     }
-    downNumber() {
-        const currentValue = this.value();
-        const newValue = currentValue - this.step;
-        if (newValue >= this.minimum) {
-            this.value.set(newValue);
-            this.onChangeFn(newValue);
-            this.emitValue.emit(newValue);
+    onInput(event) {
+        const input = event.target;
+        // Sanitize if regex exists
+        if (this.regex) {
+            const sanitized = this.isFullPattern()
+                ? this.testRegex(input.value)
+                    ? input.value
+                    : this._value
+                : this.sanitizeValue(input.value);
+            if (sanitized !== input.value) {
+                input.value = sanitized;
+            }
+            this._value = sanitized;
+        }
+        else {
+            this._value = input.value;
         }
+        this.onChangeFn(this._value);
+        this.emitValue.emit(this._value);
+    }
+    sanitizeValue(value) {
+        if (!this.regex)
+            return value;
+        return [...value].filter((char) => this.testRegex(char)).join('');
     }
     onBlur() {
         this.onTouchedFn();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: InputNumberComponent, isStandalone: true, selector: "lib-input-number", inputs: { initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: false, isRequired: false, transformFunction: null }, alertText: { classPropertyName: "alertText", publicName: "alertText", isSignal: false, isRequired: false, transformFunction: null }, successText: { classPropertyName: "successText", publicName: "successText", isSignal: false, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: null }, minimum: { classPropertyName: "minimum", publicName: "minimum", isSignal: false, isRequired: false, transformFunction: null }, maximum: { classPropertyName: "maximum", publicName: "maximum", isSignal: false, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { emitValue: "emitValue" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "lib-text-input", inputs: { label: "label", name: "name", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", disabled: "disabled", readonly: "readonly", required: "required", optionalLabel: "optionalLabel", isLoading: "isLoading", type: "type", inputmode: "inputmode", step: "step", size: "size", fullWidth: "fullWidth", autocomplete: "autocomplete", regex: "regex" }, outputs: { emitValue: "emitValue" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => InputNumberComponent),
+                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    size=\"sm\"\n    [required]=\"required\"\n    [text]=\"label\"\n    [textOptional]=\"optionalLabel\"\n    [isLoading]=\"isLoading\"\n  ></lib-input-label>\n\n  <div\n    class=\"c-text-input__wrapper\"\n    [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n  >\n    <input\n      type=\"number\"\n      [value]=\"isLoading ? '' : value()\"\n      [placeholder]=\"isLoading ? '' : placeholder\"\n      [disabled]=\"disabled || isLoading\"\n      [readonly]=\"readonly\"\n      [class]=\"inputClass.join(' ')\"\n      [attr.aria-invalid]=\"error ? 'true' : null\"\n      [attr.aria-describedby]=\"ariaDescribedBy\"\n      [required]=\"required\"\n      aria-label=\"number\"\n      (input)=\"onType($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <lib-button-icon\n      ariaLabel=\"menos\"\n      [disabled]=\"disabled || readonly || isAtMinimum() || isLoading\"\n      [loading]=\"false\"\n      variant=\"neutral\"\n      size=\"sm\"\n      class=\"c-text-input__less\"\n      iconName=\"minus-regular\"\n      (click)=\"downNumber()\"\n    >\n    </lib-button-icon>\n    <lib-button-icon\n      ariaLabel=\"m\u00E1s\"\n      [disabled]=\"disabled || readonly || isAtMaximum() || isLoading\"\n      [loading]=\"false\"\n      variant=\"neutral\"\n      size=\"sm\"\n      class=\"c-text-input__up\"\n      iconName=\"plus-regular\"\n      (click)=\"upNumber()\"\n    >\n    </lib-button-icon>\n  </div>\n\n  <span\n    *ngIf=\"helperText && !error && !success\"\n    id=\"search-input-helper\"\n    class=\"c-text-input__helper\"\n  >\n    <lib-helper-text\n      [text]=\"helperText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-helper-text\n      variant=\"danger\"\n      [text]=\"alertText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-helper-text\n      variant=\"success\"\n      [text]=\"successText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\n  </span>\n</div>\n", styles: [".c-text-input{position:relative;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{--input-padding-y: var(--space-component-padding-md);--input-padding-x: 2rem;width:100%;height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x);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);text-align:center}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: 2rem}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: 2rem}.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-strong)}.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__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.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)}.c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__less{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__input{text-align:left}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\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", "isLoading", "textOptional"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
+        ], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n  <lib-input-label\n    *ngIf=\"label\"\n    size=\"sm\"\n    [required]=\"required\"\n    [for]=\"name\"\n    [text]=\"label\"\n    [textOptional]=\"optionalLabel\"\n    [isLoading]=\"isLoading\"\n  ></lib-input-label>\n\n  <input\n    [attr.autocomplete]=\"autocomplete\"\n    [id]=\"name\"\n    [name]=\"name\"\n    [type]=\"type\"\n    [attr.inputmode]=\"inputmode\"\n    [attr.step]=\"step\"\n    [class]=\"inputClass.join(' ')\"\n    [placeholder]=\"isLoading ? '' : placeholder\"\n    [disabled]=\"disabled || isLoading\"\n    [readonly]=\"readonly\"\n    [value]=\"isLoading ? '' : _value\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-label]=\"name\"\n    [attr.aria-labelledby]=\"name\"\n    (beforeinput)=\"onBeforeInput($event)\"\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  >\n    <lib-helper-text\n      [text]=\"helperText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-helper-text\n      variant=\"danger\"\n      [text]=\"alertText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-helper-text\n      variant=\"success\"\n      [text]=\"successText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\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{--input-padding-y: var(--space-component-padding-md);--input-padding-x: var(--space-component-padding-lg);height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x);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-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: 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-strong)}.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__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.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", "isLoading", "textOptional"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-input-number', standalone: true, imports: [
+            args: [{ selector: 'lib-text-input', standalone: true, imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         InputLabelComponent,
-                        ButtonIconComponent,
                         HelperTextComponent,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => InputNumberComponent),
+                            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    size=\"sm\"\n    [required]=\"required\"\n    [text]=\"label\"\n    [textOptional]=\"optionalLabel\"\n    [isLoading]=\"isLoading\"\n  ></lib-input-label>\n\n  <div\n    class=\"c-text-input__wrapper\"\n    [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n  >\n    <input\n      type=\"number\"\n      [value]=\"isLoading ? '' : value()\"\n      [placeholder]=\"isLoading ? '' : placeholder\"\n      [disabled]=\"disabled || isLoading\"\n      [readonly]=\"readonly\"\n      [class]=\"inputClass.join(' ')\"\n      [attr.aria-invalid]=\"error ? 'true' : null\"\n      [attr.aria-describedby]=\"ariaDescribedBy\"\n      [required]=\"required\"\n      aria-label=\"number\"\n      (input)=\"onType($event)\"\n      (blur)=\"onBlur()\"\n    />\n    <lib-button-icon\n      ariaLabel=\"menos\"\n      [disabled]=\"disabled || readonly || isAtMinimum() || isLoading\"\n      [loading]=\"false\"\n      variant=\"neutral\"\n      size=\"sm\"\n      class=\"c-text-input__less\"\n      iconName=\"minus-regular\"\n      (click)=\"downNumber()\"\n    >\n    </lib-button-icon>\n    <lib-button-icon\n      ariaLabel=\"m\u00E1s\"\n      [disabled]=\"disabled || readonly || isAtMaximum() || isLoading\"\n      [loading]=\"false\"\n      variant=\"neutral\"\n      size=\"sm\"\n      class=\"c-text-input__up\"\n      iconName=\"plus-regular\"\n      (click)=\"upNumber()\"\n    >\n    </lib-button-icon>\n  </div>\n\n  <span\n    *ngIf=\"helperText && !error && !success\"\n    id=\"search-input-helper\"\n    class=\"c-text-input__helper\"\n  >\n    <lib-helper-text\n      [text]=\"helperText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-helper-text\n      variant=\"danger\"\n      [text]=\"alertText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-helper-text\n      variant=\"success\"\n      [text]=\"successText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\n  </span>\n</div>\n", styles: [".c-text-input{position:relative;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{--input-padding-y: var(--space-component-padding-md);--input-padding-x: 2rem;width:100%;height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x);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);text-align:center}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: 2rem}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: 2rem}.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-strong)}.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__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.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)}.c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__less{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__input{text-align:left}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{
+                    ], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n  <lib-input-label\n    *ngIf=\"label\"\n    size=\"sm\"\n    [required]=\"required\"\n    [for]=\"name\"\n    [text]=\"label\"\n    [textOptional]=\"optionalLabel\"\n    [isLoading]=\"isLoading\"\n  ></lib-input-label>\n\n  <input\n    [attr.autocomplete]=\"autocomplete\"\n    [id]=\"name\"\n    [name]=\"name\"\n    [type]=\"type\"\n    [attr.inputmode]=\"inputmode\"\n    [attr.step]=\"step\"\n    [class]=\"inputClass.join(' ')\"\n    [placeholder]=\"isLoading ? '' : placeholder\"\n    [disabled]=\"disabled || isLoading\"\n    [readonly]=\"readonly\"\n    [value]=\"isLoading ? '' : _value\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-label]=\"name\"\n    [attr.aria-labelledby]=\"name\"\n    (beforeinput)=\"onBeforeInput($event)\"\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  >\n    <lib-helper-text\n      [text]=\"helperText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-helper-text\n      variant=\"danger\"\n      [text]=\"alertText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-helper-text\n      variant=\"success\"\n      [text]=\"successText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\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{--input-padding-y: var(--space-component-padding-md);--input-padding-x: var(--space-component-padding-lg);height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x);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-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: 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-strong)}.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__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.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: [{
                 type: Input
             }], placeholder: [{
                 type: Input
             }], helperText: [{
                 type: Input
-            }], alertText: [{
-                type: Input
-            }], successText: [{
-                type: Input
             }], error: [{
                 type: Input
             }], success: [{
                 type: Input
+            }], successText: [{
+                type: Input
+            }], alertText: [{
+                type: Input
             }], disabled: [{
                 type: Input
+            }], readonly: [{
+                type: Input
             }], required: [{
                 type: Input
             }], optionalLabel: [{
                 type: Input
-            }], readonly: [{
-                type: Input
             }], isLoading: [{
                 type: Input
-            }], size: [{
+            }], type: [{
                 type: Input
-            }], variant: [{
+            }], inputmode: [{
                 type: Input
-            }], fullWidth: [{
+            }], step: [{
                 type: Input
-            }], minimum: [{
+            }], size: [{
                 type: Input
-            }], maximum: [{
+            }], fullWidth: [{
                 type: Input
-            }], step: [{
+            }], autocomplete: [{
+                type: Input
+            }], regex: [{
                 type: Input
             }], emitValue: [{
                 type: Output
             }] } });
 
+/**
+ * Number input component with automatic comma/dot conversion and validation
+ * Wraps lib-text-input with number formatting logic
+ */
+class InputNumberComponent {
+    // Inputs
+    label = input('');
+    placeholder = input('');
+    required = input(false);
+    fullWidth = input(true);
+    error = input(false);
+    alertText = input('');
+    helperText = input('');
+    readonly = input(false);
+    name = input('');
+    size = input('md');
+    autocomplete = input('off');
+    success = input(false);
+    successText = input('');
+    isLoading = input(false);
+    allowDecimals = input(true);
+    allowNegative = input(false);
+    inputmode = input(undefined);
+    regex = input('');
+    decimalSeparator = input('comma');
+    maxDecimals = input(undefined);
+    // Computed values
+    effectiveInputmode = computed(() => this.inputmode() ?? (this.allowDecimals() ? 'decimal' : 'numeric'));
+    regexPattern = computed(() => {
+        if (this.regex())
+            return this.regex();
+        const negative = this.allowNegative() ? '-?' : '';
+        const integer = '[0-9]*';
+        if (!this.allowDecimals())
+            return `^${negative}${integer}$`;
+        const separator = this.decimalSeparator() === 'comma' ? ',' : '\\.';
+        const decimal = this.maxDecimals() !== undefined
+            ? `[0-9]{0,${this.maxDecimals()}}`
+            : '[0-9]*';
+        return `^${negative}${integer}${separator}?${decimal}$`;
+    });
+    // Internal control
+    internalControl = new FormControl('', { nonNullable: true });
+    // ControlValueAccessor callbacks
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Parse on every change; distinctUntilChanged prevents redundant emissions
+        this.internalControl.valueChanges
+            .pipe(map((value) => this.parseNumber(value)), distinctUntilChanged(), takeUntilDestroyed())
+            .subscribe((value) => this.onChange(value));
+    }
+    // Convert string to number
+    parseNumber(value) {
+        if (!value)
+            return null;
+        if (value.endsWith('.') || value.endsWith(',')) {
+            return null;
+        }
+        const normalized = value.replace(',', '.');
+        const parsed = parseFloat(normalized);
+        return isNaN(parsed) ? null : parsed;
+    }
+    // Convert number to display string
+    formatNumber(value) {
+        const str = value.toString();
+        return this.decimalSeparator() === 'comma' ? str.replace('.', ',') : str;
+    }
+    // Write value
+    writeValue(value) {
+        const formatted = value === null || value === undefined ? '' : this.formatNumber(value);
+        this.internalControl.setValue(formatted, { emitEvent: false });
+    }
+    // Register change
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    // Register touched
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Disabled state
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.internalControl.disable({ emitEvent: false });
+        }
+        else {
+            this.internalControl.enable({ emitEvent: false });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: InputNumberComponent, isStandalone: true, selector: "lib-input-number", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, alertText: { classPropertyName: "alertText", publicName: "alertText", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, successText: { classPropertyName: "successText", publicName: "successText", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, allowDecimals: { classPropertyName: "allowDecimals", publicName: "allowDecimals", isSignal: true, isRequired: false, transformFunction: null }, allowNegative: { classPropertyName: "allowNegative", publicName: "allowNegative", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, regex: { classPropertyName: "regex", publicName: "regex", isSignal: true, isRequired: false, transformFunction: null }, decimalSeparator: { classPropertyName: "decimalSeparator", publicName: "decimalSeparator", isSignal: true, isRequired: false, transformFunction: null }, maxDecimals: { classPropertyName: "maxDecimals", publicName: "maxDecimals", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputNumberComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<lib-text-input\n  [formControl]=\"internalControl\"\n  [label]=\"label()\"\n  [name]=\"name()\"\n  [placeholder]=\"placeholder()\"\n  [required]=\"required()\"\n  [fullWidth]=\"fullWidth()\"\n  [error]=\"error()\"\n  [alertText]=\"alertText()\"\n  [helperText]=\"helperText()\"\n  [readonly]=\"readonly()\"\n  [size]=\"size()\"\n  [autocomplete]=\"autocomplete()\"\n  [success]=\"success()\"\n  [successText]=\"successText()\"\n  [isLoading]=\"isLoading()\"\n  type=\"text\"\n  [inputmode]=\"effectiveInputmode()\"\n  [regex]=\"regexPattern()\"\n>\n</lib-text-input>\n", styles: [""], dependencies: [{ kind: "component", type: TextInputComponent, selector: "lib-text-input", inputs: ["label", "name", "placeholder", "helperText", "error", "success", "successText", "alertText", "disabled", "readonly", "required", "optionalLabel", "isLoading", "type", "inputmode", "step", "size", "fullWidth", "autocomplete", "regex"], outputs: ["emitValue"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-input-number', standalone: true, imports: [TextInputComponent, ReactiveFormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputNumberComponent),
+                            multi: true,
+                        },
+                    ], template: "<lib-text-input\n  [formControl]=\"internalControl\"\n  [label]=\"label()\"\n  [name]=\"name()\"\n  [placeholder]=\"placeholder()\"\n  [required]=\"required()\"\n  [fullWidth]=\"fullWidth()\"\n  [error]=\"error()\"\n  [alertText]=\"alertText()\"\n  [helperText]=\"helperText()\"\n  [readonly]=\"readonly()\"\n  [size]=\"size()\"\n  [autocomplete]=\"autocomplete()\"\n  [success]=\"success()\"\n  [successText]=\"successText()\"\n  [isLoading]=\"isLoading()\"\n  type=\"text\"\n  [inputmode]=\"effectiveInputmode()\"\n  [regex]=\"regexPattern()\"\n>\n</lib-text-input>\n" }]
+        }], ctorParameters: () => [] });
+
 class InputPaymentComponent {
     label = '';
     placeholder = '';
@@ -5126,6 +5242,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             args: [{ selector: 'lib-link', imports: [NgClass, IconComponent, RouterLink], template: "@if (!external()) {\n<a\n  [ngClass]=\"[\n    'c-link',\n    variantClass(),\n    sizeClass(),\n    weightClass(),\n    underlineClass(),\n    disabled() ? 'c-link--disabled' : ''\n  ]\"\n  [routerLink]=\"href()\"\n  [queryParams]=\"queryParams()\"\n  [attr.aria-disabled]=\"finalAriaDisabled()\"\n  (click)=\"onClick($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (mousedown)=\"onMouseDown()\"\n  (mouseup)=\"onMouseUp()\"\n>\n  @if (iconBefore()) {\n  <span class=\"c-link__icon\">\n    <lib-icon\n      [name]=\"iconBefore()!\"\n      [size]=\"iconSize()\"\n      [color]=\"iconColor()\"\n    ></lib-icon>\n  </span>\n  }\n  <span class=\"c-link__text\">{{ text() }}</span>\n  @if (iconAfter()) {\n  <span class=\"c-link__icon\">\n    <lib-icon\n      [name]=\"iconAfter()!\"\n      [size]=\"iconSize()\"\n      [color]=\"iconColor()\"\n    ></lib-icon>\n  </span>\n  }\n</a>\n} @else {\n<a\n  [ngClass]=\"[\n    'c-link',\n    variantClass(),\n    sizeClass(),\n    weightClass(),\n    underlineClass(),\n    disabled() ? 'c-link--disabled' : ''\n  ]\"\n  [href]=\"href()\"\n  [target]=\"target()\"\n  [attr.rel]=\"rel()\"\n  [attr.aria-disabled]=\"finalAriaDisabled()\"\n  [attr.aria-label]=\"finalAriaLabel()\"\n  (click)=\"onClick($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (mousedown)=\"onMouseDown()\"\n  (mouseup)=\"onMouseUp()\"\n>\n  @if (iconBefore()) {\n  <span class=\"c-link__icon\">\n    <lib-icon\n      [name]=\"iconBefore()!\"\n      [size]=\"iconSize()\"\n      [color]=\"iconColor()\"\n    ></lib-icon>\n  </span>\n  }\n  <span class=\"c-link__text\">{{ text() }}</span>\n  @if (external()) {\n  <span class=\"sr-only\">(opens in a new tab)</span>\n  } @if (iconAfter()) {\n  <span class=\"c-link__icon\">\n    <lib-icon\n      [name]=\"iconAfter()!\"\n      [size]=\"iconSize()\"\n      [color]=\"iconColor()\"\n    ></lib-icon>\n  </span>\n  }\n</a>\n}\n", styles: [".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}.c-link{position:relative;display:flex;align-items:center;width:fit-content;gap:var(--space-component-gap-xs);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);text-decoration:none;border-radius:var(--size-border-radius-sm);cursor:pointer}.c-link--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link--bold{font-weight:var(--typography-font-weight-bold)}.c-link--underline{text-decoration:underline}.c-link__icon{display:flex;align-items:center}.c-link:hover:not(.c-link--underline){text-decoration:underline}.c-link:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-link--primary{color:var(--color-action-primary-content-default)}.c-link--primary:hover{color:var(--color-action-primary-content-hover)}.c-link--primary:active{color:var(--color-action-primary-content-pressed)}.c-link--neutral{color:var(--color-action-neutral-content-default)}.c-link--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link--neutral:active{color:var(--color-action-neutral-content-pressed)}.c-link--inverse{color:var(--color-action-inverse-content-default)}.c-link--inverse:hover{color:var(--color-action-inverse-content-hover)}.c-link--inverse:active{color:var(--color-action-inverse-content-pressed)}.c-link--danger{color:var(--color-action-danger-content-default)}.c-link--danger:hover{color:var(--color-action-danger-content-hover)}.c-link--danger:active{color:var(--color-action-danger-content-pressed)}.c-link--disabled{cursor:not-allowed}.c-link--disabled:hover{text-decoration:none}.c-link--disabled.c-link--primary{color:var(--color-action-primary-content-disabled)}.c-link--disabled.c-link--neutral{color:var(--color-action-neutral-content-disabled)}.c-link--disabled.c-link--inverse{color:var(--color-action-inverse-content-disabled)}.c-link--disabled.c-link--danger{color:var(--color-action-danger-content-disabled)}\n"] }]
         }] });
 
+class TagComponent {
+    size = input('xs');
+    variant = input('neutral');
+    text = input('');
+    extraClass = input('');
+    showBadge = input(true);
+    closeActive = input(true);
+    emphasis = input(false);
+    skeletonActive = input(false);
+    closeEvent = output();
+    onClose() {
+        this.closeEvent.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TagComponent, isStandalone: true, selector: "lib-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, closeActive: { classPropertyName: "closeActive", publicName: "closeActive", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "@if (skeletonActive()) {\n<div class=\"skeleton\"></div>\n} @else {\n<span\n  [ngClass]=\"[\n    'c-tag',\n    variant() ? 'c-tag--' + variant() : '',\n    extraClass() ? extraClass() : '',\n    emphasis() ? 'c-tag--emphasis' : '',\n    closeActive() ? 'c-tag--close-active' : '',\n    size() ? 'c-tag--' + size() : '',\n    emphasis() && closeActive() ? 'c-tag--emphasis-close-active' : ''\n  ]\"\n>\n  @if (showBadge()) {\n  <span class=\"c-tag__dot\"></span>\n  }\n  <span class=\"c-tag__text\">{{ text() }}</span>\n  @if (closeActive()) {\n  <lib-button-icon\n    role=\"button\"\n    [ariaLabel]=\"variant()\"\n    [loading]=\"false\"\n    [disabled]=\"variant() === 'disabled'\"\n    [variant]=\"emphasis() ? 'inverse' : 'neutral'\"\n    [size]=\"size() === 'xs' ? 'xs' : 'sm'\"\n    class=\"c-tag__close\"\n    iconName=\"x-regular\"\n    (click)=\"onClose()\"\n  >\n  </lib-button-icon>\n  }\n</span>\n}\n", styles: [".c-tag{display:inline-flex;height:1.5rem;max-width:100%;padding:0 var(--space-component-padding-sm);align-items:center;gap:var(--space-component-gap-sm);flex-shrink:0;border-radius:var(--size-border-radius-md);text-align:center;font-family:var(--typography-label-xs-strong-family);font-size:var(--typography-label-xs-strong-size);font-weight:var(--typography-label-xs-strong-weight);line-height:var(--typography-label-xs-strong-line-height);letter-spacing:var(--typography-label-xs-strong-letter-spacing)}.c-tag--sm{height:2rem;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);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-tag__dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.c-tag__text{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag--close-active{padding-right:0}.c-tag--emphasis-close-active{border-top-right-radius:10px;border-bottom-right-radius:10px}.c-tag--danger{background:var(--color-feedback-danger-soft);color:var(--color-feedback-danger-stronger)}.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-stronger)}.c-tag--warning{color:var(--color-feedback-warning-stronger);background:var(--color-feedback-warning-soft)}.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-stronger)}.c-tag--success{color:var(--color-feedback-success-stronger);background:var(--color-feedback-success-soft)}.c-tag--success .c-tag__dot{background:var(--color-feedback-success-stronger)}.c-tag--info{background:var(--color-feedback-info-soft);color:var(--color-feedback-info-stronger)}.c-tag--info .c-tag__dot{background:var(--color-feedback-info-stronger)}.c-tag--neutral{background:var(--color-feedback-neutral-soft);color:var(--color-feedback-neutral-stronger)}.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-stronger)}.c-tag--primary{background:var(--color-decorative-primary-soft);color:var(--color-decorative-primary-stronger)}.c-tag--primary .c-tag__dot{background:var(--color-decorative-primary-stronger)}.c-tag--secondary{background:var(--color-decorative-secondary-soft);color:var(--color-decorative-secondary-stronger)}.c-tag--secondary .c-tag__dot{background:var(--color-decorative-secondary-stronger)}.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--danger{color:var(--color-feedback-danger-subtle);background:var(--color-feedback-danger-default)}.c-tag--emphasis.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-subtle)}.c-tag--emphasis.c-tag--warning{color:var(--color-feedback-warning-subtle);background:var(--color-feedback-warning-default)}.c-tag--emphasis.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-subtle)}.c-tag--emphasis.c-tag--success{color:var(--color-feedback-success-subtle);background:var(--color-feedback-success-default)}.c-tag--emphasis.c-tag--success .c-tag__dot{background:var(--color-feedback-success-subtle)}.c-tag--emphasis.c-tag--info{color:var(--color-feedback-info-subtle);background:var(--color-feedback-info-default)}.c-tag--emphasis.c-tag--info .c-tag__dot{background:var(--color-feedback-info-subtle)}.c-tag--emphasis.c-tag--neutral{color:var(--color-feedback-neutral-subtle);background:var(--color-feedback-neutral-default)}.c-tag--emphasis.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-subtle)}.c-tag--emphasis.c-tag--primary{background:var(--color-decorative-primary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--primary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary{background:var(--color-decorative-secondary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.skeleton{width:4rem;height:1.5rem;background:var(--color-effect-skeleton-soft);border-radius:var(--size-border-radius-md)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tag', imports: [NgClass, ButtonIconComponent], template: "@if (skeletonActive()) {\n<div class=\"skeleton\"></div>\n} @else {\n<span\n  [ngClass]=\"[\n    'c-tag',\n    variant() ? 'c-tag--' + variant() : '',\n    extraClass() ? extraClass() : '',\n    emphasis() ? 'c-tag--emphasis' : '',\n    closeActive() ? 'c-tag--close-active' : '',\n    size() ? 'c-tag--' + size() : '',\n    emphasis() && closeActive() ? 'c-tag--emphasis-close-active' : ''\n  ]\"\n>\n  @if (showBadge()) {\n  <span class=\"c-tag__dot\"></span>\n  }\n  <span class=\"c-tag__text\">{{ text() }}</span>\n  @if (closeActive()) {\n  <lib-button-icon\n    role=\"button\"\n    [ariaLabel]=\"variant()\"\n    [loading]=\"false\"\n    [disabled]=\"variant() === 'disabled'\"\n    [variant]=\"emphasis() ? 'inverse' : 'neutral'\"\n    [size]=\"size() === 'xs' ? 'xs' : 'sm'\"\n    class=\"c-tag__close\"\n    iconName=\"x-regular\"\n    (click)=\"onClose()\"\n  >\n  </lib-button-icon>\n  }\n</span>\n}\n", styles: [".c-tag{display:inline-flex;height:1.5rem;max-width:100%;padding:0 var(--space-component-padding-sm);align-items:center;gap:var(--space-component-gap-sm);flex-shrink:0;border-radius:var(--size-border-radius-md);text-align:center;font-family:var(--typography-label-xs-strong-family);font-size:var(--typography-label-xs-strong-size);font-weight:var(--typography-label-xs-strong-weight);line-height:var(--typography-label-xs-strong-line-height);letter-spacing:var(--typography-label-xs-strong-letter-spacing)}.c-tag--sm{height:2rem;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);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-tag__dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.c-tag__text{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag--close-active{padding-right:0}.c-tag--emphasis-close-active{border-top-right-radius:10px;border-bottom-right-radius:10px}.c-tag--danger{background:var(--color-feedback-danger-soft);color:var(--color-feedback-danger-stronger)}.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-stronger)}.c-tag--warning{color:var(--color-feedback-warning-stronger);background:var(--color-feedback-warning-soft)}.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-stronger)}.c-tag--success{color:var(--color-feedback-success-stronger);background:var(--color-feedback-success-soft)}.c-tag--success .c-tag__dot{background:var(--color-feedback-success-stronger)}.c-tag--info{background:var(--color-feedback-info-soft);color:var(--color-feedback-info-stronger)}.c-tag--info .c-tag__dot{background:var(--color-feedback-info-stronger)}.c-tag--neutral{background:var(--color-feedback-neutral-soft);color:var(--color-feedback-neutral-stronger)}.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-stronger)}.c-tag--primary{background:var(--color-decorative-primary-soft);color:var(--color-decorative-primary-stronger)}.c-tag--primary .c-tag__dot{background:var(--color-decorative-primary-stronger)}.c-tag--secondary{background:var(--color-decorative-secondary-soft);color:var(--color-decorative-secondary-stronger)}.c-tag--secondary .c-tag__dot{background:var(--color-decorative-secondary-stronger)}.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--danger{color:var(--color-feedback-danger-subtle);background:var(--color-feedback-danger-default)}.c-tag--emphasis.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-subtle)}.c-tag--emphasis.c-tag--warning{color:var(--color-feedback-warning-subtle);background:var(--color-feedback-warning-default)}.c-tag--emphasis.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-subtle)}.c-tag--emphasis.c-tag--success{color:var(--color-feedback-success-subtle);background:var(--color-feedback-success-default)}.c-tag--emphasis.c-tag--success .c-tag__dot{background:var(--color-feedback-success-subtle)}.c-tag--emphasis.c-tag--info{color:var(--color-feedback-info-subtle);background:var(--color-feedback-info-default)}.c-tag--emphasis.c-tag--info .c-tag__dot{background:var(--color-feedback-info-subtle)}.c-tag--emphasis.c-tag--neutral{color:var(--color-feedback-neutral-subtle);background:var(--color-feedback-neutral-default)}.c-tag--emphasis.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-subtle)}.c-tag--emphasis.c-tag--primary{background:var(--color-decorative-primary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--primary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary{background:var(--color-decorative-secondary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.skeleton{width:4rem;height:1.5rem;background:var(--color-effect-skeleton-soft);border-radius:var(--size-border-radius-md)}\n"] }]
+        }] });
+
 class MenuChildItemComponent {
     label = input('');
     icon = input('');
@@ -5154,27 +5291,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             args: [{ selector: 'lib-menu-child-item', imports: [NgClass], template: "<button\n  [ngClass]=\"[\n    'c-menu-child-item',\n    selected() ? 'c-menu-child-item--selected' : '',\n    disabled() ? 'c-menu-child-item--disabled' : ''\n  ]\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"label()\"\n  [attr.aria-selected]=\"selected()\"\n  (click)=\"handleClick()\"\n>\n  @if (label()) {\n  <span class=\"c-menu-child-item__label\">{{ label() }}</span>\n  }\n</button>\n", styles: [".c-menu-child-item{display:flex;align-items:center;width:100%;min-height:40px;padding:var(--space-component-padding-none, 0) var(--space-component-padding-sm, 8px) var(--space-component-padding-none) var(--space-component-padding-2xl);border:none;background:var(--color-menu-item-background-default);cursor:pointer;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-action-neutral-content-default);text-align:left;transition:all var(--transition-base-duration) var(--transition-base-easing);border-radius:var(--size-border-radius-md)}.c-menu-child-item:hover:not(:disabled){background-color:var(--color-menu-item-background-hover)}.c-menu-child-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-child-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--space-component-padding-lg)}.c-menu-child-item--selected{background:var(--color-menu-item-child-background-active);color:var(--color-core-content-default)}.c-menu-child-item--selected:hover{background-color:var(--color-action-primary-background-selected-hover)}.c-menu-child-item--selected:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-child-item--disabled{cursor:not-allowed;color:var(--color-menu-item-content-disabled)}.c-menu-child-item--disabled:hover{background-color:transparent}\n"] }]
         }] });
 
-class TagComponent {
-    size = input('xs');
-    variant = input('neutral');
-    text = input('');
-    extraClass = input('');
-    showBadge = input(true);
-    closeActive = input(true);
-    emphasis = input(false);
-    skeletonActive = input(false);
-    closeEvent = output();
-    onClose() {
-        this.closeEvent.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TagComponent, isStandalone: true, selector: "lib-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, closeActive: { classPropertyName: "closeActive", publicName: "closeActive", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "@if (skeletonActive()) {\n<div class=\"skeleton\"></div>\n} @else {\n<span\n  [ngClass]=\"[\n    'c-tag',\n    variant() ? 'c-tag--' + variant() : '',\n    extraClass() ? extraClass() : '',\n    emphasis() ? 'c-tag--emphasis' : '',\n    closeActive() ? 'c-tag--close-active' : '',\n    size() ? 'c-tag--' + size() : '',\n    emphasis() && closeActive() ? 'c-tag--emphasis-close-active' : ''\n  ]\"\n>\n  @if (showBadge()) {\n  <span class=\"c-tag__dot\"></span>\n  }\n  <span class=\"c-tag__text\">{{ text() }}</span>\n  @if (closeActive()) {\n  <lib-button-icon\n    role=\"button\"\n    [ariaLabel]=\"variant()\"\n    [loading]=\"false\"\n    [disabled]=\"variant() === 'disabled'\"\n    [variant]=\"emphasis() ? 'inverse' : 'neutral'\"\n    [size]=\"size() === 'xs' ? 'xs' : 'sm'\"\n    class=\"c-tag__close\"\n    iconName=\"x-regular\"\n    (click)=\"onClose()\"\n  >\n  </lib-button-icon>\n  }\n</span>\n}\n", styles: [".c-tag{display:inline-flex;height:1.5rem;max-width:100%;padding:0 var(--space-component-padding-sm);align-items:center;gap:var(--space-component-gap-sm);flex-shrink:0;border-radius:var(--size-border-radius-md);text-align:center;font-family:var(--typography-label-xs-strong-family);font-size:var(--typography-label-xs-strong-size);font-weight:var(--typography-label-xs-strong-weight);line-height:var(--typography-label-xs-strong-line-height);letter-spacing:var(--typography-label-xs-strong-letter-spacing)}.c-tag--sm{height:2rem;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);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-tag__dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.c-tag__text{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag--close-active{padding-right:0}.c-tag--emphasis-close-active{border-top-right-radius:10px;border-bottom-right-radius:10px}.c-tag--danger{background:var(--color-feedback-danger-soft);color:var(--color-feedback-danger-stronger)}.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-stronger)}.c-tag--warning{color:var(--color-feedback-warning-stronger);background:var(--color-feedback-warning-soft)}.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-stronger)}.c-tag--success{color:var(--color-feedback-success-stronger);background:var(--color-feedback-success-soft)}.c-tag--success .c-tag__dot{background:var(--color-feedback-success-stronger)}.c-tag--info{background:var(--color-feedback-info-soft);color:var(--color-feedback-info-stronger)}.c-tag--info .c-tag__dot{background:var(--color-feedback-info-stronger)}.c-tag--neutral{background:var(--color-feedback-neutral-soft);color:var(--color-feedback-neutral-stronger)}.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-stronger)}.c-tag--primary{background:var(--color-decorative-primary-soft);color:var(--color-decorative-primary-stronger)}.c-tag--primary .c-tag__dot{background:var(--color-decorative-primary-stronger)}.c-tag--secondary{background:var(--color-decorative-secondary-soft);color:var(--color-decorative-secondary-stronger)}.c-tag--secondary .c-tag__dot{background:var(--color-decorative-secondary-stronger)}.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--danger{color:var(--color-feedback-danger-subtle);background:var(--color-feedback-danger-default)}.c-tag--emphasis.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-subtle)}.c-tag--emphasis.c-tag--warning{color:var(--color-feedback-warning-subtle);background:var(--color-feedback-warning-default)}.c-tag--emphasis.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-subtle)}.c-tag--emphasis.c-tag--success{color:var(--color-feedback-success-subtle);background:var(--color-feedback-success-default)}.c-tag--emphasis.c-tag--success .c-tag__dot{background:var(--color-feedback-success-subtle)}.c-tag--emphasis.c-tag--info{color:var(--color-feedback-info-subtle);background:var(--color-feedback-info-default)}.c-tag--emphasis.c-tag--info .c-tag__dot{background:var(--color-feedback-info-subtle)}.c-tag--emphasis.c-tag--neutral{color:var(--color-feedback-neutral-subtle);background:var(--color-feedback-neutral-default)}.c-tag--emphasis.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-subtle)}.c-tag--emphasis.c-tag--primary{background:var(--color-decorative-primary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--primary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary{background:var(--color-decorative-secondary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.skeleton{width:4rem;height:1.5rem;background:var(--color-effect-skeleton-soft);border-radius:var(--size-border-radius-md)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TagComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-tag', imports: [NgClass, ButtonIconComponent], template: "@if (skeletonActive()) {\n<div class=\"skeleton\"></div>\n} @else {\n<span\n  [ngClass]=\"[\n    'c-tag',\n    variant() ? 'c-tag--' + variant() : '',\n    extraClass() ? extraClass() : '',\n    emphasis() ? 'c-tag--emphasis' : '',\n    closeActive() ? 'c-tag--close-active' : '',\n    size() ? 'c-tag--' + size() : '',\n    emphasis() && closeActive() ? 'c-tag--emphasis-close-active' : ''\n  ]\"\n>\n  @if (showBadge()) {\n  <span class=\"c-tag__dot\"></span>\n  }\n  <span class=\"c-tag__text\">{{ text() }}</span>\n  @if (closeActive()) {\n  <lib-button-icon\n    role=\"button\"\n    [ariaLabel]=\"variant()\"\n    [loading]=\"false\"\n    [disabled]=\"variant() === 'disabled'\"\n    [variant]=\"emphasis() ? 'inverse' : 'neutral'\"\n    [size]=\"size() === 'xs' ? 'xs' : 'sm'\"\n    class=\"c-tag__close\"\n    iconName=\"x-regular\"\n    (click)=\"onClose()\"\n  >\n  </lib-button-icon>\n  }\n</span>\n}\n", styles: [".c-tag{display:inline-flex;height:1.5rem;max-width:100%;padding:0 var(--space-component-padding-sm);align-items:center;gap:var(--space-component-gap-sm);flex-shrink:0;border-radius:var(--size-border-radius-md);text-align:center;font-family:var(--typography-label-xs-strong-family);font-size:var(--typography-label-xs-strong-size);font-weight:var(--typography-label-xs-strong-weight);line-height:var(--typography-label-xs-strong-line-height);letter-spacing:var(--typography-label-xs-strong-letter-spacing)}.c-tag--sm{height:2rem;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);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-tag__dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.c-tag__text{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag--close-active{padding-right:0}.c-tag--emphasis-close-active{border-top-right-radius:10px;border-bottom-right-radius:10px}.c-tag--danger{background:var(--color-feedback-danger-soft);color:var(--color-feedback-danger-stronger)}.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-stronger)}.c-tag--warning{color:var(--color-feedback-warning-stronger);background:var(--color-feedback-warning-soft)}.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-stronger)}.c-tag--success{color:var(--color-feedback-success-stronger);background:var(--color-feedback-success-soft)}.c-tag--success .c-tag__dot{background:var(--color-feedback-success-stronger)}.c-tag--info{background:var(--color-feedback-info-soft);color:var(--color-feedback-info-stronger)}.c-tag--info .c-tag__dot{background:var(--color-feedback-info-stronger)}.c-tag--neutral{background:var(--color-feedback-neutral-soft);color:var(--color-feedback-neutral-stronger)}.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-stronger)}.c-tag--primary{background:var(--color-decorative-primary-soft);color:var(--color-decorative-primary-stronger)}.c-tag--primary .c-tag__dot{background:var(--color-decorative-primary-stronger)}.c-tag--secondary{background:var(--color-decorative-secondary-soft);color:var(--color-decorative-secondary-stronger)}.c-tag--secondary .c-tag__dot{background:var(--color-decorative-secondary-stronger)}.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--danger{color:var(--color-feedback-danger-subtle);background:var(--color-feedback-danger-default)}.c-tag--emphasis.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-subtle)}.c-tag--emphasis.c-tag--warning{color:var(--color-feedback-warning-subtle);background:var(--color-feedback-warning-default)}.c-tag--emphasis.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-subtle)}.c-tag--emphasis.c-tag--success{color:var(--color-feedback-success-subtle);background:var(--color-feedback-success-default)}.c-tag--emphasis.c-tag--success .c-tag__dot{background:var(--color-feedback-success-subtle)}.c-tag--emphasis.c-tag--info{color:var(--color-feedback-info-subtle);background:var(--color-feedback-info-default)}.c-tag--emphasis.c-tag--info .c-tag__dot{background:var(--color-feedback-info-subtle)}.c-tag--emphasis.c-tag--neutral{color:var(--color-feedback-neutral-subtle);background:var(--color-feedback-neutral-default)}.c-tag--emphasis.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-subtle)}.c-tag--emphasis.c-tag--primary{background:var(--color-decorative-primary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--primary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary{background:var(--color-decorative-secondary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.skeleton{width:4rem;height:1.5rem;background:var(--color-effect-skeleton-soft);border-radius:var(--size-border-radius-md)}\n"] }]
-        }] });
-
 class MenuItemComponent {
     label = input('');
     icon = input('');
@@ -5183,6 +5299,8 @@ class MenuItemComponent {
     showArrowIcon = input(true);
     tagLabel = input('');
     children = input([]);
+    rightIcon = input('');
+    rightText = input('');
     hasChildren = computed(() => this.children().length > 0);
     hasTag = computed(() => this.tagLabel().trim().length > 0);
     clicked = output();
@@ -5207,11 +5325,11 @@ class MenuItemComponent {
         return 'action-neutral-content-default';
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: MenuItemComponent, isStandalone: true, selector: "lib-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, showArrowIcon: { classPropertyName: "showArrowIcon", publicName: "showArrowIcon", isSignal: true, isRequired: false, transformFunction: null }, tagLabel: { classPropertyName: "tagLabel", publicName: "tagLabel", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"c-menu-item__container\">\n  <button\n    [ngClass]=\"[\n      'c-menu-item',\n      selected() ? 'c-menu-item--selected' : '',\n      disabled() ? 'c-menu-item--disabled' : '',\n      hasChildren() ? 'c-menu-item--has-children' : '',\n      hasChildren() ? 'c-menu-item--expanded' : ''\n    ]\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-selected]=\"selected()\"\n    [attr.aria-expanded]=\"hasChildren() ? true : null\"\n    (click)=\"handleClick()\"\n  >\n    @if (icon()) {\n      <span class=\"c-menu-item__icon\">\n        <lib-icon\n          [name]=\"computedIcon()\"\n          [size]=\"'md'\"\n          [color]=\"iconColor()\"\n        ></lib-icon>\n      </span>\n    }\n    @if (label()) {\n      <span class=\"c-menu-item__label\">{{ label() }}</span>\n    }\n    @if (hasTag()) {\n      <span class=\"c-menu-item__tag-container\">\n        <lib-tag\n          [text]=\"tagLabel()\"\n          [closeActive]=\"false\"\n          [showBadge]=\"false\"\n          class=\"c-menu-item__tag\"\n        ></lib-tag>\n      </span>\n    }\n    @if (showArrowIcon()) {\n      <span class=\"c-menu-item__expand-icon\">\n        <lib-icon\n          name=\"caretright-regular\"\n          [size]=\"'md'\"\n          [color]=\"iconColor()\"\n        ></lib-icon>\n      </span>\n    }\n  </button>\n\n  @if (hasChildren()) {\n  <div class=\"c-menu-item__children\">\n    <div class=\"c-menu-item__children-items\">\n      @for (child of children(); track child.label) {\n      <lib-menu-child-item\n        [label]=\"child.label\"\n        [disabled]=\"child.disabled || false\"\n        [selected]=\"child.selected || false\"\n        (clicked)=\"handleChildClick(child)\"\n      >\n      </lib-menu-child-item>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [".c-menu-item{display:flex;align-items:center;gap:var(--space-component-gap-md, .5rem);width:100%;min-height:40px;padding:var(--space-component-padding-none) var(--space-component-padding-sm);border:none;border-radius:var(--size-border-radius-md);background:var(--color-menu-item-background-default);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);text-align:left;color:var(--color-action-neutral-content-default)}.c-menu-item__container,.c-menu-item__children{display:flex;flex-direction:column;width:100%}.c-menu-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-item:disabled{cursor:not-allowed}.c-menu-item:hover:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-hover);color:var(--color-action-neutral-content-hover)}.c-menu-item:active:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-pressed);color:var(--color-action-neutral-content-pressed)}.c-menu-item.c-menu-item--selected{background-color:var(--color-menu-item-parent-background-active);color:var(--color-action-primary-selected-content-default)}.c-menu-item.c-menu-item--selected:hover:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-hover);color:var(--color-action-primary-selected-content-hover)}.c-menu-item.c-menu-item--selected:active:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-pressed);color:var(--color-action-primary-selected-content-pressed)}.c-menu-item.c-menu-item--disabled{color:var(--color-action-neutral-content-disabled);background-color:var(--color-action-neutral-background-disabled)}.c-menu-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.c-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-menu-item__expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--space-component-gap-sm);transition:transform var(--transition-base-duration) var(--transition-base-easing)}.c-menu-item__tag-container{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-component-gap-sm)}.c-menu-item__tag{flex-shrink:0}.c-menu-item__children{padding-left:var(--size-spacing-4);margin-top:var(--size-spacing-1)}.c-menu-item__children-label{font-size:var(--size-font-sm);font-weight:var(--size-font-weight-medium);color:var(--color-action-neutral-content-default);padding:var(--size-spacing-2) var(--size-spacing-3);margin-bottom:var(--size-spacing-1)}.c-menu-item__children-items{display:flex;flex-direction:column;gap:var(--size-spacing-1)}.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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: MenuChildItemComponent, selector: "lib-menu-child-item", inputs: ["label", "icon", "disabled", "selected"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: MenuItemComponent, isStandalone: true, selector: "lib-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, showArrowIcon: { classPropertyName: "showArrowIcon", publicName: "showArrowIcon", isSignal: true, isRequired: false, transformFunction: null }, tagLabel: { classPropertyName: "tagLabel", publicName: "tagLabel", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, rightText: { classPropertyName: "rightText", publicName: "rightText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"c-menu-item__container\">\n  <button\n    [ngClass]=\"[\n      'c-menu-item',\n      selected() ? 'c-menu-item--selected' : '',\n      disabled() ? 'c-menu-item--disabled' : '',\n      hasChildren() ? 'c-menu-item--has-children' : '',\n      hasChildren() ? 'c-menu-item--expanded' : ''\n    ]\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-selected]=\"selected()\"\n    [attr.aria-expanded]=\"hasChildren() ? true : null\"\n    (click)=\"handleClick()\"\n  >\n    @if (icon()) {\n    <span class=\"c-menu-item__icon\">\n      <lib-icon\n        [name]=\"computedIcon()\"\n        [size]=\"'md'\"\n        [color]=\"iconColor()\"\n      ></lib-icon>\n    </span>\n    } @if (label()) {\n    <span class=\"c-menu-item__label\">{{ label() }}</span>\n    } @if (hasTag()) {\n    <span class=\"c-menu-item__tag-container\">\n      <lib-tag\n        [text]=\"tagLabel()\"\n        [closeActive]=\"false\"\n        [showBadge]=\"false\"\n        class=\"c-menu-item__tag\"\n      ></lib-tag>\n    </span>\n    } @if (rightIcon()) {\n    <span class=\"c-menu-item__right-icon\">\n      <lib-icon [name]=\"rightIcon()\" [size]=\"'md'\"></lib-icon>\n    </span>\n    } @if (rightText()) {\n    <span class=\"c-menu-item__right-text\"> {{ rightText() }} </span>\n    } @if (showArrowIcon()) {\n    <span class=\"c-menu-item__expand-icon\">\n      <lib-icon\n        name=\"caretright-regular\"\n        [size]=\"'md'\"\n        [color]=\"iconColor()\"\n      ></lib-icon>\n    </span>\n    }\n  </button>\n\n  @if (hasChildren()) {\n  <div class=\"c-menu-item__children\">\n    <div class=\"c-menu-item__children-items\">\n      @for (child of children(); track child.label) {\n      <lib-menu-child-item\n        [label]=\"child.label\"\n        [disabled]=\"child.disabled || false\"\n        [selected]=\"child.selected || false\"\n        (clicked)=\"handleChildClick(child)\"\n      >\n      </lib-menu-child-item>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [".c-menu-item{display:flex;align-items:center;gap:var(--space-component-gap-md, .5rem);width:100%;min-height:40px;padding:var(--space-component-padding-none) var(--space-component-padding-sm);border:none;border-radius:var(--size-border-radius-md);background:var(--color-menu-item-background-default);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);text-align:left;color:var(--color-action-neutral-content-default)}.c-menu-item__container,.c-menu-item__children{display:flex;flex-direction:column;width:100%}.c-menu-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-item:disabled{cursor:not-allowed}.c-menu-item:hover:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-hover);color:var(--color-action-neutral-content-hover)}.c-menu-item:active:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-pressed);color:var(--color-action-neutral-content-pressed)}.c-menu-item.c-menu-item--selected{background-color:var(--color-menu-item-parent-background-active);color:var(--color-action-primary-selected-content-default)}.c-menu-item.c-menu-item--selected:hover:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-hover);color:var(--color-action-primary-selected-content-hover)}.c-menu-item.c-menu-item--selected:active:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-pressed);color:var(--color-action-primary-selected-content-pressed)}.c-menu-item.c-menu-item--disabled{color:var(--color-action-neutral-content-disabled);background-color:var(--color-action-neutral-background-disabled)}.c-menu-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.c-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-menu-item__expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--space-component-gap-sm);transition:transform var(--transition-base-duration) var(--transition-base-easing)}.c-menu-item__tag-container,.c-menu-item__right-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-component-gap-sm)}.c-menu-item__tag{flex-shrink:0}.c-menu-item__right-text{margin-left:var(--space-component-gap-sm);font-size:var(--typography-label-sm-default-size);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);color:var(--color-content-default)}.c-menu-item__children{padding-left:var(--size-spacing-4);margin-top:var(--size-spacing-1)}.c-menu-item__children-label{font-size:var(--size-font-sm);font-weight:var(--size-font-weight-medium);color:var(--color-action-neutral-content-default);padding:var(--size-spacing-2) var(--size-spacing-3);margin-bottom:var(--size-spacing-1)}.c-menu-item__children-items{display:flex;flex-direction:column;gap:var(--size-spacing-1)}.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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: MenuChildItemComponent, selector: "lib-menu-child-item", inputs: ["label", "icon", "disabled", "selected"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-menu-item', imports: [NgClass, IconComponent, MenuChildItemComponent, TagComponent], template: "<div class=\"c-menu-item__container\">\n  <button\n    [ngClass]=\"[\n      'c-menu-item',\n      selected() ? 'c-menu-item--selected' : '',\n      disabled() ? 'c-menu-item--disabled' : '',\n      hasChildren() ? 'c-menu-item--has-children' : '',\n      hasChildren() ? 'c-menu-item--expanded' : ''\n    ]\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-selected]=\"selected()\"\n    [attr.aria-expanded]=\"hasChildren() ? true : null\"\n    (click)=\"handleClick()\"\n  >\n    @if (icon()) {\n      <span class=\"c-menu-item__icon\">\n        <lib-icon\n          [name]=\"computedIcon()\"\n          [size]=\"'md'\"\n          [color]=\"iconColor()\"\n        ></lib-icon>\n      </span>\n    }\n    @if (label()) {\n      <span class=\"c-menu-item__label\">{{ label() }}</span>\n    }\n    @if (hasTag()) {\n      <span class=\"c-menu-item__tag-container\">\n        <lib-tag\n          [text]=\"tagLabel()\"\n          [closeActive]=\"false\"\n          [showBadge]=\"false\"\n          class=\"c-menu-item__tag\"\n        ></lib-tag>\n      </span>\n    }\n    @if (showArrowIcon()) {\n      <span class=\"c-menu-item__expand-icon\">\n        <lib-icon\n          name=\"caretright-regular\"\n          [size]=\"'md'\"\n          [color]=\"iconColor()\"\n        ></lib-icon>\n      </span>\n    }\n  </button>\n\n  @if (hasChildren()) {\n  <div class=\"c-menu-item__children\">\n    <div class=\"c-menu-item__children-items\">\n      @for (child of children(); track child.label) {\n      <lib-menu-child-item\n        [label]=\"child.label\"\n        [disabled]=\"child.disabled || false\"\n        [selected]=\"child.selected || false\"\n        (clicked)=\"handleChildClick(child)\"\n      >\n      </lib-menu-child-item>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [".c-menu-item{display:flex;align-items:center;gap:var(--space-component-gap-md, .5rem);width:100%;min-height:40px;padding:var(--space-component-padding-none) var(--space-component-padding-sm);border:none;border-radius:var(--size-border-radius-md);background:var(--color-menu-item-background-default);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);text-align:left;color:var(--color-action-neutral-content-default)}.c-menu-item__container,.c-menu-item__children{display:flex;flex-direction:column;width:100%}.c-menu-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-item:disabled{cursor:not-allowed}.c-menu-item:hover:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-hover);color:var(--color-action-neutral-content-hover)}.c-menu-item:active:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-pressed);color:var(--color-action-neutral-content-pressed)}.c-menu-item.c-menu-item--selected{background-color:var(--color-menu-item-parent-background-active);color:var(--color-action-primary-selected-content-default)}.c-menu-item.c-menu-item--selected:hover:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-hover);color:var(--color-action-primary-selected-content-hover)}.c-menu-item.c-menu-item--selected:active:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-pressed);color:var(--color-action-primary-selected-content-pressed)}.c-menu-item.c-menu-item--disabled{color:var(--color-action-neutral-content-disabled);background-color:var(--color-action-neutral-background-disabled)}.c-menu-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.c-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-menu-item__expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--space-component-gap-sm);transition:transform var(--transition-base-duration) var(--transition-base-easing)}.c-menu-item__tag-container{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-component-gap-sm)}.c-menu-item__tag{flex-shrink:0}.c-menu-item__children{padding-left:var(--size-spacing-4);margin-top:var(--size-spacing-1)}.c-menu-item__children-label{font-size:var(--size-font-sm);font-weight:var(--size-font-weight-medium);color:var(--color-action-neutral-content-default);padding:var(--size-spacing-2) var(--size-spacing-3);margin-bottom:var(--size-spacing-1)}.c-menu-item__children-items{display:flex;flex-direction:column;gap:var(--size-spacing-1)}.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"] }]
+            args: [{ selector: 'lib-menu-item', imports: [NgClass, IconComponent, MenuChildItemComponent, TagComponent], template: "<div class=\"c-menu-item__container\">\n  <button\n    [ngClass]=\"[\n      'c-menu-item',\n      selected() ? 'c-menu-item--selected' : '',\n      disabled() ? 'c-menu-item--disabled' : '',\n      hasChildren() ? 'c-menu-item--has-children' : '',\n      hasChildren() ? 'c-menu-item--expanded' : ''\n    ]\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-selected]=\"selected()\"\n    [attr.aria-expanded]=\"hasChildren() ? true : null\"\n    (click)=\"handleClick()\"\n  >\n    @if (icon()) {\n    <span class=\"c-menu-item__icon\">\n      <lib-icon\n        [name]=\"computedIcon()\"\n        [size]=\"'md'\"\n        [color]=\"iconColor()\"\n      ></lib-icon>\n    </span>\n    } @if (label()) {\n    <span class=\"c-menu-item__label\">{{ label() }}</span>\n    } @if (hasTag()) {\n    <span class=\"c-menu-item__tag-container\">\n      <lib-tag\n        [text]=\"tagLabel()\"\n        [closeActive]=\"false\"\n        [showBadge]=\"false\"\n        class=\"c-menu-item__tag\"\n      ></lib-tag>\n    </span>\n    } @if (rightIcon()) {\n    <span class=\"c-menu-item__right-icon\">\n      <lib-icon [name]=\"rightIcon()\" [size]=\"'md'\"></lib-icon>\n    </span>\n    } @if (rightText()) {\n    <span class=\"c-menu-item__right-text\"> {{ rightText() }} </span>\n    } @if (showArrowIcon()) {\n    <span class=\"c-menu-item__expand-icon\">\n      <lib-icon\n        name=\"caretright-regular\"\n        [size]=\"'md'\"\n        [color]=\"iconColor()\"\n      ></lib-icon>\n    </span>\n    }\n  </button>\n\n  @if (hasChildren()) {\n  <div class=\"c-menu-item__children\">\n    <div class=\"c-menu-item__children-items\">\n      @for (child of children(); track child.label) {\n      <lib-menu-child-item\n        [label]=\"child.label\"\n        [disabled]=\"child.disabled || false\"\n        [selected]=\"child.selected || false\"\n        (clicked)=\"handleChildClick(child)\"\n      >\n      </lib-menu-child-item>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [".c-menu-item{display:flex;align-items:center;gap:var(--space-component-gap-md, .5rem);width:100%;min-height:40px;padding:var(--space-component-padding-none) var(--space-component-padding-sm);border:none;border-radius:var(--size-border-radius-md);background:var(--color-menu-item-background-default);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);text-align:left;color:var(--color-action-neutral-content-default)}.c-menu-item__container,.c-menu-item__children{display:flex;flex-direction:column;width:100%}.c-menu-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-item:disabled{cursor:not-allowed}.c-menu-item:hover:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-hover);color:var(--color-action-neutral-content-hover)}.c-menu-item:active:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-pressed);color:var(--color-action-neutral-content-pressed)}.c-menu-item.c-menu-item--selected{background-color:var(--color-menu-item-parent-background-active);color:var(--color-action-primary-selected-content-default)}.c-menu-item.c-menu-item--selected:hover:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-hover);color:var(--color-action-primary-selected-content-hover)}.c-menu-item.c-menu-item--selected:active:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-pressed);color:var(--color-action-primary-selected-content-pressed)}.c-menu-item.c-menu-item--disabled{color:var(--color-action-neutral-content-disabled);background-color:var(--color-action-neutral-background-disabled)}.c-menu-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.c-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-menu-item__expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--space-component-gap-sm);transition:transform var(--transition-base-duration) var(--transition-base-easing)}.c-menu-item__tag-container,.c-menu-item__right-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-component-gap-sm)}.c-menu-item__tag{flex-shrink:0}.c-menu-item__right-text{margin-left:var(--space-component-gap-sm);font-size:var(--typography-label-sm-default-size);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);color:var(--color-content-default)}.c-menu-item__children{padding-left:var(--size-spacing-4);margin-top:var(--size-spacing-1)}.c-menu-item__children-label{font-size:var(--size-font-sm);font-weight:var(--size-font-weight-medium);color:var(--color-action-neutral-content-default);padding:var(--size-spacing-2) var(--size-spacing-3);margin-bottom:var(--size-spacing-1)}.c-menu-item__children-items{display:flex;flex-direction:column;gap:var(--size-spacing-1)}.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"] }]
         }] });
 
 class MenuItemSectionComponent {
@@ -6792,7 +6910,7 @@ class SidebarWithFooterComponent extends BasicSidebarMenuComponent {
         (clicked)="onSubItemClick(securitySettingsItem)">
       </lib-menu-item>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MenuItemComponent, selector: "lib-menu-item", inputs: ["label", "icon", "disabled", "selected", "showArrowIcon", "tagLabel", "children"], outputs: ["clicked"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MenuItemComponent, selector: "lib-menu-item", inputs: ["label", "icon", "disabled", "selected", "showArrowIcon", "tagLabel", "children", "rightIcon", "rightText"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarWithFooterComponent, decorators: [{
             type: Component,
@@ -7149,152 +7267,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             args: [{ selector: 'lib-tabs', standalone: true, imports: [IconComponent, BadgeComponent], template: "<div class=\"c-tabs\">\n  <div class=\"c-tabs__scroll-container\" #tabsRef>\n    <ul\n      class=\"c-tabs__list\"\n      [class.c-tabs__list--center]=\"alignment() === 'center'\"\n      role=\"tablist\"\n    >\n      @for (option of options(); track option.value) {\n      <li\n        class=\"c-tabs__tab\"\n        [class.c-tabs__tab--selected]=\"option.value === selectedValue()\"\n        role=\"tab\"\n        [attr.aria-selected]=\"option.value === selectedValue()\"\n        tabindex=\"0\"\n        (click)=\"onClick($event, option.value)\"\n        (keydown)=\"onKeydown($event, option.value)\"\n      >\n        @if (option.iconName) {\n        <lib-icon\n          [name]=\"option.iconName\"\n          size=\"lg\"\n          color=\"core-content-default\"\n        />\n        }\n        {{ option.label }}\n        @if (option.showBadge) {\n        <lib-badge />\n        }\n      </li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: [".c-tabs{width:100%}.c-tabs__scroll-container{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.c-tabs__scroll-container::-webkit-scrollbar{display:none}.c-tabs__list{width:100%;height:40px;display:flex;align-items:flex-start;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft);margin:0;padding:0;list-style:none;box-sizing:border-box;min-width:max-content}.c-tabs__list--center{justify-content:center}.c-tabs__tab{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:72px;flex-shrink:0;white-space:nowrap;box-sizing:border-box;color:var(--color-action-neutral-content-default);text-align:center;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);padding:var(--space-component-padding-sm) var(--space-component-padding-md);background:var(--color-action-primary-background-default);gap:var(--space-component-gap-sm);margin:0;list-style:none}.c-tabs__tab:hover{color:var(--color-action-neutral-content-hover);background:var(--color-action-neutral-background-hover)}.c-tabs__tab:active{color:var(--color-action-neutral-content-pressed);background-color:var(--color-action-neutral-background-pressed)}.c-tabs__tab:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-tabs__tab--selected{position:relative;color:var(--color-core-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-tabs__tab--selected:before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:.125rem;background:var(--color-action-primary-selected-background-default)}\n"] }]
         }] });
 
-class TextInputComponent {
-    label = '';
-    name = '';
-    placeholder = '';
-    helperText = '';
-    error = false;
-    success = false;
-    successText = '';
-    alertText = '';
-    disabled = false;
-    readonly = false;
-    required = false;
-    optionalLabel = '';
-    isLoading = false;
-    type = 'text';
-    size = 'md';
-    fullWidth = false;
-    autocomplete = 'off';
-    regex;
-    emitValue = new EventEmitter();
-    _value = '';
-    onChangeFn = () => { };
-    onTouchedFn = () => { };
-    writeValue(value) {
-        this._value = value ?? '';
-    }
-    registerOnChange(fn) {
-        this.onChangeFn = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedFn = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    get inputClass() {
-        return [
-            'c-text-input__input',
-            `c-text-input__input--${this.size}`,
-            this.error ? 'is-error' : this.success ? 'is-success' : 'is-default',
-            this.disabled ? 'is-disabled' : '',
-            this.readonly ? 'is-readonly' : '',
-            this.isLoading ? 'is-loading' : '',
-        ].filter(Boolean);
-    }
-    get ariaDescribedBy() {
-        return this.helperText ? 'text-input-helper' : null;
-    }
-    onInput(event) {
-        const input = event.target;
-        let newValue = input.value;
-        if (this.regex) {
-            try {
-                const charPattern = (() => {
-                    if (this.regex.startsWith('^') && this.regex.endsWith('$')) {
-                        const charClassMatch = this.regex.match(/\[([^\]]+)\]/);
-                        if (charClassMatch) {
-                            return `[${charClassMatch[1]}]`;
-                        }
-                    }
-                    return this.regex;
-                })();
-                const regex = new RegExp(charPattern);
-                const filteredValue = newValue
-                    .split('')
-                    .filter((char) => regex.test(char))
-                    .join('');
-                if (filteredValue !== newValue) {
-                    input.value = filteredValue;
-                    newValue = filteredValue;
-                }
-            }
-            catch (error) {
-                console.warn('Invalid regex:', this.regex, error);
-            }
-        }
-        this._value = newValue;
-        this.onChangeFn(this._value);
-        this.emitValue.emit(this._value);
-    }
-    onBlur() {
-        this.onTouchedFn();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "lib-text-input", inputs: { label: "label", name: "name", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", disabled: "disabled", readonly: "readonly", required: "required", optionalLabel: "optionalLabel", isLoading: "isLoading", type: "type", size: "size", fullWidth: "fullWidth", autocomplete: "autocomplete", regex: "regex" }, outputs: { emitValue: "emitValue" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                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    size=\"sm\"\n    [required]=\"required\"\n    [for]=\"name\"\n    [text]=\"label\"\n    [textOptional]=\"optionalLabel\"\n    [isLoading]=\"isLoading\"\n  ></lib-input-label>\n\n  <input\n    [attr.autocomplete]=\"autocomplete\"\n    [id]=\"name\"\n    [name]=\"name\"\n    [type]=\"type\"\n    [class]=\"inputClass.join(' ')\"\n    [placeholder]=\"isLoading ? '' : placeholder\"\n    [disabled]=\"disabled || isLoading\"\n    [readonly]=\"readonly\"\n    [value]=\"isLoading ? '' : _value\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-label]=\"name\"\n    [attr.aria-labelledby]=\"name\"\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  >\n    <lib-helper-text\n      [text]=\"helperText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-helper-text\n      variant=\"danger\"\n      [text]=\"alertText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-helper-text\n      variant=\"success\"\n      [text]=\"successText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\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{--input-padding-y: var(--space-component-padding-md);--input-padding-x: var(--space-component-padding-lg);height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x);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-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: 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-strong)}.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__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.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", "isLoading", "textOptional"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-text-input', standalone: true, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        InputLabelComponent,
-                        HelperTextComponent,
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            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    size=\"sm\"\n    [required]=\"required\"\n    [for]=\"name\"\n    [text]=\"label\"\n    [textOptional]=\"optionalLabel\"\n    [isLoading]=\"isLoading\"\n  ></lib-input-label>\n\n  <input\n    [attr.autocomplete]=\"autocomplete\"\n    [id]=\"name\"\n    [name]=\"name\"\n    [type]=\"type\"\n    [class]=\"inputClass.join(' ')\"\n    [placeholder]=\"isLoading ? '' : placeholder\"\n    [disabled]=\"disabled || isLoading\"\n    [readonly]=\"readonly\"\n    [value]=\"isLoading ? '' : _value\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-label]=\"name\"\n    [attr.aria-labelledby]=\"name\"\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  >\n    <lib-helper-text\n      [text]=\"helperText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n    <lib-helper-text\n      variant=\"danger\"\n      [text]=\"alertText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\n  </span>\n\n  <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n    <lib-helper-text\n      variant=\"success\"\n      [text]=\"successText\"\n      [isLoading]=\"isLoading\"\n    ></lib-helper-text>\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{--input-padding-y: var(--space-component-padding-md);--input-padding-x: var(--space-component-padding-lg);height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x);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-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: 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-strong)}.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__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.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: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], helperText: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], success: [{
-                type: Input
-            }], successText: [{
-                type: Input
-            }], alertText: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], optionalLabel: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], fullWidth: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }], regex: [{
-                type: Input
-            }], emitValue: [{
-                type: Output
-            }] } });
-
 class TextareaComponent {
     label = '';
     placeholder = '';