integralui-web-grid
Version:
IntegralUI Web - Grid is a native Web Component that displays tabular data sets
15 lines (12 loc) • 35.6 kB
JavaScript
/*
filename: integralui.list.js
version : 21.4.0
Copyright © 2016-2021 Lidor Systems. All rights reserved.
This file is part of the "IntegralUI Web" Library.
The contents of this file are subject to the IntegralUI Web License, and may not be used except in compliance with the License.
A copy of the License should have been installed in the product's root installation directory or it can be found at
http://www.lidorsystems.com/products/web/studio/license-agreement.aspx.
This SOFTWARE is provided "AS IS", WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the specific language
governing rights and limitations under the License. Any infringement will be prosecuted under applicable laws.
*/
import{c as css,h as html}from"../external/lit-element.js";import{c as classMap}from"../external/class-map.js";import{s as styleMap}from"../external/style-map.js";import IntegralUIBase from"./integralui.base.js";import IntegralUIDataService from"../services/integralui.data.service.js";import{IntegralUISpeedMode,IntegralUIOrientation,IntegralUISelectionMode,IntegralUISortOrder,IntegralUIMoveDirection,IntegralUIObjectState,IntegralUITheme}from"./integralui.enums.js";import"./integralui.scrollbar.js";import{iuiListDefaultStyle}from"../styles/integralui.list.style.js";import{iuiListOfficeStyle}from"../themes/office/integralui.list.office.js";import{iuiListMidnightStyle}from"../themes/midnight/integralui.list.midnight.js";import{iuiListItemDefaultStyle}from"../styles/integralui.listitem.style.js";import{iuiListItemOfficeStyle}from"../themes/office/integralui.listitem.office.js";import{iuiListItemMidnightStyle}from"../themes/midnight/integralui.listitem.midnight.js";class IntegralUIList extends IntegralUIBase{_init(){super._init();this._dataService=new IntegralUIDataService();this._currentFields={};this._currentList=[];this._dataItems=[];this._scrollItemList=[];this._hoverItem=null;this._keepActive=!1;this._currentFocusObj=null;this._isFocusAllowed=!1;this._isKeyProcessed=!1;this._avgItemHeight=0;this._blockSize={width:0,height:0};this._contentSize={width:0,height:0};this._currentIndex=0;this._currentItemSpacing=0;this._currentMaxVisibleItems=0;this._prevIndex=0;this._isUpdateActive=!1;this._visibleRange=100;this._updateTimer=null;this._currentMouseWheelSpeed=IntegralUISpeedMode.Normal;this._currentScrollPos={x:0,y:0};this._maxScrollPos={x:0,y:0};this._accelerator=.5;this._isScrollActive=!1;this._isScrollTimerActive=!1;this._prevScrollPos={x:0,y:0};this._scrollBarSize={width:0,height:0};this._scrollCount=0;this._scrollLargeChange={x:0,y:0};this._scrollSize={width:0,height:0};this._scrollTimerID=null;this._scrollVisibility={horizontal:!0,vertical:!0};this._horScrollOrientation=IntegralUIOrientation.Horizontal;this._currentSelection=null;this._currentSelectionMode=IntegralUISelectionMode.One;this._isItemClicked=!1;this._shiftFirstSelectedItem=null;this._removeIndex=-1;this._currentSelectedItems=[];this._currentSorting=IntegralUISortOrder.None;this._sortComparer=null;this._currentControlStyleSettings=iuiListDefaultStyle;this._currentItemStyleSettings=iuiListItemDefaultStyle;this._currentItemThemeSettings=css``;this._generalClassName="iui-list";this._itemClassName="iui-listitem";this._itemContentClassName=this._itemClassName+"-content";this._refreshTimer=null;this._updateDataFields();this._updateData();this._initStyle()}_initStyle(){this._defaultStyle={general:{disabled:this._generalClassName+"-disabled",focused:this._generalClassName+"-focused",normal:this._generalClassName,hovered:this._generalClassName+"-hovered",selected:this._generalClassName+"-selected"},item:{general:{disabled:this._itemClassName+"-disabled",focused:this._itemClassName+"-focused",normal:this._itemClassName,hovered:this._itemClassName+"-hovered",selected:this._itemClassName+"-selected"},content:{disabled:this._itemContentClassName+"-disabled",focused:this._itemContentClassName+"-focused",normal:this._itemContentClassName,hovered:this._itemContentClassName+"-hovered",selected:this._itemContentClassName+"-selected"}}};this._updateControlClass();this.refresh()}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}attributeChangedCallback(e,t,i){super.attributeChangedCallback(e,t,i)}static get properties(){return{allowFocus:{type:Boolean,attribute:"allow-focus",reflect:!0},dataFields:{type:Object,attribute:"data-fields"},items:{type:Array},itemSpacing:{type:Number,attribute:"item-spacing",reflect:!0},mouseWheelSpeed:{attribute:"mousewheel-speed",converter:{fromAttribute:e=>{switch((e=e.replace(/"|'/,"").replace(/"|'/,"")).toLowerCase()){case"veryslow":return IntegralUISpeedMode.VerySlow;case"slow":return IntegralUISpeedMode.Slow;case"fast":return IntegralUISpeedMode.Fast;case"veryfast":return IntegralUISpeedMode.VeryFast;default:return IntegralUISpeedMode.Normal}},toAttribute:e=>{switch(e){case IntegralUISpeedMode.VerySlow:return"VerySlow";case IntegralUISpeedMode.Slow:return"Slow";case IntegralUISpeedMode.Fast:return"Fast";case IntegralUISpeedMode.VeryFast:return"VeryFast";default:return"Normal"}}},reflect:!0},selectedItem:{type:Object,attribute:"selected-item"},selectionMode:{attribute:"selection-mode",converter:{fromAttribute:e=>{switch((e=e.replace(/"|'/,"").replace(/"|'/,"")).toLowerCase()){case"none":return IntegralUISelectionMode.None;case"multisimple":return IntegralUISelectionMode.MultiSimple;case"multiextended":return IntegralUISelectionMode.MultiExtended;default:return IntegralUISelectionMode.One}},toAttribute:e=>{switch(e){case IntegralUISelectionMode.None:return"None";case IntegralUISelectionMode.MultiSimple:return"MultiSimple";case IntegralUISelectionMode.MultiExtended:return"MultiExtended";default:return"One"}}},reflect:!0},showScroll:{type:Object,attribute:"show-scroll"},sorting:{converter:{fromAttribute:e=>{switch((e=e.replace(/"|'/,"").replace(/"|'/,"")).toLowerCase()){case"ascending":return IntegralUISortOrder.Ascending;case"descending":return IntegralUISortOrder.Descending;default:return IntegralUISpeedMode.None}},toAttribute:e=>{switch(e){case IntegralUISortOrder.Ascending:return"Ascending";case IntegralUISortOrder.Descending:return"Descending";default:return"None"}}},reflect:!0}}}set allowFocus(e){if(this._isFocusAllowed!==e){const t=this._isFocusAllowed;this._isFocusAllowed=e;if(!e)this._currentFocusObj=null;this.refresh();this.requestUpdate("allowFocus",t);this.updateLayout()}}get dataFields(){return this._currentFields}set dataFields(e){const t=this._currentFields;this._updateDataFields(e);this.requestUpdate("dataFields",t)}get items(){return this._dataItems}set items(e){const t=this._dataItems;this._dataItems=e;this._updateData();this.requestUpdate("items",t)}get itemSpacing(){return this._currentItemSpacing}set itemSpacing(e){const t=this._currentItemSpacing;this._currentItemSpacing=e;this.requestUpdate("itemSpacing",t)}get maxVisibleItems(){return this._currentMaxVisibleItems}set maxVisibleItems(e){const t=this._currentMaxVisibleItems;this._currentMaxVisibleItems=e;this.updateLayout();this.requestUpdate("maxVisibleItems",t)}get mouseWheelSpeed(){return this._currentMouseWheelSpeed}set mouseWheelSpeed(e){if(this._currentMouseWheelSpeed!==e){const t=this._currentMouseWheelSpeed;this._currentMouseWheelSpeed=e;this.requestUpdate("mouseWheelSpeed",t)}}get selectedItem(){return this._currentSelection}set selectedItem(e){if(this.allowUpdate&&this._currentSelection!==e){const t=this._currentSelection;this._dataItems.filter(t=>t!==e).forEach(e=>delete e[this._currentFields.selected]);let i=this;i._processSelection(null,e);i.requestUpdate("selectedItem",t)}}get selectionMode(){return this._currentSelectionMode}set selectionMode(e){if(this._currentSelectionMode!==e){const t=this._currentSelectionMode;this._currentSelectionMode=e;this._clearPrevSelection(this._currentSelectionMode!==IntegralUISelectionMode.None?this._currentSelection:null);let i=this,s=setTimeout(function(){i.refresh();if(i._currentSelectionMode===IntegralUISelectionMode.None){i._currentSelection=null;if(!i._keepActive)i._invokeEvent("selectionChanged",{item:null})}i.requestUpdate("selectionMode",t);clearTimeout(s)},1)}}get showScroll(){return this._scrollVisibility}set showScroll(e){if(e){let t=!1;const i=this._scrollVisibility;if(void 0!==e.horizontal&&this._scrollVisibility.horizontal!==e.horizontal){this._scrollVisibility.horizontal=e.horizontal;t=!0}if(void 0!==e.vertical&&this._scrollVisibility.vertical!==e.vertical){this._scrollVisibility.vertical=e.vertical;t=!0}if(t){this.requestUpdate("showScroll",i);this.updateLayout()}}}get sorting(){return this._currentSorting}set sorting(e){if(this._currentSorting!==e){const t=this._currentSorting;this._currentSorting=e;this.requestUpdate("sorting",t)}}_itemClickEvent(e,t){if(this._isEnabled&&1===e.which)this._invokeEvent("itemClick",{event:e,item:t.data})}_addItemToCurrentList(e){e.type="item";if(!e[this._currentFields.id])e[this._currentFields.id]=this._commonService.getUniqueId();if(this._isItemAllowed(e))this._currentList.push({data:e})}loadData(e,t){this.clearItems();this._updateDataFields(t);this._dataItems.length=0;e.map(e=>this._dataItems.push(e));this._invokeEvent("loadComplete");this.updateLayout()}_updateCurrentList(){this._currentList.length=0;let e=this._dataService.getList();if(e){this._applySorting(e);e.map(e=>this._addItemToCurrentList(e))}}_updateData(){this._dataService.init([{data:this._dataItems}])}_updateDataFields(e){if(e)this._currentFields={enabled:e.enabled?e.enabled:"enabled",icon:e.icon?e.icon:"icon",iconUrl:e.iconUrl?e.iconUrl:"iconUrl",id:e.id?e.id:"id",selected:e.selected?e.selected:"selected",style:e.style?e.style:"style",text:e.text?e.text:"text",value:e.value?e.value:"value",visible:e.visible?e.visible:"visible"};else this._currentFields={enabled:"enabled",icon:"icon",iconUrl:"iconUrl",id:"id",selected:"selected",style:"style",text:"text",value:"value",visible:"visible"};if(this._dataService)this._dataService.updateDataFields(this._currentFields)}_resetScrollItemList(){this._scrollItemList.length=0;this.update()}_updateScrollItemList(){this._resetScrollItemList();this._scrollItemList.length=0;this.update();let e=1;for(let t=this._currentIndex;t<this._currentList.length&&t<this._currentIndex+this._visibleRange;t++,e++){let i=this._currentList[t],s={clickPos:{x:0,y:0},data:i.data,index:t-this._currentIndex,inlineStyle:this._getItemInlineStyle(i),style:{},tabIndex:e};this._updateItemStyle(s);this._scrollItemList.push(s)}}focus(){if(this._elemRef)this._elemRef.focus()}cloneItem(e){return this._dataService.clone(e)}_createCloneList(e){let t=[];e.map(e=>t.push(this.cloneItem(e)));return t}_getFilterTree(e){return e?this._filterService.createTree(e.conditions,e.formula):null}_getObjFromItem(e){return this._getObjFromList(e,this._currentList)}_getObjFromList(e,t){let i=t.filter(t=>e&&t.data===e);return i.length>0?i[0]:null}_getObjFromScrollItem(e){return this._getObjFromList(e,this._scrollItemList)}_getItemCurrentIndex(e){let t=this._getObjFromItem(e);return e&&t&&this._currentList?this._currentList.indexOf(t):-1}_getItemScrollIndex(e){return e&&this._scrollItemList?this._scrollItemList.indexOf(e):-1}_getItemElem(e){let t=this._getObjFromScrollItem(e);if(t){let e=this._getItemElemList(),i=this._getItemScrollIndex(t);if(i>=0&&i<e.length)return e[i]}return null}_getItemContentElem(e){let t=this._getObjFromScrollItem(e);if(t){let e=this._getItemContentElemList(),i=this._getItemScrollIndex(t);if(i>=0&&i<e.length)return e[i]}return null}_getItemElemList(){return this._itemElems?this._itemElems:null}_getItemContentElemList(){return this._itemContentElems?this._itemContentElems:null}getList(e,t){let i=[];switch(e){case"current":i=this._currentList;break;case"selected":i=this._currentSelectedItems;break;default:i=this._dataService.getList(t)}return i}getTopItem(){return this._scrollItemList.length>0?this._scrollItemList[0].data:null}_isItemAllowed(e){if(!1===e[this._currentFields.visible])return!1;else return!0}_isItemEnabled(e){return!0}_isItemHovered(e){return!this._isDragActive&&!this._isScrollTimerActive&&e&&e===this._hoverItem?!0:!1}_isItemSelected(e){return e&&!0===e[this._currentFields.selected]?!0:!1}_gotFocus(e){this._keepActive=!0}_ctrlKeyDown(e){e.preventDefault();let t=this;t._keepActive=!1;switch(e.keyCode){case 9:t._keepActive=!0;if(e.shiftKey){t.selectedItem=t._getPrevItem();t._scrollList(IntegralUIMoveDirection.Up)}else{t.selectedItem=t._getNextItem();t._scrollList(IntegralUIMoveDirection.Down)}break;case 13:t._isKeyProcessed=!0;t._keepActive=!1;t._processSelection(e,t._currentSelection);break;case 27:t._isKeyProcessed=!0;t._keepActive=!1;t._invokeEvent("selectionChanged",{item:null});break;case 33:t._keepActive=!0;t.selectedItem=t._getPrevItem(!0);t._scrollList(IntegralUIMoveDirection.Up);break;case 34:t._keepActive=!0;t.selectedItem=t._getNextItem(!0);t._scrollList(IntegralUIMoveDirection.Down);break;case 35:t._keepActive=!0;t.selectedItem=t._dataItems[t._dataItems.length-1];t._scrollList(IntegralUIMoveDirection.Down);break;case 36:t._keepActive=!0;t.selectedItem=t._dataItems[0];t._scrollList(IntegralUIMoveDirection.Up);break;case 38:t._keepActive=!0;t.selectedItem=t._getPrevItem();t._scrollList(IntegralUIMoveDirection.Up);break;case 40:t._keepActive=!0;t.selectedItem=t._getNextItem();t._scrollList(IntegralUIMoveDirection.Down);break;default:this._defaultFunc()}t._isKeyProcessed=!1}_getCurrentSelectedIndex(){return this._dataItems.indexOf(this._currentSelection)}_getNextItem(){let e=this._getCurrentSelectedIndex();if(e<0&&this._dataItems.length>0)return this._dataItems[0];else return e>=0&&e<this._dataItems.length-1?this._dataItems[e+1]:this._dataItems[this._dataItems.length-1]}_getPrevItem(){let e=this._getCurrentSelectedIndex();return e>0?this._dataItems[e-1]:this._dataItems[0]}isActive(){return this._keepActive}_lostFocus(e){this._keepActive=!1}_scrollList(e){let t=this,i=setTimeout(function(){t.scrollTo(t.selectedItem,e);clearTimeout(i)},1)}_getContentSize(){return{width:0,height:0}}_updateBlockSize(){this._blockSize={width:0,height:0}}_resetLayoutTimer(){if(this._updateTimer)clearTimeout(this._updateTimer);this._updateTimer=null}suspendLayout(){this._isUpdateAllowed=!1}resumeLayout(){this._isUpdateAllowed=!0;this.updateLayout()}async shouldUpdate(e){e.forEach((e,t)=>{});if(e.has("items"))await this.updateLayout();if(this._elemRef){this._clientRect={width:this._elemRef.clientWidth-2,height:this._elemRef.clientHeight-2};if(this._clientRect.width!==this._prevClientRect.width){this.updateLayout();this._prevClientRect.width=this._clientRect.width}else if(this._clientRect.height!==this._prevClientRect.height){this.updateLayout();this._prevClientRect.height=this._clientRect.height}}return!0}_updateCurrentLayout(e){}_updateItemElems(){this._itemElems=this.shadowRoot.querySelectorAll("li[data-item]");this._itemContentElems=this.shadowRoot.querySelectorAll("div[data-item-content]")}async updateLayout(){await this._processUpdateLayout();await this._processUpdateLayout();this.update()}_processUpdateLayout(){let e=this;return new Promise(t=>{if(e._isUpdateAllowed){e._resetLayoutTimer();e.updateTimer=setTimeout(function(){e._updateCurrentList();e._clientRect={width:e._elemRef.clientWidth,height:e._elemRef.clientHeight};e._updateScrollItemList();e.update();let i=setTimeout(function(){e._updateItemElems();e._updateBlockSize();e._avgItemHeight=0;let s=e._getItemElemList();if(s&&s.length>0){let t=0;for(let e=0;e<s.length;e++)t+=s[e].offsetHeight;e._avgItemHeight=Math.floor(t/s.length);if(e._currentMaxVisibleItems>0){let t=Math.min(e._currentList.length,e._currentMaxVisibleItems);e.size={height:t*e._avgItemHeight}}}e._updateScrollSize();e._updateVisibleRange();e._updateScrollItemList();e.refresh();e._invokeEvent("updateComplete");e._updateItemElems();clearTimeout(i);t()},1);clearTimeout(e.updateTimer)},1)}})}_updateScrollSize(){let e=this;e._contentSize={width:e._clientRect.width-2,height:e._clientRect.height-2};e._scrollSize={width:0,height:e._currentList.length<=e._currentMaxVisibleItems?0:e._avgItemHeight*e._currentList.length-e._clientRect.height+e._avgItemHeight};if(e.isVerScrollVisible()){e._contentSize.width-=18;if(e._scrollSize.width>0)e._scrollSize.width+=16}if(e.isHorScrollVisible())e._scrollSize.height+=16;e._scrollSize.width=e._scrollSize.width>0?e._scrollSize.width:0;e._scrollSize.height=e._scrollSize.height>0?e._scrollSize.height:0;e._maxScrollPos={x:e._scrollSize.width,y:e._scrollSize.height};if(e._currentScrollPos.x>e._maxScrollPos.x)e._changeHorizontalScrollPos(e._maxScrollPos.x);if(e._currentScrollPos.y>e._maxScrollPos.y)e._changeVerticalScrollPos(e._maxScrollPos.y);e._scrollBarSize={width:e.isVerScrollVisible()?e._clientRect.width-18:e._clientRect.width-4,height:e.isHorScrollVisible()?e._clientRect.height-18:e._clientRect.height-4};e._scrollLargeChange={x:e._scrollBarSize.width,y:e._scrollBarSize.height}}_updateVisibleRange(){this._visibleRange=1;let e=this._getItemElemList();if(e&&e.length>0){let t=0;for(let i=0;i<e.length;i++)t+=e[i].offsetHeight;let i=Math.floor(t/e.length);if(i>0)this._visibleRange=Math.floor(this._clientRect.height/i)+1}}updateView(){this._currentIndex=this._avgItemHeight>0?Math.floor(this._currentScrollPos.y/this._avgItemHeight):0;if(this._currentIndex!==this._prevIndex){this._updateScrollItemList();this._updateBlockSize();this._prevIndex=this._currentIndex;this.update();this._updateItemElems()}else this.update()}_onCtrlMouseEnter(e){if(this._isEnabled)this.state|=IntegralUIObjectState.Hovered}_onCtrlMouseLeave(e){this.state&=~IntegralUIObjectState.Hovered;this.update();this._stopScrollTimer()}_itemMouseDown(e,t){if(this._isEnabled){this._isItemClicked=!0;if(this._isFocusAllowed&&1===e.buttons)this._currentFocusObj=t;this._processSelection(e,t.data)}e.stopPropagation()}_itemMouseEnter(e,t){if(this._isEnabled&&!this._isScrollActive){this._hoverItem=t.data;this._updateItemStyle(t);this.update();this._invokeEvent("itemHover",{item:t.data})}}_itemMouseLeave(e,t){if(this._isEnabled&&!this._isScrollActive){this._hoverItem=null;this._updateItemStyle(t);this.update()}}_itemMouseUp(e,t){if(this._isEnabled&&this._isItemClicked)this._updateSelection(e,t.data);this._isItemClicked=!1}_onScroll(e){if(e.target){e.target.scrollTop=0;e.target.scrollLeft=0}}scrollPos(e){if(e){this._currentScrollPos={x:Math.max(0,Math.min(e.x,this._maxScrollPos.x)),y:Math.max(0,Math.min(e.y,this._maxScrollPos.y))};this.updateView();this._invokeEvent("scrollPosChanged",{value:this._currentScrollPos})}return{x:Math.floor(this._currentScrollPos.x),y:Math.floor(this._currentScrollPos.y)}}_changeHorizontalScrollPos(e){this._currentScrollPos.x=Math.max(0,Math.min(e,this._maxScrollPos.x));if(this._currentScrollPos.x!==this._prevScrollPos.x){this._invokeEvent("scrollPosChanged",{value:this.scrollPos()});this._prevScrollPos.x=this._currentScrollPos.x;this.update()}}_changeVerticalScrollPos(e){this._currentScrollPos.y=Math.max(0,Math.min(e,this._maxScrollPos.y));if(this._currentScrollPos.y!==this._prevScrollPos.y){this.updateView();this._invokeEvent("scrollPosChanged",{value:this.scrollPos()});this._prevScrollPos.y=this._currentScrollPos.y}}_processMouseWheel(e,t){if(this._isEnabled){this._hoverItem=null;let i=Math.max(-1,Math.min(1,e.wheelDelta||-e.detail)),s=5;switch(this._mouseWheelSpeed){case IntegralUISpeedMode.VerySlow:s=15;break;case IntegralUISpeedMode.Slow:s=9;break;case IntegralUISpeedMode.Fast:s=3;break;case IntegralUISpeedMode.VeryFast:s=1;break;default:s=5}e.preventDefault();if(this.isVerScrollVisible()){let e=Math.floor(this._clientRect.height/s);if(this._mouseWheelSpeed===IntegralUISpeedMode.VerySlow&&this._avgItemHeight>0)e=this._avgItemHeight;let t=this._currentScrollPos.y+e*i*-1;if(i>0&&t<=this._avgItemHeight)t=0;this._changeVerticalScrollPos(t)}else if(t&&this.isHorScrollVisible()){let e=Math.floor(this._clientRect.width/s),t=this._currentScrollPos.x+e*i*-1;this._changeHorizontalScrollPos(t)}e.stopPropagation()}}isVerScrollVisible(){return this._isEnabled&&this._scrollVisibility.vertical&&this._scrollSize.height>0?!0:!1}isHorScrollVisible(){return this._isEnabled&&this._scrollVisibility.horizontal&&this._scrollSize.width>0?!0:!1}_onVerticalScrollStart(e){this._hoverItem=null;this._isScrollActive=!0}_onVerticalScrollEnd(e){this._isScrollActive=!1}_onVerticalScrollChanged(e){this._changeVerticalScrollPos(e.detail.value)}_onHorizontalScrollStart(e){this._hoverItem=null;this._isScrollActive=!0}_onHorizontalScrollEnd(e){this._isScrollActive=!1}_onHorizontalScrollChanged(e){this._currentScrollPos.x=e.detail.value;this._invokeEvent("scrollPosChanged",{value:this.scrollPos()});this.update()}_processScroll(e){if(this.isVerScrollVisible()){let t=this._commonService.getShiftPos(),i=this._commonService.getMousePos(e);i.x-=t.x;i.y-=t.y;let s=this._commonService.getPageRect(this._elemRef),l=s.top+25,r=s.bottom-25;if(this.isHorScrollVisible())r-=16;if(i.y<l&&this._currentScrollPos.y>0)this._startScrollTimer(!1);else if(i.y>r&&this._currentScrollPos.y<this._maxScrollPos.y)this._startScrollTimer(!0);else this._stopScrollTimer()}else this._stopScrollTimer()}_startScrollTimer(e,t){let i=this;i._removeDropMark();if(!i._isScrollTimerActive){i._accelerator=.5;i._scrollCount=0;i._isScrollTimerActive=!0;let s=t?t:100;if(!i._scrollTimerID)i._scrollTimerID=setInterval(function(){i._scrollTimerElapsed(e)},s)}}_stopScrollTimer(){if(this._scrollTimerID){clearInterval(this._scrollTimerID);this._scrollTimerID=null}this._accelerator=.5;this._scrollCount=0;this._isScrollTimerActive=!1}_scrollTimerElapsed(e){let t=this._currentScrollPos;if(0===this._scrollCount)this._scrollCount=5;this._scrollCount+=5;this._accelerator+=.5;this._scrollCount+=Math.floor(this._accelerator);let i=this._scrollCount;if(e)if(this._currentScrollPos.y+i>this._maxScrollPos.y)this._currentScrollPos.y=this._maxScrollPos.y;else this._currentScrollPos.y+=i;else if(this._currentScrollPos.y-i<0)this._currentScrollPos.y=0;else this._currentScrollPos.y-=i;if(t.y<=0||this._currentScrollPos.y<t.y)this._stopScrollTimer();this.update()}scrollTo(e){if(e){let t=this._getItemCurrentIndex(e);if(t>=0)this.scrollPos({x:this._currentScrollPos.x,y:this._avgItemHeight*(t+1-Math.floor(this._visibleRange/2))});this.updateLayout()}}_callAfterSelectEvent(e){if(!this._keepActive){let t={item:e};this._invokeEvent("afterSelect",t);this._invokeEvent("selectionChanged",t)}}clearSelection(){this._clearPrevSelection();this._currentSelection=null;this.refresh()}_clearComponentSelection(){this._itemList.forEach(e=>e.state&=~IntegralUIObjectState.Selected)}_clearPrevSelection(e){for(let t=0;t<this._currentSelectedItems.length;t++)if(e&&!this._commonService.isEqual(this._currentSelectedItems[t][this._currentFields.id],e[this._currentFields.id]))this._currentSelectedItems[t][this._currentFields.selected]=!1;else if(!e)this._currentSelectedItems[t][this._currentFields.selected]=!1;this._currentSelectedItems.length=0;if(e&&this._isItemEnabled(e))this._currentSelectedItems.push(e)}_isItemInSelectionList(e){let t=!1,i=this._currentSelectedItems;if(e&&i)for(let s=0;s<i.length;s++)if(this._commonService.isEqual(i[s][this._currentFields.id],e[this._currentFields.id])){t=!0;break}return t}_isCtrlKeyPressed(e){return e&&(e.ctrlKey||e.metaKey)}_isShiftKeyPressed(e){return e&&e.shiftKey}_processSelection(e,t,i){let s=this,l=!0;if(t){if(s.selectionMode===IntegralUISelectionMode.None||!1===t[s._currentFields.canSelect])return;let r=s._currentSelectedItems.length>0;if(!s._isItemEnabled(t)){s._clearPrevSelection();s.refresh();if(r&&!s._keepActive)s._invokeEvent("selectionChanged",{item:null})}else{let n=s._currentSelection,c=!0;if(n)c=s._isKeyProcessed||s._isCtrlKeyPressed(e)||!s._commonService.isEqual(n[s._currentFields.id],t[s._currentFields.id])||!1===n[s._currentFields.selected];let o={cancel:!1,item:t};s._invokeEvent("beforeSelect",o);l=!0===o.cancel?!1:!0;if(!0!==o.cancel){let l=e&&(e.shiftKey||e.ctrlKey||e.metaKey)?!0:!1;if(c){if(s.selectionMode===IntegralUISelectionMode.MultiExtended)c=!s._isItemInSelectionList(t)||!l||s._isShiftKeyPressed(e);if(c)if(s.selectionMode===IntegralUISelectionMode.One)s._clearPrevSelection();else if(e&&e.shiftKey)s._clearPrevSelection();else if(!l&&s.selectionMode!==IntegralUISelectionMode.MultiSimple&&(1===s._currentSelectedItems.length||!s._isItemInSelectionList(t)))s._clearPrevSelection();s._currentSelection=t;if(e&&e.shiftKey&&s.selectionMode!==IntegralUISelectionMode.One){if(!s._shiftFirstSelectedItem)s._shiftFirstSelectedItem=n;let e=s._getItemCurrentIndex(s._shiftFirstSelectedItem),i=s._getItemCurrentIndex(t);if(e>i){let t=e;e=i;i=t}if(s._commonService.isIndexInRange(e,s._currentList)&&s._commonService._isIndexInRange(i,s._currentList))for(let t=e;t<=i;t++)if(!1!==s._currentList[t].data[s._currentFields.canSelect]){s._currentList[t].data[s._currentFields.selected]=!0;s._currentSelectedItems.push(s._currentList[t].data)}}else if(l||s.selectionMode===IntegralUISelectionMode.MultiSimple){let e=null===t[s._currentFields.selected]||"undefined"===t[s._currentFields.selected]?!1:t[s._currentFields.selected];t[s._currentFields.selected]=!e;if(!t[s._currentFields.selected])s._currentSelectedItems=s._currentSelectedItems.filter(function(e){return e!==t});else if(!s._isItemInSelectionList(t))s._currentSelectedItems.push(t);s._shiftFirstSelectedItem=null}else{t[s._currentFields.selected]=!0;if(!s._isItemInSelectionList(t))s._currentSelectedItems.push(t);s._shiftFirstSelectedItem=null}s._callAfterSelectEvent(t);s.refresh()}else if(l||s.selectionMode===IntegralUISelectionMode.MultiSimple){let e=null===t[s._currentFields.selected]||"undefined"===t[s._currentFields.selected]?!1:t[s._currentFields.selected];if(i&&"undefined"!==i)e=i;t[s._currentFields.selected]=!e;if(!t[s._currentFields.selected])s._currentSelectedItems=s._currentSelectedItems.filter(function(e){return e!==t});else if(!s._isItemInSelectionList(t))s._currentSelectedItems.push(t);s._shiftFirstSelectedItem=null;s._callAfterSelectEvent(t);s.refresh()}else if(!l&&!(s.selectionMode&IntegralUISelectionMode.MultiSimple)&&(1===s._currentSelectedItems.length||!s._isItemInSelectionList(t))){s._shiftFirstSelectedItem=null;s._clearPrevSelection(t);s.refresh();if(c&&r&&!s._keepActive)s._invokeEvent("selectionChanged",{item:null})}}}}return l}selectItems(e){if(e&&Array.isArray(e)){this._currentSelectedItems.map(e=>e[this._currentFields.selected]=!1);this._currentSelectedItems.length=0;for(let t=0;t<e.length;t++){e[t][this._currentFields.selected]=!0;this._currentSelectedItems.push(e[t])}if(e.length>0){this._currentSelection=e[e.length-1];this._callAfterSelectEvent(this._currentSelection)}else this._currentSelection=null;this.refresh()}}_updateSelection(e,t){let i=e&&(e.shiftKey||e.ctrlKey||e.metaKey)?!0:!1;if(this.selectionMode===IntegralUISelectionMode.MultiExtended&&!1!==t[this._currentFields.canSelect]&&this._currentSelectedItems.length>0&&!e.shiftKey&&!i&&1===e.which){let e=this._currentSelectedItems.length;this._clearPrevSelection();t[this._currentFields.selected]=!0;this._currentSelectedItems.push(t);if(e>1)this._callAfterSelectEvent(t);this.refresh()}}_applySorting(e){let t=this;if(e)if(t._sortComparer)e.sort(t._sortComparer);else if(t._isSortingAllowed())e.sort(function(e,i){let s=null,l=null;if(!(s=e[t._currentFields.value]))s=e[t._currentFields.text];if(t._commonService.isObject(s))s=s.value?s.value:s.text;if(!(l=i[t._currentFields.value]))l=i[t._currentFields.text];if(t._commonService.isObject(l))l=l.value?l.value:l.text;s=void 0!==s?s:null;l=void 0!==l?l:null;switch(t._currentSorting){case IntegralUISortOrder.Ascending:if(s<l)return-1;else if(s>l)return 1;break;case IntegralUISortOrder.Descending:if(s>l)return-1;else if(s<l)return 1;break;default:return 0}return 0})}_isSortingAllowed(){return this._currentSorting===IntegralUISortOrder.Ascending||this._currentSorting===IntegralUISortOrder.Descending}sort(e,t){this._currentSorting=e;this._sortComparer=t?t:null;this.updateLayout();this._invokeEvent("sorted")}_getItemInlineStyle(e){return e.data[this._currentFields.style]||{}}_updateItemStyle(e){if(e){e.style={general:{},content:{}};e.inlineStyle=this._getItemInlineStyle(e);e.style.general[this._itemClassName]=!0;e.style.general[this._defaultStyle.item.general.normal]=!0;e.style.content[this._itemContentClassName]=!0;e.style.content[this._defaultStyle.item.content.normal]=!0;if(!this._isItemEnabled(e.data)){e.style.general[this._defaultStyle.item.general.disabled]=!0;e.style.content[this._defaultStyle.item.content.disabled]=!0}else if(this._isItemSelected(e.data)){e.style.general[this._defaultStyle.item.general.selected]=!0;e.style.content[this._defaultStyle.item.content.selected]=!0}else if(this._isItemHovered(e.data)){e.style.general[this._defaultStyle.item.general.hovered]=!0;e.style.content[this._defaultStyle.item.content.hovered]=!0}if(this._isFocusAllowed&&this._currentFocusObj&&e.data===this._currentFocusObj.data){e.style.general[this._defaultStyle.item.general.focused]=!0;e.style.content[this._defaultStyle.item.content.focused]=!0}}}_updateThemeSettings(e){this._currentThemeSettings=css``;this._currentItemThemeSettings=css``;switch(e){case IntegralUITheme.Office:this._currentThemeSettings.cssText=this._commonService.replaceAll(iuiListOfficeStyle.cssText,"../../icons",this._currentResourcePath);this._currentItemThemeSettings.cssText=this._commonService.replaceAll(iuiListItemOfficeStyle.cssText,"../../icons",this._currentResourcePath);break;case IntegralUITheme.Midnight:this._currentThemeSettings.cssText=this._commonService.replaceAll(iuiListMidnightStyle.cssText,"../../icons",this._currentResourcePath);this._currentItemThemeSettings.cssText=this._commonService.replaceAll(iuiListItemMidnightStyle.cssText,"../../icons",this._currentResourcePath);break;default:this._currentThemeSettings.cssText="";this._currentItemThemeSettings.cssText=""}}_getItemTemplate(e){let t={},i=this._commonService.isString(e.icon)?e.icon.split(" "):[];i.map(e=>t[e]=!0);return html` ${i.length>0?html`<span class=${classMap(t)}></span>`:html``} ${e.iconUrl?html`<img style=${styleMap({verticalAlign:"middle"})} src="${e.iconUrl} />`:html``} <span class="iui-listitem-label" >${e[this._currentFields.text]}</span> `}_ctrlTouchStart(e){e.preventDefault();if(this._isEnabled){let t=this._commonService.getTouchData(e);if(t&&t.length>0)this._touchStartPos={x:t[0].pageX,y:t[0].pageY}}}_ctrlTouchEnd(e){let t=this;if(t._isEnabled){let i=t._commonService.getTouchData(e);if(i&&i.length>0)t._touchEndPos={x:i[0].pageX,y:i[0].pageY};let s={dx:t._touchEndPos.x-t._touchStartPos.x,dy:t._touchEndPos.y-t._touchStartPos.y},l=!1,r=!1,n=t._touchStartPos,c={x:t._currentScrollPos.x,y:t._currentScrollPos.y},o=setInterval(function(){let e=t._currentScrollPos;if(s.dx<-20){n.x-=30;if(n.x>t._touchEndPos.x)e.x+=30;else{e.x=c.x-s.dx;l=!0}}else if(s.dx>20){n.x+=30;if(n.x<t._touchEndPos.x)e.x-=30;else{e.x=c.x-s.dx;l=!0}}else l=!0;if(s.dy<-20){n.y-=25;if(n.y>t._touchEndPos.y)e.y+=25;else{e.y=c.y-s.dy;r=!0}}else if(s.dy>20){n.y+=25;if(n.y<t._touchEndPos.y)e.y-=25;else{e.y=c.y-s.dy;r=!0}}else r=!0;t.scrollPos(e);if(l&&r)clearInterval(o)},5);t._touchStartPos=t._touchEndPos}}_itemTouchStart(e,t){if(this._isEnabled){if(this._isFocusAllowed&&1===e.buttons)this._currentFocusObj=t;this._processSelection(e,t.data);this._invokeEvent("itemTouch",{event:e,item:t.data})}}firstUpdated(e){this._updateReferences();this.updateLayout()}updated(e){e.forEach((e,t)=>{})}refresh(e){this._resetRefresh();this._updateControlClass();this._scrollItemList.map(e=>this._updateItemStyle(e));this.update();this._updateReferences()}_resetRefresh(){if(this._refreshTimer)clearTimeout(this._refreshTimer);this._refreshTimer=null}render(){return html` <style> ${this._currentControlStyleSettings} ${this._currentItemStyleSettings} ${this._currentThemeSettings} ${this._currentItemThemeSettings} ${this._currentCustomStyle} </style> <div data-ctrl="list" class=${classMap(this._getControlClass())} style=${styleMap(this._getControlStyle())} tabindex="999" @blur="${e=>this._lostFocus(e)}" @focus="${e=>this._gotFocus(e)}" @keydown="${e=>this._ctrlKeyDown(e)}" @DOMMouseScroll="${e=>this._processMouseWheel(e)}" @mousewheel="${e=>this._processMouseWheel(e)}" @mouseenter="${e=>this._onCtrlMouseEnter(e)}" @mouseleave="${e=>this._onCtrlMouseLeave(e)}" @scroll="${e=>this._onScroll(e)}"> <ul id="content" @touchstart="${e=>this._ctrlTouchStart(e)}" @touchend="${e=>this._ctrlTouchEnd(e)}" style=${styleMap({width:this._contentSize.width+"px",height:this._contentSize.height+"px",margin:0,padding:0})}> ${this._scrollItemList.map((e,t)=>html` <li data-item class=${classMap({"iui-listitem-animate":this.allowAnimation,"iui-listitem-animate-enter-suspended":this.allowAnimation&&e.data===this._hoverItem})} style=${styleMap(e.inlineStyle)} @mouseenter="${t=>this._itemMouseEnter(t,e)}" @mouseleave="${t=>this._itemMouseLeave(t,e)}"> <div class=${classMap(e.style.general)} @click="${t=>this._itemClickEvent(t,e)}" @mousedown="${t=>this._itemMouseDown(t,e)}" @mouseup="${t=>this._itemMouseUp(t,e)}" @touchstart="${t=>this._itemTouchStart(t,e)}"> <div data-item-content class=${classMap(e.style.content)}> ${this._getItemTemplate(e.data)} </div> </div> </li> `)} </ul> ${this.isVerScrollVisible()?html`<iui-scrollbar id="ver-scroll" .enabled="${this.enabled}" .value="${this._currentScrollPos.y}" .max="${this._maxScrollPos.y}" .largeChange="${this._scrollLargeChange.y}" .height="${this._scrollBarSize.height}" .theme="${this._currentTheme}" @valueChanged="${e=>this._onVerticalScrollChanged(e)}" @scrollStart="${e=>this._onVerticalScrollStart(e)}" @scrollEnd="${e=>this._onVerticalScrollEnd(e)}"></iui-scrollbar>`:html``} ${this.isHorScrollVisible()?html`<iui-scrollbar id="hor-scroll" .enabled="${this.enabled}" orientation="Horizontal" .value="${this._currentScrollPos.x}" .max="${this._maxScrollPos.x}" .width="${this._scrollBarSize.width}" .theme="${this._currentTheme}" @valueChanged="${e=>this._onHorizontalScrollChanged(e)}" @scrollStart="${e=>this._onHorizontalScrollStart(e)}" @scrollEnd="${e=>this._onHorizontalScrollEnd(e)}"></iui-scrollbar>`:html``} ${this.isVerScrollVisible()&&this.isHorScrollVisible()?html`<div class="iui-scrollbar-corner" style="position:absolute;right:0;bottom:0;width:16px;height:16px;"></div>`:html``} </div> `}_updateControlStyleSettings(e){this._currentControlStyleSettings=css``;this._currentControlStyleSettings.cssText=this._commonService.replaceAll(iuiListDefaultStyle.cssText,"../icons",e);this._currentItemStyleSettings=css``;this._currentItemStyleSettings.cssText=this._commonService.replaceAll(iuiListItemDefaultStyle.cssText,"../icons",e)}_updateReferences(){this._elemRef=this.shadowRoot.querySelector("div[data-ctrl=list]");this._contentElem=this.shadowRoot.querySelector("#content")}}window.customElements.define("iui-list",IntegralUIList);export default IntegralUIList;