@obliczeniowo/elementary/fesm2022/obliczeniowo-elementary-slider.mjs

Library made in Angular version 20

import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
import * as i0 from '@angular/core';
import { EventEmitter, Input, HostBinding, Output, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { DecimalPipe, CommonModule } from '@angular/common';
import { ElementaryMath } from '@obliczeniowo/elementary/math';

class SliderComponent {
    /** */
    valueChanged = new EventEmitter();
    /** */
    mouseDownValue = new EventEmitter();
    /** */
    out = new EventEmitter();
    /** */
    in = new EventEmitter();
    over = false;
    overValue = 0;
    touched = false;
    disabled = false;
    decimalPipe = new DecimalPipe('en-US');
    /** */
    value = 0;
    /**  */
    max = 100;
    /** */
    min = 0;
    /** precision */
    step = 1;
    displayValue = true;
    formatter = (value, max, decimalPipe) => {
        return `${decimalPipe.transform(value, '0.0-0')} / ${decimalPipe.transform(max, '0.0-0')}`;
    };
    onChange = (value) => { };
    onTouched = () => { };
    validate(control) {
        return null;
    }
    registerOnValidatorChange(fn) { this.onChange = fn; }
    writeValue(value) {
        this.value = value;
    }
    registerOnChange(onChange) {
        this.onChange = onChange;
    }
    registerOnTouched(onTouched) {
        this.onTouched = onTouched;
    }
    markAsTouched() {
        if (this.disabled) {
            return;
        }
        if (!this.touched) {
            this.onTouched();
            this.touched = true;
        }
    }
    move(event, valueContent) {
        if (this.disabled) {
            return;
        }
        const rect = valueContent.getBoundingClientRect();
        this.overValue = (event.pageX - rect.left) / rect.width * (this.max - this.min) + this.min;
    }
    setValue(emit = true) {
        if (this.disabled) {
            return;
        }
        this.markAsTouched();
        this.value = ElementaryMath.minmax(Math.round(this.overValue / this.step) * this.step, this.min, this.max);
        if (emit) {
            this.valueChanged.emit(this.value);
        }
        this.onChange(this.value);
    }
    preSetValue() {
        if (this.disabled) {
            return;
        }
        this.mouseDownValue.emit(this.overValue);
    }
    setDisabledState(disabled) {
        this.disabled = disabled;
    }
    onLeave() {
        this.over = false;
        this.out.emit();
    }
    onOver() {
        this.over = !this.disabled;
        this.in.emit();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: SliderComponent, isStandalone: false, selector: "obl-slider", inputs: { value: "value", max: "max", min: "min", step: "step", displayValue: "displayValue", formatter: "formatter" }, outputs: { valueChanged: "valueChanged", mouseDownValue: "mouseDownValue", out: "out", in: "in" }, host: { properties: { "class.disabled": "this.disabled" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                multi: true,
                useExisting: SliderComponent
            },
            {
                provide: NG_VALIDATORS,
                multi: true,
                useExisting: SliderComponent
            }
        ], ngImport: i0, template: "\n@if (displayValue) {\n  <div class=\"value\">\n    {{ formatter(over ? overValue : value, max, decimalPipe) }}\n  </div>\n}\n\n<div\n  #valueContent\n  class=\"value-container\"\n  (mouseover)=\"onOver()\"\n  (mouseleave)=\"onLeave()\"\n  (mousemove)=\"move($event, valueContent)\"\n  (click)=\"setValue()\"\n  (mousedown)=\"preSetValue()\"\n>\n  <div [style.width.%]=\"((value - min) / (max - min)) * 100\"></div>\n  @if (over) {\n    <div\n      class=\"hover-value\"\n      [style.width.%]=\"((overValue - min) / (max - min)) * 100\"\n    ></div>\n  }\n</div>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:root{--obl-spinner-width: 30px;--obl-font-size: 14px}:host .value{width:calc(100% - var(--obl-slider-height, 10px));display:flex;justify-content:center;padding:5px}:host .value-container{border-radius:var(--obl-slider-height, 10px);height:var(--obl-slider-height, 10px);width:100%;background-color:var(--slider-value-container-color);position:relative}:host .value-container div{position:absolute;height:var(--obl-slider-height, 10px);background-color:var(--slider-value-color);border-radius:var(--obl-slider-height, 10px)}:host .value-container div.hover-value{opacity:.5;background-color:var(--slider-hover-value-color)}:host.disabled{color:var(--disabled-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SliderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'obl-slider', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: SliderComponent
                        },
                        {
                            provide: NG_VALIDATORS,
                            multi: true,
                            useExisting: SliderComponent
                        }
                    ], standalone: false, template: "\n@if (displayValue) {\n  <div class=\"value\">\n    {{ formatter(over ? overValue : value, max, decimalPipe) }}\n  </div>\n}\n\n<div\n  #valueContent\n  class=\"value-container\"\n  (mouseover)=\"onOver()\"\n  (mouseleave)=\"onLeave()\"\n  (mousemove)=\"move($event, valueContent)\"\n  (click)=\"setValue()\"\n  (mousedown)=\"preSetValue()\"\n>\n  <div [style.width.%]=\"((value - min) / (max - min)) * 100\"></div>\n  @if (over) {\n    <div\n      class=\"hover-value\"\n      [style.width.%]=\"((overValue - min) / (max - min)) * 100\"\n    ></div>\n  }\n</div>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:root{--obl-spinner-width: 30px;--obl-font-size: 14px}:host .value{width:calc(100% - var(--obl-slider-height, 10px));display:flex;justify-content:center;padding:5px}:host .value-container{border-radius:var(--obl-slider-height, 10px);height:var(--obl-slider-height, 10px);width:100%;background-color:var(--slider-value-container-color);position:relative}:host .value-container div{position:absolute;height:var(--obl-slider-height, 10px);background-color:var(--slider-value-color);border-radius:var(--obl-slider-height, 10px)}:host .value-container div.hover-value{opacity:.5;background-color:var(--slider-hover-value-color)}:host.disabled{color:var(--disabled-color)}\n"] }]
        }], propDecorators: { valueChanged: [{
                type: Output
            }], mouseDownValue: [{
                type: Output
            }], out: [{
                type: Output
            }], in: [{
                type: Output
            }], disabled: [{
                type: HostBinding,
                args: ['class.disabled']
            }], value: [{
                type: Input
            }], max: [{
                type: Input
            }], min: [{
                type: Input
            }], step: [{
                type: Input
            }], displayValue: [{
                type: Input
            }], formatter: [{
                type: Input
            }] } });

class SliderModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: SliderModule, declarations: [SliderComponent], imports: [CommonModule,
            FormsModule], exports: [SliderComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SliderModule, imports: [CommonModule,
            FormsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: SliderModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        SliderComponent
                    ],
                    imports: [
                        CommonModule,
                        FormsModule
                    ],
                    exports: [
                        SliderComponent
                    ]
                }]
        }] });

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

export { SliderComponent, SliderModule };
//# sourceMappingURL=obliczeniowo-elementary-slider.mjs.map