@3t-transform/threeteeui 0.0.13 → 0.0.15

package/dist/collection/index.js

@@ -1 +0,0 @@
-export {};

package/dist/components/index.d.ts

@@ -1,38 +0,0 @@
-/* tttx custom elements */
-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 { TttxList as TttxList } from '../types/components/molecules/tttx-list/tttx-list';
-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';
-export { TttxInput as TttxStandaloneInput } from '../types/components/molecules/tttx-standalone-input/tttx-standalone-input';
-
-/**
- * Used to manually set the base path where assets can be found.
- * If the script is used as "module", it's recommended to use "import.meta.url",
- * such as "setAssetPath(import.meta.url)". Other options include
- * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
- * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
- * But do note that this configuration depends on how your script is bundled, or lack of
- * bundling, and where your assets can be loaded from. Additionally custom bundling
- * will have to ensure the static assets are copied to its build directory.
- */
-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;
-  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
-}
-export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-export * from '../types';

package/dist/components/index.js

@@ -1,9 +0,0 @@
-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 { TttxList, defineCustomElement as defineCustomElementTttxList } from './tttx-list.js';
-export { TttxLoadingSpinner, defineCustomElement as defineCustomElementTttxLoadingSpinner } from './tttx-loading-spinner.js';
-export { TttxPopoverContent, defineCustomElement as defineCustomElementTttxPopoverContent } from './tttx-popover-content.js';
-export { TttxStandaloneInput, defineCustomElement as defineCustomElementTttxStandaloneInput } from './tttx-standalone-input.js';

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

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

package/dist/components/tttx-button.js

@@ -1,45 +0,0 @@
-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;color:white}.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

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

@@ -1,46 +0,0 @@
-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}.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}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.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}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}: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-form.d.ts

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

package/dist/components/tttx-form.js

