@3t-transform/threeteeui 0.0.6 → 0.0.8

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a7479e4.js');
+const index = require('./index-8a4cb9bc.js');
 
 /*
- Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,8 +14,9 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["tttx-worksheet.cjs",[[4,"tttx-worksheet",{"pageSize":[1,"page-size"]}]]],["tttx-page.cjs",[[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"]}]]],["tttx-icon.cjs",[[0,"tttx-icon",{"name":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["tttx-input.cjs",[[1,"tttx-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]}]]],["tttx-button.cjs",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]]], options);
   });
 };
 
+exports.setNonce = index.setNonce;
 exports.defineCustomElements = defineCustomElements;

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

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8a4cb9bc.js');
+
+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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.clickEvent = index.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 (index.h(index.Host, null, index.h("button", { onClick: this.onClick.bind(this), class: `button ${this.fontColor} ${this.buttonStyle}` }, index.h("span", null, index.h("slot", null)))));
+  }
+};
+TttxButton.style = tttxButtonCss;
+
+exports.tttx_button = TttxButton;

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

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8a4cb9bc.js');
+
+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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChanged = index.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 (index.h(index.Host, null, index.h("div", { class: "field spacing" }, this.label && index.h("label", { class: "label" }, this.label, !this.required ? index.h("span", { class: "optional" }, " (optional)") : ''), index.h("input", { type: "checkbox", class: "input", onChange: event => this.handleClick(event), checked: this.value }))));
+  }
+};
+TttxCheckbox.style = tttxCheckboxCss;
+
+exports.tttx_checkbox = TttxCheckbox;

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

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8a4cb9bc.js');
+
+const TttxForm = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.formSubmit = index.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 (index.h("div", null, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+
+exports.tttx_form = TttxForm;