import { p as proxyCustomElement, H, h } from './p-604af0ee.js';
import { d as defineCustomElement$2 } from './p-ada8f33b.js';

const DgaCircularProgressBarUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaCircularProgressBarUsage extends H {
    constructor() {
        super();
        this.__registerHost();
        this.percentage = 0;
    }
    handleInputChange(event) {
        const target = event.target;
        this.percentage = Number(target.value); // Convert the string value to a number
    }
    render() {
        return (h("div", { key: 'b1dd2070af98a421b9844b11029bd4710a908f1b' }, h("h1", { key: '1f52c0e7cc134d7a00f8ded8b330d815a9d2d78f' }, "Circular Progress Bar Example"), h("div", { key: '580a62b43164401a28c4ec22c4e014de4a1fbe0b', style: { padding: '50px', gap: '20px' } }, h("div", { key: 'ac09939d748078baf86fc144be0fc6fe814aa6ee', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-circular-progress-bar", { key: '45f0508ee5f4d212117f89098f6d80d70450023a', size: "200px", percentage: this.percentage, text: "Active users" }), h("dga-circular-progress-bar", { key: 'ace593172c169030b8cce1b3942bc79b7df251e8', size: "160px", percentage: this.percentage, variant: "success", text: "Active users" }), h("dga-circular-progress-bar", { key: '7aca8d7f6f26ba0b3809a3c47c676ceb5cd83570', size: "120px", percentage: this.percentage, text: "Active users" }), h("dga-circular-progress-bar", { key: '3af2761828372f8ecf668d236ce6dfab8ad3b79f', size: "80px", percentage: this.percentage, text: "Active users" }), h("dga-circular-progress-bar", { key: 'b7471c6f84959c3c8b2fbd15c24eaf522160bc63', size: "64px", percentage: this.percentage }), h("div", { key: '5980bf9ab281fdacc8c0e8716a560f530c6e4b0d', style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("dga-circular-progress-bar", { key: 'a1528d39626e748f1ac51dee6d0724420883804d', RTL: true, size: "200px", percentage: this.percentage, variant: "success", text: "Active users" }), h("dga-circular-progress-bar", { key: 'a5bf140a1e9ae0a70ff7b30d3e30b86902c8e780', RTL: true, size: "160px", percentage: this.percentage, variant: "success", text: "Active users" }), h("dga-circular-progress-bar", { key: '5f7be5c1ca82b532b7ea4263c6578fd303690297', RTL: true, size: "120px", percentage: this.percentage, variant: "success", text: "Active users" }), h("dga-circular-progress-bar", { key: 'b5280934f77f4c8ebf9b7a575fd2769d593bfe9a', RTL: true, size: "80px", percentage: this.percentage, variant: "success", text: "Active users" }), h("dga-circular-progress-bar", { key: '961b023603bbaede1d13d0f404f680b1678920a9', RTL: true, size: "64px", percentage: this.percentage, variant: "success", text: "Active users" })), h("div", { key: '523be0f4708d3b346c3d1a78633f077749ff3365', style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("dga-circular-progress-bar", { key: '345c969efcec673028b0fa700bbcf5e787998fc5', RTL: true, size: "200px", percentage: this.percentage, variant: "error", text: "Active users" }), h("dga-circular-progress-bar", { key: 'a7ea0dd7fdba6f3677358c2b2b78d330f2fabe00', RTL: true, size: "160px", percentage: this.percentage, variant: "error", text: "Active users" }), h("dga-circular-progress-bar", { key: '2e34aa72d4f80404e9bebd8aabf2c6338f262306', RTL: true, size: "120px", percentage: this.percentage, variant: "error", text: "Active users" }), h("dga-circular-progress-bar", { key: '97cfb6e76430be7a10b5ebd4a942c823534017df', RTL: true, size: "80px", percentage: this.percentage, variant: "error", text: "Active users" }), h("dga-circular-progress-bar", { key: '2f248c4503222d6196d993ec7caa07443e69ac56', RTL: true, size: "64px", percentage: this.percentage, variant: "error", text: "Active users" })), h("input", { key: '0bed427786de16e6fdc83897e4d22c3ffb1dba0a', type: "range", min: "0", max: "100", value: this.percentage, onInput: e => this.handleInputChange(e) })), h("div", { key: '7e357058a4761df2fc98d72622d16042442964f5', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
    }
}, [0, "dga-circular-progress-bar-usage", {
        "percentage": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["dga-circular-progress-bar-usage", "dga-circular-progress-bar"];
    components.forEach(tagName => { switch (tagName) {
        case "dga-circular-progress-bar-usage":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, DgaCircularProgressBarUsage$1);
            }
            break;
        case "dga-circular-progress-bar":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DgaCircularProgressBarUsage = DgaCircularProgressBarUsage$1;
const defineCustomElement = defineCustomElement$1;

export { DgaCircularProgressBarUsage, defineCustomElement };

//# sourceMappingURL=dga-circular-progress-bar-usage.js.map