@sankhyalabs/sankhyablocks 0.0.0-bugfix-dev-KB-76362.1 → 0.0.0-bugfix-dev-KB-78242.0

package/dist/components/input-distinct-search2.js

@@ -1,264 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
-import { KeyboardManager } from '@sankhyalabs/core';
-import { f as filterItems, n as normalizeString, g as getMatchOption } from './filter-distinct-search.js';
-
-const inputDistinctSearchCss = ":host{--max-height-popover:180px;--scrollbar--color-default:var(--scrollbar--default, #626e82);--scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--scrollbar--border-radius:var(--border--radius-small, 6px);--scrollbar--width:var(--space--medium, 12px)}.divider{margin:var(--space--extra-small, 3px) 0;border:var(--border--small, 1px solid) var(--color--disable-secondary, #F2F5F8)}.new-value{color:var(--text--primary, #626e82);padding:var(--space--2xs, 8px) var(--space--3xs, 4px);font-size:var(--text--medium, 14px);font-family:var(--font-pattern, Roboto);cursor:pointer;border-radius:var(--border--radius-small, 6px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:none;background:none;width:100%;display:flex;min-height:max-content}.new-value-selected{background-color:var(--color--primary-300, #E2F4EF)}.new-value:hover{background-color:var(--background--medium, #e0e0e0)}.popover-content{margin:var(--space--small, 6px);max-height:calc(var(--max-height-popover) - (2 * var(--space--small, 6px)));display:flex;flex-direction:column}.list-container{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--scrollbar--color-clicked) var(--scrollbar--color-background);padding-right:var(--space--small, 6px)}.list-container::-webkit-scrollbar{background-color:var(--scrollbar--color-background);width:var(--scrollbar--width);max-width:var(--scrollbar--width);min-width:var(--scrollbar--width)}.list-container::-webkit-scrollbar-track{background-color:var(--scrollbar--color-background);border-radius:var(--scrollbar--border-radius)}.list-container::-webkit-scrollbar-thumb{background-color:var(--scrollbar--color-default);border-radius:var(--scrollbar--border-radius)}.list-container::-webkit-scrollbar-thumb:vertical:hover,.list-container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--scrollbar--color-hover)}.list-container::-webkit-scrollbar-thumb:vertical:active,.list-container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--scrollbar--color-clicked)}ez-popover{--ez-popover__box--z-index:15}.space-error{--ez-popover__margin:-19px 0 0 0}ez-list{--ez-list__item--margin:0}ez-text-input{--ez-text-input__icon--margin:var(--space--xs, 12px)}.badge-primary{--ez-badge--background-color:var(--color--primary-300);--ez-badge--color:var(--color--primary)}";
-
-const InputDistinctSearch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.changeValue = createEvent(this, "changeValue", 7);
-    this.iconClick = createEvent(this, "iconClick", 7);
-    this.textValue = "";
-    this.isNewItem = false;
-    this.filteredItems = [];
-    this.isNewItemSelected = false;
-    this.application = undefined;
-    this.distinctItems = [];
-    this.label = "";
-    this.value = "";
-    this.maxItems = 100;
-    this.debounceTime = 300;
-    this.canShowError = false;
-    this.mode = 'regular';
-    this.restrict = undefined;
-    this.errorMessage = undefined;
-  }
-  async observerValue(newValue) {
-    await this.selectedNewItem(newValue, true);
-  }
-  /**
-   * Seleciona um item
-   */
-  async selectValue(value, isNewItem = false) {
-    this.isNewItem = isNewItem;
-    this.textValue = value;
-    await this._refFilterInput.setValue(value);
-  }
-  /**
-   * Método para limpa o campo de entrada de pesquisa
-   */
-  clearInput() {
-    this._refFilterInput.setValue("");
-  }
-  /**
-   * Retorna se o conteúdo é inválido.
-   */
-  isInvalid() {
-    return this._refFilterInput.isInvalid();
-  }
-  /**
-   * Remove o foco do campo
-   */
-  setBlur() {
-    this._refFilterInput.setBlur();
-  }
-  /**
-   * Aplica o foco do campo
-   */
-  setFocus() {
-    this._refFilterInput.setFocus();
-  }
-  getMessage(key) {
-    return this.application.messagesBuilder.getMessage(key, null);
-  }
-  async optionLoader(searchArgument) {
-    return new Promise((resolve) => {
-      if (this._debounceTimeout) {
-        clearTimeout(this._debounceTimeout);
-      }
-      this._debounceTimeout = setTimeout(() => {
-        const { items } = filterItems(searchArgument, this.distinctItems, this.maxItems);
-        this.filteredItems = items;
-        resolve();
-      }, this.debounceTime);
-    });
-  }
-  async openPopOver() {
-    var _a;
-    await ((_a = this._refPopOver) === null || _a === void 0 ? void 0 : _a.showUnder(this._refFilterInput));
-  }
-  async closePopOver() {
-    var _a;
-    this.isNewItemSelected = false;
-    await ((_a = this._refPopOver) === null || _a === void 0 ? void 0 : _a.hide());
-    await this._refList.removeSelection();
-  }
-  async onTextChange(event) {
-    this.textValue = event.detail;
-    await this.optionLoader(event.detail);
-    await this.selectFirstItem();
-  }
-  onIconClick() {
-    this.iconClick.emit();
-  }
-  buidItems() {
-    var _a;
-    const items = (_a = this.filteredItems) === null || _a === void 0 ? void 0 : _a.map((item) => ({
-      label: item,
-      id: normalizeString(item),
-    }));
-    return items;
-  }
-  async setValue(value, isNewItem = false, preventEventEmit = false) {
-    this.isNewItem = isNewItem;
-    this.textValue = value;
-    await this._refFilterInput.setValue(value);
-    await this.closePopOver();
-    if (!preventEventEmit) {
-      this.changeValue.emit({
-        value,
-        isNewItem,
-      });
-    }
-  }
-  async selectedNewItem(value, preventEventEmit = false) {
-    if (!this.textValue && !value) {
-      await this.setValue("", false, preventEventEmit);
-      return;
-    }
-    const item = getMatchOption(value !== null && value !== void 0 ? value : this.textValue, this.distinctItems);
-    if (item) {
-      await this.setValue(item, false, preventEventEmit);
-      return;
-    }
-    await this.setValue(this.textValue || value, true, preventEventEmit);
-  }
-  async setSelectedValue() {
-    const selectedValue = await this._refList.getSelection();
-    await this.selectedNewItem((selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label) || this.textValue, true);
-    await this._refFilterInput.setBlur();
-    this._element.focus();
-  }
-  async selectNextItem() {
-    if (this.isNewItemSelected) {
-      return;
-    }
-    const itemSelected = await this._refList.getSelection();
-    const itemsAmount = this.filteredItems.length;
-    const indexSelected = this.filteredItems.findIndex((item) => item === (itemSelected === null || itemSelected === void 0 ? void 0 : itemSelected.label));
-    const isLastItemSelected = indexSelected === (itemsAmount - 1);
-    const optionNewItemIsAvailable = !!this.textValue;
-    if (!isLastItemSelected || !optionNewItemIsAvailable) {
-      this.isNewItemSelected = false;
-      await this._refList.selectNextItem();
-      return;
-    }
-    this.isNewItemSelected = true;
-    await this._refList.removeSelection();
-  }
-  async selectPreviousItem() {
-    const itemsAmount = this.filteredItems.length;
-    const lastItem = this.filteredItems[itemsAmount - 1];
-    if (this.isNewItemSelected && lastItem) {
-      this.isNewItemSelected = false;
-      await this._refList.setSelection({
-        id: normalizeString(lastItem),
-        label: lastItem
-      });
-      return;
-    }
-    await this._refList.selectPreviousItem();
-  }
-  bindKeyboardManager() {
-    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element });
-    this._keyboardManager
-      .bind("ArrowDown", () => { this.selectNextItem(); })
-      .bind("ArrowUp", () => { this.selectPreviousItem(); })
-      .bind("Enter", () => { this.setSelectedValue(); })
-      .bind("Tab", () => { this.setSelectedValue(); });
-  }
-  unbindKeyboardManager() {
-    this._keyboardManager
-      .unbind("ArrowDown")
-      .unbind("ArrowUp")
-      .unbind("Enter")
-      .unbind("Tab");
-  }
-  async selectFirstItem() {
-    if (!this.filteredItems.length) {
-      await this._refList.removeSelection();
-      this.isNewItemSelected = true;
-      return;
-    }
-    const firstItem = this.filteredItems[0];
-    this.isNewItemSelected = false;
-    await this._refList.setSelection({
-      id: normalizeString(firstItem),
-      label: firstItem,
-    });
-  }
-  initializeComponent() {
-    const { items } = filterItems("", this.distinctItems, this.maxItems);
-    this.filteredItems = items;
-  }
-  componentWillLoad() {
-    this.initializeComponent();
-  }
-  async componentDidLoad() {
-    this.bindKeyboardManager();
-    this.selectFirstItem();
-    await this.selectedNewItem(this.value, true);
-  }
-  disconnectedCallback() {
-    this.unbindKeyboardManager();
-  }
-  buildNewItemOption() {
-    if (!this.textValue) {
-      return;
-    }
-    return (h(Fragment, null, !!this.filteredItems.length &&
-      h("hr", { class: "divider" }), h("button", { slot: "bottomSlot", class: {
-        "new-value": true,
-        "new-value-selected": this.isNewItemSelected,
-      }, title: `${this.getMessage("snkDistinctSearch.titleAdd")} '${this.textValue}'`, onClick: () => this.selectedNewItem.bind(this)(undefined, true) }, this.getMessage("snkDistinctSearch.titleAdd"), " '", this.textValue, "'")));
-  }
-  render() {
-    return (h(Host, { onBlur: () => this.selectedNewItem.bind(this)() }, h("ez-filter-input", { ref: (ref) => this._refFilterInput = ref, label: this.label, value: this.textValue, onEzChange: this.onTextChange.bind(this), onEzIconClick: this.onIconClick.bind(this), onEzFocusIn: this.openPopOver.bind(this), canShowError: this.canShowError, mode: this.mode, restrict: this.restrict, errorMessage: this.errorMessage, enabledIconClick: true }, this.isNewItem &&
-      h("ez-badge", { slot: "right", label: this.getMessage("snkDistinctSearch.titleBadgeNew"), size: "small-medium", class: "badge-primary" })), h("ez-popover", { ref: (ref) => this._refPopOver = ref, boxWidth: "full-width", autoClose: false, overlayType: "none", class: {
-        'space-error': this.canShowError,
-      } }, h("div", { class: "popover-content" }, h("section", { class: "list-container" }, h("ez-list", { ref: (ref) => this._refList = ref, dataSource: this.buidItems(), onEzClickItem: ({ detail }) => this.setValue.bind(this)(detail.label, false, true), ezSelectable: true, hoverFeedback: true, disableShortcuts: true })), this.buildNewItemOption()))));
-  }
-  get _element() { return this; }
-  static get watchers() { return {
-    "value": ["observerValue"]
-  }; }
-  static get style() { return inputDistinctSearchCss; }
-}, [1, "input-distinct-search", {
-    "application": [16],
-    "distinctItems": [16],
-    "label": [1],
-    "value": [1],
-    "maxItems": [2, "max-items"],
-    "debounceTime": [2, "debounce-time"],
-    "canShowError": [4, "can-show-error"],
-    "mode": [1],
-    "restrict": [1],
-    "errorMessage": [1, "error-message"],
-    "textValue": [32],
-    "isNewItem": [32],
-    "filteredItems": [32],
-    "isNewItemSelected": [32],
-    "selectValue": [64],
-    "clearInput": [64],
-    "isInvalid": [64],
-    "setBlur": [64],
-    "setFocus": [64]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["input-distinct-search"];
-  components.forEach(tagName => { switch (tagName) {
-    case "input-distinct-search":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, InputDistinctSearch);
-      }
-      break;
-  } });
-}
-
-export { InputDistinctSearch as I, defineCustomElement as d };