@@ -1,203 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const tttxFormCss = ".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}.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}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.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}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}.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;color:white}.primary-blue:hover{background:#1169ba}.primary-blue:active{background:#0951a8}.secondary-white{background:white;border:1px solid #212121}:host{display:block}fieldset{margin:0;padding:0;border:none}input[type=submit]{margin-left:auto}";
-
-const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.submitEvent = createEvent(this, "submitEvent", 7);
-    this.template = document.createElement('template');
-    this.formschema = undefined;
-    this.submitValue = undefined;
-  }
-  onFormSchemaChange(newValue) {
-    if (typeof newValue === 'string') {
-      this._formSchema = JSON.parse(newValue);
-    }
-    else {
-      this._formSchema = newValue;
-    }
-  }
-  validityCheck(event) {
-    var _a, _b, _c, _d;
-    event.preventDefault();
-    const target = event.target;
-    let hasError = true;
-    let errorMessage = '';
-    // validity object on HTML5 inputs has the following options
-    // badInput
-    // customError
-    // patternMismatch
-    // rangeOverflow
-    // rangeUnderflow
-    // stepMismatch
-    // tooLong
-    // tooShort
-    // typeMismatch
-    // valid
-    // valueMissing
-    // customErrors can be set with
-    // target.setCustomValidity('custom error!');
-    // and cleared with
-    // target.setCustomValidity('');
-    if (target.validity.valueMissing) {
-      errorMessage = (_a = target.dataset.required) !== null && _a !== void 0 ? _a : 'This field is required';
-    }
-    else if (target.validity.patternMismatch) {
-      errorMessage = (_b = target.dataset.pattern) !== null && _b !== void 0 ? _b : 'Incorrect format';
-    }
-    else if (target.validity.badInput) {
-      // IE string in a number field
-      errorMessage = (_c = target.dataset.badinput) !== null && _c !== void 0 ? _c : 'Wrong input type';
-    }
-    else if (target.validity.rangeOverflow || target.validity.rangeUnderflow) {
-      // IE date or number is above or below value set in min or max tags
-      errorMessage = (_d = target.dataset.range) !== null && _d !== void 0 ? _d : 'Invalid value';
-    }
-    else {
-      // no error
-      hasError = false;
-    }
-    if (hasError) {
-      target.className = 'invalid';
-      const errorIcon = document.createElement('span');
-      errorIcon.className = 'material-symbols-rounded';
-      errorIcon.textContent = 'warning';
-      target.parentElement.querySelector('.errorBubble').replaceChildren();
-      target.parentElement.querySelector('.errorBubble').append(errorIcon);
-      target.parentElement.querySelector('.errorBubble').append(errorMessage);
-    }
-    else {
-      target.className = '';
-      target.parentElement.querySelector('.errorBubble').replaceChildren();
-    }
-  }
-  doSubmit(event) {
-    event.preventDefault();
-    const formData = new FormData(event.target);
-    // Key value pair matching the key names given by the JSON schema will be output line by line
-    // TODO: Emit an event so external components can handle the resulting form data
-    // let output = "";
-    // for (var [key, value] of formData.entries()) {
-    //     output += `${key} -> ${value}\n`;
-    // }
-    // console.log(output);
-    this.submitEvent.emit(formData);
-  }
-  fieldsetChange(event) {
-    console.log(event.target.name + ' has changed');
-    // The correct input box will always be the target of the incoming event
-    // TODO: Emit an event so external components can change based on form values input
-  }
-  componentWillLoad() {
-    // set proper on initial render
-    this.onFormSchemaChange(this.formschema);
-  }
-  componentWillRender() {
-    this.template.content.replaceChildren(); // clear the template to account for a potential re-render scenario
-    this.populateFormFromSchema();
-  }
-  populateFormFromSchema() {
-    if (!this._formSchema)
-      return;
-    const properties = this._formSchema.properties;
-    const propertyKeys = Object.keys(properties);
-    propertyKeys.forEach(formKey => {
-      var _a, _b, _c;
-      const formItem = properties[formKey];
-      const formProperties = formItem.form;
-      const input = document.createElement('input');
-      input.name = formKey;
-      input.type = formProperties.type;
-      input.placeholder = (_a = formProperties.placeholder) !== null && _a !== void 0 ? _a : '';
-      input.autocomplete = 'off';
-      input.autocapitalize = 'off';
-      if (formProperties.validation) {
-        const validation = formProperties.validation;
-        if (validation.required) {
-          input.setAttribute('required', '');
-          input.setAttribute('data-required', (_b = validation.required.message) !== null && _b !== void 0 ? _b : '');
-        }
-        if (validation.pattern) {
-          input.setAttribute('pattern', validation.pattern.pattern);
-          input.setAttribute('data-pattern', (_c = validation.pattern.message) !== null && _c !== void 0 ? _c : '');
-        }
-        if (validation.badInput) {
-          input.setAttribute('data-badinput', validation.badInput.message);
-        }
-        if (validation.minmax) {
-          input.setAttribute('min', validation.minmax.min);
-          input.setAttribute('max', validation.minmax.max);
-          input.setAttribute('data-range', validation.minmax.message);
-        }
-        if (validation.maxlength) {
-          input.setAttribute('maxlength', validation.maxlength);
-        }
-      }
-      const errorBubble = document.createElement('div');
-      errorBubble.className = 'errorBubble';
-      const label = document.createElement('label');
-      label.className = 'inputBlock';
-      label.innerText = formProperties.label;
-      if (!formProperties.validation) {
-        const optionalSpan = document.createElement('span');
-        optionalSpan.className = 'optional';
-        optionalSpan.innerHTML = ' (optional)';
-        label.appendChild(optionalSpan);
-      }
-      label.appendChild(input);
-      label.appendChild(errorBubble);
-      this.template.content.append(label);
-    });
-    const submitButton = document.createElement('input');
-    submitButton.type = 'submit';
-    submitButton.className = 'button primary-blue';
-    console.log(this.submitValue);
-    submitButton.value = 'Save';
-    this.template.content.append(submitButton);
-  }
-  componentDidRender() {
-    if (!this._formSchema)
-      return;
-    const formItems = this.template.content.cloneNode(true);
-    // bind to events here as you can't do it in a template in stencil
-    const properties = this._formSchema.properties;
-    const propertyKeys = Object.keys(properties);
-    propertyKeys.forEach(formKey => {
-      formItems.querySelector(`[name=${formKey}]`).oninvalid = this.validityCheck.bind(this);
-      formItems.querySelector(`[name=${formKey}]`).onblur = this.validityCheck.bind(this);
-    });
-    // append to the fieldset
-    this.fieldset.appendChild(formItems);
-  }
-  render() {
-    return (h(Host, null, h("form", { onSubmit: this.doSubmit.bind(this) }, h("fieldset", { onChange: this.fieldsetChange, ref: el => (this.fieldset = el) }))));
-  }
-  static get watchers() { return {
-    "formschema": ["onFormSchemaChange"]
-  }; }
-  static get style() { return tttxFormCss; }
-}, [1, "tttx-form", {
-    "formschema": [8],
-    "submitValue": [8, "submit-value"]
-  }]);
-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.d.ts

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

package/dist/components/tttx-icon.js

@@ -1,6 +0,0 @@
-import { T as TttxIcon$1, d as defineCustomElement$1 } from './tttx-icon2.js';
-
-const TttxIcon = TttxIcon$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { TttxIcon, defineCustomElement };