'use strict';

var index = require('./index-DSiE2De_.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: '545c32fc6e248f7d53d0b6fe65230d31bac944e9' }, index.h("h1", { key: '1e2b9db936b1fa1624095af68335e4eab299059e' }, "Radial Stepper Example"), index.h("div", { key: '34b6d64b70333a50a4db48e831e2428565623f13', style: { padding: '50px', gap: '20px' } }, index.h("div", { key: 'dd8aaaab3e3c8724540bc1690b0ecbb8b2eb0e5a', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, index.h("dga-radial-stepper", { key: 'ee84e3ba80a9559bb8ec1fb438e448264162cf7e', 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: 'c2693356e66900de8f7c0e92313ffc6ac30e85c3', 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: '210177d09fe14387621f4e1dfdd1d7a35e9bda38', 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: '2bc8d0e0b1986136c6d96fbf0c9e0ea7233a12a3', 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: '4e095dad5a41854888171089402f9b17cf182dad', 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: 'c37fc188323cca1f95b7a8d12149cefc1507f7b5', style: {
                backgroundColor: "#1B8354",
                padding: "40px"
            } }, index.h("dga-radial-stepper", { key: '0fb7aa5ef7472a6da4e711f5430c8a67341c78f7', 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: 'ab95b9b53cb94e8c41c4fb861172f2c191c15c17', onClick: () => (this.activeStep += 1) }, "Next"), index.h("button", { key: 'd88d9c3de209284a930f49a06bd5610765a9674d', onClick: () => (this.activeStep -= 1) }, "Prev"), index.h("input", { key: '2d24b30a7ff991955aa5299425d2bf3324e72866', type: "range", min: "0", max: "100", value: this.percentage, onInput: e => this.handleInputChange(e) })))));
    }
};

exports.dga_radial_stepper_usage = DgaRadialStepperUsage;
