/*!
 * Built with Stencil
 * By PostNord.
 */
import { Host, h } from "@stencil/core";
import { uuidv4, en, awaitTopbar } from "../../../globals/helpers";
import { minus, plus } from "pn-design-assets/pn-assets/icons.js";
import { translations } from "./translations";
/**
 * The `pn-counter` is an input with a button on each side that can be used to increase and decrease the input value.
 *
 * @nativeInput Use the `input` event to listen to content being modified by the user. It is emitted everytime a user writes or removes content in the input.
 * @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).
 */
export class PnCounter {
    id = `pn-counter-${uuidv4()}`;
    idLabel = `${this.id}-label`;
    idText = `${this.id}-text`;
    idAmount = `${this.id}-count`;
    hostElement;
    clearAriaTimer;
    displaySrValue = false;
    showMinMaxMessage = false;
    /** Prevent double events when reaching min/max values. */
    lastDispatchedValue;
    interactType;
    /** Label for the counter */
    label;
    /** Set a helpertext for the counter. */
    helpertext;
    /** Set a predefined value */
    value = 0;
    /** Set a unique HTML ID for the counter */
    counterid = this.id;
    /** Use the compact label variant. @since v7.21.0 */
    compact = false;
    /** Set the language manually for the built in translations. */
    language = null;
    /** Text for the decrease button. Default is "Decrease". @category Translation */
    labelDecrease;
    /** Text for the increase button. Default is "Increase". @category Translation */
    labelIncrease;
    /** Set a message that shows below input when user wants to set a value that is below `min`. Default is "Minimum value is x" @category Translation */
    minMessage;
    /** Set a message that shows below input when user wants to set a value that is above `max`. Default is "Maximum value is x"  @category Translation */
    maxMessage;
    /** HTML input name. @category HTML input */
    name;
    /** Minimum value. @category HTML input */
    min;
    /** Maximum value. @category HTML input */
    max;
    /** Increase/decrease the value in steps, default is 1. @category HTML input */
    step = 1;
    /** Suggest values for the counter input. @category HTML input */
    list;
    /** Set the counter as required. @category State */
    required = false;
    /** Set the counter as readonly. @category State */
    readonly = false;
    /** Set the counter as disabled. @category State */
    disabled = false;
    /**
     * Instead of listening to multiple input, change and/or click events, we bundled them into one.
     * - `value` is the current counter value.
     * - `input` is true if the user changed the value with the HTML input.
     * - `decrease` is true if the user clicked on the decrease button.
     * - `increase` is true if the user clicked on the increase button.
     */
    counterInput;
    watchValue() {
        this.showSrContent();
        this.showMinMaxMessage = false;
        if (this.hasMin() && this.value < this.min) {
            this.setMin();
            this.showMinMaxMessage = true;
        }
        if (this.hasMax() && this.value > this.max) {
            this.setMax();
            this.showMinMaxMessage = true;
        }
        if (this.lastDispatchedValue !== this.value)
            this.counterInput.emit({
                value: this.value,
                input: this.interactType === 'input',
                decrease: this.interactType === 'decrease',
                increase: this.interactType === 'increase',
            });
        this.lastDispatchedValue = this.value;
    }
    handleId() {
        this.idLabel = `${this.counterid}-label`;
        this.idText = `${this.counterid}-text`;
        this.idAmount = `${this.counterid}-count`;
    }
    async componentWillLoad() {
        this.handleId();
        if (this.language)
            return;
        await awaitTopbar(this.hostElement);
    }
    setVal(event) {
        const { valueAsNumber } = event.target;
        if (isNaN(valueAsNumber))
            return;
        this.interactType = 'input';
        this.value = valueAsNumber;
    }
    setMin() {
        if (this.hasMin())
            this.value = this.min;
    }
    setMax() {
        if (this.hasMax())
            this.value = this.max;
    }
    hasMin() {
        return typeof this.min === 'number';
    }
    hasMax() {
        return typeof this.max === 'number';
    }
    decreaseAmount() {
        if (this.hasMin() && this.value <= this.min)
            this.showMinMaxMessage = true;
        this.interactType = 'decrease';
        this.value = this.value - this.step;
    }
    increaseAmount() {
        if (this.hasMax() && this.value >= this.max)
            this.showMinMaxMessage = true;
        this.interactType = 'increase';
        this.value = this.value + this.step;
    }
    keyBoardInput(event) {
        event.stopImmediatePropagation();
        if (!/^(Home|End)$/.test(event.key))
            return;
        event.preventDefault();
        this.interactType = 'input';
        if (event.key === 'Home')
            this.setMin();
        if (event.key === 'End')
            this.setMax();
    }
    showSrContent() {
        if (this.clearAriaTimer) {
            clearTimeout(this.clearAriaTimer);
        }
        this.displaySrValue = true;
        this.clearAriaTimer = setTimeout(() => {
            this.displaySrValue = false;
        }, 4000);
    }
    toggleMinMaxMessage() {
        const isMax = this.value === this.max;
        const i18ntxt = `${isMax ? 'MAX' : 'MIN'}_VALUE_MESSAGE`;
        const message = this.translate(i18ntxt) + `${isMax ? this.max : this.min}`.toString();
        return isMax ? this.maxMessage || message : this.minMessage || message;
    }
    getTextMessage(showValue = false) {
        if (this.showMinMaxMessage)
            return this.toggleMinMaxMessage();
        return showValue ? this.value.toString() : this.helpertext;
    }
    describedbyIds() {
        const list = [];
        if (this.helpertext)
            list.push(this.idText);
        if (this.displaySrValue)
            list.push(this.idAmount);
        if (list.length === 0)
            return null;
        return list.join(' ');
    }
    translate(prop) {
        return translations?.[prop]?.[this.language || en];
    }
    noButtons() {
        return this.disabled || this.readonly;
    }
    renderLabel() {
        return (h("label", { htmlFor: this.counterid, class: "pn-counter-label", id: this.idLabel, "data-compact": this.compact }, h("span", null, this.label)));
    }
    renderButton(increase = false) {
        const label = increase
            ? this.labelIncrease || this.translate('INCREASE')
            : this.labelDecrease || this.translate('DECREASE');
        return (h("pn-button", { "data-increase": increase ? true : null, "data-decrease": increase ? null : true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: increase ? plus : minus, iconOnly: true, tooltip: label, onPnClick: () => (increase ? this.increaseAmount() : this.decreaseAmount()) }));
    }
    render() {
        return (h(Host, { key: '8f8a1d6f9cf41e43a17146796bdbadfabb5421da' }, h("div", { key: '1de06de8544eeb0efcdd940da16fd7cb39620897', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, !this.compact && this.renderLabel(), h("div", { key: '83280bb5e207a2a226e7174f5819ef0f375f06c6', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, this.renderButton(), h("div", { key: '6f3cc4e8987d526be974bd561f2e3413e83cc35f', class: "pn-counter-input" }, h("input", { key: 'f2cb0054546017a768e68503aaf7fd93b55c5885', id: this.counterid, class: "pn-counter-element", type: "number", min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.compact ? ' ' : null, required: this.required, readonly: this.readonly, disabled: this.disabled, "aria-describedby": this.describedbyIds(), "data-compact": this.compact, onInput: e => this.setVal(e), onKeyDown: (e) => this.keyBoardInput(e) }), this.compact && this.renderLabel()), this.renderButton(true)), !!this.getTextMessage() && (h("p", { key: 'cb64255f574b4d9fc7ba0098d9f7353c5c639956', id: this.idText, class: "pn-counter-helpertext" }, h("span", { key: '76a5d077b53f2a60c1d39f42b34e8312ae250d86' }, this.getTextMessage()))), h("p", { key: '37d61e40910bb4cd0cc072772c3dd5414fe31574', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
    }
    static get is() { return "pn-counter"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-counter.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-counter.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label for the counter"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "helpertext": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set a helpertext for the counter."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "helpertext"
            },
            "value": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set a predefined value"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "value",
                "defaultValue": "0"
            },
            "counterid": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set a unique HTML ID for the counter"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "counterid",
                "defaultValue": "this.id"
            },
            "compact": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "since",
                            "text": "v7.21.0"
                        }],
                    "text": "Use the compact label variant."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "compact",
                "defaultValue": "false"
            },
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "PnLanguages",
                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
                    "references": {
                        "PnLanguages": {
                            "location": "import",
                            "path": "@/globals/types",
                            "id": "src/globals/types.ts::PnLanguages",
                            "referenceLocation": "PnLanguages"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set the language manually for the built in translations."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "language",
                "defaultValue": "null"
            },
            "labelDecrease": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Translation"
                        }],
                    "text": "Text for the decrease button. Default is \"Decrease\"."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label-decrease"
            },
            "labelIncrease": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Translation"
                        }],
                    "text": "Text for the increase button. Default is \"Increase\"."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label-increase"
            },
            "minMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Translation"
                        }],
                    "text": "Set a message that shows below input when user wants to set a value that is below `min`. Default is \"Minimum value is x\""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "min-message"
            },
            "maxMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Translation"
                        }],
                    "text": "Set a message that shows below input when user wants to set a value that is above `max`. Default is \"Maximum value is x\""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max-message"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML input"
                        }],
                    "text": "HTML input name."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "min": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML input"
                        }],
                    "text": "Minimum value."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "min"
            },
            "max": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML input"
                        }],
                    "text": "Maximum value."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max"
            },
            "step": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML input"
                        }],
                    "text": "Increase/decrease the value in steps, default is 1."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "step",
                "defaultValue": "1"
            },
            "list": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML input"
                        }],
                    "text": "Suggest values for the counter input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "list"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "State"
                        }],
                    "text": "Set the counter as required."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "State"
                        }],
                    "text": "Set the counter as readonly."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "readonly",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "State"
                        }],
                    "text": "Set the counter as disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "clearAriaTimer": {},
            "displaySrValue": {},
            "showMinMaxMessage": {},
            "lastDispatchedValue": {},
            "interactType": {}
        };
    }
    static get events() {
        return [{
                "method": "counterInput",
                "name": "counterInput",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Instead of listening to multiple input, change and/or click events, we bundled them into one.\n- `value` is the current counter value.\n- `input` is true if the user changed the value with the HTML input.\n- `decrease` is true if the user clicked on the decrease button.\n- `increase` is true if the user clicked on the increase button."
                },
                "complexType": {
                    "original": "{ value: number; input?: boolean; decrease?: boolean; increase?: boolean }",
                    "resolved": "{ value: number; input?: boolean; decrease?: boolean; increase?: boolean; }",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "watchValue"
            }, {
                "propName": "counterid",
                "methodName": "handleId"
            }];
    }
}
