@sankhyalabs/ezui 1.1.4 → 1.1.8

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

@@ -0,0 +1,126 @@
+@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%;
+  overflow: hidden;
+
+
+  margin-bottom: var(--space--large, 24px);
+  --tab__box--box-shadow: var(--shadow, 0px 0px 8px 0px #000); 
+}
+
+.scroll {
+  display: flex;
+  width: 100%;
+  scroll-behavior: smooth;
+  overflow-x: auto;
+}
+
+.scroll.startHidden{
+  -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px);
+}
+
+.scroll.midle{
+  -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;
+  min-width: 100px;
+  background-color: unset;
+  cursor: pointer;
+  padding: 6px 12px;/*FIXME: Oza - precisamos usar tokens?*/
+  align-items: center;
+  justify-content: center;
+  color: var(--text--primary, #626e82);
+  font-family: var(--font-pattern, "Sora, Algerian");
+  font-size: var(--title--small, 14px);
+}
+
+.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);
+  /* border-radius: 5px 5px 0px 0px; */
+  /* box-shadow: var(--tab__box--box-shadow); */
+}
+
+.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;
+  clip-path: path("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");
+}
+.backward-button::after{
+  clip-path: path("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");
+}
+
+.forward-button:hover::after, .backward-button:hover::after{
+  background-color: var(--color--primary, #4e4e4e);
+}
+
+.hidden{
+  display: none;
+}
+
+.scroll::-webkit-scrollbar{
+  display: none;
+}

package/dist/{ezui/ez-tabselector.entry.js → collection/components/ez-tabselector/ez-tabselector.js}

@@ -1,209 +1,283 @@
-import { r as registerInstance, e as createEvent, h, i as Host, g as getElement } from './index-39044be2.js';
-
-const ezTabselectorCss = "@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%;overflow:hidden;margin-bottom:var(--space--large, 24px);--tab__box--box-shadow:var(--shadow, 0px 0px 8px 0px #000)}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.midle{-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;min-width:100px;background-color:unset;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Sora, Algerian\");font-size:var(--title--small, 14px)}.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;clip-path:path(\"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\")}.backward-button::after{clip-path:path(\"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\")}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}";
-
-const EzTabselector = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.change = createEvent(this, "change", 7);
-    this.setFoucusedParam = (ev) => {
-      if (ev.key === 'Enter') {
-        this.selectedindex = this.foucusedindex;
-        this.foucusedindex = undefined;
-        this.selectedtab = this._processedTabs[this.selectedindex]['tabKey'];
-        this.handleTabClick(this.selectedtab, parseInt(this.selectedindex));
-        ev.preventDefault();
-        this.setFocusedTab(this.selectedindex);
-      }
-      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.foucusedindex === undefined) {
-          if (operator === false) {
-            this.foucusedindex = this.selectedindex !== undefined ? (parseInt(this.selectedindex) - 1).toString() : undefined;
-          }
-          else {
-            this.foucusedindex = this.selectedindex !== undefined ? (parseInt(this.selectedindex) + 1).toString() : undefined;
-          }
-        }
-        else {
-          if (operator === false) {
-            this.foucusedindex = (parseInt(this.foucusedindex) - 1).toString();
-          }
-          else {
-            this.foucusedindex = (parseInt(this.foucusedindex) + 1).toString();
-          }
-        }
-        if (parseInt(this.foucusedindex) < 0) {
-          this.foucusedindex = '0';
-        }
-        else if (parseInt(this.foucusedindex) > this._processedTabs.length - 1) {
-          this.foucusedindex = (this._processedTabs.length - 1).toString();
-        }
-        this.setFoucusedBtn(true, this.foucusedindex);
-        this.setFocusedTab(this.foucusedindex);
-        this.change.emit();
-      }
-      else if (ev.key === 'Tab' || ev.key === 'Escape') {
-        this.foucusedindex = undefined;
-        this.selectedtab = this._processedTabs[this.selectedindex]['tabKey'];
-        this.handleTabClick(this.selectedtab, parseInt(this.selectedindex));
-        ev.preventDefault();
-        this.setFocusedTab(this.selectedindex);
-      }
-      // this.setFocusedTab();
-    };
-  }
-  handleTabClick(tab, index) {
-    this.selectedindex = index.toString();
-    this.foucusedindex = undefined;
-    this.selectedtab = tab;
-    this.change.emit();
-    this.setFoucusedBtn(false, this.selectedindex);
-  }
-  componentWillRender() {
-    if (!this._processedTabs) {
-      this._processedTabs = [];
-      if (this.tabs) {
-        this.tabs.split(',').forEach((label) => {
-          label = label.trim();
-          this._processedTabs.push(new Tab(label, label));
-        });
-      }
-      this._hostElem.querySelectorAll('ez-tab').forEach((elem) => {
-        const tabKey = elem.getAttribute('tabKey');
-        const label = elem.getAttribute('label');
-        const t = new Tab(label, tabKey);
-        const content = elem.firstChild;
-        if (content) {
-          content.setAttribute('slot', 'tab' + this._processedTabs.length);
-          this._hostElem.appendChild(content);
-        }
-        this._processedTabs.push(t);
-      });
-    }
-  }
-  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;
-    }
-  }
-  componentDidRender() {
-    this.updateScroll();
-  }
-  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', 'midle'];
-      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._scrollCallBackTeste);
-    this._scrollCallBackTeste = window.setTimeout(() => {
-      const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
-      console.log('tabtoscroll => ID', `#tab${this.selectedindex}`);
-      console.log('tabtoscroll', tabtoscroll);
-      tabtoscroll.scrollIntoView();
-    }, 200);
-  }
-  getTextWidth(text) {
-    if (this._textMesurement === undefined) {
-      this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
-    }
-    const context = this._textMesurement.getContext("2d");
-    context.font = '14px Sora, Algerian';
-    return Math.min(220, 24 + context.measureText(text).width) + 'px';
-  }
-  ;
-  setFoucusedBtn(visible, paramater) {
-    const tabsButtons = this._scrollContainer.querySelectorAll('.tab');
-    tabsButtons.forEach((el) => {
-      el.classList.remove('is-focused');
-      if (el.id === 'tab' + paramater && visible) {
-        el.classList.add('is-focused');
-      }
-      ;
-    });
-  }
-  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.setFoucusedParam(ev) }, this._processedTabs.map((tab, index) => {
-      const labelStyle = { 'min-width': this.getTextWidth(tab.label) };
-      const tabId = "tab" + index;
-      const isSelected = index === parseInt(this.selectedindex) || (this.selectedtab && tab.tabKey === this.selectedtab);
-      if (isSelected) {
-        this.selectedtab = tab.tabKey;
-        this.selectedindex = index.toString();
-      }
-      return h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab.tabKey, index), style: labelStyle }, h("span", { class: "tab-label", title: tab.label }, tab.label), h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
-    })), h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
-  }
-  get _hostElem() { return getElement(this); }
-};
-class Tab {
-  constructor(label, tabKey) {
-    this.label = label;
-    this.tabKey = tabKey;
-  }
-}
-EzTabselector.style = ezTabselectorCss;
-
-export { EzTabselector as ez_tabselector };
+import { Component, Event, Element, h, Prop, Host } from '@stencil/core';
+export class EzTabselector {
+  constructor() {
+    this.setFoucusedParam = (ev) => {
+      if (ev.key === 'Enter') {
+        this.selectedindex = this.foucusedindex;
+        this.foucusedindex = undefined;
+        this.selectedtab = this._processedTabs[this.selectedindex]['tabKey'];
+        this.handleTabClick(this.selectedtab, parseInt(this.selectedindex));
+        ev.preventDefault();
+        this.setFocusedTab(this.selectedindex);
+      }
+      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.foucusedindex === undefined) {
+          if (operator === false) {
+            this.foucusedindex = this.selectedindex !== undefined ? (parseInt(this.selectedindex) - 1).toString() : undefined;
+          }
+          else {
+            this.foucusedindex = this.selectedindex !== undefined ? (parseInt(this.selectedindex) + 1).toString() : undefined;
+          }
+        }
+        else {
+          if (operator === false) {
+            this.foucusedindex = (parseInt(this.foucusedindex) - 1).toString();
+          }
+          else {
+            this.foucusedindex = (parseInt(this.foucusedindex) + 1).toString();
+          }
+        }
+        if (parseInt(this.foucusedindex) < 0) {
+          this.foucusedindex = '0';
+        }
+        else if (parseInt(this.foucusedindex) > this._processedTabs.length - 1) {
+          this.foucusedindex = (this._processedTabs.length - 1).toString();
+        }
+        this.setFoucusedBtn(true, this.foucusedindex);
+        this.setFocusedTab(this.foucusedindex);
+        this.change.emit();
+      }
+      else if (ev.key === 'Tab' || ev.key === 'Escape') {
+        this.foucusedindex = undefined;
+        this.selectedtab = this._processedTabs[this.selectedindex]['tabKey'];
+        this.handleTabClick(this.selectedtab, parseInt(this.selectedindex));
+        ev.preventDefault();
+        this.setFocusedTab(this.selectedindex);
+      }
+      // this.setFocusedTab();
+    };
+  }
+  handleTabClick(tab, index) {
+    this.selectedindex = index.toString();
+    this.foucusedindex = undefined;
+    this.selectedtab = tab;
+    this.change.emit();
+    this.setFoucusedBtn(false, this.selectedindex);
+  }
+  componentWillRender() {
+    if (!this._processedTabs) {
+      this._processedTabs = [];
+      if (this.tabs) {
+        this.tabs.split(',').forEach((label) => {
+          label = label.trim();
+          this._processedTabs.push(new Tab(label, label));
+        });
+      }
+      this._hostElem.querySelectorAll('ez-tab').forEach((elem) => {
+        const tabKey = elem.getAttribute('tabKey');
+        const label = elem.getAttribute('label');
+        const t = new Tab(label, tabKey);
+        const content = elem.firstChild;
+        if (content) {
+          content.setAttribute('slot', 'tab' + this._processedTabs.length);
+          this._hostElem.appendChild(content);
+        }
+        this._processedTabs.push(t);
+      });
+    }
+  }
+  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;
+    }
+  }
+  componentDidRender() {
+    this.updateScroll();
+  }
+  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', 'midle'];
+      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._scrollCallBackTeste);
+    this._scrollCallBackTeste = window.setTimeout(() => {
+      const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
+      console.log('tabtoscroll => ID', `#tab${this.selectedindex}`);
+      console.log('tabtoscroll', tabtoscroll);
+      tabtoscroll.scrollIntoView();
+    }, 200);
+  }
+  getTextWidth(text) {
+    if (this._textMesurement === undefined) {
+      this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
+    }
+    const context = this._textMesurement.getContext("2d");
+    context.font = '14px Sora, Algerian';
+    return Math.min(220, 24 + context.measureText(text).width) + 'px';
+  }
+  ;
+  setFoucusedBtn(visible, paramater) {
+    const tabsButtons = this._scrollContainer.querySelectorAll('.tab');
+    tabsButtons.forEach((el) => {
+      el.classList.remove('is-focused');
+      if (el.id === 'tab' + paramater && visible) {
+        el.classList.add('is-focused');
+      }
+      ;
+    });
+  }
+  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.setFoucusedParam(ev) }, this._processedTabs.map((tab, index) => {
+        const labelStyle = { 'min-width': this.getTextWidth(tab.label) };
+        const tabId = "tab" + index;
+        const isSelected = index === parseInt(this.selectedindex) || (this.selectedtab && tab.tabKey === this.selectedtab);
+        if (isSelected) {
+          this.selectedtab = tab.tabKey;
+          this.selectedindex = index.toString();
+        }
+        return h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab.tabKey, index), style: labelStyle },
+          h("span", { class: "tab-label", title: tab.label }, tab.label),
+          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": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selectedindex",
+      "reflect": true
+    },
+    "selectedtab": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selectedtab",
+      "reflect": true
+    },
+    "tabs": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tabs",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "_hostElem"; }
+}
+class Tab {
+  constructor(label, tabKey) {
+    this.label = label;
+    this.tabKey = tabKey;
+  }
+}