@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1522-20241021144048

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

@@ -1,696 +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 { 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