@lidorsystems/integralui-web/bin/integralui/components/integralui.slider.js

IntegralUI Web - Advanced UI Components for Angular

/*
  filename: integralui.slider.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,i){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)if(t.hasOwnProperty(i))e[i]=t[i]})(t,i)};return function(t,i){e(t,i);function s(){this.constructor=t}t.prototype=null===i?Object.create(i):(s.prototype=i.prototype,new s)}}();Object.defineProperty(exports,"__esModule",{value:!0});var core_1=require("@angular/core"),animations_1=require("@angular/animations"),integralui_core_1=require("./integralui.core"),integralui_common_service_1=require("../services/integralui.common.service"),forms_1=require("@angular/forms"),i0=require("@angular/core"),i1=require("../services/integralui.common.service"),i2=require("@angular/common"),_c0=["handle"],IntegralUISlider=function(e){__extends(t,e);function t(t,i){var s=e.call(this,t,i)||this;s.elemRef=t;s.commonService=i;s.animationState="out";s.ctrlMaxValue=100;s.ctrlMinValue=0;s.currentOrientation=integralui_core_1.IntegralUIOrientation.Horizontal;s.contentSize={width:0,height:0};s.handleSize={width:0,height:0};s.sliderSize={width:0,height:0};s.sliderPos=0;s.sliderBackgroundClass=[];s.sliderButtonClass=[];s.orientationChanged=new core_1.EventEmitter;s.isSliderChangeActive=!1;return s}Object.defineProperty(t.prototype,"value",{get:function(){return Math.floor(this.currentValue)},set:function(e){e=Math.floor(e);if((e=Math.max(0,Math.min(this.ctrlMaxValue,e)))!==this.currentValue&&e>=this.ctrlMinValue&&e<=this.ctrlMaxValue){this.currentValue=e;this.onChange(e);this.processValueChange();this.valueChanged.emit({value:this.currentValue})}},enumerable:!0,configurable:!0});Object.defineProperty(t.prototype,"orientation",{get:function(){return this.currentOrientation},set:function(e){if(this.currentOrientation!=e){this.currentOrientation=e;this.updateLayout();this.orientationChanged.emit(null)}},enumerable:!0,configurable:!0});Object.defineProperty(t.prototype,"min",{get:function(){return this.ctrlMinValue},set:function(e){e=Math.floor(e);if(this.ctrlMinValue!=e)this.ctrlMinValue=e},enumerable:!0,configurable:!0});Object.defineProperty(t.prototype,"max",{get:function(){return this.ctrlMaxValue},set:function(e){e=Math.floor(e);if(this.ctrlMaxValue!=e)this.ctrlMaxValue=e},enumerable:!0,configurable:!0});t.prototype.ngOnInit=function(){this.generalClassName="iui-slider";this.contentClassName=this.generalClassName+"-content";this.sliderBackgroundClassName=this.generalClassName+"-background";this.sliderButtonClassName=this.generalClassName+"-button";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"},content:{disabled:this.contentClassName+"-disabled",focused:this.contentClassName+"-focused",normal:this.contentClassName,hovered:this.contentClassName+"-hovered",selected:this.contentClassName+"-selected"},slider:{background:{disabled:this.sliderBackgroundClassName+"-disabled",focused:this.sliderBackgroundClassName+"-focused",normal:this.sliderBackgroundClassName,hovered:this.sliderBackgroundClassName+"-hovered",selected:this.sliderBackgroundClassName+"-selected"},button:{disabled:this.sliderButtonClassName+"-disabled",focused:this.sliderButtonClassName+"-focused",normal:this.sliderButtonClassName,hovered:this.sliderButtonClassName+"-hovered",selected:this.sliderButtonClassName+"-selected"}}};this.updateStyle(this.controlStyle);this.updateControlClass();this.updateContentClass();this.updateSliderBackgroundClass();this.updateSliderButtonClass()};t.prototype.ngAfterContentChecked=function(){if(1==this.autoUpdate){this.clientRect={width:this.elemRef.nativeElement.firstElementChild.clientWidth,height:this.elemRef.nativeElement.firstElementChild.clientHeight};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}}if(this.handleElem){if(this.handleSize.width!=this.handleElem.nativeElement.offsetWidth){this.handleSize={width:this.handleElem.nativeElement.offsetWidth,height:this.handleElem.nativeElement.offsetHeight};this.updateLayout()}if(this.handleSize.height!=this.handleElem.nativeElement.offsetHeight){this.handleSize={width:this.handleElem.nativeElement.offsetWidth,height:this.handleElem.nativeElement.offsetHeight};this.updateLayout()}}};t.prototype.getContentWidth=function(){return this.contentSize.width};t.prototype.getSliderWidth=function(){return this.sliderSize.width};t.prototype.processValueChange=function(){this.updateLayout()};t.prototype.updateLayout=function(){var e=this,t=setTimeout(function(){var i=e.commonService.getPadding(e.elemRef.nativeElement.firstElementChild);e.clientRect={width:e.elemRef.nativeElement.firstElementChild.clientWidth-(i.left+i.right),height:e.elemRef.nativeElement.firstElementChild.clientHeight-(i.top+i.bottom)};e.contentSize={width:e.clientRect.width-2,height:e.clientRect.height-2};e.sliderSize={width:e.clientRect.width-4,height:e.clientRect.height-4};if(e.currentOrientation==integralui_core_1.IntegralUIOrientation.Horizontal){e.contentSize.height=1;e.sliderSize.width=e.sliderSize.height/2}else{e.contentSize.width=1;e.sliderSize.height=e.sliderSize.width/2}e.handleSize={width:e.handleElem.nativeElement.offsetWidth,height:e.handleElem.nativeElement.offsetHeight};if(e.currentValue<e.ctrlMinValue||e.currentValue>e.ctrlMaxValue)e.currentValue=Math.max(e.ctrlMinValue,Math.min(e.ctrlMaxValue,e.currentValue));if(e.currentOrientation==integralui_core_1.IntegralUIOrientation.Horizontal)e.sliderPos=e.currentValue*(e.clientRect.width-e.handleSize.width)/e.ctrlMaxValue;else e.sliderPos=e.currentValue*(e.clientRect.height-e.handleSize.height)/e.ctrlMaxValue;e.updateContentClass();e.updateSliderBackgroundClass();clearTimeout(t)},1)};t.prototype.ctrlMouseEnter=function(e){this.animationState="in"};t.prototype.ctrlMouseLeave=function(e){if(!this.isSliderChangeActive)this.animationState="out"};t.prototype.ctrlMouseDown=function(e){if(this.isEnabled&&1==e.which){this.isSliderChangeActive=!0;if(this.currentOrientation===integralui_core_1.IntegralUIOrientation.Horizontal){if(this.clientRect.width>0)this.value=this.ctrlMaxValue*e.offsetX/this.clientRect.width}else if(this.clientRect.height>0)this.value=this.ctrlMaxValue*(this.clientRect.height-e.offsetY)/this.clientRect.height;this.updateLayout();e.stopPropagation()}};t.prototype.ctrlMouseMove=function(e){this.animationState="in"};t.prototype.ctrlMouseUp=function(e){this.isSliderChangeActive=!1};t.prototype.ctrlMouseWheel=function(e){if(this.isEnabled){e.preventDefault();var t=Math.max(-1,Math.min(1,e.wheelDelta||-e.detail)),i=(this.ctrlMaxValue-this.ctrlMinValue)/10;this.value+=i*t*-1;e.stopPropagation()}};t.prototype.ctrlTouchEnd=function(e){if(this.isEnabled){var t=this.commonService.getTouchData(e);if(t&&t.length>0){var i=this.commonService.getPageRect(this.elemRef.nativeElement),s=this.commonService.getShiftPos();if(this.currentOrientation===integralui_core_1.IntegralUIOrientation.Horizontal){if(this.clientRect.width>0)this.value=this.ctrlMaxValue*(t[0].pageX-i.left-s.x)/this.clientRect.width}else if(this.clientRect.height>0)this.value=this.ctrlMaxValue*(this.clientRect.height-(t[0].pageY-i.bottom-s.y))/this.clientRect.height;this.updateLayout();e.stopPropagation()}}};t.prototype.onWindowMouseMove=function(e){if(this.isEnabled&&1==e.which&&this.isSliderChangeActive){var t=this.commonService.getMousePos(e),i=this.commonService.getShiftPos();t.x-=i.x;t.y-=i.y;var s=this.commonService.getPageRect(this.elemRef.nativeElement.firstElementChild),n=0;if(this.currentOrientation==integralui_core_1.IntegralUIOrientation.Horizontal){if(t.x<s.left)n=this.ctrlMinValue;else if(t.x>s.right)n=this.ctrlMaxValue;else if(this.clientRect.width>0)n=this.ctrlMaxValue*(t.x-s.left)/this.clientRect.width}else if(t.y>s.bottom)n=this.ctrlMinValue;else if(t.y<s.top)n=this.ctrlMaxValue;else if(this.clientRect.height>0)n=this.ctrlMaxValue*(s.bottom-t.y)/this.clientRect.height;this.value=n;this.updateLayout();e.stopPropagation()}};t.prototype.onWindowMouseUp=function(e){this.isSliderChangeActive=!1;this.animationState="out"};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.getSliderBackStyle=function(){var e={};if(this.currentOrientation==integralui_core_1.IntegralUIOrientation.Horizontal)e={left:this.sliderPos+this.handleSize.width+"px",top:this.clientRect.height/2+"px",width:this.contentSize.width-this.sliderPos-this.handleSize.width+"px"};else e={left:this.clientRect.width/2+"px",bottom:this.sliderPos+this.handleSize.height+"px",height:this.contentSize.height-this.sliderPos-this.handleSize.height+"px"};return e};t.prototype.getSliderBackValueStyle=function(){var e={};if(this.currentOrientation==integralui_core_1.IntegralUIOrientation.Horizontal)e={left:"0",top:this.clientRect.height/2+"px",width:this.sliderPos+"px"};else e={left:this.clientRect.width/2+"px",bottom:"0",height:this.sliderPos+"px"};return e};t.prototype.getSliderValueStyle=function(){var e={};if(this.currentOrientation==integralui_core_1.IntegralUIOrientation.Horizontal)e={left:this.sliderPos+"px",top:"0",width:this.sliderSize.width+"px",height:this.sliderSize.height+"px"};else e={left:"0",bottom:this.sliderPos+"px",width:this.sliderSize.width+"px",height:this.sliderSize.height+"px"};return e};t.prototype.updateContentClass=function(){this.contentClass.length=0;if(this.currentOrientation==integralui_core_1.IntegralUIOrientation.Horizontal)this.contentClass.push(this.contentClassName);else this.contentClass.push(this.contentClassName+"-vertical");if(this.options.currentStyle){this.contentClass.push(this.options.currentStyle.content.normal);if(this.state&integralui_core_1.IntegralUIObjectState.disabled)this.contentClass.push(this.options.currentStyle.content.disabled);else if(this.state&integralui_core_1.IntegralUIObjectState.focused)this.contentClass.push(this.options.currentStyle.content.focused);else if(this.state&integralui_core_1.IntegralUIObjectState.selected)this.contentClass.push(this.options.currentStyle.content.selected);else if(this.state&integralui_core_1.IntegralUIObjectState.hovered)this.contentClass.push(this.options.currentStyle.content.hovered)}};t.prototype.getSliderBackgroundClass=function(){return this.sliderBackgroundClass};t.prototype.updateSliderBackgroundClass=function(){this.sliderBackgroundClass.length=0;if(this.currentOrientation==integralui_core_1.IntegralUIOrientation.Horizontal)this.sliderBackgroundClass.push(this.sliderBackgroundClassName);else this.sliderBackgroundClass.push(this.sliderBackgroundClassName+"-vertical");if(this.options.currentStyle){this.sliderBackgroundClass.push(this.options.currentStyle.slider.background.normal);if(this.state&integralui_core_1.IntegralUIObjectState.disabled)this.sliderBackgroundClass.push(this.options.currentStyle.slider.background.disabled);else if(this.state&integralui_core_1.IntegralUIObjectState.focused)this.sliderBackgroundClass.push(this.options.currentStyle.slider.background.focused);else if(this.state&integralui_core_1.IntegralUIObjectState.selected)this.sliderBackgroundClass.push(this.options.currentStyle.slider.background.selected);else if(this.state&integralui_core_1.IntegralUIObjectState.hovered)this.sliderBackgroundClass.push(this.options.currentStyle.slider.background.hovered)}};t.prototype.getSliderButtonClass=function(){return this.sliderButtonClass};t.prototype.updateSliderButtonClass=function(){this.sliderButtonClass.length=0;this.sliderButtonClass.push(this.sliderButtonClassName);if(this.options.currentStyle){this.sliderButtonClass.push(this.options.currentStyle.slider.button.normal);if(this.state&integralui_core_1.IntegralUIObjectState.disabled)this.sliderButtonClass.push(this.options.currentStyle.slider.button.disabled);else if(this.state&integralui_core_1.IntegralUIObjectState.focused)this.sliderButtonClass.push(this.options.currentStyle.slider.button.focused);else if(this.state&integralui_core_1.IntegralUIObjectState.selected)this.sliderButtonClass.push(this.options.currentStyle.slider.button.selected);else if(this.state&integralui_core_1.IntegralUIObjectState.hovered)this.sliderButtonClass.push(this.options.currentStyle.slider.button.hovered)}};t.prototype.getSliderBackgroundStyle=function(e){if(this.commonService.isString(e))return e;else if(e)return{disabled:this.commonService.isFieldAvailable(e.disabled,this.sliderBackgroundClassName+"-disabled"),focused:this.commonService.isFieldAvailable(e.focused,this.sliderBackgroundClassName+"-focused"),hovered:this.commonService.isFieldAvailable(e.hovered,this.sliderBackgroundClassName+"-hovered"),normal:this.commonService.isFieldAvailable(e.normal,this.sliderBackgroundClassName),selected:this.commonService.isFieldAvailable(e.selected,this.sliderBackgroundClassName+"-selected")};else return{disabled:this.defaultStyle.slider.background.disabled,focused:this.defaultStyle.slider.background.focused,hovered:this.defaultStyle.slider.background.hovered,normal:this.defaultStyle.slider.background.normal,selected:this.defaultStyle.slider.background.selected}};t.prototype.getSliderButtonStyle=function(e){if(this.commonService.isString(e))return e;else if(e)return{disabled:this.commonService.isFieldAvailable(e.disabled,this.sliderButtonClassName+"-disabled"),focused:this.commonService.isFieldAvailable(e.focused,this.sliderButtonClassName+"-focused"),hovered:this.commonService.isFieldAvailable(e.hovered,this.sliderButtonClassName+"-hovered"),normal:this.commonService.isFieldAvailable(e.normal,this.sliderButtonClassName),selected:this.commonService.isFieldAvailable(e.selected,this.sliderButtonClassName+"-selected")};else return{disabled:this.defaultStyle.slider.button.disabled,focused:this.defaultStyle.slider.button.focused,hovered:this.defaultStyle.slider.button.hovered,normal:this.defaultStyle.slider.button.normal,selected:this.defaultStyle.slider.button.selected}};t.prototype.getSliderStyle=function(e){if(this.commonService.isString(e))return e;else if(e)return{background:this.getSliderBackgroundStyle(e.background),button:this.getSliderButtonStyle(e.button)};else return{background:{disabled:this.defaultStyle.slider.background.disabled,focused:this.defaultStyle.slider.background.focused,hovered:this.defaultStyle.slider.background.hovered,normal:this.defaultStyle.slider.background.normal,selected:this.defaultStyle.slider.background.selected},button:{disabled:this.defaultStyle.slider.button.disabled,focused:this.defaultStyle.slider.button.focused,hovered:this.defaultStyle.slider.button.hovered,normal:this.defaultStyle.slider.button.normal,selected:this.defaultStyle.slider.button.selected}}};t.prototype.updateStyle=function(e){if(e)this.options.currentStyle={general:this.getGeneralStyle(e.general),content:this.getContentStyle(e.content),slider:this.getSliderStyle(e.slider)};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},content:{disabled:this.defaultStyle.content.disabled,focused:this.defaultStyle.content.focused,hovered:this.defaultStyle.content.hovered,normal:this.defaultStyle.content.normal,selected:this.defaultStyle.content.selected},slider:this.getSliderStyle()}};t.ɵfac=function(e){return new(e||t)(i0.ɵɵdirectiveInject(i0.ElementRef),i0.ɵɵdirectiveInject(i1.IntegralUICommonService))};t.ɵcmp=i0.ɵɵdefineComponent({type:t,selectors:[["iui-slider"]],viewQuery:function(e,t){if(1&e)i0.ɵɵviewQuery(_c0,!0);if(2&e){var i;i0.ɵɵqueryRefresh(i=i0.ɵɵloadQuery())&&(t.handleElem=i.first)}},hostBindings:function(e,t){if(1&e)i0.ɵɵlistener("mousemove",function(e){return t.onWindowMouseMove(e)},!1,i0.ɵɵresolveDocument)("mouseup",function(e){return t.onWindowMouseUp(e)},!1,i0.ɵɵresolveDocument)},inputs:{autoUpdate:"autoUpdate",controlStyle:"controlStyle",data:"data",enabled:"enabled",name:"name",size:"size",state:"state",value:"value",orientation:"orientation",min:"min",max:"max"},outputs:{valueChanged:"valueChanged",orientationChanged:"orientationChanged"},features:[i0.ɵɵProvidersFeature([{provide:forms_1.NG_VALUE_ACCESSOR,useExisting:core_1.forwardRef(function(){return t}),multi:!0}]),i0.ɵɵInheritDefinitionFeature],decls:5,vars:10,consts:[["draggable","true",3,"ngClass","ngStyle","dragstart","mouseenter","mouseleave","mousedown","mousemove","mouseup","DOMMouseScroll","mousewheel","touchend"],[2,"position","absolute",3,"ngClass","ngStyle"],["handle",""]],template:function(e,t){if(1&e){i0.ɵɵelementStart(0,"div",0);i0.ɵɵlistener("dragstart",function(e){return t.preventDragStart(e)})("mouseenter",function(e){return t.ctrlMouseEnter(e)})("mouseleave",function(e){return t.ctrlMouseLeave(e)})("mousedown",function(e){return t.ctrlMouseDown(e)})("mousemove",function(e){return t.ctrlMouseMove(e)})("mouseup",function(e){return t.ctrlMouseUp(e)})("DOMMouseScroll",function(e){return t.ctrlMouseWheel(e)})("mousewheel",function(e){return t.ctrlMouseWheel(e)})("touchend",function(e){return t.ctrlTouchEnd(e)});i0.ɵɵelement(1,"div",1);i0.ɵɵelement(2,"div",1);i0.ɵɵelement(3,"div",1,2);i0.ɵɵelementEnd()}if(2&e){i0.ɵɵproperty("ngClass",t.getControlClass())("ngStyle",t.getControlStyle());i0.ɵɵadvance(1);i0.ɵɵproperty("ngClass",t.getContentClass())("ngStyle",t.getSliderBackStyle());i0.ɵɵadvance(1);i0.ɵɵproperty("ngClass",t.getSliderBackgroundClass())("ngStyle",t.getSliderBackValueStyle())("@ctrlAnimation",t.allowAnimation&&t.animationState);i0.ɵɵadvance(1);i0.ɵɵproperty("ngClass",t.getSliderButtonClass())("ngStyle",t.getSliderValueStyle())("@ctrlAnimation",t.allowAnimation&&t.animationState)}},directives:[i2.NgClass,i2.NgStyle],encapsulation:2,data:{animation:[animations_1.trigger("ctrlAnimation",[animations_1.state("out",animations_1.style({opacity:"0.6"})),animations_1.state("in",animations_1.style({opacity:"1"})),animations_1.transition("out => in",animations_1.animate("175ms ease-in")),animations_1.transition("in => out",animations_1.animate("175ms ease-out"))])]}});return t}(integralui_core_1.IntegralUIBaseValueComponent);exports.IntegralUISlider=IntegralUISlider;