integralui-web-grid/components/integralui.menuitem.js

IntegralUI Web - Grid is a native Web Component that displays tabular data sets

/*
  filename: integralui.menuitem.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 IntegralUIItem from"./integralui.item.js";import IntegralUIDataService from"../services/integralui.data.service.js";import{IntegralUIOrientation,IntegralUIObjectState,IntegralUITheme}from"./integralui.enums.js";import{iuiMenuItemDefaultStyle}from"../styles/integralui.menuitem.style.js";import{iuiMenuItemOfficeStyle}from"../themes/office/integralui.menuitem.office.js";import{iuiMenuItemMidnightStyle}from"../themes/midnight/integralui.menuitem.midnight.js";class IntegralUIMenuItem extends IntegralUIItem{_init(){super._init();this._dataService=new IntegralUIDataService();this._contentAnimation={display:"none",left:0,width:0,height:0};this._dataItems=[];this._childItems=[];this._currentLevel=0;this._currentOrientation=IntegralUIOrientation.Vertical;this._currentPause=300;this._currentIconUrl=null;this._expandState="none";this._isExpanded=!1;this._isItemHovered=!1;this._blockPos={top:0,left:0};this._popupOrder=999;this._blockDisplay="none";this._blockElemWidth="0";this._blockElemHeight="0";this._blockOverflow="hidden";this._blockOpacity=0;this._pauseTimer=null;this._parentOffset={left:0,top:0,width:0,height:0};this._currentTemplateRef=null;this._currentControlStyleSettings=iuiMenuItemDefaultStyle;this._updateData();this._initStyle()}_initClassNames(){this._parentClassName=this._parentCtrl&&this._parentCtrl._getClassName?this._parentCtrl._getClassName():"iui-menu";this._generalClassName=this.data&&!this.data.pid?this._parentClassName+"item-root":this._parentClassName+"item";this._blockClassName=this._parentClassName+"item-block";this._contentClassName=this._generalClassName+"-content";this._expandBoxClassName="iui-menu-marker-expand";this._expandBoxSpaceClassName=this._expandBoxClassName+"-space";this._separatorClassName=this._generalClassName+"-separator";this._isExpanded=this.data&&void 0!==this.data.expanded?this.data.expanded:!1;this._defaultStyle={general:{disabled:this._generalClassName+"-disabled",focused:this._generalClassName+"-focused",normal:this._generalClassName,hovered:this._generalClassName+"-hovered",selected:this._generalClassName+"-selected"},expandBox:{general:this._expandBoxClassName,animated:this._expandBoxClassName+"-load",expanded:this._expandBoxClassName+"-open",collapsed:this._expandBoxClassName+"-close"},content:{disabled:this._contentClassName+"-disabled",focused:this._contentClassName+"-focused",normal:this._contentClassName,hovered:this._contentClassName+"-hovered",selected:this._contentClassName+"-selected"},separator:this._separatorClassName}}_initStyle(){this._initClassNames();this.refresh()}connectedCallback(){}disconnectedCallback(){this._removePauseTimer()}setParent(e){this._parentCtrl=e;this._initClassNames()}attributeChangedCallback(e,t,s){super.attributeChangedCallback(e,t,s)}static get properties(){return{data:{type:Object},expanded:{type:Boolean,relect:!0},iconUrl:{type:String,relect:!0},items:{type:Array},level:{type:Number,reflect:!0},orientation:{converter:{fromAttribute:e=>"horizontal"===(e=e.replace(/"|'/,"").replace(/"|'/,"")).toLowerCase()?IntegralUIOrientation.Horizontal:IntegralUIOrientation.Vertical,toAttribute:(e,t)=>e===IntegralUIOrientation.Horizontal?"Horizontal":"Vertical"},reflect:!0},pause:{type:Number,reflect:!0},templateRef:{type:Object,attribute:"template-ref"}}}get data(){return this._ctrlData}set data(e){if(this._ctrlData!==e){const t=this._ctrlData;this._ctrlData=e;this._initStyle();this.requestUpdate("data",t)}}get expanded(){return this._isExpanded}set expanded(e){if(this._isExpanded!==e&&this._isEnabled){if(e)this._expandState="expand";else this._expandState="collapse";this._isExpanded=e;this._toggleContent()}}get iconUrl(){return this._currentIconUrl}set iconUrl(e){if(this._currentIconUrl!==e){const t=this._currentIconUrl;this._currentIconUrl=e;this.requestUpdate("iconUrl",t)}}get items(){return this._dataItems}set items(e){const t=this._dataItems;this._dataItems=e;this._updateData();this.requestUpdate("items",t)}get level(){return this._currentLevel}set level(e){if(this._currentLevel!==e){const t=this._currentLevel;this._currentLevel=e;this.requestUpdate("level",t)}}get orientation(){return this._currentOrientation}set orientation(e){if(this._currentOrientation!==e){const t=this._currentOrientation;this._currentOrientation=e;this.requestUpdate("orientation",t)}}get pause(){return this._currentPause}set pause(e){if(this._currentPause!==e){const t=this._currentPause;this._currentPause=e;this.requestUpdate("pause",t)}}get templateRef(){return this._currentTemplateRef}set templateRef(e){if(this._currentTemplateRef!==e){const t=this._currentTemplateRef;this._currentTemplateRef=e;this.requestUpdate("templateRef",t)}}_updateData(){this._dataService.init([{data:this.items}])}collapse(){this.expanded=!1}expand(){this.expanded=!0}toggle(){this.expanded=!this.expanded}_onExpandBoxMouseDown(e){if(this._isEnabled)this.toggle()}_getDataType(){return this.data&&this.data.type?this.data.type:"item"}_getItemLevel(){return void 0!==this._currentLevel?this._currentLevel+1:0}_getOffset(){return this._elemRef?{left:this._elemRef.offsetLeft,top:this._elemRef.offsetTop,width:this._elemRef.offsetWidth,height:this._elemRef.offsetHeight}:{left:0,top:0,width:0,height:0}}_isThereChildren(){return this._dataItems&&this._dataItems.length>0}_isBlockVisible(){return this._isItemHovered&&this._isThereChildren()}setOffset(e){this._parentOffset=e}updateLayout(){let e=this;e._updateReferences();let t=setTimeout(function(){if(e.data&&e._elemRef)if(e.data.pid||e._currentOrientation===IntegralUIOrientation.Vertical)e._blockPos={top:e._currentLevel>0?-2:-1,left:e._elemRef.offsetLeft+e._elemRef.offsetWidth-3};else e._blockPos={top:e._parentOffset.height-8,left:-1};e.refresh();clearTimeout(t)},1)}_onMouseEnter(e){if(this._isEnabled){this.state|=IntegralUIObjectState.Hovered;this._isItemHovered=!0;this.updateLayout();this.expand();this._invokeEvent("mouseEnter",e)}e.stopPropagation()}_onMouseDown(e){if(this._isEnabled)this._invokeEvent("mouseDown",e);e.stopPropagation()}_onMouseLeave(e){if(this._isEnabled){this.state&=~IntegralUIObjectState.Hovered;this._removePauseTimer();this._isItemHovered=!1;this.collapse();this._invokeEvent("mouseLeave",e)}e.stopPropagation()}_onMouseUp(e){if(this._isEnabled){if(1===e.which)this._parentCtrl.invokeCtrlMethod("MENU_CLICK",{event:e,cmp:this,item:this.data});this._invokeEvent("mouseUp",e)}e.stopPropagation()}_onContextMenu(e){e.preventDefault();e.stopPropagation()}_onChildItemMouseDown(e){this.collapse()}_removePauseTimer(){if(this._pauseTimer)clearTimeout(this._pauseTimer)}_toggleContent(){let e=this;if(e._dataItems){let t=e._elemRef.offsetHeight/2*e._dataItems.length,s=0,i=0;if(e._isAnimationAllowed)if(e._isExpanded){e._removePauseTimer();e._pauseTimer=setTimeout(function(){if(e._pauseTimer){e._blockDisplay="block";let a=setInterval(function(){if(s<t){s+=i=0===i?1:i+2;e._blockElemHeight=s+"px";e._blockOpacity=s/t;e.refresh()}else{e._blockElemHeight="auto";e._blockOverflow="visible";e._blockOpacity=1;e._expandState="none";e.refresh();clearInterval(a)}},25)}e._removePauseTimer()},300)}else{e._blockOverflow="hidden";if(e._blockElem)s=e._blockElem.offsetHeight;let a=setInterval(function(){if(s>0){s-=i=0===i?1:i+2;e._blockElemHeight=s+"px";e._blockOpacity=s/t;e.refresh()}else{e._blockDisplay="none";e._blockElemHeight="0";e._blockOpacity=0;e._expandState="none";e.refresh();clearInterval(a)}},25)}else if(e._isExpanded){e._removePauseTimer();e._pauseTimer=setTimeout(function(){if(e._pauseTimer){e._blockDisplay="block";e._blockElemHeight="auto";e._blockOverflow="visible";e._blockOpacity=1;e._expandState="none"}e.refresh();e._removePauseTimer()},300)}else{e._blockOverflow="hidden";e._blockDisplay="none";e._blockElemHeight="0";e._blockOpacity=0;e._expandState="none";e.refresh()}}}_getControlStyle(){let e={};if(this.data)e=this.data.style||{};e.display=this._getItemDisplay();return e}_getItemDisplay(){let e="block";if(this.data&&void 0!==this.data.pid)e=this._currentOrientation?this._currentOrientation===IntegralUIOrientation.Vertical?"block":"inline-block":"block";else e=this._currentOrientation?this._currentOrientation===IntegralUIOrientation.Vertical?"block":"inline-block":"inline-block";return e}_updateControlClass(){this._ctrlClass={};this._ctrlClass[this._generalClassName]=!0;if("separator"===this._getDataType())this._ctrlClass[this._getSeparatorClass()]=!0;else if(this._defaultStyle){this._ctrlClass[this._defaultStyle.general.normal]=!0;if(this.state&IntegralUIObjectState.Disabled)this._ctrlClass[this._defaultStyle.general.isabled]=!0;else if(this.state&IntegralUIObjectState.Focused)this._ctrlClass[this._defaultStyle.general.focused]=!0;else if(this.state&IntegralUIObjectState.Selected)this._ctrlClass[this._defaultStyle.general.selected]=!0;else if(this.state&IntegralUIObjectState.Hovered)this._ctrlClass[this._defaultStyle.general.hovered]=!0;if(this._isThereChildren()){let e=this._getExpandBoxClass();if(this.data&&this.data.pid)e+="-right";else if(this._currentOrientation===IntegralUIOrientation.Vertical)e+="-right";else e+="-down";this._ctrlClass[e]=!0;this._ctrlClass[this._getExpandBoxSpaceClass()]=!0}}}_getExpandBoxSpaceClass(){let e="";if(this._isThereChildren())e=this._expandBoxSpaceClassName;return e}_getSeparatorClass(){return this._defaultStyle?this._defaultStyle.separator:this._defaultStyle.separator}_getExpandBoxClass(){let e="";if(this._isThereChildren())e=this._defaultStyle.expandBox.general;return e}_updateThemeSettings(e){this._currentThemeSettings=css``;switch(e){case IntegralUITheme.Office:this._currentThemeSettings.cssText=this._commonService.replaceAll(iuiMenuItemOfficeStyle.cssText,"../icons",this._currentResourcePath);break;case IntegralUITheme.Midnight:this._currentThemeSettings.cssText=this._commonService.replaceAll(iuiMenuItemMidnightStyle.cssText,"../icons",this._currentResourcePath);break;default:this._currentThemeSettings.cssText=""}}_getItemTemplate(e){if(this._parentCtrl&&this._parentCtrl._getItemTemplate)return this._parentCtrl._getItemTemplate(e);else return html``}firstUpdated(e){this._updateReferences();this.updateLayout()}_getChildItemLayout(){if(this._isThereChildren())return html`<ul id="block" class="iui-menuitem-block" style=${styleMap({display:this._blockDisplay,top:this._blockPos.top+"px",left:this._blockPos.left+"px",height:this._blockElemHeight,overflow:this._blockOverflow,opacity:this._blockOpacity})}>                     ${this._dataItems.map(e=>html`                         <iui-menuitem .allowAnimation="${this.allowAnimation}" .customStyle="${this.customStyle}" .data="${e}" .enabled="${e.enabled}" .items="${e.items}" .icon="${e.icon}" .iconUrl="${e.iconUrl}" .level="${this._getItemLevel()}" .resourcePath="${this.resourcePath}" .text="${e.text}" .templateRef="${this._getItemTemplate(e)}" .theme="${this.theme}"></iui-menuitem>                     `)}                 </ul>`;else return html``}refresh(){this._updateStyle(this.controlStyle);this._updateControlClass();this._updateContentClass();this.update();this._updateReferences();this._refreshChildren()}_refreshChildren(){if(this._childItems)this._childItems.forEach(e=>e.refresh())}render(){return html`             <style>                 ${this._currentControlStyleSettings}                 ${this._currentThemeSettings}                 ${this._currentCustomStyle}             </style>             <li data-ctrl="menuitem" class=${classMap(this._getControlClass())} style=${styleMap(this._getControlStyle())} @click="${e=>this._onClick(e)}" @mousedown="${e=>this._onMouseDown(e)}" @mouseup="${e=>this._onMouseUp(e)}" @mouseenter="${e=>this._onMouseEnter(e)}" @mousemove="${e=>this._onMouseMove(e)}" @mouseleave="${e=>this._onMouseLeave(e)}" @contextmenu="${e=>this._onContextMenu(e)}">                 ${"item"===this._getDataType()?html`                         ${this.templateRef}                         ${this._getChildItemLayout()}`:html``}                 ${"separator"===this._getDataType()?html`<hr />`:html``}             </li>         `}_updateControlStyleSettings(e){this._currentControlStyleSettings=css``;this._currentControlStyleSettings.cssText=this._commonService.replaceAll(iuiMenuItemDefaultStyle.cssText,"../icons",e)}_updateReferences(){this._elemRef=this.shadowRoot.querySelector("li[data-ctrl=menuitem]");this._blockElem=this.shadowRoot.querySelector("#block");if(this._blockElem){this._childItems=this._blockElem.querySelectorAll("iui-menuitem");if(this._childItems)this._childItems.forEach(e=>{e.setParent(this._parentCtrl);e.setOffset(this._getOffset())})}}}window.customElements.define("iui-menuitem",IntegralUIMenuItem);export default IntegralUIMenuItem;