@sankhyalabs/ezui 3.0.0 → 3.0.2

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

@@ -1,5 +1,5 @@
 import { FloatingManager } from "@sankhyalabs/core";
-import { Component, forceUpdate, h, Prop, Method, Event, Watch } from "@stencil/core";
+import { forceUpdate, h } from "@stencil/core";
 export class EzCalendar {
   constructor() {
     this._firstRender = true;
@@ -8,21 +8,9 @@ export class EzCalendar {
     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", "24", "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"];
-    /**
-     * Define o valor do calendário.
-     */
     this.value = new Date();
-    /**
-     * Define se a exibição do ez-calendar será feita pelos métodos `show()` e `hide()`.
-     */
     this.floating = false;
-    /**
-     * Se true a data considera horas e minutos.
-     */
     this.time = false;
-    /**
-     * Se true a data considera segundos. Deve ser usado em conjunto com a propriedade `time`.
-     */
     this.showSeconds = false;
   }
   /**
@@ -163,250 +151,232 @@ export class EzCalendar {
     const firstDate = new Date();
     firstDate.setTime(this._currentPosition.getTime());
     firstDate.setDate(1 - firstDate.getDay());
-    return (h("section", { ref: elem => this._container = elem },
-      h("div", { ref: elem => this._box = elem, class: "calendar__container" },
-        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", { "data-day": day, 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 dataDayMonth = `${date.getMonth() + 1}-${date.getDate()}-${date.getFullYear()}`;
-              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", { "data-day-month": dataDayMonth, 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: "calendar-time" },
-            h("div", { class: "calendar-time__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: '12px', paddingRight: '12px' } },
-              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", { "data-hour": offset, class: "calendar__cell calendar__cell--selected", onClick: () => this.selectHours(index) }, offset),
-                    h("div", { class: "separatorTime" }, ":")));
-                }
-                else {
-                  return (h("div", { style: { display: 'flex' } },
-                    h("div", { "data-hour": offset, 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", { "data-minute": offset, 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", { "data-minute": offset, 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", { "data-second": offset, class: "calendar__cell calendar__cell--selected", onClick: () => this.selectSeconds(index), ref: elem => this._secondsSelect = elem }, offset));
-                  }
-                  else {
-                    return (h("div", { "data-second": offset, class: "calendar__cell", onClick: () => this.selectSeconds(index) }, offset));
-                  }
-                })))))));
+    return (h("section", { ref: elem => this._container = elem }, h("div", { ref: elem => this._box = elem, class: "calendar__container" }, 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", { "data-day": day, 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 dataDayMonth = `${date.getMonth() + 1}-${date.getDate()}-${date.getFullYear()}`;
+      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", { "data-day-month": dataDayMonth, 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: "calendar-time" }, h("div", { class: "calendar-time__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: '12px', paddingRight: '12px' } }, 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", { "data-hour": offset, class: "calendar__cell calendar__cell--selected", onClick: () => this.selectHours(index) }, offset), h("div", { class: "separatorTime" }, ":")));
+        }
+        else {
+          return (h("div", { style: { display: 'flex' } }, h("div", { "data-hour": offset, 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", { "data-minute": offset, 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", { "data-minute": offset, 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", { "data-second": offset, class: "calendar__cell calendar__cell--selected", onClick: () => this.selectSeconds(index), ref: elem => this._secondsSelect = elem }, offset));
+          }
+          else {
+            return (h("div", { "data-second": offset, class: "calendar__cell", onClick: () => this.selectSeconds(index) }, offset));
+          }
+        })))))));
   }
   static get is() { return "ez-calendar"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ez-calendar.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ez-calendar.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-calendar.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-calendar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define o valor do calend\u00E1rio."
-      },
-      "defaultValue": "new Date()"
-    },
-    "floating": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define se a exibi\u00E7\u00E3o do ez-calendar ser\u00E1 feita pelos m\u00E9todos `show()` e `hide()`."
-      },
-      "attribute": "floating",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "time": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Se true a data considera horas e minutos."
-      },
-      "attribute": "time",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "showSeconds": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Se true a data considera segundos. Deve ser usado em conjunto com a propriedade `time`."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o valor do calend\u00E1rio."
+        },
+        "defaultValue": "new Date()"
       },
-      "attribute": "show-seconds",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "ezChange",
-      "name": "ezChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitido quando acontece a altera\u00E7\u00E3o de valor do calend\u00E1rio."
+      "floating": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se a exibi\u00E7\u00E3o do ez-calendar ser\u00E1 feita pelos m\u00E9todos `show()` e `hide()`."
+        },
+        "attribute": "floating",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
-          }
-        }
-      }
-    }]; }
-  static get methods() { return {
-    "show": {
-      "complexType": {
-        "signature": "(top?: string, left?: string, bottom?: string, right?: string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "time": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true a data considera horas e minutos."
         },
-        "return": "Promise<void>"
+        "attribute": "time",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "docs": {
-        "text": "Exibe o ez-calendar em uma posi\u00E7\u00E3o determinada.\n\u00C9 poss\u00EDvel determinar o posicionamento atrav\u00E9s dos par\u00E2metros, no formato css.",
-        "tags": []
+      "showSeconds": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true a data considera segundos. Deve ser usado em conjunto com a propriedade `time`."
+        },
+        "attribute": "show-seconds",
+        "reflect": true,
+        "defaultValue": "false"
       }
-    },
-    "fitVertical": {
-      "complexType": {
-        "signature": "(topOffset: number, bottomOffset: number) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de valor do calend\u00E1rio."
+        },
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "(top?: string, left?: string, bottom?: string, right?: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Exibe o ez-calendar em uma posi\u00E7\u00E3o determinada.\n\u00C9 poss\u00EDvel determinar o posicionamento atrav\u00E9s dos par\u00E2metros, no formato css.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Ajusta o posicionamento do ez-calendar conforme a disponibilidade de espa\u00E7o.",
-        "tags": []
-      }
-    },
-    "hide": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "fitVertical": {
+        "complexType": {
+          "signature": "(topOffset: number, bottomOffset: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Ajusta o posicionamento do ez-calendar conforme a disponibilidade de espa\u00E7o.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Oculta o ez-calendar.",
-        "tags": []
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Oculta o ez-calendar.",
+          "tags": []
+        }
       }
-    }
-  }; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "observeValue"
-    }]; }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "observeValue"
+      }];
+  }
 }

package/dist/collection/components/ez-card-item/ez-card-item.js

@@ -1,6 +1,9 @@
 import { ElementIDUtils, StringUtils } from '@sankhyalabs/core';
-import { Component, Element, Event, h, Host, Prop } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 export class EzCardItem {
+  constructor() {
+    this.item = undefined;
+  }
   componentWillRender() {
     this.createDetailList();
   }
@@ -23,73 +26,72 @@ export class EzCardItem {
     }
   }
   buildDetailContent(detail) {
-    return h("div", { class: "card-item__detail" },
-      h("label", { class: "card-item__detail-label" }, detail.label),
-      ": ",
-      h("label", { class: "card-item__detail-value", innerHTML: detail.value }));
+    return h("div", { class: "card-item__detail" }, h("label", { class: "card-item__detail-label" }, detail.label), ": ", h("label", { class: "card-item__detail-value", innerHTML: detail.value }));
   }
   render() {
     return (h(Host, null, this.item &&
-      h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } },
-        h("label", { class: "card-item__title" },
-          h("span", { class: "card-item__key", innerHTML: this.item.key }),
-          h("span", { innerHTML: this.item.title })),
-        h("div", { class: "card-item__details" },
-          h("div", { class: "card-item__details-left" }, this._details.detailsLeft.map(detail => {
-            return this.buildDetailContent(detail);
-          })),
-          h("div", { class: "card-item__details-right" }, this._details.detailsRight.map(detail => {
-            return this.buildDetailContent(detail);
-          }))))));
+      h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, h("label", { class: "card-item__title" }, h("span", { class: "card-item__key", innerHTML: this.item.key }), h("span", { innerHTML: this.item.title })), h("div", { class: "card-item__details" }, h("div", { class: "card-item__details-left" }, this._details.detailsLeft.map(detail => {
+        return this.buildDetailContent(detail);
+      })), h("div", { class: "card-item__details-right" }, this._details.detailsRight.map(detail => {
+        return this.buildDetailContent(detail);
+      }))))));
   }
   static get is() { return "ez-card-item"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ez-card-item.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ez-card-item.css"]
-  }; }
-  static get properties() { return {
-    "item": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "CardItem",
-        "resolved": "CardItem",
-        "references": {
-          "CardItem": {
-            "location": "local"
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-card-item.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-card-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "item": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "CardItem",
+          "resolved": "CardItem",
+          "references": {
+            "CardItem": {
+              "location": "local"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina o conte\u00FAdo do card. Deve conter um objeto no formato:\n`{title: string, key: string, details: any}`."
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Determina o conte\u00FAdo do card. Deve conter um objeto no formato:\n`{title: string, key: string, details: any}`."
       }
-    }
-  }; }
-  static get events() { return [{
-      "method": "ezClick",
-      "name": "ezClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitido sempre que o ez-card \u00E9 clicado."
-      },
-      "complexType": {
-        "original": "CardItem",
-        "resolved": "CardItem",
-        "references": {
-          "CardItem": {
-            "location": "local"
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezClick",
+        "name": "ezClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido sempre que o ez-card \u00E9 clicado."
+        },
+        "complexType": {
+          "original": "CardItem",
+          "resolved": "CardItem",
+          "references": {
+            "CardItem": {
+              "location": "local"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "_element"; }
 }