source: trip-planner-front/node_modules/primeng/fesm2020/primeng-slider.mjs@ 6fe77af

Last change on this file since 6fe77af was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

adding photos
  • Property mode set to 100644
File size: 22.2 KB
Line 
1import * as i0 from '@angular/core';
2import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, NgModule } from '@angular/core';
3import * as i1 from '@angular/common';
4import { CommonModule } from '@angular/common';
5import { DomHandler } from 'primeng/dom';
6import { NG_VALUE_ACCESSOR } from '@angular/forms';
7
8const SLIDER_VALUE_ACCESSOR = {
9 provide: NG_VALUE_ACCESSOR,
10 useExisting: forwardRef(() => Slider),
11 multi: true
12};
13class Slider {
14 constructor(el, renderer, ngZone, cd) {
15 this.el = el;
16 this.renderer = renderer;
17 this.ngZone = ngZone;
18 this.cd = cd;
19 this.min = 0;
20 this.max = 100;
21 this.orientation = 'horizontal';
22 this.tabindex = 0;
23 this.onChange = new EventEmitter();
24 this.onSlideEnd = new EventEmitter();
25 this.handleValues = [];
26 this.onModelChange = () => { };
27 this.onModelTouched = () => { };
28 this.handleIndex = 0;
29 }
30 onMouseDown(event, index) {
31 if (this.disabled) {
32 return;
33 }
34 this.dragging = true;
35 this.updateDomData();
36 this.sliderHandleClick = true;
37 if (this.range && this.handleValues && this.handleValues[0] === this.max) {
38 this.handleIndex = 0;
39 }
40 else {
41 this.handleIndex = index;
42 }
43 this.bindDragListeners();
44 event.target.focus();
45 event.preventDefault();
46 if (this.animate) {
47 DomHandler.removeClass(this.el.nativeElement.children[0], 'p-slider-animate');
48 }
49 }
50 onTouchStart(event, index) {
51 if (this.disabled) {
52 return;
53 }
54 var touchobj = event.changedTouches[0];
55 this.startHandleValue = (this.range) ? this.handleValues[index] : this.handleValue;
56 this.dragging = true;
57 if (this.range && this.handleValues && this.handleValues[0] === this.max) {
58 this.handleIndex = 0;
59 }
60 else {
61 this.handleIndex = index;
62 }
63 if (this.orientation === 'horizontal') {
64 this.startx = parseInt(touchobj.clientX, 10);
65 this.barWidth = this.el.nativeElement.children[0].offsetWidth;
66 }
67 else {
68 this.starty = parseInt(touchobj.clientY, 10);
69 this.barHeight = this.el.nativeElement.children[0].offsetHeight;
70 }
71 if (this.animate) {
72 DomHandler.removeClass(this.el.nativeElement.children[0], 'p-slider-animate');
73 }
74 event.preventDefault();
75 }
76 onTouchMove(event, index) {
77 if (this.disabled) {
78 return;
79 }
80 var touchobj = event.changedTouches[0], handleValue = 0;
81 if (this.orientation === 'horizontal') {
82 handleValue = Math.floor(((parseInt(touchobj.clientX, 10) - this.startx) * 100) / (this.barWidth)) + this.startHandleValue;
83 }
84 else {
85 handleValue = Math.floor(((this.starty - parseInt(touchobj.clientY, 10)) * 100) / (this.barHeight)) + this.startHandleValue;
86 }
87 this.setValueFromHandle(event, handleValue);
88 event.preventDefault();
89 }
90 onTouchEnd(event, index) {
91 if (this.disabled) {
92 return;
93 }
94 this.dragging = false;
95 if (this.range)
96 this.onSlideEnd.emit({ originalEvent: event, values: this.values });
97 else
98 this.onSlideEnd.emit({ originalEvent: event, value: this.value });
99 if (this.animate) {
100 DomHandler.addClass(this.el.nativeElement.children[0], 'p-slider-animate');
101 }
102 event.preventDefault();
103 }
104 onBarClick(event) {
105 if (this.disabled) {
106 return;
107 }
108 if (!this.sliderHandleClick) {
109 this.updateDomData();
110 this.handleChange(event);
111 }
112 this.sliderHandleClick = false;
113 }
114 onHandleKeydown(event, handleIndex) {
115 if (this.disabled) {
116 return;
117 }
118 if (event.which == 38 || event.which == 39) {
119 this.spin(event, 1, handleIndex);
120 }
121 else if (event.which == 37 || event.which == 40) {
122 this.spin(event, -1, handleIndex);
123 }
124 }
125 spin(event, dir, handleIndex) {
126 let step = (this.step || 1) * dir;
127 if (this.range) {
128 this.handleIndex = handleIndex;
129 this.updateValue(this.values[this.handleIndex] + step);
130 this.updateHandleValue();
131 }
132 else {
133 this.updateValue(this.value + step);
134 this.updateHandleValue();
135 }
136 event.preventDefault();
137 }
138 handleChange(event) {
139 let handleValue = this.calculateHandleValue(event);
140 this.setValueFromHandle(event, handleValue);
141 }
142 bindDragListeners() {
143 this.ngZone.runOutsideAngular(() => {
144 const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
145 if (!this.dragListener) {
146 this.dragListener = this.renderer.listen(documentTarget, 'mousemove', (event) => {
147 if (this.dragging) {
148 this.ngZone.run(() => {
149 this.handleChange(event);
150 });
151 }
152 });
153 }
154 if (!this.mouseupListener) {
155 this.mouseupListener = this.renderer.listen(documentTarget, 'mouseup', (event) => {
156 if (this.dragging) {
157 this.dragging = false;
158 this.ngZone.run(() => {
159 if (this.range)
160 this.onSlideEnd.emit({ originalEvent: event, values: this.values });
161 else
162 this.onSlideEnd.emit({ originalEvent: event, value: this.value });
163 if (this.animate) {
164 DomHandler.addClass(this.el.nativeElement.children[0], 'p-slider-animate');
165 }
166 });
167 }
168 });
169 }
170 });
171 }
172 unbindDragListeners() {
173 if (this.dragListener) {
174 this.dragListener();
175 }
176 if (this.mouseupListener) {
177 this.mouseupListener();
178 }
179 }
180 setValueFromHandle(event, handleValue) {
181 this.sliderHandleClick = false;
182 let newValue = this.getValueFromHandle(handleValue);
183 if (this.range) {
184 if (this.step) {
185 this.handleStepChange(newValue, this.values[this.handleIndex]);
186 }
187 else {
188 this.handleValues[this.handleIndex] = handleValue;
189 this.updateValue(newValue, event);
190 }
191 }
192 else {
193 if (this.step) {
194 this.handleStepChange(newValue, this.value);
195 }
196 else {
197 this.handleValue = handleValue;
198 this.updateValue(newValue, event);
199 }
200 }
201 this.cd.markForCheck();
202 }
203 handleStepChange(newValue, oldValue) {
204 let diff = (newValue - oldValue);
205 let val = oldValue;
206 if (diff < 0) {
207 val = oldValue + Math.ceil(newValue / this.step - oldValue / this.step) * this.step;
208 }
209 else if (diff > 0) {
210 val = oldValue + Math.floor(newValue / this.step - oldValue / this.step) * this.step;
211 }
212 this.updateValue(val);
213 this.updateHandleValue();
214 }
215 writeValue(value) {
216 if (this.range)
217 this.values = value || [0, 0];
218 else
219 this.value = value || 0;
220 this.updateHandleValue();
221 this.cd.markForCheck();
222 }
223 registerOnChange(fn) {
224 this.onModelChange = fn;
225 }
226 registerOnTouched(fn) {
227 this.onModelTouched = fn;
228 }
229 setDisabledState(val) {
230 this.disabled = val;
231 this.cd.markForCheck();
232 }
233 get rangeStartLeft() {
234 return this.isVertical() ? 'auto' : this.handleValues[0] + '%';
235 }
236 get rangeStartBottom() {
237 return this.isVertical() ? this.handleValues[0] + '%' : 'auto';
238 }
239 get rangeEndLeft() {
240 return this.isVertical() ? 'auto' : this.handleValues[1] + '%';
241 }
242 get rangeEndBottom() {
243 return this.isVertical() ? this.handleValues[1] + '%' : 'auto';
244 }
245 isVertical() {
246 return this.orientation === 'vertical';
247 }
248 updateDomData() {
249 let rect = this.el.nativeElement.children[0].getBoundingClientRect();
250 this.initX = rect.left + DomHandler.getWindowScrollLeft();
251 this.initY = rect.top + DomHandler.getWindowScrollTop();
252 this.barWidth = this.el.nativeElement.children[0].offsetWidth;
253 this.barHeight = this.el.nativeElement.children[0].offsetHeight;
254 }
255 calculateHandleValue(event) {
256 if (this.orientation === 'horizontal')
257 return ((event.pageX - this.initX) * 100) / (this.barWidth);
258 else
259 return (((this.initY + this.barHeight) - event.pageY) * 100) / (this.barHeight);
260 }
261 updateHandleValue() {
262 if (this.range) {
263 this.handleValues[0] = (this.values[0] < this.min ? 0 : this.values[0] - this.min) * 100 / (this.max - this.min);
264 this.handleValues[1] = (this.values[1] > this.max ? 100 : this.values[1] - this.min) * 100 / (this.max - this.min);
265 }
266 else {
267 if (this.value < this.min)
268 this.handleValue = 0;
269 else if (this.value > this.max)
270 this.handleValue = 100;
271 else
272 this.handleValue = (this.value - this.min) * 100 / (this.max - this.min);
273 }
274 }
275 updateValue(val, event) {
276 if (this.range) {
277 let value = val;
278 if (this.handleIndex == 0) {
279 if (value < this.min) {
280 value = this.min;
281 this.handleValues[0] = 0;
282 }
283 else if (value > this.values[1]) {
284 value = this.values[1];
285 this.handleValues[0] = this.handleValues[1];
286 }
287 this.sliderHandleStart.nativeElement.focus();
288 }
289 else {
290 if (value > this.max) {
291 value = this.max;
292 this.handleValues[1] = 100;
293 }
294 else if (value < this.values[0]) {
295 value = this.values[0];
296 this.handleValues[1] = this.handleValues[0];
297 }
298 this.sliderHandleEnd.nativeElement.focus();
299 }
300 this.values[this.handleIndex] = this.getNormalizedValue(value);
301 this.values = this.values.slice();
302 this.onModelChange(this.values);
303 this.onChange.emit({ event: event, values: this.values });
304 }
305 else {
306 if (val < this.min) {
307 val = this.min;
308 this.handleValue = 0;
309 }
310 else if (val > this.max) {
311 val = this.max;
312 this.handleValue = 100;
313 }
314 this.value = this.getNormalizedValue(val);
315 this.onModelChange(this.value);
316 this.onChange.emit({ event: event, value: this.value });
317 this.sliderHandle.nativeElement.focus();
318 }
319 }
320 getValueFromHandle(handleValue) {
321 return (this.max - this.min) * (handleValue / 100) + this.min;
322 }
323 getDecimalsCount(value) {
324 if (value && Math.floor(value) !== value)
325 return value.toString().split(".")[1].length || 0;
326 return 0;
327 }
328 getNormalizedValue(val) {
329 let decimalsCount = this.getDecimalsCount(this.step);
330 if (decimalsCount > 0) {
331 return +val.toFixed(decimalsCount);
332 }
333 else {
334 return Math.floor(val);
335 }
336 }
337 ngOnDestroy() {
338 this.unbindDragListeners();
339 }
340}
341Slider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Slider, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
342Slider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: Slider, selector: "p-slider", inputs: { animate: "animate", disabled: "disabled", min: "min", max: "max", orientation: "orientation", step: "step", range: "range", style: "style", styleClass: "styleClass", ariaLabelledBy: "ariaLabelledBy", tabindex: "tabindex" }, outputs: { onChange: "onChange", onSlideEnd: "onSlideEnd" }, host: { classAttribute: "p-element" }, providers: [SLIDER_VALUE_ACCESSOR], viewQueries: [{ propertyName: "sliderHandle", first: true, predicate: ["sliderHandle"], descendants: true }, { propertyName: "sliderHandleStart", first: true, predicate: ["sliderHandleStart"], descendants: true }, { propertyName: "sliderHandleEnd", first: true, predicate: ["sliderHandleEnd"], descendants: true }], ngImport: i0, template: `
343 <div [ngStyle]="style" [class]="styleClass" [ngClass]="{'p-slider p-component':true,'p-disabled':disabled,
344 'p-slider-horizontal':orientation == 'horizontal','p-slider-vertical':orientation == 'vertical','p-slider-animate':animate}"
345 (click)="onBarClick($event)">
346 <span *ngIf="range && orientation == 'horizontal'" class="p-slider-range" [ngStyle]="{'left':handleValues[0] + '%',width: (handleValues[1] - handleValues[0] + '%')}"></span>
347 <span *ngIf="range && orientation == 'vertical'" class="p-slider-range" [ngStyle]="{'bottom':handleValues[0] + '%',height: (handleValues[1] - handleValues[0] + '%')}"></span>
348 <span *ngIf="!range && orientation=='vertical'" class="p-slider-range" [ngStyle]="{'height': handleValue + '%'}"></span>
349 <span *ngIf="!range && orientation=='horizontal'" class="p-slider-range" [ngStyle]="{'width': handleValue + '%'}"></span>
350 <span #sliderHandle *ngIf="!range" [attr.tabindex]="disabled ? null : tabindex" (keydown)="onHandleKeydown($event)" class="p-slider-handle" (mousedown)="onMouseDown($event)" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)"
351 [style.transition]="dragging ? 'none': null" [ngStyle]="{'left': orientation == 'horizontal' ? handleValue + '%' : null,'bottom': orientation == 'vertical' ? handleValue + '%' : null}"
352 [attr.aria-valuemin]="min" [attr.aria-valuenow]="value" [attr.aria-valuemax]="max" [attr.aria-labelledby]="ariaLabelledBy"></span>
353 <span #sliderHandleStart *ngIf="range" [attr.tabindex]="disabled ? null : tabindex" (keydown)="onHandleKeydown($event,0)" (mousedown)="onMouseDown($event,0)" (touchstart)="onTouchStart($event,0)" (touchmove)="onTouchMove($event,0)" (touchend)="onTouchEnd($event)" [style.transition]="dragging ? 'none': null" class="p-slider-handle"
354 [ngStyle]="{'left': rangeStartLeft, 'bottom': rangeStartBottom}" [ngClass]="{'p-slider-handle-active':handleIndex==0}"
355 [attr.aria-valuemin]="min" [attr.aria-valuenow]="value ? value[0] : null" [attr.aria-valuemax]="max" [attr.aria-labelledby]="ariaLabelledBy"></span>
356 <span #sliderHandleEnd *ngIf="range" [attr.tabindex]="disabled ? null : tabindex" (keydown)="onHandleKeydown($event,1)" (mousedown)="onMouseDown($event,1)" (touchstart)="onTouchStart($event,1)" (touchmove)="onTouchMove($event,1)" (touchend)="onTouchEnd($event)" [style.transition]="dragging ? 'none': null" class="p-slider-handle"
357 [ngStyle]="{'left': rangeEndLeft, 'bottom': rangeEndBottom}" [ngClass]="{'p-slider-handle-active':handleIndex==1}"
358 [attr.aria-valuemin]="min" [attr.aria-valuenow]="value ? value[1] : null" [attr.aria-valuemax]="max" [attr.aria-labelledby]="ariaLabelledBy"></span>
359 </div>
360 `, isInline: true, styles: [".p-slider{position:relative}.p-slider .p-slider-handle{position:absolute;cursor:grab;touch-action:none;display:block}.p-slider-range{position:absolute;display:block}.p-slider-horizontal .p-slider-range{top:0;left:0;height:100%}.p-slider-horizontal .p-slider-handle{top:50%}.p-slider-vertical{height:100px}.p-slider-vertical .p-slider-handle{left:50%}.p-slider-vertical .p-slider-range{bottom:0;left:0;width:100%}\n"], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
361i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Slider, decorators: [{
362 type: Component,
363 args: [{ selector: 'p-slider', template: `
364 <div [ngStyle]="style" [class]="styleClass" [ngClass]="{'p-slider p-component':true,'p-disabled':disabled,
365 'p-slider-horizontal':orientation == 'horizontal','p-slider-vertical':orientation == 'vertical','p-slider-animate':animate}"
366 (click)="onBarClick($event)">
367 <span *ngIf="range && orientation == 'horizontal'" class="p-slider-range" [ngStyle]="{'left':handleValues[0] + '%',width: (handleValues[1] - handleValues[0] + '%')}"></span>
368 <span *ngIf="range && orientation == 'vertical'" class="p-slider-range" [ngStyle]="{'bottom':handleValues[0] + '%',height: (handleValues[1] - handleValues[0] + '%')}"></span>
369 <span *ngIf="!range && orientation=='vertical'" class="p-slider-range" [ngStyle]="{'height': handleValue + '%'}"></span>
370 <span *ngIf="!range && orientation=='horizontal'" class="p-slider-range" [ngStyle]="{'width': handleValue + '%'}"></span>
371 <span #sliderHandle *ngIf="!range" [attr.tabindex]="disabled ? null : tabindex" (keydown)="onHandleKeydown($event)" class="p-slider-handle" (mousedown)="onMouseDown($event)" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd($event)"
372 [style.transition]="dragging ? 'none': null" [ngStyle]="{'left': orientation == 'horizontal' ? handleValue + '%' : null,'bottom': orientation == 'vertical' ? handleValue + '%' : null}"
373 [attr.aria-valuemin]="min" [attr.aria-valuenow]="value" [attr.aria-valuemax]="max" [attr.aria-labelledby]="ariaLabelledBy"></span>
374 <span #sliderHandleStart *ngIf="range" [attr.tabindex]="disabled ? null : tabindex" (keydown)="onHandleKeydown($event,0)" (mousedown)="onMouseDown($event,0)" (touchstart)="onTouchStart($event,0)" (touchmove)="onTouchMove($event,0)" (touchend)="onTouchEnd($event)" [style.transition]="dragging ? 'none': null" class="p-slider-handle"
375 [ngStyle]="{'left': rangeStartLeft, 'bottom': rangeStartBottom}" [ngClass]="{'p-slider-handle-active':handleIndex==0}"
376 [attr.aria-valuemin]="min" [attr.aria-valuenow]="value ? value[0] : null" [attr.aria-valuemax]="max" [attr.aria-labelledby]="ariaLabelledBy"></span>
377 <span #sliderHandleEnd *ngIf="range" [attr.tabindex]="disabled ? null : tabindex" (keydown)="onHandleKeydown($event,1)" (mousedown)="onMouseDown($event,1)" (touchstart)="onTouchStart($event,1)" (touchmove)="onTouchMove($event,1)" (touchend)="onTouchEnd($event)" [style.transition]="dragging ? 'none': null" class="p-slider-handle"
378 [ngStyle]="{'left': rangeEndLeft, 'bottom': rangeEndBottom}" [ngClass]="{'p-slider-handle-active':handleIndex==1}"
379 [attr.aria-valuemin]="min" [attr.aria-valuenow]="value ? value[1] : null" [attr.aria-valuemax]="max" [attr.aria-labelledby]="ariaLabelledBy"></span>
380 </div>
381 `, providers: [SLIDER_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
382 'class': 'p-element'
383 }, styles: [".p-slider{position:relative}.p-slider .p-slider-handle{position:absolute;cursor:grab;touch-action:none;display:block}.p-slider-range{position:absolute;display:block}.p-slider-horizontal .p-slider-range{top:0;left:0;height:100%}.p-slider-horizontal .p-slider-handle{top:50%}.p-slider-vertical{height:100px}.p-slider-vertical .p-slider-handle{left:50%}.p-slider-vertical .p-slider-range{bottom:0;left:0;width:100%}\n"] }]
384 }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { animate: [{
385 type: Input
386 }], disabled: [{
387 type: Input
388 }], min: [{
389 type: Input
390 }], max: [{
391 type: Input
392 }], orientation: [{
393 type: Input
394 }], step: [{
395 type: Input
396 }], range: [{
397 type: Input
398 }], style: [{
399 type: Input
400 }], styleClass: [{
401 type: Input
402 }], ariaLabelledBy: [{
403 type: Input
404 }], tabindex: [{
405 type: Input
406 }], onChange: [{
407 type: Output
408 }], onSlideEnd: [{
409 type: Output
410 }], sliderHandle: [{
411 type: ViewChild,
412 args: ["sliderHandle"]
413 }], sliderHandleStart: [{
414 type: ViewChild,
415 args: ["sliderHandleStart"]
416 }], sliderHandleEnd: [{
417 type: ViewChild,
418 args: ["sliderHandleEnd"]
419 }] } });
420class SliderModule {
421}
422SliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
423SliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderModule, declarations: [Slider], imports: [CommonModule], exports: [Slider] });
424SliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderModule, imports: [[CommonModule]] });
425i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderModule, decorators: [{
426 type: NgModule,
427 args: [{
428 imports: [CommonModule],
429 exports: [Slider],
430 declarations: [Slider]
431 }]
432 }] });
433
434/**
435 * Generated bundle index. Do not edit.
436 */
437
438export { SLIDER_VALUE_ACCESSOR, Slider, SliderModule };
Note: See TracBrowser for help on using the repository browser.