@pepperi-addons/ngx-lib 0.4.0-angular14.36 → 0.4.0-angular14.39

package/fesm2020/pepperi-addons-ngx-lib-size-detector.mjs

@@ -8,126 +8,126 @@ import * as i1 from '@pepperi-addons/ngx-lib';
 import { PepScreenSizeType, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
 import * as i3 from '@angular/flex-layout/extended';
 
-class PepSizeDetectorComponent {
-    constructor(hostElement, layoutService) {
-        this.hostElement = hostElement;
-        this.layoutService = layoutService;
-        this.showScreenSize = false;
-        this._useAsWebComponent = false;
-        this.sizeChange = new EventEmitter();
-        this.prefix = 'is-';
-        this.sizes = [
-            {
-                id: PepScreenSizeType.XS,
-                name: 'xs',
-                css: `d-block d-sm-none`,
-            },
-            {
-                id: PepScreenSizeType.SM,
-                name: 'sm',
-                css: `d-none d-sm-block d-md-none`,
-            },
-            {
-                id: PepScreenSizeType.MD,
-                name: 'md',
-                css: `d-none d-md-block d-lg-none`,
-            },
-            {
-                id: PepScreenSizeType.LG,
-                name: 'lg',
-                css: `d-none d-lg-block d-xl-none`,
-            },
-            {
-                id: PepScreenSizeType.XL,
-                name: 'xl',
-                css: `d-none d-xl-block`,
-            },
-        ];
-        this.layoutService.onResize$.subscribe((size) => {
-            this.currentSize = this.sizes.find((s) => s.id === size);
-            this.sizeChange.emit(this.currentSize);
-        });
-    }
-    set useAsWebComponent(value) {
-        if (value) {
-            this.exportFunctionsOnHostElement();
-        }
-    }
-    get useAsWebComponent() {
-        return this._useAsWebComponent;
-    }
-    onResize(event) {
-        this.detectScreenSize();
-    }
-    ngAfterViewInit() {
-        this.detectScreenSize();
-    }
-    detectScreenSize() {
-        this.currentSize = this.sizes.find((x) => {
-            const el = this.hostElement.nativeElement.querySelector(`.${this.prefix}${x.id}`);
-            const isVisible = window.getComputedStyle(el).display !== 'none';
-            return isVisible;
-        });
-        this.layoutService.onResize(this.currentSize.id);
-    }
-    exportFunctionsOnHostElement() {
-        // This is for web component usage for use those functions.
-        this.hostElement.nativeElement.getCurrentSize = this.getCurrentSize.bind(this);
-    }
-    getCurrentSize() {
-        return this.currentSize;
-    }
-}
-PepSizeDetectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSizeDetectorComponent, deps: [{ token: i0.ElementRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepSizeDetectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSizeDetectorComponent, selector: "pep-size-detector", inputs: { showScreenSize: "showScreenSize", useAsWebComponent: "useAsWebComponent" }, outputs: { sizeChange: "sizeChange" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<!-- Bootstrap -->\n<!-- <div *ngFor=\"let s of sizes\" class=\"{{s.css + ' ' + (prefix + s.id) }}\">{{s.name}}</div> -->\n\n<!-- Angular flex-layout -->\n<div *ngFor=\"let s of sizes\" fxShow.xs=\"{{s.name == 'xs'}}\" fxShow.sm=\"{{s.name == 'sm'}}\"\n  fxShow.md=\"{{s.name == 'md'}}\" fxShow.lg=\"{{s.name == 'lg'}}\" fxShow.xl=\"{{s.name == 'xl'}}\"\n  class=\"{{s.css + ' ' + (prefix + s.id) }}\">\n  <ng-container *ngIf=\"showScreenSize\"> The current screen size is - {{s.name}}</ng-container>\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSizeDetectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-size-detector', template: "<!-- Bootstrap -->\n<!-- <div *ngFor=\"let s of sizes\" class=\"{{s.css + ' ' + (prefix + s.id) }}\">{{s.name}}</div> -->\n\n<!-- Angular flex-layout -->\n<div *ngFor=\"let s of sizes\" fxShow.xs=\"{{s.name == 'xs'}}\" fxShow.sm=\"{{s.name == 'sm'}}\"\n  fxShow.md=\"{{s.name == 'md'}}\" fxShow.lg=\"{{s.name == 'lg'}}\" fxShow.xl=\"{{s.name == 'xl'}}\"\n  class=\"{{s.css + ' ' + (prefix + s.id) }}\">\n  <ng-container *ngIf=\"showScreenSize\"> The current screen size is - {{s.name}}</ng-container>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PepLayoutService }]; }, propDecorators: { showScreenSize: [{
-                type: Input
-            }], useAsWebComponent: [{
-                type: Input
-            }], sizeChange: [{
-                type: Output
-            }], onResize: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
+class PepSizeDetectorComponent {
+    constructor(hostElement, layoutService) {
+        this.hostElement = hostElement;
+        this.layoutService = layoutService;
+        this.showScreenSize = false;
+        this._useAsWebComponent = false;
+        this.sizeChange = new EventEmitter();
+        this.prefix = 'is-';
+        this.sizes = [
+            {
+                id: PepScreenSizeType.XS,
+                name: 'xs',
+                css: `d-block d-sm-none`,
+            },
+            {
+                id: PepScreenSizeType.SM,
+                name: 'sm',
+                css: `d-none d-sm-block d-md-none`,
+            },
+            {
+                id: PepScreenSizeType.MD,
+                name: 'md',
+                css: `d-none d-md-block d-lg-none`,
+            },
+            {
+                id: PepScreenSizeType.LG,
+                name: 'lg',
+                css: `d-none d-lg-block d-xl-none`,
+            },
+            {
+                id: PepScreenSizeType.XL,
+                name: 'xl',
+                css: `d-none d-xl-block`,
+            },
+        ];
+        this.layoutService.onResize$.subscribe((size) => {
+            this.currentSize = this.sizes.find((s) => s.id === size);
+            this.sizeChange.emit(this.currentSize);
+        });
+    }
+    set useAsWebComponent(value) {
+        if (value) {
+            this.exportFunctionsOnHostElement();
+        }
+    }
+    get useAsWebComponent() {
+        return this._useAsWebComponent;
+    }
+    onResize(event) {
+        this.detectScreenSize();
+    }
+    ngAfterViewInit() {
+        this.detectScreenSize();
+    }
+    detectScreenSize() {
+        this.currentSize = this.sizes.find((x) => {
+            const el = this.hostElement.nativeElement.querySelector(`.${this.prefix}${x.id}`);
+            const isVisible = window.getComputedStyle(el).display !== 'none';
+            return isVisible;
+        });
+        this.layoutService.onResize(this.currentSize.id);
+    }
+    exportFunctionsOnHostElement() {
+        // This is for web component usage for use those functions.
+        this.hostElement.nativeElement.getCurrentSize = this.getCurrentSize.bind(this);
+    }
+    getCurrentSize() {
+        return this.currentSize;
+    }
+}
+PepSizeDetectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSizeDetectorComponent, deps: [{ token: i0.ElementRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+PepSizeDetectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSizeDetectorComponent, selector: "pep-size-detector", inputs: { showScreenSize: "showScreenSize", useAsWebComponent: "useAsWebComponent" }, outputs: { sizeChange: "sizeChange" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<!-- Bootstrap -->\n<!-- <div *ngFor=\"let s of sizes\" class=\"{{s.css + ' ' + (prefix + s.id) }}\">{{s.name}}</div> -->\n\n<!-- Angular flex-layout -->\n<div *ngFor=\"let s of sizes\" fxShow.xs=\"{{s.name == 'xs'}}\" fxShow.sm=\"{{s.name == 'sm'}}\"\n  fxShow.md=\"{{s.name == 'md'}}\" fxShow.lg=\"{{s.name == 'lg'}}\" fxShow.xl=\"{{s.name == 'xl'}}\"\n  class=\"{{s.css + ' ' + (prefix + s.id) }}\">\n  <ng-container *ngIf=\"showScreenSize\"> The current screen size is - {{s.name}}</ng-container>\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSizeDetectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-size-detector', template: "<!-- Bootstrap -->\n<!-- <div *ngFor=\"let s of sizes\" class=\"{{s.css + ' ' + (prefix + s.id) }}\">{{s.name}}</div> -->\n\n<!-- Angular flex-layout -->\n<div *ngFor=\"let s of sizes\" fxShow.xs=\"{{s.name == 'xs'}}\" fxShow.sm=\"{{s.name == 'sm'}}\"\n  fxShow.md=\"{{s.name == 'md'}}\" fxShow.lg=\"{{s.name == 'lg'}}\" fxShow.xl=\"{{s.name == 'xl'}}\"\n  class=\"{{s.css + ' ' + (prefix + s.id) }}\">\n  <ng-container *ngIf=\"showScreenSize\"> The current screen size is - {{s.name}}</ng-container>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PepLayoutService }]; }, propDecorators: { showScreenSize: [{
+                type: Input
+            }], useAsWebComponent: [{
+                type: Input
+            }], sizeChange: [{
+                type: Output
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
             }] } });
 
