@3t-transform/threeteeui 0.0.1

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

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-eb8fc323.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}";
+
+const TttxWorksheet = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.pageSize = 'large';
+  }
+  componentDidLoad() {
+    this.footer();
+  }
+  pageSizeIsNumeric() {
+    return /^\d+$/.test(this.pageSize);
+  }
+  pageSizeClasses(baseClassName) {
+    return this.pageSizeIsNumeric() ? baseClassName : `${baseClassName}--${this.pageSize}`;
+  }
+  footer() {
+    if (!['medium', 'small'].includes(this.pageSize)) {
+      return;
+    }
+    new toolbar.Toolbar(this.footerBar, {
+      items: [
+        {
+          location: 'after',
+          widget: toolbar.Button,
+          options: {
+            text: 'save'
+          }
+        }
+      ]
+    });
+  }
+  render() {
+    const customPageWidth = this.pageSizeIsNumeric ? { width: `${this.pageSize}px` } : {};
+    return (index.h(index.Host, null, index.h("div", { class: this.pageSizeClasses('worksheet__container'), style: Object.assign({}, customPageWidth) }, index.h("slot", null), index.h("div", { class: `worksheet__footer--${this.pageSize}`, ref: el => (this.footerBar = el) }))));
+  }
+};
+TttxWorksheet.style = tttxWorksheetCss;
+
+exports.tttx_worksheet = TttxWorksheet;

