@3t-transform/threeteeui 1.9.102 → 1.9.103

package/dist/collection/components/molecules/tttx-multiselect-box/tttx-multiselect-box.stories.js

@@ -1,34 +1,34 @@
-import { withActions } from '@storybook/addon-actions/decorator';
-export default {
-  title: 'molecules/Multiselect Box',
-  component: 'tttx-multiselect-box',
-  parameters: {
-    actions: {
-      handles: ['searchDataChanged', 'toggleOpen', 'changesApplied'],
-    },
-  },
-  decorators: [withActions],
-};
-const options = [
-  { value: 'Bonnie', label: 'Steuber', selected: true },
-  { value: 'Priscilla', label: 'Lowe' },
-  { value: 'Andy', label: 'Thompson-Keebler', html: '<span style="color: red">Thompson-Keebler</span>' },
-  { value: 'egg', label: 'egg', html: '<tttx-icon_localcomponent icon="egg" />' },
-  { value: 'Terence', label: 'Hyatt' },
-  { value: 'Ruben', label: 'Toy' },
-  { value: 'Rhiannon', label: 'Hills' },
-  { value: 'Trent', label: 'Mueller' },
-  { value: 'Penelope', label: 'Mann' },
-  { value: 'Oswaldo', label: 'Klocko' },
-  { value: 'Jorge', label: 'Lockman' },
-  { value: 'Conner', label: 'Feeney' },
-  { value: 'Dorian', label: 'Fay' },
-  { value: 'Estrella', label: 'Predovic' },
-  { value: 'Heidi', label: 'McClure' },
-  { value: 'Ronaldo', label: 'Mann' },
-];
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'molecules/Multiselect Box',
+  component: 'tttx-multiselect-box',
+  parameters: {
+    actions: {
+      handles: ['searchDataChanged', 'toggleOpen', 'changesApplied'],
+    },
+  },
+  decorators: [withActions],
+};
+const options = [
+  { value: 'Bonnie', label: 'Steuber', selected: true },
+  { value: 'Priscilla', label: 'Lowe' },
+  { value: 'Andy', label: 'Thompson-Keebler', html: '<span style="color: red">Thompson-Keebler</span>' },
+  { value: 'egg', label: 'egg', html: '<tttx-icon_1_9_103 icon="egg" />' },
+  { value: 'Terence', label: 'Hyatt' },
+  { value: 'Ruben', label: 'Toy' },
+  { value: 'Rhiannon', label: 'Hills' },
+  { value: 'Trent', label: 'Mueller' },
+  { value: 'Penelope', label: 'Mann' },
+  { value: 'Oswaldo', label: 'Klocko' },
+  { value: 'Jorge', label: 'Lockman' },
+  { value: 'Conner', label: 'Feeney' },
+  { value: 'Dorian', label: 'Fay' },
+  { value: 'Estrella', label: 'Predovic' },
+  { value: 'Heidi', label: 'McClure' },
+  { value: 'Ronaldo', label: 'Mann' },
+];
 const TemplateMultiselectBox = args => `
-    <tttx-multiselect-box_localcomponent
+    <tttx-multiselect-box_1_9_103
         id="multiselectBox"
         options-data='${JSON.stringify(args.optionsData)}'
         label='${args.label}'
@@ -38,7 +38,7 @@ const TemplateMultiselectBox = args => `
         is-loading='${args.isLoading}'
         stop-local-search='${args.stopLocalSearch}'
         html-visible-value: true,
-    ></tttx-multiselect-box_localcomponent>
+    ></tttx-multiselect-box_1_9_103>
 
     <script>
       // Handle case where storybook renders this story twice
@@ -49,19 +49,19 @@ const TemplateMultiselectBox = args => `
         })
       }
     </script>
-`;
-export const BasicMultiselectBox = TemplateMultiselectBox.bind({});
-BasicMultiselectBox.args = {
-  optionsData: options,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  searchEnabled: true,
-  inline: false,
-  isLoading: true,
-  stopLocalSearch: true
-};
+`;
+export const BasicMultiselectBox = TemplateMultiselectBox.bind({});
+BasicMultiselectBox.args = {
+  optionsData: options,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  searchEnabled: true,
+  inline: false,
+  isLoading: true,
+  stopLocalSearch: true
+};
 const ReadOnlyMultiselectBoxTemplate = args => `
