@angular/material-experimental 14.2.1 → 15.0.0-next.0

package/fesm2015/mdc-slider.mjs

@@ -1,1212 +0,0 @@
-import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i3 from '@angular/cdk/platform';
-import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
-import * as i1 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, Inject, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, EventEmitter, Directive, Output, Optional, ViewChildren, ContentChildren, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MatRipple, mixinColor, mixinDisableRipple, MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';
-import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
-import { Thumb, MDCSliderFoundation, TickMark } from '@material/slider';
-import { Subject, fromEvent, Subscription } from 'rxjs';
-import * as i2 from '@angular/material-experimental/mdc-core';
-import { MatCommonModule, MatRippleModule } from '@angular/material-experimental/mdc-core';
-import { takeUntil, finalize, share } from 'rxjs/operators';
-import * as i5 from '@angular/cdk/bidi';
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-/**
- * Handles listening for all change and input events that occur on the document.
- *
- * This service exposes a single method #listen to allow users to subscribe to change and input
- * events that occur on the document. Since listening for these events can be expensive, we use
- * #fromEvent which will lazily attach a listener when the first subscription is made and remove the
- * listener once the last observer unsubscribes.
- */
-class GlobalChangeAndInputListener {
-    constructor(document, _ngZone) {
-        this._ngZone = _ngZone;
-        /** Stores the subjects that emit the events that occur on the global document. */
-        this._observables = new Map();
-        /** The notifier that triggers the global event observables to stop emitting and complete. */
-        this._destroyed = new Subject();
-        this._document = document;
-    }
-    ngOnDestroy() {
-        this._destroyed.next();
-        this._destroyed.complete();
-        this._observables.clear();
-    }
-    /** Returns a subscription to global change or input events. */
-    listen(type, callback) {
-        // If this is the first time we are listening to this event, create the observable for it.
-        if (!this._observables.has(type)) {
-            this._observables.set(type, this._createGlobalEventObservable(type));
-        }
-        return this._ngZone.runOutsideAngular(() => this._observables
-            .get(type)
-            .subscribe((event) => this._ngZone.run(() => callback(event))));
-    }
-    /** Creates an observable that emits all events of the given type. */
-    _createGlobalEventObservable(type) {
-        return fromEvent(this._document, type, { capture: true, passive: true }).pipe(takeUntil(this._destroyed), finalize(() => this._observables.delete(type)), share());
-    }
-}
-GlobalChangeAndInputListener.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GlobalChangeAndInputListener, deps: [{ token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-GlobalChangeAndInputListener.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GlobalChangeAndInputListener, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: GlobalChangeAndInputListener, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [DOCUMENT]
-                    }] }, { type: i0.NgZone }];
-    } });
-
-/** Options used to bind passive event listeners. */
-const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
-/**
- * The visual slider thumb.
- *
- * Handles the slider thumb ripple states (hover, focus, and active),
- * and displaying the value tooltip on discrete sliders.
- * @docs-private
- */
-class MatSliderVisualThumb {
-    constructor(_ngZone, _slider, _elementRef) {
-        this._ngZone = _ngZone;
-        this._slider = _slider;
-        this._elementRef = _elementRef;
-        /** Whether ripples on the slider thumb should be disabled. */
-        this.disableRipple = false;
-        /** Whether the slider thumb is currently being pressed. */
-        this._isActive = false;
-        /** Whether the slider thumb is currently being hovered. */
-        this._isHovered = false;
-        this._onMouseEnter = () => {
-            this._isHovered = true;
-            // We don't want to show the hover ripple on top of the focus ripple.
-            // This can happen if the user tabs to a thumb and then the user moves their cursor over it.
-            if (!this._isShowingRipple(this._focusRippleRef)) {
-                this._showHoverRipple();
-            }
-        };
-        this._onMouseLeave = () => {
-            var _a;
-            this._isHovered = false;
-            (_a = this._hoverRippleRef) === null || _a === void 0 ? void 0 : _a.fadeOut();
-        };
-    }
-    ngAfterViewInit() {
-        this._ripple.radius = 24;
-        this._sliderInput = this._slider._getInput(this.thumbPosition);
-        // Note that we don't unsubscribe from these, because they're complete on destroy.
-        this._sliderInput.dragStart.subscribe(event => this._onDragStart(event));
-        this._sliderInput.dragEnd.subscribe(event => this._onDragEnd(event));
-        this._sliderInput._focus.subscribe(() => this._onFocus());
-        this._sliderInput._blur.subscribe(() => this._onBlur());
-        // These two listeners don't update any data bindings so we bind them
-        // outside of the NgZone to prevent Angular from needlessly running change detection.
-        this._ngZone.runOutsideAngular(() => {
-            this._elementRef.nativeElement.addEventListener('mouseenter', this._onMouseEnter);
-            this._elementRef.nativeElement.addEventListener('mouseleave', this._onMouseLeave);
-        });
-    }
-    ngOnDestroy() {
-        this._elementRef.nativeElement.removeEventListener('mouseenter', this._onMouseEnter);
-        this._elementRef.nativeElement.removeEventListener('mouseleave', this._onMouseLeave);
-    }
-    /** Used to append a class to indicate when the value indicator text is short. */
-    _isShortValue() {
-        var _a;
-        return ((_a = this.valueIndicatorText) === null || _a === void 0 ? void 0 : _a.length) <= 2;
-    }
-    _onFocus() {
-        var _a;
-        // We don't want to show the hover ripple on top of the focus ripple.
-        // Happen when the users cursor is over a thumb and then the user tabs to it.
-        (_a = this._hoverRippleRef) === null || _a === void 0 ? void 0 : _a.fadeOut();
-        this._showFocusRipple();
-    }
-    _onBlur() {
-        var _a;
-        // Happens when the user tabs away while still dragging a thumb.
-        if (!this._isActive) {
-            (_a = this._focusRippleRef) === null || _a === void 0 ? void 0 : _a.fadeOut();
-        }
-        // Happens when the user tabs away from a thumb but their cursor is still over it.
-        if (this._isHovered) {
-            this._showHoverRipple();
-        }
-    }
-    _onDragStart(event) {
-        if (event.source._thumbPosition === this.thumbPosition) {
-            this._isActive = true;
-            this._showActiveRipple();
-        }
-    }
-    _onDragEnd(event) {
-        var _a, _b;
-        if (event.source._thumbPosition === this.thumbPosition) {
-            this._isActive = false;
-            (_a = this._activeRippleRef) === null || _a === void 0 ? void 0 : _a.fadeOut();
-            // Happens when the user starts dragging a thumb, tabs away, and then stops dragging.
-            if (!this._sliderInput._isFocused()) {
-                (_b = this._focusRippleRef) === null || _b === void 0 ? void 0 : _b.fadeOut();
-            }
-        }
-    }
-    /** Handles displaying the hover ripple. */
-    _showHoverRipple() {
-        var _a;
-        if (!this._isShowingRipple(this._hoverRippleRef)) {
-            this._hoverRippleRef = this._showRipple({ enterDuration: 0, exitDuration: 0 });
-            (_a = this._hoverRippleRef) === null || _a === void 0 ? void 0 : _a.element.classList.add('mat-mdc-slider-hover-ripple');
-        }
-    }
-    /** Handles displaying the focus ripple. */
-    _showFocusRipple() {
-        var _a;
-        // Show the focus ripple event if noop animations are enabled.
-        if (!this._isShowingRipple(this._focusRippleRef)) {
-            this._focusRippleRef = this._showRipple({ enterDuration: 0, exitDuration: 0 });
-            (_a = this._focusRippleRef) === null || _a === void 0 ? void 0 : _a.element.classList.add('mat-mdc-slider-focus-ripple');
-        }
-    }
-    /** Handles displaying the active ripple. */
-    _showActiveRipple() {
-        var _a;
-        if (!this._isShowingRipple(this._activeRippleRef)) {
-            this._activeRippleRef = this._showRipple({ enterDuration: 225, exitDuration: 400 });
-            (_a = this._activeRippleRef) === null || _a === void 0 ? void 0 : _a.element.classList.add('mat-mdc-slider-active-ripple');
-        }
-    }
-    /** Whether the given rippleRef is currently fading in or visible. */
-    _isShowingRipple(rippleRef) {
-        return (rippleRef === null || rippleRef === void 0 ? void 0 : rippleRef.state) === 0 /* RippleState.FADING_IN */ || (rippleRef === null || rippleRef === void 0 ? void 0 : rippleRef.state) === 1 /* RippleState.VISIBLE */;
-    }
-    /** Manually launches the slider thumb ripple using the specified ripple animation config. */
-    _showRipple(animation) {
-        if (this.disableRipple) {
-            return;
-        }
-        return this._ripple.launch({
-            animation: this._slider._noopAnimations ? { enterDuration: 0, exitDuration: 0 } : animation,
-            centered: true,
-            persistent: true,
-        });
-    }
-    /** Gets the hosts native HTML element. */
-    _getHostElement() {
-        return this._elementRef.nativeElement;
-    }
-    /** Gets the native HTML element of the slider thumb knob. */
-    _getKnob() {
-        return this._knob.nativeElement;
-    }
-    /**
-     * Gets the native HTML element of the slider thumb value indicator
-     * container.
-     */
-    _getValueIndicatorContainer() {
-        return this._valueIndicatorContainer.nativeElement;
-    }
-}
-MatSliderVisualThumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MatSliderVisualThumb, deps: [{ token: i0.NgZone }, { token: forwardRef(() => MatSlider) }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-MatSliderVisualThumb.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MatSliderVisualThumb, selector: "mat-slider-visual-thumb", inputs: { discrete: "discrete", thumbPosition: "thumbPosition", valueIndicatorText: "valueIndicatorText", disableRipple: "disableRipple" }, host: { properties: { "class.mdc-slider__thumb--short-value": "_isShortValue()" }, classAttribute: "mdc-slider__thumb mat-mdc-slider-visual-thumb" }, viewQueries: [{ propertyName: "_ripple", first: true, predicate: MatRipple, descendants: true }, { propertyName: "_knob", first: true, predicate: ["knob"], descendants: true }, { propertyName: "_valueIndicatorContainer", first: true, predicate: ["valueIndicatorContainer"], descendants: true }], ngImport: i0, template: "<div class=\"mdc-slider__value-indicator-container\" *ngIf=\"discrete\" #valueIndicatorContainer>\n  <div class=\"mdc-slider__value-indicator\">\n    <span class=\"mdc-slider__value-indicator-text\">{{valueIndicatorText}}</span>\n  </div>\n</div>\n<div class=\"mdc-slider__thumb-knob\" #knob></div>\n<div\n  matRipple\n  class=\"mat-mdc-focus-indicator\"\n  [matRippleDisabled]=\"true\"></div>\n", styles: [".mat-mdc-slider-visual-thumb .mat-ripple{height:100%;width:100%}"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MatSliderVisualThumb, decorators: [{
-            type: Component,
-            args: [{ selector: 'mat-slider-visual-thumb', host: {
-                        'class': 'mdc-slider__thumb mat-mdc-slider-visual-thumb',
-                        // NOTE: This class is used internally.
-                        // TODO(wagnermaciel): Remove this once it is handled by the mdc foundation (cl/388828896).
-                        '[class.mdc-slider__thumb--short-value]': '_isShortValue()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"mdc-slider__value-indicator-container\" *ngIf=\"discrete\" #valueIndicatorContainer>\n  <div class=\"mdc-slider__value-indicator\">\n    <span class=\"mdc-slider__value-indicator-text\">{{valueIndicatorText}}</span>\n  </div>\n</div>\n<div class=\"mdc-slider__thumb-knob\" #knob></div>\n<div\n  matRipple\n  class=\"mat-mdc-focus-indicator\"\n  [matRippleDisabled]=\"true\"></div>\n", styles: [".mat-mdc-slider-visual-thumb .mat-ripple{height:100%;width:100%}"] }]
-        }], ctorParameters: function () {
-        return [{ type: i0.NgZone }, { type: MatSlider, decorators: [{
-                        type: Inject,
-                        args: [forwardRef(() => MatSlider)]
-                    }] }, { type: i0.ElementRef }];
-    }, propDecorators: { discrete: [{
-                type: Input
-            }], thumbPosition: [{
-                type: Input
-            }], valueIndicatorText: [{
-                type: Input
-            }], disableRipple: [{
-                type: Input
-            }], _ripple: [{
-                type: ViewChild,
-                args: [MatRipple]
-            }], _knob: [{
-                type: ViewChild,
-                args: ['knob']
-            }], _valueIndicatorContainer: [{
-                type: ViewChild,
-                args: ['valueIndicatorContainer']
-            }] } });
-/**
- * Directive that adds slider-specific behaviors to an input element inside `<mat-slider>`.
- * Up to two may be placed inside of a `<mat-slider>`.
- *
- * If one is used, the selector `matSliderThumb` must be used, and the outcome will be a normal
- * slider. If two are used, the selectors `matSliderStartThumb` and `matSliderEndThumb` must be
- * used, and the outcome will be a range slider with two slider thumbs.
- */
-class MatSliderThumb {
-    constructor(document, _slider, _elementRef) {
-        this._slider = _slider;
-        this._elementRef = _elementRef;
-        /**
-         * 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();
-        /** Event emitted when the slider thumb starts being dragged. */
-        this.dragStart = new EventEmitter();
-        /** Event emitted when the slider thumb stops being dragged. */
-        this.dragEnd = new EventEmitter();
-        /** Event emitted every time the MatSliderThumb is blurred. */
-        this._blur = new EventEmitter();
-        /** Event emitted every time the MatSliderThumb is focused. */
-        this._focus = new EventEmitter();
-        /**
-         * Used to determine the disabled state of the MatSlider (ControlValueAccessor).
-         * For ranged sliders, the disabled state of the MatSlider depends on the combined state of the
-         * start and end inputs. See MatSlider._updateDisabled.
-         */
-        this._disabled = false;
-        /**
-         * A callback function that is called when the
-         * control's value changes in the UI (ControlValueAccessor).
-         */
-        this._onChange = () => { };
-        /**
-         * A callback function that is called by the forms API on
-         * initialization to update the form model on blur (ControlValueAccessor).
-         */
-        this._onTouched = () => { };
-        /** Indicates which slider thumb this input corresponds to. */
-        this._thumbPosition = this._elementRef.nativeElement.hasAttribute('matSliderStartThumb')
-            ? Thumb.START
-            : Thumb.END;
-        this._document = document;
-        this._hostElement = _elementRef.nativeElement;
-    }
-    // ** IMPORTANT NOTE **
-    //
-    // The way `value` is implemented for MatSliderThumb doesn't follow typical Angular conventions.
-    // Normally we would define a private variable `_value` as the source of truth for the value of
-    // the slider thumb input. The source of truth for the value of the slider inputs has already
-    // been decided for us by MDC to be the value attribute on the slider thumb inputs. This is
-    // because the MDC foundation and adapter expect that the value attribute is the source of truth
-    // for the slider inputs.
-    //
-    // Also, note that the value attribute is completely disconnected from the value property.
-    /** The current value of this slider input. */
-    get value() {
-        return coerceNumberProperty(this._hostElement.getAttribute('value'));
-    }
-    set value(v) {
-        const value = coerceNumberProperty(v);
-        // If the foundation has already been initialized, we need to
-        // relay any value updates to it so that it can update the UI.
-        if (this._slider._initialized) {
-            this._slider._setValue(value, this._thumbPosition);
-        }
-        else {
-            // Setup for the MDC foundation.
-            this._hostElement.setAttribute('value', `${value}`);
-        }
-    }
-    ngOnInit() {
-        // By calling this in ngOnInit() we guarantee that the sibling sliders initial value by
-        // has already been set by the time we reach ngAfterViewInit().
-        this._initializeInputValueAttribute();
-        this._initializeAriaValueText();
-    }
-    ngAfterViewInit() {
-        this._initializeInputState();
-        this._initializeInputValueProperty();
-        // Setup for the MDC foundation.
-        if (this._slider.disabled) {
-            this._hostElement.disabled = true;
-        }
-    }
-    ngOnDestroy() {
-        this.dragStart.complete();
-        this.dragEnd.complete();
-        this._focus.complete();
-        this._blur.complete();
-        this.valueChange.complete();
-    }
-    _onBlur() {
-        this._onTouched();
-        this._blur.emit();
-    }
-    _emitFakeEvent(type) {
-        const event = new Event(type);
-        event._matIsHandled = true;
-        this._hostElement.dispatchEvent(event);
-    }
-    /**
-     * Sets the model value. Implemented as part of ControlValueAccessor.
-     * @param value
-     */
-    writeValue(value) {
-        this.value = value;
-    }
-    /**
-     * Registers a callback to be triggered when the value has changed.
-     * Implemented as part of ControlValueAccessor.
-     * @param fn Callback to be registered.
-     */
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    /**
-     * Registers a callback to be triggered when the component is touched.
-     * Implemented as part of ControlValueAccessor.
-     * @param fn Callback to be registered.
-     */
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    /**
-     * Sets whether the component should be disabled.
-     * Implemented as part of ControlValueAccessor.
-     * @param isDisabled
-     */
-    setDisabledState(isDisabled) {
-        this._disabled = isDisabled;
-        this._slider._updateDisabled();
-    }
-    focus() {
-        this._hostElement.focus();
-    }
-    blur() {
-        this._hostElement.blur();
-    }
-    /** Returns true if this slider input currently has focus. */
-    _isFocused() {
-        return this._document.activeElement === this._hostElement;
-    }
-    /**
-     * Sets the min, max, and step properties on the slider thumb input.
-     *
-     * Must be called AFTER the sibling slider thumb input is guaranteed to have had its value
-     * attribute value set. For a range slider, the min and max of the slider thumb input depends on
-     * the value of its sibling slider thumb inputs value.
-     *
-     * Must be called BEFORE the value property is set. In the case where the min and max have not
-     * yet been set and we are setting the input value property to a value outside of the native
-     * inputs default min or max. The value property would not be set to our desired value, but
-     * instead be capped at either the default min or max.
-     *
-     */
-    _initializeInputState() {
-        const min = this._hostElement.hasAttribute('matSliderEndThumb')
-            ? this._slider._getInput(Thumb.START).value
-            : this._slider.min;
-        const max = this._hostElement.hasAttribute('matSliderStartThumb')
-            ? this._slider._getInput(Thumb.END).value
-            : this._slider.max;
-        this._hostElement.min = `${min}`;
-        this._hostElement.max = `${max}`;
-        this._hostElement.step = `${this._slider.step}`;
-    }
-    /**
-     * Sets the value property on the slider thumb input.
-     *
-     * Must be called AFTER the min and max have been set. In the case where the min and max have not
-     * yet been set and we are setting the input value property to a value outside of the native
-     * inputs default min or max. The value property would not be set to our desired value, but
-     * instead be capped at either the default min or max.
-     */
-    _initializeInputValueProperty() {
-        this._hostElement.value = `${this.value}`;
-    }
-    /**
-     * Ensures the value attribute is initialized.
-     *
-     * Must be called BEFORE the min and max are set. For a range slider, the min and max of the
-     * slider thumb input depends on the value of its sibling slider thumb inputs value.
-     */
-    _initializeInputValueAttribute() {
-        // Only set the default value if an initial value has not already been provided.
-        if (!this._hostElement.hasAttribute('value')) {
-            this.value = this._hostElement.hasAttribute('matSliderEndThumb')
-                ? this._slider.max
-                : this._slider.min;
-        }
-    }
-    /**
-     * Initializes the aria-valuetext attribute.
-     *
-     * Must be called AFTER the value attribute is set. This is because the slider's parent
-     * `displayWith` function is used to set the `aria-valuetext` attribute.
-     */
-    _initializeAriaValueText() {
-        this._hostElement.setAttribute('aria-valuetext', this._slider.displayWith(this.value));
-    }
-}
-MatSliderThumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MatSliderThumb, deps: [{ token: DOCUMENT }, { token: forwardRef(() => MatSlider) }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-MatSliderThumb.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: MatSliderThumb, selector: "input[matSliderThumb], input[matSliderStartThumb], input[matSliderEndThumb]", inputs: { value: "value" }, outputs: { valueChange: "valueChange", dragStart: "dragStart", dragEnd: "dragEnd", _blur: "_blur", _focus: "_focus" }, host: { attributes: { "type": "range" }, listeners: { "blur": "_onBlur()", "focus": "_focus.emit()" }, classAttribute: "mdc-slider__input" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: MatSliderThumb,
-            multi: true,
-        },
-    ], exportAs: ["matSliderThumb"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MatSliderThumb, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[matSliderThumb], input[matSliderStartThumb], input[matSliderEndThumb]',
-                    exportAs: 'matSliderThumb',
-                    host: {
-                        'class': 'mdc-slider__input',
-                        'type': 'range',
-                        '(blur)': '_onBlur()',
-                        '(focus)': '_focus.emit()',
-                    },
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: MatSliderThumb,
-                            multi: true,
-                        },
-                    ],
-                }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [DOCUMENT]
-                    }] }, { type: MatSlider, decorators: [{
-                        type: Inject,
-                        args: [forwardRef(() => MatSlider)]
-                    }] }, { type: i0.ElementRef }];
-    }, propDecorators: { value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], dragStart: [{
-                type: Output
-            }], dragEnd: [{
-                type: Output
-            }], _blur: [{
-                type: Output
-            }], _focus: [{
-                type: Output
-            }] } });
-// Boilerplate for applying mixins to MatSlider.
-const _MatSliderMixinBase = mixinColor(mixinDisableRipple(class {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}), 'primary');
-/**
- * Allows users to select from a range of values by moving the slider thumb. It is similar in
- * behavior to the native `<input type="range">` element.
- */
-class MatSlider extends _MatSliderMixinBase {
-    constructor(_ngZone, _cdr, elementRef, _platform, _globalChangeAndInputListener, document, _dir, _globalRippleOptions, animationMode) {
-        super(elementRef);
-        this._ngZone = _ngZone;
-        this._cdr = _cdr;
-        this._platform = _platform;
-        this._globalChangeAndInputListener = _globalChangeAndInputListener;
-        this._dir = _dir;
-        this._globalRippleOptions = _globalRippleOptions;
-        this._disabled = false;
-        this._discrete = false;
-        this._showTickMarks = false;
-        this._min = 0;
-        this._max = 100;
-        this._step = 1;
-        /**
-         * Function that will be used to format the value before it is displayed
-         * in the thumb label. Can be used to format very large number in order
-         * for them to fit into the slider thumb.
-         */
-        this.displayWith = (value) => `${value}`;
-        /** Instance of the MDC slider foundation for this slider. */
-        this._foundation = new MDCSliderFoundation(new SliderAdapter(this));
-        /** Whether the foundation has been initialized. */
-        this._initialized = false;
-        /**
-         * Whether the browser supports pointer events.
-         *
-         * We exclude iOS to mirror the MDC Foundation. The MDC Foundation cannot use pointer events on
-         * iOS because of this open bug - https://bugs.webkit.org/show_bug.cgi?id=220196.
-         */
-        this._SUPPORTS_POINTER_EVENTS = typeof PointerEvent !== 'undefined' && !!PointerEvent && !this._platform.IOS;
-        /** Wrapper function for calling layout (needed for adding & removing an event listener). */
-        this._layout = () => this._foundation.layout();
-        this._document = document;
-        this._window = this._document.defaultView || window;
-        this._noopAnimations = animationMode === 'NoopAnimations';
-        this._dirChangeSubscription = this._dir.change.subscribe(() => this._onDirChange());
-        this._attachUISyncEventListener();
-    }
-    /** Whether the slider is disabled. */
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(v) {
-        this._setDisabled(coerceBooleanProperty(v));
-        this._updateInputsDisabledState();
-    }
-    /** Whether the slider displays a numeric value label upon pressing the thumb. */
-    get discrete() {
-        return this._discrete;
-    }
-    set discrete(v) {
-        this._discrete = coerceBooleanProperty(v);
-    }
-    /** Whether the slider displays tick marks along the slider track. */
-    get showTickMarks() {
-        return this._showTickMarks;
-    }
-    set showTickMarks(v) {
-        this._showTickMarks = coerceBooleanProperty(v);
-    }
-    /** The minimum value that the slider can have. */
-    get min() {
-        return this._min;
-    }
-    set min(v) {
-        this._min = coerceNumberProperty(v, this._min);
-        this._reinitialize();
-    }
-    /** The maximum value that the slider can have. */
-    get max() {
-        return this._max;
-    }
-    set max(v) {
-        this._max = coerceNumberProperty(v, this._max);
-        this._reinitialize();
-    }
-    /** The values at which the thumb will snap. */
-    get step() {
-        return this._step;
-    }
-    set step(v) {
-        this._step = coerceNumberProperty(v, this._step);
-        this._reinitialize();
-    }
-    ngAfterViewInit() {
-        if (typeof ngDevMode === 'undefined' || ngDevMode) {
-            _validateThumbs(this._isRange(), this._getThumb(Thumb.START), this._getThumb(Thumb.END));
-            _validateInputs(this._isRange(), this._getInputElement(Thumb.START), this._getInputElement(Thumb.END));
-        }
-        if (this._platform.isBrowser) {
-            this._foundation.init();
-            this._foundation.layout();
-            this._initialized = true;
-            this._observeHostResize();
-        }
-        // The MDC foundation requires access to the view and content children of the MatSlider. In
-        // order to access the view and content children of MatSlider we need to wait until change
-        // detection runs and materializes them. That is why we call init() and layout() in
-        // ngAfterViewInit().
-        //
-        // The MDC foundation then uses the information it gathers from the DOM to compute an initial
-        // value for the tickMarks array. It then tries to update the component data, but because it is
-        // updating the component data AFTER change detection already ran, we will get a changed after
-        // checked error. Because of this, we need to force change detection to update the UI with the
-        // new state.
-        this._cdr.detectChanges();
-    }
-    ngOnDestroy() {
-        var _a;
-        if (this._platform.isBrowser) {
-            this._foundation.destroy();
-        }
-        this._dirChangeSubscription.unsubscribe();
-        (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this._resizeObserver = null;
-        clearTimeout(this._resizeTimer);
-        this._removeUISyncEventListener();
-    }
-    /** Returns true if the language direction for this slider element is right to left. */
-    _isRTL() {
-        return this._dir && this._dir.value === 'rtl';
-    }
-    /**
-     * Attaches an event listener that keeps sync the slider UI and the foundation in sync.
-     *
-     * Because the MDC Foundation stores the value of the bounding client rect when layout is called,
-     * we need to keep calling layout to avoid the position of the slider getting out of sync with
-     * what the foundation has stored. If we don't do this, the foundation will not be able to
-     * correctly calculate the slider value on click/slide.
-     */
-    _attachUISyncEventListener() {
-        // Implementation detail: It may seem weird that we are using "mouseenter" instead of
-        // "mousedown" as the default for when a browser does not support pointer events. While we
-        // would prefer to use "mousedown" as the default, for some reason it does not work (the
-        // callback is never triggered).
-        if (this._SUPPORTS_POINTER_EVENTS) {
-            this._elementRef.nativeElement.addEventListener('pointerdown', this._layout);
-        }
-        else {
-            this._elementRef.nativeElement.addEventListener('mouseenter', this._layout);
-            this._elementRef.nativeElement.addEventListener('touchstart', this._layout, passiveEventListenerOptions);
-        }
-    }
-    /** Removes the event listener that keeps sync the slider UI and the foundation in sync. */
-    _removeUISyncEventListener() {
-        if (this._SUPPORTS_POINTER_EVENTS) {
-            this._elementRef.nativeElement.removeEventListener('pointerdown', this._layout);
-        }
-        else {
-            this._elementRef.nativeElement.removeEventListener('mouseenter', this._layout);
-            this._elementRef.nativeElement.removeEventListener('touchstart', this._layout, passiveEventListenerOptions);
-        }
-    }
-    /**
-     * Reinitializes the slider foundation and input state(s).
-     *
-     * The MDC Foundation does not support changing some slider attributes after it has been
-     * initialized (e.g. min, max, and step). To continue supporting this feature, we need to
-     * destroy the foundation and re-initialize everything whenever we make these changes.
-     */
-    _reinitialize() {
-        if (this._initialized) {
-            this._foundation.destroy();
-            if (this._isRange()) {
-                this._getInput(Thumb.START)._initializeInputState();
-            }
-            this._getInput(Thumb.END)._initializeInputState();
-            this._foundation.init();
-            this._foundation.layout();
-        }
-    }
-    /** Handles updating the slider foundation after a dir change. */
-    _onDirChange() {
-        this._ngZone.runOutsideAngular(() => {
-            // We need to call layout() a few milliseconds after the dir change callback
-            // because we need to wait until the bounding client rect of the slider has updated.
-            setTimeout(() => this._foundation.layout(), 10);
-        });
-    }
-    /** Sets the value of a slider thumb. */
-    _setValue(value, thumbPosition) {
-        thumbPosition === Thumb.START
-            ? this._foundation.setValueStart(value)
-            : this._foundation.setValue(value);
-    }
-    /** Sets the disabled state of the MatSlider. */
-    _setDisabled(value) {
-        this._disabled = value;
-        // If we want to disable the slider after the foundation has been initialized,
-        // we need to inform the foundation by calling `setDisabled`. Also, we can't call
-        // this before initializing the foundation because it will throw errors.
-        if (this._initialized) {
-            this._foundation.setDisabled(value);
-        }
-    }
-    /** Sets the disabled state of the individual slider thumb(s) (ControlValueAccessor). */
-    _updateInputsDisabledState() {
-        if (this._initialized) {
-            this._getInput(Thumb.END)._disabled = true;
-            if (this._isRange()) {
-                this._getInput(Thumb.START)._disabled = true;
-            }
-        }
-    }
-    /** Whether this is a ranged slider. */
-    _isRange() {
-        return this._inputs.length === 2;
-    }
-    /** Sets the disabled state based on the disabled state of the inputs (ControlValueAccessor). */
-    _updateDisabled() {
-        var _a;
-        const disabled = ((_a = this._inputs) === null || _a === void 0 ? void 0 : _a.some(input => input._disabled)) || false;
-        this._setDisabled(disabled);
-    }
-    /** Gets the slider thumb input of the given thumb position. */
-    _getInput(thumbPosition) {
-        var _a, _b;
-        return thumbPosition === Thumb.END ? (_a = this._inputs) === null || _a === void 0 ? void 0 : _a.last : (_b = this._inputs) === null || _b === void 0 ? void 0 : _b.first;
-    }
-    /** Gets the slider thumb HTML input element of the given thumb position. */
-    _getInputElement(thumbPosition) {
-        var _a;
-        return (_a = this._getInput(thumbPosition)) === null || _a === void 0 ? void 0 : _a._hostElement;
-    }
-    _getThumb(thumbPosition) {
-        var _a, _b;
-        return thumbPosition === Thumb.END ? (_a = this._thumbs) === null || _a === void 0 ? void 0 : _a.last : (_b = this._thumbs) === null || _b === void 0 ? void 0 : _b.first;
-    }
-    /** Gets the slider thumb HTML element of the given thumb position. */
-    _getThumbElement(thumbPosition) {
-        var _a;
-        return (_a = this._getThumb(thumbPosition)) === null || _a === void 0 ? void 0 : _a._getHostElement();
-    }
-    /** Gets the slider knob HTML element of the given thumb position. */
-    _getKnobElement(thumbPosition) {
-        var _a;
-        return (_a = this._getThumb(thumbPosition)) === null || _a === void 0 ? void 0 : _a._getKnob();
-    }
-    /**
-     * Gets the slider value indicator container HTML element of the given thumb
-     * position.
-     */
-    _getValueIndicatorContainerElement(thumbPosition) {
-        return this._getThumb(thumbPosition)._getValueIndicatorContainer();
-    }
-    /**
-     * Sets the value indicator text of the given thumb position using the given value.
-     *
-     * Uses the `displayWith` function if one has been provided. Otherwise, it just uses the
-     * numeric value as a string.
-     */
-    _setValueIndicatorText(value, thumbPosition) {
-        thumbPosition === Thumb.START
-            ? (this._startValueIndicatorText = this.displayWith(value))
-            : (this._endValueIndicatorText = this.displayWith(value));
-        this._cdr.markForCheck();
-    }
-    /** Gets the value indicator text for the given thumb position. */
-    _getValueIndicatorText(thumbPosition) {
-        return thumbPosition === Thumb.START
-            ? this._startValueIndicatorText
-            : this._endValueIndicatorText;
-    }
-    /** Determines the class name for a HTML element. */
-    _getTickMarkClass(tickMark) {
-        return tickMark === TickMark.ACTIVE
-            ? 'mdc-slider__tick-mark--active'
-            : 'mdc-slider__tick-mark--inactive';
-    }
-    /** Whether the slider thumb ripples should be disabled. */
-    _isRippleDisabled() {
-        var _a;
-        return this.disabled || this.disableRipple || !!((_a = this._globalRippleOptions) === null || _a === void 0 ? void 0 : _a.disabled);
-    }
-    /** Gets the dimensions of the host element. */
-    _getHostDimensions() {
-        return this._cachedHostRect || this._elementRef.nativeElement.getBoundingClientRect();
-    }
-    /** Starts observing and updating the slider if the host changes its size. */
-    _observeHostResize() {
-        if (typeof ResizeObserver === 'undefined' || !ResizeObserver) {
-            return;
-        }
-        // MDC only updates the slider when the window is resized which
-        // doesn't capture changes of the container itself. We use a resize
-        // observer to ensure that the layout is correct (see #24590 and #25286).
-        this._ngZone.runOutsideAngular(() => {
-            this._resizeObserver = new ResizeObserver(entries => {
-                // Triggering a layout while the user is dragging can throw off the alignment.
-                if (this._isActive()) {
-                    return;
-                }
-                clearTimeout(this._resizeTimer);
-                this._resizeTimer = setTimeout(() => {
-                    var _a;
-                    // The `layout` call is going to call `getBoundingClientRect` to update the dimensions
-                    // of the host. Since the `ResizeObserver` already calculated them, we can save some
-                    // work by returning them instead of having to check the DOM again.
-                    if (!this._isActive()) {
-                        this._cachedHostRect = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect;
-                        this._layout();
-                        this._cachedHostRect = null;
-                    }
-                }, 50);
-            });
-            this._resizeObserver.observe(this._elementRef.nativeElement);
-        });
-    }
-    /** Whether any of the thumbs are currently active. */
-    _isActive() {
-        return this._getThumb(Thumb.START)._isActive || this._getThumb(Thumb.END)._isActive;
-    }
-}
-MatSlider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MatSlider, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i3.Platform }, { token: GlobalChangeAndInputListener }, { token: DOCUMENT }, { token: i5.Directionality, optional: true }, { token: MAT_RIPPLE_GLOBAL_OPTIONS, optional: true }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MatSlider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MatSlider, selector: "mat-slider", inputs: { color: "color", disableRipple: "disableRipple", disabled: "disabled", discrete: "discrete", showTickMarks: "showTickMarks", min: "min", max: "max", step: "step", displayWith: "displayWith" }, host: { properties: { "class.mdc-slider--range": "_isRange()", "class.mdc-slider--disabled": "disabled", "class.mdc-slider--discrete": "discrete", "class.mdc-slider--tick-marks": "showTickMarks", "class._mat-animation-noopable": "_noopAnimations" }, classAttribute: "mat-mdc-slider mdc-slider" }, queries: [{ propertyName: "_inputs", predicate: MatSliderThumb }], viewQueries: [{ propertyName: "_trackActive", first: true, predicate: ["trackActive"], descendants: true }, { propertyName: "_thumbs", predicate: MatSliderVisualThumb, descendants: true }], exportAs: ["matSlider"], usesInheritance: true, ngImport: i0, template: "<!-- Inputs -->\n<ng-content></ng-content>\n\n<!-- Track -->\n<div class=\"mdc-slider__track\">\n  <div class=\"mdc-slider__track--inactive\"></div>\n  <div class=\"mdc-slider__track--active\">\n    <div class=\"mdc-slider__track--active_fill\" #trackActive></div>\n  </div>\n  <div *ngIf=\"showTickMarks\" class=\"mdc-slider__tick-marks\" #tickMarkContainer>\n    <div *ngFor=\"let tickMark of _tickMarks\" [class]=\"_getTickMarkClass(tickMark)\"></div>\n  </div>\n</div>\n\n<!-- Thumbs -->\n<mat-slider-visual-thumb\n  *ngFor=\"let thumb of _inputs\"\n  [discrete]=\"discrete\"\n  [disableRipple]=\"_isRippleDisabled()\"\n  [thumbPosition]=\"thumb._thumbPosition\"\n  [valueIndicatorText]=\"_getValueIndicatorText(thumb._thumbPosition)\">\n</mat-slider-visual-thumb>\n", styles: [".mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{height:4px;position:absolute;top:50%;transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{border-radius:3px;height:6px;overflow:hidden;top:-1px}.mdc-slider .mdc-slider__track--active_fill{border-top:6px solid;box-sizing:border-box;height:100%;width:100%;position:relative;-webkit-transform-origin:left;transform-origin:left}[dir=rtl] .mdc-slider .mdc-slider__track--active_fill,.mdc-slider .mdc-slider__track--active_fill[dir=rtl]{-webkit-transform-origin:right;transform-origin:right}.mdc-slider .mdc-slider__track--inactive{border-radius:2px;height:4px;left:0;top:0}.mdc-slider .mdc-slider__track--inactive::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__track--inactive::before{border-color:CanvasText}}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:var(--slider-value-indicator-container-left, 50%);pointer-events:none;position:absolute;right:var(--slider-value-indicator-container-right);transform:var(--slider-value-indicator-container-transform, translateX(-50%))}.mdc-slider .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);align-items:center;border-radius:4px;display:flex;height:32px;padding:0 12px;transform:scale(0);transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator::before{border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid;bottom:-5px;content:\"\";height:0;left:var(--slider-value-indicator-caret-left, 50%);position:absolute;right:var(--slider-value-indicator-caret-right);transform:var(--slider-value-indicator-caret-transform, translateX(-50%));width:0}.mdc-slider .mdc-slider__value-indicator::after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__value-indicator::after{border-color:CanvasText}}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale(1)}@media(prefers-reduced-motion){.mdc-slider .mdc-slider__value-indicator,.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:none}}.mdc-slider .mdc-slider__thumb{display:flex;height:48px;left:-24px;outline:none;position:absolute;user-select:none;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-style:solid;border-width:1px;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{border:10px solid;border-radius:50%;box-sizing:border-box;height:20px;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:20px}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms}.mdc-slider .mdc-slider__tick-marks{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider .mdc-slider__tick-mark--active,.mdc-slider .mdc-slider__tick-mark--inactive{border-radius:50%;height:2px;width:2px}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:transform 80ms ease}@media(prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:none}}.mdc-slider--disabled{cursor:auto}.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider__input{cursor:pointer;left:0;margin:0;height:100%;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.mat-mdc-slider{display:inline-block;box-sizing:border-box;outline:none;vertical-align:middle;margin-left:8px;margin-right:8px;width:auto;min-width:112px}.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__track--active_fill,.mat-mdc-slider._mat-animation-noopable .mdc-slider__value-indicator{transition:none}.mat-mdc-slider .mat-mdc-focus-indicator::before{border-radius:50%}.mdc-slider__thumb--focused .mat-mdc-focus-indicator::before{content:\"\"}"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatSliderVisualThumb, selector: "mat-slider-visual-thumb", inputs: ["discrete", "thumbPosition", "valueIndicatorText", "disableRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MatSlider, decorators: [{
-            type: Component,
-            args: [{ selector: 'mat-slider', host: {
-                        'class': 'mat-mdc-slider mdc-slider',
-                        '[class.mdc-slider--range]': '_isRange()',
-                        '[class.mdc-slider--disabled]': 'disabled',
-                        '[class.mdc-slider--discrete]': 'discrete',
-                        '[class.mdc-slider--tick-marks]': 'showTickMarks',
-                        '[class._mat-animation-noopable]': '_noopAnimations',
-                    }, exportAs: 'matSlider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['color', 'disableRipple'], template: "<!-- Inputs -->\n<ng-content></ng-content>\n\n<!-- Track -->\n<div class=\"mdc-slider__track\">\n  <div class=\"mdc-slider__track--inactive\"></div>\n  <div class=\"mdc-slider__track--active\">\n    <div class=\"mdc-slider__track--active_fill\" #trackActive></div>\n  </div>\n  <div *ngIf=\"showTickMarks\" class=\"mdc-slider__tick-marks\" #tickMarkContainer>\n    <div *ngFor=\"let tickMark of _tickMarks\" [class]=\"_getTickMarkClass(tickMark)\"></div>\n  </div>\n</div>\n\n<!-- Thumbs -->\n<mat-slider-visual-thumb\n  *ngFor=\"let thumb of _inputs\"\n  [discrete]=\"discrete\"\n  [disableRipple]=\"_isRippleDisabled()\"\n  [thumbPosition]=\"thumb._thumbPosition\"\n  [valueIndicatorText]=\"_getValueIndicatorText(thumb._thumbPosition)\">\n</mat-slider-visual-thumb>\n", styles: [".mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{height:4px;position:absolute;top:50%;transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{border-radius:3px;height:6px;overflow:hidden;top:-1px}.mdc-slider .mdc-slider__track--active_fill{border-top:6px solid;box-sizing:border-box;height:100%;width:100%;position:relative;-webkit-transform-origin:left;transform-origin:left}[dir=rtl] .mdc-slider .mdc-slider__track--active_fill,.mdc-slider .mdc-slider__track--active_fill[dir=rtl]{-webkit-transform-origin:right;transform-origin:right}.mdc-slider .mdc-slider__track--inactive{border-radius:2px;height:4px;left:0;top:0}.mdc-slider .mdc-slider__track--inactive::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__track--inactive::before{border-color:CanvasText}}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:var(--slider-value-indicator-container-left, 50%);pointer-events:none;position:absolute;right:var(--slider-value-indicator-container-right);transform:var(--slider-value-indicator-container-transform, translateX(-50%))}.mdc-slider .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);align-items:center;border-radius:4px;display:flex;height:32px;padding:0 12px;transform:scale(0);transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator::before{border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-top:6px solid;bottom:-5px;content:\"\";height:0;left:var(--slider-value-indicator-caret-left, 50%);position:absolute;right:var(--slider-value-indicator-caret-right);transform:var(--slider-value-indicator-caret-transform, translateX(-50%));width:0}.mdc-slider .mdc-slider__value-indicator::after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-slider .mdc-slider__value-indicator::after{border-color:CanvasText}}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:transform 100ms 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale(1)}@media(prefers-reduced-motion){.mdc-slider .mdc-slider__value-indicator,.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:none}}.mdc-slider .mdc-slider__thumb{display:flex;height:48px;left:-24px;outline:none;position:absolute;user-select:none;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob{border-style:solid;border-width:1px;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{border:10px solid;border-radius:50%;box-sizing:border-box;height:20px;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:20px}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms}.mdc-slider .mdc-slider__tick-marks{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider .mdc-slider__tick-mark--active,.mdc-slider .mdc-slider__tick-mark--inactive{border-radius:50%;height:2px;width:2px}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:transform 80ms ease}@media(prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:none}}.mdc-slider--disabled{cursor:auto}.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider__input{cursor:pointer;left:0;margin:0;height:100%;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.mat-mdc-slider{display:inline-block;box-sizing:border-box;outline:none;vertical-align:middle;margin-left:8px;margin-right:8px;width:auto;min-width:112px}.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__thumb,.mat-mdc-slider._mat-animation-noopable.mdc-slider--discrete .mdc-slider__track--active_fill,.mat-mdc-slider._mat-animation-noopable .mdc-slider__value-indicator{transition:none}.mat-mdc-slider .mat-mdc-focus-indicator::before{border-radius:50%}.mdc-slider__thumb--focused .mat-mdc-focus-indicator::before{content:\"\"}"] }]
-        }], ctorParameters: function () {
-        return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i3.Platform }, { type: GlobalChangeAndInputListener }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [DOCUMENT]
-                    }] }, { type: i5.Directionality, decorators: [{
-                        type: Optional
-                    }] }, { type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [MAT_RIPPLE_GLOBAL_OPTIONS]
-                    }] }, { type: undefined, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [ANIMATION_MODULE_TYPE]
-                    }] }];
-    }, propDecorators: { _thumbs: [{
-                type: ViewChildren,
-                args: [MatSliderVisualThumb]
-            }], _trackActive: [{
-                type: ViewChild,
-                args: ['trackActive']
-            }], _inputs: [{
-                type: ContentChildren,
-                args: [MatSliderThumb, { descendants: false }]
-            }], disabled: [{
-                type: Input
-            }], discrete: [{
-                type: Input
-            }], showTickMarks: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], step: [{
-                type: Input
-            }], displayWith: [{
-                type: Input
-            }] } });
-/** The MDCSliderAdapter implementation. */
-class SliderAdapter {
-    constructor(_delegate) {
-        this._delegate = _delegate;
-        /** The global event listener subscription used to handle events on the slider inputs. */
-        this._globalEventSubscriptions = new Subscription();
-        // We manually assign functions instead of using prototype methods because
-        // MDC clobbers the values otherwise.
-        // See https://github.com/material-components/material-components-web/pull/6256
-        this.hasClass = (className) => {
-            return this._delegate._elementRef.nativeElement.classList.contains(className);
-        };
-        this.addClass = (className) => {
-            this._delegate._elementRef.nativeElement.classList.add(className);
-        };
-        this.removeClass = (className) => {
-            this._delegate._elementRef.nativeElement.classList.remove(className);
-        };
-        this.getAttribute = (attribute) => {
-            return this._delegate._elementRef.nativeElement.getAttribute(attribute);
-        };
-        this.addThumbClass = (className, thumbPosition) => {
-            this._delegate._getThumbElement(thumbPosition).classList.add(className);
-        };
-        this.removeThumbClass = (className, thumbPosition) => {
-            this._delegate._getThumbElement(thumbPosition).classList.remove(className);
-        };
-        this.getInputValue = (thumbPosition) => {
-            return this._delegate._getInputElement(thumbPosition).value;
-        };
-        this.setInputValue = (value, thumbPosition) => {
-            this._delegate._getInputElement(thumbPosition).value = value;
-        };
-        this.getInputAttribute = (attribute, thumbPosition) => {
-            return this._delegate._getInputElement(thumbPosition).getAttribute(attribute);
-        };
-        this.setInputAttribute = (attribute, value, thumbPosition) => {
-            const input = this._delegate._getInputElement(thumbPosition);
-            // TODO(wagnermaciel): remove this check once this component is
-            // added to the internal allowlist for calling setAttribute.
-            // Explicitly check the attribute we are setting to prevent xss.
-            switch (attribute) {
-                case 'aria-valuetext':
-                    input.setAttribute('aria-valuetext', value);
-                    break;
-                case 'disabled':
-                    input.setAttribute('disabled', value);
-                    break;
-                case 'min':
-                    input.setAttribute('min', value);
-                    break;
-                case 'max':
-                    input.setAttribute('max', value);
-                    break;
-                case 'value':
-                    input.setAttribute('value', value);
-                    break;
-                case 'step':
-                    input.setAttribute('step', value);
-                    break;
-                default:
-                    throw Error(`Tried to set invalid attribute ${attribute} on the mdc-slider.`);
-            }
-        };
-        this.removeInputAttribute = (attribute, thumbPosition) => {
-            this._delegate._getInputElement(thumbPosition).removeAttribute(attribute);
-        };
-        this.focusInput = (thumbPosition) => {
-            this._delegate._getInputElement(thumbPosition).focus();
-        };
-        this.isInputFocused = (thumbPosition) => {
-            return this._delegate._getInput(thumbPosition)._isFocused();
-        };
-        this.getThumbKnobWidth = (thumbPosition) => {
-            return this._delegate._getKnobElement(thumbPosition).getBoundingClientRect().width;
-        };
-        this.getThumbBoundingClientRect = (thumbPosition) => {
-            return this._delegate._getThumbElement(thumbPosition).getBoundingClientRect();
-        };
-        this.getBoundingClientRect = () => {
-            return this._delegate._getHostDimensions();
-        };
-        this.getValueIndicatorContainerWidth = (thumbPosition) => {
-            return this._delegate._getValueIndicatorContainerElement(thumbPosition).getBoundingClientRect()
-                .width;
-        };
-        this.isRTL = () => {
-            return this._delegate._isRTL();
-        };
-        this.setThumbStyleProperty = (propertyName, value, thumbPosition) => {
-            this._delegate._getThumbElement(thumbPosition).style.setProperty(propertyName, value);
-        };
-        this.removeThumbStyleProperty = (propertyName, thumbPosition) => {
-            this._delegate._getThumbElement(thumbPosition).style.removeProperty(propertyName);
-        };
-        this.setTrackActiveStyleProperty = (propertyName, value) => {
-            this._delegate._trackActive.nativeElement.style.setProperty(propertyName, value);
-        };
-        this.removeTrackActiveStyleProperty = (propertyName) => {
-            this._delegate._trackActive.nativeElement.style.removeProperty(propertyName);
-        };
-        this.setValueIndicatorText = (value, thumbPosition) => {
-            this._delegate._setValueIndicatorText(value, thumbPosition);
-        };
-        this.getValueToAriaValueTextFn = () => {
-            return this._delegate.displayWith;
-        };
-        this.updateTickMarks = (tickMarks) => {
-            this._delegate._tickMarks = tickMarks;
-            this._delegate._cdr.markForCheck();
-        };
-        this.setPointerCapture = (pointerId) => {
-            this._delegate._elementRef.nativeElement.setPointerCapture(pointerId);
-        };
-        this.emitChangeEvent = (value, thumbPosition) => {
-            // We block all real slider input change events and emit fake change events from here, instead.
-            // We do this because the mdc implementation of the slider does not trigger real change events
-            // on pointer up (only on left or right arrow key down).
-            //
-            // By stopping real change events from reaching users, and dispatching fake change events
-            // (which we allow to reach the user) the slider inputs change events are triggered at the
-            // appropriate times. This allows users to listen for change events directly on the slider
-            // input as they would with a native range input.
-            const input = this._delegate._getInput(thumbPosition);
-            input._emitFakeEvent('change');
-            input._onChange(value);
-            input.valueChange.emit(value);
-        };
-        this.emitInputEvent = (value, thumbPosition) => {
-            this._delegate._getInput(thumbPosition)._emitFakeEvent('input');
-        };
-        this.emitDragStartEvent = (value, thumbPosition) => {
-            const input = this._delegate._getInput(thumbPosition);
-            input.dragStart.emit({ source: input, parent: this._delegate, value });
-        };
-        this.emitDragEndEvent = (value, thumbPosition) => {
-            const input = this._delegate._getInput(thumbPosition);
-            input.dragEnd.emit({ source: input, parent: this._delegate, value });
-        };
-        this.registerEventHandler = (evtType, handler) => {
-            this._delegate._elementRef.nativeElement.addEventListener(evtType, handler);
-        };
-        this.deregisterEventHandler = (evtType, handler) => {
-            this._delegate._elementRef.nativeElement.removeEventListener(evtType, handler);
-        };
-        this.registerThumbEventHandler = (thumbPosition, evtType, handler) => {
-            this._delegate._getThumbElement(thumbPosition).addEventListener(evtType, handler);
-        };
-        this.deregisterThumbEventHandler = (thumbPosition, evtType, handler) => {
-            var _a;
-            (_a = this._delegate._getThumbElement(thumbPosition)) === null || _a === void 0 ? void 0 : _a.removeEventListener(evtType, handler);
-        };
-        this.registerInputEventHandler = (thumbPosition, evtType, handler) => {
-            var _a;
-            if (evtType === 'change') {
-                this._saveChangeEventHandler(thumbPosition, handler);
-            }
-            else {
-                (_a = this._delegate._getInputElement(thumbPosition)) === null || _a === void 0 ? void 0 : _a.addEventListener(evtType, handler);
-            }
-        };
-        this.deregisterInputEventHandler = (thumbPosition, evtType, handler) => {
-            var _a;
-            if (evtType === 'change') {
-                this._globalEventSubscriptions.unsubscribe();
-            }
-            else {
-                (_a = this._delegate._getInputElement(thumbPosition)) === null || _a === void 0 ? void 0 : _a.removeEventListener(evtType, handler);
-            }
-        };
-        this.registerBodyEventHandler = (evtType, handler) => {
-            this._delegate._document.body.addEventListener(evtType, handler);
-        };
-        this.deregisterBodyEventHandler = (evtType, handler) => {
-            this._delegate._document.body.removeEventListener(evtType, handler);
-        };
-        this.registerWindowEventHandler = (evtType, handler) => {
-            this._delegate._window.addEventListener(evtType, handler);
-        };
-        this.deregisterWindowEventHandler = (evtType, handler) => {
-            this._delegate._window.removeEventListener(evtType, handler);
-        };
-        this._globalEventSubscriptions.add(this._subscribeToSliderInputEvents('change'));
-        this._globalEventSubscriptions.add(this._subscribeToSliderInputEvents('input'));
-    }
-    /**
-     * Handles "change" and "input" events on the slider inputs.
-     *
-     * Exposes a callback to allow the MDC Foundations "change" event handler to be called for "real"
-     * events.
-     *
-     * ** IMPORTANT NOTE **
-     *
-     * We block all "real" change and input events and emit fake events from #emitChangeEvent and
-     * #emitInputEvent, instead. We do this because interacting with the MDC slider won't trigger all
-     * of the correct change and input events, but it will call #emitChangeEvent and #emitInputEvent
-     * at the correct times. This allows users to listen for these events directly on the slider
-     * input as they would with a native range input.
-     */
-    _subscribeToSliderInputEvents(type) {
-        return this._delegate._globalChangeAndInputListener.listen(type, (event) => {
-            const thumbPosition = this._getInputThumbPosition(event.target);
-            // Do nothing if the event isn't from a thumb input.
-            if (thumbPosition === null) {
-                return;
-            }
-            // Do nothing if the event is "fake".
-            if (event._matIsHandled) {
-                return;
-            }
-            // Prevent "real" events from reaching end users.
-            event.stopImmediatePropagation();
-            // Relay "real" change events to the MDC Foundation.
-            if (type === 'change') {
-                this._callChangeEventHandler(event, thumbPosition);
-            }
-        });
-    }
-    /** Calls the MDC Foundations change event handler for the specified thumb position. */
-    _callChangeEventHandler(event, thumbPosition) {
-        if (thumbPosition === Thumb.START) {
-            this._startInputChangeEventHandler(event);
-        }
-        else {
-            this._endInputChangeEventHandler(event);
-        }
-    }
-    /** Save the event handler so it can be used in our global change event listener subscription. */
-    _saveChangeEventHandler(thumbPosition, handler) {
-        if (thumbPosition === Thumb.START) {
-            this._startInputChangeEventHandler = handler;
-        }
-        else {
-            this._endInputChangeEventHandler = handler;
-        }
-    }
-    /**
-     * Returns the thumb position of the given event target.
-     * Returns null if the given event target does not correspond to a slider thumb input.
-     */
-    _getInputThumbPosition(target) {
-        if (target === this._delegate._getInputElement(Thumb.END)) {
-            return Thumb.END;
-        }
-        if (this._delegate._isRange() && target === this._delegate._getInputElement(Thumb.START)) {
-            return Thumb.START;
-        }
-        return null;
-    }
-}
-/** Ensures that there is not an invalid configuration for the slider thumb inputs. */
-function _validateInputs(isRange, startInputElement, endInputElement) {
-    const startValid = !isRange || startInputElement.hasAttribute('matSliderStartThumb');
-    const endValid = endInputElement.hasAttribute(isRange ? 'matSliderEndThumb' : 'matSliderThumb');
-    if (!startValid || !endValid) {
-        _throwInvalidInputConfigurationError();
-    }
-}
-/** Validates that the slider has the correct set of thumbs. */
-function _validateThumbs(isRange, start, end) {
-    if (!end && (!isRange || !start)) {
-        _throwInvalidInputConfigurationError();
-    }
-}
-function _throwInvalidInputConfigurationError() {
-    throw Error(`Invalid slider thumb input configuration!
-
-  Valid configurations are as follows:
-
-    <mat-slider>
-      <input matSliderThumb>
-    </mat-slider>
-
-    or
-
-    <mat-slider>
-      <input matSliderStartThumb>
-      <input matSliderEndThumb>
-    </mat-slider>
-  `);
-}
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-class MatSliderModule {
-}
-MatSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MatSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MatSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: MatSliderModule, declarations: [MatSlider, MatSliderThumb, MatSliderVisualThumb], imports: [MatCommonModule, CommonModule, MatRippleModule], exports: [MatSlider, MatSliderThumb] });
-MatSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MatSliderModule, imports: [MatCommonModule, CommonModule, MatRippleModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MatSliderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [MatCommonModule, CommonModule, MatRippleModule],
-                    exports: [MatSlider, MatSliderThumb],
-                    declarations: [MatSlider, MatSliderThumb, MatSliderVisualThumb],
-                }]
-        }] });
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { MatSlider, MatSliderModule, MatSliderThumb };
-//# sourceMappingURL=mdc-slider.mjs.map