'use strict';

var index = require('./index-DSiE2De_.js');

const DgaLinearProgressBarUsage = class {
    constructor(hostRef) {
        index.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 (index.h("div", { key: '8821ddaf6370022a12784fde28a7c71f03ebc5c0' }, index.h("h1", { key: 'd47afada15e421e00d0d4073df8d3eb8def5893c' }, "Linear Progress Bar Example"), index.h("div", { key: '5c5bf8a11a1f0f13b679beaa2a90cd24735d1792', style: { padding: '50px', gap: '20px' } }, index.h("div", { key: '39e2a0c0117f4b33161857a766155c519c6e3dff', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, index.h("dga-linear-progress-bar", { key: '7a962424af6a49a94d213eef2c23d2014f11e95d', percentage: this.percentage, size: 'large', success: true }), index.h("dga-linear-progress-bar", { key: '34e27b3dd167d02981af34d587c42c7d117a01f4', size: 'large', error: true, percentage: this.percentage }), index.h("dga-linear-progress-bar", { key: '0b17222436cc5eaa7350abf35ee9eaf7d7ce4953', size: 'large', progressStyle: "primary", percentage: this.percentage }), index.h("hr", { key: 'b0fd4d401e9d6e5f2589893032057d078048bbb2' }), index.h("dga-linear-progress-bar", { key: '3eeb98a04ee0a3ffaea9dd9b1928b08c95f5d5d4', percentage: this.percentage, size: 'small', success: true }), index.h("dga-linear-progress-bar", { key: '1f8014efa78aef7b43453857d0bd70359411bdce', size: 'small', error: true, percentage: this.percentage }), index.h("dga-linear-progress-bar", { key: '93fff2dce057035c45a310add70c26b43f7f5319', size: 'small', progressStyle: "primary", percentage: this.percentage }), index.h("hr", { key: 'baf07a50d9a4f62bfb4e79a41c49f47da8ce1369' }), index.h("dga-linear-progress-bar", { key: 'a307021302e9bfed92cf749405d06641b59f40cf', percentage: this.percentage, size: 'medium', success: true }), index.h("dga-linear-progress-bar", { key: '692737d176526aa3cae96678e117e4e0a2bc8d2e', size: 'medium', error: true, percentage: this.percentage }), index.h("dga-linear-progress-bar", { key: '19ca9e59db3dc04f3c511835329da12f57fa4aa7', size: 'medium', progressStyle: "primary", percentage: this.percentage }), index.h("input", { key: '2dbbab3842163addd7d7b7ecf388a71b5dc655cc', type: 'range', min: '0', max: '100', value: this.percentage, onInput: (e) => this.handleInputChange(e) })), index.h("div", { key: '8ec1b97b821811cfa063d887c3c9622db17e4f42', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
    }
};

exports.dga_linear_progress_bar_usage = DgaLinearProgressBarUsage;