-    <tttx-multiselect-box_localcomponent
+    <tttx-multiselect-box_1_9_103
         id="multiselectBox"
         options-data='${JSON.stringify(args.optionsData)}'
         label='${args.label}'
@@ -72,7 +72,7 @@ const ReadOnlyMultiselectBoxTemplate = args => `
         stop-local-search='${args.stopLocalSearch}'
         read-only='${args.readOnly}'
         visible-value='${options[0].label}'
-    ></tttx-multiselect-box_localcomponent>
+    ></tttx-multiselect-box_1_9_103>
 
     <script>
       // Handle case where storybook renders this story twice
@@ -83,33 +83,33 @@ const ReadOnlyMultiselectBoxTemplate = args => `
         })
       }
     </script>
-`;
-export const ReadOnlyMultiselectBox = ReadOnlyMultiselectBoxTemplate.bind({});
-ReadOnlyMultiselectBox.args = {
-  optionsData: options,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  searchEnabled: true,
-  inline: false,
-  isLoading: true,
-  stopLocalSearch: true,
-  readOnly: true
-};
-const htmlOptions = [
-  { value: '1', label: 'Client', html: '<tttx-tag_localcomponent text="Client" color="#f2bebe"></tttx-tag_localcomponent>', selected: true },
-  { value: '2', label: 'Job Role', html: '<tttx-tag_localcomponent text="Job Role" color="#f9e1be"></tttx-tag_localcomponent>' },
-  { value: '3', label: 'Foo', html: '<tttx-tag_localcomponent text="Foo" color="#e4ebc9"></tttx-tag_localcomponent>', selected: true },
-  { value: '4', label: 'Bar', html: '<tttx-tag_localcomponent text="Bar" color="#f2bebe"></tttx-tag_localcomponent>', selected: true },
-  { value: '5', label: 'Baz', html: '<tttx-tag_localcomponent text="Baz" color="#f9e1be"></tttx-tag_localcomponent>' },
-  { value: '6', label: 'Mill', html: '<tttx-tag_localcomponent text="Mill" color="#e4ebc9"></tttx-tag_localcomponent>', selected: true },
-  { value: '7', label: 'Hill', html: '<tttx-tag_localcomponent text="Hill" color="#f2bebe"></tttx-tag_localcomponent>', selected: true },
-  { value: '8', label: 'Fill', html: '<tttx-tag_localcomponent text="Fill" color="#f9e1be"></tttx-tag_localcomponent>' },
-  { value: '9', label: 'Supercalifragilisticexpialidocious', html: '<tttx-tag_localcomponent text="Supercalifragilisticexpialidocious" color="#e4ebc9"></tttx-tag_localcomponent>', selected: true },
-];
+`;
+export const ReadOnlyMultiselectBox = ReadOnlyMultiselectBoxTemplate.bind({});
+ReadOnlyMultiselectBox.args = {
+  optionsData: options,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  searchEnabled: true,
+  inline: false,
+  isLoading: true,
+  stopLocalSearch: true,
+  readOnly: true
+};
+const htmlOptions = [
+  { value: '1', label: 'Client', html: '<tttx-tag_1_9_103 text="Client" color="#f2bebe"></tttx-tag_1_9_103>', selected: true },
+  { value: '2', label: 'Job Role', html: '<tttx-tag_1_9_103 text="Job Role" color="#f9e1be"></tttx-tag_1_9_103>' },
+  { value: '3', label: 'Foo', html: '<tttx-tag_1_9_103 text="Foo" color="#e4ebc9"></tttx-tag_1_9_103>', selected: true },
+  { value: '4', label: 'Bar', html: '<tttx-tag_1_9_103 text="Bar" color="#f2bebe"></tttx-tag_1_9_103>', selected: true },
+  { value: '5', label: 'Baz', html: '<tttx-tag_1_9_103 text="Baz" color="#f9e1be"></tttx-tag_1_9_103>' },
+  { value: '6', label: 'Mill', html: '<tttx-tag_1_9_103 text="Mill" color="#e4ebc9"></tttx-tag_1_9_103>', selected: true },
+  { value: '7', label: 'Hill', html: '<tttx-tag_1_9_103 text="Hill" color="#f2bebe"></tttx-tag_1_9_103>', selected: true },
+  { value: '8', label: 'Fill', html: '<tttx-tag_1_9_103 text="Fill" color="#f9e1be"></tttx-tag_1_9_103>' },
+  { value: '9', label: 'Supercalifragilisticexpialidocious', html: '<tttx-tag_1_9_103 text="Supercalifragilisticexpialidocious" color="#e4ebc9"></tttx-tag_1_9_103>', selected: true },
+];
 const TemplateHtmlVisibleValueWrap = args => `
     <div style="height: 400px; width: 50px"></div>
     <div style="width: 300px">
-      <tttx-multiselect-box_localcomponent
+      <tttx-multiselect-box_1_9_103
           id="multiselectBoxVisibleValueWrap"
           options-data='${JSON.stringify(args.optionsData)}'
           label='${args.label}'
@@ -117,8 +117,8 @@ const TemplateHtmlVisibleValueWrap = args => `
           search-enabled='${args.searchEnabled}'
           inline='${args.inline}'
           html-visible-value='true'
