@3t-transform/threeteeui 0.0.2 → 0.0.3

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

@@ -38,7 +38,7 @@ const TttxWorksheet = class {
     });
   }
   render() {
-    const customPageWidth = this.pageSizeIsNumeric ? { width: `${this.pageSize}px` } : {};
+    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) }))));
   }
 };

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

@@ -31,7 +31,7 @@ export class TttxWorksheet {
     });
   }
   render() {
-    const customPageWidth = this.pageSizeIsNumeric ? { width: `${this.pageSize}px` } : {};
+    const customPageWidth = this.pageSizeIsNumeric() ? { width: `${this.pageSize}px` } : {};
     return (h(Host, null, h("div", { class: this.pageSizeClasses('worksheet__container'), style: Object.assign({}, customPageWidth) }, h("slot", null), h("div", { class: `worksheet__footer--${this.pageSize}`, ref: el => (this.footerBar = el) }))));
   }
   static get is() { return "tttx-worksheet"; }

package/dist/components/tttx-worksheet2.js

@@ -34264,7 +34264,7 @@ const TttxWorksheet = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
   }
   render() {
-    const customPageWidth = this.pageSizeIsNumeric ? { width: `${this.pageSize}px` } : {};
+    const customPageWidth = this.pageSizeIsNumeric() ? { width: `${this.pageSize}px` } : {};
     return (h(Host, null, h("div", { class: this.pageSizeClasses('worksheet__container'), style: Object.assign({}, customPageWidth) }, h("slot", null), h("div", { class: `worksheet__footer--${this.pageSize}`, ref: el => (this.footerBar = el) }))));
   }
   static get style() { return tttxWorksheetCss; }

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

@@ -34,7 +34,7 @@ const TttxWorksheet = class {
     });
   }
   render() {
-    const customPageWidth = this.pageSizeIsNumeric ? { width: `${this.pageSize}px` } : {};
+    const customPageWidth = this.pageSizeIsNumeric() ? { width: `${this.pageSize}px` } : {};
     return (h(Host, null, h("div", { class: this.pageSizeClasses('worksheet__container'), style: Object.assign({}, customPageWidth) }, h("slot", null), h("div", { class: `worksheet__footer--${this.pageSize}`, ref: el => (this.footerBar = el) }))));
   }
 };

package/dist/tttx/p-997a8339.entry.js

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

package/dist/tttx/tttx.esm.js

@@ -1 +1 @@
-import{p as e,b as a}from"./p-2681b874.js";(()=>{const a=import.meta.url,t={};return""!==a&&(t.resourcesUrl=new URL(".",a).href),e(t)})().then((e=>a([["p-d5c31f03",[[4,"tttx-worksheet",{pageSize:[1,"page-size"]}]]],["p-285977b3",[[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"]}]]]],e)));
+import{p as e,b as a}from"./p-2681b874.js";(()=>{const a=import.meta.url,t={};return""!==a&&(t.resourcesUrl=new URL(".",a).href),e(t)})().then((e=>a([["p-997a8339",[[4,"tttx-worksheet",{pageSize:[1,"page-size"]}]]],["p-285977b3",[[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"]}]]]],e)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3t-transform/threeteeui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "3t Design System",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/readme.md

@@ -66,7 +66,17 @@ When creating new component tags, we recommend _not_ using `stencil` in the comp
 
 Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix `ion`.
 
-We suggest: `<threetee-button>` for example.
+We suggest: `<tttx-button>` for example.
+
+## Testing Components
+
+Stencil uses a testing framework built using Jest and Puppeteer. It provides support for two types of test: Unit and End-to-End.
+
+You can find out more form their [docs](https://stenciljs.com/docs/testing-overview)
+
+For our purposes, if you are creating a component that consumes a devextreme component which is itself a container for other components (e.g. a devextreme toolbar that contains a devextreme button), you will want to create an End-to-End test for that.
+
+This is because the helper method that builds a test page in the unit tests mocks out HTML elements, and the mock class it provides doesn't define all the methods that devextreme uses when attaching the component to the container, which causes the render to fail. The End-to-End tests build the component in the browser, so we're able to render them there. 
 
 ## Using this component
 
@@ -74,6 +84,10 @@ There are three strategies we recommend for using web components built with Sten
 
 The first step for all three of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
 
+- First, you need to [sign up](https://www.npmjs.com/signup) for an npm account. You will also need to ask an organisation owner to add you as a member of the @3t-transform organisation.
+- Update the `version` in the package.json.
+- Publish the new version with `npm publish @3t-transform/threeteeui`
+
 ### Script tag
 
 - Put a script tag similar to this `<script type='module' src='https://unpkg.com/my-component@0.0.1/dist/my-component.esm.js'></script>` in the head of your index.html

package/dist/tttx/p-d5c31f03.entry.js

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