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

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

@@ -0,0 +1,211 @@
+import { h } from "@stencil/core";
+import { ALLOWED_ANIMATIONS } from './ez-skeleton.constants';
+export class EzSkeleton {
+  constructor() {
+    this.items = [];
+    this.count = 1;
+    this.variant = 'text';
+    this.width = null;
+    this.height = null;
+    this.marginBottom = null;
+    this.animation = 'progress';
+  }
+  componentWillLoad() {
+    this.init();
+  }
+  componentWillUpdate() {
+    this.init();
+  }
+  init() {
+    this.items.length = this.count;
+    this.items.fill(1);
+    if (!ALLOWED_ANIMATIONS.includes(this.animation)) {
+      this.animation = 'progress';
+    }
+  }
+  get style() {
+    let dimenssionsStyles = {
+      width: null,
+      height: null,
+      marginBottom: null
+    };
+    if (this.width) {
+      dimenssionsStyles.width = this.width;
+    }
+    if (this.height) {
+      dimenssionsStyles.height = this.height;
+    }
+    if (this.marginBottom) {
+      dimenssionsStyles.marginBottom = this.marginBottom;
+    }
+    return dimenssionsStyles;
+  }
+  render() {
+    return this.items.map((_, index) => {
+      return (h("span", { key: index, class: {
+          circle: this.variant === 'circle',
+          rect: this.variant === 'rect',
+          progress: this.animation === 'progress',
+          'progress-dark': this.animation === 'progress-dark',
+          pulse: this.animation === 'pulse',
+          skeleton: true
+        }, "data-busy": "true", "data-valuemin": "0", "data-valuemax": "100", "data-valuetext": "Loading...", role: "progressbar", tabindex: "0", style: this.style }));
+    });
+  }
+  static get is() { return "ez-skeleton"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-skeleton.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-skeleton.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "count": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "memberof",
+              "text": "Skeleton"
+            }],
+          "text": "Number of rows of current skeleton type"
+        },
+        "attribute": "count",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'circle' | 'rect' | 'text'",
+          "resolved": "\"circle\" | \"rect\" | \"text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "type",
+              "text": "{('circle' | '')}"
+            }, {
+              "name": "memberof",
+              "text": "Skeleton"
+            }],
+          "text": "Variant of the skeleton - circle or row"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'text'"
+      },
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "type",
+              "text": "{string}"
+            }, {
+              "name": "memberof",
+              "text": "Skeleton"
+            }],
+          "text": "Width of the skeleton ex. 100px, 100%, auto etc."
+        },
+        "attribute": "width",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "height": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "type",
+              "text": "{string}"
+            }, {
+              "name": "memberof",
+              "text": "Skeleton"
+            }],
+          "text": "Height of the skeleton ex. 100px, 100%, auto etc."
+        },
+        "attribute": "height",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "marginBottom": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "type",
+              "text": "{string}"
+            }, {
+              "name": "memberof",
+              "text": "Skeleton"
+            }],
+          "text": "MarginBottom of the skeleton ex. 10px, 0 etc."
+        },
+        "attribute": "margin-bottom",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "animation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'progress' | 'progress-dark' | 'pulse' | 'false'",
+          "resolved": "\"false\" | \"progress\" | \"progress-dark\" | \"pulse\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "type",
+              "text": "{('progress' | 'progress-dark' | 'pulse' | 'false')}"
+            }, {
+              "name": "memberof",
+              "text": "Skeleton"
+            }],
+          "text": "Animation type"
+        },
+        "attribute": "animation",
+        "reflect": false,
+        "defaultValue": "'progress'"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,149 @@
+@keyframes activate {
+  0% {
+    clip-path: inset(calc(100% - 3px) 50% 0px 50%);
+  }
+
+  100% {
+    clip-path: inset(calc(100% - 3px) 0px 0px 0px);
+  }
+}
+
+:host {
+  display: flex;
+  position: relative;
+  width: 100%;
+  /* border-bottom: 2px solid #dce0e8; */
+  overflow: hidden;
+  /* @doc Define a sombra do box da aba. */
+  /* --tabselector__box--box-shadow: var(--shadow, 0px 0px 8px 0px #000); */
+  /*@doc Contém o ícone de voltar para a aba anterior.*/
+  --tabselector--backward-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z"/></svg>');
+  /*@doc Contém o ícone de avançar para a aba posterior.*/
+  --tabselector--forward-icon: 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>');
+}
+
+.scroll {
+  display: flex;
+  width: 100%;
+  scroll-behavior: smooth;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.scroll.startHidden {
+  -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px);
+}
+
+.scroll.middle {
+  -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px));
+}
+
+.scroll.endHidden {
+  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px));
+}
+
+.tab {
+  display: flex;
+  border: none;
+  background-color: unset;
+  min-width: 100px;
+  max-width: 260px;
+  cursor: pointer;
+  padding: 6px 12px;
+  align-items: center;
+  justify-content: center;
+  color: var(--text--primary, #626e82);
+  font-family: var(--font-pattern, "Roboto");
+  font-size: var(--title--small, 14px);
+  flex-shrink: 0;
+}
+
+.tab:focus, .forward-button, .backward-button {
+  outline: none;
+}
+
+.is-active {
+  position: relative;
+  color: var(--color--primary, #008561);
+}
+
+.is-active::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color--primary, #008561);
+  clip-path: inset(calc(100% - 3px) 0px 0px 0px);
+  animation: activate 0.25s ease-in-out;
+}
+
+.is-focused {
+  border: 1px dashed var(--color--primary, #000000c5);
+}
+
+.tab-label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-shadow: var(--text-shadow);
+  margin-bottom: var(--space--extra-small, 3px);
+}
+
+.forward-button, .backward-button {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  box-sizing: border-box;
+  padding: 0px;
+  top: 0px;
+  right: 0px;
+  width: 16px;
+  height: 100%;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+}
+
+.backward-button {
+  left: 0px;
+}
+
+.forward-button::after, .backward-button::after {
+  content: '';
+  display: flex;
+  background-color: var(--text--primary, #008561);
+  width: 10px;
+  height: 16px;
+}
+
+.forward-button::after {
+  -webkit-mask-image: var(--tabselector--forward-icon);
+  mask-image: var(--tabselector--forward-icon);
+}
+
+.backward-button::after {
+  -webkit-mask-image: var(--tabselector--backward-icon);
+  mask-image: var(--tabselector--backward-icon);
+}
+
+.forward-button:hover::after, .backward-button:hover::after {
+  background-color: var(--color--primary, #4e4e4e);
+}
+
+.hidden {
+  display: none;
+}
+
+.scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.left-icon {
+  padding-right: var(--space--small);
+}
+
+.right-icon {
+  padding-left: var(--space--small);
+}

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

@@ -0,0 +1,321 @@
+import { h, Host } from "@stencil/core";
+import { ElementIDUtils, StringUtils } from "@sankhyalabs/core";
+export class EzTabselector {
+  constructor() {
+    this.setFocusedParam = (ev) => {
+      if (ev.key === "Enter") {
+        const selectedTab = this._processedTabs[this._focusedIndex];
+        this.handleTabClick(selectedTab);
+        ev.preventDefault();
+        this.setFocusedTab(selectedTab.index);
+      }
+      else if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
+        let operator = undefined;
+        if (ev.key === "ArrowLeft") {
+          operator = false;
+        }
+        else if (ev.key === "ArrowRight") {
+          operator = true;
+        }
+        else {
+          return;
+        }
+        if (this._focusedIndex === undefined) {
+          if (operator === false) {
+            this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex - 1 : undefined;
+          }
+          else {
+            this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex + 1 : undefined;
+          }
+        }
+        else {
+          if (operator === false) {
+            this._focusedIndex = this._focusedIndex - 1;
+          }
+          else {
+            this._focusedIndex = this._focusedIndex + 1;
+          }
+        }
+        if (this._focusedIndex < 0) {
+          this._focusedIndex = 0;
+        }
+        else if (this._focusedIndex > this._processedTabs.length - 1) {
+          this._focusedIndex = this._processedTabs.length - 1;
+        }
+        this.setFocusedBtn(true, this._focusedIndex);
+        this.setFocusedTab(this._focusedIndex);
+      }
+      else if (ev.key === "Tab" || ev.key === "Escape") {
+        const currentTab = this._processedTabs[this.selectedIndex];
+        this._focusedIndex = undefined;
+        this.handleTabClick(currentTab);
+        ev.preventDefault();
+        this.setFocusedTab(this.selectedIndex);
+      }
+    };
+    this._processedTabs = undefined;
+    this.selectedIndex = undefined;
+    this.selectedTab = undefined;
+    this.tabs = undefined;
+  }
+  observeTabs(newValue) {
+    if (newValue && typeof newValue !== "string") {
+      this._processedTabs = newValue;
+    }
+  }
+  handleTabClick(tab) {
+    this.selectedIndex = tab.index;
+    this._focusedIndex = undefined;
+    this.selectedTab = tab.tabKey;
+    this.ezChange.emit(tab);
+    this.setFocusedBtn(false, tab.index);
+  }
+  componentWillRender() {
+    if (!this._processedTabs) {
+      if (this.tabs) {
+        if (Array.isArray(this.tabs)) {
+          this._processedTabs = [...this.tabs];
+        }
+        else {
+          this._processedTabs = [];
+          this.tabs.split(",").forEach((label) => {
+            label = label.trim();
+            this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
+            this.buildElementIdTab(this._processedTabs);
+          });
+        }
+      }
+      this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
+        const tabKey = elem.getAttribute("tabKey");
+        const label = elem.getAttribute("label");
+        const leftIcon = elem.getAttribute("leftIcon");
+        const rightIcon = elem.getAttribute("rightIcon");
+        const tab = { label, tabKey, leftIcon, rightIcon, index: this._processedTabs.length };
+        const content = elem.firstChild;
+        if (content) {
+          content.setAttribute("slot", "tab" + tab.index);
+          this._hostElem.appendChild(content);
+        }
+        this._processedTabs.push(tab);
+        this.buildElementIdTab(this._processedTabs);
+      });
+    }
+  }
+  componentDidRender() {
+    this.updateScroll();
+  }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElem, "itemsSelector");
+    this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
+      var _a;
+      const label = (_a = elem.querySelector('span.tab-label')) === null || _a === void 0 ? void 0 : _a.innerText;
+      const dataInfo = { id: `${StringUtils.toCamelCase(label)}` };
+      ElementIDUtils.addIDInfo(elem, "itemSelector", dataInfo);
+    });
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (content) {
+      content.style.marginLeft = "6px";
+    }
+  }
+  scrollBackward() {
+    const container = this._scrollContainer;
+    if (container) {
+      container.scrollLeft -= container.clientWidth;
+    }
+  }
+  scrollFoward() {
+    const container = this._scrollContainer;
+    if (container) {
+      let lastTab = null;
+      container.querySelectorAll(".tab").forEach((tab) => {
+        if (tab.getBoundingClientRect().right < container.clientWidth) {
+          lastTab = tab;
+        }
+      });
+      container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
+    }
+  }
+  updateScroll() {
+    const container = this._scrollContainer;
+    if (container) {
+      const { scrollWidth, clientWidth, scrollLeft } = container;
+      const remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
+      this._startHidden = container.scrollLeft > 0;
+      this._endHidden = remainingScroll > 0;
+      if (this._startHidden) {
+        this._backwardButton.classList.remove("hidden");
+      }
+      else {
+        this._backwardButton.classList.add("hidden");
+      }
+      if (this._endHidden) {
+        this._forwardButton.classList.remove("hidden");
+      }
+      else {
+        this._forwardButton.classList.add("hidden");
+      }
+      const classNames = ["", "startHidden", "endHidden", "middle"];
+      const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
+      classNames.forEach((name) => {
+        if (name !== currentClass && container.classList.contains(name)) {
+          container.classList.remove(name);
+        }
+      });
+      if (currentClass && !container.classList.contains(currentClass)) {
+        container.classList.add(currentClass);
+      }
+    }
+  }
+  domScrollHandler() {
+    window.clearTimeout(this._scrollCallBack);
+    this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
+  }
+  setFocusedTab(index) {
+    window.clearTimeout(this._scrollCallBackTest);
+    this._scrollCallBackTest = window.setTimeout(() => {
+      const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
+      tabtoscroll.scrollIntoView();
+    }, 200);
+  }
+  setFocusedBtn(visible, parameter) {
+    const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
+    tabsButtons.forEach((el) => {
+      el.classList.remove("is-focused");
+      if (el.id === "tab" + parameter && visible) {
+        el.classList.add("is-focused");
+      }
+      ;
+    });
+  }
+  buildElementIdTab(tabs) {
+    tabs.forEach(tab => {
+      if (!tab.hasOwnProperty(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)) {
+        const elemIdTabSelector = this._hostElem.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+        const dataElementID = `${elemIdTabSelector}_${StringUtils.toCamelCase(tab.tabKey)}`;
+        tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = dataElementID;
+      }
+    });
+  }
+  render() {
+    return (h(Host, null, h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index) => {
+      const tabId = "tab" + index;
+      const isSelected = index === this.selectedIndex || (this.selectedTab && tab.tabKey === this.selectedTab);
+      if (isSelected) {
+        this.selectedTab = tab.tabKey;
+        this.selectedIndex = index;
+      }
+      return h("button", { id: tabId, name: "tab-button", class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab) }, tab.leftIcon && h("ez-icon", { iconName: tab.leftIcon, class: "left-icon" }), h("span", { class: "tab-label", title: tab.label }, tab.label), tab.rightIcon && h("ez-icon", { iconName: tab.rightIcon, class: "right-icon" }), h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
+    })), h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
+  }
+  static get is() { return "ez-tabselector"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-tabselector.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-tabselector.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selectedIndex": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o index da aba selecionada."
+        },
+        "attribute": "selected-index",
+        "reflect": true
+      },
+      "selectedTab": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a aba selecionada."
+        },
+        "attribute": "selected-tab",
+        "reflect": true
+      },
+      "tabs": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | Array<Tab>",
+          "resolved": "Tab[] | string",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "Tab": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o nome das abas do componente.\nPodendo serem separadas por v\u00EDrgula \",\" ou em um Array de configura\u00E7\u00E3o."
+        },
+        "attribute": "tabs",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_processedTabs": {}
+    };
+  }
+  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 componente."
+        },
+        "complexType": {
+          "original": "Tab",
+          "resolved": "Tab",
+          "references": {
+            "Tab": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "_hostElem"; }
+  static get watchers() {
+    return [{
+        "propName": "tabs",
+        "methodName": "observeTabs"
+      }];
+  }
+}