osl-base-extended 0.1.15 → 0.1.17

package/fesm2022/osl-base-extended.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Inject, inject, Injector, Injectable, InjectionToken, PLATFORM_ID, Input, Directive, EventEmitter, Output, HostListener, ViewChild, NgModule } from '@angular/core';
+import { Component, Inject, inject, Injector, Injectable, InjectionToken, PLATFORM_ID, Input, Optional, Directive, EventEmitter, Output, HostListener, ViewChild, NgModule } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -11,7 +11,7 @@ import { MatIconButton, MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { HttpHeaders, HttpParams, HttpClient } from '@angular/common/http';
-import { firstValueFrom, timeout, debounceTime, distinctUntilChanged } from 'rxjs';
+import { firstValueFrom, timeout, BehaviorSubject, debounceTime, distinctUntilChanged } from 'rxjs';
 import * as i1$1 from '@angular/forms';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2$1 from '@angular/material/form-field';
@@ -297,13 +297,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+class OslSkeletonThemeService {
+    _theme$ = new BehaviorSubject('light');
+    /** Subscribe to react to global theme changes */
+    theme$ = this._theme$.asObservable();
+    get current() {
+        return this._theme$.getValue();
+    }
+    setTheme(theme) {
+        this._theme$.next(theme);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 // Injected once per app lifetime — static flag avoids duplicate <style> tags.
 let _osl_sk_injected = false;
 // CSS is minified inline: zero runtime SCSS processing, one GPU-composited
 // keyframe (translateX uses the compositor thread, no layout/paint on each frame).
 const SKELETON_CSS = `
 .osl-sk-host{position:relative!important}
-.osl-sk-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden;background:var(--osl-sk-bg,#f8fafc)}
+.osl-sk-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
 .osl-sk-bone{position:absolute;background:var(--osl-sk-color,#e2e8f0);border-radius:var(--osl-sk-r,4px);overflow:hidden;will-change:transform,opacity}
 .osl-sk-bone::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--osl-sk-hl,rgba(255,255,255,.6)) 50%,transparent 100%);transform:translateX(-100%);will-change:transform}
 .osl-sk-shimmer .osl-sk-bone::after{animation:_osl-sk-shimmer var(--osl-sk-dur,1.5s) ease-in-out infinite}
@@ -332,6 +350,7 @@ class OslSkeletonDirective {
     renderer;
     zone;
     platformId;
+    themeService;
     // ── Inputs ────────────────────────────────────────────────────────────────
     /** Primary toggle — set true while data is loading */
     loading = false;
@@ -339,8 +358,10 @@ class OslSkeletonDirective {
     type = 'auto';
     /** Animation style (default: shimmer) */
     animation = 'shimmer';
-    /** Colour preset — overridden by oslSkeletonColor & oslSkeletonHighlight */
-    theme = 'light';
+    /** Colour preset — overridden by oslSkeletonColor & oslSkeletonHighlight.
+     *  When omitted, the global OslSkeletonThemeService value is used. */
+    set theme(value) { this._themeOverride = value; }
+    get theme() { return this._themeOverride ?? this._serviceTheme; }
     /** Override bone background colour (e.g. '#cbd5e1') */
     color;
     /** Override shimmer highlight colour (e.g. 'rgba(255,255,255,0.8)') */
@@ -378,16 +399,32 @@ class OslSkeletonDirective {
     cachedBones = null;
     delayTimer = null;
     rafId = 0;
+    _themeOverride;
+    _serviceTheme = 'light';
+    _themeSub;
     // ── Lifecycle ─────────────────────────────────────────────────────────────
-    constructor(el, renderer, zone, platformId) {
+    constructor(el, renderer, zone, platformId, themeService) {
         this.el = el;
         this.renderer = renderer;
         this.zone = zone;
         this.platformId = platformId;
+        this.themeService = themeService;
         if (isPlatformBrowser(this.platformId)) {
             OslSkeletonDirective.injectStyles();
         }
     }
+    ngOnInit() {
+        if (!isPlatformBrowser(this.platformId) || !this.themeService)
+            return;
+        this._themeSub = this.themeService.theme$.subscribe(theme => {
+            if (this._themeOverride !== undefined)
+                return;
+            this._serviceTheme = theme;
+            if (this.loading && this.overlay?.parentNode) {
+                this.zone.runOutsideAngular(() => this.applyConfig());
+            }
+        });
+    }
     ngOnChanges(changes) {
         if (!isPlatformBrowser(this.platformId))
             return;
@@ -699,7 +736,7 @@ class OslSkeletonDirective {
         style.textContent = SKELETON_CSS;
         document.head.appendChild(style);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: OslSkeletonThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: OslSkeletonDirective, isStandalone: false, selector: "[oslSkeleton]", inputs: { loading: ["oslSkeleton", "loading"], type: ["oslSkeletonType", "type"], animation: ["oslSkeletonAnimation", "animation"], theme: ["oslSkeletonTheme", "theme"], color: ["oslSkeletonColor", "color"], highlight: ["oslSkeletonHighlight", "highlight"], radius: ["oslSkeletonRadius", "radius"], rows: ["oslSkeletonRows", "rows"], rowGap: ["oslSkeletonRowGap", "rowGap"], zIndex: ["oslSkeletonZIndex", "zIndex"], delay: ["oslSkeletonDelay", "delay"], duration: ["oslSkeletonDuration", "duration"], minHeight: ["oslSkeletonMinHeight", "minHeight"], forceReread: ["oslSkeletonForceReread", "forceReread"], circleSize: ["oslSkeletonCircleSize", "circleSize"], listItems: ["oslSkeletonListItems", "listItems"], tableRows: ["oslSkeletonTableRows", "tableRows"], tableCols: ["oslSkeletonTableCols", "tableCols"], cardLines: ["oslSkeletonCardLines", "cardLines"], bgColor: ["oslSkeletonBgColor", "bgColor"] }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonDirective, decorators: [{
@@ -711,6 +748,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
+                }] }, { type: OslSkeletonThemeService, decorators: [{
+                    type: Optional
                 }] }], propDecorators: { loading: [{
                 type: Input,
                 args: ['oslSkeleton']
@@ -2447,5 +2486,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DeleteConfirmation, DeleteConfirmationData, Dialog, DialogWrapper, DynamicForm, FormStructureModule, Httpbase, OslAutocomplete, OslAutocompleteLister, OslBaseExtended, OslButton, OslCheckbox, OslDatepicker, OslFileUpload, OslFormGrid, OslGrid, OslRadio, OslSearchbar, OslSelect, OslSetup, OslSkeletonDirective, OslSkeletonModule, OslSlideToggle, Oslinput, Osltextarea, baseComponent };
+export { DeleteConfirmation, DeleteConfirmationData, Dialog, DialogWrapper, DynamicForm, FormStructureModule, Httpbase, OslAutocomplete, OslAutocompleteLister, OslBaseExtended, OslButton, OslCheckbox, OslDatepicker, OslFileUpload, OslFormGrid, OslGrid, OslRadio, OslSearchbar, OslSelect, OslSetup, OslSkeletonDirective, OslSkeletonModule, OslSkeletonThemeService, OslSlideToggle, Oslinput, Osltextarea, baseComponent };
 //# sourceMappingURL=osl-base-extended.mjs.map