@ship-ui/core 0.16.9 → 0.16.10

package/fesm2022/ship-ui-core.mjs

@@ -3,6 +3,7 @@ import { inject, ElementRef, Renderer2, ChangeDetectionStrategy, Component, sign
 import { isPlatformBrowser, JsonPipe, DatePipe, isPlatformServer, NgTemplateOutlet } from '@angular/common';
 import { NgModel } from '@angular/forms';
 import { SIGNAL } from '@angular/core/primitives/signals';
+import { ShipIcon as ShipIcon$1, ShipButton as ShipButton$1 } from 'ship-ui';
 
 const iconTypes = ['bold', 'thin', 'light', 'fill', 'duotone'];
 class ShipIcon {
@@ -6090,6 +6091,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 }]
         }] });
 
+const THEME_ORDER = ['light', 'dark', null];
+const WINDOW = new InjectionToken('WindowToken', {
+    providedIn: 'root',
+    factory: () => (typeof window !== 'undefined' ? window : {}),
+});
+class ShipThemeState {
+    constructor() {
+        this.#document = inject(DOCUMENT);
+        this.#window = inject(WINDOW);
+        this.#platformId = inject(PLATFORM_ID);
+        this.#storedDarkMode = this.localStorage()?.getItem('shipTheme');
+        this.#theme = signal(this.#storedDarkMode, ...(ngDevMode ? [{ debugName: "#theme" }] : []));
+        this.theme = this.#theme.asReadonly();
+        this.darkModeEffect = effect(() => {
+            const theme = this.#theme();
+            if (theme === null) {
+                this.#document.documentElement.classList.remove('dark');
+                this.#document.documentElement.classList.remove('light');
+                return;
+            }
+            if (theme === 'dark') {
+                this.#document.documentElement.classList.add('dark');
+                this.#document.documentElement.classList.remove('light');
+            }
+            else {
+                this.#document.documentElement.classList.add('light');
+                this.#document.documentElement.classList.remove('dark');
+            }
+        }, ...(ngDevMode ? [{ debugName: "darkModeEffect" }] : []));
+    }
+    #document;
+    #window;
+    #platformId;
+    #storedDarkMode;
+    #theme;
+    localStorage() {
+        if (isPlatformServer(this.#platformId))
+            return null;
+        return this.#window.localStorage;
+    }
+    toggleTheme() {
+        const nextTheme = this.#theme() === null ? THEME_ORDER[0] : THEME_ORDER[THEME_ORDER.indexOf(this.#theme()) + 1];
+        this.setTheme(nextTheme);
+    }
+    setTheme(theme) {
+        if (theme === null) {
+            this.localStorage()?.removeItem('shipTheme');
+            this.#theme.set(null);
+            return;
+        }
+        this.localStorage()?.setItem('shipTheme', theme);
+        this.#theme.set(theme);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipThemeState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipThemeState, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipThemeState, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class ShipThemeToggle {
+    constructor() {
+        this.#themeState = inject(ShipThemeState);
+        this.theme = this.#themeState.theme;
+    }
+    #themeState;
+    toggleTheme() {
+        this.#themeState.toggleTheme();
+    }
+    setTheme(theme) {
+        this.#themeState.setTheme(theme);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipThemeToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ShipThemeToggle, isStandalone: true, selector: "ship-theme-toggle", ngImport: i0, template: `
+    <button shButton class="small" (click)="toggleTheme()">
+      @if (theme() === 'dark') {
+        <sh-icon>moon-bold</sh-icon>
+      } @else if (theme() === 'light') {
+        <sh-icon>sun-bold</sh-icon>
+      } @else if (theme() === null) {
+        <sh-icon class="small-icon">sun-bold</sh-icon>
+        <sh-icon class="small-icon">moon-bold</sh-icon>
+      }
+    </button>
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipIcon$1, selector: "sh-icon" }, { kind: "component", type: ShipButton$1, selector: "[shButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShipThemeToggle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ship-theme-toggle',
+                    imports: [ShipIcon$1, ShipButton$1],
+                    template: `
+    <button shButton class="small" (click)="toggleTheme()">
+      @if (theme() === 'dark') {
+        <sh-icon>moon-bold</sh-icon>
+      } @else if (theme() === 'light') {
+        <sh-icon>sun-bold</sh-icon>
+      } @else if (theme() === null) {
+        <sh-icon class="small-icon">sun-bold</sh-icon>
+        <sh-icon class="small-icon">moon-bold</sh-icon>
+      }
+    </button>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
 class ShipToggleCard {
     constructor() {
         this.isActive = model(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
@@ -6724,5 +6835,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GridSortable, SHIP_CONFIG, ShipAlert, ShipAlertContainer, ShipAlertModule, ShipAlertService, ShipBlueprint, ShipButton, ShipButtonGroup, ShipCard, ShipCheckbox, ShipChip, ShipColorPicker, ShipDatepicker, ShipDatepickerInput, ShipDaterangeInput, ShipDialog, ShipDialogService, ShipDivider, ShipEventCard, ShipFileDragDrop, ShipFileUpload, ShipFormField, ShipFormFieldExperimental, ShipIcon, ShipInputMask, ShipList, ShipMenu, ShipPopover, ShipPreventWheel, ShipProgressBar, ShipRadio, ShipRangeSlider, ShipResize, ShipSelect, ShipSidenav, ShipSort, ShipSortable, ShipSpinner, ShipStepper, ShipStickyColumns, ShipTable, ShipTabs, ShipToggle, ShipToggleCard, ShipTooltip, ShipTooltipWrapper, ShipVirtualScroll, TEST_NODES, moveIndex, watchHostClass };
+export { GridSortable, SHIP_CONFIG, ShipAlert, ShipAlertContainer, ShipAlertModule, ShipAlertService, ShipBlueprint, ShipButton, ShipButtonGroup, ShipCard, ShipCheckbox, ShipChip, ShipColorPicker, ShipDatepicker, ShipDatepickerInput, ShipDaterangeInput, ShipDialog, ShipDialogService, ShipDivider, ShipEventCard, ShipFileDragDrop, ShipFileUpload, ShipFormField, ShipFormFieldExperimental, ShipIcon, ShipInputMask, ShipList, ShipMenu, ShipPopover, ShipPreventWheel, ShipProgressBar, ShipRadio, ShipRangeSlider, ShipResize, ShipSelect, ShipSidenav, ShipSort, ShipSortable, ShipSpinner, ShipStepper, ShipStickyColumns, ShipTable, ShipTabs, ShipThemeToggle, ShipToggle, ShipToggleCard, ShipTooltip, ShipTooltipWrapper, ShipVirtualScroll, TEST_NODES, moveIndex, watchHostClass };
 //# sourceMappingURL=ship-ui-core.mjs.map