@ecodev/natural 66.0.7 → 66.0.8
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/fesm2022/ecodev-natural.mjs +23 -22
- package/fesm2022/ecodev-natural.mjs.map +1 -1
- package/index.d.ts +13 -5
- package/package.json +1 -1
|
@@ -27,7 +27,7 @@ import { ApolloLink, NetworkStatus } from '@apollo/client/core';
|
|
|
27
27
|
import extractFiles from 'extract-files/extractFiles.mjs';
|
|
28
28
|
import isExtractableFile from 'extract-files/isExtractableFile.mjs';
|
|
29
29
|
import { Kind, OperationTypeNode } from 'graphql/language';
|
|
30
|
-
import { isPlatformBrowser, AsyncPipe, NgTemplateOutlet, NgClass, UpperCasePipe, DatePipe, NgStyle
|
|
30
|
+
import { isPlatformBrowser, AsyncPipe, NgTemplateOutlet, NgClass, UpperCasePipe, DatePipe, NgStyle } from '@angular/common';
|
|
31
31
|
import { Apollo, gql } from 'apollo-angular';
|
|
32
32
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
33
33
|
import { MatIconRegistry, MatIcon } from '@angular/material/icon';
|
|
@@ -5357,29 +5357,39 @@ class NaturalThemeService {
|
|
|
5357
5357
|
isDark = computed(() => {
|
|
5358
5358
|
return (this.colorScheme() === ColorScheme.Dark || (this.colorScheme() === ColorScheme.Auto && this.isDarkSystem()));
|
|
5359
5359
|
}, ...(ngDevMode ? [{ debugName: "isDark" }] : []));
|
|
5360
|
-
|
|
5361
|
-
|
|
5360
|
+
_theme = signal(this.allThemes[0], ...(ngDevMode ? [{ debugName: "_theme" }] : []));
|
|
5361
|
+
/**
|
|
5362
|
+
* Currently selected theme. Use `setTheme()` to select a different theme.
|
|
5363
|
+
*/
|
|
5364
|
+
theme = this._theme.asReadonly();
|
|
5365
|
+
_colorScheme = signal(ColorScheme.Auto, ...(ngDevMode ? [{ debugName: "_colorScheme" }] : []));
|
|
5366
|
+
/**
|
|
5367
|
+
* Currently selected color scheme. Use `setColorScheme()` to select a different scheme.
|
|
5368
|
+
*/
|
|
5369
|
+
colorScheme = this._colorScheme.asReadonly();
|
|
5362
5370
|
constructor() {
|
|
5363
5371
|
effect(() => {
|
|
5364
5372
|
this.document.documentElement.setAttribute('data-is-dark', this.isDark() ? 'true' : 'false');
|
|
5365
5373
|
});
|
|
5366
5374
|
const storedScheme = this.storage.getItem('color-scheme');
|
|
5367
5375
|
const isValidScheme = storedScheme && Object.values(ColorScheme).includes(storedScheme);
|
|
5368
|
-
this.
|
|
5376
|
+
this._colorScheme.set(isValidScheme ? storedScheme : ColorScheme.Auto);
|
|
5369
5377
|
}
|
|
5370
5378
|
/**
|
|
5371
5379
|
* Set theme in memory, local storage and dom
|
|
5372
5380
|
*/
|
|
5373
|
-
setTheme(
|
|
5374
|
-
this.
|
|
5375
|
-
|
|
5376
|
-
|
|
5381
|
+
setTheme(theme) {
|
|
5382
|
+
if (!this.allThemes.includes(theme)) {
|
|
5383
|
+
throw new Error(`Expecting one of the configured themes: ${this.allThemes.map(t => `'${t}'`).join(', ')}. But got invalid: '${theme}'`);
|
|
5384
|
+
}
|
|
5385
|
+
this._theme.set(theme);
|
|
5386
|
+
this.document.documentElement.setAttribute('data-theme', theme);
|
|
5377
5387
|
}
|
|
5378
5388
|
/**
|
|
5379
5389
|
* Set dark/light/auto
|
|
5380
5390
|
*/
|
|
5381
5391
|
setColorScheme(scheme, persistInStorage = true) {
|
|
5382
|
-
this.
|
|
5392
|
+
this._colorScheme.set(scheme); // memory
|
|
5383
5393
|
this.document.documentElement.setAttribute('data-color-scheme', scheme); // dom
|
|
5384
5394
|
if (persistInStorage) {
|
|
5385
5395
|
this.storage.setItem('color-scheme', this.colorScheme()); // storage
|
|
@@ -11366,11 +11376,11 @@ class NaturalColorSchemerComponent {
|
|
|
11366
11376
|
themeService = inject(NaturalThemeService);
|
|
11367
11377
|
ColorScheme = ColorScheme;
|
|
11368
11378
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalColorSchemerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11369
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: NaturalColorSchemerComponent, isStandalone: true, selector: "natural-color-schemer", ngImport: i0, template: "<div class=\"nat-horizontal wrapper\">\n <button\n matIconButton\n matTooltip=\"
|
|
11379
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: NaturalColorSchemerComponent, isStandalone: true, selector: "natural-color-schemer", ngImport: i0, template: "<div class=\"nat-horizontal wrapper\">\n <button\n matIconButton\n matTooltip=\"Th\u00E8me de l'appareil\"\n i18n-matTooltip\n matTooltipPosition=\"below\"\n (click)=\"themeService.setColorScheme(ColorScheme.Auto)\"\n >\n <mat-icon naturalIcon=\"routine\" />\n </button>\n <button\n matIconButton\n matTooltip=\"Th\u00E8me clair\"\n i18n-matTooltip\n matTooltipPosition=\"below\"\n (click)=\"themeService.setColorScheme(ColorScheme.Light)\"\n >\n <mat-icon naturalIcon=\"light_mode\" />\n </button>\n <button\n matIconButton\n matTooltip=\"Th\u00E8me sombre\"\n i18n-matTooltip\n matTooltipPosition=\"below\"\n (click)=\"themeService.setColorScheme(ColorScheme.Dark)\"\n >\n <mat-icon naturalIcon=\"dark_mode\" />\n </button>\n</div>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11370
11380
|
}
|
|
11371
11381
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalColorSchemerComponent, decorators: [{
|
|
11372
11382
|
type: Component,
|
|
11373
|
-
args: [{ selector: 'natural-color-schemer', imports: [MatIconButton, MatTooltip, NaturalIconDirective, FormsModule, MatIcon], template: "<div class=\"nat-horizontal wrapper\">\n <button\n matIconButton\n matTooltip=\"
|
|
11383
|
+
args: [{ selector: 'natural-color-schemer', imports: [MatIconButton, MatTooltip, NaturalIconDirective, FormsModule, MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"nat-horizontal wrapper\">\n <button\n matIconButton\n matTooltip=\"Th\u00E8me de l'appareil\"\n i18n-matTooltip\n matTooltipPosition=\"below\"\n (click)=\"themeService.setColorScheme(ColorScheme.Auto)\"\n >\n <mat-icon naturalIcon=\"routine\" />\n </button>\n <button\n matIconButton\n matTooltip=\"Th\u00E8me clair\"\n i18n-matTooltip\n matTooltipPosition=\"below\"\n (click)=\"themeService.setColorScheme(ColorScheme.Light)\"\n >\n <mat-icon naturalIcon=\"light_mode\" />\n </button>\n <button\n matIconButton\n matTooltip=\"Th\u00E8me sombre\"\n i18n-matTooltip\n matTooltipPosition=\"below\"\n (click)=\"themeService.setColorScheme(ColorScheme.Dark)\"\n >\n <mat-icon naturalIcon=\"dark_mode\" />\n </button>\n</div>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"] }]
|
|
11374
11384
|
}] });
|
|
11375
11385
|
|
|
11376
11386
|
/*
|
|
@@ -11381,20 +11391,11 @@ class NaturalThemeChangerComponent {
|
|
|
11381
11391
|
themeService = inject(NaturalThemeService);
|
|
11382
11392
|
allThemes = inject(NATURAL_THEMES_CONFIG);
|
|
11383
11393
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalThemeChangerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11384
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalThemeChangerComponent, isStandalone: true, selector: "natural-theme-changer", ngImport: i0, template: "<button matButton=\"filled\" [matMenuTriggerFor]=\"menu\"\n ><mat-icon naturalIcon=\"colors\" /> {{ themeService.theme() }}</button\n>\n<mat-menu #menu=\"matMenu\">\n @for (theme of allThemes; track $index) {\n <button mat-menu-item (click)=\"themeService.setTheme(theme)\"
|
|
11394
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalThemeChangerComponent, isStandalone: true, selector: "natural-theme-changer", ngImport: i0, template: "<button matButton=\"filled\" [matMenuTriggerFor]=\"menu\"\n ><mat-icon naturalIcon=\"colors\" /> {{ themeService.theme() }}</button\n>\n<mat-menu #menu=\"matMenu\">\n @for (theme of allThemes; track $index) {\n <button mat-menu-item (click)=\"themeService.setTheme(theme)\">\n <mat-icon [fontIcon]=\"themeService.theme() === theme ? 'check' : ''\" />\n {{ theme }}</button\n >\n }\n</mat-menu>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11385
11395
|
}
|
|
11386
11396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalThemeChangerComponent, decorators: [{
|
|
11387
11397
|
type: Component,
|
|
11388
|
-
args: [{ selector: 'natural-theme-changer', imports: [
|
|
11389
|
-
CommonModule,
|
|
11390
|
-
FormsModule,
|
|
11391
|
-
MatButton,
|
|
11392
|
-
MatMenuTrigger,
|
|
11393
|
-
MatMenu,
|
|
11394
|
-
MatMenuItem,
|
|
11395
|
-
MatIcon,
|
|
11396
|
-
NaturalIconDirective,
|
|
11397
|
-
], template: "<button matButton=\"filled\" [matMenuTriggerFor]=\"menu\"\n ><mat-icon naturalIcon=\"colors\" /> {{ themeService.theme() }}</button\n>\n<mat-menu #menu=\"matMenu\">\n @for (theme of allThemes; track $index) {\n <button mat-menu-item (click)=\"themeService.setTheme(theme)\">{{ theme }}</button>\n }\n</mat-menu>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"] }]
|
|
11398
|
+
args: [{ selector: 'natural-theme-changer', imports: [MatButton, MatMenuTrigger, MatMenu, MatMenuItem, MatIcon, NaturalIconDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button matButton=\"filled\" [matMenuTriggerFor]=\"menu\"\n ><mat-icon naturalIcon=\"colors\" /> {{ themeService.theme() }}</button\n>\n<mat-menu #menu=\"matMenu\">\n @for (theme of allThemes; track $index) {\n <button mat-menu-item (click)=\"themeService.setTheme(theme)\">\n <mat-icon [fontIcon]=\"themeService.theme() === theme ? 'check' : ''\" />\n {{ theme }}</button\n >\n }\n</mat-menu>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"] }]
|
|
11398
11399
|
}] });
|
|
11399
11400
|
|
|
11400
11401
|
/*
|