@3t-transform/threeteeui 1.9.101 → 1.9.103

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

@@ -1,59 +1,59 @@
-export default {
-  title: 'Molecules/Textarea',
-  component: 'tttx-textarea',
-  argTypes: {
-    label: {
-      control: { type: 'text' },
-    },
-    secondarylabel: {
-      control: { type: 'text' },
-    },
-    errormsg: {
-      control: { type: 'text' },
-    },
-    showerrorbubble: {
-      control: { type: 'boolean' },
-    },
-    showerrormsg: {
-      control: { type: 'boolean' },
-    },
-    disabled: {
-      control: { type: 'boolean' },
-    },
-    maxlength: {
-      control: { type: 'text' },
-    },
-    minlength: {
-      control: { type: 'text' },
-    },
-    name: {
-      control: { type: 'text' },
-    },
-    pattern: {
-      control: { type: 'text' },
-    },
-    placeholder: {
-      control: { type: 'text' },
-    },
-    readonly: {
-      control: { type: 'boolean' },
-    },
-    required: {
-      control: { type: 'boolean' },
-    },
-    resize: {
-      control: { type: 'boolean' },
-    },
-    rows: {
-      control: { type: 'number' },
-    },
-    value: {
-      control: { type: 'text' },
-    },
-  },
-};
+export default {
+  title: 'Molecules/Textarea',
+  component: 'tttx-textarea',
+  argTypes: {
+    label: {
+      control: { type: 'text' },
+    },
+    secondarylabel: {
+      control: { type: 'text' },
+    },
+    errormsg: {
+      control: { type: 'text' },
+    },
+    showerrorbubble: {
+      control: { type: 'boolean' },
+    },
+    showerrormsg: {
+      control: { type: 'boolean' },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    maxlength: {
+      control: { type: 'text' },
+    },
+    minlength: {
+      control: { type: 'text' },
+    },
+    name: {
+      control: { type: 'text' },
+    },
+    pattern: {
+      control: { type: 'text' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+    readonly: {
+      control: { type: 'boolean' },
+    },
+    required: {
+      control: { type: 'boolean' },
+    },
+    resize: {
+      control: { type: 'boolean' },
+    },
+    rows: {
+      control: { type: 'number' },
+    },
+    value: {
+      control: { type: 'text' },
+    },
+  },
+};
 const TemplateTextarea = ({ iconleft, iconleftcolor, iconright, iconrightcolor, inputicon, inputiconcolor, label, secondarylabel, errormsg, showerrorbubble, showerrormsg, disabled, maxlength, minlength, name, pattern, placeholder, readonly, required, resize = false, rows, type, value, }) => `
-<tttx-textarea_1_9_101
+<tttx-textarea_1_9_103
   iconleft="${iconleft || ''}"
   iconleftcolor="${iconleftcolor || ''}"
   iconright="${iconright || ''}"
@@ -79,29 +79,29 @@ const TemplateTextarea = ({ iconleft, iconleftcolor, iconright, iconrightcolor,
   value="${value}"  
 
 />
-`;
-export const Textarea = TemplateTextarea.bind({});
-Textarea.args = {
-  value: '',
-  label: 'First name',
-  secondarylabel: 'First name can be up to 100 characters long',
-  maxlength: '100',
-  type: 'text',
-  errormsg: 'Please enter your first name',
-  required: false,
-  showerrormsg: false,
-  placeholder: 'Enter first name',
-};
-export const ResizableTextarea = TemplateTextarea.bind({});
-ResizableTextarea.args = {
-  value: '',
-  label: 'First name',
-  secondarylabel: 'First name can be up to 100 characters long',
-  maxlength: '100',
-  type: 'text',
-  errormsg: 'Please enter your first name',
-  required: false,
-  showerrormsg: false,
-  placeholder: 'Enter first name',
-  resize: true
-};
+`;
+export const Textarea = TemplateTextarea.bind({});
+Textarea.args = {
+  value: '',
+  label: 'First name',
+  secondarylabel: 'First name can be up to 100 characters long',
+  maxlength: '100',
+  type: 'text',
+  errormsg: 'Please enter your first name',
+  required: false,
+  showerrormsg: false,
+  placeholder: 'Enter first name',
+};
+export const ResizableTextarea = TemplateTextarea.bind({});
+ResizableTextarea.args = {
+  value: '',
+  label: 'First name',
+  secondarylabel: 'First name can be up to 100 characters long',
+  maxlength: '100',
+  type: 'text',
+  errormsg: 'Please enter your first name',
+  required: false,
+  showerrormsg: false,
+  placeholder: 'Enter first name',
+  resize: true
+};

package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.js

@@ -1,73 +1,73 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { h, Host } from '@stencil/core';
-export class TttxToolbar {
-  constructor() {
-    this.border = true;
-    this.viewSize = undefined;
-  }
-  handleResize() {
-    this.setViewSize();
-  }
-  async componentWillLoad() {
-    this.setViewSize();
-  }
-  setViewSize() {
-    if (window.innerWidth < 698) {
-      this.viewSize = 'mobile';
-    }
-    else {
-      this.viewSize = 'desktop';
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: `container ${this.border ? 'bordered' : ''} ${this.viewSize}` }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' }))));
-  }
-  static get is() { return "tttx-toolbar_1_9_101"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-toolbar.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-toolbar.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "border": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "border",
-        "reflect": false,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "viewSize": {}
-    };
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h, Host } from '@stencil/core';
+export class TttxToolbar {
+  constructor() {
+    this.border = true;
+    this.viewSize = undefined;
+  }
+  handleResize() {
+    this.setViewSize();
+  }
+  async componentWillLoad() {
+    this.setViewSize();
+  }
+  setViewSize() {
+    if (window.innerWidth < 698) {
+      this.viewSize = 'mobile';
+    }
+    else {
+      this.viewSize = 'desktop';
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: `container ${this.border ? 'bordered' : ''} ${this.viewSize}` }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' }))));
+  }
+  static get is() { return "tttx-toolbar_1_9_103"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-toolbar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-toolbar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "border": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "border",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "viewSize": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

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

@@ -1,122 +1,122 @@
-export default {
-  title: 'molecules/Toolbar',
-  component: 'tttx-toolbar',
-  argTypes: {
-    border: {
-      control: { type: 'boolean' }
-    },
-  },
-};
+export default {
+  title: 'molecules/Toolbar',
+  component: 'tttx-toolbar',
+  argTypes: {
+    border: {
+      control: { type: 'boolean' }
+    },
+  },
+};
 const Default = ({ border }) => `
-    <tttx-toolbar_1_9_101 border="${border ? 'true' : 'false'}">
-      <span slot="before"><tttx-button_1_9_101 design="primary">Before</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101></span>
-      <span slot="center"><tttx-button_1_9_101 design="primary">Center</tttx-button_1_9_101></span>
-      <span slot="after"><tttx-button_1_9_101 design="primary">After</tttx-button_1_9_101></span>
-    </tttx-toolbar_1_9_101>
-`;
-export const DefaultToolbar = Default.bind({});
-DefaultToolbar.args = {
-  border: true
-};
+    <tttx-toolbar_1_9_103 border="${border ? 'true' : 'false'}">
+      <span slot="before"><tttx-button_1_9_103 design="primary">Before</tttx-button_1_9_103><tttx-button_1_9_103 design="primary">Button Two</tttx-button_1_9_103></span>
+      <span slot="center"><tttx-button_1_9_103 design="primary">Center</tttx-button_1_9_103></span>
+      <span slot="after"><tttx-button_1_9_103 design="primary">After</tttx-button_1_9_103></span>
+    </tttx-toolbar_1_9_103>
+`;
+export const DefaultToolbar = Default.bind({});
+DefaultToolbar.args = {
+  border: true
+};
 const TallElements = ({ border }) => `
-  <tttx-toolbar_1_9_101 border="${border ? 'true' : 'false'}">
-    <span slot="before"><tttx-button_1_9_101 design="primary">Before</tttx-button_1_9_101><div style="position: relative; top: 18px;"><tttx-standalone-input_1_9_101 placeholder="before" label="search" required showerrorbubble="false" inputicon="search" /></div></span>
-    <span slot="center"><div style="position: relative; top: 17px;"><tttx-standalone-input_1_9_101 placeholder="center" inline required showerrorbubble="false" inputicon="search" /></div></span>
-    <span slot="after"><div style="position: relative; top: 22px;"><tttx-keyvalue-block_1_9_101 horizontal keyvalues='{"Position":"after"}' /></div></span>
-  </tttx-toolbar_1_9_101>
-`;
-export const TallElementsToolbar = TallElements.bind({});
-TallElementsToolbar.args = {
-  border: true
-};
+  <tttx-toolbar_1_9_103 border="${border ? 'true' : 'false'}">
+    <span slot="before"><tttx-button_1_9_103 design="primary">Before</tttx-button_1_9_103><div style="position: relative; top: 18px;"><tttx-standalone-input_1_9_103 placeholder="before" label="search" required showerrorbubble="false" inputicon="search" /></div></span>
+    <span slot="center"><div style="position: relative; top: 17px;"><tttx-standalone-input_1_9_103 placeholder="center" inline required showerrorbubble="false" inputicon="search" /></div></span>
+    <span slot="after"><div style="position: relative; top: 22px;"><tttx-keyvalue-block_1_9_103 horizontal keyvalues='{"Position":"after"}' /></div></span>
+  </tttx-toolbar_1_9_103>
+`;
+export const TallElementsToolbar = TallElements.bind({});
+TallElementsToolbar.args = {
+  border: true
+};
 const WrapElements = ({ border }) => `
-  <tttx-toolbar_1_9_101 border="${border ? 'true' : 'false'}">
-    <span slot="before"><div style="width: 125px;display: flex;gap: 8px;flex-wrap: wrap;"><tttx-button_1_9_101 design="primary">Button One</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Three</tttx-button_1_9_101></div></span>
-    <span slot="center"><div style="width: 125px;display: flex;gap: 8px;flex-wrap: wrap;"><tttx-button_1_9_101 design="primary">Button One</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Three</tttx-button_1_9_101></div></span>
-    <span slot="after"><div style="width: 125px;display: flex;gap: 8px;flex-wrap: wrap;"><tttx-button_1_9_101 design="primary">Button One</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Three</tttx-button_1_9_101></div></span>
-  </tttx-toolbar_1_9_101>
-`;
-export const WrapElementsToolbar = WrapElements.bind({});
-WrapElementsToolbar.args = {
-  border: true
-};
+  <tttx-toolbar_1_9_103 border="${border ? 'true' : 'false'}">
+    <span slot="before"><div style="width: 125px;display: flex;gap: 8px;flex-wrap: wrap;"><tttx-button_1_9_103 design="primary">Button One</tttx-button_1_9_103><tttx-button_1_9_103 design="primary">Button Two</tttx-button_1_9_103><tttx-button_1_9_103 design="primary">Button Three</tttx-button_1_9_103></div></span>
+    <span slot="center"><div style="width: 125px;display: flex;gap: 8px;flex-wrap: wrap;"><tttx-button_1_9_103 design="primary">Button One</tttx-button_1_9_103><tttx-button_1_9_103 design="primary">Button Two</tttx-button_1_9_103><tttx-button_1_9_103 design="primary">Button Three</tttx-button_1_9_103></div></span>
+    <span slot="after"><div style="width: 125px;display: flex;gap: 8px;flex-wrap: wrap;"><tttx-button_1_9_103 design="primary">Button One</tttx-button_1_9_103><tttx-button_1_9_103 design="primary">Button Two</tttx-button_1_9_103><tttx-button_1_9_103 design="primary">Button Three</tttx-button_1_9_103></div></span>
+  </tttx-toolbar_1_9_103>
+`;
+export const WrapElementsToolbar = WrapElements.bind({});
+WrapElementsToolbar.args = {
+  border: true
+};
 const LeftToolbar = ({ border }) => `
-  <tttx-toolbar_1_9_101 border="${border ? 'true' : 'false'}">
-    <span slot="before"><tttx-button_1_9_101 design="primary">Before</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101></span>
-  </tttx-toolbar_1_9_101>
-`;
-export const LeftToolbarOnly = LeftToolbar.bind({});
-LeftToolbarOnly.args = {
-  border: true
-};
+  <tttx-toolbar_1_9_103 border="${border ? 'true' : 'false'}">
+    <span slot="before"><tttx-button_1_9_103 design="primary">Before</tttx-button_1_9_103><tttx-button_1_9_103 design="primary">Button Two</tttx-button_1_9_103></span>
+  </tttx-toolbar_1_9_103>
+`;
+export const LeftToolbarOnly = LeftToolbar.bind({});
+LeftToolbarOnly.args = {
+  border: true
+};
 const CenterToolbar = ({ border }) => `
-  <tttx-toolbar_1_9_101 border="${border ? 'true' : 'false'}">
+  <tttx-toolbar_1_9_103 border="${border ? 'true' : 'false'}">
     <span slot='before'></span>
-    <span slot="center"><tttx-button_1_9_101 design="primary">Before</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101></span>
+    <span slot="center"><tttx-button_1_9_103 design="primary">Before</tttx-button_1_9_103><tttx-button_1_9_103 design="primary">Button Two</tttx-button_1_9_103></span>
     <span slot='after'></span>
-    </tttx-toolbar_1_9_101>
-`;
-export const CenterToolbarOnly = CenterToolbar.bind({});
-CenterToolbarOnly.args = {
-  border: true
-};
+    </tttx-toolbar_1_9_103>
+`;
+export const CenterToolbarOnly = CenterToolbar.bind({});
+CenterToolbarOnly.args = {
+  border: true
+};
 const TwoColumn = ({ border }) => `
-  <tttx-toolbar_1_9_101 border="${border ? 'true' : 'false'}">
-    <span slot="before"><tttx-button_1_9_101 design="primary">Before</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101></span>
-    <span slot='after'><tttx-button_1_9_101 design="primary">After</tttx-button_1_9_101><tttx-button_1_9_101 design="primary">Button Two</tttx-button_1_9_101></span>
-  </tttx-toolbar_1_9_101>
-`;
-export const TwoColumnToolbar = TwoColumn.bind({});
-TwoColumnToolbar.args = {
-  border: true
-};
-const selectOptions = JSON.stringify([
-  { value: 'Bonnie', label: 'Steuber' },
-  { value: 'Priscilla', label: 'Lowe' },
-  { 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' },
-]);
+  <tttx-toolbar_1_9_103 border="${border ? 'true' : 'false'}">
+    <span slot="before"><tttx-button_1_9_103 design="primary">Before</tttx-button_1_9_103><tttx-button_1_9_103 design="primary">Button Two</tttx-button_1_9_103></span>
+    <span slot='after'><tttx-button_1_9_103 design="primary">After</tttx-button_1_9_103><tttx-button_1_9_103 design="primary">Button Two</tttx-button_1_9_103></span>
+  </tttx-toolbar_1_9_103>
+`;
+export const TwoColumnToolbar = TwoColumn.bind({});
+TwoColumnToolbar.args = {
+  border: true
+};
+const selectOptions = JSON.stringify([
+  { value: 'Bonnie', label: 'Steuber' },
+  { value: 'Priscilla', label: 'Lowe' },
+  { 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 LongItems = ({ border }) => `
-  <tttx-toolbar_1_9_101 border="${border ? 'true' : 'false'}">
+  <tttx-toolbar_1_9_103 border="${border ? 'true' : 'false'}">
     <span slot="before">
       <div style="width: 350px">
-        <tttx-select-box_1_9_101
+        <tttx-select-box_1_9_103
           id="htmlSelectBox"
           options-data='${selectOptions}'
           placeholder='Select a name'
           label=''
           inline='true'
-        ></tttx-select-box_1_9_101>
+        ></tttx-select-box_1_9_103>
       </div>
-      <tttx-button_1_9_101>
+      <tttx-button_1_9_103>
         This is a very long button
-      </tttx-button_1_9_101>
-      <tttx-button_1_9_101>
+      </tttx-button_1_9_103>
+      <tttx-button_1_9_103>
         This is a very long button
-      </tttx-button_1_9_101>
-      <tttx-button_1_9_101>
+      </tttx-button_1_9_103>
+      <tttx-button_1_9_103>
         This is a very long button
-      </tttx-button_1_9_101>
+      </tttx-button_1_9_103>
     </span>
     <span slot="center">
-      <tttx-button_1_9_101>
+      <tttx-button_1_9_103>
         This is a very long button in the middle
-      </tttx-button_1_9_101>
+      </tttx-button_1_9_103>
     </span>
     <span slot="after"></span>
-  </tttx-toolbar_1_9_101>
-`;
-export const LongItemsToolbar = LongItems.bind({});
-LongItemsToolbar.args = {
-  border: true
-};
+  </tttx-toolbar_1_9_103>
+`;
+export const LongItemsToolbar = LongItems.bind({});
+LongItemsToolbar.args = {
+  border: true
+};