@3t-transform/threeteeui 0.1.5 → 0.1.7

package/dist/cjs/tttx.cjs.js

@@ -1,23 +1,131 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-906c2757.js');
+const index = require('./index-11cfdabe.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
  */
+const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
 const patchBrowser = () => {
+    // NOTE!! This fn cannot use async/await!
+    if (index.BUILD.isDev && !index.BUILD.isTesting) {
+        index.consoleDevInfo('Running in development mode.');
+    }
+    if (index.BUILD.cssVarShim) {
+        // shim css vars
+        index.plt.$cssShim$ = index.win.__cssshim;
+    }
+    if (index.BUILD.cloneNodeFix) {
+        // opted-in to polyfill cloneNode() for slot polyfilled components
+        patchCloneNodeFix(index.H.prototype);
+    }
+    if (index.BUILD.profile && !performance.mark) {
+        // not all browsers support performance.mark/measure (Safari 10)
+        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,
+        // simply stub the implementations out.
+        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)
+        // @ts-ignore
+        performance.mark = performance.measure = () => {
+            /*noop*/
+        };
+        performance.getEntriesByName = () => [];
+    }
+    // @ts-ignore
+    const scriptElm = index.BUILD.scriptDataOpts || index.BUILD.safari10 || index.BUILD.dynamicImportShim
+        ? Array.from(index.doc.querySelectorAll('script')).find((s) => new RegExp(`\/${index.NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) ||
+            s.getAttribute('data-stencil-namespace') === index.NAMESPACE)
+        : null;
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('tttx.cjs.js', document.baseURI).href));
-    const opts = {};
-    if (importMeta !== '') {
+    const opts = index.BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};
+    if (index.BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {
+        // Safari < v11 support: This IF is true if it's Safari below v11.
+        // This fn cannot use async/await since Safari didn't support it until v11,
+        // however, Safari 10 did support modules. Safari 10 also didn't support "nomodule",
+        // so both the ESM file and nomodule file would get downloaded. Only Safari
+        // has 'onbeforeload' in the script, and "history.scrollRestoration" was added
+        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.
+        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.
+        return {
+            then() {
+                /* promise noop */
+            },
+        };
+    }
+    if (!index.BUILD.safari10 && importMeta !== '') {
         opts.resourcesUrl = new URL('.', importMeta).href;
     }
+    else if (index.BUILD.dynamicImportShim || index.BUILD.safari10) {
+        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, index.win.location.href)).href;
+        if (index.BUILD.dynamicImportShim) {
+            patchDynamicImport(opts.resourcesUrl, scriptElm);
+        }
+        if (index.BUILD.dynamicImportShim && !index.win.customElements) {
+            // module support, but no custom elements support (Old Edge)
+            // @ts-ignore
+            return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-dom" */ './dom-9deb26c8.js'); }).then(() => opts);
+        }
+    }
     return index.promiseResolve(opts);
 };
+const patchDynamicImport = (base, orgScriptElm) => {
+    const importFunctionName = getDynamicImportFunction(index.NAMESPACE);
+    try {
+        // test if this browser supports dynamic imports
+        // There is a caching issue in V8, that breaks using import() in Function
+        // By generating a random string, we can workaround it
+        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info
+        index.win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
+    }
+    catch (e) {
+        // this shim is specifically for browsers that do support "esm" imports
+        // however, they do NOT support "dynamic" imports
+        // basically this code is for old Edge, v18 and below
+        const moduleMap = new Map();
+        index.win[importFunctionName] = (src) => {
+            const url = new URL(src, base).href;
+            let mod = moduleMap.get(url);
+            if (!mod) {
+                const script = index.doc.createElement('script');
+                script.type = 'module';
+                script.crossOrigin = orgScriptElm.crossOrigin;
+                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {
+                    type: 'application/javascript',
+                }));
+                mod = new Promise((resolve) => {
+                    script.onload = () => {
+                        resolve(index.win[importFunctionName].m);
+                        script.remove();
+                    };
+                });
+                moduleMap.set(url, mod);
+                index.doc.head.appendChild(script);
+            }
+            return mod;
+        };
+    }
+};
+const patchCloneNodeFix = (HTMLElementPrototype) => {
+    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
+    HTMLElementPrototype.cloneNode = function (deep) {
+        if (this.nodeName === 'TEMPLATE') {
+            return nativeCloneNodeFn.call(this, deep);
+        }
+        const clonedNode = nativeCloneNodeFn.call(this, false);
+        const srcChildNodes = this.childNodes;
+        if (deep) {
+            for (let i = 0; i < srcChildNodes.length; i++) {
+                // Node.ATTRIBUTE_NODE === 2, and checking because IE11
+                if (srcChildNodes[i].nodeType !== 2) {
+                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
+                }
+            }
+        }
+        return clonedNode;
+    };
+};
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"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-form.cjs",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-button_2.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}],[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
+  appGlobals.globalScripts();
+  return index.bootstrapLazy([["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"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-form.cjs",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
 });
-
-exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -6,12 +6,13 @@
     "./components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js",
     "./components/atoms/tttx-loading-spinner/tttx-loading-spinner.js",
     "./components/molecules/tttx-form/tttx-form.js",
-    "./components/molecules/tttx-list/tttx-list.js"
+    "./components/molecules/tttx-list/tttx-list.js",
+    "./components/molecules/tttx-toolbar/tttx-toolbar.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.3",
-    "typescriptVersion": "4.9.4"
+    "version": "2.20.0",
+    "typescriptVersion": "4.8.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/atoms/tttx-button/test/tttx-button.e2e.js

@@ -0,0 +1,9 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('tttx-button', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<tttx-button></tttx-button>');
+    const element = await page.find('tttx-button');
+    expect(element).toHaveClass('hydrated');
+  });
+});

package/dist/collection/components/atoms/tttx-button/test/tttx-button.spec.js

@@ -0,0 +1,83 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxButton } from '../tttx-button';
+describe('tttx-button', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [TttxButton],
+      html: '<tttx-button></tttx-button>',
+    });
+    expect(page.root).toEqualHtml(`
+            <tttx-button>
+                <mock:shadow-root>
+                    <button class="button default">
+                        <div class="button-content">
+                            <slot></slot>
+                        </div>
+                    </button>
+                </mock:shadow-root>
+            </tttx-button>
+        `);
+  });
+  it('renders a white icon', async () => {
+    const page = await newSpecPage({
+      components: [TttxButton],
+      html: '<tttx-button design="primary" icon="person"></tttx-button>',
+    });
+    expect(page.root).toEqualHtml(`
+            <tttx-button design="primary" icon="person">
+                <mock:shadow-root>
+                    <button class="button iconleft primary withicon">
+                        <div class="icon-left">
+                            <tttx-icon color="white" icon="person"></tttx-icon>
+                        </div>
+                        <div class="button-content">
+                            <slot></slot>
+                        </div>
+                    </button>
+                </mock:shadow-root>
+            </tttx-button>
+        `);
+  });
+  it('design doesn\'t exist', async () => {
+    const page = await newSpecPage({
+      components: [TttxButton],
+      html: '<tttx-button design="memphis" icon="person"></tttx-button>',
+    });
+    expect(page.root).toEqualHtml(`
+            <tttx-button design="memphis" icon="person">
+                <mock:shadow-root>
+                    <button class="button default iconleft withicon">
+                        <div class="icon-left">
+                            <tttx-icon color="black" icon="person"></tttx-icon>
+                        </div>
+                        <div class="button-content">
+                            <slot></slot>
+                        </div>
+                    </button>
+                </mock:shadow-root>
+            </tttx-button>
+        `);
+  });
+  it('clicks', async () => {
+    const page = await newSpecPage({
+      components: [TttxButton],
+      html: '<tttx-button></tttx-button>',
+    });
+    expect(page.root).toEqualHtml(`
+            <tttx-button>
+                <mock:shadow-root>
+                    <button class="button default">
+                        <div class="button-content">
+                            <slot></slot>
+                        </div>
+                    </button>
+                </mock:shadow-root>
+            </tttx-button>
+        `);
+    const callbackFn = jest.fn();
+    // add an event listener directly to the tttx-button host and click it
+    page.root.addEventListener('click', callbackFn);
+    page.root.click();
+    expect(callbackFn).toHaveBeenCalled();
+  });
+});

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

@@ -1,116 +1,110 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Host, h } from '@stencil/core';
-import { transformTagName } from '../../../transform-tag-name';
-export class TttxButton {
-  constructor() {
-    this._iconcolor = 'black';
-    this.notext = undefined;
-    this.icon = undefined;
-    this.iconposition = 'left';
-    this.design = 'default';
-  }
-  connectedCallback() {
-    const TttxButton = transformTagName('tttx-button', 'tttx-button', this.el);
-    this.buttonEl = this.el.closest(TttxButton);
-  }
-  componentWillLoad() {
-    this._design = this.design;
-    const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
-    if (!designs.includes(this.design)) {
-      this._design = 'default';
-    }
-    if (this._design === 'primary' || this._design === 'danger') {
-      this._iconcolor = 'white';
-    }
-  }
-  render() {
-    return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''}  ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
-  }
-  static get is() { return "tttx-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "notext": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "notext",
-        "reflect": false
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "icon",
-        "reflect": false
-      },
-      "iconposition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'left' | 'right'",
-          "resolved": "\"left\" | \"right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "iconposition",
-        "reflect": false,
-        "defaultValue": "'left'"
-      },
-      "design": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "design",
-        "reflect": false,
-        "defaultValue": "'default'"
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Host, h } from '@stencil/core';
+export class TttxButton {
+  constructor() {
+    this._iconcolor = 'black';
+    this.notext = undefined;
+    this.icon = undefined;
+    this.iconposition = 'left';
+    this.design = 'default';
+  }
+  componentWillLoad() {
+    this._design = this.design;
+    const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
+    if (!designs.includes(this.design)) {
+      this._design = 'default';
+    }
+    if (this._design === 'primary' || this._design === 'danger') {
+      this._iconcolor = 'white';
+    }
+  }
+  render() {
+    return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''}  ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
+  }
+  static get is() { return "tttx-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "notext": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "notext",
+        "reflect": false
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "iconposition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right'",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "iconposition",
+        "reflect": false,
+        "defaultValue": "'left'"
+      },
+      "design": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "design",
+        "reflect": false,
+        "defaultValue": "'default'"
+      }
+    };
+  }
+}

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

@@ -1,7 +1,7 @@
-export default {
-  title: 'Atoms/Button',
-  component: 'tttx-button'
-};
+export default {
+  title: 'Atoms/Button',
+  component: 'tttx-button'
+};
 const PrimaryButtons = () => `
 <h2>Standard</h2>
 <tttx-button design="primary">Primary</tttx-button>
@@ -14,8 +14,8 @@ const PrimaryButtons = () => `
 <hr />
 <h2>Icon Only</h2>
 <tttx-button design="primary" icon="more_vert" notext></tttx-button>
-`;
-export const Primary = PrimaryButtons.bind({});
+`;
+export const Primary = PrimaryButtons.bind({});
 const DefaultButtons = () => `
 <h2>Standard</h2>
 <tttx-button>Default</tttx-button>
@@ -28,8 +28,8 @@ const DefaultButtons = () => `
 <hr />
 <h2>Icon Only</h2>
 <tttx-button icon="more_vert" notext></tttx-button>
-`;
-export const Default = DefaultButtons.bind({});
+`;
+export const Default = DefaultButtons.bind({});
 const BorderlessButtons = () => `
 <h2>Standard</h2>
 <tttx-button design="borderless">Borderless</tttx-button>
@@ -42,8 +42,8 @@ const BorderlessButtons = () => `
 <hr />
 <h2>Icon Only</h2>
 <tttx-button design="borderless" icon="more_vert" notext></tttx-button>
-`;
-export const Borderless = BorderlessButtons.bind({});
+`;
+export const Borderless = BorderlessButtons.bind({});
 const DangerButtons = () => `
 <h2>Standard</h2>
 <tttx-button design="danger">Danger</tttx-button>
@@ -56,8 +56,8 @@ const DangerButtons = () => `
 <hr />
 <h2>Icon Only</h2>
 <tttx-button design="danger" icon="more_vert" notext></tttx-button>
-`;
-export const Danger = DangerButtons.bind({});
+`;
+export const Danger = DangerButtons.bind({});
 const DisabledButtons = () => `
 <h2>Standard</h2>
 <tttx-button design="disabled">Disabled</tttx-button>
@@ -70,5 +70,5 @@ const DisabledButtons = () => `
 <hr />
 <h2>Icon Only</h2>
 <tttx-button design="disabled" icon="more_vert" notext></tttx-button>
-`;
-export const Disabled = DisabledButtons.bind({});
+`;
+export const Disabled = DisabledButtons.bind({});

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

@@ -0,0 +1,9 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('tttx-icon', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<tttx-icon></tttx-icon>');
+    const element = await page.find('tttx-icon');
+    expect(element).toHaveClass('hydrated');
+  });
+});

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

@@ -0,0 +1,16 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxIcon } from '../tttx-icon';
+describe('tttx-icon', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [TttxIcon],
+      html: '<tttx-icon color="danger" icon="warning"></tttx-icon>',
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-icon color="danger" icon="warning">
+            <mock:shadow-root>
+                <span class="material-symbols-rounded danger">warning</span>
+            </mock:shadow-root>
+        </tttx-icon>`);
+  });
+});

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

@@ -83,6 +83,10 @@
   color: #dc0000;
 }
 
+.darkred {
+  color: #A20000;
+}
+
 .orange {
   color: #f59500;
 }