@sankhyalabs/ezui 1.1.76 → 1.1.77

package/dist/cjs/{index-9431aeeb.js → index-4e4bae01.js}

@@ -1199,11 +1199,7 @@ const connectedCallback = (elm) => {
 };
 const disconnectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
-        const hostRef = getHostRef(elm);
-        const instance = hostRef.$lazyInstance$ ;
-        {
-            safeCall(instance, 'disconnectedCallback');
-        }
+        getHostRef(elm);
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9431aeeb.js');
+const index = require('./index-4e4bae01.js');
 
 /*
- Stencil Client Patch Esm v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.13.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-list.cjs",[[1,"ez-list",{"initialList":[1040],"draggable":[4],"isMultipleSelection":[1540,"is-multiple-selection"],"getState":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[4],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"show":[64]}]]],["ez-button_16.cjs",[[0,"ez-form",{"metadataExecutor":[1,"metadata-executor"],"loadExecutor":[1,"load-executor"],"saveExecutor":[1,"save-executor"],"removeExecutor":[1,"remove-executor"],"fieldSearchExecutor":[1,"field-search-executor"],"ignoreSaveValidation":[4,"ignore-save-validation"],"metadata":[16],"slaveMode":[4,"slave-mode"],"enabled":[4],"loading":[1540],"validate":[64],"getChanges":[64],"changeFieldValue":[64]}],[1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}],[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"]}],[1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[8],"prettyprecision":[8]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"showHide":[64]}],[1,"ez-tabselector",{"selectedIndex":[1537,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"setFocus":[64],"setBlur":[64]}],[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64]}],[1,"place-holder"],[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513]}],[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"optionLoader":[16],"_preSelection":[32],"_visibleOptions":[32]}],[1,"ez-calendar",{"value":[1040],"floating":[516],"show":[64],"fitVertical":[64],"hide":[64]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]]], options);
+  return index.bootstrapLazy([["ez-form.cjs",[[0,"ez-form",{"metadataExecutor":[1,"metadata-executor"],"loadExecutor":[1,"load-executor"],"saveExecutor":[1,"save-executor"],"removeExecutor":[1,"remove-executor"],"fieldSearchExecutor":[1,"field-search-executor"],"ignoreSaveValidation":[4,"ignore-save-validation"],"metadata":[16],"slaveMode":[4,"slave-mode"],"enabled":[4],"loading":[1540],"validate":[64],"getChanges":[64],"changeFieldValue":[64]}]]],["ez-date-time-input.cjs",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"label":[513],"value":[1544],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyPrecision":[1538,"pretty-precision"],"textleft":[516],"formatNumber":[513,"format-number"],"_leftSlotItem":[32],"_rightSlotItem":[32]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"show":[64]}]]],["form-metadata.cjs",[[1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}]]],["ez-button_11.cjs",[[0,"test-du"],[0,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"pageSize":[2,"page-size"],"serverUrl":[1,"server-url"],"dataUnit":[16],"_navigationHasPrevious":[32],"_navigationHasNext":[32],"_navigationFirstRow":[32],"_navigationLastRow":[32],"_navigationTotalRows":[32],"_popUpVisible":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64]}],[1,"grid-config",{"selectedTab":[1025,"selected-tab"],"columns":[1040]}],[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}],[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32],"setSelection":[64],"getSelection":[64],"getList":[64]}],[1,"select-box",{"selectedOption":[1,"selected-option"]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-tabselector",{"selectedIndex":[1537,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1]}],[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"size":[513]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]],["ez-combo-box.cjs",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"optionLoader":[16],"_preSelection":[32],"_visibleOptions":[32]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-collapsible-box_6.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"]}],[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"showHide":[64]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"setFocus":[64],"setBlur":[64]}],[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64]}],[1,"place-holder"]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -5,19 +5,23 @@
     "./components/ez-list/ez-list.js",
     "./components/ez-upload/ez-upload.js",
     "./components/ez-action-chip/ez-action-chip.js",
+    "./components/ez-application/ez-application.js",
     "./components/ez-button/ez-button.js",
     "./components/ez-calendar/ez-calendar.js",
     "./components/ez-check/ez-check.js",
     "./components/ez-collapsible-box/ez-collapsible-box.js",
     "./components/ez-date-input/ez-date-input.js",
+    "./components/ez-date-time-input/ez-date-time-input.js",
     "./components/ez-dialog/ez-dialog.js",
     "./components/ez-form/subcomponents/form-metadata.js",
     "./components/ez-form/subcomponents/place-holder.js",
+    "./components/ez-grid/ez-grid.js",
+    "./components/ez-grid/subcomponents/gridconfig/grid-config.js",
+    "./components/ez-grid/subcomponents/select-box/select-box.js",
     "./components/ez-icon/ez-icon.js",
     "./components/ez-label-chip/ez-label-chip.js",
     "./components/ez-modal/ez-modal.js",
     "./components/ez-number-input/ez-number-input.js",
-    "./components/ez-numeric-input/ez-numeric-input.js",
     "./components/ez-popover/ez-popover.js",
     "./components/ez-popup/ez-popup.js",
     "./components/ez-search/ez-search.js",
@@ -25,11 +29,12 @@
     "./components/ez-text-area/ez-text-area.js",
     "./components/ez-text-input/ez-text-input.js",
     "./components/ez-time-input/ez-time-input.js",
-    "./components/ez-toast/ez-toast.js"
+    "./components/ez-toast/ez-toast.js",
+    "./components/test-du/test-du.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.10.0",
+    "version": "2.13.0",
     "typescriptVersion": "4.3.5"
   },
   "collections": [],

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

@@ -0,0 +1,3 @@
+:host {
+  
+}

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

@@ -0,0 +1,37 @@
+import { Component, h, Event } from "@stencil/core";
+import { Application } from "@sankhyalabs/core";
+export class EzApplication {
+  componentWillLoad() {
+    //Initizalize application
+    this.application = Application.get();
+  }
+  componentDidLoad() {
+    this.applicationLoaded.emit(true);
+  }
+  render() {
+    return (h("div", null));
+  }
+  static get is() { return "ez-application"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-application.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-application.css"]
+  }; }
+  static get events() { return [{
+      "method": "applicationLoaded",
+      "name": "applicationLoaded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado quando a aplica\u00E7\u00E3o for carregada."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -102,10 +102,25 @@ button:disabled {
 }
 
 button.icon {
+  padding: 0px;
+}
+
+button.small {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+}
+
+button.medium {
   width: 42px;
   min-width: 42px;
   height: 42px;
-  padding: 0px;
+}
+
+button.large {
+  width: 52px;
+  min-width: 52px;
+  height: 52px;
 }
 
 .label-icon {

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

@@ -9,6 +9,13 @@ export class EzButton {
        * Define o modo de uso do botão; opções: icon, link e regular
        */
     this.mode = "regular";
