@3t-transform/threeteeui 0.2.74 → 0.2.76

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

@@ -0,0 +1,339 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h, Host } from '@stencil/core';
+import * as DOMPurify from 'dompurify';
+import domSanitiserOptions from '../../../shared/domsanitiser.options';
+export class TttxMultiselectBox {
+  constructor() {
+    this.bodyOffset = {};
+    this.optionsData = null;
+    this.label = undefined;
+    this.inline = undefined;
+    this.placeholder = '';
+    this.searchEnabled = undefined;
+    this.htmlVisibleValue = undefined;
+    this.visibleValue = undefined;
+    this.open = false;
+    this.unsavedSelectedItems = undefined;
+    this.searchTerm = '';
+  }
+  handleCloseSelectBox() {
+    this.open = false;
+  }
+  handleBlur() {
+    this.open = false;
+    this.toggleOpen.emit(false);
+  }
+  /**
+   * We want to generally clone instances of optionsData, _optionsData and unsavedSelectedItems
+   * This is because they may be assigned from each other, but have different purposes
+   * If we don't clone them, changing one may propagate to the others
+   * JSON.parse/stringify will deep clone them, so the references of the array elements will also change
+   */
+  safelyCloneArray(arr) {
+    return JSON.parse(JSON.stringify(arr));
+  }
+  onDropdownClicked() {
+    this.open = !this.open;
+    this.searchTerm = '';
+    this.calculateDropdownMenuOffset();
+    this.toggleOpen.emit(this.open);
+  }
+  onCancel() {
+    this.open = false;
+    this.unsavedSelectedItems = this.safelyCloneArray(this._optionsData);
+    this.toggleOpen.emit(false);
+  }
+  applyChanges() {
+    this.open = false;
+    this.changesApplied.emit(this.safelyCloneArray(this.unsavedSelectedItems));
+  }
+  onItemSelected(option) {
+    const optionIndex = this.unsavedSelectedItems.findIndex((item) => item.value === option.value);
+    this.unsavedSelectedItems[optionIndex] = Object.assign(Object.assign({}, option), { selected: !option.selected });
+    this.unsavedSelectedItems = [...this.unsavedSelectedItems];
+    this.selectItemEvent.emit(option);
+  }
+  dropdownSelectorContent() {
+    if (!this._optionsData.find((item) => item.selected))
+      return h("div", { class: "placeholder" }, this.placeholder);
+    if (this.htmlVisibleValue) {
+      const sanitisedHTML = DOMPurify.sanitize(this.visibleValue, domSanitiserOptions);
+      return h("div", { class: "dropdown-selector-html-content", innerHTML: sanitisedHTML });
+    }
+    return h("div", null, this.visibleValue);
+  }
+  dropdownOption(option) {
+    // This is tested in e2e tests
+    /* istanbul ignore next */
+    const hideOption = this.searchEnabled && option.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()) === -1;
+    const checkboxIcon = option.selected ? 'check_box' : 'check_box_outline_blank';
+    const checkboxColor = option.selected ? 'blue' : 'grey';
+    if (option.html) {
+      const sanitisedHTML = DOMPurify.sanitize(option.html, domSanitiserOptions);
+      // This is tested in e2e tests
+      /* istanbul ignore next */
+      return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${option.selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, h("tttx-icon", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), h("div", { innerHTML: sanitisedHTML })));
+    }
+    // This is tested in e2e tests
+    /* istanbul ignore next */
+    return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${option.selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, h("tttx-icon", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), h("div", { class: "plaintext-option" }, option.label)));
+  }
+  // This is tested in e2e tests
+  /* istanbul ignore next */
+  handleSearchInput(event) {
+    const target = event.target;
+    this.searchTerm = target.value;
+  }
+  calculateDropdownMenuOffset() {
+    const dropdownSelector = this.el.shadowRoot.querySelector('.dropdown-selector');
+    const bottomPosY = dropdownSelector.getBoundingClientRect().bottom;
+    // (Max list height OR 36px * number of items) + 52px for search bar + 45px for footer + 8px padding at bottom
+    let dropdownMenuMaxHeight = Math.min((288), 36 * this._optionsData.length) + 45 + 8;
+    if (this.searchEnabled)
+      dropdownMenuMaxHeight += 52;
+    if (bottomPosY + dropdownMenuMaxHeight > window.innerHeight) {
+      this.bodyOffset = { bottom: '16px', position: 'fixed', width: `${dropdownSelector.offsetWidth}px` };
+    }
+    else {
+      this.bodyOffset = {};
+    }
+  }
+  render() {
+    if (!this.optionsData)
+      return;
+    this._optionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
+    // initialise, if not already. After initialisation, this will be managed by internal state
+    // Check is performed in render in case initial render did not include optionsData
+    if (!this.unsavedSelectedItems)
+      this.unsavedSelectedItems = this.safelyCloneArray(this._optionsData);
+    const chevronIcon = this.open ? 'expand_less' : 'expand_more';
+    return (h(Host, { class: this.inline ? 'inline' : 'block' }, this.label && h("div", { class: "label" }, this.label), h("div", { tabindex: "0", class: "dropdown-container" }, h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent(), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon", { icon: chevronIcon, color: "black" }))), this.open && (h("div", { class: "dropdown-body-container" }, h("div", { class: "dropdown-body", style: Object.assign({}, this.bodyOffset) }, this.searchEnabled &&
+      /* istanbul ignore next */
+      h("div", { class: "searchbox" }, h("tttx-standalone-input", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: 'search', onInput: this.handleSearchInput.bind(this), inline: true })), h("div", { class: "dropdown-options-list" }, this.unsavedSelectedItems.map((option) => {
+      return this.dropdownOption(option);
+    })), h("div", { class: 'footer' }, h("tttx-button", { design: "primary", onClick: this.applyChanges.bind(this) }, "Apply"), h("tttx-button", { onClick: this.onCancel.bind(this) }, "Cancel"))))))));
+  }
+  static get is() { return "tttx-multiselect-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-multiselect-box.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-multiselect-box.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "optionsData": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | SelectItem[]",
+          "resolved": "SelectItem[] | string",
+          "references": {
+            "SelectItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "options-data",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "inline",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "searchEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "search-enabled",
+        "reflect": false
+      },
+      "htmlVisibleValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "html-visible-value",
+        "reflect": false
+      },
+      "visibleValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "visible-value",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "unsavedSelectedItems": {},
+      "searchTerm": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectItemEvent",
+        "name": "selectItemEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SelectItem",
+          "resolved": "SelectItem",
+          "references": {
+            "SelectItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
+      }, {
+        "method": "toggleOpen",
+        "name": "toggleOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "changesApplied",
+        "name": "changesApplied",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SelectItem[]",
+          "resolved": "SelectItem[]",
+          "references": {
+            "SelectItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "closeSelectBox",
+        "method": "handleCloseSelectBox",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "blur",
+        "method": "handleBlur",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,201 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'molecules/Multiselect Box',
+  component: 'tttx-multiselect-box',
+  parameters: {
+    actions: {
+      handles: ['toggleOpen', 'changesApplied'],
+    },
+  },
+  decorators: [withActions],
+};
+const options = [
+  { value: 'Bonnie', label: 'Steuber' },
+  { value: 'Priscilla', label: 'Lowe' },
+  { value: 'Andy', label: 'Thompson-Keebler', html: '<span style="color: red">Thompson-Keebler</span>' },
+  { value: 'egg', label: 'egg', html: '<tttx-icon 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
+        id="multiselectBox"
+        options-data='${JSON.stringify(args.optionsData)}'
+        label='${args.label}'
+        placeholder='${args.placeholder}'
+        search-enabled='${args.searchEnabled}'
+        inline='${args.inline}'
+        html-visible-value: true,
+    ></tttx-multiselect-box>
+
+    <script>
+      // Handle case where storybook renders this story twice
+      if(!multiselectBox.length) {
+        multiselectBox.addEventListener('changesApplied', (event) => {
+          multiselectBox.optionsData = event.detail;
+          multiselectBox.visibleValue = event.detail.filter((option) => option.selected).map((option) => option.label).join(', ')
+        })
+      }
+    </script>
+`;
+export const BasicMultiselectBox = TemplateMultiselectBox.bind({});
+BasicMultiselectBox.args = {
+  optionsData: options,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  searchEnabled: true,
+  inline: false,
+};
+const htmlOptions = [
+  { value: '1', label: 'Client', html: '<tttx-tag text="Client" color="#f2bebe"></tttx-tag>', selected: true },
+  { value: '2', label: 'Job Role', html: '<tttx-tag text="Job Role" color="#f9e1be"></tttx-tag>' },
+  { value: '3', label: 'Foo', html: '<tttx-tag text="Foo" color="#e4ebc9"></tttx-tag>', selected: true },
+  { value: '4', label: 'Bar', html: '<tttx-tag text="Bar" color="#f2bebe"></tttx-tag>', selected: true },
+  { value: '5', label: 'Baz', html: '<tttx-tag text="Baz" color="#f9e1be"></tttx-tag>' },
+  { value: '6', label: 'Mill', html: '<tttx-tag text="Mill" color="#e4ebc9"></tttx-tag>', selected: true },
+  { value: '7', label: 'Hill', html: '<tttx-tag text="Hill" color="#f2bebe"></tttx-tag>', selected: true },
+  { value: '8', label: 'Fill', html: '<tttx-tag text="Fill" color="#f9e1be"></tttx-tag>' },
+  { value: '9', label: 'Supercalifragilisticexpialidocious', html: '<tttx-tag text="Supercalifragilisticexpialidocious" color="#e4ebc9"></tttx-tag>', selected: true },
+];
+const TemplateHtmlVisibleValueWrap = args => `
+    <div style="height: 400px; width: 50px"></div>
+    <div style="width: 300px">
+      <tttx-multiselect-box
+          id="multiselectBoxVisibleValueWrap"
+          options-data='${JSON.stringify(args.optionsData)}'
+          label='${args.label}'
+          placeholder='${args.placeholder}'
+          search-enabled='${args.searchEnabled}'
+          inline='${args.inline}'
+          html-visible-value='true'
+          visible-value='<tttx-tag text="Client" color="#f2bebe"></tttx-tag><tttx-tag text="Foo" color="#e4ebc9"></tttx-tag><tttx-tag text="Bar" color="#f2bebe"></tttx-tag><tttx-tag text="Mill" color="#e4ebc9"></tttx-tag><tttx-tag text="Hill" color="#f2bebe"></tttx-tag><tttx-tag text="Supercalifragilisticexpialidocious" color="#e4ebc9"></tttx-tag>'
+      ></tttx-multiselect-box>
+    </div>
+
+    <script>
+      // Handle case where storybook renders this story twice
+      if(!multiselectBoxVisibleValueWrap.length) {
+        multiselectBoxVisibleValueWrap.addEventListener('changesApplied', (event) => {
+          multiselectBoxVisibleValueWrap.optionsData = event.detail;
+          multiselectBoxVisibleValueWrap.visibleValue = event.detail.filter((option) => option.selected).map((option) => option.html).join('')
+        })
+      }
+  </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 text="Client" color="#f2bebe"></tttx-tag>', selected: true },
+  { value: '2', label: 'Job Role', html: '<tttx-tag text="Job Role" color="#f9e1be"></tttx-tag>' },
+  { value: '3', label: 'Foo', html: '<tttx-tag text="Foo" color="#e4ebc9"></tttx-tag>', selected: true },
+];
+const TemplateHtmlVisibleValue = args => `
+    <tttx-multiselect-box
+        id="multiselectBox"
+        options-data='${JSON.stringify(args.optionsData)}'
+        label='${args.label}'
+        placeholder='${args.placeholder}'
+        search-enabled='${args.searchEnabled}'
+        inline='${args.inline}'
+        html-visible-value='true'
+    ></tttx-multiselect-box>
+
+    <script>
+      // Handle case where storybook renders this story twice
+      if(!multiselectBox.length) {
+        multiselectBox.addEventListener('changesApplied', (event) => {
+          multiselectBox.optionsData = event.detail;
+          multiselectBox.visibleValue = '<span>' + event.detail.filter((option) => option.selected).map((option) => option.html).join(', ') + '</span>'
+        })
+      }
+  </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 text="Client" color="#f2bebe"></tttx-tag>', selected: true },
+  { value: '2', label: 'Job Role', html: '<tttx-tag text="Job Role" color="#f9e1be"></tttx-tag>' },
+  { value: '3', label: 'Foo', html: '<tttx-tag text="Foo" color="#e4ebc9"></tttx-tag>', selected: true },
+  { value: '4', label: 'Bar', html: '<tttx-tag text="Bar" color="#f2bebe"></tttx-tag>', selected: true },
+  { value: '5', label: 'Baz', html: '<tttx-tag text="Baz" color="#f9e1be"></tttx-tag>' },
+  { value: '6', label: 'Mill', html: '<tttx-tag text="Mill" color="#e4ebc9"></tttx-tag>', selected: true },
+  { value: '7', label: 'Hill', html: '<tttx-tag text="Hill" color="#f2bebe"></tttx-tag>', selected: true },
+  { value: '8', label: 'Fill', html: '<tttx-tag text="Fill" color="#f9e1be"></tttx-tag>' },
+  { value: '9', label: 'Supercalifragilisticexpialidocious', html: '<tttx-tag text="Supercalifragilisticexpialidocious" color="#e4ebc9"></tttx-tag>', selected: true },
+];
+const TttxDialogBoxStory = ({ data }) => `
+  <button onclick="openDialog()">Open</button>
+  <tttx-dialog-box
+    id='dialogBox'
+    allow-overflow='true'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBox) {
+      const dialogBox = document.getElementById('dialogBox');
+    }
+    if(!openDialog) {
+      function openDialog() {
+        const dialogBox = document.getElementById('dialogBox');
+        dialogBox.open = true;
+      }
+    }
+
+    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,
+      customHtml: `
+              <div style="padding: 5px;">
+                <tttx-multiselect-box
+                  id="dropdownSelectBox"
+                  options-data='${JSON.stringify(tagOptions)}'
+                  label='Label'
+                  placeholder='Placeholder'
+                  search-enabled='${true}'
+                  inline='${false}'
+                  visible-value='${tagOptions[0].html} ${tagOptions[2].html}'
+                  html-visible-value='true'
+                ></tttx-multiselect-box>
+              </div>
+            `,
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
+};