@villedemontreal/angular-ui 16.0.3 → 16.0.4
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.
|
@@ -10,6 +10,13 @@ import * as i2 from "../icon/icon.component";
|
|
|
10
10
|
const KILO_THRESHOLD = 1000;
|
|
11
11
|
const MEGA_THRESHOLD = 1000000;
|
|
12
12
|
export class BaoFilePreviewComponent {
|
|
13
|
+
/**
|
|
14
|
+
* Uploaded file to display in list.
|
|
15
|
+
*/
|
|
16
|
+
set file(f) {
|
|
17
|
+
this._file = f;
|
|
18
|
+
this.setFileData();
|
|
19
|
+
}
|
|
13
20
|
constructor(elementRef, renderer) {
|
|
14
21
|
this.elementRef = elementRef;
|
|
15
22
|
this.renderer = renderer;
|
|
@@ -26,10 +33,8 @@ export class BaoFilePreviewComponent {
|
|
|
26
33
|
get nativeElement() {
|
|
27
34
|
return this.elementRef.nativeElement;
|
|
28
35
|
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
ngAfterContentInit() {
|
|
36
|
+
setFileData() {
|
|
37
|
+
this.formatSize(this._file.size);
|
|
33
38
|
this.getThumbnail();
|
|
34
39
|
this.setIcon();
|
|
35
40
|
}
|
|
@@ -44,8 +49,8 @@ export class BaoFilePreviewComponent {
|
|
|
44
49
|
}
|
|
45
50
|
}
|
|
46
51
|
getThumbnail() {
|
|
47
|
-
if (this.
|
|
48
|
-
(this.
|
|
52
|
+
if (this._file &&
|
|
53
|
+
(this._file.type === 'image/png' || this._file.type === 'image/jpeg')) {
|
|
49
54
|
const reader = new FileReader();
|
|
50
55
|
reader.onload = (event) => {
|
|
51
56
|
this.thumbnailURL = event.target.result;
|
|
@@ -53,34 +58,36 @@ export class BaoFilePreviewComponent {
|
|
|
53
58
|
reader.onerror = () => {
|
|
54
59
|
this.thumbnailURL = '';
|
|
55
60
|
};
|
|
56
|
-
reader.readAsDataURL(this.
|
|
61
|
+
reader.readAsDataURL(this._file);
|
|
57
62
|
}
|
|
58
63
|
}
|
|
59
64
|
formatSize(size) {
|
|
60
65
|
if (size >= KILO_THRESHOLD && size / KILO_THRESHOLD < KILO_THRESHOLD) {
|
|
61
|
-
|
|
66
|
+
this.fileSize = this.getSizeAndUnit(size, KILO_THRESHOLD, 'Ko');
|
|
67
|
+
return;
|
|
62
68
|
}
|
|
63
69
|
const sizeDividedByKoMultiplicator = size / KILO_THRESHOLD;
|
|
64
70
|
if (sizeDividedByKoMultiplicator >= KILO_THRESHOLD) {
|
|
65
71
|
const toFixed = sizeDividedByKoMultiplicator > 10 ? 0 : 1;
|
|
66
|
-
|
|
72
|
+
this.fileSize = this.getSizeAndUnit(size, MEGA_THRESHOLD, 'Mo', toFixed);
|
|
73
|
+
return;
|
|
67
74
|
}
|
|
68
|
-
|
|
75
|
+
this.fileSize = `${size} octets`;
|
|
69
76
|
}
|
|
70
77
|
getSizeAndUnit(size, multiplicator, unit, toFixed = 0) {
|
|
71
78
|
return `${(size / multiplicator).toFixed(toFixed)} ${unit}`;
|
|
72
79
|
}
|
|
73
80
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoFilePreviewComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
74
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: BaoFilePreviewComponent, selector: "bao-file-preview, [bao-file-preview]", inputs: { file: "file", isLoading: "isLoading" }, host: { classAttribute: "bao-file-preview" }, ngImport: i0, template: "<div class=\"bao-file-info\">\n <ng-content select=\"bao-icon\"></ng-content>\n <bao-icon\n *ngIf=\"insertGenericIcon && !thumbnailURL\"\n class=\"bao-file-media\"\n svgIcon=\"icon-file\"\n >\n </bao-icon>\n <ng-container *ngIf=\"thumbnailURL && !isLoading\">\n <img\n class=\"bao-file-media\"\n [src]=\"thumbnailURL\"\n width=\"40px\"\n height=\"40px\"\n />\n </ng-container>\n <div class=\"bao-file-text\">\n <div class=\"bao-file-name\">{{
|
|
81
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: BaoFilePreviewComponent, selector: "bao-file-preview, [bao-file-preview]", inputs: { file: "file", isLoading: "isLoading" }, host: { classAttribute: "bao-file-preview" }, ngImport: i0, template: "<div class=\"bao-file-info\">\n <ng-content select=\"bao-icon\"></ng-content>\n <bao-icon\n *ngIf=\"insertGenericIcon && !thumbnailURL\"\n class=\"bao-file-media\"\n svgIcon=\"icon-file\"\n >\n </bao-icon>\n <ng-container *ngIf=\"thumbnailURL && !isLoading\">\n <img\n class=\"bao-file-media\"\n [src]=\"thumbnailURL\"\n width=\"40px\"\n height=\"40px\"\n />\n </ng-container>\n <div class=\"bao-file-text\">\n <div class=\"bao-file-name\">{{ _file.name }}</div>\n <div class=\"bao-file-size\">{{ fileSize }}</div>\n </div>\n</div>\n<ng-container *ngIf=\"!isLoading\">\n <ng-content select=\"button[bao-button]\"></ng-content>\n <ng-content select=\"baoDropdownTriggerFor\"></ng-content>\n</ng-container>\n<bao-icon\n *ngIf=\"isLoading\"\n class=\"loading-spinner\"\n svgIcon=\"icon-spinner\"\n title=\"chargement\"\n></bao-icon>\n", styles: [".bao-file-preview{display:flex;align-items:center;justify-content:space-between;padding-top:.625rem;padding-bottom:.625rem;list-style-type:none}.bao-file-preview>.bao-file-info{display:flex;align-items:center}.bao-file-preview>.bao-file-info>.bao-icon{color:#adb2bd;flex-shrink:0}.bao-file-preview>.bao-file-info>.bao-file-media{margin-right:1rem}.bao-file-preview>.bao-file-info>.bao-file-text{display:inline-flex;flex-direction:column;margin-right:1rem}.bao-file-preview>.bao-file-info>.bao-file-text>.bao-file-name{overflow:hidden;font-weight:700;font-size:.875rem;line-height:1.25rem;color:#212529}.bao-file-preview>.bao-file-info>.bao-file-text>.bao-file-size{font-weight:400;font-size:.75rem;line-height:1rem;color:#637381}.bao-file-preview .loading-spinner{color:#097d6c}.bao-file-preview .bao-dropdown-menu-container{position:absolute;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.BaoIconComponent, selector: "bao-icon", inputs: ["color", "size", "svgIcon", "title"], exportAs: ["baoIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
75
82
|
}
|
|
76
83
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoFilePreviewComponent, decorators: [{
|
|
77
84
|
type: Component,
|
|
78
85
|
args: [{ selector: 'bao-file-preview, [bao-file-preview]', encapsulation: ViewEncapsulation.None, host: {
|
|
79
86
|
class: 'bao-file-preview'
|
|
80
|
-
}, template: "<div class=\"bao-file-info\">\n <ng-content select=\"bao-icon\"></ng-content>\n <bao-icon\n *ngIf=\"insertGenericIcon && !thumbnailURL\"\n class=\"bao-file-media\"\n svgIcon=\"icon-file\"\n >\n </bao-icon>\n <ng-container *ngIf=\"thumbnailURL && !isLoading\">\n <img\n class=\"bao-file-media\"\n [src]=\"thumbnailURL\"\n width=\"40px\"\n height=\"40px\"\n />\n </ng-container>\n <div class=\"bao-file-text\">\n <div class=\"bao-file-name\">{{
|
|
87
|
+
}, template: "<div class=\"bao-file-info\">\n <ng-content select=\"bao-icon\"></ng-content>\n <bao-icon\n *ngIf=\"insertGenericIcon && !thumbnailURL\"\n class=\"bao-file-media\"\n svgIcon=\"icon-file\"\n >\n </bao-icon>\n <ng-container *ngIf=\"thumbnailURL && !isLoading\">\n <img\n class=\"bao-file-media\"\n [src]=\"thumbnailURL\"\n width=\"40px\"\n height=\"40px\"\n />\n </ng-container>\n <div class=\"bao-file-text\">\n <div class=\"bao-file-name\">{{ _file.name }}</div>\n <div class=\"bao-file-size\">{{ fileSize }}</div>\n </div>\n</div>\n<ng-container *ngIf=\"!isLoading\">\n <ng-content select=\"button[bao-button]\"></ng-content>\n <ng-content select=\"baoDropdownTriggerFor\"></ng-content>\n</ng-container>\n<bao-icon\n *ngIf=\"isLoading\"\n class=\"loading-spinner\"\n svgIcon=\"icon-spinner\"\n title=\"chargement\"\n></bao-icon>\n", styles: [".bao-file-preview{display:flex;align-items:center;justify-content:space-between;padding-top:.625rem;padding-bottom:.625rem;list-style-type:none}.bao-file-preview>.bao-file-info{display:flex;align-items:center}.bao-file-preview>.bao-file-info>.bao-icon{color:#adb2bd;flex-shrink:0}.bao-file-preview>.bao-file-info>.bao-file-media{margin-right:1rem}.bao-file-preview>.bao-file-info>.bao-file-text{display:inline-flex;flex-direction:column;margin-right:1rem}.bao-file-preview>.bao-file-info>.bao-file-text>.bao-file-name{overflow:hidden;font-weight:700;font-size:.875rem;line-height:1.25rem;color:#212529}.bao-file-preview>.bao-file-info>.bao-file-text>.bao-file-size{font-weight:400;font-size:.75rem;line-height:1rem;color:#637381}.bao-file-preview .loading-spinner{color:#097d6c}.bao-file-preview .bao-dropdown-menu-container{position:absolute;margin-left:auto}\n"] }]
|
|
81
88
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { file: [{
|
|
82
89
|
type: Input
|
|
83
90
|
}], isLoading: [{
|
|
84
91
|
type: Input
|
|
85
92
|
}] } });
|
|
86
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
93
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS1wcmV2aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItdWkvc3JjL2xpYi9maWxlL2ZpbGUtcHJldmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXVpL3NyYy9saWIvZmlsZS9maWxlLXByZXZpZXcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7R0FJRztBQUVILE9BQU8sRUFDTCxTQUFTLEVBRVQsS0FBSyxFQUVMLGlCQUFpQixFQUNsQixNQUFNLGVBQWUsQ0FBQzs7OztBQUV2QixNQUFNLGNBQWMsR0FBRyxJQUFJLENBQUM7QUFDNUIsTUFBTSxjQUFjLEdBQUcsT0FBTyxDQUFDO0FBVy9CLE1BQU0sT0FBTyx1QkFBdUI7SUFDbEM7O09BRUc7SUFDSCxJQUFhLElBQUksQ0FBQyxDQUFPO1FBQ3ZCLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ2YsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFnQkQsWUFDVSxVQUFtQyxFQUNuQyxRQUFtQjtRQURuQixlQUFVLEdBQVYsVUFBVSxDQUF5QjtRQUNuQyxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBaEI3Qjs7V0FFRztRQUNhLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFFbEM7O1dBRUc7UUFDSSxzQkFBaUIsR0FBRyxLQUFLLENBQUM7UUFFMUIsaUJBQVksR0FBRyxFQUFFLENBQUM7SUFPdEIsQ0FBQztJQUVKLElBQVksYUFBYTtRQUN2QixPQUFPLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDO0lBQ3ZDLENBQUM7SUFFTyxXQUFXO1FBQ2pCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNqQyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO0lBQ2pCLENBQUM7SUFFTyxPQUFPO1FBQ2IsZ0VBQWdFO1FBQ2hFLE1BQU0sV0FBVyxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQzVCLElBQUksQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQzdDLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBZSxFQUFFLEVBQUUsQ0FBQyxFQUFFLENBQUMsU0FBUyxLQUFLLFVBQVUsQ0FBQyxDQUFDO1FBQ3pELElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDaEIsSUFBSSxDQUFDLGlCQUFpQixHQUFHLElBQUksQ0FBQztTQUMvQjthQUFNO1lBQ0wsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFLGdCQUFnQixDQUFDLENBQUM7U0FDdkQ7SUFDSCxDQUFDO0lBRU8sWUFBWTtRQUNsQixJQUNFLElBQUksQ0FBQyxLQUFLO1lBQ1YsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksS0FBSyxXQUFXLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEtBQUssWUFBWSxDQUFDLEVBQ3JFO1lBQ0EsTUFBTSxNQUFNLEdBQUcsSUFBSSxVQUFVLEVBQUUsQ0FBQztZQUNoQyxNQUFNLENBQUMsTUFBTSxHQUFHLENBQUMsS0FBVSxFQUFFLEVBQUU7Z0JBQzdCLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUM7WUFDMUMsQ0FBQyxDQUFDO1lBRUYsTUFBTSxDQUFDLE9BQU8sR0FBRyxHQUFHLEVBQUU7Z0JBQ3BCLElBQUksQ0FBQyxZQUFZLEdBQUcsRUFBRSxDQUFDO1lBQ3pCLENBQUMsQ0FBQztZQUNGLE1BQU0sQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ2xDO0lBQ0gsQ0FBQztJQUVPLFVBQVUsQ0FBQyxJQUFZO1FBQzdCLElBQUksSUFBSSxJQUFJLGNBQWMsSUFBSSxJQUFJLEdBQUcsY0FBYyxHQUFHLGNBQWMsRUFBRTtZQUNwRSxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxFQUFFLGNBQWMsRUFBRSxJQUFJLENBQUMsQ0FBQztZQUNoRSxPQUFPO1NBQ1I7UUFDRCxNQUFNLDRCQUE0QixHQUFHLElBQUksR0FBRyxjQUFjLENBQUM7UUFDM0QsSUFBSSw0QkFBNEIsSUFBSSxjQUFjLEVBQUU7WUFDbEQsTUFBTSxPQUFPLEdBQUcsNEJBQTRCLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUMxRCxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxFQUFFLGNBQWMsRUFBRSxJQUFJLEVBQUUsT0FBTyxDQUFDLENBQUM7WUFDekUsT0FBTztTQUNSO1FBQ0QsSUFBSSxDQUFDLFFBQVEsR0FBRyxHQUFHLElBQUksU0FBUyxDQUFDO0lBQ25DLENBQUM7SUFFTyxjQUFjLENBQ3BCLElBQVksRUFDWixhQUFxQixFQUNyQixJQUFZLEVBQ1osT0FBTyxHQUFHLENBQUM7UUFFWCxPQUFPLEdBQUcsQ0FBQyxJQUFJLEdBQUcsYUFBYSxDQUFDLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxJQUFJLElBQUksRUFBRSxDQUFDO0lBQzlELENBQUM7OEdBeEZVLHVCQUF1QjtrR0FBdkIsdUJBQXVCLDRLQzFCcEMsdzNCQStCQTs7MkZETGEsdUJBQXVCO2tCQVRuQyxTQUFTOytCQUNFLHNDQUFzQyxpQkFHakMsaUJBQWlCLENBQUMsSUFBSSxRQUMvQjt3QkFDSixLQUFLLEVBQUUsa0JBQWtCO3FCQUMxQjt5SEFNWSxJQUFJO3NCQUFoQixLQUFLO2dCQVFVLFNBQVM7c0JBQXhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IChjKSAyMDI0IFZpbGxlIGRlIE1vbnRyZWFsLiBBbGwgcmlnaHRzIHJlc2VydmVkLlxuICogTGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlLlxuICogU2VlIExJQ0VOU0UgZmlsZSBpbiB0aGUgcHJvamVjdCByb290IGZvciBmdWxsIGxpY2Vuc2UgaW5mb3JtYXRpb24uXG4gKi9cblxuaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBJbnB1dCxcbiAgUmVuZGVyZXIyLFxuICBWaWV3RW5jYXBzdWxhdGlvblxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuY29uc3QgS0lMT19USFJFU0hPTEQgPSAxMDAwO1xuY29uc3QgTUVHQV9USFJFU0hPTEQgPSAxMDAwMDAwO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdiYW8tZmlsZS1wcmV2aWV3LCBbYmFvLWZpbGUtcHJldmlld10nLFxuICB0ZW1wbGF0ZVVybDogJy4vZmlsZS1wcmV2aWV3LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZmlsZS1wcmV2aWV3LmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGhvc3Q6IHtcbiAgICBjbGFzczogJ2Jhby1maWxlLXByZXZpZXcnXG4gIH1cbn0pXG5leHBvcnQgY2xhc3MgQmFvRmlsZVByZXZpZXdDb21wb25lbnQge1xuICAvKipcbiAgICogVXBsb2FkZWQgZmlsZSB0byBkaXNwbGF5IGluIGxpc3QuXG4gICAqL1xuICBASW5wdXQoKSBzZXQgZmlsZShmOiBGaWxlKSB7XG4gICAgdGhpcy5fZmlsZSA9IGY7XG4gICAgdGhpcy5zZXRGaWxlRGF0YSgpO1xuICB9XG5cbiAgLyoqXG4gICAqIElzIGZpbGUgbG9hZGluZ1xuICAgKi9cbiAgQElucHV0KCkgcHVibGljIGlzTG9hZGluZyA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBUcnVlIGlmIHByb2plY3RlZCBjb250ZW50IGhhcyBubyBpY29uIGFuZCBmaWxlIGRvZXMgbm90IGhhdmUgYSB0aHVtYm5haWwuXG4gICAqL1xuICBwdWJsaWMgaW5zZXJ0R2VuZXJpY0ljb24gPSBmYWxzZTtcblxuICBwdWJsaWMgdGh1bWJuYWlsVVJMID0gJyc7XG4gIHByb3RlY3RlZCBfZmlsZTogRmlsZTtcbiAgcHJvdGVjdGVkIGZpbGVTaXplOiBzdHJpbmc7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjJcbiAgKSB7fVxuXG4gIHByaXZhdGUgZ2V0IG5hdGl2ZUVsZW1lbnQoKTogSFRNTEVsZW1lbnQge1xuICAgIHJldHVybiB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcbiAgfVxuXG4gIHByaXZhdGUgc2V0RmlsZURhdGEoKTogdm9pZCB7XG4gICAgdGhpcy5mb3JtYXRTaXplKHRoaXMuX2ZpbGUuc2l6ZSk7XG4gICAgdGhpcy5nZXRUaHVtYm5haWwoKTtcbiAgICB0aGlzLnNldEljb24oKTtcbiAgfVxuXG4gIHByaXZhdGUgc2V0SWNvbigpIHtcbiAgICAvLyBJZiBubyBpY29uIGlzIGluIHRoZSBwcm9qZWN0ZWQgY29udGVudCwgZ2VuZXJpYyBpY29uIGlzIGFkZGVkXG4gICAgY29uc3QgY29udGVudEljb24gPSBBcnJheS5mcm9tKFxuICAgICAgdGhpcy5uYXRpdmVFbGVtZW50LmNoaWxkcmVuLml0ZW0oMCkuY2hpbGRyZW5cbiAgICApLmZpbmQoKGVsOiBIVE1MRWxlbWVudCkgPT4gZWwubG9jYWxOYW1lID09PSAnYmFvLWljb24nKTtcbiAgICBpZiAoIWNvbnRlbnRJY29uKSB7XG4gICAgICB0aGlzLmluc2VydEdlbmVyaWNJY29uID0gdHJ1ZTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5yZW5kZXJlci5hZGRDbGFzcyhjb250ZW50SWNvbiwgJ2Jhby1maWxlLW1lZGlhJyk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBnZXRUaHVtYm5haWwoKSB7XG4gICAgaWYgKFxuICAgICAgdGhpcy5fZmlsZSAmJlxuICAgICAgKHRoaXMuX2ZpbGUudHlwZSA9PT0gJ2ltYWdlL3BuZycgfHwgdGhpcy5fZmlsZS50eXBlID09PSAnaW1hZ2UvanBlZycpXG4gICAgKSB7XG4gICAgICBjb25zdCByZWFkZXIgPSBuZXcgRmlsZVJlYWRlcigpO1xuICAgICAgcmVhZGVyLm9ubG9hZCA9IChldmVudDogYW55KSA9PiB7XG4gICAgICAgIHRoaXMudGh1bWJuYWlsVVJMID0gZXZlbnQudGFyZ2V0LnJlc3VsdDtcbiAgICAgIH07XG5cbiAgICAgIHJlYWRlci5vbmVycm9yID0gKCkgPT4ge1xuICAgICAgICB0aGlzLnRodW1ibmFpbFVSTCA9ICcnO1xuICAgICAgfTtcbiAgICAgIHJlYWRlci5yZWFkQXNEYXRhVVJMKHRoaXMuX2ZpbGUpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgZm9ybWF0U2l6ZShzaXplOiBudW1iZXIpOiB2b2lkIHtcbiAgICBpZiAoc2l6ZSA+PSBLSUxPX1RIUkVTSE9MRCAmJiBzaXplIC8gS0lMT19USFJFU0hPTEQgPCBLSUxPX1RIUkVTSE9MRCkge1xuICAgICAgdGhpcy5maWxlU2l6ZSA9IHRoaXMuZ2V0U2l6ZUFuZFVuaXQoc2l6ZSwgS0lMT19USFJFU0hPTEQsICdLbycpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBjb25zdCBzaXplRGl2aWRlZEJ5S29NdWx0aXBsaWNhdG9yID0gc2l6ZSAvIEtJTE9fVEhSRVNIT0xEO1xuICAgIGlmIChzaXplRGl2aWRlZEJ5S29NdWx0aXBsaWNhdG9yID49IEtJTE9fVEhSRVNIT0xEKSB7XG4gICAgICBjb25zdCB0b0ZpeGVkID0gc2l6ZURpdmlkZWRCeUtvTXVsdGlwbGljYXRvciA+IDEwID8gMCA6IDE7XG4gICAgICB0aGlzLmZpbGVTaXplID0gdGhpcy5nZXRTaXplQW5kVW5pdChzaXplLCBNRUdBX1RIUkVTSE9MRCwgJ01vJywgdG9GaXhlZCk7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuZmlsZVNpemUgPSBgJHtzaXplfSBvY3RldHNgO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRTaXplQW5kVW5pdChcbiAgICBzaXplOiBudW1iZXIsXG4gICAgbXVsdGlwbGljYXRvcjogbnVtYmVyLFxuICAgIHVuaXQ6IHN0cmluZyxcbiAgICB0b0ZpeGVkID0gMFxuICApOiBzdHJpbmcge1xuICAgIHJldHVybiBgJHsoc2l6ZSAvIG11bHRpcGxpY2F0b3IpLnRvRml4ZWQodG9GaXhlZCl9ICR7dW5pdH1gO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiYmFvLWZpbGUtaW5mb1wiPlxuICA8bmctY29udGVudCBzZWxlY3Q9XCJiYW8taWNvblwiPjwvbmctY29udGVudD5cbiAgPGJhby1pY29uXG4gICAgKm5nSWY9XCJpbnNlcnRHZW5lcmljSWNvbiAmJiAhdGh1bWJuYWlsVVJMXCJcbiAgICBjbGFzcz1cImJhby1maWxlLW1lZGlhXCJcbiAgICBzdmdJY29uPVwiaWNvbi1maWxlXCJcbiAgPlxuICA8L2Jhby1pY29uPlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwidGh1bWJuYWlsVVJMICYmICFpc0xvYWRpbmdcIj5cbiAgICA8aW1nXG4gICAgICBjbGFzcz1cImJhby1maWxlLW1lZGlhXCJcbiAgICAgIFtzcmNdPVwidGh1bWJuYWlsVVJMXCJcbiAgICAgIHdpZHRoPVwiNDBweFwiXG4gICAgICBoZWlnaHQ9XCI0MHB4XCJcbiAgICAvPlxuICA8L25nLWNvbnRhaW5lcj5cbiAgPGRpdiBjbGFzcz1cImJhby1maWxlLXRleHRcIj5cbiAgICA8ZGl2IGNsYXNzPVwiYmFvLWZpbGUtbmFtZVwiPnt7IF9maWxlLm5hbWUgfX08L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiYmFvLWZpbGUtc2l6ZVwiPnt7IGZpbGVTaXplIH19PC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG48bmctY29udGFpbmVyICpuZ0lmPVwiIWlzTG9hZGluZ1wiPlxuICA8bmctY29udGVudCBzZWxlY3Q9XCJidXR0b25bYmFvLWJ1dHRvbl1cIj48L25nLWNvbnRlbnQ+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cImJhb0Ryb3Bkb3duVHJpZ2dlckZvclwiPjwvbmctY29udGVudD5cbjwvbmctY29udGFpbmVyPlxuPGJhby1pY29uXG4gICpuZ0lmPVwiaXNMb2FkaW5nXCJcbiAgY2xhc3M9XCJsb2FkaW5nLXNwaW5uZXJcIlxuICBzdmdJY29uPVwiaWNvbi1zcGlubmVyXCJcbiAgdGl0bGU9XCJjaGFyZ2VtZW50XCJcbj48L2Jhby1pY29uPlxuIl19
|
|
@@ -4494,6 +4494,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImpor
|
|
|
4494
4494
|
const KILO_THRESHOLD = 1000;
|
|
4495
4495
|
const MEGA_THRESHOLD = 1000000;
|
|
4496
4496
|
class BaoFilePreviewComponent {
|
|
4497
|
+
/**
|
|
4498
|
+
* Uploaded file to display in list.
|
|
4499
|
+
*/
|
|
4500
|
+
set file(f) {
|
|
4501
|
+
this._file = f;
|
|
4502
|
+
this.setFileData();
|
|
4503
|
+
}
|
|
4497
4504
|
constructor(elementRef, renderer) {
|
|
4498
4505
|
this.elementRef = elementRef;
|
|
4499
4506
|
this.renderer = renderer;
|
|
@@ -4510,10 +4517,8 @@ class BaoFilePreviewComponent {
|
|
|
4510
4517
|
get nativeElement() {
|
|
4511
4518
|
return this.elementRef.nativeElement;
|
|
4512
4519
|
}
|
|
4513
|
-
|
|
4514
|
-
|
|
4515
|
-
}
|
|
4516
|
-
ngAfterContentInit() {
|
|
4520
|
+
setFileData() {
|
|
4521
|
+
this.formatSize(this._file.size);
|
|
4517
4522
|
this.getThumbnail();
|
|
4518
4523
|
this.setIcon();
|
|
4519
4524
|
}
|
|
@@ -4528,8 +4533,8 @@ class BaoFilePreviewComponent {
|
|
|
4528
4533
|
}
|
|
4529
4534
|
}
|
|
4530
4535
|
getThumbnail() {
|
|
4531
|
-
if (this.
|
|
4532
|
-
(this.
|
|
4536
|
+
if (this._file &&
|
|
4537
|
+
(this._file.type === 'image/png' || this._file.type === 'image/jpeg')) {
|
|
4533
4538
|
const reader = new FileReader();
|
|
4534
4539
|
reader.onload = (event) => {
|
|
4535
4540
|
this.thumbnailURL = event.target.result;
|
|
@@ -4537,31 +4542,33 @@ class BaoFilePreviewComponent {
|
|
|
4537
4542
|
reader.onerror = () => {
|
|
4538
4543
|
this.thumbnailURL = '';
|
|
4539
4544
|
};
|
|
4540
|
-
reader.readAsDataURL(this.
|
|
4545
|
+
reader.readAsDataURL(this._file);
|
|
4541
4546
|
}
|
|
4542
4547
|
}
|
|
4543
4548
|
formatSize(size) {
|
|
4544
4549
|
if (size >= KILO_THRESHOLD && size / KILO_THRESHOLD < KILO_THRESHOLD) {
|
|
4545
|
-
|
|
4550
|
+
this.fileSize = this.getSizeAndUnit(size, KILO_THRESHOLD, 'Ko');
|
|
4551
|
+
return;
|
|
4546
4552
|
}
|
|
4547
4553
|
const sizeDividedByKoMultiplicator = size / KILO_THRESHOLD;
|
|
4548
4554
|
if (sizeDividedByKoMultiplicator >= KILO_THRESHOLD) {
|
|
4549
4555
|
const toFixed = sizeDividedByKoMultiplicator > 10 ? 0 : 1;
|
|
4550
|
-
|
|
4556
|
+
this.fileSize = this.getSizeAndUnit(size, MEGA_THRESHOLD, 'Mo', toFixed);
|
|
4557
|
+
return;
|
|
4551
4558
|
}
|
|
4552
|
-
|
|
4559
|
+
this.fileSize = `${size} octets`;
|
|
4553
4560
|
}
|
|
4554
4561
|
getSizeAndUnit(size, multiplicator, unit, toFixed = 0) {
|
|
4555
4562
|
return `${(size / multiplicator).toFixed(toFixed)} ${unit}`;
|
|
4556
4563
|
}
|
|
4557
4564
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoFilePreviewComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4558
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: BaoFilePreviewComponent, selector: "bao-file-preview, [bao-file-preview]", inputs: { file: "file", isLoading: "isLoading" }, host: { classAttribute: "bao-file-preview" }, ngImport: i0, template: "<div class=\"bao-file-info\">\n <ng-content select=\"bao-icon\"></ng-content>\n <bao-icon\n *ngIf=\"insertGenericIcon && !thumbnailURL\"\n class=\"bao-file-media\"\n svgIcon=\"icon-file\"\n >\n </bao-icon>\n <ng-container *ngIf=\"thumbnailURL && !isLoading\">\n <img\n class=\"bao-file-media\"\n [src]=\"thumbnailURL\"\n width=\"40px\"\n height=\"40px\"\n />\n </ng-container>\n <div class=\"bao-file-text\">\n <div class=\"bao-file-name\">{{
|
|
4565
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: BaoFilePreviewComponent, selector: "bao-file-preview, [bao-file-preview]", inputs: { file: "file", isLoading: "isLoading" }, host: { classAttribute: "bao-file-preview" }, ngImport: i0, template: "<div class=\"bao-file-info\">\n <ng-content select=\"bao-icon\"></ng-content>\n <bao-icon\n *ngIf=\"insertGenericIcon && !thumbnailURL\"\n class=\"bao-file-media\"\n svgIcon=\"icon-file\"\n >\n </bao-icon>\n <ng-container *ngIf=\"thumbnailURL && !isLoading\">\n <img\n class=\"bao-file-media\"\n [src]=\"thumbnailURL\"\n width=\"40px\"\n height=\"40px\"\n />\n </ng-container>\n <div class=\"bao-file-text\">\n <div class=\"bao-file-name\">{{ _file.name }}</div>\n <div class=\"bao-file-size\">{{ fileSize }}</div>\n </div>\n</div>\n<ng-container *ngIf=\"!isLoading\">\n <ng-content select=\"button[bao-button]\"></ng-content>\n <ng-content select=\"baoDropdownTriggerFor\"></ng-content>\n</ng-container>\n<bao-icon\n *ngIf=\"isLoading\"\n class=\"loading-spinner\"\n svgIcon=\"icon-spinner\"\n title=\"chargement\"\n></bao-icon>\n", styles: [".bao-file-preview{display:flex;align-items:center;justify-content:space-between;padding-top:.625rem;padding-bottom:.625rem;list-style-type:none}.bao-file-preview>.bao-file-info{display:flex;align-items:center}.bao-file-preview>.bao-file-info>.bao-icon{color:#adb2bd;flex-shrink:0}.bao-file-preview>.bao-file-info>.bao-file-media{margin-right:1rem}.bao-file-preview>.bao-file-info>.bao-file-text{display:inline-flex;flex-direction:column;margin-right:1rem}.bao-file-preview>.bao-file-info>.bao-file-text>.bao-file-name{overflow:hidden;font-weight:700;font-size:.875rem;line-height:1.25rem;color:#212529}.bao-file-preview>.bao-file-info>.bao-file-text>.bao-file-size{font-weight:400;font-size:.75rem;line-height:1rem;color:#637381}.bao-file-preview .loading-spinner{color:#097d6c}.bao-file-preview .bao-dropdown-menu-container{position:absolute;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BaoIconComponent, selector: "bao-icon", inputs: ["color", "size", "svgIcon", "title"], exportAs: ["baoIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4559
4566
|
}
|
|
4560
4567
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: BaoFilePreviewComponent, decorators: [{
|
|
4561
4568
|
type: Component,
|
|
4562
4569
|
args: [{ selector: 'bao-file-preview, [bao-file-preview]', encapsulation: ViewEncapsulation.None, host: {
|
|
4563
4570
|
class: 'bao-file-preview'
|
|
4564
|
-
}, template: "<div class=\"bao-file-info\">\n <ng-content select=\"bao-icon\"></ng-content>\n <bao-icon\n *ngIf=\"insertGenericIcon && !thumbnailURL\"\n class=\"bao-file-media\"\n svgIcon=\"icon-file\"\n >\n </bao-icon>\n <ng-container *ngIf=\"thumbnailURL && !isLoading\">\n <img\n class=\"bao-file-media\"\n [src]=\"thumbnailURL\"\n width=\"40px\"\n height=\"40px\"\n />\n </ng-container>\n <div class=\"bao-file-text\">\n <div class=\"bao-file-name\">{{
|
|
4571
|
+
}, template: "<div class=\"bao-file-info\">\n <ng-content select=\"bao-icon\"></ng-content>\n <bao-icon\n *ngIf=\"insertGenericIcon && !thumbnailURL\"\n class=\"bao-file-media\"\n svgIcon=\"icon-file\"\n >\n </bao-icon>\n <ng-container *ngIf=\"thumbnailURL && !isLoading\">\n <img\n class=\"bao-file-media\"\n [src]=\"thumbnailURL\"\n width=\"40px\"\n height=\"40px\"\n />\n </ng-container>\n <div class=\"bao-file-text\">\n <div class=\"bao-file-name\">{{ _file.name }}</div>\n <div class=\"bao-file-size\">{{ fileSize }}</div>\n </div>\n</div>\n<ng-container *ngIf=\"!isLoading\">\n <ng-content select=\"button[bao-button]\"></ng-content>\n <ng-content select=\"baoDropdownTriggerFor\"></ng-content>\n</ng-container>\n<bao-icon\n *ngIf=\"isLoading\"\n class=\"loading-spinner\"\n svgIcon=\"icon-spinner\"\n title=\"chargement\"\n></bao-icon>\n", styles: [".bao-file-preview{display:flex;align-items:center;justify-content:space-between;padding-top:.625rem;padding-bottom:.625rem;list-style-type:none}.bao-file-preview>.bao-file-info{display:flex;align-items:center}.bao-file-preview>.bao-file-info>.bao-icon{color:#adb2bd;flex-shrink:0}.bao-file-preview>.bao-file-info>.bao-file-media{margin-right:1rem}.bao-file-preview>.bao-file-info>.bao-file-text{display:inline-flex;flex-direction:column;margin-right:1rem}.bao-file-preview>.bao-file-info>.bao-file-text>.bao-file-name{overflow:hidden;font-weight:700;font-size:.875rem;line-height:1.25rem;color:#212529}.bao-file-preview>.bao-file-info>.bao-file-text>.bao-file-size{font-weight:400;font-size:.75rem;line-height:1rem;color:#637381}.bao-file-preview .loading-spinner{color:#097d6c}.bao-file-preview .bao-dropdown-menu-container{position:absolute;margin-left:auto}\n"] }]
|
|
4565
4572
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { file: [{
|
|
4566
4573
|
type: Input
|
|
4567
4574
|
}], isLoading: [{
|