@3t-transform/threeteeui 0.0.13 → 0.0.15

package/dist/collection/components/atoms/tttx-icon/tttx-icon.css

@@ -1,105 +0,0 @@
-.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: block;
-}
-
-.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;
-}
-
-.orange {
-  color: #f59500;
-}
-
-.blue {
-  color: #1479c6;
-}
-
-.green {
-  color: #a2bb31;
-}
-
-.gray {
-  color: #757575;
-}
-
-.black {
-  color: #212121;
-}
-
-.white {
-  color: white;
-}
-
-.clickable {
-  cursor: pointer;
-}

package/dist/collection/components/atoms/tttx-icon/tttx-icon.js

@@ -1,114 +0,0 @@
-import { Host, h } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
-export class TttxIcon {
-  constructor() {
-    this.icon = undefined;
-    this.colour = 'grey';
-  }
-  handleDocumentClick(event) {
-    if (!event.composedPath().includes(this.referenceElement)) {
-      if (this.popperElement) {
-        this.popperElement.removeAttribute('data-show');
-      }
-      if (this.popperInstance) {
-        this.popperInstance.update();
-      }
-    }
-  }
-  componentWillLoad() {
-    this.hasPopoverSlot = !!this.el.querySelector('[slot="popover"]');
-  }
-  componentDidLoad() {
-    this.popperInstance = createPopper(this.referenceElement, this.popperElement, {
-      placement: 'top',
-      modifiers: [
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: ['bottom'],
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 12],
-          },
-        },
-      ],
-    });
-  }
-  disconnectedCallback() {
-    this.popperInstance.destroy();
-  }
-  render() {
-    return (h(Host, null, h("span", { onClick: () => {
-        if (this.popperElement) {
-          this.popperElement.setAttribute('data-show', '');
-        }
-        if (this.popperInstance) {
-          this.popperInstance.update();
-        }
-      }, ref: el => (this.referenceElement = el), class: `material-symbols-rounded ${this.colour ? this.colour : ''} ${this.hasPopoverSlot ? 'clickable' : ''}` }, this.icon), this.hasPopoverSlot && (h("div", { ref: el => (this.popperElement = el), class: "tooltip" }, h("slot", { name: "popover" }), h("div", { class: "arrow", "data-popper-arrow": true })))));
-  }
-  static get is() { return "tttx-icon"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "icon",
-        "reflect": false
-      },
-      "colour": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "colour",
-        "reflect": false,
-        "defaultValue": "'grey'"
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleDocumentClick",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js

@@ -1,47 +0,0 @@
-import icons from './../../../icons';
-const colours = ['red', 'blue', 'black', 'grey', 'green'];
-export default {
-  title: 'Atoms/Icons',
-  component: 'tttx-icon',
-  argTypes: {
-    icon: {
-      control: {
-        type: 'select',
-        options: icons,
-      },
-    },
-    colour: {
-      control: {
-        type: 'select',
-        options: colours,
-      },
-    },
-  },
-};
-const Template = ({ icon, colour }) => `<tttx-icon icon="${icon}" colour="${colour}" />`;
-export const Basic = Template.bind({});
-Basic.args = {
-  icon: 'warning',
-  colour: 'red',
-};
-const WithPopoverTemplate = ({ icon, colour }) => `
-<div style="overflow: auto; height: 300px;">
-  <div style="margin-top:150px; height:300px;">
-    <tttx-icon icon="${icon}" colour="${colour}">
-      <div slot="popover">
-        <tttx-popover-content
-          header="The humble egg"
-          body="Most arthropods such as insects, vertebrates (excluding live-bearing mammals), and mollusks lay eggs, although some, such as scorpions, do not."
-          linkcontext="Wikipedia_egg"
-          linktext="Learn more about eggs"
-        />
-      </div>
-    </tttx-icon>
-  </div>
-</div>
-`;
-export const WithPopover = WithPopoverTemplate.bind({});
-WithPopover.args = {
-  icon: 'warning',
-  colour: 'red',
-};

package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.css

