| [59329aa] | 1 | import * as i0 from '@angular/core';
|
|---|
| 2 | import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, NgModule } from '@angular/core';
|
|---|
| 3 | import * as i1 from '@angular/common';
|
|---|
| 4 | import { CommonModule } from '@angular/common';
|
|---|
| 5 | import { DomHandler } from 'primeng/dom';
|
|---|
| 6 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|---|
| 7 |
|
|---|
| 8 | const SLIDER_VALUE_ACCESSOR = {
|
|---|
| 9 | provide: NG_VALUE_ACCESSOR,
|
|---|
| 10 | useExisting: forwardRef(() => Slider),
|
|---|
| 11 | multi: true
|
|---|
| 12 | };
|
|---|
| 13 | class 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 | }
|
|---|
| 341 | Slider.ɵ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 });
|
|---|
| 342 | Slider.ɵ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 });
|
|---|
| 361 | i0.ɵɵ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 | }] } });
|
|---|
| 420 | class SliderModule {
|
|---|
| 421 | }
|
|---|
| 422 | SliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|---|
| 423 | SliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderModule, declarations: [Slider], imports: [CommonModule], exports: [Slider] });
|
|---|
| 424 | SliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderModule, imports: [[CommonModule]] });
|
|---|
| 425 | i0.ɵɵ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 |
|
|---|
| 438 | export { SLIDER_VALUE_ACCESSOR, Slider, SliderModule };
|
|---|
