@skyux/indicators 10.19.0 → 10.21.0

package/fesm2022/skyux-indicators.mjs

@@ -1,14 +1,15 @@
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, Pipe, Component, Input, ChangeDetectionStrategy, NgModule, EventEmitter, Output, ChangeDetectorRef, ElementRef, Directive, ViewChild, ViewChildren, EnvironmentInjector } from '@angular/core';
+import { inject, Injectable, Pipe, Component, Input, ChangeDetectionStrategy, NgModule, EventEmitter, Output, input, computed, ChangeDetectorRef, ElementRef, Directive, ViewChild, ViewChildren, EnvironmentInjector } from '@angular/core';
 import * as i2 from '@skyux/theme';
 import { SkyThemeIconManifestService, SkyThemeService, SkyThemeModule } from '@skyux/theme';
 import * as i4 from '@skyux/i18n';
 import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import * as i3 from '@skyux/core';
 import { SkyLogService, SkyTrimModule, SkyMutationObserverService, SkyLiveAnnouncerService, SkyIdModule, SkyScreenReaderLabelDirective, SkyAppWindowRef, SkyDynamicComponentService } from '@skyux/core';
-import { take, Subject, BehaviorSubject, defer } from 'rxjs';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import { switchMap, from, of, catchError, take, Subject, BehaviorSubject, defer } from 'rxjs';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { takeUntil, take as take$1, finalize } from 'rxjs/operators';
 
@@ -659,6 +660,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 }]
         }] });
 
+/**
+ * Resolves information about spot illustrations.
+ */
+class SkyIllustrationResolverService {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyIllustrationResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyIllustrationResolverService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyIllustrationResolverService, decorators: [{
+            type: Injectable
+        }] });
+
+const pixelSizes = {
+    sm: 48,
+    md: 64,
+    lg: 80,
+    xl: 96,
+};
+/**
+ * Displays a spot illustration at the specified size.
+ */
+class SkyIllustrationComponent {
+    constructor() {
+        this.#resolverSvc = inject(SkyIllustrationResolverService, {
+            optional: true,
+        });
+        /**
+         * The name of the illustration to display.
+         * @required
+         */
+        this.name = input.required();
+        /**
+         * The size of the illustration.
+         * @required
+         */
+        this.size = input.required();
+        this.url = toSignal(toObservable(this.name).pipe(switchMap((name) => this.#resolverSvc ? from(this.#resolverSvc.resolveUrl(name)) : of('')), catchError(() => of(''))));
+        this.pixelSize = computed(() => pixelSizes[this.size()]);
+    }
+    #resolverSvc;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyIllustrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.4", type: SkyIllustrationComponent, isStandalone: true, selector: "sky-illustration", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<img\n  alt=\"\"\n  class=\"sky-illustration-img\"\n  loading=\"lazy\"\n  [attr.data-sky-illustration-name]=\"name()\"\n  [height]=\"pixelSize()\"\n  [src]=\"url()\"\n  [width]=\"pixelSize()\"\n/>\n", styles: [":host,.sky-illustration-img{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyIllustrationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-illustration', standalone: true, imports: [CommonModule, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n  alt=\"\"\n  class=\"sky-illustration-img\"\n  loading=\"lazy\"\n  [attr.data-sky-illustration-name]=\"name()\"\n  [height]=\"pixelSize()\"\n  [src]=\"url()\"\n  [width]=\"pixelSize()\"\n/>\n", styles: [":host,.sky-illustration-img{display:block}\n"] }]
+        }] });
+
+class SkyIllustrationModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyIllustrationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: SkyIllustrationModule, imports: [SkyIllustrationComponent], exports: [SkyIllustrationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyIllustrationModule, imports: [SkyIllustrationComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyIllustrationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SkyIllustrationComponent],
+                    exports: [SkyIllustrationComponent],
+                }]
+        }] });
+
 /**
  * Specifies a label to display in smaller text under or beside the value.
  * To display a help button beside the label, include a help button element, such as `sky-help-inline`,
@@ -2204,5 +2265,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SkyAlertModule, SkyChevronModule, SkyExpansionIndicatorModule, SkyHelpInlineModule, SkyIconModule, SkyKeyInfoModule, SkyLabelModule, SkyStatusIndicatorModule, SkyTextHighlightDirective, SkyTextHighlightModule, SkyTokensMessageType, SkyTokensModule, SkyWaitModule, SkyWaitService, SkyAlertComponent as λ1, SkyStatusIndicatorComponent as λ10, SkyTextHighlightDirective as λ11, SkyTokenComponent as λ12, SkyTokensComponent as λ13, SkyWaitComponent as λ14, SkyExpansionIndicatorComponent as λ15, SkyChevronComponent as λ2, SkyHelpInlineComponent as λ3, SkyIconComponent as λ4, SkyIconStackComponent as λ5, SkyKeyInfoLabelComponent as λ6, SkyKeyInfoValueComponent as λ7, SkyKeyInfoComponent as λ8, SkyLabelComponent as λ9 };
+export { SkyAlertModule, SkyChevronModule, SkyExpansionIndicatorModule, SkyHelpInlineModule, SkyIconModule, SkyIllustrationModule, SkyIllustrationResolverService, SkyKeyInfoModule, SkyLabelModule, SkyStatusIndicatorModule, SkyTextHighlightDirective, SkyTextHighlightModule, SkyTokensMessageType, SkyTokensModule, SkyWaitModule, SkyWaitService, SkyAlertComponent as λ1, SkyStatusIndicatorComponent as λ10, SkyTextHighlightDirective as λ11, SkyTokenComponent as λ12, SkyTokensComponent as λ13, SkyWaitComponent as λ14, SkyExpansionIndicatorComponent as λ15, SkyIllustrationComponent as λ16, SkyChevronComponent as λ2, SkyHelpInlineComponent as λ3, SkyIconComponent as λ4, SkyIconStackComponent as λ5, SkyKeyInfoLabelComponent as λ6, SkyKeyInfoValueComponent as λ7, SkyKeyInfoComponent as λ8, SkyLabelComponent as λ9 };
 //# sourceMappingURL=skyux-indicators.mjs.map