@sankhyalabs/ezui 1.1.70 → 1.1.73

package/dist/collection/components/ez-button/ez-button.js

@@ -11,9 +11,9 @@ export class EzButton {
     this.mode = "regular";
   }
   handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
     if (this.mode == "link") {
-      const slot = ev.target;
-      const content = slot.assignedElements()[0];
       content.style.display = "inline";
       if (slot.name == "leftIcon") {
         content.style.paddingRight = "var(--button__inline__icon--padding)";
@@ -22,6 +22,9 @@ export class EzButton {
         content.style.paddingLeft = "var(--button__inline__icon--padding)";
       }
     }
+    else {
+      content.style.setProperty('--ez-icon--color', 'var(--ez-icon--color)');
+    }
   }
   render() {
     if (this.mode == "icon") {

package/dist/collection/components/ez-date-input/ez-date-input.css

@@ -1,19 +1,10 @@
 :host {
   display: block;
   width: 100%;
-  /*@doc Define a cor de fundo do input.*/
-  --it__input--background-color: var(--background--medium, #e0e0e0);
-  /*@doc Define a cor da borda do input.*/
-  --it__input--border-color: var(--it__input--background-color);
   /*@doc Contém a imagem do calendário.*/
   --di__calendar-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="15px"><path d="M 3.171875,5.25 C 2.6485088,5.25 2.21875,5.6797588 2.21875,6.203125 2.21875,6.7264912 2.6485088,7.15625 3.171875,7.15625 3.6952412,7.15625 4.125,6.7264912 4.125,6.203125 4.125,5.6797588 3.6952412,5.25 3.171875,5.25 Z m 2.875,0 C 5.5235088,5.25 5.09375,5.6797588 5.09375,6.203125 5.09375,6.7264912 5.5235088,7.15625 6.046875,7.15625 6.5702412,7.15625 7,6.7264912 7,6.203125 7,5.6797588 6.5702412,5.25 6.046875,5.25 Z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.9511719,-0.4297588 0.9511719,-0.953125 C 9.8730469,5.6797588 9.4452412,5.25 8.921875,5.25 Z m 2.873047,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.953125 0.953125,0.953125 0.523366,0 0.953125,-0.4297588 0.953125,-0.953125 C 12.748047,5.6797588 12.318288,5.25 11.794922,5.25 Z M 3.171875,8.1230469 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 0.5233662,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 C 6.5702412,10.029297 7,9.5995381 7,9.0761719 7,8.5528057 6.5702412,8.1230469 6.046875,8.1230469 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297587,0.9531251 0.953125,0.9531251 0.5233661,0 0.9531249,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.9531251 0.953125,0.9531251 0.523367,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.171875,10.998047 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 C 6.5702412,12.904297 7,12.474538 7,11.951172 7,11.427806 6.5702412,10.998047 6.046875,10.998047 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297587,0.953125 0.953125,0.953125 0.5233661,0 0.9531249,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.429759,0.953125 0.953125,0.953125 0.523367,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.5,0 c -0.554,0 -1,0.446 -1,1 v 0.050781 C 1.0853217,1.2909766 0,2.5186658 0,4 v 9 c 0,1.652487 1.3475134,3 3,3 h 9 c 1.652487,0 3,-1.347513 3,-3 V 4 C 15,2.5186658 13.914678,1.2909766 12.5,1.0507812 V 1 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 C 4.5,0.446 4.054,0 3.5,0 Z m 1,2.0996094 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 v -0.640625 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 V 2.1738281 C 13.311725,2.3905225 13.900391,3.11278 13.900391,4 v 9 c 0,1.062113 -0.838278,1.900391 -1.900391,1.900391 H 3 C 1.9378864,14.900391 1.0996094,14.062113 1.0996094,13 V 4 C 1.0996094,3.11278 1.6882747,2.3905225 2.5,2.1738281 v 0.5664063 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 z"/></svg>');
 }
 
-.text-input {
-  --it__input--background-color: inherit;
-  --it__input--border-color: inherit;
-}
-
 .btn-open-cal {
   outline: none;
   border: none;

package/dist/collection/components/ez-date-input/ez-date-input.js

@@ -1,5 +1,6 @@
 import { Component, Element, Host, h, Prop, Watch, Event } from '@stencil/core';
 import { DateUtils } from '@sankhyalabs/core';
+import CSSVarsUtils from '../../utils/CSSVarsUtils';
 export class EzDateInput {
   constructor() {
     /**
@@ -57,9 +58,12 @@ export class EzDateInput {
   getTextValue(d) {
     return d ? new Intl.DateTimeFormat('pt-BR').format(d) : null;
   }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+  }
   render() {
     return (h(Host, null,
-      h("ez-text-input", { class: "text-input", ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => { if (event.key === 'H' || event.key === 'h')
+      h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => { if (event.key === 'H' || event.key === 'h')
           this.changeValue(new Date()); }, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage },
         h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })),
       h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));

package/dist/collection/components/ez-list/ez-list.css

@@ -0,0 +1,131 @@
+:host {
+
+  /* @doc Define o raio da borda do componente. */
+  --list__host--border-radius: var(--border--radius-medium, 12px);
+  /* @doc Define o espaçamento entre a lista e o componente. */
+  --list__host--padding: var(--space--medium, 12px);
+  /* @doc Define o espaçamento interno do ícone. */
+  --list__icon__padding: var(--space--small, 6px);
+  /* --list__item__padding: var(--space--small, 6px); */
+  /* @doc Define o espaçamento externo do item da lista. */
+  --list__item__margin: 0 var(--space--small, 6px);
+  /* @doc Define a cor do texto do item da lista. */
+  --list__item--color: var(--title--primary, #2b3a54);
+  /* @doc Define o estilo borda inferior do item da lista. */
+  --list__item--border-bottom: var(--border--small, 1px solid);
+  /* @doc Define a cor da borda inferior do item da lista. */
+  --list__item--border-color: var(--title--primary, #2b3a54);
+  /* @doc Define o estilo do texto do item da lista. */
+  --list__item--font-family: var(--font-pattern, #2b3a54);
+  /* @doc Define o tamanho do texto do item da lista. */
+  --list__item--font-size: var(--text--medium, 14px);
+  /* @doc Define a imagem do ícone de drag. */
+  --list__draggable__icon--image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m 12,16 a 2,2 0 0 1 2,2 2,2 0 0 1 -2,2 2,2 0 0 1 -2,-2 2,2 0 0 1 2,-2 m 0,-6 a 2,2 0 0 1 2,2 2,2 0 0 1 -2,2 2,2 0 0 1 -2,-2 2,2 0 0 1 2,-2 m 0,-6 a 2,2 0 0 1 2,2 2,2 0 0 1 -2,2 2,2 0 0 1 -2,-2 2,2 0 0 1 2,-2 z"/></svg>');
+
+  border-radius: var(--list__host--border-radius);
+  padding: var(--list__host--padding);
+  max-height: 100%;
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+}
+
+.draggable {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  /* padding: 0 var(--list__item__padding); */
+  flex: 1;
+}
+
+.draggable-list {
+  color: var(--text-color);
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+}
+
+.draggable-list li {
+  background-color: #fff;
+  display: flex;
+  margin: var(--list__item__margin);
+  font-family: var(--list__item--font-family);
+  font-size: var(--list__item--font-size);
+  color: var(--list__item--color);
+}
+
+.draggable-list li:not(:last-of-type) {
+  border-bottom: var(--list__item--border-bottom);
+}
+
+.draggable-list li.over .draggable {
+  background-color: var(--background--strong);
+}
+
+.draggable:hover {
+  background-color: var(--background--medium);
+}
+
+.draggable-selected {
+  background-color: var(--background--strong) !important;
+}
+
+.draggable-selected div:hover {
+  background-color: var(--background--strong) !important;
+}
+
+
+/* Precisamos dos tokens do scrollbar */
+.draggable-list::-webkit-scrollbar-track {
+  background-color: #f0f2f5;
+}
+
+.draggable-list::-webkit-scrollbar-thumb {
+  background-color: var(--title--primary);
+  border-radius: var(--space--extra-small);
+}
+
+.draggable-list::-webkit-scrollbar {
+  background-color: #f0f2f5;
+  height: 6px;
+  max-height: 6px;
+  min-height: 6px;
+  width: 6px;
+  max-width: 6px;
+  min-width: 6px;
+}
+
+.draggable-icon {
+  align-items: flex-start;
+  display: flex;
+  outline: none;
+  border: none;
+  background-color: unset;
+}
+
+.draggable-icon::after {
+  content: '';
+  display: flex;
+  background-color: var(--list__item--color);
+  width: 24px;
+  height: 24px;
+  -webkit-mask-image: var(--list__draggable__icon--image);
+  mask-image: var(--list__draggable__icon--image);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.checkbox {
+  width: fit-content;
+}
+
+.text--ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/dist/collection/components/ez-list/ez-list.js

@@ -0,0 +1,252 @@
+import { Component, Host, h, Prop, Method } from '@stencil/core';
+;
+export class EzList {
+  constructor() {
+    this._listItems = [];
+    /**
+    * Define a lista inicial do componente.
+    */
+    this.initialList = [];
+    /**
+    * Define se o componente terá o comportamento de arrasto de linhas.
+    */
+    this.draggable = true;
+    /**
+    * Define se é possível selecionar mais de um registro.
+    */
+    this.isMultipleSelection = true;
+  }
+  createList() {
+    [...this.initialList]
+      .forEach((item, index) => {
+      const listItem = document.createElement('li');
+      listItem.setAttribute('data-index', index.toString());
+      if (!this.isMultipleSelection)
+        listItem.onclick = this.selectLine.bind(this);
+      listItem.innerHTML = `
+          <div class="draggable" ${this.draggable ? "draggable=true" : ""}>
+
+            ${this.draggable ? '<span class="draggable-icon"></span>' : ""}
+            
+            ${this.isMultipleSelection ? `<ez-check class='checkbox' value=${item.checked}></ez-check>` : ''}
+            <p title="${item.value}" class="person-name text--ellipsis">${item.value}</p>
+            
+          </div>
+        `;
+      this._listItems.push(listItem);
+      this._draggableList.appendChild(listItem);
+    });
+    if (this.draggable) {
+      this.handleEventListeners(this._listItems, this._draggableList, this._hostElement, false);
+    }
+  }
+  selectLine(e) {
+    var _a, _b, _c;
+    this._listItems.forEach(item => { item.classList.remove('draggable-selected'); });
+    if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === 'SPAN') {
+      const span = e.target;
+      this._selectedItem = { value: span.parentElement.getElementsByTagName('p')[0].textContent };
+      span.parentElement.parentElement.classList.add('draggable-selected');
+    }
+    else if (((_b = e.target) === null || _b === void 0 ? void 0 : _b.tagName) === 'P') {
+      const paragraph = e.target;
+      this._selectedItem = { value: paragraph.textContent };
+      paragraph.parentElement.parentElement.classList.add('draggable-selected');
+    }
+    else if (((_c = e.target) === null || _c === void 0 ? void 0 : _c.tagName) === 'DIV') {
+      const draggable = e.target;
+      this._selectedItem = { value: draggable.getElementsByTagName('p')[0].textContent };
+      draggable.parentElement.classList.add('draggable-selected');
+    }
+  }
+  handleEventListeners(listItems, dragableList, hostElement, removeEvents) {
+    let _dragStartIndex;
+    let _isItemOut = false;
+    function dragStart(item) {
+      _dragStartIndex = item.parentElement.getAttribute('data-index');
+    }
+    function dragEnter(item) {
+      item.classList.add('over');
+    }
+    function dragLeave(item) {
+      item.classList.remove('over');
+    }
+    function dragOver(e) {
+      e.preventDefault();
+    }
+    function dragDrop(item) {
+      if (_isItemOut) {
+        let index = +item.getAttribute('data-index');
+        const itemRemoved = listItems[index].querySelector('.draggable');
+        listItems[index].removeChild(itemRemoved);
+      }
+      const dragEndIndex = +item.getAttribute('data-index');
+      swapItems(+_dragStartIndex, dragEndIndex);
+      item.classList.remove('over');
+    }
+    function swapItems(fromIndex, toIndex) {
+      const itemOne = listItems[fromIndex].querySelector('.draggable');
+      const itemTwo = listItems[toIndex].querySelector('.draggable');
+      listItems[fromIndex].appendChild(itemTwo);
+      listItems[toIndex].appendChild(itemOne);
+      return listItems;
+    }
+    if (!removeEvents) {
+      hostElement.addEventListener('dragenter', function () { _isItemOut = false; });
+      hostElement.addEventListener('dragleave', function () { _isItemOut = true; });
+      const draggables = dragableList.querySelectorAll("div.draggable");
+      draggables.forEach(draggable => {
+        draggable.addEventListener('dragstart', function () { dragStart(draggable); });
+      });
+      listItems.forEach(item => {
+        item.addEventListener('dragover', function (event) { dragOver(event); });
+        item.addEventListener('drop', function () { dragDrop(item); });
+        item.addEventListener('dragenter', function () { dragEnter(item); });
+        item.addEventListener('dragleave', function () { dragLeave(item); });
+      });
+    }
+    else {
+      hostElement.removeEventListener('dragenter', function () { _isItemOut = false; });
+      hostElement.removeEventListener('dragleave', function () { _isItemOut = true; });
+      const draggables = dragableList.querySelectorAll("div.draggable");
+      draggables.forEach(draggable => {
+        draggable.removeEventListener('dragstart', function () { dragStart(draggable); });
+      });
+      listItems.forEach(item => {
+        item.removeEventListener('dragover', function (event) { dragOver(event); });
+        item.removeEventListener('drop', function () { dragDrop(item); });
+        item.removeEventListener('dragenter', function () { dragEnter(item); });
+        item.removeEventListener('dragleave', function () { dragLeave(item); });
+      });
+    }
+  }
+  /**
+  *  Retorna      uma promessa com o estado da atual lista composta por objetos do tipo {value: string, checked: boolean}.
+  */
+  async getState() {
+    let emitionList = [];
+    this._listItems.forEach(item => {
+      let emitionItem = {
+        value: this.getValueItem(item),
+        checked: this.getChecked(item)
+      };
+      emitionList.push(emitionItem);
+    });
+    return emitionList;
+  }
+  getChecked(item) {
+    if (this.isMultipleSelection) {
+      return item.children[0].children[1].value;
+    }
+    else {
+      if (!this._selectedItem)
+        return false;
+      return (item.children[0].children[1].textContent === this._selectedItem.value);
+    }
+  }
+  getValueItem(item) {
+    if (this.isMultipleSelection) {
+      return item.children[0].children[2].textContent;
+    }
+    return item.children[0].children[1].textContent;
+  }
+  componentDidLoad() {
+    this.createList();
+  }
+  disconnectedCallback() {
+    if (this.draggable) {
+      this.handleEventListeners(this._listItems, this._draggableList, this._hostElement, true);
+    }
+  }
+  render() {
+    return (h(Host, { ref: (el) => this._hostElement = el },
+      h("ul", { ref: (el) => this._draggableList = el, class: "draggable-list", id: "draggable-list" })));
+  }
+  static get is() { return "ez-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-list.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-list.css"]
+  }; }
+  static get properties() { return {
+    "initialList": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "ListItem[]",
+        "resolved": "ListItem[]",
+        "references": {
+          "ListItem": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define a lista inicial do componente."
+      },
+      "defaultValue": "[]"
+    },
+    "draggable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o componente ter\u00E1 o comportamento de arrasto de linhas."
+      },
+      "attribute": "draggable",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "isMultipleSelection": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se \u00E9 poss\u00EDvel selecionar mais de um registro."
+      },
+      "attribute": "is-multiple-selection",
+      "reflect": true,
+      "defaultValue": "true"
+    }
+  }; }
+  static get methods() { return {
+    "getState": {
+      "complexType": {
+        "signature": "() => Promise<ListItem[]>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "ListItem": {
+            "location": "local"
+          }
+        },
+        "return": "Promise<ListItem[]>"
+      },
+      "docs": {
+        "text": "Retorna      uma promessa com o estado da atual lista composta por objetos do tipo {value: string, checked: boolean}.",
+        "tags": []
+      }
+    }
+  }; }
+}

