@skyux/theme 15.0.0-alpha.0 → 15.0.0-alpha.1

package/fesm2022/skyux-theme.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, Injectable, Optional, Input, Directive, NgModule, ChangeDetectorRef, HostBinding, NgZone, DestroyRef, makeEnvironmentProviders, provideAppInitializer, RendererFactory2 } from '@angular/core';
+import { inject, DOCUMENT, Injectable, ElementRef, Renderer2, Input, Directive, TemplateRef, ViewContainerRef, ChangeDetectorRef, NgModule, HostBinding, NgZone, DestroyRef, makeEnvironmentProviders, provideAppInitializer, RendererFactory2 } from '@angular/core';
 import FontFaceObserver from 'fontfaceobserver';
 import { take, takeUntil } from 'rxjs/operators';
 import { ReplaySubject, Subject } from 'rxjs';
@@ -429,10 +429,10 @@ class SkyThemeBrandService {
     #appendToHead(renderer, el) {
         renderer.appendChild(this.#document.head, el);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeBrandService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeBrandService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeBrandService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeBrandService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeBrandService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeBrandService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -671,20 +671,20 @@ class SkyThemeService {
                 currentSetting instanceof SkyThemeSpacing) &&
                 current.theme[supportedProp].includes(currentSetting)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
 class SkyAppStyleLoader {
-    static { this.LOAD_TIMEOUT = 3000; }
-    #themeSvc;
-    constructor(themeSvc) {
+    constructor() {
         this.isLoaded = false;
-        this.#themeSvc = themeSvc;
+        this.#themeSvc = inject(SkyThemeService, { optional: true });
     }
+    static { this.LOAD_TIMEOUT = 3000; }
+    #themeSvc;
     loadStyles() {
         if (this.isLoaded) {
             return Promise.resolve();
@@ -712,17 +712,15 @@ class SkyAppStyleLoader {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyAppStyleLoader, deps: [{ token: SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyAppStyleLoader, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAppStyleLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAppStyleLoader, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyAppStyleLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAppStyleLoader, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: SkyThemeService, decorators: [{
-                    type: Optional
-                }] }] });
+        }] });
 
 /**
  * Component to add classes conditionally based on the current theme.
@@ -765,11 +763,10 @@ class SkyThemeClassDirective {
     #ngUnsubscribe = new Subject();
     #initialClasses = [];
     #skyThemeClassMap;
-    #ngEl;
-    #renderer;
-    constructor(ngEl, renderer, themeSvc) {
-        this.#ngEl = ngEl;
-        this.#renderer = renderer;
+    #ngEl = inject(ElementRef);
+    #renderer = inject(Renderer2);
+    constructor() {
+        const themeSvc = inject(SkyThemeService, { optional: true });
         if (themeSvc) {
             themeSvc.settingsChange
                 .pipe(takeUntil(this.#ngUnsubscribe))
@@ -822,18 +819,16 @@ class SkyThemeClassDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeClassDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: SkyThemeClassDirective, isStandalone: false, selector: "[skyThemeClass]", inputs: { class: "class", skyThemeClass: "skyThemeClass" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SkyThemeClassDirective, isStandalone: false, selector: "[skyThemeClass]", inputs: { class: "class", skyThemeClass: "skyThemeClass" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeClassDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeClassDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyThemeClass]',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SkyThemeService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { class: [{
+        }], ctorParameters: () => [], propDecorators: { class: [{
                 type: Input
             }], skyThemeClass: [{
                 type: Input
@@ -858,12 +853,12 @@ class SkyThemeIfDirective {
     #currentTheme;
     #ngUnsubscribe = new Subject();
     #hasView = false;
-    #templateRef;
-    #viewContainer;
-    constructor(templateRef, viewContainer, changeDetector, themeSvc) {
-        this.#templateRef = templateRef;
-        this.#viewContainer = viewContainer;
+    #templateRef = inject((TemplateRef));
+    #viewContainer = inject(ViewContainerRef);
+    constructor() {
+        const themeSvc = inject(SkyThemeService, { optional: true });
         if (themeSvc) {
+            const changeDetector = inject(ChangeDetectorRef);
             themeSvc.settingsChange
                 .pipe(takeUntil(this.#ngUnsubscribe))
                 .subscribe((settingsChange) => {
@@ -893,18 +888,16 @@ class SkyThemeIfDirective {
             this.#hasView = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeIfDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: SkyThemeIfDirective, isStandalone: false, selector: "[skyThemeIf]", inputs: { skyThemeIf: "skyThemeIf" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeIfDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SkyThemeIfDirective, isStandalone: false, selector: "[skyThemeIf]", inputs: { skyThemeIf: "skyThemeIf" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeIfDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeIfDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyThemeIf]',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: SkyThemeService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { skyThemeIf: [{
+        }], ctorParameters: () => [], propDecorators: { skyThemeIf: [{
                 type: Input
             }] } });
 
@@ -914,6 +907,13 @@ const defaultTheme = new SkyThemeSettings(SkyTheme.presets.default, SkyThemeMode
  * to have its own theme.
  */
 class SkyThemeDirective {
+    constructor() {
+        this.skyThemeOrDefault = defaultTheme;
+        this.#initialized = false;
+        this.#elRef = inject(ElementRef);
+        this.#renderer = inject(Renderer2);
+        this.#themeSvc = inject(SkyThemeService);
+    }
     set skyTheme(value) {
         this.skyThemeOrDefault = value || defaultTheme;
         if (this.#initialized) {
@@ -924,13 +924,6 @@ class SkyThemeDirective {
     #elRef;
     #renderer;
     #themeSvc;
-    constructor(elRef, renderer, themeSvc) {
-        this.skyThemeOrDefault = defaultTheme;
-        this.#initialized = false;
-        this.#elRef = elRef;
-        this.#renderer = renderer;
-        this.#themeSvc = themeSvc;
-    }
     ngOnInit() {
         this.#themeSvc.init(this.#elRef.nativeElement, this.#renderer, this.skyThemeOrDefault);
         this.#initialized = true;
@@ -938,28 +931,28 @@ class SkyThemeDirective {
     ngOnDestroy() {
         this.#themeSvc.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SkyThemeService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: SkyThemeDirective, isStandalone: false, selector: "[skyTheme]", inputs: { skyTheme: "skyTheme" }, providers: [SkyThemeService], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SkyThemeDirective, isStandalone: false, selector: "[skyTheme]", inputs: { skyTheme: "skyTheme" }, providers: [SkyThemeService], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyTheme]',
                     providers: [SkyThemeService],
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SkyThemeService }], propDecorators: { skyTheme: [{
+        }], propDecorators: { skyTheme: [{
                 type: Input
             }] } });
 
 class SkyThemeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeModule, declarations: [SkyThemeClassDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeModule, declarations: [SkyThemeClassDirective,
             SkyThemeDirective,
             SkyThemeIfDirective], exports: [SkyThemeClassDirective, SkyThemeDirective, SkyThemeIfDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -985,10 +978,10 @@ class SkyThemeComponentClassDirective {
             this.#changeDetector.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeComponentClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: SkyThemeComponentClassDirective, isStandalone: true, selector: "[skyThemeClass]", host: { properties: { "class": "this.theme" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeComponentClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SkyThemeComponentClassDirective, isStandalone: true, selector: "[skyThemeClass]", host: { properties: { "class": "this.theme" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyThemeComponentClassDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyThemeComponentClassDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyThemeClass]',
@@ -1142,10 +1135,10 @@ class SkyAppViewportService {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyAppViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyAppViewportService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAppViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAppViewportService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyAppViewportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAppViewportService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',