@ng-doc/app
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
42 lines (38 loc) • 4.45 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, DOCUMENT, ChangeDetectionStrategy, Component } from '@angular/core';
import { NgDocThemeService } from '@ng-doc/app/services/theme';
import { NgDocButtonIconComponent, NgDocTooltipDirective, NgDocIconComponent } from '@ng-doc/ui-kit';
class NgDocThemeToggleComponent {
constructor() {
this.themes = [
{ name: 'Auto', theme: 'auto' },
{ name: 'Light', theme: null },
{ name: 'Dark', theme: 'dark' },
];
this.documentElement = inject(DOCUMENT).documentElement;
this.themeService = inject(NgDocThemeService);
}
get currentTheme() {
const theme = this.documentElement.getAttribute('data-theme');
return this.themes.find(({ theme: t }) => t === theme) ?? this.themes[0];
}
get nextTheme() {
const index = this.themes.findIndex(({ theme }) => theme === this.currentTheme.theme);
return this.themes[(index + 1) % this.themes.length];
}
toggleTheme() {
const { theme } = this.nextTheme;
this.themeService.set(theme ?? undefined);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocThemeToggleComponent, isStandalone: true, selector: "ng-doc-theme-toggle", ngImport: i0, template: "<button ng-doc-button-icon size=\"large\" (click)=\"toggleTheme()\" [ngDocTooltip]=\"tooltipContent\">\n <ng-template #tooltipContent> \"{{ currentTheme.name }}\" theme </ng-template>\n\n @if (currentTheme === themes[0]) {\n <div class=\"letter\">A</div>\n } @else if (currentTheme === themes[1]) {\n <ng-doc-icon icon=\"sun\" size=\"24\"></ng-doc-icon>\n } @else {\n <ng-doc-icon icon=\"moon\" size=\"24\"></ng-doc-icon>\n }\n</button>\n", styles: [":host{display:inline-block;height:40px;width:40px}:host .letter{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);--ng-doc-font-size: 26px;--ng-doc-font-weight: 600}\n"], dependencies: [{ kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocThemeToggleComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-theme-toggle', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocButtonIconComponent, NgDocTooltipDirective, NgDocIconComponent], template: "<button ng-doc-button-icon size=\"large\" (click)=\"toggleTheme()\" [ngDocTooltip]=\"tooltipContent\">\n <ng-template #tooltipContent> \"{{ currentTheme.name }}\" theme </ng-template>\n\n @if (currentTheme === themes[0]) {\n <div class=\"letter\">A</div>\n } @else if (currentTheme === themes[1]) {\n <ng-doc-icon icon=\"sun\" size=\"24\"></ng-doc-icon>\n } @else {\n <ng-doc-icon icon=\"moon\" size=\"24\"></ng-doc-icon>\n }\n</button>\n", styles: [":host{display:inline-block;height:40px;width:40px}:host .letter{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);--ng-doc-font-size: 26px;--ng-doc-font-weight: 600}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocThemeToggleComponent };
//# sourceMappingURL=ng-doc-app-components-theme-toggle.mjs.map