/* eslint-disable @typescript-eslint/no-explicit-any */
import { _t } from "../../../text";
import { h } from "@stencil/core";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
import { ProgressCircleRole } from "./progress-circle-role.enum";
/**
 * @enums ProgressCircleRole - progress-role.enum.ts
 * @swedishName Förloppscirkeln
 */
export class ProgressCircle {
    constructor() {
        this.completedSteps = undefined;
        this.totalSteps = [];
        this.radius = 42;
        this.stroke = 6;
        this.afCompletedSteps = undefined;
        this.afWarningStep = undefined;
        this.afErrorStep = undefined;
        this.afTotalSteps = undefined;
        this.afStepsSeparator = _t.of;
        this.afStepText = _t.step;
        this.afStepNextText = _t.progress.questions_next;
        this.afStepHeading = undefined;
        this.afStepNextLabel = undefined;
        this.afValidationLabel = undefined;
        this.afRole = ProgressCircleRole.STATUS;
        this.afId = randomIdGenerator('digi-progress-circle');
    }
    componentWillLoad() {
        this.changeTotalStepsHandler(this.afTotalSteps);
    }
    changeTotalStepsHandler(value) {
        this.totalSteps = new Array(value);
    }
    changeCompletedStepsHandler(value) {
        this.completedSteps = value;
    }
    /**
     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva rubrik-elementet.
     * @en Listens for when focus is set on the custom element and propagates it down to the actual heading element.
     */
    focusOnHeading() {
        this.headingElement.focus();
    }
    renderHeading() {
        return (h("h2", { class: "digi-progress-circle__heading digi-progress-circle__heading--circle", tabIndex: -1, ref: (el) => (this.headingElement = el) }, this.afStepHeading));
    }
    get cssModifiers() {
        return {
            'digi-progress-circle': true,
            'digi-progress-circle--primary': true
        };
    }
    get slottedContent() {
        return;
    }
    render() {
        return (h("div", { key: 'd5560d5a4fb3423a6daa6f4b9bd71c0c9032030a', class: this.cssModifiers, role: this.afRole === ProgressCircleRole.STATUS
                ? ProgressCircleRole.STATUS
                : null }, h("div", { key: 'b4e5ec08562371e02010238cda3a611067fa54b6', class: "digi-progress-circle__circle-wrapper" }, h("div", { key: 'cc30bc39a3ade39b1c1bd4edd18fd9993c3f5cc9', class: "digi-progress-circle__circle" }, h("p", { key: '70873bd31019ac4f0fb07c1acfe065c4f9e6e4d9', class: "digi-progress-circle__circle-label", "aria-label": `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}` }, this.afCompletedSteps, " ", this.afStepsSeparator, ' ', this.afTotalSteps, ' '), h("svg", { key: '94d8e9d9df34ab7021f04e155457623b4c2ff9f7', width: this.radius * 2, height: this.radius * 2 }, h("defs", { key: 'f29b0264df70edf9f11823694673e8766c5525e7' }, h("mask", { key: 'ef358bd327afcd522d160ddc56f5f1963c80d4bd', id: this.afId }, h("circle", { key: '4a3d7e68ee75082a9a4211b2b72ec0fd94a194be', cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", stroke: "white", "stroke-width": this.stroke, "stroke-dasharray": (1000 - this.afTotalSteps * 15) / this.afTotalSteps +
                ' 15', pathLength: "1000" }))), h("g", { key: 'd4f3dea28e7d5a9ae5791535d67c86322419ac26' }, h("circle", { key: 'baa83142565f2963cfcb70fb2f4d9b50914dd71e', class: "digi-progress-circle__circle-step-unfinished", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke }), h("circle", { key: '81408e675c62b2ff3bbd8a4433b8220c0f871fd8', class: "digi-progress-circle__circle-step-completed", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke, "stroke-dasharray": (1000 / this.totalSteps.length) * this.afCompletedSteps +
                ' 1000', pathLength: "1000" }), this.afWarningStep && (h("circle", { key: 'b31ba9528d1572f7f34ea0a5f1682ea18d743f61', class: "digi-progress-circle__circle-step-warning", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke, "stroke-dasharray": (1000 / this.totalSteps.length) * 1 + ' 1000', "stroke-dashoffset": -(1000 / this.totalSteps.length) *
                (this.afCompletedSteps - 1), pathLength: "1000" })), this.afErrorStep && (h("circle", { key: '5f3a6a05f370be092d2eb4300327127def6f34c0', class: "digi-progress-circle__circle-step-error", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke, "stroke-dasharray": (1000 / this.totalSteps.length) * 1 + ' 1000', "stroke-dashoffset": -(1000 / this.totalSteps.length) *
                (this.afCompletedSteps - 1), pathLength: "1000" }))))), h("div", { key: 'c9d9a05bcda2e69ff45468f45117188d2aa190ce', class: "digi-progress-circle__content" }, this.renderHeading(), this.afCompletedSteps === this.afTotalSteps && (h("p", { key: '04cd945c795dc4b65d5632df90ef8d45432b96d5', class: "digi-progress-circle__next digi-progress-circle__next--circle", style: {
                visibility: 'hidden'
            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)), this.afCompletedSteps != this.afTotalSteps && (h("p", { key: 'c4d803326cbb129e5f1a2d603b71b97dbe44d839', class: "digi-progress-circle__next digi-progress-circle__next--circle", style: {
                visibility: this.afStepNextLabel !== null &&
                    this.afStepNextLabel !== undefined
                    ? 'visible'
                    : 'hidden'
            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: '3c37261a367f0a4eb3675542caa87ddbe0ef007c', class: "digi-progress-circle__validation-label digi-progress-circle__validation-label--warning" }, h("digi-icon-validation-warning", { key: '6cfd1c3345fbf047dc3eddfd8d2d2647b912477d', class: "digi-progress-circle__icon--warning" }), h("span", { key: '3f1f0079a2b0d952ff1b1d4b694c4e7ea6fb77cc' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: '33d198150b51af505be55b5118fcac859b0844c6', class: "digi-progress-circle__validation-label digi-progress-circle__validation-label--error" }, h("digi-icon-validation-error", { key: '3dc1f3234f120676cc0722c59bc2e40325c92b64', class: "digi-progress-circle__icon--error" }), h("span", { key: '9b098f3d7c81a0ab8954815d52bc597af52b0014' }, this.afValidationLabel)))));
    }
    static get is() { return "digi-progress-circle"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["progress-circle.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["progress-circle.css"]
        };
    }
    static get properties() {
        return {
            "radius": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "radius",
                "reflect": false,
                "defaultValue": "42"
            },
            "stroke": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "stroke",
                "reflect": false,
                "defaultValue": "6"
            },
            "afCompletedSteps": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set finished amount of steps"
                        }],
                    "text": "S\u00E4tter antal f\u00E4rdiga steg"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-completed-steps",
                "reflect": false
            },
            "afWarningStep": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set a step where something requires additional actions"
                        }],
                    "text": "S\u00E4tter ett steg d\u00E4r det kr\u00E4vs ytterligare \u00E5tg\u00E4rder"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-warning-step",
                "reflect": false
            },
            "afErrorStep": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set a step that failed"
                        }],
                    "text": "S\u00E4tter ett steg d\u00E4r n\u00E5got gick fel"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-error-step",
                "reflect": false
            },
            "afTotalSteps": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set amount of total steps"
                        }],
                    "text": "S\u00E4tter totala antalet steg"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-total-steps",
                "reflect": false
            },
            "afStepsSeparator": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Separator text between current steps and total steps.\nDefault is \"av\", but can be changed e.g. for different language."
                        }],
                    "text": "Text emellan antal f\u00E4rdiga och totala antalet steg.\nSom standard anv\u00E4nds \"av\", men kan \u00E4ndras f\u00F6r exempelvis annat spr\u00E5k."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-steps-separator",
                "reflect": false,
                "defaultValue": "_t.of"
            },
            "afStepText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Text that shows \"Steg\" before the current step\nDefault is \"Steg\", but can be changed e.g. for different language."
                        }],
                    "text": "Text som visar \"Steg\" innan det antalet steg visas\nSom standard anv\u00E4nds \"Steg\", men kan \u00E4ndras f\u00F6r exempelvis annat spr\u00E5k."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-step-text",
                "reflect": false,
                "defaultValue": "_t.step"
            },
            "afStepNextText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Descriptive text of what comes in the next step."
                        }],
                    "text": "Beskrivande text om vad som kommer h\u00E4rn\u00E4st"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-step-next-text",
                "reflect": false,
                "defaultValue": "_t.progress.questions_next"
            },
            "afStepHeading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Adds a descriptive header for the progress-circle"
                        }],
                    "text": "S\u00E4tter en beskrivande rubrik f\u00F6r f\u00F6rloppsm\u00E4taren"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-step-heading",
                "reflect": false
            },
            "afStepNextLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Adds a descriptive header for the progress-circle"
                        }],
                    "text": "S\u00E4tter en beskrivande rubrik f\u00F6r f\u00F6rloppsm\u00E4taren"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-step-next-label",
                "reflect": false
            },
            "afValidationLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Descriptive text that tells the user something went wrong in the process"
                        }],
                    "text": "Beskrivande text om n\u00E5got g\u00E5r fel i processen"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-validation-label",
                "reflect": false
            },
            "afRole": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ProgressCircleRole",
                    "resolved": "ProgressCircleRole.NONE | ProgressCircleRole.STATUS",
                    "references": {
                        "ProgressCircleRole": {
                            "location": "import",
                            "path": "./progress-circle-role.enum",
                            "id": "src/components/_progress/progress-circle/progress-circle-role.enum.ts::ProgressCircleRole"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set role attribute. Defaults to 'status'.\nIf you apply the progress-circle both before and after a form,\nset only role 'status' on one of them to avoid screen readers to read the text twice"
                        }],
                    "text": "S\u00E4tter attributet 'role'. F\u00F6rvalt \u00E4r 'status'.\nAnv\u00E4nder du komponenten b\u00E5de f\u00F6re och efter ett formul\u00E4r s\u00E5\nange bara den ena som 'status' f\u00F6r att undvika att sk\u00E4rml\u00E4sare l\u00E4ser upp texten tv\u00E5 g\u00E5nger"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-role",
                "reflect": false,
                "defaultValue": "ProgressCircleRole.STATUS"
            },
            "afId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input id attribute. Defaults to random string."
                        }],
                    "text": "S\u00E4tter attributet 'id'. Om inget v\u00E4ljs s\u00E5 skapas ett slumpm\u00E4ssigt id."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-id",
                "reflect": false,
                "defaultValue": "randomIdGenerator('digi-progress-circle')"
            }
        };
    }
    static get states() {
        return {
            "completedSteps": {},
            "totalSteps": {}
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "afCompletedSteps",
                "methodName": "changeCompletedStepsHandler"
            }];
    }
    static get listeners() {
        return [{
                "name": "focus",
                "method": "focusOnHeading",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
