@db-ux/wc-core-components 4.3.2 → 4.4.0-loading-567cd0c

package/dist/collection/components/loading-indicator/loading-indicator.js

@@ -0,0 +1,713 @@
+import { DEFAULT_ID } from "../../shared/constants";
+import { cls, delay as delayFn, getBooleanAsString, uuid } from "../../utils";
+import { h, } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export class DBLoadingIndicator {
+    constructor() {
+        this.autoDisable = true;
+        this.indeterminate = true;
+        this.size = "medium";
+        this.variant = "inline";
+        this._id = DEFAULT_ID;
+        this._loadingState = "inactive";
+        this._previousLoadingState = undefined;
+        this._style = {};
+        this.initialized = false;
+    }
+    getPercentage() {
+        if (this.indeterminate || !this.value || !this.max) {
+            return;
+        }
+        return `${(Number(this.value) / Number(this.max)).toFixed(2)}`;
+    }
+    getRole() {
+        if (this.role) {
+            if (this.role === "none") {
+                return;
+            }
+            return this.role;
+        }
+        return "status";
+    }
+    handleParentDisabled() {
+        if (this._ref && this.autoDisable && this.initialized) {
+            let parent = this._ref.parentElement;
+            if (parent && parent.localName === "db-loading-indicator") {
+                parent = parent.parentElement;
+            }
+            if (parent && "disabled" in parent) {
+                parent.disabled = this._loadingState !== "inactive";
+            }
+        }
+    }
+    handleParentAria(remove) {
+        if (this._ref && this._id && this.initialized) {
+            let parent = this._ref.parentElement;
+            if (parent && parent.localName === "db-loading-indicator") {
+                parent = parent.parentElement;
+            }
+            if (!parent)
+                return;
+            const isButton = (parent === null || parent === void 0 ? void 0 : parent.localName) === "button";
+            if (!(isButton || this.overlay))
+                return;
+            const ariaAttribute = isButton ? "aria-labelledby" : "aria-describedby";
+            const ariaLabelledBy = parent.getAttribute(ariaAttribute);
+            let labelledByElements = ariaLabelledBy ? ariaLabelledBy.split(",") : [];
+            if (remove || this._loadingState === "inactive") {
+                if (labelledByElements.includes(this._id)) {
+                    labelledByElements = labelledByElements.filter((elementId) => elementId !== this._id);
+                    if (!isButton) {
+                        parent.ariaBusy = null;
+                    }
+                }
+                else {
+                    return;
+                }
+            }
+            else {
+                if (!labelledByElements.includes(this._id)) {
+                    labelledByElements.push(this._id);
+                }
+                if (!isButton) {
+                    parent.ariaBusy = this._loadingState === "active" ? "true" : null;
+                }
+            }
+            if (labelledByElements.length) {
+                parent.setAttribute(ariaAttribute, labelledByElements.join(","));
+            }
+            else {
+                parent.removeAttribute(ariaAttribute);
+            }
+        }
+    }
+    /**
+     * 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);
+                    }
+                }
+            }
+        }
+    }
+    watch0Fn() {
+        this.handleParentDisabled();
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
+        this.handleParentAria(false);
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
+        if (this.timeout) {
+            // Not merged if as workaround for angular
+            if (this._loadingState !== "inactive" &&
+                this._loadingState !== this._previousLoadingState) {
+                this._previousLoadingState = this._loadingState;
+                void delayFn(() => {
+                    if (this.timeout) {
+                        this.timeout.emit(this._loadingState);
+                    }
+                }, this._loadingState === "active" ? 5000 : 2000);
+            }
+        }
+    }
+    watch2() {
+        this.watch2Fn();
+    }
+    watch3Fn() {
+        if (this._loadingState === this.state)
+            return;
+        if (this.state) {
+            this._loadingState = this.state;
+        }
+        else if (this.indeterminate === undefined || this.indeterminate) {
+            this._loadingState = "active";
+        }
+        else {
+            this._loadingState = "inactive";
+        }
+    }
+    watch3() {
+        this.watch3Fn();
+    }
+    watch4Fn() {
+        if (this._ref) {
+            if (this.delay === "slow" || this.delay === "fast") {
+                void delayFn(() => {
+                    if (this._ref) {
+                        this._ref.dataset["delay"] = "";
+                    }
+                }, this.delay === "slow" ? 500 : 250);
+            }
+        }
+    }
+    watch4() {
+        this.watch4Fn();
+    }
+    watch5Fn() {
+        this._style = {
+            "--db-loading-indicator-percentage": this.getPercentage(),
+        };
+    }
+    watch5() {
+        this.watch5Fn();
+    }
+    componentDidLoad() {
+        this.enableAttributePassing(this._ref, "db-loading-indicator");
+        this._id = this.id || "loading-indicator-" + uuid();
+        this.initialized = true;
+        this.watch0Fn();
+        this.watch1Fn();
+        this.watch2Fn();
+        this.watch3Fn();
+        this.watch4Fn();
+        this.watch5Fn();
+    }
+    disconnectedCallback() {
+        this.handleParentAria(true);
+        this.handleParentDisabled();
+    }
+    render() {
+        var _a, _b;
+        return (h("div", { key: '4467fd7c9ebec6fe699995183b870ea08fa60ba7', class: cls("db-loading-indicator", this.className), ref: (el) => {
+                this._ref = el;
+            }, style: this._style, "data-indeterminate": getBooleanAsString(this.indeterminate), "data-size": this.size, "data-variant": this.variant, "data-delay": this.delay, "data-state": this._loadingState, "data-overlay": getBooleanAsString(this.overlay) }, this.variant !== "progress-bar" ? (h("svg", { class: "db-loading-indicator-circle", "aria-hidden": "true", viewBox: this.variant === "inline" ? "10 10 20 20" : "32 32 64 64" }, h("circle", { class: "db-loading-indicator-circle-track" }), h("circle", { class: "db-loading-indicator-circle-segment" }))) : null, h("div", { key: '7ea9f9fd64f1b7d073ca7917a4e8eb905eb344f0', role: this.getRole() }, h("label", { key: 'de7fd82a1e14e459735cf596f18104722965e7f2', "data-show-label": getBooleanAsString(this.showLabel), id: this._id }, this.label ? this.label : h("slot", null), h("progress", { key: 'd2abf58f6595675e873056610e1bec18bf4dff85', value: this.indeterminate ? undefined : (_a = this.value) !== null && _a !== void 0 ? _a : 0, max: this.indeterminate ? undefined : (_b = this.max) !== null && _b !== void 0 ? _b : 100 }, this.indeterminate ? undefined : this.progressText)), !this.indeterminate ? (h("span", { "aria-hidden": "true", "data-show-progress-text": getBooleanAsString(this.showProgressText) }, this.progressText)) : null)));
+    }
+    static get is() { return "db-loading-indicator"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "id"
+            },
+            "autoDisable": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"autoDisable\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-disable",
+                "defaultValue": "true"
+            },
+            "overlay": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"overlay\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overlay"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"state\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state"
+            },
+            "indeterminate": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"indeterminate\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate",
+                "defaultValue": "true"
+            },
+            "delay": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"delay\"]",
+                    "resolved": "\"fast\" | \"none\" | \"slow\"",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "delay"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"value\"]",
+                    "resolved": "number | string",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "max": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"max\"]",
+                    "resolved": "number | string",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"role\"]",
+                    "resolved": "\"alert\" | \"none\" | \"status\"",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "role"
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "classname"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"size\"]",
+                    "resolved": "\"medium\" | \"small\"",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"medium\""
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"variant\"]",
+                    "resolved": "\"inline\" | \"onsite\" | \"progress-bar\"",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"inline\""
+            },
+            "showLabel": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"showLabel\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"label\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "progressText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"progressText\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress-text"
+            },
+            "showProgressText": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBLoadingIndicatorProps[\"showProgressText\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBLoadingIndicatorProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/loading-indicator/model.ts::DBLoadingIndicatorProps",
+                            "referenceLocation": "DBLoadingIndicatorProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-progress-text"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_id": {},
+            "_loadingState": {},
+            "_previousLoadingState": {},
+            "_style": {},
+            "initialized": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "timeout",
+                "name": "timeout",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "_ref",
+                "methodName": "watch0"
+            }, {
+                "propName": "initialized",
+                "methodName": "watch0"
+            }, {
+                "propName": "autoDisable",
+                "methodName": "watch0"
+            }, {
+                "propName": "_loadingState",
+                "methodName": "watch0"
+            }, {
+                "propName": "_ref",
+                "methodName": "watch1"
+            }, {
+                "propName": "initialized",
+                "methodName": "watch1"
+            }, {
+                "propName": "_loadingState",
+                "methodName": "watch1"
+            }, {
+                "propName": "overlay",
+                "methodName": "watch1"
+            }, {
+                "propName": "_id",
+                "methodName": "watch1"
+            }, {
+                "propName": "_loadingState",
+                "methodName": "watch2"
+            }, {
+                "propName": "timeout",
+                "methodName": "watch2"
+            }, {
+                "propName": "state",
+                "methodName": "watch3"
+            }, {
+                "propName": "_ref",
+                "methodName": "watch4"
+            }, {
+                "propName": "delay",
+                "methodName": "watch4"
+            }, {
+                "propName": "indeterminate",
+                "methodName": "watch5"
+            }, {
+                "propName": "value",
+                "methodName": "watch5"
+            }, {
+                "propName": "max",
+                "methodName": "watch5"
+            }];
+    }
+}