import * as i0 from '@angular/core';
import { forwardRef, Input, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
import * as i2 from '@angular/material/slider';
import { MatSliderModule } from '@angular/material/slider';

class RangeSliderComponent {
    fb;
    set min(min) {
        this.minimumFormControl.setValue(min);
        this.change();
    }
    get min() {
        return this.minFormControl.getRawValue();
    }
    set max(max) {
        this.maximumFormControl.setValue(max);
        this.change();
    }
    get max() {
        return this.maxFormControl.getRawValue();
    }
    rangeSliderFormGroup;
    constructor(fb) {
        this.fb = fb;
        const minimumValidator = (control) => {
            let errors = null;
            const rangeFormValue = control.getRawValue();
            if (rangeFormValue.min && rangeFormValue.minimum && rangeFormValue.min < rangeFormValue.minimum) {
                errors = {
                    minimumError: {
                        expectedMin: rangeFormValue.minimum,
                        currentMin: rangeFormValue.min,
                    },
                };
            }
            return errors;
        };
        const minimumRequiredValidator = (control) => {
            let errors = null;
            const rangeFormValue = control.getRawValue();
            if (rangeFormValue.min == undefined) {
                errors = {
                    minimumRequired: true,
                };
            }
            return errors;
        };
        const maximumValidator = (control) => {
            let errors = null;
            const rangeFormValue = control.getRawValue();
            if (rangeFormValue.max && rangeFormValue.maximum && rangeFormValue.max > rangeFormValue.maximum) {
                errors = {
                    maximumError: {
                        expectedMax: rangeFormValue.maximum,
                        currentMax: rangeFormValue.max,
                    },
                };
            }
            return errors;
        };
        const maximumRequiredValidator = (control) => {
            let errors = null;
            const rangeFormValue = control.getRawValue();
            if (rangeFormValue.max == undefined) {
                errors = {
                    maximumRequired: true,
                };
            }
            return errors;
        };
        this.rangeSliderFormGroup = fb.group({
            maximum: fb.control(0, { nonNullable: true }),
            minimum: fb.control(100, { nonNullable: true }),
            min: fb.control(undefined, { nonNullable: true }),
            max: fb.control(undefined, { nonNullable: true }),
        }, { validators: Validators.compose([minimumRequiredValidator, maximumRequiredValidator, minimumValidator, maximumValidator]) });
    }
    propagateChange = null;
    propagateOnTouch = null;
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
    registerOnTouched(fn) {
        this.propagateOnTouch = fn;
    }
    get minimum() {
        return this.minimumFormControl.getRawValue();
    }
    get maximum() {
        return this.maximumFormControl.getRawValue();
    }
    get minFormControl() {
        return this.rangeSliderFormGroup.controls.min;
    }
    get minimumFormControl() {
        return this.rangeSliderFormGroup.controls.minimum;
    }
    get maximumFormControl() {
        return this.rangeSliderFormGroup.controls.maximum;
    }
    get maxFormControl() {
        return this.rangeSliderFormGroup.controls.max;
    }
    writeValue(inputRange) {
        this.minFormControl.setValue(inputRange.min);
        this.maxFormControl.setValue(inputRange.max);
    }
    change() {
        if (this.propagateChange) {
            const formValue = this.rangeSliderFormGroup.getRawValue();
            this.propagateChange({
                min: formValue.min,
                max: formValue.max,
            });
        }
    }
    validate() {
        return this.rangeSliderFormGroup.errors;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: RangeSliderComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: RangeSliderComponent, isStandalone: true, selector: "ap-range-slider", inputs: { min: "min", max: "max" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => RangeSliderComponent),
                multi: true,
            },
            {
                provide: NG_VALIDATORS,
                useExisting: forwardRef(() => RangeSliderComponent),
                multi: true,
            },
        ], ngImport: i0, template: "<div\n    class=\"slider-wrapper\"\n    [formGroup]=\"rangeSliderFormGroup\">\n    <div class=\"number\">\n        <span>{{ min }}</span>\n    </div>\n    <mat-slider\n        class=\"slider\"\n        [min]=\"minimum\"\n        [max]=\"maximum\">\n        <input\n            matSliderStartThumb\n            formControlName=\"min\"\n            (change)=\"change()\" />\n        <input\n            matSliderEndThumb\n            formControlName=\"max\"\n            (change)=\"change()\" />\n    </mat-slider>\n    <div class=\"number\">\n        <span>{{ max > maximum ? max + '+' : max }}</span>\n    </div>\n</div>\n", styles: [":host{width:100%;height:52px}:host .slider-wrapper{display:flex;justify-content:space-between;align-items:center;gap:var(--ref-spacing-xxs)}:host .slider-wrapper .slider{flex-grow:2}:host .slider-wrapper .slider .mat-slider-thumb{background-color:var(--ref-color-electric-blue-100)}:host .slider-wrapper .number{flex-shrink:0;display:flex;justify-content:center;align-items:center;width:46px;height:36px;border:1px solid var(--ref-color-grey-20);border-radius:3px}::ng-deep .slider-wrapper .mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb-knob{background-color:var(--ref-color-white);border:3px solid var(--ref-color-electric-blue-100)}::ng-deep .slider-wrapper .mat-mdc-slider .mdc-slider__thumb-knob{background-color:var(--ref-color-white);border:3px solid var(--ref-color-electric-blue-100);width:var(--ref-spacing-md);height:var(--ref-spacing-md)}::ng-deep .slider-wrapper .mat-mdc-slider .mdc-slider__track--active_fill{border-color:var(--ref-color-electric-blue-150)}::ng-deep .slider-wrapper .mat-mdc-slider .mdc-slider__track--active{height:var(--ref-spacing-xxxs)}::ng-deep .slider-wrapper .mat-mdc-slider .mdc-slider__track--inactive{background-color:var(--ref-color-grey-20)}\n"], dependencies: [{ kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: RangeSliderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ap-range-slider', imports: [MatSliderModule, ReactiveFormsModule], providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => RangeSliderComponent),
                            multi: true,
                        },
                        {
                            provide: NG_VALIDATORS,
                            useExisting: forwardRef(() => RangeSliderComponent),
                            multi: true,
                        },
                    ], template: "<div\n    class=\"slider-wrapper\"\n    [formGroup]=\"rangeSliderFormGroup\">\n    <div class=\"number\">\n        <span>{{ min }}</span>\n    </div>\n    <mat-slider\n        class=\"slider\"\n        [min]=\"minimum\"\n        [max]=\"maximum\">\n        <input\n            matSliderStartThumb\n            formControlName=\"min\"\n            (change)=\"change()\" />\n        <input\n            matSliderEndThumb\n            formControlName=\"max\"\n            (change)=\"change()\" />\n    </mat-slider>\n    <div class=\"number\">\n        <span>{{ max > maximum ? max + '+' : max }}</span>\n    </div>\n</div>\n", styles: [":host{width:100%;height:52px}:host .slider-wrapper{display:flex;justify-content:space-between;align-items:center;gap:var(--ref-spacing-xxs)}:host .slider-wrapper .slider{flex-grow:2}:host .slider-wrapper .slider .mat-slider-thumb{background-color:var(--ref-color-electric-blue-100)}:host .slider-wrapper .number{flex-shrink:0;display:flex;justify-content:center;align-items:center;width:46px;height:36px;border:1px solid var(--ref-color-grey-20);border-radius:3px}::ng-deep .slider-wrapper .mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb-knob{background-color:var(--ref-color-white);border:3px solid var(--ref-color-electric-blue-100)}::ng-deep .slider-wrapper .mat-mdc-slider .mdc-slider__thumb-knob{background-color:var(--ref-color-white);border:3px solid var(--ref-color-electric-blue-100);width:var(--ref-spacing-md);height:var(--ref-spacing-md)}::ng-deep .slider-wrapper .mat-mdc-slider .mdc-slider__track--active_fill{border-color:var(--ref-color-electric-blue-150)}::ng-deep .slider-wrapper .mat-mdc-slider .mdc-slider__track--active{height:var(--ref-spacing-xxxs)}::ng-deep .slider-wrapper .mat-mdc-slider .mdc-slider__track--inactive{background-color:var(--ref-color-grey-20)}\n"] }]
        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { min: [{
                type: Input
            }], max: [{
                type: Input
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { RangeSliderComponent };
//# sourceMappingURL=agorapulse-ui-components-range-slider.mjs.map
