import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core';
import { take } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "../../data/providers/data.service";
import * as i2 from "../../providers/local-storage/local-storage.service";
import * as i3 from "@angular/common";
import * as i4 from "@clr/angular";
import * as i5 from "@ngx-translate/core";
export class ThemeSwitcherComponent {
    constructor(dataService, localStorageService) {
        this.dataService = dataService;
        this.localStorageService = localStorageService;
    }
    ngOnInit() {
        this.activeTheme$ = this.dataService.client.uiState().mapStream(data => data.uiState.theme);
    }
    onHostClick() {
        this.activeTheme$.pipe(take(1)).subscribe(current => this.toggleTheme(current));
    }
    toggleTheme(current) {
        const newTheme = current === 'default' ? 'dark' : 'default';
        this.dataService.client.setUiTheme(newTheme).subscribe(() => {
            this.localStorageService.set('activeTheme', newTheme);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ThemeSwitcherComponent, deps: [{ token: i1.DataService }, { token: i2.LocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ThemeSwitcherComponent, selector: "vdr-theme-switcher", host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onHostClick($event)" } }, ngImport: i0, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\">\n    <span>{{ 'common.theme' | translate }}</span>\n    <div class=\"theme-icon default\" [class.active]=\"activeTheme === 'default'\">\n        <clr-icon shape=\"sun\" class=\"is-solid\"></clr-icon>\n    </div>\n    <div class=\"theme-icon dark\" [class.active]=\"activeTheme === 'dark'\">\n        <clr-icon shape=\"moon\" class=\"is-solid\"></clr-icon>\n    </div>\n</button>\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}button.theme-toggle{position:relative;padding-inline-start:20px;border:none;background:transparent;color:var(--clr-dropdown-item-color);cursor:pointer}.theme-icon{position:absolute;top:0;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}:host-context([dir=rtl]) .theme-icon{left:auto;right:6px}:host-context([dir=rtl]) .theme-icon.active{left:auto;right:0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ThemeSwitcherComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-theme-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\">\n    <span>{{ 'common.theme' | translate }}</span>\n    <div class=\"theme-icon default\" [class.active]=\"activeTheme === 'default'\">\n        <clr-icon shape=\"sun\" class=\"is-solid\"></clr-icon>\n    </div>\n    <div class=\"theme-icon dark\" [class.active]=\"activeTheme === 'dark'\">\n        <clr-icon shape=\"moon\" class=\"is-solid\"></clr-icon>\n    </div>\n</button>\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}button.theme-toggle{position:relative;padding-inline-start:20px;border:none;background:transparent;color:var(--clr-dropdown-item-color);cursor:pointer}.theme-icon{position:absolute;top:0;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}:host-context([dir=rtl]) .theme-icon{left:auto;right:6px}:host-context([dir=rtl]) .theme-icon.active{left:auto;right:0}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i2.LocalStorageService }]; }, propDecorators: { onHostClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }, {
                type: HostListener,
                args: ['keydown.enter', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 