/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

var index = require('./index-CfUQZtlH.js');
var index$1 = require('./index.cjs.js');

const icon$1 = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2 12a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1" clip-rule="evenodd"/></svg>';
const minus = icon$1;

const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 2a1 1 0 0 1 1 1v8h8a1 1 0 1 1 0 2h-8v8a1 1 0 1 1-2 0v-8H3a1 1 0 1 1 0-2h8V3a1 1 0 0 1 1-1" clip-rule="evenodd"/></svg>';
const plus = icon;

const translations = {
    DECREASE: {
        en: 'Decrease',
        sv: 'Minska',
        da: 'Reducere',
        fi: 'Vähentää',
        no: 'Redusere',
    },
    INCREASE: {
        en: 'Increase',
        sv: 'Öka',
        da: 'Øge',
        fi: 'Lisääntyä',
        no: 'Øke',
    },
    MAX_VALUE_MESSAGE: {
        en: 'Maximum value is ',
        sv: 'Högsta värde är ',
        da: 'Højeste værdi er',
        fi: 'Korkein arvo on',
        no: 'Høyeste verdi er',
    },
    MIN_VALUE_MESSAGE: {
        en: 'Minimum value is ',
        sv: 'Lägsta värde är ',
        da: 'Laveste værdi er ',
        fi: 'Pienin arvo on ',
        no: 'Laveste verdi er ',
    },
};

const pnCounterCss = () => `${index.transformTag("pn-counter")}{display:inline-block}${index.transformTag("pn-counter")} .pn-counter{display:flex;flex-direction:column}${index.transformTag("pn-counter")} .pn-counter-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-counter")} .pn-counter-label{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-counter")} .pn-counter-label[data-compact]{position:absolute;top:1.5625em;left:calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);margin:0;pointer-events:none;align-items:center;height:1.5em;max-width:calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));transform:translateY(-50%) scale(1) translateZ(0);transform-origin:0 0;transition-delay:0.2s}${index.transformTag("pn-counter")} .pn-counter-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${index.transformTag("pn-counter")} .pn-counter-label>span{font-size:0.875em}${index.transformTag("pn-counter")} .pn-counter-input{position:relative;flex:1 1 auto}${index.transformTag("pn-counter")} .pn-counter-element{text-align:center;width:100%;appearance:textfield;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-counter")} .pn-counter-element:-webkit-autofill,${index.transformTag("pn-counter")} .pn-counter-element:-webkit-autofill:hover,${index.transformTag("pn-counter")} .pn-counter-element:-webkit-autofill:focus,${index.transformTag("pn-counter")} .pn-counter-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-counter")} .pn-counter-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-counter")} .pn-counter-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${index.transformTag("pn-counter")} .pn-counter-element{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-counter")} .pn-counter-element{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-counter")} .pn-counter-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${index.transformTag("pn-counter")} .pn-counter-element[data-compact]::placeholder{color:transparent}${index.transformTag("pn-counter")} .pn-counter-element[data-compact]:focus+.pn-counter-label,${index.transformTag("pn-counter")} .pn-counter-element[data-compact]:not(:placeholder-shown)+.pn-counter-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${index.transformTag("pn-counter")} .pn-counter-element::placeholder{color:#5e554a;font-weight:normal}${index.transformTag("pn-counter")} .pn-counter-element:hover{border-color:#005d92}${index.transformTag("pn-counter")} .pn-counter-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-counter")} .pn-counter-element:read-only{border-color:#ffffff}${index.transformTag("pn-counter")} .pn-counter-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-counter")} .pn-counter-element:out-of-range{border-color:#a70707}${index.transformTag("pn-counter")} .pn-counter-element:out-of-range:hover{border-color:#500715}${index.transformTag("pn-counter")} .pn-counter-element:out-of-range:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${index.transformTag("pn-counter")} .pn-counter-element:out-of-range:-webkit-autofill,${index.transformTag("pn-counter")} .pn-counter-element:out-of-range:-webkit-autofill:hover,${index.transformTag("pn-counter")} .pn-counter-element:out-of-range:-webkit-autofill:focus,${index.transformTag("pn-counter")} .pn-counter-element:out-of-range:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-counter")} .pn-counter-element::-webkit-inner-spin-button,${index.transformTag("pn-counter")} .pn-counter-element::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}${index.transformTag("pn-counter")} .pn-counter-items{display:inline-flex;flex-direction:row;gap:0.5em;transition-property:gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-counter")} .pn-counter-items{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-counter")} .pn-counter-items[data-hidebuttons]{gap:0}${index.transformTag("pn-counter")} .pn-counter-items[data-hidebuttons]>${index.transformTag("pn-button")}{transform:scale(0) translateZ(0);width:0}${index.transformTag("pn-counter")} .pn-counter-items>${index.transformTag("pn-button")}{transform:scale(1) translateZ(0);transform-origin:center center;width:3em;will-change:width, transform;transition-property:transform, width;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-counter")} .pn-counter-items>${index.transformTag("pn-button")}{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-counter")} .pn-counter-helpertext{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${index.transformTag("pn-counter")} .pn-counter-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}`;

const PnCounter = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.counterInput = index.createEvent(this, "counterInput");
    }
    id = `pn-counter-${index$1.uuidv4()}`;
    idLabel = `${this.id}-label`;
    idText = `${this.id}-text`;
    idAmount = `${this.id}-count`;
    get hostElement() { return index.getElement(this); }
    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 index$1.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 || index$1.en];
    }
    noButtons() {
        return this.disabled || this.readonly;
    }
    renderLabel() {
        return (index.h("label", { htmlFor: this.counterid, class: "pn-counter-label", id: this.idLabel, "data-compact": this.compact }, index.h("span", null, this.label)));
    }
    renderButton(increase = false) {
        const label = increase
            ? this.labelIncrease || this.translate('INCREASE')
            : this.labelDecrease || this.translate('DECREASE');
        return (index.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 (index.h(index.Host, { key: '8f8a1d6f9cf41e43a17146796bdbadfabb5421da' }, index.h("div", { key: '1de06de8544eeb0efcdd940da16fd7cb39620897', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, !this.compact && this.renderLabel(), index.h("div", { key: '83280bb5e207a2a226e7174f5819ef0f375f06c6', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, this.renderButton(), index.h("div", { key: '6f3cc4e8987d526be974bd561f2e3413e83cc35f', class: "pn-counter-input" }, index.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() && (index.h("p", { key: 'cb64255f574b4d9fc7ba0098d9f7353c5c639956', id: this.idText, class: "pn-counter-helpertext" }, index.h("span", { key: '76a5d077b53f2a60c1d39f42b34e8312ae250d86' }, this.getTextMessage()))), index.h("p", { key: '37d61e40910bb4cd0cc072772c3dd5414fe31574', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
    }
    static get watchers() { return {
        "value": [{
                "watchValue": 0
            }],
        "counterid": [{
                "handleId": 0
            }]
    }; }
};
PnCounter.style = pnCounterCss();

exports.pn_counter = PnCounter;
