@ng-matero/extensions 15.2.1 → 15.4.0

package/fesm2015/mtxSlider.mjs

@@ -48,149 +48,6 @@ const _MtxSliderBase = mixinTabIndex(mixinColor(mixinDisabled(class {
  * behavior to the native `<input type="range">` element.
  */
 class MtxSlider extends _MtxSliderBase {
-    constructor(elementRef, _focusMonitor, _changeDetectorRef, _dir, tabIndex, 
-    // @breaking-change 7.0.0 `_animationMode` parameter to be made required.
-    _animationMode, _ngZone) {
-        super(elementRef);
-        this._focusMonitor = _focusMonitor;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._dir = _dir;
-        this._animationMode = _animationMode;
-        this._ngZone = _ngZone;
-        this._invert = false;
-        this._max = 100;
-        this._min = 0;
-        this._step = 1;
-        this._thumbLabel = false;
-        this._tickInterval = 0;
-        this._value = null;
-        this._vertical = false;
-        /** Event emitted when the slider value has changed. */
-        this.change = new EventEmitter();
-        /** Event emitted when the slider thumb moves. */
-        this.input = new EventEmitter();
-        /**
-         * Emits when the raw value of the slider changes. This is here primarily
-         * to facilitate the two-way binding for the `value` input.
-         * @docs-private
-         */
-        this.valueChange = new EventEmitter();
-        /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
-        this.onTouched = () => { };
-        this._percent = 0;
-        /**
-         * Whether or not the thumb is sliding.
-         * Used to determine if there should be a transition for the thumb and fill track.
-         */
-        this._isSliding = false;
-        /**
-         * Whether or not the slider is active (clicked or sliding).
-         * Used to shrink and grow the thumb as according to the Material Design spec.
-         */
-        this._isActive = false;
-        /** The size of a tick interval as a percentage of the size of the track. */
-        this._tickIntervalPercent = 0;
-        /** The dimensions of the slider. */
-        this._sliderDimensions = null;
-        this._controlValueAccessorChangeFn = () => { };
-        /** Subscription to the Directionality change EventEmitter. */
-        this._dirChangeSubscription = Subscription.EMPTY;
-        /** The slider thumb which is currently used (left or right) */
-        this._currentSliderDir = 'l';
-        /** Called when the user has put their pointer down on the slider. */
-        this._pointerDown = (event) => {
-            // Don't do anything if the slider is disabled or the
-            // user is using anything other than the main mouse button.
-            if (this.disabled || this._isSliding || (!isTouchEvent(event) && event.button !== 0)) {
-                return;
-            }
-            this.calculateInitialSlideDirection(event);
-            this._runInsideZone(() => {
-                const oldValue = this.value;
-                const pointerPosition = getPointerPositionOnPage(event);
-                this._isSliding = true;
-                event.preventDefault();
-                this._focusHostElement();
-                this._onMouseenter(); // Simulate mouseenter in case this is a mobile device.
-                this._bindGlobalEvents(event);
-                this._focusHostElement();
-                // TODO:
-                // this._updateValueFromPosition(pointerPosition);
-                if (this.value instanceof Array) {
-                    if (this._currentSliderDir === 'l') {
-                        this._updateValueFromPositionLeft(pointerPosition);
-                    }
-                    else if (this._currentSliderDir === 'r') {
-                        this._updateValueFromPositionRight(pointerPosition);
-                    }
-                }
-                else {
-                    this._updateValueFromPositionLeft(pointerPosition);
-                }
-                this._valueOnSlideStart = this.value;
-                this._pointerPositionOnStart = pointerPosition;
-                // Emit a change and input event if the value changed.
-                if (oldValue !== this.value) {
-                    this._emitInputEvent();
-                    this._emitChangeEvent();
-                }
-            });
-        };
-        /**
-         * Called when the user has moved their pointer after
-         * starting to drag. Bound on the document level.
-         */
-        this._pointerMove = (event) => {
-            if (this._isSliding) {
-                this.calculateInitialSlideDirection(event);
-                // Prevent the slide from selecting anything else.
-                event.preventDefault();
-                const oldValue = this.value;
-                // TODO:
-                // this._updateValueFromPosition(getPointerPositionOnPage(event));
-                const pointerPosition = getPointerPositionOnPage(event);
-                if (this._currentSliderDir === 'l') {
-                    this._updateValueFromPositionLeft(pointerPosition);
-                }
-                else if (this._currentSliderDir === 'r') {
-                    this._updateValueFromPositionRight(pointerPosition);
-                }
-                else {
-                    if (!this.isRangeSlider()) {
-                        this._updateValueFromPositionLeft(pointerPosition);
-                    }
-                }
-                // Native range elements always emit `input` events when the value changed while sliding.
-                if (oldValue !== this.value) {
-                    this._emitInputEvent();
-                }
-            }
-        };
-        /** Called when the user has lifted their pointer. Bound on the document level. */
-        this._pointerUp = (event) => {
-            if (this._isSliding) {
-                const pointerPositionOnStart = this._pointerPositionOnStart;
-                const currentPointerPosition = getPointerPositionOnPage(event);
-                event.preventDefault();
-                this._removeGlobalEvents();
-                this._valueOnSlideStart = this._pointerPositionOnStart = null;
-                this._isSliding = false;
-                if (this._valueOnSlideStart !== this.value &&
-                    !this.disabled &&
-                    pointerPositionOnStart &&
-                    (pointerPositionOnStart.x !== currentPointerPosition.x ||
-                        pointerPositionOnStart.y !== currentPointerPosition.y)) {
-                    this._emitChangeEvent();
-                }
-            }
-        };
-        this.tabIndex = parseInt(tabIndex, 10) || 0;
-        this._runOutsizeZone(() => {
-            const element = elementRef.nativeElement;
-            element.addEventListener('mousedown', this._pointerDown, activeEventOptions);
-            element.addEventListener('touchstart', this._pointerDown, activeEventOptions);
-        });
-    }
     /** Whether the slider is inverted. */
     get invert() {
         return this._invert;
@@ -550,6 +407,149 @@ class MtxSlider extends _MtxSliderBase {
     _getDirection() {
         return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
     }
+    constructor(elementRef, _focusMonitor, _changeDetectorRef, _dir, tabIndex, 
+    // @breaking-change 7.0.0 `_animationMode` parameter to be made required.
+    _animationMode, _ngZone) {
+        super(elementRef);
+        this._focusMonitor = _focusMonitor;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._dir = _dir;
+        this._animationMode = _animationMode;
+        this._ngZone = _ngZone;
+        this._invert = false;
+        this._max = 100;
+        this._min = 0;
+        this._step = 1;
+        this._thumbLabel = false;
+        this._tickInterval = 0;
+        this._value = null;
+        this._vertical = false;
+        /** Event emitted when the slider value has changed. */
+        this.change = new EventEmitter();
+        /** Event emitted when the slider thumb moves. */
+        this.input = new EventEmitter();
+        /**
+         * Emits when the raw value of the slider changes. This is here primarily
+         * to facilitate the two-way binding for the `value` input.
+         * @docs-private
+         */
+        this.valueChange = new EventEmitter();
+        /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
+        this.onTouched = () => { };
+        this._percent = 0;
+        /**
+         * Whether or not the thumb is sliding.
+         * Used to determine if there should be a transition for the thumb and fill track.
+         */
+        this._isSliding = false;
+        /**
+         * Whether or not the slider is active (clicked or sliding).
+         * Used to shrink and grow the thumb as according to the Material Design spec.
+         */
+        this._isActive = false;
+        /** The size of a tick interval as a percentage of the size of the track. */
+        this._tickIntervalPercent = 0;
+        /** The dimensions of the slider. */
+        this._sliderDimensions = null;
+        this._controlValueAccessorChangeFn = () => { };
+        /** Subscription to the Directionality change EventEmitter. */
+        this._dirChangeSubscription = Subscription.EMPTY;
+        /** The slider thumb which is currently used (left or right) */
+        this._currentSliderDir = 'l';
+        /** Called when the user has put their pointer down on the slider. */
+        this._pointerDown = (event) => {
+            // Don't do anything if the slider is disabled or the
+            // user is using anything other than the main mouse button.
+            if (this.disabled || this._isSliding || (!isTouchEvent(event) && event.button !== 0)) {
+                return;
+            }
+            this.calculateInitialSlideDirection(event);
+            this._runInsideZone(() => {
+                const oldValue = this.value;
+                const pointerPosition = getPointerPositionOnPage(event);
+                this._isSliding = true;
+                event.preventDefault();
+                this._focusHostElement();
+                this._onMouseenter(); // Simulate mouseenter in case this is a mobile device.
+                this._bindGlobalEvents(event);
+                this._focusHostElement();
+                // TODO:
+                // this._updateValueFromPosition(pointerPosition);
+                if (this.value instanceof Array) {
+                    if (this._currentSliderDir === 'l') {
+                        this._updateValueFromPositionLeft(pointerPosition);
+                    }
+                    else if (this._currentSliderDir === 'r') {
+                        this._updateValueFromPositionRight(pointerPosition);
+                    }
+                }
+                else {
+                    this._updateValueFromPositionLeft(pointerPosition);
+                }
+                this._valueOnSlideStart = this.value;
+                this._pointerPositionOnStart = pointerPosition;
+                // Emit a change and input event if the value changed.
+                if (oldValue !== this.value) {
+                    this._emitInputEvent();
+                    this._emitChangeEvent();
+                }
+            });
+        };
+        /**
+         * Called when the user has moved their pointer after
+         * starting to drag. Bound on the document level.
+         */
+        this._pointerMove = (event) => {
+            if (this._isSliding) {
+                this.calculateInitialSlideDirection(event);
+                // Prevent the slide from selecting anything else.
+                event.preventDefault();
+                const oldValue = this.value;
+                // TODO:
+                // this._updateValueFromPosition(getPointerPositionOnPage(event));
+                const pointerPosition = getPointerPositionOnPage(event);
+                if (this._currentSliderDir === 'l') {
+                    this._updateValueFromPositionLeft(pointerPosition);
+                }
+                else if (this._currentSliderDir === 'r') {
+                    this._updateValueFromPositionRight(pointerPosition);
+                }
+                else {
+                    if (!this.isRangeSlider()) {
+                        this._updateValueFromPositionLeft(pointerPosition);
+                    }
+                }
+                // Native range elements always emit `input` events when the value changed while sliding.
+                if (oldValue !== this.value) {
+                    this._emitInputEvent();
+                }
+            }
+        };
+        /** Called when the user has lifted their pointer. Bound on the document level. */
+        this._pointerUp = (event) => {
+            if (this._isSliding) {
+                const pointerPositionOnStart = this._pointerPositionOnStart;
+                const currentPointerPosition = getPointerPositionOnPage(event);
+                event.preventDefault();
+                this._removeGlobalEvents();
+                this._valueOnSlideStart = this._pointerPositionOnStart = null;
+                this._isSliding = false;
+                if (this._valueOnSlideStart !== this.value &&
+                    !this.disabled &&
+                    pointerPositionOnStart &&
+                    (pointerPositionOnStart.x !== currentPointerPosition.x ||
+                        pointerPositionOnStart.y !== currentPointerPosition.y)) {
+                    this._emitChangeEvent();
+                }
+            }
+        };
+        this.tabIndex = parseInt(tabIndex, 10) || 0;
+        this._runOutsizeZone(() => {
+            const element = elementRef.nativeElement;
+            element.addEventListener('mousedown', this._pointerDown, activeEventOptions);
+            element.addEventListener('touchstart', this._pointerDown, activeEventOptions);
+        });
+    }
     ngOnInit() {
         this._focusMonitor.monitor(this._elementRef, true).subscribe((origin) => {
             this._isActive = !!origin && origin !== 'keyboard';
@@ -1021,9 +1021,9 @@ class MtxSlider extends _MtxSliderBase {
         }
     }
 }
-/** @nocollapse */ MtxSlider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MtxSlider, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i2.Directionality, optional: true }, { token: 'tabindex', attribute: true }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ MtxSlider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: MtxSlider, selector: "mtx-slider", inputs: { disabled: "disabled", color: "color", tabIndex: "tabIndex", invert: "invert", max: "max", min: "min", step: "step", thumbLabel: "thumbLabel", tickInterval: "tickInterval", value: "value", displayWith: "displayWith", valueText: "valueText", vertical: "vertical" }, outputs: { change: "change", input: "input", valueChange: "valueChange" }, host: { attributes: { "role": "slider" }, listeners: { "focus": "_onFocus()", "blur": "_onBlur()", "click": "_onClick($event)", "keydown": "_onKeydown($event)", "keyup": "_onKeyup()", "mouseenter": "_onMouseenter()", "selectstart": "$event.preventDefault()" }, properties: { "tabIndex": "tabIndex", "attr.aria-disabled": "disabled", "attr.aria-valuemax": "max", "attr.aria-valuemin": "min", "attr.aria-valuenow": "value", "attr.aria-valuetext": "valueText == null ? displayValue : valueText", "attr.aria-orientation": "vertical ? \"vertical\" : \"horizontal\"", "class.mtx-slider-disabled": "disabled", "class.mtx-slider-has-ticks": "tickInterval", "class.mtx-slider-horizontal": "!vertical", "class.mtx-slider-axis-inverted": "_invertAxis", "class.mtx-slider-sliding": "_isSliding", "class.mtx-slider-thumb-label-showing": "thumbLabel", "class.mtx-slider-vertical": "vertical", "class.mtx-slider-min-value": "_isMinValue", "class.mtx-range-slider": "isRangeSlider()", "class.mtx-slider-hide-last-tick": "disabled || _isMinValue && _thumbGap && _invertAxis", "class._mtx-animation-noopable": "_animationMode === \"NoopAnimations\"" }, classAttribute: "mtx-slider mat-focus-indicator" }, providers: [MTX_SLIDER_VALUE_ACCESSOR], viewQueries: [{ propertyName: "_sliderWrapper", first: true, predicate: ["sliderWrapper"], descendants: true }], exportAs: ["mtxSlider"], usesInheritance: true, ngImport: i0, template: "<div class=\"mtx-slider-wrapper\" #sliderWrapper>\n  <div class=\"mtx-slider-track-wrapper\">\n    <div *ngIf=\"isRangeSlider()\"\n         class=\"mtx-slider-track-background mtx-slider-track-background-left\"\n         [ngStyle]=\"_trackBackgroundStylesLeft\"></div>\n    <div class=\"mtx-slider-track-background mtx-slider-track-background-right\"\n         [ngStyle]=\"_trackBackgroundStylesRight\"></div>\n    <div class=\"mtx-slider-track-fill\" [ngClass]=\"{'mtx-range-slider-fill': isRangeSlider()}\"\n         [ngStyle]=\"_trackFillStyles\"></div>\n  </div>\n  <div class=\"mtx-slider-ticks-container\" [ngStyle]=\"_ticksContainerStyles\">\n    <div class=\"mtx-slider-ticks\" [ngStyle]=\"_ticksStyles\"></div>\n  </div>\n  <div class=\"mtx-slider-thumb-container\" #leftSlider\n       [ngStyle]=\"_thumbContainerStylesLeft\">\n    <div class=\"mtx-slider-focus-ring\"></div>\n    <div class=\"mtx-slider-thumb left\"></div>\n    <div class=\"mtx-slider-thumb-label\">\n      <span class=\"mtx-slider-thumb-label-text\">{{displayValue}}</span>\n    </div>\n  </div>\n  <div *ngIf=\"isRangeSlider()\"\n       class=\"mtx-slider-thumb-container\" #rightSlider\n       [ngStyle]=\"_thumbContainerStylesRight\">\n    <div class=\"mtx-slider-focus-ring\"></div>\n    <div class=\"mtx-slider-thumb right\"></div>\n    <div class=\"mtx-slider-thumb-label\">\n      <span class=\"mtx-slider-thumb-label-text\">{{displayValueRight}}</span>\n    </div>\n  </div>\n</div>\n", styles: [".mtx-slider{display:inline-block;position:relative;box-sizing:border-box;padding:8px;outline:none;vertical-align:middle}.mtx-slider:not(.mtx-slider-disabled):active,.mtx-slider.mtx-slider-sliding:not(.mtx-slider-disabled){cursor:grabbing}.mtx-slider-wrapper{-webkit-print-color-adjust:exact;print-color-adjust:exact;position:absolute}.mtx-slider-track-wrapper{position:absolute;top:0;left:0;overflow:hidden}.mtx-slider-track-fill,.mtx-slider-track-background-left{position:absolute;transform-origin:0 0;transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider-track-background-right{position:absolute;transform-origin:100% 100%;transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider-ticks-container{position:absolute;left:0;top:0;overflow:hidden}.mtx-slider-ticks{-webkit-background-clip:content-box;background-repeat:repeat;background-clip:content-box;box-sizing:border-box;opacity:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider-thumb-container{position:absolute;z-index:1;transition:transform .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider-focus-ring{position:absolute;width:30px;height:30px;border-radius:50%;transform:scale(0);opacity:0;transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),opacity .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider.cdk-keyboard-focused .mtx-slider-focus-ring,.mtx-slider.cdk-program-focused .mtx-slider-focus-ring{transform:scale(1);opacity:1}.mtx-slider:not(.mtx-slider-disabled,.mtx-slider-sliding) .mtx-slider-thumb-label,.mtx-slider:not(.mtx-slider-disabled,.mtx-slider-sliding) .mtx-slider-thumb{cursor:grab}.mtx-slider-thumb{position:absolute;right:-10px;bottom:-10px;box-sizing:border-box;width:20px;height:20px;border:3px solid transparent;border-radius:50%;transform:scale(.7);transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),border-color .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider-thumb-label{display:none;align-items:center;justify-content:center;position:absolute;width:28px;height:28px;border-radius:50%;transition:transform .4s cubic-bezier(.25,.8,.25,1),border-radius .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}.cdk-high-contrast-active .mtx-slider-thumb-label{outline:solid 1px}.mtx-slider-thumb-label-text{z-index:1;opacity:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider-sliding .mtx-slider-track-fill,.mtx-slider-sliding .mtx-slider-track-background-left,.mtx-slider-sliding .mtx-slider-track-background-right,.mtx-slider-sliding .mtx-slider-thumb-container{transition-duration:0ms}.mtx-slider-has-ticks .mtx-slider-wrapper:after{content:\"\";position:absolute;border-width:0;border-style:solid;opacity:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider-has-ticks.cdk-focused:not(.mtx-slider-hide-last-tick) .mtx-slider-wrapper:after,.mtx-slider-has-ticks:hover:not(.mtx-slider-hide-last-tick) .mtx-slider-wrapper:after{opacity:1}.mtx-slider-has-ticks.cdk-focused:not(.mtx-slider-disabled) .mtx-slider-ticks,.mtx-slider-has-ticks:hover:not(.mtx-slider-disabled) .mtx-slider-ticks{opacity:1}.mtx-slider-thumb-label-showing .mtx-slider-focus-ring{display:none}.mtx-slider-thumb-label-showing .mtx-slider-thumb-label{display:flex}.mtx-slider-axis-inverted .mtx-slider-track-fill{transform-origin:100% 100%}.mtx-slider-axis-inverted .mtx-slider-track-fill.mtx-range-slider-fill{transform-origin:0 0}.mtx-slider-axis-inverted .mtx-slider-track-background-left{transform-origin:100% 100%}.mtx-slider-axis-inverted .mtx-slider-track-background-right{transform-origin:0 0}.mtx-slider:not(.mtx-slider-disabled).cdk-focused.mtx-slider-thumb-label-showing .mtx-slider-thumb{transform:scale(0)}.mtx-slider:not(.mtx-slider-disabled).cdk-focused .mtx-slider-thumb-label{border-radius:50% 50% 0}.mtx-slider:not(.mtx-slider-disabled).cdk-focused .mtx-slider-thumb-label-text{opacity:1}.mtx-slider:not(.mtx-slider-disabled).cdk-mouse-focused .mtx-slider-thumb,.mtx-slider:not(.mtx-slider-disabled).cdk-touch-focused .mtx-slider-thumb,.mtx-slider:not(.mtx-slider-disabled).cdk-program-focused .mtx-slider-thumb{border-width:2px;transform:scale(1)}.mtx-slider-disabled .mtx-slider-focus-ring{transform:scale(0);opacity:0}.mtx-slider-disabled .mtx-slider-thumb{border-width:4px;transform:scale(.5)}.mtx-slider-disabled .mtx-slider-thumb-label{display:none}.mtx-slider-horizontal{height:48px;min-width:128px}.mtx-slider-horizontal .mtx-slider-wrapper{height:2px;top:23px;left:8px;right:8px}.mtx-slider-horizontal .mtx-slider-wrapper:after{height:2px;border-left-width:2px;right:0;top:0}.mtx-slider-horizontal .mtx-slider-track-wrapper{height:2px;width:100%}.mtx-slider-horizontal .mtx-slider-track-fill{height:2px;width:100%;transform:scaleX(0)}.mtx-slider-horizontal .mtx-slider-track-background-left,.mtx-slider-horizontal .mtx-slider-track-background-right{height:2px;width:100%;transform:scaleX(1)}.mtx-slider-horizontal .mtx-slider-ticks-container{height:2px;width:100%}.cdk-high-contrast-active .mtx-slider-horizontal .mtx-slider-ticks-container{height:0;outline:solid 2px;top:1px}.mtx-slider-horizontal .mtx-slider-ticks{height:2px;width:100%}.mtx-slider-horizontal .mtx-slider-thumb-container{width:100%;height:0;top:50%}.mtx-slider-horizontal .mtx-slider-focus-ring{top:-15px;right:-15px}.mtx-slider-horizontal .mtx-slider-thumb-label{right:-14px;top:-40px;transform:translateY(26px) scale(.01) rotate(45deg)}.mtx-slider-horizontal .mtx-slider-thumb-label-text{transform:rotate(-45deg)}.mtx-slider-horizontal.cdk-focused .mtx-slider-thumb-label{transform:rotate(45deg)}.cdk-high-contrast-active .mtx-slider-horizontal.cdk-focused .mtx-slider-thumb-label,.cdk-high-contrast-active .mtx-slider-horizontal.cdk-focused .mtx-slider-thumb-label-text{transform:none}.mtx-slider-vertical{width:48px;min-height:128px}.mtx-slider-vertical .mtx-slider-wrapper{width:2px;top:8px;bottom:8px;left:23px}.mtx-slider-vertical .mtx-slider-wrapper:after{width:2px;border-top-width:2px;bottom:0;left:0}.mtx-slider-vertical .mtx-slider-track-wrapper{height:100%;width:2px}.mtx-slider-vertical .mtx-slider-track-fill{height:100%;width:2px;transform:scaleY(0)}.mtx-slider-vertical .mtx-slider-track-background-left,.mtx-slider-vertical .mtx-slider-track-background-right{height:100%;width:2px;transform:scaleY(1)}.mtx-slider-vertical .mtx-slider-ticks-container{width:2px;height:100%}.cdk-high-contrast-active .mtx-slider-vertical .mtx-slider-ticks-container{width:0;outline:solid 2px;left:1px}.mtx-slider-vertical .mtx-slider-focus-ring{bottom:-15px;left:-15px}.mtx-slider-vertical .mtx-slider-ticks{width:2px;height:100%}.mtx-slider-vertical .mtx-slider-thumb-container{height:100%;width:0;left:50%}.mtx-slider-vertical .mtx-slider-thumb{-webkit-backface-visibility:hidden;backface-visibility:hidden}.mtx-slider-vertical .mtx-slider-thumb-label{bottom:-14px;left:-40px;transform:translate(26px) scale(.01) rotate(-45deg)}.mtx-slider-vertical .mtx-slider-thumb-label-text{transform:rotate(45deg)}.mtx-slider-vertical.cdk-focused .mtx-slider-thumb-label{transform:rotate(-45deg)}[dir=rtl] .mtx-slider-wrapper:after{left:0;right:auto}[dir=rtl] .mtx-slider-horizontal .mtx-slider-track-fill:not(.mtx-range-slider-fill){transform-origin:100% 100%}[dir=rtl] .mtx-slider-horizontal .mtx-slider-track-background-left{transform-origin:100% 100%}[dir=rtl] .mtx-slider-horizontal .mtx-slider-track-background-right,[dir=rtl] .mtx-slider-horizontal.mtx-slider-axis-inverted .mtx-slider-track-fill,[dir=rtl] .mtx-slider-horizontal.mtx-slider-axis-inverted .mtx-slider-track-background-left{transform-origin:0 0}[dir=rtl] .mtx-slider-horizontal.mtx-slider-axis-inverted .mtx-slider-track-background-right{transform-origin:100% 100%}.mtx-slider._mtx-animation-noopable .mtx-slider-track-fill,.mtx-slider._mtx-animation-noopable .mtx-slider-track-background-left,.mtx-slider._mtx-animation-noopable .mtx-slider-track-background-right,.mtx-slider._mtx-animation-noopable .mtx-slider-ticks,.mtx-slider._mtx-animation-noopable .mtx-slider-thumb-container,.mtx-slider._mtx-animation-noopable .mtx-slider-focus-ring,.mtx-slider._mtx-animation-noopable .mtx-slider-thumb,.mtx-slider._mtx-animation-noopable .mtx-slider-thumb-label,.mtx-slider._mtx-animation-noopable .mtx-slider-thumb-label-text,.mtx-slider._mtx-animation-noopable .mtx-slider-has-ticks .mtx-slider-wrapper:after{transition:none}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MtxSlider, decorators: [{
+/** @nocollapse */ MtxSlider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MtxSlider, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i2.Directionality, optional: true }, { token: 'tabindex', attribute: true }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ MtxSlider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: MtxSlider, selector: "mtx-slider", inputs: { disabled: "disabled", color: "color", tabIndex: "tabIndex", invert: "invert", max: "max", min: "min", step: "step", thumbLabel: "thumbLabel", tickInterval: "tickInterval", value: "value", displayWith: "displayWith", valueText: "valueText", vertical: "vertical" }, outputs: { change: "change", input: "input", valueChange: "valueChange" }, host: { attributes: { "role": "slider" }, listeners: { "focus": "_onFocus()", "blur": "_onBlur()", "click": "_onClick($event)", "keydown": "_onKeydown($event)", "keyup": "_onKeyup()", "mouseenter": "_onMouseenter()", "selectstart": "$event.preventDefault()" }, properties: { "tabIndex": "tabIndex", "attr.aria-disabled": "disabled", "attr.aria-valuemax": "max", "attr.aria-valuemin": "min", "attr.aria-valuenow": "value", "attr.aria-valuetext": "valueText == null ? displayValue : valueText", "attr.aria-orientation": "vertical ? \"vertical\" : \"horizontal\"", "class.mtx-slider-disabled": "disabled", "class.mtx-slider-has-ticks": "tickInterval", "class.mtx-slider-horizontal": "!vertical", "class.mtx-slider-axis-inverted": "_invertAxis", "class.mtx-slider-sliding": "_isSliding", "class.mtx-slider-thumb-label-showing": "thumbLabel", "class.mtx-slider-vertical": "vertical", "class.mtx-slider-min-value": "_isMinValue", "class.mtx-range-slider": "isRangeSlider()", "class.mtx-slider-hide-last-tick": "disabled || _isMinValue && _thumbGap && _invertAxis", "class._mtx-animation-noopable": "_animationMode === \"NoopAnimations\"" }, classAttribute: "mtx-slider mat-focus-indicator" }, providers: [MTX_SLIDER_VALUE_ACCESSOR], viewQueries: [{ propertyName: "_sliderWrapper", first: true, predicate: ["sliderWrapper"], descendants: true }], exportAs: ["mtxSlider"], usesInheritance: true, ngImport: i0, template: "<div class=\"mtx-slider-wrapper\" #sliderWrapper>\n  <div class=\"mtx-slider-track-wrapper\">\n    <div *ngIf=\"isRangeSlider()\"\n         class=\"mtx-slider-track-background mtx-slider-track-background-left\"\n         [ngStyle]=\"_trackBackgroundStylesLeft\"></div>\n    <div class=\"mtx-slider-track-background mtx-slider-track-background-right\"\n         [ngStyle]=\"_trackBackgroundStylesRight\"></div>\n    <div class=\"mtx-slider-track-fill\" [ngClass]=\"{'mtx-range-slider-fill': isRangeSlider()}\"\n         [ngStyle]=\"_trackFillStyles\"></div>\n  </div>\n  <div class=\"mtx-slider-ticks-container\" [ngStyle]=\"_ticksContainerStyles\">\n    <div class=\"mtx-slider-ticks\" [ngStyle]=\"_ticksStyles\"></div>\n  </div>\n  <div class=\"mtx-slider-thumb-container\" #leftSlider\n       [ngStyle]=\"_thumbContainerStylesLeft\">\n    <div class=\"mtx-slider-focus-ring\"></div>\n    <div class=\"mtx-slider-thumb left\"></div>\n    <div class=\"mtx-slider-thumb-label\">\n      <span class=\"mtx-slider-thumb-label-text\">{{displayValue}}</span>\n    </div>\n  </div>\n  <div *ngIf=\"isRangeSlider()\"\n       class=\"mtx-slider-thumb-container\" #rightSlider\n       [ngStyle]=\"_thumbContainerStylesRight\">\n    <div class=\"mtx-slider-focus-ring\"></div>\n    <div class=\"mtx-slider-thumb right\"></div>\n    <div class=\"mtx-slider-thumb-label\">\n      <span class=\"mtx-slider-thumb-label-text\">{{displayValueRight}}</span>\n    </div>\n  </div>\n</div>\n", styles: [".mtx-slider{display:inline-block;position:relative;box-sizing:border-box;padding:8px;outline:none;vertical-align:middle}.mtx-slider:not(.mtx-slider-disabled):active,.mtx-slider.mtx-slider-sliding:not(.mtx-slider-disabled){cursor:grabbing}.mtx-slider-wrapper{-webkit-print-color-adjust:exact;print-color-adjust:exact;position:absolute}.mtx-slider-track-wrapper{position:absolute;top:0;left:0;overflow:hidden}.mtx-slider-track-fill,.mtx-slider-track-background-left{position:absolute;transform-origin:0 0;transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider-track-background-right{position:absolute;transform-origin:100% 100%;transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider-ticks-container{position:absolute;left:0;top:0;overflow:hidden}.mtx-slider-ticks{-webkit-background-clip:content-box;background-repeat:repeat;background-clip:content-box;box-sizing:border-box;opacity:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider-thumb-container{position:absolute;z-index:1;transition:transform .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider-focus-ring{position:absolute;width:30px;height:30px;border-radius:50%;transform:scale(0);opacity:0;transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),opacity .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider.cdk-keyboard-focused .mtx-slider-focus-ring,.mtx-slider.cdk-program-focused .mtx-slider-focus-ring{transform:scale(1);opacity:1}.mtx-slider:not(.mtx-slider-disabled,.mtx-slider-sliding) .mtx-slider-thumb-label,.mtx-slider:not(.mtx-slider-disabled,.mtx-slider-sliding) .mtx-slider-thumb{cursor:grab}.mtx-slider-thumb{position:absolute;right:-10px;bottom:-10px;box-sizing:border-box;width:20px;height:20px;border:3px solid transparent;border-radius:50%;transform:scale(.7);transition:transform .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1),border-color .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider-thumb-label{display:none;align-items:center;justify-content:center;position:absolute;width:28px;height:28px;border-radius:50%;transition:transform .4s cubic-bezier(.25,.8,.25,1),border-radius .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1)}.cdk-high-contrast-active .mtx-slider-thumb-label{outline:solid 1px}.mtx-slider-thumb-label-text{z-index:1;opacity:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider-sliding .mtx-slider-track-fill,.mtx-slider-sliding .mtx-slider-track-background-left,.mtx-slider-sliding .mtx-slider-track-background-right,.mtx-slider-sliding .mtx-slider-thumb-container{transition-duration:0ms}.mtx-slider-has-ticks .mtx-slider-wrapper:after{content:\"\";position:absolute;border-width:0;border-style:solid;opacity:0;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}.mtx-slider-has-ticks.cdk-focused:not(.mtx-slider-hide-last-tick) .mtx-slider-wrapper:after,.mtx-slider-has-ticks:hover:not(.mtx-slider-hide-last-tick) .mtx-slider-wrapper:after{opacity:1}.mtx-slider-has-ticks.cdk-focused:not(.mtx-slider-disabled) .mtx-slider-ticks,.mtx-slider-has-ticks:hover:not(.mtx-slider-disabled) .mtx-slider-ticks{opacity:1}.mtx-slider-thumb-label-showing .mtx-slider-focus-ring{display:none}.mtx-slider-thumb-label-showing .mtx-slider-thumb-label{display:flex}.mtx-slider-axis-inverted .mtx-slider-track-fill{transform-origin:100% 100%}.mtx-slider-axis-inverted .mtx-slider-track-fill.mtx-range-slider-fill{transform-origin:0 0}.mtx-slider-axis-inverted .mtx-slider-track-background-left{transform-origin:100% 100%}.mtx-slider-axis-inverted .mtx-slider-track-background-right{transform-origin:0 0}.mtx-slider:not(.mtx-slider-disabled).cdk-focused.mtx-slider-thumb-label-showing .mtx-slider-thumb{transform:scale(0)}.mtx-slider:not(.mtx-slider-disabled).cdk-focused .mtx-slider-thumb-label{border-radius:50% 50% 0}.mtx-slider:not(.mtx-slider-disabled).cdk-focused .mtx-slider-thumb-label-text{opacity:1}.mtx-slider:not(.mtx-slider-disabled).cdk-mouse-focused .mtx-slider-thumb,.mtx-slider:not(.mtx-slider-disabled).cdk-touch-focused .mtx-slider-thumb,.mtx-slider:not(.mtx-slider-disabled).cdk-program-focused .mtx-slider-thumb{border-width:2px;transform:scale(1)}.mtx-slider-disabled .mtx-slider-focus-ring{transform:scale(0);opacity:0}.mtx-slider-disabled .mtx-slider-thumb{border-width:4px;transform:scale(.5)}.mtx-slider-disabled .mtx-slider-thumb-label{display:none}.mtx-slider-horizontal{height:48px;min-width:128px}.mtx-slider-horizontal .mtx-slider-wrapper{height:2px;top:23px;left:8px;right:8px}.mtx-slider-horizontal .mtx-slider-wrapper:after{height:2px;border-left-width:2px;right:0;top:0}.mtx-slider-horizontal .mtx-slider-track-wrapper{height:2px;width:100%}.mtx-slider-horizontal .mtx-slider-track-fill{height:2px;width:100%;transform:scaleX(0)}.mtx-slider-horizontal .mtx-slider-track-background-left,.mtx-slider-horizontal .mtx-slider-track-background-right{height:2px;width:100%;transform:scaleX(1)}.mtx-slider-horizontal .mtx-slider-ticks-container{height:2px;width:100%}.cdk-high-contrast-active .mtx-slider-horizontal .mtx-slider-ticks-container{height:0;outline:solid 2px;top:1px}.mtx-slider-horizontal .mtx-slider-ticks{height:2px;width:100%}.mtx-slider-horizontal .mtx-slider-thumb-container{width:100%;height:0;top:50%}.mtx-slider-horizontal .mtx-slider-focus-ring{top:-15px;right:-15px}.mtx-slider-horizontal .mtx-slider-thumb-label{right:-14px;top:-40px;transform:translateY(26px) scale(.01) rotate(45deg)}.mtx-slider-horizontal .mtx-slider-thumb-label-text{transform:rotate(-45deg)}.mtx-slider-horizontal.cdk-focused .mtx-slider-thumb-label{transform:rotate(45deg)}.cdk-high-contrast-active .mtx-slider-horizontal.cdk-focused .mtx-slider-thumb-label,.cdk-high-contrast-active .mtx-slider-horizontal.cdk-focused .mtx-slider-thumb-label-text{transform:none}.mtx-slider-vertical{width:48px;min-height:128px}.mtx-slider-vertical .mtx-slider-wrapper{width:2px;top:8px;bottom:8px;left:23px}.mtx-slider-vertical .mtx-slider-wrapper:after{width:2px;border-top-width:2px;bottom:0;left:0}.mtx-slider-vertical .mtx-slider-track-wrapper{height:100%;width:2px}.mtx-slider-vertical .mtx-slider-track-fill{height:100%;width:2px;transform:scaleY(0)}.mtx-slider-vertical .mtx-slider-track-background-left,.mtx-slider-vertical .mtx-slider-track-background-right{height:100%;width:2px;transform:scaleY(1)}.mtx-slider-vertical .mtx-slider-ticks-container{width:2px;height:100%}.cdk-high-contrast-active .mtx-slider-vertical .mtx-slider-ticks-container{width:0;outline:solid 2px;left:1px}.mtx-slider-vertical .mtx-slider-focus-ring{bottom:-15px;left:-15px}.mtx-slider-vertical .mtx-slider-ticks{width:2px;height:100%}.mtx-slider-vertical .mtx-slider-thumb-container{height:100%;width:0;left:50%}.mtx-slider-vertical .mtx-slider-thumb{-webkit-backface-visibility:hidden;backface-visibility:hidden}.mtx-slider-vertical .mtx-slider-thumb-label{bottom:-14px;left:-40px;transform:translate(26px) scale(.01) rotate(-45deg)}.mtx-slider-vertical .mtx-slider-thumb-label-text{transform:rotate(45deg)}.mtx-slider-vertical.cdk-focused .mtx-slider-thumb-label{transform:rotate(-45deg)}[dir=rtl] .mtx-slider-wrapper:after{left:0;right:auto}[dir=rtl] .mtx-slider-horizontal .mtx-slider-track-fill:not(.mtx-range-slider-fill){transform-origin:100% 100%}[dir=rtl] .mtx-slider-horizontal .mtx-slider-track-background-left{transform-origin:100% 100%}[dir=rtl] .mtx-slider-horizontal .mtx-slider-track-background-right,[dir=rtl] .mtx-slider-horizontal.mtx-slider-axis-inverted .mtx-slider-track-fill,[dir=rtl] .mtx-slider-horizontal.mtx-slider-axis-inverted .mtx-slider-track-background-left{transform-origin:0 0}[dir=rtl] .mtx-slider-horizontal.mtx-slider-axis-inverted .mtx-slider-track-background-right{transform-origin:100% 100%}.mtx-slider._mtx-animation-noopable .mtx-slider-track-fill,.mtx-slider._mtx-animation-noopable .mtx-slider-track-background-left,.mtx-slider._mtx-animation-noopable .mtx-slider-track-background-right,.mtx-slider._mtx-animation-noopable .mtx-slider-ticks,.mtx-slider._mtx-animation-noopable .mtx-slider-thumb-container,.mtx-slider._mtx-animation-noopable .mtx-slider-focus-ring,.mtx-slider._mtx-animation-noopable .mtx-slider-thumb,.mtx-slider._mtx-animation-noopable .mtx-slider-thumb-label,.mtx-slider._mtx-animation-noopable .mtx-slider-thumb-label-text,.mtx-slider._mtx-animation-noopable .mtx-slider-has-ticks .mtx-slider-wrapper:after{transition:none}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MtxSlider, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-slider', exportAs: 'mtxSlider', providers: [MTX_SLIDER_VALUE_ACCESSOR], host: {
                         '(focus)': '_onFocus()',
@@ -1119,10 +1119,10 @@ function getPointerPositionOnPage(event) {
 
 class MtxSliderModule {
 }
-/** @nocollapse */ MtxSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MtxSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ MtxSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.1", ngImport: i0, type: MtxSliderModule, declarations: [MtxSlider], imports: [CommonModule, MatCommonModule], exports: [MtxSlider, MatCommonModule] });
-/** @nocollapse */ MtxSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MtxSliderModule, imports: [CommonModule, MatCommonModule, MatCommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MtxSliderModule, decorators: [{
+/** @nocollapse */ MtxSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MtxSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ MtxSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: MtxSliderModule, declarations: [MtxSlider], imports: [CommonModule, MatCommonModule], exports: [MtxSlider, MatCommonModule] });
+/** @nocollapse */ MtxSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MtxSliderModule, imports: [CommonModule, MatCommonModule, MatCommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: MtxSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatCommonModule],