import { h, Host } from "@stencil/core";
import translate from "../../global/translations";
const PERCENT = 100;
/**
 * The linear progress component can be used to visualize the current state of a progress in a scale;
 * for example percentage of completion of a task.
 *
 * @exampleComponent limel-example-linear-progress-basic
 * @exampleComponent limel-example-linear-progress-indeterminate
 * @exampleComponent limel-example-linear-progress-accessible-label
 * @exampleComponent limel-example-linear-progress-color
 */
export class LinearProgress {
    constructor() {
        /**
         * Defines the language for translations.
         * Will translate the translatable strings on the components.
         */
        this.language = 'en';
        /**
         * The value of the progress bar. Should be between `0` and `1`.
         */
        this.value = 0;
        /**
         * Puts the progress bar in an indeterminate state
         */
        this.indeterminate = false;
    }
    render() {
        if (!this.isFinite(this.value)) {
            return;
        }
        const loadingText = translate.get('loading', this.language);
        const ariaLabel = translate.get('progress-bar', this.language);
        const ariaValueNow = this.indeterminate ? undefined : this.value;
        const ariaValueText = this.indeterminate ? loadingText : undefined;
        return (h(Host, { role: "progressbar", "aria-label": this.accessibleLabel || ariaLabel, "aria-live": "polite", "aria-valuemin": "0", "aria-valuemax": "1", "aria-valuenow": ariaValueNow, "aria-valuetext": ariaValueText, style: { '--percentage': `${this.value * PERCENT}%` } }, h("div", { class: "progress" })));
    }
    watchValue(newValue) {
        if (!this.isFinite(newValue)) {
            return;
        }
        this.updateProgress(newValue);
    }
    updateProgress(value) {
        if (this.host) {
            this.host.style.setProperty('--percentage', `${value * PERCENT}%`);
        }
    }
    isFinite(value) {
        return Number.isFinite(value);
    }
    static get is() { return "limel-linear-progress"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["linear-progress.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["linear-progress.css"]
        };
    }
    static get properties() {
        return {
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Languages",
                    "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
                    "references": {
                        "Languages": {
                            "location": "import",
                            "path": "../date-picker/date.types",
                            "id": "src/components/date-picker/date.types.ts::Languages",
                            "referenceLocation": "Languages"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the language for translations.\nWill translate the translatable strings on the components."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "language",
                "defaultValue": "'en'"
            },
            "value": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value of the progress bar. Should be between `0` and `1`."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "value",
                "defaultValue": "0"
            },
            "indeterminate": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Puts the progress bar in an indeterminate state"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "indeterminate",
                "defaultValue": "false"
            },
            "accessibleLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "A label used to describe the purpose of the element to users\nof assistive technologies, like screen readers.\nIf not provided, the generic word of \"Progress bar\" will be used."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "accessible-label"
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "watchValue"
            }];
    }
}
