@skyux/avatar 5.0.0 → 5.5.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -4
- package/bundles/skyux-avatar-testing.umd.js +2 -2
- package/bundles/skyux-avatar.umd.js +63 -52
- package/documentation.json +52 -18
- 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/lib/modules/avatar/avatar.inner.component.js +88 -0
- 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 +54 -41
- 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.inner.component.js +0 -88
- package/esm2015/modules/avatar/avatar.module.js +0 -54
- package/esm2015/modules/shared/sky-avatar-resources.module.js +0 -41
- 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.
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/platform-browser'), require('@skyux-sdk/testing')) :
|
|
3
3
|
typeof define === 'function' && define.amd ? define('@skyux/avatar/testing', ['exports', '@angular/platform-browser', '@skyux-sdk/testing'], factory) :
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.avatar = global.skyux.avatar || {}, global.skyux.avatar.testing = {}), global.ng.platformBrowser, global.testing));
|
|
5
|
-
}(this, (function (exports, platformBrowser, testing) { 'use strict';
|
|
5
|
+
})(this, (function (exports, platformBrowser, testing) { 'use strict';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Allows interaction with a SKY UX avatar component.
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
|
|
51
51
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
52
52
|
|
|
53
|
-
}))
|
|
53
|
+
}));
|
|
54
54
|
//# sourceMappingURL=skyux-avatar-testing.umd.js.map
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@skyux/errors'), require('@skyux/forms'), require('@skyux/i18n'), require('@skyux/theme')) :
|
|
3
3
|
typeof define === 'function' && define.amd ? define('@skyux/avatar', ['exports', '@angular/core', '@angular/common', '@skyux/errors', '@skyux/forms', '@skyux/i18n', '@skyux/theme'], factory) :
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.avatar = {}), global.ng.core, global.ng.common, global.i1, global.i2$1, global.i3$1, global.i3));
|
|
5
|
-
}(this, (function (exports, i0, i2, i1, i2$1, i3$1, i3) { 'use strict';
|
|
5
|
+
})(this, (function (exports, i0, i2, i1, i2$1, i3$1, i3) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopNamespace(e) {
|
|
8
8
|
if (e && e.__esModule) return e;
|
|
@@ -13,14 +13,12 @@
|
|
|
13
13
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
14
|
Object.defineProperty(n, k, d.get ? d : {
|
|
15
15
|
enumerable: true,
|
|
16
|
-
get: function () {
|
|
17
|
-
return e[k];
|
|
18
|
-
}
|
|
16
|
+
get: function () { return e[k]; }
|
|
19
17
|
});
|
|
20
18
|
}
|
|
21
19
|
});
|
|
22
20
|
}
|
|
23
|
-
n[
|
|
21
|
+
n["default"] = e;
|
|
24
22
|
return Object.freeze(n);
|
|
25
23
|
}
|
|
26
24
|
|
|
@@ -395,9 +393,9 @@
|
|
|
395
393
|
};
|
|
396
394
|
return SkyAvatarAdapterService;
|
|
397
395
|
}());
|
|
398
|
-
SkyAvatarAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
399
|
-
SkyAvatarAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
400
|
-
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: [{
|
|
401
399
|
type: i0.Injectable
|
|
402
400
|
}] });
|
|
403
401
|
|
|
@@ -477,16 +475,16 @@
|
|
|
477
475
|
};
|
|
478
476
|
return SkyAvatarInnerComponent;
|
|
479
477
|
}());
|
|
480
|
-
SkyAvatarInnerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
481
|
-
SkyAvatarInnerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
482
|
-
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: [{
|
|
483
481
|
type: i0.Component,
|
|
484
482
|
args: [{
|
|
485
483
|
selector: 'sky-avatar-inner',
|
|
486
|
-
|
|
487
|
-
|
|
484
|
+
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",
|
|
485
|
+
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"],
|
|
488
486
|
providers: [SkyAvatarAdapterService],
|
|
489
|
-
encapsulation: i0.ViewEncapsulation.None
|
|
487
|
+
encapsulation: i0.ViewEncapsulation.None,
|
|
490
488
|
}]
|
|
491
489
|
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: SkyAvatarAdapterService }]; }, propDecorators: { src: [{
|
|
492
490
|
type: i0.Input
|
|
@@ -510,6 +508,8 @@
|
|
|
510
508
|
this.maxFileSize = 500000;
|
|
511
509
|
/**
|
|
512
510
|
* Specifies the size of the avatar.
|
|
511
|
+
* Acceptable values are: `"small"`, `"medium"`, and `"large"`.
|
|
512
|
+
* @default "large"
|
|
513
513
|
*/
|
|
514
514
|
this.size = 'large';
|
|
515
515
|
/**
|
|
@@ -596,7 +596,7 @@
|
|
|
596
596
|
var config = {
|
|
597
597
|
errorTitle: title,
|
|
598
598
|
errorDescription: description,
|
|
599
|
-
errorCloseText: this.getString('skyux_avatar_errormodal_ok')
|
|
599
|
+
errorCloseText: this.getString('skyux_avatar_errormodal_ok'),
|
|
600
600
|
};
|
|
601
601
|
this.errorService.open(config);
|
|
602
602
|
};
|
|
@@ -611,15 +611,15 @@
|
|
|
611
611
|
};
|
|
612
612
|
return SkyAvatarComponent;
|
|
613
613
|
}());
|
|
614
|
-
SkyAvatarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
615
|
-
SkyAvatarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
616
|
-
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: [{
|
|
617
617
|
type: i0.Component,
|
|
618
618
|
args: [{
|
|
619
619
|
selector: 'sky-avatar',
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
encapsulation: i0.ViewEncapsulation.None
|
|
620
|
+
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",
|
|
621
|
+
styles: [".sky-avatar .sky-file-drop-col{flex-basis:initial}.sky-theme-modern .sky-file-drop:focus{outline:none}\n"],
|
|
622
|
+
encapsulation: i0.ViewEncapsulation.None,
|
|
623
623
|
}]
|
|
624
624
|
}], ctorParameters: function () { return [{ type: i1__namespace.SkyErrorModalService }, { type: i2__namespace$1.SkyFileSizePipe }, { type: i3__namespace$1.SkyLibResourcesService }]; }, propDecorators: { canChange: [{
|
|
625
625
|
type: i0.Input
|
|
@@ -642,7 +642,24 @@
|
|
|
642
642
|
* To update this file, simply rerun the command.
|
|
643
643
|
*/
|
|
644
644
|
var RESOURCES = {
|
|
645
|
-
'EN-US': {
|
|
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
|
+
},
|
|
646
663
|
};
|
|
647
664
|
var SkyAvatarResourcesProvider = /** @class */ (function () {
|
|
648
665
|
function SkyAvatarResourcesProvider() {
|
|
@@ -660,22 +677,26 @@
|
|
|
660
677
|
}
|
|
661
678
|
return SkyAvatarResourcesModule;
|
|
662
679
|
}());
|
|
663
|
-
SkyAvatarResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
664
|
-
SkyAvatarResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
665
|
-
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: [
|
|
683
|
+
{
|
|
666
684
|
provide: i3$1.SKY_LIB_RESOURCES_PROVIDERS,
|
|
667
685
|
useClass: SkyAvatarResourcesProvider,
|
|
668
|
-
multi: true
|
|
669
|
-
}
|
|
670
|
-
|
|
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: [{
|
|
671
690
|
type: i0.NgModule,
|
|
672
691
|
args: [{
|
|
673
692
|
exports: [i3$1.SkyI18nModule],
|
|
674
|
-
providers: [
|
|
693
|
+
providers: [
|
|
694
|
+
{
|
|
675
695
|
provide: i3$1.SKY_LIB_RESOURCES_PROVIDERS,
|
|
676
696
|
useClass: SkyAvatarResourcesProvider,
|
|
677
|
-
multi: true
|
|
678
|
-
}
|
|
697
|
+
multi: true,
|
|
698
|
+
},
|
|
699
|
+
],
|
|
679
700
|
}]
|
|
680
701
|
}] });
|
|
681
702
|
|
|
@@ -684,45 +705,35 @@
|
|
|
684
705
|
}
|
|
685
706
|
return SkyAvatarModule;
|
|
686
707
|
}());
|
|
687
|
-
SkyAvatarModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
688
|
-
SkyAvatarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
689
|
-
SkyAvatarComponent], imports: [i2.CommonModule,
|
|
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,
|
|
690
710
|
SkyAvatarResourcesModule,
|
|
691
711
|
i1.SkyErrorModule,
|
|
692
712
|
i2$1.SkyFileAttachmentsModule,
|
|
693
713
|
i3$1.SkyI18nModule,
|
|
694
714
|
i3.SkyThemeModule], exports: [SkyAvatarComponent] });
|
|
695
|
-
SkyAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
696
|
-
i2$1.SkyFileSizePipe
|
|
697
|
-
], imports: [[
|
|
715
|
+
SkyAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyAvatarModule, providers: [i2$1.SkyFileSizePipe], imports: [[
|
|
698
716
|
i2.CommonModule,
|
|
699
717
|
SkyAvatarResourcesModule,
|
|
700
718
|
i1.SkyErrorModule,
|
|
701
719
|
i2$1.SkyFileAttachmentsModule,
|
|
702
720
|
i3$1.SkyI18nModule,
|
|
703
|
-
i3.SkyThemeModule
|
|
721
|
+
i3.SkyThemeModule,
|
|
704
722
|
]] });
|
|
705
|
-
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: [{
|
|
706
724
|
type: i0.NgModule,
|
|
707
725
|
args: [{
|
|
708
|
-
declarations: [
|
|
709
|
-
SkyAvatarInnerComponent,
|
|
710
|
-
SkyAvatarComponent
|
|
711
|
-
],
|
|
726
|
+
declarations: [SkyAvatarInnerComponent, SkyAvatarComponent],
|
|
712
727
|
imports: [
|
|
713
728
|
i2.CommonModule,
|
|
714
729
|
SkyAvatarResourcesModule,
|
|
715
730
|
i1.SkyErrorModule,
|
|
716
731
|
i2$1.SkyFileAttachmentsModule,
|
|
717
732
|
i3$1.SkyI18nModule,
|
|
718
|
-
i3.SkyThemeModule
|
|
719
|
-
],
|
|
720
|
-
providers: [
|
|
721
|
-
i2$1.SkyFileSizePipe
|
|
733
|
+
i3.SkyThemeModule,
|
|
722
734
|
],
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
]
|
|
735
|
+
providers: [i2$1.SkyFileSizePipe],
|
|
736
|
+
exports: [SkyAvatarComponent],
|
|
726
737
|
}]
|
|
727
738
|
}] });
|
|
728
739
|
|
|
@@ -731,9 +742,9 @@
|
|
|
731
742
|
*/
|
|
732
743
|
|
|
733
744
|
exports.SkyAvatarModule = SkyAvatarModule;
|
|
734
|
-
exports
|
|
745
|
+
exports["λ1"] = SkyAvatarComponent;
|
|
735
746
|
|
|
736
747
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
737
748
|
|
|
738
|
-
}))
|
|
749
|
+
}));
|
|
739
750
|
//# sourceMappingURL=skyux-avatar.umd.js.map
|
package/documentation.json
CHANGED
|
@@ -24,10 +24,12 @@
|
|
|
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": {
|
|
30
|
-
"obj": "{\n declarations: [
|
|
32
|
+
"obj": "{\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}"
|
|
31
33
|
}
|
|
32
34
|
}
|
|
33
35
|
],
|
|
@@ -66,7 +68,7 @@
|
|
|
66
68
|
"sources": [
|
|
67
69
|
{
|
|
68
70
|
"fileName": "projects/avatar/src/modules/avatar/avatar.module.ts",
|
|
69
|
-
"line":
|
|
71
|
+
"line": 31,
|
|
70
72
|
"character": 13
|
|
71
73
|
}
|
|
72
74
|
]
|
|
@@ -82,10 +84,12 @@
|
|
|
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": {
|
|
88
|
-
"obj": "{\n selector: 'sky-avatar',\n templateUrl: './avatar.component.html',\n styleUrls: ['./avatar.component.scss'],\n encapsulation: ViewEncapsulation.None
|
|
92
|
+
"obj": "{\n selector: 'sky-avatar',\n templateUrl: './avatar.component.html',\n styleUrls: ['./avatar.component.scss'],\n encapsulation: ViewEncapsulation.None,\n}"
|
|
89
93
|
}
|
|
90
94
|
}
|
|
91
95
|
],
|
|
@@ -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": {}
|
|
@@ -217,7 +227,7 @@
|
|
|
217
227
|
"sources": [
|
|
218
228
|
{
|
|
219
229
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
220
|
-
"line":
|
|
230
|
+
"line": 76,
|
|
221
231
|
"character": 9
|
|
222
232
|
}
|
|
223
233
|
],
|
|
@@ -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": {}
|
|
@@ -283,7 +303,7 @@
|
|
|
283
303
|
"sources": [
|
|
284
304
|
{
|
|
285
305
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
286
|
-
"line":
|
|
306
|
+
"line": 34,
|
|
287
307
|
"character": 13
|
|
288
308
|
}
|
|
289
309
|
],
|
|
@@ -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": {}
|
|
@@ -360,7 +388,7 @@
|
|
|
360
388
|
"sources": [
|
|
361
389
|
{
|
|
362
390
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
363
|
-
"line":
|
|
391
|
+
"line": 51,
|
|
364
392
|
"character": 13
|
|
365
393
|
}
|
|
366
394
|
],
|
|
@@ -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": {}
|
|
@@ -431,7 +461,7 @@
|
|
|
431
461
|
"sources": [
|
|
432
462
|
{
|
|
433
463
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
434
|
-
"line":
|
|
464
|
+
"line": 64,
|
|
435
465
|
"character": 13
|
|
436
466
|
}
|
|
437
467
|
],
|
|
@@ -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
|
],
|
|
@@ -563,7 +593,7 @@
|
|
|
563
593
|
"sources": [
|
|
564
594
|
{
|
|
565
595
|
"fileName": "projects/avatar/src/modules/avatar/avatar.component.ts",
|
|
566
|
-
"line":
|
|
596
|
+
"line": 25,
|
|
567
597
|
"character": 13
|
|
568
598
|
}
|
|
569
599
|
]
|
|
@@ -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,7 +685,7 @@
|
|
|
651
685
|
],
|
|
652
686
|
"sources": [
|
|
653
687
|
{
|
|
654
|
-
"fileName": "
|
|
688
|
+
"fileName": "index.ts",
|
|
655
689
|
"line": 1,
|
|
656
690
|
"character": 0
|
|
657
691
|
}
|
|
@@ -666,12 +700,12 @@
|
|
|
666
700
|
{
|
|
667
701
|
"fileName": "avatar-demo.component.ts",
|
|
668
702
|
"filePath": "/projects/avatar/documentation/code-examples/avatar/avatar-demo.component.ts",
|
|
669
|
-
"rawContents": "import {
|
|
703
|
+
"rawContents": "import { Component } from '@angular/core';\n\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"
|
|
670
704
|
},
|
|
671
705
|
{
|
|
672
706
|
"fileName": "avatar-demo.module.ts",
|
|
673
707
|
"filePath": "/projects/avatar/documentation/code-examples/avatar/avatar-demo.module.ts",
|
|
674
|
-
"rawContents": "import {
|
|
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"
|
|
675
709
|
}
|
|
676
710
|
]
|
|
677
|
-
}
|
|
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"]}
|