@sankhyalabs/ezui 2.4.2 → 2.5.1

package/dist/ezui/p-3c1939f1.entry.js

@@ -0,0 +1 @@
+import{r as t,c as r,h as i,H as e}from"./p-3c7ea91b.js";import{ElementIDUtils as s}from"@sankhyalabs/core";let a=class{constructor(i){t(this,i),this.ezChange=r(this,"ezChange",7),this._listItems=[],this._listGroupItems=[],this._listItemsHistory=[],this.dataSource=[],this.useGroups=!1,this.ezDraggable=!1,this.ezSelectable=!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,r){if(t&&this.ezSelectable){if(this.useGroups){let r=[...this._listGroupItems];r.forEach((r=>{r.items.forEach((r=>{r.selected=r.label==t.label}))})),this._listGroupItems=r}else{let r=[...this._listItems];r.forEach((r=>{r.selected=r.label===t.label})),this._listItems=r}if(r){let r=this.useGroups?this._groupContainer.querySelector("li#item_"+this.getItemId(t.label)):this._itemContainer.querySelector("li#item_"+this.getItemId(t.label));r&&r.scrollIntoView()}}else this.removeSelection()}async getSelection(){let t;return this.useGroups?this._listGroupItems.every((r=>{let i=r.items.find((t=>1==t.selected));return!i||(t=i,!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,r){return t.label<r.label?-1:t.label>r.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,r=t.querySelectorAll(".draggable-list");null==r||r.forEach(((t,r)=>{var i,e;let a="draggableList";const o=null===(e=null===(i=this._listGroupItems)||void 0===i?void 0:i[r])||void 0===e?void 0:e.group;this.useGroups&&o&&(a=a.concat("_",o)),s.addIDInfoIfNotExists(t,a)}));const i=t.querySelectorAll(".selectable-container");null==i||i.forEach((t=>{s.addIDInfoIfNotExists(t,"selectable")}))}componentWillLoad(){this._listItemsHistory=[]}componentWillRender(){this.createList(),this._element&&this.buildIdDraggableListAndSelectable()}componentDidLoad(){s.addIDInfo(this._element)}onDrop(t,r){if(this.removeOverClass(),this.setSelection(void 0),this._dragStartItem)if(this.useGroups){let t=[...this._listGroupItems],i=this._listGroupItems.find((t=>r.groupName==t.group));if(t.find((t=>t.group==this._dragStartItem.groupName)).items.splice(this._dragStartItem.index,1),i.sort)t.find((t=>t.group==r.groupName)).items.push(this._dragStartItem.item),t.find((t=>t.group==r.groupName)).items.sort((function(t,r){return t.label<r.label?-1:t.label>r.label?1:0})),"DSC"===i.sort&&t.find((t=>t.group==r.groupName)).items.reverse();else{let i=r.index>this._dragStartItem.index?r.index-1:r.index;t.find((t=>t.group==r.groupName)).items.splice(i,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(r.index,0,this._dragStartItem.item),this._listItems=t,this._listItemsHistory=t,this.ezChange.emit(this._listItems)}t.stopPropagation()}onDropLastIndex(t,r){if(this.removeOverClass(),this.setSelection(void 0),this._dragStartItem)if(this.useGroups){let t=[...this._listGroupItems],i=this._listGroupItems.find((t=>r.group==t.group));t.find((t=>t.group==this._dragStartItem.groupName)).items.splice(this._dragStartItem.index,1),t.find((t=>t.group==r.group)).items.push(this._dragStartItem.item),i.sort&&(t.find((t=>t.group==r.group)).items.sort((function(t,r){return t.label<r.label?-1:t.label>r.label?1:0})),"DSC"===i.sort&&t.find((t=>t.group==r.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 r;let i=[...this._listGroupItems];this.setSelection(void 0);let e=i.find((r=>r.group===t.group));if(e){if((null===(r=e.items)||void 0===r?void 0:r.length)>0){let t;e.items.forEach(((r,i)=>{r.label===this._dragStartItem.item.label&&(t={item:r,index:i})})),t?(e.items.splice(t.index,1),e.items.unshift(t.item),this.sortGroup(e)):(e.items.unshift(this._dragStartItem.item),this.sortGroup(e),i.find((t=>t.group===this._dragStartItem.groupName)).items.splice(this._dragStartItem.index,1))}else i.find((t=>t.group===this._dragStartItem.groupName)).items.splice(this._dragStartItem.index,1),e.items=[this._dragStartItem.item];this._listGroupItems=i}}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,r){if(t.target){let t=this._groupContainer.querySelector("div#"+this.getDivGroupId(r.group)).getElementsByClassName("group-overlay")[0];r.items.length>0?t.setAttribute("style","display:grid"):(t.classList.add("presetedHeight"),t.setAttribute("style","display:grid"),t.scrollIntoView(!1))}}removeOverClass(){var t,r;let i,e;this.useGroups?(i=null===(t=this._groupContainer)||void 0===t?void 0:t.getElementsByClassName("over"),e=this._groupContainer.getElementsByClassName("last-droppable-space")):(i=null===(r=this._itemContainer)||void 0===r?void 0:r.getElementsByClassName("over"),e=this._itemContainer.getElementsByClassName("last-droppable-space")),i&&Array.from(i).forEach((function(t){t.classList.remove("over")})),e&&Array.from(e).forEach((function(t){t.classList.remove("over")}))}removeOverGroupClass(t,r){if(t.target){let t=this._groupContainer.querySelector("div#"+this.getDivGroupId(r.group)).getElementsByClassName("group-overlay")[0];t&&(t.classList.remove("presetedHeight"),t.setAttribute("style","display:none"))}}onDragStart(t,r,i){this._changeDeboucingTimeout&&window.clearTimeout(this._changeDeboucingTimeout),this.useGroups?(this._dragStartItem={groupName:r.group,item:t,index:i},this._changeDeboucingTimeout=window.setTimeout((()=>{this.showOverlays(r)}),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 r;if(this.useGroups)this._listGroupItems.every(((i,e,s)=>{let a,o=i.items.findIndex((r=>r.label==t.label));return null!=o&&-1!=o&&(o===i.items.length-1?e+1<=s.length-1&&(a={label:s[e+1].items[0].label}):a={label:i.items[o+1].label}),null==a||(r=a,!1)}));else{let i=this._listItems.findIndex((r=>r.label===t.label));i>=0&&i<this._listItems.length&&(r=this._listItems[i+1])}this.setSelection(r,!0)}previousOption(t){let r;if(this.useGroups)this._listGroupItems.every(((i,e,s)=>{let a,o=i.items.findIndex((r=>r.label==t.label));return null!=o&&-1!=o&&(0===o?e-1>=0&&(a={label:s[e-1].items[s[e-1].items.length-1].label}):a={label:i.items[o-1].label}),null==a||(r=a,!1)}));else{let i=this._listItems.findIndex((r=>r.label===t.label));i>0&&i<this._listItems.length&&(r=this._listItems[i-1])}this.setSelection(r,!0)}keyDownHandler(t){t.preventDefault(),this.getSelection().then((r=>{if(r)switch(t.key){case"ArrowDown":this.nextOption(r);break;case"ArrowUp":this.previousOption(r)}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,r){this._dragStartItem&&this._dragStartItem.groupName!==r.group&&r.sort&&(t.preventDefault(),this.addOverGroupClass(t,r))}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 r=this._groupContainer.getElementsByClassName("group-overlay");Array.from(r).forEach((r=>{let i=this.getGroupOverlayId(t.group);i&&r.getAttribute("id")&&i!=r.getAttribute("id")&&(r.classList.add("presetedHeight"),r.setAttribute("style","display:grid"))}))}hideOverlays(){var t;let r=null===(t=this._groupContainer)||void 0===t?void 0:t.getElementsByClassName("group-overlay");Array.from(r).forEach((t=>{t.classList.remove("presetedHeight"),t.setAttribute("style","display:none")}))}render(){return i(e,{ref:t=>this._element=t},this.useGroups?i("div",{class:"group-container",ref:t=>this._groupContainer=t,tabIndex:0,onKeyDown:t=>{this.keyDownHandler(t)}},this._listGroupItems.map((t=>i("div",{id:this.getDivGroupId(t.group),class:"group",key:t.group+t.items.length,onDrop:()=>this.onDropGroup(t)},i("label",{draggable:!1,class:"group-name"},t.group),i("section",{class:"section-container",onDragOver:t=>t.preventDefault()},i("div",{class:"group-items-container"},i("div",{class:"draggable-list"},t.items.map(((r,e)=>i("li",{id:"item_"+this.getItemId(r.label),class:this.ezSelectable?"selectable-container":"",key:"item_"+this.getItemId(r.label)},i("div",{class:"draggable"+(1==r.selected?" selected-item ":"")+(1==this.ezSelectable?" selectable ":""),onClick:()=>{this.setSelection(r)},onDragLeave:()=>{t.sort||this.removeOverClass()},onDragEnd:()=>this.onDragEnd(),onDragStart:()=>this.onDragStart(r,t,e),onDragOver:r=>{t.sort||this.onDragOverItem(r)},onDrop:i=>this.onDrop(i,{groupName:t.group,item:r,index:e}),draggable:this.ezDraggable},i("div",{class:"item-content"},this.ezDraggable?i("span",{class:"draggable-icon"}):void 0,i("p",{title:r.label,class:"person-name text--ellipsis"},r.label)),this.itemSlotBuilder?i("div",{class:"slot-item"},this.itemSlotBuilder(r,t)):void 0))))),i("div",{class:"last-droppable-space",onDragLeave:()=>this.removeOverClass(),onDragOver:t=>{this.onDragOverLastIndex(t)},onDragEnd:()=>this.onDragEnd(),onDrop:r=>this.onDropLastIndex(r,t)})),t.sort?i("div",{id:this.getGroupOverlayId(t.group),class:"group-overlay"},"Mover para ",t.group):void 0))))):i("div",{class:"items-container",ref:t=>this._itemContainer=t,tabIndex:0,onKeyDown:t=>{this.keyDownHandler(t)}},i("div",{class:"draggable-list"},this._listItems.map(((t,r)=>i("li",{id:"item_"+this.getItemId(t.label),class:this.ezSelectable?"selectable-container":"",key:"item_"+this.getItemId(t.label)},i("div",{class:"draggable"+(1==t.selected?" selected-item ":"")+(1==this.ezSelectable?" selectable ":""),onDragStart:()=>this.onDragStart({item:t,index:r}),onClick:()=>{this.setSelection(t)},onDragLeave:()=>this.removeOverClass(),onDragOver:t=>this.onDragOverItem(t),onDragEnd:()=>this.onDragEnd(),onDrop:i=>this.onDrop(i,{item:t,index:r}),draggable:this.ezDraggable},i("div",{class:"item-content"},this.ezDraggable?i("span",{class:"draggable-icon"}):void 0,i("p",{title:t.label,class:"person-name text--ellipsis"},t.label)),this.itemSlotBuilder?i("div",null,this.itemSlotBuilder(t)):void 0)))),i("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__group-container-scrollbar--border-radius:var(--border--radius-small, 6px);--ez-list__group-container-scrollbar--width:var(--space--medium, 12px);--ez-list__group-container-scrollbar--background-color-primary:var(--scrollbar--primary, #2B3A54);--ez-list__group-container-scrollbar--background-color-secondary:var(--scrollbar--secondary, #E5EAF0);--ez-list__over--border--color:var(--color--primary, #008561);--ez-list__last-droppable-space--height:var(--space--small, 6px);--ez-list__draggable-scrollbar--border-radius:var(--border--radius-small, 6px);--ez-list__draggable-scrollbar--width:var(--space--medium, 12px);--ez-list__draggable-scrollbar--background-color-primary:var(--scrollbar--primary, #2B3A54);--ez-list__draggable-scrollbar--background-color-secondary:var(--scrollbar--secondary, #E5EAF0);--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>\');max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-list__host--z-index)}p{margin:0}.draggable{display:flex;align-items:center;border-top:1px dashed #fff;justify-content:space-between;background-color:#fff;font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);flex:1;width:100%}.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}.item-content{display:flex;justify-content:flex-start;align-items:center;width:100%}.group-container .item-content{max-width:calc(100% - 41px)}.items-container .item-content{max-width:calc(100% - 100px)}.draggable-list{color:var(--text-color);padding:0;margin:0;width:100%;max-height:100%;scrollbar-width:thin;scrollbar-color:var(--ez-list__draggable-scrollbar--background-color-primary) var(--ez-list__draggable-scrollbar--background-color-secondary)}.draggable-list li{background-color:#fff;display:flex;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);height:32px}.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-track{background-color:var(--ez-list__draggable-scrollbar--background-color-secondary)}.draggable-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__draggable-scrollbar--background-color-primary);border-radius:var(--ez-list__draggable-scrollbar--border-radius)}.draggable-list::-webkit-scrollbar{background-color:var(--ez-list__draggable-scrollbar--background-color-secondary);width:var(--ez-list__draggable-scrollbar--width);max-width:var(--ez-list__draggable-scrollbar--width);min-width:var(--ez-list__draggable-scrollbar--width)}.draggable-icon{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon::after{content:\'\';display:flex;background-color:var(--ez-list__icon--color);width:18px;height:18px;-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__group-container-scrollbar--background-color-primary) var(--ez-list__group-container-scrollbar--background-color-secondary)}.group-name{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);-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none}.group{display:flex;flex-direction:column}.group-container::-webkit-scrollbar-track{background-color:var(--ez-list__group-container-scrollbar--background-color-secondary)}.group-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__group-container-scrollbar--background-color-primary);border-radius:var(--ez-list__group-container-scrollbar--border-radius)}.group-container::-webkit-scrollbar{background-color:var(--ez-list__group-container-scrollbar--background-color-secondary);width:var(--ez-list__group-container-scrollbar--width);max-width:var(--ez-list__group-container-scrollbar--width);min-width:var(--ez-list__group-container-scrollbar--width)}.section-container{display:flex;position:relative;height:100%}.items-container{width:100%;max-height:100%;overflow-y:auto;outline:none;scrollbar-width:thin;scrollbar-color:var(--ez-list__draggable-scrollbar--background-color-primary) var(--ez-list__draggable-scrollbar--background-color-secondary)}.group-items-container{width:100%;max-height:100%;height:100%;outline:none}.items-container::-webkit-scrollbar-track{background-color:var(--ez-list__draggable-scrollbar--background-color-secondary)}.items-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__draggable-scrollbar--background-color-primary);border-radius:var(--ez-list__draggable-scrollbar--border-radius)}.items-container::-webkit-scrollbar{background-color:var(--ez-list__draggable-scrollbar--background-color-secondary);width:var(--ez-list__draggable-scrollbar--width);max-width:var(--ez-list__draggable-scrollbar--width);min-width:var(--ez-list__draggable-scrollbar--width)}.group-overlay{font-family:var(--ez-list__group-overlay--font-family);font-size:var(--ez-list__group-overlay--font-size);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}.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}