@pepperi-addons/ngx-lib 0.4.2-beta.176 → 0.4.2-beta.177

package/esm2020/slider/slider.component.mjs

@@ -73,10 +73,10 @@ export class PepSliderComponent {
     }
 }
 PepSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSliderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSliderComponent, selector: "pep-slider", inputs: { label: "label", disabled: "disabled", hint: "hint", background: "background", step: "step", minValue: "minValue", maxValue: "maxValue", value: "value" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>", styles: ["", ".pep-slider-container ::ng-deep .mat-slider{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.12)}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:-.1875rem;left:unset;right:unset;border-radius:var(--pep-border-radius-md, .25rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:-9px;bottom:-9px;transform:scale(.7)!important;border-color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 var(--pep-spacing-2xs, .125rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}\n"], dependencies: [{ kind: "component", type: i2.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { kind: "component", type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }] });
+PepSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSliderComponent, selector: "pep-slider", inputs: { label: "label", disabled: "disabled", hint: "hint", background: "background", step: "step", minValue: "minValue", maxValue: "maxValue", value: "value" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>", styles: ["", ".pep-slider-container ::ng-deep .mat-slider{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.12)}.pep-slider-container ::ng-deep .mat-slider.mat-slider-disabled{opacity:.5}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:-.1875rem;left:unset;right:unset;border-radius:var(--pep-border-radius-md, .25rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:-9px;bottom:-9px;transform:scale(.7)!important;border-color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 var(--pep-spacing-2xs, .125rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}\n"], dependencies: [{ kind: "component", type: i2.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { kind: "component", type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pep-slider', template: "<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>", styles: [".pep-slider-container ::ng-deep .mat-slider{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.12)}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:-.1875rem;left:unset;right:unset;border-radius:var(--pep-border-radius-md, .25rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:-9px;bottom:-9px;transform:scale(.7)!important;border-color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 var(--pep-spacing-2xs, .125rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}\n"] }]
+            args: [{ selector: 'pep-slider', template: "<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>", styles: [".pep-slider-container ::ng-deep .mat-slider{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.12)}.pep-slider-container ::ng-deep .mat-slider.mat-slider-disabled{opacity:.5}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:-.1875rem;left:unset;right:unset;border-radius:var(--pep-border-radius-md, .25rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:-9px;bottom:-9px;transform:scale(.7)!important;border-color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 var(--pep-spacing-2xs, .125rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.PepLayoutService }]; }, propDecorators: { label: [{
                 type: Input
             }], disabled: [{

package/fesm2015/pepperi-addons-ngx-lib-slider.mjs

@@ -79,10 +79,10 @@ class PepSliderComponent {
     }
 }
 PepSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSliderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSliderComponent, selector: "pep-slider", inputs: { label: "label", disabled: "disabled", hint: "hint", background: "background", step: "step", minValue: "minValue", maxValue: "maxValue", value: "value" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>", styles: ["", ".pep-slider-container ::ng-deep .mat-slider{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.12)}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:-.1875rem;left:unset;right:unset;border-radius:var(--pep-border-radius-md, .25rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:-9px;bottom:-9px;transform:scale(.7)!important;border-color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 var(--pep-spacing-2xs, .125rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}\n"], dependencies: [{ kind: "component", type: i2.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { kind: "component", type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }] });
+PepSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSliderComponent, selector: "pep-slider", inputs: { label: "label", disabled: "disabled", hint: "hint", background: "background", step: "step", minValue: "minValue", maxValue: "maxValue", value: "value" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>", styles: ["", ".pep-slider-container ::ng-deep .mat-slider{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.12)}.pep-slider-container ::ng-deep .mat-slider.mat-slider-disabled{opacity:.5}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:-.1875rem;left:unset;right:unset;border-radius:var(--pep-border-radius-md, .25rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:-9px;bottom:-9px;transform:scale(.7)!important;border-color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 var(--pep-spacing-2xs, .125rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}\n"], dependencies: [{ kind: "component", type: i2.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { kind: "component", type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pep-slider', template: "<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>", styles: [".pep-slider-container ::ng-deep .mat-slider{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.12)}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:-.1875rem;left:unset;right:unset;border-radius:var(--pep-border-radius-md, .25rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:-9px;bottom:-9px;transform:scale(.7)!important;border-color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 var(--pep-spacing-2xs, .125rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}\n"] }]
+            args: [{ selector: 'pep-slider', template: "<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>", styles: [".pep-slider-container ::ng-deep .mat-slider{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.12)}.pep-slider-container ::ng-deep .mat-slider.mat-slider-disabled{opacity:.5}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:-.1875rem;left:unset;right:unset;border-radius:var(--pep-border-radius-md, .25rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:-9px;bottom:-9px;transform:scale(.7)!important;border-color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 var(--pep-spacing-2xs, .125rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.PepLayoutService }]; }, propDecorators: { label: [{
                 type: Input
             }], disabled: [{

package/fesm2015/pepperi-addons-ngx-lib-slider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-slider.mjs","sources":["../../../projects/ngx-lib/slider/slider.component.ts","../../../projects/ngx-lib/slider/slider.component.html","../../../projects/ngx-lib/slider/slider.module.ts","../../../projects/ngx-lib/slider/public-api.ts","../../../projects/ngx-lib/slider/pepperi-addons-ngx-lib-slider.ts"],"sourcesContent":["import {\n    Component,\n    OnDestroy,\n    Input,\n    Output,\n    EventEmitter,\n    Renderer2,\n    ElementRef,\n    OnInit,\n    ViewChild,\n} from '@angular/core';\nimport { PepLayoutService, DEFAULT_HORIZONTAL_ALIGNMENT, PepHorizontalAlignment } from '@pepperi-addons/ngx-lib';\n\n/**\n * This is a slider component that support pepperi theme\n * style & state & sizes\n *\n * @export\n * @class PepSliderComponent\n * @implements {OnDestroy}\n */\n@Component({\n    selector: 'pep-slider',\n    templateUrl: './slider.component.html',\n    styleUrls: ['./slider.component.scss', './slider.component.theme.scss'],\n})\nexport class PepSliderComponent implements OnInit {\n    @Input() label = '';\n    @Input() disabled = false;\n    @Input() hint = '';\n\n    private _background = '';\n    @Input()\n    set background(background: string) {\n        if (!background) {\n            background = '';\n        }\n\n        this._background = background;\n        this.setBackground();\n    }\n    get background(): string {\n        return this._background;\n    }\n\n    @Input() step = 1;\n    @Input() minValue = NaN;\n    @Input() maxValue = NaN;\n\n    private _value = NaN;\n    @Input()\n    set value(value: number) {\n        this._value = value;\n    }\n    get value(): number {\n        return this._value;\n    }\n\n    @Output()\n    valueChange: EventEmitter<number> = new EventEmitter<number>();\n\n    @Output()\n    inputChange: EventEmitter<number> = new EventEmitter<number>();\n\n    xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    sliderWrapper: any = null;\n\n    constructor(private renderer: Renderer2, private element: ElementRef, private pepLayoutService: PepLayoutService) { }\n\n    private setBackground(): void {\n        // Get the wrapper for set the background.\n        if (!this.sliderWrapper) {\n            this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper');\n        }\n\n        if (this.sliderWrapper) {\n            this.renderer.setStyle(this.sliderWrapper, 'background', this.background?.length > 0 ? this.background : '');\n\n            if (this.background?.length > 0) {\n                this.renderer.removeClass(this.sliderWrapper, 'background-color-dimmed');\n            } else {\n                this.renderer.addClass(this.sliderWrapper, 'background-color-dimmed');\n            }\n        }\n    }\n\n    ngOnInit(): void {\n        this.xAlignment = this.pepLayoutService.isRtl() ? 'right' : 'left';\n        this.setBackground();\n    }\n\n    onValueChange(event) {\n        this.valueChange.emit(event.value);\n    }\n\n    onInputChange(event) {\n        this.inputChange.emit(event.value);\n    }\n}\n","<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatSliderModule } from '@angular/material/slider';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\n\nimport { PepSliderComponent } from './slider.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        // Material modules\n        MatCommonModule,\n        MatSliderModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepFieldTitleModule,\n    ],\n    exports: [PepSliderComponent],\n    declarations: [PepSliderComponent],\n})\nexport class PepSliderModule { }\n","/*\n * Public API Surface of ngx-lib/slider\n */\nexport * from './slider.module';\nexport * from './slider.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-slider.mjs","sources":["../../../projects/ngx-lib/slider/slider.component.ts","../../../projects/ngx-lib/slider/slider.component.html","../../../projects/ngx-lib/slider/slider.module.ts","../../../projects/ngx-lib/slider/public-api.ts","../../../projects/ngx-lib/slider/pepperi-addons-ngx-lib-slider.ts"],"sourcesContent":["import {\n    Component,\n    OnDestroy,\n    Input,\n    Output,\n    EventEmitter,\n    Renderer2,\n    ElementRef,\n    OnInit,\n    ViewChild,\n} from '@angular/core';\nimport { PepLayoutService, DEFAULT_HORIZONTAL_ALIGNMENT, PepHorizontalAlignment } from '@pepperi-addons/ngx-lib';\n\n/**\n * This is a slider component that support pepperi theme\n * style & state & sizes\n *\n * @export\n * @class PepSliderComponent\n * @implements {OnDestroy}\n */\n@Component({\n    selector: 'pep-slider',\n    templateUrl: './slider.component.html',\n    styleUrls: ['./slider.component.scss', './slider.component.theme.scss'],\n})\nexport class PepSliderComponent implements OnInit {\n    @Input() label = '';\n    @Input() disabled = false;\n    @Input() hint = '';\n\n    private _background = '';\n    @Input()\n    set background(background: string) {\n        if (!background) {\n            background = '';\n        }\n\n        this._background = background;\n        this.setBackground();\n    }\n    get background(): string {\n        return this._background;\n    }\n\n    @Input() step = 1;\n    @Input() minValue = NaN;\n    @Input() maxValue = NaN;\n\n    private _value = NaN;\n    @Input()\n    set value(value: number) {\n        this._value = value;\n    }\n    get value(): number {\n        return this._value;\n    }\n\n    @Output()\n    valueChange: EventEmitter<number> = new EventEmitter<number>();\n\n    @Output()\n    inputChange: EventEmitter<number> = new EventEmitter<number>();\n\n    xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    sliderWrapper: any = null;\n\n    constructor(private renderer: Renderer2, private element: ElementRef, private pepLayoutService: PepLayoutService) { }\n\n    private setBackground(): void {\n        // Get the wrapper for set the background.\n        if (!this.sliderWrapper) {\n            this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper');\n        }\n\n        if (this.sliderWrapper) {\n            this.renderer.setStyle(this.sliderWrapper, 'background', this.background?.length > 0 ? this.background : '');\n\n            if (this.background?.length > 0) {\n                this.renderer.removeClass(this.sliderWrapper, 'background-color-dimmed');\n            } else {\n                this.renderer.addClass(this.sliderWrapper, 'background-color-dimmed');\n            }\n        }\n    }\n\n    ngOnInit(): void {\n        this.xAlignment = this.pepLayoutService.isRtl() ? 'right' : 'left';\n        this.setBackground();\n    }\n\n    onValueChange(event) {\n        this.valueChange.emit(event.value);\n    }\n\n    onInputChange(event) {\n        this.inputChange.emit(event.value);\n    }\n}\n","<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatSliderModule } from '@angular/material/slider';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\n\nimport { PepSliderComponent } from './slider.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        // Material modules\n        MatCommonModule,\n        MatSliderModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepFieldTitleModule,\n    ],\n    exports: [PepSliderComponent],\n    declarations: [PepSliderComponent],\n})\nexport class PepSliderModule { }\n","/*\n * Public API Surface of ngx-lib/slider\n */\nexport * from './slider.module';\nexport * from './slider.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2020/pepperi-addons-ngx-lib-slider.mjs

@@ -78,10 +78,10 @@ class PepSliderComponent {
     }
 }
 PepSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSliderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSliderComponent, selector: "pep-slider", inputs: { label: "label", disabled: "disabled", hint: "hint", background: "background", step: "step", minValue: "minValue", maxValue: "maxValue", value: "value" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>", styles: ["", ".pep-slider-container ::ng-deep .mat-slider{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.12)}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:-.1875rem;left:unset;right:unset;border-radius:var(--pep-border-radius-md, .25rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:-9px;bottom:-9px;transform:scale(.7)!important;border-color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 var(--pep-spacing-2xs, .125rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}\n"], dependencies: [{ kind: "component", type: i2.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { kind: "component", type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }] });
+PepSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSliderComponent, selector: "pep-slider", inputs: { label: "label", disabled: "disabled", hint: "hint", background: "background", step: "step", minValue: "minValue", maxValue: "maxValue", value: "value" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, ngImport: i0, template: "<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>", styles: ["", ".pep-slider-container ::ng-deep .mat-slider{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.12)}.pep-slider-container ::ng-deep .mat-slider.mat-slider-disabled{opacity:.5}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:-.1875rem;left:unset;right:unset;border-radius:var(--pep-border-radius-md, .25rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:-9px;bottom:-9px;transform:scale(.7)!important;border-color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 var(--pep-spacing-2xs, .125rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}\n"], dependencies: [{ kind: "component", type: i2.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }, { kind: "component", type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pep-slider', template: "<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>", styles: [".pep-slider-container ::ng-deep .mat-slider{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.12)}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:-.1875rem;left:unset;right:unset;border-radius:var(--pep-border-radius-md, .25rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:-9px;bottom:-9px;transform:scale(.7)!important;border-color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 var(--pep-spacing-2xs, .125rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}\n"] }]
+            args: [{ selector: 'pep-slider', template: "<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>", styles: [".pep-slider-container ::ng-deep .mat-slider{background:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.12)}.pep-slider-container ::ng-deep .mat-slider.mat-slider-disabled{opacity:.5}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:-.1875rem;left:unset;right:unset;border-radius:var(--pep-border-radius-md, .25rem)}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:-9px;bottom:-9px;transform:scale(.7)!important;border-color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 var(--pep-spacing-2xs, .125rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.PepLayoutService }]; }, propDecorators: { label: [{
                 type: Input
             }], disabled: [{

package/fesm2020/pepperi-addons-ngx-lib-slider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-slider.mjs","sources":["../../../projects/ngx-lib/slider/slider.component.ts","../../../projects/ngx-lib/slider/slider.component.html","../../../projects/ngx-lib/slider/slider.module.ts","../../../projects/ngx-lib/slider/public-api.ts","../../../projects/ngx-lib/slider/pepperi-addons-ngx-lib-slider.ts"],"sourcesContent":["import {\n    Component,\n    OnDestroy,\n    Input,\n    Output,\n    EventEmitter,\n    Renderer2,\n    ElementRef,\n    OnInit,\n    ViewChild,\n} from '@angular/core';\nimport { PepLayoutService, DEFAULT_HORIZONTAL_ALIGNMENT, PepHorizontalAlignment } from '@pepperi-addons/ngx-lib';\n\n/**\n * This is a slider component that support pepperi theme\n * style & state & sizes\n *\n * @export\n * @class PepSliderComponent\n * @implements {OnDestroy}\n */\n@Component({\n    selector: 'pep-slider',\n    templateUrl: './slider.component.html',\n    styleUrls: ['./slider.component.scss', './slider.component.theme.scss'],\n})\nexport class PepSliderComponent implements OnInit {\n    @Input() label = '';\n    @Input() disabled = false;\n    @Input() hint = '';\n\n    private _background = '';\n    @Input()\n    set background(background: string) {\n        if (!background) {\n            background = '';\n        }\n\n        this._background = background;\n        this.setBackground();\n    }\n    get background(): string {\n        return this._background;\n    }\n\n    @Input() step = 1;\n    @Input() minValue = NaN;\n    @Input() maxValue = NaN;\n\n    private _value = NaN;\n    @Input()\n    set value(value: number) {\n        this._value = value;\n    }\n    get value(): number {\n        return this._value;\n    }\n\n    @Output()\n    valueChange: EventEmitter<number> = new EventEmitter<number>();\n\n    @Output()\n    inputChange: EventEmitter<number> = new EventEmitter<number>();\n\n    xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    sliderWrapper: any = null;\n\n    constructor(private renderer: Renderer2, private element: ElementRef, private pepLayoutService: PepLayoutService) { }\n\n    private setBackground(): void {\n        // Get the wrapper for set the background.\n        if (!this.sliderWrapper) {\n            this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper');\n        }\n\n        if (this.sliderWrapper) {\n            this.renderer.setStyle(this.sliderWrapper, 'background', this.background?.length > 0 ? this.background : '');\n\n            if (this.background?.length > 0) {\n                this.renderer.removeClass(this.sliderWrapper, 'background-color-dimmed');\n            } else {\n                this.renderer.addClass(this.sliderWrapper, 'background-color-dimmed');\n            }\n        }\n    }\n\n    ngOnInit(): void {\n        this.xAlignment = this.pepLayoutService.isRtl() ? 'right' : 'left';\n        this.setBackground();\n    }\n\n    onValueChange(event) {\n        this.valueChange.emit(event.value);\n    }\n\n    onInputChange(event) {\n        this.inputChange.emit(event.value);\n    }\n}\n","<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatSliderModule } from '@angular/material/slider';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\n\nimport { PepSliderComponent } from './slider.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        // Material modules\n        MatCommonModule,\n        MatSliderModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepFieldTitleModule,\n    ],\n    exports: [PepSliderComponent],\n    declarations: [PepSliderComponent],\n})\nexport class PepSliderModule { }\n","/*\n * Public API Surface of ngx-lib/slider\n */\nexport * from './slider.module';\nexport * from './slider.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;AAaA;;;;;;;AAOG;MAMU,kBAAkB,CAAA;AAyC3B,IAAA,WAAA,CAAoB,QAAmB,EAAU,OAAmB,EAAU,gBAAkC,EAAA;QAA5F,IAAQ,CAAA,QAAA,GAAR,QAAQ,CAAW;QAAU,IAAO,CAAA,OAAA,GAAP,OAAO,CAAY;QAAU,IAAgB,CAAA,gBAAA,GAAhB,gBAAgB,CAAkB;QAxCvG,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;QACX,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QACjB,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;QAEX,IAAW,CAAA,WAAA,GAAG,EAAE,CAAC;QAchB,IAAI,CAAA,IAAA,GAAG,CAAC,CAAC;QACT,IAAQ,CAAA,QAAA,GAAG,GAAG,CAAC;QACf,IAAQ,CAAA,QAAA,GAAG,GAAG,CAAC;QAEhB,IAAM,CAAA,MAAA,GAAG,GAAG,CAAC;AAUrB,QAAA,IAAA,CAAA,WAAW,GAAyB,IAAI,YAAY,EAAU,CAAC;AAG/D,QAAA,IAAA,CAAA,WAAW,GAAyB,IAAI,YAAY,EAAU,CAAC;QAE/D,IAAU,CAAA,UAAA,GAA2B,4BAA4B,CAAC;QAClE,IAAa,CAAA,aAAA,GAAQ,IAAI,CAAC;KAE2F;IAnCrH,IACI,UAAU,CAAC,UAAkB,EAAA;QAC7B,IAAI,CAAC,UAAU,EAAE;YACb,UAAU,GAAG,EAAE,CAAC;AACnB,SAAA;AAED,QAAA,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;QAC9B,IAAI,CAAC,aAAa,EAAE,CAAC;KACxB;AACD,IAAA,IAAI,UAAU,GAAA;QACV,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;IAOD,IACI,KAAK,CAAC,KAAa,EAAA;AACnB,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACvB;AACD,IAAA,IAAI,KAAK,GAAA;QACL,OAAO,IAAI,CAAC,MAAM,CAAC;KACtB;IAaO,aAAa,GAAA;;AAEjB,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AACrB,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;AACxF,SAAA;QAED,IAAI,IAAI,CAAC,aAAa,EAAE;AACpB,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,YAAY,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,CAAC;AAE7G,YAAA,IAAI,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,CAAC,EAAE;gBAC7B,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,yBAAyB,CAAC,CAAC;AAC5E,aAAA;AAAM,iBAAA;gBACH,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,yBAAyB,CAAC,CAAC;AACzE,aAAA;AACJ,SAAA;KACJ;IAED,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,GAAG,OAAO,GAAG,MAAM,CAAC;QACnE,IAAI,CAAC,aAAa,EAAE,CAAC;KACxB;AAED,IAAA,aAAa,CAAC,KAAK,EAAA;QACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACtC;AAED,IAAA,aAAa,CAAC,KAAK,EAAA;QACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACtC;;+GAvEQ,kBAAkB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,kBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,2RC1B/B,wZAMM,EAAA,MAAA,EAAA,CAAA,EAAA,EAAA,mxCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,KAAA,EAAA,MAAA,EAAA,YAAA,EAAA,cAAA,EAAA,OAAA,EAAA,aAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,OAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,WAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,cAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDoBO,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,SAAS;+BACI,YAAY,EAAA,QAAA,EAAA,wZAAA,EAAA,MAAA,EAAA,CAAA,mxCAAA,CAAA,EAAA,CAAA;wJAKb,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAIF,UAAU,EAAA,CAAA;sBADb,KAAK;gBAaG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAIF,KAAK,EAAA,CAAA;sBADR,KAAK;gBASN,WAAW,EAAA,CAAA;sBADV,MAAM;gBAIP,WAAW,EAAA,CAAA;sBADV,MAAM;;;MEtCE,eAAe,CAAA;;4GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;6GAAf,eAAe,EAAA,YAAA,EAAA,CAFT,kBAAkB,CAAA,EAAA,OAAA,EAAA,CAT7B,YAAY;;QAEZ,eAAe;QACf,eAAe;;QAEf,eAAe;AACf,QAAA,mBAAmB,aAEb,kBAAkB,CAAA,EAAA,CAAA,CAAA;AAGnB,eAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,YAXpB,YAAY;;QAEZ,eAAe;QACf,eAAe;;QAEf,eAAe;QACf,mBAAmB,CAAA,EAAA,CAAA,CAAA;2FAKd,eAAe,EAAA,UAAA,EAAA,CAAA;kBAb3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;wBACL,YAAY;;wBAEZ,eAAe;wBACf,eAAe;;wBAEf,eAAe;wBACf,mBAAmB;AACtB,qBAAA;oBACD,OAAO,EAAE,CAAC,kBAAkB,CAAC;oBAC7B,YAAY,EAAE,CAAC,kBAAkB,CAAC;AACrC,iBAAA,CAAA;;;ACtBD;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"pepperi-addons-ngx-lib-slider.mjs","sources":["../../../projects/ngx-lib/slider/slider.component.ts","../../../projects/ngx-lib/slider/slider.component.html","../../../projects/ngx-lib/slider/slider.module.ts","../../../projects/ngx-lib/slider/public-api.ts","../../../projects/ngx-lib/slider/pepperi-addons-ngx-lib-slider.ts"],"sourcesContent":["import {\n    Component,\n    OnDestroy,\n    Input,\n    Output,\n    EventEmitter,\n    Renderer2,\n    ElementRef,\n    OnInit,\n    ViewChild,\n} from '@angular/core';\nimport { PepLayoutService, DEFAULT_HORIZONTAL_ALIGNMENT, PepHorizontalAlignment } from '@pepperi-addons/ngx-lib';\n\n/**\n * This is a slider component that support pepperi theme\n * style & state & sizes\n *\n * @export\n * @class PepSliderComponent\n * @implements {OnDestroy}\n */\n@Component({\n    selector: 'pep-slider',\n    templateUrl: './slider.component.html',\n    styleUrls: ['./slider.component.scss', './slider.component.theme.scss'],\n})\nexport class PepSliderComponent implements OnInit {\n    @Input() label = '';\n    @Input() disabled = false;\n    @Input() hint = '';\n\n    private _background = '';\n    @Input()\n    set background(background: string) {\n        if (!background) {\n            background = '';\n        }\n\n        this._background = background;\n        this.setBackground();\n    }\n    get background(): string {\n        return this._background;\n    }\n\n    @Input() step = 1;\n    @Input() minValue = NaN;\n    @Input() maxValue = NaN;\n\n    private _value = NaN;\n    @Input()\n    set value(value: number) {\n        this._value = value;\n    }\n    get value(): number {\n        return this._value;\n    }\n\n    @Output()\n    valueChange: EventEmitter<number> = new EventEmitter<number>();\n\n    @Output()\n    inputChange: EventEmitter<number> = new EventEmitter<number>();\n\n    xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    sliderWrapper: any = null;\n\n    constructor(private renderer: Renderer2, private element: ElementRef, private pepLayoutService: PepLayoutService) { }\n\n    private setBackground(): void {\n        // Get the wrapper for set the background.\n        if (!this.sliderWrapper) {\n            this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper');\n        }\n\n        if (this.sliderWrapper) {\n            this.renderer.setStyle(this.sliderWrapper, 'background', this.background?.length > 0 ? this.background : '');\n\n            if (this.background?.length > 0) {\n                this.renderer.removeClass(this.sliderWrapper, 'background-color-dimmed');\n            } else {\n                this.renderer.addClass(this.sliderWrapper, 'background-color-dimmed');\n            }\n        }\n    }\n\n    ngOnInit(): void {\n        this.xAlignment = this.pepLayoutService.isRtl() ? 'right' : 'left';\n        this.setBackground();\n    }\n\n    onValueChange(event) {\n        this.valueChange.emit(event.value);\n    }\n\n    onInputChange(event) {\n        this.inputChange.emit(event.value);\n    }\n}\n","<div class=\"pep-slider-container\">\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n    </pep-field-title>\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n    </mat-slider>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatSliderModule } from '@angular/material/slider';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\n\nimport { PepSliderComponent } from './slider.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        // Material modules\n        MatCommonModule,\n        MatSliderModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepFieldTitleModule,\n    ],\n    exports: [PepSliderComponent],\n    declarations: [PepSliderComponent],\n})\nexport class PepSliderModule { }\n","/*\n * Public API Surface of ngx-lib/slider\n */\nexport * from './slider.module';\nexport * from './slider.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-lib",
-  "version": "0.4.2-beta.176",
+  "version": "0.4.2-beta.177",
   "peerDependencies": {
     "@angular/animations": ">= 14.0.2",
     "@angular/cdk": ">= 14.0.2",

package/slider/slider.component.theme.scss

@@ -5,6 +5,10 @@
     ::ng-deep.mat-slider {
         background: functions.get-pep-color(color-system-primary, color-tran-30);
 
+        &.mat-slider-disabled {
+            opacity: 0.5;
+        }
+
         &.mat-slider-horizontal {
             height: 1rem;
             width: 100%;