@madgex/design-system 1.46.6 → 1.46.7

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "1.46.6",
+  "version": "1.46.7",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/inputs/multi-select/_template.njk

@@ -1,6 +1,14 @@
 {% from "../_label/_macro.njk" import MdsInputLabel %}
 {% from "../_message/_macro.njk" import MdsInputMessages %}
 
+{%- set iconPath -%}
+  {%- if defaultIconPath -%}
+    {{- defaultIconPath -}}
+  {%- else -%}
+    /assets/icons.svg
+  {%- endif -%}
+{%- endset -%}
+
 {% macro MdsMultiSelectCheckboxGroup(terms, name, nested = false) %}
   {% if terms and terms.length %}
     <div class="mds-multiselect__checkbox-group{% if nested %} mds-multiselect__checkbox-group--nested{% endif %}">
@@ -37,7 +45,7 @@
     </div>
   
     {# Leave the custom element at the bottom so it has access to the above elements on render #}
-    <mds-multiselect name="{{params.name}}" labeltext="{{ params.labelText }}" optional="{{params.optional}}"></mds-multiselect>
+    <mds-multiselect name="{{params.name}}" labeltext="{{ params.labelText }}" optional="{{params.optional}}" iconpath="{{iconPath}}"></mds-multiselect>
   </fieldset>
 </div>
 

package/src/components/inputs/multi-select/vue-components/MultiSelect.vue

@@ -25,6 +25,15 @@ export default {
       type: Array,
       default: () => [],
     },
+    iconpath: {
+      type: String,
+      default: '/assets/icons.svg',
+    },
+  },
+  provide() {
+    return {
+      iconPath: this.iconpath,
+    };
   },
   data() {
     return {

package/src/components/inputs/multi-select/vue-components/MultiSelectCheckbox.vue

@@ -4,7 +4,7 @@
 <template>
   <div class="mds-multiselect__checkbox" :data-multiselect-id="`${name}-checkbox`">
     <input type="checkbox" :name="name" :id="id" :value="value" v-model="isChecked" /><!--
-    --><label :for="id">{{ label }}</label
+    --><label :for="id" @click="toggleChecked">{{ label }}</label
     ><!--
     --><button
       type="button"
@@ -24,7 +24,7 @@
         class="mds-icon mds-icon--chevron-right mds-icon--after mds-icon--sm mds-animate-transform-fast"
         :class="isShowing ? ' mds-rotate-cw-90' : ''"
       >
-        <use href="/assets/icons.svg#chevron-right" />
+        <use :href="`${iconPath}#chevron-right`" />
       </svg>
     </button>
     <slot name="children" :expanded="isShowing" />
@@ -60,6 +60,7 @@ export default {
       default: false,
     },
   },
+  inject: ['iconPath'],
   data() {
     return {
       isShowing: false,
@@ -81,6 +82,9 @@ export default {
     toggleExpansion() {
       this.isShowing = !this.isShowing;
     },
+    toggleChecked() {
+      this.isChecked = !this.isChecked;
+    },
   },
 };
 </script>