@wizishop/angular-components 15.1.149 → 15.1.151
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/angular-components.scss +84 -48
- package/esm2020/lib/components/upload/upload.component.mjs +9 -3
- package/fesm2015/wizishop-angular-components.mjs +8 -2
- package/fesm2015/wizishop-angular-components.mjs.map +1 -1
- package/fesm2020/wizishop-angular-components.mjs +8 -2
- package/fesm2020/wizishop-angular-components.mjs.map +1 -1
- package/lib/components/upload/upload.component.d.ts +3 -1
- package/package.json +1 -1
- package/wizishop-angular-components-15.1.151.tgz +0 -0
- package/wizishop-angular-components-15.1.149.tgz +0 -0
package/angular-components.scss
CHANGED
|
@@ -489,6 +489,33 @@ $wac-tab-colunm-blue: #3ba6ec!default;.zindexToggle {
|
|
|
489
489
|
font-size: rem(20);
|
|
490
490
|
}
|
|
491
491
|
}
|
|
492
|
+
.wac-back {
|
|
493
|
+
width: 40px;
|
|
494
|
+
height: 40px;
|
|
495
|
+
|
|
496
|
+
&__wrapper {
|
|
497
|
+
@include flexbox();
|
|
498
|
+
@include justify-content(center);
|
|
499
|
+
@include align-items(center);
|
|
500
|
+
width: 100%;
|
|
501
|
+
height: 100%;
|
|
502
|
+
border-radius: 3px;
|
|
503
|
+
border: 1px solid $wac-border-light;
|
|
504
|
+
background-color: transparent;
|
|
505
|
+
transition: border-color 0.3s ease-in-out;
|
|
506
|
+
|
|
507
|
+
i {
|
|
508
|
+
color: $wac-second-color;
|
|
509
|
+
font-size: 11px;
|
|
510
|
+
line-height: 14px;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
&:hover {
|
|
514
|
+
border-color: $wac-back-border-hover;
|
|
515
|
+
transition: border-color 0.3s ease-in-out;
|
|
516
|
+
}
|
|
517
|
+
}
|
|
518
|
+
}
|
|
492
519
|
.wac-alert-popup {
|
|
493
520
|
.alert {
|
|
494
521
|
z-index: 999999;
|
|
@@ -772,52 +799,6 @@ $wac-tab-colunm-blue: #3ba6ec!default;.zindexToggle {
|
|
|
772
799
|
}
|
|
773
800
|
|
|
774
801
|
}
|
|
775
|
-
.wac-back {
|
|
776
|
-
width: 40px;
|
|
777
|
-
height: 40px;
|
|
778
|
-
|
|
779
|
-
&__wrapper {
|
|
780
|
-
@include flexbox();
|
|
781
|
-
@include justify-content(center);
|
|
782
|
-
@include align-items(center);
|
|
783
|
-
width: 100%;
|
|
784
|
-
height: 100%;
|
|
785
|
-
border-radius: 3px;
|
|
786
|
-
border: 1px solid $wac-border-light;
|
|
787
|
-
background-color: transparent;
|
|
788
|
-
transition: border-color 0.3s ease-in-out;
|
|
789
|
-
|
|
790
|
-
i {
|
|
791
|
-
color: $wac-second-color;
|
|
792
|
-
font-size: 11px;
|
|
793
|
-
line-height: 14px;
|
|
794
|
-
}
|
|
795
|
-
|
|
796
|
-
&:hover {
|
|
797
|
-
border-color: $wac-back-border-hover;
|
|
798
|
-
transition: border-color 0.3s ease-in-out;
|
|
799
|
-
}
|
|
800
|
-
}
|
|
801
|
-
}
|
|
802
|
-
wac-block {
|
|
803
|
-
.wac-block {
|
|
804
|
-
background-color: $white;
|
|
805
|
-
@include padding(rem(30));
|
|
806
|
-
box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.05);
|
|
807
|
-
@include simple_transition();
|
|
808
|
-
height: 100%;
|
|
809
|
-
border-radius: var(--wac-block-border-radius);
|
|
810
|
-
|
|
811
|
-
@include media('<tablet') {
|
|
812
|
-
@include padding(rem(20));
|
|
813
|
-
}
|
|
814
|
-
|
|
815
|
-
&:hover {
|
|
816
|
-
box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.2);
|
|
817
|
-
}
|
|
818
|
-
}
|
|
819
|
-
}
|
|
820
|
-
|
|
821
802
|
.block-with-checkbox {
|
|
822
803
|
width: 100%;
|
|
823
804
|
display: flex;
|
|
@@ -958,6 +939,25 @@ wac-block {
|
|
|
958
939
|
margin-right: 0;
|
|
959
940
|
}
|
|
960
941
|
}
|
|
942
|
+
wac-block {
|
|
943
|
+
.wac-block {
|
|
944
|
+
background-color: $white;
|
|
945
|
+
@include padding(rem(30));
|
|
946
|
+
box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.05);
|
|
947
|
+
@include simple_transition();
|
|
948
|
+
height: 100%;
|
|
949
|
+
border-radius: var(--wac-block-border-radius);
|
|
950
|
+
|
|
951
|
+
@include media('<tablet') {
|
|
952
|
+
@include padding(rem(20));
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
&:hover {
|
|
956
|
+
box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.2);
|
|
957
|
+
}
|
|
958
|
+
}
|
|
959
|
+
}
|
|
960
|
+
|
|
961
961
|
.w-border-picker {
|
|
962
962
|
display: flex;
|
|
963
963
|
flex-direction: column;
|
|
@@ -9282,6 +9282,7 @@ span.wac-tooltip {
|
|
|
9282
9282
|
}
|
|
9283
9283
|
}
|
|
9284
9284
|
&.block {
|
|
9285
|
+
position: relative;
|
|
9285
9286
|
display: flex;
|
|
9286
9287
|
justify-content: center;
|
|
9287
9288
|
align-items: center;
|
|
@@ -9290,6 +9291,32 @@ span.wac-tooltip {
|
|
|
9290
9291
|
border: 1px solid #dee2ed;
|
|
9291
9292
|
cursor: pointer;
|
|
9292
9293
|
|
|
9294
|
+
.overlay {
|
|
9295
|
+
position: absolute;
|
|
9296
|
+
top: 0;
|
|
9297
|
+
left: 0;
|
|
9298
|
+
width: 100%;
|
|
9299
|
+
height: 100%;
|
|
9300
|
+
background-color: rgba(0, 0, 0, 0.3);
|
|
9301
|
+
display: flex;
|
|
9302
|
+
justify-content: center;
|
|
9303
|
+
align-items: center;
|
|
9304
|
+
border-radius: rem(3);
|
|
9305
|
+
opacity: 0;
|
|
9306
|
+
transition: opacity 0.3s ease;
|
|
9307
|
+
padding: rem(40);
|
|
9308
|
+
|
|
9309
|
+
img {
|
|
9310
|
+
width: 100%;
|
|
9311
|
+
max-width: rem(110);
|
|
9312
|
+
height: auto;
|
|
9313
|
+
}
|
|
9314
|
+
}
|
|
9315
|
+
|
|
9316
|
+
&:hover .overlay {
|
|
9317
|
+
opacity: 1;
|
|
9318
|
+
}
|
|
9319
|
+
|
|
9293
9320
|
&:hover {
|
|
9294
9321
|
.wac-upload__wrapper button.block {
|
|
9295
9322
|
background-color: #3BA6EC;
|
|
@@ -9312,8 +9339,6 @@ span.wac-tooltip {
|
|
|
9312
9339
|
|
|
9313
9340
|
button {
|
|
9314
9341
|
&.block {
|
|
9315
|
-
width: 100%;
|
|
9316
|
-
height: 100%;
|
|
9317
9342
|
display: flex;
|
|
9318
9343
|
align-items: center;
|
|
9319
9344
|
padding: rem(11) rem(15);
|
|
@@ -9329,6 +9354,17 @@ span.wac-tooltip {
|
|
|
9329
9354
|
}
|
|
9330
9355
|
}
|
|
9331
9356
|
}
|
|
9357
|
+
|
|
9358
|
+
&__uploaded {
|
|
9359
|
+
position: relative;
|
|
9360
|
+
width: 100%;
|
|
9361
|
+
height: 100%;
|
|
9362
|
+
img {
|
|
9363
|
+
width: 100%;
|
|
9364
|
+
height: auto;
|
|
9365
|
+
border-radius: rem(3);
|
|
9366
|
+
}
|
|
9367
|
+
}
|
|
9332
9368
|
}
|
|
9333
9369
|
}
|
|
9334
9370
|
}
|
|
@@ -12,6 +12,8 @@ export class UploadComponent {
|
|
|
12
12
|
this.imageBlock = 'assets/angular-components/images/upload/upload_images.svg';
|
|
13
13
|
this.labelUploadImage = '';
|
|
14
14
|
this.onClickAction = () => { };
|
|
15
|
+
this.isUploaded = false;
|
|
16
|
+
this.imageUpload = '';
|
|
15
17
|
this.open = new EventEmitter();
|
|
16
18
|
this.clickEvent = new EventEmitter();
|
|
17
19
|
}
|
|
@@ -27,10 +29,10 @@ export class UploadComponent {
|
|
|
27
29
|
}
|
|
28
30
|
}
|
|
29
31
|
UploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: UploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
30
|
-
UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: UploadComponent, selector: "wac-upload", inputs: { label: "label", type: "type", icon: "icon", image: "image", labelImage: "labelImage", imageBlock: "imageBlock", labelUploadImage: "labelUploadImage", onClickAction: "onClickAction" }, outputs: { open: "open", clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"wac-upload\" [ngClass]=\"{ portrait: type === 'portrait', landscape: type === 'landscape', block: type === 'block'}\" (click)=\"clickAction()\">\r\n <div class=\"wac-upload__wrapper\">\r\n\r\n <div *ngIf=\"(type === 'portrait' || type === 'landscape') && image\" class=\"wac-upload__wrapper__visual\">\r\n
|
|
32
|
+
UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: UploadComponent, selector: "wac-upload", inputs: { label: "label", type: "type", icon: "icon", image: "image", labelImage: "labelImage", imageBlock: "imageBlock", labelUploadImage: "labelUploadImage", onClickAction: "onClickAction", isUploaded: "isUploaded", imageUpload: "imageUpload" }, outputs: { open: "open", clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"wac-upload\" [ngClass]=\"{ portrait: type === 'portrait', landscape: type === 'landscape', block: type === 'block'}\" (click)=\"clickAction()\">\r\n <div class=\"wac-upload__wrapper\">\r\n\r\n <!-- Affichage quand aucune image n'est upload\u00E9e -->\r\n <ng-container *ngIf=\"!isUploaded\">\r\n <div *ngIf=\"(type === 'portrait' || type === 'landscape') && image\" class=\"wac-upload__wrapper__visual\">\r\n <img [src]=\"image\" />\r\n <strong [innerHTML]=\"labelImage\"></strong>\r\n </div>\r\n \r\n <div *ngIf=\"(type === 'block')\" class=\"wac-upload__wrapper__visual\">\r\n <img [src]=\"imageBlock\" />\r\n </div>\r\n\r\n <span *ngIf=\"(type === 'portrait' || type === 'landscape') && image\">ou</span>\r\n \r\n <button (click)=\"triggerEvent($event)\" type=\"button\" [ngClass]=\"{ block: type === 'block' }\">\r\n <span *ngIf=\"icon\"><i [classList]=\"icon\"></i></span>\r\n <span [innerHTML]=\"label\"></span>\r\n </button>\r\n\r\n <div *ngIf=\"(type === 'block')\" class=\"wac-upload__wrapper__visual\">\r\n <wac-text [textClass]=\"'optional'\" noMargin>{{ labelUploadImage }}</wac-text>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Affichage quand une image est upload\u00E9e -->\r\n <ng-container *ngIf=\"isUploaded && imageUpload\">\r\n <div class=\"wac-upload__wrapper__uploaded\">\r\n <img [src]=\"imageUpload\" alt=\"Image upload\u00E9e\" />\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <ng-container *ngIf=\"isUploaded && imageUpload\">\r\n <div class=\"overlay\">\r\n <img [src]=\"imageBlock\" alt=\"Image de fond\" />\r\n </div>\r\n </ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TextComponent, selector: "wac-text", inputs: ["textClass", "noMargin"] }] });
|
|
31
33
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: UploadComponent, decorators: [{
|
|
32
34
|
type: Component,
|
|
33
|
-
args: [{ selector: 'wac-upload', template: "<div class=\"wac-upload\" [ngClass]=\"{ portrait: type === 'portrait', landscape: type === 'landscape', block: type === 'block'}\" (click)=\"clickAction()\">\r\n <div class=\"wac-upload__wrapper\">\r\n\r\n <div *ngIf=\"(type === 'portrait' || type === 'landscape') && image\" class=\"wac-upload__wrapper__visual\">\r\n
|
|
35
|
+
args: [{ selector: 'wac-upload', template: "<div class=\"wac-upload\" [ngClass]=\"{ portrait: type === 'portrait', landscape: type === 'landscape', block: type === 'block'}\" (click)=\"clickAction()\">\r\n <div class=\"wac-upload__wrapper\">\r\n\r\n <!-- Affichage quand aucune image n'est upload\u00E9e -->\r\n <ng-container *ngIf=\"!isUploaded\">\r\n <div *ngIf=\"(type === 'portrait' || type === 'landscape') && image\" class=\"wac-upload__wrapper__visual\">\r\n <img [src]=\"image\" />\r\n <strong [innerHTML]=\"labelImage\"></strong>\r\n </div>\r\n \r\n <div *ngIf=\"(type === 'block')\" class=\"wac-upload__wrapper__visual\">\r\n <img [src]=\"imageBlock\" />\r\n </div>\r\n\r\n <span *ngIf=\"(type === 'portrait' || type === 'landscape') && image\">ou</span>\r\n \r\n <button (click)=\"triggerEvent($event)\" type=\"button\" [ngClass]=\"{ block: type === 'block' }\">\r\n <span *ngIf=\"icon\"><i [classList]=\"icon\"></i></span>\r\n <span [innerHTML]=\"label\"></span>\r\n </button>\r\n\r\n <div *ngIf=\"(type === 'block')\" class=\"wac-upload__wrapper__visual\">\r\n <wac-text [textClass]=\"'optional'\" noMargin>{{ labelUploadImage }}</wac-text>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Affichage quand une image est upload\u00E9e -->\r\n <ng-container *ngIf=\"isUploaded && imageUpload\">\r\n <div class=\"wac-upload__wrapper__uploaded\">\r\n <img [src]=\"imageUpload\" alt=\"Image upload\u00E9e\" />\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <ng-container *ngIf=\"isUploaded && imageUpload\">\r\n <div class=\"overlay\">\r\n <img [src]=\"imageBlock\" alt=\"Image de fond\" />\r\n </div>\r\n </ng-container>\r\n</div>" }]
|
|
34
36
|
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
|
|
35
37
|
type: Input
|
|
36
38
|
}], type: [{
|
|
@@ -47,9 +49,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
47
49
|
type: Input
|
|
48
50
|
}], onClickAction: [{
|
|
49
51
|
type: Input
|
|
52
|
+
}], isUploaded: [{
|
|
53
|
+
type: Input
|
|
54
|
+
}], imageUpload: [{
|
|
55
|
+
type: Input
|
|
50
56
|
}], open: [{
|
|
51
57
|
type: Output
|
|
52
58
|
}], clickEvent: [{
|
|
53
59
|
type: Output
|
|
54
60
|
}] } });
|
|
55
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
61
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXBsb2FkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvdXBsb2FkL3VwbG9hZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3VwbG9hZC91cGxvYWQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQU0vRSxNQUFNLE9BQU8sZUFBZTtJQTBCMUI7UUF4QkEsVUFBSyxHQUFXLCtCQUErQixDQUFDO1FBRWhELFNBQUksR0FBVyxRQUFRLENBQUM7UUFFeEIsU0FBSSxHQUFxQixlQUFlLENBQUM7UUFFekMsVUFBSyxHQUFxQiwwREFBMEQsQ0FBQztRQUVyRixlQUFVLEdBQVcsaUNBQWlDLENBQUM7UUFFdkQsZUFBVSxHQUFxQiwyREFBMkQsQ0FBQztRQUUzRixxQkFBZ0IsR0FBVyxFQUFFLENBQUM7UUFFOUIsa0JBQWEsR0FBZSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFFckMsZUFBVSxHQUFZLEtBQUssQ0FBQztRQUU1QixnQkFBVyxHQUFXLEVBQUUsQ0FBQztRQUd6QixTQUFJLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUUvQixlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztJQUN2QixDQUFDO0lBRWhCLFFBQVEsS0FBVSxDQUFDO0lBRW5CLFlBQVksQ0FBQyxLQUFLO1FBQ2hCLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3hCLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsYUFBYSxFQUFFO1lBQ3RCLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztTQUN0QjtRQUNELElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDekIsQ0FBQzs7NEdBdkNVLGVBQWU7Z0dBQWYsZUFBZSwrVkNONUIsa3REQXdDTTsyRkRsQ08sZUFBZTtrQkFKM0IsU0FBUzsrQkFDRSxZQUFZOzBFQUt0QixLQUFLO3NCQURKLEtBQUs7Z0JBR04sSUFBSTtzQkFESCxLQUFLO2dCQUdOLElBQUk7c0JBREgsS0FBSztnQkFHTixLQUFLO3NCQURKLEtBQUs7Z0JBR04sVUFBVTtzQkFEVCxLQUFLO2dCQUdOLFVBQVU7c0JBRFQsS0FBSztnQkFHTixnQkFBZ0I7c0JBRGYsS0FBSztnQkFHTixhQUFhO3NCQURaLEtBQUs7Z0JBR04sVUFBVTtzQkFEVCxLQUFLO2dCQUdOLFdBQVc7c0JBRFYsS0FBSztnQkFJTixJQUFJO3NCQURILE1BQU07Z0JBR1AsVUFBVTtzQkFEVCxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICd3YWMtdXBsb2FkJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vdXBsb2FkLmNvbXBvbmVudC5odG1sJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgVXBsb2FkQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICBASW5wdXQoKVxyXG4gIGxhYmVsOiBzdHJpbmcgPSAnQ2hvaXNpciBsZXMgaW1hZ2VzIMOgIGltcG9ydGVyJztcclxuICBASW5wdXQoKVxyXG4gIHR5cGU6IHN0cmluZyA9ICdidXR0b24nO1xyXG4gIEBJbnB1dCgpXHJcbiAgaWNvbjogc3RyaW5nIHwgYm9vbGVhbiA9ICdmYXIgZmEtaW1hZ2VzJztcclxuICBASW5wdXQoKVxyXG4gIGltYWdlOiBzdHJpbmcgfCBib29sZWFuID0gJ2Fzc2V0cy9hbmd1bGFyLWNvbXBvbmVudHMvaW1hZ2VzL3VwbG9hZC9pY29uX3BpY3R1cmUuc3ZnJztcclxuICBASW5wdXQoKVxyXG4gIGxhYmVsSW1hZ2U6IHN0cmluZyA9ICdHbGlzc2VyLWTDqXBvc2VyIHZvdHJlIGltYWdlIGljaSc7XHJcbiAgQElucHV0KClcclxuICBpbWFnZUJsb2NrOiBzdHJpbmcgfCBib29sZWFuID0gJ2Fzc2V0cy9hbmd1bGFyLWNvbXBvbmVudHMvaW1hZ2VzL3VwbG9hZC91cGxvYWRfaW1hZ2VzLnN2Zyc7XHJcbiAgQElucHV0KClcclxuICBsYWJlbFVwbG9hZEltYWdlOiBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoKVxyXG4gIG9uQ2xpY2tBY3Rpb246ICgpID0+IHZvaWQgPSAoKSA9PiB7fTtcclxuICBASW5wdXQoKVxyXG4gIGlzVXBsb2FkZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKVxyXG4gIGltYWdlVXBsb2FkOiBzdHJpbmcgPSAnJztcclxuXHJcbiAgQE91dHB1dCgpXHJcbiAgb3BlbiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xyXG4gIEBPdXRwdXQoKVxyXG4gIGNsaWNrRXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XHJcbiAgY29uc3RydWN0b3IoKSB7fVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHt9XHJcblxyXG4gIHRyaWdnZXJFdmVudChldmVudCkge1xyXG4gICAgdGhpcy5vcGVuLmVtaXQoZXZlbnQpO1xyXG4gIH1cclxuXHJcbiAgY2xpY2tBY3Rpb24oKSB7XHJcbiAgICBpZiAodGhpcy5vbkNsaWNrQWN0aW9uKSB7XHJcbiAgICAgIHRoaXMub25DbGlja0FjdGlvbigpO1xyXG4gICAgfVxyXG4gICAgdGhpcy5jbGlja0V2ZW50LmVtaXQoKTtcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cIndhYy11cGxvYWRcIiBbbmdDbGFzc109XCJ7IHBvcnRyYWl0OiB0eXBlID09PSAncG9ydHJhaXQnLCBsYW5kc2NhcGU6IHR5cGUgPT09ICdsYW5kc2NhcGUnLCBibG9jazogdHlwZSA9PT0gJ2Jsb2NrJ31cIiAoY2xpY2spPVwiY2xpY2tBY3Rpb24oKVwiPlxyXG4gIDxkaXYgY2xhc3M9XCJ3YWMtdXBsb2FkX193cmFwcGVyXCI+XHJcblxyXG4gICAgPCEtLSBBZmZpY2hhZ2UgcXVhbmQgYXVjdW5lIGltYWdlIG4nZXN0IHVwbG9hZMOpZSAtLT5cclxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhaXNVcGxvYWRlZFwiPlxyXG4gICAgICA8ZGl2ICpuZ0lmPVwiKHR5cGUgPT09ICdwb3J0cmFpdCcgfHwgdHlwZSA9PT0gJ2xhbmRzY2FwZScpICYmIGltYWdlXCIgY2xhc3M9XCJ3YWMtdXBsb2FkX193cmFwcGVyX192aXN1YWxcIj5cclxuICAgICAgICA8aW1nIFtzcmNdPVwiaW1hZ2VcIiAvPlxyXG4gICAgICAgIDxzdHJvbmcgW2lubmVySFRNTF09XCJsYWJlbEltYWdlXCI+PC9zdHJvbmc+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgICBcclxuICAgICAgPGRpdiAqbmdJZj1cIih0eXBlID09PSAnYmxvY2snKVwiIGNsYXNzPVwid2FjLXVwbG9hZF9fd3JhcHBlcl9fdmlzdWFsXCI+XHJcbiAgICAgICAgPGltZyBbc3JjXT1cImltYWdlQmxvY2tcIiAvPlxyXG4gICAgICA8L2Rpdj5cclxuXHJcbiAgICAgIDxzcGFuICpuZ0lmPVwiKHR5cGUgPT09ICdwb3J0cmFpdCcgfHwgdHlwZSA9PT0gJ2xhbmRzY2FwZScpICYmIGltYWdlXCI+b3U8L3NwYW4+XHJcbiAgICAgIFxyXG4gICAgICA8YnV0dG9uIChjbGljayk9XCJ0cmlnZ2VyRXZlbnQoJGV2ZW50KVwiIHR5cGU9XCJidXR0b25cIiBbbmdDbGFzc109XCJ7IGJsb2NrOiB0eXBlID09PSAnYmxvY2snIH1cIj5cclxuICAgICAgICA8c3BhbiAqbmdJZj1cImljb25cIj48aSBbY2xhc3NMaXN0XT1cImljb25cIj48L2k+PC9zcGFuPlxyXG4gICAgICAgIDxzcGFuIFtpbm5lckhUTUxdPVwibGFiZWxcIj48L3NwYW4+XHJcbiAgICAgIDwvYnV0dG9uPlxyXG5cclxuICAgICAgPGRpdiAqbmdJZj1cIih0eXBlID09PSAnYmxvY2snKVwiIGNsYXNzPVwid2FjLXVwbG9hZF9fd3JhcHBlcl9fdmlzdWFsXCI+XHJcbiAgICAgICAgPHdhYy10ZXh0IFt0ZXh0Q2xhc3NdPVwiJ29wdGlvbmFsJ1wiIG5vTWFyZ2luPnt7IGxhYmVsVXBsb2FkSW1hZ2UgfX08L3dhYy10ZXh0PlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG5cclxuICAgIDwhLS0gQWZmaWNoYWdlIHF1YW5kIHVuZSBpbWFnZSBlc3QgdXBsb2Fkw6llIC0tPlxyXG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImlzVXBsb2FkZWQgJiYgaW1hZ2VVcGxvYWRcIj5cclxuICAgICAgPGRpdiBjbGFzcz1cIndhYy11cGxvYWRfX3dyYXBwZXJfX3VwbG9hZGVkXCI+XHJcbiAgICAgICAgPGltZyBbc3JjXT1cImltYWdlVXBsb2FkXCIgYWx0PVwiSW1hZ2UgdXBsb2Fkw6llXCIgLz5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuXHJcbiAgPC9kaXY+XHJcblxyXG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCJpc1VwbG9hZGVkICYmIGltYWdlVXBsb2FkXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwib3ZlcmxheVwiPlxyXG4gICAgICA8aW1nIFtzcmNdPVwiaW1hZ2VCbG9ja1wiIGFsdD1cIkltYWdlIGRlIGZvbmRcIiAvPlxyXG4gICAgPC9kaXY+XHJcbiAgPC9uZy1jb250YWluZXI+XHJcbjwvZGl2PiJdfQ==
|
|
@@ -3862,6 +3862,8 @@ class UploadComponent {
|
|
|
3862
3862
|
this.imageBlock = 'assets/angular-components/images/upload/upload_images.svg';
|
|
3863
3863
|
this.labelUploadImage = '';
|
|
3864
3864
|
this.onClickAction = () => { };
|
|
3865
|
+
this.isUploaded = false;
|
|
3866
|
+
this.imageUpload = '';
|
|
3865
3867
|
this.open = new EventEmitter();
|
|
3866
3868
|
this.clickEvent = new EventEmitter();
|
|
3867
3869
|
}
|
|
@@ -3877,10 +3879,10 @@ class UploadComponent {
|
|
|
3877
3879
|
}
|
|
3878
3880
|
}
|
|
3879
3881
|
UploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: UploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3880
|
-
UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: UploadComponent, selector: "wac-upload", inputs: { label: "label", type: "type", icon: "icon", image: "image", labelImage: "labelImage", imageBlock: "imageBlock", labelUploadImage: "labelUploadImage", onClickAction: "onClickAction" }, outputs: { open: "open", clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"wac-upload\" [ngClass]=\"{ portrait: type === 'portrait', landscape: type === 'landscape', block: type === 'block'}\" (click)=\"clickAction()\">\r\n <div class=\"wac-upload__wrapper\">\r\n\r\n <div *ngIf=\"(type === 'portrait' || type === 'landscape') && image\" class=\"wac-upload__wrapper__visual\">\r\n
|
|
3882
|
+
UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: UploadComponent, selector: "wac-upload", inputs: { label: "label", type: "type", icon: "icon", image: "image", labelImage: "labelImage", imageBlock: "imageBlock", labelUploadImage: "labelUploadImage", onClickAction: "onClickAction", isUploaded: "isUploaded", imageUpload: "imageUpload" }, outputs: { open: "open", clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"wac-upload\" [ngClass]=\"{ portrait: type === 'portrait', landscape: type === 'landscape', block: type === 'block'}\" (click)=\"clickAction()\">\r\n <div class=\"wac-upload__wrapper\">\r\n\r\n <!-- Affichage quand aucune image n'est upload\u00E9e -->\r\n <ng-container *ngIf=\"!isUploaded\">\r\n <div *ngIf=\"(type === 'portrait' || type === 'landscape') && image\" class=\"wac-upload__wrapper__visual\">\r\n <img [src]=\"image\" />\r\n <strong [innerHTML]=\"labelImage\"></strong>\r\n </div>\r\n \r\n <div *ngIf=\"(type === 'block')\" class=\"wac-upload__wrapper__visual\">\r\n <img [src]=\"imageBlock\" />\r\n </div>\r\n\r\n <span *ngIf=\"(type === 'portrait' || type === 'landscape') && image\">ou</span>\r\n \r\n <button (click)=\"triggerEvent($event)\" type=\"button\" [ngClass]=\"{ block: type === 'block' }\">\r\n <span *ngIf=\"icon\"><i [classList]=\"icon\"></i></span>\r\n <span [innerHTML]=\"label\"></span>\r\n </button>\r\n\r\n <div *ngIf=\"(type === 'block')\" class=\"wac-upload__wrapper__visual\">\r\n <wac-text [textClass]=\"'optional'\" noMargin>{{ labelUploadImage }}</wac-text>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Affichage quand une image est upload\u00E9e -->\r\n <ng-container *ngIf=\"isUploaded && imageUpload\">\r\n <div class=\"wac-upload__wrapper__uploaded\">\r\n <img [src]=\"imageUpload\" alt=\"Image upload\u00E9e\" />\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <ng-container *ngIf=\"isUploaded && imageUpload\">\r\n <div class=\"overlay\">\r\n <img [src]=\"imageBlock\" alt=\"Image de fond\" />\r\n </div>\r\n </ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextComponent, selector: "wac-text", inputs: ["textClass", "noMargin"] }] });
|
|
3881
3883
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: UploadComponent, decorators: [{
|
|
3882
3884
|
type: Component,
|
|
3883
|
-
args: [{ selector: 'wac-upload', template: "<div class=\"wac-upload\" [ngClass]=\"{ portrait: type === 'portrait', landscape: type === 'landscape', block: type === 'block'}\" (click)=\"clickAction()\">\r\n <div class=\"wac-upload__wrapper\">\r\n\r\n <div *ngIf=\"(type === 'portrait' || type === 'landscape') && image\" class=\"wac-upload__wrapper__visual\">\r\n
|
|
3885
|
+
args: [{ selector: 'wac-upload', template: "<div class=\"wac-upload\" [ngClass]=\"{ portrait: type === 'portrait', landscape: type === 'landscape', block: type === 'block'}\" (click)=\"clickAction()\">\r\n <div class=\"wac-upload__wrapper\">\r\n\r\n <!-- Affichage quand aucune image n'est upload\u00E9e -->\r\n <ng-container *ngIf=\"!isUploaded\">\r\n <div *ngIf=\"(type === 'portrait' || type === 'landscape') && image\" class=\"wac-upload__wrapper__visual\">\r\n <img [src]=\"image\" />\r\n <strong [innerHTML]=\"labelImage\"></strong>\r\n </div>\r\n \r\n <div *ngIf=\"(type === 'block')\" class=\"wac-upload__wrapper__visual\">\r\n <img [src]=\"imageBlock\" />\r\n </div>\r\n\r\n <span *ngIf=\"(type === 'portrait' || type === 'landscape') && image\">ou</span>\r\n \r\n <button (click)=\"triggerEvent($event)\" type=\"button\" [ngClass]=\"{ block: type === 'block' }\">\r\n <span *ngIf=\"icon\"><i [classList]=\"icon\"></i></span>\r\n <span [innerHTML]=\"label\"></span>\r\n </button>\r\n\r\n <div *ngIf=\"(type === 'block')\" class=\"wac-upload__wrapper__visual\">\r\n <wac-text [textClass]=\"'optional'\" noMargin>{{ labelUploadImage }}</wac-text>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Affichage quand une image est upload\u00E9e -->\r\n <ng-container *ngIf=\"isUploaded && imageUpload\">\r\n <div class=\"wac-upload__wrapper__uploaded\">\r\n <img [src]=\"imageUpload\" alt=\"Image upload\u00E9e\" />\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <ng-container *ngIf=\"isUploaded && imageUpload\">\r\n <div class=\"overlay\">\r\n <img [src]=\"imageBlock\" alt=\"Image de fond\" />\r\n </div>\r\n </ng-container>\r\n</div>" }]
|
|
3884
3886
|
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
|
|
3885
3887
|
type: Input
|
|
3886
3888
|
}], type: [{
|
|
@@ -3897,6 +3899,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
3897
3899
|
type: Input
|
|
3898
3900
|
}], onClickAction: [{
|
|
3899
3901
|
type: Input
|
|
3902
|
+
}], isUploaded: [{
|
|
3903
|
+
type: Input
|
|
3904
|
+
}], imageUpload: [{
|
|
3905
|
+
type: Input
|
|
3900
3906
|
}], open: [{
|
|
3901
3907
|
type: Output
|
|
3902
3908
|
}], clickEvent: [{
|