/* 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: 'b9867c9a71666ed972c7912d2a1284365abd62e3', class: this.cssModifiers, role: this.afRole === ProgressCircleRole.STATUS
                ? ProgressCircleRole.STATUS
                : null }, h("div", { key: '7ef2405c91c3616bc4f51fe2ea3ab299cf3a70c1', class: "digi-progress-circle__circle-wrapper" }, h("div", { key: 'c5d3d8e079cfee45e12a586cd5ad2420ea231939', class: "digi-progress-circle__circle" }, h("p", { key: '2a3aa70207ab16e6658aa3066d708eaccae06549', class: "digi-progress-circle__circle-label", "aria-label": `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}` }, this.afCompletedSteps, " ", this.afStepsSeparator, ' ', this.afTotalSteps, ' '), h("svg", { key: 'ec40001b0a0748ce2da0322a727d7ea9a26d843f', width: this.radius * 2, height: this.radius * 2 }, h("defs", { key: '948d0434d2ac081ae4657d5db0f57de3172430dd' }, h("mask", { key: '5107c4521b6dc0ddb8c47c78cd0a17e136cc3aec', id: this.afId }, h("circle", { key: 'a624b683dbc78a050dbe2d6c9650a1402db263aa', 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: '3c9ebeefd57ba052af5e29743ea53e9a0c322f98' }, h("circle", { key: '54cd30b279d6b0f4f2ace271c2cb5e9a1fca60e0', 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: '4fa5291983b83a5ebd56fc768790baa18883520f', 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: '327defaa2d29a2630cd3ef1a73042e09a10d7fc0', 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: '593ec3f101bce4b5b7b22245db475388987a220b', 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: 'd8dc0cdc291fed38018ed53931e4203a61c69897', class: "digi-progress-circle__content" }, this.renderHeading(), this.afCompletedSteps === this.afTotalSteps && (h("p", { key: '2740449ffb5a9fcdc65bc3d58ae7890f3754a879', class: "digi-progress-circle__next digi-progress-circle__next--circle", style: {
                visibility: 'hidden'
            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)), this.afCompletedSteps != this.afTotalSteps && (h("p", { key: 'd3d9217c7fbc70db312db22cfc64f931d9c7bf5c', 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: 'db55200e4ef1e96896b368873637b008c45e3216', class: "digi-progress-circle__validation-label digi-progress-circle__validation-label--warning" }, h("digi-icon-validation-warning", { key: 'c6ecd4e9191677789331cf12f60badb2c788e006', class: "digi-progress-circle__icon--warning" }), h("span", { key: '05cc13d3726f7be4483fb73396aa2c2a4b8810b7' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: '7a581355f9c1200c8d624d89017ac81b4dffb150', class: "digi-progress-circle__validation-label digi-progress-circle__validation-label--error" }, h("digi-icon-validation-error", { key: '29cca5e78819fd27d54accc351acb5e4d7932eaa', class: "digi-progress-circle__icon--error" }), h("span", { key: '418f181c0865791d68f6ad33580bfd20410bb181' }, 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
            }];
    }
}
