@3t-transform/threeteeui 0.0.4 → 0.0.6

package/dist/cjs/{index-eb8fc323.js → index-8a7479e4.js}

@@ -396,7 +396,11 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
                     1 /* VNODE_FLAGS.isSlotReference */;
         }
     }
-    if (newVNode.$flags$ & 1 /* VNODE_FLAGS.isSlotReference */) {
+    if (newVNode.$text$ !== null) {
+        // create text node
+        elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
+    }
+    else if (newVNode.$flags$ & 1 /* VNODE_FLAGS.isSlotReference */) {
         // create a slot reference node
         elm = newVNode.$elm$ =
             doc.createTextNode('');
@@ -758,7 +762,9 @@ const patch = (oldVNode, newVNode) => {
     const oldChildren = oldVNode.$children$;
     const newChildren = newVNode.$children$;
     const tag = newVNode.$tag$;
-    {
+    const text = newVNode.$text$;
+    let defaultHolder;
+    if (text === null) {
         {
             if (tag === 'slot')
                 ;
@@ -775,6 +781,11 @@ const patch = (oldVNode, newVNode) => {
             updateChildren(elm, oldChildren, newVNode, newChildren);
         }
         else if (newChildren !== null) {
+            // no old child vnodes, but there are new child vnodes to add
+            if (oldVNode.$text$ !== null) {
+                // the old vnode was text, so be sure to clear it out
+                elm.textContent = '';
+            }
             // add the new vnode children
             addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
         }
@@ -783,6 +794,15 @@ const patch = (oldVNode, newVNode) => {
             removeVnodes(oldChildren, 0, oldChildren.length - 1);
         }
     }
+    else if ((defaultHolder = elm['s-cr'])) {
+        // this element has slotted content
+        defaultHolder.parentNode.textContent = text;
+    }
+    else if (oldVNode.$text$ !== text) {
+        // update the text content for the text only vnode
+        // and also only if the text is different than before
+        elm.data = text;
+    }
 };
 const updateFallbackSlotVisibility = (elm) => {
     // tslint:disable-next-line: prefer-const

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-eb8fc323.js');
+const index = require('./index-8a7479e4.js');
 
 /*
  Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["tttx-worksheet.cjs",[[4,"tttx-worksheet",{"pageSize":[1,"page-size"]}]]],["tttx-page.cjs",[[4,"tttx-page",{"appName":[1,"app-name"],"pageTitle":[1,"page-title"],"lastUpdated":[1,"last-updated"],"manageAccountsUrl":[1,"manage-accounts-url"],"logoutUrl":[1,"logout-url"],"pageSize":[1,"page-size"],"helpUrl":[1,"help-url"]}]]]], options);
+  return index.bootstrapLazy([["tttx-worksheet.cjs",[[4,"tttx-worksheet",{"pageSize":[1,"page-size"]}]]],["tttx-page.cjs",[[4,"tttx-page",{"appName":[1,"app-name"],"pageTitle":[1,"page-title"],"lastUpdated":[1,"last-updated"],"manageAccountsUrl":[1,"manage-accounts-url"],"logoutUrl":[1,"logout-url"],"pageSize":[1,"page-size"],"helpUrl":[1,"help-url"]}]]],["tttx-icon.cjs",[[0,"tttx-icon",{"name":[1],"color":[1]}]]]], options);
   });
 };
 

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

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8a7479e4.js');
+
+const tttxIconCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto&display=swap\");@import url(\"https://fonts.googleapis.com/css2?family=Material+Icons+Round\");*{box-sizing:border-box}.flex-start{justify-content:start}.flex-end{justify-content:end}.flex-centre{justify-content:center}[class^=col-]{display:flex;padding-left:8px !important;padding-right:8px !important}h1,h2,h3,h4,h5,h6,p,label,small{margin:0;padding:0}h1,h2,h3,h4,h5,h6,p,label{display:block}*{font-family:\"Roboto\", sans-serif}html,body{font-weight:normal;font-size:16px}h1{font-weight:700;font-size:24px}h2{font-weight:700;font-size:20px}h3{font-weight:700;font-size:18px}h4{font-weight:normal;font-size:14px;text-transform:uppercase}button{font-weight:500;font-size:14px;text-transform:uppercase}small{font-weight:normal;font-size:14px}label{font-weight:700;font-size:16px}:host{display:block}.material-icons-round{vertical-align:-6px;color:var(--ui-color-lt)}";
+
+const TttxIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.name = undefined;
+    this.color = undefined;
+  }
+  render() {
+    return (index.h("span", { class: "material-icons-round", style: { color: this.color } }, this.name));
+  }
+};
+TttxIcon.style = tttxIconCss;
+
+exports.tttx_icon = TttxIcon;

package/dist/cjs/tttx-page.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-eb8fc323.js');
+const index = require('./index-8a7479e4.js');
 const toolbar = require('./toolbar-656be6e6.js');
 
 /**

package/dist/cjs/tttx-worksheet.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-eb8fc323.js');
+const index = require('./index-8a7479e4.js');
 const toolbar = require('./toolbar-656be6e6.js');
 
 const tttxWorksheetCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto&display=swap\");*{box-sizing:border-box}.flex-start{justify-content:start}.flex-end{justify-content:end}.flex-centre{justify-content:center}[class^=col-]{display:flex;padding-left:8px !important;padding-right:8px !important}h1,h2,h3,h4,h5,h6,p,label,small{margin:0;padding:0}h1,h2,h3,h4,h5,h6,p,label{display:block}*{font-family:\"Roboto\", sans-serif}html,body{font-weight:normal;font-size:16px}h1{font-weight:700;font-size:24px}h2{font-weight:700;font-size:20px}h3{font-weight:700;font-size:18px}h4{font-weight:normal;font-size:14px;text-transform:uppercase}button{font-weight:500;font-size:14px;text-transform:uppercase}small{font-weight:normal;font-size:14px}label{font-weight:700;font-size:16px}:host{display:block}.worksheet__container,.worksheet__container--large,.worksheet__container--medium,.worksheet__container--small{position:absolute;top:104px;bottom:8px;left:0px;right:0px;overflow:auto;background-color:#ffffff;clear:both}.worksheet__container,.worksheet__container--medium,.worksheet__container--small,.worksheet__footer--medium,.worksheet__footer--small{margin:0px auto}.worksheet__container--large{margin:0px 16px}.worksheet__container--medium{width:900px}.worksheet__container--small{width:600px}.worksheet__footer--medium.dx-toolbar,.worksheet__footer--small.dx-toolbar{position:fixed;bottom:0px;left:0px;right:0px;padding:0 8px}.worksheet__footer--medium.dx-toolbar{width:900px}.worksheet__footer--small.dx-toolbar{width:600px}";

package/dist/cjs/tttx.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-eb8fc323.js');
+const index = require('./index-8a7479e4.js');
 
 /*
  Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-worksheet.cjs",[[4,"tttx-worksheet",{"pageSize":[1,"page-size"]}]]],["tttx-page.cjs",[[4,"tttx-page",{"appName":[1,"app-name"],"pageTitle":[1,"page-title"],"lastUpdated":[1,"last-updated"],"manageAccountsUrl":[1,"manage-accounts-url"],"logoutUrl":[1,"logout-url"],"pageSize":[1,"page-size"],"helpUrl":[1,"help-url"]}]]]], options);
+  return index.bootstrapLazy([["tttx-worksheet.cjs",[[4,"tttx-worksheet",{"pageSize":[1,"page-size"]}]]],["tttx-page.cjs",[[4,"tttx-page",{"appName":[1,"app-name"],"pageTitle":[1,"page-title"],"lastUpdated":[1,"last-updated"],"manageAccountsUrl":[1,"manage-accounts-url"],"logoutUrl":[1,"logout-url"],"pageSize":[1,"page-size"],"helpUrl":[1,"help-url"]}]]],["tttx-icon.cjs",[[0,"tttx-icon",{"name":[1],"color":[1]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "./components/components/tttx-icon/tttx-icon.js",
     "./components/patterns/tttx-page/tttx-page.js",
     "./components/patterns/tttx-worksheet/tttx-worksheet.js"
   ],

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

@@ -0,0 +1,89 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Icons+Round");
+* {
+  box-sizing: border-box;
+}
+
+.flex-start {
+  justify-content: start;
+}
+
+.flex-end {
+  justify-content: end;
+}
+
+.flex-centre {
+  justify-content: center;
+}
+
+[class^=col-] {
+  display: flex;
+  /* we need to overright bootstrap to get the buttering we want */
+  padding-left: 8px !important;
+  padding-right: 8px !important;
+}
+
+h1, h2, h3, h4, h5, h6, p, label, small {
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p, label {
+  display: block;
+}
+
+* {
+  font-family: "Roboto", sans-serif;
+}
+
+html,
+body {
+  font-weight: normal;
+  font-size: 16px;
+}
+
+h1 {
+  font-weight: 700;
+  font-size: 24px;
+}
+
+h2 {
+  font-weight: 700;
+  font-size: 20px;
+}
+
+h3 {
+  font-weight: 700;
+  font-size: 18px;
+}
+
+h4 {
+  font-weight: normal;
+  font-size: 14px;
+  text-transform: uppercase;
+}
+
+button {
+  font-weight: 500;
+  font-size: 14px;
+  text-transform: uppercase;
+}
+
+small {
+  font-weight: normal;
+  font-size: 14px;
+}
+
+label {
+  font-weight: 700;
+  font-size: 16px;
+}
+
+:host {
+  display: block;
+}
+
+.material-icons-round {
+  vertical-align: -6px;
+  color: var(--ui-color-lt);
+}

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

@@ -0,0 +1,59 @@
+import { h } from '@stencil/core';
+export class TttxIcon {
+  constructor() {
+    this.name = undefined;
+    this.color = undefined;
+  }
+  render() {
+    return (h("span", { class: "material-icons-round", style: { color: this.color } }, this.name));
+  }
+  static get is() { return "tttx-icon"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-icon.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
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -0,0 +1,40 @@
+import './icon-button.css';
+export default {
+  title: 'Components/Icon',
+  argTypes: {
+    name: {
+      options: [
+        'check_circle',
+        'report_problem',
+        'report',
+        'menu',
+        'thumb_up'
+      ],
+      control: {
+        type: 'select'
+      },
+      defaultValue: 'check_circle',
+      description: 'The name of the icon. Exhaustive list can be found in the [Google Material Icons guide](https://fonts.google.com/icons?icon.style=Rounded&icon.set=Material+Icons)'
+    },
+    color: {
+      control: {
+        type: 'color'
+      },
+      description: 'The colour to apply to the icon. Accepts any CSS color attribute.'
+    }
+  }
+};
+const Template = (args) => `
+  <tttx-icon name='${args.name}' ${args.color ? `color='${args.color}' ` : ''}/>
+`;
+export const Default = Template.bind({});
+export const WithElements = (args) => `
+  <tttx-icon name='${args.name}'${args.color ? ` color='${args.color}'` : ''}></tttx-icon>
+  <div style='display: inline'>Inline element beside icon</div>
+  <div>Block element below Icon</div>
+`;
+export const Button = (args) => `
+  <button class='icon-example__button'>
+    <tttx-icon name='${args.name}' ${args.color ? `color='${args.color}' ` : ''}/>
+  </button>
+`;

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 /* tttx custom elements */
+export { TttxIcon as TttxIcon } from '../types/components/components/tttx-icon/tttx-icon';
 export { TttxPage as TttxPage } from '../types/components/patterns/tttx-page/tttx-page';
 export { TttxWorksheet as TttxWorksheet } from '../types/components/patterns/tttx-worksheet/tttx-worksheet';
 

package/dist/components/index.js

@@ -1,3 +1,4 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { TttxIcon, defineCustomElement as defineCustomElementTttxIcon } from './tttx-icon.js';
 export { TttxPage, defineCustomElement as defineCustomElementTttxPage } from './tttx-page.js';
 export { TttxWorksheet, defineCustomElement as defineCustomElementTttxWorksheet } from './tttx-worksheet.js';

package/dist/components/tttx-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxIcon extends Components.TttxIcon, HTMLElement {}
+export const TttxIcon: {
+  prototype: TttxIcon;
+  new (): TttxIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/tttx-icon.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const tttxIconCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto&display=swap\");@import url(\"https://fonts.googleapis.com/css2?family=Material+Icons+Round\");*{box-sizing:border-box}.flex-start{justify-content:start}.flex-end{justify-content:end}.flex-centre{justify-content:center}[class^=col-]{display:flex;padding-left:8px !important;padding-right:8px !important}h1,h2,h3,h4,h5,h6,p,label,small{margin:0;padding:0}h1,h2,h3,h4,h5,h6,p,label{display:block}*{font-family:\"Roboto\", sans-serif}html,body{font-weight:normal;font-size:16px}h1{font-weight:700;font-size:24px}h2{font-weight:700;font-size:20px}h3{font-weight:700;font-size:18px}h4{font-weight:normal;font-size:14px;text-transform:uppercase}button{font-weight:500;font-size:14px;text-transform:uppercase}small{font-weight:normal;font-size:14px}label{font-weight:700;font-size:16px}:host{display:block}.material-icons-round{vertical-align:-6px;color:var(--ui-color-lt)}";
+
+const TttxIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.name = undefined;
+    this.color = undefined;
+  }
+  render() {
+    return (h("span", { class: "material-icons-round", style: { color: this.color } }, this.name));
+  }
+  static get style() { return tttxIconCss; }
+}, [0, "tttx-icon", {
+    "name": [1],
+    "color": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxIcon$1);
+      }
+      break;
+  } });
+}
+
+const TttxIcon = TttxIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxIcon, defineCustomElement };

package/dist/esm/{index-4c11a593.js → index-854ff56f.js}

@@ -374,7 +374,11 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
                     1 /* VNODE_FLAGS.isSlotReference */;
         }
     }