package/dist/collection/components/ez-time-input/ez-time-input.css

@@ -1,53 +1,4 @@
 :host {
-  /* dimensions */
-  /*@doc Define a altura do componente.*/
-  --eztime--height: 42px;
-  /*@doc Define a largura do componente.*/
-  --eztime--width: 100%;
-  /*@doc Define a largura do slot que contém o ícone.*/
-  --eztime__icon--width: 48px;
-
-  /* general */
-  /*@doc Define o raio da borda do input do componente.*/
-  --eztime--border-radius: var(--border--radius-medium, 12px);
-  /*@doc Define o tamanho da fonte do input e label do componente.*/
-  --eztime--font-size: var(--text--medium, 14px);
-  /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
-  --eztime--font-family: var(--font-pattern, Arial);
-  /*@doc Define o peso da fonte do label do componente.*/
-  --eztime--font-weight: var(--text-weight--large, 500);
-  /*@doc Define o espaçamento do label.*/
-  --eztime--space--medium: var(--space--medium, 6px);
-
-  /* input */
-  /*@doc Define a cor de fundo do input.*/
-  --eztime__input--background-color: var(--background--medium, #e0e0e0);
-  /*@doc Define o estilo da borda do input.*/
-  --eztime__input--border: var(--border--medium, 2px solid);
-  /*@doc Define a cor da borda do input.*/
-  --eztime__input--border-color: var(--eztime__input--background-color);
-  /*no modo normal usamos a borda com a mesma cor do bg*/
-  /*@doc Define a cor da borda do input quando focado.*/
-  --eztime__input--focus--border-color: var(--color--primary, #008561);
-  /*@doc Define a cor de fundo do input quando desabilitado.*/
-  --eztime__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
-  /*@doc Define a cor do texto do input.*/
-  --eztime__input--disabled--color: var(--text--disable, #AFB6C0);
-  /*@doc Define a cor da borda do input quando com erro.*/
-  --eztime__input--error--border-color: #CC2936;
-
-  /* label */
-  /*@doc Define a cor do texto do label.*/
-  --eztime__label--color: var(--title--primary, #919191);
-
-  /* message box */
-  /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
-  --eztime__message_box--font-size: var(--text--small, 12px);
-  /*@doc Define a cor da fonte da mensagem quando info.*/
-  --eztime__message_box--info--color: var(--color--success, #22085d);
-  /*@doc Define a cor da fonte da mensagem quando erro.*/
-  --eztime__message_box--error--color: var(--color--error, #FF0000);
-
   /***************
      host style  
   ***************/
@@ -55,124 +6,5 @@
   display: flex;
   flex-wrap: wrap;
   position: relative;
-  /*public*/
-  width: var(--eztime--width);
-}
-
-.invisible {
-  visibility: hidden;
-}
-
-input {
-  /*private*/
   width: 100%;
-  box-sizing: border-box;
-  padding: var(--space--medium, 6px);
-  font-weight: var(--text-weight--large, 600);
-  /*public*/
-  height: var(--eztime--height);
-  border-radius: var(--eztime--border-radius);
-  font-family: var(--eztime--font-family);
-  font-size: var(--eztime--font-size);
-  border: var(--eztime__input--border);
-  border-color: var(--eztime__input--border-color);
-  background-color: var(--eztime__input--background-color);
-}
-
-input:disabled {
-  /*public*/
-  background-color: var(--eztime__input--disabled--background-color);
-  color: var(--eztime__input--disabled--color);
-}
-
-input:focus {
-  /*private*/
-  outline: none;
-  /*public*/
-  border-color: var(--eztime__input--focus--border-color);
-}
-
-input.icon--left {
-  padding-left: var(--eztime__icon--width);
-}
-
-input.icon--right {
-  padding-right: var(--eztime__icon--width);
-}
-
-input::placeholder {
-  color: var(--eztime__placeholder--color);
-  font-weight: var(--eztime__placeholder--font-weight);
-}
-
-input:disabled::placeholder {
-  color: var(--eztime__placeholder--disabled--color);
-}
-
-input.hasError {
-  color: inherit;
-  border-color: var(--eztime__input--error--border-color);
-}
-
-input.text--right {
-  text-align: right;
-}
-
-.message-box {
-  /*private*/
-  min-height: 16px;
-  min-width: 100%;
-  margin-top: 2px;
-  line-height: 12px;
-  /*public*/
-  font-family: var(--eztime--font-family);
-  font-size: var(--eztime__message_box--font-size);
-  color: var(--eztime__message_box--info--color);
-}
-
-.hasError {
-  /*public*/
-  color: var(--eztime__message_box--error--color);
-}
-
-.input__label {
-  /*public*/
-  font-size: var(--eztime--font-size);
-  font-weight: var(--eztime--font-weight);
-  position: absolute;
-  color: var(it__label--color);
-  top: var(--eztime--space--medium);
-  font-family: var(--eztime--font-family);
-  -webkit-transition: font-size .3s, top .3s;
-  transition: font-size .3s, top .3s;
-  z-index: var(--visible);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  left: var(--eztime__icon--width);
-  width: calc(100% - 10px - var(--eztime__icon--width));
-}
-
-.input__label--floated {
-  font-family: var(--eztime--font-family);
-  font-size: var(--text--extra-small);
-  top: var(--space--small);
-  color: var(--text--primary);
-}
-
-.input__label--left {
-  /*public*/
-  left: var(--eztime__icon--width);
-  width: calc(100% - 10px - var(--eztime__icon--width));
-}
-
-.input__label--right {
-  /*public*/
-  padding-right: var(--eztime__icon--width);
-  width: calc(100% - 10px - var(--eztime__icon--width));
-}
-
-.input--with--label {
-  /*public*/
-  padding-bottom: 0;
 }