+    /**
+     * Quando em modo "icon" pode-se escolher entre [small,medium,large] (somente para o modo "icon")
+     */
+    this.size = "medium";
+  }
+  getIconSize() {
+    return this.size;
   }
   handleSlotChange(ev) {
     const slot = ev.target;
@@ -28,8 +35,8 @@ export class EzButton {
   }
   render() {
     if (this.mode == "icon") {
-      return (h("button", { class: "icon", type: "button", disabled: !this.enabled },
-        h("ez-icon", { class: "icon", href: this.image, size: "large", onClick: evt => { if (!this.enabled)
+      return (h("button", { class: "icon " + this.size, type: "button", disabled: !this.enabled },
+        h("ez-icon", { class: "icon", href: this.image, size: this.getIconSize(), onClick: evt => { if (!this.enabled)
             evt.stopPropagation(); } })));
     }
     else if (this.mode == "label-icon") {
@@ -130,6 +137,24 @@ export class EzButton {
       },
       "attribute": "image",
       "reflect": true
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Quando em modo \"icon\" pode-se escolher entre [small,medium,large] (somente para o modo \"icon\")"
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "\"medium\""
     }
   }; }
 }

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

@@ -9,6 +9,8 @@
   /* cal__body */
   /*@doc Define a cor de fundo do corpo do calendário.*/
   --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.*/
   --ez-calendar__body--padding: var(--space--medium, 12px);
   /*@doc Define o raio da borda do corpo do calendário.*/
@@ -46,7 +48,7 @@
   /*@doc Define o raio da borda das células.*/
   --ez-calendar__cell--border-radius: var(--border--radius-small, 6px);
   /*@doc Define a cor de fundo das células.*/
-  --ez-calendar__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).*/
   --ez-calendar__cell--outset--color: var(--color--strokes, #C0C0C0);
   /*@doc Define a cor de fundo das células selecionadas.*/
@@ -58,7 +60,7 @@
   /*@doc Define a cor do texto do botão "Hoje".*/
   --ez-calendar__btn-today--color: var(--color--primary);
   /*@doc Define a cor de fundo do botão "Hoje" quando o cursor está sobre ele.*/
-  --ez-calendar__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".*/
   --ez-calendar__btn-today--border-radius: var(--border--radius-small, 6px);
 
@@ -236,4 +238,69 @@
 .calendar__btn-today:hover {
   /*public*/
   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

@@ -6,6 +6,8 @@ export class EzCalendar {
     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.
@@ -72,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"; }
@@ -161,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 [{