@sankhyalabs/ezui 5.22.0-dev.8 → 5.22.0-dev.80

package/dist/collection/components/ez-date-input/ez-date-input.js

@@ -12,6 +12,8 @@ export class EzDateInput {
     this.errorMessage = undefined;
     this.mode = "regular";
     this.canShowError = true;
+    this.autoFocus = false;
+    this.noMargin = false;
   }
   observeLabel() {
     if (this._textInput) {
@@ -48,8 +50,8 @@ export class EzDateInput {
   /**
    * Aplica o foco no campo.
    */
-  async setFocus() {
-    this._textInput.setFocus();
+  async setFocus(options) {
+    this._textInput.setFocus(options);
   }
   /**
    * Remove o foco do campo.
@@ -81,6 +83,9 @@ export class EzDateInput {
     if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
       this.value = newValueValidated;
     }
+    else {
+      this._changePending = false;
+    }
   }
   showCalendar() {
     this.handleBlur();
@@ -164,10 +169,15 @@ export class EzDateInput {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, "data-is-fixed": this._elem.dataset.isFixed })));
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, noMargin: this.noMargin }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, "data-is-fixed": this._elem.dataset.isFixed })));
   }
   static get is() { return "ez-date-input"; }
   static get encapsulation() { return "shadow"; }
@@ -289,6 +299,42 @@ export class EzDateInput {
         "attribute": "can-show-error",
         "reflect": true,
         "defaultValue": "true"
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noMargin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quando verdadeiro, o campo n\u00E3o ter\u00E1 espa\u00E7amento."
+        },
+        "attribute": "no-margin",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -353,11 +399,18 @@ export class EzDateInput {
     return {
       "setFocus": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(options?: TFocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "TFocusOptions": {
+              "location": "import",
+              "path": "../ez-text-input/ez-text-input"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/ez-date-time-input/ez-date-time-input.css

@@ -17,7 +17,7 @@
 }
 
 .btn-open-cal:disabled {
-  cursor: unset;
+  cursor: not-allowed;
 }
 
 .btn-open-cal::after {

package/dist/collection/components/ez-date-time-input/ez-date-time-input.js

@@ -13,6 +13,8 @@ export class EzDateTimeInput {
     this.showSeconds = false;
     this.mode = "regular";
     this.canShowError = true;
+    this.autoFocus = false;
+    this.noMargin = false;
   }
   observeLabel() {
     if (this._textInput) {
@@ -49,8 +51,8 @@ export class EzDateTimeInput {
   /**
    * Aplica o foco no campo.
    */
-  async setFocus() {
-    this._textInput.setFocus();
+  async setFocus(options) {
+    this._textInput.setFocus(options);
   }
   /**
    * Remove o foco do campo.
@@ -217,10 +219,15 @@ export class EzDateTimeInput {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick(), canShowError: this.canShowError }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, time: true, showSeconds: this.showSeconds, "data-is-fixed": this._elem.dataset.isFixed })));
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick(), canShowError: this.canShowError, noMargin: this.noMargin }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, time: true, showSeconds: this.showSeconds, "data-is-fixed": this._elem.dataset.isFixed })));
   }
   static get is() { return "ez-date-time-input"; }
   static get encapsulation() { return "shadow"; }
@@ -360,6 +367,42 @@ export class EzDateTimeInput {
         "attribute": "can-show-error",
         "reflect": true,
         "defaultValue": "true"
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noMargin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quando verdadeiro, o campo n\u00E3o ter\u00E1 espa\u00E7amento."
+        },
+        "attribute": "no-margin",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -424,11 +467,18 @@ export class EzDateTimeInput {
     return {
       "setFocus": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(options?: TFocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "TFocusOptions": {
+              "location": "import",
+              "path": "../ez-text-input/ez-text-input"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/ez-dialog/ez-dialog.css

@@ -2,7 +2,7 @@
 
   /* Container */
   /*@doc Define o espaçamento do container.*/
-  --dialog__container-padding: var(--space--large, 24px);
+  --dialog__container-padding: var(--space--md, 20px);
   
   /* Botões */
   /*@doc Define a cor de fundo do botão de fechar.*/
@@ -31,7 +31,7 @@
   /*@doc Define o peso do texto da mensagem.*/
   --dialog__body--text-weight--medium: var(--text-weight--medium, 400);
   /*@doc Define o espaçamento inferior do texto da mensagem.*/
-  --dialog__body--padding-bottom: var(--space--large, 24px);
+  --dialog__body--padding-bottom: var(--space--medium, 12px);
   /*@doc Define o tamanho do texto da mensagem.*/
   --dialog__body--font-size: var(--text--medium, 14px);
   /*@doc Define a cor do texto da mensagem.*/
@@ -141,7 +141,7 @@ h2 {
   color: var(--dialog__body--color);
   max-height: 30vh;
   content-visibility: auto;
-  margin-bottom: 24px;
+  margin-bottom: var(--space--medium);
   overflow-y: auto;
 }
 

package/dist/collection/components/ez-dialog/ez-dialog.js

@@ -1,6 +1,7 @@
 import { h, forceUpdate, } from '@stencil/core';
 import { DialogType } from "./DialogType";
-import { ElementIDUtils, FloatingManager } from "@sankhyalabs/core";
+import { ElementIDUtils, FloatingManager, KeyboardManager } from "@sankhyalabs/core";
+import FocusResolver from '../../utils/FocusResolver';
 class Message {
   constructor(title, message, dialogType, confirm, icon, labelCancel, labelConfirm, btnConfirmDanger, callBack, beforeClose) {
     this.title = title;
@@ -38,11 +39,6 @@ export class EzDialog {
       this._canFocusOnPrimaryBtn = true;
     }
   }
-  handleKeyDown(event) {
-    if (event.key === 'Escape' || event.key === 'Esc') {
-      this.handleButtonClick(false);
-    }
-  }
   manageOverflow() {
     if (this.opened) {
       window.document.body.style.overflow = "hidden";
@@ -154,6 +150,10 @@ export class EzDialog {
   }
   componentDidLoad() {
     ElementIDUtils.addIDInfo(this._element);
+    new KeyboardManager({ propagate: false, element: this._element })
+      .bind("Enter", () => this.handleButtonClick(true), { description: "Botão de confirmação ou OK", element: this._element })
+      .bind("Escape", () => this.handleButtonClick(false), { description: "Botão de fechar ou x", element: this._element })
+      .bind("Esc", () => this.handleButtonClick(false), { description: "Botão de fechar ou x", element: this._element });
   }
   componentDidRender() {
     this.manageOverlay();
@@ -164,6 +164,7 @@ export class EzDialog {
     const dialog = this._element.shadowRoot.querySelector('.overlay .dialog');
     if (dialog instanceof HTMLDivElement) {
       dialog.style.outline = 'none';
+      this._lastActiveElement = document.activeElement;
       dialog.focus();
     }
   }
@@ -176,7 +177,13 @@ export class EzDialog {
   focusOnPrimaryButton() {
     const btnConfirm = this._element.shadowRoot.querySelector(`#${this.PRIMARY_BUTTON_ID}`);
     const buttonElement = btnConfirm === null || btnConfirm === void 0 ? void 0 : btnConfirm.shadowRoot.querySelector('button');
-    buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.focus();
+    requestAnimationFrame(() => {
+      buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.focus();
+    });
+  }
+  disconnectedCallback() {
+    FocusResolver.resolveFocus(this._lastActiveElement);
+    this._lastActiveElement = undefined;
   }
   render() {
     if (this.opened && this._currentMessage) {
@@ -424,13 +431,4 @@ export class EzDialog {
         "methodName": "observeConfig"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

package/dist/collection/components/ez-double-list/doubleListHelper.js

@@ -0,0 +1,82 @@
+export 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;
+}
+export 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 };
+}
+export 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 });
+}

package/dist/collection/components/ez-double-list/ez-double-list.css

@@ -0,0 +1,62 @@
+:host {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  font-family: var(--font-pattern, "Roboto");
+}
+
+.group {
+  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 {
+  background: var(--background--body);
+  padding: 10px;
+  border-radius: var(--border--radius-medium) var(--border--radius-medium) 0 0;
+}
+
+.group__label {
+  font-weight: var(--text-weight--large);
+  font-size: var(--text--medium);
+  color: var(--title--primary);
+  margin-bottom: 10px;
+  display: block;
+}
+
+.group__totalizer {
+  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{
+  font-weight: var(--text-weight--medium);
+  font-size: var(--text--medium);
+  color: var(--text--secondary);
+  text-align: center;
+  margin: auto;
+}
+
+.list__container {
+  height: 100%;
+  min-height: 150px;
+  overflow: auto;
+  display: flex;
+}
+
+.actions__column {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}