@sankhyalabs/ezui 5.14.3 → 5.15.0-dev.1

package/dist/collection/components/ez-alert-list/ez-alert-list.js

@@ -0,0 +1,204 @@
+import { ElementIDUtils, FloatingManager } from '@sankhyalabs/core';
+import { Host, h } from '@stencil/core';
+export class EzAlertList {
+  constructor() {
+    this.alerts = [];
+    this.enableDragAndDrop = undefined;
+    this.enableExpand = undefined;
+    this.itemRightSlotBuilder = undefined;
+    this.opened = true;
+    this.expanded = false;
+  }
+  observeOpened() {
+    this.manageOverlay();
+  }
+  /**
+   * Gerencia a exibição do overlay usando FloatingManager do Core.
+   */
+  async manageOverlay() {
+    if (this.opened) {
+      this._overlayId = FloatingManager.float(this._container, this._overlayRef, {
+        autoClose: false,
+        isFixed: !this.enableDragAndDrop,
+        bottom: '10px',
+        right: '10px'
+      });
+    }
+    else {
+      FloatingManager.close(this._overlayId);
+      this._overlayId = undefined;
+    }
+  }
+  componentDidRender() {
+    this.manageOverlay();
+    if (this.opened) {
+      this._container.focus();
+    }
+  }
+  componentWillLoad() {
+    this.dataElementId = ElementIDUtils.addIDInfo(this._element, 'EzAlertList');
+  }
+  alertId(title, index) {
+    const concatTitle = (title) => title.split(' ').join('-');
+    return `alert-${index}-${concatTitle(title)}`;
+  }
+  getAlertTitle(id) {
+    var _a;
+    return (_a = this.alerts.find((alert, index) => this.alertId(alert.title, index) === id)) === null || _a === void 0 ? void 0 : _a.title;
+  }
+  render() {
+    return (h(Host, Object.assign({}, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), h("div", { ref: elem => (this._overlayRef = elem) }, h("div", { class: "alert-list__container", ref: elem => (this._container = elem) }, h("div", { class: "alert-list__content" }, h("div", { class: "alert-list__header" }, h("div", { class: "alert-list__title" }, `Avisos (${this.alerts.length})`), h("div", { class: "alert-list__header__buttons" }, h("ez-button", { mode: "icon", size: "small", iconName: "expand", "data-element-id": ElementIDUtils.getInternalIDInfo('expandButton'), onClick: () => { }, title: this.expanded ? 'Resumir' : 'Expandir' }), h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
+        this.opened = false;
+      }, title: 'Fechar' }))), h("div", { class: "alert-list__expandable-content" }, h("ez-list", { hoverFeedback: true, itemLeftSlotBuilder: item => {
+        return (h("a", { href: "#", style: {
+            fontFamily: "var(--font-pattern, 'Roboto')",
+            fontSize: 'var(--text--medium, 14px)',
+            fontWeight: 'var(--text-weight--medium, 400)',
+            color: 'var(--color--primary, #008561)',
+            marginRight: '4px',
+            cursor: 'pointer',
+            display: 'flex',
+            width: 'max-content',
+            textDecoration: 'none'
+          } }, `${this.getAlertTitle(item.id)}:`));
+      }, dataSource: this.alerts.map((alert, index) => {
+        return {
+          id: this.alertId(alert.title, index),
+          label: alert.detail,
+        };
+      }) })))))));
+  }
+  static get is() { return "ez-alert-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-alert-list.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-alert-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "alerts": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "AlertItem[]",
+          "resolved": "AlertItem[]",
+          "references": {
+            "AlertItem": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Lista de alertas que devem ser apresentados no componente."
+        },
+        "defaultValue": "[]"
+      },
+      "enableDragAndDrop": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente pode ser arrastado na tela."
+        },
+        "attribute": "enable-drag-and-drop",
+        "reflect": true
+      },
+      "enableExpand": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente pode ser expandido."
+        },
+        "attribute": "enable-expand",
+        "reflect": true
+      },
+      "itemRightSlotBuilder": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SlotBuilder",
+          "resolved": "(item: ListItem, group?: ListGroup) => string | HTMLElement",
+          "references": {
+            "SlotBuilder": {
+              "location": "import",
+              "path": "../ez-list/ez-list"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define builder para elementos a direita do componente"
+        }
+      },
+      "opened": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente est\u00E1 aberto."
+        },
+        "attribute": "opened",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "expanded": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente est\u00E1 expandido."
+        },
+        "attribute": "expanded",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "opened",
+        "methodName": "observeOpened"
+      }];
+  }
+}

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

