@3t-transform/threeteeui 0.0.6 → 0.0.8

package/dist/components/index.d.ts

@@ -1,7 +1,11 @@
 /* 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';
+export { TttxButton as TttxButton } from '../types/components/atoms/tttx-button/tttx-button';
+export { TttxCheckbox as TttxCheckbox } from '../types/components/atoms/ttx-checkbox/tttx-checkbox';
+export { TttxForm as TttxForm } from '../types/components/molecules/tttx-form/tttx-form';
+export { TttxIcon as TttxIcon } from '../types/components/atoms/tttx-icon/tttx-icon';
+export { TttxInput as TttxInput } from '../types/components/molecules/tttx-input/tttx-input';
+export { TttxLoadingSpinner as TttxLoadingSpinner } from '../types/components/atoms/tttx-loading-spinner/tttx-loading-spinner';
+export { TttxPopoverContent as TttxPopoverContent } from '../types/components/atoms/tttx-popover-content/tttx-popover-content';
 
 /**
  * Used to manually set the base path where assets can be found.
@@ -15,6 +19,15 @@ export { TttxWorksheet as TttxWorksheet } from '../types/components/patterns/ttt
  */
 export declare const setAssetPath: (path: string) => void;
 
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
 export interface SetPlatformOptions {
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;

package/dist/components/index.js

@@ -1,4 +1,8 @@
-export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { TttxButton, defineCustomElement as defineCustomElementTttxButton } from './tttx-button.js';
+export { TttxCheckbox, defineCustomElement as defineCustomElementTttxCheckbox } from './tttx-checkbox.js';
+export { TttxForm, defineCustomElement as defineCustomElementTttxForm } from './tttx-form.js';
 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';
+export { TttxInput, defineCustomElement as defineCustomElementTttxInput } from './tttx-input.js';
+export { TttxLoadingSpinner, defineCustomElement as defineCustomElementTttxLoadingSpinner } from './tttx-loading-spinner.js';
+export { TttxPopoverContent, defineCustomElement as defineCustomElementTttxPopoverContent } from './tttx-popover-content.js';

package/dist/components/{tttx-worksheet.d.ts → tttx-button.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface TttxWorksheet extends Components.TttxWorksheet, HTMLElement {}
-export const TttxWorksheet: {
-  prototype: TttxWorksheet;
-  new (): TttxWorksheet;
+interface TttxButton extends Components.TttxButton, HTMLElement {}
+export const TttxButton: {
+  prototype: TttxButton;
+  new (): TttxButton;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/tttx-button.js

@@ -0,0 +1,45 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.button{height:36px;padding:8px 16px;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button:hover{background:#f0f0f0}.button:active{background:#e3e3e3}.primary-blue{background:#1479c6;border:1px solid #1479c6}.primary-blue:hover{background:#1169ba}.primary-blue:active{background:#0951a8}.secondary-white{background:white;border:1px solid #212121}:host{display:inline-block}.spacingleft{margin-left:8px}.font-white{color:white}.font-black{color:#212121}";
+
+const TttxButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.clickEvent = createEvent(this, "clickEvent", 7);
+    this.fontColor = undefined;
+    this.buttonStyle = undefined;
+  }
+  onClick() {
+    this.clickEvent.emit('clicked');
+  }
+  onClicked(event) {
+    console.log('Picked up a clickEvent', event);
+  }
+  render() {
+    return (h(Host, null, h("button", { onClick: this.onClick.bind(this), class: `button ${this.fontColor} ${this.buttonStyle}` }, h("span", null, h("slot", null)))));
+  }
+  static get style() { return tttxButtonCss; }
+}, [1, "tttx-button", {
+    "fontColor": [1, "font-color"],
+    "buttonStyle": [1, "button-style"]
+  }, [[0, "clickEvent", "onClicked"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxButton$1);
+      }
+      break;
+  } });
+}
+
+const TttxButton = TttxButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxButton, defineCustomElement };

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

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

package/dist/components/tttx-checkbox.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}";
+
+const TttxCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.value = undefined;
+    this.label = undefined;
+    this.required = undefined;
+  }
+  handleClick(event) {
+    const target = event.target;
+    this.value = target.checked;
+    this.valueChanged.emit(target.checked);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "field spacing" }, this.label && h("label", { class: "label" }, this.label, !this.required ? h("span", { class: "optional" }, " (optional)") : ''), h("input", { type: "checkbox", class: "input", onChange: event => this.handleClick(event), checked: this.value }))));
+  }
+  static get style() { return tttxCheckboxCss; }
+}, [1, "tttx-checkbox", {
+    "value": [4],
+    "label": [1],
+    "required": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxCheckbox$1);
+      }
+      break;
+  } });
+}
+
+const TttxCheckbox = TttxCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxCheckbox, defineCustomElement };

package/dist/components/{tttx-page.d.ts → tttx-form.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface TttxPage extends Components.TttxPage, HTMLElement {}
-export const TttxPage: {
-  prototype: TttxPage;
-  new (): TttxPage;
+interface TttxForm extends Components.TttxForm, HTMLElement {}
+export const TttxForm: {
+  prototype: TttxForm;
+  new (): TttxForm;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/tttx-form.js

@@ -0,0 +1,75 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.formSubmit = createEvent(this, "formSubmit", 7);
+    this.fetchFormData = () => {
+      let validForm = true;
+      const formData = {};
+      const elements = this.el.querySelectorAll(`[${this.dataAttribute}]`);
+      elements.forEach((element) => {
+        const inputElement = element;
+        validForm = validForm ? this.validateFormField(inputElement) : false;
+        formData[inputElement.getAttribute(this.dataAttribute)] = inputElement.value;
+      });
+      return validForm ? formData : null;
+    };
+    this.dataAttribute = 'form-data';
+    this.functionAttribute = 'function-data';
+  }
+  validateFormField(element) {
+    let isValid = true;
+    const isRequired = element.hasAttribute("required");
+    if (isRequired && !element.value) {
+      // required and not set, show error
+      element.setAttribute("showerrormsg", "true");
+      isValid = false;
+    }
+    else {
+      // required and set, ensure error does not show
+      element.removeAttribute("showerrormsg");
+    }
+    return isValid;
+  }
+  componentDidLoad() {
+    const elements = this.el.querySelectorAll(`[${this.functionAttribute}]`);
+    elements.forEach((element) => {
+      element.addEventListener('click', event => {
+        event.preventDefault();
+        const formData = this.fetchFormData();
+        if (formData) {
+          // only emit event if form data is valid
+          this.formSubmit.emit(this.fetchFormData());
+        }
+      });
+    });
+  }
+  render() {
+    return (h("div", null, h("slot", null)));
+  }
+  get el() { return this; }
+}, [1, "tttx-form", {
+    "dataAttribute": [1, "data-attribute"],
+    "functionAttribute": [1, "function-attribute"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-form"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-form":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxForm$1);
+      }
+      break;
+  } });
+}
+
+const TttxForm = TttxForm$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxForm, defineCustomElement };

package/dist/components/tttx-icon.js

@@ -1,35 +1,4 @@
-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;
-  } });
-}
+import { T as TttxIcon$1, d as defineCustomElement$1 } from './tttx-icon2.js';
 
 const TttxIcon = TttxIcon$1;
 const defineCustomElement = defineCustomElement$1;