npm - @sankhyalabs/sankhyablocks - Versions diffs - 9.0.1 → 9.1.0-dev.1 - Mend

@sankhyalabs/sankhyablocks 9.0.1 → 9.1.0-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1096) hide show

package/dist/collection/components/snk-form-config/subcomponents/snk-tab-config/snk-tab-config.js DELETED Viewed

@@ -1,527 +0,0 @@
-import { h, Host, Fragment } from "@stencil/core";
-import { Sortable } from '@shopify/draggable';
-import { ApplicationContext, ElementIDUtils } from "@sankhyalabs/core";
-import { CONFIG_EVENTS, CONFIG_SORTABLE_EVENTS, KEY_EVENTS, TAB_NAMES, TYPE_ACTIONS } from "../../../../lib/utils/constants";
-export class SnkTabConfig {
-  constructor() {
-    this._refTabActions = [];
-    this._processedTabs = undefined;
-    this._activeEditText = undefined;
-    this._activeEditTextIndex = undefined;
-    this._actionsHide = [];
-    this._actionsShow = [];
-    this.selectedIndex = undefined;
-    this.selectedTab = undefined;
-    this.tabs = undefined;
-    this.tabItems = undefined;
-    this.messagesBuilder = undefined;
-  }
-  /**
-   * Conforme mecanismo de mensagens, é possível customizar as mensagens dos blocos de construção
-   * através de um pequeno modulo na estrutura da aplicação:
-   * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
-   * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-form.msg.ts"
-   */
-  getMessage(key, params) {
-    return this.messagesBuilder.getMessage(key, params);
-  }
-  controlSortableTab() {
-    if (this._sortableTab) {
-      this._sortableTab.destroy();
-    }
-    this._sortableTab = new Sortable(this._hostElem.querySelectorAll('[data-draggable-parent="tab"]'), {
-      draggable: '[data-draggable-element="tab"]',
-      mirror: {
-        constrainDimensions: true
-      },
-      distance: CONFIG_EVENTS.dragStartDistance
-    });
-    this._sortableTab.on(CONFIG_SORTABLE_EVENTS.dragStart, (evt) => this.controlStartDraggingTab(evt));
-    this._sortableTab.on(CONFIG_SORTABLE_EVENTS.dragStop, (evt) => this.controlStopDraggingTab(evt));
-  }
-  controlStartDraggingTab(evt) {
-    var _a, _b;
-    const mouseEvent = (_a = evt === null || evt === void 0 ? void 0 : evt.dragEvent) === null || _a === void 0 ? void 0 : _a.originalEvent;
-    const targetElement = mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.target;
-    const targetName = (_b = targetElement === null || targetElement === void 0 ? void 0 : targetElement.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase();
-    if (this._activeEditText === true || targetName === "EZ-ACTIONS-BUTTON") {
-      evt === null || evt === void 0 ? void 0 : evt.cancel();
-    }
-    else {
-      this.canStartDrag.emit();
-    }
-  }
-  controlStopDraggingTab(evt) {
-    const updateTimer = 500;
-    if (evt.data.newIndex !== evt.data.oldIndex) {
-      setTimeout(() => {
-        const newIndex = (evt.data.newIndex || 0) + 1;
-        this.ezOrderChange.emit(newIndex);
-      }, updateTimer);
-    }
-  }
-  handleTabClick(tab) {
-    this.selectedIndex = tab.index;
-    this._focusedIndex = tab.index;
-    this.selectedTab = tab.tabKey;
-    this.ezTabChange.emit(tab);
-    this.setFocusedBtn(false, tab.index);
-    this.setFocusedTab(tab.index);
-  }
-  handleSlotChange(ev) {
-    const slot = ev.target;
-    const content = slot.assignedElements()[0];
-    if (content) {
-      content.classList.add("tab-config__slot");
-    }
-  }
-  scrollBackward() {
-    const container = this._scrollContainer;
-    if (container) {
-      container.scrollLeft -= container.clientWidth;
-    }
-  }
-  scrollFoward() {
-    const container = this._scrollContainer;
-    if (container) {
-      let lastTab = null;
-      container.querySelectorAll(".tab-config__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("tab-config__hidden");
-      }
-      else {
-        this._backwardButton.classList.add("tab-config__hidden");
-      }
-      if (this._endHidden) {
-        this._forwardButton.classList.remove("tab-config__hidden");
-      }
-      else {
-        this._forwardButton.classList.add("tab-config__hidden");
-      }
-    }
-  }
-  domScrollHandler() {
-    window.clearTimeout(this._scrollCallBackScroll);
-    this._scrollCallBackScroll = window.setTimeout(() => { this.updateScroll(); }, 200);
-  }
-  setFocusedTab(index) {
-    window.clearTimeout(this._scrollCallBackFocus);
-    this._scrollCallBackFocus = window.setTimeout(() => {
-      const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
-      tabtoscroll === null || tabtoscroll === void 0 ? void 0 : tabtoscroll.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
-    }, 200);
-  }
-  controlKeyEventEnter(evt) {
-    evt.preventDefault();
-    const selectedTab = this._processedTabs[this._focusedIndex];
-    this.handleTabClick(selectedTab);
-    this.setFocusedTab(selectedTab.index);
-  }
-  controlKeyEventArrow(evt) {
-    let operator = undefined;
-    if (evt.key === KEY_EVENTS.arrowLeft) {
-      operator = false;
-    }
-    else if (evt.key === KEY_EVENTS.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);
-  }
-  controlKeyEventEscape(evt) {
-    evt.preventDefault();
-    const currentTab = this._processedTabs[this.selectedIndex];
-    this._focusedIndex = undefined;
-    this.handleTabClick(currentTab);
-    this.setFocusedTab(this.selectedIndex);
-  }
-  setFocusedParam(evt) {
-    if (this._activeEditText === true || evt == undefined) {
-      return;
-    }
-    if (evt.key === KEY_EVENTS.enter) {
-      this.controlKeyEventEnter(evt);
-      return;
-    }
-    if (evt.key === KEY_EVENTS.arrowLeft || evt.key === KEY_EVENTS.arrowRight) {
-      this.controlKeyEventArrow(evt);
-      return;
-    }
-    if (evt.key === KEY_EVENTS.tab || evt.key === KEY_EVENTS.escape) {
-      this.controlKeyEventEscape(evt);
-      return;
-    }
-  }
-  setFocusedBtn(visible, parameter) {
-    const tabsButtons = this._scrollContainer.querySelectorAll(".tab-config__tab");
-    tabsButtons.forEach((el) => {
-      el.classList.remove("tab-config__tab--is-focused");
-      if (el.id === "tab" + parameter && visible) {
-        el.classList.add("tab-config__tab--is-focused");
-      }
-    });
-  }
-  getStyledLabel(tabId) {
-    const tabElem = this._hostElem.querySelector(`#${tabId}`);
-    if (tabElem == undefined) {
-      return;
-    }
-    let styledLabel = {
-      fontSize: window.getComputedStyle(tabElem).getPropertyValue('font-size'),
-      fontWeight: window.getComputedStyle(tabElem).getPropertyValue('font-weight'),
-      fontFamily: window.getComputedStyle(tabElem).getPropertyValue('font-family')
-    };
-    return styledLabel;
-  }
-  cancelEditText(cancelTextEdition) {
-    var _a;
-    cancelTextEdition.stopPropagation();
-    this._activeEditText = false;
-    if (this._scrollContainer != undefined) {
-      (_a = this._scrollContainer.querySelector('.tab-config__tab--is-active')) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-  }
-  handleActions(actionSelect, tab) {
-    const { value: typeAction } = actionSelect.detail;
-    if (typeAction === TYPE_ACTIONS.rename) {
-      this._activeEditText = true;
-      this._activeEditTextIndex = tab.index;
-    }
-    else if (typeAction === TYPE_ACTIONS.hide || typeAction === TYPE_ACTIONS.show) {
-      this.hideTab.emit(tab);
-    }
-    else if (typeAction === TYPE_ACTIONS.delete) {
-      this.deleteTab.emit(tab);
-    }
-  }
-  handleSaveEditionText(editDetails) {
-    const { value, newValue } = editDetails.detail;
-    if (value === newValue) {
-      this.cancelEditText(editDetails);
-      return;
-    }
-    this._processedTabs.forEach((tab) => {
-      if (tab.label === value) {
-        tab.label = newValue;
-        this.cancelEditText(editDetails);
-        this.editionTitleTab.emit(editDetails);
-      }
-    });
-  }
-  onHideActions(index) {
-    const elementActionsBtn = this._refTabActions[index];
-    if (elementActionsBtn) {
-      elementActionsBtn.isOpened().then((isOpened) => {
-        if (isOpened) {
-          elementActionsBtn === null || elementActionsBtn === void 0 ? void 0 : elementActionsBtn.hideActions();
-        }
-      });
-    }
-  }
-  componentWillLoad() {
-    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
-    if (this._application != undefined) {
-      this._actionsHide = [
-        { value: TYPE_ACTIONS.rename, label: this.getMessage("snkTabConfig.labelRename") },
-        { value: TYPE_ACTIONS.hide, label: this.getMessage("snkTabConfig.labelHide") },
-        { value: TYPE_ACTIONS.delete, label: this.getMessage("snkTabConfig.labelDelete") }
-      ];
-      this._actionsShow = [
-        { value: TYPE_ACTIONS.rename, label: this.getMessage("snkTabConfig.labelRename") },
-        { value: TYPE_ACTIONS.show, label: this.getMessage("snkTabConfig.labelShow") },
-        { value: TYPE_ACTIONS.delete, label: this.getMessage("snkTabConfig.labelDelete") }
-      ];
-    }
-  }
-  componentWillRender() {
-    this._processedTabs = [];
-    if (this.tabs) {
-      this.tabs.split(",").forEach((label) => {
-        label = label.trim();
-        this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
-      });
-    }
-    this.tabItems.forEach((tab) => {
-      tab.label = tab.label !== TAB_NAMES.main ? tab.label : this.getMessage("snkFormConfig.form.mainArea");
-      tab.index = this._processedTabs.length;
-      this._processedTabs.push(tab);
-    });
-  }
-  componentDidRender() {
-    this.updateScroll();
-    this.controlSortableTab();
-  }
-  componentDidLoad() {
-    ElementIDUtils.addIDInfo(this._hostElem, "itemConfig");
-    this._processedTabs.forEach((tab, index) => {
-      const dataID = { id: tab.label };
-      ElementIDUtils.addIDInfo(this._hostElem.querySelector(`#tab${index}`), "itemConfig", dataID);
-    });
-  }
-  render() {
-    return (h(Host, null, h("button", { class: "tab-config__backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), h("div", { class: "tab-config__lower-bar" }), h("div", { class: "tab-config__scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev), "data-draggable-parent": "tab" }, 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, class: `tab-config__tab${isSelected ? " tab-config__tab--is-active" : ""}`, onClick: () => this.handleTabClick(tab), onDblClick: () => { this._activeEditText = true; this._activeEditTextIndex = index; }, "data-draggable-element": index > 0 ? "tab" : "", onMouseLeave: () => this.onHideActions(index), key: tab.label }, (this._activeEditText === true && this._activeEditTextIndex === index && index > 0) ||
-        h(Fragment, null, index > 0 && h("ez-icon", { iconName: tab.leftIcon || "drag-indicator", class: "tab-config__left-icon" }), (tab.visible === false && index > 0) && h("ez-icon", { iconName: tab.leftIcon || "eye-off", class: "tab-config__left-icon tab-config__left-icon--eye-off" }), h("span", { class: "tab-config__tab-label" + (tab.visible === false && index > 0 ? " tab-config__tab-label-disabled" : ""), title: tab.label }, tab.label), index > 0 &&
-          h("ez-actions-button", { class: "tab-config__actions-button", size: "small", ref: elem => this._refTabActions[index] = elem, actions: tab.visible === false ? this._actionsShow : this._actionsHide, isTransparent: true, arrowActive: true, onEzAction: (ev) => this.handleActions(ev, tab) }), h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } })), (this._activeEditText === true && index > 0 && this._activeEditTextIndex === index) &&
-        h("ez-text-edit", { value: tab.label, styled: this.getStyledLabel(tabId), class: "tab-config__edit-text", onSaveEdition: (ev) => this.handleSaveEditionText(ev), onCancelEdition: (ev) => this.cancelEditText(ev) }));
-    })), h("button", { class: "tab-config__forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
-  }
-  static get is() { return "snk-tab-config"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["snk-tab-config.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["snk-tab-config.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",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define o nome das abas do componente separadas por v\u00EDrgulas \",\"."
-        },
-        "attribute": "tabs",
-        "reflect": false
-      },
-      "tabItems": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ITab[]",
-          "resolved": "ITab[]",
-          "references": {
-            "ITab": {
-              "location": "local"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define o nome das abas do componente separadas por v\u00EDrgulas \",\"."
-        }
-      },
-      "messagesBuilder": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "SnkMessageBuilder",
-          "resolved": "SnkMessageBuilder",
-          "references": {
-            "SnkMessageBuilder": {
-              "location": "import",
-              "path": "../../../../lib/message/SnkMessageBuilder"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Respons\u00E1vel por flexibilizar e padronizar o uso de mensagens nos blocos de constru\u00E7\u00E3o."
-        }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_processedTabs": {},
-      "_activeEditText": {},
-      "_activeEditTextIndex": {},
-      "_actionsHide": {},
-      "_actionsShow": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "ezTabChange",
-        "name": "ezTabChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitido ao clicar para abrir o popup."
-        },
-        "complexType": {
-          "original": "ITab",
-          "resolved": "ITab",
-          "references": {
-            "ITab": {
-              "location": "local"
-            }
-          }
-        }
-      }, {
-        "method": "editionTitleTab",
-        "name": "editionTitleTab",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitido ao salvar uma altera\u00E7\u00E3o realizada no t\u00EDtulo da tab."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "deleteTab",
-        "name": "deleteTab",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitido ao deletar uma aba."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "hideTab",
-        "name": "hideTab",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitido ao ocultar uma aba."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "ezOrderChange",
-        "name": "ezOrderChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitido ao mover a ordem da aba."
-        },
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        }
-      }, {
-        "method": "canStartDrag",
-        "name": "canStartDrag",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitido ao ocultar uma aba."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "_hostElem"; }
-}