-class PepSizeDetectorModule {
-}
-PepSizeDetectorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSizeDetectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PepSizeDetectorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepSizeDetectorModule, declarations: [PepSizeDetectorComponent], imports: [CommonModule,
-        ReactiveFormsModule,
-        FlexLayoutModule,
-        // ngx-lib modules
-        PepNgxLibModule], exports: [PepSizeDetectorComponent] });
-PepSizeDetectorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSizeDetectorModule, imports: [CommonModule,
-        ReactiveFormsModule,
-        FlexLayoutModule,
-        // ngx-lib modules
-        PepNgxLibModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSizeDetectorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        FlexLayoutModule,
-                        // ngx-lib modules
-                        PepNgxLibModule,
-                    ],
-                    exports: [PepSizeDetectorComponent],
-                    declarations: [PepSizeDetectorComponent],
-                }]
+class PepSizeDetectorModule {
+}
+PepSizeDetectorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSizeDetectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepSizeDetectorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepSizeDetectorModule, declarations: [PepSizeDetectorComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        FlexLayoutModule,
+        // ngx-lib modules
+        PepNgxLibModule], exports: [PepSizeDetectorComponent] });
+PepSizeDetectorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSizeDetectorModule, imports: [CommonModule,
+        ReactiveFormsModule,
+        FlexLayoutModule,
+        // ngx-lib modules
+        PepNgxLibModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSizeDetectorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FlexLayoutModule,
+                        // ngx-lib modules
+                        PepNgxLibModule,
+                    ],
+                    exports: [PepSizeDetectorComponent],
+                    declarations: [PepSizeDetectorComponent],
+                }]
         }] });
 