-          visible-value='<tttx-tag_localcomponent text="Client" color="#f2bebe"></tttx-tag_localcomponent><tttx-tag_localcomponent text="Foo" color="#e4ebc9"></tttx-tag_localcomponent><tttx-tag_localcomponent text="Bar" color="#f2bebe"></tttx-tag_localcomponent><tttx-tag_localcomponent text="Mill" color="#e4ebc9"></tttx-tag_localcomponent><tttx-tag_localcomponent text="Hill" color="#f2bebe"></tttx-tag_localcomponent><tttx-tag_localcomponent text="Supercalifragilisticexpialidocious" color="#e4ebc9"></tttx-tag_localcomponent>'
-      ></tttx-multiselect-box_localcomponent>
+          visible-value='<tttx-tag_1_9_103 text="Client" color="#f2bebe"></tttx-tag_1_9_103><tttx-tag_1_9_103 text="Foo" color="#e4ebc9"></tttx-tag_1_9_103><tttx-tag_1_9_103 text="Bar" color="#f2bebe"></tttx-tag_1_9_103><tttx-tag_1_9_103 text="Mill" color="#e4ebc9"></tttx-tag_1_9_103><tttx-tag_1_9_103 text="Hill" color="#f2bebe"></tttx-tag_1_9_103><tttx-tag_1_9_103 text="Supercalifragilisticexpialidocious" color="#e4ebc9"></tttx-tag_1_9_103>'
+      ></tttx-multiselect-box_1_9_103>
     </div>
 
     <script>
@@ -130,22 +130,22 @@ const TemplateHtmlVisibleValueWrap = args => `
         })
       }
   </script>
-`;
-export const HtmlVisibleValueWrap = TemplateHtmlVisibleValueWrap.bind({});
-HtmlVisibleValueWrap.args = {
-  optionsData: htmlOptions,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  searchEnabled: true,
-  inline: false,
-};
-const htmlOptionsShort = [
-  { value: '1', label: 'Client', html: '<tttx-tag_localcomponent text="Client" color="#f2bebe"></tttx-tag_localcomponent>', selected: true },
-  { value: '2', label: 'Job Role', html: '<tttx-tag_localcomponent text="Job Role" color="#f9e1be"></tttx-tag_localcomponent>' },
-  { value: '3', label: 'Foo', html: '<tttx-tag_localcomponent text="Foo" color="#e4ebc9"></tttx-tag_localcomponent>', selected: true },
-];
+`;
+export const HtmlVisibleValueWrap = TemplateHtmlVisibleValueWrap.bind({});
+HtmlVisibleValueWrap.args = {
+  optionsData: htmlOptions,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  searchEnabled: true,
+  inline: false,
+};
+const htmlOptionsShort = [
+  { value: '1', label: 'Client', html: '<tttx-tag_1_9_103 text="Client" color="#f2bebe"></tttx-tag_1_9_103>', selected: true },
+  { value: '2', label: 'Job Role', html: '<tttx-tag_1_9_103 text="Job Role" color="#f9e1be"></tttx-tag_1_9_103>' },
+  { value: '3', label: 'Foo', html: '<tttx-tag_1_9_103 text="Foo" color="#e4ebc9"></tttx-tag_1_9_103>', selected: true },
+];
 const TemplateHtmlVisibleValue = args => `
