@crowdfarming/oliva-ds 1.95.0 → 1.96.0-rc.2

package/fesm2022/crowdfarming-oliva-ds.mjs

@@ -4766,55 +4766,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 class InputCounterComponent {
     initialValue = input(undefined);
-    label = '';
-    placeholder = '';
-    helperText = '';
-    alertText = '';
-    successText = '';
-    error = false;
-    success = false;
-    disabled = false;
-    required = false;
-    optionalLabel = '';
-    readonly = false;
-    isLoading = false;
-    size = 'md';
-    variant = 'default';
-    fullWidth = false;
-    minimum = 1;
-    maximum;
-    step = 1;
-    allowDelete = false;
-    emitValue = new EventEmitter();
-    value = signal(this.minimum);
+    // Common inputs (signal-based, aligned with input-number; defaults kept from input-counter)
+    label = input('');
+    placeholder = input('');
+    helperText = input('');
+    alertText = input('');
+    successText = input('');
+    error = input(false);
+    success = input(false);
+    required = input(false);
+    readonly = input(false);
+    isLoading = input(false);
+    size = input('md');
+    fullWidth = input(false);
+    // Counter-specific inputs
+    disabled = input(false);
+    optionalLabel = input('');
+    variant = input('default');
+    minimum = input(1);
+    maximum = input(undefined);
+    step = input(1);
+    allowDelete = input(false);
+    // Number-formatting inputs (aligned with input-number).
+    name = input('');
+    autocomplete = input('off');
+    allowDecimals = input(false);
+    allowNegative = input(false);
+    decimalSeparator = input('comma');
+    maxDecimals = input(undefined);
+    // Optional extra validation: typed value must match this pattern, else error
+    regex = input(null);
+    emitValue = output();
+    // Disabled state set via ControlValueAccessor, combined with the `disabled` input
+    formDisabled = signal(false);
+    isDisabled = computed(() => this.disabled() || this.formDisabled());
+    // Canonical numeric value (used for clamping / min-max / buttons); null = empty
+    value = signal(this.minimum());
+    // Formatted string shown in the text input
+    displayValue = signal('');
+    // Internal error raised when a required field is left empty on blur
+    requiredError = signal(false);
+    // Internal error raised when the typed value does not match `regex`
+    regexError = signal(false);
+    // Combined error state: external `error` input OR an internal validation
+    hasError = computed(() => this.error() || this.requiredError() || this.regexError());
+    // Message shown under the input: any error state surfaces `alertText`
+    errorMessage = computed(() => this.alertText());
+    effectiveInputmode = computed(() => this.allowDecimals() ? 'decimal' : 'numeric');
+    regexPattern = computed(() => {
+        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}$`;
+    });
     get maxValue() {
-        return this.maximum ?? Infinity;
+        return this.maximum() ?? Infinity;
     }
     get effectiveMinimum() {
-        return this.allowDelete ? 0 : this.minimum;
-    }
-    isAtMinimum = computed(() => this.value() <= this.effectiveMinimum);
-    decrementIconName = computed(() => this.allowDelete && this.value() === this.minimum
+        return this.allowDelete() ? 0 : this.minimum();
+    }
+    // Decimal places used to round button increments (avoids floating-point drift)
+    get decimals() {
+        const max = this.maxDecimals();
+        if (max !== undefined)
+            return max;
+        const stepStr = this.step().toString();
+        const dot = stepStr.indexOf('.');
+        return dot === -1 ? 0 : stepStr.length - dot - 1;
+    }
+    isAtMinimum = computed(() => {
+        const current = this.value();
+        return current !== null && current <= this.effectiveMinimum;
+    });
+    decrementIconName = computed(() => this.allowDelete() && this.value() === this.minimum()
         ? 'trash-regular'
         : 'minus-regular');
-    isAtMaximum = computed(() => this.maxValue !== Infinity && this.value() >= this.maxValue);
+    isAtMaximum = computed(() => {
+        const current = this.value();
+        return (this.maxValue !== Infinity && current !== null && current >= this.maxValue);
+    });
     constructor() {
-        this.value.set(this.minimum);
+        const initial = this.minimum();
+        this.value.set(initial);
+        this.displayValue.set(this.formatNumber(initial));
         effect(() => {
-            const initial = this.initialValue();
-            if (initial !== undefined) {
-                let clampedValue = Math.max(this.minimum, initial);
+            const initialValue = this.initialValue();
+            if (initialValue !== undefined) {
+                let clampedValue = Math.max(this.minimum(), initialValue);
                 if (this.maxValue !== Infinity) {
                     clampedValue = Math.min(this.maxValue, clampedValue);
                 }
                 this.value.set(clampedValue);
+                this.displayValue.set(this.formatNumber(clampedValue));
             }
         });
     }
     onChangeFn = () => { };
     onTouchedFn = () => { };
     writeValue(value) {
-        this.value.set(value ?? this.minimum);
+        if (value === null || value === undefined) {
+            this.value.set(null);
+            this.displayValue.set('');
+            return;
+        }
+        this.value.set(value);
+        this.displayValue.set(this.formatNumber(value));
     }
     registerOnChange(fn) {
         this.onChangeFn = fn;
@@ -4823,70 +4884,158 @@ class InputCounterComponent {
         this.onTouchedFn = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.formDisabled.set(isDisabled);
     }
     get inputClass() {
         return [
             'c-text-input__input',
-            `c-text-input__input--${this.size}`,
-            this.error ? 'is-error' : '',
-            this.success ? 'is-success' : '',
-            this.disabled ? 'is-disabled' : '',
-            this.readonly ? 'is-readonly' : '',
-            this.isLoading ? 'is-loading' : '',
+            `c-text-input__input--${this.size()}`,
+            this.hasError() ? 'is-error' : '',
+            this.success() ? 'is-success' : '',
+            this.isDisabled() ? 'is-disabled' : '',
+            this.readonly() ? 'is-readonly' : '',
+            this.isLoading() ? 'is-loading' : '',
         ].filter(Boolean);
     }
     get ariaDescribedBy() {
-        return this.helperText ? 'search-input-helper' : null;
+        return this.helperText() ? 'search-input-helper' : null;
     }
     onType(event) {
-        const input = event.target;
-        let newVal = input.value === '' ? this.effectiveMinimum : Number(input.value);
-        if (newVal < this.effectiveMinimum) {
-            newVal = this.effectiveMinimum;
+        const inputEl = event.target;
+        const raw = inputEl.value;
+        // Sanitize against the full-pattern regex; revert to the last valid text if invalid
+        const sanitized = this.testRegex(raw) ? raw : this.displayValue();
+        if (sanitized !== raw) {
+            inputEl.value = sanitized;
+        }
+        this.displayValue.set(sanitized);
+        // Emptying the field clears any error and notifies a null value
+        if (sanitized === '') {
+            this.value.set(null);
+            this.requiredError.set(false);
+            this.regexError.set(false);
+            this.onChangeFn(null);
+            this.emitValue.emit(null);
+            return;
         }
-        else if (this.maxValue !== Infinity && newVal > this.maxValue) {
-            newVal = this.maxValue;
+        // Clear stale validation errors while the user is editing; revalidate on blur
+        this.requiredError.set(false);
+        this.regexError.set(false);
+        // Emit the parsed number; incomplete input (trailing separator) waits for blur
+        const parsed = this.parseNumber(sanitized);
+        if (parsed !== null) {
+            this.value.set(parsed);
+            this.onChangeFn(parsed);
+            this.emitValue.emit(parsed);
         }
-        // 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;
+        // From empty, the first increment lands on the effective minimum
+        const base = this.value() ?? this.effectiveMinimum - this.step();
+        const newValue = this.round(base + this.step());
         if (this.maxValue === Infinity || newValue <= this.maxValue) {
-            this.value.set(newValue);
-            this.onChangeFn(newValue);
-            this.emitValue.emit(newValue);
+            this.commit(newValue);
         }
     }
     downNumber() {
-        const currentValue = this.value();
-        const newValue = currentValue - this.step;
+        // From empty, the first decrement lands on the effective minimum
+        const base = this.value() ?? this.effectiveMinimum + this.step();
+        const newValue = this.round(base - this.step());
         if (newValue >= this.effectiveMinimum) {
-            this.value.set(newValue);
-            this.onChangeFn(newValue);
-            this.emitValue.emit(newValue);
+            this.commit(newValue);
         }
     }
     onBlur() {
+        const raw = this.displayValue().trim();
+        const parsed = this.parseNumber(raw);
+        // Empty field: allowed when optional, flagged with alertText when required
+        if (raw === '') {
+            const changed = this.value() !== null;
+            this.value.set(null);
+            this.displayValue.set('');
+            this.requiredError.set(this.required());
+            this.regexError.set(false);
+            if (changed) {
+                this.onChangeFn(null);
+                this.emitValue.emit(null);
+            }
+            this.onTouchedFn();
+            return;
+        }
+        // Normalize and clamp the value, reformatting the displayed string
+        const next = this.clamp(parsed ?? this.value() ?? this.effectiveMinimum);
+        const changed = next !== this.value();
+        const formatted = this.formatNumber(next);
+        this.value.set(next);
+        this.displayValue.set(formatted);
+        this.requiredError.set(false);
+        // Flag a regex mismatch against the final displayed value (shows alertText)
+        this.regexError.set(!this.matchesRegex(formatted));
+        if (changed) {
+            this.onChangeFn(next);
+            this.emitValue.emit(next);
+        }
         this.onTouchedFn();
     }
+    // Set value + display + notify (used by buttons and blur)
+    commit(value) {
+        const formatted = this.formatNumber(value);
+        this.value.set(value);
+        this.displayValue.set(formatted);
+        this.requiredError.set(false);
+        this.regexError.set(!this.matchesRegex(formatted));
+        this.onChangeFn(value);
+        this.emitValue.emit(value);
+    }
+    // True when no extra regex is configured or the value matches it
+    matchesRegex(value) {
+        const pattern = this.regex();
+        if (!pattern)
+            return true;
+        return new RegExp(pattern).test(value);
+    }
+    clamp(value) {
+        let clamped = Math.max(this.effectiveMinimum, value);
+        if (this.maxValue !== Infinity) {
+            clamped = Math.min(this.maxValue, clamped);
+        }
+        return clamped;
+    }
+    round(value) {
+        const factor = Math.pow(10, this.decimals);
+        return Math.round(value * factor) / factor;
+    }
+    testRegex(value) {
+        return new RegExp(this.regexPattern()).test(value);
+    }
+    // Convert typed string to number (comma/dot aware)
+    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 using the configured separator
+    formatNumber(value) {
+        const str = value.toString();
+        return this.decimalSeparator() === 'comma' ? str.replace('.', ',') : str;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputCounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: InputCounterComponent, isStandalone: true, selector: "lib-input-counter", 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 }, allowDelete: { classPropertyName: "allowDelete", publicName: "allowDelete", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { emitValue: "emitValue" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: InputCounterComponent, isStandalone: true, selector: "lib-input-counter", inputs: { initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, alertText: { classPropertyName: "alertText", publicName: "alertText", isSignal: true, isRequired: false, transformFunction: null }, successText: { classPropertyName: "successText", publicName: "successText", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, minimum: { classPropertyName: "minimum", publicName: "minimum", isSignal: true, isRequired: false, transformFunction: null }, maximum: { classPropertyName: "maximum", publicName: "maximum", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, allowDelete: { classPropertyName: "allowDelete", publicName: "allowDelete", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", 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 }, decimalSeparator: { classPropertyName: "decimalSeparator", publicName: "decimalSeparator", isSignal: true, isRequired: false, transformFunction: null }, maxDecimals: { classPropertyName: "maxDecimals", publicName: "maxDecimals", isSignal: true, isRequired: false, transformFunction: null }, regex: { classPropertyName: "regex", publicName: "regex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { emitValue: "emitValue" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputCounterComponent),
                 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]=\"decrementIconName()\"\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", "rounded", "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  @if (label()) {\n  <lib-input-label\n    size=\"sm\"\n    [required]=\"required()\"\n    [text]=\"label()\"\n    [textOptional]=\"optionalLabel()\"\n    [isLoading]=\"isLoading()\"\n  ></lib-input-label>\n  }\n\n  <div\n    class=\"c-text-input__wrapper\"\n    [class.c-text-input__wrapper--right]=\"variant() === 'right'\"\n  >\n    <input\n      type=\"text\"\n      [name]=\"name()\"\n      [value]=\"isLoading() ? '' : displayValue()\"\n      [placeholder]=\"isLoading() ? '' : placeholder()\"\n      [disabled]=\"isDisabled() || isLoading()\"\n      [readonly]=\"readonly()\"\n      [class]=\"inputClass.join(' ')\"\n      [attr.inputmode]=\"effectiveInputmode()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-invalid]=\"hasError() ? '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]=\"isDisabled() || readonly() || isAtMinimum() || isLoading()\"\n      [loading]=\"false\"\n      variant=\"neutral\"\n      size=\"sm\"\n      class=\"c-text-input__less\"\n      [iconName]=\"decrementIconName()\"\n      (click)=\"downNumber()\"\n    >\n    </lib-button-icon>\n    <lib-button-icon\n      ariaLabel=\"m\u00E1s\"\n      [disabled]=\"isDisabled() || 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  @if (helperText() && !hasError() && !success()) {\n  <span id=\"search-input-helper\" class=\"c-text-input__helper\">\n    <lib-helper-text\n      [text]=\"helperText()\"\n      [isLoading]=\"isLoading()\"\n    ></lib-helper-text>\n  </span>\n  } @if (hasError() && errorMessage()) {\n  <span class=\"c-text-input__alert\">\n    <lib-helper-text\n      variant=\"danger\"\n      [text]=\"errorMessage()\"\n      [isLoading]=\"isLoading()\"\n    ></lib-helper-text>\n  </span>\n  } @if (successText() && success()) {\n  <span 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  }\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: "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", "rounded", "skeletonActive"], outputs: ["clicked"] }, { 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: InputCounterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-input-counter', standalone: true, imports: [
+            args: [{ selector: 'lib-input-counter', imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         InputLabelComponent,
@@ -4898,48 +5047,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             useExisting: forwardRef(() => InputCounterComponent),
                             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]=\"decrementIconName()\"\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: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], helperText: [{
-                type: Input
-            }], alertText: [{
-                type: Input
-            }], successText: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], success: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], optionalLabel: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], fullWidth: [{
-                type: Input
-            }], minimum: [{
-                type: Input
-            }], maximum: [{
-                type: Input
-            }], step: [{
-                type: Input
-            }], allowDelete: [{
-                type: Input
-            }], emitValue: [{
-                type: Output
-            }] } });
+                    ], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth()\">\n  @if (label()) {\n  <lib-input-label\n    size=\"sm\"\n    [required]=\"required()\"\n    [text]=\"label()\"\n    [textOptional]=\"optionalLabel()\"\n    [isLoading]=\"isLoading()\"\n  ></lib-input-label>\n  }\n\n  <div\n    class=\"c-text-input__wrapper\"\n    [class.c-text-input__wrapper--right]=\"variant() === 'right'\"\n  >\n    <input\n      type=\"text\"\n      [name]=\"name()\"\n      [value]=\"isLoading() ? '' : displayValue()\"\n      [placeholder]=\"isLoading() ? '' : placeholder()\"\n      [disabled]=\"isDisabled() || isLoading()\"\n      [readonly]=\"readonly()\"\n      [class]=\"inputClass.join(' ')\"\n      [attr.inputmode]=\"effectiveInputmode()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.aria-invalid]=\"hasError() ? '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]=\"isDisabled() || readonly() || isAtMinimum() || isLoading()\"\n      [loading]=\"false\"\n      variant=\"neutral\"\n      size=\"sm\"\n      class=\"c-text-input__less\"\n      [iconName]=\"decrementIconName()\"\n      (click)=\"downNumber()\"\n    >\n    </lib-button-icon>\n    <lib-button-icon\n      ariaLabel=\"m\u00E1s\"\n      [disabled]=\"isDisabled() || 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  @if (helperText() && !hasError() && !success()) {\n  <span id=\"search-input-helper\" class=\"c-text-input__helper\">\n    <lib-helper-text\n      [text]=\"helperText()\"\n      [isLoading]=\"isLoading()\"\n    ></lib-helper-text>\n  </span>\n  } @if (hasError() && errorMessage()) {\n  <span class=\"c-text-input__alert\">\n    <lib-helper-text\n      variant=\"danger\"\n      [text]=\"errorMessage()\"\n      [isLoading]=\"isLoading()\"\n    ></lib-helper-text>\n  </span>\n  } @if (successText() && success()) {\n  <span 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  }\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: () => [] });
 
 class TextInputComponent {
     label = '';