-/*
- * Public API Surface of ngx-lib/size-detector
+/*
+ * Public API Surface of ngx-lib/size-detector
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { PepSizeDetectorComponent, PepSizeDetectorModule };

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

@@ -9,141 +9,141 @@ import { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';
 import * as i1 from '@pepperi-addons/ngx-lib';
 import { DEFAULT_HORIZONTAL_ALIGNMENT, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
 
-/**
- * This is a slider component that support pepperi theme
- * style & state & sizes
- *
- * @export
- * @class PepSliderComponent
- * @implements {OnDestroy}
- */
-class PepSliderComponent {
-    constructor(renderer, element, pepLayoutService) {
-        this.renderer = renderer;
-        this.element = element;
-        this.pepLayoutService = pepLayoutService;
-        this.label = '';
-        this.disabled = false;
-        this.hint = '';
-        this._background = '';
-        this.step = 1;
-        this.minValue = NaN;
-        this.maxValue = NaN;
-        this._value = NaN;
-        this.valueChange = new EventEmitter();
-        this.inputChange = new EventEmitter();
-        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
-        this.sliderWrapper = null;
-    }
-    set background(background) {
-        if (!background) {
-            background = '';
-        }
-        this._background = background;
-        this.setBackground();
-    }
-    get background() {
-        return this._background;
-    }
-    set value(value) {
-        this._value = value;
-    }
-    get value() {
-        return this._value;
-    }
-    setBackground() {
-        // Get the wrapper for set the background.
-        if (!this.sliderWrapper) {
-            this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper');
-        }
-        if (this.sliderWrapper) {
-            this.renderer.setStyle(this.sliderWrapper, 'background', this.background?.length > 0 ? this.background : '');
-            if (this.background?.length > 0) {
-                this.renderer.removeClass(this.sliderWrapper, 'background-color-dimmed');
-            }
-            else {
-                this.renderer.addClass(this.sliderWrapper, 'background-color-dimmed');
-            }
-        }
-    }
-    ngOnInit() {
-        this.xAlignment = this.pepLayoutService.isRtl() ? 'right' : 'left';
-        this.setBackground();
-    }
-    onValueChange(event) {
-        this.valueChange.emit(event.value);
-    }
-    onInputChange(event) {
-        this.inputChange.emit(event.value);
-    }
-}
-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"] }] });
-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"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.PepLayoutService }]; }, propDecorators: { label: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], hint: [{
-                type: Input
-            }], background: [{
-                type: Input
-            }], step: [{
-                type: Input
-            }], minValue: [{
-                type: Input
-            }], maxValue: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], inputChange: [{
-                type: Output
+/**
+ * This is a slider component that support pepperi theme
+ * style & state & sizes
+ *
+ * @export
+ * @class PepSliderComponent
+ * @implements {OnDestroy}
+ */
+class PepSliderComponent {
+    constructor(renderer, element, pepLayoutService) {
+        this.renderer = renderer;
+        this.element = element;
+        this.pepLayoutService = pepLayoutService;
+        this.label = '';
+        this.disabled = false;
+        this.hint = '';
+        this._background = '';
+        this.step = 1;
+        this.minValue = NaN;
+        this.maxValue = NaN;
+        this._value = NaN;
+        this.valueChange = new EventEmitter();
+        this.inputChange = new EventEmitter();
+        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
+        this.sliderWrapper = null;
+    }
+    set background(background) {
+        if (!background) {
+            background = '';
+        }
+        this._background = background;
+        this.setBackground();
+    }
+    get background() {
+        return this._background;
+    }
+    set value(value) {
+        this._value = value;
+    }
+    get value() {
+        return this._value;
+    }
+    setBackground() {
+        // Get the wrapper for set the background.
+        if (!this.sliderWrapper) {
+            this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper');
+        }
+        if (this.sliderWrapper) {
+            this.renderer.setStyle(this.sliderWrapper, 'background', this.background?.length > 0 ? this.background : '');
+            if (this.background?.length > 0) {
+                this.renderer.removeClass(this.sliderWrapper, 'background-color-dimmed');
+            }
+            else {
+                this.renderer.addClass(this.sliderWrapper, 'background-color-dimmed');
+            }
+        }
+    }
+    ngOnInit() {
+        this.xAlignment = this.pepLayoutService.isRtl() ? 'right' : 'left';
+        this.setBackground();
+    }
+    onValueChange(event) {
+        this.valueChange.emit(event.value);
+    }
+    onInputChange(event) {
+        this.inputChange.emit(event.value);
+    }
+}
+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"] }] });
+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"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.PepLayoutService }]; }, propDecorators: { label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], minValue: [{
+                type: Input
+            }], maxValue: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], inputChange: [{
+                type: Output
             }] } });
 
