ng5-slider.js 110 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358
  1. import { __values, __extends } from 'tslib';
  2. import { Subject } from 'rxjs/Subject';
  3. import 'rxjs/Subscription';
  4. import { Renderer2, Directive, ElementRef, HostBinding, Component, ViewChild, HostListener, Input, EventEmitter, Output, ContentChild, ChangeDetectorRef, forwardRef, NgZone, NgModule } from '@angular/core';
  5. import { throttleTime, tap, distinctUntilChanged, filter } from 'rxjs/operators';
  6. import detectPassiveEvents from 'detect-passive-events';
  7. import { NG_VALUE_ACCESSOR } from '@angular/forms';
  8. import { CommonModule } from '@angular/common';
  9. var PointerType = {
  10. Min: 0,
  11. Max: 1,
  12. };
  13. PointerType[PointerType.Min] = "Min";
  14. PointerType[PointerType.Max] = "Max";
  15. var LabelType = {
  16. Low: 0,
  17. High: 1,
  18. Floor: 2,
  19. Ceil: 3,
  20. TickValue: 4,
  21. };
  22. LabelType[LabelType.Low] = "Low";
  23. LabelType[LabelType.High] = "High";
  24. LabelType[LabelType.Floor] = "Floor";
  25. LabelType[LabelType.Ceil] = "Ceil";
  26. LabelType[LabelType.TickValue] = "TickValue";
  27. var Options = /** @class */ (function () {
  28. function Options() {
  29. this.floor = 0;
  30. this.ceil = null;
  31. this.step = 1;
  32. this.minRange = null;
  33. this.maxRange = null;
  34. this.pushRange = false;
  35. this.minLimit = null;
  36. this.maxLimit = null;
  37. this.translate = null;
  38. this.combineLabels = null;
  39. this.getLegend = null;
  40. this.stepsArray = null;
  41. this.bindIndexForStepsArray = false;
  42. this.draggableRange = false;
  43. this.draggableRangeOnly = false;
  44. this.showSelectionBar = false;
  45. this.showSelectionBarEnd = false;
  46. this.showSelectionBarFromValue = null;
  47. this.showOuterSelectionBars = false;
  48. this.hidePointerLabels = false;
  49. this.hideLimitLabels = false;
  50. this.autoHideLimitLabels = true;
  51. this.readOnly = false;
  52. this.disabled = false;
  53. this.mouseEventsInterval = 50;
  54. this.touchEventsInterval = 50;
  55. this.inputEventsInterval = 100;
  56. this.outputEventsInterval = 100;
  57. this.showTicks = false;
  58. this.showTicksValues = false;
  59. this.tickStep = null;
  60. this.tickValueStep = 1;
  61. this.ticksArray = null;
  62. this.ticksTooltip = null;
  63. this.ticksValuesTooltip = null;
  64. this.vertical = false;
  65. this.getSelectionBarColor = null;
  66. this.getTickColor = null;
  67. this.getPointerColor = null;
  68. this.keyboardSupport = true;
  69. this.scale = 1;
  70. this.enforceStep = true;
  71. this.enforceRange = true;
  72. this.noSwitching = false;
  73. this.onlyBindHandles = false;
  74. this.rightToLeft = false;
  75. this.reversedControls = false;
  76. this.boundPointerLabels = true;
  77. this.logScale = false;
  78. this.customValueToPosition = null;
  79. this.customPositionToValue = null;
  80. this.precisionLimit = 12;
  81. this.selectionBarGradient = null;
  82. this.ariaLabel = null;
  83. this.ariaLabelledBy = null;
  84. this.ariaLabelHigh = null;
  85. this.ariaLabelledByHigh = null;
  86. this.handleDimension = null;
  87. this.barDimension = null;
  88. this.animate = true;
  89. }
  90. return Options;
  91. }());
  92. var ChangeContext = /** @class */ (function () {
  93. function ChangeContext() {
  94. }
  95. return ChangeContext;
  96. }());
  97. var ValueHelper = /** @class */ (function () {
  98. function ValueHelper() {
  99. }
  100. ValueHelper.isNullOrUndefined = function (value) {
  101. return value === undefined || value === null;
  102. };
  103. ValueHelper.linearValueToPosition = function (val, minVal, maxVal) {
  104. var range = maxVal - minVal;
  105. return (val - minVal) / range;
  106. };
  107. ValueHelper.logValueToPosition = function (val, minVal, maxVal) {
  108. val = Math.log(val);
  109. minVal = Math.log(minVal);
  110. maxVal = Math.log(maxVal);
  111. var range = maxVal - minVal;
  112. return (val - minVal) / range;
  113. };
  114. ValueHelper.linearPositionToValue = function (percent, minVal, maxVal) {
  115. return percent * (maxVal - minVal) + minVal;
  116. };
  117. ValueHelper.logPositionToValue = function (percent, minVal, maxVal) {
  118. minVal = Math.log(minVal);
  119. maxVal = Math.log(maxVal);
  120. var value = percent * (maxVal - minVal) + minVal;
  121. return Math.exp(value);
  122. };
  123. ValueHelper.findStepIndex = function (modelValue, stepsArray) {
  124. var differences = stepsArray.map(function (step) { return Math.abs(modelValue - step.value); });
  125. var minDifferenceIndex = 0;
  126. for (var index = 0; index < stepsArray.length; index++) {
  127. if (differences[index] !== differences[minDifferenceIndex] && differences[index] < differences[minDifferenceIndex]) {
  128. minDifferenceIndex = index;
  129. }
  130. }
  131. return minDifferenceIndex;
  132. };
  133. return ValueHelper;
  134. }());
  135. var CompatibilityHelper = /** @class */ (function () {
  136. function CompatibilityHelper() {
  137. }
  138. CompatibilityHelper.isTouchEvent = function (event) {
  139. if (((window)).TouchEvent !== undefined) {
  140. return event instanceof TouchEvent;
  141. }
  142. return event.touches !== undefined;
  143. };
  144. CompatibilityHelper.isResizeObserverAvailable = function () {
  145. return ((window)).ResizeObserver !== undefined;
  146. };
  147. return CompatibilityHelper;
  148. }());
  149. var MathHelper = /** @class */ (function () {
  150. function MathHelper() {
  151. }
  152. MathHelper.roundToPrecisionLimit = function (value, precisionLimit) {
  153. return +(value.toPrecision(precisionLimit));
  154. };
  155. MathHelper.clampToRange = function (value, floor, ceil) {
  156. return Math.min(Math.max(value, floor), ceil);
  157. };
  158. return MathHelper;
  159. }());
  160. var EventListener = /** @class */ (function () {
  161. function EventListener() {
  162. this.eventName = null;
  163. this.events = null;
  164. this.eventsSubscription = null;
  165. this.teardownCallback = null;
  166. }
  167. return EventListener;
  168. }());
  169. var EventListenerHelper = /** @class */ (function () {
  170. function EventListenerHelper(renderer) {
  171. this.renderer = renderer;
  172. }
  173. EventListenerHelper.prototype.attachPassiveEventListener = function (nativeElement, eventName, callback, throttleInterval) {
  174. if (detectPassiveEvents.hasSupport !== true) {
  175. return this.attachEventListener(nativeElement, eventName, callback, throttleInterval);
  176. }
  177. var listener = new EventListener();
  178. listener.eventName = eventName;
  179. listener.events = new Subject();
  180. var observerCallback = function (event) {
  181. listener.events.next(event);
  182. };
  183. nativeElement.addEventListener(eventName, observerCallback, { passive: true, capture: false });
  184. listener.teardownCallback = function () {
  185. nativeElement.removeEventListener(eventName, observerCallback, { passive: true, capture: false });
  186. };
  187. listener.eventsSubscription = listener.events
  188. .pipe((!ValueHelper.isNullOrUndefined(throttleInterval))
  189. ? throttleTime(throttleInterval, undefined, { leading: true, trailing: true })
  190. : tap(function () { }))
  191. .subscribe(function (event) {
  192. callback(event);
  193. });
  194. return listener;
  195. };
  196. EventListenerHelper.prototype.detachEventListener = function (eventListener) {
  197. if (!ValueHelper.isNullOrUndefined(eventListener.eventsSubscription)) {
  198. eventListener.eventsSubscription.unsubscribe();
  199. eventListener.eventsSubscription = null;
  200. }
  201. if (!ValueHelper.isNullOrUndefined(eventListener.events)) {
  202. eventListener.events.complete();
  203. eventListener.events = null;
  204. }
  205. if (!ValueHelper.isNullOrUndefined(eventListener.teardownCallback)) {
  206. eventListener.teardownCallback();
  207. eventListener.teardownCallback = null;
  208. }
  209. };
  210. EventListenerHelper.prototype.attachEventListener = function (nativeElement, eventName, callback, throttleInterval) {
  211. var listener = new EventListener();
  212. listener.eventName = eventName;
  213. listener.events = new Subject();
  214. var observerCallback = function (event) {
  215. listener.events.next(event);
  216. };
  217. listener.teardownCallback = this.renderer.listen(nativeElement, eventName, observerCallback);
  218. listener.eventsSubscription = listener.events
  219. .pipe((!ValueHelper.isNullOrUndefined(throttleInterval))
  220. ? throttleTime(throttleInterval, undefined, { leading: true, trailing: true })
  221. : tap(function () { }))
  222. .subscribe(function (event) { callback(event); });
  223. return listener;
  224. };
  225. return EventListenerHelper;
  226. }());
  227. var SliderElementDirective = /** @class */ (function () {
  228. function SliderElementDirective(elemRef, renderer) {
  229. this.elemRef = elemRef;
  230. this.renderer = renderer;
  231. this._position = 0;
  232. this._dimension = 0;
  233. this._alwaysHide = false;
  234. this._vertical = false;
  235. this._scale = 1;
  236. this.opacity = 1;
  237. this.visibility = 'visible';
  238. this.left = '';
  239. this.bottom = '';
  240. this.height = '';
  241. this.width = '';
  242. this.eventListeners = [];
  243. this.eventListenerHelper = new EventListenerHelper(this.renderer);
  244. }
  245. Object.defineProperty(SliderElementDirective.prototype, "position", {
  246. get: function () {
  247. return this._position;
  248. },
  249. enumerable: true,
  250. configurable: true
  251. });
  252. Object.defineProperty(SliderElementDirective.prototype, "dimension", {
  253. get: function () {
  254. return this._dimension;
  255. },
  256. enumerable: true,
  257. configurable: true
  258. });
  259. Object.defineProperty(SliderElementDirective.prototype, "alwaysHide", {
  260. get: function () {
  261. return this._alwaysHide;
  262. },
  263. enumerable: true,
  264. configurable: true
  265. });
  266. Object.defineProperty(SliderElementDirective.prototype, "vertical", {
  267. get: function () {
  268. return this._vertical;
  269. },
  270. enumerable: true,
  271. configurable: true
  272. });
  273. Object.defineProperty(SliderElementDirective.prototype, "scale", {
  274. get: function () {
  275. return this._scale;
  276. },
  277. enumerable: true,
  278. configurable: true
  279. });
  280. SliderElementDirective.prototype.setAlwaysHide = function (hide) {
  281. this._alwaysHide = hide;
  282. if (hide) {
  283. this.visibility = 'hidden';
  284. }
  285. else {
  286. this.visibility = 'visible';
  287. }
  288. };
  289. SliderElementDirective.prototype.hide = function () {
  290. this.opacity = 0;
  291. };
  292. SliderElementDirective.prototype.show = function () {
  293. if (this.alwaysHide) {
  294. return;
  295. }
  296. this.opacity = 1;
  297. };
  298. SliderElementDirective.prototype.isVisible = function () {
  299. if (this.alwaysHide) {
  300. return false;
  301. }
  302. return this.opacity !== 0;
  303. };
  304. SliderElementDirective.prototype.setVertical = function (vertical) {
  305. this._vertical = vertical;
  306. if (this._vertical) {
  307. this.left = '';
  308. this.width = '';
  309. }
  310. else {
  311. this.bottom = '';
  312. this.height = '';
  313. }
  314. };
  315. SliderElementDirective.prototype.setScale = function (scale) {
  316. this._scale = scale;
  317. };
  318. SliderElementDirective.prototype.setPosition = function (pos) {
  319. this._position = pos;
  320. if (this._vertical) {
  321. this.bottom = Math.round(pos) + 'px';
  322. }
  323. else {
  324. this.left = Math.round(pos) + 'px';
  325. }
  326. };
  327. SliderElementDirective.prototype.calculateDimension = function () {
  328. var val = this.getBoundingClientRect();
  329. if (this.vertical) {
  330. this._dimension = (val.bottom - val.top) * this.scale;
  331. }
  332. else {
  333. this._dimension = (val.right - val.left) * this.scale;
  334. }
  335. };
  336. SliderElementDirective.prototype.setDimension = function (dim) {
  337. this._dimension = dim;
  338. if (this._vertical) {
  339. this.height = Math.round(dim) + 'px';
  340. }
  341. else {
  342. this.width = Math.round(dim) + 'px';
  343. }
  344. };
  345. SliderElementDirective.prototype.getBoundingClientRect = function () {
  346. return this.elemRef.nativeElement.getBoundingClientRect();
  347. };
  348. SliderElementDirective.prototype.on = function (eventName, callback, debounceInterval) {
  349. var listener = this.eventListenerHelper.attachEventListener(this.elemRef.nativeElement, eventName, callback, debounceInterval);
  350. this.eventListeners.push(listener);
  351. };
  352. SliderElementDirective.prototype.onPassive = function (eventName, callback, debounceInterval) {
  353. var listener = this.eventListenerHelper.attachPassiveEventListener(this.elemRef.nativeElement, eventName, callback, debounceInterval);
  354. this.eventListeners.push(listener);
  355. };
  356. SliderElementDirective.prototype.off = function (eventName) {
  357. var listenersToKeep;
  358. var listenersToRemove;
  359. if (!ValueHelper.isNullOrUndefined(eventName)) {
  360. listenersToKeep = this.eventListeners.filter(function (event) { return event.eventName !== eventName; });
  361. listenersToRemove = this.eventListeners.filter(function (event) { return event.eventName === eventName; });
  362. }
  363. else {
  364. listenersToKeep = [];
  365. listenersToRemove = this.eventListeners;
  366. }
  367. try {
  368. for (var listenersToRemove_1 = __values(listenersToRemove), listenersToRemove_1_1 = listenersToRemove_1.next(); !listenersToRemove_1_1.done; listenersToRemove_1_1 = listenersToRemove_1.next()) {
  369. var listener = listenersToRemove_1_1.value;
  370. this.eventListenerHelper.detachEventListener(listener);
  371. }
  372. }
  373. catch (e_1_1) { e_1 = { error: e_1_1 }; }
  374. finally {
  375. try {
  376. if (listenersToRemove_1_1 && !listenersToRemove_1_1.done && (_a = listenersToRemove_1.return)) _a.call(listenersToRemove_1);
  377. }
  378. finally { if (e_1) throw e_1.error; }
  379. }
  380. this.eventListeners = listenersToKeep;
  381. var e_1, _a;
  382. };
  383. return SliderElementDirective;
  384. }());
  385. SliderElementDirective.decorators = [
  386. { type: Directive, args: [{
  387. selector: '[ng5SliderElement]'
  388. },] },
  389. ];
  390. SliderElementDirective.ctorParameters = function () { return [
  391. { type: ElementRef, },
  392. { type: Renderer2, },
  393. ]; };
  394. SliderElementDirective.propDecorators = {
  395. "opacity": [{ type: HostBinding, args: ['style.opacity',] },],
  396. "visibility": [{ type: HostBinding, args: ['style.visibility',] },],
  397. "left": [{ type: HostBinding, args: ['style.left',] },],
  398. "bottom": [{ type: HostBinding, args: ['style.bottom',] },],
  399. "height": [{ type: HostBinding, args: ['style.height',] },],
  400. "width": [{ type: HostBinding, args: ['style.width',] },],
  401. };
  402. var SliderHandleDirective = /** @class */ (function (_super) {
  403. __extends(SliderHandleDirective, _super);
  404. function SliderHandleDirective(elemRef, renderer) {
  405. var _this = _super.call(this, elemRef, renderer) || this;
  406. _this.active = false;
  407. _this.role = '';
  408. _this.tabindex = '';
  409. _this.ariaOrientation = '';
  410. _this.ariaLabel = '';
  411. _this.ariaLabelledBy = '';
  412. _this.ariaValueNow = '';
  413. _this.ariaValueText = '';
  414. _this.ariaValueMin = '';
  415. _this.ariaValueMax = '';
  416. return _this;
  417. }
  418. SliderHandleDirective.prototype.focus = function () {
  419. this.elemRef.nativeElement.focus();
  420. };
  421. return SliderHandleDirective;
  422. }(SliderElementDirective));
  423. SliderHandleDirective.decorators = [
  424. { type: Directive, args: [{
  425. selector: '[ng5SliderHandle]'
  426. },] },
  427. ];
  428. SliderHandleDirective.ctorParameters = function () { return [
  429. { type: ElementRef, },
  430. { type: Renderer2, },
  431. ]; };
  432. SliderHandleDirective.propDecorators = {
  433. "active": [{ type: HostBinding, args: ['class.ng5-slider-active',] },],
  434. "role": [{ type: HostBinding, args: ['attr.role',] },],
  435. "tabindex": [{ type: HostBinding, args: ['attr.tabindex',] },],
  436. "ariaOrientation": [{ type: HostBinding, args: ['attr.aria-orientation',] },],
  437. "ariaLabel": [{ type: HostBinding, args: ['attr.aria-label',] },],
  438. "ariaLabelledBy": [{ type: HostBinding, args: ['attr.aria-labelledby',] },],
  439. "ariaValueNow": [{ type: HostBinding, args: ['attr.aria-valuenow',] },],
  440. "ariaValueText": [{ type: HostBinding, args: ['attr.aria-valuetext',] },],
  441. "ariaValueMin": [{ type: HostBinding, args: ['attr.aria-valuemin',] },],
  442. "ariaValueMax": [{ type: HostBinding, args: ['attr.aria-valuemax',] },],
  443. };
  444. var SliderLabelDirective = /** @class */ (function (_super) {
  445. __extends(SliderLabelDirective, _super);
  446. function SliderLabelDirective(elemRef, renderer) {
  447. var _this = _super.call(this, elemRef, renderer) || this;
  448. _this._value = null;
  449. return _this;
  450. }
  451. Object.defineProperty(SliderLabelDirective.prototype, "value", {
  452. get: function () {
  453. return this._value;
  454. },
  455. enumerable: true,
  456. configurable: true
  457. });
  458. SliderLabelDirective.prototype.setValue = function (value) {
  459. var recalculateDimension = false;
  460. if (!this.alwaysHide &&
  461. (ValueHelper.isNullOrUndefined(this.value) ||
  462. this.value.length !== value.length ||
  463. (this.value.length > 0 && this.dimension === 0))) {
  464. recalculateDimension = true;
  465. }
  466. this._value = value;
  467. this.elemRef.nativeElement.innerHTML = value;
  468. if (recalculateDimension) {
  469. this.calculateDimension();
  470. }
  471. };
  472. return SliderLabelDirective;
  473. }(SliderElementDirective));
  474. SliderLabelDirective.decorators = [
  475. { type: Directive, args: [{
  476. selector: '[ng5SliderLabel]'
  477. },] },
  478. ];
  479. SliderLabelDirective.ctorParameters = function () { return [
  480. { type: ElementRef, },
  481. { type: Renderer2, },
  482. ]; };
  483. var Tick = /** @class */ (function () {
  484. function Tick() {
  485. this.selected = false;
  486. this.style = {};
  487. this.tooltip = null;
  488. this.tooltipPlacement = null;
  489. this.value = null;
  490. this.valueTooltip = null;
  491. this.valueTooltipPlacement = null;
  492. this.legend = null;
  493. }
  494. return Tick;
  495. }());
  496. var Dragging = /** @class */ (function () {
  497. function Dragging() {
  498. this.active = false;
  499. this.value = 0;
  500. this.difference = 0;
  501. this.position = 0;
  502. this.lowLimit = 0;
  503. this.highLimit = 0;
  504. }
  505. return Dragging;
  506. }());
  507. var ModelValues = /** @class */ (function () {
  508. function ModelValues() {
  509. }
  510. ModelValues.compare = function (x, y) {
  511. if (ValueHelper.isNullOrUndefined(x) && ValueHelper.isNullOrUndefined(y)) {
  512. return false;
  513. }
  514. if (ValueHelper.isNullOrUndefined(x) !== ValueHelper.isNullOrUndefined(y)) {
  515. return false;
  516. }
  517. return x.value === y.value && x.highValue === y.highValue;
  518. };
  519. return ModelValues;
  520. }());
  521. var ModelChange = /** @class */ (function (_super) {
  522. __extends(ModelChange, _super);
  523. function ModelChange() {
  524. return _super !== null && _super.apply(this, arguments) || this;
  525. }
  526. ModelChange.compare = function (x, y) {
  527. if (ValueHelper.isNullOrUndefined(x) && ValueHelper.isNullOrUndefined(y)) {
  528. return false;
  529. }
  530. if (ValueHelper.isNullOrUndefined(x) !== ValueHelper.isNullOrUndefined(y)) {
  531. return false;
  532. }
  533. return x.value === y.value &&
  534. x.highValue === y.highValue &&
  535. x.forceChange === y.forceChange;
  536. };
  537. return ModelChange;
  538. }(ModelValues));
  539. var NG5_SLIDER_CONTROL_VALUE_ACCESSOR = {
  540. provide: NG_VALUE_ACCESSOR,
  541. useExisting: forwardRef(function () { return SliderComponent; }),
  542. multi: true,
  543. };
  544. var SliderComponent = /** @class */ (function () {
  545. function SliderComponent(renderer, elementRef, changeDetectionRef, zone) {
  546. this.renderer = renderer;
  547. this.elementRef = elementRef;
  548. this.changeDetectionRef = changeDetectionRef;
  549. this.zone = zone;
  550. this.value = null;
  551. this.valueChange = new EventEmitter();
  552. this.highValue = null;
  553. this.highValueChange = new EventEmitter();
  554. this.options = new Options();
  555. this.userChangeStart = new EventEmitter();
  556. this.userChange = new EventEmitter();
  557. this.userChangeEnd = new EventEmitter();
  558. this.initHasRun = false;
  559. this.inputModelChangeSubject = new Subject();
  560. this.inputModelChangeSubscription = null;
  561. this.outputModelChangeSubject = new Subject();
  562. this.outputModelChangeSubscription = null;
  563. this.viewLowValue = null;
  564. this.viewHighValue = null;
  565. this.viewOptions = new Options();
  566. this.handleHalfDimension = 0;
  567. this.maxHandlePosition = 0;
  568. this.currentTrackingPointer = null;
  569. this.currentFocusPointer = null;
  570. this.firstKeyDown = false;
  571. this.touchId = null;
  572. this.dragging = new Dragging();
  573. this.sliderElementVerticalClass = false;
  574. this.sliderElementAnimateClass = false;
  575. this.sliderElementDisabledAttr = null;
  576. this.barStyle = {};
  577. this.minPointerStyle = {};
  578. this.maxPointerStyle = {};
  579. this.fullBarTransparentClass = false;
  580. this.selectionBarDraggableClass = false;
  581. this.ticksUnderValuesClass = false;
  582. this.intermediateTicks = false;
  583. this.ticks = [];
  584. this.eventListenerHelper = null;
  585. this.onMoveEventListener = null;
  586. this.onEndEventListener = null;
  587. this.resizeObserver = null;
  588. this.onTouchedCallback = null;
  589. this.onChangeCallback = null;
  590. this.eventListenerHelper = new EventListenerHelper(this.renderer);
  591. }
  592. Object.defineProperty(SliderComponent.prototype, "manualRefresh", {
  593. set: function (manualRefresh) {
  594. var _this = this;
  595. this.unsubscribeManualRefresh();
  596. this.manualRefreshSubscription = manualRefresh.subscribe(function () {
  597. setTimeout(function () { return _this.calculateViewDimensionsAndDetectChanges(); });
  598. });
  599. },
  600. enumerable: true,
  601. configurable: true
  602. });
  603. Object.defineProperty(SliderComponent.prototype, "triggerFocus", {
  604. set: function (triggerFocus) {
  605. var _this = this;
  606. this.unsubscribeTriggerFocus();
  607. this.triggerFocusSubscription = triggerFocus.subscribe(function (pointerType) {
  608. _this.focusPointer(pointerType);
  609. });
  610. },
  611. enumerable: true,
  612. configurable: true
  613. });
  614. Object.defineProperty(SliderComponent.prototype, "range", {
  615. get: function () {
  616. return !ValueHelper.isNullOrUndefined(this.value) && !ValueHelper.isNullOrUndefined(this.highValue);
  617. },
  618. enumerable: true,
  619. configurable: true
  620. });
  621. Object.defineProperty(SliderComponent.prototype, "showTicks", {
  622. get: function () {
  623. return this.viewOptions.showTicks;
  624. },
  625. enumerable: true,
  626. configurable: true
  627. });
  628. SliderComponent.prototype.ngOnInit = function () {
  629. this.viewOptions = new Options();
  630. Object.assign(this.viewOptions, this.options);
  631. this.updateDisabledState();
  632. this.updateVerticalState();
  633. };
  634. SliderComponent.prototype.ngAfterViewInit = function () {
  635. this.applyOptions();
  636. this.subscribeInputModelChangeSubject(this.viewOptions.inputEventsInterval);
  637. this.subscribeOutputModelChangeSubject(this.viewOptions.outputEventsInterval);
  638. this.renormaliseModelValues();
  639. this.viewLowValue = this.modelValueToViewValue(this.value);
  640. if (this.range) {
  641. this.viewHighValue = this.modelValueToViewValue(this.highValue);
  642. }
  643. else {
  644. this.viewHighValue = null;
  645. }
  646. this.updateVerticalState();
  647. this.manageElementsStyle();
  648. this.updateDisabledState();
  649. this.calculateViewDimensions();
  650. this.addAccessibility();
  651. this.updateCeilLabel();
  652. this.updateFloorLabel();
  653. this.initHandles();
  654. this.manageEventsBindings();
  655. this.subscribeResizeObserver();
  656. this.initHasRun = true;
  657. this.changeDetectionRef.detectChanges();
  658. };
  659. SliderComponent.prototype.ngOnChanges = function (changes) {
  660. if (!ValueHelper.isNullOrUndefined(changes["options"])) {
  661. this.onChangeOptions();
  662. }
  663. if (!ValueHelper.isNullOrUndefined(changes["value"]) ||
  664. !ValueHelper.isNullOrUndefined(changes["highValue"])) {
  665. this.inputModelChangeSubject.next({
  666. value: this.value,
  667. highValue: this.highValue,
  668. forceChange: false,
  669. internalChange: false
  670. });
  671. }
  672. };
  673. SliderComponent.prototype.ngOnDestroy = function () {
  674. this.unbindEvents();
  675. this.unsubscribeResizeObserver();
  676. this.unsubscribeInputModelChangeSubject();
  677. this.unsubscribeOutputModelChangeSubject();
  678. this.unsubscribeManualRefresh();
  679. this.unsubscribeTriggerFocus();
  680. };
  681. SliderComponent.prototype.writeValue = function (obj) {
  682. if (obj instanceof Array) {
  683. this.value = obj[0];
  684. this.highValue = obj[1];
  685. }
  686. else {
  687. this.value = obj;
  688. }
  689. this.inputModelChangeSubject.next({
  690. value: this.value,
  691. highValue: this.highValue,
  692. forceChange: false,
  693. internalChange: false
  694. });
  695. };
  696. SliderComponent.prototype.registerOnChange = function (onChangeCallback) {
  697. this.onChangeCallback = onChangeCallback;
  698. };
  699. SliderComponent.prototype.registerOnTouched = function (onTouchedCallback) {
  700. this.onTouchedCallback = onTouchedCallback;
  701. };
  702. SliderComponent.prototype.setDisabledState = function (isDisabled) {
  703. this.viewOptions.disabled = isDisabled;
  704. this.updateDisabledState();
  705. };
  706. SliderComponent.prototype.onResize = function (event) {
  707. this.calculateViewDimensionsAndDetectChanges();
  708. };
  709. SliderComponent.prototype.subscribeInputModelChangeSubject = function (interval) {
  710. var _this = this;
  711. this.inputModelChangeSubscription = this.inputModelChangeSubject
  712. .pipe(distinctUntilChanged(ModelChange.compare), filter(function (modelChange) { return !modelChange.forceChange && !modelChange.internalChange; }), (!ValueHelper.isNullOrUndefined(interval))
  713. ? throttleTime(interval, undefined, { leading: true, trailing: true })
  714. : tap(function () { }))
  715. .subscribe(function (modelChange) { return _this.applyInputModelChange(modelChange); });
  716. };
  717. SliderComponent.prototype.subscribeOutputModelChangeSubject = function (interval) {
  718. var _this = this;
  719. this.outputModelChangeSubscription = this.outputModelChangeSubject
  720. .pipe(distinctUntilChanged(ModelChange.compare), (!ValueHelper.isNullOrUndefined(interval))
  721. ? throttleTime(interval, undefined, { leading: true, trailing: true })
  722. : tap(function () { }))
  723. .subscribe(function (modelChange) { return _this.publishOutputModelChange(modelChange); });
  724. };
  725. SliderComponent.prototype.subscribeResizeObserver = function () {
  726. var _this = this;
  727. if (CompatibilityHelper.isResizeObserverAvailable()) {
  728. this.resizeObserver = new ResizeObserver(function () { return _this.calculateViewDimensionsAndDetectChanges(); });
  729. this.resizeObserver.observe(this.elementRef.nativeElement);
  730. }
  731. };
  732. SliderComponent.prototype.unsubscribeResizeObserver = function () {
  733. if (CompatibilityHelper.isResizeObserverAvailable() && this.resizeObserver !== null) {
  734. this.resizeObserver.disconnect();
  735. this.resizeObserver = null;
  736. }
  737. };
  738. SliderComponent.prototype.unsubscribeOnMove = function () {
  739. if (!ValueHelper.isNullOrUndefined(this.onMoveEventListener)) {
  740. this.eventListenerHelper.detachEventListener(this.onMoveEventListener);
  741. this.onMoveEventListener = null;
  742. }
  743. };
  744. SliderComponent.prototype.unsubscribeOnEnd = function () {
  745. if (!ValueHelper.isNullOrUndefined(this.onEndEventListener)) {
  746. this.eventListenerHelper.detachEventListener(this.onEndEventListener);
  747. this.onEndEventListener = null;
  748. }
  749. };
  750. SliderComponent.prototype.unsubscribeInputModelChangeSubject = function () {
  751. if (!ValueHelper.isNullOrUndefined(this.inputModelChangeSubscription)) {
  752. this.inputModelChangeSubscription.unsubscribe();
  753. this.inputModelChangeSubscription = null;
  754. }
  755. };
  756. SliderComponent.prototype.unsubscribeOutputModelChangeSubject = function () {
  757. if (!ValueHelper.isNullOrUndefined(this.outputModelChangeSubscription)) {
  758. this.outputModelChangeSubscription.unsubscribe();
  759. this.outputModelChangeSubscription = null;
  760. }
  761. };
  762. SliderComponent.prototype.unsubscribeManualRefresh = function () {
  763. if (!ValueHelper.isNullOrUndefined(this.manualRefreshSubscription)) {
  764. this.manualRefreshSubscription.unsubscribe();
  765. this.manualRefreshSubscription = null;
  766. }
  767. };
  768. SliderComponent.prototype.unsubscribeTriggerFocus = function () {
  769. if (!ValueHelper.isNullOrUndefined(this.triggerFocusSubscription)) {
  770. this.triggerFocusSubscription.unsubscribe();
  771. this.triggerFocusSubscription = null;
  772. }
  773. };
  774. SliderComponent.prototype.getPointerElement = function (pointerType) {
  775. if (pointerType === PointerType.Min) {
  776. return this.minHandleElement;
  777. }
  778. else if (pointerType === PointerType.Max) {
  779. return this.maxHandleElement;
  780. }
  781. return null;
  782. };
  783. SliderComponent.prototype.getCurrentTrackingValue = function () {
  784. if (this.currentTrackingPointer === PointerType.Min) {
  785. return this.viewLowValue;
  786. }
  787. else if (this.currentTrackingPointer === PointerType.Max) {
  788. return this.viewHighValue;
  789. }
  790. return null;
  791. };
  792. SliderComponent.prototype.modelValueToViewValue = function (modelValue) {
  793. if (ValueHelper.isNullOrUndefined(modelValue)) {
  794. return NaN;
  795. }
  796. if (!ValueHelper.isNullOrUndefined(this.viewOptions.stepsArray) && !this.viewOptions.bindIndexForStepsArray) {
  797. return ValueHelper.findStepIndex(+modelValue, this.viewOptions.stepsArray);
  798. }
  799. return +modelValue;
  800. };
  801. SliderComponent.prototype.viewValueToModelValue = function (viewValue) {
  802. if (!ValueHelper.isNullOrUndefined(this.viewOptions.stepsArray) && !this.viewOptions.bindIndexForStepsArray) {
  803. return this.getStepValue(viewValue);
  804. }
  805. return viewValue;
  806. };
  807. SliderComponent.prototype.getStepValue = function (sliderValue) {
  808. var step = this.viewOptions.stepsArray[sliderValue];
  809. return (!ValueHelper.isNullOrUndefined(step)) ? step.value : NaN;
  810. };
  811. SliderComponent.prototype.applyViewChange = function () {
  812. this.value = this.viewValueToModelValue(this.viewLowValue);
  813. if (this.range) {
  814. this.highValue = this.viewValueToModelValue(this.viewHighValue);
  815. }
  816. this.outputModelChangeSubject.next({
  817. value: this.value,
  818. highValue: this.highValue,
  819. userEventInitiated: true,
  820. forceChange: false
  821. });
  822. this.inputModelChangeSubject.next({
  823. value: this.value,
  824. highValue: this.highValue,
  825. forceChange: false,
  826. internalChange: true
  827. });
  828. };
  829. SliderComponent.prototype.applyInputModelChange = function (modelChange) {
  830. var normalisedModelChange = this.normaliseModelValues(modelChange);
  831. var normalisationChange = !ModelValues.compare(modelChange, normalisedModelChange);
  832. if (normalisationChange) {
  833. this.value = normalisedModelChange.value;
  834. this.highValue = normalisedModelChange.highValue;
  835. }
  836. this.viewLowValue = this.modelValueToViewValue(normalisedModelChange.value);
  837. if (this.range) {
  838. this.viewHighValue = this.modelValueToViewValue(normalisedModelChange.highValue);
  839. }
  840. else {
  841. this.viewHighValue = null;
  842. }
  843. this.updateLowHandle(this.valueToPosition(this.viewLowValue));
  844. if (this.range) {
  845. this.updateHighHandle(this.valueToPosition(this.viewHighValue));
  846. }
  847. this.updateSelectionBar();
  848. this.updateTicksScale();
  849. this.updateAriaAttributes();
  850. if (this.range) {
  851. this.updateCombinedLabel();
  852. }
  853. this.outputModelChangeSubject.next({
  854. value: normalisedModelChange.value,
  855. highValue: normalisedModelChange.highValue,
  856. forceChange: normalisationChange,
  857. userEventInitiated: false
  858. });
  859. };
  860. SliderComponent.prototype.publishOutputModelChange = function (modelChange) {
  861. var _this = this;
  862. var emitOutputs = function () {
  863. _this.valueChange.emit(modelChange.value);
  864. if (_this.range) {
  865. _this.highValueChange.emit(modelChange.highValue);
  866. }
  867. if (!ValueHelper.isNullOrUndefined(_this.onChangeCallback)) {
  868. if (_this.range) {
  869. _this.onChangeCallback([modelChange.value, modelChange.highValue]);
  870. }
  871. else {
  872. _this.onChangeCallback(modelChange.value);
  873. }
  874. }
  875. if (!ValueHelper.isNullOrUndefined(_this.onTouchedCallback)) {
  876. if (_this.range) {
  877. _this.onTouchedCallback([modelChange.value, modelChange.highValue]);
  878. }
  879. else {
  880. _this.onTouchedCallback(modelChange.value);
  881. }
  882. }
  883. };
  884. if (modelChange.userEventInitiated) {
  885. emitOutputs();
  886. this.userChange.emit(this.getChangeContext());
  887. }
  888. else {
  889. setTimeout(function () { emitOutputs(); });
  890. }
  891. };
  892. SliderComponent.prototype.normaliseModelValues = function (input) {
  893. var normalisedInput = new ModelValues();
  894. normalisedInput.value = input.value;
  895. normalisedInput.highValue = input.highValue;
  896. if (this.viewOptions.enforceStep) {
  897. normalisedInput.value = this.roundStep(normalisedInput.value);
  898. if (this.range) {
  899. normalisedInput.highValue = this.roundStep(normalisedInput.highValue);
  900. }
  901. }
  902. if (!ValueHelper.isNullOrUndefined(this.viewOptions.stepsArray) || !this.viewOptions.enforceRange) {
  903. return normalisedInput;
  904. }
  905. normalisedInput.value = MathHelper.clampToRange(normalisedInput.value, this.viewOptions.floor, this.viewOptions.ceil);
  906. if (this.range) {
  907. normalisedInput.highValue = MathHelper.clampToRange(normalisedInput.highValue, this.viewOptions.floor, this.viewOptions.ceil);
  908. }
  909. if (this.range && input.value > input.highValue) {
  910. if (this.viewOptions.noSwitching) {
  911. normalisedInput.value = normalisedInput.highValue;
  912. }
  913. else {
  914. var tempValue = input.value;
  915. normalisedInput.value = input.highValue;
  916. normalisedInput.highValue = tempValue;
  917. }
  918. }
  919. return normalisedInput;
  920. };
  921. SliderComponent.prototype.renormaliseModelValues = function () {
  922. var previousModelValues = {
  923. value: this.value,
  924. highValue: this.highValue
  925. };
  926. var normalisedModelValues = this.normaliseModelValues(previousModelValues);
  927. if (!ModelValues.compare(normalisedModelValues, previousModelValues)) {
  928. this.value = normalisedModelValues.value;
  929. this.highValue = normalisedModelValues.highValue;
  930. this.outputModelChangeSubject.next({
  931. value: this.value,
  932. highValue: this.highValue,
  933. forceChange: true,
  934. userEventInitiated: false
  935. });
  936. }
  937. };
  938. SliderComponent.prototype.onChangeOptions = function () {
  939. if (!this.initHasRun) {
  940. return;
  941. }
  942. var previousInputEventsInterval = this.viewOptions.inputEventsInterval;
  943. var previousOutputEventsInterval = this.viewOptions.outputEventsInterval;
  944. this.applyOptions();
  945. if (previousInputEventsInterval !== this.viewOptions.inputEventsInterval) {
  946. this.unsubscribeInputModelChangeSubject();
  947. this.subscribeInputModelChangeSubject(this.viewOptions.inputEventsInterval);
  948. }
  949. if (previousOutputEventsInterval !== this.viewOptions.outputEventsInterval) {
  950. this.unsubscribeInputModelChangeSubject();
  951. this.subscribeInputModelChangeSubject(this.viewOptions.outputEventsInterval);
  952. }
  953. this.renormaliseModelValues();
  954. this.viewLowValue = this.modelValueToViewValue(this.value);
  955. if (this.range) {
  956. this.viewHighValue = this.modelValueToViewValue(this.highValue);
  957. }
  958. else {
  959. this.viewHighValue = null;
  960. }
  961. this.resetSlider();
  962. };
  963. SliderComponent.prototype.applyOptions = function () {
  964. this.viewOptions = new Options();
  965. Object.assign(this.viewOptions, this.options);
  966. this.viewOptions.draggableRange = this.range && this.viewOptions.draggableRange;
  967. this.viewOptions.draggableRangeOnly = this.range && this.viewOptions.draggableRangeOnly;
  968. if (this.viewOptions.draggableRangeOnly) {
  969. this.viewOptions.draggableRange = true;
  970. }
  971. this.viewOptions.showTicks = this.viewOptions.showTicks ||
  972. this.viewOptions.showTicksValues ||
  973. !ValueHelper.isNullOrUndefined(this.viewOptions.ticksArray);
  974. if (this.viewOptions.showTicks &&
  975. (!ValueHelper.isNullOrUndefined(this.viewOptions.tickStep) || !ValueHelper.isNullOrUndefined(this.viewOptions.ticksArray))) {
  976. this.intermediateTicks = true;
  977. }
  978. this.viewOptions.showSelectionBar = this.viewOptions.showSelectionBar ||
  979. this.viewOptions.showSelectionBarEnd ||
  980. !ValueHelper.isNullOrUndefined(this.viewOptions.showSelectionBarFromValue);
  981. if (!ValueHelper.isNullOrUndefined(this.viewOptions.stepsArray)) {
  982. this.applyStepsArrayOptions();
  983. }
  984. else {
  985. this.applyFloorCeilOptions();
  986. }
  987. if (ValueHelper.isNullOrUndefined(this.viewOptions.combineLabels)) {
  988. this.viewOptions.combineLabels = function (minValue, maxValue) {
  989. return minValue + ' - ' + maxValue;
  990. };
  991. }
  992. if (this.viewOptions.logScale && this.viewOptions.floor === 0) {
  993. throw Error('Can\'t use floor=0 with logarithmic scale');
  994. }
  995. };
  996. SliderComponent.prototype.applyStepsArrayOptions = function () {
  997. var _this = this;
  998. this.viewOptions.floor = 0;
  999. this.viewOptions.ceil = this.viewOptions.stepsArray.length - 1;
  1000. this.viewOptions.step = 1;
  1001. if (ValueHelper.isNullOrUndefined(this.viewOptions.translate)) {
  1002. this.viewOptions.translate = function (modelValue) {
  1003. if (_this.viewOptions.bindIndexForStepsArray) {
  1004. return String(_this.getStepValue(modelValue));
  1005. }
  1006. return String(modelValue);
  1007. };
  1008. }
  1009. this.viewOptions.getLegend = function (index) {
  1010. var step = _this.viewOptions.stepsArray[index];
  1011. return step.legend;
  1012. };
  1013. };
  1014. SliderComponent.prototype.applyFloorCeilOptions = function () {
  1015. if (ValueHelper.isNullOrUndefined(this.viewOptions.step)) {
  1016. this.viewOptions.step = 1;
  1017. }
  1018. else {
  1019. this.viewOptions.step = +this.viewOptions.step;
  1020. if (this.viewOptions.step <= 0) {
  1021. this.viewOptions.step = 1;
  1022. }
  1023. }
  1024. if (ValueHelper.isNullOrUndefined(this.viewOptions.ceil) ||
  1025. ValueHelper.isNullOrUndefined(this.viewOptions.floor)) {
  1026. throw Error('floor and ceil options must be supplied');
  1027. }
  1028. this.viewOptions.ceil = +this.viewOptions.ceil;
  1029. this.viewOptions.floor = +this.viewOptions.floor;
  1030. if (ValueHelper.isNullOrUndefined(this.viewOptions.translate)) {
  1031. this.viewOptions.translate = function (value) { return String(value); };
  1032. }
  1033. };
  1034. SliderComponent.prototype.resetSlider = function () {
  1035. this.manageElementsStyle();
  1036. this.addAccessibility();
  1037. this.updateCeilLabel();
  1038. this.updateFloorLabel();
  1039. this.unbindEvents();
  1040. this.manageEventsBindings();
  1041. this.updateDisabledState();
  1042. this.calculateViewDimensions();
  1043. this.refocusPointerIfNeeded();
  1044. };
  1045. SliderComponent.prototype.focusPointer = function (pointerType) {
  1046. if (pointerType !== PointerType.Min && pointerType !== PointerType.Max) {
  1047. pointerType = PointerType.Min;
  1048. }
  1049. if (pointerType === PointerType.Min) {
  1050. this.minHandleElement.focus();
  1051. }
  1052. else if (this.range && pointerType === PointerType.Max) {
  1053. this.maxHandleElement.focus();
  1054. }
  1055. };
  1056. SliderComponent.prototype.refocusPointerIfNeeded = function () {
  1057. if (!ValueHelper.isNullOrUndefined(this.currentFocusPointer)) {
  1058. this.onPointerFocus(this.currentFocusPointer);
  1059. var element = this.getPointerElement(this.currentFocusPointer);
  1060. element.focus();
  1061. }
  1062. };
  1063. SliderComponent.prototype.manageElementsStyle = function () {
  1064. var _this = this;
  1065. this.updateScale();
  1066. this.floorLabelElement.setAlwaysHide(this.viewOptions.showTicksValues || this.viewOptions.hideLimitLabels);
  1067. this.ceilLabelElement.setAlwaysHide(this.viewOptions.showTicksValues || this.viewOptions.hideLimitLabels);
  1068. var hideLabelsForTicks = this.viewOptions.showTicksValues && !this.intermediateTicks;
  1069. this.minHandleLabelElement.setAlwaysHide(hideLabelsForTicks || this.viewOptions.hidePointerLabels);
  1070. this.maxHandleLabelElement.setAlwaysHide(hideLabelsForTicks || !this.range || this.viewOptions.hidePointerLabels);
  1071. this.combinedLabelElement.setAlwaysHide(hideLabelsForTicks || !this.range || this.viewOptions.hidePointerLabels);
  1072. this.selectionBarElement.setAlwaysHide(!this.range && !this.viewOptions.showSelectionBar);
  1073. this.leftOuterSelectionBarElement.setAlwaysHide(!this.range || !this.viewOptions.showOuterSelectionBars);
  1074. this.rightOuterSelectionBarElement.setAlwaysHide(!this.range || !this.viewOptions.showOuterSelectionBars);
  1075. this.fullBarTransparentClass = this.range && this.viewOptions.showOuterSelectionBars;
  1076. this.selectionBarDraggableClass = this.viewOptions.draggableRange && !this.viewOptions.onlyBindHandles;
  1077. this.ticksUnderValuesClass = this.intermediateTicks && this.options.showTicksValues;
  1078. if (this.sliderElementVerticalClass !== this.viewOptions.vertical) {
  1079. this.updateVerticalState();
  1080. setTimeout(function () { _this.resetSlider(); });
  1081. }
  1082. if (this.sliderElementAnimateClass !== this.viewOptions.animate) {
  1083. setTimeout(function () { _this.sliderElementAnimateClass = _this.viewOptions.animate; });
  1084. }
  1085. };
  1086. SliderComponent.prototype.manageEventsBindings = function () {
  1087. if (this.viewOptions.disabled || this.viewOptions.readOnly) {
  1088. this.unbindEvents();
  1089. }
  1090. else {
  1091. this.bindEvents();
  1092. }
  1093. };
  1094. SliderComponent.prototype.updateDisabledState = function () {
  1095. this.sliderElementDisabledAttr = this.viewOptions.disabled ? 'disabled' : null;
  1096. };
  1097. SliderComponent.prototype.updateVerticalState = function () {
  1098. this.sliderElementVerticalClass = this.viewOptions.vertical;
  1099. try {
  1100. for (var _a = __values(this.getAllSliderElements()), _b = _a.next(); !_b.done; _b = _a.next()) {
  1101. var element = _b.value;
  1102. if (!ValueHelper.isNullOrUndefined(element)) {
  1103. element.setVertical(this.viewOptions.vertical);
  1104. }
  1105. }
  1106. }
  1107. catch (e_2_1) { e_2 = { error: e_2_1 }; }
  1108. finally {
  1109. try {
  1110. if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
  1111. }
  1112. finally { if (e_2) throw e_2.error; }
  1113. }
  1114. var e_2, _c;
  1115. };
  1116. SliderComponent.prototype.updateScale = function () {
  1117. try {
  1118. for (var _a = __values(this.getAllSliderElements()), _b = _a.next(); !_b.done; _b = _a.next()) {
  1119. var element = _b.value;
  1120. element.setScale(this.viewOptions.scale);
  1121. }
  1122. }
  1123. catch (e_3_1) { e_3 = { error: e_3_1 }; }
  1124. finally {
  1125. try {
  1126. if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
  1127. }
  1128. finally { if (e_3) throw e_3.error; }
  1129. }
  1130. var e_3, _c;
  1131. };
  1132. SliderComponent.prototype.getAllSliderElements = function () {
  1133. return [this.leftOuterSelectionBarElement,
  1134. this.rightOuterSelectionBarElement,
  1135. this.fullBarElement,
  1136. this.selectionBarElement,
  1137. this.minHandleElement,
  1138. this.maxHandleElement,
  1139. this.floorLabelElement,
  1140. this.ceilLabelElement,
  1141. this.minHandleLabelElement,
  1142. this.maxHandleLabelElement,
  1143. this.combinedLabelElement,
  1144. this.ticksElement
  1145. ];
  1146. };
  1147. SliderComponent.prototype.initHandles = function () {
  1148. this.updateLowHandle(this.valueToPosition(this.viewLowValue));
  1149. if (this.range) {
  1150. this.updateHighHandle(this.valueToPosition(this.viewHighValue));
  1151. }
  1152. this.updateSelectionBar();
  1153. if (this.range) {
  1154. this.updateCombinedLabel();
  1155. }
  1156. this.updateTicksScale();
  1157. };
  1158. SliderComponent.prototype.addAccessibility = function () {
  1159. this.updateAriaAttributes();
  1160. this.minHandleElement.role = 'slider';
  1161. if (this.viewOptions.keyboardSupport &&
  1162. !(this.viewOptions.readOnly || this.viewOptions.disabled)) {
  1163. this.minHandleElement.tabindex = '0';
  1164. }
  1165. else {
  1166. this.minHandleElement.tabindex = '';
  1167. }
  1168. if (this.viewOptions.vertical) {
  1169. this.minHandleElement.ariaOrientation = 'vertical';
  1170. }
  1171. if (!ValueHelper.isNullOrUndefined(this.viewOptions.ariaLabel)) {
  1172. this.minHandleElement.ariaLabel = this.viewOptions.ariaLabel;
  1173. }
  1174. else if (!ValueHelper.isNullOrUndefined(this.viewOptions.ariaLabelledBy)) {
  1175. this.minHandleElement.ariaLabelledBy = this.viewOptions.ariaLabelledBy;
  1176. }
  1177. if (this.range) {
  1178. this.maxHandleElement.role = 'slider';
  1179. if (this.viewOptions.keyboardSupport &&
  1180. !(this.viewOptions.readOnly || this.viewOptions.disabled)) {
  1181. this.maxHandleElement.tabindex = '0';
  1182. }
  1183. else {
  1184. this.maxHandleElement.tabindex = '';
  1185. }
  1186. this.maxHandleElement.ariaOrientation = this.viewOptions.vertical ? 'vertical' : 'horizontal';
  1187. if (!ValueHelper.isNullOrUndefined(this.viewOptions.ariaLabelHigh)) {
  1188. this.maxHandleElement.ariaLabel = this.viewOptions.ariaLabelHigh;
  1189. }
  1190. else if (!ValueHelper.isNullOrUndefined(this.viewOptions.ariaLabelledByHigh)) {
  1191. this.maxHandleElement.ariaLabelledBy = this.viewOptions.ariaLabelledByHigh;
  1192. }
  1193. }
  1194. };
  1195. SliderComponent.prototype.updateAriaAttributes = function () {
  1196. this.minHandleElement.ariaValueNow = (+this.value).toString();
  1197. this.minHandleElement.ariaValueText = this.viewOptions.translate(+this.value, LabelType.Low);
  1198. this.minHandleElement.ariaValueMin = this.viewOptions.floor.toString();
  1199. this.minHandleElement.ariaValueMax = this.viewOptions.ceil.toString();
  1200. if (this.range) {
  1201. this.maxHandleElement.ariaValueNow = (+this.highValue).toString();
  1202. this.maxHandleElement.ariaValueText = this.viewOptions.translate(+this.highValue, LabelType.High);
  1203. this.maxHandleElement.ariaValueMin = this.viewOptions.floor.toString();
  1204. this.maxHandleElement.ariaValueMax = this.viewOptions.ceil.toString();
  1205. }
  1206. };
  1207. SliderComponent.prototype.calculateViewDimensions = function () {
  1208. if (!ValueHelper.isNullOrUndefined(this.viewOptions.handleDimension)) {
  1209. this.minHandleElement.setDimension(this.viewOptions.handleDimension);
  1210. }
  1211. else {
  1212. this.minHandleElement.calculateDimension();
  1213. }
  1214. var handleWidth = this.minHandleElement.dimension;
  1215. this.handleHalfDimension = handleWidth / 2;
  1216. if (!ValueHelper.isNullOrUndefined(this.viewOptions.barDimension)) {
  1217. this.fullBarElement.setDimension(this.viewOptions.barDimension);
  1218. }
  1219. else {
  1220. this.fullBarElement.calculateDimension();
  1221. }
  1222. this.maxHandlePosition = this.fullBarElement.dimension - handleWidth;
  1223. if (this.initHasRun) {
  1224. this.updateFloorLabel();
  1225. this.updateCeilLabel();
  1226. this.initHandles();
  1227. }
  1228. };
  1229. SliderComponent.prototype.calculateViewDimensionsAndDetectChanges = function () {
  1230. this.calculateViewDimensions();
  1231. this.changeDetectionRef.detectChanges();
  1232. };
  1233. SliderComponent.prototype.updateTicksScale = function () {
  1234. var _this = this;
  1235. if (!this.viewOptions.showTicks) {
  1236. return;
  1237. }
  1238. var ticksArray = !ValueHelper.isNullOrUndefined(this.viewOptions.ticksArray)
  1239. ? this.viewOptions.ticksArray
  1240. : this.getTicksArray();
  1241. var translate = this.viewOptions.vertical ? 'translateY' : 'translateX';
  1242. if (this.viewOptions.rightToLeft) {
  1243. ticksArray.reverse();
  1244. }
  1245. var newTicks = ticksArray.map(function (value) {
  1246. var position = _this.valueToPosition(value);
  1247. if (_this.viewOptions.vertical) {
  1248. position = _this.maxHandlePosition - position;
  1249. }
  1250. var translation = translate + '(' + Math.round(position) + 'px)';
  1251. var tick = new Tick();
  1252. tick.selected = _this.isTickSelected(value);
  1253. tick.style = {
  1254. '-webkit-transform': translation,
  1255. '-moz-transform': translation,
  1256. '-o-transform': translation,
  1257. '-ms-transform': translation,
  1258. transform: translation,
  1259. };
  1260. if (tick.selected && !ValueHelper.isNullOrUndefined(_this.viewOptions.getSelectionBarColor)) {
  1261. tick.style['background-color'] = _this.getSelectionBarColor();
  1262. }
  1263. if (!tick.selected && !ValueHelper.isNullOrUndefined(_this.viewOptions.getTickColor)) {
  1264. tick.style['background-color'] = _this.getTickColor(value);
  1265. }
  1266. if (!ValueHelper.isNullOrUndefined(_this.viewOptions.ticksTooltip)) {
  1267. tick.tooltip = _this.viewOptions.ticksTooltip(value);
  1268. tick.tooltipPlacement = _this.viewOptions.vertical ? 'right' : 'top';
  1269. }
  1270. if (_this.viewOptions.showTicksValues && (value % _this.viewOptions.tickValueStep === 0)) {
  1271. tick.value = _this.getDisplayValue(value, LabelType.TickValue);
  1272. if (!ValueHelper.isNullOrUndefined(_this.viewOptions.ticksValuesTooltip)) {
  1273. tick.valueTooltip = _this.viewOptions.ticksValuesTooltip(value);
  1274. tick.valueTooltipPlacement = _this.viewOptions.vertical
  1275. ? 'right'
  1276. : 'top';
  1277. }
  1278. }
  1279. if (!ValueHelper.isNullOrUndefined(_this.viewOptions.getLegend)) {
  1280. var legend = _this.viewOptions.getLegend(value);
  1281. if (!ValueHelper.isNullOrUndefined(legend)) {
  1282. tick.legend = legend;
  1283. }
  1284. }
  1285. return tick;
  1286. });
  1287. if (!ValueHelper.isNullOrUndefined(this.ticks) && this.ticks.length === newTicks.length) {
  1288. for (var i = 0; i < newTicks.length; ++i) {
  1289. Object.assign(this.ticks[i], newTicks[i]);
  1290. }
  1291. }
  1292. else {
  1293. this.ticks = newTicks;
  1294. }
  1295. this.changeDetectionRef.detectChanges();
  1296. };
  1297. SliderComponent.prototype.getTicksArray = function () {
  1298. var step = (!ValueHelper.isNullOrUndefined(this.viewOptions.tickStep)) ? this.viewOptions.tickStep : this.viewOptions.step;
  1299. var ticksArray = [];
  1300. for (var value = this.viewOptions.floor; value <= this.viewOptions.ceil; value += step) {
  1301. ticksArray.push(value);
  1302. }
  1303. return ticksArray;
  1304. };
  1305. SliderComponent.prototype.isTickSelected = function (value) {
  1306. if (!this.range) {
  1307. if (!ValueHelper.isNullOrUndefined(this.viewOptions.showSelectionBarFromValue)) {
  1308. var center = this.viewOptions.showSelectionBarFromValue;
  1309. if (this.viewLowValue > center &&
  1310. value >= center &&
  1311. value <= this.viewLowValue) {
  1312. return true;
  1313. }
  1314. else if (this.viewLowValue < center &&
  1315. value <= center &&
  1316. value >= this.viewLowValue) {
  1317. return true;
  1318. }
  1319. }
  1320. else if (this.viewOptions.showSelectionBarEnd) {
  1321. if (value >= this.viewLowValue) {
  1322. return true;
  1323. }
  1324. }
  1325. else if (this.viewOptions.showSelectionBar && value <= this.viewLowValue) {
  1326. return true;
  1327. }
  1328. }
  1329. if (this.range && value >= this.viewLowValue && value <= this.viewHighValue) {
  1330. return true;
  1331. }
  1332. return false;
  1333. };
  1334. SliderComponent.prototype.updateFloorLabel = function () {
  1335. if (!this.floorLabelElement.alwaysHide) {
  1336. this.floorLabelElement.setValue(this.getDisplayValue(this.viewOptions.floor, LabelType.Floor));
  1337. this.floorLabelElement.calculateDimension();
  1338. var position = this.viewOptions.rightToLeft
  1339. ? this.fullBarElement.dimension - this.floorLabelElement.dimension
  1340. : 0;
  1341. this.floorLabelElement.setPosition(position);
  1342. }
  1343. };
  1344. SliderComponent.prototype.updateCeilLabel = function () {
  1345. if (!this.ceilLabelElement.alwaysHide) {
  1346. this.ceilLabelElement.setValue(this.getDisplayValue(this.viewOptions.ceil, LabelType.Ceil));
  1347. this.ceilLabelElement.calculateDimension();
  1348. var position = this.viewOptions.rightToLeft
  1349. ? 0
  1350. : this.fullBarElement.dimension - this.ceilLabelElement.dimension;
  1351. this.ceilLabelElement.setPosition(position);
  1352. }
  1353. };
  1354. SliderComponent.prototype.updateHandles = function (which, newPos) {
  1355. if (which === PointerType.Min) {
  1356. this.updateLowHandle(newPos);
  1357. }
  1358. else if (which === PointerType.Max) {
  1359. this.updateHighHandle(newPos);
  1360. }
  1361. this.updateSelectionBar();
  1362. this.updateTicksScale();
  1363. if (this.range) {
  1364. this.updateCombinedLabel();
  1365. }
  1366. };
  1367. SliderComponent.prototype.getHandleLabelPos = function (labelType, newPos) {
  1368. var labelDimension = (labelType === PointerType.Min)
  1369. ? this.minHandleLabelElement.dimension
  1370. : this.maxHandleLabelElement.dimension;
  1371. var nearHandlePos = newPos - labelDimension / 2 + this.handleHalfDimension;
  1372. var endOfBarPos = this.fullBarElement.dimension - labelDimension;
  1373. if (!this.viewOptions.boundPointerLabels) {
  1374. return nearHandlePos;
  1375. }
  1376. if ((this.viewOptions.rightToLeft && labelType === PointerType.Min) ||
  1377. (!this.viewOptions.rightToLeft && labelType === PointerType.Max)) {
  1378. return Math.min(nearHandlePos, endOfBarPos);
  1379. }
  1380. else {
  1381. return Math.min(Math.max(nearHandlePos, 0), endOfBarPos);
  1382. }
  1383. };
  1384. SliderComponent.prototype.updateLowHandle = function (newPos) {
  1385. this.minHandleElement.setPosition(newPos);
  1386. this.minHandleLabelElement.setValue(this.getDisplayValue(this.viewLowValue, LabelType.Low));
  1387. this.minHandleLabelElement.setPosition(this.getHandleLabelPos(PointerType.Min, newPos));
  1388. if (!ValueHelper.isNullOrUndefined(this.viewOptions.getPointerColor)) {
  1389. this.minPointerStyle = {
  1390. backgroundColor: this.getPointerColor(PointerType.Min),
  1391. };
  1392. }
  1393. if (this.viewOptions.autoHideLimitLabels) {
  1394. this.updateFloorAndCeilLabelsVisibility();
  1395. }
  1396. };
  1397. SliderComponent.prototype.updateHighHandle = function (newPos) {
  1398. this.maxHandleElement.setPosition(newPos);
  1399. this.maxHandleLabelElement.setValue(this.getDisplayValue(this.viewHighValue, LabelType.High));
  1400. this.maxHandleLabelElement.setPosition(this.getHandleLabelPos(PointerType.Max, newPos));
  1401. if (!ValueHelper.isNullOrUndefined(this.viewOptions.getPointerColor)) {
  1402. this.maxPointerStyle = {
  1403. backgroundColor: this.getPointerColor(PointerType.Max),
  1404. };
  1405. }
  1406. if (this.viewOptions.autoHideLimitLabels) {
  1407. this.updateFloorAndCeilLabelsVisibility();
  1408. }
  1409. };
  1410. SliderComponent.prototype.updateFloorAndCeilLabelsVisibility = function () {
  1411. if (this.viewOptions.hidePointerLabels) {
  1412. return;
  1413. }
  1414. var floorLabelHidden = false;
  1415. var ceilLabelHidden = false;
  1416. var isMinLabelAtFloor = this.isLabelBelowFloorLabel(this.minHandleLabelElement);
  1417. var isMinLabelAtCeil = this.isLabelAboveCeilLabel(this.minHandleLabelElement);
  1418. var isMaxLabelAtCeil = this.isLabelAboveCeilLabel(this.maxHandleLabelElement);
  1419. var isCombinedLabelAtFloor = this.isLabelBelowFloorLabel(this.combinedLabelElement);
  1420. var isCombinedLabelAtCeil = this.isLabelAboveCeilLabel(this.combinedLabelElement);
  1421. if (isMinLabelAtFloor) {
  1422. floorLabelHidden = true;
  1423. this.floorLabelElement.hide();
  1424. }
  1425. else {
  1426. floorLabelHidden = false;
  1427. this.floorLabelElement.show();
  1428. }
  1429. if (isMinLabelAtCeil) {
  1430. ceilLabelHidden = true;
  1431. this.ceilLabelElement.hide();
  1432. }
  1433. else {
  1434. ceilLabelHidden = false;
  1435. this.ceilLabelElement.show();
  1436. }
  1437. if (this.range) {
  1438. var hideCeil = this.combinedLabelElement.isVisible() ? isCombinedLabelAtCeil : isMaxLabelAtCeil;
  1439. var hideFloor = this.combinedLabelElement.isVisible() ? isCombinedLabelAtFloor : isMinLabelAtFloor;
  1440. if (hideCeil) {
  1441. this.ceilLabelElement.hide();
  1442. }
  1443. else if (!ceilLabelHidden) {
  1444. this.ceilLabelElement.show();
  1445. }
  1446. if (hideFloor) {
  1447. this.floorLabelElement.hide();
  1448. }
  1449. else if (!floorLabelHidden) {
  1450. this.floorLabelElement.show();
  1451. }
  1452. }
  1453. };
  1454. SliderComponent.prototype.isLabelBelowFloorLabel = function (label) {
  1455. var pos = label.position;
  1456. var dim = label.dimension;
  1457. var floorPos = this.floorLabelElement.position;
  1458. var floorDim = this.floorLabelElement.dimension;
  1459. return this.viewOptions.rightToLeft
  1460. ? pos + dim >= floorPos - 2
  1461. : pos <= floorPos + floorDim + 2;
  1462. };
  1463. SliderComponent.prototype.isLabelAboveCeilLabel = function (label) {
  1464. var pos = label.position;
  1465. var dim = label.dimension;
  1466. var ceilPos = this.ceilLabelElement.position;
  1467. var ceilDim = this.ceilLabelElement.dimension;
  1468. return this.viewOptions.rightToLeft
  1469. ? pos <= ceilPos + ceilDim + 2
  1470. : pos + dim >= ceilPos - 2;
  1471. };
  1472. SliderComponent.prototype.updateSelectionBar = function () {
  1473. var position = 0;
  1474. var dimension = 0;
  1475. var isSelectionBarFromRight = this.viewOptions.rightToLeft
  1476. ? !this.viewOptions.showSelectionBarEnd
  1477. : this.viewOptions.showSelectionBarEnd;
  1478. var positionForRange = this.viewOptions.rightToLeft
  1479. ? this.maxHandleElement.position + this.handleHalfDimension
  1480. : this.minHandleElement.position + this.handleHalfDimension;
  1481. if (this.range) {
  1482. dimension = Math.abs(this.maxHandleElement.position - this.minHandleElement.position);
  1483. position = positionForRange;
  1484. }
  1485. else {
  1486. if (!ValueHelper.isNullOrUndefined(this.viewOptions.showSelectionBarFromValue)) {
  1487. var center = this.viewOptions.showSelectionBarFromValue;
  1488. var centerPosition = this.valueToPosition(center);
  1489. var isModelGreaterThanCenter = this.viewOptions.rightToLeft
  1490. ? this.viewLowValue <= center
  1491. : this.viewLowValue > center;
  1492. if (isModelGreaterThanCenter) {
  1493. dimension = this.minHandleElement.position - centerPosition;
  1494. position = centerPosition + this.handleHalfDimension;
  1495. }
  1496. else {
  1497. dimension = centerPosition - this.minHandleElement.position;
  1498. position = this.minHandleElement.position + this.handleHalfDimension;
  1499. }
  1500. }
  1501. else if (isSelectionBarFromRight) {
  1502. dimension = Math.ceil(Math.abs(this.maxHandlePosition - this.minHandleElement.position) + this.handleHalfDimension);
  1503. position = Math.floor(this.minHandleElement.position + this.handleHalfDimension);
  1504. }
  1505. else {
  1506. dimension = this.minHandleElement.position + this.handleHalfDimension;
  1507. position = 0;
  1508. }
  1509. }
  1510. this.selectionBarElement.setDimension(dimension);
  1511. this.selectionBarElement.setPosition(position);
  1512. if (this.range && this.viewOptions.showOuterSelectionBars) {
  1513. if (this.viewOptions.rightToLeft) {
  1514. this.rightOuterSelectionBarElement.setDimension(position);
  1515. this.rightOuterSelectionBarElement.setPosition(0);
  1516. this.fullBarElement.calculateDimension();
  1517. this.leftOuterSelectionBarElement.setDimension(this.fullBarElement.dimension - (position + dimension));
  1518. this.leftOuterSelectionBarElement.setPosition(position + dimension);
  1519. }
  1520. else {
  1521. this.leftOuterSelectionBarElement.setDimension(position);
  1522. this.leftOuterSelectionBarElement.setPosition(0);
  1523. this.fullBarElement.calculateDimension();
  1524. this.rightOuterSelectionBarElement.setDimension(this.fullBarElement.dimension - (position + dimension));
  1525. this.rightOuterSelectionBarElement.setPosition(position + dimension);
  1526. }
  1527. }
  1528. if (!ValueHelper.isNullOrUndefined(this.viewOptions.getSelectionBarColor)) {
  1529. var color = this.getSelectionBarColor();
  1530. this.barStyle = {
  1531. backgroundColor: color,
  1532. };
  1533. }
  1534. else if (!ValueHelper.isNullOrUndefined(this.viewOptions.selectionBarGradient)) {
  1535. var offset = (!ValueHelper.isNullOrUndefined(this.viewOptions.showSelectionBarFromValue))
  1536. ? this.valueToPosition(this.viewOptions.showSelectionBarFromValue)
  1537. : 0;
  1538. var reversed = (offset - position > 0 && !isSelectionBarFromRight) || (offset - position <= 0 && isSelectionBarFromRight);
  1539. var direction = this.viewOptions.vertical
  1540. ? reversed ? 'bottom' : 'top'
  1541. : reversed ? 'left' : 'right';
  1542. this.barStyle = {
  1543. backgroundImage: 'linear-gradient(to ' +
  1544. direction +
  1545. ', ' +
  1546. this.viewOptions.selectionBarGradient.from +
  1547. ' 0%,' +
  1548. this.viewOptions.selectionBarGradient.to +
  1549. ' 100%)',
  1550. };
  1551. if (this.viewOptions.vertical) {
  1552. this.barStyle.backgroundPosition =
  1553. 'center ' +
  1554. (offset +
  1555. dimension +
  1556. position +
  1557. (reversed ? -this.handleHalfDimension : 0)) +
  1558. 'px';
  1559. this.barStyle.backgroundSize =
  1560. '100% ' + (this.fullBarElement.dimension - this.handleHalfDimension) + 'px';
  1561. }
  1562. else {
  1563. this.barStyle.backgroundPosition =
  1564. offset -
  1565. position +
  1566. (reversed ? this.handleHalfDimension : 0) +
  1567. 'px center';
  1568. this.barStyle.backgroundSize =
  1569. this.fullBarElement.dimension - this.handleHalfDimension + 'px 100%';
  1570. }
  1571. }
  1572. };
  1573. SliderComponent.prototype.getSelectionBarColor = function () {
  1574. if (this.range) {
  1575. return this.viewOptions.getSelectionBarColor(this.value, this.highValue);
  1576. }
  1577. return this.viewOptions.getSelectionBarColor(this.value);
  1578. };
  1579. SliderComponent.prototype.getPointerColor = function (pointerType) {
  1580. if (pointerType === PointerType.Max) {
  1581. return this.viewOptions.getPointerColor(this.highValue, pointerType);
  1582. }
  1583. return this.viewOptions.getPointerColor(this.value, pointerType);
  1584. };
  1585. SliderComponent.prototype.getTickColor = function (value) {
  1586. return this.viewOptions.getTickColor(value);
  1587. };
  1588. SliderComponent.prototype.updateCombinedLabel = function () {
  1589. var isLabelOverlap = null;
  1590. if (this.viewOptions.rightToLeft) {
  1591. isLabelOverlap =
  1592. this.minHandleLabelElement.position - this.minHandleLabelElement.dimension - 10 <= this.maxHandleLabelElement.position;
  1593. }
  1594. else {
  1595. isLabelOverlap =
  1596. this.minHandleLabelElement.position + this.minHandleLabelElement.dimension + 10 >= this.maxHandleLabelElement.position;
  1597. }
  1598. if (isLabelOverlap) {
  1599. var lowDisplayValue = this.getDisplayValue(this.viewLowValue, LabelType.Low);
  1600. var highDisplayValue = this.getDisplayValue(this.viewHighValue, LabelType.High);
  1601. var combinedLabelValue = this.viewOptions.rightToLeft
  1602. ? this.viewOptions.combineLabels(highDisplayValue, lowDisplayValue)
  1603. : this.viewOptions.combineLabels(lowDisplayValue, highDisplayValue);
  1604. this.combinedLabelElement.setValue(combinedLabelValue);
  1605. var pos = this.viewOptions.boundPointerLabels
  1606. ? Math.min(Math.max(this.selectionBarElement.position +
  1607. this.selectionBarElement.dimension / 2 -
  1608. this.combinedLabelElement.dimension / 2, 0), this.fullBarElement.dimension - this.combinedLabelElement.dimension)
  1609. : this.selectionBarElement.position + this.selectionBarElement.dimension / 2 - this.combinedLabelElement.dimension / 2;
  1610. this.combinedLabelElement.setPosition(pos);
  1611. this.minHandleLabelElement.hide();
  1612. this.maxHandleLabelElement.hide();
  1613. this.combinedLabelElement.show();
  1614. }
  1615. else {
  1616. this.updateHighHandle(this.valueToPosition(this.viewHighValue));
  1617. this.updateLowHandle(this.valueToPosition(this.viewLowValue));
  1618. this.maxHandleLabelElement.show();
  1619. this.minHandleLabelElement.show();
  1620. this.combinedLabelElement.hide();
  1621. }
  1622. if (this.viewOptions.autoHideLimitLabels) {
  1623. this.updateFloorAndCeilLabelsVisibility();
  1624. }
  1625. };
  1626. SliderComponent.prototype.getDisplayValue = function (value, which) {
  1627. if (!ValueHelper.isNullOrUndefined(this.viewOptions.stepsArray) && !this.viewOptions.bindIndexForStepsArray) {
  1628. value = this.getStepValue(value);
  1629. }
  1630. return this.viewOptions.translate(value, which);
  1631. };
  1632. SliderComponent.prototype.roundStep = function (value, customStep) {
  1633. var step = !ValueHelper.isNullOrUndefined(customStep) ? customStep : this.viewOptions.step;
  1634. var steppedDifference = MathHelper.roundToPrecisionLimit((value - this.viewOptions.floor) / step, this.viewOptions.precisionLimit);
  1635. steppedDifference = Math.round(steppedDifference) * step;
  1636. return MathHelper.roundToPrecisionLimit(this.viewOptions.floor + steppedDifference, this.viewOptions.precisionLimit);
  1637. };
  1638. SliderComponent.prototype.valueToPosition = function (val) {
  1639. var fn = ValueHelper.linearValueToPosition;
  1640. if (!ValueHelper.isNullOrUndefined(this.viewOptions.customValueToPosition)) {
  1641. fn = this.viewOptions.customValueToPosition;
  1642. }
  1643. else if (this.viewOptions.logScale) {
  1644. fn = ValueHelper.logValueToPosition;
  1645. }
  1646. val = MathHelper.clampToRange(val, this.viewOptions.floor, this.viewOptions.ceil);
  1647. var percent = fn(val, this.viewOptions.floor, this.viewOptions.ceil);
  1648. if (ValueHelper.isNullOrUndefined(percent)) {
  1649. percent = 0;
  1650. }
  1651. if (this.viewOptions.rightToLeft) {
  1652. percent = 1 - percent;
  1653. }
  1654. return percent * this.maxHandlePosition;
  1655. };
  1656. SliderComponent.prototype.positionToValue = function (position) {
  1657. var percent = position / this.maxHandlePosition;
  1658. if (this.viewOptions.rightToLeft) {
  1659. percent = 1 - percent;
  1660. }
  1661. var fn = ValueHelper.linearPositionToValue;
  1662. if (!ValueHelper.isNullOrUndefined(this.viewOptions.customPositionToValue)) {
  1663. fn = this.viewOptions.customPositionToValue;
  1664. }
  1665. else if (this.viewOptions.logScale) {
  1666. fn = ValueHelper.logPositionToValue;
  1667. }
  1668. var value = fn(percent, this.viewOptions.floor, this.viewOptions.ceil);
  1669. return !ValueHelper.isNullOrUndefined(value) ? value : 0;
  1670. };
  1671. SliderComponent.prototype.getEventXY = function (event, targetTouchId) {
  1672. if (event instanceof MouseEvent) {
  1673. return this.viewOptions.vertical ? event.clientY : event.clientX;
  1674. }
  1675. var touchIndex = 0;
  1676. var touches = event.touches;
  1677. if (!ValueHelper.isNullOrUndefined(targetTouchId)) {
  1678. for (var i = 0; i < touches.length; i++) {
  1679. if (touches[i].identifier === targetTouchId) {
  1680. touchIndex = i;
  1681. break;
  1682. }
  1683. }
  1684. }
  1685. return this.viewOptions.vertical ? touches[touchIndex].clientY : touches[touchIndex].clientX;
  1686. };
  1687. SliderComponent.prototype.getEventPosition = function (event, targetTouchId) {
  1688. var sliderElementBoundingRect = this.elementRef.nativeElement.getBoundingClientRect();
  1689. var sliderPos = this.viewOptions.vertical ?
  1690. sliderElementBoundingRect.bottom : sliderElementBoundingRect.left;
  1691. var eventPos = 0;
  1692. if (this.viewOptions.vertical) {
  1693. eventPos = -this.getEventXY(event, targetTouchId) + sliderPos;
  1694. }
  1695. else {
  1696. eventPos = this.getEventXY(event, targetTouchId) - sliderPos;
  1697. }
  1698. return eventPos * this.viewOptions.scale - this.handleHalfDimension;
  1699. };
  1700. SliderComponent.prototype.getNearestHandle = function (event) {
  1701. if (!this.range) {
  1702. return PointerType.Min;
  1703. }
  1704. var position = this.getEventPosition(event);
  1705. var distanceMin = Math.abs(position - this.minHandleElement.position);
  1706. var distanceMax = Math.abs(position - this.maxHandleElement.position);
  1707. if (distanceMin < distanceMax) {
  1708. return PointerType.Min;
  1709. }
  1710. else if (distanceMin > distanceMax) {
  1711. return PointerType.Max;
  1712. }
  1713. else if (!this.viewOptions.rightToLeft) {
  1714. return position < this.minHandleElement.position ? PointerType.Min : PointerType.Max;
  1715. }
  1716. return position > this.minHandleElement.position ? PointerType.Min : PointerType.Max;
  1717. };
  1718. SliderComponent.prototype.bindEvents = function () {
  1719. var _this = this;
  1720. var draggableRange = this.viewOptions.draggableRange;
  1721. if (!this.viewOptions.onlyBindHandles) {
  1722. this.selectionBarElement.on('mousedown', function (event) { return _this.onBarStart(null, draggableRange, event, true, true, true); });
  1723. }
  1724. if (this.viewOptions.draggableRangeOnly) {
  1725. this.minHandleElement.on('mousedown', function (event) { return _this.onBarStart(PointerType.Min, draggableRange, event, true, true); });
  1726. this.maxHandleElement.on('mousedown', function (event) { return _this.onBarStart(PointerType.Max, draggableRange, event, true, true); });
  1727. }
  1728. else {
  1729. this.minHandleElement.on('mousedown', function (event) { return _this.onStart(PointerType.Min, event, true, true); });
  1730. if (this.range) {
  1731. this.maxHandleElement.on('mousedown', function (event) { return _this.onStart(PointerType.Max, event, true, true); });
  1732. }
  1733. if (!this.viewOptions.onlyBindHandles) {
  1734. this.fullBarElement.on('mousedown', function (event) { return _this.onStart(null, event, true, true, true); });
  1735. this.ticksElement.on('mousedown', function (event) { return _this.onStart(null, event, true, true, true, true); });
  1736. }
  1737. }
  1738. if (!this.viewOptions.onlyBindHandles) {
  1739. this.selectionBarElement.onPassive('touchstart', function (event) { return _this.onBarStart(null, draggableRange, event, true, true, true); });
  1740. }
  1741. if (this.viewOptions.draggableRangeOnly) {
  1742. this.minHandleElement.onPassive('touchstart', function (event) { return _this.onBarStart(PointerType.Min, draggableRange, event, true, true); });
  1743. this.maxHandleElement.onPassive('touchstart', function (event) { return _this.onBarStart(PointerType.Max, draggableRange, event, true, true); });
  1744. }
  1745. else {
  1746. this.minHandleElement.onPassive('touchstart', function (event) { return _this.onStart(PointerType.Min, event, true, true); });
  1747. if (this.range) {
  1748. this.maxHandleElement.onPassive('touchstart', function (event) { return _this.onStart(PointerType.Max, event, true, true); });
  1749. }
  1750. if (!this.viewOptions.onlyBindHandles) {
  1751. this.fullBarElement.onPassive('touchstart', function (event) { return _this.onStart(null, event, true, true, true); });
  1752. this.ticksElement.onPassive('touchstart', function (event) { return _this.onStart(null, event, false, false, true, true); });
  1753. }
  1754. }
  1755. if (this.viewOptions.keyboardSupport) {
  1756. this.minHandleElement.on('focus', function () { return _this.onPointerFocus(PointerType.Min); });
  1757. if (this.range) {
  1758. this.maxHandleElement.on('focus', function () { return _this.onPointerFocus(PointerType.Max); });
  1759. }
  1760. }
  1761. };
  1762. SliderComponent.prototype.unbindEvents = function () {
  1763. this.unsubscribeOnMove();
  1764. this.unsubscribeOnEnd();
  1765. try {
  1766. for (var _a = __values(this.getAllSliderElements()), _b = _a.next(); !_b.done; _b = _a.next()) {
  1767. var element = _b.value;
  1768. element.off();
  1769. }
  1770. }
  1771. catch (e_4_1) { e_4 = { error: e_4_1 }; }
  1772. finally {
  1773. try {
  1774. if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
  1775. }
  1776. finally { if (e_4) throw e_4.error; }
  1777. }
  1778. var e_4, _c;
  1779. };
  1780. SliderComponent.prototype.onBarStart = function (pointerType, draggableRange, event, bindMove, bindEnd, simulateImmediateMove, simulateImmediateEnd) {
  1781. if (draggableRange) {
  1782. this.onDragStart(pointerType, event, bindMove, bindEnd);
  1783. }
  1784. else {
  1785. this.onStart(pointerType, event, bindMove, bindEnd, simulateImmediateMove, simulateImmediateEnd);
  1786. }
  1787. };
  1788. SliderComponent.prototype.onStart = function (pointerType, event, bindMove, bindEnd, simulateImmediateMove, simulateImmediateEnd) {
  1789. var _this = this;
  1790. event.stopPropagation();
  1791. if (!CompatibilityHelper.isTouchEvent(event) || !detectPassiveEvents.hasSupport) {
  1792. event.preventDefault();
  1793. }
  1794. this.calculateViewDimensions();
  1795. if (ValueHelper.isNullOrUndefined(pointerType)) {
  1796. pointerType = this.getNearestHandle(event);
  1797. }
  1798. this.currentTrackingPointer = pointerType;
  1799. var pointerElement = this.getPointerElement(pointerType);
  1800. pointerElement.active = true;
  1801. if (this.viewOptions.keyboardSupport) {
  1802. pointerElement.focus();
  1803. }
  1804. if (bindMove) {
  1805. this.unsubscribeOnMove();
  1806. var onMoveCallback = function (e) { return _this.dragging.active ? _this.onDragMove(e) : _this.onMove(e); };
  1807. if (CompatibilityHelper.isTouchEvent(event)) {
  1808. this.onMoveEventListener = this.eventListenerHelper.attachPassiveEventListener(document, 'touchmove', onMoveCallback, this.viewOptions.touchEventsInterval);
  1809. }
  1810. else {
  1811. this.onMoveEventListener = this.eventListenerHelper.attachEventListener(document, 'mousemove', onMoveCallback, this.viewOptions.mouseEventsInterval);
  1812. }
  1813. }
  1814. if (bindEnd) {
  1815. this.unsubscribeOnEnd();
  1816. var onEndCallback = function (e) { return _this.onEnd(e); };
  1817. if (CompatibilityHelper.isTouchEvent(event)) {
  1818. this.onEndEventListener = this.eventListenerHelper.attachPassiveEventListener(document, 'touchend', onEndCallback);
  1819. }
  1820. else {
  1821. this.onEndEventListener = this.eventListenerHelper.attachEventListener(document, 'mouseup', onEndCallback);
  1822. }
  1823. }
  1824. this.userChangeStart.emit(this.getChangeContext());
  1825. if (CompatibilityHelper.isTouchEvent(event) && !ValueHelper.isNullOrUndefined(((event)).changedTouches)) {
  1826. if (ValueHelper.isNullOrUndefined(this.touchId)) {
  1827. this.touchId = ((event)).changedTouches[0].identifier;
  1828. }
  1829. }
  1830. if (simulateImmediateMove) {
  1831. this.onMove(event, true);
  1832. }
  1833. if (simulateImmediateEnd) {
  1834. this.onEnd(event);
  1835. }
  1836. };
  1837. SliderComponent.prototype.onMove = function (event, fromTick) {
  1838. var touchForThisSlider = null;
  1839. if (CompatibilityHelper.isTouchEvent(event)) {
  1840. var changedTouches = ((event)).changedTouches;
  1841. for (var i = 0; i < changedTouches.length; i++) {
  1842. if (changedTouches[i].identifier === this.touchId) {
  1843. touchForThisSlider = changedTouches[i];
  1844. break;
  1845. }
  1846. }
  1847. if (ValueHelper.isNullOrUndefined(touchForThisSlider)) {
  1848. return;
  1849. }
  1850. }
  1851. var newPos = !ValueHelper.isNullOrUndefined(touchForThisSlider)
  1852. ? this.getEventPosition(event, touchForThisSlider.identifier)
  1853. : this.getEventPosition(event);
  1854. var newValue;
  1855. var ceilValue = this.viewOptions.rightToLeft
  1856. ? this.viewOptions.floor
  1857. : this.viewOptions.ceil;
  1858. var floorValue = this.viewOptions.rightToLeft ? this.viewOptions.ceil : this.viewOptions.floor;
  1859. if (newPos <= 0) {
  1860. newValue = floorValue;
  1861. }
  1862. else if (newPos >= this.maxHandlePosition) {
  1863. newValue = ceilValue;
  1864. }
  1865. else {
  1866. newValue = this.positionToValue(newPos);
  1867. if (fromTick && !ValueHelper.isNullOrUndefined(this.viewOptions.tickStep)) {
  1868. newValue = this.roundStep(newValue, this.viewOptions.tickStep);
  1869. }
  1870. else {
  1871. newValue = this.roundStep(newValue);
  1872. }
  1873. }
  1874. this.positionTrackingHandle(newValue);
  1875. };
  1876. SliderComponent.prototype.onEnd = function (event) {
  1877. if (CompatibilityHelper.isTouchEvent(event)) {
  1878. var changedTouches = ((event)).changedTouches;
  1879. if (changedTouches[0].identifier !== this.touchId) {
  1880. return;
  1881. }
  1882. }
  1883. this.touchId = null;
  1884. if (!this.viewOptions.keyboardSupport) {
  1885. this.minHandleElement.active = false;
  1886. this.maxHandleElement.active = false;
  1887. this.currentTrackingPointer = null;
  1888. }
  1889. this.dragging.active = false;
  1890. this.unsubscribeOnMove();
  1891. this.unsubscribeOnEnd();
  1892. this.userChangeEnd.emit(this.getChangeContext());
  1893. };
  1894. SliderComponent.prototype.onPointerFocus = function (pointerType) {
  1895. var _this = this;
  1896. var pointerElement = this.getPointerElement(pointerType);
  1897. pointerElement.on('blur', function () { return _this.onPointerBlur(pointerElement); });
  1898. pointerElement.on('keydown', function (event) { return _this.onKeyboardEvent(event); });
  1899. pointerElement.on('keyup', function () { return _this.onKeyUp(); });
  1900. pointerElement.active = true;
  1901. this.currentTrackingPointer = pointerType;
  1902. this.currentFocusPointer = pointerType;
  1903. this.firstKeyDown = true;
  1904. };
  1905. SliderComponent.prototype.onKeyUp = function () {
  1906. this.firstKeyDown = true;
  1907. this.userChangeEnd.emit(this.getChangeContext());
  1908. };
  1909. SliderComponent.prototype.onPointerBlur = function (pointer) {
  1910. pointer.off('blur');
  1911. pointer.off('keydown');
  1912. pointer.off('keyup');
  1913. pointer.active = false;
  1914. if (ValueHelper.isNullOrUndefined(this.touchId)) {
  1915. this.currentTrackingPointer = null;
  1916. this.currentFocusPointer = null;
  1917. }
  1918. };
  1919. SliderComponent.prototype.getKeyActions = function (currentValue) {
  1920. var valueRange = this.viewOptions.ceil - this.viewOptions.floor;
  1921. var increaseStep = currentValue + this.viewOptions.step;
  1922. var decreaseStep = currentValue - this.viewOptions.step;
  1923. var increasePage = currentValue + valueRange / 10;
  1924. var decreasePage = currentValue - valueRange / 10;
  1925. if (this.viewOptions.reversedControls) {
  1926. increaseStep = currentValue - this.viewOptions.step;
  1927. decreaseStep = currentValue + this.viewOptions.step;
  1928. increasePage = currentValue - valueRange / 10;
  1929. decreasePage = currentValue + valueRange / 10;
  1930. }
  1931. var actions = {
  1932. UP: increaseStep,
  1933. DOWN: decreaseStep,
  1934. LEFT: decreaseStep,
  1935. RIGHT: increaseStep,
  1936. PAGEUP: increasePage,
  1937. PAGEDOWN: decreasePage,
  1938. HOME: this.viewOptions.reversedControls ? this.viewOptions.ceil : this.viewOptions.floor,
  1939. END: this.viewOptions.reversedControls ? this.viewOptions.floor : this.viewOptions.ceil,
  1940. };
  1941. if (this.viewOptions.rightToLeft) {
  1942. actions["LEFT"] = increaseStep;
  1943. actions["RIGHT"] = decreaseStep;
  1944. if (this.viewOptions.vertical) {
  1945. actions["UP"] = decreaseStep;
  1946. actions["DOWN"] = increaseStep;
  1947. }
  1948. }
  1949. return actions;
  1950. };
  1951. SliderComponent.prototype.onKeyboardEvent = function (event) {
  1952. var currentValue = this.getCurrentTrackingValue();
  1953. var keyCode = !ValueHelper.isNullOrUndefined(event.keyCode)
  1954. ? event.keyCode
  1955. : event.which;
  1956. var keys = {
  1957. 38: 'UP',
  1958. 40: 'DOWN',
  1959. 37: 'LEFT',
  1960. 39: 'RIGHT',
  1961. 33: 'PAGEUP',
  1962. 34: 'PAGEDOWN',
  1963. 36: 'HOME',
  1964. 35: 'END',
  1965. };
  1966. var actions = this.getKeyActions(currentValue);
  1967. var key = keys[keyCode];
  1968. var action = actions[key];
  1969. if (ValueHelper.isNullOrUndefined(action) || ValueHelper.isNullOrUndefined(this.currentTrackingPointer)) {
  1970. return;
  1971. }
  1972. event.preventDefault();
  1973. if (this.firstKeyDown) {
  1974. this.firstKeyDown = false;
  1975. this.userChangeStart.emit(this.getChangeContext());
  1976. }
  1977. var actionValue = MathHelper.clampToRange(action, this.viewOptions.floor, this.viewOptions.ceil);
  1978. var newValue = this.roundStep(actionValue);
  1979. if (!this.viewOptions.draggableRangeOnly) {
  1980. this.positionTrackingHandle(newValue);
  1981. }
  1982. else {
  1983. var difference = this.viewHighValue - this.viewLowValue;
  1984. var newMinValue = void 0;
  1985. var newMaxValue = void 0;
  1986. if (this.currentTrackingPointer === PointerType.Min) {
  1987. newMinValue = newValue;
  1988. newMaxValue = newValue + difference;
  1989. if (newMaxValue > this.viewOptions.ceil) {
  1990. newMaxValue = this.viewOptions.ceil;
  1991. newMinValue = newMaxValue - difference;
  1992. }
  1993. }
  1994. else if (this.currentTrackingPointer === PointerType.Max) {
  1995. newMaxValue = newValue;
  1996. newMinValue = newValue - difference;
  1997. if (newMinValue < this.viewOptions.floor) {
  1998. newMinValue = this.viewOptions.floor;
  1999. newMaxValue = newMinValue + difference;
  2000. }
  2001. }
  2002. this.positionTrackingBar(newMinValue, newMaxValue);
  2003. }
  2004. };
  2005. SliderComponent.prototype.onDragStart = function (pointerType, event, bindMove, bindEnd) {
  2006. var position = this.getEventPosition(event);
  2007. this.dragging = new Dragging();
  2008. this.dragging.active = true;
  2009. this.dragging.value = this.positionToValue(position);
  2010. this.dragging.difference = this.viewHighValue - this.viewLowValue;
  2011. this.dragging.lowLimit = this.viewOptions.rightToLeft
  2012. ? this.minHandleElement.position - position
  2013. : position - this.minHandleElement.position;
  2014. this.dragging.highLimit = this.viewOptions.rightToLeft
  2015. ? position - this.maxHandleElement.position
  2016. : this.maxHandleElement.position - position;
  2017. this.onStart(pointerType, event, bindMove, bindEnd);
  2018. };
  2019. SliderComponent.prototype.getMinValue = function (newPos, outOfBounds, isAbove) {
  2020. var isRTL = this.viewOptions.rightToLeft;
  2021. var value = null;
  2022. if (outOfBounds) {
  2023. if (isAbove) {
  2024. value = isRTL
  2025. ? this.viewOptions.floor
  2026. : this.viewOptions.ceil - this.dragging.difference;
  2027. }
  2028. else {
  2029. value = isRTL
  2030. ? this.viewOptions.ceil - this.dragging.difference
  2031. : this.viewOptions.floor;
  2032. }
  2033. }
  2034. else {
  2035. value = isRTL
  2036. ? this.positionToValue(newPos + this.dragging.lowLimit)
  2037. : this.positionToValue(newPos - this.dragging.lowLimit);
  2038. }
  2039. return this.roundStep(value);
  2040. };
  2041. SliderComponent.prototype.getMaxValue = function (newPos, outOfBounds, isAbove) {
  2042. var isRTL = this.viewOptions.rightToLeft;
  2043. var value = null;
  2044. if (outOfBounds) {
  2045. if (isAbove) {
  2046. value = isRTL
  2047. ? this.viewOptions.floor + this.dragging.difference
  2048. : this.viewOptions.ceil;
  2049. }
  2050. else {
  2051. value = isRTL
  2052. ? this.viewOptions.ceil
  2053. : this.viewOptions.floor + this.dragging.difference;
  2054. }
  2055. }
  2056. else {
  2057. if (isRTL) {
  2058. value =
  2059. this.positionToValue(newPos + this.dragging.lowLimit) +
  2060. this.dragging.difference;
  2061. }
  2062. else {
  2063. value =
  2064. this.positionToValue(newPos - this.dragging.lowLimit) +
  2065. this.dragging.difference;
  2066. }
  2067. }
  2068. return this.roundStep(value);
  2069. };
  2070. SliderComponent.prototype.onDragMove = function (event) {
  2071. var newPos = this.getEventPosition(event);
  2072. var ceilLimit, floorLimit, floorHandleElement, ceilHandleElement;
  2073. if (this.viewOptions.rightToLeft) {
  2074. ceilLimit = this.dragging.lowLimit;
  2075. floorLimit = this.dragging.highLimit;
  2076. floorHandleElement = this.maxHandleElement;
  2077. ceilHandleElement = this.minHandleElement;
  2078. }
  2079. else {
  2080. ceilLimit = this.dragging.highLimit;
  2081. floorLimit = this.dragging.lowLimit;
  2082. floorHandleElement = this.minHandleElement;
  2083. ceilHandleElement = this.maxHandleElement;
  2084. }
  2085. var isUnderFloorLimit = (newPos <= floorLimit);
  2086. var isOverCeilLimit = (newPos >= this.maxHandlePosition - ceilLimit);
  2087. var newMinValue;
  2088. var newMaxValue;
  2089. if (isUnderFloorLimit) {
  2090. if (floorHandleElement.position === 0) {
  2091. return;
  2092. }
  2093. newMinValue = this.getMinValue(newPos, true, false);
  2094. newMaxValue = this.getMaxValue(newPos, true, false);
  2095. }
  2096. else if (isOverCeilLimit) {
  2097. if (ceilHandleElement.position === this.maxHandlePosition) {
  2098. return;
  2099. }
  2100. newMaxValue = this.getMaxValue(newPos, true, true);
  2101. newMinValue = this.getMinValue(newPos, true, true);
  2102. }
  2103. else {
  2104. newMinValue = this.getMinValue(newPos, false, false);
  2105. newMaxValue = this.getMaxValue(newPos, false, false);
  2106. }
  2107. this.positionTrackingBar(newMinValue, newMaxValue);
  2108. };
  2109. SliderComponent.prototype.positionTrackingBar = function (newMinValue, newMaxValue) {
  2110. if (!ValueHelper.isNullOrUndefined(this.viewOptions.minLimit) &&
  2111. newMinValue < this.viewOptions.minLimit) {
  2112. newMinValue = this.viewOptions.minLimit;
  2113. newMaxValue = MathHelper.roundToPrecisionLimit(newMinValue + this.dragging.difference, this.viewOptions.precisionLimit);
  2114. }
  2115. if (!ValueHelper.isNullOrUndefined(this.viewOptions.maxLimit) &&
  2116. newMaxValue > this.viewOptions.maxLimit) {
  2117. newMaxValue = this.viewOptions.maxLimit;
  2118. newMinValue = MathHelper.roundToPrecisionLimit(newMaxValue - this.dragging.difference, this.viewOptions.precisionLimit);
  2119. }
  2120. this.viewLowValue = newMinValue;
  2121. this.viewHighValue = newMaxValue;
  2122. this.applyViewChange();
  2123. this.updateHandles(PointerType.Min, this.valueToPosition(newMinValue));
  2124. this.updateHandles(PointerType.Max, this.valueToPosition(newMaxValue));
  2125. };
  2126. SliderComponent.prototype.positionTrackingHandle = function (newValue) {
  2127. newValue = this.applyMinMaxLimit(newValue);
  2128. if (this.range) {
  2129. if (this.viewOptions.pushRange) {
  2130. newValue = this.applyPushRange(newValue);
  2131. }
  2132. else {
  2133. if (this.viewOptions.noSwitching) {
  2134. if (this.currentTrackingPointer === PointerType.Min &&
  2135. newValue > this.viewHighValue) {
  2136. newValue = this.applyMinMaxRange(this.viewHighValue);
  2137. }
  2138. else if (this.currentTrackingPointer === PointerType.Max &&
  2139. newValue < this.viewLowValue) {
  2140. newValue = this.applyMinMaxRange(this.viewLowValue);
  2141. }
  2142. }
  2143. newValue = this.applyMinMaxRange(newValue);
  2144. if (this.currentTrackingPointer === PointerType.Min && newValue > this.viewHighValue) {
  2145. this.viewLowValue = this.viewHighValue;
  2146. this.applyViewChange();
  2147. this.updateHandles(PointerType.Min, this.maxHandleElement.position);
  2148. this.updateAriaAttributes();
  2149. this.currentTrackingPointer = PointerType.Max;
  2150. this.minHandleElement.active = false;
  2151. this.maxHandleElement.active = true;
  2152. if (this.viewOptions.keyboardSupport) {
  2153. this.maxHandleElement.focus();
  2154. }
  2155. }
  2156. else if (this.currentTrackingPointer === PointerType.Max &&
  2157. newValue < this.viewLowValue) {
  2158. this.viewHighValue = this.viewLowValue;
  2159. this.applyViewChange();
  2160. this.updateHandles(PointerType.Max, this.minHandleElement.position);
  2161. this.updateAriaAttributes();
  2162. this.currentTrackingPointer = PointerType.Min;
  2163. this.maxHandleElement.active = false;
  2164. this.minHandleElement.active = true;
  2165. if (this.viewOptions.keyboardSupport) {
  2166. this.minHandleElement.focus();
  2167. }
  2168. }
  2169. }
  2170. }
  2171. if (this.getCurrentTrackingValue() !== newValue) {
  2172. if (this.currentTrackingPointer === PointerType.Min) {
  2173. this.viewLowValue = newValue;
  2174. this.applyViewChange();
  2175. }
  2176. else if (this.currentTrackingPointer === PointerType.Max) {
  2177. this.viewHighValue = newValue;
  2178. this.applyViewChange();
  2179. }
  2180. this.updateHandles(this.currentTrackingPointer, this.valueToPosition(newValue));
  2181. this.updateAriaAttributes();
  2182. }
  2183. };
  2184. SliderComponent.prototype.applyMinMaxLimit = function (newValue) {
  2185. if (!ValueHelper.isNullOrUndefined(this.viewOptions.minLimit) && newValue < this.viewOptions.minLimit) {
  2186. return this.viewOptions.minLimit;
  2187. }
  2188. if (!ValueHelper.isNullOrUndefined(this.viewOptions.maxLimit) && newValue > this.viewOptions.maxLimit) {
  2189. return this.viewOptions.maxLimit;
  2190. }
  2191. return newValue;
  2192. };
  2193. SliderComponent.prototype.applyMinMaxRange = function (newValue) {
  2194. var oppositeValue = (this.currentTrackingPointer === PointerType.Min)
  2195. ? this.viewHighValue
  2196. : this.viewLowValue;
  2197. var difference = Math.abs(newValue - oppositeValue);
  2198. if (!ValueHelper.isNullOrUndefined(this.viewOptions.minRange)) {
  2199. if (difference < this.viewOptions.minRange) {
  2200. if (this.currentTrackingPointer === PointerType.Min) {
  2201. return MathHelper.roundToPrecisionLimit(this.viewHighValue - this.viewOptions.minRange, this.viewOptions.precisionLimit);
  2202. }
  2203. else if (this.currentTrackingPointer === PointerType.Max) {
  2204. return MathHelper.roundToPrecisionLimit(this.viewLowValue + this.viewOptions.minRange, this.viewOptions.precisionLimit);
  2205. }
  2206. }
  2207. }
  2208. if (!ValueHelper.isNullOrUndefined(this.viewOptions.maxRange)) {
  2209. if (difference > this.viewOptions.maxRange) {
  2210. if (this.currentTrackingPointer === PointerType.Min) {
  2211. return MathHelper.roundToPrecisionLimit(this.viewHighValue - this.viewOptions.maxRange, this.viewOptions.precisionLimit);
  2212. }
  2213. else if (this.currentTrackingPointer === PointerType.Max) {
  2214. return MathHelper.roundToPrecisionLimit(this.viewLowValue + this.viewOptions.maxRange, this.viewOptions.precisionLimit);
  2215. }
  2216. }
  2217. }
  2218. return newValue;
  2219. };
  2220. SliderComponent.prototype.applyPushRange = function (newValue) {
  2221. var difference = (this.currentTrackingPointer === PointerType.Min)
  2222. ? this.viewHighValue - newValue
  2223. : newValue - this.viewLowValue;
  2224. var minRange = (!ValueHelper.isNullOrUndefined(this.viewOptions.minRange))
  2225. ? this.viewOptions.minRange
  2226. : this.viewOptions.step;
  2227. var maxRange = this.viewOptions.maxRange;
  2228. if (difference < minRange) {
  2229. if (this.currentTrackingPointer === PointerType.Min) {
  2230. this.viewHighValue = MathHelper.roundToPrecisionLimit(Math.min(newValue + minRange, this.viewOptions.ceil), this.viewOptions.precisionLimit);
  2231. newValue = MathHelper.roundToPrecisionLimit(this.viewHighValue - minRange, this.viewOptions.precisionLimit);
  2232. this.applyViewChange();
  2233. this.updateHandles(PointerType.Max, this.valueToPosition(this.viewHighValue));
  2234. }
  2235. else if (this.currentTrackingPointer === PointerType.Max) {
  2236. this.viewLowValue = MathHelper.roundToPrecisionLimit(Math.max(newValue - minRange, this.viewOptions.floor), this.viewOptions.precisionLimit);
  2237. newValue = MathHelper.roundToPrecisionLimit(this.viewLowValue + minRange, this.viewOptions.precisionLimit);
  2238. this.applyViewChange();
  2239. this.updateHandles(PointerType.Min, this.valueToPosition(this.viewLowValue));
  2240. }
  2241. this.updateAriaAttributes();
  2242. }
  2243. else if (!ValueHelper.isNullOrUndefined(maxRange) && difference > maxRange) {
  2244. if (this.currentTrackingPointer === PointerType.Min) {
  2245. this.viewHighValue = MathHelper.roundToPrecisionLimit(newValue + maxRange, this.viewOptions.precisionLimit);
  2246. this.applyViewChange();
  2247. this.updateHandles(PointerType.Max, this.valueToPosition(this.viewHighValue));
  2248. }
  2249. else if (this.currentTrackingPointer === PointerType.Max) {
  2250. this.viewLowValue = MathHelper.roundToPrecisionLimit(newValue - maxRange, this.viewOptions.precisionLimit);
  2251. this.applyViewChange();
  2252. this.updateHandles(PointerType.Min, this.valueToPosition(this.viewLowValue));
  2253. }
  2254. this.updateAriaAttributes();
  2255. }
  2256. return newValue;
  2257. };
  2258. SliderComponent.prototype.getChangeContext = function () {
  2259. var changeContext = new ChangeContext();
  2260. changeContext.pointerType = this.currentTrackingPointer;
  2261. changeContext.value = +this.value;
  2262. if (this.range) {
  2263. changeContext.highValue = +this.highValue;
  2264. }
  2265. return changeContext;
  2266. };
  2267. return SliderComponent;
  2268. }());
  2269. SliderComponent.decorators = [
  2270. { type: Component, args: [{
  2271. selector: 'ng5-slider',
  2272. template: "<!-- // 0 Left selection bar outside two handles -->\n<span ng5SliderElement #leftOuterSelectionBar class=\"ng5-slider-span ng5-slider-bar-wrapper ng5-slider-left-out-selection\">\n <span class=\"ng5-slider-span ng5-slider-bar\"></span>\n</span>\n<!-- // 1 Right selection bar outside two handles -->\n<span ng5SliderElement #rightOuterSelectionBar class=\"ng5-slider-span ng5-slider-bar-wrapper ng5-slider-right-out-selection\">\n <span class=\"ng5-slider-span ng5-slider-bar\"></span>\n</span>\n<!-- // 2 The whole slider bar -->\n<span ng5SliderElement #fullBar [class.ng5-slider-transparent]=\"fullBarTransparentClass\" class=\"ng5-slider-span ng5-slider-bar-wrapper ng5-slider-full-bar\">\n <span class=\"ng5-slider-span ng5-slider-bar\"></span>\n</span>\n<!-- // 3 Selection bar between two handles -->\n<span ng5SliderElement #selectionBar [class.ng5-slider-draggable]=\"selectionBarDraggableClass\" class=\"ng5-slider-span ng5-slider-bar-wrapper ng5-slider-selection-bar\">\n <span class=\"ng5-slider-span ng5-slider-bar ng5-slider-selection\" [ngStyle]=\"barStyle\"></span>\n</span>\n<!-- // 4 Low slider handle -->\n<span ng5SliderHandle #minHandle class=\"ng5-slider-span ng5-slider-pointer ng5-slider-pointer-min\" [ngStyle]=minPointerStyle></span>\n<!-- // 5 High slider handle -->\n<span ng5SliderHandle #maxHandle [style.display]=\"range ? 'inherit' : 'none'\" class=\"ng5-slider-span ng5-slider-pointer ng5-slider-pointer-max\" [ngStyle]=maxPointerStyle></span>\n<!-- // 6 Floor label -->\n<span ng5SliderLabel #floorLabel class=\"ng5-slider-span ng5-slider-bubble ng5-slider-limit ng5-slider-floor\"></span>\n<!-- // 7 Ceiling label -->\n<span ng5SliderLabel #ceilLabel class=\"ng5-slider-span ng5-slider-bubble ng5-slider-limit ng5-slider-ceil\"></span>\n<!-- // 8 Label above the low slider handle -->\n<span ng5SliderLabel #minHandleLabel class=\"ng5-slider-span ng5-slider-bubble ng5-slider-model-value\"></span>\n<!-- // 9 Label above the high slider handle -->\n<span ng5SliderLabel #maxHandleLabel class=\"ng5-slider-span ng5-slider-bubble ng5-slider-model-high\"></span>\n<!-- // 10 Combined range label when the slider handles are close ex. 15 - 17 -->\n<span ng5SliderLabel #combinedLabel class=\"ng5-slider-span ng5-slider-bubble ng5-slider-combined\"></span>\n<!-- // 11 The ticks -->\n<span ng5SliderElement #ticksElement [hidden]=\"!showTicks\" [class.ng5-slider-ticks-values-under]=\"ticksUnderValuesClass\" class=\"ng5-slider-ticks\">\n <span *ngFor=\"let t of ticks\" class=\"ng5-slider-tick\" [ngClass]=\"{'ng5-slider-selected': t.selected}\" [ngStyle]=\"t.style\">\n <ng5-slider-tooltip-wrapper [template]=\"tooltipTemplate\" [tooltip]=\"t.tooltip\" [placement]=\"t.tooltipPlacement\"></ng5-slider-tooltip-wrapper>\n <ng5-slider-tooltip-wrapper *ngIf=\"t.value != null\" class=\"ng5-slider-span ng5-slider-tick-value\"\n [template]=\"tooltipTemplate\" [tooltip]=\"t.valueTooltip\" [placement]=\"t.valueTooltipPlacement\" [content]=\"t.value\"></ng5-slider-tooltip-wrapper>\n <span *ngIf=\"t.legend != null\" class=\"ng5-slider-span ng5-slider-tick-legend\" [innerHTML]=\"t.legend\"></span>\n </span>\n</span>",
  2273. styles: ["::ng-deep .ng5-slider{display:inline-block;position:relative;height:4px;width:100%;margin:35px 0 15px;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y}::ng-deep .ng5-slider.with-legend{margin-bottom:40px}::ng-deep .ng5-slider[disabled]{cursor:not-allowed}::ng-deep .ng5-slider[disabled] .ng5-slider-pointer{cursor:not-allowed;background-color:#d8e0f3}::ng-deep .ng5-slider[disabled] .ng5-slider-draggable{cursor:not-allowed}::ng-deep .ng5-slider[disabled] .ng5-slider-selection{background:#8b91a2}::ng-deep .ng5-slider[disabled] .ng5-slider-tick{cursor:not-allowed}::ng-deep .ng5-slider[disabled] .ng5-slider-tick.ng5-slider-selected{background:#8b91a2}::ng-deep .ng5-slider .ng5-slider-span{white-space:nowrap;position:absolute;display:inline-block}::ng-deep .ng5-slider .ng5-slider-base{width:100%;height:100%;padding:0}::ng-deep .ng5-slider .ng5-slider-bar-wrapper{left:0;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:-16px;padding-top:16px;width:100%;height:32px;z-index:1}::ng-deep .ng5-slider .ng5-slider-draggable{cursor:move}::ng-deep .ng5-slider .ng5-slider-bar{left:0;width:100%;height:4px;z-index:1;background:#d8e0f3;border-radius:2px}::ng-deep .ng5-slider .ng5-slider-bar-wrapper.ng5-slider-transparent .ng5-slider-bar{background:0 0}::ng-deep .ng5-slider .ng5-slider-bar-wrapper.ng5-slider-left-out-selection .ng5-slider-bar{background:#df002d}::ng-deep .ng5-slider .ng5-slider-bar-wrapper.ng5-slider-right-out-selection .ng5-slider-bar{background:#03a688}::ng-deep .ng5-slider .ng5-slider-selection{z-index:2;background:#0db9f0;border-radius:2px}::ng-deep .ng5-slider .ng5-slider-pointer{cursor:pointer;width:32px;height:32px;top:-14px;background-color:#0db9f0;z-index:3;border-radius:16px}::ng-deep .ng5-slider .ng5-slider-pointer:after{content:'';width:8px;height:8px;position:absolute;top:12px;left:12px;border-radius:4px;background:#fff}::ng-deep .ng5-slider .ng5-slider-pointer:hover:after{background-color:#fff}::ng-deep .ng5-slider .ng5-slider-pointer.ng5-slider-active{z-index:4}::ng-deep .ng5-slider .ng5-slider-pointer.ng5-slider-active:after{background-color:#451aff}::ng-deep .ng5-slider .ng5-slider-bubble{cursor:default;bottom:16px;padding:1px 3px;color:#55637d;font-size:16px}::ng-deep .ng5-slider .ng5-slider-bubble.ng5-slider-limit{color:#55637d}::ng-deep .ng5-slider .ng5-slider-ticks{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:0;position:absolute;left:0;top:-3px;margin:0;z-index:1;list-style:none}::ng-deep .ng5-slider .ng5-slider-ticks-values-under .ng5-slider-tick-value{top:auto;bottom:-36px}::ng-deep .ng5-slider .ng5-slider-tick{text-align:center;cursor:pointer;width:10px;height:10px;background:#d8e0f3;border-radius:50%;position:absolute;top:0;left:0;margin-left:11px}::ng-deep .ng5-slider .ng5-slider-tick.ng5-slider-selected{background:#0db9f0}::ng-deep .ng5-slider .ng5-slider-tick-value{position:absolute;top:-34px;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}::ng-deep .ng5-slider .ng5-slider-tick-legend{position:absolute;top:24px;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);max-width:50px;white-space:normal}::ng-deep .ng5-slider.vertical{position:relative;width:4px;height:100%;margin:0 20px;padding:0;vertical-align:baseline;-ms-touch-action:pan-x;touch-action:pan-x}::ng-deep .ng5-slider.vertical .ng5-slider-base{width:100%;height:100%;padding:0}::ng-deep .ng5-slider.vertical .ng5-slider-bar-wrapper{top:auto;left:0;margin:0 0 0 -16px;padding:0 0 0 16px;height:100%;width:32px}::ng-deep .ng5-slider.vertical .ng5-slider-bar{bottom:0;left:auto;width:4px;height:100%}::ng-deep .ng5-slider.vertical .ng5-slider-pointer{left:-14px!important;top:auto;bottom:0}::ng-deep .ng5-slider.vertical .ng5-slider-bubble{left:16px!important;bottom:0}::ng-deep .ng5-slider.vertical .ng5-slider-ticks{height:100%;width:0;left:-3px;top:0;z-index:1}::ng-deep .ng5-slider.vertical .ng5-slider-tick{vertical-align:middle;margin-left:auto;margin-top:11px}::ng-deep .ng5-slider.vertical .ng5-slider-tick-value{left:24px;top:auto;-webkit-transform:translate(0,-28%);transform:translate(0,-28%)}::ng-deep .ng5-slider.vertical .ng5-slider-tick-legend{top:auto;right:24px;-webkit-transform:translate(0,-28%);transform:translate(0,-28%);max-width:none;white-space:nowrap}::ng-deep .ng5-slider.vertical .ng5-slider-ticks-values-under .ng5-slider-tick-value{bottom:auto;left:auto;right:24px}::ng-deep .ng5-slider *{-webkit-transition:none;transition:none}::ng-deep .ng5-slider.animate .ng5-slider-bar-wrapper{-webkit-transition:all linear .3s;transition:all linear .3s}::ng-deep .ng5-slider.animate .ng5-slider-selection{-webkit-transition:background-color linear .3s;transition:background-color linear .3s}::ng-deep .ng5-slider.animate .ng5-slider-pointer{-webkit-transition:all linear .3s;transition:all linear .3s}::ng-deep .ng5-slider.animate .ng5-slider-bubble{-webkit-transition:all linear .3s;transition:all linear .3s}::ng-deep .ng5-slider.animate .ng5-slider-bubble.ng5-slider-limit{-webkit-transition:opacity linear .3s;transition:opacity linear .3s}::ng-deep .ng5-slider.animate .ng5-slider-bubble.ng5-slider-combined{-webkit-transition:opacity linear .3s;transition:opacity linear .3s}::ng-deep .ng5-slider.animate .ng5-slider-tick{-webkit-transition:background-color linear .3s;transition:background-color linear .3s}"],
  2274. host: { class: 'ng5-slider' },
  2275. providers: [NG5_SLIDER_CONTROL_VALUE_ACCESSOR]
  2276. },] },
  2277. ];
  2278. SliderComponent.ctorParameters = function () { return [
  2279. { type: Renderer2, },
  2280. { type: ElementRef, },
  2281. { type: ChangeDetectorRef, },
  2282. { type: NgZone, },
  2283. ]; };
  2284. SliderComponent.propDecorators = {
  2285. "value": [{ type: Input },],
  2286. "valueChange": [{ type: Output },],
  2287. "highValue": [{ type: Input },],
  2288. "highValueChange": [{ type: Output },],
  2289. "options": [{ type: Input },],
  2290. "userChangeStart": [{ type: Output },],
  2291. "userChange": [{ type: Output },],
  2292. "userChangeEnd": [{ type: Output },],
  2293. "manualRefresh": [{ type: Input },],
  2294. "triggerFocus": [{ type: Input },],
  2295. "leftOuterSelectionBarElement": [{ type: ViewChild, args: ['leftOuterSelectionBar', { read: SliderElementDirective },] },],
  2296. "rightOuterSelectionBarElement": [{ type: ViewChild, args: ['rightOuterSelectionBar', { read: SliderElementDirective },] },],
  2297. "fullBarElement": [{ type: ViewChild, args: ['fullBar', { read: SliderElementDirective },] },],
  2298. "selectionBarElement": [{ type: ViewChild, args: ['selectionBar', { read: SliderElementDirective },] },],
  2299. "minHandleElement": [{ type: ViewChild, args: ['minHandle', { read: SliderHandleDirective },] },],
  2300. "maxHandleElement": [{ type: ViewChild, args: ['maxHandle', { read: SliderHandleDirective },] },],
  2301. "floorLabelElement": [{ type: ViewChild, args: ['floorLabel', { read: SliderLabelDirective },] },],
  2302. "ceilLabelElement": [{ type: ViewChild, args: ['ceilLabel', { read: SliderLabelDirective },] },],
  2303. "minHandleLabelElement": [{ type: ViewChild, args: ['minHandleLabel', { read: SliderLabelDirective },] },],
  2304. "maxHandleLabelElement": [{ type: ViewChild, args: ['maxHandleLabel', { read: SliderLabelDirective },] },],
  2305. "combinedLabelElement": [{ type: ViewChild, args: ['combinedLabel', { read: SliderLabelDirective },] },],
  2306. "ticksElement": [{ type: ViewChild, args: ['ticksElement', { read: SliderElementDirective },] },],
  2307. "tooltipTemplate": [{ type: ContentChild, args: ['tooltipTemplate',] },],
  2308. "sliderElementVerticalClass": [{ type: HostBinding, args: ['class.vertical',] },],
  2309. "sliderElementAnimateClass": [{ type: HostBinding, args: ['class.animate',] },],
  2310. "sliderElementDisabledAttr": [{ type: HostBinding, args: ['attr.disabled',] },],
  2311. "onResize": [{ type: HostListener, args: ['window:resize', ['$event'],] },],
  2312. };
  2313. var TooltipWrapperComponent = /** @class */ (function () {
  2314. function TooltipWrapperComponent() {
  2315. }
  2316. return TooltipWrapperComponent;
  2317. }());
  2318. TooltipWrapperComponent.decorators = [
  2319. { type: Component, args: [{
  2320. selector: 'ng5-slider-tooltip-wrapper',
  2321. template: "<ng-container *ngIf=\"template\">\n <ng-template *ngTemplateOutlet=\"template; context: {tooltip: tooltip, placement: placement, content: content}\"></ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"!template\">\n <div class=\"ng5-slider-inner-tooltip\" [attr.title]=\"tooltip\" [attr.data-tooltip-placement]=\"placement\">\n {{content}}\n </div>\n</ng-container>",
  2322. styles: [".ng5-slider-inner-tooltip{height:100%}"]
  2323. },] },
  2324. ];
  2325. TooltipWrapperComponent.ctorParameters = function () { return []; };
  2326. TooltipWrapperComponent.propDecorators = {
  2327. "template": [{ type: Input },],
  2328. "tooltip": [{ type: Input },],
  2329. "placement": [{ type: Input },],
  2330. "content": [{ type: Input },],
  2331. };
  2332. var Ng5SliderModule = /** @class */ (function () {
  2333. function Ng5SliderModule() {
  2334. }
  2335. return Ng5SliderModule;
  2336. }());
  2337. Ng5SliderModule.decorators = [
  2338. { type: NgModule, args: [{
  2339. imports: [
  2340. CommonModule
  2341. ],
  2342. declarations: [
  2343. SliderComponent,
  2344. SliderElementDirective,
  2345. SliderHandleDirective,
  2346. SliderLabelDirective,
  2347. TooltipWrapperComponent
  2348. ],
  2349. exports: [
  2350. SliderComponent
  2351. ]
  2352. },] },
  2353. ];
  2354. Ng5SliderModule.ctorParameters = function () { return []; };
  2355. export { Ng5SliderModule, ChangeContext, PointerType, LabelType, Options, SliderElementDirective as ɵb, SliderHandleDirective as ɵc, SliderLabelDirective as ɵd, SliderComponent as ɵa, TooltipWrapperComponent as ɵe };
  2356. //# sourceMappingURL=ng5-slider.js.map