@skyux/icon 14.4.0 → 15.0.0-alpha.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.
- package/fesm2022/skyux-icon.mjs +24 -20
- package/fesm2022/skyux-icon.mjs.map +1 -1
- package/package.json +6 -6
package/fesm2022/skyux-icon.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject, input, computed, Component, Input,
|
|
2
|
+
import { Injectable, inject, input, computed, ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core';
|
|
3
3
|
import { CommonModule } from '@angular/common';
|
|
4
4
|
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
|
|
5
5
|
import * as i1 from '@skyux/theme';
|
|
@@ -89,10 +89,10 @@ class SkyIconSvgResolverService {
|
|
|
89
89
|
resetIconMap() {
|
|
90
90
|
iconMapPromise = undefined;
|
|
91
91
|
}
|
|
92
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
93
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
92
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyIconSvgResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
93
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyIconSvgResolverService, providedIn: 'root' }); }
|
|
94
94
|
}
|
|
95
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyIconSvgResolverService, decorators: [{
|
|
96
96
|
type: Injectable,
|
|
97
97
|
args: [{
|
|
98
98
|
providedIn: 'root',
|
|
@@ -120,28 +120,31 @@ function defaultSize(value) {
|
|
|
120
120
|
class SkyIconSvgComponent {
|
|
121
121
|
constructor() {
|
|
122
122
|
this.#resolverSvc = inject(SkyIconSvgResolverService);
|
|
123
|
-
this.iconName = input.required(
|
|
124
|
-
|
|
125
|
-
this.
|
|
123
|
+
this.iconName = input.required(/* @ts-ignore */
|
|
124
|
+
...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
|
|
125
|
+
this.iconSize = input('m', { ...(ngDevMode ? { debugName: "iconSize" } : /* istanbul ignore next */ {}), transform: defaultSize });
|
|
126
|
+
this.iconVariant = input(/* @ts-ignore */
|
|
127
|
+
...(ngDevMode ? [undefined, { debugName: "iconVariant" }] : /* istanbul ignore next */ []));
|
|
126
128
|
this.#iconInfo = computed(() => {
|
|
127
129
|
return {
|
|
128
130
|
src: this.iconName(),
|
|
129
131
|
iconSize: this.iconSize(),
|
|
130
132
|
variant: this.iconVariant(),
|
|
131
133
|
};
|
|
132
|
-
},
|
|
134
|
+
}, /* @ts-ignore */
|
|
135
|
+
...(ngDevMode ? [{ debugName: "#iconInfo" }] : /* istanbul ignore next */ []));
|
|
133
136
|
this.iconHref = toSignal(toObservable(this.#iconInfo).pipe(switchMap((info) => this.#resolverSvc.resolveHref(info.src, FIXED_SIZES.get(info.iconSize), info.variant)), catchError(() => of(''))));
|
|
134
137
|
}
|
|
135
138
|
#resolverSvc;
|
|
136
139
|
#iconInfo;
|
|
137
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
138
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
140
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyIconSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
141
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: SkyIconSvgComponent, isStandalone: true, selector: "sky-icon-svg", inputs: { iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: true, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"sky-icon-svg-\" + iconSize()" } }, hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<div class=\"sky-icon-svg-container\">\n <svg\n aria-hidden=\"true\"\n class=\"sky-icon-svg-img\"\n [attr.data-sky-icon]=\"iconName()\"\n [attr.data-sky-icon-variant]=\"iconVariant()\"\n >\n <use [attr.xlink:href]=\"iconHref()\" />\n </svg>\n</div>\n", styles: ["@charset \"UTF-8\";:host.sky-cmp-theme-default{--sky-override-sky-icon-svg-size-xxxs: 4px;--sky-override-sky-icon-svg-size-xxs: 8px;--sky-override-sky-icon-svg-size-xs: 12px;--sky-override-sky-icon-svg-size-s: 16px;--sky-override-sky-icon-svg-size-m: 20px;--sky-override-sky-icon-svg-size-l: 24px;--sky-override-sky-icon-svg-size-xl: 32px;--sky-override-sky-icon-svg-size-xxl: 40px;--sky-override-sky-icon-svg-size-xxxl: 48px}:host{display:inline-flex;--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-s, var(--sky-size-icon-s) )}:host.sky-icon-svg-relative-md{--sky-icon-svg-img-size: 1em}:host.sky-icon-svg-relative-lg .sky-icon-svg-img{transform:scale(1.33)}:host.sky-icon-svg-relative-lg .sky-icon-svg-container{margin:0 .166em}:host.sky-icon-svg-relative-2x{--sky-icon-svg-img-size: 2em}:host.sky-icon-svg-relative-3x{--sky-icon-svg-img-size: 3em}:host.sky-icon-svg-relative-4x{--sky-icon-svg-img-size: 4em}:host.sky-icon-svg-relative-5x{--sky-icon-svg-img-size: 5em}:host.sky-icon-svg-xxxs{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xxxs, var(--sky-size-icon-xxxs) )}:host.sky-icon-svg-xxs{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xxs, var(--sky-size-icon-xxs) )}:host.sky-icon-svg-xs{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xs, var(--sky-size-icon-xs) )}:host.sky-icon-svg-m{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-m, var(--sky-size-icon-m) )}:host.sky-icon-svg-l{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-l, var(--sky-size-icon-l) )}:host.sky-icon-svg-xl{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xl, var(--sky-size-icon-xl) )}:host.sky-icon-svg-xxl{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xxl, var(--sky-size-icon-xxl) )}:host.sky-icon-svg-xxxl{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xxxl, var(--sky-size-icon-xxxl) )}.sky-icon-svg-container:before{content:\"\\200b\"}.sky-icon-svg-container{height:var(--sky-icon-svg-img-size);width:var(--sky-icon-svg-img-size);display:inline-flex;align-items:center}.sky-icon-svg-container svg{height:100%;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
139
142
|
}
|
|
140
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
143
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyIconSvgComponent, decorators: [{
|
|
141
144
|
type: Component,
|
|
142
145
|
args: [{ selector: 'sky-icon-svg', host: {
|
|
143
146
|
'[class]': '"sky-icon-svg-" + iconSize()',
|
|
144
|
-
}, hostDirectives: [SkyThemeComponentClassDirective], template: "<div class=\"sky-icon-svg-container\">\n <svg\n aria-hidden=\"true\"\n class=\"sky-icon-svg-img\"\n [attr.data-sky-icon]=\"iconName()\"\n [attr.data-sky-icon-variant]=\"iconVariant()\"\n >\n <use [attr.xlink:href]=\"iconHref()\" />\n </svg>\n</div>\n", styles: ["@charset \"UTF-8\";:host.sky-cmp-theme-default{--sky-override-sky-icon-svg-size-xxxs: 4px;--sky-override-sky-icon-svg-size-xxs: 8px;--sky-override-sky-icon-svg-size-xs: 12px;--sky-override-sky-icon-svg-size-s: 16px;--sky-override-sky-icon-svg-size-m: 20px;--sky-override-sky-icon-svg-size-l: 24px;--sky-override-sky-icon-svg-size-xl: 32px;--sky-override-sky-icon-svg-size-xxl: 40px;--sky-override-sky-icon-svg-size-xxxl: 48px}:host{display:inline-flex;--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-s, var(--sky-size-icon-s) )}:host.sky-icon-svg-relative-md{--sky-icon-svg-img-size: 1em}:host.sky-icon-svg-relative-lg .sky-icon-svg-img{transform:scale(1.33)}:host.sky-icon-svg-relative-lg .sky-icon-svg-container{margin:0 .166em}:host.sky-icon-svg-relative-2x{--sky-icon-svg-img-size: 2em}:host.sky-icon-svg-relative-3x{--sky-icon-svg-img-size: 3em}:host.sky-icon-svg-relative-4x{--sky-icon-svg-img-size: 4em}:host.sky-icon-svg-relative-5x{--sky-icon-svg-img-size: 5em}:host.sky-icon-svg-xxxs{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xxxs, var(--sky-size-icon-xxxs) )}:host.sky-icon-svg-xxs{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xxs, var(--sky-size-icon-xxs) )}:host.sky-icon-svg-xs{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xs, var(--sky-size-icon-xs) )}:host.sky-icon-svg-m{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-m, var(--sky-size-icon-m) )}:host.sky-icon-svg-l{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-l, var(--sky-size-icon-l) )}:host.sky-icon-svg-xl{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xl, var(--sky-size-icon-xl) )}:host.sky-icon-svg-xxl{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xxl, var(--sky-size-icon-xxl) )}:host.sky-icon-svg-xxxl{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xxxl, var(--sky-size-icon-xxxl) )}.sky-icon-svg-container:before{content:\"\\200b\"}.sky-icon-svg-container{height:var(--sky-icon-svg-img-size);width:var(--sky-icon-svg-img-size);display:inline-flex;align-items:center}.sky-icon-svg-container svg{height:100%;width:100%}\n"] }]
|
|
147
|
+
}, changeDetection: ChangeDetectionStrategy.Eager, hostDirectives: [SkyThemeComponentClassDirective], template: "<div class=\"sky-icon-svg-container\">\n <svg\n aria-hidden=\"true\"\n class=\"sky-icon-svg-img\"\n [attr.data-sky-icon]=\"iconName()\"\n [attr.data-sky-icon-variant]=\"iconVariant()\"\n >\n <use [attr.xlink:href]=\"iconHref()\" />\n </svg>\n</div>\n", styles: ["@charset \"UTF-8\";:host.sky-cmp-theme-default{--sky-override-sky-icon-svg-size-xxxs: 4px;--sky-override-sky-icon-svg-size-xxs: 8px;--sky-override-sky-icon-svg-size-xs: 12px;--sky-override-sky-icon-svg-size-s: 16px;--sky-override-sky-icon-svg-size-m: 20px;--sky-override-sky-icon-svg-size-l: 24px;--sky-override-sky-icon-svg-size-xl: 32px;--sky-override-sky-icon-svg-size-xxl: 40px;--sky-override-sky-icon-svg-size-xxxl: 48px}:host{display:inline-flex;--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-s, var(--sky-size-icon-s) )}:host.sky-icon-svg-relative-md{--sky-icon-svg-img-size: 1em}:host.sky-icon-svg-relative-lg .sky-icon-svg-img{transform:scale(1.33)}:host.sky-icon-svg-relative-lg .sky-icon-svg-container{margin:0 .166em}:host.sky-icon-svg-relative-2x{--sky-icon-svg-img-size: 2em}:host.sky-icon-svg-relative-3x{--sky-icon-svg-img-size: 3em}:host.sky-icon-svg-relative-4x{--sky-icon-svg-img-size: 4em}:host.sky-icon-svg-relative-5x{--sky-icon-svg-img-size: 5em}:host.sky-icon-svg-xxxs{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xxxs, var(--sky-size-icon-xxxs) )}:host.sky-icon-svg-xxs{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xxs, var(--sky-size-icon-xxs) )}:host.sky-icon-svg-xs{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xs, var(--sky-size-icon-xs) )}:host.sky-icon-svg-m{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-m, var(--sky-size-icon-m) )}:host.sky-icon-svg-l{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-l, var(--sky-size-icon-l) )}:host.sky-icon-svg-xl{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xl, var(--sky-size-icon-xl) )}:host.sky-icon-svg-xxl{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xxl, var(--sky-size-icon-xxl) )}:host.sky-icon-svg-xxxl{--sky-icon-svg-img-size: var( --sky-override-sky-icon-svg-size-xxxl, var(--sky-size-icon-xxxl) )}.sky-icon-svg-container:before{content:\"\\200b\"}.sky-icon-svg-container{height:var(--sky-icon-svg-img-size);width:var(--sky-icon-svg-img-size);display:inline-flex;align-items:center}.sky-icon-svg-container svg{height:100%;width:100%}\n"] }]
|
|
145
148
|
}], propDecorators: { iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: true }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconVariant", required: false }] }] } });
|
|
146
149
|
|
|
147
150
|
class SkyIconComponent {
|
|
@@ -150,12 +153,13 @@ class SkyIconComponent {
|
|
|
150
153
|
* The icon size. Size is independent of font size.
|
|
151
154
|
* @default "m"
|
|
152
155
|
*/
|
|
153
|
-
this.iconSize = input(
|
|
156
|
+
this.iconSize = input(/* @ts-ignore */
|
|
157
|
+
...(ngDevMode ? [undefined, { debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
154
158
|
}
|
|
155
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
156
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
159
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
160
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: SkyIconComponent, isStandalone: false, selector: "sky-icon", inputs: { iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: false, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<sky-icon-svg\n [iconName]=\"iconName\"\n [iconSize]=\"iconSize()\"\n [iconVariant]=\"variant\"\n [attr.data-sky-icon]=\"iconName\"\n [attr.data-sky-icon-variant]=\"variant\"\n/>\n", styles: [":host{display:inline-flex}i{display:inherit}\n"], dependencies: [{ kind: "component", type: SkyIconSvgComponent, selector: "sky-icon-svg", inputs: ["iconName", "iconSize", "iconVariant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
157
161
|
}
|
|
158
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
162
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyIconComponent, decorators: [{
|
|
159
163
|
type: Component,
|
|
160
164
|
args: [{ selector: 'sky-icon', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<sky-icon-svg\n [iconName]=\"iconName\"\n [iconSize]=\"iconSize()\"\n [iconVariant]=\"variant\"\n [attr.data-sky-icon]=\"iconName\"\n [attr.data-sky-icon-variant]=\"variant\"\n/>\n", styles: [":host{display:inline-flex}i{display:inherit}\n"] }]
|
|
161
165
|
}], propDecorators: { iconName: [{
|
|
@@ -166,11 +170,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
166
170
|
}], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }] } });
|
|
167
171
|
|
|
168
172
|
class SkyIconModule {
|
|
169
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
170
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
171
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
173
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
174
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkyIconModule, declarations: [SkyIconComponent], imports: [CommonModule, SkyIconSvgComponent], exports: [SkyIconComponent] }); }
|
|
175
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyIconModule, imports: [CommonModule] }); }
|
|
172
176
|
}
|
|
173
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
177
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyIconModule, decorators: [{
|
|
174
178
|
type: NgModule,
|
|
175
179
|
args: [{
|
|
176
180
|
declarations: [SkyIconComponent],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skyux-icon.mjs","sources":["../../../../../libs/components/icon/src/lib/modules/icon/icon-svg-resolver.service.ts","../../../../../libs/components/icon/src/lib/modules/icon/icon-svg.component.ts","../../../../../libs/components/icon/src/lib/modules/icon/icon-svg.component.html","../../../../../libs/components/icon/src/lib/modules/icon/icon.component.ts","../../../../../libs/components/icon/src/lib/modules/icon/icon.component.html","../../../../../libs/components/icon/src/lib/modules/icon/icon.module.ts","../../../../../libs/components/icon/src/skyux-icon.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\nimport { SkyIconVariantType } from './types/icon-variant-type';\n\nasync function getIconMap(): Promise<Map<string, number[]>> {\n const response = await fetch(\n `https://sky.blackbaudcdn.net/static/skyux-icons/10/assets/svg/skyux-icons.svg`,\n );\n\n /* istanbul ignore next */\n if (!response.ok) {\n throw new Error('Icon sprite could not be loaded.');\n }\n\n const markup = await response.text();\n\n document.body.insertAdjacentHTML('afterbegin', markup);\n return buildIconMap();\n}\n\nfunction buildIconMap(): Map<string, number[]> {\n const iconMap = Array.from<SVGSymbolElement>(\n document.querySelectorAll('#sky-icon-svg-sprite symbol'),\n ).reduce((map, el) => {\n const idParts = el.id.split('-');\n\n // Construct the icon name by removing `sky-i-` from the beginning\n // and `-<size>-<variant>` from the end.\n const name = idParts.slice(2, idParts.length - 2).join('-');\n\n let sizes = map.get(name);\n\n if (!sizes) {\n sizes = [];\n map.set(name, sizes);\n }\n\n // The penultimate segment is the size for which the icon has\n // been optimized.\n sizes.push(+idParts[idParts.length - 2]);\n\n return map;\n }, new Map<string, number[]>());\n\n // Sort all the sizes for later comparison.\n for (const id of iconMap.keys()) {\n // Dedupe and sort the icon sizes.\n iconMap.set(id, [...new Set(iconMap.get(id))].sort());\n }\n\n return iconMap;\n}\n\nfunction getNearestSize(\n iconMap: Map<string, number[]>,\n name: string,\n pixelSize: number,\n): number | undefined {\n const sizes = iconMap.get(name);\n\n if (sizes) {\n let nearestSizeUnder = -Infinity;\n let nearestSizeOver = Infinity;\n\n for (const availableSize of sizes) {\n if (availableSize === pixelSize) {\n return pixelSize;\n } else if (availableSize < pixelSize) {\n nearestSizeUnder = availableSize;\n } else {\n nearestSizeOver = availableSize;\n break;\n }\n }\n\n const underDiff = Math.abs(pixelSize - nearestSizeUnder);\n const overDiff = Math.abs(pixelSize - nearestSizeOver);\n\n return isNaN(overDiff) || underDiff < overDiff\n ? nearestSizeUnder\n : nearestSizeOver;\n }\n\n return undefined;\n}\n\nlet iconMapPromise: Promise<Map<string, number[]>> | undefined;\n\n/**\n * @internal\n */\n@Injectable({\n providedIn: 'root',\n})\nexport class SkyIconSvgResolverService {\n public async resolveHref(\n name: string,\n pixelSize = 16,\n variant: SkyIconVariantType = 'line',\n ): Promise<string> {\n if (!iconMapPromise) {\n iconMapPromise = getIconMap();\n }\n\n const iconMap = await iconMapPromise;\n\n let href = `#sky-i-${name}`;\n\n // Find the icon with the optimal size nearest to the requested size.\n const nearestSize = getNearestSize(iconMap, name, pixelSize);\n\n if (!nearestSize) {\n throw new Error(`Icon with name '${name}' was not found.`);\n }\n\n href = `${href}-${nearestSize}-${variant}`;\n\n return href;\n }\n\n public refreshIconMap(): void {\n iconMapPromise = Promise.resolve(buildIconMap());\n }\n\n public resetIconMap(): void {\n iconMapPromise = undefined;\n }\n}\n","import { Component, computed, inject, input } from '@angular/core';\nimport { toObservable, toSignal } from '@angular/core/rxjs-interop';\nimport { SkyThemeComponentClassDirective } from '@skyux/theme';\n\nimport { catchError, of, switchMap } from 'rxjs';\n\nimport { SkyIconSvgResolverService } from './icon-svg-resolver.service';\nimport { SkyIconSize } from './types/icon-size';\nimport { SkyIconVariantType } from './types/icon-variant-type';\n\nconst SIZE_BASE = 16;\n\nconst FIXED_SIZES = new Map([\n ['xxxs', 4],\n ['xxs', 8],\n ['xs', 12],\n ['s', SIZE_BASE],\n ['m', 20],\n ['l', 24],\n ['xl', 32],\n ['xxl', 40],\n ['xxxl', 48],\n]);\n\nfunction defaultSize(value: SkyIconSize | undefined): SkyIconSize {\n return value ?? 'm';\n}\n\n/**\n * @internal\n */\n@Component({\n selector: 'sky-icon-svg',\n templateUrl: './icon-svg.component.html',\n styleUrls: ['./icon-svg.component.scss'],\n host: {\n '[class]': '\"sky-icon-svg-\" + iconSize()',\n },\n hostDirectives: [SkyThemeComponentClassDirective],\n})\nexport class SkyIconSvgComponent {\n readonly #resolverSvc = inject(SkyIconSvgResolverService);\n\n public readonly iconName = input.required<string>();\n public readonly iconSize = input<SkyIconSize, SkyIconSize | undefined>('m', {\n transform: defaultSize,\n });\n public readonly iconVariant = input<SkyIconVariantType>();\n\n readonly #iconInfo = computed(() => {\n return {\n src: this.iconName(),\n iconSize: this.iconSize(),\n variant: this.iconVariant(),\n };\n });\n\n protected readonly iconHref = toSignal(\n toObservable(this.#iconInfo).pipe(\n switchMap((info) =>\n this.#resolverSvc.resolveHref(\n info.src,\n FIXED_SIZES.get(info.iconSize),\n info.variant,\n ),\n ),\n catchError(() => of('')),\n ),\n );\n}\n","<div class=\"sky-icon-svg-container\">\n <svg\n aria-hidden=\"true\"\n class=\"sky-icon-svg-img\"\n [attr.data-sky-icon]=\"iconName()\"\n [attr.data-sky-icon-variant]=\"iconVariant()\"\n >\n <use [attr.xlink:href]=\"iconHref()\" />\n </svg>\n</div>\n","import {\n ChangeDetectionStrategy,\n Component,\n Input,\n input,\n} from '@angular/core';\n\nimport { SkyIconSize } from './types/icon-size';\nimport { SkyIconVariantType } from './types/icon-variant-type';\n\n@Component({\n selector: 'sky-icon',\n templateUrl: './icon.component.html',\n styleUrls: ['./icon.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class SkyIconComponent {\n /**\n * The name of the Blackbaud SVG icon to display.\n */\n @Input({ required: true })\n public iconName!: string;\n\n /**\n * The icon variant. If the variant doesn't exist for the\n * specified icon, the normal icon is displayed. This property only applies when using SKY UX icons.\n */\n @Input()\n public variant: SkyIconVariantType | undefined;\n\n /**\n * The icon size. Size is independent of font size.\n * @default \"m\"\n */\n public readonly iconSize = input<SkyIconSize | undefined>();\n}\n","<sky-icon-svg\n [iconName]=\"iconName\"\n [iconSize]=\"iconSize()\"\n [iconVariant]=\"variant\"\n [attr.data-sky-icon]=\"iconName\"\n [attr.data-sky-icon-variant]=\"variant\"\n/>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { SkyIconSvgComponent } from './icon-svg.component';\nimport { SkyIconComponent } from './icon.component';\n\n@NgModule({\n declarations: [SkyIconComponent],\n imports: [CommonModule, SkyIconSvgComponent],\n exports: [SkyIconComponent],\n})\nexport class SkyIconModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.SkyIconSvgComponent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"skyux-icon.mjs","sources":["../../../../../libs/components/icon/src/lib/modules/icon/icon-svg-resolver.service.ts","../../../../../libs/components/icon/src/lib/modules/icon/icon-svg.component.ts","../../../../../libs/components/icon/src/lib/modules/icon/icon-svg.component.html","../../../../../libs/components/icon/src/lib/modules/icon/icon.component.ts","../../../../../libs/components/icon/src/lib/modules/icon/icon.component.html","../../../../../libs/components/icon/src/lib/modules/icon/icon.module.ts","../../../../../libs/components/icon/src/skyux-icon.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\nimport { SkyIconVariantType } from './types/icon-variant-type';\n\nasync function getIconMap(): Promise<Map<string, number[]>> {\n const response = await fetch(\n `https://sky.blackbaudcdn.net/static/skyux-icons/10/assets/svg/skyux-icons.svg`,\n );\n\n /* istanbul ignore next */\n if (!response.ok) {\n throw new Error('Icon sprite could not be loaded.');\n }\n\n const markup = await response.text();\n\n document.body.insertAdjacentHTML('afterbegin', markup);\n return buildIconMap();\n}\n\nfunction buildIconMap(): Map<string, number[]> {\n const iconMap = Array.from<SVGSymbolElement>(\n document.querySelectorAll('#sky-icon-svg-sprite symbol'),\n ).reduce((map, el) => {\n const idParts = el.id.split('-');\n\n // Construct the icon name by removing `sky-i-` from the beginning\n // and `-<size>-<variant>` from the end.\n const name = idParts.slice(2, idParts.length - 2).join('-');\n\n let sizes = map.get(name);\n\n if (!sizes) {\n sizes = [];\n map.set(name, sizes);\n }\n\n // The penultimate segment is the size for which the icon has\n // been optimized.\n sizes.push(+idParts[idParts.length - 2]);\n\n return map;\n }, new Map<string, number[]>());\n\n // Sort all the sizes for later comparison.\n for (const id of iconMap.keys()) {\n // Dedupe and sort the icon sizes.\n iconMap.set(id, [...new Set(iconMap.get(id))].sort());\n }\n\n return iconMap;\n}\n\nfunction getNearestSize(\n iconMap: Map<string, number[]>,\n name: string,\n pixelSize: number,\n): number | undefined {\n const sizes = iconMap.get(name);\n\n if (sizes) {\n let nearestSizeUnder = -Infinity;\n let nearestSizeOver = Infinity;\n\n for (const availableSize of sizes) {\n if (availableSize === pixelSize) {\n return pixelSize;\n } else if (availableSize < pixelSize) {\n nearestSizeUnder = availableSize;\n } else {\n nearestSizeOver = availableSize;\n break;\n }\n }\n\n const underDiff = Math.abs(pixelSize - nearestSizeUnder);\n const overDiff = Math.abs(pixelSize - nearestSizeOver);\n\n return isNaN(overDiff) || underDiff < overDiff\n ? nearestSizeUnder\n : nearestSizeOver;\n }\n\n return undefined;\n}\n\nlet iconMapPromise: Promise<Map<string, number[]>> | undefined;\n\n/**\n * @internal\n */\n@Injectable({\n providedIn: 'root',\n})\nexport class SkyIconSvgResolverService {\n public async resolveHref(\n name: string,\n pixelSize = 16,\n variant: SkyIconVariantType = 'line',\n ): Promise<string> {\n if (!iconMapPromise) {\n iconMapPromise = getIconMap();\n }\n\n const iconMap = await iconMapPromise;\n\n let href = `#sky-i-${name}`;\n\n // Find the icon with the optimal size nearest to the requested size.\n const nearestSize = getNearestSize(iconMap, name, pixelSize);\n\n if (!nearestSize) {\n throw new Error(`Icon with name '${name}' was not found.`);\n }\n\n href = `${href}-${nearestSize}-${variant}`;\n\n return href;\n }\n\n public refreshIconMap(): void {\n iconMapPromise = Promise.resolve(buildIconMap());\n }\n\n public resetIconMap(): void {\n iconMapPromise = undefined;\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n inject,\n input,\n} from '@angular/core';\nimport { toObservable, toSignal } from '@angular/core/rxjs-interop';\nimport { SkyThemeComponentClassDirective } from '@skyux/theme';\n\nimport { catchError, of, switchMap } from 'rxjs';\n\nimport { SkyIconSvgResolverService } from './icon-svg-resolver.service';\nimport { SkyIconSize } from './types/icon-size';\nimport { SkyIconVariantType } from './types/icon-variant-type';\n\nconst SIZE_BASE = 16;\n\nconst FIXED_SIZES = new Map([\n ['xxxs', 4],\n ['xxs', 8],\n ['xs', 12],\n ['s', SIZE_BASE],\n ['m', 20],\n ['l', 24],\n ['xl', 32],\n ['xxl', 40],\n ['xxxl', 48],\n]);\n\nfunction defaultSize(value: SkyIconSize | undefined): SkyIconSize {\n return value ?? 'm';\n}\n\n/**\n * @internal\n */\n@Component({\n selector: 'sky-icon-svg',\n templateUrl: './icon-svg.component.html',\n styleUrls: ['./icon-svg.component.scss'],\n host: {\n '[class]': '\"sky-icon-svg-\" + iconSize()',\n },\n changeDetection: ChangeDetectionStrategy.Eager,\n hostDirectives: [SkyThemeComponentClassDirective],\n})\nexport class SkyIconSvgComponent {\n readonly #resolverSvc = inject(SkyIconSvgResolverService);\n\n public readonly iconName = input.required<string>();\n public readonly iconSize = input<SkyIconSize, SkyIconSize | undefined>('m', {\n transform: defaultSize,\n });\n public readonly iconVariant = input<SkyIconVariantType>();\n\n readonly #iconInfo = computed(() => {\n return {\n src: this.iconName(),\n iconSize: this.iconSize(),\n variant: this.iconVariant(),\n };\n });\n\n protected readonly iconHref = toSignal(\n toObservable(this.#iconInfo).pipe(\n switchMap((info) =>\n this.#resolverSvc.resolveHref(\n info.src,\n FIXED_SIZES.get(info.iconSize),\n info.variant,\n ),\n ),\n catchError(() => of('')),\n ),\n );\n}\n","<div class=\"sky-icon-svg-container\">\n <svg\n aria-hidden=\"true\"\n class=\"sky-icon-svg-img\"\n [attr.data-sky-icon]=\"iconName()\"\n [attr.data-sky-icon-variant]=\"iconVariant()\"\n >\n <use [attr.xlink:href]=\"iconHref()\" />\n </svg>\n</div>\n","import {\n ChangeDetectionStrategy,\n Component,\n Input,\n input,\n} from '@angular/core';\n\nimport { SkyIconSize } from './types/icon-size';\nimport { SkyIconVariantType } from './types/icon-variant-type';\n\n@Component({\n selector: 'sky-icon',\n templateUrl: './icon.component.html',\n styleUrls: ['./icon.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class SkyIconComponent {\n /**\n * The name of the Blackbaud SVG icon to display.\n */\n @Input({ required: true })\n public iconName!: string;\n\n /**\n * The icon variant. If the variant doesn't exist for the\n * specified icon, the normal icon is displayed. This property only applies when using SKY UX icons.\n */\n @Input()\n public variant: SkyIconVariantType | undefined;\n\n /**\n * The icon size. Size is independent of font size.\n * @default \"m\"\n */\n public readonly iconSize = input<SkyIconSize | undefined>();\n}\n","<sky-icon-svg\n [iconName]=\"iconName\"\n [iconSize]=\"iconSize()\"\n [iconVariant]=\"variant\"\n [attr.data-sky-icon]=\"iconName\"\n [attr.data-sky-icon-variant]=\"variant\"\n/>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { SkyIconSvgComponent } from './icon-svg.component';\nimport { SkyIconComponent } from './icon.component';\n\n@NgModule({\n declarations: [SkyIconComponent],\n imports: [CommonModule, SkyIconSvgComponent],\n exports: [SkyIconComponent],\n})\nexport class SkyIconModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.SkyIconSvgComponent"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/icon",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.0.0-alpha.0",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -16,11 +16,11 @@
|
|
|
16
16
|
},
|
|
17
17
|
"homepage": "https://github.com/blackbaud/skyux#readme",
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
"@angular/cdk": "^
|
|
20
|
-
"@angular/common": "^
|
|
21
|
-
"@angular/core": "^
|
|
22
|
-
"@skyux/core": "
|
|
23
|
-
"@skyux/theme": "
|
|
19
|
+
"@angular/cdk": "^22.0.1",
|
|
20
|
+
"@angular/common": "^22.0.1",
|
|
21
|
+
"@angular/core": "^22.0.1",
|
|
22
|
+
"@skyux/core": "15.0.0-alpha.0",
|
|
23
|
+
"@skyux/theme": "15.0.0-alpha.0"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"tslib": "^2.8.1"
|