ngx-slice-kit
Version:
[](https://badge.fury.io/js/ngx-slice-kit)
89 lines • 12 kB
JavaScript
import { Directive, Inject, Input } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "./theme.service";
import * as i2 from "../layout-control/layout-control.service";
export class ThemeDirective {
constructor(document, elementRef, renderer, themeService, layoutControl) {
this.document = document;
this.elementRef = elementRef;
this.renderer = renderer;
this.themeService = themeService;
this.layoutControl = layoutControl;
/**
* Whether the styles are scoped or not.
*/
this.scoped = false;
}
/**
* Update the theme on the scoped element.
*/
updateTheme(theme) {
const element = this.getElement();
element.className = `sdk-theme-${theme.name}`; // probably unsafe
if (!this.layoutControl.platform.BLINK) {
element.classList.add('sdk-custom-scroll');
}
else {
element.classList.add(this.layoutControl.getPlatformClass());
}
const oldStyles = this.document.head.querySelectorAll('[sdkTheme]');
if (oldStyles?.length > 0) {
this.document.head.removeChild(oldStyles[0]);
}
const styles = this.renderer.createElement('style');
// project properties onto the element
styles.innerHTML += `body {`;
for (const prop of theme.props()) {
if (!!prop.rgb) {
styles.innerHTML += (`${prop.prop}-raw: ${prop.value};`);
styles.innerHTML += (`${prop.prop}-rgb: ${prop.rgb};`);
styles.innerHTML += (`${prop.prop}-opposite: ${prop.background};`);
styles.innerHTML += (`${prop.prop}: ${prop.hex};`);
if (prop.text_value) {
styles.innerHTML += (`${prop.prop}-text-raw: ${prop.text_value};`);
styles.innerHTML += (`${prop.prop}-text: ${prop.text};`);
}
}
}
styles.innerHTML += `}`;
this.renderer.setAttribute(styles, 'sdkTheme', theme.name);
this.document.head.appendChild(styles);
}
/**
* Element to attach the styles to.
*/
getElement() {
return this.scoped ? this.elementRef.nativeElement : this.document.body;
}
ngOnInit() {
this.sub = this.themeService.currentThemeObservable
.subscribe((theme) => this.updateTheme(theme));
if (this.theme && this.theme?.length > 0) {
this.themeService.setTheme(this.theme);
}
else {
this.updateTheme(this.themeService.currentTheme);
}
}
ngOnDestroy() {
this.sub?.unsubscribe();
}
}
ThemeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ThemeDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ThemeService }, { token: i2.LayoutControlService }], target: i0.ɵɵFactoryTarget.Directive });
ThemeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.3", type: ThemeDirective, selector: "[sdkTheme]", inputs: { scoped: "scoped", theme: ["sdkTheme", "theme"] }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ThemeDirective, decorators: [{
type: Directive,
args: [{
selector: '[sdkTheme]'
}]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ThemeService }, { type: i2.LayoutControlService }]; }, propDecorators: { scoped: [{
type: Input
}], theme: [{
type: Input,
args: ['sdkTheme']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9uZ3gtc2xpY2Uta2l0L3NyYy9saWIvY29yZS90aGVtZS90aGVtZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxNQUFNLEVBQUUsS0FBSyxFQUFnQyxNQUFNLGVBQWUsQ0FBQztBQUNuRyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUJBQWlCLENBQUM7Ozs7QUFVM0MsTUFBTSxPQUFPLGNBQWM7SUFhdkIsWUFDOEIsUUFBYSxFQUMvQixVQUFzQixFQUN0QixRQUFtQixFQUNuQixZQUEwQixFQUMxQixhQUFtQztRQUpqQixhQUFRLEdBQVIsUUFBUSxDQUFLO1FBQy9CLGVBQVUsR0FBVixVQUFVLENBQVk7UUFDdEIsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUNuQixpQkFBWSxHQUFaLFlBQVksQ0FBYztRQUMxQixrQkFBYSxHQUFiLGFBQWEsQ0FBc0I7UUFoQi9DOztXQUVHO1FBQ2EsV0FBTSxHQUFHLEtBQUssQ0FBQztJQWUvQixDQUFDO0lBRUQ7O09BRUc7SUFDSSxXQUFXLENBQUMsS0FBWTtRQUMzQixNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFFbEMsT0FBTyxDQUFDLFNBQVMsR0FBRyxhQUFhLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDLGtCQUFrQjtRQUNqRSxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFO1lBQ3BDLE9BQU8sQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLG1CQUFtQixDQUFDLENBQUM7U0FDOUM7YUFBTTtZQUNILE9BQU8sQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxDQUFDO1NBQ2hFO1FBRUQsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsWUFBWSxDQUFDLENBQUM7UUFDcEUsSUFBSSxTQUFTLEVBQUUsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUN2QixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7U0FDaEQ7UUFDRCxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUVwRCxzQ0FBc0M7UUFDdEMsTUFBTSxDQUFDLFNBQVMsSUFBSSxRQUFRLENBQUM7UUFDN0IsS0FBSyxNQUFNLElBQUksSUFBSSxLQUFLLENBQUMsS0FBSyxFQUFFLEVBQUU7WUFDOUIsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRTtnQkFDWixNQUFNLENBQUMsU0FBUyxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsSUFBSSxTQUFTLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO2dCQUN6RCxNQUFNLENBQUMsU0FBUyxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsSUFBSSxTQUFTLElBQUksQ0FBQyxHQUFHLEdBQUcsQ0FBQyxDQUFDO2dCQUN2RCxNQUFNLENBQUMsU0FBUyxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsSUFBSSxjQUFjLElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQyxDQUFDO2dCQUNuRSxNQUFNLENBQUMsU0FBUyxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQyxHQUFHLEdBQUcsQ0FBQyxDQUFDO2dCQUNuRCxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUU7b0JBQ2pCLE1BQU0sQ0FBQyxTQUFTLElBQUksQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLGNBQWMsSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFDLENBQUM7b0JBQ25FLE1BQU0sQ0FBQyxTQUFTLElBQUksQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLFVBQVUsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLENBQUM7aUJBQzVEO2FBQ0o7U0FDSjtRQUNELE1BQU0sQ0FBQyxTQUFTLElBQUksR0FBRyxDQUFDO1FBQ3hCLElBQUksQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDLE1BQU0sRUFBRSxVQUFVLEVBQUUsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBRTNELElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUMzQyxDQUFDO0lBRUQ7O09BRUc7SUFDSSxVQUFVO1FBQ2IsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUM7SUFDNUUsQ0FBQztJQUVNLFFBQVE7UUFDWCxJQUFJLENBQUMsR0FBRyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsc0JBQXNCO2FBQzlDLFNBQVMsQ0FBQyxDQUFDLEtBQVksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO1FBRTFELElBQUksSUFBSSxDQUFDLEtBQUssSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDdEMsSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQzFDO2FBQU07WUFDSCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsWUFBWSxDQUFDLENBQUM7U0FDcEQ7SUFDTCxDQUFDO0lBRU0sV0FBVztRQUNkLElBQUksQ0FBQyxHQUFHLEVBQUUsV0FBVyxFQUFFLENBQUM7SUFDNUIsQ0FBQzs7MkdBakZRLGNBQWMsa0JBY1gsUUFBUTsrRkFkWCxjQUFjOzJGQUFkLGNBQWM7a0JBSDFCLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLFlBQVk7aUJBQ3pCOzswQkFlUSxNQUFNOzJCQUFDLFFBQVE7MkpBVEosTUFBTTtzQkFBckIsS0FBSztnQkFJb0IsS0FBSztzQkFBOUIsS0FBSzt1QkFBQyxVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBJbmplY3QsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdCwgUmVuZGVyZXIyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBET0NVTUVOVCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICcuL3RoZW1lLm1vZGVsJztcbmltcG9ydCB7IFRoZW1lU2VydmljZSB9IGZyb20gJy4vdGhlbWUuc2VydmljZSc7XG5pbXBvcnQgeyBMYXlvdXRDb250cm9sU2VydmljZSB9IGZyb20gJy4uL2xheW91dC1jb250cm9sL2xheW91dC1jb250cm9sLnNlcnZpY2UnO1xuXG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ1tzZGtUaGVtZV0nXG59KVxuZXhwb3J0IGNsYXNzIFRoZW1lRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuXG4gICAgLyoqXG4gICAgICogV2hldGhlciB0aGUgc3R5bGVzIGFyZSBzY29wZWQgb3Igbm90LlxuICAgICAqL1xuICAgIEBJbnB1dCgpIHB1YmxpYyBzY29wZWQgPSBmYWxzZTtcbiAgICAvKipcbiAgICAgKiBzcGVjaWZ5IHNlbGVjdGVkIHRoZW1lIG9yIHVzZSBkZWZhdWx0LlxuICAgICAqL1xuICAgIEBJbnB1dCgnc2RrVGhlbWUnKSBwdWJsaWMgdGhlbWU6IHN0cmluZztcblxuICAgIHByaXZhdGUgc3ViOiBTdWJzY3JpcHRpb247XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgQEluamVjdChET0NVTUVOVCkgcHJpdmF0ZSBkb2N1bWVudDogYW55LFxuICAgICAgICBwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG4gICAgICAgIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMixcbiAgICAgICAgcHJpdmF0ZSB0aGVtZVNlcnZpY2U6IFRoZW1lU2VydmljZSxcbiAgICAgICAgcHJpdmF0ZSBsYXlvdXRDb250cm9sOiBMYXlvdXRDb250cm9sU2VydmljZVxuICAgICkge1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIFVwZGF0ZSB0aGUgdGhlbWUgb24gdGhlIHNjb3BlZCBlbGVtZW50LlxuICAgICAqL1xuICAgIHB1YmxpYyB1cGRhdGVUaGVtZSh0aGVtZTogVGhlbWUpOiB2b2lkIHtcbiAgICAgICAgY29uc3QgZWxlbWVudCA9IHRoaXMuZ2V0RWxlbWVudCgpO1xuXG4gICAgICAgIGVsZW1lbnQuY2xhc3NOYW1lID0gYHNkay10aGVtZS0ke3RoZW1lLm5hbWV9YDsgLy8gcHJvYmFibHkgdW5zYWZlXG4gICAgICAgIGlmICghdGhpcy5sYXlvdXRDb250cm9sLnBsYXRmb3JtLkJMSU5LKSB7XG4gICAgICAgICAgICBlbGVtZW50LmNsYXNzTGlzdC5hZGQoJ3Nkay1jdXN0b20tc2Nyb2xsJyk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICBlbGVtZW50LmNsYXNzTGlzdC5hZGQodGhpcy5sYXlvdXRDb250cm9sLmdldFBsYXRmb3JtQ2xhc3MoKSk7XG4gICAgICAgIH1cblxuICAgICAgICBjb25zdCBvbGRTdHlsZXMgPSB0aGlzLmRvY3VtZW50LmhlYWQucXVlcnlTZWxlY3RvckFsbCgnW3Nka1RoZW1lXScpO1xuICAgICAgICBpZiAob2xkU3R5bGVzPy5sZW5ndGggPiAwKSB7XG4gICAgICAgICAgICB0aGlzLmRvY3VtZW50LmhlYWQucmVtb3ZlQ2hpbGQob2xkU3R5bGVzWzBdKTtcbiAgICAgICAgfVxuICAgICAgICBjb25zdCBzdHlsZXMgPSB0aGlzLnJlbmRlcmVyLmNyZWF0ZUVsZW1lbnQoJ3N0eWxlJyk7XG5cbiAgICAgICAgLy8gcHJvamVjdCBwcm9wZXJ0aWVzIG9udG8gdGhlIGVsZW1lbnRcbiAgICAgICAgc3R5bGVzLmlubmVySFRNTCArPSBgYm9keSB7YDtcbiAgICAgICAgZm9yIChjb25zdCBwcm9wIG9mIHRoZW1lLnByb3BzKCkpIHtcbiAgICAgICAgICAgIGlmICghIXByb3AucmdiKSB7XG4gICAgICAgICAgICAgICAgc3R5bGVzLmlubmVySFRNTCArPSAoYCR7cHJvcC5wcm9wfS1yYXc6ICR7cHJvcC52YWx1ZX07YCk7XG4gICAgICAgICAgICAgICAgc3R5bGVzLmlubmVySFRNTCArPSAoYCR7cHJvcC5wcm9wfS1yZ2I6ICR7cHJvcC5yZ2J9O2ApO1xuICAgICAgICAgICAgICAgIHN0eWxlcy5pbm5lckhUTUwgKz0gKGAke3Byb3AucHJvcH0tb3Bwb3NpdGU6ICR7cHJvcC5iYWNrZ3JvdW5kfTtgKTtcbiAgICAgICAgICAgICAgICBzdHlsZXMuaW5uZXJIVE1MICs9IChgJHtwcm9wLnByb3B9OiAke3Byb3AuaGV4fTtgKTtcbiAgICAgICAgICAgICAgICBpZiAocHJvcC50ZXh0X3ZhbHVlKSB7XG4gICAgICAgICAgICAgICAgICAgIHN0eWxlcy5pbm5lckhUTUwgKz0gKGAke3Byb3AucHJvcH0tdGV4dC1yYXc6ICR7cHJvcC50ZXh0X3ZhbHVlfTtgKTtcbiAgICAgICAgICAgICAgICAgICAgc3R5bGVzLmlubmVySFRNTCArPSAoYCR7cHJvcC5wcm9wfS10ZXh0OiAke3Byb3AudGV4dH07YCk7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICAgIHN0eWxlcy5pbm5lckhUTUwgKz0gYH1gO1xuICAgICAgICB0aGlzLnJlbmRlcmVyLnNldEF0dHJpYnV0ZShzdHlsZXMsICdzZGtUaGVtZScsIHRoZW1lLm5hbWUpO1xuXG4gICAgICAgIHRoaXMuZG9jdW1lbnQuaGVhZC5hcHBlbmRDaGlsZChzdHlsZXMpO1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIEVsZW1lbnQgdG8gYXR0YWNoIHRoZSBzdHlsZXMgdG8uXG4gICAgICovXG4gICAgcHVibGljIGdldEVsZW1lbnQoKTogYW55IHtcbiAgICAgICAgcmV0dXJuIHRoaXMuc2NvcGVkID8gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQgOiB0aGlzLmRvY3VtZW50LmJvZHk7XG4gICAgfVxuXG4gICAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLnN1YiA9IHRoaXMudGhlbWVTZXJ2aWNlLmN1cnJlbnRUaGVtZU9ic2VydmFibGVcbiAgICAgICAgICAgIC5zdWJzY3JpYmUoKHRoZW1lOiBUaGVtZSkgPT4gdGhpcy51cGRhdGVUaGVtZSh0aGVtZSkpO1xuXG4gICAgICAgIGlmICh0aGlzLnRoZW1lICYmIHRoaXMudGhlbWU/Lmxlbmd0aCA+IDApIHtcbiAgICAgICAgICAgIHRoaXMudGhlbWVTZXJ2aWNlLnNldFRoZW1lKHRoaXMudGhlbWUpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgdGhpcy51cGRhdGVUaGVtZSh0aGlzLnRoZW1lU2VydmljZS5jdXJyZW50VGhlbWUpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLnN1Yj8udW5zdWJzY3JpYmUoKTtcbiAgICB9XG5cbn1cbiJdfQ==