'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-a0b63bee.js');

const DgaRadialStepperUsage = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.percentage = 0;
        this.activeStep = 0;
    }
    handleInputChange(event) {
        const target = event.target;
        this.percentage = Number(target.value); // Convert the string value to a number
    }
    handleStepChange(event) {
        const target = event.target;
        this.activeStep = Number(target.value); // Convert the string value to a number
    }
    render() {
        return (index.h("div", { key: '5f39ebeb840e4513b1c07f5bb0ab278fa39ed31c' }, index.h("h1", { key: '3884153cc45f96f09c30b3102f5dbfb42b65daa8' }, "Radial Stepper Example"), index.h("div", { key: '816716a6b636c594cf08331cdbd348e7f15889d0', style: { padding: '50px', gap: '20px' } }, index.h("div", { key: '96a8b4a1523f2739406b8857b348487192688e9c', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, index.h("dga-radial-stepper", { key: '3296949bd6ff65ab8f82ed15d5d4a21a2d087c06', size: "120px", activeStep: this.activeStep, steps: [
                {
                    stepName: "Step One",
                    stepDescription: "this is step one description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Two",
                    stepDescription: "this is step two description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Three",
                    stepDescription: "this is step three description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Four",
                    stepDescription: "this is step four description",
                    showPreStep: true,
                    showNextStep: true
                }
            ] }), index.h("dga-radial-stepper", { key: '085b15c605ff9849bcfa57e775f442bef47a2091', size: "80px", color: "success", activeStep: this.activeStep, steps: [
                {
                    stepName: "Step One",
                    stepDescription: "this is step one description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Two",
                    stepDescription: "this is step two description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Three",
                    stepDescription: "this is step three description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Four",
                    stepDescription: "this is step four description",
                    showPreStep: true,
                    showNextStep: true
                }
            ] }), index.h("dga-radial-stepper", { key: '4826a159620d317d60718f477d6a948958a51372', variant: 'neutral', size: "64px", activeStep: this.activeStep, steps: [
                {
                    stepName: "Step One",
                    stepDescription: "this is step one description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Two",
                    stepDescription: "this is step two description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Three",
                    stepDescription: "this is step three description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Four",
                    stepDescription: "this is step four description",
                    showPreStep: true,
                    showNextStep: true
                }
            ] }), index.h("dga-radial-stepper", { key: '8f0f66d6a860fe1071e41103f3d7eaaacb35ded2', size: "48px", activeStep: this.activeStep, steps: [
                {
                    stepName: "Step One",
                    stepDescription: "this is step one description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Two",
                    stepDescription: "this is step two description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Three",
                    stepDescription: "this is step three description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Four",
                    stepDescription: "this is step four description",
                    showPreStep: true,
                    showNextStep: true
                }
            ] }), index.h("dga-radial-stepper", { key: 'd1a688a8677b4956bce41bdbb9f19f0a63115f31', size: "40px", activeStep: this.activeStep, steps: [
                {
                    stepName: "Step One",
                    stepDescription: "this is step one description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Two",
                    stepDescription: "this is step two description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Three",
                    stepDescription: "this is step three description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Four",
                    stepDescription: "this is step four description",
                    showPreStep: true,
                    showNextStep: true
                }
            ] }), index.h("div", { key: 'dddc741fba8a306749f6f4dcdb3b41b87dfac944', style: {
                backgroundColor: "#1B8354",
                padding: "40px"
            } }, index.h("dga-radial-stepper", { key: '0ae057a39ce5fa1f28591c3db6507c614d941ec9', variant: "on-color", size: "120px", activeStep: this.activeStep, steps: [
                {
                    stepName: "Step One",
                    stepDescription: "this is step one description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Two",
                    stepDescription: "this is step two description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Three",
                    stepDescription: "this is step three description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Four",
                    stepDescription: "this is step four description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Five",
                    stepDescription: "this is step four description",
                    showPreStep: true,
                    showNextStep: true
                },
                {
                    stepName: "Step Six",
                    stepDescription: "this is step four description",
                    showPreStep: true,
                    showNextStep: true
                }
            ], RTL: true })), index.h("button", { key: '43f6963f7a8ade1e8534597aabcf4f771f1df828', onClick: () => (this.activeStep += 1) }, "Next"), index.h("button", { key: '30b2190bca4c4af1dfda686df6a070715162e985', onClick: () => (this.activeStep -= 1) }, "Prev"), index.h("input", { key: '6f337f58771c628039f76333900c51d8ed8f1197', type: "range", min: "0", max: "100", value: this.percentage, onInput: e => this.handleInputChange(e) })))));
    }
};

exports.dga_radial_stepper_usage = DgaRadialStepperUsage;

//# sourceMappingURL=dga-radial-stepper-usage.cjs.entry.js.map