@3t-transform/threeteeui 1.9.101 → 1.9.103

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

@@ -1,134 +1,134 @@
-import { Host, h } from '@stencil/core';
-export class TttxExpander {
-  constructor() {
-    this.name = undefined;
-    this.open = false;
-    this.lefticon = undefined;
-    this.lefticoncolor = undefined;
-    this.isExpanded = false;
-  }
-  componentWillRender() {
-    this.isExpanded = this.open;
-  }
-  handleExpand() {
-    // pre-render logic, so the attribute check is reversed
-    if (this.expander.getAttribute('open') === null) {
-      this.isExpanded = true;
-    }
-    else {
-      this.isExpanded = false;
-    }
-    this.toggleExpander.emit({ open: this.isExpanded, name: this.name });
-  }
-  render() {
-    return (h(Host, null, h("details", { class: "expander", open: this.open, "aria-owns": "expanderContent", "aria-expanded": `${this.isExpanded}`, onClick: this.handleExpand.bind(this), ref: el => (this.expander = el) }, h("summary", { class: "panel" }, h("span", { class: "panel-frame" }, this.lefticon && (h("span", { class: "left-icons" }, h("tttx-icon_1_9_101", { icon: this.lefticon, color: this.lefticoncolor }))), h("span", { class: "name" }, this.name)), h("span", { class: "expand-button" }, h("tttx-icon_1_9_101", { class: "open", icon: "expand_more", color: "black" }), h("tttx-icon_1_9_101", { class: "closed", icon: "chevron_right", color: "black" }))), h("div", { id: "expanderContent", class: "content", tabindex: "0" }, h("slot", null)))));
-  }
-  static get is() { return "tttx-expander_1_9_101"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-expander.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-expander.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "open": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "open",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "lefticon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "lefticon",
-        "reflect": false
-      },
-      "lefticoncolor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "lefticoncolor",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isExpanded": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "toggleExpander",
-        "name": "toggleExpander",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ open: boolean; name: string }",
-          "resolved": "{ open: boolean; name: string; }",
-          "references": {}
-        }
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class TttxExpander {
+  constructor() {
+    this.name = undefined;
+    this.open = false;
+    this.lefticon = undefined;
+    this.lefticoncolor = undefined;
+    this.isExpanded = false;
+  }
+  componentWillRender() {
+    this.isExpanded = this.open;
+  }
+  handleExpand() {
+    // pre-render logic, so the attribute check is reversed
+    if (this.expander.getAttribute('open') === null) {
+      this.isExpanded = true;
+    }
+    else {
+      this.isExpanded = false;
+    }
+    this.toggleExpander.emit({ open: this.isExpanded, name: this.name });
+  }
+  render() {
+    return (h(Host, null, h("details", { class: "expander", open: this.open, "aria-owns": "expanderContent", "aria-expanded": `${this.isExpanded}`, onClick: this.handleExpand.bind(this), ref: el => (this.expander = el) }, h("summary", { class: "panel" }, h("span", { class: "panel-frame" }, this.lefticon && (h("span", { class: "left-icons" }, h("tttx-icon_1_9_103", { icon: this.lefticon, color: this.lefticoncolor }))), h("span", { class: "name" }, this.name)), h("span", { class: "expand-button" }, h("tttx-icon_1_9_103", { class: "open", icon: "expand_more", color: "black" }), h("tttx-icon_1_9_103", { class: "closed", icon: "chevron_right", color: "black" }))), h("div", { id: "expanderContent", class: "content", tabindex: "0" }, h("slot", null)))));
+  }
+  static get is() { return "tttx-expander_1_9_103"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-expander.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-expander.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "lefticon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "lefticon",
+        "reflect": false
+      },
+      "lefticoncolor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "lefticoncolor",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isExpanded": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "toggleExpander",
+        "name": "toggleExpander",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ open: boolean; name: string }",
+          "resolved": "{ open: boolean; name: string; }",
+          "references": {}
+        }
+      }];
+  }
+}

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

