import { h } from "@stencil/core";
export class DgaRadialStepper {
    constructor() {
        this.RTL = false;
        this.size = '64px';
        this.showText = true;
        this.steps = [];
        this.activeStep = 1;
        this.variant = 'primary';
        this.showStepName = true;
        this.showStepDescription = true;
        this.sizes = {
            '120px': 120,
            '80px': 80,
            '64px': 64,
            '48px': 48,
            '40px': 40,
        };
    }
    updateInternalPercentage() {
        if ((this.activeStep >= this.steps.length + 1) || (this.activeStep < 1)) {
            return;
        }
        this.internalPercentage = (this.activeStep / this.steps.length) * 100;
        this.internalActiveStep = this.activeStep;
    }
    componentDidLoad() {
        this.updateInternalPercentage();
    }
    render() {
        var _a, _b, _c, _d, _e, _f, _g, _h;
        const strokeWidth = this.sizes[this.size] / 10;
        const radius = (this.sizes[this.size] - strokeWidth) / 2;
        const dashArray = 2 * Math.PI * radius;
        const dashOffset = (this.RTL ? 1 : -1) * dashArray * (1 - this.internalPercentage / 100);
        return (h("dga-flex", { key: 'ff69a99e82e896edccf1054e9e3d30302b27de4d', spacing: 8, align: 'center', dir: this.RTL ? "rtl" : "ltr", class: `dga-radial-stepper--${this.size} dga-radial-stepper--${this.variant}`, "aria-size": this.size }, h("div", { key: 'f3e6ef68b9626ef185e657b1426c9a40e18f147d', class: "dga-circular-stepper", "aria-size": this.size }, h("div", { key: 'a83681c743bfc2635e1bfee1eb0831f349e631f3', class: "dga-circular-stepper__label" }, this.showText && this.steps.length > 0 && h("h4", { key: 'b96a3dbc825aebab5ff9030dbb9a10dc098d9518', class: `dga-circular-stepper__label--text ${this.variant}` }, this.RTL ? `${this.internalActiveStep} من ${this.steps.length}` : `${this.internalActiveStep} of ${this.steps.length}`)), h("svg", { key: '53d528c05f98719c0b330918b9b9d7bbedcd12d1', width: this.sizes[this.size], height: this.sizes[this.size], viewBox: `0 0 ${this.sizes[this.size]} ${this.sizes[this.size]}` }, h("circle", { key: 'd88c4a30673c2eb6d1f86156169fa9a91c16954e', class: `track track--${this.variant}`, fill: "none", stroke: "#e6e6e6",
            // stroke="currentColor"
            r: radius, cx: this.sizes[this.size] / 2, cy: this.sizes[this.size] / 2, "stroke-width": strokeWidth }), h("circle", { key: '26b42ddc6a66f0108bb3101b801a3cd3b61b13e8', 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(-90 ${this.sizes[this.size] / 2} ${this.sizes[this.size] / 2})`, style: {
                transition: 'stroke-dashoffset 0.5s ease',
            } }))), h("dga-flex", { key: 'cf62aa5f255333c2e99ca629bb4fb8c90586f806', direction: 'column', spacing: 4 }, ((_a = this.steps[this.internalActiveStep - 1]) === null || _a === void 0 ? void 0 : _a.showPreStep) && h("span", { key: 'dccd6ec0ee19084014f0efef623159df8e89d8ca', class: "dga-radial-stepper__pre-name" }, "Previous: ", (_b = this.steps[this.internalActiveStep - 1]) === null || _b === void 0 ? void 0 :
            _b.stepName), this.showStepName && ((_c = this.steps[this.internalActiveStep - 1]) === null || _c === void 0 ? void 0 : _c.stepName) && h("h3", { key: 'a0961c56ae0ebbbb22aba96f66bdbf5d071a9e56', class: "dga-radial-stepper__name" }, (_d = this.steps[this.internalActiveStep - 1]) === null || _d === void 0 ? void 0 : _d.stepName), this.showStepDescription && ((_e = this.steps[this.internalActiveStep - 1]) === null || _e === void 0 ? void 0 : _e.stepDescription) && h("h5", { key: 'f510fc0c33eab312a705860e6a97b0354caff332', class: "dga-radial-stepper__desc" }, (_f = this.steps[this.internalActiveStep - 1]) === null || _f === void 0 ? void 0 : _f.stepDescription), ((_g = this.steps[this.internalActiveStep - 1]) === null || _g === void 0 ? void 0 : _g.showNextStep) && h("span", { key: '117d9f8e0073ccd7ee019ecaf4c80bd28800042c', class: "dga-radial-stepper__next-name" }, "Next: ", (_h = this.steps[this.internalActiveStep]) === null || _h === void 0 ? void 0 :
            _h.stepName))));
    }
    static get is() { return "dga-radial-stepper"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-radial-stepper.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-radial-stepper.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": "'120px' | '80px' | '64px' | '48px' | '40px'",
                    "resolved": "\"120px\" | \"40px\" | \"48px\" | \"64px\" | \"80px\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'64px'"
            },
            "showText": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-text",
                "reflect": false,
                "defaultValue": "true"
            },
            "steps": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Step[]",
                    "resolved": "Step[]",
                    "references": {
                        "Step": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-radial-stepper/dga-radial-stepper.tsx",
                            "id": "src/components/dga-radial-stepper/dga-radial-stepper.tsx::Step"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "activeStep": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "active-step",
                "reflect": false,
                "defaultValue": "1"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'primary' | 'neutral' | 'on-color'",
                    "resolved": "\"neutral\" | \"on-color\" | \"primary\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "'primary'"
            },
            "showStepName": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-step-name",
                "reflect": false,
                "defaultValue": "true"
            },
            "showStepDescription": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-step-description",
                "reflect": false,
                "defaultValue": "true"
            }
        };
    }
    static get states() {
        return {
            "internalPercentage": {},
            "internalActiveStep": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "steps",
                "methodName": "updateInternalPercentage"
            }, {
                "propName": "activeStep",
                "methodName": "updateInternalPercentage"
            }];
    }
}
//# sourceMappingURL=dga-radial-stepper.js.map
