import { p as proxyCustomElement, H, h } from './p-a53686b3.js';
import { _ as _t } from './p-08cf2c0e.js';
import { r as randomIdGenerator } from './p-ffe5c0e8.js';
import { d as defineCustomElement$3 } from './p-e6a40b0a.js';
import { d as defineCustomElement$2 } from './p-5bbb5a67.js';

var ProgressCircleRole;
(function (ProgressCircleRole) {
    ProgressCircleRole["NONE"] = "none";
    ProgressCircleRole["STATUS"] = "status";
})(ProgressCircleRole || (ProgressCircleRole = {}));

const progressCircleCss = ".sc-digi-progress-circle-h{--digi--progress-circle--heading--font-weight:var(--digi--typography--heading-2--font-weight--desktop);--digi--progress-circle--heading--font-size:var(--digi--typography--heading-2--font-size--mobile);--digi--progress-circle--label--font-size:var(--digi--typography--label--font-size--desktop);--digi--progress-circle--label--margin:var(--digi--gutter--medium) 0;--digi--progress-circle--border-color:#d5d5d5;--digi--progress-circle--step--line--color:var(--digi--grayscale--700);--digi--progress-circle--step--background--active:var(--digi--color--marking--indication--primary);--digi--progress-circle--icon--width:1rem;--digi--progress-circle--icon--height:1rem;--digi--progress-circle--icon--color:var(--digi--color--icon--secondary);--digi--progress-circle--icon--warning--color:var(--digi--color--icon--validation--warning);--digi--progress-circle--icon--error--color:var(--digi--color--icon--validation--error);--digi--progress-circle--icon--error--background-color:var(--digi--color--background--interactive--validation--error);--digi--progress-circle--icon-status--width:1.75rem;--digi--progress-circle--icon-status--height:1.75rem}.sc-digi-progress-circle-h .digi-progress-circle.sc-digi-progress-circle{box-sizing:border-box}.sc-digi-progress-circle-h .digi-progress-circle__content.sc-digi-progress-circle{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-progress-circle-h .digi-progress-circle__heading.sc-digi-progress-circle{font-weight:var(--digi--progress-circle--heading--font-weight);margin:0;margin-bottom:0.5rem}.sc-digi-progress-circle-h .digi-progress-circle__heading--circle.sc-digi-progress-circle{font-size:var(--digi--progress-circle--heading--font-size);margin-bottom:0.35rem}.sc-digi-progress-circle-h .digi-progress-circle__next.sc-digi-progress-circle{font-size:var(--digi--typography--body--font-size--desktop);font-style:italic;color:var(--digi--color--text--primary);margin:0}.sc-digi-progress-circle-h .digi-progress-circle__next--circle.sc-digi-progress-circle{font-size:var(--digi--typography--tag--font-size--desktop)}.sc-digi-progress-circle-h .digi-progress-circle__icon.sc-digi-progress-circle{--digi--icon--height:var(--digi--progress-circle--icon--width);--digi--icon--width:var(--digi--progress-circle--icon--height);--digi--icon--color:var(--digi--progress-circle--icon--color)}.sc-digi-progress-circle-h .digi-progress-circle__icon--warning.sc-digi-progress-circle{--digi--icon--height:var(--digi--progress-circle--icon-status--height);--digi--icon--width:var(--digi--progress-circle--icon-status--width)}.sc-digi-progress-circle-h .digi-progress-circle__icon--error.sc-digi-progress-circle{margin-top:4px;--digi--icon--height:var(--digi--progress-circle--icon-status--height);--digi--icon--width:var(--digi--progress-circle--icon-status--width);--digi--icon--color:var(--digi--progress-circle--icon--error--color)}.sc-digi-progress-circle-h .digi-progress-circle__label.sc-digi-progress-circle{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--progress-circle--label--font-size);line-height:var(--digi--typography--body--line-height--desktop);color:var(--digi--color--text--primary);margin:var(--digi--progress-circle--label--margin)}.sc-digi-progress-circle-h .digi-progress-circle__label--steps.sc-digi-progress-circle{font-weight:600}.sc-digi-progress-circle-h .digi-progress-circle__validation-label.sc-digi-progress-circle{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--progress-circle--label--font-size);line-height:var(--digi--typography--body--line-height--desktop);color:var(--digi--color--text--primary);padding:var(--digi--gutter--medium) var(--digi--gutter--medium);display:flex;align-items:center}.sc-digi-progress-circle-h .digi-progress-circle__validation-label.sc-digi-progress-circle span.sc-digi-progress-circle{display:inline-block;margin-left:8px}.sc-digi-progress-circle-h .digi-progress-circle__validation-label--warning.sc-digi-progress-circle{background-color:var(--digi--color--background--interactive--validation--warning)}.sc-digi-progress-circle-h .digi-progress-circle__validation-label--error.sc-digi-progress-circle{background-color:var(--digi--color--background--interactive--validation--error)}.sc-digi-progress-circle-h .digi-progress-circle__circle-wrapper.sc-digi-progress-circle{display:flex;align-items:center}.sc-digi-progress-circle-h .digi-progress-circle__circle.sc-digi-progress-circle{position:relative;display:inline-block}.sc-digi-progress-circle-h .digi-progress-circle__circle.sc-digi-progress-circle svg.sc-digi-progress-circle{transform:rotate(-90deg)}.sc-digi-progress-circle-h .digi-progress-circle__circle-label.sc-digi-progress-circle{position:absolute;top:47%;left:50%;transform:translate(-50%, -50%);font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--tag--font-size--desktop);line-height:var(--digi--typography--body--line-height--desktop);color:var(--digi--color--text--primary);font-weight:600;margin:0}.sc-digi-progress-circle-h .digi-progress-circle__circle-step-unfinished.sc-digi-progress-circle{stroke:var(--digi--progress-circle--border-color)}.sc-digi-progress-circle-h .digi-progress-circle__circle-step-completed.sc-digi-progress-circle{stroke:var(--digi--progress-circle--step--background--active)}.sc-digi-progress-circle-h .digi-progress-circle__circle-step-warning.sc-digi-progress-circle{stroke:var(--digi--progress-circle--icon--warning--color)}.sc-digi-progress-circle-h .digi-progress-circle__circle-step-error.sc-digi-progress-circle{stroke:var(--digi--progress-circle--icon--error--color)}";
const DigiProgressCircleStyle0 = progressCircleCss;

