@3t-transform/threeteeui 0.2.75 → 0.2.76

package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.css

@@ -6,168 +6,120 @@
   font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
 }
 
-.material-symbols-rounded {
-  font-family: "Material Symbols Rounded", sans-serif;
+label {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 19px;
+  color: #212121;
+}
+label .optional {
+  color: #757575;
   font-weight: normal;
-  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;
+label .outer-container {
+  position: relative;
 }
-
-.icon-left span,
-.icon-right span {
-  font-size: 24px;
-  line-height: 24px;
-  text-align: center;
-  display: block;
-  width: 24px;
+label .outer-container .left-icons,
+label .outer-container .right-icons {
+  display: flex;
+  position: absolute;
   height: 24px;
-  margin-top: 4px;
-}
-
-.icon-left span {
-  margin-left: 4px;
-}
-
-.icon-right span {
-  margin-right: 4px;
-}
-
-.icon-right {
-  margin-top: 5px;
+  gap: 8px;
 }
-
-.icon-left {
-  margin-top: 5px;
-  margin-left: 4px;
-}
-
-.iconleft .input {
-  padding-left: 4px;
+label .outer-container .left-icons tttx-icon,
+label .outer-container .right-icons tttx-icon {
+  height: 24px;
+  width: 24px;
 }
-
-.iconright .input {
-  padding-right: 4px;
+label .outer-container .left-icons {
+  left: 8px;
 }
-
-.input-icon {
-  position: absolute;
-  margin-top: 9px;
-  margin-left: 4px;
+label .outer-container .right-icons {
+  right: 8px;
 }
-
-.errormsg {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  float: left;
-  margin-bottom: 16px;
+label .outer-container input {
+  color: #212121;
   box-sizing: border-box;
-  background-color: transparent;
-  height: 26px;
-  font-size: 14px;
-  line-height: 16px;
-  border-radius: none;
-  z-index: 2;
-  color: #dc0000;
-}
-
-.errormsg .validationicon {
-  width: 16px;
-  height: 16px;
-  font-size: 16px;
-  line-height: 19px;
-  margin-right: 4px;
-  vertical-align: middle;
-  color: #dc0000;
-}
-
-.danger {
-  color: #dc0000;
+  border: 1px solid #d5d5d5;
+  border-radius: 4px;
+  padding: 0;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-top: 4px;
+  /* iPhone OS fix */
 }
-
-.optional {
-  color: #757575;
-  font-weight: normal;
+label .outer-container input.has-input-icon {
+  padding-left: 40px;
 }
-
-label.inputBlock {
-  display: block;
-  position: relative;
-  line-height: 21px;
+label .outer-container input.has-input-icon.has-left-icon {
+  padding-left: 72px;
 }
-
-label.inputInline {
-  display: flex;
-  white-space: nowrap;
-  align-items: center;
+label .outer-container input.has-left-icon {
+  padding-left: 40px;
 }
-label.inputInline .input-container {
-  margin: 0 4px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  position: relative;
+label .outer-container input.has-right-icon {
+  padding-right: 40px;
 }
-
-label {
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 19px;
-  margin-bottom: 16px;
+label .outer-container input.invalid {
+  border: 1px solid #dc0000;
 }
-
-input:not([type=submit]) {
+label .outer-container input:not([type=submit]) {
   font-family: "Roboto", serif;
-  box-sizing: border-box;
   width: 100%;
   height: 36px;
-  padding: 0 16px;
   font-size: 16px;
   line-height: 19px;
-  border: 1px solid #d5d5d5;
-  border-radius: 4px;
-  margin-top: 4px;
 }
-
-/* iPhone OS fix */
-input[type=date] {
+label .outer-container input[type=date] {
   background: white;
   display: block;
   min-width: calc(100% - 18px);
   line-height: 37px;
 }
-
-/* Android device date alignment fix */
-@media (max-width: 600px) {
-  input[type=date] {
-    padding-top: 6px;
-  }
+label .outer-container input[readonly] {
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+  color: gray;
 }
-input.invalid:invalid, input.standalone.invalid {
-  border: 1px solid #dc0000;
+label .outer-container input:focus {
+  border-color: #1479c6;
 }
-
-.input-icon ~ input {
-  padding: 0 32px;
+label .outer-container input:focus-visible {
+  outline: none;
 }
-
-input ~ .errorBubble {
+label .outer-container.inputBlock {
+  display: flex;
+  align-items: center;
+  line-height: 21px;
+}
+label .outer-container.inputBlock .left-icons,
+label .outer-container.inputBlock .right-icons {
+  margin-top: 4px;
+}
+label .outer-container.inputBlock.readonly {
+  pointer-events: none;
+  user-select: none;
+  color: gray;
+}
+label .outer-container.inputInline {
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+  margin: 0;
+}
+label .outer-container.inputInline input {
+  margin-top: 0;
+}
+label .secondarylabel {
+  color: #757575;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: normal;
+  display: flex;
+  margin-top: 4px;
+}
+label .errorBubble {
   position: relative;
   font-size: 14px;
   line-height: 16px;
@@ -181,80 +133,32 @@ input ~ .errorBubble {
   justify-items: center;
   margin-top: 4px;
 }
-
-input ~ .errorBubble:not(.visible) {
+label .errorBubble:not(.visible) {
   display: none;
 }
-
-input ~ .errorBubble span {
+label .errorBubble span {
   color: #dc0000;
   font-size: 16px;
   margin-right: 4px;
 }
 
-input.invalid:invalid ~ .errorBubble {
-  position: relative;
-  font-size: 14px;
-  font-weight: normal;
-  width: 100%;
-  font-family: "Roboto", sans-serif;
-  color: #dc0000;
-}
-
-input:focus {
-  border-color: #1479c6;
-}
-
-input:focus-visible {
-  outline: none;
-}
-
-.secondarylabel {
-  color: #757575;
-  font-size: 14px;
-  line-height: 16px;
-  font-weight: normal;
-  display: flex;
-  margin-top: 4px;
-}
-
-label.inputBlock.readonly {
-  pointer-events: none;
-  user-select: none;
-  color: gray;
-}
-
-input[readonly] {
-  cursor: default;
-  pointer-events: none;
-  user-select: none;
-  color: gray;
+.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;
 }
 
 :host {
   display: block;
-}
-
-.input-container {
-  position: relative;
-}
-
-#icon-left {
-  position: absolute;
-  left: 8px;
-  top: 10px;
-}
-
-#icon-left ~ input {
-  padding-left: 36px;
-}
-
-#icon-right {
-  position: absolute;
-  right: 8px;
-  top: 10px;
-}
-
-#icon-right ~ input {
-  padding-right: 36px;
 }

package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js

@@ -66,8 +66,13 @@ export class TttxInput {
     this.rightIconClick.emit();
   }
   render() {
-    const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
-    return (h(Host, null, h("label", { class: this.inline ? 'inputInline' : 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', h("div", { class: "input-container" }, this.inputicon && (h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: this.inputiconcolor, onClick: this.handleInputIconClick.bind(this) })), this.iconleft && (h("tttx-icon", { id: "icon-left", icon: this.iconleft, color: this.iconleftcolor, onClick: this.handleLeftIconClick.bind(this) })), this.iconright && (h("tttx-icon", { id: "icon-right", icon: this.iconright, color: this.iconrightcolor, onClick: this.handleRightIconClick.bind(this) })), h("input", { class: classNames, autocapitalize: this.inputautocapitalize, autofocus: this.inputautofocus, enterkeyhint: this.inputkeyhint, tabindex: this.inputindex, title: this.inputtitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.secondarylabel && h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
+    const classNames = [
+      this.showerrormsg ? 'invalid' : '',
+      this.inputicon ? 'has-input-icon' : '',
+      this.iconleft ? 'has-left-icon' : '',
+      this.iconright ? 'has-right-icon' : '',
+    ].join(' ');
+    return (h(Host, null, h("label", null, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', h("div", { class: ['outer-container', this.inline ? 'inputInline' : 'inputBlock'].join(' ') }, h("input", { class: classNames, autocapitalize: this.inputautocapitalize, autofocus: this.inputautofocus, enterkeyhint: this.inputkeyhint, tabindex: this.inputindex, title: this.inputtitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), (this.inputicon || this.iconleft) && (h("span", { class: "left-icons" }, this.inputicon && (h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: this.inputiconcolor, onClick: this.handleInputIconClick.bind(this) })), this.iconleft && (h("tttx-icon", { class: "left-icon", icon: this.iconleft, color: this.iconleftcolor, onClick: this.handleLeftIconClick.bind(this) })))), this.iconright && (h("span", { class: "right-icons" }, h("tttx-icon", { class: "right-icon", icon: this.iconright, color: this.iconrightcolor, onClick: this.handleRightIconClick.bind(this) })))), this.secondarylabel && h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded" }, "warning"), " ", this.errormsg)))));
   }
   static get is() { return "tttx-standalone-input"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js

@@ -1,7 +1,14 @@
+import { withActions } from '@storybook/addon-actions/decorator';
 import icons from '../../../icons';
 export default {
   title: 'Molecules/Standalone Input',
   component: 'tttx-standalone-input',
+  parameters: {
+    actions: {
+      handles: ['valueChanged', 'focusChanged', 'blurChanged', 'invalidChanged', 'inputIconClick', 'leftIconClick', 'rightIconClick'],
+    },
+  },
+  decorators: [withActions],
   argTypes: {
     iconleft: {
       options: icons,
@@ -108,8 +115,8 @@ const TemplateTextInput = ({ iconleft, iconleftcolor, iconright, iconrightcolor,
   ${min ? `min=${min}` : ''}
   ${minlength ? `minlength=${minlength}` : ''}
   ${name ? `name=${name}` : ''}
-  ${pattern ? `pattern=${pattern}` : ''}
-  ${placeholder ? `placeholder=${placeholder}` : ''}
+  ${pattern ? `pattern="${pattern}"` : ''}
+  ${placeholder ? `placeholder="${placeholder}"` : ''}
   ${readonly ? 'readonly' : ''}
   ${required ? 'required' : ''}
   ${step ? 'step' : ''}
@@ -127,7 +134,7 @@ InputField.args = {
   errormsg: 'Please enter your first name',
   required: false,
   showerrormsg: false,
-  placeholder: 'Enter first name',
+  placeholder: 'Enter your first name',
 };
 export const searchField = TemplateTextInput.bind({});
 searchField.args = {
@@ -139,9 +146,20 @@ searchField.args = {
   showerrormsg: false,
   showerrorbubble: false,
   placeholder: 'Search',
-  inline: false,
+  inline: true,
   inputicon: 'search',
-  iconright: 'cancel'
+  iconleft: 'add',
+  iconright: 'cancel',
+};
+export const dateField = TemplateTextInput.bind({});
+dateField.args = {
+  value: '',
+  label: 'Date of birth',
+  type: 'date',
+  errormsg: 'Please enter your date of birth',
+  required: true,
+  showerrormsg: false,
+  showerrorbubble: false,
 };
 // export const TextInputIconLeft = TemplateTextInput.bind({});
 // TextInputIconLeft.args = {

package/dist/components/tttx-button2.js

@@ -1,7 +1,7 @@
 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{cursor:pointer}.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:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:inline-block}tttx-icon{cursor:inherit}.spacingleft{margin-left:8px}";
+const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}button{cursor:pointer}.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:500}.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:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:inline-block}tttx-icon{cursor:inherit}.spacingleft{margin-left:8px}";
 
 const TttxButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -27,7 +27,7 @@ const TttxButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     this._iconcolor = this.iconcolor;
-    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 }))))));
+    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", {