-    <tttx-multiselect-box_localcomponent
+    <tttx-multiselect-box_1_9_103
         id="multiselectBox"
         options-data='${JSON.stringify(args.optionsData)}'
         label='${args.label}'
@@ -153,7 +153,7 @@ const TemplateHtmlVisibleValue = args => `
         search-enabled='${args.searchEnabled}'
         inline='${args.inline}'
         html-visible-value='true'
-    ></tttx-multiselect-box_localcomponent>
+    ></tttx-multiselect-box_1_9_103>
 
     <script>
       // Handle case where storybook renders this story twice
@@ -164,32 +164,32 @@ const TemplateHtmlVisibleValue = args => `
         })
       }
   </script>
-`;
-export const HtmlVisibleValue = TemplateHtmlVisibleValue.bind({});
-HtmlVisibleValue.args = {
-  optionsData: htmlOptionsShort,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  searchEnabled: true,
-  inline: false,
-};
-const tagOptions = [
-  { value: '1', label: 'Client', html: '<tttx-tag_localcomponent text="Client" color="#f2bebe"></tttx-tag_localcomponent>', selected: true },
-  { value: '2', label: 'Job Role', html: '<tttx-tag_localcomponent text="Job Role" color="#f9e1be"></tttx-tag_localcomponent>' },
-  { value: '3', label: 'Foo', html: '<tttx-tag_localcomponent text="Foo" color="#e4ebc9"></tttx-tag_localcomponent>', selected: true },
-  { value: '4', label: 'Bar', html: '<tttx-tag_localcomponent text="Bar" color="#f2bebe"></tttx-tag_localcomponent>', selected: true },
-  { value: '5', label: 'Baz', html: '<tttx-tag_localcomponent text="Baz" color="#f9e1be"></tttx-tag_localcomponent>' },
-  { value: '6', label: 'Mill', html: '<tttx-tag_localcomponent text="Mill" color="#e4ebc9"></tttx-tag_localcomponent>', selected: true },
-  { value: '7', label: 'Hill', html: '<tttx-tag_localcomponent text="Hill" color="#f2bebe"></tttx-tag_localcomponent>', selected: true },
-  { value: '8', label: 'Fill', html: '<tttx-tag_localcomponent text="Fill" color="#f9e1be"></tttx-tag_localcomponent>' },
-  { value: '9', label: 'Supercalifragilisticexpialidocious', html: '<tttx-tag_localcomponent text="Supercalifragilisticexpialidocious" color="#e4ebc9"></tttx-tag_localcomponent>', selected: true },
-];
+`;
+export const HtmlVisibleValue = TemplateHtmlVisibleValue.bind({});
+HtmlVisibleValue.args = {
+  optionsData: htmlOptionsShort,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  searchEnabled: true,
+  inline: false,
+};
+const tagOptions = [
+  { value: '1', label: 'Client', html: '<tttx-tag_1_9_103 text="Client" color="#f2bebe"></tttx-tag_1_9_103>', selected: true },
+  { value: '2', label: 'Job Role', html: '<tttx-tag_1_9_103 text="Job Role" color="#f9e1be"></tttx-tag_1_9_103>' },
+  { value: '3', label: 'Foo', html: '<tttx-tag_1_9_103 text="Foo" color="#e4ebc9"></tttx-tag_1_9_103>', selected: true },
+  { value: '4', label: 'Bar', html: '<tttx-tag_1_9_103 text="Bar" color="#f2bebe"></tttx-tag_1_9_103>', selected: true },
+  { value: '5', label: 'Baz', html: '<tttx-tag_1_9_103 text="Baz" color="#f9e1be"></tttx-tag_1_9_103>' },
+  { value: '6', label: 'Mill', html: '<tttx-tag_1_9_103 text="Mill" color="#e4ebc9"></tttx-tag_1_9_103>', selected: true },
+  { value: '7', label: 'Hill', html: '<tttx-tag_1_9_103 text="Hill" color="#f2bebe"></tttx-tag_1_9_103>', selected: true },
+  { value: '8', label: 'Fill', html: '<tttx-tag_1_9_103 text="Fill" color="#f9e1be"></tttx-tag_1_9_103>' },
+  { value: '9', label: 'Supercalifragilisticexpialidocious', html: '<tttx-tag_1_9_103 text="Supercalifragilisticexpialidocious" color="#e4ebc9"></tttx-tag_1_9_103>', selected: true },
+];
 const TttxDialogBoxStory = ({ data }) => `
   <button onclick="openDialog()">Open</button>
-  <tttx-dialog-box_localcomponent
+  <tttx-dialog-box_1_9_103
     id='dialogBox'
     allow-overflow='true'
-  ></tttx-dialog-box_localcomponent>
+  ></tttx-dialog-box_1_9_103>
   <script>
     if(!dialogBox) {
       const dialogBox = document.getElementById('dialogBox');
@@ -203,20 +203,20 @@ const TttxDialogBoxStory = ({ data }) => `
 
     dialogBox.data = ${JSON.stringify(data)};
   </script>