@@ -21,16 +21,19 @@
   --ez-list__item--color: var(--title--primary, #2b3a54);
 
   /* @doc Define o estilo borda inferior do item da lista. */
-  --ez-list__item--border-bottom: var(--border--small, 1px solid);
+  --ez-list__item--border-bottom;
 
   /* @doc Define a cor da borda inferior do item da lista. */
-  --ez-list__item--border-color: var(--title--primary, #2b3a54);
+  --ez-list__item--border-bottom-color;
 
   /* @doc Define o estilo do texto do item da lista. */
   --ez-list__item--font-family: var(--font-pattern, "Roboto");
 
   /* @doc Define o tamanho do texto do item da lista. */
   --ez-list__item--font-size: var(--text--medium, 14px);
+  
+  /* @doc Define o tipo da quebra de linha do item da lista. */
+  --ez-list__item--white-space: var(--ez-list__item--white-space, nowrap);
 
   /* @doc Define o espaçamento lateral direito para items selecionados. */
   --ez-list__selectable--padding-right: var(--space--small, 6px);
@@ -146,7 +149,6 @@ p {
   display: flex;
   overflow: hidden;
   justify-content: flex-start;
-  align-items: center;
   width: 100%;
 }
 
@@ -156,7 +158,7 @@ p {
   width: 100%;
   max-height: 100%;
   scrollbar-width: thin;
-
+  
   /*public*/
   color: var(--text-color);
   scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);
@@ -164,13 +166,14 @@ p {
 
 .draggable-list li {
   display: flex;
-  height: 32px;
-
+  
   /*public*/
+  padding: var(--space--2xs, 8px) var(--space--3xs, 4px);
   margin: var(--ez-list__item--margin);
   font-family: var(--ez-list__item--font-family);
   font-size: var(--ez-list__item--font-size);
   color: var(--ez-list__item--color);
+  border-bottom: var(--ez-list__item--border-bottom, none) var(--ez-list__item--border-bottom-color);
 }
 
 .over {
@@ -254,9 +257,11 @@ p {
 }
 
 .text--ellipsis {
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  
+  /*public*/
+  white-space: var(--ez-list__item--white-space);
 }
 
 .group-container {

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

@@ -434,7 +434,9 @@ export class EzList {
     this.setSelection(previousItem, true);
   }
   keyDownHandler(event) {
-    event.preventDefault();
+    if (!event.ctrlKey) {
+      event.preventDefault();
+    }
     this.getSelection().then(selectedItem => {
       if (selectedItem) {
         switch (event.key) {

package/dist/collection/utils/ApplicationUtils.js

@@ -104,6 +104,21 @@ export default class ApplicationUtils {
     modal.opened = true;
     return () => modal.remove();
   }
+  static showAlerts(props) {
+    const alertListId = 'EzAlertList';
+    let alertList = document.getElementById(alertListId);
+    if (!alertList) {
+      alertList = document.createElement('ez-alert-list');
+      alertList.setAttribute("id", alertListId);
+      window.document.body.appendChild(alertList);
+    }
+    props = Object.assign(Object.assign({}, ApplicationUtils.defaultAlertListProps), props);
+    alertList.itemRightSlotBuilder = props.itemRightSlotBuilder;
+    alertList.enableDragAndDrop = props.enableDragAndDrop;
+    alertList.enableExpand = props.enableExpand;
+    alertList.opened = props.opened;
+    alertList.alerts = props.alerts;
+  }
 }
 ApplicationUtils.defaultMessageOptions = {
   canClose: true,
@@ -119,4 +134,11 @@ ApplicationUtils.defaultModalProps = {
   closeOutsideClick: true,
   closeEsc: true
 };
+ApplicationUtils.defaultAlertListProps = {
+  alerts: [],
+  enableDragAndDrop: true,
+  enableExpand: true,
+  itemRightSlotBuilder: null,
+  opened: true
+};
 ;

package/dist/custom-elements/index.d.ts

@@ -14,6 +14,12 @@ export const EzAlert: {
   new (): EzAlert;
 };
 
+interface EzAlertList extends Components.EzAlertList, HTMLElement {}
+export const EzAlertList: {
+  prototype: EzAlertList;
+  new (): EzAlertList;
+};
+
 interface EzApplication extends Components.EzApplication, HTMLElement {}
 export const EzApplication: {
   prototype: EzApplication;

package/dist/custom-elements/index.js

@@ -180,6 +180,21 @@ class ApplicationUtils {
     modal.opened = true;
     return () => modal.remove();
   }
+  static showAlerts(props) {
+    const alertListId = 'EzAlertList';
+    let alertList = document.getElementById(alertListId);
+    if (!alertList) {
+      alertList = document.createElement('ez-alert-list');
+      alertList.setAttribute("id", alertListId);
+      window.document.body.appendChild(alertList);
+    }
+    props = Object.assign(Object.assign({}, ApplicationUtils.defaultAlertListProps), props);
+    alertList.itemRightSlotBuilder = props.itemRightSlotBuilder;
+    alertList.enableDragAndDrop = props.enableDragAndDrop;
+    alertList.enableExpand = props.enableExpand;
+    alertList.opened = props.opened;
+    alertList.alerts = props.alerts;
+  }
 }
 ApplicationUtils.defaultMessageOptions = {
   canClose: true,
@@ -195,6 +210,13 @@ ApplicationUtils.defaultModalProps = {
   closeOutsideClick: true,
   closeEsc: true
 };
+ApplicationUtils.defaultAlertListProps = {
+  alerts: [],
+  enableDragAndDrop: true,
+  enableExpand: true,
+  itemRightSlotBuilder: null,
+  opened: true
+};
 
 class CSSVarsUtils {
   static applyCSSVars(document, host, child) {
@@ -1053,6 +1075,86 @@ const EzAlert$1 = class extends HTMLElement$1 {
   static get style() { return ezAlertCss; }
 };
 
+const ezAlertListCss = ":host{display:flex;--ez-alert-list__container--width:680px;--ez-alert-list__container--height:220px;--ez-alert-list__title--font-family:var(--font-pattern, \"Roboto\");--ez-alert-list__title--font-size:var(--title--large, 20px);--ez-alert-list__title--color:var(--title--primary, #2b3a54);--ez-alert-list__title--font-weight:var(--text-weight--extra-large, 700);--ez-list__item--border-bottom:var(--border--small, 1px solid);--ez-list__item--border-bottom-color:var(--color--strokes, #DCE0E8);--ez-list__item--white-space:break-space}.alert-list__content{display:flex;flex-direction:column;gap:var(--space--xs);margin:var(--space--large, 24px);width:100%}.alert-list__container{z-index:var(--more-visible--2x, 3);display:flex;height:var(--ez-alert-list__container--height);width:var(--ez-alert-list__container--width);border-radius:var(--border--radius-medium);background-color:var(--background--xlight);box-shadow:0px 8px 24px 0px rgba(0, 38, 111, 0.1)}.alert-list__header{width:100%;display:flex;align-items:center;justify-content:space-between}.alert-list__title{font-family:var(--ez-alert-list__title--font-family);font-size:var(--ez-alert-list__title--font-size);font-weight:var(--ez-alert-list__title--font-weight);color:var(--ez-alert-list__title--color)}.alert-list__header__buttons{display:flex;gap:var(--space--xs)}.alert-list__expandable-content{overflow-y:auto;scrollbar-width:thin}";
+
+const EzAlertList$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.alerts = [];
+    this.enableDragAndDrop = undefined;
+    this.enableExpand = undefined;
+    this.itemRightSlotBuilder = undefined;
+    this.opened = true;
+    this.expanded = false;
+  }
+  observeOpened() {
+    this.manageOverlay();
+  }
+  /**
+   * Gerencia a exibição do overlay usando FloatingManager do Core.
+   */
+  async manageOverlay() {
+    if (this.opened) {
+      this._overlayId = FloatingManager.float(this._container, this._overlayRef, {
+        autoClose: false,
+        isFixed: !this.enableDragAndDrop,
+        bottom: '10px',
+        right: '10px'
+      });
+    }
+    else {
+      FloatingManager.close(this._overlayId);
+      this._overlayId = undefined;
+    }
+  }
+  componentDidRender() {
+    this.manageOverlay();
+    if (this.opened) {
+      this._container.focus();
+    }
+  }
+  componentWillLoad() {
+    this.dataElementId = ElementIDUtils.addIDInfo(this._element, 'EzAlertList');
+  }
+  alertId(title, index) {
+    const concatTitle = (title) => title.split(' ').join('-');
+    return `alert-${index}-${concatTitle(title)}`;
+  }
+  getAlertTitle(id) {
+    var _a;
+    return (_a = this.alerts.find((alert, index) => this.alertId(alert.title, index) === id)) === null || _a === void 0 ? void 0 : _a.title;
+  }
+  render() {
+    return (h(Host, Object.assign({}, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: this.dataElementId }), h("div", { ref: elem => (this._overlayRef = elem) }, h("div", { class: "alert-list__container", ref: elem => (this._container = elem) }, h("div", { class: "alert-list__content" }, h("div", { class: "alert-list__header" }, h("div", { class: "alert-list__title" }, `Avisos (${this.alerts.length})`), h("div", { class: "alert-list__header__buttons" }, h("ez-button", { mode: "icon", size: "small", iconName: "expand", "data-element-id": ElementIDUtils.getInternalIDInfo('expandButton'), onClick: () => { }, title: this.expanded ? 'Resumir' : 'Expandir' }), h("ez-button", { mode: "icon", size: "small", iconName: "close", "data-element-id": ElementIDUtils.getInternalIDInfo('closeButton'), onClick: () => {
+        this.opened = false;
+      }, title: 'Fechar' }))), h("div", { class: "alert-list__expandable-content" }, h("ez-list", { hoverFeedback: true, itemLeftSlotBuilder: item => {
+        return (h("a", { href: "#", style: {
+            fontFamily: "var(--font-pattern, 'Roboto')",
+            fontSize: 'var(--text--medium, 14px)',
+            fontWeight: 'var(--text-weight--medium, 400)',
+            color: 'var(--color--primary, #008561)',
+            marginRight: '4px',
+            cursor: 'pointer',
+            display: 'flex',
+            width: 'max-content',
+            textDecoration: 'none'
+          } }, `${this.getAlertTitle(item.id)}:`));
+      }, dataSource: this.alerts.map((alert, index) => {
+        return {
+          id: this.alertId(alert.title, index),
+          label: alert.detail,
+        };
+      }) })))))));
+  }
+  get _element() { return this; }
+  static get watchers() { return {
+    "opened": ["observeOpened"]
+  }; }
+  static get style() { return ezAlertListCss; }
+};
+
 const ezApplicationCss = "";
 
 const EzApplication$1 = class extends HTMLElement$1 {
@@ -125860,7 +125962,7 @@ const EzIcon$1 = class extends HTMLElement$1 {
   static get style() { return ezIconCss; }
 };
 
-const ezListCss = ":host{--ez-list__host--z-index:var(--visible, 1);--ez-list__host--border-radius:var(--border--radius-medium, 12px);--ez-list__host--padding:var(--space--medium, 12px);--ez-list__icon--padding:var(--space--small, 6px);--ez-list__icon--color:#AFB6C0;--ez-list__item--margin:0 var(--space--small, 6px);--ez-list__item--color:var(--title--primary, #2b3a54);--ez-list__item--border-bottom:var(--border--small, 1px solid);--ez-list__item--border-color:var(--title--primary, #2b3a54);--ez-list__item--font-family:var(--font-pattern, \"Roboto\");--ez-list__item--font-size:var(--text--medium, 14px);--ez-list__selectable--padding-right:var(--space--small, 6px);--ez-list__selectable--padding-left:var(--space--small, 6px);--ez-list__selected-item--border-radius:var(--border--radius-small, 6px);--ez-list__selected-item--background-color:var(--color--primary-300, #E2F4EF);--ez-list__group--font-family:var(--font-pattern, \"Roboto\");--ez-list__group--font-size:var(--text--medium, 14px);--ez-list__group--font-weight:var(--text-weight--large, 600);--ez-list__group--padding-bottom:var(--space-small, 6px);--ez-list__group-overlay--font-family:var(--font-pattern, \"Roboto\");--ez-list__group-overlay--font-size:var(--text--medium, 14px);--ez-list__over--border--color:var(--color--primary, #008561);--ez-list__last-droppable-space--height:var(--space--small, 6px);--ez-list__draggable-list--padding-bottom:var(--space--small, 6px);--ez-list__draggable-icon--image:url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');--ez-list__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-list__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-list__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-list__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-list__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-list__scrollbar--width:var(--space--medium, 12px);max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-list__host--z-index)}p{margin:0}.draggable{width:100%;display:grid;grid-template-columns:minmax(0px, auto) minmax(0px, auto);place-items:center;border-top:1px dashed #fff;justify-content:space-between;font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size)}.dragging{background:#FFFFFF;border:1px solid #008561;box-sizing:border-box;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);border-radius:6px}.selectable{cursor:pointer;padding-right:var(--ez-list__selectable--padding-right);padding-left:var(--ez-list__selectable--padding-left)}.selectable-container{margin:0px !important}.hover-feedback:hover{background-color:var(--background--medium);border-radius:var(--border--radius-regular)}.item-content{display:flex;overflow:hidden;justify-content:flex-start;align-items:center;width:100%}.draggable-list{padding:0;margin:0;width:100%;max-height:100%;scrollbar-width:thin;color:var(--text-color);scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.draggable-list li{display:flex;height:32px;margin:var(--ez-list__item--margin);font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);color:var(--ez-list__item--color)}.over{border-top:1px dashed var(--ez-list__over--border--color)}.last-droppable-space{height:var(--ez-list__last-droppable-space--height)}.draggable-selected{background-color:var(--background--strong) !important}.draggable-selected div:hover{background-color:var(--background--strong) !important}.draggable-list::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.draggable-list::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar-thumb:vertical:hover,.draggable-list::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.draggable-list::-webkit-scrollbar-thumb:vertical:active,.draggable-list::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.draggable-icon{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon::after{content:'';display:flex;width:18px;height:18px;background-color:var(--ez-list__icon--color);-webkit-mask-image:var(--ez-list__draggable-icon--image);mask-image:var(--ez-list__draggable-icon--image)}*{box-sizing:border-box}.checkbox{width:fit-content}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-container{display:flex;flex-direction:column;max-height:100%;overflow-y:auto;outline:none;width:100%;scrollbar-width:thin;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-name{-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--title--primary);font-family:var(--ez-list__group--font-family);font-size:var(--ez-list__group--font-size);font-weight:var(--ez-list__group--font-weight);padding-bottom:var(--ez-list__group--padding-bottom)}.group{display:flex;flex-direction:column}.group-container::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.group-container::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container::-webkit-scrollbar-thumb:vertical:hover,.group-container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.group-container::-webkit-scrollbar-thumb:vertical:active,.group-container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.section-container{display:flex;position:relative;height:100%}.items-container{width:100%;max-height:100%;outline:none;scrollbar-width:thin;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-items-container{width:100%;max-height:100%;height:100%;outline:none}.items-container::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.items-container::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container::-webkit-scrollbar-thumb:vertical:hover,.items-container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.items-container::-webkit-scrollbar-thumb:vertical:active,.items-container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.group-overlay{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;border-radius:8px;position:absolute;display:none;place-items:center;top:0;bottom:0;left:0;right:0;z-index:2;margin:0;cursor:pointer;font-family:var(--ez-list__group-overlay--font-family);font-size:var(--ez-list__group-overlay--font-size)}.presetedHeight{min-height:100px}.overlay-text{position:absolute;top:50%;left:50%;font-size:50px;color:white;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%)}.selected-item{background:var(--ez-list__selected-item--background-color);border-radius:var(--ez-list__selected-item--border-radius)}.slot-item{align-items:flex-end}.overGroup{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;box-sizing:border-box;border-radius:8px;padding-top:6px}";
+const ezListCss = ":host {\n  /* @doc Define a camada de visibilidae do componente. */\n  --ez-list__host--z-index: var(--visible, 1);\n\n  /* @doc Define o raio da borda do componente. */\n  --ez-list__host--border-radius: var(--border--radius-medium, 12px);\n\n  /* @doc Define o espaçamento entre a lista e o componente. */\n  --ez-list__host--padding: var(--space--medium, 12px);\n\n  /* @doc Define o espaçamento interno do ícone. */\n  --ez-list__icon--padding: var(--space--small, 6px);\n\n  /* @doc Define a cor do ícone de arrasto do item da lista. */\n  --ez-list__icon--color: #AFB6C0;\n\n  /* @doc Define o espaçamento externo do item da lista. */\n  --ez-list__item--margin: 0 var(--space--small, 6px);\n\n  /* @doc Define a cor do texto do item da lista. */\n  --ez-list__item--color: var(--title--primary, #2b3a54);\n\n  /* @doc Define o estilo borda inferior do item da lista. */\n  --ez-list__item--border-bottom;\n\n  /* @doc Define a cor da borda inferior do item da lista. */\n  --ez-list__item--border-bottom-color;\n\n  /* @doc Define o estilo do texto do item da lista. */\n  --ez-list__item--font-family: var(--font-pattern, \"Roboto\");\n\n  /* @doc Define o tamanho do texto do item da lista. */\n  --ez-list__item--font-size: var(--text--medium, 14px);\n  \n  /* @doc Define o tipo da quebra de linha do item da lista. */\n  --ez-list__item--white-space: var(--ez-list__item--white-space, nowrap);\n\n  /* @doc Define o espaçamento lateral direito para items selecionados. */\n  --ez-list__selectable--padding-right: var(--space--small, 6px);\n  \n  /* @doc Define o espaçamento lateral esquerdo para items selecionados. */\n  --ez-list__selectable--padding-left: var(--space--small, 6px);\n\n  /*@doc Define o raio da borda de items selecionados.*/\n  --ez-list__selected-item--border-radius: var(--border--radius-small, 6px);\n  \n  /*@doc Define a cor de fundo de items selecionados.*/\n  --ez-list__selected-item--background-color: var(--color--primary-300, #E2F4EF);\n\n  /* @doc Define o estilo do texto do grupo da lista. */\n  --ez-list__group--font-family: var(--font-pattern, \"Roboto\");\n  \n  /* @doc Define o tamanho do texto do grupo da lista. */\n  --ez-list__group--font-size: var(--text--medium, 14px);\n  \n  /* @doc Define o peso do texto do grupo da lista. */\n  --ez-list__group--font-weight: var(--text-weight--large, 600);\n  \n  /* @doc Define o espaçamento inferior do grupo da lista. */\n  --ez-list__group--padding-bottom: var(--space-small, 6px);\n\n  /* @doc Define o estilo do texto da área de transferência de grupos. */\n  --ez-list__group-overlay--font-family: var(--font-pattern, \"Roboto\");\n\n  /* @doc Define o tamanho do texto da área de transferência de grupos. */\n  --ez-list__group-overlay--font-size: var(--text--medium, 14px);\n  \n  /* @doc Define a cor da borda pontilhada sobre os elementos da lista. */\n  --ez-list__over--border--color: var(--color--primary, #008561);\n\n  /*@doc Define a altura do container para arrasto para última posição .*/\n  --ez-list__last-droppable-space--height: var(--space--small, 6px);\n  \n  /*@doc Define o espaçamento do container de itens arrastáveis .*/\n  --ez-list__draggable-list--padding-bottom: var(--space--small, 6px);\n\n  /* @doc Define a imagem do ícone de drag. */\n  --ez-list__draggable-icon--image: url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');\n\n  /* scrollbar */\n  /*@doc Define a cor da barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-default: var(--scrollbar--default, #626e82);\n  /*@doc Define a cor de fundo da barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);\n  /*@doc Define a cor do hover na barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);\n  /*@doc Define a cor do active na barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);\n  /*@doc Define o raio da borda da barra de rolagem do componente.*/\n  --ez-list__scrollbar--border-radius: var(--border--radius-small, 6px);\n  /*@doc Define a largura da barra de rolagem do componente.*/\n  --ez-list__scrollbar--width: var(--space--medium, 12px);\n\n  max-height: 100%;\n  width: 100%;\n  background-color: #fff;\n  display: flex;\n\n  /*public*/\n  z-index: var(--ez-list__host--z-index);\n}\n\np {\n  margin: 0;\n}\n\n.draggable {\n  /* private */\n  width: 100%;\n  display: grid;\n  grid-template-columns: minmax(0px, auto) minmax(0px, auto);\n  place-items: center;\n  border-top: 1px dashed #fff;\n  justify-content: space-between;\n\n  /*public*/\n  font-family: var(--ez-list__item--font-family);\n  font-size: var(--ez-list__item--font-size);\n}\n\n.dragging {\n  background: #FFFFFF;\n  /* Primary/color--primary */\n\n  border: 1px solid #008561;\n  box-sizing: border-box;\n  box-shadow: 0px 0px 16px rgba(0, 38, 111, 0.122);\n  border-radius: 6px;\n}\n\n.selectable {\n  cursor: pointer;\n\n  /*public*/\n  padding-right: var(--ez-list__selectable--padding-right);\n  padding-left: var(--ez-list__selectable--padding-left);\n}\n\n.selectable-container {\n  margin: 0px !important;\n}\n\n.hover-feedback:hover {\n  background-color: var(--background--medium);\n  border-radius: var(--border--radius-regular);\n}\n\n.item-content {\n  display: flex;\n  overflow: hidden;\n  justify-content: flex-start;\n  width: 100%;\n}\n\n.draggable-list {\n  padding: 0;\n  margin: 0;\n  width: 100%;\n  max-height: 100%;\n  scrollbar-width: thin;\n  \n  /*public*/\n  color: var(--text-color);\n  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.draggable-list li {\n  display: flex;\n  \n  /*public*/\n  padding: var(--space--2xs, 8px) var(--space--3xs, 4px);\n  margin: var(--ez-list__item--margin);\n  font-family: var(--ez-list__item--font-family);\n  font-size: var(--ez-list__item--font-size);\n  color: var(--ez-list__item--color);\n  border-bottom: var(--ez-list__item--border-bottom, none) var(--ez-list__item--border-bottom-color);\n}\n\n.over {\n  /*public*/\n  border-top: 1px dashed var(--ez-list__over--border--color);\n}\n\n.last-droppable-space {\n  /*public*/\n  height: var(--ez-list__last-droppable-space--height);\n}\n\n.draggable-selected {\n  /*public*/\n  background-color: var(--background--strong) !important;\n}\n\n.draggable-selected div:hover {\n  /*public*/\n  background-color: var(--background--strong) !important;\n}\n\n.draggable-list::-webkit-scrollbar {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  width: var(--ez-list__scrollbar--width);\n  max-width: var(--ez-list__scrollbar--width);\n  min-width: var(--ez-list__scrollbar--width);\n}\n\n.draggable-list::-webkit-scrollbar-track {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.draggable-list::-webkit-scrollbar-thumb {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-default);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.draggable-list::-webkit-scrollbar-thumb:vertical:hover,\n.draggable-list::-webkit-scrollbar-thumb:horizontal:hover {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.draggable-list::-webkit-scrollbar-thumb:vertical:active,\n.draggable-list::-webkit-scrollbar-thumb:horizontal:active {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.draggable-icon {\n  align-items: flex-start;\n  display: flex;\n  outline: none;\n  border: none;\n  background-color: unset;\n}\n\n.draggable-icon::after {\n  content: '';\n  display: flex;\n  width: 18px;\n  height: 18px;\n\n  /*public*/\n  background-color: var(--ez-list__icon--color);\n  -webkit-mask-image: var(--ez-list__draggable-icon--image);\n  mask-image: var(--ez-list__draggable-icon--image);\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.checkbox {\n  width: fit-content;\n}\n\n.text--ellipsis {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  \n  /*public*/\n  white-space: var(--ez-list__item--white-space);\n}\n\n.group-container {\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  overflow-y: auto;\n  outline: none;\n  width: 100%;\n  scrollbar-width: thin;\n\n  /*public*/\n  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.group-name {\n  -webkit-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  user-select: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  /*public*/\n  color: var(--title--primary);\n  font-family: var(--ez-list__group--font-family);\n  font-size: var(--ez-list__group--font-size);\n  font-weight: var(--ez-list__group--font-weight);\n  padding-bottom: var(--ez-list__group--padding-bottom);\n}\n\n.group {\n  display: flex;\n  flex-direction: column;\n}\n\n.group-container::-webkit-scrollbar {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  width: var(--ez-list__scrollbar--width);\n  max-width: var(--ez-list__scrollbar--width);\n  min-width: var(--ez-list__scrollbar--width);\n}\n\n.group-container::-webkit-scrollbar-track {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.group-container::-webkit-scrollbar-thumb {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-default);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.group-container::-webkit-scrollbar-thumb:vertical:hover,\n.group-container::-webkit-scrollbar-thumb:horizontal:hover {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.group-container::-webkit-scrollbar-thumb:vertical:active,\n.group-container::-webkit-scrollbar-thumb:horizontal:active {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.section-container {\n  display: flex;\n  position: relative;\n  height: 100%;\n}\n\n.items-container {\n  width: 100%;\n  max-height: 100%;\n  outline: none;\n  scrollbar-width: thin;\n\n  /*public*/\n  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.group-items-container {\n  width: 100%;\n  max-height: 100%;\n  height: 100%;\n  outline: none;\n}\n\n.items-container::-webkit-scrollbar {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  width: var(--ez-list__scrollbar--width);\n  max-width: var(--ez-list__scrollbar--width);\n  min-width: var(--ez-list__scrollbar--width);\n}\n\n.items-container::-webkit-scrollbar-track {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.items-container::-webkit-scrollbar-thumb {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-default);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.items-container::-webkit-scrollbar-thumb:vertical:hover,\n.items-container::-webkit-scrollbar-thumb:horizontal:hover {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.items-container::-webkit-scrollbar-thumb:vertical:active,\n.items-container::-webkit-scrollbar-thumb:horizontal:active {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.group-overlay {\n  background: rgba(226, 244, 239, 0.8);\n  border: 1px solid #008561;\n  border-radius: 8px;\n  position: absolute;\n  display: none;\n  place-items: center;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  margin: 0;\n  cursor: pointer;\n\n  /*public*/\n  font-family: var(--ez-list__group-overlay--font-family);\n  font-size: var(--ez-list__group-overlay--font-size);\n}\n\n.presetedHeight {\n  min-height: 100px;\n}\n\n.overlay-text {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  font-size: 50px;\n  color: white;\n  transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n}\n\n.selected-item {\n  /*public*/\n  background: var(--ez-list__selected-item--background-color);\n  border-radius: var(--ez-list__selected-item--border-radius);\n}\n\n.slot-item {\n  align-items: flex-end;\n}\n\n.overGroup {\n  background: rgba(226, 244, 239, 0.8);\n  border: 1px solid #008561;\n  box-sizing: border-box;\n  border-radius: 8px;\n  padding-top: 6px;\n}";
 
 const EzList$1 = class extends HTMLElement$1 {
   constructor() {
@@ -126302,7 +126404,9 @@ const EzList$1 = class extends HTMLElement$1 {
     this.setSelection(previousItem, true);
   }
   keyDownHandler(event) {
-    event.preventDefault();
+    if (!event.ctrlKey) {
+      event.preventDefault();
+    }
     this.getSelection().then(selectedItem => {
       if (selectedItem) {
         switch (event.key) {
@@ -129743,6 +129847,7 @@ const MultiSelectionBoxMessage$1 = class extends HTMLElement$1 {
 
 const EzActionsButton = /*@__PURE__*/proxyCustomElement(EzActionsButton$1, [1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32]}]);
 const EzAlert = /*@__PURE__*/proxyCustomElement(EzAlert$1, [1,"ez-alert",{"alertType":[513,"alert-type"]}]);
+const EzAlertList = /*@__PURE__*/proxyCustomElement(EzAlertList$1, [1,"ez-alert-list",{"alerts":[1040],"enableDragAndDrop":[516,"enable-drag-and-drop"],"enableExpand":[516,"enable-expand"],"itemRightSlotBuilder":[16],"opened":[1540],"expanded":[1540]}]);
 const EzApplication = /*@__PURE__*/proxyCustomElement(EzApplication$1, [0,"ez-application"]);
 const EzBadge = /*@__PURE__*/proxyCustomElement(EzBadge$1, [1,"ez-badge",{"size":[513],"label":[513],"iconLeft":[513,"icon-left"],"iconRight":[513,"icon-right"],"position":[1040],"hasSlot":[32]}]);
 const EzBreadcrumb = /*@__PURE__*/proxyCustomElement(EzBreadcrumb$1, [1,"ez-breadcrumb",{"items":[1040],"fillMode":[1025,"fill-mode"],"maxItems":[1026,"max-items"],"positionEllipsis":[1026,"position-ellipsis"],"visibleItems":[32],"hiddenItems":[32],"showDropdown":[32],"collapseConfigPosition":[32]}]);
@@ -129793,6 +129898,7 @@ const defineCustomElements = (opts) => {
     [
       EzActionsButton,
   EzAlert,
+  EzAlertList,
   EzApplication,
   EzBadge,
   EzBreadcrumb,
@@ -129846,4 +129952,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzSkeleton, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, defineCustomElements };
+export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzSkeleton, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, defineCustomElements };

package/dist/esm/{ApplicationUtils-834f2fbc.js → ApplicationUtils-eaf91331.js}

@@ -169,6 +169,21 @@ class ApplicationUtils {
     modal.opened = true;
     return () => modal.remove();
   }
+  static showAlerts(props) {
+    const alertListId = 'EzAlertList';
+    let alertList = document.getElementById(alertListId);
+    if (!alertList) {
+      alertList = document.createElement('ez-alert-list');
+      alertList.setAttribute("id", alertListId);
+      window.document.body.appendChild(alertList);
+    }
+    props = Object.assign(Object.assign({}, ApplicationUtils.defaultAlertListProps), props);
+    alertList.itemRightSlotBuilder = props.itemRightSlotBuilder;
+    alertList.enableDragAndDrop = props.enableDragAndDrop;
+    alertList.enableExpand = props.enableExpand;
+    alertList.opened = props.opened;
+    alertList.alerts = props.alerts;
+  }
 }
 ApplicationUtils.defaultMessageOptions = {
   canClose: true,
@@ -184,5 +199,12 @@ ApplicationUtils.defaultModalProps = {
   closeOutsideClick: true,
   closeEsc: true
 };
+ApplicationUtils.defaultAlertListProps = {
+  alerts: [],
+  enableDragAndDrop: true,
+  enableExpand: true,
+  itemRightSlotBuilder: null,
+  opened: true
+};
 
 export { ApplicationUtils as A };

package/dist/esm/{RecordValidationProcessor-03a15fd0.js → RecordValidationProcessor-b00b8b77.js}

@@ -1,5 +1,5 @@
 import { UserInterface } from '@sankhyalabs/core';
-import { A as ApplicationUtils } from './ApplicationUtils-834f2fbc.js';
+import { A as ApplicationUtils } from './ApplicationUtils-eaf91331.js';
 
 const buildFieldMetadata = (descriptor, config) => {
   let { name, label, group } = Object.assign({}, config);

package/dist/esm/ez-actions-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-296b8458.js';
 import { FloatingManager, ElementIDUtils } from '@sankhyalabs/core';
-import './ApplicationUtils-834f2fbc.js';
+import './ApplicationUtils-eaf91331.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-a97cfa29.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';