@pepperi-addons/ngx-lib 0.2.51 → 0.2.52
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.
- package/bundles/pepperi-addons-ngx-lib-slider.umd.js +15 -4
- package/bundles/pepperi-addons-ngx-lib-slider.umd.js.map +1 -1
- package/esm2015/slider/slider.component.js +16 -5
- package/fesm2015/pepperi-addons-ngx-lib-slider.js +15 -4
- package/fesm2015/pepperi-addons-ngx-lib-slider.js.map +1 -1
- package/package.json +1 -1
- package/slider/pepperi-addons-ngx-lib-slider.metadata.json +1 -1
- package/slider/slider.component.d.ts +2 -0
- package/src/core/style/base/typography.scss +28 -0
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
this.maxValue = NaN;
|
|
27
27
|
this._value = null;
|
|
28
28
|
this.valueChange = new core.EventEmitter();
|
|
29
|
+
this.inputChange = new core.EventEmitter();
|
|
29
30
|
this.xAlignment = ngxLib.DEFAULT_HORIZONTAL_ALIGNMENT;
|
|
30
31
|
this.sliderWrapper = null;
|
|
31
32
|
}
|
|
@@ -57,13 +58,19 @@
|
|
|
57
58
|
configurable: true
|
|
58
59
|
});
|
|
59
60
|
PepSliderComponent.prototype.setBackground = function () {
|
|
60
|
-
var _a;
|
|
61
|
+
var _a, _b;
|
|
61
62
|
// Get the wrapper for set the background.
|
|
62
63
|
if (!this.sliderWrapper) {
|
|
63
64
|
this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper');
|
|
64
65
|
}
|
|
65
66
|
if (this.sliderWrapper) {
|
|
66
|
-
this.renderer.setStyle(this.sliderWrapper, 'background', ((_a = this.background) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.background : '
|
|
67
|
+
this.renderer.setStyle(this.sliderWrapper, 'background', ((_a = this.background) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.background : '');
|
|
68
|
+
if (((_b = this.background) === null || _b === void 0 ? void 0 : _b.length) > 0) {
|
|
69
|
+
this.renderer.removeClass(this.sliderWrapper, 'background-color-dimmed');
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
this.renderer.addClass(this.sliderWrapper, 'background-color-dimmed');
|
|
73
|
+
}
|
|
67
74
|
}
|
|
68
75
|
};
|
|
69
76
|
PepSliderComponent.prototype.ngOnInit = function () {
|
|
@@ -73,12 +80,15 @@
|
|
|
73
80
|
PepSliderComponent.prototype.onValueChange = function (event) {
|
|
74
81
|
this.valueChange.emit(event.value);
|
|
75
82
|
};
|
|
83
|
+
PepSliderComponent.prototype.onInputChange = function (event) {
|
|
84
|
+
this.inputChange.emit(event.value);
|
|
85
|
+
};
|
|
76
86
|
return PepSliderComponent;
|
|
77
87
|
}());
|
|
78
88
|
PepSliderComponent.decorators = [
|
|
79
89
|
{ type: core.Component, args: [{
|
|
80
90
|
selector: 'pep-slider',
|
|
81
|
-
template: "<div class=\"pep-slider-container\">\n <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n </pep-field-title>\n <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n (change)=\"onValueChange($event)\">\n </mat-slider>\n</div>",
|
|
91
|
+
template: "<div class=\"pep-slider-container\">\n <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n </pep-field-title>\n <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n </mat-slider>\n</div>",
|
|
82
92
|
styles: [""]
|
|
83
93
|
},] }
|
|
84
94
|
];
|
|
@@ -96,7 +106,8 @@
|
|
|
96
106
|
minValue: [{ type: core.Input }],
|
|
97
107
|
maxValue: [{ type: core.Input }],
|
|
98
108
|
value: [{ type: core.Input }],
|
|
99
|
-
valueChange: [{ type: core.Output }]
|
|
109
|
+
valueChange: [{ type: core.Output }],
|
|
110
|
+
inputChange: [{ type: core.Output }]
|
|
100
111
|
};
|
|
101
112
|
|
|
102
113
|
var PepSliderModule = /** @class */ (function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pepperi-addons-ngx-lib-slider.umd.js","sources":["../../../projects/ngx-lib/slider/slider.component.ts","../../../projects/ngx-lib/slider/slider.module.ts","../../../projects/ngx-lib/slider/public-api.ts","../../../projects/ngx-lib/slider/pepperi-addons-ngx-lib-slider.ts"],"sourcesContent":["import {\n Component,\n OnDestroy,\n Input,\n Output,\n EventEmitter,\n Renderer2,\n ElementRef,\n OnInit,\n ViewChild,\n} from '@angular/core';\nimport { PepLayoutService, DEFAULT_HORIZONTAL_ALIGNMENT, PepHorizontalAlignment } from '@pepperi-addons/ngx-lib';\n\n/**\n * This is a slider component that support pepperi theme\n * style & state & sizes\n *\n * @export\n * @class PepSliderComponent\n * @implements {OnDestroy}\n */\n@Component({\n selector: 'pep-slider',\n templateUrl: './slider.component.html',\n styleUrls: ['./slider.component.scss'],\n})\nexport class PepSliderComponent implements OnInit {\n @Input() label = '';\n @Input() disabled = false;\n @Input() hint = '';\n\n private _background = '';\n @Input()\n set background(background: string) {\n if (!background) {\n background = '';\n }\n\n this._background = background;\n this.setBackground();\n }\n get background(): string {\n return this._background;\n }\n\n @Input() step = 1;\n @Input() minValue = NaN;\n @Input() maxValue = NaN;\n\n private _value = null;\n @Input()\n set value(value: string) {\n if (!value) {\n value = '';\n }\n\n this._value = value;\n }\n get value(): string {\n return this._value;\n }\n\n @Output()\n valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n sliderWrapper: any = null;\n\n constructor(private renderer: Renderer2, private element: ElementRef, private pepLayoutService: PepLayoutService) { }\n\n private setBackground(): void {\n // Get the wrapper for set the background.\n if (!this.sliderWrapper) {\n this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper');\n }\n\n if (this.sliderWrapper) {\n this.renderer.setStyle(this.sliderWrapper, 'background', this.background?.length > 0 ? this.background : '
|
|
1
|
+
{"version":3,"file":"pepperi-addons-ngx-lib-slider.umd.js","sources":["../../../projects/ngx-lib/slider/slider.component.ts","../../../projects/ngx-lib/slider/slider.module.ts","../../../projects/ngx-lib/slider/public-api.ts","../../../projects/ngx-lib/slider/pepperi-addons-ngx-lib-slider.ts"],"sourcesContent":["import {\n Component,\n OnDestroy,\n Input,\n Output,\n EventEmitter,\n Renderer2,\n ElementRef,\n OnInit,\n ViewChild,\n} from '@angular/core';\nimport { PepLayoutService, DEFAULT_HORIZONTAL_ALIGNMENT, PepHorizontalAlignment } from '@pepperi-addons/ngx-lib';\n\n/**\n * This is a slider component that support pepperi theme\n * style & state & sizes\n *\n * @export\n * @class PepSliderComponent\n * @implements {OnDestroy}\n */\n@Component({\n selector: 'pep-slider',\n templateUrl: './slider.component.html',\n styleUrls: ['./slider.component.scss'],\n})\nexport class PepSliderComponent implements OnInit {\n @Input() label = '';\n @Input() disabled = false;\n @Input() hint = '';\n\n private _background = '';\n @Input()\n set background(background: string) {\n if (!background) {\n background = '';\n }\n\n this._background = background;\n this.setBackground();\n }\n get background(): string {\n return this._background;\n }\n\n @Input() step = 1;\n @Input() minValue = NaN;\n @Input() maxValue = NaN;\n\n private _value = null;\n @Input()\n set value(value: string) {\n if (!value) {\n value = '';\n }\n\n this._value = value;\n }\n get value(): string {\n return this._value;\n }\n\n @Output()\n valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n @Output()\n inputChange: EventEmitter<string> = new EventEmitter<string>();\n\n xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n sliderWrapper: any = null;\n\n constructor(private renderer: Renderer2, private element: ElementRef, private pepLayoutService: PepLayoutService) { }\n\n private setBackground(): void {\n // Get the wrapper for set the background.\n if (!this.sliderWrapper) {\n this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper');\n }\n\n if (this.sliderWrapper) {\n this.renderer.setStyle(this.sliderWrapper, 'background', this.background?.length > 0 ? this.background : '');\n\n if (this.background?.length > 0) {\n this.renderer.removeClass(this.sliderWrapper, 'background-color-dimmed');\n } else {\n this.renderer.addClass(this.sliderWrapper, 'background-color-dimmed');\n }\n }\n }\n\n ngOnInit(): void {\n this.xAlignment = this.pepLayoutService.isRtl() ? 'right' : 'left';\n this.setBackground();\n }\n\n onValueChange(event) {\n this.valueChange.emit(event.value);\n }\n\n onInputChange(event) {\n this.inputChange.emit(event.value);\n }\n}\n","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":["EventEmitter","DEFAULT_HORIZONTAL_ALIGNMENT","Component","Renderer2","ElementRef","PepLayoutService","Input","Output","NgModule","CommonModule","MatCommonModule","MatSliderModule","PepNgxLibModule","PepFieldTitleModule"],"mappings":"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"}
|
|
@@ -22,6 +22,7 @@ export class PepSliderComponent {
|
|
|
22
22
|
this.maxValue = NaN;
|
|
23
23
|
this._value = null;
|
|
24
24
|
this.valueChange = new EventEmitter();
|
|
25
|
+
this.inputChange = new EventEmitter();
|
|
25
26
|
this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
|
|
26
27
|
this.sliderWrapper = null;
|
|
27
28
|
}
|
|
@@ -45,13 +46,19 @@ export class PepSliderComponent {
|
|
|
45
46
|
return this._value;
|
|
46
47
|
}
|
|
47
48
|
setBackground() {
|
|
48
|
-
var _a;
|
|
49
|
+
var _a, _b;
|
|
49
50
|
// Get the wrapper for set the background.
|
|
50
51
|
if (!this.sliderWrapper) {
|
|
51
52
|
this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper');
|
|
52
53
|
}
|
|
53
54
|
if (this.sliderWrapper) {
|
|
54
|
-
this.renderer.setStyle(this.sliderWrapper, 'background', ((_a = this.background) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.background : '
|
|
55
|
+
this.renderer.setStyle(this.sliderWrapper, 'background', ((_a = this.background) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.background : '');
|
|
56
|
+
if (((_b = this.background) === null || _b === void 0 ? void 0 : _b.length) > 0) {
|
|
57
|
+
this.renderer.removeClass(this.sliderWrapper, 'background-color-dimmed');
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
60
|
+
this.renderer.addClass(this.sliderWrapper, 'background-color-dimmed');
|
|
61
|
+
}
|
|
55
62
|
}
|
|
56
63
|
}
|
|
57
64
|
ngOnInit() {
|
|
@@ -61,11 +68,14 @@ export class PepSliderComponent {
|
|
|
61
68
|
onValueChange(event) {
|
|
62
69
|
this.valueChange.emit(event.value);
|
|
63
70
|
}
|
|
71
|
+
onInputChange(event) {
|
|
72
|
+
this.inputChange.emit(event.value);
|
|
73
|
+
}
|
|
64
74
|
}
|
|
65
75
|
PepSliderComponent.decorators = [
|
|
66
76
|
{ type: Component, args: [{
|
|
67
77
|
selector: 'pep-slider',
|
|
68
|
-
template: "<div class=\"pep-slider-container\">\n <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n </pep-field-title>\n <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n (change)=\"onValueChange($event)\">\n </mat-slider>\n</div>",
|
|
78
|
+
template: "<div class=\"pep-slider-container\">\n <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n </pep-field-title>\n <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n </mat-slider>\n</div>",
|
|
69
79
|
styles: [""]
|
|
70
80
|
},] }
|
|
71
81
|
];
|
|
@@ -83,6 +93,7 @@ PepSliderComponent.propDecorators = {
|
|
|
83
93
|
minValue: [{ type: Input }],
|
|
84
94
|
maxValue: [{ type: Input }],
|
|
85
95
|
value: [{ type: Input }],
|
|
86
|
-
valueChange: [{ type: Output }]
|
|
96
|
+
valueChange: [{ type: Output }],
|
|
97
|
+
inputChange: [{ type: Output }]
|
|
87
98
|
};
|
|
88
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
99
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saWIvc2xpZGVyL3NsaWRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFFVCxLQUFLLEVBQ0wsTUFBTSxFQUNOLFlBQVksRUFDWixTQUFTLEVBQ1QsVUFBVSxHQUdiLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSw0QkFBNEIsRUFBMEIsTUFBTSx5QkFBeUIsQ0FBQztBQUVqSDs7Ozs7OztHQU9HO0FBTUgsTUFBTSxPQUFPLGtCQUFrQjtJQTZDM0IsWUFBb0IsUUFBbUIsRUFBVSxPQUFtQixFQUFVLGdCQUFrQztRQUE1RixhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQVUsWUFBTyxHQUFQLE9BQU8sQ0FBWTtRQUFVLHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBa0I7UUE1Q3ZHLFVBQUssR0FBRyxFQUFFLENBQUM7UUFDWCxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLFNBQUksR0FBRyxFQUFFLENBQUM7UUFFWCxnQkFBVyxHQUFHLEVBQUUsQ0FBQztRQWNoQixTQUFJLEdBQUcsQ0FBQyxDQUFDO1FBQ1QsYUFBUSxHQUFHLEdBQUcsQ0FBQztRQUNmLGFBQVEsR0FBRyxHQUFHLENBQUM7UUFFaEIsV0FBTSxHQUFHLElBQUksQ0FBQztRQWN0QixnQkFBVyxHQUF5QixJQUFJLFlBQVksRUFBVSxDQUFDO1FBRy9ELGdCQUFXLEdBQXlCLElBQUksWUFBWSxFQUFVLENBQUM7UUFFL0QsZUFBVSxHQUEyQiw0QkFBNEIsQ0FBQztRQUNsRSxrQkFBYSxHQUFRLElBQUksQ0FBQztJQUUwRixDQUFDO0lBdkNySCxJQUNJLFVBQVUsQ0FBQyxVQUFrQjtRQUM3QixJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ2IsVUFBVSxHQUFHLEVBQUUsQ0FBQztTQUNuQjtRQUVELElBQUksQ0FBQyxXQUFXLEdBQUcsVUFBVSxDQUFDO1FBQzlCLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBQ0QsSUFBSSxVQUFVO1FBQ1YsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDO0lBQzVCLENBQUM7SUFPRCxJQUNJLEtBQUssQ0FBQyxLQUFhO1FBQ25CLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDUixLQUFLLEdBQUcsRUFBRSxDQUFDO1NBQ2Q7UUFFRCxJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztJQUN4QixDQUFDO0lBQ0QsSUFBSSxLQUFLO1FBQ0wsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3ZCLENBQUM7SUFhTyxhQUFhOztRQUNqQiwwQ0FBMEM7UUFDMUMsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDckIsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMscUJBQXFCLENBQUMsQ0FBQztTQUN4RjtRQUVELElBQUksSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUNwQixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLFlBQVksRUFBRSxDQUFBLE1BQUEsSUFBSSxDQUFDLFVBQVUsMENBQUUsTUFBTSxJQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUM7WUFFN0csSUFBSSxDQUFBLE1BQUEsSUFBSSxDQUFDLFVBQVUsMENBQUUsTUFBTSxJQUFHLENBQUMsRUFBRTtnQkFDN0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRSx5QkFBeUIsQ0FBQyxDQUFDO2FBQzVFO2lCQUFNO2dCQUNILElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUUseUJBQXlCLENBQUMsQ0FBQzthQUN6RTtTQUNKO0lBQ0wsQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUM7UUFDbkUsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxhQUFhLENBQUMsS0FBSztRQUNmLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBRUQsYUFBYSxDQUFDLEtBQUs7UUFDZixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDdkMsQ0FBQzs7O1lBaEZKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsWUFBWTtnQkFDdEIsa2FBQXNDOzthQUV6Qzs7O1lBbkJHLFNBQVM7WUFDVCxVQUFVO1lBSUwsZ0JBQWdCOzs7b0JBZ0JwQixLQUFLO3VCQUNMLEtBQUs7bUJBQ0wsS0FBSzt5QkFHTCxLQUFLO21CQWFMLEtBQUs7dUJBQ0wsS0FBSzt1QkFDTCxLQUFLO29CQUdMLEtBQUs7MEJBWUwsTUFBTTswQkFHTixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDb21wb25lbnQsXG4gICAgT25EZXN0cm95LFxuICAgIElucHV0LFxuICAgIE91dHB1dCxcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgUmVuZGVyZXIyLFxuICAgIEVsZW1lbnRSZWYsXG4gICAgT25Jbml0LFxuICAgIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBQZXBMYXlvdXRTZXJ2aWNlLCBERUZBVUxUX0hPUklaT05UQUxfQUxJR05NRU5ULCBQZXBIb3Jpem9udGFsQWxpZ25tZW50IH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWInO1xuXG4vKipcbiAqIFRoaXMgaXMgYSBzbGlkZXIgY29tcG9uZW50IHRoYXQgc3VwcG9ydCBwZXBwZXJpIHRoZW1lXG4gKiBzdHlsZSAmIHN0YXRlICYgc2l6ZXNcbiAqXG4gKiBAZXhwb3J0XG4gKiBAY2xhc3MgUGVwU2xpZGVyQ29tcG9uZW50XG4gKiBAaW1wbGVtZW50cyB7T25EZXN0cm95fVxuICovXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3BlcC1zbGlkZXInLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zbGlkZXIuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3NsaWRlci5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBQZXBTbGlkZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIEBJbnB1dCgpIGxhYmVsID0gJyc7XG4gICAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcbiAgICBASW5wdXQoKSBoaW50ID0gJyc7XG5cbiAgICBwcml2YXRlIF9iYWNrZ3JvdW5kID0gJyc7XG4gICAgQElucHV0KClcbiAgICBzZXQgYmFja2dyb3VuZChiYWNrZ3JvdW5kOiBzdHJpbmcpIHtcbiAgICAgICAgaWYgKCFiYWNrZ3JvdW5kKSB7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kID0gJyc7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLl9iYWNrZ3JvdW5kID0gYmFja2dyb3VuZDtcbiAgICAgICAgdGhpcy5zZXRCYWNrZ3JvdW5kKCk7XG4gICAgfVxuICAgIGdldCBiYWNrZ3JvdW5kKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiB0aGlzLl9iYWNrZ3JvdW5kO1xuICAgIH1cblxuICAgIEBJbnB1dCgpIHN0ZXAgPSAxO1xuICAgIEBJbnB1dCgpIG1pblZhbHVlID0gTmFOO1xuICAgIEBJbnB1dCgpIG1heFZhbHVlID0gTmFOO1xuXG4gICAgcHJpdmF0ZSBfdmFsdWUgPSBudWxsO1xuICAgIEBJbnB1dCgpXG4gICAgc2V0IHZhbHVlKHZhbHVlOiBzdHJpbmcpIHtcbiAgICAgICAgaWYgKCF2YWx1ZSkge1xuICAgICAgICAgICAgdmFsdWUgPSAnJztcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuX3ZhbHVlID0gdmFsdWU7XG4gICAgfVxuICAgIGdldCB2YWx1ZSgpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5fdmFsdWU7XG4gICAgfVxuXG4gICAgQE91dHB1dCgpXG4gICAgdmFsdWVDaGFuZ2U6IEV2ZW50RW1pdHRlcjxzdHJpbmc+ID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cbiAgICBAT3V0cHV0KClcbiAgICBpbnB1dENoYW5nZTogRXZlbnRFbWl0dGVyPHN0cmluZz4gPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICAgIHhBbGlnbm1lbnQ6IFBlcEhvcml6b250YWxBbGlnbm1lbnQgPSBERUZBVUxUX0hPUklaT05UQUxfQUxJR05NRU5UO1xuICAgIHNsaWRlcldyYXBwZXI6IGFueSA9IG51bGw7XG5cbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsIHByaXZhdGUgZWxlbWVudDogRWxlbWVudFJlZiwgcHJpdmF0ZSBwZXBMYXlvdXRTZXJ2aWNlOiBQZXBMYXlvdXRTZXJ2aWNlKSB7IH1cblxuICAgIHByaXZhdGUgc2V0QmFja2dyb3VuZCgpOiB2b2lkIHtcbiAgICAgICAgLy8gR2V0IHRoZSB3cmFwcGVyIGZvciBzZXQgdGhlIGJhY2tncm91bmQuXG4gICAgICAgIGlmICghdGhpcy5zbGlkZXJXcmFwcGVyKSB7XG4gICAgICAgICAgICB0aGlzLnNsaWRlcldyYXBwZXIgPSB0aGlzLmVsZW1lbnQubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yKCcubWF0LXNsaWRlci13cmFwcGVyJyk7XG4gICAgICAgIH1cblxuICAgICAgICBpZiAodGhpcy5zbGlkZXJXcmFwcGVyKSB7XG4gICAgICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuc2xpZGVyV3JhcHBlciwgJ2JhY2tncm91bmQnLCB0aGlzLmJhY2tncm91bmQ/Lmxlbmd0aCA+IDAgPyB0aGlzLmJhY2tncm91bmQgOiAnJyk7XG5cbiAgICAgICAgICAgIGlmICh0aGlzLmJhY2tncm91bmQ/Lmxlbmd0aCA+IDApIHtcbiAgICAgICAgICAgICAgICB0aGlzLnJlbmRlcmVyLnJlbW92ZUNsYXNzKHRoaXMuc2xpZGVyV3JhcHBlciwgJ2JhY2tncm91bmQtY29sb3ItZGltbWVkJyk7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIHRoaXMucmVuZGVyZXIuYWRkQ2xhc3ModGhpcy5zbGlkZXJXcmFwcGVyLCAnYmFja2dyb3VuZC1jb2xvci1kaW1tZWQnKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLnhBbGlnbm1lbnQgPSB0aGlzLnBlcExheW91dFNlcnZpY2UuaXNSdGwoKSA/ICdyaWdodCcgOiAnbGVmdCc7XG4gICAgICAgIHRoaXMuc2V0QmFja2dyb3VuZCgpO1xuICAgIH1cblxuICAgIG9uVmFsdWVDaGFuZ2UoZXZlbnQpIHtcbiAgICAgICAgdGhpcy52YWx1ZUNoYW5nZS5lbWl0KGV2ZW50LnZhbHVlKTtcbiAgICB9XG5cbiAgICBvbklucHV0Q2hhbmdlKGV2ZW50KSB7XG4gICAgICAgIHRoaXMuaW5wdXRDaGFuZ2UuZW1pdChldmVudC52YWx1ZSk7XG4gICAgfVxufVxuIl19
|
|
@@ -27,6 +27,7 @@ class PepSliderComponent {
|
|
|
27
27
|
this.maxValue = NaN;
|
|
28
28
|
this._value = null;
|
|
29
29
|
this.valueChange = new EventEmitter();
|
|
30
|
+
this.inputChange = new EventEmitter();
|
|
30
31
|
this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
|
|
31
32
|
this.sliderWrapper = null;
|
|
32
33
|
}
|
|
@@ -50,13 +51,19 @@ class PepSliderComponent {
|
|
|
50
51
|
return this._value;
|
|
51
52
|
}
|
|
52
53
|
setBackground() {
|
|
53
|
-
var _a;
|
|
54
|
+
var _a, _b;
|
|
54
55
|
// Get the wrapper for set the background.
|
|
55
56
|
if (!this.sliderWrapper) {
|
|
56
57
|
this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper');
|
|
57
58
|
}
|
|
58
59
|
if (this.sliderWrapper) {
|
|
59
|
-
this.renderer.setStyle(this.sliderWrapper, 'background', ((_a = this.background) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.background : '
|
|
60
|
+
this.renderer.setStyle(this.sliderWrapper, 'background', ((_a = this.background) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.background : '');
|
|
61
|
+
if (((_b = this.background) === null || _b === void 0 ? void 0 : _b.length) > 0) {
|
|
62
|
+
this.renderer.removeClass(this.sliderWrapper, 'background-color-dimmed');
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
this.renderer.addClass(this.sliderWrapper, 'background-color-dimmed');
|
|
66
|
+
}
|
|
60
67
|
}
|
|
61
68
|
}
|
|
62
69
|
ngOnInit() {
|
|
@@ -66,11 +73,14 @@ class PepSliderComponent {
|
|
|
66
73
|
onValueChange(event) {
|
|
67
74
|
this.valueChange.emit(event.value);
|
|
68
75
|
}
|
|
76
|
+
onInputChange(event) {
|
|
77
|
+
this.inputChange.emit(event.value);
|
|
78
|
+
}
|
|
69
79
|
}
|
|
70
80
|
PepSliderComponent.decorators = [
|
|
71
81
|
{ type: Component, args: [{
|
|
72
82
|
selector: 'pep-slider',
|
|
73
|
-
template: "<div class=\"pep-slider-container\">\n <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n </pep-field-title>\n <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n (change)=\"onValueChange($event)\">\n </mat-slider>\n</div>",
|
|
83
|
+
template: "<div class=\"pep-slider-container\">\n <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n </pep-field-title>\n <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n </mat-slider>\n</div>",
|
|
74
84
|
styles: [""]
|
|
75
85
|
},] }
|
|
76
86
|
];
|
|
@@ -88,7 +98,8 @@ PepSliderComponent.propDecorators = {
|
|
|
88
98
|
minValue: [{ type: Input }],
|
|
89
99
|
maxValue: [{ type: Input }],
|
|
90
100
|
value: [{ type: Input }],
|
|
91
|
-
valueChange: [{ type: Output }]
|
|
101
|
+
valueChange: [{ type: Output }],
|
|
102
|
+
inputChange: [{ type: Output }]
|
|
92
103
|
};
|
|
93
104
|
|
|
94
105
|
class PepSliderModule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pepperi-addons-ngx-lib-slider.js","sources":["../../../projects/ngx-lib/slider/slider.component.ts","../../../projects/ngx-lib/slider/slider.module.ts","../../../projects/ngx-lib/slider/public-api.ts","../../../projects/ngx-lib/slider/pepperi-addons-ngx-lib-slider.ts"],"sourcesContent":["import {\n Component,\n OnDestroy,\n Input,\n Output,\n EventEmitter,\n Renderer2,\n ElementRef,\n OnInit,\n ViewChild,\n} from '@angular/core';\nimport { PepLayoutService, DEFAULT_HORIZONTAL_ALIGNMENT, PepHorizontalAlignment } from '@pepperi-addons/ngx-lib';\n\n/**\n * This is a slider component that support pepperi theme\n * style & state & sizes\n *\n * @export\n * @class PepSliderComponent\n * @implements {OnDestroy}\n */\n@Component({\n selector: 'pep-slider',\n templateUrl: './slider.component.html',\n styleUrls: ['./slider.component.scss'],\n})\nexport class PepSliderComponent implements OnInit {\n @Input() label = '';\n @Input() disabled = false;\n @Input() hint = '';\n\n private _background = '';\n @Input()\n set background(background: string) {\n if (!background) {\n background = '';\n }\n\n this._background = background;\n this.setBackground();\n }\n get background(): string {\n return this._background;\n }\n\n @Input() step = 1;\n @Input() minValue = NaN;\n @Input() maxValue = NaN;\n\n private _value = null;\n @Input()\n set value(value: string) {\n if (!value) {\n value = '';\n }\n\n this._value = value;\n }\n get value(): string {\n return this._value;\n }\n\n @Output()\n valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n sliderWrapper: any = null;\n\n constructor(private renderer: Renderer2, private element: ElementRef, private pepLayoutService: PepLayoutService) { }\n\n private setBackground(): void {\n // Get the wrapper for set the background.\n if (!this.sliderWrapper) {\n this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper');\n }\n\n if (this.sliderWrapper) {\n this.renderer.setStyle(this.sliderWrapper, 'background', this.background?.length > 0 ? this.background : '
|
|
1
|
+
{"version":3,"file":"pepperi-addons-ngx-lib-slider.js","sources":["../../../projects/ngx-lib/slider/slider.component.ts","../../../projects/ngx-lib/slider/slider.module.ts","../../../projects/ngx-lib/slider/public-api.ts","../../../projects/ngx-lib/slider/pepperi-addons-ngx-lib-slider.ts"],"sourcesContent":["import {\n Component,\n OnDestroy,\n Input,\n Output,\n EventEmitter,\n Renderer2,\n ElementRef,\n OnInit,\n ViewChild,\n} from '@angular/core';\nimport { PepLayoutService, DEFAULT_HORIZONTAL_ALIGNMENT, PepHorizontalAlignment } from '@pepperi-addons/ngx-lib';\n\n/**\n * This is a slider component that support pepperi theme\n * style & state & sizes\n *\n * @export\n * @class PepSliderComponent\n * @implements {OnDestroy}\n */\n@Component({\n selector: 'pep-slider',\n templateUrl: './slider.component.html',\n styleUrls: ['./slider.component.scss'],\n})\nexport class PepSliderComponent implements OnInit {\n @Input() label = '';\n @Input() disabled = false;\n @Input() hint = '';\n\n private _background = '';\n @Input()\n set background(background: string) {\n if (!background) {\n background = '';\n }\n\n this._background = background;\n this.setBackground();\n }\n get background(): string {\n return this._background;\n }\n\n @Input() step = 1;\n @Input() minValue = NaN;\n @Input() maxValue = NaN;\n\n private _value = null;\n @Input()\n set value(value: string) {\n if (!value) {\n value = '';\n }\n\n this._value = value;\n }\n get value(): string {\n return this._value;\n }\n\n @Output()\n valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n @Output()\n inputChange: EventEmitter<string> = new EventEmitter<string>();\n\n xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n sliderWrapper: any = null;\n\n constructor(private renderer: Renderer2, private element: ElementRef, private pepLayoutService: PepLayoutService) { }\n\n private setBackground(): void {\n // Get the wrapper for set the background.\n if (!this.sliderWrapper) {\n this.sliderWrapper = this.element.nativeElement.querySelector('.mat-slider-wrapper');\n }\n\n if (this.sliderWrapper) {\n this.renderer.setStyle(this.sliderWrapper, 'background', this.background?.length > 0 ? this.background : '');\n\n if (this.background?.length > 0) {\n this.renderer.removeClass(this.sliderWrapper, 'background-color-dimmed');\n } else {\n this.renderer.addClass(this.sliderWrapper, 'background-color-dimmed');\n }\n }\n }\n\n ngOnInit(): void {\n this.xAlignment = this.pepLayoutService.isRtl() ? 'right' : 'left';\n this.setBackground();\n }\n\n onValueChange(event) {\n this.valueChange.emit(event.value);\n }\n\n onInputChange(event) {\n this.inputChange.emit(event.value);\n }\n}\n","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 +1 @@
|
|
|
1
|
-
{"__symbolic":"module","version":4,"metadata":{"PepSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":14,"character":8},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":15,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":17,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":18,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSliderComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSliderComponent"}]}]}],"members":{}},"PepSliderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"pep-slider","template":"<div class=\"pep-slider-container\">\n <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n </pep-field-title>\n <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n (change)=\"onValueChange($event)\">\n </mat-slider>\n</div>","styles":[""]}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"hint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"background":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"minValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"maxValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":
|
|
1
|
+
{"__symbolic":"module","version":4,"metadata":{"PepSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":14,"character":8},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":15,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":17,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":18,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSliderComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSliderComponent"}]}]}],"members":{}},"PepSliderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"pep-slider","template":"<div class=\"pep-slider-container\">\n <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n </pep-field-title>\n <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n </mat-slider>\n</div>","styles":[""]}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"hint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"background":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"minValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"maxValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":62,"character":5}}]}],"inputChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":65,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":71,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":71,"character":62},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":71,"character":100}]}],"setBackground":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}]}}},"origins":{"PepSliderModule":"./slider.module","PepSliderComponent":"./slider.component"},"importAs":"@pepperi-addons/ngx-lib/slider"}
|
|
@@ -25,10 +25,12 @@ export declare class PepSliderComponent implements OnInit {
|
|
|
25
25
|
set value(value: string);
|
|
26
26
|
get value(): string;
|
|
27
27
|
valueChange: EventEmitter<string>;
|
|
28
|
+
inputChange: EventEmitter<string>;
|
|
28
29
|
xAlignment: PepHorizontalAlignment;
|
|
29
30
|
sliderWrapper: any;
|
|
30
31
|
constructor(renderer: Renderer2, element: ElementRef, pepLayoutService: PepLayoutService);
|
|
31
32
|
private setBackground;
|
|
32
33
|
ngOnInit(): void;
|
|
33
34
|
onValueChange(event: any): void;
|
|
35
|
+
onInputChange(event: any): void;
|
|
34
36
|
}
|
|
@@ -177,32 +177,60 @@ a {
|
|
|
177
177
|
.color-user-primary {
|
|
178
178
|
color: get-pep-color($pepperi-theme, color-user-primary, color-base);
|
|
179
179
|
}
|
|
180
|
+
.background-color-user-primary {
|
|
181
|
+
background-color: get-pep-color($pepperi-theme, color-user-primary, color-base);
|
|
182
|
+
}
|
|
180
183
|
|
|
181
184
|
.color-user-secondary {
|
|
182
185
|
color: get-pep-color($pepperi-theme, color-user-secondary, color-base);
|
|
183
186
|
}
|
|
187
|
+
.background-color-user-secondary {
|
|
188
|
+
background-color: get-pep-color($pepperi-theme, color-user-secondary, color-base);
|
|
189
|
+
}
|
|
184
190
|
|
|
185
191
|
.color-system-primary,
|
|
186
192
|
.color-main {
|
|
187
193
|
color: get-pep-color($pepperi-theme, color-text, color-main);
|
|
188
194
|
}
|
|
195
|
+
.background-color-main {
|
|
196
|
+
background-color: get-pep-color($pepperi-theme, color-text, color-main);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.color-invert {
|
|
200
|
+
color: get-pep-color($pepperi-theme, color-text, color-invert);
|
|
201
|
+
}
|
|
202
|
+
.background-color-invert {
|
|
203
|
+
background-color: get-pep-color($pepperi-theme, color-text, color-invert);
|
|
204
|
+
}
|
|
189
205
|
|
|
190
206
|
.color-link {
|
|
191
207
|
color: get-pep-color($pepperi-theme, color-text, color-link);
|
|
192
208
|
}
|
|
209
|
+
.background-color-link {
|
|
210
|
+
background-color: get-pep-color($pepperi-theme, color-text, color-link);
|
|
211
|
+
}
|
|
193
212
|
|
|
194
213
|
.red,
|
|
195
214
|
.color-caution {
|
|
196
215
|
color: get-pep-color($pepperi-theme, color-text, color-caution);
|
|
197
216
|
}
|
|
217
|
+
.background-color-caution {
|
|
218
|
+
background-color: get-pep-color($pepperi-theme, color-text, color-caution);
|
|
219
|
+
}
|
|
198
220
|
|
|
199
221
|
.color-success {
|
|
200
222
|
color: get-pep-color($pepperi-theme, color-text, color-success);
|
|
201
223
|
}
|
|
224
|
+
.background-color-success {
|
|
225
|
+
background-color: get-pep-color($pepperi-theme, color-text, color-success);
|
|
226
|
+
}
|
|
202
227
|
|
|
203
228
|
.color-dimmed {
|
|
204
229
|
color: get-pep-color($pepperi-theme, color-text, color-dimmed);
|
|
205
230
|
}
|
|
231
|
+
.background-color-dimmed {
|
|
232
|
+
background-color: get-pep-color($pepperi-theme, color-text, color-dimmed);
|
|
233
|
+
}
|
|
206
234
|
|
|
207
235
|
a {
|
|
208
236
|
// &.color-link {
|