@skyux/avatar 5.0.1 → 5.5.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/README.md +6 -4
- package/bundles/skyux-avatar.umd.js +19 -17
- package/documentation.json +42 -13
- package/esm2015/index.js +7 -0
- package/esm2015/index.js.map +1 -0
- package/esm2015/lib/modules/avatar/avatar-adapter.service.js +51 -0
- package/esm2015/lib/modules/avatar/avatar-adapter.service.js.map +1 -0
- package/esm2015/lib/modules/avatar/avatar-size.js +2 -0
- package/esm2015/lib/modules/avatar/avatar-size.js.map +1 -0
- package/esm2015/lib/modules/avatar/avatar-src.js +2 -0
- package/esm2015/lib/modules/avatar/avatar-src.js.map +1 -0
- package/esm2015/lib/modules/avatar/avatar.component.js +130 -0
- package/esm2015/lib/modules/avatar/avatar.component.js.map +1 -0
- package/esm2015/{modules → lib/modules}/avatar/avatar.inner.component.js +5 -5
- package/esm2015/lib/modules/avatar/avatar.inner.component.js.map +1 -0
- package/esm2015/lib/modules/avatar/avatar.module.js +44 -0
- package/esm2015/lib/modules/avatar/avatar.module.js.map +1 -0
- package/esm2015/lib/modules/shared/sky-avatar-resources.module.js +62 -0
- package/esm2015/lib/modules/shared/sky-avatar-resources.module.js.map +1 -0
- package/esm2015/skyux-avatar.js +2 -2
- package/esm2015/skyux-avatar.js.map +1 -0
- package/esm2015/testing/avatar-fixture.js +1 -1
- package/esm2015/testing/avatar-fixture.js.map +1 -0
- package/esm2015/testing/public-api.js +1 -1
- package/esm2015/testing/public-api.js.map +1 -0
- package/esm2015/testing/skyux-avatar-testing.js +1 -1
- package/esm2015/testing/skyux-avatar-testing.js.map +1 -0
- package/fesm2015/skyux-avatar-testing.js.map +1 -1
- package/fesm2015/skyux-avatar.js +19 -17
- package/fesm2015/skyux-avatar.js.map +1 -1
- package/index.d.ts +4 -0
- package/{modules → lib/modules}/avatar/avatar-adapter.service.d.ts +0 -0
- package/{modules → lib/modules}/avatar/avatar-size.d.ts +0 -0
- package/{modules → lib/modules}/avatar/avatar-src.d.ts +0 -0
- package/{modules → lib/modules}/avatar/avatar.component.d.ts +2 -0
- package/{modules → lib/modules}/avatar/avatar.inner.component.d.ts +0 -0
- package/{modules → lib/modules}/avatar/avatar.module.d.ts +0 -0
- package/{modules → lib/modules}/shared/sky-avatar-resources.module.d.ts +0 -0
- package/package.json +22 -8
- package/skyux-avatar.d.ts +1 -1
- package/LICENSE +0 -21
- package/bundles/skyux-avatar-testing.umd.js.map +0 -1
- package/bundles/skyux-avatar.umd.js.map +0 -1
- package/esm2015/modules/avatar/avatar-adapter.service.js +0 -51
- package/esm2015/modules/avatar/avatar-size.js +0 -2
- package/esm2015/modules/avatar/avatar-src.js +0 -2
- package/esm2015/modules/avatar/avatar.component.js +0 -125
- package/esm2015/modules/avatar/avatar.module.js +0 -44
- package/esm2015/modules/shared/sky-avatar-resources.module.js +0 -62
- package/esm2015/public-api.js +0 -7
- package/public-api.d.ts +0 -4
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
#
|
|
1
|
+
# avatar
|
|
2
2
|
|
|
3
|
-
[
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
This library was generated with [Nx](https://nx.dev).
|
|
4
|
+
|
|
5
|
+
## Running unit tests
|
|
6
|
+
|
|
7
|
+
Run `nx test avatar` to execute the unit tests.
|
|
@@ -393,9 +393,9 @@
|
|
|
393
393
|
};
|
|
394
394
|
return SkyAvatarAdapterService;
|
|
395
395
|
}());
|
|
396
|
-
SkyAvatarAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
397
|
-
SkyAvatarAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
398
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
396
|
+
SkyAvatarAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarAdapterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
397
|
+
SkyAvatarAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarAdapterService });
|
|
398
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarAdapterService, decorators: [{
|
|
399
399
|
type: i0.Injectable
|
|
400
400
|
}] });
|
|
401
401
|
|
|
@@ -475,9 +475,9 @@
|
|
|
475
475
|
};
|
|
476
476
|
return SkyAvatarInnerComponent;
|
|
477
477
|
}());
|
|
478
|
-
SkyAvatarInnerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
479
|
-
SkyAvatarInnerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
480
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
478
|
+
SkyAvatarInnerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarInnerComponent, deps: [{ token: i0__namespace.ElementRef }, { token: SkyAvatarAdapterService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
479
|
+
SkyAvatarInnerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAvatarInnerComponent, selector: "sky-avatar-inner", inputs: { src: "src", name: "name", size: "size" }, providers: [SkyAvatarAdapterService], ngImport: i0__namespace, template: "<div\n class=\"sky-elevation-1 sky-avatar-wrapper\"\n [ngClass]=\"'sky-avatar-wrapper-size-' + (size || 'large')\"\n>\n <div class=\"sky-avatar-image\" [hidden]=\"!src\"></div>\n <div *ngIf=\"src\" class=\"sky-screen-reader-only\">\n {{ 'skyux_avatar_inner_description' | skyLibResources: name }}\n </div>\n <div\n class=\"sky-avatar-initials\"\n [hidden]=\"src || !name\"\n [ngClass]=\"'sky-palette-multi-' + (colorIndex + 1)\"\n >\n <div\n *ngIf=\"size === 'small'\"\n class=\"sky-avatar-initials-inner\"\n [skyThemeClass]=\"{\n 'sky-font-body-sm': 'modern'\n }\"\n >\n {{ initials }}\n </div>\n <div\n *ngIf=\"size === 'medium'\"\n class=\"sky-avatar-initials-inner\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern'\n }\"\n >\n {{ initials }}\n </div>\n <div\n *ngIf=\"size !== 'small' && size !== 'medium'\"\n class=\"sky-avatar-initials-inner\"\n [skyThemeClass]=\"{\n 'sky-font-display-2': 'modern'\n }\"\n >\n {{ initials }}\n </div>\n </div>\n</div>\n", styles: [".sky-avatar-wrapper{height:104px;width:104px;border:solid 2px transparent;border-radius:50%;overflow:hidden;position:relative;top:-2px;left:-2px}.sky-avatar-image,.sky-avatar-initials{height:100px;width:100px;background-position:50%;background-size:cover;display:flex;align-items:center;justify-content:center}.sky-avatar-initials{font-size:50px}.sky-avatar-initials-inner{color:#fff;cursor:default;-webkit-user-select:none;user-select:none}.sky-avatar-wrapper-size-medium{height:69px;width:69px}.sky-avatar-wrapper-size-medium .sky-avatar-image,.sky-avatar-wrapper-size-medium .sky-avatar-initials{height:65px;width:65px}.sky-avatar-wrapper-size-medium .sky-avatar-initials{font-size:32.5px}.sky-avatar-wrapper-size-small{height:36px;width:36px}.sky-avatar-wrapper-size-small .sky-avatar-image,.sky-avatar-wrapper-size-small .sky-avatar-initials{height:32px;width:32px}.sky-avatar-wrapper-size-small .sky-avatar-initials{font-size:16px}.sky-file-drop .sky-avatar-wrapper{cursor:pointer}.sky-file-drop-accept .sky-avatar-wrapper{border-color:#72bf44;border-style:dashed}.sky-file-drop-reject .sky-avatar-wrapper{border-color:#ef4044;border-style:dashed}.sky-theme-modern .sky-avatar-wrapper{height:100px;width:100px;background-color:#fff;border-width:0;padding:5px;top:0;left:0}.sky-theme-modern .sky-avatar-image,.sky-theme-modern .sky-avatar-initials{border-radius:50%;height:90px;width:90px}.sky-theme-modern .sky-avatar-initials-inner{color:#212327}.sky-theme-modern .sky-file-drop-accept .sky-avatar-wrapper,.sky-theme-modern .sky-file-drop-reject .sky-avatar-wrapper{border-width:2px;padding:3px}.sky-theme-modern .sky-file-drop-accept .sky-avatar-wrapper-size-medium,.sky-theme-modern .sky-file-drop-reject .sky-avatar-wrapper-size-medium{padding:1px}.sky-theme-modern .sky-file-drop-accept .sky-avatar-wrapper-size-small,.sky-theme-modern .sky-file-drop-reject .sky-avatar-wrapper-size-small{padding:0}.sky-theme-modern .sky-avatar-wrapper-size-medium{padding:3px;height:65px;width:65px}.sky-theme-modern .sky-avatar-wrapper-size-medium .sky-avatar-image,.sky-theme-modern .sky-avatar-wrapper-size-medium .sky-avatar-initials{height:59px;width:59px}.sky-theme-modern .sky-avatar-wrapper-size-small{padding:2px;height:32px;width:32px}.sky-theme-modern .sky-avatar-wrapper-size-small .sky-avatar-image,.sky-theme-modern .sky-avatar-wrapper-size-small .sky-avatar-initials{height:28px;width:28px}.sky-theme-modern sky-file-drop:hover .sky-avatar-wrapper{border:solid 1px #1870B8;padding:4px}.sky-theme-modern sky-file-drop:hover .sky-avatar-wrapper.sky-avatar-wrapper-size-medium{padding:2px}.sky-theme-modern sky-file-drop:hover .sky-avatar-wrapper.sky-avatar-wrapper-size-small{padding:1px}.sky-theme-modern sky-file-drop:active .sky-avatar-wrapper,.sky-theme-modern sky-file-drop:focus-within .sky-avatar-wrapper{border:solid 2px #1870B8;padding:3px}.sky-theme-modern sky-file-drop:active .sky-avatar-wrapper.sky-avatar-wrapper-size-medium,.sky-theme-modern sky-file-drop:focus-within .sky-avatar-wrapper.sky-avatar-wrapper-size-medium{padding:1px}.sky-theme-modern sky-file-drop:active .sky-avatar-wrapper.sky-avatar-wrapper-size-small,.sky-theme-modern sky-file-drop:focus-within .sky-avatar-wrapper.sky-avatar-wrapper-size-small{padding:0}.sky-theme-modern sky-file-drop:focus-within:not(:active) .sky-avatar-wrapper{box-shadow:0 1px 8px #0000004d}.sky-theme-modern.sky-theme-mode-dark .sky-avatar-wrapper{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-avatar-initials-inner{color:#212327}\n"], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
480
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarInnerComponent, decorators: [{
|
|
481
481
|
type: i0.Component,
|
|
482
482
|
args: [{
|
|
483
483
|
selector: 'sky-avatar-inner',
|
|
@@ -508,6 +508,8 @@
|
|
|
508
508
|
this.maxFileSize = 500000;
|
|
509
509
|
/**
|
|
510
510
|
* Specifies the size of the avatar.
|
|
511
|
+
* Acceptable values are: `"small"`, `"medium"`, and `"large"`.
|
|
512
|
+
* @default "large"
|
|
511
513
|
*/
|
|
512
514
|
this.size = 'large';
|
|
513
515
|
/**
|
|
@@ -609,9 +611,9 @@
|
|
|
609
611
|
};
|
|
610
612
|
return SkyAvatarComponent;
|
|
611
613
|
}());
|
|
612
|
-
SkyAvatarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
613
|
-
SkyAvatarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
614
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
614
|
+
SkyAvatarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarComponent, deps: [{ token: i1__namespace.SkyErrorModalService }, { token: i2__namespace$1.SkyFileSizePipe }, { token: i3__namespace$1.SkyLibResourcesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
615
|
+
SkyAvatarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAvatarComponent, selector: "sky-avatar", inputs: { canChange: "canChange", name: "name", src: "src", maxFileSize: "maxFileSize", size: "size" }, outputs: { avatarChanged: "avatarChanged" }, ngImport: i0__namespace, template: "<div class=\"sky-avatar\">\n <div *ngIf=\"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\"></ng-container>\n </sky-file-drop>\n </div>\n </div>\n <div *ngIf=\"!canChange\">\n <ng-container *ngTemplateOutlet=\"innerTemplate\"></ng-container>\n </div>\n</div>\n\n<ng-template #innerTemplate>\n <sky-avatar-inner [name]=\"name\" [size]=\"size\" [src]=\"src\"></sky-avatar-inner>\n</ng-template>\n", styles: [".sky-avatar .sky-file-drop-col{flex-basis:initial}.sky-theme-modern .sky-file-drop:focus{outline:none}\n"], components: [{ type: i2__namespace$1.λ8, selector: "sky-file-drop", inputs: ["fileUploadAriaLabel", "linkUploadAriaLabel", "minFileSize", "maxFileSize", "multiple", "validateFn", "acceptedTypes", "noClick", "allowLinks"], outputs: ["filesChanged", "linkInputBlur", "linkChanged"] }, { type: SkyAvatarInnerComponent, selector: "sky-avatar-inner", inputs: ["src", "name", "size"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
616
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarComponent, decorators: [{
|
|
615
617
|
type: i0.Component,
|
|
616
618
|
args: [{
|
|
617
619
|
selector: 'sky-avatar',
|
|
@@ -675,16 +677,16 @@
|
|
|
675
677
|
}
|
|
676
678
|
return SkyAvatarResourcesModule;
|
|
677
679
|
}());
|
|
678
|
-
SkyAvatarResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
679
|
-
SkyAvatarResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
680
|
-
SkyAvatarResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
680
|
+
SkyAvatarResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
681
|
+
SkyAvatarResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarResourcesModule, exports: [i3$1.SkyI18nModule] });
|
|
682
|
+
SkyAvatarResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarResourcesModule, providers: [
|
|
681
683
|
{
|
|
682
684
|
provide: i3$1.SKY_LIB_RESOURCES_PROVIDERS,
|
|
683
685
|
useClass: SkyAvatarResourcesProvider,
|
|
684
686
|
multi: true,
|
|
685
687
|
},
|
|
686
688
|
], imports: [i3$1.SkyI18nModule] });
|
|
687
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
689
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarResourcesModule, decorators: [{
|
|
688
690
|
type: i0.NgModule,
|
|
689
691
|
args: [{
|
|
690
692
|
exports: [i3$1.SkyI18nModule],
|
|
@@ -703,14 +705,14 @@
|
|
|
703
705
|
}
|
|
704
706
|
return SkyAvatarModule;
|
|
705
707
|
}());
|
|
706
|
-
SkyAvatarModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
707
|
-
SkyAvatarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
708
|
+
SkyAvatarModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
709
|
+
SkyAvatarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarModule, declarations: [SkyAvatarInnerComponent, SkyAvatarComponent], imports: [i2.CommonModule,
|
|
708
710
|
SkyAvatarResourcesModule,
|
|
709
711
|
i1.SkyErrorModule,
|
|
710
712
|
i2$1.SkyFileAttachmentsModule,
|
|
711
713
|
i3$1.SkyI18nModule,
|
|
712
714
|
i3.SkyThemeModule], exports: [SkyAvatarComponent] });
|
|
713
|
-
SkyAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
715
|
+
SkyAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarModule, providers: [i2$1.SkyFileSizePipe], imports: [[
|
|
714
716
|
i2.CommonModule,
|
|
715
717
|
SkyAvatarResourcesModule,
|
|
716
718
|
i1.SkyErrorModule,
|
|
@@ -718,7 +720,7 @@
|
|
|
718
720
|
i3$1.SkyI18nModule,
|
|
719
721
|
i3.SkyThemeModule,
|
|
720
722
|
]] });
|
|
721
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
723
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarModule, decorators: [{
|
|
722
724
|
type: i0.NgModule,
|
|
723
725
|
args: [{
|
|
724
726
|
declarations: [SkyAvatarInnerComponent, SkyAvatarComponent],
|
package/documentation.json
CHANGED
|
@@ -24,6 +24,8 @@
|
|
|
24
24
|
"name": "NgModule",
|
|
25
25
|
"type": {
|
|
26
26
|
"type": "reference",
|
|
27
|
+
"qualifiedName": "NgModuleDecorator",
|
|
28
|
+
"package": "@angular/core",
|
|
27
29
|
"name": "NgModule"
|
|
28
30
|
},
|
|
29
31
|
"arguments": {
|
|
@@ -82,6 +84,8 @@
|
|
|
82
84
|
"name": "Component",
|
|
83
85
|
"type": {
|
|
84
86
|
"type": "reference",
|
|
87
|
+
"qualifiedName": "ComponentDecorator",
|
|
88
|
+
"package": "@angular/core",
|
|
85
89
|
"name": "Component"
|
|
86
90
|
},
|
|
87
91
|
"arguments": {
|
|
@@ -99,7 +103,7 @@
|
|
|
99
103
|
"sources": [
|
|
100
104
|
{
|
|
101
105
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
102
|
-
"line":
|
|
106
|
+
"line": 98,
|
|
103
107
|
"character": 2
|
|
104
108
|
}
|
|
105
109
|
],
|
|
@@ -169,6 +173,8 @@
|
|
|
169
173
|
"name": "Output",
|
|
170
174
|
"type": {
|
|
171
175
|
"type": "reference",
|
|
176
|
+
"qualifiedName": "OutputDecorator",
|
|
177
|
+
"package": "@angular/core",
|
|
172
178
|
"name": "Output"
|
|
173
179
|
},
|
|
174
180
|
"arguments": {}
|
|
@@ -177,7 +183,7 @@
|
|
|
177
183
|
"sources": [
|
|
178
184
|
{
|
|
179
185
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
180
|
-
"line":
|
|
186
|
+
"line": 90,
|
|
181
187
|
"character": 9
|
|
182
188
|
}
|
|
183
189
|
],
|
|
@@ -189,6 +195,8 @@
|
|
|
189
195
|
"name": "SkyFileItem"
|
|
190
196
|
}
|
|
191
197
|
],
|
|
198
|
+
"qualifiedName": "EventEmitter",
|
|
199
|
+
"package": "@angular/core",
|
|
192
200
|
"name": "EventEmitter"
|
|
193
201
|
},
|
|
194
202
|
"defaultValue": "..."
|
|
@@ -209,6 +217,8 @@
|
|
|
209
217
|
"name": "Input",
|
|
210
218
|
"type": {
|
|
211
219
|
"type": "reference",
|
|
220
|
+
"qualifiedName": "InputDecorator",
|
|
221
|
+
"package": "@angular/core",
|
|
212
222
|
"name": "Input"
|
|
213
223
|
},
|
|
214
224
|
"arguments": {}
|
|
@@ -236,13 +246,21 @@
|
|
|
236
246
|
"isPublic": true
|
|
237
247
|
},
|
|
238
248
|
"comment": {
|
|
239
|
-
"shortText": "Specifies the size of the avatar
|
|
249
|
+
"shortText": "Specifies the size of the avatar.\nAcceptable values are: `\"small\"`, `\"medium\"`, and `\"large\"`.",
|
|
250
|
+
"tags": [
|
|
251
|
+
{
|
|
252
|
+
"tag": "default",
|
|
253
|
+
"text": "\"large\"\n"
|
|
254
|
+
}
|
|
255
|
+
]
|
|
240
256
|
},
|
|
241
257
|
"decorators": [
|
|
242
258
|
{
|
|
243
259
|
"name": "Input",
|
|
244
260
|
"type": {
|
|
245
261
|
"type": "reference",
|
|
262
|
+
"qualifiedName": "InputDecorator",
|
|
263
|
+
"package": "@angular/core",
|
|
246
264
|
"name": "Input"
|
|
247
265
|
},
|
|
248
266
|
"arguments": {}
|
|
@@ -251,7 +269,7 @@
|
|
|
251
269
|
"sources": [
|
|
252
270
|
{
|
|
253
271
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
254
|
-
"line":
|
|
272
|
+
"line": 84,
|
|
255
273
|
"character": 9
|
|
256
274
|
}
|
|
257
275
|
],
|
|
@@ -275,6 +293,8 @@
|
|
|
275
293
|
"name": "Input",
|
|
276
294
|
"type": {
|
|
277
295
|
"type": "reference",
|
|
296
|
+
"qualifiedName": "InputDecorator",
|
|
297
|
+
"package": "@angular/core",
|
|
278
298
|
"name": "Input"
|
|
279
299
|
},
|
|
280
300
|
"arguments": {}
|
|
@@ -295,7 +315,13 @@
|
|
|
295
315
|
"kindString": "Get signature",
|
|
296
316
|
"flags": {},
|
|
297
317
|
"comment": {
|
|
298
|
-
"shortText": "Indicates whether users can change the image. To select a different image,\nusers click the image or drag another image on top of it,\nmuch like the `sky-file-drop` component in the\n[file attachment module](https://developer.blackbaud.com/skyux/components/file-attachments/file-attachment)."
|
|
318
|
+
"shortText": "Indicates whether users can change the image. To select a different image,\nusers click the image or drag another image on top of it,\nmuch like the `sky-file-drop` component in the\n[file attachment module](https://developer.blackbaud.com/skyux/components/file-attachments/file-attachment).",
|
|
319
|
+
"tags": [
|
|
320
|
+
{
|
|
321
|
+
"tag": "default",
|
|
322
|
+
"text": "false\n"
|
|
323
|
+
}
|
|
324
|
+
]
|
|
299
325
|
},
|
|
300
326
|
"type": {
|
|
301
327
|
"type": "intrinsic",
|
|
@@ -352,6 +378,8 @@
|
|
|
352
378
|
"name": "Input",
|
|
353
379
|
"type": {
|
|
354
380
|
"type": "reference",
|
|
381
|
+
"qualifiedName": "InputDecorator",
|
|
382
|
+
"package": "@angular/core",
|
|
355
383
|
"name": "Input"
|
|
356
384
|
},
|
|
357
385
|
"arguments": {}
|
|
@@ -423,6 +451,8 @@
|
|
|
423
451
|
"name": "Input",
|
|
424
452
|
"type": {
|
|
425
453
|
"type": "reference",
|
|
454
|
+
"qualifiedName": "InputDecorator",
|
|
455
|
+
"package": "@angular/core",
|
|
426
456
|
"name": "Input"
|
|
427
457
|
},
|
|
428
458
|
"arguments": {}
|
|
@@ -494,7 +524,7 @@
|
|
|
494
524
|
"sources": [
|
|
495
525
|
{
|
|
496
526
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
497
|
-
"line":
|
|
527
|
+
"line": 104,
|
|
498
528
|
"character": 9
|
|
499
529
|
}
|
|
500
530
|
],
|
|
@@ -621,10 +651,14 @@
|
|
|
621
651
|
},
|
|
622
652
|
{
|
|
623
653
|
"type": "reference",
|
|
654
|
+
"qualifiedName": "Blob",
|
|
655
|
+
"package": "typescript",
|
|
624
656
|
"name": "Blob"
|
|
625
657
|
},
|
|
626
658
|
{
|
|
627
659
|
"type": "reference",
|
|
660
|
+
"qualifiedName": "File",
|
|
661
|
+
"package": "typescript",
|
|
628
662
|
"name": "File"
|
|
629
663
|
}
|
|
630
664
|
]
|
|
@@ -651,18 +685,13 @@
|
|
|
651
685
|
],
|
|
652
686
|
"sources": [
|
|
653
687
|
{
|
|
654
|
-
"fileName": "
|
|
688
|
+
"fileName": "index.ts",
|
|
655
689
|
"line": 1,
|
|
656
690
|
"character": 0
|
|
657
691
|
}
|
|
658
692
|
]
|
|
659
693
|
},
|
|
660
694
|
"codeExamples": [
|
|
661
|
-
{
|
|
662
|
-
"fileName": ".eslintrc.json",
|
|
663
|
-
"filePath": "/projects/avatar/documentation/code-examples/.eslintrc.json",
|
|
664
|
-
"rawContents": "{\n \"extends\": [\"../../.eslintrc.json\"],\n \"overrides\": [\n {\n \"files\": [\"*.ts\"],\n \"rules\": {\n \"@angular-eslint/directive-selector\": [\n \"error\",\n {\n \"type\": \"attribute\",\n \"prefix\": \"app\",\n \"style\": \"camelCase\"\n }\n ],\n \"@angular-eslint/component-selector\": [\n \"error\",\n {\n \"type\": \"element\",\n \"prefix\": \"app\",\n \"style\": \"kebab-case\"\n }\n ]\n }\n }\n ]\n}\n"
|
|
665
|
-
},
|
|
666
695
|
{
|
|
667
696
|
"fileName": "avatar-demo.component.html",
|
|
668
697
|
"filePath": "/projects/avatar/documentation/code-examples/avatar/avatar-demo.component.html",
|
|
@@ -679,4 +708,4 @@
|
|
|
679
708
|
"rawContents": "import { NgModule } from '@angular/core';\n\nimport { SkyAvatarModule } from '@skyux/avatar';\n\nimport { AvatarDemoComponent } from './avatar-demo.component';\n\n@NgModule({\n declarations: [AvatarDemoComponent],\n imports: [SkyAvatarModule],\n exports: [AvatarDemoComponent],\n})\nexport class AvatarDemoModule {}\n"
|
|
680
709
|
}
|
|
681
710
|
]
|
|
682
|
-
}
|
|
711
|
+
}
|
package/esm2015/index.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export * from './lib/modules/avatar/avatar-size';
|
|
2
|
+
export * from './lib/modules/avatar/avatar-src';
|
|
3
|
+
export * from './lib/modules/avatar/avatar.module';
|
|
4
|
+
// Components and directives must be exported to support Angular's "partial" Ivy compiler.
|
|
5
|
+
// Obscure names are used to indicate types are not part of public API.
|
|
6
|
+
export { SkyAvatarComponent as λ1 } from './lib/modules/avatar/avatar.component';
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/components/avatar/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AAEnD,0FAA0F;AAC1F,uEAAuE;AACvE,OAAO,EAAE,kBAAkB,IAAI,EAAE,EAAE,MAAM,uCAAuC,CAAC","sourcesContent":["export * from './lib/modules/avatar/avatar-size';\nexport * from './lib/modules/avatar/avatar-src';\nexport * from './lib/modules/avatar/avatar.module';\n\n// Components and directives must be exported to support Angular's \"partial\" Ivy compiler.\n// Obscure names are used to indicate types are not part of public API.\nexport { SkyAvatarComponent as λ1 } from './lib/modules/avatar/avatar.component';\n"]}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { Injectable } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
/**
|
|
4
|
+
* @internal
|
|
5
|
+
*/
|
|
6
|
+
export class SkyAvatarAdapterService {
|
|
7
|
+
updateImage(elementRef, src) {
|
|
8
|
+
this.revokeBlobUrl();
|
|
9
|
+
let el = elementRef.nativeElement;
|
|
10
|
+
/*istanbul ignore else */
|
|
11
|
+
if (el) {
|
|
12
|
+
let imageEl = el.querySelector('.sky-avatar-image');
|
|
13
|
+
/*istanbul ignore else */
|
|
14
|
+
if (imageEl) {
|
|
15
|
+
let url;
|
|
16
|
+
if (src) {
|
|
17
|
+
if (src instanceof File || src instanceof Blob) {
|
|
18
|
+
url = this.createBlobUrl(src);
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
url = src;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
// Notice the quotes inside the `url` function. This ensures proper url escaping.
|
|
25
|
+
imageEl.style.backgroundImage = url ? 'url("' + url + '")' : '';
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
destroy() {
|
|
30
|
+
this.revokeBlobUrl();
|
|
31
|
+
}
|
|
32
|
+
createBlobUrl(src) {
|
|
33
|
+
let url = URL.createObjectURL(src);
|
|
34
|
+
// Keep the last blob URL around so we can revoke it later.
|
|
35
|
+
// https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL
|
|
36
|
+
this.blobUrl = url;
|
|
37
|
+
return url;
|
|
38
|
+
}
|
|
39
|
+
revokeBlobUrl() {
|
|
40
|
+
if (this.blobUrl) {
|
|
41
|
+
URL.revokeObjectURL(this.blobUrl);
|
|
42
|
+
this.blobUrl = undefined;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
SkyAvatarAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAvatarAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
47
|
+
SkyAvatarAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAvatarAdapterService });
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAvatarAdapterService, decorators: [{
|
|
49
|
+
type: Injectable
|
|
50
|
+
}] });
|
|
51
|
+
//# sourceMappingURL=avatar-adapter.service.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar-adapter.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/avatar/src/lib/modules/avatar/avatar-adapter.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,UAAU,EAAE,MAAM,eAAe,CAAC;;AAIvD;;GAEG;AAEH,MAAM,OAAO,uBAAuB;IAG3B,WAAW,CAAC,UAAsB,EAAE,GAAiB;QAC1D,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,IAAI,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC;QAElC,yBAAyB;QACzB,IAAI,EAAE,EAAE;YACN,IAAI,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;YAEpD,yBAAyB;YACzB,IAAI,OAAO,EAAE;gBACX,IAAI,GAAW,CAAC;gBAEhB,IAAI,GAAG,EAAE;oBACP,IAAI,GAAG,YAAY,IAAI,IAAI,GAAG,YAAY,IAAI,EAAE;wBAC9C,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;qBAC/B;yBAAM;wBACL,GAAG,GAAG,GAAG,CAAC;qBACX;iBACF;gBAED,iFAAiF;gBACjF,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;aACjE;SACF;IACH,CAAC;IAEM,OAAO;QACZ,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,aAAa,CAAC,GAAgB;QACpC,IAAI,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;QAEnC,2DAA2D;QAC3D,uEAAuE;QACvE,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,OAAO,GAAG,CAAC;IACb,CAAC;IAEO,aAAa;QACnB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAClC,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;SAC1B;IACH,CAAC;;qHAhDU,uBAAuB;yHAAvB,uBAAuB;4FAAvB,uBAAuB;kBADnC,UAAU","sourcesContent":["import { ElementRef, Injectable } from '@angular/core';\n\nimport { SkyAvatarSrc } from './avatar-src';\n\n/**\n * @internal\n */\n@Injectable()\nexport class SkyAvatarAdapterService {\n private blobUrl: string;\n\n public updateImage(elementRef: ElementRef, src: SkyAvatarSrc) {\n this.revokeBlobUrl();\n\n let el = elementRef.nativeElement;\n\n /*istanbul ignore else */\n if (el) {\n let imageEl = el.querySelector('.sky-avatar-image');\n\n /*istanbul ignore else */\n if (imageEl) {\n let url: string;\n\n if (src) {\n if (src instanceof File || src instanceof Blob) {\n url = this.createBlobUrl(src);\n } else {\n url = src;\n }\n }\n\n // Notice the quotes inside the `url` function. This ensures proper url escaping.\n imageEl.style.backgroundImage = url ? 'url(\"' + url + '\")' : '';\n }\n }\n }\n\n public destroy() {\n this.revokeBlobUrl();\n }\n\n private createBlobUrl(src: Blob | File) {\n let url = URL.createObjectURL(src);\n\n // Keep the last blob URL around so we can revoke it later.\n // https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL\n this.blobUrl = url;\n return url;\n }\n\n private revokeBlobUrl() {\n if (this.blobUrl) {\n URL.revokeObjectURL(this.blobUrl);\n this.blobUrl = undefined;\n }\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar-size.js","sourceRoot":"","sources":["../../../../../../../../libs/components/avatar/src/lib/modules/avatar/avatar-size.ts"],"names":[],"mappings":"","sourcesContent":["export type SkyAvatarSize = 'large' | 'medium' | 'small';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar-src.js","sourceRoot":"","sources":["../../../../../../../../libs/components/avatar/src/lib/modules/avatar/avatar-src.ts"],"names":[],"mappings":"","sourcesContent":["export type SkyAvatarSrc = string | Blob | File;\n"]}
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { Component, EventEmitter, Input, Output, ViewEncapsulation, } from '@angular/core';
|
|
2
|
+
import { SkyErrorModalService } from '@skyux/errors';
|
|
3
|
+
import { SkyFileSizePipe } from '@skyux/forms';
|
|
4
|
+
import { SkyLibResourcesService } from '@skyux/i18n';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
import * as i1 from "@skyux/errors";
|
|
7
|
+
import * as i2 from "@skyux/forms";
|
|
8
|
+
import * as i3 from "@skyux/i18n";
|
|
9
|
+
import * as i4 from "./avatar.inner.component";
|
|
10
|
+
import * as i5 from "@angular/common";
|
|
11
|
+
export class SkyAvatarComponent {
|
|
12
|
+
constructor(errorService, fileSizePipe, resourcesService) {
|
|
13
|
+
this.errorService = errorService;
|
|
14
|
+
this.fileSizePipe = fileSizePipe;
|
|
15
|
+
this.resourcesService = resourcesService;
|
|
16
|
+
/**
|
|
17
|
+
* Specifies the maximum file size for the image in bytes.
|
|
18
|
+
*/
|
|
19
|
+
this.maxFileSize = 500000;
|
|
20
|
+
/**
|
|
21
|
+
* Specifies the size of the avatar.
|
|
22
|
+
* Acceptable values are: `"small"`, `"medium"`, and `"large"`.
|
|
23
|
+
* @default "large"
|
|
24
|
+
*/
|
|
25
|
+
this.size = 'large';
|
|
26
|
+
/**
|
|
27
|
+
* Emits a `SkyFileItem` object when the image is updated.
|
|
28
|
+
*/
|
|
29
|
+
this.avatarChanged = new EventEmitter();
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Indicates whether users can change the image. To select a different image,
|
|
33
|
+
* users click the image or drag another image on top of it,
|
|
34
|
+
* much like the `sky-file-drop` component in the
|
|
35
|
+
* [file attachment module](https://developer.blackbaud.com/skyux/components/file-attachments/file-attachment).
|
|
36
|
+
* @default false
|
|
37
|
+
*/
|
|
38
|
+
set canChange(value) {
|
|
39
|
+
this._canChange = value;
|
|
40
|
+
}
|
|
41
|
+
get canChange() {
|
|
42
|
+
return this._canChange;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Specifies the name of the record that the avatar represents.
|
|
46
|
+
* If the `src` property does not specify an image, the component displays
|
|
47
|
+
* initials from the first and last words in the name. To ensure
|
|
48
|
+
* that the component extracts the correct initials, specify a name with no prefix
|
|
49
|
+
* or suffix, or just specify initials with a space between them. This property is
|
|
50
|
+
* not required, but the component requires either the `name` or `src` property.
|
|
51
|
+
*/
|
|
52
|
+
set name(value) {
|
|
53
|
+
this._name = value;
|
|
54
|
+
}
|
|
55
|
+
get name() {
|
|
56
|
+
return this._name;
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Specifies an image to display to identify a record. This property is
|
|
60
|
+
* not required, but the component requires either the `name` or `src` property.
|
|
61
|
+
*/
|
|
62
|
+
set src(value) {
|
|
63
|
+
this._src = value;
|
|
64
|
+
}
|
|
65
|
+
get src() {
|
|
66
|
+
return this._src;
|
|
67
|
+
}
|
|
68
|
+
photoDrop(result) {
|
|
69
|
+
/* sanity check */
|
|
70
|
+
/* istanbul ignore else */
|
|
71
|
+
if (result.files && result.files.length > 0) {
|
|
72
|
+
this.avatarChanged.emit(result.files[0]);
|
|
73
|
+
}
|
|
74
|
+
else if (result.rejectedFiles && result.rejectedFiles.length > 0) {
|
|
75
|
+
this.handleError(result.rejectedFiles);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
handleError(rejectedFiles) {
|
|
79
|
+
const rejectedFile = rejectedFiles[0];
|
|
80
|
+
if (rejectedFile.errorType === 'maxFileSize') {
|
|
81
|
+
const title = this.getString('skyux_avatar_error_too_large_title');
|
|
82
|
+
const description = this.getString('skyux_avatar_error_too_large_description', this.maxFileSizeText());
|
|
83
|
+
this.openErrorModal(title, description);
|
|
84
|
+
}
|
|
85
|
+
else if (rejectedFile.errorType === 'fileType') {
|
|
86
|
+
const title = this.getString('skyux_avatar_error_not_image_title');
|
|
87
|
+
const description = this.getString('skyux_avatar_error_not_image_description');
|
|
88
|
+
this.openErrorModal(title, description);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
maxFileSizeText() {
|
|
92
|
+
return this.fileSizePipe.transform(this.maxFileSize);
|
|
93
|
+
}
|
|
94
|
+
openErrorModal(title, description) {
|
|
95
|
+
const config = {
|
|
96
|
+
errorTitle: title,
|
|
97
|
+
errorDescription: description,
|
|
98
|
+
errorCloseText: this.getString('skyux_avatar_errormodal_ok'),
|
|
99
|
+
};
|
|
100
|
+
this.errorService.open(config);
|
|
101
|
+
}
|
|
102
|
+
getString(key, ...args) {
|
|
103
|
+
// TODO: Need to implement the async `getString` method in a breaking change.
|
|
104
|
+
return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key, ...args);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
SkyAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAvatarComponent, deps: [{ token: i1.SkyErrorModalService }, { token: i2.SkyFileSizePipe }, { token: i3.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
|
|
108
|
+
SkyAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAvatarComponent, selector: "sky-avatar", inputs: { canChange: "canChange", name: "name", src: "src", maxFileSize: "maxFileSize", size: "size" }, outputs: { avatarChanged: "avatarChanged" }, ngImport: i0, template: "<div class=\"sky-avatar\">\n <div *ngIf=\"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\"></ng-container>\n </sky-file-drop>\n </div>\n </div>\n <div *ngIf=\"!canChange\">\n <ng-container *ngTemplateOutlet=\"innerTemplate\"></ng-container>\n </div>\n</div>\n\n<ng-template #innerTemplate>\n <sky-avatar-inner [name]=\"name\" [size]=\"size\" [src]=\"src\"></sky-avatar-inner>\n</ng-template>\n", styles: [".sky-avatar .sky-file-drop-col{flex-basis:initial}.sky-theme-modern .sky-file-drop:focus{outline:none}\n"], components: [{ type: i2.λ8, selector: "sky-file-drop", inputs: ["fileUploadAriaLabel", "linkUploadAriaLabel", "minFileSize", "maxFileSize", "multiple", "validateFn", "acceptedTypes", "noClick", "allowLinks"], outputs: ["filesChanged", "linkInputBlur", "linkChanged"] }, { type: i4.SkyAvatarInnerComponent, selector: "sky-avatar-inner", inputs: ["src", "name", "size"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, encapsulation: i0.ViewEncapsulation.None });
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAvatarComponent, decorators: [{
|
|
110
|
+
type: Component,
|
|
111
|
+
args: [{
|
|
112
|
+
selector: 'sky-avatar',
|
|
113
|
+
templateUrl: './avatar.component.html',
|
|
114
|
+
styleUrls: ['./avatar.component.scss'],
|
|
115
|
+
encapsulation: ViewEncapsulation.None,
|
|
116
|
+
}]
|
|
117
|
+
}], ctorParameters: function () { return [{ type: i1.SkyErrorModalService }, { type: i2.SkyFileSizePipe }, { type: i3.SkyLibResourcesService }]; }, propDecorators: { canChange: [{
|
|
118
|
+
type: Input
|
|
119
|
+
}], name: [{
|
|
120
|
+
type: Input
|
|
121
|
+
}], src: [{
|
|
122
|
+
type: Input
|
|
123
|
+
}], maxFileSize: [{
|
|
124
|
+
type: Input
|
|
125
|
+
}], size: [{
|
|
126
|
+
type: Input
|
|
127
|
+
}], avatarChanged: [{
|
|
128
|
+
type: Output
|
|
129
|
+
}] } });
|
|
130
|
+
//# sourceMappingURL=avatar.component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"avatar.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.component.ts","../../../../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n EventEmitter,\n Input,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { ErrorModalConfig, SkyErrorModalService } from '@skyux/errors';\n\nimport { SkyFileDropChange, SkyFileItem, SkyFileSizePipe } from '@skyux/forms';\n\nimport { SkyLibResourcesService } from '@skyux/i18n';\n\nimport { SkyAvatarSize } from './avatar-size';\n\nimport { SkyAvatarSrc } from './avatar-src';\n\n@Component({\n selector: 'sky-avatar',\n templateUrl: './avatar.component.html',\n styleUrls: ['./avatar.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class SkyAvatarComponent {\n /**\n * Indicates whether users can change the image. To select a different image,\n * users click the image or drag another image on top of it,\n * much like the `sky-file-drop` component in the\n * [file attachment module](https://developer.blackbaud.com/skyux/components/file-attachments/file-attachment).\n * @default false\n */\n @Input()\n public set canChange(value: boolean) {\n this._canChange = value;\n }\n\n public get canChange(): boolean {\n return this._canChange;\n }\n\n /**\n * Specifies the name of the record that the avatar represents.\n * If the `src` property does not specify an image, the component displays\n * initials from the first and last words in the name. To ensure\n * that the component extracts the correct initials, specify a name with no prefix\n * or suffix, or just specify initials with a space between them. This property is\n * not required, but the component requires either the `name` or `src` property.\n */\n @Input()\n public set name(value: string) {\n this._name = value;\n }\n\n public get name(): string {\n return this._name;\n }\n\n /**\n * Specifies an image to display to identify a record. This property is\n * not required, but the component requires either the `name` or `src` property.\n */\n @Input()\n public set src(value: SkyAvatarSrc) {\n this._src = value;\n }\n\n public get src(): SkyAvatarSrc {\n return this._src;\n }\n\n /**\n * Specifies the maximum file size for the image in bytes.\n */\n @Input()\n public maxFileSize = 500000;\n\n /**\n * Specifies the size of the avatar.\n * Acceptable values are: `\"small\"`, `\"medium\"`, and `\"large\"`.\n * @default \"large\"\n */\n @Input()\n public size: SkyAvatarSize = 'large';\n\n /**\n * Emits a `SkyFileItem` object when the image is updated.\n */\n @Output()\n public avatarChanged = new EventEmitter<SkyFileItem>();\n\n private _canChange: boolean;\n\n private _name: string;\n\n private _src: SkyAvatarSrc;\n\n constructor(\n private errorService: SkyErrorModalService,\n private fileSizePipe: SkyFileSizePipe,\n private resourcesService: SkyLibResourcesService\n ) {}\n\n public photoDrop(result: SkyFileDropChange): void {\n /* sanity check */\n /* istanbul ignore else */\n if (result.files && result.files.length > 0) {\n this.avatarChanged.emit(result.files[0]);\n } else if (result.rejectedFiles && result.rejectedFiles.length > 0) {\n this.handleError(result.rejectedFiles);\n }\n }\n\n private handleError(rejectedFiles: Array<SkyFileItem>): void {\n const rejectedFile = rejectedFiles[0];\n\n if (rejectedFile.errorType === 'maxFileSize') {\n const title = this.getString('skyux_avatar_error_too_large_title');\n const description = this.getString(\n 'skyux_avatar_error_too_large_description',\n this.maxFileSizeText()\n );\n\n this.openErrorModal(title, description);\n } else if (rejectedFile.errorType === 'fileType') {\n const title = this.getString('skyux_avatar_error_not_image_title');\n const description = this.getString(\n 'skyux_avatar_error_not_image_description'\n );\n\n this.openErrorModal(title, description);\n }\n }\n\n private maxFileSizeText(): string {\n return this.fileSizePipe.transform(this.maxFileSize);\n }\n\n private openErrorModal(title: string, description: string): void {\n const config: ErrorModalConfig = {\n errorTitle: title,\n errorDescription: description,\n errorCloseText: this.getString('skyux_avatar_errormodal_ok'),\n };\n\n this.errorService.open(config);\n }\n\n private getString(key: string, ...args: any[]): string {\n // TODO: Need to implement the async `getString` method in a breaking change.\n return this.resourcesService.getStringForLocale(\n { locale: 'en-US' },\n key,\n ...args\n );\n }\n}\n","<div class=\"sky-avatar\">\n <div *ngIf=\"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\"></ng-container>\n </sky-file-drop>\n </div>\n </div>\n <div *ngIf=\"!canChange\">\n <ng-container *ngTemplateOutlet=\"innerTemplate\"></ng-container>\n </div>\n</div>\n\n<ng-template #innerTemplate>\n <sky-avatar-inner [name]=\"name\" [size]=\"size\" [src]=\"src\"></sky-avatar-inner>\n</ng-template>\n"]}
|