-class PepSliderModule {
-}
-PepSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PepSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepSliderModule, declarations: [PepSliderComponent], imports: [CommonModule,
-        // Material modules
-        MatCommonModule,
-        MatSliderModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepFieldTitleModule], exports: [PepSliderComponent] });
-PepSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSliderModule, imports: [CommonModule,
-        // Material modules
-        MatCommonModule,
-        MatSliderModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepFieldTitleModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSliderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        // Material modules
-                        MatCommonModule,
-                        MatSliderModule,
-                        // ngx-lib modules
-                        PepNgxLibModule,
-                        PepFieldTitleModule,
-                    ],
-                    exports: [PepSliderComponent],
-                    declarations: [PepSliderComponent],
-                }]
+class PepSliderModule {
+}
+PepSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepSliderModule, declarations: [PepSliderComponent], imports: [CommonModule,
+        // Material modules
+        MatCommonModule,
+        MatSliderModule,
+        // ngx-lib modules
+        PepNgxLibModule,
+        PepFieldTitleModule], exports: [PepSliderComponent] });
+PepSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSliderModule, imports: [CommonModule,
+        // Material modules
+        MatCommonModule,
+        MatSliderModule,
+        // ngx-lib modules
+        PepNgxLibModule,
+        PepFieldTitleModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSliderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        // Material modules
+                        MatCommonModule,
+                        MatSliderModule,
+                        // ngx-lib modules
+                        PepNgxLibModule,
+                        PepFieldTitleModule,
+                    ],
+                    exports: [PepSliderComponent],
+                    declarations: [PepSliderComponent],
+                }]
         }] });
 
-/*
- * Public API Surface of ngx-lib/slider
+/*
+ * Public API Surface of ngx-lib/slider
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { PepSliderComponent, PepSliderModule };