@@ -1,48 +0,0 @@
-.material-symbols-rounded {
-  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
-}
-
-.spinner-container {
-  position: absolute;
-}
-
-.loading-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.loading-text {
-  font-size: 16px;
-  font-weight: 400;
-  padding-top: 10px;
-  text-align: center;
-}
-
-.spinner {
-  border: solid #1479c6;
-  border-bottom-color: #d5d5d5;
-  border-radius: 50%;
-  position: relative;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-.spinner.small {
-  height: 20px;
-  width: 20px;
-  border-width: 4px;
-}
-.spinner.large {
-  height: 60px;
-  width: 60px;
-  border-width: 8px;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js

@@ -1,66 +0,0 @@
-import { h } from '@stencil/core';
-export class TttxLoadingSpinner {
-  constructor() {
-    this.loadingMessage = undefined;
-    this.size = 'large';
-  }
-  renderLoadingMessage() {
-    if (!this.loadingMessage)
-      return '';
-    return h("div", { class: "loading-text" }, "Loading, please wait...");
-  }
-  render() {
-    return (h("div", { class: "spinner-container" }, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage()));
-  }
-  static get is() { return "tttx-loading-spinner"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-loading-spinner.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-loading-spinner.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "loadingMessage": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "loading-message",
-        "reflect": false
-      },
-      "size": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "'small' | 'large'",
-          "resolved": "\"large\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'large'"
-      }
-    };
-  }
-}

package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js

@@ -1,17 +0,0 @@
-export default {
-  title: 'atoms/TTTX Loading Spinner',
-  component: 'tttx-loading-spinner',
-  argTypes: {
-    loadingMessage: {
-      control: 'boolean',
-    },
-    size: {
-      control: { type: 'radio' },
-      options: ['small', 'large'],
-    },
-  },
-};
-export const Example = args => {
-  const size = args.size || 'large';
-  return `<tttx-loading-spinner ${args.loadingMessage ? 'loading-message' : ''} size='${size}' />`;
-};

package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.css

@@ -1,30 +0,0 @@
-.material-symbols-rounded {
-  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
-}
-
-:host {
-  display: block;
-  max-width: 400px;
-}
-
-h4 {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 700;
-  color: black;
-  margin-bottom: 4px;
-}
-
-p {
-  margin: 0;
-  font-size: 14px;
-  font-weight: normal;
-  color: black;
-  margin-bottom: 4px;
-}
-
-.linky {
-  color: #1479c6;
-  text-decoration: none;
-  cursor: pointer;
-}

package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.js

@@ -1,96 +0,0 @@
-import { Host, h } from '@stencil/core';
-export class TttxPopoverContent {
-  constructor() {
-    this.header = undefined;
-    this.body = undefined;
-    this.linkcontext = undefined;
-    this.linktext = undefined;
-  }
-  render() {
-    return (h(Host, null, this.header && h("h4", null, this.header), this.body && h("p", null, this.body), this.linkcontext && (h("span", { class: "linky", onClick: evt => console.log(this.linkcontext, evt) }, this.linktext || 'More Information'))));
-  }
-  static get is() { return "tttx-popover-content"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-popover-content.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-popover-content.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "header": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "header",
-        "reflect": false
-      },
-      "body": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "body",
-        "reflect": false
-      },
-      "linkcontext": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "linkcontext",
-        "reflect": false
-      },
-      "linktext": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "linktext",
-        "reflect": false
-      }
-    };
-  }
-}

package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.stories.js

@@ -1,23 +0,0 @@
-export default {
-  title: 'Atoms/PopoverContent',
-  component: 'tttx-popover-content',
-  argTypes: {
-    header: {
-      control: {
-        type: 'text',
-      },
-    },
-    body: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-const Template = ({ header, body, linkcontext }) => `<tttx-popover-content header="${header}" body="${body}" linkcontext="${linkcontext}" />`;
-export const Basic = Template.bind({});
-Basic.args = {
-  header: 'HEADER',
-  body: 'BODY',
-  linkcontext: 'TESTING123',
-};