@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

package/dist/cjs/ez-breadcrumb.cjs.entry.js

@@ -0,0 +1,285 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1064511f.js');
+const core = require('@sankhyalabs/core');
+
+const BreadcrumbItem = (props) => {
+  const { items, selectedItem, itemsHidden, showDropdown, handleShowDropdown, collapseConfigPosition, ellipsesPositionedEnd } = props;
+  const formatDropdownItems = () => {
+    return itemsHidden.map((item) => (Object.assign(Object.assign({}, item), { type: 'item', children: null, iconName: item.iconName || null, subAction: null, group: null })));
+  };
+  const onClickEllipsis = (evt) => {
+    evt.stopPropagation();
+    handleShowDropdown(!showDropdown);
+  };
+  const createEllipsis = (item) => {
+    return (index.h("li", Object.assign({ class: "breadcrumb__item", onClick: evt => onClickEllipsis(evt) }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: core.ElementIDUtils.getInternalIDInfo(`ezBreadcrumbItem_ellipsis`) }),
+      ellipsesPositionedEnd && index.h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${core.ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` })),
+      index.h("span", { class: "ellipses__item" }, "..."),
+      ellipsesPositionedEnd || index.h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${core.ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` })),
+      showDropdown &&
+        index.h("ez-dropdown", Object.assign({ class: "dropdown-ellipsis", items: formatDropdownItems(), onEzClick: (evt) => selectedItem.emit(evt.detail) }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${core.ElementIDUtils.getInternalIDInfo("dropdown")}` }))));
+  };
+  return (index.h("div", { class: "breadcrumb__items" }, items.map((item, index$1) => {
+    const isLastItem = index$1 === (items.length - 1);
+    return (index.h("div", { class: "breadcrumb__group" },
+      collapseConfigPosition === index$1 && createEllipsis(item),
+      index.h("li", Object.assign({ class: "breadcrumb__item", id: item.id }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: core.ElementIDUtils.getInternalIDInfo(`ezBreadcrumb_item_${item.id}_${item.label}`) }),
+        item.iconName && index.h("ez-icon", Object.assign({ class: `breadcrumb__item--icon ${(isLastItem && !ellipsesPositionedEnd) ? 'active-icon' : ''}`, size: "small", iconName: item.iconName }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${core.ElementIDUtils.getInternalIDInfo(`iconItem${item.id}`)}` })),
+        index.h("p", { class: `breadcrumb__item--label ${(isLastItem && !ellipsesPositionedEnd) ? 'active' : ''}`, onClick: (ellipsesPositionedEnd || !isLastItem) ? () => selectedItem.emit(item) : undefined }, item.label),
+        !isLastItem && index.h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${core.ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` }))),
+      (collapseConfigPosition - 1 === index$1 && ellipsesPositionedEnd) && createEllipsis(item)));
+  })));
+};
+
+const ezBreadcrumbCss = ":host{--breadcrumb__item--label--color--title-primary:var(--color--title-primary, #2B3A54);--breadcrumb__item--label--color--active:var(--color--primary, '#008561');--breadcrumb__item--label--font-weight:var(--text-weight--large, 600);display:block;font-size:var(--text--medium, 14px);font-family:var(--font-pattern, \"Roboto\");font-weight:var(--text-weight--medium, 400)}.breadcrumb{display:flex}.breadcrumb__group{display:flex}.breadcrumb__list{list-style-type:none;display:inline-block;margin:0;padding:0;overflow:hidden;white-space:nowrap}.breadcrumb__item{display:inline-flex;align-items:center;cursor:pointer}.breadcrumb__item--label{color:var(--breadcrumb__item--label--color--title-primary);margin:0px}.breadcrumb__item--icon{padding-right:3px;color:var(--breadcrumb__item--label--color--title-primary)}.breadcrumb__item--chevron{padding:0px 6px;cursor:default}.active{color:var(--breadcrumb__item--label--color--active);font-weight:var(--breadcrumb__item--label--font-weight);cursor:default}.active-icon{--icon--color:var(--breadcrumb__item--label--color--active);cursor:default}.breadcrumb__items{display:flex}";
+
+const EzBreadcrumb = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selectedItem = index.createEvent(this, "selectedItem", 7);
+    this._ellipsesPositionedEnd = false;
+    this._renderSecond = false;
+    this.INDEX_ITEM_TO_REMOVE = 1; // sempre removemos o segundo item.
+    this.CHEVRON_SIZE = 28;
+    this.handleShowDropdown = (newState) => {
+      this.showDropdown = newState;
+    };
+    this.items = [];
+    this.fillMode = "auto";
+    this.maxItems = 4;
+    this.positionEllipsis = 1;
+    this.visibleItems = undefined;
+    this.hiddenItems = [];
+    this.showDropdown = false;
+    this.collapseConfigPosition = -1;
+  }
+  watchPropHandler(newValue, oldValue) {
+    if (core.ObjectUtils.objectToString(newValue || []) !== core.ObjectUtils.objectToString(oldValue || [])) {
+      this.loadItems();
+    }
+    this.fillMode === "auto" && this.handleResize();
+  }
+  watchPropHiddenItems() {
+    if (this.fillMode === 'auto') {
+      this.collapseConfigPosition = this.hiddenItems.length > 0 ? 1 : -1;
+    }
+  }
+  componentDidUpdate() {
+    this.positionDropdown();
+    this.setEvents();
+  }
+  componentWillLoad() {
+    this.loadItems();
+  }
+  loadItems() {
+    this.visibleItems = [...this.items];
+    this.hiddenItems = [];
+    if (this.fillMode === 'regular') {
+      this.configModeRegular();
+    }
+    else if (this.fillMode === 'auto') {
+      this.startResize();
+    }
+    this.setEvents();
+  }
+  closeDropdown(evt) {
+    const target = evt === null || evt === void 0 ? void 0 : evt.target;
+    if (target == undefined) {
+      return;
+    }
+    if (target !== this._element.shadowRoot.querySelector(".ellipses__item")) {
+      this.showDropdown = false;
+    }
+  }
+  setEvents() {
+    document.removeEventListener("click", this.closeDropdown.bind(this));
+    document.addEventListener("click", this.closeDropdown.bind(this));
+    document.removeEventListener("scroll", this.positionDropdown.bind(this));
+    document.addEventListener("scroll", this.positionDropdown.bind(this));
+  }
+  componentDidLoad() {
+    core.ElementIDUtils.addIDInfo(this._element);
+  }
+  componentDidRender() {
+    if (this.fillMode === 'auto') {
+      this.configResize();
+    }
+  }
+  configResize() {
+    if (this._resizeObserver != undefined) {
+      this._resizeObserver.unobserve(this._element.parentElement);
+    }
+    this._resizeObserver = new ResizeObserver(core.JSUtils.debounce(this.handleResize.bind(this), 200));
+    this._resizeObserver.observe(this._element.parentElement);
+  }
+  handleResize() {
+    const ELLIPSIS_SIZE = 39;
+    if (!this._renderSecond) {
+      this._renderSecond = true;
+      return;
+    }
+    if (this._element.parentElement == undefined) {
+      return;
+    }
+    let { offsetWidth } = this._element.parentElement;
+    let sumVisibleItems = 0;
+    this.visibleItems.forEach(item => sumVisibleItems += item.width);
+    //Se existe o ellipsis, devemos cconsidera-lo no calculo
+    const offset = this.collapseConfigPosition > -1 ? ELLIPSIS_SIZE : 0;
+    if (offsetWidth < sumVisibleItems + offset) {
+      this.handleCollapse(offsetWidth, sumVisibleItems);
+    }
+    else if (offsetWidth >= sumVisibleItems + offset) {
+      this.handleExpand(offsetWidth);
+    }
+  }
+  handleCollapse(containerWidth, itemsWidth) {
+    const MIN_VISIBLE_ITEMS = 2;
+    if (this.visibleItems.length <= MIN_VISIBLE_ITEMS) {
+      return;
+    }
+    let tmpVisibleItems = [...this.visibleItems];
+    let tmpHiddenItems = [...this.hiddenItems];
+    let secondItem = tmpVisibleItems[this.INDEX_ITEM_TO_REMOVE];
+    let hasChange = false;
+    while (tmpVisibleItems.length > MIN_VISIBLE_ITEMS &&
+      secondItem != undefined &&
+      itemsWidth > containerWidth) {
+      hasChange = true;
+      tmpVisibleItems = tmpVisibleItems.filter((_, index) => index !== this.INDEX_ITEM_TO_REMOVE);
+      tmpHiddenItems = [...tmpHiddenItems, secondItem];
+      itemsWidth -= secondItem.width;
+      secondItem = tmpVisibleItems[this.INDEX_ITEM_TO_REMOVE];
+    }
+    if (hasChange) {
+      this.visibleItems = tmpVisibleItems;
+      this.hiddenItems = tmpHiddenItems;
+      this.showDropdown = false;
+    }
+  }
+  handleExpand(containerWidth) {
+    if (!this.hiddenItems.length) {
+      return;
+    }
+    let widthFreeZone = Math.abs(this._elBreadcrumbList.offsetWidth - containerWidth);
+    let tmpVisibleItems = [...this.visibleItems];
+    let tmpHiddenItems = [...this.hiddenItems];
+    let lastHiddenElement = tmpHiddenItems[tmpHiddenItems.length - 1];
+    let hasChange = false;
+    while (lastHiddenElement && widthFreeZone >= lastHiddenElement.width) {
+      widthFreeZone -= lastHiddenElement.width;
+      tmpHiddenItems.pop();
+      tmpVisibleItems.splice(this.INDEX_ITEM_TO_REMOVE, 0, lastHiddenElement);
+      lastHiddenElement = tmpHiddenItems[tmpHiddenItems.length - 1];
+      hasChange = true;
+    }
+    if (hasChange) {
+      this.visibleItems = tmpVisibleItems;
+      this.hiddenItems = tmpHiddenItems;
+      this.showDropdown = false;
+    }
+  }
+  configModeRegular() {
+    if (this.visibleItems.length > this.maxItems) {
+      const amountsItemsToHide = Math.abs(this.visibleItems.length - this.maxItems);
+      if (this.positionEllipsis === 0) {
+        const itemsToTransfer = this.visibleItems.slice(0, amountsItemsToHide);
+        this.hiddenItems.push(...itemsToTransfer);
+        this.visibleItems.splice(0, amountsItemsToHide);
+      }
+      else if (this.positionEllipsis >= this.maxItems) {
+        const itemsToTransfer = this.visibleItems.slice(this.maxItems);
+        this.hiddenItems.push(...itemsToTransfer);
+        this.visibleItems.splice(this.maxItems);
+        this._ellipsesPositionedEnd = true;
+      }
+      else {
+        const removedItems = this.visibleItems.splice(this.positionEllipsis, amountsItemsToHide);
+        this.hiddenItems.push(...removedItems);
+      }
+      this.collapseConfigPosition = this.positionEllipsis;
+    }
+  }
+  positionDropdown() {
+    var _a;
+    const bounding = (_a = this._element.shadowRoot.querySelector(".ellipses__item")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const elDropdown = this._element.shadowRoot.querySelector(".dropdown-ellipsis");
+    if (bounding == undefined || elDropdown == undefined) {
+      return;
+    }
+    elDropdown.style.top = (bounding.y + bounding.height + 5) + "px";
+    elDropdown.style.left = bounding.x + "px";
+  }
+  ;
+  async startResize() {
+    const areaAvailable = this._element.parentElement.offsetWidth;
+    const ELLIPSIS_SIZE = 10;
+    const measureItemSize = async (item, index) => {
+      item.width = await this.measureSizeHTMLElement(item);
+      /*
+        Se é o ultimo item, desconsideramos o icone CHEVRON
+      */
+      if (index === this.visibleItems.length - 1) {
+        item.width -= this.CHEVRON_SIZE;
+      }
+      return item;
+    };
+    const measuredItems = await Promise.all(this.visibleItems.map(measureItemSize));
+    const sizeBreadcrumb = measuredItems.reduce((total, item) => total + item.width, 0);
+    if (sizeBreadcrumb > areaAvailable) {
+      const tempItemsVisible = [];
+      const tempItemsHidden = [...measuredItems];
+      const firstItem = tempItemsHidden.shift();
+      const lastItem = tempItemsHidden.pop();
+      lastItem.width += ELLIPSIS_SIZE;
+      tempItemsVisible.push(firstItem, lastItem);
+      let sizeTempItemsHiddenResult = tempItemsVisible.reduce((total, item) => total + item.width, 0);
+      let newAreaAvailable = Math.abs(sizeTempItemsHiddenResult - areaAvailable);
+      tempItemsHidden.reverse().forEach((item) => {
+        if (item.width < newAreaAvailable) {
+          const firstItemForListHidden = tempItemsHidden.shift();
+          tempItemsVisible.splice(1, 0, firstItemForListHidden);
+          sizeTempItemsHiddenResult = tempItemsVisible.reduce((total, item) => total + item.width, 0);
+          newAreaAvailable = Math.abs(sizeTempItemsHiddenResult - areaAvailable);
+        }
+      });
+      this.visibleItems = [...tempItemsVisible];
+      this.hiddenItems = [...tempItemsHidden.reverse()];
+    }
+  }
+  measureSizeHTMLElement(item) {
+    return new Promise((resolve) => {
+      const ICON_SIZE = 19;
+      this.waitFontLoad().then(() => {
+        if (this._textMesurement === undefined) {
+          this._textMesurement = this._element.shadowRoot.ownerDocument.createElement("canvas");
+        }
+        const context = this._textMesurement.getContext("2d");
+        context.font = "14px Roboto, Algerian";
+        resolve((item.iconName ? ICON_SIZE : 0) + this.CHEVRON_SIZE + context.measureText(item.label).width);
+      });
+    });
+  }
+  waitFontLoad() {
+    return new Promise((resolve) => {
+      document.fonts.load("14px Roboto").then(() => resolve(), resolve());
+    });
+  }
+  getItemContent() {
+    return (index.h("nav", { class: "breadcrumb" }, index.h("ol", { class: "breadcrumb__list", ref: elem => this._elBreadcrumbList = elem }, index.h(BreadcrumbItem, { items: this.visibleItems, selectedItem: this.selectedItem, itemsHidden: this.hiddenItems, showDropdown: this.showDropdown, handleShowDropdown: this.handleShowDropdown, collapseConfigPosition: this.collapseConfigPosition, ellipsesPositionedEnd: this._ellipsesPositionedEnd }))));
+  }
+  render() {
+    return this.getItemContent();
+  }
+  get _element() { return index.getElement(this); }
+  static get watchers() { return {
+    "items": ["watchPropHandler"],
+    "hiddenItems": ["watchPropHiddenItems"]
+  }; }
+};
+EzBreadcrumb.style = ezBreadcrumbCss;
+
+exports.ez_breadcrumb = EzBreadcrumb;

package/dist/cjs/ez-button.cjs.entry.js

@@ -0,0 +1,87 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1064511f.js');
+const core = require('@sankhyalabs/core');
+
+const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--width:'auto';--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:0px;--ez-button--padding-bottom:0px;--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--justify-content:center;--ez-button--hover-color:var(--color--primary-600);--ez-button--hover--background-color:var(--background--medium, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-button--min-width);width:var(--ez-button--width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border);justify-content:var(--ez-button--justify-content)}button:focus{outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);user-select:none}button:disabled+label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";
+
+const EzButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.label = undefined;
+    this.enabled = true;
+    this.mode = "regular";
+    this.image = undefined;
+    this.iconName = undefined;
+    this.size = undefined;
+  }
+  /**
+   * Aplica o foco no botão.
+   */
+  async setFocus() {
+    this._button.focus();
+  }
+  /**
+   * Remove o foco do botão.
+   */
+  async setBlur() {
+    this._button.blur();
+  }
+  clickListener(evt) {
+    if (!this.enabled) {
+      evt.stopImmediatePropagation();
+    }
+  }
+  componentDidLoad() {
+    if (this._element) {
+      core.ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._button) {
+      const dataInfo = { id: 'embedded' };
+      core.ElementIDUtils.addIDInfo(this._button, 'button', dataInfo);
+    }
+  }
+  getIconSize(sizeParam = "medium") {
+    const sizeList = ["small", "medium", "large"];
+    const sizeLowerCase = this.size && this.size.toLowerCase();
+    return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (!!content) {
+      if (this.mode == "link") {
+        content.style.display = "inline";
+        if (slot.name == "leftIcon") {
+          content.style.paddingRight = "var(--ez-button__inline__icon--padding)";
+        }
+        else if (slot.name == "rightIcon") {
+          content.style.paddingLeft = "var(--ez-button__inline__icon--padding)";
+        }
+      }
+      else {
+        content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
+      }
+    }
+  }
+  render() {
+    if (this.mode == "icon") {
+      return (index.h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, index.h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })));
+    }
+    else if (this.mode == "label-icon") {
+      return (index.h("div", { class: "label-icon" }, index.h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, index.h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize() })), index.h("label", { title: this.label }, this.label)));
+    }
+    else if (this.mode == "link") {
+      return (index.h("a", { class: this.getIconSize(), ref: (el) => this._button = el }, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+    else {
+      return (index.h("button", { class: this.getIconSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+  }
+  get _element() { return index.getElement(this); }
+};
+EzButton.style = ezButtonCss;
+
+exports.ez_button = EzButton;

package/dist/cjs/ez-calendar.cjs.entry.js

@@ -0,0 +1,238 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1064511f.js');
+const core = require('@sankhyalabs/core');
+
+const ezCalendarCss = ":host{--ez-calendar--font-family:var(--font-pattern, Arial);--ez-calendar--color:var(--title--primary, #626e82);--ez-calendar--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--ez-calendar__body--background-color:var(--background--xlight, #FFF);--ez-calendar__time--background-color:var(--background--xlight, #FAFAFA);--ez-calendar__body--padding:var(--space--medium, 12px) var(--space--small, 6px);--ez-calendar__body--border-radius:var(--border--radius-medium, 12px);--ez-calendar__body--shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-container--z-index:var(--more-visible, 2);--ez-calendar__header-line--stroke:1px;--ez-calendar__header-line--color:var(--color--strokes, #C0C0C0);--ez-calendar__nav-btn--fill:var(--text--primary, #008561);--ez-calendar__nav-btn--hover--fill:var(--color--primary, #350404);--ez-calendar__nav-btn--width:10px;--ez-calendar__nav-btn--height:16px;--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>');--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>');--ez-calendar__cell--margin:0px 1.5px;--ez-calendar__cell--width:var(--space--large, 24px);--ez-calendar__cell--padding:1.5px 0px;--ez-calendar__cell--border-radius:var(--border--radius-small, 6px);--ez-calendar__cell--over--background-color:var(--color--primary, #E2F4EF);--ez-calendar__cell--over--color:var(--color--primary-300, #008561);--ez-calendar__cell--outset--color:var(--color--disable-primary, #E5EAF0);--ez-calendar__cell--selected--background-color:var(--color--primary, #008561);--ez-calendar__cell--selected--color:var(--color--inverted, #FFF);--ez-calendar__btn-today--color:var(--color--primary);--ez-calendar__btn-today--hover--background-color:var(--color--primary-300, #E2F4EF);--ez-calendar__btn-today--border-radius:var(--border--radius-small, 6px);position:relative;display:flex;user-select:none}.calendar__container{display:flex;z-index:var(--more-visible, 2)}.calendar{display:flex;flex-direction:column;z-index:var(--more-visible, 2);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{display:flex;justify-content:space-between;padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);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{outline:none;border:none;background-color:unset;cursor:pointer;padding:0px}.calendar__btn-next::after,.calendar__btn-previous::after{content:'';display:flex;background-color:var(--ez-calendar__nav-btn--fill);width:var(--ez-calendar__nav-btn--width);height:var(--ez-calendar__nav-btn--height)}.calendar__btn-previous::after{-webkit-mask-image:var(--ez-calendar__nav-btn--previous-image);mask-image:var(--ez-calendar__nav-btn--previous-image)}.calendar__btn-next::after{-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{background-color:var(--ez-calendar__nav-btn--hover--fill)}.calendar__lbl-month{font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__line{display:flex;padding:0px;margin:0px}.calendar__cell{display:flex;justify-content:center;align-content:center;cursor:pointer;font-size:var(--text--extra-small, 10px);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{background-color:var(--ez-calendar__cell--over--background-color);color:var(--ez-calendar__cell--over--color)}.calendar__cell--secondary{color:var(--ez-calendar__cell--outset--color)}.calendar__cell--unselectable:hover{background-color:unset;border-radius:unset;cursor:unset;color:var(--ez-calendar--color)}.calendar__cell--unselectable{font-weight:var(--text-weight--large, 600);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{background-color:var(--ez-calendar__cell--selected--background-color);color:var(--ez-calendar__cell--selected--color)}.calendar__footer{display:flex;flex-direction:column}.calendar__btn-today{border:none;background-color:unset;cursor:pointer;padding:0px;font-weight:var(--text-weight--large, 600);font-size:var(--title--extra-small, 12px);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{background-color:var(--ez-calendar__btn-today--hover--background-color)}section{display:flex}.calendar-time{margin-left:-10px;display:flex;flex-direction:column;padding:12px 0px 0px 10px;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:136px;padding:0px;margin:0px;overflow:auto;scrollbar-width:none}.calendar__column::-webkit-scrollbar{width:0px;max-width:0px;min-width:0px}.calendar-time__header{display:flex;justify-content:space-between;padding-left:var(--space--small, 6px);padding-right:var(--space--small, 6px);padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);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;padding:0px 1px;line-height:16px;font-size:17px;font-weight:normal}.endHidden{-webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 48px), transparent 100%)}.calendar__column .calendar__cell{margin:0px;padding:1.5px 1.5px}";
+
+const EzCalendar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    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._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"];
+    this.value = new Date();
+    this.floating = false;
+    this.time = false;
+    this.showSeconds = false;
+  }
+  /**
+   * Exibe o ez-calendar em uma posição determinada.
+   * É possível determinar o posicionamento através dos parâmetros, no formato css.
+   */
+  async show(top, left, bottom, right) {
+    if (this.floating) {
+      this._floatingID = core.FloatingManager.float(this._box, this._container, {
+        isFixed: this.isFixed(),
+        autoClose: true,
+        top,
+        left,
+        bottom,
+        right
+      });
+      if (!this.isFixed()) {
+        window.requestAnimationFrame(() => {
+          this._box.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+        });
+        this.scroll();
+      }
+    }
+  }
+  /**
+   * Ajusta o posicionamento vertical do ez-calendar 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");
+    }
+    else {
+      this.show("unset", undefined, bottomOffset + "px");
+    }
+  }
+  /**
+   * Ajusta o posicionamento horizontal do ez-calendar conforme a disponibilidade de espaço.
+   */
+  async fitHorizontal(rightOffset) {
+    const neededWidth = this._container.getBoundingClientRect().right + this._calendarWidth;
+    const availableRight = (window.innerWidth || document.documentElement.clientWidth) > neededWidth;
+    if (!availableRight) {
+      this.show(undefined, "unset", undefined, rightOffset + "px");
+    }
+  }
+  /**
+   * Oculta o ez-calendar.
+   */
+  async hide() {
+    if (this._floatingID !== undefined) {
+      core.FloatingManager.close(this._floatingID);
+      this._floatingID = undefined;
+    }
+  }
+  observeValue() {
+    if (this.value) {
+      this._currentPosition.setTime(this.value.getTime());
+      this._currentPosition.setDate(1);
+    }
+  }
+  scrollListener() {
+    if (this.floating && this.isFixed()) {
+      this.hide();
+    }
+  }
+  isFixed() {
+    return this._hostElem.dataset.isFixed === "true";
+  }
+  getMonthLabel() {
+    return this._monthLabels[this._currentPosition.getMonth()] + " " + this._currentPosition.getFullYear();
+  }
+  isSelectedDate(d) {
+    if (this.value) {
+      return this.value.getDate() == d.getDate() && this.value.getMonth() == d.getMonth() && this.value.getFullYear() == d.getFullYear();
+    }
+    return false;
+  }
+  changeMonth(offset) {
+    this._currentPosition.setMonth(this._currentPosition.getMonth() + offset);
+    index.forceUpdate(this);
+  }
+  selectDate(d) {
+    let newDate = d;
+    if (this.value && (this.time || this.showSeconds)) {
+      newDate.setHours(this.value.getHours());
+      newDate.setMinutes(this.value.getMinutes());
+      if (this.showSeconds) {
+        newDate.setSeconds(this.value.getSeconds());
+      }
+      else {
+        newDate.setSeconds(0);
+      }
+    }
+    this.value = newDate;
+    this.ezChange.emit(this.value);
+  }
+  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(this.value);
+  }
+  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(this.value);
+  }
+  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(this.value);
+  }
+  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._calendarWidth = this._box.clientWidth;
+      this._box.remove();
+      this._firstRender = false;
+    }
+    this.updateScroll(this._hoursScroll);
+    this.updateScroll(this._minutesScroll);
+    this.updateScroll(this._secondsScroll);
+  }
+  componentDidLoad() {
+    this.scroll();
+  }
+  scroll() {
+    if (this.time || this.showSeconds) {
+      this._hoursScroll.scrollTop = this._hoursSelect.offsetTop - 64;
+      this._minutesScroll.scrollTop = this._minutesSelect.offsetTop - 64;
+      this.updateScroll(this._hoursScroll);
+      this.updateScroll(this._minutesScroll);
+      if (this.showSeconds) {
+        this._secondsScroll.scrollTop = this._secondsSelect.offsetTop - 64;
+        this.updateScroll(this._secondsScroll);
+      }
+    }
+  }
+  render() {
+    if (this._currentPosition == null) {
+      this._currentPosition = new Date();
+      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 (index.h("section", { ref: elem => this._container = elem }, index.h("div", { ref: elem => this._box = elem, class: "calendar__container" }, index.h("div", { class: "calendar" }, index.h("div", { class: "calendar__header" }, index.h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), index.h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), index.h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), index.h("div", { class: "calendar__body" }, index.h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => index.h("div", { "data-day": day, class: "calendar__cell calendar__cell--unselectable" }, day))), [0, 7, 14, 21, 28, 35].map(offset => index.h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index$1 => {
+      const date = new Date();
+      date.setTime(firstDate.getTime());
+      date.setDate(date.getDate() + offset + index$1);
+      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 index.h("div", { "data-day-month": dataDayMonth, class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
+    })))), index.h("div", { class: "calendar__footer" }, index.h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this._todayLabel))), (this.time || this.showSeconds) &&
+      index.h("div", { class: "calendar-time" }, index.h("div", { class: "calendar-time__header" }, index.h("div", null, "H"), index.h("div", { class: "separatorTime" }, ":"), index.h("div", null, "M"), this.showSeconds &&
+        index.h("div", { class: "separatorTime" }, ":"), this.showSeconds &&
+        index.h("div", null, "S")), index.h("div", { class: "calendar__body ", style: { display: 'flex', paddingLeft: '12px', paddingRight: '12px' } }, index.h("div", { class: "calendar__column", ref: elem => this._hoursScroll = elem, onScroll: () => this.updateScroll(this._hoursScroll) }, this._hoursLabel.map((offset, index$1) => {
+        if (index$1 === this.value.getHours()) {
+          return (index.h("div", { style: { display: 'flex' }, ref: elem => this._hoursSelect = elem }, index.h("div", { "data-hour": offset, class: "calendar__cell calendar__cell--selected", onClick: () => this.selectHours(index$1) }, offset), index.h("div", { class: "separatorTime" }, ":")));
+        }
+        else {
+          return (index.h("div", { style: { display: 'flex' } }, index.h("div", { "data-hour": offset, class: "calendar__cell", onClick: () => this.selectHours(index$1) }, offset), index.h("div", { class: "separatorTime" }, ":")));
+        }
+      })), index.h("div", { class: "calendar__column", ref: elem => this._minutesScroll = elem, onScroll: () => this.updateScroll(this._minutesScroll) }, this._minutosLabel.map((offset, index$1) => {
+        if (index$1 === this.value.getMinutes()) {
+          return (index.h("div", { style: { display: 'flex' }, ref: elem => this._minutesSelect = elem }, index.h("div", { "data-minute": offset, class: "calendar__cell calendar__cell--selected", onClick: () => this.selectMinutes(index$1) }, offset), this.showSeconds && index.h("div", { class: "separatorTime" }, ":")));
+        }
+        else {
+          return (index.h("div", { style: { display: 'flex' } }, index.h("div", { "data-minute": offset, class: "calendar__cell", onClick: () => this.selectMinutes(index$1) }, offset), this.showSeconds && index.h("div", { class: "separatorTime" }, ":")));
+        }
+      })), this.showSeconds &&
+        index.h("div", { class: "calendar__column", ref: elem => this._secondsScroll = elem, onScroll: () => this.updateScroll(this._secondsScroll) }, this._minutosLabel.map((offset, index$1) => {
+          if (index$1 === this.value.getSeconds()) {
+            return (index.h("div", { "data-second": offset, class: "calendar__cell calendar__cell--selected", onClick: () => this.selectSeconds(index$1), ref: elem => this._secondsSelect = elem }, offset));
+          }
+          else {
+            return (index.h("div", { "data-second": offset, class: "calendar__cell", onClick: () => this.selectSeconds(index$1) }, offset));
+          }
+        })))))));
+  }
+  get _hostElem() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["observeValue"]
+  }; }
+};
+EzCalendar.style = ezCalendarCss;
+
+exports.ez_calendar = EzCalendar;