@sankhyalabs/ezui 1.1.74 → 1.1.77

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

@@ -1,66 +1,68 @@
 :host {
   /*@doc Define a família da fonte do componente.*/
-  --cal--font-family: var(--font-pattern, Arial);
+  --ez-calendar--font-family: var(--font-pattern, Arial);
   /*@doc Define a cor dos textos dentro do componente.*/
-  --cal--color: var(--title--primary, #626e82);
+  --ez-calendar--color: var(--title--primary, #626e82);
   /*@doc Define a sombra dos textos dentro do componente.*/
-  --cal--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
+  --ez-calendar--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
 
   /* cal__body */
   /*@doc Define a cor de fundo do corpo do calendário.*/
-  --cal__body--background-color: var(--background--xlight, #FFF);
+  --ez-calendar__body--background-color: var(--background--xlight, #FFF);
+  /*@doc Define a cor de fundo do corpo da hora do calendário.*/
+  --ez-calendar__Time--background-color: var(--background--xlight, #FAFAFA);
   /*@doc Define o espaçamento do corpo do calendário.*/
-  --cal__body--padding: var(--space--medium, 12px);
+  --ez-calendar__body--padding: var(--space--medium, 12px);
   /*@doc Define o raio da borda do corpo do calendário.*/
-  --cal__body--border-radius: var(--border--radius-medium, 12px);
+  --ez-calendar__body--border-radius: var(--border--radius-medium, 12px);
   /*@doc Define a sombra do corpo do calendário.*/
-  --cal__body--shadow: var(--shadow, 0px 0px 16px 0px #000);
+  --ez-calendar__body--shadow: var(--shadow, 0px 0px 16px 0px #000);
 
   /* cal__header */
   /*@doc Define a espessura da borda inferior do header.*/
-  --cal__header-line--stroke: 2px;
+  --ez-calendar__header-line--stroke: 2px;
   /*@doc Define a cor da borda inferior do header.*/
-  --cal__header-line--color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__header-line--color: var(--color--strokes, #C0C0C0);
 
   /* nav buttons */
   /*@doc Define a cor do ícone de navegação.*/
-  --cal__nav-btn--fill: var(--text--primary, #008561);
+  --ez-calendar__nav-btn--fill: var(--text--primary, #008561);
   /*@doc Define a cor do ícone de navegação quando o cursor está sobre ele.*/
-  --cal__nav-btn--hover--fill: var(--color--primary, #350404);
+  --ez-calendar__nav-btn--hover--fill: var(--color--primary, #350404);
   /*@doc Define a largura do ícone de navegação.*/
-  --cal__nav-btn--width: 10px;
+  --ez-calendar__nav-btn--width: 10px;
   /*@doc Define a altura do ícone de navegação.*/
-  --cal__nav-btn--height: 16px;
+  --ez-calendar__nav-btn--height: 16px;
   /*@doc Contém a imagem do ícone de navegação à esquerda.*/
-  --cal__nav-btn--previous-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z"/></svg>');
+  --ez-calendar__nav-btn--previous-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z"/></svg>');
   /*@doc Contém a imagem do ícone de navegação à direita.*/
-  --cal__nav-btn--next-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
+  --ez-calendar__nav-btn--next-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
 
   /* cell */
   /*@doc Define o espaçamento vertical entre as células.*/
-  --cal__cell--margin: 0px var(--space--small, 12px);
+  --ez-calendar__cell--margin: 0px var(--space--small, 12px);
   /*@doc Define a largura das células.*/
-  --cal__cell--width: var(--space--large, 24px);
+  --ez-calendar__cell--width: var(--space--large, 24px);
   /*@doc Define o espaçamento horizontal entre as células.*/
-  --cal__cell--padding: var(--space--extra-small, 3px) 0px;
+  --ez-calendar__cell--padding: var(--space--extra-small, 3px) 0px;
   /*@doc Define o raio da borda das células.*/
-  --cal__cell--border-radius: var(--border--radius-small, 6px);
+  --ez-calendar__cell--border-radius: var(--border--radius-small, 6px);
   /*@doc Define a cor de fundo das células.*/
-  --cal__cell--over--background-color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__cell--over--background-color: var(--color--strokes, #E2F4EF);
   /*@doc Define a cor do texto para células secundárias (fora do mês selecionado).*/
-  --cal__cell--outset--color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__cell--outset--color: var(--color--strokes, #C0C0C0);
   /*@doc Define a cor de fundo das células selecionadas.*/
-  --cal__cell--selected--background-color: var(--color--primary, #008561);
+  --ez-calendar__cell--selected--background-color: var(--color--primary, #008561);
   /*@doc Define a cor do texto da célula selecionada.*/
-  --cal__cell--selected--color: var(--color--inverted, #FFF);
+  --ez-calendar__cell--selected--color: var(--color--inverted, #FFF);
 
   /* btn today */
   /*@doc Define a cor do texto do botão "Hoje".*/
-  --cal__btn-today--color: var(--color--primary);
+  --ez-calendar__btn-today--color: var(--color--primary);
   /*@doc Define a cor de fundo do botão "Hoje" quando o cursor está sobre ele.*/
-  --cal__btn-today--hover--background-color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__btn-today--hover--background-color: var(--color--strokes, #E2F4EF);
   /*@doc Define o raio da borda do botão "Hoje".*/
-  --cal__btn-today--border-radius: var(--border--radius-small, 6px);
+  --ez-calendar__btn-today--border-radius: var(--border--radius-small, 6px);
 
   /***************
      host style  
@@ -78,10 +80,10 @@
   flex-direction: column;
 
   /*public*/
-  background-color: var(--cal__body--background-color);
-  padding: var(--cal__body--padding);
-  border-radius: var(--cal__body--border-radius);
-  box-shadow: var(--cal__body--shadow);
+  background-color: var(--ez-calendar__body--background-color);
+  padding: var(--ez-calendar__body--padding);
+  border-radius: var(--ez-calendar__body--border-radius);
+  box-shadow: var(--ez-calendar__body--shadow);
 }
 
 .calendar__header {
@@ -92,10 +94,10 @@
   margin: var(--space--small, 6px) var(--space--, 12px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-  border-bottom: solid var(--cal__header-line--stroke) var(--cal__header-line--color);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+  border-bottom: solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);
 }
 
 .calendar__btn-next, .calendar__btn-previous {
@@ -113,27 +115,27 @@
   display: flex;
 
   /*public*/
-  background-color: var(--cal__nav-btn--fill);
+  background-color: var(--ez-calendar__nav-btn--fill);
   /*parece estranho, mas o bg funciona como fill pq aplicaremos a mascara.*/
-  width: var(--cal__nav-btn--width);
-  height: var(--cal__nav-btn--height);
+  width: var(--ez-calendar__nav-btn--width);
+  height: var(--ez-calendar__nav-btn--height);
 }
 
 .calendar__btn-previous::after {
   /*public*/
-  -webkit-mask-image: var(--cal__nav-btn--previous-image);
-  mask-image: var(--cal__nav-btn--previous-image);
+  -webkit-mask-image: var(--ez-calendar__nav-btn--previous-image);
+  mask-image: var(--ez-calendar__nav-btn--previous-image);
 }
 
 .calendar__btn-next::after {
   /*public*/
-  -webkit-mask-image: var(--cal__nav-btn--next-image);
-  mask-image: var(--cal__nav-btn--next-image);
+  -webkit-mask-image: var(--ez-calendar__nav-btn--next-image);
+  mask-image: var(--ez-calendar__nav-btn--next-image);
 }
 
 .calendar__btn-next:hover::after, .calendar__btn-previous:hover::after {
   /*public*/
-  background-color: var(--cal__nav-btn--hover--fill);
+  background-color: var(--ez-calendar__nav-btn--hover--fill);
 }
 
 .calendar__lbl-month {
@@ -142,9 +144,9 @@
   font-size: var(--title--medium, 16px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
 }
 
 .calendar__line {
@@ -163,24 +165,24 @@
   font-size: var(--text--small, 12px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-  padding: var(--cal__cell--padding);
-  margin: var(--cal__cell--margin);
-  min-width: var(--cal__cell--width);
-  border-radius: var(--cal__cell--border-radius);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+  padding: var(--ez-calendar__cell--padding);
+  margin: var(--ez-calendar__cell--margin);
+  min-width: var(--ez-calendar__cell--width);
+  border-radius: var(--ez-calendar__cell--border-radius);
 }
 
 
 .calendar__cell:hover {
   /*public*/
-  background-color: var(--cal__cell--over--background-color);
+  background-color: var(--ez-calendar__cell--over--background-color);
 }
 
 .calendar__cell--secondary {
   /*public*/
-  color: var(--cal__cell--outset--color);
+  color: var(--ez-calendar__cell--outset--color);
 }
 
 .calendar__cell--unselectable:hover {
@@ -195,15 +197,15 @@
   font-weight: var(--text-weight--large, 600);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
 }
 
 .calendar__cell--selected, .calendar__cell--selected:hover {
   /*public*/
-  background-color: var(--cal__cell--selected--background-color);
-  color: var(--cal__cell--selected--color);
+  background-color: var(--ez-calendar__cell--selected--background-color);
+  color: var(--ez-calendar__cell--selected--color);
 }
 
 .calendar__body {
@@ -227,13 +229,78 @@
   padding: var(--space--extra-small, 6px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  text-shadow: var(--cal--text-shadow);
-  color: var(--cal__btn-today--color);
-  border-radius: var(--cal__btn-today--border-radius);
+  font-family: var(--ez-calendar--font-family);
+  text-shadow: var(--ez-calendar--text-shadow);
+  color: var(--ez-calendar__btn-today--color);
+  border-radius: var(--ez-calendar__btn-today--border-radius);
 }
 
 .calendar__btn-today:hover {
   /*public*/
-  background-color: var(--cal__btn-today--hover--background-color);
-}
+  background-color: var(--ez-calendar__btn-today--hover--background-color);
+}
+
+section{
+  display: flex;
+}
+
+.calendarTime {
+  /*private*/
+  margin-left: -10px;
+  display: flex;
+  flex-direction: column;
+  padding: 12px 6px;
+  padding-left: 16px;
+  padding-bottom: 0px;
+
+  /*public*/
+  /*TODO Criar variavel para color o calendar_time var(--ez-calendar__body-time--background-color)*/
+  background-color: var(--ez-calendar__Time--background-color);
+  border-top-right-radius: var(--ez-calendar__body--border-radius);
+  border-bottom-right-radius: var(--ez-calendar__body--border-radius);
+  box-shadow: var(--ez-calendar__body--shadow);
+}
+.calendar__column {
+  height: 180px;
+  padding: 0px;
+  margin: 0px;
+  overflow: auto;
+}
+
+/* Scrollbar definido como 0 para não exibir o scroll mas permitir a rolagem */
+.calendar__column::-webkit-scrollbar {
+  width: 0px;
+  max-width: 0px;
+  min-width: 0px;
+}
+
+.calendarTime__header{
+  /*private*/
+  padding-left: 6px;
+  padding-right: 6px;
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: var(--space--medium, 12px);
+  margin: var(--space--small, 6px) var(--space--, 12px);
+  font-weight: var(--text-weight--large, 600);
+  font-size: var(--title--medium, 16px);
+
+  
+  /*public*/
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+  border-bottom: solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+}
+
+.separatorTime{
+  color: #A2ABB9;
+}
+
+.endHidden {
+  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent 100%);
+}
+

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

@@ -1,11 +1,13 @@
-import { FloatingManager } from '@sankhyalabs/core';
-import { Component, forceUpdate, h, Prop, Method, Event, Watch } from '@stencil/core';
+import { FloatingManager } from "@sankhyalabs/core";
+import { Component, forceUpdate, h, Prop, Method, Event, Watch } from "@stencil/core";
 export class EzCalendar {
   constructor() {
     this._firstRender = true;
-    this._todayLabel = 'Hoje';
-    this._weekDayLabels = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];
-    this._monthLabels = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
+    this._todayLabel = "Hoje";
+    this._weekDayLabels = ["D", "S", "T", "Q", "Q", "S", "S"];
+    this._monthLabels = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
+    this._hoursLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
+    this._minutosLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
     /**
      * A data selecionada no calendário
      */
@@ -15,6 +17,14 @@ export class EzCalendar {
      * quando o método show() for acionado.
      */
     this.floating = false;
+    /**
+     * Exibe ou não as horas e minutos no calendario
+     */
+    this.time = false;
+    /**
+    * Exibe ou não os segundos no calendario
+    */
+    this.showSeconds = false;
   }
   /**
    * Usado no modo floating. Faz com que o componente seja exibido.
@@ -26,18 +36,21 @@ export class EzCalendar {
     if (this.floating) {
       this._floatingID = FloatingManager.float(this._box, this._container, { autoClose: true, top, left, bottom, right });
       window.requestAnimationFrame(() => {
-        this._box.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+        this._box.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
       });
     }
   }
+  /**
+  * Método necessário para ajustar o posicionamento do calendar acima ou abaixo do ez-date-input conforme a disponibilidade de espaço.
+  */
   async fitVertical(topOffset, bottomOffset) {
     const neededHeight = this._container.getBoundingClientRect().bottom + this._calendarHeight;
     const availableBottom = (window.innerHeight || document.documentElement.clientHeight) > neededHeight;
     if (availableBottom) {
-      this.show(topOffset + 'px', undefined, 'unset');
+      this.show(topOffset + "px", undefined, "unset");
     }
     else {
-      this.show('unset', undefined, bottomOffset + 'px');
+      this.show("unset", undefined, bottomOffset + "px");
     }
   }
   /**
@@ -69,48 +82,146 @@ export class EzCalendar {
     forceUpdate(this);
   }
   selectDate(d) {
-    this.value = d;
+    let newDate = d;
+    if (this.value) {
+      newDate.setHours(this.value.getHours());
+      newDate.setMinutes(this.value.getMinutes());
+      newDate.setSeconds(this.value.getSeconds());
+    }
+    this.value = newDate;
+    this.ezChange.emit();
+  }
+  selectHours(hour) {
+    if (!this.value) {
+      this.value = new Date();
+    }
+    this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), hour, this.value.getMinutes(), this.value.getSeconds());
     this.ezChange.emit();
   }
+  selectMinutes(minute) {
+    if (!this.value) {
+      this.value = new Date();
+    }
+    this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), this.value.getHours(), minute, this.value.getSeconds());
+    this.ezChange.emit();
+  }
+  selectSeconds(second) {
+    if (!this.value) {
+      this.value = new Date();
+    }
+    this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), this.value.getHours(), this.value.getMinutes(), second);
+    this.ezChange.emit();
+  }
+  updateScroll(element) {
+    if (element) {
+      const { scrollHeight, clientHeight, scrollTop } = element;
+      const remainingScroll = scrollHeight - clientHeight - Math.ceil(scrollTop);
+      if (remainingScroll > 0) {
+        element.classList.add("endHidden");
+      }
+      else {
+        element.classList.remove("endHidden");
+      }
+    }
+  }
   componentDidRender() {
     if (this.floating && this._firstRender) {
       this._calendarHeight = this._box.clientHeight;
       this._box.remove();
       this._firstRender = false;
     }
+    this.updateScroll(this._hoursScroll);
+    this.updateScroll(this._minutesScroll);
+    this.updateScroll(this._secondsScroll);
+  }
+  componentDidLoad() {
+    if (this.time || this.showSeconds) {
+      this._hoursScroll.scrollTop = this._hoursSelect.offsetTop - 64;
+      this._minutesScroll.scrollTop = this._minutesSelect.offsetTop - 64;
+      if (this.showSeconds) {
+        this._secondsScroll.scrollTop = this._secondsSelect.offsetTop - 64;
+      }
+    }
   }
   render() {
     if (this._currentPosition == null) {
       this._currentPosition = new Date();
-      this._currentPosition.setTime(this.value.getTime());
+      if (this.value) {
+        this._currentPosition.setTime(this.value.getTime());
+      }
       this._currentPosition.setDate(1);
     }
     const firstDate = new Date();
     firstDate.setTime(this._currentPosition.getTime());
     firstDate.setDate(1 - firstDate.getDay());
     return (h("section", { ref: elem => this._container = elem },
-      h("div", { class: "calendar", ref: elem => this._box = elem },
-        h("div", { class: "calendar__header" },
-          h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }),
-          h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()),
-          h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })),
-        h("div", { class: "calendar__body" },
-          h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => h("div", { class: "calendar__cell calendar__cell--unselectable" }, day))),
-          [0, 7, 14, 21, 28, 35].map(offset => h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index => {
-            const date = new Date();
-            date.setTime(firstDate.getTime());
-            date.setDate(date.getDate() + offset + index);
-            let classNames = "calendar__cell";
-            if (this._currentPosition.getMonth() != date.getMonth()) {
-              classNames += " calendar__cell--secondary";
-            }
-            else if (this.isSelectedDate(date)) {
-              classNames += " calendar__cell--selected";
-            }
-            return h("div", { class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
-          })))),
-        h("div", { class: "calendar__footer" },
-          h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this._todayLabel)))));
+      h("div", { ref: elem => this._box = elem, style: { display: 'flex' } },
+        h("div", { class: "calendar" },
+          h("div", { class: "calendar__header" },
+            h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }),
+            h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()),
+            h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })),
+          h("div", { class: "calendar__body" },
+            h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => h("div", { class: "calendar__cell calendar__cell--unselectable" }, day))),
+            [0, 7, 14, 21, 28, 35].map(offset => h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index => {
+              const date = new Date();
+              date.setTime(firstDate.getTime());
+              date.setDate(date.getDate() + offset + index);
+              let classNames = "calendar__cell";
+              if (this._currentPosition.getMonth() != date.getMonth()) {
+                classNames += " calendar__cell--secondary";
+              }
+              else if (this.isSelectedDate(date)) {
+                classNames += " calendar__cell--selected";
+              }
+              return h("div", { class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
+            })))),
+          h("div", { class: "calendar__footer" },
+            h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this._todayLabel))),
+        (this.time || this.showSeconds) &&
+          h("div", { class: "calendarTime" },
+            h("div", { class: "calendarTime__header" },
+              h("div", null, "H"),
+              h("div", { class: "separatorTime" }, ":"),
+              h("div", null, "M"),
+              this.showSeconds &&
+                h("div", { class: "separatorTime" }, ":"),
+              this.showSeconds &&
+                h("div", null, "S")),
+            h("div", { class: "calendar__body ", style: { display: 'flex', paddingLeft: '6px', paddingRight: '6px' } },
+              h("div", { class: "calendar__column", ref: elem => this._hoursScroll = elem, onScroll: () => this.updateScroll(this._hoursScroll) }, this._hoursLabel.map((offset, index) => {
+                if (index === this.value.getHours()) {
+                  return (h("div", { style: { display: 'flex' }, ref: elem => this._hoursSelect = elem },
+                    h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectHours(index) }, offset),
+                    h("div", { class: "separatorTime" }, ":")));
+                }
+                else {
+                  return (h("div", { style: { display: 'flex' } },
+                    h("div", { class: "calendar__cell", onClick: () => this.selectHours(index) }, offset),
+                    h("div", { class: "separatorTime" }, ":")));
+                }
+              })),
+              h("div", { class: "calendar__column", ref: elem => this._minutesScroll = elem, onScroll: () => this.updateScroll(this._minutesScroll) }, this._minutosLabel.map((offset, index) => {
+                if (index === this.value.getMinutes()) {
+                  return (h("div", { style: { display: 'flex' }, ref: elem => this._minutesSelect = elem },
+                    h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectMinutes(index) }, offset),
+                    this.showSeconds && h("div", { class: "separatorTime" }, ":")));
+                }
+                else {
+                  return (h("div", { style: { display: 'flex' } },
+                    h("div", { class: "calendar__cell", onClick: () => this.selectMinutes(index) }, offset),
+                    this.showSeconds && h("div", { class: "separatorTime" }, ":")));
+                }
+              })),
+              this.showSeconds &&
+                h("div", { class: "calendar__column", ref: elem => this._secondsScroll = elem, onScroll: () => this.updateScroll(this._secondsScroll) }, this._minutosLabel.map((offset, index) => {
+                  if (index === this.value.getSeconds()) {
+                    return (h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectSeconds(index), ref: elem => this._secondsSelect = elem }, offset));
+                  }
+                  else {
+                    return (h("div", { class: "calendar__cell", onClick: () => this.selectSeconds(index) }, offset));
+                  }
+                })))))));
   }
   static get is() { return "ez-calendar"; }
   static get encapsulation() { return "shadow"; }
@@ -158,6 +269,42 @@ export class EzCalendar {
       "attribute": "floating",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "time": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Exibe ou n\u00E3o as horas e minutos no calendario"
+      },
+      "attribute": "time",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "showSeconds": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Exibe ou n\u00E3o os segundos no calendario"
+      },
+      "attribute": "show-seconds",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
@@ -223,7 +370,7 @@ export class EzCalendar {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "M\u00E9todo necess\u00E1rio para ajustar o posicionamento do calendar acima ou abaixo do ez-date-input conforme a disponibilidade de espa\u00E7o.",
         "tags": []
       }
     },