@siemens/ix 2.4.1 → 2.6.0

package/dist/collection/components/input/number-input.js

@@ -0,0 +1,606 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { iconMinus, iconPlus } from "@siemens/ix-icons/icons";
+import { Host, h, } from "@stencil/core";
+import { HookValidationLifecycle, } from "../utils/input";
+import { makeRef } from "../utils/make-ref";
+import { InputElement, SlotEnd, SlotStart } from "./input.fc";
+import { adjustPaddingForStartAndEnd, checkAllowedKeys, checkInternalValidity, mapValidationResult, onInputBlur, } from "./input.util";
+let numberInputIds = 0;
+/**
+ * @since 2.6.0
+ * @form-ready 2.6.0
+ */
+export class NumberInput {
+    constructor() {
+        this.inputRef = makeRef();
+        this.slotEndRef = makeRef();
+        this.slotStartRef = makeRef();
+        this.numberInputId = `number-input-${numberInputIds++}`;
+        this.name = undefined;
+        this.placeholder = undefined;
+        this.value = 0;
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.helperText = undefined;
+        this.infoText = undefined;
+        this.showTextAsTooltip = undefined;
+        this.validText = undefined;
+        this.warningText = undefined;
+        this.label = undefined;
+        this.invalidText = undefined;
+        this.pattern = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.allowedCharactersPattern = undefined;
+        this.showStepperButtons = undefined;
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+        this.isInvalidByRequired = false;
+    }
+    updateClassMappings(result) {
+        mapValidationResult(this, result);
+    }
+    componentWillLoad() {
+        this.updateFormInternalValue(this.value);
+    }
+    componentDidRender() {
+        this.updatePaddings();
+    }
+    updatePaddings() {
+        adjustPaddingForStartAndEnd(this.slotStartRef.current, this.slotEndRef.current, this.inputRef.current);
+    }
+    updateFormInternalValue(value) {
+        this.formInternals.setFormValue(value.toString());
+        this.value = value;
+    }
+    /** @internal */
+    async getAssociatedFormElement() {
+        return this.formInternals.form;
+    }
+    /** @internal */
+    hasValidValue() {
+        return Promise.resolve(!!this.value);
+    }
+    /**
+     * Returns the native input element used under the hood
+     */
+    getNativeInputElement() {
+        return this.inputRef.waitForCurrent();
+    }
+    /**
+     * Focuses the input field
+     */
+    async focusInput() {
+        return (await this.getNativeInputElement()).focus();
+    }
+    render() {
+        const showStepperButtons = this.showStepperButtons && (this.disabled || this.readonly) === false;
+        return (h(Host, { key: '257156c1c5ec77ef4426b3a8818941f0b28062c6', class: {
+                disabled: this.disabled,
+                readonly: this.readonly,
+            } }, h("ix-field-wrapper", { key: 'ab953fa1af86d3f0415b709fff3871e17f00453a', id: this.numberInputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '82ab33e39746a47d1c387f953b3862bd47547a4b', class: {
+                'input-wrapper': true,
+                'show-stepper-buttons': !!this.showStepperButtons,
+            } }, h(SlotStart, { key: '252e87d3380c33806b2a1af84b98d672e2f0980f', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'd2cbab2e83934c970e9b8fce0390d5ad01234646', id: this.numberInputId, readonly: this.readonly, disabled: this.disabled, min: this.min, max: this.max, pattern: this.pattern, type: 'number', isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(Number(value)), updateFormInternalValue: (value) => this.updateFormInternalValue(Number(value)), onBlur: () => onInputBlur(this, this.inputRef.current) }), h(SlotEnd, { key: '9a9a6de11186692b3707d85315a124256124ad2f', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("div", { key: '97a24bdb25e6a6818038f662eb14a94e4e79d7a0', class: {
+                'number-stepper-container': true,
+                'container-hidden': !showStepperButtons,
+            } }, h("ix-icon-button", { key: '89d6c0aea01ea12ad5342cf825f9f43748e5f47a', ghost: true, icon: iconMinus, size: "16", class: "number-stepper-button step-minus", onClick: () => {
+                if (!this.inputRef.current) {
+                    return;
+                }
+                this.inputRef.current.stepDown();
+                checkInternalValidity(this, this.inputRef.current);
+                this.updateFormInternalValue(Number(this.inputRef.current.value));
+                this.valueChange.emit(this.value);
+            } }), h("ix-icon-button", { key: '7a913f64e5abf65be33268df93eae3635452b51b', ghost: true, icon: iconPlus, size: "16", class: "number-stepper-button step-plus", onClick: () => {
+                if (!this.inputRef.current) {
+                    return;
+                }
+                this.inputRef.current.stepUp();
+                checkInternalValidity(this, this.inputRef.current);
+                this.updateFormInternalValue(Number(this.inputRef.current.value));
+                this.valueChange.emit(this.value);
+            } })))))));
+    }
+    static get is() { return "ix-number-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["number-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["number-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "name of the input element"
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "placeholder of the input element"
+                },
+                "attribute": "placeholder",
+                "reflect": true
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the input field"
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "0"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the field is required"
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the input field"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the field is read-only"
+                },
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The helper text for the input field"
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The info text for the input field"
+                },
+                "attribute": "info-text",
+                "reflect": false
+            },
+            "showTextAsTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the text should be shown as a tooltip"
+                },
+                "attribute": "show-text-as-tooltip",
+                "reflect": false
+            },
+            "validText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The valid text for the input field"
+                },
+                "attribute": "valid-text",
+                "reflect": false
+            },
+            "warningText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The warning text for the input field"
+                },
+                "attribute": "warning-text",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the input field"
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "invalidText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The error text for the input field"
+                },
+                "attribute": "invalid-text",
+                "reflect": false
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The pattern for the input field"
+                },
+                "attribute": "pattern",
+                "reflect": false
+            },
+            "min": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum value for the input field"
+                },
+                "attribute": "min",
+                "reflect": false
+            },
+            "max": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum value for the input field"
+                },
+                "attribute": "max",
+                "reflect": false
+            },
+            "allowedCharactersPattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The allowed characters pattern for the input field"
+                },
+                "attribute": "allowed-characters-pattern",
+                "reflect": false
+            },
+            "showStepperButtons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the stepper buttons should be shown"
+                },
+                "attribute": "show-stepper-buttons",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isInvalid": {},
+            "isValid": {},
+            "isInfo": {},
+            "isWarning": {},
+            "isInvalidByRequired": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the value of the input field changes"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "validityStateChange",
+                "name": "validityStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the validity state of the input field changes"
+                },
+                "complexType": {
+                    "original": "ValidityState",
+                    "resolved": "ValidityState",
+                    "references": {
+                        "ValidityState": {
+                            "location": "global",
+                            "id": "global::ValidityState"
+                        }
+                    }
+                }
+            }, {
+                "method": "ixBlur",
+                "name": "ixBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the input field loses focus"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getAssociatedFormElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLFormElement | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLFormElement": {
+                            "location": "global",
+                            "id": "global::HTMLFormElement"
+                        }
+                    },
+                    "return": "Promise<HTMLFormElement>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "hasValidValue": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getNativeInputElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLInputElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    },
+                    "return": "Promise<HTMLInputElement>"
+                },
+                "docs": {
+                    "text": "Returns the native input element used under the hood",
+                    "tags": []
+                }
+            },
+            "focusInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focuses the input field",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get attachInternalsMemberName() { return "formInternals"; }
+}
+__decorate([
+    HookValidationLifecycle()
+], NumberInput.prototype, "updateClassMappings", null);
+//# sourceMappingURL=number-input.js.map

