@3t-transform/threeteeui 0.0.6 → 0.0.7

package/dist/components/index.d.ts

@@ -1,7 +1,9 @@
 /* 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 { TttxSingleInput as TttxSingleInput } from '../types/components/atoms/tttx-single-input/tttx-single-input';
+export { TttxTextBox as TttxTextBox } from '../types/components/atoms/tttx-text-box/tttx-text-box';
 
 /**
  * Used to manually set the base path where assets can be found.
@@ -15,6 +17,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,6 @@
-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';
+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 { TttxSingleInput, defineCustomElement as defineCustomElementTttxSingleInput } from './tttx-single-input.js';
+export { TttxTextBox, defineCustomElement as defineCustomElementTttxTextBox } from './tttx-text-box.js';

package/dist/components/{tttx-page.d.ts → tttx-button.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 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-worksheet.d.ts → tttx-checkbox.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 TttxCheckbox extends Components.TttxCheckbox, HTMLElement {}
+export const TttxCheckbox: {
+  prototype: TttxCheckbox;
+  new (): TttxCheckbox;
 };
 /**
  * Used to define this component and all nested components recursively.

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\";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;font-size:16px;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{height:16px;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;color:white;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-icon.d.ts → tttx-form.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface TttxIcon extends Components.TttxIcon, HTMLElement {}
-export const TttxIcon: {
-  prototype: TttxIcon;
-  new (): TttxIcon;
+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-single-input.d.ts

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

package/dist/components/tttx-single-input.js

@@ -0,0 +1,71 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const tttxSingleInputCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";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;font-size:16px;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{height:16px;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;color:white;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}.errorstate{border-color:#DC0000}";
+
+const TttxSingleInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.handleFocus = () => {
+      this.isfocused = true;
+    };
+    this.handleBlur = () => {
+      this.isfocused = false;
+    };
+    this.isfocused = false;
+    this.label = undefined;
+    this.valid = undefined;
+    this.showerrormsg = undefined;
+    this.errormsg = undefined;
+    this.value = undefined;
+    this.type = 'text';
+    this.placeholder = undefined;
+    this.pattern = undefined;
+    this.iconleft = undefined;
+    this.iconright = undefined;
+    this.required = undefined;
+  }
+  handleChange(event) {
+    const target = event.target;
+    this.value = target.value;
+    this.valueChanged.emit(target.value);
+  }
+  render() {
+    const inputClass = ['container', this.showerrormsg ? 'errorstate' : '', this.isfocused ? 'focused' : '', this.iconleft ? 'iconleft' : ''].join(' ');
+    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("div", { class: inputClass }, this.iconleft && (h("div", { class: "icon-left" }, h("span", { class: "material-symbols-rounded" }, this.iconleft))), h("input", { class: "input", onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), type: this.type, placeholder: this.placeholder, value: this.value, onInput: event => this.handleChange(event) }), this.iconright && (h("div", { class: "icon-right" }, h("span", { class: "material-symbols-rounded" }, this.iconright)))), this.showerrormsg && this.errormsg && h("div", { class: "errormsg" }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
+  }
+  static get style() { return tttxSingleInputCss; }
+}, [1, "tttx-single-input", {
+    "label": [1],
+    "valid": [4],
+    "showerrormsg": [4],
+    "errormsg": [1],
+    "value": [1025],
+    "type": [1],
+    "placeholder": [1],
+    "pattern": [1],
+    "iconleft": [1],
+    "iconright": [1],
+    "required": [4],
+    "isfocused": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-single-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-single-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxSingleInput$1);
+      }
+      break;
+  } });
+}
+
+const TttxSingleInput = TttxSingleInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxSingleInput, defineCustomElement };

package/dist/components/tttx-text-box.d.ts

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

package/dist/components/tttx-text-box.js

@@ -0,0 +1,59 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const tttxTextBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";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;font-size:16px;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{height:16px;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;color:white;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}.errorstate{border-color:#DC0000}";
+
+const TttxTextBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.handleFocus = () => {
+      this.isfocused = true;
+    };
+    this.handleBlur = () => {
+      this.isfocused = false;
+    };
+    this.label = undefined;
+    this.showerrormsg = undefined;
+    this.errormsg = undefined;
+    this.required = undefined;
+    this.value = undefined;
+    this.isfocused = false;
+  }
+  handleChange(event) {
+    const target = event.target;
+    this.value = target.value;
+    this.valueChanged.emit(target.value);
+  }
+  render() {
+    const inputClass = ['container', this.showerrormsg ? 'errorstate' : '', this.isfocused ? 'focused' : ''].join(' ');
+    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("div", { class: inputClass }, h("input", { class: "input", type: "text", value: this.value, required: this.required, onInput: event => this.handleChange(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this) })), this.showerrormsg && this.errormsg && h("div", { class: "errormsg" }, this.errormsg))));
+  }
+  static get style() { return tttxTextBoxCss; }
+}, [1, "tttx-text-box", {
+    "label": [1],
+    "showerrormsg": [4],
+    "errormsg": [1],
+    "required": [4],
+    "value": [1025],
+    "isfocused": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-text-box"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-text-box":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxTextBox$1);
+      }
+      break;
+  } });
+}
+
+const TttxTextBox = TttxTextBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxTextBox, defineCustomElement };