@pepperi-addons/ngx-lib 0.2.51-beta.7 → 0.2.52

package/slider/pepperi-addons-ngx-lib-slider.metadata.json

@@ -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":68,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":68,"character":62},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":68,"character":100}]}],"setBackground":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}]}}},"origins":{"PepSliderModule":"./slider.module","PepSliderComponent":"./slider.component"},"importAs":"@pepperi-addons/ngx-lib/slider"}
+{"__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"}

package/slider/slider.component.d.ts

@@ -25,10 +25,12 @@ export declare class PepSliderComponent implements OnInit {
     set value(value: string);
     get value(): string;
     valueChange: EventEmitter<string>;
+    inputChange: EventEmitter<string>;
     xAlignment: PepHorizontalAlignment;
     sliderWrapper: any;
     constructor(renderer: Renderer2, element: ElementRef, pepLayoutService: PepLayoutService);
     private setBackground;
     ngOnInit(): void;
     onValueChange(event: any): void;
+    onInputChange(event: any): void;
 }

package/src/core/style/base/typography.scss

@@ -177,32 +177,60 @@ a {
     .color-user-primary {
         color: get-pep-color($pepperi-theme, color-user-primary, color-base);
     }
+    .background-color-user-primary {
+        background-color: get-pep-color($pepperi-theme, color-user-primary, color-base);
+    }
 
     .color-user-secondary {
         color: get-pep-color($pepperi-theme, color-user-secondary, color-base);
     }
+    .background-color-user-secondary {
+        background-color: get-pep-color($pepperi-theme, color-user-secondary, color-base);
+    }
 
     .color-system-primary,
     .color-main {
         color: get-pep-color($pepperi-theme, color-text, color-main);
     }
+    .background-color-main {
+        background-color: get-pep-color($pepperi-theme, color-text, color-main);
+    }
+
+    .color-invert {
+        color: get-pep-color($pepperi-theme, color-text, color-invert);
+    }
+    .background-color-invert {
+        background-color: get-pep-color($pepperi-theme, color-text, color-invert);
+    }
 
     .color-link {
         color: get-pep-color($pepperi-theme, color-text, color-link);
     }
+    .background-color-link {
+        background-color: get-pep-color($pepperi-theme, color-text, color-link);
+    }
 
     .red,
     .color-caution {
         color: get-pep-color($pepperi-theme, color-text, color-caution);
     }
+    .background-color-caution {
+        background-color: get-pep-color($pepperi-theme, color-text, color-caution);
+    }
 
     .color-success {
         color: get-pep-color($pepperi-theme, color-text, color-success);
     }
+    .background-color-success {
+        background-color: get-pep-color($pepperi-theme, color-text, color-success);
+    }
 
     .color-dimmed {
         color: get-pep-color($pepperi-theme, color-text, color-dimmed);
     }
+    .background-color-dimmed {
+        background-color: get-pep-color($pepperi-theme, color-text, color-dimmed);
+    }
 
     a {
         // &.color-link {