@skyux/avatar 15.0.0-alpha.4 → 15.0.0-alpha.6
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.
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { By } from '@angular/platform-browser';
|
|
2
|
-
import { SkyAppTestUtility } from '@skyux
|
|
3
|
-
import { SkyComponentHarness, SkyHarnessUtility } from '@skyux/core/testing';
|
|
2
|
+
import { SkyAppTestUtility, SkyComponentHarness, SkyHarnessUtility } from '@skyux/core/testing';
|
|
4
3
|
import { SkyErrorModalHarness } from '@skyux/errors/testing';
|
|
5
4
|
import { SkyFileDropHarness } from '@skyux/forms/testing';
|
|
6
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skyux-avatar-testing.mjs","sources":["../../../../../libs/components/avatar/testing/src/legacy/avatar-fixture.ts","../../../../../libs/components/avatar/testing/src/modules/avatar/avatar-harness.ts","../../../../../libs/components/avatar/testing/src/skyux-avatar-testing.ts"],"sourcesContent":["import { DebugElement } from '@angular/core';\nimport { ComponentFixture } from '@angular/core/testing';\nimport { By } from '@angular/platform-browser';\nimport { SkyAppTestUtility } from '@skyux
|
|
1
|
+
{"version":3,"file":"skyux-avatar-testing.mjs","sources":["../../../../../libs/components/avatar/testing/src/legacy/avatar-fixture.ts","../../../../../libs/components/avatar/testing/src/modules/avatar/avatar-harness.ts","../../../../../libs/components/avatar/testing/src/skyux-avatar-testing.ts"],"sourcesContent":["import { DebugElement } from '@angular/core';\nimport { ComponentFixture } from '@angular/core/testing';\nimport { By } from '@angular/platform-browser';\nimport { SkyAppTestUtility } from '@skyux/core/testing';\n\n/**\n * Allows interaction with a SKY UX avatar component.\n * @deprecated Use `SkyAvatarHarness` instead.\n * @internal\n */\nexport class SkyAvatarFixture {\n /**\n * The initials displayed when no image URL is specified.\n */\n public get initials(): string | undefined {\n const initialsEl = this.#debugEl.query(By.css('.sky-avatar-initials'));\n\n if (SkyAppTestUtility.isVisible(initialsEl)) {\n return SkyAppTestUtility.getText(\n initialsEl.query(By.css('.sky-avatar-initials-inner')),\n );\n }\n\n return undefined;\n }\n\n /**\n * The avatar's current image URL.\n */\n public get imageUrl(): string | undefined {\n const imageEl = this.#debugEl.query(By.css('.sky-avatar-image'));\n\n if (SkyAppTestUtility.isVisible(imageEl)) {\n return SkyAppTestUtility.getBackgroundImageUrl(imageEl);\n }\n\n return undefined;\n }\n\n #debugEl: DebugElement;\n\n constructor(fixture: ComponentFixture<any>, skyTestId: string) {\n this.#debugEl = SkyAppTestUtility.getDebugElementByTestId(\n fixture,\n skyTestId,\n 'sky-avatar',\n );\n }\n}\n","import { HarnessPredicate, TestElement } from '@angular/cdk/testing';\nimport { SkyComponentHarness, SkyHarnessUtility } from '@skyux/core/testing';\nimport { SkyErrorModalHarness } from '@skyux/errors/testing';\nimport { SkyFileDropHarness } from '@skyux/forms/testing';\n\nimport { SkyAvatarHarnessFilters } from './avatar-harness-filters';\n\nconst WAIT_INTERVAL = 10;\nconst WAIT_TIMEOUT = 3000;\n\nasync function isHidden(el: TestElement): Promise<boolean> {\n return (await el.getCssValue('display')) === 'none';\n}\n\n/**\n * Harness for interacting with an avatar component in tests.\n */\nexport class SkyAvatarHarness extends SkyComponentHarness {\n /**\n * @internal\n */\n public static hostSelector = 'sky-avatar';\n\n #documentRootLocator = this.documentRootLocatorFactory();\n\n #getFileDrop = this.locatorForOptional(SkyFileDropHarness);\n #errorModal =\n this.#documentRootLocator.locatorForOptional(SkyErrorModalHarness);\n\n /**\n * Gets a `HarnessPredicate` that can be used to search for a\n * `SkyAvatarHarness` that meets certain criteria.\n */\n public static with(\n filters: SkyAvatarHarnessFilters,\n ): HarnessPredicate<SkyAvatarHarness> {\n return SkyAvatarHarness.getDataSkyIdPredicate(filters);\n }\n\n /**\n * Gets the initials displayed when no image URL is specified.\n */\n public async getInitials(): Promise<string | undefined> {\n const initialsEl = await this.locatorFor('.sky-avatar-initials')();\n\n if (await isHidden(initialsEl)) {\n return undefined;\n }\n\n return await initialsEl.text();\n }\n\n /**\n * Gets the avatar's current image URL or Blob.\n */\n public async getSrc(): Promise<string | Blob | undefined> {\n const url = await this.#getImageUrl();\n\n if (url?.startsWith('blob:')) {\n return await (await fetch(url)).blob();\n }\n\n return url;\n }\n\n /**\n * Gets whether users can change the image.\n */\n public async getCanChange(): Promise<boolean> {\n return !!(await this.#getFileDrop());\n }\n\n /**\n * Simulates the user selecting or dropping an image onto the component.\n */\n public async dropAvatarFile(\n file: File,\n waitForChange?: boolean,\n ): Promise<void> {\n const fileDrop = await this.#getFileDrop();\n\n if (!fileDrop) {\n throw new Error(\n 'A new avatar cannot be selected because the canChange input is not set to true.',\n );\n }\n\n if (waitForChange) {\n await this.#dropAndWait(fileDrop, file);\n } else {\n await fileDrop.loadFile(file);\n }\n }\n\n /**\n * Gets whether an error indicating an invalid file type is displayed.\n */\n public async hasFileTypeError(): Promise<boolean> {\n const errorModal = await this.#errorModal();\n\n return !!(await errorModal?.getTitle())?.includes('File is not an image.');\n }\n\n /**\n * Gets whether an error indicating an invalid file size is displayed.\n */\n public async hasMaxSizeError(): Promise<boolean> {\n const errorModal = await this.#errorModal();\n\n return !!(await errorModal?.getTitle())?.includes('File is too large.');\n }\n\n /**\n * Closes the currently displayed error.\n */\n public async closeError(): Promise<void> {\n const errorModal = await this.#errorModal();\n\n if (!errorModal) {\n throw new Error('No error is currently displayed.');\n }\n\n await errorModal.clickCloseButton();\n }\n\n async #getImageUrl(): Promise<string | undefined> {\n const imageEl = await this.locatorFor('.sky-avatar-image')();\n\n if (await isHidden(imageEl)) {\n return undefined;\n }\n\n return await SkyHarnessUtility.getBackgroundImageUrl(imageEl);\n }\n\n async #dropAndWait(fileDrop: SkyFileDropHarness, file: File): Promise<void> {\n const currentUrl = await this.#getImageUrl();\n\n await fileDrop.loadFile(file);\n\n return await new Promise<void>((resolve, reject) => {\n const checkForFileChange = async (attempts: number): Promise<void> => {\n if ((await this.#getImageUrl()) !== currentUrl) {\n resolve();\n } else if (attempts * WAIT_INTERVAL < WAIT_TIMEOUT) {\n setTimeout(\n () => void checkForFileChange(attempts + 1),\n WAIT_INTERVAL,\n );\n } else {\n reject(\n new Error(\n 'The avatar src did not change within the expected time span',\n ),\n );\n }\n };\n\n void checkForFileChange(0);\n });\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -64,11 +64,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
64
64
|
* Import into any component library module that needs to use resource strings.
|
|
65
65
|
*/
|
|
66
66
|
class SkyAvatarResourcesModule {
|
|
67
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
68
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
69
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
67
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyAvatarResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
68
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyAvatarResourcesModule, exports: [SkyI18nModule] }); }
|
|
69
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyAvatarResourcesModule, imports: [SkyI18nModule] }); }
|
|
70
70
|
}
|
|
71
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
71
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyAvatarResourcesModule, decorators: [{
|
|
72
72
|
type: NgModule,
|
|
73
73
|
args: [{
|
|
74
74
|
exports: [SkyI18nModule],
|
|
@@ -113,10 +113,10 @@ class SkyAvatarAdapterService {
|
|
|
113
113
|
this.#blobUrl = undefined;
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
117
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
116
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyAvatarAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
117
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyAvatarAdapterService }); }
|
|
118
118
|
}
|
|
119
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyAvatarAdapterService, decorators: [{
|
|
120
120
|
type: Injectable
|
|
121
121
|
}] });
|
|
122
122
|
|
|
@@ -185,10 +185,10 @@ class SkyAvatarInnerComponent {
|
|
|
185
185
|
this.#adapter.updateImage(this.#elementRef, this.src);
|
|
186
186
|
}
|
|
187
187
|
}
|
|
188
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
189
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SkyAvatarInnerComponent, isStandalone: true, selector: "sky-avatar-inner", inputs: { src: "src", name: "name", size: "size" }, providers: [SkyAvatarAdapterService], ngImport: i0, template: "<div\n class=\"sky-elevation-1 sky-avatar-wrapper\"\n [ngClass]=\"'sky-avatar-wrapper-size-' + size\"\n>\n <div class=\"sky-avatar-image\" [hidden]=\"!src\"></div>\n @if (src) {\n <div class=\"sky-screen-reader-only\">\n {{ 'skyux_avatar_inner_description' | skyLibResources: name }}\n </div>\n }\n <div\n class=\"sky-avatar-initials\"\n [hidden]=\"src || !name\"\n [ngClass]=\"'sky-avatar-colors-' + (colorIndex + 1)\"\n >\n @if (size === 'small') {\n <div\n class=\"sky-avatar-initials-inner\"\n [skyThemeClass]=\"{\n 'sky-font-body-sm': 'modern'\n }\"\n >\n {{ initials }}\n </div>\n } @else if (size === 'medium') {\n <div\n class=\"sky-avatar-initials-inner\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n >\n {{ initials }}\n </div>\n } @else if (size === 'large') {\n <div\n class=\"sky-avatar-initials-inner\"\n [skyThemeClass]=\"{\n 'sky-font-display-2': 'modern'\n }\"\n >\n {{ initials }}\n </div>\n }\n </div>\n</div>\n", styles: [".sky-avatar:not(.sky-theme-modern *){--sky-override-avatar-initials-border-radius: initial;--sky-override-avatar-initials-font-size: 50px;--sky-override-avatar-initials-font-size-md: 32.5px;--sky-override-avatar-initials-font-size-sm: 16px;--sky-override-avatar-initials-height: 100px;--sky-override-avatar-initials-height-md: 65px;--sky-override-avatar-initials-height-sm: 32px;--sky-override-avatar-initials-width: 100px;--sky-override-avatar-initials-width-md: 65px;--sky-override-avatar-initials-width-sm: 32px;--sky-override-avatar-wrapper-background-color: transparent;--sky-override-avatar-wrapper-border: solid 2px transparent;--sky-override-avatar-wrapper-border-radius: 50%;--sky-override-avatar-wrapper-drop-accept-border-color: #72bf44;--sky-override-avatar-wrapper-drop-border-width: 2px;--sky-override-avatar-wrapper-drop-border-active: solid 2px transparent;--sky-override-avatar-wrapper-drop-border-hover: solid 2px transparent;--sky-override-avatar-wrapper-drop-box-shadow-focus: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-avatar-wrapper-drop-reject-border-color: #ef4044;--sky-override-avatar-wrapper-height: 104px;--sky-override-avatar-wrapper-height-md: 69px;--sky-override-avatar-wrapper-height-sm: 36px;--sky-override-avatar-wrapper-left: -2px;--sky-override-avatar-wrapper-padding: 0;--sky-override-avatar-wrapper-padding-md: 0;--sky-override-avatar-wrapper-padding-sm: 0;--sky-override-avatar-wrapper-top: -2px;--sky-override-avatar-wrapper-width: 104px;--sky-override-avatar-wrapper-width-md: 69px;--sky-override-avatar-wrapper-width-sm: 36px}.sky-avatar-colors-1{background-color:var(--sky-category-color-green)}.sky-avatar-colors-2{background-color:var(--sky-category-color-teal)}.sky-avatar-colors-3{background-color:var(--sky-category-color-purple)}.sky-avatar-colors-4{background-color:var(--sky-category-color-orange)}.sky-avatar-colors-5{background-color:var(--sky-category-color-blue)}.sky-avatar-colors-6{background-color:var(--sky-category-color-yellow)}.sky-avatar-colors-7{background-color:var(--sky-category-color-red)}.sky-avatar-wrapper{height:var(--sky-override-avatar-wrapper-height, var(--sky-size-avatar-l));width:var(--sky-override-avatar-wrapper-width, var(--sky-size-avatar-l));background-color:var(--sky-override-avatar-wrapper-background-color, var(--sky-color-background-thumbnail_matte));padding:var(--sky-override-avatar-wrapper-padding, var(--sky-space-inset-thumbnail_matte-l));border:var(--sky-override-avatar-wrapper-border, none);border-radius:var(--sky-override-avatar-wrapper-border-radius, var(--sky-border-radius-round));overflow:hidden;position:relative;top:var(--sky-override-avatar-wrapper-top, 0);left:var(--sky-override-avatar-wrapper-left, 0)}.sky-avatar-image,.sky-avatar-initials{height:var(--sky-override-avatar-initials-height, calc(var(--sky-size-avatar-l) - var(--sky-space-inset-thumbnail_matte-l) * 2));width:var(--sky-override-avatar-initials-width, calc(var(--sky-size-avatar-l) - var(--sky-space-inset-thumbnail_matte-l) * 2));background-position:50%;background-size:cover;border-radius:var(--sky-override-avatar-initials-border-radius, var(--sky-border-radius-round));display:flex;align-items:center;justify-content:center}.sky-avatar-initials{font-size:var(--sky-override-avatar-initials-font-size, initial)}.sky-avatar-initials-inner{color:var(--sky-text-color-default);cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sky-avatar-wrapper-size-medium{height:var(--sky-override-avatar-wrapper-height-md, var(--sky-size-avatar-m));width:var(--sky-override-avatar-wrapper-width-md, var(--sky-size-avatar-m));padding:var(--sky-override-avatar-wrapper-padding-md, var(--sky-space-inset-thumbnail_matte-m))}.sky-avatar-wrapper-size-medium .sky-avatar-image,.sky-avatar-wrapper-size-medium .sky-avatar-initials{height:var(--sky-override-avatar-initials-height-md, calc(var(--sky-size-avatar-m) - var(--sky-space-inset-thumbnail_matte-m) * 2));width:var(--sky-override-avatar-initials-width-md, calc(var(--sky-size-avatar-m) - var(--sky-space-inset-thumbnail_matte-m) * 2))}.sky-avatar-wrapper-size-medium .sky-avatar-initials{font-size:var(--sky-override-avatar-initials-font-size-md, initial)}.sky-avatar-wrapper-size-small{height:var(--sky-override-avatar-wrapper-height-sm, var(--sky-size-avatar-s));width:var(--sky-override-avatar-wrapper-width-sm, var(--sky-size-avatar-s));padding:var(--sky-override-avatar-wrapper-padding-sm, var(--sky-space-inset-thumbnail_matte-s))}.sky-avatar-wrapper-size-small .sky-avatar-image,.sky-avatar-wrapper-size-small .sky-avatar-initials{height:var(--sky-override-avatar-initials-height-sm, calc(var(--sky-size-avatar-s) - var(--sky-space-inset-thumbnail_matte-s) * 2));width:var(--sky-override-avatar-initials-width-sm, calc(var(--sky-size-avatar-s) - var(--sky-space-inset-thumbnail_matte-s) * 2))}.sky-avatar-wrapper-size-small .sky-avatar-initials{font-size:var(--sky-override-avatar-initials-font-size-sm, initial)}.sky-file-drop .sky-avatar-wrapper{cursor:pointer}.sky-file-drop-accept .sky-avatar-wrapper,.sky-file-drop-reject .sky-avatar-wrapper{border-style:dashed}.sky-file-drop-accept .sky-avatar-wrapper{border-color:var(--sky-override-avatar-wrapper-drop-accept-border-color, var(--sky-color-border-success))}.sky-file-drop-reject .sky-avatar-wrapper{border-color:var(--sky-override-avatar-wrapper-drop-reject-border-color, var(--sky-color-border-danger))}.sky-file-drop-accept .sky-avatar-wrapper,.sky-file-drop-reject .sky-avatar-wrapper{border-width:var(--sky-override-avatar-wrapper-drop-border-width, var(--sky-border-width-input-hover));padding:calc(var(--sky-override-avatar-wrapper-padding, var(--sky-space-inset-thumbnail_matte-l)) - var(--sky-override-avatar-wrapper-drop-border-width, var(--sky-border-width-input-hover)))}.sky-file-drop-accept .sky-avatar-wrapper-size-medium,.sky-file-drop-reject .sky-avatar-wrapper-size-medium{padding:calc(var(--sky-override-avatar-wrapper-padding-md, var(--sky-space-inset-thumbnail_matte-m)) - var(--sky-override-avatar-wrapper-drop-border-width, var(--sky-border-width-input-hover)))}.sky-file-drop-accept .sky-avatar-wrapper-size-small,.sky-file-drop-reject .sky-avatar-wrapper-size-small{padding:calc(var(--sky-override-avatar-wrapper-padding-sm, var(--sky-space-inset-thumbnail_matte-s)) - var(--sky-override-avatar-wrapper-drop-border-width, var(--sky-border-width-input-hover)))}sky-file-drop:hover .sky-avatar-wrapper{border:var(--sky-override-avatar-wrapper-drop-border-hover, var(--sky-border-width-input-hover) solid var(--sky-color-border-input-hover));padding:calc(var(--sky-override-avatar-wrapper-padding, var(--sky-space-inset-thumbnail_matte-l)) - var(--sky-border-width-input-hover))}sky-file-drop:hover .sky-avatar-wrapper.sky-avatar-wrapper-size-medium{padding:calc(var(--sky-override-avatar-wrapper-padding-md, var(--sky-space-inset-thumbnail_matte-m)) - var(--sky-border-width-input-hover))}sky-file-drop:hover .sky-avatar-wrapper.sky-avatar-wrapper-size-small{padding:calc(var(--sky-override-avatar-wrapper-padding-sm, var(--sky-space-inset-thumbnail_matte-s)) - var(--sky-border-width-input-hover))}sky-file-drop:active .sky-avatar-wrapper,sky-file-drop:focus-within .sky-avatar-wrapper{border:var(--sky-override-avatar-wrapper-drop-border-active, var(--sky-border-width-input-active) solid var(--sky-color-border-input-active));padding:calc(var(--sky-override-avatar-wrapper-padding, var(--sky-space-inset-thumbnail_matte-l)) - var(--sky-border-width-input-active))}sky-file-drop:active .sky-avatar-wrapper.sky-avatar-wrapper-size-medium,sky-file-drop:focus-within .sky-avatar-wrapper.sky-avatar-wrapper-size-medium{padding:calc(var(--sky-override-avatar-wrapper-padding-md, var(--sky-space-inset-thumbnail_matte-m)) - var(--sky-border-width-input-active))}sky-file-drop:active .sky-avatar-wrapper.sky-avatar-wrapper-size-small,sky-file-drop:focus-within .sky-avatar-wrapper.sky-avatar-wrapper-size-small{padding:calc(var(--sky-override-avatar-wrapper-padding-sm, var(--sky-space-inset-thumbnail_matte-s)) - var(--sky-border-width-input-active))}sky-file-drop:focus-within:not(:active) .sky-avatar-wrapper{box-shadow:var(--sky-override-avatar-wrapper-drop-box-shadow-focus, none)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
188
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyAvatarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
189
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyAvatarInnerComponent, isStandalone: true, selector: "sky-avatar-inner", inputs: { src: "src", name: "name", size: "size" }, providers: [SkyAvatarAdapterService], ngImport: i0, template: "<div\n class=\"sky-elevation-1 sky-avatar-wrapper\"\n [ngClass]=\"'sky-avatar-wrapper-size-' + size\"\n>\n <div class=\"sky-avatar-image\" [hidden]=\"!src\"></div>\n @if (src) {\n <div class=\"sky-screen-reader-only\">\n {{ 'skyux_avatar_inner_description' | skyLibResources: name }}\n </div>\n }\n <div\n class=\"sky-avatar-initials\"\n [hidden]=\"src || !name\"\n [ngClass]=\"'sky-avatar-colors-' + (colorIndex + 1)\"\n >\n @if (size === 'small') {\n <div\n class=\"sky-avatar-initials-inner\"\n [skyThemeClass]=\"{\n 'sky-font-body-sm': 'modern'\n }\"\n >\n {{ initials }}\n </div>\n } @else if (size === 'medium') {\n <div\n class=\"sky-avatar-initials-inner\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n >\n {{ initials }}\n </div>\n } @else if (size === 'large') {\n <div\n class=\"sky-avatar-initials-inner\"\n [skyThemeClass]=\"{\n 'sky-font-display-2': 'modern'\n }\"\n >\n {{ initials }}\n </div>\n }\n </div>\n</div>\n", styles: [".sky-avatar:not(.sky-theme-modern *){--sky-override-avatar-initials-border-radius: initial;--sky-override-avatar-initials-font-size: 50px;--sky-override-avatar-initials-font-size-md: 32.5px;--sky-override-avatar-initials-font-size-sm: 16px;--sky-override-avatar-initials-height: 100px;--sky-override-avatar-initials-height-md: 65px;--sky-override-avatar-initials-height-sm: 32px;--sky-override-avatar-initials-width: 100px;--sky-override-avatar-initials-width-md: 65px;--sky-override-avatar-initials-width-sm: 32px;--sky-override-avatar-wrapper-background-color: transparent;--sky-override-avatar-wrapper-border: solid 2px transparent;--sky-override-avatar-wrapper-border-radius: 50%;--sky-override-avatar-wrapper-drop-accept-border-color: #72bf44;--sky-override-avatar-wrapper-drop-border-width: 2px;--sky-override-avatar-wrapper-drop-border-active: solid 2px transparent;--sky-override-avatar-wrapper-drop-border-hover: solid 2px transparent;--sky-override-avatar-wrapper-drop-box-shadow-focus: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-avatar-wrapper-drop-reject-border-color: #ef4044;--sky-override-avatar-wrapper-height: 104px;--sky-override-avatar-wrapper-height-md: 69px;--sky-override-avatar-wrapper-height-sm: 36px;--sky-override-avatar-wrapper-left: -2px;--sky-override-avatar-wrapper-padding: 0;--sky-override-avatar-wrapper-padding-md: 0;--sky-override-avatar-wrapper-padding-sm: 0;--sky-override-avatar-wrapper-top: -2px;--sky-override-avatar-wrapper-width: 104px;--sky-override-avatar-wrapper-width-md: 69px;--sky-override-avatar-wrapper-width-sm: 36px}.sky-avatar-colors-1{background-color:var(--sky-category-color-green)}.sky-avatar-colors-2{background-color:var(--sky-category-color-teal)}.sky-avatar-colors-3{background-color:var(--sky-category-color-purple)}.sky-avatar-colors-4{background-color:var(--sky-category-color-orange)}.sky-avatar-colors-5{background-color:var(--sky-category-color-blue)}.sky-avatar-colors-6{background-color:var(--sky-category-color-yellow)}.sky-avatar-colors-7{background-color:var(--sky-category-color-red)}.sky-avatar-wrapper{height:var(--sky-override-avatar-wrapper-height, var(--sky-size-avatar-l));width:var(--sky-override-avatar-wrapper-width, var(--sky-size-avatar-l));background-color:var(--sky-override-avatar-wrapper-background-color, var(--sky-color-background-thumbnail_matte));padding:var(--sky-override-avatar-wrapper-padding, var(--sky-space-inset-thumbnail_matte-l));border:var(--sky-override-avatar-wrapper-border, none);border-radius:var(--sky-override-avatar-wrapper-border-radius, var(--sky-border-radius-round));overflow:hidden;position:relative;top:var(--sky-override-avatar-wrapper-top, 0);left:var(--sky-override-avatar-wrapper-left, 0)}.sky-avatar-image,.sky-avatar-initials{height:var(--sky-override-avatar-initials-height, calc(var(--sky-size-avatar-l) - var(--sky-space-inset-thumbnail_matte-l) * 2));width:var(--sky-override-avatar-initials-width, calc(var(--sky-size-avatar-l) - var(--sky-space-inset-thumbnail_matte-l) * 2));background-position:50%;background-size:cover;border-radius:var(--sky-override-avatar-initials-border-radius, var(--sky-border-radius-round));display:flex;align-items:center;justify-content:center}.sky-avatar-initials{font-size:var(--sky-override-avatar-initials-font-size, initial)}.sky-avatar-initials-inner{color:var(--sky-text-color-default);cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sky-avatar-wrapper-size-medium{height:var(--sky-override-avatar-wrapper-height-md, var(--sky-size-avatar-m));width:var(--sky-override-avatar-wrapper-width-md, var(--sky-size-avatar-m));padding:var(--sky-override-avatar-wrapper-padding-md, var(--sky-space-inset-thumbnail_matte-m))}.sky-avatar-wrapper-size-medium .sky-avatar-image,.sky-avatar-wrapper-size-medium .sky-avatar-initials{height:var(--sky-override-avatar-initials-height-md, calc(var(--sky-size-avatar-m) - var(--sky-space-inset-thumbnail_matte-m) * 2));width:var(--sky-override-avatar-initials-width-md, calc(var(--sky-size-avatar-m) - var(--sky-space-inset-thumbnail_matte-m) * 2))}.sky-avatar-wrapper-size-medium .sky-avatar-initials{font-size:var(--sky-override-avatar-initials-font-size-md, initial)}.sky-avatar-wrapper-size-small{height:var(--sky-override-avatar-wrapper-height-sm, var(--sky-size-avatar-s));width:var(--sky-override-avatar-wrapper-width-sm, var(--sky-size-avatar-s));padding:var(--sky-override-avatar-wrapper-padding-sm, var(--sky-space-inset-thumbnail_matte-s))}.sky-avatar-wrapper-size-small .sky-avatar-image,.sky-avatar-wrapper-size-small .sky-avatar-initials{height:var(--sky-override-avatar-initials-height-sm, calc(var(--sky-size-avatar-s) - var(--sky-space-inset-thumbnail_matte-s) * 2));width:var(--sky-override-avatar-initials-width-sm, calc(var(--sky-size-avatar-s) - var(--sky-space-inset-thumbnail_matte-s) * 2))}.sky-avatar-wrapper-size-small .sky-avatar-initials{font-size:var(--sky-override-avatar-initials-font-size-sm, initial)}.sky-file-drop .sky-avatar-wrapper{cursor:pointer}.sky-file-drop-accept .sky-avatar-wrapper,.sky-file-drop-reject .sky-avatar-wrapper{border-style:dashed}.sky-file-drop-accept .sky-avatar-wrapper{border-color:var(--sky-override-avatar-wrapper-drop-accept-border-color, var(--sky-color-border-success))}.sky-file-drop-reject .sky-avatar-wrapper{border-color:var(--sky-override-avatar-wrapper-drop-reject-border-color, var(--sky-color-border-danger))}.sky-file-drop-accept .sky-avatar-wrapper,.sky-file-drop-reject .sky-avatar-wrapper{border-width:var(--sky-override-avatar-wrapper-drop-border-width, var(--sky-border-width-input-hover));padding:calc(var(--sky-override-avatar-wrapper-padding, var(--sky-space-inset-thumbnail_matte-l)) - var(--sky-override-avatar-wrapper-drop-border-width, var(--sky-border-width-input-hover)))}.sky-file-drop-accept .sky-avatar-wrapper-size-medium,.sky-file-drop-reject .sky-avatar-wrapper-size-medium{padding:calc(var(--sky-override-avatar-wrapper-padding-md, var(--sky-space-inset-thumbnail_matte-m)) - var(--sky-override-avatar-wrapper-drop-border-width, var(--sky-border-width-input-hover)))}.sky-file-drop-accept .sky-avatar-wrapper-size-small,.sky-file-drop-reject .sky-avatar-wrapper-size-small{padding:calc(var(--sky-override-avatar-wrapper-padding-sm, var(--sky-space-inset-thumbnail_matte-s)) - var(--sky-override-avatar-wrapper-drop-border-width, var(--sky-border-width-input-hover)))}sky-file-drop:hover .sky-avatar-wrapper{border:var(--sky-override-avatar-wrapper-drop-border-hover, var(--sky-border-width-input-hover) solid var(--sky-color-border-input-hover));padding:calc(var(--sky-override-avatar-wrapper-padding, var(--sky-space-inset-thumbnail_matte-l)) - var(--sky-border-width-input-hover))}sky-file-drop:hover .sky-avatar-wrapper.sky-avatar-wrapper-size-medium{padding:calc(var(--sky-override-avatar-wrapper-padding-md, var(--sky-space-inset-thumbnail_matte-m)) - var(--sky-border-width-input-hover))}sky-file-drop:hover .sky-avatar-wrapper.sky-avatar-wrapper-size-small{padding:calc(var(--sky-override-avatar-wrapper-padding-sm, var(--sky-space-inset-thumbnail_matte-s)) - var(--sky-border-width-input-hover))}sky-file-drop:active .sky-avatar-wrapper,sky-file-drop:focus-within .sky-avatar-wrapper{border:var(--sky-override-avatar-wrapper-drop-border-active, var(--sky-border-width-input-active) solid var(--sky-color-border-input-active));padding:calc(var(--sky-override-avatar-wrapper-padding, var(--sky-space-inset-thumbnail_matte-l)) - var(--sky-border-width-input-active))}sky-file-drop:active .sky-avatar-wrapper.sky-avatar-wrapper-size-medium,sky-file-drop:focus-within .sky-avatar-wrapper.sky-avatar-wrapper-size-medium{padding:calc(var(--sky-override-avatar-wrapper-padding-md, var(--sky-space-inset-thumbnail_matte-m)) - var(--sky-border-width-input-active))}sky-file-drop:active .sky-avatar-wrapper.sky-avatar-wrapper-size-small,sky-file-drop:focus-within .sky-avatar-wrapper.sky-avatar-wrapper-size-small{padding:calc(var(--sky-override-avatar-wrapper-padding-sm, var(--sky-space-inset-thumbnail_matte-s)) - var(--sky-border-width-input-active))}sky-file-drop:focus-within:not(:active) .sky-avatar-wrapper{box-shadow:var(--sky-override-avatar-wrapper-drop-box-shadow-focus, none)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
190
190
|
}
|
|
191
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
191
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyAvatarInnerComponent, decorators: [{
|
|
192
192
|
type: Component,
|
|
193
193
|
args: [{ selector: 'sky-avatar-inner', providers: [SkyAvatarAdapterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, SkyI18nModule, SkyThemeModule], template: "<div\n class=\"sky-elevation-1 sky-avatar-wrapper\"\n [ngClass]=\"'sky-avatar-wrapper-size-' + size\"\n>\n <div class=\"sky-avatar-image\" [hidden]=\"!src\"></div>\n @if (src) {\n <div class=\"sky-screen-reader-only\">\n {{ 'skyux_avatar_inner_description' | skyLibResources: name }}\n </div>\n }\n <div\n class=\"sky-avatar-initials\"\n [hidden]=\"src || !name\"\n [ngClass]=\"'sky-avatar-colors-' + (colorIndex + 1)\"\n >\n @if (size === 'small') {\n <div\n class=\"sky-avatar-initials-inner\"\n [skyThemeClass]=\"{\n 'sky-font-body-sm': 'modern'\n }\"\n >\n {{ initials }}\n </div>\n } @else if (size === 'medium') {\n <div\n class=\"sky-avatar-initials-inner\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n >\n {{ initials }}\n </div>\n } @else if (size === 'large') {\n <div\n class=\"sky-avatar-initials-inner\"\n [skyThemeClass]=\"{\n 'sky-font-display-2': 'modern'\n }\"\n >\n {{ initials }}\n </div>\n }\n </div>\n</div>\n", styles: [".sky-avatar:not(.sky-theme-modern *){--sky-override-avatar-initials-border-radius: initial;--sky-override-avatar-initials-font-size: 50px;--sky-override-avatar-initials-font-size-md: 32.5px;--sky-override-avatar-initials-font-size-sm: 16px;--sky-override-avatar-initials-height: 100px;--sky-override-avatar-initials-height-md: 65px;--sky-override-avatar-initials-height-sm: 32px;--sky-override-avatar-initials-width: 100px;--sky-override-avatar-initials-width-md: 65px;--sky-override-avatar-initials-width-sm: 32px;--sky-override-avatar-wrapper-background-color: transparent;--sky-override-avatar-wrapper-border: solid 2px transparent;--sky-override-avatar-wrapper-border-radius: 50%;--sky-override-avatar-wrapper-drop-accept-border-color: #72bf44;--sky-override-avatar-wrapper-drop-border-width: 2px;--sky-override-avatar-wrapper-drop-border-active: solid 2px transparent;--sky-override-avatar-wrapper-drop-border-hover: solid 2px transparent;--sky-override-avatar-wrapper-drop-box-shadow-focus: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-avatar-wrapper-drop-reject-border-color: #ef4044;--sky-override-avatar-wrapper-height: 104px;--sky-override-avatar-wrapper-height-md: 69px;--sky-override-avatar-wrapper-height-sm: 36px;--sky-override-avatar-wrapper-left: -2px;--sky-override-avatar-wrapper-padding: 0;--sky-override-avatar-wrapper-padding-md: 0;--sky-override-avatar-wrapper-padding-sm: 0;--sky-override-avatar-wrapper-top: -2px;--sky-override-avatar-wrapper-width: 104px;--sky-override-avatar-wrapper-width-md: 69px;--sky-override-avatar-wrapper-width-sm: 36px}.sky-avatar-colors-1{background-color:var(--sky-category-color-green)}.sky-avatar-colors-2{background-color:var(--sky-category-color-teal)}.sky-avatar-colors-3{background-color:var(--sky-category-color-purple)}.sky-avatar-colors-4{background-color:var(--sky-category-color-orange)}.sky-avatar-colors-5{background-color:var(--sky-category-color-blue)}.sky-avatar-colors-6{background-color:var(--sky-category-color-yellow)}.sky-avatar-colors-7{background-color:var(--sky-category-color-red)}.sky-avatar-wrapper{height:var(--sky-override-avatar-wrapper-height, var(--sky-size-avatar-l));width:var(--sky-override-avatar-wrapper-width, var(--sky-size-avatar-l));background-color:var(--sky-override-avatar-wrapper-background-color, var(--sky-color-background-thumbnail_matte));padding:var(--sky-override-avatar-wrapper-padding, var(--sky-space-inset-thumbnail_matte-l));border:var(--sky-override-avatar-wrapper-border, none);border-radius:var(--sky-override-avatar-wrapper-border-radius, var(--sky-border-radius-round));overflow:hidden;position:relative;top:var(--sky-override-avatar-wrapper-top, 0);left:var(--sky-override-avatar-wrapper-left, 0)}.sky-avatar-image,.sky-avatar-initials{height:var(--sky-override-avatar-initials-height, calc(var(--sky-size-avatar-l) - var(--sky-space-inset-thumbnail_matte-l) * 2));width:var(--sky-override-avatar-initials-width, calc(var(--sky-size-avatar-l) - var(--sky-space-inset-thumbnail_matte-l) * 2));background-position:50%;background-size:cover;border-radius:var(--sky-override-avatar-initials-border-radius, var(--sky-border-radius-round));display:flex;align-items:center;justify-content:center}.sky-avatar-initials{font-size:var(--sky-override-avatar-initials-font-size, initial)}.sky-avatar-initials-inner{color:var(--sky-text-color-default);cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sky-avatar-wrapper-size-medium{height:var(--sky-override-avatar-wrapper-height-md, var(--sky-size-avatar-m));width:var(--sky-override-avatar-wrapper-width-md, var(--sky-size-avatar-m));padding:var(--sky-override-avatar-wrapper-padding-md, var(--sky-space-inset-thumbnail_matte-m))}.sky-avatar-wrapper-size-medium .sky-avatar-image,.sky-avatar-wrapper-size-medium .sky-avatar-initials{height:var(--sky-override-avatar-initials-height-md, calc(var(--sky-size-avatar-m) - var(--sky-space-inset-thumbnail_matte-m) * 2));width:var(--sky-override-avatar-initials-width-md, calc(var(--sky-size-avatar-m) - var(--sky-space-inset-thumbnail_matte-m) * 2))}.sky-avatar-wrapper-size-medium .sky-avatar-initials{font-size:var(--sky-override-avatar-initials-font-size-md, initial)}.sky-avatar-wrapper-size-small{height:var(--sky-override-avatar-wrapper-height-sm, var(--sky-size-avatar-s));width:var(--sky-override-avatar-wrapper-width-sm, var(--sky-size-avatar-s));padding:var(--sky-override-avatar-wrapper-padding-sm, var(--sky-space-inset-thumbnail_matte-s))}.sky-avatar-wrapper-size-small .sky-avatar-image,.sky-avatar-wrapper-size-small .sky-avatar-initials{height:var(--sky-override-avatar-initials-height-sm, calc(var(--sky-size-avatar-s) - var(--sky-space-inset-thumbnail_matte-s) * 2));width:var(--sky-override-avatar-initials-width-sm, calc(var(--sky-size-avatar-s) - var(--sky-space-inset-thumbnail_matte-s) * 2))}.sky-avatar-wrapper-size-small .sky-avatar-initials{font-size:var(--sky-override-avatar-initials-font-size-sm, initial)}.sky-file-drop .sky-avatar-wrapper{cursor:pointer}.sky-file-drop-accept .sky-avatar-wrapper,.sky-file-drop-reject .sky-avatar-wrapper{border-style:dashed}.sky-file-drop-accept .sky-avatar-wrapper{border-color:var(--sky-override-avatar-wrapper-drop-accept-border-color, var(--sky-color-border-success))}.sky-file-drop-reject .sky-avatar-wrapper{border-color:var(--sky-override-avatar-wrapper-drop-reject-border-color, var(--sky-color-border-danger))}.sky-file-drop-accept .sky-avatar-wrapper,.sky-file-drop-reject .sky-avatar-wrapper{border-width:var(--sky-override-avatar-wrapper-drop-border-width, var(--sky-border-width-input-hover));padding:calc(var(--sky-override-avatar-wrapper-padding, var(--sky-space-inset-thumbnail_matte-l)) - var(--sky-override-avatar-wrapper-drop-border-width, var(--sky-border-width-input-hover)))}.sky-file-drop-accept .sky-avatar-wrapper-size-medium,.sky-file-drop-reject .sky-avatar-wrapper-size-medium{padding:calc(var(--sky-override-avatar-wrapper-padding-md, var(--sky-space-inset-thumbnail_matte-m)) - var(--sky-override-avatar-wrapper-drop-border-width, var(--sky-border-width-input-hover)))}.sky-file-drop-accept .sky-avatar-wrapper-size-small,.sky-file-drop-reject .sky-avatar-wrapper-size-small{padding:calc(var(--sky-override-avatar-wrapper-padding-sm, var(--sky-space-inset-thumbnail_matte-s)) - var(--sky-override-avatar-wrapper-drop-border-width, var(--sky-border-width-input-hover)))}sky-file-drop:hover .sky-avatar-wrapper{border:var(--sky-override-avatar-wrapper-drop-border-hover, var(--sky-border-width-input-hover) solid var(--sky-color-border-input-hover));padding:calc(var(--sky-override-avatar-wrapper-padding, var(--sky-space-inset-thumbnail_matte-l)) - var(--sky-border-width-input-hover))}sky-file-drop:hover .sky-avatar-wrapper.sky-avatar-wrapper-size-medium{padding:calc(var(--sky-override-avatar-wrapper-padding-md, var(--sky-space-inset-thumbnail_matte-m)) - var(--sky-border-width-input-hover))}sky-file-drop:hover .sky-avatar-wrapper.sky-avatar-wrapper-size-small{padding:calc(var(--sky-override-avatar-wrapper-padding-sm, var(--sky-space-inset-thumbnail_matte-s)) - var(--sky-border-width-input-hover))}sky-file-drop:active .sky-avatar-wrapper,sky-file-drop:focus-within .sky-avatar-wrapper{border:var(--sky-override-avatar-wrapper-drop-border-active, var(--sky-border-width-input-active) solid var(--sky-color-border-input-active));padding:calc(var(--sky-override-avatar-wrapper-padding, var(--sky-space-inset-thumbnail_matte-l)) - var(--sky-border-width-input-active))}sky-file-drop:active .sky-avatar-wrapper.sky-avatar-wrapper-size-medium,sky-file-drop:focus-within .sky-avatar-wrapper.sky-avatar-wrapper-size-medium{padding:calc(var(--sky-override-avatar-wrapper-padding-md, var(--sky-space-inset-thumbnail_matte-m)) - var(--sky-border-width-input-active))}sky-file-drop:active .sky-avatar-wrapper.sky-avatar-wrapper-size-small,sky-file-drop:focus-within .sky-avatar-wrapper.sky-avatar-wrapper-size-small{padding:calc(var(--sky-override-avatar-wrapper-padding-sm, var(--sky-space-inset-thumbnail_matte-s)) - var(--sky-border-width-input-active))}sky-file-drop:focus-within:not(:active) .sky-avatar-wrapper{box-shadow:var(--sky-override-avatar-wrapper-drop-box-shadow-focus, none)}\n"] }]
|
|
194
194
|
}], propDecorators: { src: [{
|
|
@@ -305,10 +305,10 @@ class SkyAvatarComponent {
|
|
|
305
305
|
// TODO: Need to implement the async `getString` method in a breaking change.
|
|
306
306
|
return this.#resourcesService.getStringForLocale({ locale: 'en-US' }, key, ...args);
|
|
307
307
|
}
|
|
308
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
309
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
308
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
309
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyAvatarComponent, isStandalone: true, selector: "sky-avatar", inputs: { canChange: "canChange", name: "name", src: "src", maxFileSize: "maxFileSize", size: "size" }, outputs: { avatarChanged: "avatarChanged" }, providers: [SkyFileSizePipe], ngImport: i0, template: "<div class=\"sky-avatar\">\n @if (canChange) {\n <div class=\"sky-avatar-file-drop\">\n <sky-file-drop\n [acceptedTypes]=\"'image/*'\"\n [fileUploadAriaLabel]=\"\n src\n ? ('skyux_avatar_upload_change_aria_label' | skyLibResources: name)\n : ('skyux_avatar_upload_new_aria_label' | skyLibResources: name)\n \"\n [multiple]=\"false\"\n [maxFileSize]=\"maxFileSize\"\n [multiple]=\"false\"\n (filesChanged)=\"photoDrop($event)\"\n >\n <ng-container *ngTemplateOutlet=\"innerTemplate\" />\n </sky-file-drop>\n </div>\n } @else {\n <div>\n <ng-container *ngTemplateOutlet=\"innerTemplate\" />\n </div>\n }\n</div>\n\n<ng-template #innerTemplate>\n <sky-avatar-inner\n [name]=\"name\"\n [size]=\"size ?? (sizeDefault | async) ?? 'large'\"\n [src]=\"src\"\n />\n</ng-template>\n", styles: [".sky-avatar:not(.sky-theme-modern *){--sky-override-avatar-file-drop-focus-outline: auto}.sky-avatar .sky-file-drop-col{flex-basis:initial}.sky-avatar .sky-file-drop:focus{outline:var(--sky-override-avatar-file-drop-focus-outline, none)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "ngmodule", type: SkyFileDropModule }, { kind: "component", type: i1$1.λ8, selector: "sky-file-drop", inputs: ["fileUploadAriaLabel", "linkUploadAriaLabel", "linkUploadHintText", "minFileSize", "maxFileSize", "multiple", "validateFn", "acceptedTypes", "acceptedTypesErrorMessage", "noClick", "allowLinks", "labelText", "labelHidden", "hintText", "required", "helpPopoverContent", "helpPopoverTitle", "stacked", "helpKey"], outputs: ["filesChanged", "linkInputBlur", "linkChanged"] }, { kind: "ngmodule", type: SkyAvatarResourcesModule }, { kind: "component", type: SkyAvatarInnerComponent, selector: "sky-avatar-inner", inputs: ["src", "name", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
310
310
|
}
|
|
311
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyAvatarComponent, decorators: [{
|
|
312
312
|
type: Component,
|
|
313
313
|
args: [{ selector: 'sky-avatar', encapsulation: ViewEncapsulation.None, providers: [SkyFileSizePipe], changeDetection: ChangeDetectionStrategy.Eager, imports: [
|
|
314
314
|
AsyncPipe,
|
|
@@ -333,11 +333,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
333
333
|
}] } });
|
|
334
334
|
|
|
335
335
|
class SkyAvatarModule {
|
|
336
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
337
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
338
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
336
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
337
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyAvatarModule, imports: [SkyAvatarInnerComponent, SkyAvatarComponent], exports: [SkyAvatarComponent] }); }
|
|
338
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyAvatarModule, providers: [SkyFileSizePipe], imports: [SkyAvatarInnerComponent, SkyAvatarComponent] }); }
|
|
339
339
|
}
|
|
340
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
340
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyAvatarModule, decorators: [{
|
|
341
341
|
type: NgModule,
|
|
342
342
|
args: [{
|
|
343
343
|
imports: [SkyAvatarInnerComponent, SkyAvatarComponent],
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/avatar",
|
|
3
|
-
"version": "15.0.0-alpha.
|
|
3
|
+
"version": "15.0.0-alpha.6",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -16,25 +16,19 @@
|
|
|
16
16
|
},
|
|
17
17
|
"homepage": "https://github.com/blackbaud/skyux#readme",
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
"@angular/cdk": "^22.
|
|
20
|
-
"@angular/common": "^22.
|
|
21
|
-
"@angular/core": "^22.
|
|
22
|
-
"@angular/platform-browser": "^22.
|
|
23
|
-
"@skyux
|
|
24
|
-
"@skyux/
|
|
25
|
-
"@skyux/
|
|
26
|
-
"@skyux/
|
|
27
|
-
"@skyux/
|
|
28
|
-
"@skyux/theme": "15.0.0-alpha.4"
|
|
19
|
+
"@angular/cdk": "^22.1.2",
|
|
20
|
+
"@angular/common": "^22.1.2",
|
|
21
|
+
"@angular/core": "^22.1.2",
|
|
22
|
+
"@angular/platform-browser": "^22.1.2",
|
|
23
|
+
"@skyux/core": "15.0.0-alpha.6",
|
|
24
|
+
"@skyux/errors": "15.0.0-alpha.6",
|
|
25
|
+
"@skyux/forms": "15.0.0-alpha.6",
|
|
26
|
+
"@skyux/i18n": "15.0.0-alpha.6",
|
|
27
|
+
"@skyux/theme": "15.0.0-alpha.6"
|
|
29
28
|
},
|
|
30
29
|
"dependencies": {
|
|
31
30
|
"tslib": "^2.8.1"
|
|
32
31
|
},
|
|
33
|
-
"peerDependenciesMeta": {
|
|
34
|
-
"@skyux-sdk/testing": {
|
|
35
|
-
"optional": true
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
32
|
"sideEffects": false,
|
|
39
33
|
"module": "fesm2022/skyux-avatar.mjs",
|
|
40
34
|
"typings": "types/skyux-avatar.d.ts",
|