UNPKG

@lidorsystems/integralui-web

Version:

IntegralUI Web - Advanced UI Components for Angular

15 lines (12 loc) 20.1 kB
/* filename: integralui.datepicker.js version : 20.2.0 Copyright © 2016-2020 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. */ "use strict";var __extends=this&&this.__extends||function(){var e=function(t,a){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var a in t)if(t.hasOwnProperty(a))e[a]=t[a]})(t,a)};return function(t,a){e(t,a);function i(){this.constructor=t}t.prototype=null===a?Object.create(a):(i.prototype=a.prototype,new i)}}();Object.defineProperty(exports,"__esModule",{value:!0});var core_1=require("@angular/core"),integralui_core_1=require("./integralui.core"),integralui_common_service_1=require("../services/integralui.common.service"),integralui_calendar_1=require("./integralui.calendar"),i0=require("@angular/core"),i1=require("../services/integralui.common.service"),i2=require("@angular/common"),i3=require("./integralui.calendar"),_c0=["calendar"],_c1=function(e,t,a){return{position:e,top:t,opacity:a}},_c2=["header"],_c3=["headerButton"],_c4=["headerTitle"],_c5=function(e){return{"margin-top":e}},_c6=function(e,t){return{"margin-top":e,"margin-right":t}},_c7=function(e,t,a){return{"margin-top":e,"margin-left":t,width:a}},IntegralUICalendarPopup=function(e){__extends(t,e);function t(t,a){var i=e.call(this,t,a)||this;i.elemRef=t;i.commonService=a;i.closeTimer=null;i.openTimer=null;i.calendarDisplayPosition="absolute";i.calendarPos={top:-9999,left:0};i.calendarOpacity=1;i.calendarSize={width:0,height:0};i.firstDayOfWeek=integralui_core_1.IntegralUIWeekDays.Sunday;i.closed=new core_1.EventEmitter;i.dateChanged=new core_1.EventEmitter;return i}Object.defineProperty(t.prototype,"size",{get:function(){return this.ctrlSize},set:function(e){if(e){if(e.width&&this.ctrlSize.width!=e.width)this.ctrlSize.width=e.width;if(e.height&&this.ctrlSize.height!=e.height)this.ctrlSize.height=e.height;this.calendarSize={width:this.ctrlSize.width-2,height:this.ctrlSize.height-2}}},enumerable:!0,configurable:!0});t.prototype.ngOnInit=function(){this.calendarDisplayPosition=this.allowAnimation?"absolute":"relative";this.generalClassName="iui-popup";this.initStyle()};t.prototype.ngAfterContentInit=function(){this.focus()};t.prototype.ngAfterViewInit=function(){this.calendarSize={width:this.ctrlSize.width-2,height:this.ctrlSize.height-2};this.open()};t.prototype.removeCloseTimer=function(){if(this.closeTimer)clearInterval(this.closeTimer)};t.prototype.removeOpenTimer=function(){if(this.openTimer)clearInterval(this.openTimer)};t.prototype.ngOnDestroy=function(){this.removeCloseTimer();this.removeOpenTimer()};t.prototype.open=function(){var e=this;e.removeCloseTimer();e.removeOpenTimer();if(e.allowAnimation&&e.calendarSize.height>0){e.calendarOpacity=0;e.calendarPos.top=-e.calendarSize.height;var t=e.getAnimationFactor();e.openTimer=setInterval(function(){if(e.calendarPos.top<0){e.calendarPos.top+=t;e.calendarOpacity=Math.abs(1+e.calendarPos.top/e.calendarSize.height)}else{e.calendarPos.top=0;e.calendarOpacity=1;e.removeOpenTimer()}},5)}else{e.calendarPos.top=0;e.calendarOpacity=1}};t.prototype.close=function(e,t){var a=this;a.removeCloseTimer();a.removeOpenTimer();if(a.allowAnimation&&a.calendarSize.height>0){a.calendarOpacity=1;a.calendarPos.top=0;var i=a.getAnimationFactor(!0);a.closeTimer=setInterval(function(){if(a.calendarPos.top>-a.calendarSize.height){a.calendarPos.top-=i;a.calendarOpacity=Math.abs(1+a.calendarPos.top/a.calendarSize.height)}else{a.calendarPos.top=-a.calendarSize.height;a.calendarOpacity=0;if(t)a.dateChanged.emit({date:e});else a.closed.emit({date:e});if(a.calendar)a.calendar.reset();a.removeCloseTimer()}},5)}else{a.calendarPos.top=-a.calendarSize.height;a.calendarOpacity=0;if(t)a.dateChanged.emit({date:e});else a.closed.emit({date:e});if(a.calendar)a.calendar.reset()}};t.prototype.calendarDateChanged=function(e){this.close(e.date,!0)};t.prototype.onBlur=function(e){this.close(this.date)};t.prototype.refresh=function(){this.calendar.refresh()};t.ɵfac=function(e){return new(e||t)(i0.ɵɵdirectiveInject(i0.ElementRef),i0.ɵɵdirectiveInject(i1.IntegralUICommonService))};t.ɵcmp=i0.ɵɵdefineComponent({type:t,selectors:[["iui-calendar-popup"]],viewQuery:function(e,t){if(1&e)i0.ɵɵstaticViewQuery(_c0,!0);if(2&e){var a;i0.ɵɵqueryRefresh(a=i0.ɵɵloadQuery())&&(t.calendar=a.first)}},inputs:{date:"date",calendarStyle:"calendarStyle",firstDayOfWeek:"firstDayOfWeek",size:"size"},outputs:{closed:"closed",dateChanged:"dateChanged"},features:[i0.ɵɵInheritDefinitionFeature],decls:4,vars:12,consts:[["tabindex","999",2,"position","absolute","overflow","hidden","z-index","999",3,"ngClass","ngStyle","blur"],[2,"left","0","top","0",3,"ngStyle"],[3,"allowAnimation","controlStyle","firstDayOfWeek","size","selectedDate","dateChanged"],["calendar",""]],template:function(e,t){if(1&e){i0.ɵɵelementStart(0,"div",0);i0.ɵɵlistener("blur",function(e){return t.onBlur(e)});i0.ɵɵelementStart(1,"div",1);i0.ɵɵelementStart(2,"iui-calendar",2,3);i0.ɵɵlistener("dateChanged",function(e){return t.calendarDateChanged(e)});i0.ɵɵelementEnd();i0.ɵɵelementEnd();i0.ɵɵelementEnd()}if(2&e){i0.ɵɵproperty("ngClass",t.getControlClass())("ngStyle",t.getControlStyle());i0.ɵɵadvance(1);i0.ɵɵproperty("ngStyle",i0.ɵɵpureFunction3(8,_c1,t.calendarDisplayPosition,t.calendarPos.top+"px",t.calendarOpacity));i0.ɵɵadvance(1);i0.ɵɵproperty("allowAnimation",!0)("controlStyle",t.calendarStyle)("firstDayOfWeek",t.firstDayOfWeek)("size",t.calendarSize)("selectedDate",t.date)}},directives:[i2.NgClass,i2.NgStyle,i3.IntegralUICalendar],encapsulation:2});return t}(integralui_core_1.IntegralUIPopup);exports.IntegralUICalendarPopup=IntegralUICalendarPopup;var IntegralUIDatePicker=function(e){__extends(t,e);function t(t,a,i){var l=e.call(this,a)||this;l.elemRef=t;l.commonService=a;l.cmpResolver=i;l.calendarRef=null;l.calendar=null;l.buttonMargin={top:2,right:2,bottom:2,left:2};l.currentCalendarSize={width:250,height:200};l.headerMargin={top:0,right:0,bottom:0,left:0};l.headerSize={width:0,height:0};l.titleMargin={top:2,right:2,bottom:2,left:2};l.titleSize={width:0,height:0};l.updateTimer=null;l.headerClass=[];l.animationSpeed=integralui_core_1.IntegralUISpeedMode.Normal;l.calendarFirstDayOfWeek=integralui_core_1.IntegralUIWeekDays.Sunday;l.format=integralui_core_1.IntegralUIDateFormat.Short;l.locales="en-us";l.dateChanged=new core_1.EventEmitter;return l}t.prototype.ngOnInit=function(){if(!this.currentSelectedDate)this.currentSelectedDate=new Date;this.generalClassName="iui-datepicker";this.headerClassName=this.generalClassName+"-header";this.calendarClassName="iui-calendar";this.calendarCellClassName="iui-calendar-cell";this.initStyle()};t.prototype.ngAfterViewInit=function(){this.updateLayout()};t.prototype.initStyle=function(){this.defaultStyle={general:{disabled:this.generalClassName+"-disabled",focused:this.generalClassName+"-focused",normal:this.generalClassName,hovered:this.generalClassName+"-hovered",selected:this.generalClassName+"-selected"},header:{disabled:this.headerClassName+"-disabled",focused:this.headerClassName+"-focused",normal:this.headerClassName,hovered:this.headerClassName+"-hovered",selected:this.headerClassName+"-selected"},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.updateStyle(this.controlStyle);this.updateControlClass();this.updateHeaderClass()};t.prototype.ngOnDestroy=function(){this.removeCalendar()};Object.defineProperty(t.prototype,"calendarSize",{get:function(){return this.currentCalendarSize},set:function(e){if(e){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}},enumerable:!0,configurable:!0});Object.defineProperty(t.prototype,"selectedDate",{get:function(){return this.currentSelectedDate},set:function(e){if(this.currentSelectedDate!=e){this.currentSelectedDate=e;this.dateChanged.emit({date:this.currentSelectedDate})}},enumerable:!0,configurable:!0});t.prototype.getSelectedDate=function(){var e="";if(this.currentSelectedDate){var t={year:"numeric",month:"numeric",day:"numeric"};switch(this.format){case integralui_core_1.IntegralUIDateFormat.Long:t.weekday="long";break;case integralui_core_1.IntegralUIDateFormat.Custom:t=this.formatOptions}e=this.currentSelectedDate.toLocaleString(this.locales,t)}return e};t.prototype.addCalendar=function(){if(this.appRef){this.removeCalendar();var e=this.cmpResolver.resolveComponentFactory(IntegralUICalendarPopup);if(e){this.calendarRef=this.appRef.createComponent(e);if(this.calendarRef.instance)this.calendar=this.calendarRef.instance}}};t.prototype.hideCalendar=function(){if(this.calendar)this.calendar.display="none"};t.prototype.removeCalendar=function(){if(this.calendar){if(this.calendar.closed)this.calendar.closed.unsubscribe();if(this.calendar.dateChanged)this.calendar.dateChanged.unsubscribe()}if(this.calendarRef)this.calendarRef.destroy();this.calendar=null};t.prototype.showCalendar=function(e){var t=this;if(!t.calendar)t.addCalendar();if(t.calendar){var a=t.commonService.getShiftPos(),i=t.commonService.getPageRect(t.elemRef.nativeElement);t.calendar.allowAnimation=t.allowAnimation;t.calendar.animationSpeed=t.animationSpeed;t.calendar.date=t.selectedDate;t.calendar.display="block";t.calendar.firstDayOfWeek=t.calendarFirstDayOfWeek;t.calendar.position={x:i.left+a.x,y:i.bottom+a.y};t.calendar.size=t.calendarSize;t.calendar.calendarStyle=t.options.currentStyle.calendar;t.calendar.closed.subscribe(function(e){t.removeCalendar()});t.calendar.dateChanged.subscribe(function(e){t.selectedDate=e.date;t.removeCalendar()})}};t.prototype.updateLayout=function(){var e=this;e.updateTimer=setTimeout(function(){e.clientRect={width:e.elemRef.nativeElement.firstElementChild.clientWidth,height:e.elemRef.nativeElement.firstElementChild.clientHeight};e.headerSize={width:e.clientRect.width-4,height:e.headerElem.nativeElement.offsetHeight};e.updateHeaderLayout();clearTimeout(e.updateTimer)},1)};t.prototype.updateHeaderLayout=function(){var e=this,t=setTimeout(function(){e.headerMargin={top:(e.clientRect.height-e.headerElem.nativeElement.offsetHeight)/2-2,right:0,bottom:0,left:0};e.buttonMargin={top:(e.headerSize.height-e.headerButtonElem.nativeElement.offsetHeight)/2,right:0,bottom:0,left:2};e.titleMargin={top:(e.headerSize.height-e.headerTitleElem.nativeElement.offsetHeight)/2,right:2,bottom:0,left:2};e.titleSize={width:e.headerSize.width-(e.headerButtonElem.nativeElement.offsetWidth+e.buttonMargin.left+e.buttonMargin.right)-(e.titleMargin.left+e.titleMargin.right)-2,height:e.headerSize.height};clearTimeout(t)},1)};t.prototype.onCtrlMouseEnter=function(e){if(this.isEnabled)this.state|=integralui_core_1.IntegralUIObjectState.hovered};t.prototype.onCtrlMouseLeave=function(e){this.state&=~integralui_core_1.IntegralUIObjectState.hovered};t.prototype.openCalendar=function(e){this.showCalendar(e)};t.prototype.getControlStyle=function(){var e={};if(this.ctrlSize.width>0)e.width=this.ctrlSize.width+"px";if(this.ctrlSize.height>0)e.height=this.ctrlSize.height+"px";return e};t.prototype.updateHeaderClass=function(){this.headerClass.length=0;this.headerClass.push(this.headerClassName);if(this.options.currentStyle){this.headerClass.push(this.options.currentStyle.header.normal);if(this.state&integralui_core_1.IntegralUIObjectState.disabled)this.headerClass.push(this.options.currentStyle.header.disabled);else if(this.state&integralui_core_1.IntegralUIObjectState.focused)this.headerClass.push(this.options.currentStyle.header.focused);else if(this.state&integralui_core_1.IntegralUIObjectState.selected)this.headerClass.push(this.options.currentStyle.header.selected);else if(this.state&integralui_core_1.IntegralUIObjectState.hovered)this.headerClass.push(this.options.currentStyle.header.hovered)}};t.prototype.getHeaderClass=function(){return this.headerClass};t.prototype.getHeaderStyle=function(e){if(this.commonService.isString(e))return e;else if(e)return{disabled:this.commonService.isFieldAvailable(e.disabled,this.headerClassName+"-disabled"),focused:this.commonService.isFieldAvailable(e.focused,this.headerClassName+"-focused"),hovered:this.commonService.isFieldAvailable(e.hovered,this.headerClassName+"-hovered"),normal:this.commonService.isFieldAvailable(e.normal,this.headerClassName),selected:this.commonService.isFieldAvailable(e.selected,this.headerClassName+"-selected")};else return{disabled:this.defaultStyle.header.disabled,focused:this.defaultStyle.header.focused,hovered:this.defaultStyle.header.hovered,normal:this.defaultStyle.header.normal,selected:this.defaultStyle.header.selected}};t.prototype.getCalendarStyle=function(e){if(this.commonService.isString(e))return e;else if(e)return{general:this.getCalendarGeneralStyle(e.general),cell:this.getCalendarCellStyle(e.cell)};else return{general:this.getCalendarGeneralStyle(),cell:this.getCalendarCellStyle()}};t.prototype.getCalendarGeneralStyle=function(e){if(this.commonService.isString(e))return e;else if(e)return{disabled:this.commonService.isFieldAvailable(e.disabled,this.calendarClassName+"-disabled"),focused:this.commonService.isFieldAvailable(e.focused,this.calendarClassName+"-focused"),hovered:this.commonService.isFieldAvailable(e.hovered,this.calendarClassName+"-hovered"),normal:this.commonService.isFieldAvailable(e.normal,this.calendarClassName),selected:this.commonService.isFieldAvailable(e.selected,this.calendarClassName+"-selected")};else return{disabled:this.defaultStyle.calendar.general.disabled,focused:this.defaultStyle.calendar.general.focused,hovered:this.defaultStyle.calendar.general.hovered,normal:this.defaultStyle.calendar.general.normal,selected:this.defaultStyle.calendar.general.selected}};t.prototype.getCalendarCellStyle=function(e){if(this.commonService.isString(e))return e;else if(e)return{disabled:this.commonService.isFieldAvailable(e.disabled,this.calendarCellClassName+"-disabled"),focused:this.commonService.isFieldAvailable(e.focused,this.calendarCellClassName+"-focused"),grayed:this.commonService.isFieldAvailable(e.focused,this.calendarCellClassName+"-grayed"),hovered:this.commonService.isFieldAvailable(e.hovered,this.calendarCellClassName+"-hovered"),normal:this.commonService.isFieldAvailable(e.normal,this.calendarCellClassName),selected:this.commonService.isFieldAvailable(e.selected,this.calendarCellClassName+"-selected"),today:this.commonService.isFieldAvailable(e.today,this.calendarCellClassName+"-today")};else return{disabled:this.defaultStyle.calendar.cell.disabled,focused:this.defaultStyle.calendar.cell.focused,grayed:this.defaultStyle.calendar.cell.grayed,normal:this.defaultStyle.calendar.cell.normal,hovered:this.defaultStyle.calendar.cell.hovered,selected:this.defaultStyle.calendar.cell.selected,today:this.defaultStyle.calendar.cell.today}};t.prototype.updateStyle=function(e){if(e)this.options.currentStyle={general:this.getGeneralStyle(e.general),header:this.getHeaderStyle(e.header),calendar:this.getCalendarStyle(e.calendar)};else this.options.currentStyle={general:{disabled:this.defaultStyle.general.disabled,focused:this.defaultStyle.general.focused,hovered:this.defaultStyle.general.hovered,normal:this.defaultStyle.general.normal,selected:this.defaultStyle.general.selected},header:{disabled:this.defaultStyle.header.disabled,focused:this.defaultStyle.header.focused,hovered:this.defaultStyle.header.hovered,normal:this.defaultStyle.header.normal,selected:this.defaultStyle.header.selected},calendar:{general:{disabled:this.defaultStyle.calendar.general.disabled,focused:this.defaultStyle.calendar.general.focused,hovered:this.defaultStyle.calendar.general.hovered,normal:this.defaultStyle.calendar.general.normal,selected:this.defaultStyle.calendar.general.selected},cell:{disabled:this.defaultStyle.calendar.cell.disabled,focused:this.defaultStyle.calendar.cell.focused,grayed:this.defaultStyle.calendar.cell.grayed,normal:this.defaultStyle.calendar.cell.normal,hovered:this.defaultStyle.calendar.cell.hovered,selected:this.defaultStyle.calendar.cell.selected,today:this.defaultStyle.calendar.cell.today}}}};t.prototype.refresh=function(){var e=this,t=setTimeout(function(){e.updateStyle(e.controlStyle);e.updateControlClass();e.updateHeaderClass();clearTimeout(t)},1)};t.ɵfac=function(e){return new(e||t)(i0.ɵɵdirectiveInject(i0.ElementRef),i0.ɵɵdirectiveInject(i1.IntegralUICommonService),i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver))};t.ɵcmp=i0.ɵɵdefineComponent({type:t,selectors:[["iui-datepicker"]],viewQuery:function(e,t){if(1&e){i0.ɵɵviewQuery(_c2,!0,core_1.ElementRef);i0.ɵɵviewQuery(_c3,!0,core_1.ElementRef);i0.ɵɵviewQuery(_c4,!0,core_1.ElementRef)}if(2&e){var a;i0.ɵɵqueryRefresh(a=i0.ɵɵloadQuery())&&(t.headerElem=a.first);i0.ɵɵqueryRefresh(a=i0.ɵɵloadQuery())&&(t.headerButtonElem=a.first);i0.ɵɵqueryRefresh(a=i0.ɵɵloadQuery())&&(t.headerTitleElem=a.first)}},inputs:{controlStyle:"controlStyle",data:"data",enabled:"enabled",name:"name",size:"size",state:"state",animationSpeed:"animationSpeed",appRef:"appRef",calendarFirstDayOfWeek:"calendarFirstDayOfWeek",calendarSize:"calendarSize",format:"format",formatOptions:"formatOptions",locales:"locales",selectedDate:"selectedDate"},outputs:{dateChanged:"dateChanged"},features:[i0.ɵɵInheritDefinitionFeature],decls:10,vars:15,consts:[[3,"ngClass","ngStyle","mouseenter","mouseleave"],[1,"iui-datepicker-header",3,"ngStyle"],["header",""],[1,"iui-datepicker-header-button","iui-datepicker-header-button-down",3,"ngStyle","mousedown"],["headerButton",""],[1,"iui-datepicker-header-title",3,"ngStyle"],["headerTitle",""]],template:function(e,t){if(1&e){i0.ɵɵelementStart(0,"div",0);i0.ɵɵlistener("mouseenter",function(e){return t.onCtrlMouseEnter(e)})("mouseleave",function(e){return t.onCtrlMouseLeave(e)});i0.ɵɵelementStart(1,"div",1,2);i0.ɵɵelementStart(3,"div",3,4);i0.ɵɵlistener("mousedown",function(e){return t.openCalendar(e)});i0.ɵɵelement(5,"span");i0.ɵɵelementEnd();i0.ɵɵelementStart(6,"div",5,6);i0.ɵɵelementStart(8,"span");i0.ɵɵtext(9);i0.ɵɵelementEnd();i0.ɵɵelementEnd();i0.ɵɵelementEnd();i0.ɵɵelementEnd()}if(2&e){i0.ɵɵproperty("ngClass",t.getControlClass())("ngStyle",t.getControlStyle());i0.ɵɵadvance(1);i0.ɵɵproperty("ngStyle",i0.ɵɵpureFunction1(6,_c5,t.headerMargin.top+"px"));i0.ɵɵadvance(2);i0.ɵɵproperty("ngStyle",i0.ɵɵpureFunction2(8,_c6,t.buttonMargin.top+"px",t.buttonMargin.right+"px"));i0.ɵɵadvance(3);i0.ɵɵproperty("ngStyle",i0.ɵɵpureFunction3(11,_c7,t.titleMargin.top+"px",t.titleMargin.left+"px",t.titleSize.width+"px"));i0.ɵɵadvance(3);i0.ɵɵtextInterpolate(t.getSelectedDate())}},directives:[i2.NgClass,i2.NgStyle],encapsulation:2});return t}(integralui_core_1.IntegralUIBaseComponent);exports.IntegralUIDatePicker=IntegralUIDatePicker;