@3t-transform/threeteeui 0.0.6 → 0.0.7

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

@@ -1,47 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-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}";
-
-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/collection/components/components/tttx-icon/tttx-icon.css

@@ -1,89 +0,0 @@
-@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

@@ -1,59 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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/collection/components/patterns/tttx-page/tttx-page.css

@@ -1,162 +0,0 @@
-@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

@@ -1,213 +0,0 @@
-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 }, h("slot", null)))));
-  }
-  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

@@ -1,80 +0,0 @@
-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;
-    }
-  }
-};