@sankhyalabs/sankhyablocks 0.0.0-bugfix-dev-KB-11997.0

package/dist/cjs/snk-tab-config.cjs.entry.js

@@ -0,0 +1,331 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f9e81701.js');
+const draggable_bundle = require('./draggable.bundle-82a25c06.js');
+const core = require('@sankhyalabs/core');
+const constants = require('./constants-d187e03e.js');
+require('./_commonjsHelpers-537d719a.js');
+
+const snkTabConfigCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}.sc-snk-tab-config-h{--snk-tab-config--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>');--snk-tab-config--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>');--snk-tab-config__lower-bar--background-color:var(--color--disable-primary, #e5eaf0);--snk-tab-config__lower-bar--border:2px solid var(--color--disable-primary, #e5eaf0);--snk-tab-config__tab--color:var(--text--primary, #626e82);--snk-tab-config__tab--font-family:var(--font-pattern, \"Roboto\");--snk-tab-config__tab--font-size:var(--title--small, 14px);--snk-tab-config__tab--padding:var(--space--small, 6px) var(--space--medium, 12px);--snk-tab-config__tab-is-active--color:var(--color--primary, #008561);--snk-tab-config__tab-hover--color:var(--color--secondary, #383c45);--snk-tab-config__tab-is-focused--border:1px dashed var(--color--primary, #008561);--snk-tab-config__tab-label--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--snk-tab-config__tab-label--margin-bottom:var(--space--extra-small, 3px);--snk-tab-config__new-button-icon--color:var(--color--secondary-700, #1C1D22);--snk-tab-config__forward-button--background-color:var(--text--primary, #626e82);--snk-tab-config__forward-button-hover--background-color:var(--color--primary, #008561);--snk-tab-config__left-icon--padding-right:var(--space--small, 6px);--snk-tab-config__left-icon--color:var(--text--disable, #AFB6C0);--snk-tab-config__tab-label-disabled--color:var(--text--disable, #AFB6C0);--snk-tab-config__slot--margin-left:var(--space--small, 6px);display:flex;position:relative;width:100%;overflow:hidden}.tab-config__scroll.sc-snk-tab-config{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.tab-config__lower-bar.sc-snk-tab-config{position:absolute;left:0%;right:0%;top:91%;bottom:0%;border-radius:2px;background-color:var(--snk-tab-config__lower-bar--background-color);border:var(--snk-tab-config__lower-bar--border)}.tab-config__tab.sc-snk-tab-config{display:flex;border:none;background-color:unset;cursor:pointer;align-items:center;justify-content:center;min-width:fit-content;color:var(--snk-tab-config__tab--color);font-family:var(--snk-tab-config__tab--font-family);font-size:var(--snk-tab-config__tab--font-size);padding:var(--snk-tab-config__tab--padding)}.tab-config__tab.sc-snk-tab-config:focus,.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{outline:none}.tab-config__tab--is-active.sc-snk-tab-config{position:relative;color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab.sc-snk-tab-config:hover{color:var(--snk-tab-config__tab-hover--color)}.tab-config__tab--is-active.sc-snk-tab-config:hover{color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab--is-active.sc-snk-tab-config::after{content:\"\";position:absolute;width:100%;height:100%;clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out;background-color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab--is-focused.sc-snk-tab-config{border:var(--snk-tab-config__tab-is-focused--border)}.tab-config__tab-label.sc-snk-tab-config{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--snk-tab-config__tab-label--text-shadow);margin-bottom:var(--snk-tab-config__tab-label--margin-bottom)}.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{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}.tab-config__new-button.sc-snk-tab-config{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.tab-config__new-button.sc-snk-tab-config ez-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__new-button-icon--color)}.tab-config__backward-button.sc-snk-tab-config{left:0px;box-shadow:10px 10px 5px 5px white;background:white}.tab-config__forward-button.sc-snk-tab-config{box-shadow:10px 10px 5px 20px white;background:white}.tab-config__forward-button.sc-snk-tab-config::after,.tab-config__backward-button.sc-snk-tab-config::after{content:'';display:flex;width:10px;height:16px;background-color:var(--snk-tab-config__forward-button--background-color)}.tab-config__forward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--forward-icon);mask-image:var(--snk-tab-config--forward-icon)}.tab-config__backward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--backward-icon);mask-image:var(--snk-tab-config--backward-icon)}.tab-config__forward-button.sc-snk-tab-config:hover::after,.tab-config__backward-button.sc-snk-tab-config:hover::after{background-color:var(--snk-tab-config__forward-button-hover--background-color)}.tab-config__new-button.sc-snk-tab-config:hover ez-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__forward-button-hover--background-color)}.tab-config__hidden.sc-snk-tab-config{display:none}.tab-config__scroll.sc-snk-tab-config::-webkit-scrollbar{display:none}.tab-config__left-icon.sc-snk-tab-config{padding-right:var(--snk-tab-config__left-icon--padding-right);--ez-icon--color:var(--snk-tab-config__left-icon--color)}.tab-config__left-icon--eye-off.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__left-icon--color)}.tab-config__right-icon.sc-snk-tab-config{visibility:hidden;padding-left:var(--snk-tab-config__left-icon--padding-right)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{visibility:visible}.tab-config__tab--is-active.sc-snk-tab-config .tab-config__right-icon.sc-snk-tab-config{visibility:visible;--ez-icon--color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__tab-hover--color)}.tab-config__tab--is-active.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__tab-is-active--color)}.tab-config__actions-button.sc-snk-tab-config{--ez-actions-button__btn-action--min-width:100px;visibility:hidden;opacity:0;transition:visibility 1s linear, opacity 0.3s linear}.tab-config__tab.sc-snk-tab-config:hover .tab-config__actions-button.sc-snk-tab-config{visibility:visible;opacity:1;transition:visibility 0.2s linear, opacity 0.10s linear}[data-draggable-element].sc-snk-tab-config{cursor:grab}.tab-config__tab-label-disabled.sc-snk-tab-config{color:var(--snk-tab-config__tab-label-disabled--color)}.tab-config__slot.sc-snk-tab-config{margin-left:var(--snk-tab-config__slot--margin-left)}";
+
+const SnkTabConfig = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezTabChange = index.createEvent(this, "ezTabChange", 7);
+    this.editionTitleTab = index.createEvent(this, "editionTitleTab", 7);
+    this.deleteTab = index.createEvent(this, "deleteTab", 7);
+    this.hideTab = index.createEvent(this, "hideTab", 7);
+    this.ezOrderChange = index.createEvent(this, "ezOrderChange", 7);
+    this.canStartDrag = index.createEvent(this, "canStartDrag", 7);
+    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 draggable_bundle.draggable_bundle.Sortable(this._hostElem.querySelectorAll('[data-draggable-parent="tab"]'), {
+      draggable: '[data-draggable-element="tab"]',
+      mirror: {
+        constrainDimensions: true
+      }
+    });
+    this._sortableTab.on(constants.CONFIG_EVENTS.dragStart, (evt) => this.controlStartDraggingTab(evt));
+    this._sortableTab.on(constants.CONFIG_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 === constants.KEY_EVENTS.arrowLeft) {
+      operator = false;
+    }
+    else if (evt.key === constants.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 === constants.KEY_EVENTS.enter) {
+      this.controlKeyEventEnter(evt);
+      return;
+    }
+    if (evt.key === constants.KEY_EVENTS.arrowLeft || evt.key === constants.KEY_EVENTS.arrowRight) {
+      this.controlKeyEventArrow(evt);
+      return;
+    }
+    if (evt.key === constants.KEY_EVENTS.tab || evt.key === constants.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() {
+    var _a;
+    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 === constants.TYPE_ACTIONS.rename) {
+      this._activeEditText = true;
+      this._activeEditTextIndex = tab.index;
+    }
+    else if (typeAction === constants.TYPE_ACTIONS.hide || typeAction === constants.TYPE_ACTIONS.show) {
+      this.hideTab.emit(tab);
+    }
+    else if (typeAction === constants.TYPE_ACTIONS.delete) {
+      this.deleteTab.emit(tab);
+    }
+  }
+  handleSaveEditionText(editDetails) {
+    const { value, newValue } = editDetails.detail;
+    if (value === newValue) {
+      this.cancelEditText();
+      return;
+    }
+    this._processedTabs.forEach((tab) => {
+      if (tab.label === value) {
+        tab.label = newValue;
+        this.cancelEditText();
+        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 = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    if (this._application != undefined) {
+      this._actionsHide = [
+        { value: constants.TYPE_ACTIONS.rename, label: this.getMessage("snkTabConfig.labelRename") },
+        { value: constants.TYPE_ACTIONS.hide, label: this.getMessage("snkTabConfig.labelHide") },
+        { value: constants.TYPE_ACTIONS.delete, label: this.getMessage("snkTabConfig.labelDelete") }
+      ];
+      this._actionsShow = [
+        { value: constants.TYPE_ACTIONS.rename, label: this.getMessage("snkTabConfig.labelRename") },
+        { value: constants.TYPE_ACTIONS.show, label: this.getMessage("snkTabConfig.labelShow") },
+        { value: constants.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 !== constants.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() {
+    core.ElementIDUtils.addIDInfo(this._hostElem, "itemConfig");
+    this._processedTabs.forEach((tab, index) => {
+      const dataID = { id: tab.label };
+      core.ElementIDUtils.addIDInfo(this._hostElem.querySelector(`#tab${index}`), "itemConfig", dataID);
+    });
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("button", { class: "tab-config__backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), index.h("div", { class: "tab-config__lower-bar" }), index.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$1) => {
+      const tabId = "tab" + index$1;
+      const isSelected = index$1 === this.selectedIndex || (this.selectedTab && tab.tabKey === this.selectedTab);
+      if (isSelected) {
+        this.selectedTab = tab.tabKey;
+        this.selectedIndex = index$1;
+      }
+      return index.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$1; }, "data-draggable-element": index$1 > 0 ? "tab" : "", onMouseLeave: () => this.onHideActions(index$1), key: tab.label }, (this._activeEditText === true && this._activeEditTextIndex === index$1 && index$1 > 0) ||
+        index.h(index.Fragment, null, index$1 > 0 && index.h("ez-icon", { iconName: tab.leftIcon || "drag-indicator", class: "tab-config__left-icon" }), (tab.visible === false && index$1 > 0) && index.h("ez-icon", { iconName: tab.leftIcon || "eye-off", class: "tab-config__left-icon tab-config__left-icon--eye-off" }), index.h("span", { class: "tab-config__tab-label" + (tab.visible === false && index$1 > 0 ? " tab-config__tab-label-disabled" : ""), title: tab.label }, tab.label), index$1 > 0 &&
+          index.h("ez-actions-button", { class: "tab-config__actions-button", size: "small", ref: elem => this._refTabActions[index$1] = elem, actions: tab.visible === false ? this._actionsShow : this._actionsHide, isTransparent: true, arrowActive: true, onEzAction: (ev) => this.handleActions(ev, tab) }), index.h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } })), (this._activeEditText === true && index$1 > 0 && this._activeEditTextIndex === index$1) &&
+        index.h("ez-text-edit", { value: tab.label, styled: this.getStyledLabel(tabId), class: "tab-config__edit-text", onSaveEdition: (ev) => this.handleSaveEditionText(ev), onCancelEdition: () => this.cancelEditText() }));
+    })), index.h("button", { class: "tab-config__forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
+  }
+  get _hostElem() { return index.getElement(this); }
+};
+SnkTabConfig.style = snkTabConfigCss;
+
+exports.snk_tab_config = SnkTabConfig;

package/dist/cjs/snk-taskbar-custom-elements.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f9e81701.js');
+
+const snkTaskbarCss = ".sc-snk-taskbar-custom-elements-h{display:flex}.taskbar-custom-elements-container.sc-snk-taskbar-custom-elements{display:none}";
+
+const SnkTaskbarCustomElements = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.slot = 'TASKBAR_CUSTOM_ELEMENTS';
+  }
+  render() {
+    return (index.h(index.Host, { slot: this.slot }, index.h("div", { id: this.slot, class: "taskbar-custom-elements-container" }, index.h("slot", null))));
+  }
+};
+SnkTaskbarCustomElements.style = snkTaskbarCss;
+
+exports.snk_taskbar_custom_elements = SnkTaskbarCustomElements;

