@sankhyalabs/ezui 0.0.0-bugfix-dev-kb-74998.4 → 0.0.0-bugfix-dev-KB-75210.0

package/dist/esm/ez-double-list.entry.js

@@ -0,0 +1,283 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-baa5e267.js';
+import { ObjectUtils, ArrayUtils } from '@sankhyalabs/core';
+import { i as isContinuousSequence } from './ezListHelper-00fb9b8d.js';
+import { E as EzScrollDirection } from './EzScrollDirection-2df26c93.js';
+
+function moveItems(selectedItemsList, itemsList, foward) {
+  if (!selectedItemsList.length)
+    return [...itemsList];
+  if (!itemsList.length)
+    return [];
+  const selectedIndexes = getItemsIndex(selectedItemsList, itemsList);
+  const startIndex = getMinValue(selectedIndexes);
+  const endIndex = getMaxValue(selectedIndexes);
+  return moveRange(startIndex, endIndex, foward, itemsList);
+}
+function getMinValue(numbers) {
+  if (numbers.length === 0)
+    return 0;
+  return numbers.reduce((min, current) => (current < min ? current : min), numbers[0]);
+}
+function getMaxValue(numbers) {
+  if (numbers.length === 0)
+    return 0;
+  return numbers.reduce((max, current) => (current > max ? current : max), numbers[0]);
+}
+function getItemsIndex(selectedItemsList, itemsList) {
+  return selectedItemsList.map(selectedId => itemsList.findIndex(original => original.id === selectedId));
+}
+function moveRange(startIndex, endIndex, moveForward, listItem) {
+  if (startIndex < 0 || endIndex >= listItem.length || startIndex > endIndex)
+    return listItem;
+  if (moveForward)
+    return moveFoward(endIndex, startIndex, listItem);
+  return moveBackward(startIndex, endIndex, listItem);
+}
+function moveBackward(startIndex, endIndex, listItem) {
+  if (startIndex === 0)
+    return listItem;
+  const beforeRange = listItem.slice(0, startIndex - 1);
+  const range = listItem.slice(startIndex, endIndex + 1);
+  const afterRange = listItem.slice(endIndex + 1);
+  const movedItem = listItem[startIndex - 1];
+  return [...beforeRange, ...range, movedItem, ...afterRange];
+}
+function moveFoward(endIndex, startIndex, listItem) {
+  if (endIndex === listItem.length - 1)
+    return listItem;
+  const beforeRange = listItem.slice(0, startIndex);
+  const range = listItem.slice(startIndex, endIndex + 1);
+  const afterRange = listItem.slice(endIndex + 1);
+  const movedItem = afterRange.shift();
+  return movedItem
+    ? [...beforeRange, movedItem, ...range, ...afterRange]
+    : listItem;
+}
+function transferAll({ from, to, selectedFrom, selectedTo }) {
+  to = [...to.map(i => setItemSelection(i, false)), ...from.map(i => setItemSelection(i, true))];
+  selectedFrom = [];
+  selectedTo = [...from.map(({ id }) => id)];
+  from = [];
+  return { from, to, selectedFrom, selectedTo };
+}
+function transferItems({ from, to, selectedFrom, selectedTo }) {
+  if (!from.length)
+    return { from, to, selectedFrom, selectedTo };
+  const itemsToTransfer = getItemsToTransfer(to, selectedFrom, from);
+  if (!itemsToTransfer.length)
+    return { from, to, selectedFrom, selectedTo };
+  to = [
+    ...to.map(i => setItemSelection(i, false)),
+    ...itemsToTransfer.map(i => setItemSelection(i, true))
+  ];
+  const selectedFromIds = selectedFrom.map(id => id);
+  from = [...from.filter(item => !selectedFromIds.includes(item.id))];
+  selectedTo = [...selectedFrom];
+  selectedFrom = [];
+  return { from, to, selectedFrom, selectedTo };
+}
+function getItemsToTransfer(to, selectedFrom, from) {
+  const toListIds = to.map(item => item.id);
+  //Não deve transferir um item que já existe na lista destino
+  const itemsToTransferId = selectedFrom.filter((id) => !toListIds.includes(id));
+  return from.filter(({ id }) => itemsToTransferId.includes(id));
+}
+function setItemSelection(item, select) {
+  return Object.assign(Object.assign({}, item), { selected: select });
+}
+
+const ezDoubleListCss = ".sc-ez-double-list-h{display:flex;flex-direction:row;gap:8px;align-items:center;font-family:var(--font-pattern, \"Roboto\")}.group.sc-ez-double-list{display:flex;justify-content:space-between;gap:10px;flex-direction:column;border:var(--border--small) var(--color--strokes);border-radius:var(--border--radius-medium);width:350px;height:400px}.group__header.sc-ez-double-list{background:var(--background--body);padding:10px;border-radius:var(--border--radius-medium) var(--border--radius-medium) 0 0}.group__label.sc-ez-double-list{font-weight:var(--text-weight--large);font-size:var(--text--medium);color:var(--title--primary);margin-bottom:10px;display:block}.group__totalizer.sc-ez-double-list{padding:5px 10px;background:var(--background--body);font-weight:var(--text-weight--medium);font-size:var(--text--medium);color:var(--text--secondary);border-radius:0 0 var(--border--radius-medium) var(--border--radius-medium)}.empty-message.sc-ez-double-list{font-weight:var(--text-weight--medium);font-size:var(--text--medium);color:var(--text--secondary);text-align:center;margin:auto}.list__container.sc-ez-double-list{height:100%;min-height:150px;overflow:auto;display:flex}.actions__column.sc-ez-double-list{display:flex;flex-direction:column;gap:4px}";
+
+const EzDoubleList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezLeftListChanged = createEvent(this, "ezLeftListChanged", 7);
+    this.ezRightListChanged = createEvent(this, "ezRightListChanged", 7);
+    this.LEFT_LIST_ID = 'LEFT-LIST-ID';
+    this.RIGHT_LIST_ID = 'RIGHT-LIST-ID';
+    this.LEFT_FILTER_ID = 'LEFT-FILTER-ID';
+    this.RIGHT_FILTER_ID = 'RIGHT-FILTER-ID';
+    this.leftList = [];
+    this.leftTitle = undefined;
+    this.rightList = [];
+    this.entityLabel = 'item';
+    this.entityLabelPlural = 'itens';
+    this.leftListLabel = 'disponíveis';
+    this.rightListLabel = 'selecionados';
+    this.rightTitle = undefined;
+    this.leftFilteredList = [];
+    this.rightFilteredList = [];
+    this.selectedLeftList = [];
+    this.selectedRightList = [];
+    this.isFilteringLeft = false;
+    this.isFilteringRight = false;
+  }
+  async resetSelectedLists() {
+    this.selectedLeftList = [];
+    this.selectedRightList = [];
+  }
+  observeLeftList(newValue, oldValue) {
+    if (ObjectUtils.equals(newValue, oldValue))
+      return;
+    this.ezLeftListChanged.emit(newValue);
+  }
+  observeRightList(newValue, oldValue) {
+    if (ObjectUtils.equals(newValue, oldValue))
+      return;
+    this.ezRightListChanged.emit(newValue);
+  }
+  handleFilterChangeLeft(value) {
+    this.leftFilteredList = ArrayUtils.applyStringFilter(value, this.leftList, true, 'label');
+    this.isFilteringLeft = this.leftFilteredList.length !== this.leftList.length;
+  }
+  handleFilterChangeRight(value) {
+    this.rightFilteredList = ArrayUtils.applyStringFilter(value, this.rightList, true, 'label');
+    this.isFilteringRight = this.rightFilteredList.length !== this.rightList.length;
+  }
+  async handleChangeLeft({ detail }) {
+    this.leftList = [...detail];
+    this.selectedLeftList = [...detail.filter(item => item.selected)];
+    await this.leftEzListInstance.clearHistory();
+  }
+  async handleChangeRight({ detail }) {
+    this.rightList = [...detail];
+    this.selectedRightList = [...detail.filter(item => item.selected)];
+    await this.rightEzListInstance.clearHistory();
+  }
+  enableTransferAllToRight() {
+    return this.leftList.length > 0;
+  }
+  enableTransferAllToLeft() {
+    return this.rightList.length > 0;
+  }
+  enableTransferToRight() {
+    return this.selectedLeftList.length > 0;
+  }
+  enableTransferToLeft() {
+    return this.selectedRightList.length > 0;
+  }
+  enableMoveUp(moveAll) {
+    if (this.isFilteringRight)
+      return false;
+    const selectedIndexes = this.getRightSelectedItemsIndex();
+    return this.selectedRightList.length > 0
+      && !selectedIndexes.includes(0)
+      && (moveAll ? true : isContinuousSequence(selectedIndexes));
+  }
+  enableMoveDown(moveAll) {
+    if (this.isFilteringRight)
+      return false;
+    const selectedIndexes = this.getRightSelectedItemsIndex();
+    const lastIndex = this.rightList.length - 1;
+    return this.selectedRightList.length > 0
+      && !selectedIndexes.includes(lastIndex)
+      && (moveAll ? true : isContinuousSequence(selectedIndexes));
+  }
+  getRightSelectedItemsIndex() {
+    return this.selectedRightList.map(id => this.rightList.findIndex(original => original.id === id));
+  }
+  transferToRight() {
+    const { from, to, selectedFrom, selectedTo } = transferItems(this.buildTransferToRightConfig());
+    this.leftList = [...from];
+    this.rightList = [...to];
+    this.selectedLeftList = [...selectedFrom];
+    this.selectedRightList = [...selectedTo];
+  }
+  transferToLeft() {
+    const { from, to, selectedFrom, selectedTo } = transferItems(this.buildTransferToLeftConfig());
+    this.rightList = [...from];
+    this.leftList = [...to];
+    this.selectedRightList = [...selectedFrom];
+    this.selectedLeftList = [...selectedTo];
+  }
+  handleTransferAllToRight() {
+    const { from, to, selectedFrom, selectedTo } = transferAll(this.buildTransferToRightConfig());
+    this.leftList = [...from];
+    this.rightList = [...to];
+    this.selectedLeftList = [...selectedFrom];
+    this.selectedRightList = [...selectedTo];
+  }
+  handleTransferAllToLeft() {
+    const { from, to, selectedFrom, selectedTo } = transferAll(this.buildTransferToLeftConfig());
+    this.rightList = [...from];
+    this.leftList = [...to];
+    this.selectedRightList = [...selectedFrom];
+    this.selectedLeftList = [...selectedTo];
+  }
+  buildTransferToRightConfig() {
+    return {
+      from: this.leftList,
+      to: this.rightList,
+      selectedFrom: this.selectedLeftList,
+      selectedTo: this.selectedRightList,
+    };
+  }
+  buildTransferToLeftConfig() {
+    return {
+      from: this.rightList,
+      to: this.leftList,
+      selectedFrom: this.selectedRightList,
+      selectedTo: this.selectedLeftList,
+    };
+  }
+  handleMoveUp() {
+    this.rightList = [...moveItems(this.selectedRightList, this.rightList, false)];
+  }
+  handleMoveDown() {
+    this.rightList = [...moveItems(this.selectedRightList, this.rightList, true)];
+  }
+  handleMoveToTop() {
+    const { itemsToKeep, itemsToMove } = this.getItemsToKeepAndToMove();
+    this.rightList = [...itemsToMove, ...itemsToKeep];
+  }
+  handleMoveToBottom() {
+    const { itemsToKeep, itemsToMove } = this.getItemsToKeepAndToMove();
+    this.rightList = [...itemsToKeep, ...itemsToMove];
+  }
+  handleSelectLeftItem({ detail }) {
+    this.selectedLeftList = [...detail.map(({ id }) => id)];
+  }
+  handleSelectRightItem({ detail }) {
+    this.selectedRightList = [...detail.map(({ id }) => id)];
+  }
+  getItemsToKeepAndToMove() {
+    const itemsToKeep = this.rightList.filter(item => !this.selectedRightList.includes(item.id));
+    const itemsToMove = this.rightList.filter(item => this.selectedRightList.includes(item.id));
+    return { itemsToKeep, itemsToMove };
+  }
+  handleTransferToRight() {
+    this.transferToRight();
+    this.leftFilteredList = [];
+    this.leftEzFilterInput.value = '';
+  }
+  handleTransferToLeft() {
+    this.transferToLeft();
+    this.rightFilteredList = [];
+    this.rightEzFilterInput.value = '';
+  }
+  buildTotalizer(list) {
+    return `Total de ${list.length} ${list.length === 1 ? this.entityLabel : this.entityLabelPlural}`;
+  }
+  renderLeftList() {
+    if (!this.leftList.length) {
+      return h("span", { class: 'empty-message' }, "Nenhum ", this.entityLabel, " dispon\u00EDvel");
+    }
+    return (h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("ez-list", { ref: (ref) => this.leftEzListInstance = ref, id: this.LEFT_LIST_ID, hoverFeedback: true, dataSource: this.isFilteringLeft ? this.leftFilteredList : this.leftList, ezDraggable: !this.isFilteringLeft, enableMultipleSelection: true, onEzChange: this.handleChangeLeft.bind(this), ezSelectable: true, onEzSelectMultipleItems: this.handleSelectLeftItem.bind(this), onEzDoubleClick: this.handleTransferToRight.bind(this) })));
+  }
+  renderRightList() {
+    if (!this.rightList.length) {
+      return h("span", { class: 'empty-message' }, "Nenhum ", this.entityLabel, " selecionado");
+    }
+    return (h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("ez-list", { ref: (ref) => this.rightEzListInstance = ref, id: this.RIGHT_LIST_ID, hoverFeedback: true, dataSource: this.isFilteringRight ? this.rightFilteredList : this.rightList, ezDraggable: !this.isFilteringRight, enableMultipleSelection: true, onEzChange: this.handleChangeRight.bind(this), ezSelectable: true, onEzSelectMultipleItems: this.handleSelectRightItem.bind(this), onEzDoubleClick: this.handleTransferToLeft.bind(this) })));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: 'group' }, h("div", { class: 'group__header' }, h("span", { class: 'group__label' }, this.leftTitle), h("ez-filter-input", { ref: (ref) => this.leftEzFilterInput = ref, id: this.LEFT_FILTER_ID, label: `Buscar ${this.entityLabel}`, mode: 'slim', onEzChange: evt => this.handleFilterChangeLeft(evt.detail) })), h("div", { class: 'list__container' }, this.renderLeftList()), h("div", { class: 'group__totalizer' }, this.buildTotalizer(this.leftList))), h("div", { class: 'actions__column' }, h("ez-button", { mode: 'icon', iconName: 'dual-chevron-right', enabled: this.enableTransferAllToRight(), title: `Mover todos para ${this.leftListLabel}`, size: 'small', onClick: this.handleTransferAllToRight.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-right', enabled: this.enableTransferToRight(), title: `Mover para ${this.leftListLabel}`, size: 'small', onClick: this.handleTransferToRight.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-left', enabled: this.enableTransferToLeft(), title: `Mover para ${this.rightListLabel}`, size: 'small', onClick: this.handleTransferToLeft.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'dual-chevron-left', enabled: this.enableTransferAllToLeft(), title: `Mover todos para ${this.rightListLabel}`, size: 'small', onClick: this.handleTransferAllToLeft.bind(this) })), h("div", { class: 'group' }, h("div", { class: 'group__header' }, h("span", { class: 'group__label' }, this.rightTitle), h("ez-filter-input", { ref: (ref) => this.rightEzFilterInput = ref, id: this.RIGHT_FILTER_ID, label: `Buscar ${this.entityLabel}`, mode: 'slim', onEzChange: evt => this.handleFilterChangeRight(evt.detail) })), h("div", { class: 'list__container' }, this.renderRightList()), h("div", { class: 'group__totalizer' }, this.buildTotalizer(this.rightList))), h("div", { class: 'actions__column' }, h("ez-button", { mode: 'icon', iconName: 'dual-chevron-up', enabled: this.enableMoveUp(true), title: 'Mover para primeira posi\u00E7\u00E3o', size: 'small', onClick: this.handleMoveToTop.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-up', enabled: this.enableMoveUp(), title: 'Mover para cima', size: 'small', onClick: this.handleMoveUp.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'chevron-down', enabled: this.enableMoveDown(), title: 'Mover para baixo', size: 'small', onClick: this.handleMoveDown.bind(this) }), h("ez-button", { mode: 'icon', iconName: 'dual-chevron-down', enabled: this.enableMoveDown(true), title: 'Mover para \u00FAltima posi\u00E7\u00E3o', size: 'small', onClick: this.handleMoveToBottom.bind(this) }))));
+  }
+  static get watchers() { return {
+    "leftList": ["observeLeftList"],
+    "rightList": ["observeRightList"]
+  }; }
+};
+EzDoubleList.style = ezDoubleListCss;
+
+export { EzDoubleList as ez_double_list };

package/dist/esm/ez-filter-input.entry.js

@@ -0,0 +1,126 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { C as CSSVarsUtils } from './CSSVarsUtils-71ce76be.js';
+
+const ezFilterInputCss = ":host{display:block;width:100%}";
+
+const EzFilterInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezSearching = createEvent(this, "ezSearching", 7);
+    this.ezFocusIn = createEvent(this, "ezFocusIn", 7);
+    this._searchingText = "";
+    this.handleFocus = () => {
+      if (this._searchingText === "") {
+        this._textInput.value = "";
+      }
+      else {
+        this._textInput.value = this._searchingText;
+      }
+      this.ezFocusIn.emit();
+    };
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.errorMessage = undefined;
+    this.restrict = undefined;
+    this.mode = "regular";
+    this.asyncSearch = false;
+    this.canShowError = true;
+    this.autoFocus = false;
+    this.noMargin = false;
+  }
+  observeLabel() {
+    if (this._textInput) {
+      this._textInput.label = this.label;
+    }
+  }
+  observeErrorMessage() {
+    if (this._textInput) {
+      this._textInput.errorMessage = this.errorMessage;
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._textInput && newValue != oldValue) {
+      this._textInput.value = newValue;
+      this.ezChange.emit(newValue);
+    }
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus(options) {
+    this._textInput.setFocus(options);
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    this._textInput.setBlur();
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  /**
+   * Método responsável por setar um novo valor ao campo.
+   */
+  async setValue(newValue) {
+    if (!this.asyncSearch || this._textInput == undefined) {
+      return;
+    }
+    if (newValue !== this.value) {
+      this.value = newValue;
+      this._searchingText = "";
+    }
+    else {
+      this._textInput.value = newValue;
+    }
+  }
+  /**
+   * Método responsável por resetar o valor do campo para o ultimo valor inputado.
+   */
+  async endSearch() {
+    if (!this.asyncSearch || this._textInput == undefined) {
+      return;
+    }
+    if (this._textInput.value !== this.value) {
+      this._textInput.value = this.value;
+    }
+  }
+  handleChange(evt) {
+    const newValue = evt.detail;
+    this.errorMessage = "";
+    if (this.asyncSearch) {
+      this._searchingText = newValue;
+      this.ezSearching.emit(newValue);
+    }
+    else if (newValue !== this.value) {
+      this.value = newValue;
+    }
+  }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.handleChange(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode, onFocusin: this.handleFocus, canShowError: this.canShowError, noMargin: this.noMargin }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+  }
+  get _elem() { return getElement(this); }
+  static get watchers() { return {
+    "label": ["observeLabel"],
+    "errorMessage": ["observeErrorMessage"],
+    "value": ["observeValue"]
+  }; }
+};
+EzFilterInput.style = ezFilterInputCss;
+
+export { EzFilterInput as ez_filter_input };