package/dist/collection/components/input/number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.js","sourceRoot":"","sources":["../../../src/components/input/number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { iconMinus, iconPlus } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  h,\n} from '@stencil/core';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { InputElement, SlotEnd, SlotStart } from './input.fc';\nimport {\n  adjustPaddingForStartAndEnd,\n  checkAllowedKeys,\n  checkInternalValidity,\n  mapValidationResult,\n  onInputBlur,\n} from './input.util';\n\nlet numberInputIds = 0;\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-number-input',\n  styleUrl: 'number-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NumberInput implements IxInputFieldComponent<number> {\n  @Element() hostElement!: HTMLIxNumberInputElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * name of the input element\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * placeholder of the input element\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * The value of the input field\n   */\n  @Prop({ reflect: true, mutable: true }) value: number = 0;\n\n  /**\n   * Indicates if the field is required\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Disables the input field\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Indicates if the field is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * The helper text for the input field\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The info text for the input field\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Indicates if the text should be shown as a tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * The valid text for the input field\n   */\n  @Prop() validText?: string;\n\n  /**\n   * The warning text for the input field\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * The label for the input field\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The error text for the input field\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * The pattern for the input field\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * The minimum value for the input field\n   */\n  @Prop() min?: string | number;\n\n  /**\n   * The maximum value for the input field\n   */\n  @Prop() max?: string | number;\n\n  /**\n   * The allowed characters pattern for the input field\n   */\n  @Prop() allowedCharactersPattern?: string;\n\n  /**\n   * Indicates if the stepper buttons should be shown\n   */\n  @Prop() showStepperButtons?: boolean;\n\n  /**\n   * Event emitted when the value of the input field changes\n   */\n  @Event() valueChange!: EventEmitter<number>;\n\n  /**\n   * Event emitted when the validity state of the input field changes\n   */\n  @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n  /**\n   * Event emitted when the input field loses focus\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() isInvalidByRequired = false;\n\n  private readonly inputRef = makeRef<HTMLInputElement>();\n  private readonly slotEndRef = makeRef<HTMLDivElement>();\n  private readonly slotStartRef = makeRef<HTMLDivElement>();\n  private readonly numberInputId = `number-input-${numberInputIds++}`;\n\n  @HookValidationLifecycle()\n  updateClassMappings(result: ValidationResults) {\n    mapValidationResult(this, result);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue(this.value);\n  }\n\n  componentDidRender() {\n    this.updatePaddings();\n  }\n\n  private updatePaddings() {\n    adjustPaddingForStartAndEnd(\n      this.slotStartRef.current,\n      this.slotEndRef.current,\n      this.inputRef.current\n    );\n  }\n\n  updateFormInternalValue(value: number) {\n    this.formInternals.setFormValue(value.toString());\n    this.value = value;\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /**\n   * Returns the native input element used under the hood\n   */\n  @Method()\n  getNativeInputElement(): Promise<HTMLInputElement> {\n    return this.inputRef.waitForCurrent();\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  render() {\n    const showStepperButtons =\n      this.showStepperButtons && (this.disabled || this.readonly) === false;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          id={this.numberInputId}\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.inputRef as unknown as MakeRef<HTMLElement>}\n        >\n          <div\n            class={{\n              'input-wrapper': true,\n              'show-stepper-buttons': !!this.showStepperButtons,\n            }}\n          >\n            <SlotStart\n              slotStartRef={this.slotStartRef}\n              onSlotChange={() => this.updatePaddings()}\n            ></SlotStart>\n            <InputElement\n              id={this.numberInputId}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              min={this.min}\n              max={this.max}\n              pattern={this.pattern}\n              type={'number'}\n              isInvalid={this.isInvalid}\n              required={this.required}\n              value={this.value}\n              placeholder={this.placeholder}\n              inputRef={this.inputRef}\n              onKeyPress={(event) => checkAllowedKeys(this, event)}\n              valueChange={(value) => this.valueChange.emit(Number(value))}\n              updateFormInternalValue={(value) =>\n                this.updateFormInternalValue(Number(value))\n              }\n              onBlur={() => onInputBlur(this, this.inputRef.current)}\n            ></InputElement>\n            <SlotEnd\n              slotEndRef={this.slotEndRef}\n              onSlotChange={() => this.updatePaddings()}\n            >\n              <div\n                class={{\n                  'number-stepper-container': true,\n                  'container-hidden': !showStepperButtons,\n                }}\n              >\n                <ix-icon-button\n                  ghost\n                  icon={iconMinus}\n                  size=\"16\"\n                  class=\"number-stepper-button step-minus\"\n                  onClick={() => {\n                    if (!this.inputRef.current) {\n                      return;\n                    }\n                    this.inputRef.current.stepDown();\n                    checkInternalValidity(this, this.inputRef.current);\n                    this.updateFormInternalValue(\n                      Number(this.inputRef.current.value)\n                    );\n                    this.valueChange.emit(this.value);\n                  }}\n                ></ix-icon-button>\n                <ix-icon-button\n                  ghost\n                  icon={iconPlus}\n                  size=\"16\"\n                  class=\"number-stepper-button step-plus\"\n                  onClick={() => {\n                    if (!this.inputRef.current) {\n                      return;\n                    }\n                    this.inputRef.current.stepUp();\n                    checkInternalValidity(this, this.inputRef.current);\n                    this.updateFormInternalValue(\n                      Number(this.inputRef.current.value)\n                    );\n                    this.valueChange.emit(this.value);\n                  }}\n                ></ix-icon-button>\n              </div>\n            </SlotEnd>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}