const ProgressCircle = /*@__PURE__*/ proxyCustomElement(class ProgressCircle extends H {
    constructor() {
        super();
        this.__registerHost();
        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)))));
    }
    get hostElement() { return this; }
    static get watchers() { return {
        "afCompletedSteps": ["changeCompletedStepsHandler"]
    }; }
    static get style() { return DigiProgressCircleStyle0; }
}, [2, "digi-progress-circle", {
        "radius": [2],
        "stroke": [2],
        "afCompletedSteps": [2, "af-completed-steps"],
        "afWarningStep": [2, "af-warning-step"],
        "afErrorStep": [2, "af-error-step"],
        "afTotalSteps": [2, "af-total-steps"],
        "afStepsSeparator": [1, "af-steps-separator"],
        "afStepText": [1, "af-step-text"],
        "afStepNextText": [1, "af-step-next-text"],
        "afStepHeading": [1, "af-step-heading"],
        "afStepNextLabel": [1, "af-step-next-label"],
        "afValidationLabel": [1, "af-validation-label"],
        "afRole": [1, "af-role"],
        "afId": [1, "af-id"],
        "completedSteps": [32],
        "totalSteps": [32]
    }, [[0, "focus", "focusOnHeading"]], {
        "afCompletedSteps": ["changeCompletedStepsHandler"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-progress-circle", "digi-icon-validation-error", "digi-icon-validation-warning"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-progress-circle":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ProgressCircle);
            }
            break;
        case "digi-icon-validation-error":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "digi-icon-validation-warning":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DigiProgressCircle = ProgressCircle;
const defineCustomElement = defineCustomElement$1;

export { DigiProgressCircle, defineCustomElement };
