@skyux/avatar 5.5.0 → 5.6.2
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/bundles/skyux-avatar.umd.js +78 -78
- package/documentation.json +13 -35
- package/esm2015/lib/modules/avatar/avatar-adapter.service.js +3 -3
- package/esm2015/lib/modules/avatar/avatar-adapter.service.js.map +1 -1
- package/esm2015/lib/modules/avatar/avatar.component.js.map +1 -1
- package/esm2015/lib/modules/avatar/avatar.inner.component.js +3 -3
- package/esm2015/lib/modules/avatar/avatar.inner.component.js.map +1 -1
- package/esm2015/lib/modules/avatar/avatar.module.js +2 -2
- package/esm2015/lib/modules/avatar/avatar.module.js.map +1 -1
- package/esm2015/lib/modules/shared/sky-avatar-resources.module.js +1 -1
- package/esm2015/lib/modules/shared/sky-avatar-resources.module.js.map +1 -1
- package/esm2015/testing/avatar-fixture.js.map +1 -1
- package/fesm2015/skyux-avatar-testing.js.map +1 -1
- package/fesm2015/skyux-avatar.js +67 -67
- package/fesm2015/skyux-avatar.js.map +1 -1
- package/package.json +14 -13
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/
|
|
3
|
-
typeof define === 'function' && define.amd ? define('@skyux/avatar', ['exports', '@angular/
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.avatar = {}), global.ng.
|
|
5
|
-
})(this, (function (exports,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@skyux/errors'), require('@skyux/forms'), require('@skyux/i18n'), require('@skyux/theme')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('@skyux/avatar', ['exports', '@angular/common', '@angular/core', '@skyux/errors', '@skyux/forms', '@skyux/i18n', '@skyux/theme'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.avatar = {}), global.ng.common, global.ng.core, global.i1, global.i2$1, global.i3, global.i3$1));
|
|
5
|
+
})(this, (function (exports, i2, i0, i1, i2$1, i3, i3$1) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopNamespace(e) {
|
|
8
8
|
if (e && e.__esModule) return e;
|
|
@@ -22,12 +22,77 @@
|
|
|
22
22
|
return Object.freeze(n);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
|
|
26
25
|
var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
|
|
26
|
+
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
|
|
27
27
|
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
|
|
28
28
|
var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
|
|
29
|
-
var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3
|
|
30
|
-
var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
|
|
29
|
+
var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3);
|
|
30
|
+
var i3__namespace = /*#__PURE__*/_interopNamespace(i3$1);
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
34
|
+
* The contents of this file were automatically generated by
|
|
35
|
+
* the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-avatar' schematic.
|
|
36
|
+
* To update this file, simply rerun the command.
|
|
37
|
+
*/
|
|
38
|
+
var RESOURCES = {
|
|
39
|
+
'EN-US': {
|
|
40
|
+
skyux_avatar_error_not_image_description: {
|
|
41
|
+
message: 'Please choose a file that is a valid image.',
|
|
42
|
+
},
|
|
43
|
+
skyux_avatar_error_not_image_title: { message: 'File is not an image.' },
|
|
44
|
+
skyux_avatar_error_too_large_description: {
|
|
45
|
+
message: 'Please choose an image that is less than {0}.',
|
|
46
|
+
},
|
|
47
|
+
skyux_avatar_error_too_large_title: { message: 'File is too large.' },
|
|
48
|
+
skyux_avatar_errormodal_ok: { message: 'OK' },
|
|
49
|
+
skyux_avatar_inner_description: { message: 'Profile picture of {0}' },
|
|
50
|
+
skyux_avatar_upload_change_aria_label: {
|
|
51
|
+
message: 'Change profile photo of {0}. Drag a file here or click to browse.',
|
|
52
|
+
},
|
|
53
|
+
skyux_avatar_upload_new_aria_label: {
|
|
54
|
+
message: 'Add profile photo of {0}. Drag a file here or click to browse.',
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
};
|
|
58
|
+
var SkyAvatarResourcesProvider = /** @class */ (function () {
|
|
59
|
+
function SkyAvatarResourcesProvider() {
|
|
60
|
+
}
|
|
61
|
+
SkyAvatarResourcesProvider.prototype.getString = function (localeInfo, name) {
|
|
62
|
+
return i3.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
63
|
+
};
|
|
64
|
+
return SkyAvatarResourcesProvider;
|
|
65
|
+
}());
|
|
66
|
+
/**
|
|
67
|
+
* Import into any component library module that needs to use resource strings.
|
|
68
|
+
*/
|
|
69
|
+
var SkyAvatarResourcesModule = /** @class */ (function () {
|
|
70
|
+
function SkyAvatarResourcesModule() {
|
|
71
|
+
}
|
|
72
|
+
return SkyAvatarResourcesModule;
|
|
73
|
+
}());
|
|
74
|
+
SkyAvatarResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
75
|
+
SkyAvatarResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarResourcesModule, exports: [i3.SkyI18nModule] });
|
|
76
|
+
SkyAvatarResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarResourcesModule, providers: [
|
|
77
|
+
{
|
|
78
|
+
provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
|
|
79
|
+
useClass: SkyAvatarResourcesProvider,
|
|
80
|
+
multi: true,
|
|
81
|
+
},
|
|
82
|
+
], imports: [i3.SkyI18nModule] });
|
|
83
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarResourcesModule, decorators: [{
|
|
84
|
+
type: i0.NgModule,
|
|
85
|
+
args: [{
|
|
86
|
+
exports: [i3.SkyI18nModule],
|
|
87
|
+
providers: [
|
|
88
|
+
{
|
|
89
|
+
provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
|
|
90
|
+
useClass: SkyAvatarResourcesProvider,
|
|
91
|
+
multi: true,
|
|
92
|
+
},
|
|
93
|
+
],
|
|
94
|
+
}]
|
|
95
|
+
}] });
|
|
31
96
|
|
|
32
97
|
/*! *****************************************************************************
|
|
33
98
|
Copyright (c) Microsoft Corporation.
|
|
@@ -635,71 +700,6 @@
|
|
|
635
700
|
type: i0.Output
|
|
636
701
|
}] } });
|
|
637
702
|
|
|
638
|
-
/**
|
|
639
|
-
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
640
|
-
* The contents of this file were automatically generated by
|
|
641
|
-
* the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-avatar' schematic.
|
|
642
|
-
* To update this file, simply rerun the command.
|
|
643
|
-
*/
|
|
644
|
-
var RESOURCES = {
|
|
645
|
-
'EN-US': {
|
|
646
|
-
skyux_avatar_error_not_image_description: {
|
|
647
|
-
message: 'Please choose a file that is a valid image.',
|
|
648
|
-
},
|
|
649
|
-
skyux_avatar_error_not_image_title: { message: 'File is not an image.' },
|
|
650
|
-
skyux_avatar_error_too_large_description: {
|
|
651
|
-
message: 'Please choose an image that is less than {0}.',
|
|
652
|
-
},
|
|
653
|
-
skyux_avatar_error_too_large_title: { message: 'File is too large.' },
|
|
654
|
-
skyux_avatar_errormodal_ok: { message: 'OK' },
|
|
655
|
-
skyux_avatar_inner_description: { message: 'Profile picture of {0}' },
|
|
656
|
-
skyux_avatar_upload_change_aria_label: {
|
|
657
|
-
message: 'Change profile photo of {0}. Drag a file here or click to browse.',
|
|
658
|
-
},
|
|
659
|
-
skyux_avatar_upload_new_aria_label: {
|
|
660
|
-
message: 'Add profile photo of {0}. Drag a file here or click to browse.',
|
|
661
|
-
},
|
|
662
|
-
},
|
|
663
|
-
};
|
|
664
|
-
var SkyAvatarResourcesProvider = /** @class */ (function () {
|
|
665
|
-
function SkyAvatarResourcesProvider() {
|
|
666
|
-
}
|
|
667
|
-
SkyAvatarResourcesProvider.prototype.getString = function (localeInfo, name) {
|
|
668
|
-
return i3$1.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
669
|
-
};
|
|
670
|
-
return SkyAvatarResourcesProvider;
|
|
671
|
-
}());
|
|
672
|
-
/**
|
|
673
|
-
* Import into any component library module that needs to use resource strings.
|
|
674
|
-
*/
|
|
675
|
-
var SkyAvatarResourcesModule = /** @class */ (function () {
|
|
676
|
-
function SkyAvatarResourcesModule() {
|
|
677
|
-
}
|
|
678
|
-
return SkyAvatarResourcesModule;
|
|
679
|
-
}());
|
|
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: [
|
|
683
|
-
{
|
|
684
|
-
provide: i3$1.SKY_LIB_RESOURCES_PROVIDERS,
|
|
685
|
-
useClass: SkyAvatarResourcesProvider,
|
|
686
|
-
multi: true,
|
|
687
|
-
},
|
|
688
|
-
], imports: [i3$1.SkyI18nModule] });
|
|
689
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarResourcesModule, decorators: [{
|
|
690
|
-
type: i0.NgModule,
|
|
691
|
-
args: [{
|
|
692
|
-
exports: [i3$1.SkyI18nModule],
|
|
693
|
-
providers: [
|
|
694
|
-
{
|
|
695
|
-
provide: i3$1.SKY_LIB_RESOURCES_PROVIDERS,
|
|
696
|
-
useClass: SkyAvatarResourcesProvider,
|
|
697
|
-
multi: true,
|
|
698
|
-
},
|
|
699
|
-
],
|
|
700
|
-
}]
|
|
701
|
-
}] });
|
|
702
|
-
|
|
703
703
|
var SkyAvatarModule = /** @class */ (function () {
|
|
704
704
|
function SkyAvatarModule() {
|
|
705
705
|
}
|
|
@@ -710,15 +710,15 @@
|
|
|
710
710
|
SkyAvatarResourcesModule,
|
|
711
711
|
i1.SkyErrorModule,
|
|
712
712
|
i2$1.SkyFileAttachmentsModule,
|
|
713
|
-
i3
|
|
714
|
-
i3.SkyThemeModule], exports: [SkyAvatarComponent] });
|
|
713
|
+
i3.SkyI18nModule,
|
|
714
|
+
i3$1.SkyThemeModule], exports: [SkyAvatarComponent] });
|
|
715
715
|
SkyAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarModule, providers: [i2$1.SkyFileSizePipe], imports: [[
|
|
716
716
|
i2.CommonModule,
|
|
717
717
|
SkyAvatarResourcesModule,
|
|
718
718
|
i1.SkyErrorModule,
|
|
719
719
|
i2$1.SkyFileAttachmentsModule,
|
|
720
|
-
i3
|
|
721
|
-
i3.SkyThemeModule,
|
|
720
|
+
i3.SkyI18nModule,
|
|
721
|
+
i3$1.SkyThemeModule,
|
|
722
722
|
]] });
|
|
723
723
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarModule, decorators: [{
|
|
724
724
|
type: i0.NgModule,
|
|
@@ -729,8 +729,8 @@
|
|
|
729
729
|
SkyAvatarResourcesModule,
|
|
730
730
|
i1.SkyErrorModule,
|
|
731
731
|
i2$1.SkyFileAttachmentsModule,
|
|
732
|
-
i3
|
|
733
|
-
i3.SkyThemeModule,
|
|
732
|
+
i3.SkyI18nModule,
|
|
733
|
+
i3$1.SkyThemeModule,
|
|
734
734
|
],
|
|
735
735
|
providers: [i2$1.SkyFileSizePipe],
|
|
736
736
|
exports: [SkyAvatarComponent],
|
package/documentation.json
CHANGED
|
@@ -33,29 +33,7 @@
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
],
|
|
36
|
-
"children": [
|
|
37
|
-
{
|
|
38
|
-
"id": 44,
|
|
39
|
-
"name": "constructor",
|
|
40
|
-
"kind": 512,
|
|
41
|
-
"kindString": "Constructor",
|
|
42
|
-
"flags": {},
|
|
43
|
-
"signatures": [
|
|
44
|
-
{
|
|
45
|
-
"id": 45,
|
|
46
|
-
"name": "new SkyAvatarModule",
|
|
47
|
-
"kind": 16384,
|
|
48
|
-
"kindString": "Constructor signature",
|
|
49
|
-
"flags": {},
|
|
50
|
-
"type": {
|
|
51
|
-
"type": "reference",
|
|
52
|
-
"id": 43,
|
|
53
|
-
"name": "SkyAvatarModule"
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
]
|
|
57
|
-
}
|
|
58
|
-
],
|
|
36
|
+
"children": [],
|
|
59
37
|
"groups": [
|
|
60
38
|
{
|
|
61
39
|
"title": "Constructors",
|
|
@@ -68,7 +46,7 @@
|
|
|
68
46
|
"sources": [
|
|
69
47
|
{
|
|
70
48
|
"fileName": "projects/avatar/src/modules/avatar/avatar.module.ts",
|
|
71
|
-
"line":
|
|
49
|
+
"line": 26,
|
|
72
50
|
"character": 13
|
|
73
51
|
}
|
|
74
52
|
]
|
|
@@ -103,7 +81,7 @@
|
|
|
103
81
|
"sources": [
|
|
104
82
|
{
|
|
105
83
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
106
|
-
"line":
|
|
84
|
+
"line": 94,
|
|
107
85
|
"character": 2
|
|
108
86
|
}
|
|
109
87
|
],
|
|
@@ -183,7 +161,7 @@
|
|
|
183
161
|
"sources": [
|
|
184
162
|
{
|
|
185
163
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
186
|
-
"line":
|
|
164
|
+
"line": 86,
|
|
187
165
|
"character": 9
|
|
188
166
|
}
|
|
189
167
|
],
|
|
@@ -227,7 +205,7 @@
|
|
|
227
205
|
"sources": [
|
|
228
206
|
{
|
|
229
207
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
230
|
-
"line":
|
|
208
|
+
"line": 72,
|
|
231
209
|
"character": 9
|
|
232
210
|
}
|
|
233
211
|
],
|
|
@@ -269,7 +247,7 @@
|
|
|
269
247
|
"sources": [
|
|
270
248
|
{
|
|
271
249
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
272
|
-
"line":
|
|
250
|
+
"line": 80,
|
|
273
251
|
"character": 9
|
|
274
252
|
}
|
|
275
253
|
],
|
|
@@ -303,7 +281,7 @@
|
|
|
303
281
|
"sources": [
|
|
304
282
|
{
|
|
305
283
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
306
|
-
"line":
|
|
284
|
+
"line": 30,
|
|
307
285
|
"character": 13
|
|
308
286
|
}
|
|
309
287
|
],
|
|
@@ -388,7 +366,7 @@
|
|
|
388
366
|
"sources": [
|
|
389
367
|
{
|
|
390
368
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
391
|
-
"line":
|
|
369
|
+
"line": 47,
|
|
392
370
|
"character": 13
|
|
393
371
|
}
|
|
394
372
|
],
|
|
@@ -461,7 +439,7 @@
|
|
|
461
439
|
"sources": [
|
|
462
440
|
{
|
|
463
441
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
464
|
-
"line":
|
|
442
|
+
"line": 60,
|
|
465
443
|
"character": 13
|
|
466
444
|
}
|
|
467
445
|
],
|
|
@@ -524,7 +502,7 @@
|
|
|
524
502
|
"sources": [
|
|
525
503
|
{
|
|
526
504
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
527
|
-
"line":
|
|
505
|
+
"line": 100,
|
|
528
506
|
"character": 9
|
|
529
507
|
}
|
|
530
508
|
],
|
|
@@ -593,7 +571,7 @@
|
|
|
593
571
|
"sources": [
|
|
594
572
|
{
|
|
595
573
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
596
|
-
"line":
|
|
574
|
+
"line": 21,
|
|
597
575
|
"character": 13
|
|
598
576
|
}
|
|
599
577
|
]
|
|
@@ -700,12 +678,12 @@
|
|
|
700
678
|
{
|
|
701
679
|
"fileName": "avatar-demo.component.ts",
|
|
702
680
|
"filePath": "/projects/avatar/documentation/code-examples/avatar/avatar-demo.component.ts",
|
|
703
|
-
"rawContents": "import { Component } from '@angular/core';\
|
|
681
|
+
"rawContents": "import { Component } from '@angular/core';\nimport { SkyFileItem } from '@skyux/forms';\n\n@Component({\n selector: 'app-avatar-demo',\n templateUrl: './avatar-demo.component.html',\n})\nexport class AvatarDemoComponent {\n public avatarUrl: string | File = 'https://imgur.com/tBiGElW.png';\n\n public name = 'Robert C. Hernandez';\n\n public updateSrc(fileItem: SkyFileItem): void {\n /*\n This is where you might upload the new avatar,\n but for this demo we'll just update it locally.\n */\n if (fileItem) {\n this.avatarUrl = fileItem.file;\n }\n }\n}\n"
|
|
704
682
|
},
|
|
705
683
|
{
|
|
706
684
|
"fileName": "avatar-demo.module.ts",
|
|
707
685
|
"filePath": "/projects/avatar/documentation/code-examples/avatar/avatar-demo.module.ts",
|
|
708
|
-
"rawContents": "import { NgModule } from '@angular/core';\
|
|
686
|
+
"rawContents": "import { NgModule } from '@angular/core';\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"
|
|
709
687
|
}
|
|
710
688
|
]
|
|
711
689
|
}
|
|
@@ -6,10 +6,10 @@ import * as i0 from "@angular/core";
|
|
|
6
6
|
export class SkyAvatarAdapterService {
|
|
7
7
|
updateImage(elementRef, src) {
|
|
8
8
|
this.revokeBlobUrl();
|
|
9
|
-
|
|
9
|
+
const el = elementRef.nativeElement;
|
|
10
10
|
/*istanbul ignore else */
|
|
11
11
|
if (el) {
|
|
12
|
-
|
|
12
|
+
const imageEl = el.querySelector('.sky-avatar-image');
|
|
13
13
|
/*istanbul ignore else */
|
|
14
14
|
if (imageEl) {
|
|
15
15
|
let url;
|
|
@@ -30,7 +30,7 @@ export class SkyAvatarAdapterService {
|
|
|
30
30
|
this.revokeBlobUrl();
|
|
31
31
|
}
|
|
32
32
|
createBlobUrl(src) {
|
|
33
|
-
|
|
33
|
+
const url = URL.createObjectURL(src);
|
|
34
34
|
// Keep the last blob URL around so we can revoke it later.
|
|
35
35
|
// https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL
|
|
36
36
|
this.blobUrl = url;
|
|
@@ -1 +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,
|
|
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,MAAM,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC;QAEpC,yBAAyB;QACzB,IAAI,EAAE,EAAE;YACN,MAAM,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;YAEtD,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,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;QAErC,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 const el = elementRef.nativeElement;\n\n /*istanbul ignore else */\n if (el) {\n const 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 const 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"]}
|
|
@@ -1 +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":"AAAA,OAAO,EACL,SAAS,EACT,YAAY,EACZ,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;
|
|
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';\nimport { ErrorModalConfig, SkyErrorModalService } from '@skyux/errors';\nimport { SkyFileDropChange, SkyFileItem, SkyFileSizePipe } from '@skyux/forms';\nimport { SkyLibResourcesService } from '@skyux/i18n';\n\nimport { SkyAvatarSize } from './avatar-size';\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"]}
|
|
@@ -29,7 +29,7 @@ export class SkyAvatarInnerComponent {
|
|
|
29
29
|
get initials() {
|
|
30
30
|
let initials;
|
|
31
31
|
if (this.name) {
|
|
32
|
-
|
|
32
|
+
const nameSplit = this.name.split(' ');
|
|
33
33
|
initials = getInitial(nameSplit[0]);
|
|
34
34
|
if (nameSplit.length > 1) {
|
|
35
35
|
initials += getInitial(nameSplit[nameSplit.length - 1]);
|
|
@@ -38,12 +38,12 @@ export class SkyAvatarInnerComponent {
|
|
|
38
38
|
return initials;
|
|
39
39
|
}
|
|
40
40
|
get colorIndex() {
|
|
41
|
-
|
|
41
|
+
const name = this.name;
|
|
42
42
|
let colorIndex;
|
|
43
43
|
if (name) {
|
|
44
44
|
// Generate a unique-ish color based on the record name. This is deterministic
|
|
45
45
|
// so that a given name will always generate the same color.
|
|
46
|
-
|
|
46
|
+
const seed = name.charCodeAt(0) + name.charCodeAt(name.length - 1) + name.length;
|
|
47
47
|
colorIndex = Math.abs(seed % 6);
|
|
48
48
|
}
|
|
49
49
|
else {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.inner.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.inner.component.ts","../../../../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.inner.component.html"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,UAAU,EACV,KAAK,EAEL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;;;;;;
|
|
1
|
+
{"version":3,"file":"avatar.inner.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.inner.component.ts","../../../../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.inner.component.html"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,UAAU,EACV,KAAK,EAEL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;;;;;;AAInE;;GAEG;AAQH,MAAM,OAAO,uBAAuB;IA6BlC,YACU,UAAsB,EACtB,OAAgC;QADhC,eAAU,GAAV,UAAU,CAAY;QACtB,YAAO,GAAP,OAAO,CAAyB;IACvC,CAAC;IA/BJ,IAAW,GAAG;QACZ,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED,IACW,GAAG,CAAC,KAAmB;QAChC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAED,IACW,IAAI,CAAC,KAAa;QAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAgBD,IAAW,QAAQ;QACjB,IAAI,QAAgB,CAAC;QAErB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACvC,QAAQ,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;YAEpC,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;gBACxB,QAAQ,IAAI,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;aACzD;SACF;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,IAAW,UAAU;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,UAAkB,CAAC;QAEvB,IAAI,IAAI,EAAE;YACR,+EAA+E;YAC/E,4DAA4D;YAC5D,MAAM,IAAI,GACR,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;YACtE,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;SACjC;aAAM;YACL,UAAU,GAAG,CAAC,CAAC;SAChB;QAED,OAAO,UAAU,CAAC;IACpB,CAAC;IAEM,eAAe;QACpB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;IACzB,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;SACrD;IACH,CAAC;;qHA/EU,uBAAuB;yGAAvB,uBAAuB,+FAHvB,CAAC,uBAAuB,CAAC,0BCpBtC,ulCA0CA;4FDnBa,uBAAuB;kBAPnC,SAAS;mBAAC;oBACT,QAAQ,EAAE,kBAAkB;oBAC5B,WAAW,EAAE,+BAA+B;oBAC5C,SAAS,EAAE,CAAC,+BAA+B,CAAC;oBAC5C,SAAS,EAAE,CAAC,uBAAuB,CAAC;oBACpC,aAAa,EAAE,iBAAiB,CAAC,IAAI;iBACtC;uIAOY,GAAG;sBADb,KAAK;gBAWK,IAAI;sBADd,KAAK;gBAMC,IAAI;sBADV,KAAK;;AA8DR,SAAS,UAAU,CAAC,IAAY;IAC9B,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AACtC,CAAC","sourcesContent":["import {\n AfterViewInit,\n Component,\n ElementRef,\n Input,\n OnDestroy,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { SkyAvatarAdapterService } from './avatar-adapter.service';\nimport { SkyAvatarSize } from './avatar-size';\nimport { SkyAvatarSrc } from './avatar-src';\n\n/**\n * @internal\n */\n@Component({\n selector: 'sky-avatar-inner',\n templateUrl: './avatar.inner.component.html',\n styleUrls: ['./avatar.inner.component.scss'],\n providers: [SkyAvatarAdapterService],\n encapsulation: ViewEncapsulation.None,\n})\nexport class SkyAvatarInnerComponent implements AfterViewInit, OnDestroy {\n public get src(): SkyAvatarSrc {\n return this._src;\n }\n\n @Input()\n public set src(value: SkyAvatarSrc) {\n this._src = value;\n this.updateImage();\n }\n\n public get name(): string {\n return this._name;\n }\n\n @Input()\n public set name(value: string) {\n this._name = value;\n }\n\n @Input()\n public size: SkyAvatarSize;\n\n private viewInitialized: boolean;\n\n private _src: SkyAvatarSrc;\n\n private _name: string;\n\n constructor(\n private elementRef: ElementRef,\n private adapter: SkyAvatarAdapterService\n ) {}\n\n public get initials(): string {\n let initials: string;\n\n if (this.name) {\n const nameSplit = this.name.split(' ');\n initials = getInitial(nameSplit[0]);\n\n if (nameSplit.length > 1) {\n initials += getInitial(nameSplit[nameSplit.length - 1]);\n }\n }\n\n return initials;\n }\n\n public get colorIndex(): number {\n const name = this.name;\n let colorIndex: number;\n\n if (name) {\n // Generate a unique-ish color based on the record name. This is deterministic\n // so that a given name will always generate the same color.\n const seed =\n name.charCodeAt(0) + name.charCodeAt(name.length - 1) + name.length;\n colorIndex = Math.abs(seed % 6);\n } else {\n colorIndex = 0;\n }\n\n return colorIndex;\n }\n\n public ngAfterViewInit() {\n this.viewInitialized = true;\n this.updateImage();\n }\n\n public ngOnDestroy() {\n this.adapter.destroy();\n }\n\n private updateImage() {\n if (this.viewInitialized) {\n this.adapter.updateImage(this.elementRef, this.src);\n }\n }\n}\n\nfunction getInitial(name: string): string {\n return name.charAt(0).toUpperCase();\n}\n","<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"]}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { NgModule } from '@angular/core';
|
|
2
1
|
import { CommonModule } from '@angular/common';
|
|
2
|
+
import { NgModule } from '@angular/core';
|
|
3
3
|
import { SkyErrorModule } from '@skyux/errors';
|
|
4
4
|
import { SkyFileAttachmentsModule, SkyFileSizePipe } from '@skyux/forms';
|
|
5
5
|
import { SkyI18nModule } from '@skyux/i18n';
|
|
6
6
|
import { SkyThemeModule } from '@skyux/theme';
|
|
7
|
+
import { SkyAvatarResourcesModule } from '../shared/sky-avatar-resources.module';
|
|
7
8
|
import { SkyAvatarComponent } from './avatar.component';
|
|
8
9
|
import { SkyAvatarInnerComponent } from './avatar.inner.component';
|
|
9
|
-
import { SkyAvatarResourcesModule } from '../shared/sky-avatar-resources.module';
|
|
10
10
|
import * as i0 from "@angular/core";
|
|
11
11
|
export class SkyAvatarModule {
|
|
12
12
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"avatar.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AAEjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;;AAenE,MAAM,OAAO,eAAe;;6GAAf,eAAe;8GAAf,eAAe,iBAZX,uBAAuB,EAAE,kBAAkB,aAExD,YAAY;QACZ,wBAAwB;QACxB,cAAc;QACd,wBAAwB;QACxB,aAAa;QACb,cAAc,aAGN,kBAAkB;8GAEjB,eAAe,aAHf,CAAC,eAAe,CAAC,YARnB;YACP,YAAY;YACZ,wBAAwB;YACxB,cAAc;YACd,wBAAwB;YACxB,aAAa;YACb,cAAc;SACf;4FAIU,eAAe;kBAb3B,QAAQ;mBAAC;oBACR,YAAY,EAAE,CAAC,uBAAuB,EAAE,kBAAkB,CAAC;oBAC3D,OAAO,EAAE;wBACP,YAAY;wBACZ,wBAAwB;wBACxB,cAAc;wBACd,wBAAwB;wBACxB,aAAa;wBACb,cAAc;qBACf;oBACD,SAAS,EAAE,CAAC,eAAe,CAAC;oBAC5B,OAAO,EAAE,CAAC,kBAAkB,CAAC;iBAC9B","sourcesContent":["import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyErrorModule } from '@skyux/errors';\nimport { SkyFileAttachmentsModule, SkyFileSizePipe } from '@skyux/forms';\nimport { SkyI18nModule } from '@skyux/i18n';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyAvatarResourcesModule } from '../shared/sky-avatar-resources.module';\n\nimport { SkyAvatarComponent } from './avatar.component';\nimport { SkyAvatarInnerComponent } from './avatar.inner.component';\n\n@NgModule({\n declarations: [SkyAvatarInnerComponent, SkyAvatarComponent],\n imports: [\n CommonModule,\n SkyAvatarResourcesModule,\n SkyErrorModule,\n SkyFileAttachmentsModule,\n SkyI18nModule,\n SkyThemeModule,\n ],\n providers: [SkyFileSizePipe],\n exports: [SkyAvatarComponent],\n})\nexport class SkyAvatarModule {}\n"]}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* To update this file, simply rerun the command.
|
|
6
6
|
*/
|
|
7
7
|
import { NgModule } from '@angular/core';
|
|
8
|
-
import {
|
|
8
|
+
import { SKY_LIB_RESOURCES_PROVIDERS, SkyI18nModule, getLibStringForLocale, } from '@skyux/i18n';
|
|
9
9
|
import * as i0 from "@angular/core";
|
|
10
10
|
const RESOURCES = {
|
|
11
11
|
'EN-US': {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sky-avatar-resources.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/avatar/src/lib/modules/shared/sky-avatar-resources.module.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;
|
|
1
|
+
{"version":3,"file":"sky-avatar-resources.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/avatar/src/lib/modules/shared/sky-avatar-resources.module.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EACL,2BAA2B,EAE3B,aAAa,EAGb,qBAAqB,GACtB,MAAM,aAAa,CAAC;;AAErB,MAAM,SAAS,GAA0C;IACvD,OAAO,EAAE;QACP,wCAAwC,EAAE;YACxC,OAAO,EAAE,6CAA6C;SACvD;QACD,kCAAkC,EAAE,EAAE,OAAO,EAAE,uBAAuB,EAAE;QACxE,wCAAwC,EAAE;YACxC,OAAO,EAAE,+CAA+C;SACzD;QACD,kCAAkC,EAAE,EAAE,OAAO,EAAE,oBAAoB,EAAE;QACrE,0BAA0B,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC7C,8BAA8B,EAAE,EAAE,OAAO,EAAE,wBAAwB,EAAE;QACrE,qCAAqC,EAAE;YACrC,OAAO,EACL,mEAAmE;SACtE;QACD,kCAAkC,EAAE;YAClC,OAAO,EAAE,gEAAgE;SAC1E;KACF;CACF,CAAC;AAEF,MAAM,OAAO,0BAA0B;IAC9B,SAAS,CAAC,UAA4B,EAAE,IAAY;QACzD,OAAO,qBAAqB,CAAC,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnE,CAAC;CACF;AAED;;GAEG;AAWH,MAAM,OAAO,wBAAwB;;sHAAxB,wBAAwB;uHAAxB,wBAAwB,YATzB,aAAa;uHASZ,wBAAwB,aARxB;QACT;YACE,OAAO,EAAE,2BAA2B;YACpC,QAAQ,EAAE,0BAA0B;YACpC,KAAK,EAAE,IAAI;SACZ;KACF,YAPS,aAAa;4FASZ,wBAAwB;kBAVpC,QAAQ;mBAAC;oBACR,OAAO,EAAE,CAAC,aAAa,CAAC;oBACxB,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,2BAA2B;4BACpC,QAAQ,EAAE,0BAA0B;4BACpC,KAAK,EAAE,IAAI;yBACZ;qBACF;iBACF","sourcesContent":["/**\n * NOTICE: DO NOT MODIFY THIS FILE!\n * The contents of this file were automatically generated by\n * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-avatar' schematic.\n * To update this file, simply rerun the command.\n */\nimport { NgModule } from '@angular/core';\nimport {\n SKY_LIB_RESOURCES_PROVIDERS,\n SkyAppLocaleInfo,\n SkyI18nModule,\n SkyLibResources,\n SkyLibResourcesProvider,\n getLibStringForLocale,\n} from '@skyux/i18n';\n\nconst RESOURCES: { [locale: string]: SkyLibResources } = {\n 'EN-US': {\n skyux_avatar_error_not_image_description: {\n message: 'Please choose a file that is a valid image.',\n },\n skyux_avatar_error_not_image_title: { message: 'File is not an image.' },\n skyux_avatar_error_too_large_description: {\n message: 'Please choose an image that is less than {0}.',\n },\n skyux_avatar_error_too_large_title: { message: 'File is too large.' },\n skyux_avatar_errormodal_ok: { message: 'OK' },\n skyux_avatar_inner_description: { message: 'Profile picture of {0}' },\n skyux_avatar_upload_change_aria_label: {\n message:\n 'Change profile photo of {0}. Drag a file here or click to browse.',\n },\n skyux_avatar_upload_new_aria_label: {\n message: 'Add profile photo of {0}. Drag a file here or click to browse.',\n },\n },\n};\n\nexport class SkyAvatarResourcesProvider implements SkyLibResourcesProvider {\n public getString(localeInfo: SkyAppLocaleInfo, name: string): string {\n return getLibStringForLocale(RESOURCES, localeInfo.locale, name);\n }\n}\n\n/**\n * Import into any component library module that needs to use resource strings.\n */\n@NgModule({\n exports: [SkyI18nModule],\n providers: [\n {\n provide: SKY_LIB_RESOURCES_PROVIDERS,\n useClass: SkyAvatarResourcesProvider,\n multi: true,\n },\n ],\n})\nexport class SkyAvatarResourcesModule {}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar-fixture.js","sourceRoot":"","sources":["../../../../../../libs/components/avatar/testing/src/avatar-fixture.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"avatar-fixture.js","sourceRoot":"","sources":["../../../../../../libs/components/avatar/testing/src/avatar-fixture.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,2BAA2B,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;GAEG;AACH,MAAM,OAAO,gBAAgB;IA+B3B,YAAY,OAA8B,EAAE,SAAiB;QAC3D,IAAI,CAAC,OAAO,GAAG,iBAAiB,CAAC,uBAAuB,CACtD,OAAO,EACP,SAAS,EACT,YAAY,CACb,CAAC;IACJ,CAAC;IApCD;;OAEG;IACH,IAAW,QAAQ;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC,CAAC;QAEtE,IAAI,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE;YAC3C,OAAO,iBAAiB,CAAC,OAAO,CAC9B,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC,CACvD,CAAC;SACH;QAED,OAAO,SAAS,CAAC;IACnB,CAAC;IAED;;OAEG;IACH,IAAW,QAAQ;QACjB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAEhE,IAAI,iBAAiB,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE;YACxC,OAAO,iBAAiB,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;SACzD;QAED,OAAO,SAAS,CAAC;IACnB,CAAC;CAWF","sourcesContent":["import { DebugElement } from '@angular/core';\nimport { ComponentFixture } from '@angular/core/testing';\nimport { By } from '@angular/platform-browser';\nimport { SkyAppTestUtility } from '@skyux-sdk/testing';\n\n/**\n * Allows interaction with a SKY UX avatar component.\n */\nexport class SkyAvatarFixture {\n /**\n * The initials displayed when no image URL is specified.\n */\n public get initials(): string {\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 {\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 private 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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skyux-avatar-testing.js","sources":["../../../../../libs/components/avatar/testing/src/avatar-fixture.ts","../../../../../libs/components/avatar/testing/src/skyux-avatar-testing.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"skyux-avatar-testing.js","sources":["../../../../../libs/components/avatar/testing/src/avatar-fixture.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-sdk/testing';\n\n/**\n * Allows interaction with a SKY UX avatar component.\n */\nexport class SkyAvatarFixture {\n /**\n * The initials displayed when no image URL is specified.\n */\n public get initials(): string {\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 {\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 private 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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAKA;;;MAGa,gBAAgB;IA+B3B,YAAY,OAA8B,EAAE,SAAiB;QAC3D,IAAI,CAAC,OAAO,GAAG,iBAAiB,CAAC,uBAAuB,CACtD,OAAO,EACP,SAAS,EACT,YAAY,CACb,CAAC;KACH;;;;IAjCD,IAAW,QAAQ;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC,CAAC;QAEtE,IAAI,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE;YAC3C,OAAO,iBAAiB,CAAC,OAAO,CAC9B,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC,CACvD,CAAC;SACH;QAED,OAAO,SAAS,CAAC;KAClB;;;;IAKD,IAAW,QAAQ;QACjB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAEhE,IAAI,iBAAiB,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE;YACxC,OAAO,iBAAiB,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;SACzD;QAED,OAAO,SAAS,CAAC;KAClB;;;ACnCH;;;;;;"}
|
package/fesm2015/skyux-avatar.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, ViewEncapsulation, Input, EventEmitter, Output, NgModule } from '@angular/core';
|
|
3
1
|
import * as i2 from '@angular/common';
|
|
4
2
|
import { CommonModule } from '@angular/common';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { NgModule, Injectable, Component, ViewEncapsulation, Input, EventEmitter, Output } from '@angular/core';
|
|
5
5
|
import * as i1 from '@skyux/errors';
|
|
6
6
|
import { SkyErrorModule } from '@skyux/errors';
|
|
7
7
|
import * as i2$1 from '@skyux/forms';
|
|
@@ -11,16 +11,75 @@ import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } fro
|
|
|
11
11
|
import * as i3 from '@skyux/theme';
|
|
12
12
|
import { SkyThemeModule } from '@skyux/theme';
|
|
13
13
|
|
|
14
|
+
/**
|
|
15
|
+
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
16
|
+
* The contents of this file were automatically generated by
|
|
17
|
+
* the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-avatar' schematic.
|
|
18
|
+
* To update this file, simply rerun the command.
|
|
19
|
+
*/
|
|
20
|
+
const RESOURCES = {
|
|
21
|
+
'EN-US': {
|
|
22
|
+
skyux_avatar_error_not_image_description: {
|
|
23
|
+
message: 'Please choose a file that is a valid image.',
|
|
24
|
+
},
|
|
25
|
+
skyux_avatar_error_not_image_title: { message: 'File is not an image.' },
|
|
26
|
+
skyux_avatar_error_too_large_description: {
|
|
27
|
+
message: 'Please choose an image that is less than {0}.',
|
|
28
|
+
},
|
|
29
|
+
skyux_avatar_error_too_large_title: { message: 'File is too large.' },
|
|
30
|
+
skyux_avatar_errormodal_ok: { message: 'OK' },
|
|
31
|
+
skyux_avatar_inner_description: { message: 'Profile picture of {0}' },
|
|
32
|
+
skyux_avatar_upload_change_aria_label: {
|
|
33
|
+
message: 'Change profile photo of {0}. Drag a file here or click to browse.',
|
|
34
|
+
},
|
|
35
|
+
skyux_avatar_upload_new_aria_label: {
|
|
36
|
+
message: 'Add profile photo of {0}. Drag a file here or click to browse.',
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
class SkyAvatarResourcesProvider {
|
|
41
|
+
getString(localeInfo, name) {
|
|
42
|
+
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Import into any component library module that needs to use resource strings.
|
|
47
|
+
*/
|
|
48
|
+
class SkyAvatarResourcesModule {
|
|
49
|
+
}
|
|
50
|
+
SkyAvatarResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAvatarResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
51
|
+
SkyAvatarResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAvatarResourcesModule, exports: [SkyI18nModule] });
|
|
52
|
+
SkyAvatarResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAvatarResourcesModule, providers: [
|
|
53
|
+
{
|
|
54
|
+
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
55
|
+
useClass: SkyAvatarResourcesProvider,
|
|
56
|
+
multi: true,
|
|
57
|
+
},
|
|
58
|
+
], imports: [SkyI18nModule] });
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAvatarResourcesModule, decorators: [{
|
|
60
|
+
type: NgModule,
|
|
61
|
+
args: [{
|
|
62
|
+
exports: [SkyI18nModule],
|
|
63
|
+
providers: [
|
|
64
|
+
{
|
|
65
|
+
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
66
|
+
useClass: SkyAvatarResourcesProvider,
|
|
67
|
+
multi: true,
|
|
68
|
+
},
|
|
69
|
+
],
|
|
70
|
+
}]
|
|
71
|
+
}] });
|
|
72
|
+
|
|
14
73
|
/**
|
|
15
74
|
* @internal
|
|
16
75
|
*/
|
|
17
76
|
class SkyAvatarAdapterService {
|
|
18
77
|
updateImage(elementRef, src) {
|
|
19
78
|
this.revokeBlobUrl();
|
|
20
|
-
|
|
79
|
+
const el = elementRef.nativeElement;
|
|
21
80
|
/*istanbul ignore else */
|
|
22
81
|
if (el) {
|
|
23
|
-
|
|
82
|
+
const imageEl = el.querySelector('.sky-avatar-image');
|
|
24
83
|
/*istanbul ignore else */
|
|
25
84
|
if (imageEl) {
|
|
26
85
|
let url;
|
|
@@ -41,7 +100,7 @@ class SkyAvatarAdapterService {
|
|
|
41
100
|
this.revokeBlobUrl();
|
|
42
101
|
}
|
|
43
102
|
createBlobUrl(src) {
|
|
44
|
-
|
|
103
|
+
const url = URL.createObjectURL(src);
|
|
45
104
|
// Keep the last blob URL around so we can revoke it later.
|
|
46
105
|
// https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL
|
|
47
106
|
this.blobUrl = url;
|
|
@@ -84,7 +143,7 @@ class SkyAvatarInnerComponent {
|
|
|
84
143
|
get initials() {
|
|
85
144
|
let initials;
|
|
86
145
|
if (this.name) {
|
|
87
|
-
|
|
146
|
+
const nameSplit = this.name.split(' ');
|
|
88
147
|
initials = getInitial(nameSplit[0]);
|
|
89
148
|
if (nameSplit.length > 1) {
|
|
90
149
|
initials += getInitial(nameSplit[nameSplit.length - 1]);
|
|
@@ -93,12 +152,12 @@ class SkyAvatarInnerComponent {
|
|
|
93
152
|
return initials;
|
|
94
153
|
}
|
|
95
154
|
get colorIndex() {
|
|
96
|
-
|
|
155
|
+
const name = this.name;
|
|
97
156
|
let colorIndex;
|
|
98
157
|
if (name) {
|
|
99
158
|
// Generate a unique-ish color based on the record name. This is deterministic
|
|
100
159
|
// so that a given name will always generate the same color.
|
|
101
|
-
|
|
160
|
+
const seed = name.charCodeAt(0) + name.charCodeAt(name.length - 1) + name.length;
|
|
102
161
|
colorIndex = Math.abs(seed % 6);
|
|
103
162
|
}
|
|
104
163
|
else {
|
|
@@ -261,65 +320,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
261
320
|
type: Output
|
|
262
321
|
}] } });
|
|
263
322
|
|
|
264
|
-
/**
|
|
265
|
-
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
266
|
-
* The contents of this file were automatically generated by
|
|
267
|
-
* the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-avatar' schematic.
|
|
268
|
-
* To update this file, simply rerun the command.
|
|
269
|
-
*/
|
|
270
|
-
const RESOURCES = {
|
|
271
|
-
'EN-US': {
|
|
272
|
-
skyux_avatar_error_not_image_description: {
|
|
273
|
-
message: 'Please choose a file that is a valid image.',
|
|
274
|
-
},
|
|
275
|
-
skyux_avatar_error_not_image_title: { message: 'File is not an image.' },
|
|
276
|
-
skyux_avatar_error_too_large_description: {
|
|
277
|
-
message: 'Please choose an image that is less than {0}.',
|
|
278
|
-
},
|
|
279
|
-
skyux_avatar_error_too_large_title: { message: 'File is too large.' },
|
|
280
|
-
skyux_avatar_errormodal_ok: { message: 'OK' },
|
|
281
|
-
skyux_avatar_inner_description: { message: 'Profile picture of {0}' },
|
|
282
|
-
skyux_avatar_upload_change_aria_label: {
|
|
283
|
-
message: 'Change profile photo of {0}. Drag a file here or click to browse.',
|
|
284
|
-
},
|
|
285
|
-
skyux_avatar_upload_new_aria_label: {
|
|
286
|
-
message: 'Add profile photo of {0}. Drag a file here or click to browse.',
|
|
287
|
-
},
|
|
288
|
-
},
|
|
289
|
-
};
|
|
290
|
-
class SkyAvatarResourcesProvider {
|
|
291
|
-
getString(localeInfo, name) {
|
|
292
|
-
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
|
-
/**
|
|
296
|
-
* Import into any component library module that needs to use resource strings.
|
|
297
|
-
*/
|
|
298
|
-
class SkyAvatarResourcesModule {
|
|
299
|
-
}
|
|
300
|
-
SkyAvatarResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAvatarResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
301
|
-
SkyAvatarResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAvatarResourcesModule, exports: [SkyI18nModule] });
|
|
302
|
-
SkyAvatarResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAvatarResourcesModule, providers: [
|
|
303
|
-
{
|
|
304
|
-
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
305
|
-
useClass: SkyAvatarResourcesProvider,
|
|
306
|
-
multi: true,
|
|
307
|
-
},
|
|
308
|
-
], imports: [SkyI18nModule] });
|
|
309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAvatarResourcesModule, decorators: [{
|
|
310
|
-
type: NgModule,
|
|
311
|
-
args: [{
|
|
312
|
-
exports: [SkyI18nModule],
|
|
313
|
-
providers: [
|
|
314
|
-
{
|
|
315
|
-
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
316
|
-
useClass: SkyAvatarResourcesProvider,
|
|
317
|
-
multi: true,
|
|
318
|
-
},
|
|
319
|
-
],
|
|
320
|
-
}]
|
|
321
|
-
}] });
|
|
322
|
-
|
|
323
323
|
class SkyAvatarModule {
|
|
324
324
|
}
|
|
325
325
|
SkyAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skyux-avatar.js","sources":["../../../../../libs/components/avatar/src/lib/modules/avatar/avatar-adapter.service.ts","../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.inner.component.ts","../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.inner.component.html","../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.component.ts","../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.component.html","../../../../../libs/components/avatar/src/lib/modules/shared/sky-avatar-resources.module.ts","../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.module.ts","../../../../../libs/components/avatar/src/skyux-avatar.ts"],"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","import {\n AfterViewInit,\n Component,\n ElementRef,\n Input,\n OnDestroy,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { SkyAvatarAdapterService } from './avatar-adapter.service';\n\nimport { SkyAvatarSize } from './avatar-size';\n\nimport { SkyAvatarSrc } from './avatar-src';\n\n/**\n * @internal\n */\n@Component({\n selector: 'sky-avatar-inner',\n templateUrl: './avatar.inner.component.html',\n styleUrls: ['./avatar.inner.component.scss'],\n providers: [SkyAvatarAdapterService],\n encapsulation: ViewEncapsulation.None,\n})\nexport class SkyAvatarInnerComponent implements AfterViewInit, OnDestroy {\n public get src(): SkyAvatarSrc {\n return this._src;\n }\n\n @Input()\n public set src(value: SkyAvatarSrc) {\n this._src = value;\n this.updateImage();\n }\n\n public get name(): string {\n return this._name;\n }\n\n @Input()\n public set name(value: string) {\n this._name = value;\n }\n\n @Input()\n public size: SkyAvatarSize;\n\n private viewInitialized: boolean;\n\n private _src: SkyAvatarSrc;\n\n private _name: string;\n\n constructor(\n private elementRef: ElementRef,\n private adapter: SkyAvatarAdapterService\n ) {}\n\n public get initials(): string {\n let initials: string;\n\n if (this.name) {\n let nameSplit = this.name.split(' ');\n initials = getInitial(nameSplit[0]);\n\n if (nameSplit.length > 1) {\n initials += getInitial(nameSplit[nameSplit.length - 1]);\n }\n }\n\n return initials;\n }\n\n public get colorIndex(): number {\n let name = this.name;\n let colorIndex: number;\n\n if (name) {\n // Generate a unique-ish color based on the record name. This is deterministic\n // so that a given name will always generate the same color.\n let seed =\n name.charCodeAt(0) + name.charCodeAt(name.length - 1) + name.length;\n colorIndex = Math.abs(seed % 6);\n } else {\n colorIndex = 0;\n }\n\n return colorIndex;\n }\n\n public ngAfterViewInit() {\n this.viewInitialized = true;\n this.updateImage();\n }\n\n public ngOnDestroy() {\n this.adapter.destroy();\n }\n\n private updateImage() {\n if (this.viewInitialized) {\n this.adapter.updateImage(this.elementRef, this.src);\n }\n }\n}\n\nfunction getInitial(name: string): string {\n return name.charAt(0).toUpperCase();\n}\n","<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","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","/**\n * NOTICE: DO NOT MODIFY THIS FILE!\n * The contents of this file were automatically generated by\n * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-avatar' schematic.\n * To update this file, simply rerun the command.\n */\n\nimport { NgModule } from '@angular/core';\nimport {\n getLibStringForLocale,\n SkyAppLocaleInfo,\n SkyI18nModule,\n SkyLibResources,\n SkyLibResourcesProvider,\n SKY_LIB_RESOURCES_PROVIDERS,\n} from '@skyux/i18n';\n\nconst RESOURCES: { [locale: string]: SkyLibResources } = {\n 'EN-US': {\n skyux_avatar_error_not_image_description: {\n message: 'Please choose a file that is a valid image.',\n },\n skyux_avatar_error_not_image_title: { message: 'File is not an image.' },\n skyux_avatar_error_too_large_description: {\n message: 'Please choose an image that is less than {0}.',\n },\n skyux_avatar_error_too_large_title: { message: 'File is too large.' },\n skyux_avatar_errormodal_ok: { message: 'OK' },\n skyux_avatar_inner_description: { message: 'Profile picture of {0}' },\n skyux_avatar_upload_change_aria_label: {\n message:\n 'Change profile photo of {0}. Drag a file here or click to browse.',\n },\n skyux_avatar_upload_new_aria_label: {\n message: 'Add profile photo of {0}. Drag a file here or click to browse.',\n },\n },\n};\n\nexport class SkyAvatarResourcesProvider implements SkyLibResourcesProvider {\n public getString(localeInfo: SkyAppLocaleInfo, name: string): string {\n return getLibStringForLocale(RESOURCES, localeInfo.locale, name);\n }\n}\n\n/**\n * Import into any component library module that needs to use resource strings.\n */\n@NgModule({\n exports: [SkyI18nModule],\n providers: [\n {\n provide: SKY_LIB_RESOURCES_PROVIDERS,\n useClass: SkyAvatarResourcesProvider,\n multi: true,\n },\n ],\n})\nexport class SkyAvatarResourcesModule {}\n","import { NgModule } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\n\nimport { SkyErrorModule } from '@skyux/errors';\n\nimport { SkyFileAttachmentsModule, SkyFileSizePipe } from '@skyux/forms';\n\nimport { SkyI18nModule } from '@skyux/i18n';\n\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyAvatarComponent } from './avatar.component';\n\nimport { SkyAvatarInnerComponent } from './avatar.inner.component';\nimport { SkyAvatarResourcesModule } from '../shared/sky-avatar-resources.module';\n\n@NgModule({\n declarations: [SkyAvatarInnerComponent, SkyAvatarComponent],\n imports: [\n CommonModule,\n SkyAvatarResourcesModule,\n SkyErrorModule,\n SkyFileAttachmentsModule,\n SkyI18nModule,\n SkyThemeModule,\n ],\n providers: [SkyFileSizePipe],\n exports: [SkyAvatarComponent],\n})\nexport class SkyAvatarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAIA;;;MAIa,uBAAuB;IAG3B,WAAW,CAAC,UAAsB,EAAE,GAAiB;QAC1D,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,IAAI,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC;;QAGlC,IAAI,EAAE,EAAE;YACN,IAAI,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;;YAGpD,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;;gBAGD,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,GAAG,OAAO,GAAG,GAAG,GAAG,IAAI,GAAG,EAAE,CAAC;aACjE;SACF;KACF;IAEM,OAAO;QACZ,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAEO,aAAa,CAAC,GAAgB;QACpC,IAAI,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;;;QAInC,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,OAAO,GAAG,CAAC;KACZ;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;KACF;;qHAhDU,uBAAuB;yHAAvB,uBAAuB;4FAAvB,uBAAuB;kBADnC,UAAU;;;ACQX;;;MAUa,uBAAuB;IA6BlC,YACU,UAAsB,EACtB,OAAgC;QADhC,eAAU,GAAV,UAAU,CAAY;QACtB,YAAO,GAAP,OAAO,CAAyB;KACtC;IA/BJ,IAAW,GAAG;QACZ,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IAED,IACW,GAAG,CAAC,KAAmB;QAChC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,KAAK,CAAC;KACnB;IAED,IACW,IAAI,CAAC,KAAa;QAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;KACpB;IAgBD,IAAW,QAAQ;QACjB,IAAI,QAAgB,CAAC;QAErB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACrC,QAAQ,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;YAEpC,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;gBACxB,QAAQ,IAAI,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;aACzD;SACF;QAED,OAAO,QAAQ,CAAC;KACjB;IAED,IAAW,UAAU;QACnB,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACrB,IAAI,UAAkB,CAAC;QAEvB,IAAI,IAAI,EAAE;;;YAGR,IAAI,IAAI,GACN,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;YACtE,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;SACjC;aAAM;YACL,UAAU,GAAG,CAAC,CAAC;SAChB;QAED,OAAO,UAAU,CAAC;KACnB;IAEM,eAAe;QACpB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAEM,WAAW;QAChB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;KACxB;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;SACrD;KACF;;qHA/EU,uBAAuB;yGAAvB,uBAAuB,+FAHvB,CAAC,uBAAuB,CAAC,0BCtBtC,ulCA0CA;4FDjBa,uBAAuB;kBAPnC,SAAS;mBAAC;oBACT,QAAQ,EAAE,kBAAkB;oBAC5B,WAAW,EAAE,+BAA+B;oBAC5C,SAAS,EAAE,CAAC,+BAA+B,CAAC;oBAC5C,SAAS,EAAE,CAAC,uBAAuB,CAAC;oBACpC,aAAa,EAAE,iBAAiB,CAAC,IAAI;iBACtC;oIAOY,GAAG;sBADb,KAAK;gBAWK,IAAI;sBADd,KAAK;gBAMC,IAAI;sBADV,KAAK;;AA8DR,SAAS,UAAU,CAAC,IAAY;IAC9B,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AACtC;;MErFa,kBAAkB;IAyE7B,YACU,YAAkC,EAClC,YAA6B,EAC7B,gBAAwC;QAFxC,iBAAY,GAAZ,YAAY,CAAsB;QAClC,iBAAY,GAAZ,YAAY,CAAiB;QAC7B,qBAAgB,GAAhB,gBAAgB,CAAwB;;;;QAzB3C,gBAAW,GAAG,MAAM,CAAC;;;;;;QAQrB,SAAI,GAAkB,OAAO,CAAC;;;;QAM9B,kBAAa,GAAG,IAAI,YAAY,EAAe,CAAC;KAYnD;;;;;;;;IArEJ,IACW,SAAS,CAAC,KAAc;QACjC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB;IAED,IAAW,SAAS;QAClB,OAAO,IAAI,CAAC,UAAU,CAAC;KACxB;;;;;;;;;IAUD,IACW,IAAI,CAAC,KAAa;QAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;KACpB;IAED,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,KAAK,CAAC;KACnB;;;;;IAMD,IACW,GAAG,CAAC,KAAmB;QAChC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;IAED,IAAW,GAAG;QACZ,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IAkCM,SAAS,CAAC,MAAyB;;;QAGxC,IAAI,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1C;aAAM,IAAI,MAAM,CAAC,aAAa,IAAI,MAAM,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;YAClE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;SACxC;KACF;IAEO,WAAW,CAAC,aAAiC;QACnD,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAEtC,IAAI,YAAY,CAAC,SAAS,KAAK,aAAa,EAAE;YAC5C,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,oCAAoC,CAAC,CAAC;YACnE,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAChC,0CAA0C,EAC1C,IAAI,CAAC,eAAe,EAAE,CACvB,CAAC;YAEF,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;SACzC;aAAM,IAAI,YAAY,CAAC,SAAS,KAAK,UAAU,EAAE;YAChD,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,oCAAoC,CAAC,CAAC;YACnE,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAChC,0CAA0C,CAC3C,CAAC;YAEF,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;SACzC;KACF;IAEO,eAAe;QACrB,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACtD;IAEO,cAAc,CAAC,KAAa,EAAE,WAAmB;QACvD,MAAM,MAAM,GAAqB;YAC/B,UAAU,EAAE,KAAK;YACjB,gBAAgB,EAAE,WAAW;YAC7B,cAAc,EAAE,IAAI,CAAC,SAAS,CAAC,4BAA4B,CAAC;SAC7D,CAAC;QAEF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;IAEO,SAAS,CAAC,GAAW,EAAE,GAAG,IAAW;;QAE3C,OAAO,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAC7C,EAAE,MAAM,EAAE,OAAO,EAAE,EACnB,GAAG,EACH,GAAG,IAAI,CACR,CAAC;KACH;;gHAnIU,kBAAkB;oGAAlB,kBAAkB,uMCxB/B,+4BA2BA;4FDHa,kBAAkB;kBAN9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,YAAY;oBACtB,WAAW,EAAE,yBAAyB;oBACtC,SAAS,EAAE,CAAC,yBAAyB,CAAC;oBACtC,aAAa,EAAE,iBAAiB,CAAC,IAAI;iBACtC;kLAUY,SAAS;sBADnB,KAAK;gBAkBK,IAAI;sBADd,KAAK;gBAcK,GAAG;sBADb,KAAK;gBAaC,WAAW;sBADjB,KAAK;gBASC,IAAI;sBADV,KAAK;gBAOC,aAAa;sBADnB,MAAM;;;AExFT;;;;;;AAiBA,MAAM,SAAS,GAA0C;IACvD,OAAO,EAAE;QACP,wCAAwC,EAAE;YACxC,OAAO,EAAE,6CAA6C;SACvD;QACD,kCAAkC,EAAE,EAAE,OAAO,EAAE,uBAAuB,EAAE;QACxE,wCAAwC,EAAE;YACxC,OAAO,EAAE,+CAA+C;SACzD;QACD,kCAAkC,EAAE,EAAE,OAAO,EAAE,oBAAoB,EAAE;QACrE,0BAA0B,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC7C,8BAA8B,EAAE,EAAE,OAAO,EAAE,wBAAwB,EAAE;QACrE,qCAAqC,EAAE;YACrC,OAAO,EACL,mEAAmE;SACtE;QACD,kCAAkC,EAAE;YAClC,OAAO,EAAE,gEAAgE;SAC1E;KACF;CACF,CAAC;MAEW,0BAA0B;IAC9B,SAAS,CAAC,UAA4B,EAAE,IAAY;QACzD,OAAO,qBAAqB,CAAC,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;KAClE;CACF;AAED;;;MAaa,wBAAwB;;sHAAxB,wBAAwB;uHAAxB,wBAAwB,YATzB,aAAa;uHASZ,wBAAwB,aARxB;QACT;YACE,OAAO,EAAE,2BAA2B;YACpC,QAAQ,EAAE,0BAA0B;YACpC,KAAK,EAAE,IAAI;SACZ;KACF,YAPS,aAAa;4FASZ,wBAAwB;kBAVpC,QAAQ;mBAAC;oBACR,OAAO,EAAE,CAAC,aAAa,CAAC;oBACxB,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,2BAA2B;4BACpC,QAAQ,EAAE,0BAA0B;4BACpC,KAAK,EAAE,IAAI;yBACZ;qBACF;iBACF;;;MC3BY,eAAe;;6GAAf,eAAe;8GAAf,eAAe,iBAZX,uBAAuB,EAAE,kBAAkB,aAExD,YAAY;QACZ,wBAAwB;QACxB,cAAc;QACd,wBAAwB;QACxB,aAAa;QACb,cAAc,aAGN,kBAAkB;8GAEjB,eAAe,aAHf,CAAC,eAAe,CAAC,YARnB;YACP,YAAY;YACZ,wBAAwB;YACxB,cAAc;YACd,wBAAwB;YACxB,aAAa;YACb,cAAc;SACf;4FAIU,eAAe;kBAb3B,QAAQ;mBAAC;oBACR,YAAY,EAAE,CAAC,uBAAuB,EAAE,kBAAkB,CAAC;oBAC3D,OAAO,EAAE;wBACP,YAAY;wBACZ,wBAAwB;wBACxB,cAAc;wBACd,wBAAwB;wBACxB,aAAa;wBACb,cAAc;qBACf;oBACD,SAAS,EAAE,CAAC,eAAe,CAAC;oBAC5B,OAAO,EAAE,CAAC,kBAAkB,CAAC;iBAC9B;;;AC7BD;;;;;;"}
|
|
1
|
+
{"version":3,"file":"skyux-avatar.js","sources":["../../../../../libs/components/avatar/src/lib/modules/shared/sky-avatar-resources.module.ts","../../../../../libs/components/avatar/src/lib/modules/avatar/avatar-adapter.service.ts","../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.inner.component.ts","../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.inner.component.html","../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.component.ts","../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.component.html","../../../../../libs/components/avatar/src/lib/modules/avatar/avatar.module.ts","../../../../../libs/components/avatar/src/skyux-avatar.ts"],"sourcesContent":["/**\n * NOTICE: DO NOT MODIFY THIS FILE!\n * The contents of this file were automatically generated by\n * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-avatar' schematic.\n * To update this file, simply rerun the command.\n */\nimport { NgModule } from '@angular/core';\nimport {\n SKY_LIB_RESOURCES_PROVIDERS,\n SkyAppLocaleInfo,\n SkyI18nModule,\n SkyLibResources,\n SkyLibResourcesProvider,\n getLibStringForLocale,\n} from '@skyux/i18n';\n\nconst RESOURCES: { [locale: string]: SkyLibResources } = {\n 'EN-US': {\n skyux_avatar_error_not_image_description: {\n message: 'Please choose a file that is a valid image.',\n },\n skyux_avatar_error_not_image_title: { message: 'File is not an image.' },\n skyux_avatar_error_too_large_description: {\n message: 'Please choose an image that is less than {0}.',\n },\n skyux_avatar_error_too_large_title: { message: 'File is too large.' },\n skyux_avatar_errormodal_ok: { message: 'OK' },\n skyux_avatar_inner_description: { message: 'Profile picture of {0}' },\n skyux_avatar_upload_change_aria_label: {\n message:\n 'Change profile photo of {0}. Drag a file here or click to browse.',\n },\n skyux_avatar_upload_new_aria_label: {\n message: 'Add profile photo of {0}. Drag a file here or click to browse.',\n },\n },\n};\n\nexport class SkyAvatarResourcesProvider implements SkyLibResourcesProvider {\n public getString(localeInfo: SkyAppLocaleInfo, name: string): string {\n return getLibStringForLocale(RESOURCES, localeInfo.locale, name);\n }\n}\n\n/**\n * Import into any component library module that needs to use resource strings.\n */\n@NgModule({\n exports: [SkyI18nModule],\n providers: [\n {\n provide: SKY_LIB_RESOURCES_PROVIDERS,\n useClass: SkyAvatarResourcesProvider,\n multi: true,\n },\n ],\n})\nexport class SkyAvatarResourcesModule {}\n","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 const el = elementRef.nativeElement;\n\n /*istanbul ignore else */\n if (el) {\n const 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 const 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","import {\n AfterViewInit,\n Component,\n ElementRef,\n Input,\n OnDestroy,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { SkyAvatarAdapterService } from './avatar-adapter.service';\nimport { SkyAvatarSize } from './avatar-size';\nimport { SkyAvatarSrc } from './avatar-src';\n\n/**\n * @internal\n */\n@Component({\n selector: 'sky-avatar-inner',\n templateUrl: './avatar.inner.component.html',\n styleUrls: ['./avatar.inner.component.scss'],\n providers: [SkyAvatarAdapterService],\n encapsulation: ViewEncapsulation.None,\n})\nexport class SkyAvatarInnerComponent implements AfterViewInit, OnDestroy {\n public get src(): SkyAvatarSrc {\n return this._src;\n }\n\n @Input()\n public set src(value: SkyAvatarSrc) {\n this._src = value;\n this.updateImage();\n }\n\n public get name(): string {\n return this._name;\n }\n\n @Input()\n public set name(value: string) {\n this._name = value;\n }\n\n @Input()\n public size: SkyAvatarSize;\n\n private viewInitialized: boolean;\n\n private _src: SkyAvatarSrc;\n\n private _name: string;\n\n constructor(\n private elementRef: ElementRef,\n private adapter: SkyAvatarAdapterService\n ) {}\n\n public get initials(): string {\n let initials: string;\n\n if (this.name) {\n const nameSplit = this.name.split(' ');\n initials = getInitial(nameSplit[0]);\n\n if (nameSplit.length > 1) {\n initials += getInitial(nameSplit[nameSplit.length - 1]);\n }\n }\n\n return initials;\n }\n\n public get colorIndex(): number {\n const name = this.name;\n let colorIndex: number;\n\n if (name) {\n // Generate a unique-ish color based on the record name. This is deterministic\n // so that a given name will always generate the same color.\n const seed =\n name.charCodeAt(0) + name.charCodeAt(name.length - 1) + name.length;\n colorIndex = Math.abs(seed % 6);\n } else {\n colorIndex = 0;\n }\n\n return colorIndex;\n }\n\n public ngAfterViewInit() {\n this.viewInitialized = true;\n this.updateImage();\n }\n\n public ngOnDestroy() {\n this.adapter.destroy();\n }\n\n private updateImage() {\n if (this.viewInitialized) {\n this.adapter.updateImage(this.elementRef, this.src);\n }\n }\n}\n\nfunction getInitial(name: string): string {\n return name.charAt(0).toUpperCase();\n}\n","<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","import {\n Component,\n EventEmitter,\n Input,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ErrorModalConfig, SkyErrorModalService } from '@skyux/errors';\nimport { SkyFileDropChange, SkyFileItem, SkyFileSizePipe } from '@skyux/forms';\nimport { SkyLibResourcesService } from '@skyux/i18n';\n\nimport { SkyAvatarSize } from './avatar-size';\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","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyErrorModule } from '@skyux/errors';\nimport { SkyFileAttachmentsModule, SkyFileSizePipe } from '@skyux/forms';\nimport { SkyI18nModule } from '@skyux/i18n';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyAvatarResourcesModule } from '../shared/sky-avatar-resources.module';\n\nimport { SkyAvatarComponent } from './avatar.component';\nimport { SkyAvatarInnerComponent } from './avatar.inner.component';\n\n@NgModule({\n declarations: [SkyAvatarInnerComponent, SkyAvatarComponent],\n imports: [\n CommonModule,\n SkyAvatarResourcesModule,\n SkyErrorModule,\n SkyFileAttachmentsModule,\n SkyI18nModule,\n SkyThemeModule,\n ],\n providers: [SkyFileSizePipe],\n exports: [SkyAvatarComponent],\n})\nexport class SkyAvatarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,18 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/avatar",
|
|
3
|
-
"version": "5.
|
|
4
|
-
"peerDependencies": {
|
|
5
|
-
"@angular/common": "^12.2.16",
|
|
6
|
-
"@angular/core": "^12.2.16",
|
|
7
|
-
"@angular/router": "^12.2.16",
|
|
8
|
-
"@skyux/core": "5.5.0",
|
|
9
|
-
"@skyux/i18n": "5.5.0",
|
|
10
|
-
"@skyux/errors": "5.5.0",
|
|
11
|
-
"@skyux/forms": "5.5.0"
|
|
12
|
-
},
|
|
13
|
-
"dependencies": {
|
|
14
|
-
"tslib": "^2.3.1"
|
|
15
|
-
},
|
|
3
|
+
"version": "5.6.2",
|
|
16
4
|
"author": "Blackbaud, Inc.",
|
|
17
5
|
"keywords": [
|
|
18
6
|
"blackbaud",
|
|
@@ -27,6 +15,19 @@
|
|
|
27
15
|
"url": "https://github.com/blackbaud/skyux/issues"
|
|
28
16
|
},
|
|
29
17
|
"homepage": "https://github.com/blackbaud/skyux#readme",
|
|
18
|
+
"peerDependencies": {
|
|
19
|
+
"@angular/common": "^12.2.16",
|
|
20
|
+
"@angular/core": "^12.2.16",
|
|
21
|
+
"@angular/platform-browser": "^12.2.16",
|
|
22
|
+
"@skyux-sdk/testing": "5.6.2",
|
|
23
|
+
"@skyux/errors": "5.6.2",
|
|
24
|
+
"@skyux/forms": "5.6.2",
|
|
25
|
+
"@skyux/i18n": "5.6.2",
|
|
26
|
+
"@skyux/theme": "5.6.2"
|
|
27
|
+
},
|
|
28
|
+
"dependencies": {
|
|
29
|
+
"tslib": "^2.3.1"
|
|
30
|
+
},
|
|
30
31
|
"main": "bundles/skyux-avatar.umd.js",
|
|
31
32
|
"module": "fesm2015/skyux-avatar.js",
|
|
32
33
|
"es2015": "fesm2015/skyux-avatar.js",
|