@skyux/indicators 13.0.0-alpha.9 → 13.0.0-beta.0
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.
|
@@ -458,6 +458,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
458
458
|
* Resolves information about spot illustrations.
|
|
459
459
|
*/
|
|
460
460
|
class SkyIllustrationResolverService {
|
|
461
|
+
/**
|
|
462
|
+
* Resolves the `href` of the SVG element to reference in `use`.
|
|
463
|
+
* If both an `href` and a URL are resolved, the SVG with `href` will be rendered.
|
|
464
|
+
*/
|
|
465
|
+
resolveHref(name) {
|
|
466
|
+
return Promise.resolve('');
|
|
467
|
+
}
|
|
461
468
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyIllustrationResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
462
469
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyIllustrationResolverService }); }
|
|
463
470
|
}
|
|
@@ -484,20 +491,21 @@ class SkyIllustrationComponent {
|
|
|
484
491
|
*/
|
|
485
492
|
this.size = input.required();
|
|
486
493
|
this.url = toSignal(toObservable(this.name).pipe(switchMap((name) => this.#resolverSvc ? from(this.#resolverSvc.resolveUrl(name)) : of('')), catchError(() => of(''))));
|
|
494
|
+
this.svgHref = toSignal(toObservable(this.name).pipe(switchMap((name) => this.#resolverSvc ? from(this.#resolverSvc.resolveHref(name)) : of('')), catchError(() => of(''))));
|
|
487
495
|
}
|
|
488
496
|
#resolverSvc;
|
|
489
497
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyIllustrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
490
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
498
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", 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 } }, hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<div\n [attr.data-sky-illustration-name]=\"name()\"\n [class]=\"'sky-illustration-wrapper sky-illustration-' + size()\"\n>\n @if (svgHref(); as svgHrefValue) {\n <svg aria-hidden=\"true\" class=\"sky-illustration-svg\">\n <use [attr.xlink:href]=\"svgHrefValue\" />\n </svg>\n } @else {\n <img alt=\"\" loading=\"lazy\" class=\"sky-illustration-img\" [src]=\"url()\" />\n }\n</div>\n", styles: [".sky-illustration-wrapper:not(.sky-theme-modern *){--sky-override-illustration-img-size-sm: 48px;--sky-override-illustration-img-size-md: 64px;--sky-override-illustration-img-size-lg: 80px;--sky-override-illustration-img-size-xl: 96px}:host{display:block}.sky-illustration-img{aspect-ratio:auto 1/1;display:block;height:100%;width:100%}.sky-illustration-img[src=\"\"]{visibility:hidden}.sky-illustration-wrapper{--sky-illustration-img-size: var( --sky-override-illustration-img-size-sm, var(--sky-size-illustration-s) );height:var(--sky-illustration-img-size);width:var(--sky-illustration-img-size)}.sky-illustration-wrapper.sky-illustration-md{--sky-illustration-img-size: var( --sky-override-illustration-img-size-md, var(--sky-size-illustration-m) )}.sky-illustration-wrapper.sky-illustration-lg{--sky-illustration-img-size: var( --sky-override-illustration-img-size-lg, var(--sky-size-illustration-l) )}.sky-illustration-wrapper.sky-illustration-xl{--sky-illustration-img-size: var( --sky-override-illustration-img-size-xl, var(--sky-size-illustration-xl) )}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
491
499
|
}
|
|
492
500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyIllustrationComponent, decorators: [{
|
|
493
501
|
type: Component,
|
|
494
|
-
args: [{ selector: 'sky-illustration', imports: [
|
|
502
|
+
args: [{ selector: 'sky-illustration', imports: [], hostDirectives: [SkyThemeComponentClassDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [attr.data-sky-illustration-name]=\"name()\"\n [class]=\"'sky-illustration-wrapper sky-illustration-' + size()\"\n>\n @if (svgHref(); as svgHrefValue) {\n <svg aria-hidden=\"true\" class=\"sky-illustration-svg\">\n <use [attr.xlink:href]=\"svgHrefValue\" />\n </svg>\n } @else {\n <img alt=\"\" loading=\"lazy\" class=\"sky-illustration-img\" [src]=\"url()\" />\n }\n</div>\n", styles: [".sky-illustration-wrapper:not(.sky-theme-modern *){--sky-override-illustration-img-size-sm: 48px;--sky-override-illustration-img-size-md: 64px;--sky-override-illustration-img-size-lg: 80px;--sky-override-illustration-img-size-xl: 96px}:host{display:block}.sky-illustration-img{aspect-ratio:auto 1/1;display:block;height:100%;width:100%}.sky-illustration-img[src=\"\"]{visibility:hidden}.sky-illustration-wrapper{--sky-illustration-img-size: var( --sky-override-illustration-img-size-sm, var(--sky-size-illustration-s) );height:var(--sky-illustration-img-size);width:var(--sky-illustration-img-size)}.sky-illustration-wrapper.sky-illustration-md{--sky-illustration-img-size: var( --sky-override-illustration-img-size-md, var(--sky-size-illustration-m) )}.sky-illustration-wrapper.sky-illustration-lg{--sky-illustration-img-size: var( --sky-override-illustration-img-size-lg, var(--sky-size-illustration-l) )}.sky-illustration-wrapper.sky-illustration-xl{--sky-illustration-img-size: var( --sky-override-illustration-img-size-xl, var(--sky-size-illustration-xl) )}\n"] }]
|
|
495
503
|
}] });
|
|
496
504
|
|
|
497
505
|
class SkyIllustrationModule {
|
|
498
506
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyIllustrationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
499
507
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.5", ngImport: i0, type: SkyIllustrationModule, imports: [SkyIllustrationComponent], exports: [SkyIllustrationComponent] }); }
|
|
500
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyIllustrationModule
|
|
508
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyIllustrationModule }); }
|
|
501
509
|
}
|
|
502
510
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyIllustrationModule, decorators: [{
|
|
503
511
|
type: NgModule,
|