import { h } from "@stencil/core";
export class DgaCircularProgressBar {
    constructor() {
        this.RTL = false;
        this.size = '64px';
        this.variant = 'primary';
        this.percentage = 0;
        this.sizes = {
            '200px': 200,
            '160px': 160,
            '120px': 120,
            '80px': 80,
            '64px': 64,
        };
    }
    render() {
        const strokeWidth = this.sizes[this.size] / 10;
        const radius = (this.sizes[this.size] - strokeWidth) / 2;
        const dashArray = 2 * Math.PI * radius;
        const dashOffset = dashArray * (1 - this.percentage / 100);
        return (h("div", { key: 'c57117ab1860f47b3db694f969849bc6df71bc7f', class: "circular-progress-bar", "aria-size": this.size, dir: this.RTL ? 'rtl' : 'ltr' }, h("div", { key: 'e49547929608494c80beb0d48bfce994944995a0', class: "circular-progress-bar__label" }, this.variant === 'success' && h("i", { key: 'cea1044102b661d0944b5bf8c59100b6f3fd2ac2', class: `circular-progress-bar__label--icon hgi-solid hgi-checkmark-circle-02` }), this.variant === 'error' && h("i", { key: '2baca53719042772c42a053a8a5699f1d880b336', class: `circular-progress-bar__label--icon hgi-solid hgi-multiplication-sign-circle` }), this.variant !== 'success' && this.variant !== 'error' && h("h4", { key: '905fe31aef3e1f6621dc12a82c0c9e7024bc4494', class: "circular-progress-bar__label--percentage" }, this.percentage, "%"), this.text && h("h5", { key: 'c6625293b01f9a8d3b9aa765bbdc41fb6475e8fd', class: `circular-progress-bar__label--text ${this.variant}` }, this.text)), h("svg", { key: '6317b8230b742c24a3a3e76520f6e0274f6173db', width: this.sizes[this.size], height: this.sizes[this.size], viewBox: `0 0 ${this.sizes[this.size]} ${this.sizes[this.size]}` }, h("circle", { key: 'ec939ab8c3d402a5c68750bb5430d06eae6aaa74', class: "track", fill: "none", stroke: "#e6e6e6", r: radius, cx: this.sizes[this.size] / 2, cy: this.sizes[this.size] / 2, "stroke-width": strokeWidth }), h("circle", { key: 'e63e432edc2621fa560670fb2f2d4045afad429e', class: `tail tail--${this.variant}`, fill: "none", stroke: "currentColor", r: radius, cx: this.sizes[this.size] / 2, cy: this.sizes[this.size] / 2, "stroke-width": strokeWidth, "stroke-linecap": 'round', "stroke-dasharray": dashArray, "stroke-dashoffset": dashOffset, transform: `rotate(-180 ${this.sizes[this.size] / 2} ${this.sizes[this.size] / 2})`, style: {
                transition: 'stroke-dashoffset 0.5s ease',
            } }))));
    }
    static get is() { return "dga-circular-progress-bar"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-circular-progress-bar.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-circular-progress-bar.css"]
        };
    }
    static get properties() {
        return {
            "RTL": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "r-t-l",
                "reflect": false,
                "defaultValue": "false"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'200px' | '160px' | '120px' | '80px' | '64px'",
                    "resolved": "\"120px\" | \"160px\" | \"200px\" | \"64px\" | \"80px\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'64px'"
            },
            "text": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "text",
                "reflect": false
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'primary' | 'neutral' | 'success' | 'error'",
                    "resolved": "\"error\" | \"neutral\" | \"primary\" | \"success\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "'primary'"
            },
            "percentage": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "percentage",
                "reflect": false,
                "defaultValue": "0"
            }
        };
    }
}
//# sourceMappingURL=dga-circular-progress-bar.js.map
