import { r as registerInstance, h } from './index-1acf58d3.js';

const DgaLinearProgressBarUsage = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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: '0600755417911b40e8d1db852a2ad21c354fc6f2' }, h("h1", { key: '5a5716385cf1c293947921642a6687a2eded40d0' }, "Linear Progress Bar Example"), h("div", { key: 'a4a0e9ea7224eb9fbe91ca7337421a4697c2e4de', style: { padding: '50px', gap: '20px' } }, h("div", { key: '4c2d871c3d77f27939832b65306b23d845b8ffd8', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-linear-progress-bar", { key: '97b29900250593c6fd235f5006d50429707de756', percentage: this.percentage, size: 'large', success: true }), h("dga-linear-progress-bar", { key: '6c2787e7a7de9d95c44295bb6c110d6ffe0e03e4', size: 'large', error: true, percentage: this.percentage }), h("dga-linear-progress-bar", { key: '9f95e629e74826690394de343dac2ca814729382', size: 'large', progressStyle: "primary", percentage: this.percentage }), h("hr", { key: 'b07a7b3961e62ee1e4d2bf181b652775bba9ee2f' }), h("dga-linear-progress-bar", { key: 'b0f7e54068f0c9ae241419255d77ff1710a69b84', percentage: this.percentage, size: 'small', success: true }), h("dga-linear-progress-bar", { key: '18c766628cf967816b7d70dbd9ed3fc9dd8d0f1a', size: 'small', error: true, percentage: this.percentage }), h("dga-linear-progress-bar", { key: '96d033a2304f27997c8376a6ed08482e607ea6dd', size: 'small', progressStyle: "primary", percentage: this.percentage }), h("hr", { key: '52733f3da45241cc3c7175f8de56ceb2e81d7cf0' }), h("dga-linear-progress-bar", { key: 'a60473731319116c300c0988bff402c00e02ea97', percentage: this.percentage, size: 'medium', success: true }), h("dga-linear-progress-bar", { key: '1bfab69086e746f7c8b5079621399a5b939870cc', size: 'medium', error: true, percentage: this.percentage }), h("dga-linear-progress-bar", { key: '2ec1d388dba8f6958217ff286139d815d4173328', size: 'medium', progressStyle: "primary", percentage: this.percentage }), h("input", { key: '1173cf2211cc9fc29a6887029799e173c83e3d01', type: 'range', min: '0', max: '100', value: this.percentage, onInput: (e) => this.handleInputChange(e) })), h("div", { key: 'bb375f0438393619eb80fb850df0c180c1814d9d', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
    }
};

export { DgaLinearProgressBarUsage as dga_linear_progress_bar_usage };

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