package/dist/cjs/snk-taskbar.cjs.entry.js

@@ -0,0 +1,287 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f9e81701.js');
+const core = require('@sankhyalabs/core');
+const AuthorizationConfig = require('./AuthorizationConfig-79ffae4b.js');
+const taskbarElements = require('./taskbar-elements-39949c7a.js');
+const index$1 = require('./index-0e663819.js');
+require('./index-102ba62d.js');
+
+const snkTaskbarCss = ".sc-snk-taskbar-h{display:flex}.taskbar-custom-elements-container.sc-snk-taskbar{display:none}";
+
+const SnkTaskbar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.actionClick = index.createEvent(this, "actionClick", 7);
+    this.TASKBAR_ITEM_ID_PREFIX = 'TASKBAR_ITEM_';
+    this._titleKeyByElement = {
+      [taskbarElements.TaskbarElement.UPDATE]: "snkTaskbar.titleUpdate",
+      [taskbarElements.TaskbarElement.PREVIOUS]: "snkTaskbar.titlePrevious",
+      [taskbarElements.TaskbarElement.NEXT]: "snkTaskbar.titleNext",
+      [taskbarElements.TaskbarElement.REFRESH]: "snkTaskbar.titleRefresh",
+      [taskbarElements.TaskbarElement.CLONE]: "snkTaskbar.titleClone",
+      [taskbarElements.TaskbarElement.REMOVE]: "snkTaskbar.titleRemove",
+      [taskbarElements.TaskbarElement.MORE_OPTIONS]: "snkTaskbar.titleMoreOptions",
+      [taskbarElements.TaskbarElement.INSERT]: "snkTaskbar.titleInsert",
+      [taskbarElements.TaskbarElement.CANCEL]: "snkTaskbar.titleCancel",
+      [taskbarElements.TaskbarElement.SAVE]: "snkTaskbar.titleSave",
+      [taskbarElements.TaskbarElement.GRID_MODE]: "snkTaskbar.titleGridMode",
+      [taskbarElements.TaskbarElement.FORM_MODE]: "snkTaskbar.titleFormMode",
+      [taskbarElements.TaskbarElement.CONFIGURATOR]: "snkTaskbar.titleConfigurator",
+      [taskbarElements.TaskbarElement.ATTACH]: "snkTaskbar.titleAttach",
+    };
+    this._permissions = undefined;
+    this._customElements = undefined;
+    this._customElementsId = undefined;
+    this._slotContainer = undefined;
+    this.customSlotId = "TASKBAR_CUSTOM_ELEMENTS";
+    this.customContainerId = undefined;
+    this.configName = undefined;
+    this.resourceID = undefined;
+    this.buttons = undefined;
+    this.customButtons = undefined;
+    this.actionsList = undefined;
+    this.primaryButton = undefined;
+    this.disabledButtons = undefined;
+    this.dataUnit = undefined;
+    this.presentationMode = index$1.PresentationMode.PRIMARY;
+    this.messagesBuilder = undefined;
+  }
+  observeButtons() {
+    this._definitions = undefined;
+  }
+  // Internal methods
+  elementsFromString(strButtons) {
+    const elements = [];
+    if (strButtons == null)
+      return elements;
+    strButtons.split(",").forEach(buttonName => {
+      buttonName = buttonName.trim();
+      if (taskbarElements.VisibleWhenForbidden[buttonName] || this.isAllowed(buttonName)) {
+        elements.push(buttonName.trim());
+      }
+    });
+    return elements;
+  }
+  isAllowed(buttonName) {
+    if (buttonName === taskbarElements.AuthorizationElements.CONFIGURATOR) {
+      return this._permissions
+        ? this._permissions.isSup
+          || this._permissions[AuthorizationConfig.AuthorizationConfig.CONFIG_GRID]
+          || this._permissions[AuthorizationConfig.AuthorizationConfig.CONFIG]
+        : false;
+    }
+    if (taskbarElements.AuthorizationElements[buttonName]) {
+      return this._permissions ? this._permissions.isSup || this._permissions[buttonName] : false;
+    }
+    return true;
+  }
+  /**
+   * 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-taskbar.msg.ts"
+   */
+  getTitle(element) {
+    var _a;
+    let key;
+    if (this.isAllowed(element)) {
+      key = this._titleKeyByElement[element];
+    }
+    else {
+      key = "snkTaskbar.forbidden";
+    }
+    return key ? (_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage(key, {}) : "";
+  }
+  elementClick(elem) {
+    if (this.dataUnit) {
+      switch (elem) {
+        case taskbarElements.TaskbarElement.PREVIOUS:
+          this.dataUnit.previousRecord();
+          break;
+        case taskbarElements.TaskbarElement.NEXT:
+          this.dataUnit.nextRecord();
+          break;
+        case taskbarElements.TaskbarElement.REFRESH:
+          this.dataUnit.loadData();
+          break;
+        case taskbarElements.TaskbarElement.CLONE:
+          this.dataUnit.copySelected();
+          break;
+        case taskbarElements.TaskbarElement.REMOVE:
+          this.dataUnit.removeSelectedRecords();
+          break;
+        case taskbarElements.TaskbarElement.INSERT:
+          this.dataUnit.addRecord();
+          break;
+        case taskbarElements.TaskbarElement.CANCEL:
+          this.dataUnit.cancelEdition();
+          break;
+        case taskbarElements.TaskbarElement.SAVE:
+          this.dataUnit.saveData();
+          break;
+      }
+    }
+    if (this.isEnabled(elem))
+      this.actionClick.emit(elem);
+  }
+  isEnabled(elem) {
+    if (!this.isAllowed(elem)) {
+      return false;
+    }
+    return !(this.disabledButtons && this.disabledButtons.includes(elem));
+  }
+  validatePresentationMode() {
+    if (Object.values(index$1.PresentationMode).includes(this.presentationMode)) {
+      return;
+    }
+    this.presentationMode = index$1.PresentationMode.PRIMARY;
+  }
+  getElement(index, def) {
+    let className = def === this.primaryButton ? "ez-button--primary " : "";
+    if (index > 1) {
+      className += "ez-padding-left--medium";
+    }
+    const taskbarElement = taskbarElements.TaskbarElement[def.toString()];
+    if (taskbarElement) {
+      return taskbarElements.buildElem(def, className, this.getIdElemBtnNative(def), elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem), this.actionsList, this.configName, this.presentationMode);
+    }
+    else {
+      return taskbarElements.buildCustomButton(def, className, this.getIdElemBtnCustom(def), elem => this.elementClick(elem), elem => this.isEnabled(elem));
+    }
+  }
+  getIdElemBtnNative(taskbarElem) {
+    return core.StringUtils.toCamelCase(taskbarElem);
+  }
+  getIdElemBtnCustom(btnCustom) {
+    return core.StringUtils.toCamelCase(btnCustom.name);
+  }
+  isDivider(element) {
+    var _a;
+    if (element === undefined) {
+      return false;
+    }
+    return (_a = element.$attrs$) === null || _a === void 0 ? void 0 : _a["data-taskbar-divider"];
+  }
+  removeEmpty(elements) {
+    let lastElem;
+    return elements.filter(elem => {
+      if (elem == undefined) {
+        return false;
+      }
+      if (this.isDivider(lastElem) && this.isDivider(elem)) {
+        return false;
+      }
+      lastElem = elem;
+      return true;
+    });
+  }
+  appendCustomElementsInTaskbar() {
+    this._customElementsId.forEach(id => {
+      const elementId = id.replace(this.TASKBAR_ITEM_ID_PREFIX, '');
+      const customElement = this._customElements.get(elementId);
+      const container = this._element.querySelector(`#${id}`);
+      if (container) {
+        container === null || container === void 0 ? void 0 : container.appendChild(customElement);
+      }
+      else {
+        this.unlinkCustomElementFromTaskbar(customElement);
+      }
+    });
+  }
+  addCustomElementContainer(elem) {
+    const elementId = `${this.TASKBAR_ITEM_ID_PREFIX}${elem}`;
+    if (!this._customElementsId.includes(elementId)) {
+      this._customElementsId.push(elementId);
+    }
+    return index.h("span", { key: elementId, id: elementId });
+  }
+  getCustomElements() {
+    var _a, _b;
+    this._customElementsId = [];
+    this._customElements = new Map();
+    this._slotContainer = this.buildSlotContainer();
+    const customElementsArray = Array.from((_b = (_a = this._slotContainer) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : []);
+    customElementsArray.forEach(item => this._customElements.set(item.id, item));
+  }
+  buildSlotContainer() {
+    if (this.customContainerId) {
+      const container = document.querySelector(`#${this.customContainerId}`);
+      return container === null || container === void 0 ? void 0 : container.querySelector(`#${this.customSlotId}`);
+    }
+    else {
+      return this._element.querySelector(`#${this.customSlotId}`);
+    }
+  }
+  componentWillLoad() {
+    this._application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    if (this._application) {
+      this._application.getAllAccess(this.resourceID).then(access => this._permissions = access);
+    }
+    else {
+      this._permissions = {};
+    }
+    this.getCustomElements();
+  }
+  componentWillRender() {
+    if (this._definitions == undefined && this._permissions) {
+      this._definitions = this.elementsFromString(this.buttons);
+    }
+    this.validatePresentationMode();
+  }
+  componentDidLoad() {
+    const dataInfo = { dataUnit: this.dataUnit };
+    core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
+  componentDidRender() {
+    this.appendCustomElementsInTaskbar();
+  }
+  disconnectedCallback() {
+    this.unlinkAllCustomElements();
+  }
+  unlinkAllCustomElements() {
+    var _a;
+    (_a = this._customElementsId) === null || _a === void 0 ? void 0 : _a.forEach(id => {
+      const elementId = id.replace(this.TASKBAR_ITEM_ID_PREFIX, '');
+      const customElement = this._customElements.get(elementId);
+      this.unlinkCustomElementFromTaskbar(customElement);
+    });
+  }
+  unlinkCustomElementFromTaskbar(customElement) {
+    this._slotContainer.appendChild(customElement);
+  }
+  render() {
+    if (this._definitions === undefined) {
+      return undefined;
+    }
+    let index$1 = 0;
+    return (index.h(index.Host, null, this.removeEmpty(this._definitions.map((elem) => {
+      var _a;
+      if (elem === taskbarElements.TaskbarElement.DIVIDER) {
+        index$1 = 0;
+      }
+      else {
+        index$1++;
+      }
+      if (taskbarElements.TaskbarElement[elem]) {
+        return this.getElement(index$1, taskbarElements.TaskbarElement[elem]);
+      }
+      if ((_a = this.customButtons) === null || _a === void 0 ? void 0 : _a.has(elem)) {
+        return this.getElement(index$1, this.customButtons.get(elem));
+      }
+      if (this._customElements.has(elem)) {
+        return this.addCustomElementContainer(elem);
+      }
+      return index.h("slot", { name: elem });
+    })), index.h("div", { class: "taskbar-custom-elements-container" }, index.h("slot", { name: this.customSlotId }))));
+  }
+  get _element() { return index.getElement(this); }
+  static get watchers() { return {
+    "buttons": ["observeButtons"]
+  }; }
+};
+SnkTaskbar.style = snkTaskbarCss;
+
+exports.snk_taskbar = SnkTaskbar;