@sankhyalabs/ezui 5.22.0-dev.11 → 5.22.0-dev.111

package/dist/cjs/ez-combo-box-list_3.cjs.entry.js

@@ -0,0 +1,388 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a7b0c73d.js');
+const core = require('@sankhyalabs/core');
+const types = require('./types-6a5df0c7.js');
+const ApplicationUtils = require('./ApplicationUtils-c9d1205c.js');
+require('./DialogType-2114c337.js');
+require('./CheckMode-ecb90b87.js');
+require('./FormLayout-c2451c7f.js');
+
+const ezComboBoxListCss = ":host{--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box--line-height:calc(var(--text--medium, 14px) + 4px);--ez-combo-box__list-title--primary:var(--title--primary, #2B3A54);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);--ez-combo-box__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-combo-box__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-combo-box__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-combo-box__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-combo-box__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-combo-box__scrollbar--width:var(--space--medium, 12px);--ez-combo-box__list-container--padding:var(--space--extra-small, 3px)}.list-container{padding-top:var(--ez-combo-box__list-container--padding)}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:0;z-index:var(--more-visible, 2);max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small) + 9px);background-color:var(--ez-combo-box--background-color--xlight);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow--medium, 0 8px 24px 0 rgba(43, 58, 84, 0.10));padding:var(--ez-combo-box--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;padding:0;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto;scrollbar-width:thin;gap:3px;scrollbar-color:var(--ez-combo-box__scrollbar--color-clicked) var(--ez-combo-box__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-combo-box__scrollbar--color-background);width:var(--ez-combo-box__scrollbar--width);max-width:var(--ez-combo-box__scrollbar--width);min-width:var(--ez-combo-box__scrollbar--width)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-combo-box__scrollbar--color-background);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-combo-box__scrollbar--color-default);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-combo-box__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-combo-box__scrollbar--color-clicked)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-combo-box--border-radius-small);padding:var(--ez-combo-box--space--small);min-height:var(--ez-combo-box__list-height);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size);line-height:var(--ez-combo-box--line-height)}.item__label{font-weight:var(--ez-combo-box--font-weight--medium)}.item__label--bold{font-weight:var(--ez-combo-box--font-weight--large)}.item__value{text-align:center;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;min-height:var(--ez-combo-box__list-height)}.message__no-result{color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-combo-box__list-title--primary);border-top:3px solid transparent}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
+
+const EzComboBoxList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.showLoading = undefined;
+    this.visibleOptions = undefined;
+    this.textEmptyList = "Nenhum resultado encontrado";
+    this.showOptionValue = undefined;
+    this.preSelection = undefined;
+    this.maxWidth = undefined;
+    this.width = undefined;
+    this.onOptionSelect = undefined;
+    this.onOptionHover = undefined;
+  }
+  /**
+   * Move a seleção para a próxima opção na lista.
+   */
+  async nextOption() {
+    var _a, _b;
+    if (!((_a = this.visibleOptions) === null || _a === void 0 ? void 0 : _a.length))
+      return;
+    const isAtLastOption = this.preSelection !== undefined && this.preSelection >= this.visibleOptions.length - 1;
+    if (!isAtLastOption) {
+      this.preSelection = this.preSelection === undefined ? 0 : this.preSelection + 1;
+      this.scrollToOption(this.visibleOptions[this.preSelection]);
+      (_b = this.onOptionHover) === null || _b === void 0 ? void 0 : _b.call(this, this.preSelection);
+    }
+  }
+  /**
+   * Move a seleção para a opção anterior na lista, sem ultrapassar o início.
+   */
+  async previousOption() {
+    var _a, _b;
+    if (!((_a = this.visibleOptions) === null || _a === void 0 ? void 0 : _a.length))
+      return;
+    const isAtFirstOption = this.preSelection !== undefined && this.preSelection <= 0;
+    if (!isAtFirstOption) {
+      this.preSelection = this.preSelection === undefined ? this.visibleOptions.length - 1 : this.preSelection - 1;
+      this.scrollToOption(this.visibleOptions[this.preSelection]);
+      (_b = this.onOptionHover) === null || _b === void 0 ? void 0 : _b.call(this, this.preSelection);
+    }
+  }
+  /**
+   * Seleciona a opção atualmente pré-selecionada.
+   */
+  async selectCurrentOption() {
+    if (this.preSelection !== undefined) {
+      this.onOptionSelect(this.visibleOptions[this.preSelection]);
+      this.preSelection = undefined;
+    }
+  }
+  /**
+   * Observa mudanças na propriedade `width` e ajusta a largura da lista.
+   *
+   * @param newValue O novo valor da largura.
+   * @param oldValue O valor anterior da largura.
+   */
+  observeWidth(newValue, oldValue) {
+    if (newValue === oldValue)
+      return;
+    if (!this._listWrapper)
+      return;
+    this._listWrapper.style.width = `${this.width}px`;
+  }
+  /**
+   * Observa mudanças na propriedade `maxWidth` e ajusta a largura máxima da lista.
+   *
+   * @param newValue O novo valor da largura máxima.
+   * @param oldValue O valor anterior da largura máxima.
+   */
+  observeMaxWidth(newValue, oldValue) {
+    if (newValue === oldValue)
+      return;
+    if (!this._listWrapper)
+      return;
+    this._listWrapper.style.maxWidth = this.maxWidth ? `${this.maxWidth}px` : '';
+  }
+  /**
+   * Gerencia a navegação por teclado na lista do combo box.
+   *
+   * - `ArrowDown`: Move para a próxima opção.
+   * - `ArrowUp`: Move para a opção anterior.
+   * - `Enter`: Seleciona a opção atual.
+   * - `Escape`: Limpa a pré-seleção.
+   *
+   * @param event O evento de teclado.
+   */
+  handleKeyDown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        event.stopPropagation();
+        this.nextOption();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        event.stopPropagation();
+        this.previousOption();
+        break;
+      case "Enter":
+        this.selectCurrentOption();
+        break;
+      case "Escape":
+        this.preSelection = undefined;
+        break;
+    }
+  }
+  buildItem(opt, index$1) {
+    const widthValue = this.showOptionValue && this.maxWidth > 0 ? `${this.maxWidth}px` : '';
+    opt.label = opt.label || opt.value;
+    return index.h("li", { tabIndex: 1, class: index$1 === this.preSelection ? "item preselected" : "item", id: `item_${opt.value}_${index$1}`, key: `item_${opt.value}_${index$1}`, onMouseDown: () => this.onOptionSelect(opt), onMouseOver: () => this.preSelection = index$1 }, this.showOptionValue
+      ? index.h("span", { class: "item__value", title: opt.value, style: { width: widthValue, minWidth: widthValue, maxWidth: widthValue } }, opt.value)
+      : undefined, index.h("span", { class: "item__label " + (this.showOptionValue ? "item__label--bold" : ""), title: opt.label }, opt.label));
+  }
+  scrollToOption(opt) {
+    if (!(opt === null || opt === void 0 ? void 0 : opt.value) || !this._optionsList)
+      return;
+    const index = this.visibleOptions.indexOf(opt);
+    if (index === -1)
+      return;
+    const liElem = this._optionsList.querySelector(`li#item_${CSS.escape(opt.value)}_${CSS.escape(String(index))}`);
+    if (liElem) {
+      liElem.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest"
+      });
+    }
+  }
+  componentDidLoad() {
+    this._listWrapper.style.width = `${this.width}px`;
+    this._listWrapper.style.maxWidth = this.maxWidth ? `${this.maxWidth}px` : '';
+  }
+  componentDidRender() {
+    var _a;
+    (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
+      core.ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
+    });
+  }
+  render() {
+    return (index.h("section", { class: "list-container" }, index.h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, index.h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading && this.visibleOptions.length === 0 && (index.h("div", { class: "message" }, index.h("span", { class: "message__no-result" }, this.textEmptyList))), this.showLoading && (index.h("div", { class: "message" }, index.h("div", { class: "message__loading" }))), this.showOptionValue && (index.h("span", { class: "item__value item__value--hidden" })), !this.showLoading && this.visibleOptions.length > 0 &&
+      this.visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
+  }
+  static get watchers() { return {
+    "width": ["observeWidth"],
+    "maxWidth": ["observeMaxWidth"]
+  }; }
+};
+EzComboBoxList.style = ezComboBoxListCss;
+
+const EzCustomFormInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.gui = undefined;
+    this.customEditor = undefined;
+    this.formViewField = undefined;
+    this.value = undefined;
+    this.detailContext = undefined;
+    this.builderFallback = undefined;
+    this.selectedRecord = undefined;
+  }
+  /**
+   * Aplica foco no campo.
+   */
+  async setFocus() {
+    var _a, _b;
+    (_b = (_a = this.gui) === null || _a === void 0 ? void 0 : _a["setFocus"]) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    var _a, _b;
+    (_b = (_a = this.gui) === null || _a === void 0 ? void 0 : _a["setBlur"]) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    var _a, _b;
+    return ((_b = (_a = this.gui) === null || _a === void 0 ? void 0 : _a["isInvalid"]) === null || _b === void 0 ? void 0 : _b.call(_a)) || false;
+  }
+  watchValue() {
+    this.handleValue(this.gui);
+  }
+  watchCustomEditor() {
+    this.getContent();
+  }
+  watchFormViewField(newValue, oldValue) {
+    if (!core.ObjectUtils.equals(newValue, oldValue))
+      this.getContent();
+  }
+  watchDetailContext() {
+    this.getContent();
+  }
+  watchBuilderFallback() {
+    this.getContent();
+  }
+  watchSelectedRecord(newValue, oldValue) {
+    const newRecordId = newValue === null || newValue === void 0 ? void 0 : newValue['__record__id__'];
+    const oldRecordId = oldValue === null || oldValue === void 0 ? void 0 : oldValue['__record__id__'];
+    if (newRecordId !== oldRecordId) {
+      this.getContent();
+    }
+  }
+  getContent() {
+    var _a, _b, _c, _d, _e;
+    const fieldProps = new Map();
+    for (const prop in this.formViewField.props) {
+      fieldProps.set(prop, this.formViewField.props[prop]);
+    }
+    const params = {
+      value: this.value,
+      name: this.formViewField.name,
+      currentEditor: this.builderFallback(this.formViewField),
+      setValue: (value) => this.setValue(value),
+      getValue: this.getValue,
+      record: this.selectedRecord,
+      editorMetadata: {
+        label: this.formViewField.label,
+        hidden: ((_a = this.formViewField.props) === null || _a === void 0 ? void 0 : _a.visible) === false,
+        userInterface: this.formViewField.userInterface,
+        options: (_b = this.formViewField.props) === null || _b === void 0 ? void 0 : _b.options,
+        props: this.formViewField.props ? fieldProps : undefined,
+        optionLoader: this.formViewField.optionLoader
+      },
+      source: types.CustomEditorSource.FORM,
+      detailContext: this.detailContext
+    };
+    let gui = this.customEditor.getEditorElement(params);
+    if (!gui) {
+      gui = this.builderFallback(this.formViewField);
+      this.handleValue(gui);
+      this.gui = gui;
+      return;
+    }
+    if (!(gui instanceof HTMLElement) && typeof gui !== 'string') {
+      this.handleValue(gui);
+      this.gui = gui;
+      return;
+    }
+    if (typeof gui === 'string') {
+      gui = core.HTMLBuilder.parseElement(gui);
+    }
+    const value = (_e = (_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : this.value) !== null && _e !== void 0 ? _e : '';
+    gui.setAttribute('value', value);
+    this.gui = index.h("div", { key: core.StringUtils.generateUUID(), ref: el => el && el.appendChild(gui) });
+  }
+  setValue(value) {
+    this.value = value;
+  }
+  getValue() {
+    return this.value;
+  }
+  handleValue(gui) {
+    var _a;
+    //@ts-ignore
+    (_a = gui.$children$) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
+      child.$attrs$.value = this.value;
+    });
+  }
+  componentWillLoad() {
+    this.getContent();
+  }
+  render() {
+    return (index.h(index.Host, null, this.gui));
+  }
+  static get watchers() { return {
+    "value": ["watchValue"],
+    "customEditor": ["watchCustomEditor"],
+    "formViewField": ["watchFormViewField"],
+    "detailContext": ["watchDetailContext"],
+    "builderFallback": ["watchBuilderFallback"],
+    "selectedRecord": ["watchSelectedRecord"]
+  }; }
+};
+
+const ezTextEditCss = ":host{display:flex;align-items:center;gap:5px}.text-edit__form-input{width:auto;--ez-text-input__input--padding:0px}.text-edit__hidden-value{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}";
+
+const EzTextEdit = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.saveEdition = index.createEvent(this, "saveEdition", 7);
+    this.cancelEdition = index.createEvent(this, "cancelEdition", 7);
+    this._newValue = undefined;
+    this.value = undefined;
+    this.styled = undefined;
+  }
+  /**
+   * Aplica foco no campo.
+   */
+  async applyFocusSelect() {
+    this.calcSizeInput(this.value, true);
+  }
+  calcSizeInput(value, setSelect = false) {
+    var _a, _b;
+    const textInput = (_b = (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+    if (textInput != undefined) {
+      const sizeText = this.getWidthValue(value);
+      textInput.style.width = sizeText + 'px';
+      if (setSelect) {
+        setTimeout(() => textInput.select(), 100);
+      }
+    }
+  }
+  getWidthValue(value) {
+    if (this._valueBasis != undefined) {
+      const span = this._valueBasis;
+      if (value != undefined) {
+        const cursorSpace = 2;
+        span.innerHTML = value;
+        return span.clientWidth > 0 ? (span.clientWidth + cursorSpace) : cursorSpace;
+      }
+      else {
+        span.innerHTML = "";
+      }
+    }
+    return 0;
+  }
+  setStyledInput() {
+    var _a, _b;
+    let fontSize = "";
+    let fontWeight = "";
+    let fontFamily = "";
+    if (this.styled != undefined) {
+      fontSize = this.styled.fontSize;
+      fontWeight = this.styled.fontWeight;
+      fontFamily = this.styled.fontFamily;
+    }
+    const textInput = (_b = (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+    if (textInput != undefined) {
+      textInput.style.fontSize = fontSize;
+      textInput.style.fontWeight = fontWeight;
+      textInput.style.fontFamily = fontFamily;
+    }
+    const span = this._valueBasis;
+    if (span != undefined) {
+      span.style.fontSize = fontSize;
+      span.style.fontWeight = fontWeight;
+      span.style.fontFamily = fontFamily;
+    }
+  }
+  handleSaveEdition() {
+    if (!this._newValue) {
+      ApplicationUtils.ApplicationUtils.alert("Aviso", "Não é possível salvar um campo em branco.").then(() => {
+        this.setNewValue(this.value, true);
+      });
+      return;
+    }
+    this.saveEdition.emit({ value: this.value, newValue: this._newValue });
+  }
+  handleCancelEdition() {
+    this.cancelEdition.emit();
+  }
+  setNewValue(value, setSelect = false) {
+    this._newValue = value;
+    this.calcSizeInput(this._newValue, setSelect);
+  }
+  componentDidLoad() {
+    this.applyFocusSelect();
+    this.setNewValue(this.value);
+  }
+  componentDidRender() {
+    this.setStyledInput();
+  }
+  render() {
+    core.ElementIDUtils.addIDInfoIfNotExists(this._element, 'input');
+    return (index.h(index.Host, null, index.h("span", { class: "text-edit__hidden-value", ref: elem => this._valueBasis = elem }), index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), onInput: () => { this.calcSizeInput(this._newValue); }, class: "text-edit__form-input", value: this._newValue, ref: (elem) => this._inputElement = elem, mode: "slim", onEzChange: (evt) => this.setNewValue(evt === null || evt === void 0 ? void 0 : evt.detail), noBorder: true }), index.h("ez-button", { class: "text-edit__icon-check", mode: "icon", iconName: "check", size: "small", onClick: () => { this.handleSaveEdition(); } }), index.h("ez-button", { class: "text-edit__icon-close", mode: "icon", iconName: "close", size: "small", onClick: () => { this.handleCancelEdition(); } })));
+  }
+  get _element() { return index.getElement(this); }
+};
+EzTextEdit.style = ezTextEditCss;
+
+exports.ez_combo_box_list = EzComboBoxList;
+exports.ez_custom_form_input = EzCustomFormInput;
+exports.ez_text_edit = EzTextEdit;