@siemens/ix 0.0.0-20240522073858 → 0.0.0-pr-1318-20240627080522

package/dist/collection/components/date-field/date-field.js

@@ -0,0 +1,696 @@
+/*
+ * 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 { Host, h, } from "@stencil/core";
+import { DateTime } from "luxon";
+import { dropdownController } from "../dropdown/dropdown-controller";
+import { makeRef } from "../utils/make-ref";
+import { HookValidationLifecycle, createClassMutationObserver, } from "../utils/field";
+import { PostfixSlot, PrefixSlot } from "../text-field/input.fc";
+import { adjustPaddingForPrefixAndPostfix } from "../text-field/text-field.util";
+import { iconCalendar } from "@siemens/ix-icons/icons";
+/**
+ * @since 2.4.0
+ * @form-ready 2.4.0
+ */
+export class DateField {
+    constructor() {
+        this.prefixRef = makeRef();
+        this.postfixRef = makeRef();
+        this.datepickerRef = makeRef();
+        this.inputElementRef = makeRef();
+        this.dropdownElementRef = makeRef();
+        this.name = undefined;
+        this.placeholder = undefined;
+        this.value = '';
+        this.format = 'yyyy/LL/dd';
+        this.required = undefined;
+        this.helperText = undefined;
+        this.label = undefined;
+        this.invalidText = undefined;
+        this.readonly = false;
+        this.disabled = false;
+        this.infoText = undefined;
+        this.warningText = undefined;
+        this.validText = undefined;
+        this.showTextAsTooltip = undefined;
+        this.i18nErrorDateUnparsable = 'Date is not valid';
+        this.show = false;
+        this.from = null;
+        this.isInputInvalid = false;
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+        this.focus = false;
+    }
+    updateFormInternalValue(value) {
+        this.formInternals.setFormValue(value);
+        this.value = value;
+    }
+    connectedCallback() {
+        this.classObserver = createClassMutationObserver(this.hostElement, () => this.checkClassList());
+    }
+    componentWillLoad() {
+        this.onInput(this.value);
+        if (this.isInputInvalid) {
+            this.from = null;
+        }
+        else {
+            this.watchValue();
+        }
+        this.checkClassList();
+        this.updateFormInternalValue(this.value);
+    }
+    componentDidRender() {
+        setTimeout(() => this.updatePaddings());
+    }
+    updatePaddings() {
+        adjustPaddingForPrefixAndPostfix(this.prefixRef.current, this.postfixRef.current, this.inputElementRef.current);
+    }
+    disconnectedCallback() {
+        if (this.classObserver) {
+            this.classObserver.destroy();
+        }
+    }
+    watchValue() {
+        this.from = this.value;
+    }
+    /** @internal */
+    hasValidValue() {
+        return Promise.resolve(!!this.value);
+    }
+    /** @internal */
+    getAssociatedFormElement() {
+        return Promise.resolve(this.formInternals.form);
+    }
+    async onInput(value) {
+        this.value = value;
+        if (!value) {
+            this.valueChange.emit(value);
+            return;
+        }
+        if (!this.format) {
+            return;
+        }
+        const date = DateTime.fromFormat(value, this.format);
+        if (date.isValid) {
+            this.isInputInvalid = false;
+            this.updateFormInternalValue(value);
+            this.closeDropdown();
+        }
+        else {
+            this.isInputInvalid = true;
+            this.invalidReason = date.invalidReason;
+        }
+        this.valueChange.emit(value);
+    }
+    async openDropdown() {
+        const dropdownElement = await this.dropdownElementRef.waitForCurrent();
+        const id = dropdownElement.getAttribute('data-ix-dropdown');
+        dropdownController.dismissAll();
+        if (!id) {
+            return;
+        }
+        const dropdown = dropdownController.getDropdownById(id);
+        if (!dropdown) {
+            return;
+        }
+        dropdownController.present(dropdown);
+    }
+    async closeDropdown() {
+        const dropdownElement = await this.dropdownElementRef.waitForCurrent();
+        const id = dropdownElement.getAttribute('data-ix-dropdown');
+        if (!id) {
+            return;
+        }
+        const dropdown = dropdownController.getDropdownById(id);
+        if (!dropdown) {
+            return;
+        }
+        dropdownController.dismiss(dropdown);
+    }
+    checkClassList() {
+        this.isInvalid = this.hostElement.classList.contains('ix-invalid');
+    }
+    renderInput() {
+        return (h("div", { class: "input-wrapper" }, h(PrefixSlot, { prefixRef: this.prefixRef, onSlotChange: () => this.updatePaddings() }), h("input", { autoComplete: "off", class: {
+                'is-invalid': this.isInputInvalid,
+            }, disabled: this.disabled, readOnly: this.readonly, readonly: this.readonly, required: this.required, ref: this.inputElementRef, type: "text", value: this.value, onInput: (event) => {
+                const target = event.target;
+                this.onInput(target.value);
+            }, onClick: (event) => {
+                if (this.show) {
+                    event.stopPropagation();
+                    event.preventDefault();
+                }
+            }, onFocus: async () => {
+                this.openDropdown();
+                this.ixFocus.emit();
+            }, onBlur: () => this.ixBlur.emit() }), h(PostfixSlot, { postfixRef: this.postfixRef, onSlotChange: () => this.updatePaddings() }, this.disabled || this.readonly ? null : (h("ix-icon-button", { "data-testid": "open-calendar", ghost: true, icon: iconCalendar, onClick: (event) => {
+                if (!this.show) {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    this.openDropdown();
+                    this.inputElementRef.current.focus();
+                }
+            } })))));
+    }
+    hookValidationLifecycle({ isInfo, isInvalid, isInvalidByRequired, isValid, isWarning, }) {
+        this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;
+        this.isInfo = isInfo;
+        this.isValid = isValid;
+        this.isWarning = isWarning;
+    }
+    async onInputValidationChange() {
+        const state = await this.getValidityState();
+        this.validityStateChange.emit({
+            patternMismatch: state.patternMismatch,
+            invalidReason: this.invalidReason,
+        });
+    }
+    /** @internal */
+    getValidityState() {
+        return Promise.resolve({
+            badInput: false,
+            customError: false,
+            patternMismatch: this.isInputInvalid,
+            rangeOverflow: false,
+            rangeUnderflow: false,
+            stepMismatch: false,
+            tooLong: false,
+            tooShort: false,
+            typeMismatch: false,
+            valid: !this.isInputInvalid,
+            valueMissing: !!this.required && !this.value,
+        });
+    }
+    /**
+     * Get the native input element
+     */
+    getNativeInputElement() {
+        return this.inputElementRef.waitForCurrent();
+    }
+    render() {
+        var _a;
+        const invalidText = this.isInputInvalid
+            ? this.i18nErrorDateUnparsable
+            : this.invalidText;
+        return (h(Host, { key: 'fed4dc54547b432e3446f1c235beb96e13a1543a', class: {
+                disabled: this.disabled,
+                readonly: this.readonly,
+            } }, h("ix-field-wrapper", { key: 'c6cca552620a8d4a9c059a84f458314ee5b1bd15', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, h("slot", { key: '44d13000bafda1e7057c842f827ae7ff017d494d', name: "label", slot: "label" }), this.renderInput()), h("ix-dropdown", { key: 'f68e07d469ffa46a17decdf947a7ef7cc6a05fb6', "data-testid": "date-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", show: this.show, onShowChanged: (event) => {
+                this.show = event.detail;
+            } }, h("ix-date-picker", { key: 'fe7fd2c799412e4bbe7b90ce978fd21cb4a3b0bf', ref: this.datepickerRef, format: this.format, range: false, from: (_a = this.from) !== null && _a !== void 0 ? _a : '', onDateChange: (event) => {
+                const { from } = event.detail;
+                this.onInput(from);
+            } }))));
+    }
+    static get is() { return "ix-date-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["date-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["date-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": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "value of the input element"
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Date format string.\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens."
+                },
+                "attribute": "format",
+                "reflect": false,
+                "defaultValue": "'yyyy/LL/dd'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "required attribute"
+                },
+                "attribute": "required",
+                "reflect": false
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "helper text below the input field"
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "label of the input field"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "invalidText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "error text below the input field"
+                },
+                "attribute": "invalid-text",
+                "reflect": true
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "readonly attribute"
+                },
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "disabled attribute"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "info text below the input field"
+                },
+                "attribute": "info-text",
+                "reflect": false
+            },
+            "warningText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "warning text below the input field"
+                },
+                "attribute": "warning-text",
+                "reflect": false
+            },
+            "validText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "valid text below the input field"
+                },
+                "attribute": "valid-text",
+                "reflect": false
+            },
+            "showTextAsTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "show text as tooltip"
+                },
+                "attribute": "show-text-as-tooltip",
+                "reflect": false
+            },
+            "i18nErrorDateUnparsable": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "i18n string for the error message when the date is not parsable"
+                },
+                "attribute": "i18n-error-date-unparsable",
+                "reflect": false,
+                "defaultValue": "'Date is not valid'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "show": {},
+            "from": {},
+            "isInputInvalid": {},
+            "isInvalid": {},
+            "isValid": {},
+            "isInfo": {},
+            "isWarning": {},
+            "focus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Input change event."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "validityStateChange",
+                "name": "validityStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation state change event."
+                },
+                "complexType": {
+                    "original": "DateFieldValidityState",
+                    "resolved": "{ patternMismatch: boolean; invalidReason?: string; }",
+                    "references": {
+                        "DateFieldValidityState": {
+                            "location": "local",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/date-field/date-field.tsx",
+                            "id": "src/components/date-field/date-field.tsx::DateFieldValidityState"
+                        }
+                    }
+                }
+            }, {
+                "method": "ixFocus",
+                "name": "ixFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "ixBlur",
+                "name": "ixBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "hasValidValue": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "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
+                        }]
+                }
+            },
+            "getValidityState": {
+                "complexType": {
+                    "signature": "() => Promise<ValidityState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ValidityState": {
+                            "location": "global",
+                            "id": "global::ValidityState"
+                        }
+                    },
+                    "return": "Promise<ValidityState>"
+                },
+                "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": "Get the native input element",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValue"
+            }, {
+                "propName": "isInputInvalid",
+                "methodName": "onInputValidationChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "formInternals"; }
+}
+__decorate([
+    HookValidationLifecycle()
+], DateField.prototype, "hookValidationLifecycle", null);
+//# sourceMappingURL=date-field.js.map