@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1373-20240705054533

package/dist/collection/components/text-field/number-field.js

@@ -1,586 +0,0 @@
-/*
- * 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/field";
-import { makeRef } from "../utils/make-ref";
-import { InputElement, PostfixSlot, PrefixSlot } from "./input.fc";
-import { applyPostfixPadding, checkAllowedKeys, checkInternalValidity, mapValidationResult, onInputBlur, } from "./text-field.util";
-let numberFieldIds = 0;
-/**
- * @since 2.4.0
- * @form-ready 2.4.0
- */
-export class NumberField {
-    constructor() {
-        this.inputRef = makeRef();
-        this.postfixRef = makeRef();
-        this.prefixRef = makeRef();
-        this.numberFieldId = `number-field-${numberFieldIds++}`;
-        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() {
-        setTimeout(() => this.updatePaddings());
-    }
-    updatePaddings() {
-        var _a, _b;
-        const prefixBoundingRect = (_a = this.prefixRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const postfixBoundingRect = (_b = this.postfixRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-        if (prefixBoundingRect) {
-            applyPostfixPadding(this.inputRef.current, prefixBoundingRect.width, {
-                postfix: false,
-            });
-        }
-        if (postfixBoundingRect) {
-            applyPostfixPadding(this.inputRef.current, postfixBoundingRect.width, {
-                postfix: true,
-            });
-        }
-    }
-    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();
-    }
-    render() {
-        const showStepperButtons = this.showStepperButtons && (this.disabled || this.readonly) === false;
-        return (h(Host, { key: 'bc98043b834e63219ec186af3e80a072227b99ff', class: {
-                disabled: this.disabled,
-                readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: 'e91f81a841bca01fe5f04b53650d5321b9f916f2', id: this.numberFieldId, 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("slot", { key: '5f5a579c6d333deaf5e5ab58e4178eeed5489f07', name: "label", slot: "label" }), h("div", { key: '01f923bb9747f14ef7695ecf948d05e8f38a557c', class: {
-                'input-wrapper': true,
-                'show-stepper-buttons': !!this.showStepperButtons,
-            } }, h(PrefixSlot, { key: 'a3e90b0961e0861e2cb22650ebe3fb4ac8d152b5', prefixRef: this.prefixRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: 'b88c27a10f346733ab9b03376c4e2f450ed70c33', id: this.numberFieldId, 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(PostfixSlot, { key: 'bb222aba3806e77c1fad93ef196e7e495b2a0782', postfixRef: this.postfixRef, onSlotChange: () => this.updatePaddings() }, showStepperButtons && (h("div", { key: 'e8f7697df863932a07d01876a9b23224d701a772', class: "number-stepper-container" }, h("ix-icon-button", { key: '32f08267ab6e67e1003066d04d5e4f5533a6eab1', ghost: true, icon: iconMinus, size: "16", class: "number-stepper-button step-minus", onClick: () => {
-                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: '94fc35967b5b7a5988d55da06ba77fd2c3af0d1e', ghost: true, icon: iconPlus, size: "16", class: "number-stepper-button step-plus", onClick: () => {
-                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-field"; }
-    static get encapsulation() { return "shadow"; }
-    static get formAssociated() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["number-field.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["number-field.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": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "hostElement"; }
-    static get attachInternalsMemberName() { return "formInternals"; }
-}
-__decorate([
-    HookValidationLifecycle()
-], NumberField.prototype, "updateClassMappings", null);
-//# sourceMappingURL=number-field.js.map

package/dist/collection/components/text-field/number-field.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"number-field.js","sourceRoot":"","sources":["../../../src/components/text-field/number-field.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;;;;;;;AAEH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EACL,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,uBAAuB,GAGxB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACnB,WAAW,GACZ,MAAM,mBAAmB,CAAC;AAE3B,IAAI,cAAc,GAAG,CAAC,CAAC;AAEvB;;;GAGG;AAOH,MAAM,OAAO,WAAW;;QAmHd,aAAQ,GAAG,OAAO,EAAoB,CAAC;QACvC,eAAU,GAAG,OAAO,EAAkB,CAAC;QACvC,cAAS,GAAG,OAAO,EAAkB,CAAC;QACtC,kBAAa,GAAG,gBAAgB,cAAc,EAAE,EAAE,CAAC;;;qBArGH,CAAC;wBAKZ,KAAK;wBAKtB,KAAK;wBAKL,KAAK;;;;;;;;;;;;;yBA6EZ,KAAK;uBACP,KAAK;sBACN,KAAK;yBACF,KAAK;mCACK,KAAK;;IAQpC,mBAAmB,CAAC,MAAyB;QAC3C,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACpC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,kBAAkB;QAChB,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;IAC1C,CAAC;IAEO,cAAc;;QACpB,MAAM,kBAAkB,GAAG,MAAA,IAAI,CAAC,SAAS,CAAC,OAAO,0CAAE,qBAAqB,EAAE,CAAC;QAC3E,MAAM,mBAAmB,GACvB,MAAA,IAAI,CAAC,UAAU,CAAC,OAAO,0CAAE,qBAAqB,EAAE,CAAC;QAEnD,IAAI,kBAAkB,EAAE,CAAC;YACvB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,kBAAkB,CAAC,KAAK,EAAE;gBACnE,OAAO,EAAE,KAAK;aACf,CAAC,CAAC;QACL,CAAC;QAED,IAAI,mBAAmB,EAAE,CAAC;YACxB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAC,KAAK,EAAE;gBACpE,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,uBAAuB,CAAC,KAAa;QACnC,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;QAClD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAED,gBAAgB;IAEhB,KAAK,CAAC,wBAAwB;QAC5B,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;IACjC,CAAC;IAED,gBAAgB;IAEhB,aAAa;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IAED;;OAEG;IAEH,qBAAqB;QACnB,OAAO,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,MAAM,kBAAkB,GACtB,IAAI,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,KAAK,CAAC;QAExE,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB;YAED,yEACE,EAAE,EAAE,IAAI,CAAC,aAAa,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,QAAQ;gBAEzB,6DAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ;gBACvC,4DACE,KAAK,EAAE;wBACL,eAAe,EAAE,IAAI;wBACrB,sBAAsB,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB;qBAClD;oBAED,EAAC,UAAU,qDACT,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,GAC7B;oBACd,EAAC,YAAY,qDACX,EAAE,EAAE,IAAI,CAAC,aAAa,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC,EACpD,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAC5D,uBAAuB,EAAE,CAAC,KAAK,EAAE,EAAE,CACjC,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAE7C,MAAM,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GACxC;oBAChB,EAAC,WAAW,qDACV,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAExC,kBAAkB,IAAI,CACrB,4DAAK,KAAK,EAAC,0BAA0B;wBACnC,uEACE,KAAK,QACL,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,kCAAkC,EACxC,OAAO,EAAE,GAAG,EAAE;gCACZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;gCACjC,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;gCACnD,IAAI,CAAC,uBAAuB,CAC1B,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CACpC,CAAC;gCACF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;4BACpC,CAAC,GACe;wBAClB,uEACE,KAAK,QACL,IAAI,EAAE,QAAQ,EACd,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,iCAAiC,EACvC,OAAO,EAAE,GAAG,EAAE;gCACZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;gCAC/B,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;gCACnD,IAAI,CAAC,uBAAuB,CAC1B,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CACpC,CAAC;gCACF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;4BACpC,CAAC,GACe,CACd,CACP,CACW,CACV,CACW,CACd,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AA3JC;IADC,uBAAuB,EAAE;sDAGzB","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/field';\nimport { makeRef } from '../utils/make-ref';\nimport { InputElement, PostfixSlot, PrefixSlot } from './input.fc';\nimport {\n  applyPostfixPadding,\n  checkAllowedKeys,\n  checkInternalValidity,\n  mapValidationResult,\n  onInputBlur,\n} from './text-field.util';\n\nlet numberFieldIds = 0;\n\n/**\n * @since 2.4.0\n * @form-ready 2.4.0\n */\n@Component({\n  tag: 'ix-number-field',\n  styleUrl: 'number-field.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NumberField implements IxInputFieldComponent<number> {\n  @Element() hostElement!: HTMLIxNumberFieldElement;\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 inputRef = makeRef<HTMLInputElement>();\n  private postfixRef = makeRef<HTMLDivElement>();\n  private prefixRef = makeRef<HTMLDivElement>();\n  private numberFieldId = `number-field-${numberFieldIds++}`;\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    setTimeout(() => this.updatePaddings());\n  }\n\n  private updatePaddings() {\n    const prefixBoundingRect = this.prefixRef.current?.getBoundingClientRect();\n    const postfixBoundingRect =\n      this.postfixRef.current?.getBoundingClientRect();\n\n    if (prefixBoundingRect) {\n      applyPostfixPadding(this.inputRef.current, prefixBoundingRect.width, {\n        postfix: false,\n      });\n    }\n\n    if (postfixBoundingRect) {\n      applyPostfixPadding(this.inputRef.current, postfixBoundingRect.width, {\n        postfix: true,\n      });\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  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.numberFieldId}\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}\n        >\n          <slot name=\"label\" slot=\"label\"></slot>\n          <div\n            class={{\n              'input-wrapper': true,\n              'show-stepper-buttons': !!this.showStepperButtons,\n            }}\n          >\n            <PrefixSlot\n              prefixRef={this.prefixRef}\n              onSlotChange={() => this.updatePaddings()}\n            ></PrefixSlot>\n            <InputElement\n              id={this.numberFieldId}\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            <PostfixSlot\n              postfixRef={this.postfixRef}\n              onSlotChange={() => this.updatePaddings()}\n            >\n              {showStepperButtons && (\n                <div class=\"number-stepper-container\">\n                  <ix-icon-button\n                    ghost\n                    icon={iconMinus}\n                    size=\"16\"\n                    class=\"number-stepper-button step-minus\"\n                    onClick={() => {\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                      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              )}\n            </PostfixSlot>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}