package/dist/components/search-modal.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface SearchModal extends Components.SearchModal, HTMLElement {}
-export const SearchModal: {
-  prototype: SearchModal;
-  new (): SearchModal;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/search-modal.js

@@ -1,6 +0,0 @@
-import { S as SearchModal$1, d as defineCustomElement$1 } from './search-modal2.js';
-
-const SearchModal = SearchModal$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SearchModal, defineCustomElement };

package/dist/components/search-modal2.js

@@ -1,264 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { EzScrollDirection } from '@sankhyalabs/ezui/dist/collection/components/ez-scroller/EzScrollDirection';
-import { KeyboardManager } from '@sankhyalabs/core';
-import { f as filterItems, n as normalizeString, g as getMatchOption } from './filter-distinct-search.js';
-
-const searchModalCss = ".sc-search-modal-h{display:block}ez-popup.sc-search-modal{--ez-popup__title--font-size:var(--title--large, 20px);--ez-popup__container--height:380px}.search-modal-scroller.sc-search-modal{height:174px}.search-modal-text.sc-search-modal{font-family:var(--font-pattern);color:var(--text--primary);font-size:var(--text--medium)}ez-filter-input.sc-search-modal>input.sc-search-modal{text-overflow:ellipsis}.ez-content.sc-search-modal{height:190px;display:flex;align-items:center;justify-content:center}";
-
-const SearchModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.popupClose = createEvent(this, "popupClose", 7);
-    this.changeValue = createEvent(this, "changeValue", 7);
-    this.debounceTimeout = null;
-    this.filteredItems = [];
-    this.searchFocus = false;
-    this.isLimited = false;
-    this.application = undefined;
-    this.listItens = [];
-    this.opened = false;
-    this.value = undefined;
-    this.canShowError = false;
-    this.emptyMessage = undefined;
-    this.debounceTime = 300;
-    this.maxItens = 100;
-    this.label = 'Pesquisar';
-    this.mode = 'regular';
-    this.restrict = undefined;
-    this.errorMessage = undefined;
-  }
-  /**
-  * Método para adicionar a nova palavra e chamar o método closeModal() para fechar o modal
-  */
-  addNewItem() {
-    this.closeModal();
-    this.changeValue.emit({ isNewItem: true, value: this.value });
-  }
-  /**
-  * Método para limpa o campo de entrada de pesquisa
-  */
-  clearInput() {
-    this._refFilterInput.setValue("");
-  }
-  /**
-  * Método para fechar o modal
-  */
-  closeModal() {
-    this._popupElement.opened = false;
-    this.popupClose.emit(false);
-  }
-  /**
-  * Método para abrir o modal
-  */
-  openModal() {
-    this._popupElement.opened = true;
-    setTimeout(() => this.setFocus(), 100);
-  }
-  /**
-  * Retorna se o conteúdo é inválido.
-  */
-  isInvalid() {
-    this._refFilterInput.isInvalid();
-  }
-  /**
-  * Remove o foco do campo
-  */
-  setBlur() {
-    this._refFilterInput.setBlur();
-    this.searchFocus = false;
-  }
-  /**
-  * Aplica o foco do campo
-  */
-  setFocus() {
-    this._refFilterInput.setFocus();
-    this.searchFocus = true;
-  }
-  /**
-  * Método para tratar a mensagem de erro
-  */
-  watchPropErrorMessage() {
-    this._refFilterInput.errorMessage = this.errorMessage;
-  }
-  /**
-  * Método para tratar o value do input
-  */
-  watchPropValue() {
-    this._refFilterInput.value = this.value;
-  }
-  /**
-  * Atualiza a lista de itens à medida que o usuário digita no campo de pesquisa.
-  */
-  async handleInput(event) {
-    if (this.debounceTimeout) {
-      clearTimeout(this.debounceTimeout);
-    }
-    this.value = event.detail;
-    this.debounceTimeout = setTimeout(async () => {
-      var _a;
-      const { isLimited, items } = filterItems(event.detail, this.listItens, this.maxItens);
-      this.filteredItems = items;
-      this.isLimited = isLimited;
-      await ((_a = this._refList) === null || _a === void 0 ? void 0 : _a.removeSelection());
-    }, this.debounceTime);
-  }
-  initializeComponent() {
-    this.filteredItems = this.listItens;
-  }
-  getMessage(key) {
-    return this.application.messagesBuilder.getMessage(key, null);
-  }
-  componentWillLoad() {
-    this.initializeComponent();
-  }
-  componentDidLoad() {
-    this.bindKeyboardManager();
-    this._refFilterInput.value = this.value;
-    const { isLimited, items } = filterItems(this.value, this.listItens, this.maxItens);
-    this.filteredItems = items;
-    this.isLimited = isLimited;
-  }
-  disconnectedCallback() {
-    this.unbindKeyboardManager();
-  }
-  buildItems() {
-    var _a;
-    const items = (_a = this.filteredItems) === null || _a === void 0 ? void 0 : _a.map((item) => ({
-      label: item,
-      id: normalizeString(item),
-    }));
-    return items;
-  }
-  async tabSelect() {
-    var _a;
-    const selectedValue = await ((_a = this._refList) === null || _a === void 0 ? void 0 : _a.getSelection());
-    if (this.searchFocus && this._refList) {
-      this.searchFocus = false;
-      this._refList.focus();
-      await this.selectFirstItem();
-    }
-    else if (selectedValue) {
-      await this._refList.removeSelection();
-      await this._refButton.setFocus();
-    }
-    else {
-      await this._refButton.setBlur();
-      this.setFocus();
-    }
-  }
-  bindKeyboardManager() {
-    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element });
-    this._keyboardManager
-      .bind("ArrowDown", () => { this.selectNextItem(); })
-      .bind("ArrowUp", () => { this.selectPreviousItem(); })
-      .bind("Enter", () => { this.setSelectedValue(); })
-      .bind("Tab", () => { this.tabSelect(); });
-  }
-  unbindKeyboardManager() {
-    this._keyboardManager
-      .unbind("ArrowDown")
-      .unbind("ArrowUp")
-      .unbind("Enter")
-      .unbind("Tab");
-  }
-  async setSelectedValue() {
-    var _a;
-    const selectedValue = await ((_a = this._refList) === null || _a === void 0 ? void 0 : _a.getSelection());
-    if (selectedValue) {
-      this.changeValue.emit({ isNewItem: false, value: selectedValue.label });
-      this.closeModal();
-    }
-    else if (this.searchFocus && this.enabledButtonNewItem()) {
-      this.addNewItem();
-    }
-  }
-  async selectNextItem() {
-    var _a;
-    const itemSelected = await ((_a = this._refList) === null || _a === void 0 ? void 0 : _a.getSelection());
-    if (this.searchFocus && !itemSelected) {
-      this.setBlur();
-      await this.selectFirstItem();
-      return;
-    }
-    await this._refList.selectNextItem();
-  }
-  async selectPreviousItem() {
-    const itemSelected = await this._refList.getSelection();
-    if (itemSelected === undefined)
-      return;
-    await this._refList.selectPreviousItem();
-  }
-  async selectFirstItem() {
-    if (!this.filteredItems.length) {
-      await this._refList.removeSelection();
-      return;
-    }
-    const firstItem = this.filteredItems[0];
-    await this._refList.setSelection({
-      id: normalizeString(firstItem),
-      label: firstItem,
-    });
-  }
-  enabledButtonNewItem() {
-    if (this.value === undefined)
-      return false;
-    if (getMatchOption(this.value, this.listItens))
-      return false;
-    return this.value.trim().length === 0 ? false : true;
-  }
-  buildMessage() {
-    if (this.isLimited) {
-      return this.getMessage("snkDistinctSearch.limitResult");
-    }
-    return `${this.filteredItems.length} ${this.filteredItems.length > 1 ? this.getMessage("snkDistinctSearch.availableResults") : this.getMessage("snkDistinctSearch.availableResult")}`;
-  }
-  render() {
-    var _a;
-    return (h(Host, null, h("ez-popup", { ref: (ref) => this._popupElement = ref, size: "x-small", "ez-title": this.label, onEzClosePopup: () => this.popupClose.emit(false), "height-mode": "auto" }, h("div", null, h("ez-filter-input", { ref: (ref) => this._refFilterInput = ref, label: "Pesquisar", onEzChange: this.handleInput.bind(this), onBlur: () => this.searchFocus = false, onEzFocusIn: () => this.searchFocus = true, errorMessage: this.errorMessage, canShowError: this.canShowError, mode: this.mode, value: this.value, restrict: this.restrict }), this.filteredItems.length === 0 ? (h("div", { class: "ez-content" }, h("div", { class: "ez-text--center search-modal-text" }, this.emptyMessage))) : (h("div", null, h("div", { class: "search-modal-text ez-padding-vertical--medium" }, this.buildMessage()), h("ez-scroller", { class: "search-modal-scroller", direction: EzScrollDirection.VERTICAL }, h("ez-list", { ref: (ref) => this._refList = ref, dataSource: this.buildItems(), onEzClickItem: ({ label }) => this.setSelectedValue.bind(this)(label), ezSelectable: true, hoverFeedback: true, disableShortcuts: true })))), h("div", { class: "ez-flex ez-flex--justify-end" }, h("ez-button", { ref: (ref) => this._refButton = ref, class: "ez-button--tertiary", enabled: this.enabledButtonNewItem(), label: `${this.getMessage("snkDistinctSearch.titleAdd")} ${(_a = this.label) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()}`, onClick: () => this.addNewItem() }))))));
-  }
-  get _element() { return this; }
-  static get watchers() { return {
-    "errorMessage": ["watchPropErrorMessage"],
-    "value": ["watchPropValue"]
-  }; }
-  static get style() { return searchModalCss; }
-}, [2, "search-modal", {
-    "application": [16],
-    "listItens": [1040],
-    "opened": [1540],
-    "value": [1],
-    "canShowError": [4, "can-show-error"],
-    "emptyMessage": [1, "empty-message"],
-    "debounceTime": [2, "debounce-time"],
-    "maxItens": [2, "max-itens"],
-    "label": [1],
-    "mode": [1],
-    "restrict": [1],
-    "errorMessage": [1, "error-message"],
-    "filteredItems": [32],
-    "searchFocus": [32],
-    "isLimited": [32],
-    "addNewItem": [64],
-    "clearInput": [64],
-    "closeModal": [64],
-    "openModal": [64],
-    "isInvalid": [64],
-    "setBlur": [64],
-    "setFocus": [64]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["search-modal"];
-  components.forEach(tagName => { switch (tagName) {
-    case "search-modal":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SearchModal);
-      }
-      break;
-  } });
-}
-
-export { SearchModal as S, defineCustomElement as d };

package/dist/components/snk-distinct-search.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface SnkDistinctSearch extends Components.SnkDistinctSearch, HTMLElement {}
-export const SnkDistinctSearch: {
-  prototype: SnkDistinctSearch;
-  new (): SnkDistinctSearch;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;