range-knob.js 2.3KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
  2. import { KEY_DOWN, KEY_LEFT, KEY_RIGHT, KEY_UP } from '../../platform/key';
  3. /**
  4. * @hidden
  5. */
  6. export class RangeKnob {
  7. constructor() {
  8. this.ionIncrease = new EventEmitter();
  9. this.ionDecrease = new EventEmitter();
  10. }
  11. set ratio(r) {
  12. this._x = `${r * 100}%`;
  13. }
  14. _keyup(ev) {
  15. const keyCode = ev.keyCode;
  16. if (keyCode === KEY_LEFT || keyCode === KEY_DOWN) {
  17. (void 0) /* console.debug */;
  18. this.ionDecrease.emit();
  19. ev.preventDefault();
  20. ev.stopPropagation();
  21. }
  22. else if (keyCode === KEY_RIGHT || keyCode === KEY_UP) {
  23. (void 0) /* console.debug */;
  24. this.ionIncrease.emit();
  25. ev.preventDefault();
  26. ev.stopPropagation();
  27. }
  28. }
  29. }
  30. RangeKnob.decorators = [
  31. { type: Component, args: [{
  32. selector: '.range-knob-handle',
  33. template: '<div class="range-pin" *ngIf="pin" role="presentation">{{val}}</div>' +
  34. '<div class="range-knob" role="presentation"></div>',
  35. host: {
  36. '[class.range-knob-pressed]': 'pressed',
  37. '[class.range-knob-min]': 'val===min||val===undefined',
  38. '[class.range-knob-max]': 'val===max',
  39. '[style.left]': '_x',
  40. '[attr.aria-valuenow]': 'val',
  41. '[attr.aria-valuemin]': 'min',
  42. '[attr.aria-valuemax]': 'max',
  43. '[attr.aria-disabled]': 'disabled',
  44. '[attr.aria-labelledby]': 'labelId',
  45. '[tabindex]': 'disabled?-1:0',
  46. 'role': 'slider'
  47. }
  48. },] },
  49. ];
  50. /** @nocollapse */
  51. RangeKnob.ctorParameters = () => [];
  52. RangeKnob.propDecorators = {
  53. 'ratio': [{ type: Input },],
  54. 'pressed': [{ type: Input },],
  55. 'pin': [{ type: Input },],
  56. 'min': [{ type: Input },],
  57. 'max': [{ type: Input },],
  58. 'val': [{ type: Input },],
  59. 'disabled': [{ type: Input },],
  60. 'labelId': [{ type: Input },],
  61. 'ionIncrease': [{ type: Output },],
  62. 'ionDecrease': [{ type: Output },],
  63. '_keyup': [{ type: HostListener, args: ['keydown', ['$event'],] },],
  64. };
  65. //# sourceMappingURL=range-knob.js.map