@3t-transform/threeteeui 0.1.69 → 0.2.70

package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js

@@ -89,10 +89,86 @@ const TemplateWorkerList = ({ data }) => `
 export const WorkerList = TemplateWorkerList.bind({});
 WorkerList.args = {
   data: [
+    {
+      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a890',
+      toggleable: true,
+      icon: 'chevron_right',
+      element: `
+<div style="display: flex; flex-direction: row; align-items: flex-start;">
+    <label>
+        <ul style="list-style-type: none; padding: 0; margin: 0;">
+            <li>
+                <span style="padding: 8px; display: inline-flex; align-items: center;">
+                    <a style="font-weight: 500; color: #146EB3; text-decoration: none;" href>Worker name</a>
+                </span>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 4px;">
+                    <span style="color: #757575;">ID:</span> <span style="color: #212121;">9125</span>
+                </span>
+            </li>
+            <li>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
+                    <tttx-tag text="Driller" color="#F4DFFF"></tttx-tag>
+                    <tttx-tag text="Offshore" color="#CEF4EB"></tttx-tag>
+                    <tttx-tag text="3t Transform" color="#DDE6FA"></tttx-tag>
+                </span>
+            </li>
+            <li>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
+                    <span><tttx-icon icon="school" color="gray" /></span><span><tttx-icon icon="check_circle" color="green" /></span> 80%
+                </span>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
+                    <span><tttx-icon icon="verified_user" color="gray" /></span><span><tttx-icon icon="warning" color="orange" /></span> 60%
+                </span>
+            </li>
+        </ul>
+    </label>
+</div>
+`,
+      rowData: '{ "name": "Worker name", "id": 9125, "groups": ["Driller", "Offshore", "3t Transform"], "compliance": 80, "competence": 60 }',
+    },
+    {
+      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a891',
+      toggleable: true,
+      active: true,
+      icon: 'chevron_right',
+      element: `
+<div style="display: flex; flex-direction: row; align-items: flex-start;">
+    <label>
+        <ul style="list-style-type: none; padding: 0; margin: 0;">
+            <li>
+                <span style="padding: 8px; display: inline-flex; align-items: center;">
+                    <a style="font-weight: 500; color: #146EB3; text-decoration: none;" href>Worker name</a>
+                </span>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 4px;">
+                    <span style="color: #757575;">ID:</span> <span style="color: #212121;">9125</span>
+                </span>
+            </li>
+            <li>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
+                    <tttx-tag text="Driller" color="#F4DFFF"></tttx-tag>
+                    <tttx-tag text="Offshore" color="#CEF4EB"></tttx-tag>
+                    <tttx-tag text="3t Transform" color="#DDE6FA"></tttx-tag>
+                </span>
+            </li>
+            <li>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
+                    <span><tttx-icon icon="school" color="gray" /></span><span><tttx-icon icon="check_circle" color="green" /></span> 80%
+                </span>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
+                    <span><tttx-icon icon="verified_user" color="gray" /></span><span><tttx-icon icon="warning" color="orange" /></span> 60%
+                </span>
+            </li>
+        </ul>
+    </label>
+</div>
+`,
+      rowData: '{ "name": "Worker name", "id": 9125, "groups": ["Driller", "Offshore", "3t Transform"], "compliance": 80, "competence": 60 }',
+    },
     {
       key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a892',
       hasCheckbox: true,
       clickable: true,
+      checked: true,
       icon: 'chevron_right',
       element: `
 <div style="display: flex; flex-direction: row; align-items: flex-start;">
