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

const DgaProgressIndicatorUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaProgressIndicatorUsage extends H {
    constructor() {
        super();
        this.__registerHost();
        this.activeStep = 1;
    }
    render() {
        console.log(this.activeStep);
        return (h("div", { key: 'ddc87833ea0f00694c0d201584f9e8fa12e572cf' }, h("h1", { key: '0df8a5f101004bad076b2253430a43ecd9fbdc63' }, "Progress Indicator Example"), h("div", { key: 'c05580439fb185d4b0ff7a4c45f67f633a0b2c79', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '93dc5a4b16ee8ab2804ee5fc2630de29f90621b0', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("button", { key: 'c101f7f65c2421fe0e003ed21ca8452c3e5e3048', onClick: () => (this.activeStep = this.activeStep - 1) }, "prev"), h("button", { key: 'd9e551d82b804e945df45e006100f4b5369632fe', onClick: () => (this.activeStep = this.activeStep + 1) }, "next"), "activeStep: ", this.activeStep, h("dga-progress-indicator", { key: '0d1823e84408024b0cd29c03f58373f3419a01ea', activeStep: this.activeStep, alignment: "vertical" }, h("dga-progress-indicator-step", { key: '59d1faceec221bfa53172e2f00cefd833de5e3eb', title: "Step One", description: "this is step description", currentStep: 1 }), h("dga-progress-indicator-step", { key: 'd592e3b8c110e30bbce52c45b78f480b9847c72b', title: "Step Two", description: "this is step description", currentStep: 2 }), h("dga-progress-indicator-step", { key: 'fcb0e9d331073c6887c99bfe1c36c0771734d32c', title: "Step Three", description: "this is step description", nextStep: false, currentStep: 3 }))), h("div", { key: '3de60fcd7d24d9a8da75c29946757bc9ed6de49d', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
    }
}, [0, "dga-progress-indicator-usage", {
        "activeStep": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["dga-progress-indicator-usage", "dga-progress-indicator", "dga-progress-indicator-step"];
    components.forEach(tagName => { switch (tagName) {
        case "dga-progress-indicator-usage":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, DgaProgressIndicatorUsage$1);
            }
            break;
        case "dga-progress-indicator":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "dga-progress-indicator-step":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DgaProgressIndicatorUsage = DgaProgressIndicatorUsage$1;
const defineCustomElement = defineCustomElement$1;

export { DgaProgressIndicatorUsage, defineCustomElement };

//# sourceMappingURL=dga-progress-indicator-usage.js.map