@ngx-formly/material 6.0.4 → 6.1.0

package/fesm2020/ngx-formly-material-slider.mjs

@@ -1,15 +1,19 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewChild, InjectionToken, forwardRef, EventEmitter, Directive, Inject, Input, Output, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@ngx-formly/core';
 import { FormlyModule } from '@ngx-formly/core';
-import * as i2 from '@angular/forms';
-import { ReactiveFormsModule } from '@angular/forms';
+import * as i4 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/material/slider';
 import { MatSlider, MatSliderModule } from '@angular/material/slider';
 import { FieldType, FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';
+import { VERSION } from '@angular/cdk';
+import { MatCommonModule, MatRippleModule } from '@angular/material/core';
+import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Subject } from 'rxjs';
 
-class FormlyFieldSlider extends FieldType {
+class FormlyFieldSlider$2 extends FieldType {
     constructor() {
         super(...arguments);
         this.defaultOptions = {
@@ -21,12 +25,20 @@ class FormlyFieldSlider extends FieldType {
         };
     }
     onContainerClick(event) {
-        this.slider.focus();
+        this.slider.focus?.();
         super.onContainerClick(event);
     }
+    displayWith(value) {
+        if (this.props?.displayWith) {
+            return String(this.props.displayWith(value));
+        }
+        else {
+            return String(value);
+        }
+    }
 }
-FormlyFieldSlider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormlyFieldSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormlyFieldSlider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FormlyFieldSlider, selector: "formly-field-mat-slider", viewQueries: [{ propertyName: "slider", first: true, predicate: MatSlider, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+FormlyFieldSlider$2.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyFieldSlider$2, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FormlyFieldSlider$2.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FormlyFieldSlider$2, selector: "formly-field-mat-slider", viewQueries: [{ propertyName: "slider", first: true, predicate: MatSlider, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <mat-slider
       [id]="id"
       [style.width]="'100%'"
@@ -34,7 +46,7 @@ FormlyFieldSlider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
       [formlyAttributes]="field"
       [tabIndex]="props.tabindex"
       [color]="props.color"
-      [displayWith]="props.displayWith"
+      [displayWith]="displayWith"
       [invert]="props.invert"
       [max]="props.max"
       [min]="props.min"
@@ -47,8 +59,8 @@ FormlyFieldSlider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
       (change)="props.change && props.change(field, $event)"
     >
     </mat-slider>
-  `, isInline: true, components: [{ type: i1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormlyFieldSlider, decorators: [{
+  `, isInline: true, components: [{ type: i1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }], directives: [{ type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyFieldSlider$2, decorators: [{
             type: Component,
             args: [{
                     selector: 'formly-field-mat-slider',
@@ -60,7 +72,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
       [formlyAttributes]="field"
       [tabIndex]="props.tabindex"
       [color]="props.color"
-      [displayWith]="props.displayWith"
+      [displayWith]="displayWith"
       [invert]="props.invert"
       [max]="props.max"
       [min]="props.min"
@@ -81,15 +93,541 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: [MatSlider, { static: true }]
             }] } });
 
+/**
+ * @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
+ */
+/**
+ * Injection token that can be used to query for a `MatSliderThumb`.
+ * Used primarily to avoid circular imports.
+ * @docs-private
+ */
+const MAT_SLIDER_THUMB = new InjectionToken('_MatSliderThumb');
+
+/**
+ * @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
+ */
+/**
+ * Provider that allows the slider thumb to register as a ControlValueAccessor.
+ * @docs-private
+ */
+const MAT_SLIDER_THUMB_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => MatSliderThumb),
+    multi: true,
+};
+/**
+ * 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(_ngZone, _elementRef, _cdr, _slider) {
+        this._ngZone = _ngZone;
+        this._elementRef = _elementRef;
+        this._cdr = _cdr;
+        this._slider = _slider;
+        /** Event emitted when the `value` is changed. */
+        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();
+        /**
+         * Indicates whether this thumb is the start or end thumb.
+         * @docs-private
+         */
+        this.thumbPosition = 2 /* END */;
+        /** The radius of a native html slider's knob. */
+        this._knobRadius = 8;
+        /** Whether user's cursor is currently in a mouse down state on the input. */
+        this._isActive = false;
+        /** Whether the input is currently focused (either by tab or after clicking). */
+        this._isFocused = false;
+        /**
+         * Whether the initial value has been set.
+         * This exists because the initial value cannot be immediately set because the min and max
+         * must first be relayed from the parent MatSlider component, which can only happen later
+         * in the component lifecycle.
+         */
+        this._hasSetInitialValue = false;
+        /** Emits when the component is destroyed. */
+        this._destroyed = new Subject();
+        /**
+         * Indicates whether UI updates should be skipped.
+         *
+         * This flag is used to avoid flickering
+         * when correcting values on pointer up/down.
+         */
+        this._skipUIUpdate = false;
+        /** Callback called when the slider input value changes. */
+        this._onChangeFn = () => { };
+        /** Callback called when the slider input has been touched. */
+        this._onTouchedFn = () => { };
+        this._hostElement = _elementRef.nativeElement;
+        this._ngZone.runOutsideAngular(() => {
+            this._hostElement.addEventListener('pointerdown', this._onPointerDown.bind(this));
+            this._hostElement.addEventListener('pointermove', this._onPointerMove.bind(this));
+            this._hostElement.addEventListener('pointerup', this._onPointerUp.bind(this));
+        });
+    }
+    get value() {
+        return coerceNumberProperty(this._hostElement.value);
+    }
+    set value(v) {
+        const val = coerceNumberProperty(v).toString();
+        if (!this._hasSetInitialValue) {
+            this._initialValue = val;
+            return;
+        }
+        if (this._isActive) {
+            return;
+        }
+        this._hostElement.value = val;
+        this._updateThumbUIByValue();
+        this._slider._onValueChange(this);
+        this._cdr.detectChanges();
+    }
+    /**
+     * The current translateX in px of the slider visual thumb.
+     * @docs-private
+     */
+    get translateX() {
+        if (this._slider.min >= this._slider.max) {
+            this._translateX = 0;
+            return this._translateX;
+        }
+        if (this._translateX === undefined) {
+            this._translateX = this._calcTranslateXByValue();
+        }
+        return this._translateX;
+    }
+    set translateX(v) {
+        this._translateX = v;
+    }
+    /** @docs-private */
+    get min() {
+        return coerceNumberProperty(this._hostElement.min);
+    }
+    set min(v) {
+        this._hostElement.min = coerceNumberProperty(v).toString();
+        this._cdr.detectChanges();
+    }
+    /** @docs-private */
+    get max() {
+        return coerceNumberProperty(this._hostElement.max);
+    }
+    set max(v) {
+        this._hostElement.max = coerceNumberProperty(v).toString();
+        this._cdr.detectChanges();
+    }
+    get step() {
+        return coerceNumberProperty(this._hostElement.step);
+    }
+    set step(v) {
+        this._hostElement.step = coerceNumberProperty(v).toString();
+        this._cdr.detectChanges();
+    }
+    /** @docs-private */
+    get disabled() {
+        return coerceBooleanProperty(this._hostElement.disabled);
+    }
+    set disabled(v) {
+        this._hostElement.disabled = coerceBooleanProperty(v);
+        this._cdr.detectChanges();
+        if (this._slider.disabled !== this.disabled) {
+            this._slider.disabled = this.disabled;
+        }
+    }
+    /** The percentage of the slider that coincides with the value. */
+    get percentage() {
+        if (this._slider.min >= this._slider.max) {
+            return this._slider._isRtl ? 1 : 0;
+        }
+        return (this.value - this._slider.min) / (this._slider.max - this._slider.min);
+    }
+    /** @docs-private */
+    get fillPercentage() {
+        if (!this._slider._cachedWidth) {
+            return this._slider._isRtl ? 1 : 0;
+        }
+        if (this._translateX === 0) {
+            return 0;
+        }
+        return this.translateX / this._slider._cachedWidth;
+    }
+    /** Used to relay updates to _isFocused to the slider visual thumbs. */
+    _setIsFocused(v) {
+        this._isFocused = v;
+    }
+    ngOnDestroy() {
+        this._hostElement.removeEventListener('pointerdown', this._onPointerDown);
+        this._hostElement.removeEventListener('pointermove', this._onPointerMove);
+        this._hostElement.removeEventListener('pointerup', this._onPointerUp);
+        this._destroyed.next();
+        this._destroyed.complete();
+        this.dragStart.complete();
+        this.dragEnd.complete();
+    }
+    /** @docs-private */
+    initProps() {
+        this._updateWidthInactive();
+        // If this or the parent slider is disabled, just make everything disabled.
+        if (this.disabled !== this._slider.disabled) {
+            // The MatSlider setter for disabled will relay this and disable both inputs.
+            this._slider.disabled = true;
+        }
+        this.step = this._slider.step;
+        this.min = this._slider.min;
+        this.max = this._slider.max;
+        this._initValue();
+    }
+    /** @docs-private */
+    initUI() {
+        this._updateThumbUIByValue();
+    }
+    _initValue() {
+        this._hasSetInitialValue = true;
+        if (this._initialValue === undefined) {
+            this.value = this._getDefaultValue();
+        }
+        else {
+            this._hostElement.value = this._initialValue;
+            this._updateThumbUIByValue();
+            this._slider._onValueChange(this);
+            this._cdr.detectChanges();
+        }
+    }
+    _getDefaultValue() {
+        return this.min;
+    }
+    _onBlur() {
+        this._setIsFocused(false);
+        this._onTouchedFn();
+    }
+    _onFocus() {
+        this._setIsFocused(true);
+    }
+    _onChange() {
+        // only used to handle the edge case where user
+        // mousedown on the slider then uses arrow keys.
+        if (this._isActive) {
+            this._updateThumbUIByValue({ withAnimation: true });
+        }
+    }
+    _onInput() {
+        this.valueChange.emit(this.value);
+        this._onChangeFn(this.value);
+        // handles arrowing and updating the value when
+        // a step is defined.
+        if (this._slider.step || !this._isActive) {
+            this._updateThumbUIByValue({ withAnimation: true });
+        }
+        this._slider._onValueChange(this);
+    }
+    _onNgControlValueChange() {
+        // only used to handle when the value change
+        // originates outside of the slider.
+        if (!this._isActive || !this._isFocused) {
+            this._slider._onValueChange(this);
+            this._updateThumbUIByValue();
+        }
+        this._slider.disabled = this._formControl.disabled;
+    }
+    _onPointerDown(event) {
+        if (this.disabled || event.button !== 0) {
+            return;
+        }
+        this._isActive = true;
+        this._setIsFocused(true);
+        this._updateWidthActive();
+        this._slider._updateDimensions();
+        // Does nothing if a step is defined because we
+        // want the value to snap to the values on input.
+        if (!this._slider.step) {
+            this._updateThumbUIByPointerEvent(event, { withAnimation: true });
+        }
+        if (!this.disabled) {
+            this._handleValueCorrection(event);
+        }
+    }
+    /**
+     * Corrects the value of the slider on pointer up/down.
+     *
+     * Called on pointer down and up because the value is set based
+     * on the inactive width instead of the active width.
+     */
+    _handleValueCorrection(event) {
+        // Don't update the UI with the current value! The value on pointerdown
+        // and pointerup is calculated in the split second before the input(s)
+        // resize. See _updateWidthInactive() and _updateWidthActive() for more
+        // details.
+        this._skipUIUpdate = true;
+        // Note that this function gets triggered before the actual value of the
+        // slider is updated. This means if we were to set the value here, it
+        // would immediately be overwritten. Using setTimeout ensures the setting
+        // of the value happens after the value has been updated by the
+        // pointerdown event.
+        setTimeout(() => {
+            this._skipUIUpdate = false;
+            this._fixValue(event);
+        }, 0);
+    }
+    /** Corrects the value of the slider based on the pointer event's position. */
+    _fixValue(event) {
+        const xPos = event.clientX - this._slider._cachedLeft;
+        const width = this._slider._cachedWidth;
+        const step = this._slider.step === 0 ? 1 : this._slider.step;
+        const numSteps = Math.floor((this._slider.max - this._slider.min) / step);
+        const percentage = this._slider._isRtl ? 1 - xPos / width : xPos / width;
+        // To ensure the percentage is rounded to the necessary number of decimals.
+        const fixedPercentage = Math.round(percentage * numSteps) / numSteps;
+        const impreciseValue = fixedPercentage * (this._slider.max - this._slider.min) + this._slider.min;
+        const value = Math.round(impreciseValue / step) * step;
+        const prevValue = this.value;
+        const dragEvent = { source: this, parent: this._slider, value: value };
+        this._isActive ? this.dragStart.emit(dragEvent) : this.dragEnd.emit(dragEvent);
+        if (value === prevValue) {
+            // Because we prevented UI updates, if it turns out that the race
+            // condition didn't happen and the value is already correct, we
+            // have to apply the ui updates now.
+            this._slider._onValueChange(this);
+            this._slider.step > 0
+                ? this._updateThumbUIByValue()
+                : this._updateThumbUIByPointerEvent(event, { withAnimation: this._slider._hasAnimation });
+            return;
+        }
+        this.value = value;
+        this.valueChange.emit(this.value);
+        this._onChangeFn(this.value);
+        this._slider._onValueChange(this);
+        this._slider.step > 0
+            ? this._updateThumbUIByValue()
+            : this._updateThumbUIByPointerEvent(event, { withAnimation: this._slider._hasAnimation });
+    }
+    _onPointerMove(event) {
+        // Again, does nothing if a step is defined because
+        // we want the value to snap to the values on input.
+        if (!this._slider.step && this._isActive) {
+            this._updateThumbUIByPointerEvent(event);
+        }
+    }
+    _onPointerUp(event) {
+        this._isActive = false;
+        this._updateWidthInactive();
+        if (!this.disabled) {
+            this._handleValueCorrection(event);
+        }
+    }
+    _clamp(v) {
+        return Math.max(Math.min(v, this._slider._cachedWidth), 0);
+    }
+    _calcTranslateXByValue() {
+        if (this._slider._isRtl) {
+            return (1 - this.percentage) * this._slider._cachedWidth;
+        }
+        return this.percentage * this._slider._cachedWidth;
+    }
+    _calcTranslateXByPointerEvent(event) {
+        return event.clientX - this._slider._cachedLeft;
+    }
+    /**
+     * Used to set the slider width to the correct
+     * dimensions while the user is dragging.
+     */
+    _updateWidthActive() {
+        this._hostElement.style.padding = `0 ${this._slider._inputPadding}px`;
+        this._hostElement.style.width = `calc(100% + ${this._slider._inputPadding}px)`;
+    }
+    /**
+     * Sets the slider input to disproportionate dimensions to allow for touch
+     * events to be captured on touch devices.
+     */
+    _updateWidthInactive() {
+        this._hostElement.style.padding = '0px';
+        this._hostElement.style.width = 'calc(100% + 48px)';
+        this._hostElement.style.left = '-24px';
+    }
+    _updateThumbUIByValue(options) {
+        this.translateX = this._clamp(this._calcTranslateXByValue());
+        this._updateThumbUI(options);
+    }
+    _updateThumbUIByPointerEvent(event, options) {
+        this.translateX = this._clamp(this._calcTranslateXByPointerEvent(event));
+        this._updateThumbUI(options);
+    }
+    _updateThumbUI(options) {
+        this._slider._setTransition(!!options?.withAnimation);
+        this._slider._onTranslateXChange(this);
+    }
+    /**
+     * Sets the input's value.
+     * @param value The new value of the input
+     * @docs-private
+     */
+    writeValue(value) {
+        this.value = value;
+    }
+    /**
+     * Registers a callback to be invoked when the input's value changes from user input.
+     * @param fn The callback to register
+     * @docs-private
+     */
+    registerOnChange(fn) {
+        this._onChangeFn = fn;
+    }
+    /**
+     * Registers a callback to be invoked when the input is blurred by the user.
+     * @param fn The callback to register
+     * @docs-private
+     */
+    registerOnTouched(fn) {
+        this._onTouchedFn = fn;
+    }
+    /**
+     * Sets the disabled state of the slider.
+     * @param isDisabled The new disabled state
+     * @docs-private
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    focus() {
+        this._hostElement.focus();
+    }
+    blur() {
+        this._hostElement.blur();
+    }
+}
+MatSliderThumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MatSliderThumb, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: MatSlider }], target: i0.ɵɵFactoryTarget.Directive });
+MatSliderThumb.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: { value: "value" }, outputs: { valueChange: "valueChange", dragStart: "dragStart", dragEnd: "dragEnd" }, host: { attributes: { "type": "range" }, listeners: { "change": "_onChange()", "input": "_onInput()", "blur": "_onBlur()", "focus": "_onFocus()" }, properties: { "attr.aria-valuetext": "_valuetext" }, classAttribute: "mdc-slider__input" }, providers: [MAT_SLIDER_THUMB_VALUE_ACCESSOR, { provide: MAT_SLIDER_THUMB, useExisting: MatSliderThumb }], exportAs: ["matSliderThumb"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MatSliderThumb, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line
+                    selector: 'input[matSliderThumb]',
+                    exportAs: 'matSliderThumb',
+                    host: {
+                        class: 'mdc-slider__input',
+                        type: 'range',
+                        '[attr.aria-valuetext]': '_valuetext',
+                        '(change)': '_onChange()',
+                        '(input)': '_onInput()',
+                        // TODO(wagnermaciel): Consider using a global event listener instead.
+                        // Reason: I have found a semi-consistent way to mouse up without triggering this event.
+                        '(blur)': '_onBlur()',
+                        '(focus)': '_onFocus()',
+                    },
+                    providers: [MAT_SLIDER_THUMB_VALUE_ACCESSOR, { provide: MAT_SLIDER_THUMB, useExisting: MatSliderThumb }],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MatSlider]
+                }] }]; }, propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], dragStart: [{
+                type: Output
+            }], dragEnd: [{
+                type: Output
+            }] } });
+
+class FormlyFieldMDCSlider extends FormlyFieldSlider$2 {
+    set mdcSlider(slider) {
+        Object.defineProperty(slider, '_input', {
+            set: () => { },
+            get: () => this.sliderThumb,
+        });
+    }
+    onContainerClick(event) {
+        this.sliderThumb?._hostElement.focus();
+        super.onContainerClick(event);
+    }
+}
+FormlyFieldMDCSlider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyFieldMDCSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FormlyFieldMDCSlider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FormlyFieldMDCSlider, selector: "formly-field-mat-slider", viewQueries: [{ propertyName: "sliderThumb", first: true, predicate: MAT_SLIDER_THUMB, descendants: true, static: true }, { propertyName: "mdcSlider", first: true, predicate: MatSlider, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <mat-slider
+      [id]="id"
+      [style.width]="'100%'"
+      [formlyAttributes]="field"
+      [tabIndex]="props.tabindex"
+      [color]="props.color"
+      [displayWith]="displayWith"
+      [invert]="props.invert"
+      [max]="props.max"
+      [min]="props.min"
+      [step]="props.step"
+      [thumbLabel]="props.thumbLabel"
+      [tickInterval]="props.tickInterval"
+      [valueText]="props.valueText"
+      [vertical]="props.vertical"
+      (input)="props.input && props.input(field, $event)"
+      (change)="props.change && props.change(field, $event)"
+    >
+      <input matSliderThumb [formControl]="formControl" [formlyAttributes]="field" />
+    </mat-slider>
+  `, isInline: true, components: [{ type: i1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }], directives: [{ type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyFieldMDCSlider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-field-mat-slider',
+                    template: `
+    <mat-slider
+      [id]="id"
+      [style.width]="'100%'"
+      [formlyAttributes]="field"
+      [tabIndex]="props.tabindex"
+      [color]="props.color"
+      [displayWith]="displayWith"
+      [invert]="props.invert"
+      [max]="props.max"
+      [min]="props.min"
+      [step]="props.step"
+      [thumbLabel]="props.thumbLabel"
+      [tickInterval]="props.tickInterval"
+      [valueText]="props.valueText"
+      [vertical]="props.vertical"
+      (input)="props.input && props.input(field, $event)"
+      (change)="props.change && props.change(field, $event)"
+    >
+      <input matSliderThumb [formControl]="formControl" [formlyAttributes]="field" />
+    </mat-slider>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { sliderThumb: [{
+                type: ViewChild,
+                args: [MAT_SLIDER_THUMB, { static: true }]
+            }], mdcSlider: [{
+                type: ViewChild,
+                args: [MatSlider, { static: true }]
+            }] } });
+
+const FormlyFieldSlider$1 = Number(VERSION.major) >= 15 ? FormlyFieldMDCSlider : FormlyFieldSlider$2;
 class FormlyMatSliderModule {
 }
-FormlyMatSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormlyMatSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormlyMatSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormlyMatSliderModule, declarations: [FormlyFieldSlider], imports: [CommonModule,
+FormlyMatSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyMatSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FormlyMatSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyMatSliderModule, declarations: [FormlyFieldSlider$2, FormlyFieldMDCSlider, MatSliderThumb], imports: [CommonModule,
+        MatCommonModule,
+        MatRippleModule,
         ReactiveFormsModule,
         MatSliderModule,
         FormlyMatFormFieldModule, i3.FormlyModule] });
-FormlyMatSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormlyMatSliderModule, imports: [[
+FormlyMatSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyMatSliderModule, imports: [[
             CommonModule,
+            MatCommonModule,
+            MatRippleModule,
             ReactiveFormsModule,
             MatSliderModule,
             FormlyMatFormFieldModule,
@@ -97,18 +635,20 @@ FormlyMatSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
                 types: [
                     {
                         name: 'slider',
-                        component: FormlyFieldSlider,
+                        component: FormlyFieldSlider$1,
                         wrappers: ['form-field'],
                     },
                 ],
             }),
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormlyMatSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyMatSliderModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [FormlyFieldSlider],
+                    declarations: [FormlyFieldSlider$2, FormlyFieldMDCSlider, MatSliderThumb],
                     imports: [
                         CommonModule,
+                        MatCommonModule,
+                        MatRippleModule,
                         ReactiveFormsModule,
                         MatSliderModule,
                         FormlyMatFormFieldModule,
@@ -116,7 +656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             types: [
                                 {
                                     name: 'slider',
-                                    component: FormlyFieldSlider,
+                                    component: FormlyFieldSlider$1,
                                     wrappers: ['form-field'],
                                 },
                             ],
@@ -125,6 +665,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+const FormlyFieldSlider = Number(VERSION.major) >= 15 ? FormlyFieldMDCSlider : FormlyFieldSlider$2;
+
 /**
  * Generated bundle index. Do not edit.
  */