@@ -108,9 +184,9 @@ WorkerList.args = {
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <tttx-tag text="Driller" color="#EABFFF"></tttx-tag>
-                    <tttx-tag text="Offshore" color="#9BE8D5"></tttx-tag>
-                    <tttx-tag text="3t Transform" color="#B9CCF5"></tttx-tag>
+                    <tttx-tag text="Driller" color="#F4DFFF"></tttx-tag>
+                    <tttx-tag text="Offshore" color="#CEF4EB"></tttx-tag>
+                    <tttx-tag text="3t Transform" color="#DDE6FA"></tttx-tag>
                 </span>
             </li>
             <li>
@@ -128,7 +204,47 @@ WorkerList.args = {
       rowData: '{ "name": "Worker name", "id": 9125, "groups": ["Driller", "Offshore", "3t Transform"], "compliance": 80, "competence": 60 }',
     },
     {
-      key: 'a5df3398-2bd0-4e16-83a1-b962b74dc712',
+      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a893',
+      hasCheckbox: true,
+      toggleable: true,
+      checked: true,
+      active: true,
+      icon: 'chevron_right',
+      element: `
+<div style="display: flex; flex-direction: row; align-items: flex-start;">
+    <label>
+        <ul style="list-style-type: none; padding: 0; margin: 0;">
+            <li>
+                <span style="padding: 8px; display: inline-flex; align-items: center;">
+                    <a style="font-weight: 500; color: #146EB3; text-decoration: none;" href>Worker name</a>
+                </span>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 4px;">
+                    <span style="color: #757575;">ID:</span> <span style="color: #212121;">9125</span>
+                </span>
+            </li>
+            <li>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
+                    <tttx-tag text="Driller" color="#F4DFFF"></tttx-tag>
+                    <tttx-tag text="Offshore" color="#CEF4EB"></tttx-tag>
+                    <tttx-tag text="3t Transform" color="#DDE6FA"></tttx-tag>
+                </span>
+            </li>
+            <li>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
+                    <span><tttx-icon icon="school" color="gray" /></span><span><tttx-icon icon="check_circle" color="green" /></span> 80%
+                </span>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
+                    <span><tttx-icon icon="verified_user" color="gray" /></span><span><tttx-icon icon="warning" color="orange" /></span> 60%
+                </span>
+            </li>
+        </ul>
+    </label>
+</div>
+`,
+      rowData: '{ "name": "Worker name", "id": 9125, "groups": ["Driller", "Offshore", "3t Transform"], "compliance": 80, "competence": 60 }',
+    },
+    {
+      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a894',
       clickable: true,
       icon: 'chevron_right',
       element: `
@@ -139,6 +255,20 @@ WorkerList.args = {
     <span style="color: #757575;">Awarded:</span> <span style="color: #212121;">10 Jan 2022</span>
     <span style="color: #757575;">Expiry:</span> <span style="color: #212121;">10 Jan 2023</span>
 </div>
+`,
+      rowData: 'any data',
+    },
+    {
+      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a895',
+      icon: 'chevron_right',
+      element: `
+<div style="display: flex; flex-direction: row; align-items: center; gap: 8px;">
+    <span><tttx-icon icon="check_circle" color="green" /></span> 
+    Qualification row 
+    <tttx-tag text="Vantage" color="#D5D5D5"></tttx-tag>
+    <span style="color: #757575;">Awarded:</span> <span style="color: #212121;">10 Jan 2022</span>
+    <span style="color: #757575;">Expiry:</span> <span style="color: #212121;">10 Jan 2023</span>
+</div>
 `,
       rowData: 'any data',
     },

package/dist/collection/components/molecules/tttx-select-box/tttx-select-box.css

@@ -56,13 +56,14 @@
 
 .dropdown-body {
   display: flex;
-  width: inherit;
-  position: absolute;
+  position: fixed;
+  z-index: 1000;
   flex-direction: column;
+  top: inherit;
+  margin-top: 45px;
   box-shadow: 0px 1px 5px #1111114D;
   padding-bottom: 8px;
   border: 1px solid #d5d5d5;
-  top: 42px;
 }
 .dropdown-body.search {
   max-height: 410px;
@@ -80,7 +81,7 @@
   cursor: pointer;
 }
 .dropdown-option:hover {
-  background-color: #1111110D;
+  background-color: #1111110d;
 }
 .dropdown-option:active, .dropdown-option.selected {
   background-color: #ebfbfc;

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

@@ -20,10 +20,11 @@ export class TttxSelectBox {
     this.open = false;
     this.toggleOpen.emit(false);
   }
-  onDropdownClicked() {
+  onDropdownClicked(event) {
     this.open = !this.open;
     this.searchTerm = '';
     this.toggleOpen.emit(this.open);
+    this.dropDownWidth = event.target.offsetWidth;
   }
   onItemSelected(option) {
     this.selectedItem = option;
@@ -33,7 +34,7 @@ export class TttxSelectBox {
   dropdownSelectorContent() {
     if (!this.selectedItem)
       return h("div", { class: "placeholder" }, this.placeholder);
-    return h("div", null, this.selectedItem.label);
+    return this.selectedItem.html ? h("div", { innerHTML: this.selectedItem.html }) : h("div", null, this.selectedItem.label);
   }
   dropdownOption(option) {
     /* istanbul ignore next */
@@ -57,7 +58,7 @@ export class TttxSelectBox {
       return;
     const parsedOptionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : 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" }, this.searchEnabled &&
+    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", style: { 'width': `${this.dropDownWidth}px` } }, 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) })), h("div", { class: "dropdown-options-list" }, parsedOptionsData.map((option) => {
       return this.dropdownOption(option);

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

@@ -43,7 +43,7 @@ BasicHTMLSelectBox.args = {
   label: 'Label',
   placeholder: 'Placeholder',
   searchEnabled: true,
-  inline: false
+  inline: false,
 };
 const TemplateJSXSelectBox = args => `
     <tttx-select-box
@@ -65,5 +65,60 @@ BasicJSXSelectBox.args = {
   label: 'Label',
   placeholder: 'Placeholder',
   searchEnabled: true,
-  inline: false
+  inline: false,
+};
+const tagOptions = [
+  { value: '1', label: 'Client', html: '<tttx-tag text="Client" color="#f2bebe"></tttx-tag>' },
+  { value: '2', label: 'Job Role', html: '<tttx-tag text="Job Role" color="#f9e1be"></tttx-tag>' },
+  { value: '3', label: 'Project', html: '<tttx-tag text="Project" color="#e4ebc9"></tttx-tag>' },
+];
+const TttxDialogBoxStory = ({ data }) => `
+  <button onclick="openDialog()">Open</button>
+  <tttx-dialog-box
+    id='dialogBox'
+  ></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-select-box
+                  id="htmlSelectBox"
+                  options-data='${JSON.stringify(tagOptions)}'
+                  label='Label'
+                  placeholder='Placeholder'
+                  search-enabled='${true}'
+                  inline='${false}'
+                ></tttx-select-box>
+              </div>
+            `,
+    },
+    footer: {
+      buttons: [
+        { name: 'primary', type: 'primary' },
+        { name: 'default', type: 'default' },
+        { name: 'No border', type: 'borderless' },
+      ],
+    },
+  },
 };

package/dist/components/tttx-list.js

@@ -1,8 +1,8 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js';
 import { d as defineCustomElement$2 } from './tttx-icon2.js';
 
-const tttxListCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}li{display:flex;align-items:flex-start}li.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px}li.item:first-of-type{border-top:1px solid #d5d5d5}li.item.clickable:hover{cursor:pointer}li.item.clickable:active{background-color:#e6e6e6}li.item .icons{display:flex;justify-content:flex-end;flex-grow:1;align-items:center;height:36px}li.item .icons tttx-icon:hover{cursor:pointer}li.item .icons *{display:flex}li:hover{background-color:#1111110D}.align-right{margin-left:auto}.item-content{display:flex;align-items:center;flex-grow:2;min-height:36px}.checkbox{padding:6px;margin-left:-8px}";
+const tttxListCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}li{display:flex;align-items:flex-start}li.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px}li.item:first-of-type{border-top:1px solid #d5d5d5}li.item.clickable:hover{cursor:pointer}li.item.toggleable:hover{cursor:pointer}li.item.active{background-color:rgba(17, 17, 17, 0.1)}li.item.active:hover{background-color:rgba(17, 17, 17, 0.15)}li.item.selected{background-color:#ebfbfc}li.item.selected:hover{background-color:#e0f8f9}li.item.selected.active{background-color:#ccf3f6}li.item.selected.active:hover{background-color:#bff0f3}li.item .icons{display:flex;justify-content:flex-end;flex-grow:1;align-items:center;height:36px}li.item .icons tttx-icon:hover{cursor:pointer}li.item .icons *{display:flex}li:hover{background-color:rgba(17, 17, 17, 0.05)}.align-right{margin-left:auto}.item-content{display:flex;align-items:center;flex-grow:2;min-height:36px}.checkbox{padding:6px;margin-left:-8px}";
 
 const TttxList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -39,39 +39,29 @@ const TttxList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     event.stopPropagation();
     if (!item.rowData)
       return;
-    if (item.hasCheckbox) {
-      item.checked = !item.checked;
-    }
-    // re-render component by updating its state
-    this._data = [...this._data];
-    this.rowCheckboxClick.emit({ key: item.key, name: this.name, data: item.rowData, checked: item.checked });
+    this.rowCheckboxClick.emit({ key: item.key, name: this.name, data: item.rowData });
   }
   onRowClickHandler(item) {
-    if (!item.clickable || !item.rowData)
+    if ((!item.clickable && !item.toggleable) || !item.rowData)
       return;
     this.rowClick.emit({ key: item.key, name: this.name, data: item.rowData });
   }
-  async setAllCheckboxes(check) {
-    for (const data of this._data) {
-      if (data.hasCheckbox) {
-        data.checked = check;
-      }
-    }
-    // re-render component by updating its state
-    this._data = [...this._data];
-  }
   renderListItem(item) {
     const cleanHTML = purify.sanitize(item.element, domSanitiserOptions);
-    return (h("li", { class: `item  ${item.clickable ? 'clickable' : ''}`, onClick: () => {
-        this.onRowClickHandler(item);
-      } }, item.hasCheckbox && (h("div", { class: "checkbox" }, h("tttx-icon", { icon: item.checked ? 'check_box' : 'check_box_outline_blank', color: item.checked ? 'blue' : 'grey', onClick: event => {
+    return (h(Fragment, null, item.hasCheckbox && (h("div", { class: "checkbox" }, h("tttx-icon", { icon: item.checked ? 'check_box' : 'check_box_outline_blank', color: item.checked ? 'blue' : 'grey', onClick: event => {
         this.onRowCheckboxHandler(event, item);
       } }))), item.element && h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && (h("span", { class: "icons" }, h("tttx-icon", { class: "align-right", icon: item.icon, color: 'black' })))));
   }
   render() {
     if (!this._data)
       return;
-    return h("ul", { class: "list" }, this._data.map((item) => this.renderListItem(item)));
+    return (h("ul", { class: "list" }, this._data.map((item) => (h("li", { key: item.key, class: 'item' +
+        (item.clickable ? ' clickable' : '') +
+        (item.toggleable ? ' toggleable' : '') +
+        (item.checked ? ' selected' : '') +
+        (item.active ? ' active' : ''), onClick: () => {
+        this.onRowClickHandler(item);
+      } }, this.renderListItem(item))))));
   }
   static get watchers() { return {
     "data": ["onDataChange"]
@@ -80,8 +70,7 @@ const TttxList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
 }, [1, "tttx-list", {
     "data": [1025],
     "name": [1],
-    "_data": [32],
-    "setAllCheckboxes": [64]
+    "_data": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/tttx-select-box.js

@@ -3,7 +3,7 @@ import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js
 import { d as defineCustomElement$3 } from './tttx-icon2.js';
 import { d as defineCustomElement$2 } from './tttx-standalone-input2.js';
 
-const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-body{display:flex;width:inherit;position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;top:42px}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110D}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
+const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-body{display:flex;position:fixed;z-index:1000;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
 
 const TttxSelectBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -28,10 +28,11 @@ const TttxSelectBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.open = false;
     this.toggleOpen.emit(false);
   }
-  onDropdownClicked() {
+  onDropdownClicked(event) {
     this.open = !this.open;
     this.searchTerm = '';
     this.toggleOpen.emit(this.open);
+    this.dropDownWidth = event.target.offsetWidth;
   }
   onItemSelected(option) {
     this.selectedItem = option;
@@ -41,7 +42,7 @@ const TttxSelectBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   dropdownSelectorContent() {
     if (!this.selectedItem)
       return h("div", { class: "placeholder" }, this.placeholder);
-    return h("div", null, this.selectedItem.label);
+    return this.selectedItem.html ? h("div", { innerHTML: this.selectedItem.html }) : h("div", null, this.selectedItem.label);
   }
   dropdownOption(option) {
     /* istanbul ignore next */
@@ -65,7 +66,7 @@ const TttxSelectBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       return;
     const parsedOptionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : 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" }, this.searchEnabled &&
+    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", style: { 'width': `${this.dropDownWidth}px` } }, 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) })), h("div", { class: "dropdown-options-list" }, parsedOptionsData.map((option) => {
       return this.dropdownOption(option);

package/dist/esm/{index-1c711ead.js → index-6a372ea6.js}

@@ -109,6 +109,10 @@ const h = (nodeName, vnodeData, ...children) => {
             }
         }
     }
+    if (typeof nodeName === 'function') {
+        // nodeName is a functional component
+        return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);
+    }
     const vnode = newVNode(nodeName, null);
     vnode.$attrs$ = vnodeData;
     if (vNodeChildren.length > 0) {
@@ -151,6 +155,59 @@ const Host = {};
  * @returns whether it's a Host node or not
  */
 const isHost = (node) => node && node.$tag$ === Host;
+/**
+ * Implementation of {@link d.FunctionalUtilities} for Stencil's VDom.
+ *
+ * Note that these functions convert from {@link d.VNode} to
+ * {@link d.ChildNode} to give functional component developers a friendly
+ * interface.
+ */
+const vdomFnUtils = {
+    forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
+    map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate),
+};
+/**
+ * Convert a {@link d.VNode} to a {@link d.ChildNode} in order to present a
+ * friendlier public interface (hence, 'convertToPublic').
+ *
+ * @param node the virtual DOM node to convert
+ * @returns a converted child node
+ */
+const convertToPublic = (node) => ({
+    vattrs: node.$attrs$,
+    vchildren: node.$children$,
+    vkey: node.$key$,
+    vname: node.$name$,
+    vtag: node.$tag$,
+    vtext: node.$text$,
+});
+/**
+ * Convert a {@link d.ChildNode} back to an equivalent {@link d.VNode} in
+ * order to use the resulting object in the virtual DOM. The initial object was
+ * likely created as part of presenting a public API, so converting it back
+ * involved making it 'private' again (hence, `convertToPrivate`).
+ *
+ * @param node the child node to convert
+ * @returns a converted virtual DOM node
+ */
+const convertToPrivate = (node) => {
+    if (typeof node.vtag === 'function') {
+        const vnodeData = Object.assign({}, node.vattrs);
+        if (node.vkey) {
+            vnodeData.key = node.vkey;
+        }
+        if (node.vname) {
+            vnodeData.name = node.vname;
+        }
+        return h(node.vtag, vnodeData, ...(node.vchildren || []));
+    }
+    const vnode = newVNode(node.vtag, node.vtext);
+    vnode.$attrs$ = node.vattrs;
+    vnode.$children$ = node.vchildren;
+    vnode.$key$ = node.vkey;
+    vnode.$name$ = node.vname;
+    return vnode;
+};
 /**
  * Parse a new property value for a given property type.
  *
@@ -1443,6 +1500,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // Fallback appLoad event
     endBootstrap();
 };
+const Fragment = (_, children) => children;
 const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
     if (listeners) {
         listeners.map(([flags, name, method]) => {
@@ -1594,4 +1652,4 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Fragment as F, Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-1c711ead.js';
-export { s as setNonce } from './index-1c711ead.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-6a372ea6.js';
+export { s as setNonce } from './index-6a372ea6.js';
 
 /*
  Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32],"setAllCheckboxes":[64]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return bootstrapLazy([["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
   });
 };
 

package/dist/esm/tttx-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-1c711ead.js';
+import { r as registerInstance, h, H as Host } from './index-6a372ea6.js';
 
 const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:inline-block}tttx-icon{cursor:inherit}.spacingleft{margin-left:8px}";
 

package/dist/esm/tttx-dialog-box.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-1c711ead.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6a372ea6.js';
 import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-97a33389.js';
 import './_commonjsHelpers-9943807e.js';
 

package/dist/esm/tttx-filter.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1c711ead.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6a372ea6.js';
 
 const tttxFilterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.filter-container{background-color:white;position:relative}.filter-container .filter-button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:400;font-family:\"Roboto\", serif;text-transform:uppercase;color:#212121;border:1px solid #d5d5d5;border-radius:4px;background:transparent;height:36px;width:95px;margin:0;padding-right:16px;cursor:pointer}@media (max-width: 475px){.filter-container .filter-button{padding-left:4px}}.filter-container .filter-button .filter-icon{padding-left:8px;padding-right:4px}.filter-container .filter-button.--list-icon{font-size:0;width:36px;height:36px;padding:0}.filter-container .filter-button.--list-icon .filter-icon{padding:0}.filter-container .filter-button.--list-icon:hover{background:#e3e3e3}.filter-container .filter-button.--table-icon{font-size:0;width:36px;height:36px;padding:0;border:none}.filter-container .filter-button.--table-icon .filter-icon{padding:0;width:24px;height:24px}.filter-container .filter-button.--table-icon:hover{background:#e3e3e3;border-radius:50%;width:36px;height:36px}.filter-container .filter-button:hover{background:#e3e3e3}.filter-container .filter-popover-container{display:flex;flex-direction:column;gap:8px;border-radius:4px;box-shadow:0px 1px 5px #1111114D;position:absolute;top:36px;left:0px;background-color:white;padding:8px 16px}.filter-container .filter-popover-container .filter-header{color:#757575;text-transform:uppercase;font-size:14px;font-weight:500;font-family:\"Roboto\", serif;padding-top:4px;padding-bottom:5px}.filter-container .filter-popover-container .filter-options-container{display:flex;flex-direction:column;gap:4px;border-top:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5;padding-bottom:8px}.filter-container .filter-popover-container .filter-option{display:flex;flex-direction:row;align-items:center;min-height:36px;padding-left:8px}.filter-container .filter-popover-container .filter-option .select-all-icon{padding-right:6px}.filter-container .filter-popover-container .filter-option .checkbox-icon{padding-right:8px}.filter-container .filter-popover-container .filter-option .filter-label{padding-left:8px;padding-bottom:3px;font-size:16px;font-weight:500;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-option:first-child{padding-top:8px}.filter-container .filter-popover-container .filter-popover-button-container{display:flex;justify-content:flex-end;align-items:center}.filter-container .filter-popover-container .filter-popover-button-container .close-button{height:36px;width:74px;background-color:white;border:1px solid #d5d5d5;border-radius:4px;text-transform:uppercase;margin-right:8px;font-size:14px;font-weight:400;font-family:\"Roboto\", serif;color:#212121}.filter-container .filter-popover-container .filter-popover-button-container .apply-button{height:36px;width:73px;background-color:#1479c6;color:white;border-radius:4px;border:none;text-transform:uppercase;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container.--with-search-field .filter-header{border-bottom:1px solid #d5d5d5}.filter-container .filter-popover-container.--with-search-field .search-field-container{position:relative;color:#d5d5d5;height:36px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-icon{position:absolute;top:6px;left:8px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input{padding-left:36px;border:1px solid #d5d5d5;border-radius:4px;height:36px;width:100%;font-size:16px;font-family:\"Roboto\", serif;font-weight:500;box-sizing:border-box}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus-visible,.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus{outline:none;border:1px solid #1479c6}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input::placeholder{color:#9e9e9e;font-size:16px;font-family:\"Roboto\", serif;font-weight:500}";
 

package/dist/esm/tttx-form.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-1c711ead.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-6a372ea6.js';
 import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-97a33389.js';
 import './_commonjsHelpers-9943807e.js';
 

package/dist/esm/tttx-icon.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-1c711ead.js';
+import { r as registerInstance, h, H as Host } from './index-6a372ea6.js';
 
 const tttxIconCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}:host{display:inline-block;cursor:default;user-select:none}.icon-size{width:24px;height:24px}.tooltip{background:#ffffff;color:#343434;font-weight:bold;padding:8px 16px;font-size:13px;border-radius:4px;box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);display:none}.tooltip[data-show]{display:block}.arrow,.arrow::before{position:absolute;width:8px;height:8px;background:inherit}.arrow{visibility:hidden}.arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}.tooltip[data-popper-placement^=left]>.arrow{right:-4px}.tooltip[data-popper-placement^=right]>.arrow{left:-4px}.red{color:#dc0000}.darkred{color:#A20000}.orange{color:#f59500}.blue{color:#1479c6}.green{color:#a2bb31}.gray{color:#757575}.black{color:#212121}.white{color:white}";
 

package/dist/esm/tttx-keyvalue-block.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-1c711ead.js';
+import { r as registerInstance, h, H as Host } from './index-6a372ea6.js';
 
 const tttxKeyvalueBlockCss = ":host{display:block}dl{margin:0;padding:0;font-family:\"Roboto\", sans-serif;cursor:default}dt{font-weight:400;line-height:21px;font-size:16px}dt,dt.subTitle{color:#757575}dt.mainTitle{color:#212121}dt,dd{overflow-wrap:anywhere}dd{margin:0;font-weight:400;font-size:16px;color:#212121;line-height:21px;margin-bottom:18px}dl.horizontal{display:flex;flex-direction:row;width:100%}dl.horizontal div{flex-grow:1}@media (max-width: 769px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%;max-width:50% !important}}@media (max-width: 600px){dl.horizontal div{width:100%;max-width:100% !important}}";