import { h } from "@stencil/core";
import { abbreviate } from "../badge/format";
const PERCENT = 100;
/**
 * The circular progress component can be used to visualize the curent state of
 * a progress in a scale; for example percentage of completion of a task.
 *
 * Its compact UI makes the component suitable when there is not enough screen
 * space available to visualise such information.
 *
 * This component allows you to define your scale, from `0` to a desired
 * `maxValue`; and also lets you chose a proper `suffix` for your scale.
 *
 * :::note
 * The component will round up the value when it is displayed, and only shows
 * one decimal digit.
 * It also abbreviates large numbers. For example 1234 will be displayed as 1.2k.
 * Of course such numbers, if bigger than `maxValue` will be visualized as a
 * full progress.
 * :::
 *
 * @exampleComponent limel-example-circular-progress-basic
 * @exampleComponent limel-example-circular-progress-sizes
 * @exampleComponent limel-example-circular-progress-props
 * @exampleComponent limel-example-circular-progress-css-variables
 * @exampleComponent limel-example-circular-progress-percentage-colors
 */
export class CircularProgress {
    constructor() {
        /**
         * The value of the progress bar.
         */
        this.value = 0;
        /**
         * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.
         */
        this.maxValue = PERCENT;
        /**
         * The prefix which is displayed before the `value`, must be a few characters characters long.
         */
        this.prefix = null;
        /**
         * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
         */
        this.suffix = '%';
        /**
         * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
         */
        this.displayPercentageColors = false;
        this.renderPrefix = () => {
            if (this.prefix) {
                return h("span", { class: "prefix" }, this.prefix);
            }
        };
    }
    render() {
        const classList = {
            'lime-circular-progress': true,
            'displays-percentage-colors': this.displayPercentageColors,
        };
        const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
        const value = Math.round(this.value * 10) / 10;
        return (h("div", { key: 'b2de8450baa7722c2a362a41ea97de6b694bf6ba', role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, this.renderPrefix(), h("span", { key: 'e3fdb555dd58a1a18227659761e9ee9171050b79', class: "value" }, abbreviate(value), h("span", { key: 'a0d25b4e71beaf4993bb78e96eb2094020b5de52', class: "suffix" }, this.suffix))));
    }
    static get is() { return "limel-circular-progress"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["circular-progress.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["circular-progress.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value of the progress bar."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value",
                "defaultValue": "0"
            },
            "maxValue": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The maximum value within the scale that the progress bar should visualize. Defaults to `100`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max-value",
                "defaultValue": "PERCENT"
            },
            "prefix": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The prefix which is displayed before the `value`, must be a few characters characters long."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "prefix",
                "defaultValue": "null"
            },
            "suffix": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "suffix",
                "defaultValue": "'%'"
            },
            "displayPercentageColors": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "display-percentage-colors",
                "defaultValue": "false"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "CircularProgressSize",
                    "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
                    "references": {
                        "CircularProgressSize": {
                            "location": "import",
                            "path": "../circular-progress/circular-progress.types",
                            "id": "src/components/circular-progress/circular-progress.types.ts::CircularProgressSize",
                            "referenceLocation": "CircularProgressSize"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "size"
            }
        };
    }
}