package/dist/esm/ez-form-view.entry.js

@@ -32,9 +32,14 @@ const buildDate = ({ name, label, readOnly, canShowError }) => {
   return (h("div", { class: "ez-col ez-col--sd-12" },
     h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError, noMargin: true })));
 };
-const buildTime = ({ name, label, readOnly, canShowError }) => {
+const buildTime = ({ name, label, readOnly, canShowError, props }) => {
+  var _a;
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError, noMargin: true, "show-seconds": (_a = props === null || props === void 0 ? void 0 : props.showSeconds) !== null && _a !== void 0 ? _a : false })));
+};
+const buildTimeSeconds = ({ name, label, readOnly, canShowError }) => {
   return (h("div", { class: "ez-col ez-col--sd-12" },
-    h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError, noMargin: true })));
+    h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError, noMargin: true, showSeconds: true })));
 };
 const buildDateTime = ({ name, label, readOnly, contextName, canShowError }) => {
   return (h("div", { class: "ez-col ez-col--sd-12" },
@@ -90,6 +95,7 @@ uiBuilders.set(UserInterface.SWITCH, buildSwitch);
 uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
 uiBuilders.set(UserInterface.DATE, buildDate);
 uiBuilders.set(UserInterface.TIME, buildTime);
+uiBuilders.set(UserInterface.ELAPSEDTIME, buildTimeSeconds);
 uiBuilders.set(UserInterface.DATETIME, buildDateTime);
 uiBuilders.set(UserInterface.FILE, buildFile);
 uiBuilders.set(UserInterface.DECIMALNUMBER, buildDecimal);