npm - @duetds/components - Versions diffs - 6.2.3 → 6.2.5 - Mend

@duetds/components 6.2.3 → 6.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (566) hide show

package/lib/collection/components/duet-choice-group/duet-choice-group.js CHANGED Viewed

@@ -1,56 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { Build, Component, Element, h, Host, Prop, Watch } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
 const duetChoiceSelector = ":scope duet-choice:not(:scope duet-choice duet-choice-group duet-choice):not(:scope duet-choice duet-fieldset duet-choice)";
 export class DuetChoiceGroup {
   constructor() {
     this.choiceGroupName = "duet-choice-group";
-    /**
-     * Direction of the choice group.
-     */
-    this.direction = "vertical";
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Theme of the choice group.
-     */
-    this.theme = "";
-    /**
-     * Display choice group in error state along with an error message.
-     */
-    this.error = "";
-    /**
-     * Legend displayed for the choice buttons in this group.
-     */
-    this.label = "Label";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Additional caption to show inside the label of the choice group.
-     */
-    this.caption = undefined;
-    /**
-     * Tooltip to display next to the label of the choice group.
-     */
-    this.tooltip = undefined;
-    /**
-     * With direction setting you can force the tooltip to always open towards left
-     * or right instead of automatically determining the direction.
-     */
-    this.tooltipDirection = "auto";
-    /**
-     * Enable or disable the automatic responsive behaviour of the choice group
-     * component when horizontal setting is used. Setting this option to "true"
-     * makes sure that contents are stacked vertically on mobile.
-     */
-    this.responsive = false;
     this.getChoices = () => {
       return Array.from(this.element.querySelectorAll(duetChoiceSelector));
     };
@@ -72,6 +29,19 @@ export class DuetChoiceGroup {
       // this group is a sub-group of another choice group.
       ev.cancelBubble = true;
     };
+    this.direction = "vertical";
+    this.margin = "auto";
+    this.theme = "";
+    this.error = "";
+    this.name = undefined;
+    this.label = "Label";
+    this.labelHidden = false;
+    this.caption = undefined;
+    this.tooltip = undefined;
+    this.tooltipDirection = "auto";
+    this.responsive = false;
+    this.value = undefined;
+    this.disabled = undefined;
   }
   /**
    * Component lifecycle events.
@@ -154,288 +124,292 @@ export class DuetChoiceGroup {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } },
-      h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme },
-        this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)),
-        h("div", { class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } },
-          h("slot", null)))));
+    return (h(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("div", { class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
   }
   static get is() { return "duet-choice-group"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-choice-group.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-choice-group.css"]
-  }; }
-  static get properties() { return {
-    "direction": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetDirection",
-        "resolved": "\"horizontal\" | \"vertical\"",
-        "references": {
-          "DuetDirection": {
-            "location": "import",
-            "path": "../../common-types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-choice-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-choice-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetDirection",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {
+            "DuetDirection": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction of the choice group."
+        },
+        "attribute": "direction",
+        "reflect": false,
+        "defaultValue": "\"vertical\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Direction of the choice group."
-      },
-      "attribute": "direction",
-      "reflect": false,
-      "defaultValue": "\"vertical\""
-    },
-    "margin": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetMargin",
-        "resolved": "\"auto\" | \"none\"",
-        "references": {
-          "DuetMargin": {
-            "location": "import",
-            "path": "../../common-types"
+      "margin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetMargin",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetMargin": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the margin of the component."
+        },
+        "attribute": "margin",
+        "reflect": false,
+        "defaultValue": "\"auto\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controls the margin of the component."
-      },
-      "attribute": "margin",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "theme": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetTheme",
-        "resolved": "\"\" | \"default\" | \"turva\"",
-        "references": {
-          "DuetTheme": {
-            "location": "import",
-            "path": "../../common-types"
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Theme of the choice group."
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "error": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the choice group."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Display choice group in error state along with an error message."
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display choice group in error state along with an error message."
+        },
+        "attribute": "error",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "attribute": "error",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name for the choice buttons within this group. **This must be unique amongst all other inputs.**"
+        },
+        "attribute": "name",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Name for the choice buttons within this group. **This must be unique amongst all other inputs.**"
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Legend displayed for the choice buttons in this group."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"Label\""
       },
-      "attribute": "name",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "labelHidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Visually hide the label, but still show it to screen readers."
+        },
+        "attribute": "label-hidden",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Legend displayed for the choice buttons in this group."
+      "caption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Additional caption to show inside the label of the choice group."
+        },
+        "attribute": "caption",
+        "reflect": false,
+        "defaultValue": "undefined"
       },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "\"Label\""
-    },
-    "labelHidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "tooltip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip to display next to the label of the choice group."
+        },
+        "attribute": "tooltip",
+        "reflect": false,
+        "defaultValue": "undefined"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Visually hide the label, but still show it to screen readers."
-      },
-      "attribute": "label-hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "caption": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Additional caption to show inside the label of the choice group."
-      },
-      "attribute": "caption",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "tooltip": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tooltip to display next to the label of the choice group."
-      },
-      "attribute": "tooltip",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "tooltipDirection": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetTooltipDirection",
-        "resolved": "\"auto\" | \"left\" | \"right\"",
-        "references": {
-          "DuetTooltipDirection": {
-            "location": "import",
-            "path": "../../common-types"
+      "tooltipDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetTooltipDirection",
+          "resolved": "\"auto\" | \"left\" | \"right\"",
+          "references": {
+            "DuetTooltipDirection": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
-      },
-      "attribute": "tooltip-direction",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "responsive": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
+        },
+        "attribute": "tooltip-direction",
+        "reflect": false,
+        "defaultValue": "\"auto\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enable or disable the automatic responsive behaviour of the choice group\ncomponent when horizontal setting is used. Setting this option to \"true\"\nmakes sure that contents are stacked vertically on mobile."
+      "responsive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable or disable the automatic responsive behaviour of the choice group\ncomponent when horizontal setting is used. Setting this option to \"true\"\nmakes sure that contents are stacked vertically on mobile."
+        },
+        "attribute": "responsive",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "responsive",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the selected choice button."
+        },
+        "attribute": "value",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value of the selected choice button."
-      },
-      "attribute": "value",
-      "reflect": true
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Determines, whether the control is disabled or not."
-      },
-      "attribute": "disabled",
-      "reflect": false
-    }
-  }; }
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determines, whether the control is disabled or not."
+        },
+        "attribute": "disabled",
+        "reflect": false
+      }
+    };
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "updateChoices"
-    }, {
-      "propName": "disabled",
-      "methodName": "updateChoices"
-    }, {
-      "propName": "name",
-      "methodName": "updateChoices"
-    }, {
-      "propName": "direction",
-      "methodName": "updateChoices"
-    }, {
-      "propName": "responsive",
-      "methodName": "updateChoices"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "updateChoices"
+      }, {
+        "propName": "disabled",
+        "methodName": "updateChoices"
+      }, {
+        "propName": "name",
+        "methodName": "updateChoices"
+      }, {
+        "propName": "direction",
+        "methodName": "updateChoices"
+      }, {
+        "propName": "responsive",
+        "methodName": "updateChoices"
+      }];
+  }
 }