@sankhyalabs/ezui 5.9.0 → 5.10.0

package/dist/types/components/ez-list/ez-list.d.ts

@@ -20,6 +20,7 @@ export type TListMode = {
   regular: string;
   check: string;
 };
+export type SlotBuilder = (item: ListItem, group?: ListGroup) => HTMLElement | string;
 export declare class EzList {
   _listItems: ListItem[];
   _listGroupItems: ListGroup[];
@@ -54,7 +55,12 @@ export declare class EzList {
    * Função builder que possibilita alterar como o item da lista vai ser apresentado.
    * Observação: No react ele se transforma em VNode e não como HTMLElement.
    */
-  itemSlotBuilder: (item: ListItem, group?: ListGroup) => HTMLElement | string;
+  itemSlotBuilder: SlotBuilder;
+  /**
+   * Função builder que possibilita gerar conteúdo dinâmico à esquerda do item da lista.
+   * * Observação: No react ele se transforma em VNode e não como HTMLElement.
+   */
+  itemLeftSlotBuilder: SlotBuilder;
   /**
    * Quando verdadeiro, ativa o feedback visual ao efetuar houver nos itens da lista.
    */
@@ -91,9 +97,13 @@ export declare class EzList {
    * Obtém a lista de items ou grupos.
    */
   getList(): Promise<Array<ListItem | ListGroup>>;
+  /**
+   * Limpa a seleção atual
+   */
+  removeSelection(): Promise<void>;
+  private applyUUID;
   private createList;
   private sortGroup;
-  removeSelection(): void;
   buildIdDraggableListAndSelectable(): void;
   componentWillLoad(): void;
   componentWillRender(): void;
@@ -111,7 +121,6 @@ export declare class EzList {
   nextOption(selectedItem: ListItem): void;
   previousOption(selectedItem: ListItem): void;
   private keyDownHandler;
-  getItemId(itemLabel: String): string;
   getDivGroupId(groupName: String): string;
   getGroupOverlayId(groupName: string): string;
   onDragOverGroup(event: DragEvent, group: ListGroup): void;
@@ -119,6 +128,6 @@ export declare class EzList {
   onDragOverLastIndex(ev: any): void;
   showOverlays(groupDragStart: any): void;
   hideOverlays(): void;
-  getContainerItemBuilder(item: ListItem, group?: ListGroup, className?: string): HTMLElement;
+  getContainerItemBuilder(slotPosition: 'left' | 'right', item: ListItem, group?: ListGroup, className?: string): HTMLElement;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -20,7 +20,7 @@ import { EzGridColumn, EzGridColumnConfig, EzGridColumStateEvent, IGridConfig, I
 import { ISelection, ISelectionToastConfig } from "./components/ez-grid/interfaces";
 import { IMultiSelectionListDataSource } from "./components/ez-multi-selection-list/interfaces/IMultiSelectionListDataSource";
 import { IGuideItem } from "./components/ez-guide-navigator/interfaces";
-import { ListGroup, ListItem, TListMode } from "./components/ez-list/ez-list";
+import { ListGroup, ListItem, SlotBuilder, TListMode } from "./components/ez-list/ez-list";
 import { THeightMode } from "./components/ez-modal/ez-modal";
 import { IMultiSelectionOption } from "./components/ez-multi-selection-list/interfaces/IMultiSelectionOption";
 import { IEzPopoverAnchorOptions } from "./components/ez-popover/ez-popover";
@@ -772,14 +772,22 @@ export namespace Components {
           * Quando verdadeiro, ativa o feedback visual ao efetuar houver nos itens da lista.
          */
         "hoverFeedback": boolean;
+        /**
+          * Função builder que possibilita gerar conteúdo dinâmico à esquerda do item da lista. * Observação: No react ele se transforma em VNode e não como HTMLElement.
+         */
+        "itemLeftSlotBuilder": SlotBuilder;
         /**
           * Função builder que possibilita alterar como o item da lista vai ser apresentado. Observação: No react ele se transforma em VNode e não como HTMLElement.
          */
-        "itemSlotBuilder": (item: ListItem, group?: ListGroup) => HTMLElement | string;
+        "itemSlotBuilder": SlotBuilder;
         /**
           * Define o modo de apresentação da lista.
          */
         "listMode"?: keyof TListMode;
+        /**
+          * Limpa a seleção atual
+         */
+        "removeSelection": () => Promise<void>;
         /**
           * Traz o conteúdo da lista para a área visível.
          */
@@ -2621,10 +2629,14 @@ declare namespace LocalJSX {
           * Quando verdadeiro, ativa o feedback visual ao efetuar houver nos itens da lista.
          */
         "hoverFeedback"?: boolean;
+        /**
+          * Função builder que possibilita gerar conteúdo dinâmico à esquerda do item da lista. * Observação: No react ele se transforma em VNode e não como HTMLElement.
+         */
+        "itemLeftSlotBuilder"?: SlotBuilder;
         /**
           * Função builder que possibilita alterar como o item da lista vai ser apresentado. Observação: No react ele se transforma em VNode e não como HTMLElement.
          */
-        "itemSlotBuilder"?: (item: ListItem, group?: ListGroup) => HTMLElement | string;
+        "itemSlotBuilder"?: SlotBuilder;
         /**
           * Define o modo de apresentação da lista.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sankhyalabs/ezui",
-  "version": "5.9.0",
+  "version": "5.10.0",
   "description": "Biblioteca de componentes Sankhya.",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",

package/dist/ezui/p-736f6fa5.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as e,F as r,H as s}from"./p-e318d280.js";import{ElementIDUtils as l,StringUtils as o}from"@sankhyalabs/core";const a=class{constructor(e){t(this,e),this.ezChange=i(this,"ezChange",7),this.ezSelectItem=i(this,"ezSelectItem",7),this.ezCheckChange=i(this,"ezCheckChange",7),this._listItemsHistory=[],this._listItems=[],this._listGroupItems=[],this.dataSource=[],this.listMode="regular",this.useGroups=!1,this.ezDraggable=!1,this.ezSelectable=!1,this.itemSlotBuilder=void 0,this.hoverFeedback=!1}async clearHistory(){this._listItemsHistory=[]}async scrollToTop(){this.useGroups?this._element.shadowRoot.querySelector(".group-container").scrollTop=0:this._element.shadowRoot.querySelector(".items-container").scrollTop=0}async setSelection(t,i){if(t&&this.ezSelectable){if(this.ezSelectItem.emit(t),this.useGroups){let i=[...this._listGroupItems];i.forEach((i=>{i.items.forEach((i=>{i.selected=i.label==t.label}))})),this._listGroupItems=i}else{let i=[...this._listItems];i.forEach((i=>{i.selected=i.label===t.label})),this._listItems=i}if(i){let i=this.useGroups?this._groupContainer.querySelector("li#item_"+this.getItemId(t.label)):this._itemContainer.querySelector("li#item_"+this.getItemId(t.label));i&&i.scrollIntoView()}}else this.removeSelection()}async getSelection(){let t;return this.useGroups?this._listGroupItems.every((i=>{let e=i.items.find((t=>1==t.selected));return!e||(t=e,!1)})):t=this._listItems.find((t=>1==t.selected)),t}async getList(){return this.useGroups?this._listGroupItems:this._listItems}createList(){if(this.useGroups){let t=this.dataSource.map((t=>t));t.forEach((t=>{this.sortGroup(t)})),this._listGroupItems=t}else this._listItems=this._listItemsHistory.length>0?this._listItemsHistory:this.dataSource.map((t=>t))}sortGroup(t){t.sort&&(t.items.sort((function(t,i){return t.label<i.label?-1:t.label>i.label?1:0})),"DSC"===t.sort&&t.items.reverse())}removeSelection(){if(this.useGroups){let t=[...this._listGroupItems];t.forEach((t=>{t.items.forEach((t=>{t.selected=!1}))})),this._listGroupItems=t}else{let t=[...this._listItems];t.forEach((t=>{t.selected=!1})),this._listItems=t}}buildIdDraggableListAndSelectable(){const t=this._element.shadowRoot,i=t.querySelectorAll(".draggable-list");null==i||i.forEach(((t,i)=>{var e,r;let s="draggableList";const o=null===(r=null===(e=this._listGroupItems)||void 0===e?void 0:e[i])||void 0===r?void 0:r.group;this.useGroups&&o&&(s=s.concat("_",o)),l.addIDInfoIfNotExists(t,s)}));const e=t.querySelectorAll(".selectable-container");null==e||e.forEach((t=>{l.addIDInfoIfNotExists(t,"selectable")}))}componentWillLoad(){this._listItemsHistory=[]}componentWillRender(){this.createList(),this._element&&this.buildIdDraggableListAndSelectable()}componentDidLoad(){l.addIDInfo(this._element)}onDrop(t,i){if(this.removeOverClass(),this.setSelection(void 0),this._dragStartItem)if(this.useGroups){let t=[...this._listGroupItems],e=this._listGroupItems.find((t=>i.groupName==t.group));if(t.find((t=>t.group==this._dragStartItem.groupName)).items.splice(this._dragStartItem.index,1),e.sort)t.find((t=>t.group==i.groupName)).items.push(this._dragStartItem.item),t.find((t=>t.group==i.groupName)).items.sort((function(t,i){return t.label<i.label?-1:t.label>i.label?1:0})),"DSC"===e.sort&&t.find((t=>t.group==i.groupName)).items.reverse();else{let e=i.index>this._dragStartItem.index?i.index-1:i.index;t.find((t=>t.group==i.groupName)).items.splice(e,0,this._dragStartItem.item)}this._listGroupItems=t,this.ezChange.emit(this._listGroupItems)}else{let t=[...this._listItems];t.splice(this._dragStartItem.index,1),t.splice(i.index,0,this._dragStartItem.item),this._listItems=t,this._listItemsHistory=t,this.ezChange.emit(this._listItems)}t.stopPropagation()}onDropLastIndex(t,i){if(this.removeOverClass(),this.setSelection(void 0),this._dragStartItem)if(this.useGroups){let t=[...this._listGroupItems],e=this._listGroupItems.find((t=>i.group==t.group));t.find((t=>t.group==this._dragStartItem.groupName)).items.splice(this._dragStartItem.index,1),t.find((t=>t.group==i.group)).items.push(this._dragStartItem.item),e.sort&&(t.find((t=>t.group==i.group)).items.sort((function(t,i){return t.label<i.label?-1:t.label>i.label?1:0})),"DSC"===e.sort&&t.find((t=>t.group==i.group)).items.reverse()),this._listGroupItems=t,this.ezChange.emit(this._listGroupItems)}else{let t=[...this._listItems];t.splice(this._dragStartItem.index,1),t.push(this._dragStartItem.item),this._listItems=t,this._listItemsHistory=t,this.ezChange.emit(this._listItems)}t.stopPropagation()}onDropGroup(t){var i;let e=[...this._listGroupItems];this.setSelection(void 0);let r=e.find((i=>i.group===t.group));if(r){if((null===(i=r.items)||void 0===i?void 0:i.length)>0){let t;r.items.forEach(((i,e)=>{i.label===this._dragStartItem.item.label&&(t={item:i,index:e})})),t?(r.items.splice(t.index,1),r.items.unshift(t.item),this.sortGroup(r)):(r.items.unshift(this._dragStartItem.item),this.sortGroup(r),e.find((t=>t.group===this._dragStartItem.groupName)).items.splice(this._dragStartItem.index,1))}else e.find((t=>t.group===this._dragStartItem.groupName)).items.splice(this._dragStartItem.index,1),r.items=[this._dragStartItem.item];this._listGroupItems=e}}onDragEnd(){if(this._dragStartItem=void 0,this.useGroups&&this.hideOverlays(),this._draggingElement){try{this._element.shadowRoot.removeChild(this._draggingElement)}catch(t){}this._draggingElement=void 0}}addOverClass(t){(null==t?void 0:t.__proto__)==HTMLDivElement.prototype&&t.classList.contains("draggable")?t.classList.add("over"):(null==t?void 0:t.parentElement)&&!t.parentElement.classList.contains("draggable-list")&&this.addOverClass(t.parentElement)}addOverGroupClass(t,i){if(t.target){let t=this._groupContainer.querySelector("div#"+this.getDivGroupId(i.group)).getElementsByClassName("group-overlay")[0];i.items.length>0?t.setAttribute("style","display:grid"):(t.classList.add("presetedHeight"),t.setAttribute("style","display:grid"),t.scrollIntoView(!1))}}removeOverClass(){var t,i;let e,r;this.useGroups?(e=null===(t=this._groupContainer)||void 0===t?void 0:t.getElementsByClassName("over"),r=this._groupContainer.getElementsByClassName("last-droppable-space")):(e=null===(i=this._itemContainer)||void 0===i?void 0:i.getElementsByClassName("over"),r=this._itemContainer.getElementsByClassName("last-droppable-space")),e&&Array.from(e).forEach((function(t){t.classList.remove("over")})),r&&Array.from(r).forEach((function(t){t.classList.remove("over")}))}removeOverGroupClass(t,i){if(t.target){let t=this._groupContainer.querySelector("div#"+this.getDivGroupId(i.group)).getElementsByClassName("group-overlay")[0];t&&(t.classList.remove("presetedHeight"),t.setAttribute("style","display:none"))}}onDragStart(t,i,e){this._changeDeboucingTimeout&&window.clearTimeout(this._changeDeboucingTimeout),this.useGroups?(this._dragStartItem={groupName:i.group,item:t,index:e},this._changeDeboucingTimeout=window.setTimeout((()=>{this.showOverlays(i)}),10)):this._dragStartItem={item:t.item,index:t.index}}selectFirstItem(){this.useGroups&&this.setSelection(this._listGroupItems[0].items[0]),this.setSelection(this._listItems[0])}nextOption(t){let i;if(this.useGroups)this._listGroupItems.every(((e,r,s)=>{let l,o=e.items.findIndex((i=>i.label==t.label));return null!=o&&-1!=o&&(o===e.items.length-1?r+1<=s.length-1&&(l={label:s[r+1].items[0].label}):l={label:e.items[o+1].label}),null==l||(i=l,!1)}));else{let e=this._listItems.findIndex((i=>i.label===t.label));e>=0&&e<this._listItems.length&&(i=this._listItems[e+1])}this.setSelection(i,!0)}previousOption(t){let i;if(this.useGroups)this._listGroupItems.every(((e,r,s)=>{let l,o=e.items.findIndex((i=>i.label==t.label));return null!=o&&-1!=o&&(0===o?r-1>=0&&(l={label:s[r-1].items[s[r-1].items.length-1].label}):l={label:e.items[o-1].label}),null==l||(i=l,!1)}));else{let e=this._listItems.findIndex((i=>i.label===t.label));e>0&&e<this._listItems.length&&(i=this._listItems[e-1])}this.setSelection(i,!0)}keyDownHandler(t){t.preventDefault(),this.getSelection().then((i=>{if(i)switch(t.key){case"ArrowDown":this.nextOption(i);break;case"ArrowUp":this.previousOption(i)}else this.selectFirstItem()})),t.stopPropagation()}getItemId(t){if(t)return t.replace(/[^a-z0-9_]/gi,"_")}getDivGroupId(t){if(t)return"group-"+t.replace(/[^a-z0-9_]/gi,"_")}getGroupOverlayId(t){if(t)return"group-overlay-"+t.replace(/[^a-z0-9_]/gi,"_")}onDragOverGroup(t,i){this._dragStartItem&&this._dragStartItem.groupName!==i.group&&i.sort&&(t.preventDefault(),this.addOverGroupClass(t,i))}onDragOverItem(t){this._dragStartItem&&(t.preventDefault(),this.addOverClass(t.target),t.stopPropagation())}onDragOverLastIndex(t){t.preventDefault(),this._dragStartItem&&(t.target.classList.add("over"),t.stopPropagation())}showOverlays(t){let i=this._groupContainer.getElementsByClassName("group-overlay");Array.from(i).forEach((i=>{let e=this.getGroupOverlayId(t.group);e&&i.getAttribute("id")&&e!=i.getAttribute("id")&&(i.classList.add("presetedHeight"),i.setAttribute("style","display:grid"))}))}hideOverlays(){var t;let i=null===(t=this._groupContainer)||void 0===t?void 0:t.getElementsByClassName("group-overlay");Array.from(i).forEach((t=>{t.classList.remove("presetedHeight"),t.setAttribute("style","display:none")}))}getContainerItemBuilder(t,i,r){if(null==this.itemSlotBuilder)return;const s=this.itemSlotBuilder(t,i);return null!=s?"string"!=typeof s?e("div",{class:r},s):e("div",{class:r,innerHTML:s}):void 0}render(){return e(s,{ref:t=>this._element=t},this.useGroups?e("div",{class:"group-container",ref:t=>this._groupContainer=t,tabIndex:0,onKeyDown:t=>{this.keyDownHandler(t)}},this._listGroupItems.map((t=>e("div",{id:this.getDivGroupId(t.group),class:"group",key:t.group+t.items.length,onDrop:()=>this.onDropGroup(t)},e("label",{draggable:!1,class:"group-name",title:t.group},t.group),e("section",{class:"section-container",onDragOver:t=>t.preventDefault()},e("div",{class:"group-items-container"},e("div",{class:"draggable-list"},t.items.map(((i,r)=>e("li",Object.assign({id:"item_"+this.getItemId(i.label),class:{"selectable-container":this.ezSelectable,"hover-feedback":this.hoverFeedback},key:"item_"+this.getItemId(i.label)},{[l.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:l.getInternalIDInfo(`ezListItem__${o.replaceAccentuatedChars(i.label)}`)}),e("div",{class:"draggable"+(1==i.selected?" selected-item ":"")+(1==this.ezSelectable?" selectable ":""),onClick:()=>{this.setSelection(i)},onDragLeave:()=>{t.sort||this.removeOverClass()},onDragEnd:()=>this.onDragEnd(),onDragStart:()=>this.onDragStart(i,t,r),onDragOver:i=>{t.sort||this.onDragOverItem(i)},onDrop:e=>this.onDrop(e,{groupName:t.group,item:i,index:r}),draggable:this.ezDraggable},e("div",{class:"item-content"},this.ezDraggable?e("span",{class:"draggable-icon"}):void 0,"regular"===this.listMode?e("p",{title:i.label,class:"person-name text--ellipsis"},i.label):e("ez-check",{label:i.label,value:i.check,onEzChange:t=>this.ezCheckChange.emit({id:i.id,label:i.label,check:t.detail})})),this.itemSlotBuilder?this.getContainerItemBuilder(i,t,"slot-item"):void 0))))),e("div",{class:"last-droppable-space",onDragLeave:()=>this.removeOverClass(),onDragOver:t=>{this.onDragOverLastIndex(t)},onDragEnd:()=>this.onDragEnd(),onDrop:i=>this.onDropLastIndex(i,t)})),t.sort?e("div",{id:this.getGroupOverlayId(t.group),class:"group-overlay"},"Mover para ",t.group):void 0))))):e("div",{class:"items-container",ref:t=>this._itemContainer=t,tabIndex:0,onKeyDown:t=>{this.keyDownHandler(t)}},e("div",{class:"draggable-list"},this._listItems.map(((t,i)=>e("li",Object.assign({id:"item_"+this.getItemId(t.label),class:{"selectable-container":this.ezSelectable,"hover-feedback":this.hoverFeedback},key:"item_"+this.getItemId(t.label)},{[l.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:l.getInternalIDInfo(`ezListItem__${o.replaceAccentuatedChars(t.label)}`)}),e("div",{class:"draggable"+(1==t.selected?" selected-item ":"")+(1==this.ezSelectable?" selectable ":""),onDragStart:()=>this.onDragStart({item:t,index:i}),onClick:()=>{this.setSelection(t)},onDragLeave:()=>this.removeOverClass(),onDragOver:t=>this.onDragOverItem(t),onDragEnd:()=>this.onDragEnd(),onDrop:e=>this.onDrop(e,{item:t,index:i}),draggable:this.ezDraggable},e("div",{class:"item-content"},e(r,null,this.ezDraggable?e("span",{class:"draggable-icon"}):void 0,"regular"===this.listMode?e("p",{title:t.label,class:"person-name text--ellipsis"},t.label):e("ez-check",{label:t.label,value:t.check,onEzChange:i=>this.ezCheckChange.emit({id:t.id,label:t.label,check:i.detail})}))),this.itemSlotBuilder?this.getContainerItemBuilder(t):void 0)))),e("div",{class:"last-droppable-space",onDragLeave:()=>this.removeOverClass(),onDragOver:t=>{this.onDragOverLastIndex(t)},onDragEnd:()=>this.onDragEnd(),onDrop:t=>this.onDropLastIndex(t)}))))}};a.style=':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}';export{a as ez_list}