-`;
-export const DialogBoxWithDropdown = TttxDialogBoxStory.bind({});
-DialogBoxWithDropdown.args = {
-  data: {
-    header: {
-      title: 'Dialog Title',
-      hasIcon: false,
-      hasClose: true,
-    },
-    body: {
-      isCustomHtml: true,
+`;
+export const DialogBoxWithDropdown = TttxDialogBoxStory.bind({});
+DialogBoxWithDropdown.args = {
+  data: {
+    header: {
+      title: 'Dialog Title',
+      hasIcon: false,
+      hasClose: true,
+    },
+    body: {
+      isCustomHtml: true,
       customHtml: `
               <div style="padding: 5px;">
-                <tttx-multiselect-box_localcomponent
+                <tttx-multiselect-box_1_9_103
                   id="dropdownSelectBox"
                   options-data='${JSON.stringify(tagOptions)}'
                   label='Label'
@@ -225,27 +225,27 @@ DialogBoxWithDropdown.args = {
                   inline='${false}'
                   visible-value='${tagOptions[0].html} ${tagOptions[2].html}'
                   html-visible-value='true'
-                ></tttx-multiselect-box_localcomponent>
+                ></tttx-multiselect-box_1_9_103>
               </div>
-            `,
-    },
-    footer: {
-      buttons: [
-        { name: 'primary', type: 'primary' },
-        { name: 'default', type: 'default' },
-        { name: 'No border', type: 'borderless' },
-      ],
-    },
-  },
-};
-const priorityMultiSelectOptions = [
-  { value: '1', label: 'Triss Merigold', prioritise: true },
-  { value: '2', label: 'Yennefer of Vengerberg', prioritise: true },
-  { value: '3', label: 'Philippa Eilhart' },
-  { value: '4', label: 'Keira Metz' }
-];
+            `,
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};
+const priorityMultiSelectOptions = [
+  { value: '1', label: 'Triss Merigold', prioritise: true },
+  { value: '2', label: 'Yennefer of Vengerberg', prioritise: true },
+  { value: '3', label: 'Philippa Eilhart' },
+  { value: '4', label: 'Keira Metz' }
+];
 const TemplatePriorityMultiSelect = args => `
-    <tttx-multiselect-box_localcomponent
+    <tttx-multiselect-box_1_9_103
         id="multiselectBox"
         options-data='${JSON.stringify(args.optionsData)}'
         label='${args.label}'
@@ -254,7 +254,7 @@ const TemplatePriorityMultiSelect = args => `
         inline='${args.inline}'
         priority-label='${args.priorityLabel}'
         non-priority-label='${args.nonPriorityLabel}'
-    ></tttx-multiselect-box_localcomponent>
+    ></tttx-multiselect-box_1_9_103>
 
     <script>
         if (!multiselectBox.length) {
@@ -264,14 +264,14 @@ const TemplatePriorityMultiSelect = args => `
             });
         }
     </script>
-`;
-export const PriorityMultiSelect = TemplatePriorityMultiSelect.bind({});
-PriorityMultiSelect.args = {
-  optionsData: priorityMultiSelectOptions,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  searchEnabled: true,
-  inline: false,
-  priorityLabel: 'The Best',
-  nonPriorityLabel: 'The Rest'
-};
+`;
+export const PriorityMultiSelect = TemplatePriorityMultiSelect.bind({});
+PriorityMultiSelect.args = {
+  optionsData: priorityMultiSelectOptions,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  searchEnabled: true,
+  inline: false,
+  priorityLabel: 'The Best',
+  nonPriorityLabel: 'The Rest'
+};