package/dist/cjs/tttx.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-eb8fc323.js');
+
+/*
+ Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    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 !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["tttx-worksheet.cjs",[[4,"tttx-worksheet",{"pageSize":[1,"page-size"]}]]],["tttx-page.cjs",[[0,"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);
+});

package/dist/collection/collection-manifest.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    "./components/patterns/tttx-page/tttx-page.js",
+    "./components/patterns/tttx-worksheet/tttx-worksheet.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.20.0",
+    "typescriptVersion": "4.8.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/patterns/tttx-page/tttx-page.css

@@ -0,0 +1,162 @@
+@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;
+  /* 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;
+}
+
+.page {
+  background-color: #F0F0F0;
+  width: 100%;
+  height: 100%;
+}
+
+.page__platform-bar.dx-toolbar {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  background-color: #142748;
+  color: #ffffff;
+  font-size: 24px;
+  padding: 0 8px;
+}
+
+.page__title-bar__container,
+.page__title-bar__container--large,
+.page__title-bar__container--medium,
+.page__title-bar__container--small {
+  position: fixed;
+  top: 52px;
+  left: 0px;
+  right: 0px;
+}
+.page__title-bar__container .dx-toolbar,
+.page__title-bar__container--large .dx-toolbar,
+.page__title-bar__container--medium .dx-toolbar,
+.page__title-bar__container--small .dx-toolbar {
+  color: #212121;
+  background-color: #F0F0F0;
+  font-size: 24px;
+}
+
+.page__title-bar__container,
+.page__title-bar__container--medium,
+.page__title-bar__container--small {
+  margin: 0px auto;
+}
+
+.page__title-bar__container--large {
+  margin: 0px 16px;
+}
+
+.page__title-bar__container--medium {
+  width: 900px;
+}
+
+.page__title-bar__container--small {
+  width: 600px;
+}
+
+.page__title-bar__after-container__label {
+  font-size: 14px;
+  color: #757575;
+  font-weight: 300;
+}
+
+.page__title-bar__after-container__value {
+  font-size: 14px;
+  color: #111111;
+  font-weight: 400;
+  margin: 0 10px 0 0;
+}
+
+.page__platform-bar__button .dx-button-mode-text .dx-icon {
+  color: white;
+}
+
+.page__platform-bar__button__dropdown-options .dx-dropdownbutton-content .dx-list .dx-list-item:last-of-type::before {
+  width: 90%;
+  margin: auto 5%;
+  height: 1px;
+  content: "";
+  position: absolute;
+  background: grey;
+}

package/dist/collection/components/patterns/tttx-page/tttx-page.js

@@ -0,0 +1,213 @@
+import { Host, h } from '@stencil/core';
+import dxToolbar from 'devextreme/esm/ui/toolbar';
+import dxDropDownButton from 'devextreme/esm/ui/drop_down_button';
+import dxButton from 'devextreme/esm/ui/button';
+export class TttxPage {
+  constructor() {
+    this.appName = undefined;
+    this.pageTitle = undefined;
+    this.lastUpdated = undefined;
+    this.manageAccountsUrl = undefined;
+    this.logoutUrl = undefined;
+    this.pageSize = 'large';
+    this.helpUrl = undefined;
+  }
+  componentDidLoad() {
+    new dxToolbar(this.platformBar, {
+      items: [
+        {
+          location: 'before',
+          locateInMenu: 'never',
+          text: this.appName
+        },
+        {
+          location: 'after',
+          widget: dxDropDownButton,
+          cssClass: 'page__platform-bar__button',
+          options: {
+            icon: 'overflow',
+            keyExpr: 'id',
+            displayExpr: 'text',
+            stylingMode: 'text',
+            showArrowIcon: false,
+            dropDownOptions: { width: '200', wrapperAttr: { class: 'page__platform-bar__button__dropdown-options' } },
+            items: this.platformBarButtonItems()
+          }
+        }
+      ]
+    });
+    new dxToolbar(this.pageTitleBar, {
+      items: [
+        {
+          location: 'before',
+          text: this.pageTitle
+        },
+        {
+          location: 'after',
+          html: `<span class='page__title-bar__after-container__label'>Last updated</span> <span class='page__title-bar__after-container__value'>${this.lastUpdated}</span>`
+        },
+        {
+          location: 'after',
+          widget: dxButton,
+          options: {
+            text: 'help',
+            icon: 'help',
+            stylingMode: 'outlined',
+            onClick: () => { window.open(this.helpUrl, '_blank'); }
+          }
+        }
+      ]
+    });
+  }
+  platformBarButtonItems() {
+    return [
+      { id: 1, text: 'Manage Accounts', icon: "user", onClick: () => { window.open(this.manageAccountsUrl, '_blank'); } },
+      { id: 2, text: 'Logout', icon: "runner", onClick: () => { window.location.href = this.logoutUrl; } }
+    ];
+  }
+  pageSizeIsNumeric() {
+    return /^\d+$/.test(this.pageSize);
+  }
+  pageSizeClasses(baseClassName) {
+    return this.pageSizeIsNumeric() ? baseClassName : `${baseClassName}--${this.pageSize}`;
+  }
+  render() {
+    const customPageWidth = this.pageSizeIsNumeric ? { width: `${this.pageSize}px` } : {};
+    return (h(Host, { style: { margin: '0px', overflow: 'hidden' } }, h("div", { class: "page" }, h("div", { class: 'page__platform-bar', ref: el => (this.platformBar = el) }), h("div", { class: this.pageSizeClasses('page__title-bar__container'), style: Object.assign({}, customPageWidth) }, h("div", { ref: el => (this.pageTitleBar = el) })), h("tttx-worksheet", { pageSize: this.pageSize }))));
+  }
+  static get is() { return "tttx-page"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-page.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-page.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "appName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "app-name",
+        "reflect": false
+      },
+      "pageTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "page-title",
+        "reflect": false
+      },
+      "lastUpdated": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "last-updated",
+        "reflect": false
+      },
+      "manageAccountsUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "manage-accounts-url",
+        "reflect": false
+      },
+      "logoutUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "logout-url",
+        "reflect": false
+      },
+      "pageSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'large' | 'medium' | 'small' | string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "page-size",
+        "reflect": false,
+        "defaultValue": "'large'"
+      },
+      "helpUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "help-url",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/patterns/tttx-page/tttx-page.stories.js

@@ -0,0 +1,80 @@
+export default {
+  title: 'Patterns/Page Layout',
+  argTypes: {
+    appName: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: 'Application Name',
+      description: 'The name of the application to be displayed at the top of the page'
+    },
+    pageTitle: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: 'Page Title',
+      description: 'The page title to be displayed below the application name'
+    },
+    lastUpdated: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: '09 Dec 2022',
+      description: 'The date the page was last updated'
+    },
+    manageAccountsUrl: {
+      defaultValue: 'example.com.',
+      description: "A link to the management page for the user's account"
+    },
+    logoutUrl: {
+      defaultValue: 'example.com.',
+      description: 'A url to logout of the app'
+    },
+    pageSize: {
+      options: [
+        'large',
+        'medium',
+        'small',
+        '800'
+      ],
+      control: {
+        type: 'select'
+      },
+      description: 'A control on the width of the page. Accepts three preset sizes (large, medium and small), as well as a number of pixels'
+    },
+    helpUrl: {
+      defaultValue: 'example.com.',
+      description: 'A link to a help page'
+    }
+  },
+  decorators: [
+    (Story) => `
+      <div style="height: 500px; transform: translateZ(0)">
+        <span decorator-start />
+          ${Story()}
+        <span decorator-end />
+      </div>
+    `
+  ]
+};
+const Template = (args) => `
+  <tttx-page 
+    app-name="${args.appName || ''}" 
+    page-title="${args.pageTitle || ''}" 
+    last-updated="${args.lastUpdated || ''}" 
+    manage-accounts-url=${args.manageAccountsUrl} 
+    logout-url=${args.logoutUrl}
+    ${args.pageSize ? `page-size=${args.pageSize}` : ''}
+    help-url=${args.helpUrl}>
+  </tttx-page>
+`;
+export const Default = Template.bind({});
+Default.parameters = {
+  docs: {
+    transformSource: source => {
+      var _a;
+      const [, output] = (_a = source.match(/<span decorator-start \/>([\s\S]*?)<span decorator-end \/>/)) !== null && _a !== void 0 ? _a : [];
+      return output;
+    }
+  }
+};

package/dist/collection/components/patterns/tttx-worksheet/tttx-worksheet.css

@@ -0,0 +1,134 @@
+@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;
+  /* 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;
+}
+
+.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;
+}