-    if (newVNode.$flags$ & 1 /* VNODE_FLAGS.isSlotReference */) {
+    if (newVNode.$text$ !== null) {
+        // create text node
+        elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
+    }
+    else if (newVNode.$flags$ & 1 /* VNODE_FLAGS.isSlotReference */) {
         // create a slot reference node
         elm = newVNode.$elm$ =
             doc.createTextNode('');
@@ -736,7 +740,9 @@ const patch = (oldVNode, newVNode) => {
     const oldChildren = oldVNode.$children$;
     const newChildren = newVNode.$children$;
     const tag = newVNode.$tag$;
-    {
+    const text = newVNode.$text$;
+    let defaultHolder;
+    if (text === null) {
         {
             if (tag === 'slot')
                 ;
@@ -753,6 +759,11 @@ const patch = (oldVNode, newVNode) => {
             updateChildren(elm, oldChildren, newVNode, newChildren);
         }
         else if (newChildren !== null) {
+            // no old child vnodes, but there are new child vnodes to add
+            if (oldVNode.$text$ !== null) {
+                // the old vnode was text, so be sure to clear it out
+                elm.textContent = '';
+            }
             // add the new vnode children
             addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
         }
@@ -761,6 +772,15 @@ const patch = (oldVNode, newVNode) => {
             removeVnodes(oldChildren, 0, oldChildren.length - 1);
         }
     }
+    else if ((defaultHolder = elm['s-cr'])) {
+        // this element has slotted content
+        defaultHolder.parentNode.textContent = text;
+    }
+    else if (oldVNode.$text$ !== text) {
+        // update the text content for the text only vnode
+        // and also only if the text is different than before
+        elm.data = text;
+    }
 };
 const updateFallbackSlotVisibility = (elm) => {
     // tslint:disable-next-line: prefer-const

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-4c11a593.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-854ff56f.js';
 
 /*
  Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["tttx-worksheet",[[4,"tttx-worksheet",{"pageSize":[1,"page-size"]}]]],["tttx-page",[[4,"tttx-page",{"appName":[1,"app-name"],"pageTitle":[1,"page-title"],"lastUpdated":[1,"last-updated"],"manageAccountsUrl":[1,"manage-accounts-url"],"logoutUrl":[1,"logout-url"],"pageSize":[1,"page-size"],"helpUrl":[1,"help-url"]}]]]], options);
+  return bootstrapLazy([["tttx-worksheet",[[4,"tttx-worksheet",{"pageSize":[1,"page-size"]}]]],["tttx-page",[[4,"tttx-page",{"appName":[1,"app-name"],"pageTitle":[1,"page-title"],"lastUpdated":[1,"last-updated"],"manageAccountsUrl":[1,"manage-accounts-url"],"logoutUrl":[1,"logout-url"],"pageSize":[1,"page-size"],"helpUrl":[1,"help-url"]}]]],["tttx-icon",[[0,"tttx-icon",{"name":[1],"color":[1]}]]]], options);
   });
 };
 

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

@@ -0,0 +1,17 @@
+import { r as registerInstance, h } from './index-854ff56f.js';
+
+const tttxIconCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto&display=swap\");@import url(\"https://fonts.googleapis.com/css2?family=Material+Icons+Round\");*{box-sizing:border-box}.flex-start{justify-content:start}.flex-end{justify-content:end}.flex-centre{justify-content:center}[class^=col-]{display:flex;padding-left:8px !important;padding-right:8px !important}h1,h2,h3,h4,h5,h6,p,label,small{margin:0;padding:0}h1,h2,h3,h4,h5,h6,p,label{display:block}*{font-family:\"Roboto\", sans-serif}html,body{font-weight:normal;font-size:16px}h1{font-weight:700;font-size:24px}h2{font-weight:700;font-size:20px}h3{font-weight:700;font-size:18px}h4{font-weight:normal;font-size:14px;text-transform:uppercase}button{font-weight:500;font-size:14px;text-transform:uppercase}small{font-weight:normal;font-size:14px}label{font-weight:700;font-size:16px}:host{display:block}.material-icons-round{vertical-align:-6px;color:var(--ui-color-lt)}";
+
+const TttxIcon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.name = undefined;
+    this.color = undefined;
+  }
+  render() {
+    return (h("span", { class: "material-icons-round", style: { color: this.color } }, this.name));
+  }
+};
+TttxIcon.style = tttxIconCss;
+
+export { TttxIcon as tttx_icon };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-4c11a593.js';
+import { r as registerInstance, h, H as Host } from './index-854ff56f.js';
 import { C as CollectionWidget, B as BindableTemplate, a as Button, e as extend, i as isFunction, $, W as Widget, b as isDefined, r as registerComponent, h as hasWindow, g as getOuterWidth, m as messageLocalization, F as FunctionTemplate, L as ListSearch, D as DataSource, A as ArrayStore, c as compileGetter, n as noop, d as Deferred, G as Guid, f as getPublicElement, P as Popup, j as isPlainObject, k as ensureDefined, l as DataHelperMixin, o as getImageContainer, T as Toolbar } from './toolbar-cede4385.js';
 
 /**

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-4c11a593.js';
+import { r as registerInstance, h, H as Host } from './index-854ff56f.js';
 import { T as Toolbar, a as Button } from './toolbar-cede4385.js';
 
 const tttxWorksheetCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto&display=swap\");*{box-sizing:border-box}.flex-start{justify-content:start}.flex-end{justify-content:end}.flex-centre{justify-content:center}[class^=col-]{display:flex;padding-left:8px !important;padding-right:8px !important}h1,h2,h3,h4,h5,h6,p,label,small{margin:0;padding:0}h1,h2,h3,h4,h5,h6,p,label{display:block}*{font-family:\"Roboto\", sans-serif}html,body{font-weight:normal;font-size:16px}h1{font-weight:700;font-size:24px}h2{font-weight:700;font-size:20px}h3{font-weight:700;font-size:18px}h4{font-weight:normal;font-size:14px;text-transform:uppercase}button{font-weight:500;font-size:14px;text-transform:uppercase}small{font-weight:normal;font-size:14px}label{font-weight:700;font-size:16px}:host{display:block}.worksheet__container,.worksheet__container--large,.worksheet__container--medium,.worksheet__container--small{position:absolute;top:104px;bottom:8px;left:0px;right:0px;overflow:auto;background-color:#ffffff;clear:both}.worksheet__container,.worksheet__container--medium,.worksheet__container--small,.worksheet__footer--medium,.worksheet__footer--small{margin:0px auto}.worksheet__container--large{margin:0px 16px}.worksheet__container--medium{width:900px}.worksheet__container--small{width:600px}.worksheet__footer--medium.dx-toolbar,.worksheet__footer--small.dx-toolbar{position:fixed;bottom:0px;left:0px;right:0px;padding:0 8px}.worksheet__footer--medium.dx-toolbar{width:900px}.worksheet__footer--small.dx-toolbar{width:600px}";

package/dist/esm/tttx.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-4c11a593.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-854ff56f.js';
 
 /*
  Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["tttx-worksheet",[[4,"tttx-worksheet",{"pageSize":[1,"page-size"]}]]],["tttx-page",[[4,"tttx-page",{"appName":[1,"app-name"],"pageTitle":[1,"page-title"],"lastUpdated":[1,"last-updated"],"manageAccountsUrl":[1,"manage-accounts-url"],"logoutUrl":[1,"logout-url"],"pageSize":[1,"page-size"],"helpUrl":[1,"help-url"]}]]]], options);
+  return bootstrapLazy([["tttx-worksheet",[[4,"tttx-worksheet",{"pageSize":[1,"page-size"]}]]],["tttx-page",[[4,"tttx-page",{"appName":[1,"app-name"],"pageTitle":[1,"page-title"],"lastUpdated":[1,"last-updated"],"manageAccountsUrl":[1,"manage-accounts-url"],"logoutUrl":[1,"logout-url"],"pageSize":[1,"page-size"],"helpUrl":[1,"help-url"]}]]],["tttx-icon",[[0,"tttx-icon",{"name":[1],"color":[1]}]]]], options);
 });

package/dist/tttx/{p-997a8339.entry.js → p-4b57de2e.entry.js}

@@ -1 +1 @@
-import{r as t,h as e,H as o}from"./p-2681b874.js";import{T as s,a as i}from"./p-d038fe18.js";const r=class{constructor(e){t(this,e),this.pageSize="large"}componentDidLoad(){this.footer()}pageSizeIsNumeric(){return/^\d+$/.test(this.pageSize)}pageSizeClasses(t){return this.pageSizeIsNumeric()?t:`${t}--${this.pageSize}`}footer(){["medium","small"].includes(this.pageSize)&&new s(this.footerBar,{items:[{location:"after",widget:i,options:{text:"save"}}]})}render(){const t=this.pageSizeIsNumeric()?{width:`${this.pageSize}px`}:{};return e(o,null,e("div",{class:this.pageSizeClasses("worksheet__container"),style:Object.assign({},t)},e("slot",null),e("div",{class:`worksheet__footer--${this.pageSize}`,ref:t=>this.footerBar=t})))}};r.style='@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");*{box-sizing:border-box}.flex-start{justify-content:start}.flex-end{justify-content:end}.flex-centre{justify-content:center}[class^=col-]{display:flex;padding-left:8px !important;padding-right:8px !important}h1,h2,h3,h4,h5,h6,p,label,small{margin:0;padding:0}h1,h2,h3,h4,h5,h6,p,label{display:block}*{font-family:"Roboto", sans-serif}html,body{font-weight:normal;font-size:16px}h1{font-weight:700;font-size:24px}h2{font-weight:700;font-size:20px}h3{font-weight:700;font-size:18px}h4{font-weight:normal;font-size:14px;text-transform:uppercase}button{font-weight:500;font-size:14px;text-transform:uppercase}small{font-weight:normal;font-size:14px}label{font-weight:700;font-size:16px}:host{display:block}.worksheet__container,.worksheet__container--large,.worksheet__container--medium,.worksheet__container--small{position:absolute;top:104px;bottom:8px;left:0px;right:0px;overflow:auto;background-color:#ffffff;clear:both}.worksheet__container,.worksheet__container--medium,.worksheet__container--small,.worksheet__footer--medium,.worksheet__footer--small{margin:0px auto}.worksheet__container--large{margin:0px 16px}.worksheet__container--medium{width:900px}.worksheet__container--small{width:600px}.worksheet__footer--medium.dx-toolbar,.worksheet__footer--small.dx-toolbar{position:fixed;bottom:0px;left:0px;right:0px;padding:0 8px}.worksheet__footer--medium.dx-toolbar{width:900px}.worksheet__footer--small.dx-toolbar{width:600px}';export{r as tttx_worksheet}
+import{r as t,h as e,H as o}from"./p-ddfeb0ba.js";import{T as s,a as i}from"./p-d038fe18.js";const r=class{constructor(e){t(this,e),this.pageSize="large"}componentDidLoad(){this.footer()}pageSizeIsNumeric(){return/^\d+$/.test(this.pageSize)}pageSizeClasses(t){return this.pageSizeIsNumeric()?t:`${t}--${this.pageSize}`}footer(){["medium","small"].includes(this.pageSize)&&new s(this.footerBar,{items:[{location:"after",widget:i,options:{text:"save"}}]})}render(){const t=this.pageSizeIsNumeric()?{width:`${this.pageSize}px`}:{};return e(o,null,e("div",{class:this.pageSizeClasses("worksheet__container"),style:Object.assign({},t)},e("slot",null),e("div",{class:`worksheet__footer--${this.pageSize}`,ref:t=>this.footerBar=t})))}};r.style='@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");*{box-sizing:border-box}.flex-start{justify-content:start}.flex-end{justify-content:end}.flex-centre{justify-content:center}[class^=col-]{display:flex;padding-left:8px !important;padding-right:8px !important}h1,h2,h3,h4,h5,h6,p,label,small{margin:0;padding:0}h1,h2,h3,h4,h5,h6,p,label{display:block}*{font-family:"Roboto", sans-serif}html,body{font-weight:normal;font-size:16px}h1{font-weight:700;font-size:24px}h2{font-weight:700;font-size:20px}h3{font-weight:700;font-size:18px}h4{font-weight:normal;font-size:14px;text-transform:uppercase}button{font-weight:500;font-size:14px;text-transform:uppercase}small{font-weight:normal;font-size:14px}label{font-weight:700;font-size:16px}:host{display:block}.worksheet__container,.worksheet__container--large,.worksheet__container--medium,.worksheet__container--small{position:absolute;top:104px;bottom:8px;left:0px;right:0px;overflow:auto;background-color:#ffffff;clear:both}.worksheet__container,.worksheet__container--medium,.worksheet__container--small,.worksheet__footer--medium,.worksheet__footer--small{margin:0px auto}.worksheet__container--large{margin:0px 16px}.worksheet__container--medium{width:900px}.worksheet__container--small{width:600px}.worksheet__footer--medium.dx-toolbar,.worksheet__footer--small.dx-toolbar{position:fixed;bottom:0px;left:0px;right:0px;padding:0 8px}.worksheet__footer--medium.dx-toolbar{width:900px}.worksheet__footer--small.dx-toolbar{width:600px}';export{r as tttx_worksheet}