import { r as registerInstance, h, g as getElement } from './index-148a7577.js';
import { _ as _t } from './text-26e02c8d.js';
import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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)))));
    }
    get hostElement() { return getElement(this); }
    static get watchers() { return {
        "afCompletedSteps": ["changeCompletedStepsHandler"]
    }; }
};
ProgressCircle.style = DigiProgressCircleStyle0;

export { ProgressCircle as digi_progress_circle };
