@db-ux/wc-core-components 1.0.0-test-13b991d

package/dist/collection/components/checkbox/checkbox.js

@@ -0,0 +1,699 @@
+import { cls, delay, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export class DBCheckbox {
+    constructor() {
+        this.initialized = false;
+        this._id = undefined;
+        this._messageId = undefined;
+        this._validMessageId = undefined;
+        this._invalidMessageId = undefined;
+        this._descByIds = "";
+        this._voiceOverFallback = "";
+    }
+    handleChange(event) {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.onChange) {
+            this.onChange.emit(event);
+        }
+        if (this.change) {
+            this.change(event);
+        }
+        /* For a11y reasons we need to map the correct message with the checkbox */
+        if (!((_a = this._ref) === null || _a === void 0 ? void 0 : _a.validity.valid) || this.validation === "invalid") {
+            this._descByIds = this._invalidMessageId;
+            if (hasVoiceOver()) {
+                this._voiceOverFallback =
+                    (_d = (_b = this.invalidMessage) !== null && _b !== void 0 ? _b : (_c = this._ref) === null || _c === void 0 ? void 0 : _c.validationMessage) !== null && _d !== void 0 ? _d : DEFAULT_INVALID_MESSAGE;
+                delay(() => (this._voiceOverFallback = ""), 1000);
+            }
+        }
+        else if (this.validation === "valid" ||
+            (((_e = this._ref) === null || _e === void 0 ? void 0 : _e.validity.valid) && this.required)) {
+            this._descByIds = this._validMessageId;
+            if (hasVoiceOver()) {
+                this._voiceOverFallback = (_f = this.validMessage) !== null && _f !== void 0 ? _f : DEFAULT_VALID_MESSAGE;
+                delay(() => (this._voiceOverFallback = ""), 1000);
+            }
+        }
+        else if (stringPropVisible(this.message, this.showMessage)) {
+            this._descByIds = this._messageId;
+        }
+        else {
+            this._descByIds = "";
+        }
+    }
+    handleBlur(event) {
+        if (this.onBlur) {
+            this.onBlur.emit(event);
+        }
+        if (this.blur) {
+            this.blur(event);
+        }
+    }
+    handleFocus(event) {
+        if (this.onFocus) {
+            this.onFocus.emit(event);
+        }
+        if (this.focus) {
+            this.focus(event);
+        }
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        var _a;
+        this.enableAttributePassing(this._ref, "db-checkbox");
+        this.initialized = true;
+        const mId = (_a = this.id) !== null && _a !== void 0 ? _a : `checkbox-${uuid()}`;
+        this._id = mId;
+        this._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;
+        this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
+        this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
+    }
+    componentDidUpdate() {
+        if (this._id) {
+            const messageId = this._id + DEFAULT_MESSAGE_ID_SUFFIX;
+            this._messageId = messageId;
+            this._validMessageId = this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
+            this._invalidMessageId = this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
+            if (stringPropVisible(this.message, this.showMessage)) {
+                this._descByIds = messageId;
+            }
+        }
+        if (this.initialized && document && this._id) {
+            const checkboxElement = document === null || document === void 0 ? void 0 : document.getElementById(this._id);
+            if (checkboxElement) {
+                // in angular this must be set via native element
+                if (this.checked != undefined) {
+                    checkboxElement.checked = this.checked;
+                }
+                if (this.indeterminate !== undefined) {
+                    // When indeterminate is set, the value of the checked prop only impacts the form submitted values.
+                    // It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
+                    checkboxElement.indeterminate = this.indeterminate;
+                }
+                this.initialized = false;
+            }
+        }
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h("div", { key: '6f903d630c468fdd7075c59b05e4137f5850e517', class: cls("db-checkbox", this.className), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: '122e74ed43e7d3ea0423c926bce7efe784f1efcc', htmlFor: this._id }, h("input", { key: '6dd67eb9a4e99426f8aa04f4d13d26302dd543f2', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+                this._ref = el;
+            }, id: this._id, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, required: this.required, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": this._descByIds }), this.label ? this.label : h("slot", null)), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, h("db-infotext", { key: '8b0db2ae635836386a2d1a5cd9a606a761493b20', size: "small", semantic: "successful", id: this._validMessageId }, (_a = this.validMessage) !== null && _a !== void 0 ? _a : DEFAULT_VALID_MESSAGE), h("db-infotext", { key: '75a7192d1a2999c9493453cc9d1019e74ce9ee85', size: "small", semantic: "critical", id: this._invalidMessageId }, (_d = (_b = this.invalidMessage) !== null && _b !== void 0 ? _b : (_c = this._ref) === null || _c === void 0 ? void 0 : _c.validationMessage) !== null && _d !== void 0 ? _d : DEFAULT_INVALID_MESSAGE), h("span", { key: '82516ae6e6ef5675d42a1aded5f00ebab1f1830c', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+    }
+    static get is() { return "db-checkbox"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "id",
+                "reflect": false
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"message\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "message",
+                "reflect": false
+            },
+            "showMessage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"showMessage\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-message",
+                "reflect": false
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"checked\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": false
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"indeterminate\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "indeterminate",
+                "reflect": false
+            },
+            "change": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"change\"]",
+                    "resolved": "(event: Event) => void",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "validation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"validation\"]",
+                    "resolved": "\"invalid\" | \"no-validation\" | \"valid\"",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "validation",
+                "reflect": false
+            },
+            "invalidMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"invalidMessage\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "invalid-message",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"required\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false
+            },
+            "validMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"validMessage\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "valid-message",
+                "reflect": false
+            },
+            "blur": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"blur\"]",
+                    "resolved": "(event: FocusEvent) => void",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "focus": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"focus\"]",
+                    "resolved": "(event: FocusEvent) => void",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "classname",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"size\"]",
+                    "resolved": "\"medium\" | \"small\"",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"showLabel\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-label",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"name\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"disabled\"]",
+                    "resolved": "boolean",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"value\"]",
+                    "resolved": "any",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"label\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "messageIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBCheckboxProps[\"messageIcon\"]",
+                    "resolved": "BaseIconTypes | LooseAutocomplete",
+                    "references": {
+                        "DBCheckboxProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "message-icon",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "initialized": {},
+            "_id": {},
+            "_messageId": {},
+            "_validMessageId": {},
+            "_invalidMessageId": {},
+            "_descByIds": {},
+            "_voiceOverFallback": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onChange",
+                "name": "onChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "onBlur",
+                "name": "onBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "onFocus",
+                "name": "onFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=checkbox.js.map