@db-ux/wc-core-components 4.4.0-loading-567cd0c → 4.4.1-floating-components-066d296

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

@@ -1,713 +0,0 @@
-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"
-            }];
-    }
-}