@postnord/pn-marketweb-components 4.3.5 → 4.3.7

package/umd/modules/@postnord/web-components/collection/components/input/pn-choice-chip/pn-choice-chip.js

@@ -12,32 +12,52 @@ import { check } from "pn-design-assets/pn-assets/icons.js";
  * @nativeChange Use the `change` event to listen when the choice chip state is being toggled. Works for both checkbox/radio variant.
  */
 export class PnChoiceChip {
+    id = `pn-choice-chip-${uuidv4()}`;
     hostElement;
-    moving = false;
-    /** The choice chip label */
+    /** The choice chip label. This is required for the component to be accessible. */
     label;
-    /** This will be emitted on change and input */
+    /** This will be emitted on change and input. @category Native attributes */
     value;
-    /** The name of the checkbox group */
+    /** The name of the checkbox group. This is required if you use the `radio` prop. @category Native attributes */
     name;
-    /** Precheck the choice chip */
+    /** Programatically check the input. @category Native attributes */
     checked = false;
-    /** Make the choice chip a radio */
-    radio = false;
-    /** A unique HTML id */
-    choiceid = `pn-choice-chip-${uuidv4()}`;
-    /** Include an icon */
-    icon;
-    /** Set the choice chip as required. @category State */
+    /** Set the input as required. @category Native attributes */
     required = false;
-    /** Disable the choice chip. @category State */
+    /** Disable the input. @category Native attributes */
     disabled = false;
-    /** Set the size to small. @category Size */
+    /**
+     * Make the choice chip a radio input. By default, it behaves as a checkbox.
+     * You must assign a `name` for the radio to work.
+     *  @category Features
+     */
+    radio = false;
+    /** Add an icon to the choice chip. @category Features */
+    icon;
+    /** Use the small size for the choice chip. @category Features */
     small = false;
-    /** Set the size to large. @category Size */
+    /** Use the large size for the choice chip. @category Features*/
     large = false;
+    /**
+     * A unique HTML ID for the choice chip
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnId;
+    /**
+     * A unique HTML ID for the choice chip.
+     * @deprecated Use the `pn-id` prop instead.
+     * @category HTML attributes
+     */
+    choiceid;
+    inputType() {
+        return this.radio ? 'radio' : 'checkbox';
+    }
+    getId() {
+        return this.pnId || this.choiceid || this.id;
+    }
     render() {
-        return (h(Host, { key: '8d5686163aba07794c4700e91a9d378200aa2bf9' }, h("div", { key: '233605ae9b531853d9f941f99cc0cf6fcce21bba', class: "pn-choice-chip" }, h("input", { key: 'aacdd59b76f20029234722e49ab5b2aa27198206', type: this.radio ? 'radio' : 'checkbox', id: this.choiceid, value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), h("div", { key: '69a287ffabea602b28360dc5a15d979dcb3d6526', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, h("div", { key: 'c2d89b6817b623264e903aed26947d8a422a1ee2', class: "pn-choice-chip-icon" }, h("pn-icon", { key: 'd405b85cec9b30f85a5949862dec48cdacc618de', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && h("pn-icon", { key: '4a23075f0cfb6c6f3e7fbf49c5de06137c1bc961', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), h("label", { key: 'af080ab55ce96b7d0bc3e0c168130bd772302d52', class: "pn-choice-chip-label", htmlFor: this.choiceid }, h("span", { key: '2ed2b62f84c1e2c85ace67151bd1997bcc762027' }, this.label), h("slot", { key: '3512fdee318749598e66d096ec56a66e3daa564a' }))))));
+        return (h(Host, { key: '34b4a84a6fa6ebd0c592a4d585d333084e72c89f' }, h("div", { key: '66c7aa91b09795d9d452b1d6c0b65f0b64ba25f9', class: "pn-choice-chip" }, h("input", { key: '8723fd54d3ff2fed1a64c955ab3ea2e4812ff04f', type: this.inputType(), id: this.getId(), value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), h("div", { key: '9fd84d08b519181f954c3b62b1644afab67569ad', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, h("div", { key: '29b394a6806acbd2d9f905971555242f8bf81d32', class: "pn-choice-chip-icon" }, h("pn-icon", { key: '22031f1693f50efa6b9e049c643e9ecbc931bea6', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && h("pn-icon", { key: '573e411940efa3054290a5cb574978dddddfb766', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), h("label", { key: 'c0deb7c6cd33da32bc4b89af84d04a7383664024', class: "pn-choice-chip-label", htmlFor: this.getId() }, h("span", { key: 'ea43103d3f3d2332a52e9191ff37262bce642dbb' }, this.label), h("slot", { key: '904ac98a84bd191e74323154b7ea6de39dca964a' }))))));
     }
     static get is() { return "pn-choice-chip"; }
     static get originalStyleUrls() {
@@ -64,7 +84,7 @@ export class PnChoiceChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The choice chip label"
+                    "text": "The choice chip label. This is required for the component to be accessible."
                 },
                 "getter": false,
                 "setter": false,
@@ -82,8 +102,11 @@ export class PnChoiceChip {
                 "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "This will be emitted on change and input"
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "This will be emitted on change and input."
                 },
                 "getter": false,
                 "setter": false,
@@ -101,8 +124,11 @@ export class PnChoiceChip {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The name of the checkbox group"
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "The name of the checkbox group. This is required if you use the `radio` prop."
                 },
                 "getter": false,
                 "setter": false,
@@ -120,8 +146,11 @@ export class PnChoiceChip {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Precheck the choice chip"
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Programatically check the input."
                 },
                 "getter": false,
                 "setter": false,
@@ -129,7 +158,7 @@ export class PnChoiceChip {
                 "attribute": "checked",
                 "defaultValue": "false"
             },
-            "radio": {
+            "required": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -140,34 +169,63 @@ export class PnChoiceChip {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Make the choice chip a radio"
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Set the input as required."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "radio",
+                "attribute": "required",
                 "defaultValue": "false"
             },
-            "choiceid": {
-                "type": "string",
+            "disabled": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "A unique HTML id"
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Disable the input."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "choiceid",
-                "defaultValue": "`pn-choice-chip-${uuidv4()}`"
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "radio": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "category",
+                            "text": "Features"
+                        }],
+                    "text": "Make the choice chip a radio input. By default, it behaves as a checkbox.\nYou must assign a `name` for the radio to work."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "radio",
+                "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
@@ -180,15 +238,18 @@ export class PnChoiceChip {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Include an icon"
+                    "tags": [{
+                            "name": "category",
+                            "text": "Features"
+                        }],
+                    "text": "Add an icon to the choice chip."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "icon"
             },
-            "required": {
+            "small": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -201,17 +262,17 @@ export class PnChoiceChip {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "State"
+                            "text": "Features"
                         }],
-                    "text": "Set the choice chip as required."
+                    "text": "Use the small size for the choice chip."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "required",
+                "attribute": "small",
                 "defaultValue": "false"
             },
-            "disabled": {
+            "large": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -224,68 +285,67 @@ export class PnChoiceChip {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "State"
+                            "text": "Features"
                         }],
-                    "text": "Disable the choice chip."
+                    "text": "Use the large size for the choice chip."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
+                "attribute": "large",
                 "defaultValue": "false"
             },
-            "small": {
-                "type": "boolean",
+            "pnId": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
                             "name": "category",
-                            "text": "Size"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Set the size to small."
+                    "text": "A unique HTML ID for the choice chip"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "small",
-                "defaultValue": "false"
+                "attribute": "pn-id"
             },
-            "large": {
-                "type": "boolean",
+            "choiceid": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
+                            "name": "deprecated",
+                            "text": "Use the `pn-id` prop instead."
+                        }, {
                             "name": "category",
-                            "text": "Size"
+                            "text": "HTML attributes"
                         }],
-                    "text": "Set the size to large."
+                    "text": "A unique HTML ID for the choice chip."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "large",
-                "defaultValue": "false"
+                "attribute": "choiceid"
             }
         };
     }
-    static get states() {
-        return {
-            "moving": {}
-        };
-    }
     static get elementRef() { return "hostElement"; }
 }