@postnord/pn-marketweb-components 4.3.5 → 4.3.7

package/umd/modules/@postnord/web-components/esm/pn-counter.entry.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
 import { uuidv4, awaitTopbar, en } from './index.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>';
@@ -47,7 +47,7 @@ const pnCounterCss = () => `${transformTag("pn-counter")}{display:inline-block}$
 const PnCounter = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.counterInput = createEvent(this, "counterInput");
+        this.counterInput = createEvent(this, "counterInput", 7);
     }
     id = `pn-counter-${uuidv4()}`;
     idLabel = `${this.id}-label`;
@@ -60,42 +60,60 @@ const PnCounter = class {
     /** Prevent double events when reaching min/max values. */
     lastDispatchedValue;
     interactType;
-    /** Label for the counter */
+    /** Label for the counter. This is required for the counter to be 100% accessible out of the box. */
     label;
     /** Set a helpertext for the counter. */
     helpertext;
-    /** Set a predefined value */
+    /** Set the language manually for the built in translations.  */
+    language = undefined;
+    /** Set a predefined value. @category Native attributes */
     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 */
+    /** HTML input name. @category Native attributes */
     name;
-    /** Minimum value. @category HTML input */
+    /** Minimum value. @category Native attributes */
     min;
-    /** Maximum value. @category HTML input */
+    /** Maximum value. @category Native attributes */
     max;
-    /** Increase/decrease the value in steps, default is 1. @category HTML input */
+    /** Increase/decrease the value in steps, default is 1. @category Native attributes */
     step = 1;
-    /** Suggest values for the counter input. @category HTML input */
+    /** Suggest values for the counter input. @category Native attributes */
     list;
-    /** Set the counter as required. @category State */
+    /** Set the counter as required. @category Native attributes */
     required = false;
-    /** Set the counter as readonly. @category State */
+    /** Set the counter as readonly. @category Native attributes */
     readonly = false;
-    /** Set the counter as disabled. @category State */
+    /** Set the counter as disabled. @category Native attributes */
     disabled = false;
+    /** Use the compact label variant. @since v7.21.0 @category Features */
+    compact = false;
+    /** Text for the decrease button. Default is "Decrease". @category Features */
+    labelDecrease;
+    /** Text for the increase button. Default is "Increase". @category Features */
+    labelIncrease;
+    /** Hide the tooltips for the increase/decrease button. @since v7.25.0 @category Features */
+    hideTooltips = false;
+    /** 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 Features */
+    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 Features */
+    maxMessage;
+    /** Set a unique HTML ID for the counter. @since v7.25.0 @category HTML attributes */
+    pnId;
+    /**
+     * Provide the label via an aria attribute.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabel;
+    /**
+     * Provide the label from another element via its ID.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledby;
+    /** Set a unique HTML ID for the counter. @deprecated Use `pn-id` instead. @category HTML attributes */
+    counterid;
     /**
      * Instead of listening to multiple input, change and/or click events, we bundled them into one.
      * - `value` is the current counter value.
@@ -125,15 +143,16 @@ const PnCounter = class {
         this.lastDispatchedValue = this.value;
     }
     handleId() {
-        this.idLabel = `${this.counterid}-label`;
-        this.idText = `${this.counterid}-text`;
-        this.idAmount = `${this.counterid}-count`;
+        this.idLabel = `${this.getId()}-label`;
+        this.idText = `${this.getId()}-text`;
+        this.idAmount = `${this.getId()}-count`;
     }
     async componentWillLoad() {
-        this.handleId();
-        if (this.language)
-            return;
-        await awaitTopbar(this.hostElement);
+        if (this.language === undefined)
+            await awaitTopbar(this.hostElement);
+    }
+    getId() {
+        return this.pnId || this.counterid || this.id;
     }
     setVal(event) {
         const { valueAsNumber } = event.target;
@@ -156,6 +175,12 @@ const PnCounter = class {
     hasMax() {
         return typeof this.max === 'number';
     }
+    getAriaLabel() {
+        return !this.label && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    getAriaLabelledby() {
+        return !this.label && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
+    }
     decreaseAmount() {
         if (this.hasMin() && this.value <= this.min)
             this.showMinMaxMessage = true;
@@ -199,9 +224,13 @@ const PnCounter = class {
             return this.toggleMinMaxMessage();
         return showValue ? this.value.toString() : this.helpertext;
     }
+    hideHelpertext() {
+        const slotHelpertext = this.hostElement.querySelector('[slot="helpertext"]');
+        return !(this.getTextMessage() || !!slotHelpertext?.textContent);
+    }
     describedbyIds() {
         const list = [];
-        if (this.helpertext)
+        if (!this.hideHelpertext())
             list.push(this.idText);
         if (this.displaySrValue)
             list.push(this.idAmount);
@@ -216,16 +245,18 @@ const PnCounter = class {
         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)));
+        if (!this.label)
+            return null;
+        return (h("label", { htmlFor: this.getId(), 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()) }));
+        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: this.hideTooltips ? null : label, arialabel: this.hideTooltips ? label : null, 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) : ''))));
+        return (h(Host, { key: 'f1ff6cf51a77b28c5375f80c686106f82026eda8' }, h("div", { key: 'a6080106e0bf5ca0246e5a47a114c5ba967be4ef', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, !this.compact && this.renderLabel(), h("div", { key: 'ef3c419277ca2f2a2f8fe8cefad5633c893b4736', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, this.renderButton(), h("div", { key: 'c130e8c0d812eaad1cf794e9417ab62d3c12e1a7', class: "pn-counter-input" }, h("input", { key: '908746fc89d2d70fb6f26f0f13bbe99961d66222', id: this.getId(), 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-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "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)), h("p", { key: 'a25cd6e9abdb9fe8077e345cef828e187a11d260', id: this.idText, class: "pn-counter-helpertext", hidden: this.hideHelpertext() }, h("span", { key: '533d9836452f3b21a176eb594c225ad44c21956e' }, this.getTextMessage()), h("slot", { key: '35f10d13c8a1c65e6fc7b1a75b864e1cfd268837', name: "helpertext" })), h("p", { key: '1009ba0ea75131d6c19e3fb8960c39fc9d565d16', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
     }
     static get watchers() { return {
         "value": [{
@@ -233,6 +264,9 @@ const PnCounter = class {
             }],
         "counterid": [{
                 "handleId": 0
+            }],
+        "pnId": [{
+                "handleId": 1
             }]
     }; }
 };