@sankhyalabs/sankhyablocks 9.0.1 → 9.1.0-dev.2

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

@@ -1,60 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-f9e81701.js');
-const core = require('@sankhyalabs/core');
-const constants = require('./constants-241934b3.js');
-
-const snkFieldConfigCss = ".sc-snk-field-config-h{--snk-field-config--height:42px;--snk-field-config--width:100%;--snk-field-config__icon--width:48px;--snk-field-config-slim--height:32px;--snk-field-config--border-radius:var(--border--radius-medium, 12px);--snk-field-config--font-size:var(--text--medium, 14px);--snk-field-config--font-family:var(--font-pattern, Arial);--snk-field-config--font-weight:var(--text-weight--medium, 400);--snk-field-config--color:var(--title--primary, #000);--snk-field-config--padding-left:var(--space--medium, 6px);--snk-field-config__input--background-color:var(--background--medium, #e0e0e0);--snk-field-config__input--border:var(--border--medium, 2px solid);--snk-field-config__input--border-color:var(--background--xlight, #fff);--snk-field-config__required--color:var(--color--error, #FF0000);--snk-field-config__label--gap:var(--space--extra-small, 3px);--snk-field-config__transition--visibility:var(--transition, 0.2s linear);--snk-field-config__transition--opacity:var(--transition, 0.15s linear);--snk-field-config__config-popover--z-index:var(--more-visible, 2);--snk-field-config__config-outer-arrow--background-color:var(--color--secondary-200, #D2D3DA);--snk-field-config__draggable--padding-right:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--snk-field-config--width)}.field-config.sc-snk-field-config{width:100%;box-sizing:border-box;display:flex;align-items:center;padding-left:var(--snk-field-config--padding-left);font-weight:var(--snk-field-config--font-weight);height:var(--snk-field-config--height);border-radius:var(--snk-field-config--border-radius);font-family:var(--snk-field-config--font-family);font-size:var(--snk-field-config--font-size);border:var(--snk-field-config__input--border);border-color:var(--snk-field-config__input--border-color);background-color:var(--snk-field-config__input--background-color);color:var(--snk-field-config--color)}.field-config__config-popover.sc-snk-field-config{width:40px;margin-left:auto;z-index:var(--snk-field-config__config-popover--z-index)}.field-config__label.sc-snk-field-config{display:flex;flex-direction:row-reverse;line-height:calc(var(--snk-field-config--font-size) + 2px);gap:var(--snk-field-config__label--gap)}.field-config__label-text.sc-snk-field-config{overflow:hidden;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;display:-webkit-box;-o-text-overflow:ellipsis;text-overflow:ellipsis;word-break:break-word}.field-config__label-required.sc-snk-field-config{color:var(--snk-field-config__required--color)}.field-config__add.sc-snk-field-config{display:flex;margin-left:auto;visibility:hidden;opacity:0;transition:visibility var(--snk-field-config__transition--visibility), opacity var(--snk-field-config__transition--opacity)}.field-config__options.sc-snk-field-config{display:flex;margin-left:auto;visibility:hidden;opacity:0;transition:visibility var(--snk-field-config__transition--visibility), opacity var(--snk-field-config__transition--opacity)}.field-config__options--is-active.sc-snk-field-config{display:flex;visibility:visible;opacity:1}.field-config__remove-icon.sc-snk-field-config{margin-right:-15px}.field-config.sc-snk-field-config:hover .field-config__options.sc-snk-field-config{display:flex;visibility:visible;opacity:1}.field-config.sc-snk-field-config:hover .field-config__add.sc-snk-field-config{visibility:visible;opacity:1}.field-config__draggable.sc-snk-field-config{padding-right:var(--snk-field-config__draggable--padding-right)}.field-config__config-outer-arrow.sc-snk-field-config{clip-path:polygon(50% 0, 90% 100%, 10% 100%);border-radius:0.25em 0 0 0;width:30px;height:15px;padding-top:3px;border-bottom:1px solid #FFFFFF;background-color:var(--snk-field-config__config-outer-arrow--background-color)}.field-config__config-inner-arrow.sc-snk-field-config{background-color:#FFFFFF;clip-path:polygon(50% 0, 90% 100%, 10% 100%);border-radius:0.25em 0 0 0;width:30px;height:15px}.ez-box__container.sc-snk-field-config ez-collapsible-box.sc-snk-field-config{--snk-collapsible-box__header--padding-left:6px}ez-icon.sc-snk-field-config{--snk-icon--color:var(--snk-field-config--color)}ez-popover.sc-snk-field-config{--snk-popover__box--background-color:transparent;--snk-popover__box--box-shadow:none}.field-config__options.sc-snk-field-config ez-button.sc-snk-field-config{--snk-button--background-color:transparent;--snk-button--focus--border:none;--snk-button--focus--box-shadow:none}@media screen and (min-width: 1200px){.field-config__label.sc-snk-field-config{flex-direction:row}}";
-
-const SnkFieldConfig = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ezClickIcon = index.createEvent(this, "ezClickIcon", 7);
-    this._lang = "pt"; // Controla qual idioma será usado para definir a regras de hifenização.
-    this.isConfigActive = false;
-    this.fieldConfig = undefined;
-    this.modeInsertion = true;
-    this.dataUnit = undefined;
-    this.messagesBuilder = undefined;
-  }
-  handleAction(evt, type) {
-    evt.preventDefault();
-    evt.stopPropagation();
-    const field = this.fieldConfig;
-    if (type !== constants.ACTION_CONFIG.configuration) {
-      field.group = undefined;
-    }
-    this.ezClickIcon.emit({ field, type });
-  }
-  /**
-   * 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) {
-    return this.messagesBuilder.getMessage(key, {});
-  }
-  isRequired() {
-    var _a, _b;
-    const fieldMD = this.dataUnit && this.dataUnit.getField((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.name);
-    return (fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.required) === true || ((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.required) === true;
-  }
-  componentDidLoad() {
-    core.ElementIDUtils.addIDInfo(this._element);
-  }
-  render() {
-    if (this.fieldConfig == undefined) {
-      return;
-    }
-    return (index.h(index.Host, null, index.h("div", { class: "field-config" }, index.h("div", { class: "field-config__draggable" }, index.h("ez-icon", { iconName: "drag-indicator", size: "small" })), index.h("div", { class: "field-config__label" }, index.h("span", { class: "field-config__label-text", lang: this._lang, title: this.fieldConfig.label }, this.fieldConfig.label), this.isRequired() && index.h("span", { class: "field-config__label-required" }, "*")), this.modeInsertion ?
-      index.h("div", { class: "field-config__add" }, index.h("ez-button", { onClick: (evt) => this.handleAction(evt, constants.ACTION_CONFIG.add), mode: "icon", class: "ez-button--tertiary", iconName: "plus", size: "large", title: this.getMessage("snkFieldConfig.titleAdd") })) :
-      index.h("div", { class: "field-config__options" + (this.isConfigActive ? " field-config__options--is-active" : " ") }, index.h("ez-button", { mode: "icon", class: "ez-button--tertiary field-config__remove-icon", onClick: (evt) => this.handleAction(evt, constants.ACTION_CONFIG.remove), iconName: "minus", size: "large", title: this.getMessage("snkFieldConfig.titleRemove") }), index.h("ez-button", { id: "buttonConfig_" + this.fieldConfig.name, mode: "icon", class: "ez-button--tertiary", onClick: (evt) => this.handleAction(evt, constants.ACTION_CONFIG.configuration), iconName: this.isConfigActive ? "chevron-up" : "settings-inverted", size: "large", title: this.getMessage("snkFieldConfig.titleConfigurations") }))), this.isConfigActive && index.h("div", { class: "field-config__config-popover" }, index.h("div", { class: "field-config__config-outer-arrow" }, index.h("div", { class: "field-config__config-inner-arrow" })))));
-  }
-  get _element() { return index.getElement(this); }
-};
-SnkFieldConfig.style = snkFieldConfigCss;
-
-exports.snk_field_config = SnkFieldConfig;

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

@@ -1,332 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-f9e81701.js');
-const Sortable = require('./Sortable-fb1c4cbb.js');
-const core = require('@sankhyalabs/core');
-const constants = require('./constants-241934b3.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 Sortable.Sortable(this._hostElem.querySelectorAll('[data-draggable-parent="tab"]'), {
-      draggable: '[data-draggable-element="tab"]',
-      mirror: {
-        constrainDimensions: true
-      },
-      distance: constants.CONFIG_EVENTS.dragStartDistance
-    });
-    this._sortableTab.on(constants.CONFIG_SORTABLE_EVENTS.dragStart, (evt) => this.controlStartDraggingTab(evt));
-    this._sortableTab.on(constants.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 === 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(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 === 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(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 = 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: (ev) => this.cancelEditText(ev) }));
-    })), 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;