@3t-transform/threeteeui 0.0.16 → 0.0.18

package/dist/collection/index.js

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

package/dist/components/index.d.ts

@@ -3,6 +3,8 @@ export { TttxButton as TttxButton } from '../types/components/atoms/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 { TttxInputCalendar as TttxInputCalendar } from '../types/components/molecules/tttx-input-calendar/tttx-input-calendar';
+export { TttxKeyvalueBlock as TttxKeyvalueBlock } from '../types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block';
 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';

package/dist/components/index.js

@@ -3,6 +3,8 @@ export { TttxButton, defineCustomElement as defineCustomElementTttxButton } from
 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 { TttxInputCalendar, defineCustomElement as defineCustomElementTttxInputCalendar } from './tttx-input-calendar.js';
+export { TttxKeyvalueBlock, defineCustomElement as defineCustomElementTttxKeyvalueBlock } from './tttx-keyvalue-block.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';

package/dist/components/tttx-button.js

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

package/dist/components/tttx-button2.js

@@ -0,0 +1,56 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './tttx-icon2.js';
+
+const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;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-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}:host{display:inline-block}.spacingleft{margin-left:8px}";
+
+const TttxButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this._iconcolor = 'black';
+    this.notext = undefined;
+    this.icon = undefined;
+    this.iconposition = 'left';
+    this.design = 'default';
+  }
+  componentWillLoad() {
+    this._design = this.design;
+    const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
+    if (!designs.includes(this.design)) {
+      this._design = 'default';
+    }
+    if (this._design === 'primary' || this._design === 'danger') {
+      this._iconcolor = 'white';
+    }
+  }
+  render() {
+    return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''}  ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
+  }
+  static get style() { return tttxButtonCss; }
+}, [1, "tttx-button", {
+    "notext": [4],
+    "icon": [1],
+    "iconposition": [1],
+    "design": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-button", "tttx-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxButton);
+      }
+      break;
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { TttxButton as T, defineCustomElement as d };

package/dist/components/tttx-checkbox.js

@@ -2,42 +2,42 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 
 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$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;