@pepperi-addons/ngx-lib 0.5.0-ng17.1 → 0.5.0-ng17.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/esm2022/button/button.component.mjs +2 -2
  2. package/esm2022/slider/slider.component.mjs +2 -2
  3. package/fesm2022/pepperi-addons-ngx-lib-button.mjs +2 -2
  4. package/fesm2022/pepperi-addons-ngx-lib-button.mjs.map +1 -1
  5. package/fesm2022/pepperi-addons-ngx-lib-slider.mjs +2 -2
  6. package/fesm2022/pepperi-addons-ngx-lib-slider.mjs.map +1 -1
  7. package/package.json +19 -19
  8. package/slider/slider.component.theme.scss +7 -0
  9. package/src/core/style/base/base.scss +6 -0
package/esm2022/button/button.component.mjs CHANGED
@@ -130,11 +130,11 @@ export class PepButtonComponent {
130
130
  this.buttonClick.emit(buttonClick);
131
131
  }
132
132
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PepButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
133
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PepButtonComponent, selector: "pep-button", inputs: { key: "key", value: "value", styleType: "styleType", styleStateType: "styleStateType", sizeType: "sizeType", classNames: "classNames", disabled: "disabled", iconName: "iconName", iconPosition: "iconPosition", visible: "visible" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button mat-button [pepDataQa]=\"key ? key : value\"\n class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\">\n </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\n [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n {{value}}\n </span>\n <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n</ng-template>", styles: [":host{display:grid}\n", ""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.PepDataQaDirective, selector: "[pepDataQa]", inputs: ["pepDataQa"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
133
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PepButtonComponent, selector: "pep-button", inputs: { key: "key", value: "value", styleType: "styleType", styleStateType: "styleStateType", sizeType: "sizeType", classNames: "classNames", disabled: "disabled", iconName: "iconName", iconPosition: "iconPosition", visible: "visible" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button mat-button [pepDataQa]=\"key ? key : value\"\n class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\">\n </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\n [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n {{value}}\n </span>\n <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n</ng-template>", styles: [":host{display:grid}:host ::ng-deep button .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important}:host ::ng-deep button .mdc-button__label mat-icon,:host ::ng-deep button .mdc-button__label .mat-icon,:host ::ng-deep button .mdc-button__label .mat-mdc-icon{display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important}:host ::ng-deep .mat-mdc-button .mdc-button__label,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important}:host ::ng-deep .mat-mdc-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-button .mdc-button__label .mat-mdc-icon,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label .mat-mdc-icon,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label .mat-mdc-icon,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label .mat-mdc-icon{display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important}\n", ""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.PepDataQaDirective, selector: "[pepDataQa]", inputs: ["pepDataQa"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
134
134
  }
135
135
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PepButtonComponent, decorators: [{
136
136
  type: Component,
137
- args: [{ selector: 'pep-button', template: "<button mat-button [pepDataQa]=\"key ? key : value\"\n class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\">\n </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\n [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n {{value}}\n </span>\n <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n</ng-template>", styles: [":host{display:grid}\n"] }]
137
+ args: [{ selector: 'pep-button', template: "<button mat-button [pepDataQa]=\"key ? key : value\"\n class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\">\n </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\n [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n {{value}}\n </span>\n <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n</ng-template>", styles: [":host{display:grid}:host ::ng-deep button .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important}:host ::ng-deep button .mdc-button__label mat-icon,:host ::ng-deep button .mdc-button__label .mat-icon,:host ::ng-deep button .mdc-button__label .mat-mdc-icon{display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important}:host ::ng-deep .mat-mdc-button .mdc-button__label,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important}:host ::ng-deep .mat-mdc-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-button .mdc-button__label .mat-mdc-icon,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label .mat-mdc-icon,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label .mat-mdc-icon,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label .mat-mdc-icon{display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important}\n"] }]
138
138
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { key: [{
139
139
  type: Input
140
140
  }], value: [{
package/esm2022/slider/slider.component.mjs CHANGED
@@ -75,11 +75,11 @@ export class PepSliderComponent {
75
75
  this.inputChange.emit(event.value);
76
76
  }
77
77
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PepSliderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
78
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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\" [disabled]=\"disabled\" [title]=\"value\" #ngSlider><input matSliderThumb [value]=\"value\" (change)=\"onValueChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" #ngSliderThumb=\"matSliderThumb\" (input)=\"onInputChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" />\n </mat-slider>\n</div>", styles: ["", ".pep-slider-container ::ng-deep .mat-slider,.pep-slider-container ::ng-deep .mat-mdc-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,.pep-slider-container ::ng-deep .mat-slider.mdc-slider--disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider--disabled{opacity:.5}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-slider.mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem);margin:0}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-slider .mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider{height:.375rem;position:relative;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,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--active{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob{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", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType", "multiLine"] }] });
78
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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\" [disabled]=\"disabled\" [title]=\"value\" #ngSlider><input matSliderThumb [value]=\"value\" (change)=\"onValueChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" #ngSliderThumb=\"matSliderThumb\" (input)=\"onInputChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" />\n </mat-slider>\n</div>", styles: ["", ".pep-slider-container ::ng-deep .mat-slider,.pep-slider-container ::ng-deep .mat-mdc-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,.pep-slider-container ::ng-deep .mat-slider.mdc-slider--disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider--disabled{opacity:.5}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-slider.mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem);margin:0}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider.mdc-slider .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-horizontal .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider .mdc-slider__thumb{left:-10px!important;height:20px!important;width:20px!important;top:-2px!important}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-slider .mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider{height:.375rem;position:relative;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,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--active{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob{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", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType", "multiLine"] }] });
79
79
  }
80
80
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PepSliderComponent, decorators: [{
81
81
  type: Component,
82
- 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\" [disabled]=\"disabled\" [title]=\"value\" #ngSlider><input matSliderThumb [value]=\"value\" (change)=\"onValueChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" #ngSliderThumb=\"matSliderThumb\" (input)=\"onInputChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" />\n </mat-slider>\n</div>", styles: [".pep-slider-container ::ng-deep .mat-slider,.pep-slider-container ::ng-deep .mat-mdc-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,.pep-slider-container ::ng-deep .mat-slider.mdc-slider--disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider--disabled{opacity:.5}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-slider.mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem);margin:0}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-slider .mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider{height:.375rem;position:relative;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,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--active{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob{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"] }]
82
+ 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\" [disabled]=\"disabled\" [title]=\"value\" #ngSlider><input matSliderThumb [value]=\"value\" (change)=\"onValueChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" #ngSliderThumb=\"matSliderThumb\" (input)=\"onInputChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" />\n </mat-slider>\n</div>", styles: [".pep-slider-container ::ng-deep .mat-slider,.pep-slider-container ::ng-deep .mat-mdc-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,.pep-slider-container ::ng-deep .mat-slider.mdc-slider--disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider--disabled{opacity:.5}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-slider.mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem);margin:0}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider.mdc-slider .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-horizontal .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider .mdc-slider__thumb{left:-10px!important;height:20px!important;width:20px!important;top:-2px!important}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-slider .mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider{height:.375rem;position:relative;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,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--active{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob{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"] }]
83
83
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.PepLayoutService }], propDecorators: { label: [{
84
84
  type: Input
85
85
  }], disabled: [{
package/fesm2022/pepperi-addons-ngx-lib-button.mjs CHANGED
@@ -149,11 +149,11 @@ class PepButtonComponent {
149
149
  this.buttonClick.emit(buttonClick);
150
150
  }
151
151
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PepButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
152
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PepButtonComponent, selector: "pep-button", inputs: { key: "key", value: "value", styleType: "styleType", styleStateType: "styleStateType", sizeType: "sizeType", classNames: "classNames", disabled: "disabled", iconName: "iconName", iconPosition: "iconPosition", visible: "visible" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button mat-button [pepDataQa]=\"key ? key : value\"\n class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\">\n </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\n [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n {{value}}\n </span>\n <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n</ng-template>", styles: [":host{display:grid}\n", ""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.PepDataQaDirective, selector: "[pepDataQa]", inputs: ["pepDataQa"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
152
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PepButtonComponent, selector: "pep-button", inputs: { key: "key", value: "value", styleType: "styleType", styleStateType: "styleStateType", sizeType: "sizeType", classNames: "classNames", disabled: "disabled", iconName: "iconName", iconPosition: "iconPosition", visible: "visible" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button mat-button [pepDataQa]=\"key ? key : value\"\n class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\">\n </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\n [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n {{value}}\n </span>\n <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n</ng-template>", styles: [":host{display:grid}:host ::ng-deep button .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important}:host ::ng-deep button .mdc-button__label mat-icon,:host ::ng-deep button .mdc-button__label .mat-icon,:host ::ng-deep button .mdc-button__label .mat-mdc-icon{display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important}:host ::ng-deep .mat-mdc-button .mdc-button__label,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important}:host ::ng-deep .mat-mdc-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-button .mdc-button__label .mat-mdc-icon,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label .mat-mdc-icon,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label .mat-mdc-icon,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label .mat-mdc-icon{display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important}\n", ""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.PepDataQaDirective, selector: "[pepDataQa]", inputs: ["pepDataQa"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
153
153
  }
154
154
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PepButtonComponent, decorators: [{
155
155
  type: Component,
156
- args: [{ selector: 'pep-button', template: "<button mat-button [pepDataQa]=\"key ? key : value\"\n class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\">\n </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\n [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n {{value}}\n </span>\n <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n</ng-template>", styles: [":host{display:grid}\n"] }]
156
+ args: [{ selector: 'pep-button', template: "<button mat-button [pepDataQa]=\"key ? key : value\"\n class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\">\n </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\n [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n {{value}}\n </span>\n <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n</ng-template>", styles: [":host{display:grid}:host ::ng-deep button .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important}:host ::ng-deep button .mdc-button__label mat-icon,:host ::ng-deep button .mdc-button__label .mat-icon,:host ::ng-deep button .mdc-button__label .mat-mdc-icon{display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important}:host ::ng-deep .mat-mdc-button .mdc-button__label,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important}:host ::ng-deep .mat-mdc-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-button .mdc-button__label .mat-mdc-icon,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-unelevated-button .mdc-button__label .mat-mdc-icon,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-raised-button .mdc-button__label .mat-mdc-icon,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label mat-icon,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label .mat-icon,:host ::ng-deep .mat-mdc-outlined-button .mdc-button__label .mat-mdc-icon{display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important}\n"] }]
157
157
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { key: [{
158
158
  type: Input
159
159
  }], value: [{
package/fesm2022/pepperi-addons-ngx-lib-button.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pepperi-addons-ngx-lib-button.mjs","sources":["../../../projects/ngx-lib/button/button.model.ts","../../../projects/ngx-lib/button/button.component.ts","../../../projects/ngx-lib/button/button.component.html","../../../projects/ngx-lib/button/button.module.ts","../../../projects/ngx-lib/button/public-api.ts","../../../projects/ngx-lib/button/pepperi-addons-ngx-lib-button.ts"],"sourcesContent":["export class PepButton {\n key: string;\n value?: string;\n classNames?: string;\n disabled?: boolean;\n iconName?: string;\n iconPosition?: 'start' | 'end';\n callback?: (action: IPepButtonClickEvent) => void;\n\n constructor(data: Partial<PepButton>) {\n Object.assign(this, data);\n }\n}\n\nexport interface IPepButtonClickEvent {\n source: PepButton;\n event?: Event;\n}\n","import {\n Component,\n OnDestroy,\n Input,\n Output,\n EventEmitter,\n Renderer2,\n ElementRef,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport {\n PepStyleType,\n PepStyleStateType,\n PepSizeType,\n} from '@pepperi-addons/ngx-lib';\nimport { PepIconType } from '@pepperi-addons/ngx-lib/icon';\nimport { PepButton, IPepButtonClickEvent } from './button.model';\n\n/**\n * This is a button component that support pepperi theme\n * style & state & sizes\n *\n * @export\n * @class PepButtonComponent\n * @implements {OnDestroy}\n */\n@Component({\n selector: 'pep-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss', './button.component.theme.scss'],\n})\nexport class PepButtonComponent implements OnDestroy {\n /**\n * The button key\n *\n * @type {string}\n * @memberof PepButtonComponent\n */\n @Input() key: string;\n\n /**\n * The button text\n *\n * @type {string}\n * @memberof PepButtonComponent\n */\n @Input() value: string;\n\n /**\n * The style of the button\n *\n * @type {PepStyleType}\n * @memberof PepButtonComponent\n */\n @Input() styleType: PepStyleType = 'weak';\n\n /**\n * The color style used by the button\n *\n * @type {PepStyleStateType}\n * @memberof PepButtonComponent\n */\n @Input() styleStateType: PepStyleStateType = 'system';\n\n /**\n * The size of the button\n *\n * @type {PepSizeType}\n * @memberof PepButtonComponent\n */\n @Input() sizeType: PepSizeType = 'md';\n\n /**\n * Class names that should be on the button element tag like classNames=\"class1 class2\"\n *\n * @memberof PepButtonComponent\n */\n @Input() classNames = '';\n\n /**\n * If the button is disable or not\n *\n * @type {boolean}\n * @memberof PepButtonComponent\n */\n @Input() disabled = false;\n\n /**\n * If you want to show an icon in the button then select an icon form the provided icon list\n *\n * @type {PepIconType} See {@link PepIconType}\n * @memberof PepButtonComponent\n */\n @Input() iconName: PepIconType;\n\n /**\n * The icon position, on the left `start` or right `end` of the text (flipped in RTL languages). Applicable only if `iconName` was selected\n *\n * @type {('start' | 'end')}\n * @memberof PepButtonComponent\n */\n @Input() iconPosition: 'start' | 'end' = 'end';\n\n private _visible = true;\n /**\n * If the button is visible or not\n *\n * @memberof PepButtonComponent\n */\n @Input()\n set visible(visible: boolean) {\n if (visible !== undefined) {\n this._visible = !!visible;\n if (visible) {\n this.renderer.removeClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n } else {\n this.renderer.addClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n }\n }\n }\n get visible(): boolean {\n return this._visible;\n }\n\n /**\n * The button click event.\n *\n * @type {EventEmitter<IPepButtonClickEvent>}\n * @memberof PepButtonComponent\n */\n @Output()\n buttonClick: EventEmitter<IPepButtonClickEvent> = new EventEmitter<IPepButtonClickEvent>();\n\n constructor(private renderer: Renderer2, private element: ElementRef) { }\n\n ngOnDestroy(): void {\n // if (this.buttonClick) {\n // this.buttonClick.unsubscribe();\n // }\n }\n\n /**\n * The button click\n */\n onButtonClicked(event: Event): void {\n const button = new PepButton({\n key: this.key,\n value: this.value,\n });\n\n const buttonClick = {\n source: button,\n event,\n };\n\n this.buttonClick.emit(buttonClick);\n }\n}\n","<button mat-button [pepDataQa]=\"key ? key : value\"\n class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\">\n </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\n [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n {{value}}\n </span>\n <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { PepIconModule } from '@pepperi-addons/ngx-lib/icon';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\n\nimport { PepButtonComponent } from './button.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules\n MatCommonModule,\n MatButtonModule,\n MatIconModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n ],\n exports: [PepButtonComponent],\n declarations: [PepButtonComponent],\n})\nexport class PepButtonModule {}\n","/*\n * Public API Surface of ngx-lib/button\n */\nexport * from './button.module';\nexport * from './button.component';\nexport * from './button.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"pepperi-addons-ngx-lib-button.mjs","sources":["../../../projects/ngx-lib/button/button.model.ts","../../../projects/ngx-lib/button/button.component.ts","../../../projects/ngx-lib/button/button.component.html","../../../projects/ngx-lib/button/button.module.ts","../../../projects/ngx-lib/button/public-api.ts","../../../projects/ngx-lib/button/pepperi-addons-ngx-lib-button.ts"],"sourcesContent":["export class PepButton {\n key: string;\n value?: string;\n classNames?: string;\n disabled?: boolean;\n iconName?: string;\n iconPosition?: 'start' | 'end';\n callback?: (action: IPepButtonClickEvent) => void;\n\n constructor(data: Partial<PepButton>) {\n Object.assign(this, data);\n }\n}\n\nexport interface IPepButtonClickEvent {\n source: PepButton;\n event?: Event;\n}\n","import {\n Component,\n OnDestroy,\n Input,\n Output,\n EventEmitter,\n Renderer2,\n ElementRef,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport {\n PepStyleType,\n PepStyleStateType,\n PepSizeType,\n} from '@pepperi-addons/ngx-lib';\nimport { PepIconType } from '@pepperi-addons/ngx-lib/icon';\nimport { PepButton, IPepButtonClickEvent } from './button.model';\n\n/**\n * This is a button component that support pepperi theme\n * style & state & sizes\n *\n * @export\n * @class PepButtonComponent\n * @implements {OnDestroy}\n */\n@Component({\n selector: 'pep-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss', './button.component.theme.scss'],\n})\nexport class PepButtonComponent implements OnDestroy {\n /**\n * The button key\n *\n * @type {string}\n * @memberof PepButtonComponent\n */\n @Input() key: string;\n\n /**\n * The button text\n *\n * @type {string}\n * @memberof PepButtonComponent\n */\n @Input() value: string;\n\n /**\n * The style of the button\n *\n * @type {PepStyleType}\n * @memberof PepButtonComponent\n */\n @Input() styleType: PepStyleType = 'weak';\n\n /**\n * The color style used by the button\n *\n * @type {PepStyleStateType}\n * @memberof PepButtonComponent\n */\n @Input() styleStateType: PepStyleStateType = 'system';\n\n /**\n * The size of the button\n *\n * @type {PepSizeType}\n * @memberof PepButtonComponent\n */\n @Input() sizeType: PepSizeType = 'md';\n\n /**\n * Class names that should be on the button element tag like classNames=\"class1 class2\"\n *\n * @memberof PepButtonComponent\n */\n @Input() classNames = '';\n\n /**\n * If the button is disable or not\n *\n * @type {boolean}\n * @memberof PepButtonComponent\n */\n @Input() disabled = false;\n\n /**\n * If you want to show an icon in the button then select an icon form the provided icon list\n *\n * @type {PepIconType} See {@link PepIconType}\n * @memberof PepButtonComponent\n */\n @Input() iconName: PepIconType;\n\n /**\n * The icon position, on the left `start` or right `end` of the text (flipped in RTL languages). Applicable only if `iconName` was selected\n *\n * @type {('start' | 'end')}\n * @memberof PepButtonComponent\n */\n @Input() iconPosition: 'start' | 'end' = 'end';\n\n private _visible = true;\n /**\n * If the button is visible or not\n *\n * @memberof PepButtonComponent\n */\n @Input()\n set visible(visible: boolean) {\n if (visible !== undefined) {\n this._visible = !!visible;\n if (visible) {\n this.renderer.removeClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n } else {\n this.renderer.addClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n }\n }\n }\n get visible(): boolean {\n return this._visible;\n }\n\n /**\n * The button click event.\n *\n * @type {EventEmitter<IPepButtonClickEvent>}\n * @memberof PepButtonComponent\n */\n @Output()\n buttonClick: EventEmitter<IPepButtonClickEvent> = new EventEmitter<IPepButtonClickEvent>();\n\n constructor(private renderer: Renderer2, private element: ElementRef) { }\n\n ngOnDestroy(): void {\n // if (this.buttonClick) {\n // this.buttonClick.unsubscribe();\n // }\n }\n\n /**\n * The button click\n */\n onButtonClicked(event: Event): void {\n const button = new PepButton({\n key: this.key,\n value: this.value,\n });\n\n const buttonClick = {\n source: button,\n event,\n };\n\n this.buttonClick.emit(buttonClick);\n }\n}\n","<button mat-button [pepDataQa]=\"key ? key : value\"\n class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n <ng-container *ngTemplateOutlet=\"contentTemplate\">\n </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\n [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n {{value}}\n </span>\n <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { PepIconModule } from '@pepperi-addons/ngx-lib/icon';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\n\nimport { PepButtonComponent } from './button.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules\n MatCommonModule,\n MatButtonModule,\n MatIconModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n ],\n exports: [PepButtonComponent],\n declarations: [PepButtonComponent],\n})\nexport class PepButtonModule {}\n","/*\n * Public API Surface of ngx-lib/button\n */\nexport * from './button.module';\nexport * from './button.component';\nexport * from './button.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/fesm2022/pepperi-addons-ngx-lib-slider.mjs CHANGED
@@ -80,11 +80,11 @@ class PepSliderComponent {
80
80
  this.inputChange.emit(event.value);
81
81
  }
82
82
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PepSliderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
83
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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\" [disabled]=\"disabled\" [title]=\"value\" #ngSlider><input matSliderThumb [value]=\"value\" (change)=\"onValueChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" #ngSliderThumb=\"matSliderThumb\" (input)=\"onInputChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" />\n </mat-slider>\n</div>", styles: ["", ".pep-slider-container ::ng-deep .mat-slider,.pep-slider-container ::ng-deep .mat-mdc-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,.pep-slider-container ::ng-deep .mat-slider.mdc-slider--disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider--disabled{opacity:.5}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-slider.mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem);margin:0}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-slider .mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider{height:.375rem;position:relative;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,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--active{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob{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", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType", "multiLine"] }] });
83
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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\" [disabled]=\"disabled\" [title]=\"value\" #ngSlider><input matSliderThumb [value]=\"value\" (change)=\"onValueChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" #ngSliderThumb=\"matSliderThumb\" (input)=\"onInputChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" />\n </mat-slider>\n</div>", styles: ["", ".pep-slider-container ::ng-deep .mat-slider,.pep-slider-container ::ng-deep .mat-mdc-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,.pep-slider-container ::ng-deep .mat-slider.mdc-slider--disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider--disabled{opacity:.5}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-slider.mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem);margin:0}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider.mdc-slider .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-horizontal .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider .mdc-slider__thumb{left:-10px!important;height:20px!important;width:20px!important;top:-2px!important}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-slider .mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider{height:.375rem;position:relative;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,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--active{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob{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", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: i3.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType", "multiLine"] }] });
84
84
  }
85
85
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PepSliderComponent, decorators: [{
86
86
  type: Component,
87
- 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\" [disabled]=\"disabled\" [title]=\"value\" #ngSlider><input matSliderThumb [value]=\"value\" (change)=\"onValueChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" #ngSliderThumb=\"matSliderThumb\" (input)=\"onInputChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" />\n </mat-slider>\n</div>", styles: [".pep-slider-container ::ng-deep .mat-slider,.pep-slider-container ::ng-deep .mat-mdc-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,.pep-slider-container ::ng-deep .mat-slider.mdc-slider--disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider--disabled{opacity:.5}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-slider.mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem);margin:0}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-slider .mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider{height:.375rem;position:relative;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,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--active{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob{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"] }]
87
+ 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\" [disabled]=\"disabled\" [title]=\"value\" #ngSlider><input matSliderThumb [value]=\"value\" (change)=\"onValueChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" #ngSliderThumb=\"matSliderThumb\" (input)=\"onInputChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" />\n </mat-slider>\n</div>", styles: [".pep-slider-container ::ng-deep .mat-slider,.pep-slider-container ::ng-deep .mat-mdc-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,.pep-slider-container ::ng-deep .mat-slider.mdc-slider--disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-disabled,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider--disabled{opacity:.5}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-slider.mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-horizontal,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider{height:1rem;width:100%;padding:.5rem .25rem;border-radius:var(--pep-border-radius-lg, .5rem);margin:0}.pep-slider-container ::ng-deep .mat-slider.mat-slider-horizontal .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider.mdc-slider .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider.mat-slider-horizontal .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider.mdc-slider .mdc-slider__thumb{left:-10px!important;height:20px!important;width:20px!important;top:-2px!important}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-slider .mdc-slider,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider{height:.375rem;position:relative;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,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__track--active,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-track-wrapper,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--inactive,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__track--active{display:none}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb{width:94%;left:3%}.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mat-slider-wrapper .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider__track .mdc-slider__thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-mdc-slider-visual-thumb .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mat-slider-thumb-container .mdc-slider__thumb-knob,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mat-slider-thumb,.pep-slider-container ::ng-deep .mat-mdc-slider .mdc-slider .mdc-slider__thumb .mdc-slider__thumb-knob{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"] }]
88
88
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.PepLayoutService }], propDecorators: { label: [{
89
89
  type: Input
90
90
  }], disabled: [{
package/fesm2022/pepperi-addons-ngx-lib-slider.mjs.map CHANGED
@@ -1 +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({selector: 'pep-slider',\n templateUrl: './slider.component.html',\n styleUrls: ['./slider.component.scss', './slider.component.theme.scss']})\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, .mdc-slider__track');\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\" [disabled]=\"disabled\" [title]=\"value\" #ngSlider><input matSliderThumb [value]=\"value\" (change)=\"onValueChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" #ngSliderThumb=\"matSliderThumb\" (input)=\"onInputChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" />\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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"}
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({selector: 'pep-slider',\n templateUrl: './slider.component.html',\n styleUrls: ['./slider.component.scss', './slider.component.theme.scss']})\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, .mdc-slider__track');\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\" [disabled]=\"disabled\" [title]=\"value\" #ngSlider><input matSliderThumb [value]=\"value\" (change)=\"onValueChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" #ngSliderThumb=\"matSliderThumb\" (input)=\"onInputChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})\" />\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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pepperi-addons/ngx-lib",
3
- "version": "0.5.0-ng17.1",
3
+ "version": "0.5.0-ng17.2",
4
4
  "peerDependencies": {
5
5
  "@angular/animations": ">= 17.0.0",
6
6
  "@angular/cdk": ">= 17.0.0",
@@ -59,6 +59,18 @@
59
59
  "esm": "./esm2022/attachment/pepperi-addons-ngx-lib-attachment.mjs",
60
60
  "default": "./fesm2022/pepperi-addons-ngx-lib-attachment.mjs"
61
61
  },
62
+ "./carousel": {
63
+ "types": "./carousel/index.d.ts",
64
+ "esm2022": "./esm2022/carousel/pepperi-addons-ngx-lib-carousel.mjs",
65
+ "esm": "./esm2022/carousel/pepperi-addons-ngx-lib-carousel.mjs",
66
+ "default": "./fesm2022/pepperi-addons-ngx-lib-carousel.mjs"
67
+ },
68
+ "./checkbox": {
69
+ "types": "./checkbox/index.d.ts",
70
+ "esm2022": "./esm2022/checkbox/pepperi-addons-ngx-lib-checkbox.mjs",
71
+ "esm": "./esm2022/checkbox/pepperi-addons-ngx-lib-checkbox.mjs",
72
+ "default": "./fesm2022/pepperi-addons-ngx-lib-checkbox.mjs"
73
+ },
62
74
  "./button": {
63
75
  "types": "./button/index.d.ts",
64
76
  "esm2022": "./esm2022/button/pepperi-addons-ngx-lib-button.mjs",
@@ -71,18 +83,6 @@
71
83
  "esm": "./esm2022/bread-crumbs/pepperi-addons-ngx-lib-bread-crumbs.mjs",
72
84
  "default": "./fesm2022/pepperi-addons-ngx-lib-bread-crumbs.mjs"
73
85
  },
74
- "./checkbox": {
75
- "types": "./checkbox/index.d.ts",
76
- "esm2022": "./esm2022/checkbox/pepperi-addons-ngx-lib-checkbox.mjs",
77
- "esm": "./esm2022/checkbox/pepperi-addons-ngx-lib-checkbox.mjs",
78
- "default": "./fesm2022/pepperi-addons-ngx-lib-checkbox.mjs"
79
- },
80
- "./carousel": {
81
- "types": "./carousel/index.d.ts",
82
- "esm2022": "./esm2022/carousel/pepperi-addons-ngx-lib-carousel.mjs",
83
- "esm": "./esm2022/carousel/pepperi-addons-ngx-lib-carousel.mjs",
84
- "default": "./fesm2022/pepperi-addons-ngx-lib-carousel.mjs"
85
- },
86
86
  "./chips": {
87
87
  "types": "./chips/index.d.ts",
88
88
  "esm2022": "./esm2022/chips/pepperi-addons-ngx-lib-chips.mjs",
@@ -281,6 +281,12 @@
281
281
  "esm": "./esm2022/textarea/pepperi-addons-ngx-lib-textarea.mjs",
282
282
  "default": "./fesm2022/pepperi-addons-ngx-lib-textarea.mjs"
283
283
  },
284
+ "./textbox": {
285
+ "types": "./textbox/index.d.ts",
286
+ "esm2022": "./esm2022/textbox/pepperi-addons-ngx-lib-textbox.mjs",
287
+ "esm": "./esm2022/textbox/pepperi-addons-ngx-lib-textbox.mjs",
288
+ "default": "./fesm2022/pepperi-addons-ngx-lib-textbox.mjs"
289
+ },
284
290
  "./textbox-icon": {
285
291
  "types": "./textbox-icon/index.d.ts",
286
292
  "esm2022": "./esm2022/textbox-icon/pepperi-addons-ngx-lib-textbox-icon.mjs",
@@ -292,12 +298,6 @@
292
298
  "esm2022": "./esm2022/top-bar/pepperi-addons-ngx-lib-top-bar.mjs",
293
299
  "esm": "./esm2022/top-bar/pepperi-addons-ngx-lib-top-bar.mjs",
294
300
  "default": "./fesm2022/pepperi-addons-ngx-lib-top-bar.mjs"
295
- },
296
- "./textbox": {
297
- "types": "./textbox/index.d.ts",
298
- "esm2022": "./esm2022/textbox/pepperi-addons-ngx-lib-textbox.mjs",
299
- "esm": "./esm2022/textbox/pepperi-addons-ngx-lib-textbox.mjs",
300
- "default": "./fesm2022/pepperi-addons-ngx-lib-textbox.mjs"
301
301
  }
302
302
  },
303
303
  "sideEffects": false,
package/slider/slider.component.theme.scss CHANGED
@@ -18,6 +18,13 @@
18
18
  padding: 0.5rem 0.25rem;
19
19
  border-radius: variables.$border-radius-lg;
20
20
  margin: 0;
21
+
22
+ .mdc-slider__thumb {
23
+ left: -10px !important;
24
+ height: 20px !important;
25
+ width: 20px !important;
26
+ top: -2px !important;
27
+ }
21
28
  }
22
29
 
23
30
  .mat-slider-wrapper,
package/src/core/style/base/base.scss CHANGED
@@ -202,6 +202,12 @@
202
202
  padding: 0 variables.$content-padding;
203
203
  margin: 0 calc(#{variables.$content-padding} * -1);
204
204
 
205
+ // Fix for Angular Material 17 expansion panel header layout
206
+ .mat-expansion-panel-header-title,
207
+ .mat-expansion-panel-header-description {
208
+ flex-basis: auto !important;
209
+ }
210
+
205
211
  &:first-child {
206
212
  .mat-expansion-panel-header,
207
213
  .mat-mdc-expansion-panel-header {