@uh-design-system/component-library 1.4.0 → 1.5.0

package/dist/collection/components/01-base-components/ds-datepicker/ds-datepicker-simple/ds-datepicker-simple.js

@@ -0,0 +1,727 @@
+import { h } from "@stencil/core";
+import { declareComponentDependencies, transformTagName } from "../../../../utils/utils";
+import { cx } from "../../../../utils/cx";
+import { validityMessage, rangeUnderflow, rangeOverflow, badInput, valueMissing, } from "../../../../utils/controls/controlUtils";
+import { parseISODate, formatDisplayDate, parseInputDate, handleDateInputKeyDown, dateNotAvailable } from "../../../../utils/datepicker/datepickerUtils";
+export class DsDatepickerSimple {
+    el;
+    dsAriaDescribedby;
+    dsAriaControls;
+    dsId;
+    dsLabel = '';
+    dsValue;
+    dsName;
+    dsForm;
+    dsDisabled = false;
+    dsReadonly = false;
+    dsErrorText;
+    dsRequired = false;
+    dsOptional;
+    dsOptionalText;
+    dsAssistiveText;
+    dsHiddenAssistiveText;
+    dsPlaceholder;
+    dsMin;
+    dsMax;
+    dsDisabledDates;
+    dsChange;
+    dsValidity;
+    dsSubmitInvalid;
+    dsBlur;
+    dsFocus;
+    selectedDate = '';
+    hasFocus = false;
+    internalErrorText = '';
+    wasInvalidOnBlur = false;
+    inputValue = null;
+    textInputRef;
+    inputRef;
+    get validityText() {
+        return this.dsErrorText || this.internalErrorText || '';
+    }
+    get DsControlLabel() {
+        return transformTagName('ds-control-label', 'ds-datepicker-simple', this.el);
+    }
+    get DsInputValidityTag() {
+        return transformTagName('ds-input-validity', 'ds-datepicker-simple', this.el);
+    }
+    get DsTextInputTag() {
+        return transformTagName('ds-text-input', 'ds-datepicker-simple', this.el);
+    }
+    componentWillLoad() {
+        this.selectedDate = this.dsValue || '';
+    }
+    componentDidLoad() {
+        this.inputRef = this.textInputRef?.querySelector('input');
+        this.inputRef?.addEventListener('keydown', handleDateInputKeyDown);
+    }
+    onFocusIn() {
+        this.hasFocus = true;
+    }
+    onFocusOut(e) {
+        const nextFocused = e && 'relatedTarget' in e ? e.relatedTarget : null;
+        const lostFocus = !nextFocused || !this.el.contains(nextFocused);
+        if (lostFocus) {
+            this.hasFocus = false;
+            const { isValid, flag, message } = this.validateInputValue();
+            this.wasInvalidOnBlur = !isValid;
+            if (isValid && this.inputRef) {
+                const inputValue = this.inputRef.value.trim();
+                if (inputValue) {
+                    const parsedDateString = parseInputDate(inputValue);
+                    if (parsedDateString && parsedDateString !== this.selectedDate) {
+                        this.selectedDate = parsedDateString;
+                        this.dsChange.emit(parsedDateString);
+                    }
+                }
+                else {
+                    if (this.selectedDate) {
+                        this.selectedDate = '';
+                        this.dsChange.emit('');
+                    }
+                }
+                this.inputValue = null;
+            }
+            this.internalErrorText = message;
+            this.dsValidity.emit({
+                flag,
+                message,
+            });
+        }
+    }
+    hasFocusObserver(newValue) {
+        if (newValue) {
+            this.dsFocus.emit();
+        }
+        else {
+            this.dsBlur.emit();
+        }
+    }
+    dsValueObserver(newValue) {
+        this.selectedDate = newValue || '';
+    }
+    validateInputValue = () => {
+        if (!this.inputRef) {
+            return { isValid: true, flag: 'valid', message: '' };
+        }
+        const inputValue = this.inputRef.value.trim();
+        if (!inputValue && this.dsRequired) {
+            return { isValid: false, flag: 'valueMissing', message: valueMissing() };
+        }
+        if (!inputValue) {
+            return { isValid: true, flag: 'valid', message: '' };
+        }
+        const parsedDateString = parseInputDate(inputValue);
+        if (!parsedDateString) {
+            return { isValid: false, flag: 'badInput', message: badInput() };
+        }
+        const date = parseISODate(parsedDateString);
+        if (!date) {
+            return { isValid: false, flag: 'badInput', message: badInput() };
+        }
+        if (this.dsMin) {
+            const minDate = parseISODate(this.dsMin);
+            if (minDate && date < minDate) {
+                return { isValid: false, flag: 'rangeUnderflow', message: rangeUnderflow() };
+            }
+        }
+        if (this.dsMax) {
+            const maxDate = parseISODate(this.dsMax);
+            if (maxDate && date > maxDate) {
+                return { isValid: false, flag: 'rangeOverflow', message: rangeOverflow() };
+            }
+        }
+        if (this.dsDisabledDates?.includes(parsedDateString)) {
+            return { isValid: false, flag: 'customError', message: dateNotAvailable() };
+        }
+        return { isValid: true, flag: 'valid', message: '' };
+    };
+    handleInputChange = (event) => {
+        const newInputValue = event.detail.value;
+        this.inputValue = newInputValue;
+        if (!newInputValue.trim()) {
+            if (!this.dsRequired && (this.selectedDate || this.internalErrorText)) {
+                this.selectedDate = '';
+                this.internalErrorText = '';
+                this.wasInvalidOnBlur = false;
+                this.dsChange.emit('');
+                this.dsValidity.emit({
+                    flag: 'valid',
+                    message: '',
+                });
+            }
+            return;
+        }
+        if (this.wasInvalidOnBlur) {
+            const { isValid, flag, message } = this.validateInputValue();
+            if (isValid) {
+                const parsedDateString = parseInputDate(newInputValue);
+                if (parsedDateString) {
+                    this.selectedDate = parsedDateString;
+                    this.internalErrorText = '';
+                    this.wasInvalidOnBlur = false;
+                    this.dsChange.emit(parsedDateString);
+                }
+            }
+            this.dsValidity.emit({
+                flag,
+                message,
+            });
+        }
+    };
+    getValidityMessage() {
+        if (!this.inputRef)
+            return '';
+        if (this.selectedDate) {
+            const date = parseISODate(this.selectedDate);
+            if (!date)
+                return '';
+            if (this.dsMin) {
+                const minDate = parseISODate(this.dsMin);
+                if (minDate && date < minDate) {
+                    return rangeUnderflow();
+                }
+            }
+            if (this.dsMax) {
+                const maxDate = parseISODate(this.dsMax);
+                if (maxDate && date > maxDate) {
+                    return rangeOverflow();
+                }
+            }
+            if (this.dsDisabledDates?.includes(this.selectedDate)) {
+                return dateNotAvailable();
+            }
+        }
+        const validity = this.inputRef.validity;
+        for (const key in validity) {
+            if (key !== 'valid' && validity[key]) {
+                return validityMessage(key);
+            }
+        }
+        return '';
+    }
+    handleValidityEvent(emitter) {
+        return (e) => {
+            e.stopPropagation();
+            const message = this.getValidityMessage();
+            emitter.emit({
+                flag: 'customError',
+                message,
+            });
+        };
+    }
+    render() {
+        const simpleClass = cx('ds-datepicker-simple');
+        const assistiveTextId = this.dsAssistiveText ? `${this.dsId}-assistive` : undefined;
+        const hiddenAssistiveTextId = this.dsHiddenAssistiveText ? `${this.dsId}-hidden-assistive` : undefined;
+        const validityId = this.validityText ? `${this.dsId}-validity` : undefined;
+        const ariaDescribedbyValue = this.dsAriaDescribedby || undefined;
+        return (h("div", { key: '37517ef0948578b47523c615a1610267c0b3eed2' }, h(this.DsControlLabel, { key: 'e540ae04855df68ddeefa95b4bbaf277ecbf3bed', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, h("slot", { key: 'e737e924d4977b03647177b5caf701b3109b83ec', name: "label" })), h("div", { key: '198930fe2c56e7b92d36d400ac7d1a59639eb954', class: simpleClass }, h(this.DsTextInputTag, { key: '4f8b10de5074e7c5ca3171e3ce9c4e52a2ec8005', ref: el => (this.textInputRef = el), dsId: this.dsId, dsName: this.dsName, dsForm: this.dsForm, dsDisabled: this.dsDisabled, dsReadonly: this.dsReadonly, dsRequired: this.dsRequired, dsValue: this.inputValue !== null ? this.inputValue : formatDisplayDate(this.selectedDate), dsPlaceholder: this.dsPlaceholder, dsInvalid: !!this.validityText, dsFullWidth: true, dsAriaDescribedby: [ariaDescribedbyValue, assistiveTextId, hiddenAssistiveTextId, validityId].filter(Boolean).join(' ') || undefined, onDsInput: this.handleInputChange, onDsChange: (e) => e.stopPropagation(), onDsValidity: this.handleValidityEvent(this.dsValidity), onDsSubmitInvalid: this.handleValidityEvent(this.dsSubmitInvalid) })), this.validityText && h(this.DsInputValidityTag, { key: '904433cb6469d0024b30cdb2bcbdb2b07164fe68', id: validityId, dsText: this.validityText, dsType: "error" })));
+    }
+    static get is() { return "ds-datepicker-simple"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-datepicker-simple.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-datepicker-simple.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dsAriaDescribedby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `aria-describedby` attribute of the input element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-aria-describedby"
+            },
+            "dsAriaControls": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `aria-controls` attribute of the input element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-aria-controls"
+            },
+            "dsId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique `id` attribute of the input element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-id"
+            },
+            "dsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label to display above the datepicker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-label",
+                "defaultValue": "''"
+            },
+            "dsValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected value in ISO 8601 format (YYYY-MM-DD). Example: \"2024-06-15\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-value"
+            },
+            "dsName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for the input element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-name"
+            },
+            "dsForm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `form` attribute of the `input` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-form"
+            },
+            "dsDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, disables the datepicker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-disabled",
+                "defaultValue": "false"
+            },
+            "dsReadonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the datepicker is read-only. The value cannot be changed but can be focused and submitted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-readonly",
+                "defaultValue": "false"
+            },
+            "dsErrorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error text to display below the datepicker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-error-text"
+            },
+            "dsRequired": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the datepicker is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-required",
+                "defaultValue": "false"
+            },
+            "dsOptional": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays indicator that the datepicker is optional alongside label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-optional"
+            },
+            "dsOptionalText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown alongside label, if the datepicker is set as optional."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-optional-text"
+            },
+            "dsAssistiveText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for additional information shown below label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-assistive-text"
+            },
+            "dsHiddenAssistiveText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hidden text for screen readers only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-hidden-assistive-text"
+            },
+            "dsPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text shown when no date is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-placeholder"
+            },
+            "dsMin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum selectable date in ISO 8601 format (YYYY-MM-DD). Example: \"2024-01-01\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-min"
+            },
+            "dsMax": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum selectable date in ISO 8601 format (YYYY-MM-DD). Example: \"2024-12-31\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-max"
+            },
+            "dsDisabledDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of specific dates to disable in ISO 8601 format (YYYY-MM-DD)."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedDate": {},
+            "hasFocus": {},
+            "internalErrorText": {},
+            "wasInvalidOnBlur": {},
+            "inputValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the date value changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dsValidity",
+                "name": "dsValidity",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsValidity` event is emitted when the datepicker's validity state changes."
+                },
+                "complexType": {
+                    "original": "DsValidityEvent",
+                    "resolved": "{ flag: validityFlag; message?: string; }",
+                    "references": {
+                        "DsValidityEvent": {
+                            "location": "import",
+                            "path": "../../../../utils/controls/controlUtils",
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsSubmitInvalid",
+                "name": "dsSubmitInvalid",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsSubmitInvalid` event is emitted when the datepicker is invalid when attempting to submit a form."
+                },
+                "complexType": {
+                    "original": "DsSubmitInvalidEvent",
+                    "resolved": "{ flag: validityFlag; message: string; }",
+                    "references": {
+                        "DsSubmitInvalidEvent": {
+                            "location": "import",
+                            "path": "../../../../utils/controls/controlUtils",
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsBlur",
+                "name": "dsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the datepicker loses focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dsFocus",
+                "name": "dsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the datepicker gains focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "hasFocus",
+                "methodName": "hasFocusObserver"
+            }, {
+                "propName": "dsValue",
+                "methodName": "dsValueObserver"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "focusin",
+                "method": "onFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+declareComponentDependencies([h("ds-control-label", null), h("ds-input-validity", null), h("ds-text-input", null)]);