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

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

/*
  filename: integralui.datepicker.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{IntegralUISpeedMode,IntegralUIWeekDays,IntegralUIDateFormat,IntegralUIObjectState,IntegralUITheme}from"./integralui.enums.js";import IntegralUIDropDown from"./integralui.dropdown.js";import"./integralui.header.js";import"./integralui.calendar.js";import{iuiDatePickerDefaultStyle}from"../styles/integralui.datepicker.style.js";import{iuiDatePickerOfficeStyle}from"../themes/office/integralui.datepicker.office.js";import{iuiDatePickerMidnightStyle}from"../themes/midnight/integralui.datepicker.midnight.js";class IntegralUIDatePicker extends IntegralUIBase{_init(){super._init();this._currentAnimationSpeed=IntegralUISpeedMode.Normal;this._currentAnimationType="arrow";this._cmpRef=null;this._currentDropDownAdjustment={top:0,left:0,width:0,height:0};this._currentFirstDayOfWeek=IntegralUIWeekDays.Sunday;this._currentFormat=IntegralUIDateFormat.Short;this._currentFormatOptions=null;this._currentLocales="en-us";this._currentSelectedDate=new Date();this._expandState="none";this._isExpanded=!1;this._currentCalendarSize={width:250,height:200};this._headerClass={};this._generalClassName="iui-datepicker";this._headerClassName=this._generalClassName+"-header";this._headerExpandBoxClassName=this._headerClassName+"-expand-box";this._calendarClassName="iui-calendar";this._calendarCellClassName="iui-calendar-cell";this._currentControlStyleSettings=iuiDatePickerDefaultStyle;this._focusTimeout=null;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"},header:{general:{disabled:this._headerClassName+"-disabled",focused:this._headerClassName+"-focused",normal:this._headerClassName,hovered:this._headerClassName+"-hovered",selected:this._headerClassName+"-selected"},expandBox:this._headerExpandBoxClassName},calendar:{general:{disabled:this._calendarClassName+"-disabled",focused:this._calendarClassName+"-focused",normal:this._calendarClassName,hovered:this._calendarClassName+"-hovered",selected:this._calendarClassName+"-selected"},cell:{disabled:this._calendarCellClassName+"-disabled",focused:this._calendarCellClassName+"-focused",grayed:this._calendarCellClassName+"-grayed",normal:this._calendarCellClassName,hovered:this._calendarCellClassName+"-hovered",selected:this._calendarCellClassName+"-selected",today:this._calendarCellClassName+"-today"}}};this.refresh()}connectedCallback(){}disconnectedCallback(){if(this._focusTimeout)clearTimeout(this._focusTimeout)}attributeChangedCallback(e,t,a){super.attributeChangedCallback(e,t,a)}static get properties(){return{animationSpeed:{attribute:"animation-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},animationType:{type:String,reflect:!0},calendarSize:{type:Object,attribute:"calendar-size"},dropDownAdjustment:{type:Object,attribute:"dropdown-adjustment"},expanded:{type:Boolean,reflect:!0},firstDayOfWeek:{attribute:"first-dayofweek",converter:{fromAttribute:e=>{switch((e=e.replace(/"|'/,"").replace(/"|'/,"")).toLowerCase()){case"monday":return IntegralUIWeekDays.Monday;case"tuesday":return IntegralUIWeekDays.Tuesday;case"wednesday":return IntegralUIWeekDays.Wednesday;case"thursday":return IntegralUIWeekDays.Thursday;case"friday":return IntegralUIWeekDays.Friday;case"saturday":return IntegralUIWeekDays.Saturday;default:return IntegralUIWeekDays.Sunday}},toAttribute:e=>{switch(e){case IntegralUIWeekDays.Monday:return"Monday";case IntegralUIWeekDays.Tuesday:return"Tuesday";case IntegralUIWeekDays.Wednesday:return"Wednesday";case IntegralUIWeekDays.Thursday:return"Thursday";case IntegralUIWeekDays.Friday:return"Friday";case IntegralUIWeekDays.Saturday:return"Saturday";default:return"Sunday"}}},reflect:!0},format:{converter:{fromAttribute:e=>{switch((e=e.replace(/"|'/,"").replace(/"|'/,"")).toLowerCase()){case"long":return IntegralUIDateFormat.Long;case"custom":return IntegralUIDateFormat.Custom;default:return IntegralUIDateFormat.Short}},toAttribute:e=>{switch(e){case IntegralUIDateFormat.Long:return"Long";case IntegralUIDateFormat.Custom:return"Custom";default:return"Short"}}},reflect:!0},formatOptions:{type:Object,attribute:"format-options"},locales:{type:String,reflect:!0},selectedDate:{type:Object,attribute:"selected-date"}}}get animationSpeed(){return this._currentAnimationSpeed}set animationSpeed(e){if(this._currentAnimationSpeed!==e){const t=this._currentAnimationSpeed;this._currentAnimationSpeed=e;this.requestUpdate("animationSpeed",t)}}get animationType(){return this._currentAnimationType}set animationType(e){if(this._currentAnimationType!==e){const t=this._currentAnimationType;this._currentAnimationType=e;this.requestUpdate("animationSpeed",t)}}get calendarSize(){return this._currentCalendarSize}set calendarSize(e){if(e){const t=this._currentCalendarSize;if(e.width&&this._currentCalendarSize.width!==e.width)this._currentCalendarSize.width=e.width;if(e.height&&this._currentCalendarSize.height!==e.height)this._currentCalendarSize.height=e.height;this.requestUpdate("calendarSize",t)}}get dropDownAdjustment(){return this._currentDropDownAdjustment}set dropDownAdjustment(e){if(e){const t=this._currentDropDownAdjustment;if(void 0!==e.top&&this._currentDropDownAdjustment.top!==e.top)this._currentDropDownAdjustment.top=e.top;if(void 0!==e.left&&this._currentDropDownAdjustment.left!==e.left)this._currentDropDownAdjustment.left=e.left;if(void 0!==e.width&&this._currentDropDownAdjustment.width!==e.width)this._currentDropDownAdjustment.width=e.width;if(void 0!==e.height&&this._currentDropDownSize.height!==e.height)this._currentDropDownAdjustment.height=e.height;this.requestUpdate("dropDownAdjustment",t)}}get expanded(){return this._isExpanded}set expanded(e){if(this._isExpanded!==e){const t=this._isExpanded;let a=this,r={cancel:!1,date:this._currentSelectedDate};a._invokeEvent("beforeExpand",r);if(!0!==r.cancel){a._isExpanded=e;if(e)a._expandState="expand";else a._expandState="collapse";let r=setTimeout(function(){if("collapse"===a._expandState)a._expandState="none";clearTimeout(r)},300);a._isExpanded=e;a._header.animationState=a._isExpanded?"expand":"collapse";a.toggle();a.requestUpdate("expanded",t)}}}get firstDayOfWeek(){return this._currentFirstDayOfWeek}set firstDayOfWeek(e){if(this._currentFirstDayOfWeek!==e){const t=this._currentFirstDayOfWeek;this._currentFirstDayOfWeek=e;this.requestUpdate("firstDayOfWeek",t)}}get format(){return this._currentFormat}set format(e){if(this._currentFormat!==e){const t=this._currentFormat;this._currentFormat=e;this.requestUpdate("format",t)}}get formatOptions(){return this._currentFormatOptions}set formatOptions(e){if(this._currentFormatOptions!==e){const t=this._currentFormatOptions;this._currentFormatOptions=e;this.requestUpdate("formatOptions",t)}}get locales(){return this._currentLocales}set locales(e){if(this._currentLocales!==e){const t=this._currentLocales;this._currentLocales=e;this.requestUpdate("locales",t)}}get selectedDate(){return this._currentSelectedDate}set selectedDate(e){if(this._currentSelectedDate!==e){const t=this._currentSelectedDate;this._currentSelectedDate=e;this._invokeEvent("dateChanged",{date:this._currentSelectedDate});this.requestUpdate("selectedDate",t)}}_getSelectedDate(){let e="";if(this._commonService.isDate(this._currentSelectedDate)){let t={year:"numeric",month:"numeric",day:"numeric"};switch(this._currentFormat){case IntegralUIDateFormat.Long:t.weekday="long";break;case IntegralUIDateFormat.Custom:t=this._currentFormatOptions;break;default:this._defaultFunc()}e=this._currentSelectedDate.toLocaleString(this.locales,t)}return e}_addCalendar(){this._removeCalendar();this._cmpRef=document.createElement("iui-dropdown",{is:IntegralUIDropDown});document.body.appendChild(this._cmpRef);if(this._cmpRef){this._cmpRef.allowAnimation=this.allowAnimation;this._cmpRef.animationSpeed=this.animationSpeed;this._cmpRef.contentTemplate=this._getContentTemplate();this._cmpRef.customStyle=this.customStyle;this._cmpRef.resourcePath=this.resourcePath;this._cmpRef.size=this._currentCalendarSize;this._cmpRef.theme=this._currentTheme;let e=this._commonService.getPageRect(this._elemRef),t=this._commonService.getShiftPos();this._cmpRef.position={top:e.top+this._header.getSize().height+t.y+this._currentDropDownAdjustment.top,left:e.left+t.x+this._currentDropDownAdjustment.left};this._cmpRef.open();this._removeCtrl=this._removeCtrl.bind(this);this._cmpRef.addEventListener("closed",this._removeCtrl);let a=this;setTimeout(function(){let e=a._cmpRef.getContent();if(e&&e.setFocus)e.setFocus()},100)}}_closeCalendar(){if(this._cmpRef)this._cmpRef.close()}_calendarBlur(e){this._closeCalendar()}_dateChanged(e){this.selectedDate=e.detail.date;this._closeCalendar();this.update();let t=this;t._focusTimeout=setTimeout(function(){t.setFocus();clearTimeout(t._focusTimeout)},1)}_removeCtrl(e){this.collapse();this._invokeEvent("closed",{date:this._currentSelectedDate});this._removeCalendar()}_removeCalendar(){if(this._cmpRef){this._cmpRef.removeEventListener("closed",this._removeCtrl);this._cmpRef.parentNode.removeChild(this._cmpRef)}this._cmpRef=null}collapse(){this.expanded=!1}expand(){this.expanded=!0}toggle(){if(this._isExpanded)this._addCalendar()}_ctrlKeyDown(e){let t={cancel:!1,date:this._currentSelectedDate,event:e};this._invokeEvent("keyDown",t);if(this._currentSelectedDate){let a=e.shiftKey?e.ctrlKey?365:30:1;switch(e.keyCode){case 37:if(!t.cancel){let e=new Date(Number(this._currentSelectedDate));e.setDate(e.getDate()-a);this.selectedDate=e;this.update()}e.stopPropagation();break;case 39:if(!t.cancel){let e=new Date(Number(this._currentSelectedDate));e.setDate(e.getDate()+a);this.selectedDate=e;this.update()}e.stopPropagation();break;default:this._defaultFunc()}}}_onCtrlMouseEnter(e){if(this._isEnabled)this.state|=IntegralUIObjectState.hovered}_onCtrlMouseLeave(e){this.state&=~IntegralUIObjectState.hovered}_openCalendar(e){if(this._isEnabled&&1===e.detail.buttons){this.expanded=!0;this._invokeEvent("opened",{event:e.detail})}}_getCurrentHeaderStyle(){return this._defaultStyle.header}_updateThemeSettings(e){this._currentThemeSettings=css``;switch(e){case IntegralUITheme.Office:this._currentThemeSettings.cssText=this._commonService.replaceAll(iuiDatePickerOfficeStyle.cssText,"../../icons",this._currentResourcePath);break;case IntegralUITheme.Midnight:this._currentThemeSettings.cssText=this._commonService.replaceAll(iuiDatePickerMidnightStyle.cssText,"../../icons",this._currentResourcePath);break;default:this._currentThemeSettings.cssText=""}}_getContentTemplate(){let e={width:this._currentCalendarSize.width-4,height:this._currentCalendarSize.height-4};return html`<iui-calendar .allowAnimation="${this._isAnimationAllowed}" .customStyle="${this.customStyle}" .locales="${this.locales}" .selectedDate="${this._currentSelectedDate}" .resourcePath="${this.resourcePath}" .size="${e}" .theme="${this.theme}" @blur="${e=>this._calendarBlur(e)}" @dateChanged="${e=>this._dateChanged(e)}"></iui-calendar>`}firstUpdated(e){this.updateLayout()}render(){return html`             <style>                 ${this._currentControlStyleSettings}                 ${this._currentThemeSettings}                 ${this._currentCustomStyle}             </style>             <div data-ctrl="datepicker" class=${classMap(this._getControlClass())} style=${styleMap(this._getControlStyle())} tabindex="0" @keydown="${e=>this._ctrlKeyDown(e)}" @mouseenter="${e=>this._onCtrlMouseEnter(e)}" @mouseleave="${e=>this._onCtrlMouseLeave(e)}">                 <iui-header id="header" .controlStyle="${this._getCurrentHeaderStyle()}" .customStyle="${[this._currentControlStyleSettings,this._currentThemeSettings,this._currentCustomStyle]}" .enabled="${this.enabled}" .text="${this._getSelectedDate()}" .resourcePath="${this._currentResourcePath}" .theme="${this._currentTheme}" .animationType="${this._currentAnimationType}" @mouseDown="${e=>this._openCalendar(e)}"></iui-header>             </div>         `}_updateControlStyleSettings(e){this._currentControlStyleSettings=css``;this._currentControlStyleSettings.cssText=this._commonService.replaceAll(iuiDatePickerDefaultStyle.cssText,"../icons",e)}_updateReferences(){this._elemRef=this.shadowRoot.querySelector("div[data-ctrl=datepicker]");this._header=this.shadowRoot.querySelector("#header")}}window.customElements.define("iui-datepicker",IntegralUIDatePicker);export default IntegralUIDatePicker;