@kelvininc/ui-components/components/kv-loader.js

Kelvin UI Components

import { H as proxyCustomElement, I as H, K as h, L as Host } from './p-BP5CxQcH.js';

const loaderCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--loader-overlay-color:var(--overlay-surface-opacity-80);--loader-background-color:var(--background-container-accent-purple-disabled);--loader-spinner-color:var(--background-container-accent-purple-strong);--loader-padding:15px;--loader-border-size:6px;--loader-z-index:1}.loader-container{width:100%;height:100%;position:absolute;top:0;left:0;z-index:var(--loader-z-index)}.loader-container .overlay{width:100%;height:100%;background-color:var(--loader-overlay-color)}.loader-container .loader{height:0;width:0;padding:var(--loader-padding);border:var(--loader-border-size) solid var(--loader-background-color);border-right-color:var(--loader-spinner-color);border-radius:50%;animation:loadrotate 1s infinite linear;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto}@keyframes loadrotate{100%{transform:rotate(360deg)}}";

const KvLoader$1 = /*@__PURE__*/ proxyCustomElement(class KvLoader extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        /** (optional) If `true` the loader is enabled */
        this.isLoading = false;
        /** (optional) If `true` the loader is overlay */
        this.hasOverlay = false;
    }
    render() {
        return (h(Host, { key: 'fa482235aaa35ded7400acb211b7d0efd87ed347' }, this.isLoading && (h("div", { key: '2b697a9d1a592c2e5ab7bead1e547cb472f10da2', class: "loader-container" }, this.hasOverlay && h("div", { key: '6e3004e26df701c27450ac418ddcb20f6e042d3b', class: "overlay" }), h("div", { key: '71b2d17478b5cd6ce62dd2b90cc18297b9875e71', class: "loader" })))));
    }
    static get style() { return loaderCss; }
}, [257, "kv-loader", {
        "isLoading": [516, "is-loading"],
        "hasOverlay": [516, "has-overlay"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kv-loader"];
    components.forEach(tagName => { switch (tagName) {
        case "kv-loader":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KvLoader$1);
            }
            break;
    } });
}
defineCustomElement$1();

const KvLoader = KvLoader$1;
const defineCustomElement = defineCustomElement$1;

export { KvLoader, defineCustomElement };