@@ -1,62 +1,62 @@
-import { withActions } from '@storybook/addon-actions/decorator';
-import icons from '../../../icons';
-const colors = ['red', 'blue', 'black', 'white', 'gray', 'green', 'orange', 'darkred'];
-export default {
-  title: 'molecules/Expander',
-  component: 'tttx-expander',
-  argTypes: {
-    lefticon: {
-      control: { type: 'select' },
-      options: icons,
-    },
-    lefticoncolor: {
-      control: { type: 'select' },
-      options: colors,
-    },
-  },
-  parameters: {
-    actions: {
-      handles: ['toggleExpander'],
-    },
-  },
-  decorators: [withActions],
-};
+import { withActions } from '@storybook/addon-actions/decorator';
+import icons from '../../../icons';
+const colors = ['red', 'blue', 'black', 'white', 'gray', 'green', 'orange', 'darkred'];
+export default {
+  title: 'molecules/Expander',
+  component: 'tttx-expander',
+  argTypes: {
+    lefticon: {
+      control: { type: 'select' },
+      options: icons,
+    },
+    lefticoncolor: {
+      control: { type: 'select' },
+      options: colors,
+    },
+  },
+  parameters: {
+    actions: {
+      handles: ['toggleExpander'],
+    },
+  },
+  decorators: [withActions],
+};
 const TemplateExpanderBookings = ({ name, open, lefticon, lefticoncolor }) => `
 <div style="width: 268px;">
-    <tttx-expander_1_9_101 name="${name}" open="${open}" lefticon="${lefticon}" lefticoncolor="${lefticoncolor}">
+    <tttx-expander_1_9_103 name="${name}" open="${open}" lefticon="${lefticon}" lefticoncolor="${lefticoncolor}">
         <div tabindex="1" style="height: 36px; display: flex; align-items: center; gap: 8px;">
-            <tttx-icon_1_9_101 style="height: 24px;" icon="check_box_outline_blank" color="gray"></tttx-icon_1_9_101><tttx-icon_1_9_101 style="height: 24px;" icon="cancel" color="darkred"></tttx-icon_1_9_101><span>Not yet competent</span>
+            <tttx-icon_1_9_103 style="height: 24px;" icon="check_box_outline_blank" color="gray"></tttx-icon_1_9_103><tttx-icon_1_9_103 style="height: 24px;" icon="cancel" color="darkred"></tttx-icon_1_9_103><span>Not yet competent</span>
         </div>
         <div tabindex="2" style="height: 36px; display: flex; align-items: center; gap: 8px;">
-            <tttx-icon_1_9_101 style="height: 24px;" icon="check_box_outline_blank" color="gray"></tttx-icon_1_9_101><tttx-icon_1_9_101 style="height: 24px;" icon="check_circle" color="green"></tttx-icon_1_9_101><span>Competent</span>
+            <tttx-icon_1_9_103 style="height: 24px;" icon="check_box_outline_blank" color="gray"></tttx-icon_1_9_103><tttx-icon_1_9_103 style="height: 24px;" icon="check_circle" color="green"></tttx-icon_1_9_103><span>Competent</span>
         </div>
         <div tabindex="3" style="height: 36px; display: flex; align-items: center; gap: 8px;">
-            <tttx-icon_1_9_101 style="height: 24px;" icon="check_box_outline_blank" color="gray"></tttx-icon_1_9_101><tttx-icon_1_9_101 style="height: 24px;" icon="brightness_alert" color="blue"></tttx-icon_1_9_101><span>Not assessed</span>
+            <tttx-icon_1_9_103 style="height: 24px;" icon="check_box_outline_blank" color="gray"></tttx-icon_1_9_103><tttx-icon_1_9_103 style="height: 24px;" icon="brightness_alert" color="blue"></tttx-icon_1_9_103><span>Not assessed</span>
         </div>
-    </tttx-expander_1_9_101>
+    </tttx-expander_1_9_103>
 </div>
-`;
-export const ExpanderBookings = TemplateExpanderBookings.bind({});
-ExpanderBookings.args = {
-  name: 'Bookings',
-  open: false,
-  lefticon: 'schedule',
-  lefticoncolor: 'gray',
-};
+`;
+export const ExpanderBookings = TemplateExpanderBookings.bind({});
+ExpanderBookings.args = {
+  name: 'Bookings',
+  open: false,
+  lefticon: 'schedule',
+  lefticoncolor: 'gray',
+};
 const TemplateExpanderTags = ({ name, open }) => `
 <div style="width: 268px;">
-    <tttx-expander_1_9_101 name="${name}" open="${open}">
+    <tttx-expander_1_9_103 name="${name}" open="${open}">
         <div style="height: 36px; display: flex; align-items: center; gap: 8px;">
-            <tttx-icon_1_9_101 style="height: 24px;" icon="check_box_outline_blank" color="gray"></tttx-icon_1_9_101><tttx-tag_1_9_101 text="Safety critical" color="#F2BEBE"></tttx-tag_1_9_101>
+            <tttx-icon_1_9_103 style="height: 24px;" icon="check_box_outline_blank" color="gray"></tttx-icon_1_9_103><tttx-tag_1_9_103 text="Safety critical" color="#F2BEBE"></tttx-tag_1_9_103>
         </div>
         <div style="height: 36px; display: flex; align-items: center; gap: 8px;">
-        <tttx-icon_1_9_101 style="height: 24px;" icon="check_box_outline_blank" color="gray"></tttx-icon_1_9_101><tttx-tag_1_9_101 text="Requires evidence" color="#C2DAEE"></tttx-tag_1_9_101>
+        <tttx-icon_1_9_103 style="height: 24px;" icon="check_box_outline_blank" color="gray"></tttx-icon_1_9_103><tttx-tag_1_9_103 text="Requires evidence" color="#C2DAEE"></tttx-tag_1_9_103>
         </div>
-    </tttx-expander_1_9_101>
+    </tttx-expander_1_9_103>
 </div>
-`;
-export const ExpanderTags = TemplateExpanderTags.bind({});
-ExpanderTags.args = {
-  name: 'Tag',
-  open: true,
-};
+`;
+export const ExpanderTags = TemplateExpanderTags.bind({});
+ExpanderTags.args = {
+  name: 'Tag',
+  open: true,
+};