@wizishop/angular-components 0.0.167 → 0.0.171
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 +11 -3
- package/assets/i18n/en.json +1 -1
- package/assets/i18n/fr.json +1 -1
- package/bundles/wizishop-angular-components.umd.js +53 -33
- package/bundles/wizishop-angular-components.umd.js.map +1 -1
- package/bundles/wizishop-angular-components.umd.min.js +2 -2
- package/bundles/wizishop-angular-components.umd.min.js.map +1 -1
- package/esm2015/lib/components/inputs/input/input.component.js +4 -2
- package/esm2015/lib/components/mosaic/mosaic.component.js +34 -25
- package/esm2015/lib/components/shared-components.module.js +5 -1
- package/esm2015/lib/components/text-area/text-area.component.js +5 -4
- package/esm2015/lib/components/wrapper-sidebar/wrapper-sidebar.component.js +5 -3
- package/fesm2015/wizishop-angular-components.js +47 -29
- package/fesm2015/wizishop-angular-components.js.map +1 -1
- package/lib/components/inputs/input/input.component.d.ts +2 -0
- package/lib/components/mosaic/mosaic.component.d.ts +19 -12
- package/lib/components/text-area/text-area.component.d.ts +2 -1
- package/lib/components/wrapper-sidebar/wrapper-sidebar.component.d.ts +2 -0
- package/package.json +1 -1
- package/wizishop-angular-components-0.0.171.tgz +0 -0
- package/wizishop-angular-components.metadata.json +1 -1
- package/wizishop-angular-components-0.0.167.tgz +0 -0
package/angular-components.scss
CHANGED
|
@@ -3220,12 +3220,15 @@ $wac-subtitle-color: #7A87A1!default;
|
|
|
3220
3220
|
}
|
|
3221
3221
|
}
|
|
3222
3222
|
.wac-mosaic {
|
|
3223
|
+
height: 450px;
|
|
3224
|
+
position: relative;
|
|
3223
3225
|
&__loader {
|
|
3224
|
-
min-height:
|
|
3226
|
+
min-height: 450px;
|
|
3225
3227
|
width: 100%;
|
|
3226
3228
|
display: flex;
|
|
3227
3229
|
justify-content: center;
|
|
3228
3230
|
align-items: center;
|
|
3231
|
+
|
|
3229
3232
|
}
|
|
3230
3233
|
&__wrapper {
|
|
3231
3234
|
width: 100%;
|
|
@@ -3236,13 +3239,16 @@ $wac-subtitle-color: #7A87A1!default;
|
|
|
3236
3239
|
width: calc(100% + 10px);
|
|
3237
3240
|
transform: translateX(-5px);
|
|
3238
3241
|
}
|
|
3242
|
+
&__scrollbar {
|
|
3243
|
+
width: 100%;
|
|
3244
|
+
}
|
|
3239
3245
|
&__column {
|
|
3240
3246
|
width: 100%;
|
|
3241
3247
|
margin: 0;
|
|
3242
3248
|
@include media('>tablet') {
|
|
3243
3249
|
margin: 0 5px;
|
|
3244
3250
|
}
|
|
3245
|
-
&
|
|
3251
|
+
&__image {
|
|
3246
3252
|
width: 100%;
|
|
3247
3253
|
margin: 0 0 10px;
|
|
3248
3254
|
position: relative;
|
|
@@ -4825,6 +4831,7 @@ span.wac-tooltip {
|
|
|
4825
4831
|
width: auto;
|
|
4826
4832
|
display: flex;
|
|
4827
4833
|
align-items: center;
|
|
4834
|
+
margin: 0!important;
|
|
4828
4835
|
&:first-child {
|
|
4829
4836
|
position: relative;
|
|
4830
4837
|
margin: 0 20px 0 0;
|
|
@@ -5007,7 +5014,8 @@ span.wac-tooltip {
|
|
|
5007
5014
|
}
|
|
5008
5015
|
|
|
5009
5016
|
&:nth-child(2) {
|
|
5010
|
-
background
|
|
5017
|
+
background: $wac-grey center center no-repeat;
|
|
5018
|
+
background-size: auto;
|
|
5011
5019
|
|
|
5012
5020
|
@include media('>=desktop') {
|
|
5013
5021
|
width: 67%;
|
package/assets/i18n/en.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"wac.datatable.noresult":"There are no results for this search","wac.input.progressbar.information.good":"Very good","wac.input.progressbar.information.too.long":"Too long","wac.input.progressbar.information.too.short":"Too short","wac.PaginationComponent.on":"{{low}}-{{high}} of {{total}}","wac.PaginationComponent.page":"Go to page","wac.simpleSearchComponent.error":"The search field is compulsory"}
|
|
1
|
+
{"wac.datatable.noresult":"There are no results for this search","wac.input.progressbar.information.good":"Very good","wac.input.progressbar.information.too.long":"Too long","wac.input.progressbar.information.too.short":"Too short","wac.MosaicComponent.import":"Import","wac.PaginationComponent.on":"{{low}}-{{high}} of {{total}}","wac.PaginationComponent.page":"Go to page","wac.simpleSearchComponent.error":"The search field is compulsory"}
|
package/assets/i18n/fr.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"wac.datatable.noresult":"Il n'y a aucun résultat pour cette recherche","wac.input.progressbar.information.good":"Très bien","wac.input.progressbar.information.too.long":"Trop long","wac.input.progressbar.information.too.short":"Trop court","wac.PaginationComponent.on":"{{low}}-{{high}} sur {{total}}","wac.PaginationComponent.page":"Aller à la page","wac.simpleSearchComponent.error":"Le champ de recherche est obligatoire"}
|
|
1
|
+
{"wac.datatable.noresult":"Il n'y a aucun résultat pour cette recherche","wac.input.progressbar.information.good":"Très bien","wac.input.progressbar.information.too.long":"Trop long","wac.input.progressbar.information.too.short":"Trop court","wac.MosaicComponent.import":"Importer","wac.PaginationComponent.on":"{{low}}-{{high}} sur {{total}}","wac.PaginationComponent.page":"Aller à la page","wac.simpleSearchComponent.error":"Le champ de recherche est obligatoire"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@wizishop/ng-wizi-bulma'), require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ngx-perfect-scrollbar'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/overlay'), require('@angular/cdk/table'), require('@angular/animations'), require('ngx-chips'), require('@ngx-translate/core'), require('@angular/router'), require('ngx-autosize')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define('@wizishop/angular-components', ['exports', '@wizishop/ng-wizi-bulma', '@angular/core', '@angular/common', '@angular/forms', 'ngx-perfect-scrollbar', 'rxjs', 'rxjs/operators', '@angular/cdk/overlay', '@angular/cdk/table', '@angular/animations', 'ngx-chips', '@ngx-translate/core', '@angular/router', 'ngx-autosize'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['angular-components'] = {}), global['ng-wizi-bulma'], global.ng.core, global.ng.common, global.ng.forms, global['ngx-perfect-scrollbar'], global.rxjs, global.rxjs.operators, global.ng.cdk.overlay, global.ng.cdk.table, global.ng.animations, global['ngx-chips'], global['@ngx-translate/core'], global.ng.router, global.ngxAutosize));
|
|
5
|
-
}(this, (function (exports, i1$1, i0, common, forms, ngxPerfectScrollbar, rxjs, operators, i1, table, animations, ngxChips, core, router, ngxAutosize) { 'use strict';
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@wizishop/ng-wizi-bulma'), require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ngx-perfect-scrollbar'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/overlay'), require('@angular/cdk/table'), require('@angular/animations'), require('ngx-chips'), require('@ngx-translate/core'), require('@angular/router'), require('ngx-autosize'), require('ngx-scrollbar'), require('ngx-scrollbar/reached-event')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('@wizishop/angular-components', ['exports', '@wizishop/ng-wizi-bulma', '@angular/core', '@angular/common', '@angular/forms', 'ngx-perfect-scrollbar', 'rxjs', 'rxjs/operators', '@angular/cdk/overlay', '@angular/cdk/table', '@angular/animations', 'ngx-chips', '@ngx-translate/core', '@angular/router', 'ngx-autosize', 'ngx-scrollbar', 'ngx-scrollbar/reached-event'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['angular-components'] = {}), global['ng-wizi-bulma'], global.ng.core, global.ng.common, global.ng.forms, global['ngx-perfect-scrollbar'], global.rxjs, global.rxjs.operators, global.ng.cdk.overlay, global.ng.cdk.table, global.ng.animations, global['ngx-chips'], global['@ngx-translate/core'], global.ng.router, global.ngxAutosize, global.ngxScrollbar, global.reachedEvent));
|
|
5
|
+
}(this, (function (exports, i1$1, i0, common, forms, ngxPerfectScrollbar, rxjs, operators, i1, table, animations, ngxChips, core, router, ngxAutosize, ngxScrollbar, reachedEvent) { 'use strict';
|
|
6
6
|
|
|
7
7
|
/*! *****************************************************************************
|
|
8
8
|
Copyright (c) Microsoft Corporation.
|
|
@@ -2030,7 +2030,7 @@
|
|
|
2030
2030
|
TextAreaComponent.decorators = [
|
|
2031
2031
|
{ type: i0.Component, args: [{
|
|
2032
2032
|
selector: 'wac-text-area',
|
|
2033
|
-
template: "<div class=\"field wac-text-area\" [ngClass]=\"{'dynamic': dynamicSize}\">\n <div class=\"field-label is-normal has-text-left\">\n <label class=\"label has-text-weight-normal\" [innerHTML]=\"label\" [for]=\"id\"></label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <p class=\"control\" [ngClass]=\"{ 'has-icons-right': textError }\">\n <textarea\n class=\"textarea\"\n [id]=\"id\"\n [ngClass]=\"{ 'is-danger': textError, 'has-help-text': textInfo != '' || size }\"\n [placeholder]=\"placeholder\"\n [attr.size]=\"size\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n [autosize]=\"dynamicSize\"\n [onlyGrow]=\"true\"\n [maxlength]=\"maxlength ? maxlength : 524288\"\n ></textarea>\n\n <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n <i class=\"fal fa-times has-text-danger\"></i>\n </span>\n <span\n *ngIf=\"textInfo && (textError === null || textError === '')\"\n class=\"is-size-7 wac-text-area__info text-info\"\n [innerHtml]=\"textInfo\"\n ></span>\n <span *ngIf=\"textError\" class=\"is-size-7 wac-text-area__error has-text-danger\" [innerHtml]=\"textError\"></span>\n <span\n *ngIf=\"size && !progressBar\"\n class=\"is-size-7 wac-text-area__size\"\n [ngClass]=\"value
|
|
2033
|
+
template: "<div class=\"field wac-text-area\" [ngClass]=\"{'dynamic': dynamicSize}\">\n <div class=\"field-label is-normal has-text-left\">\n <label class=\"label has-text-weight-normal\" [innerHTML]=\"label\" [for]=\"id\"></label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <p class=\"control\" [ngClass]=\"{ 'has-icons-right': textError }\">\n <textarea\n class=\"textarea\"\n [id]=\"id\"\n [ngClass]=\"{ 'is-danger': textError, 'has-help-text': textInfo != '' || size }\"\n [placeholder]=\"placeholder\"\n [attr.size]=\"size\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n [autosize]=\"dynamicSize\"\n [onlyGrow]=\"true\"\n [maxlength]=\"maxlength ? maxlength : 524288\"\n [minlength]=\"minlength ? minlength : 0\"\n ></textarea>\n\n <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n <i class=\"fal fa-times has-text-danger\"></i>\n </span>\n <span\n *ngIf=\"textInfo && (textError === null || textError === '')\"\n class=\"is-size-7 wac-text-area__info text-info\"\n [innerHtml]=\"textInfo\"\n ></span>\n <span *ngIf=\"textError\" class=\"is-size-7 wac-text-area__error has-text-danger\" [innerHtml]=\"textError\"></span>\n <span\n *ngIf=\"size && !progressBar\"\n class=\"is-size-7 wac-text-area__size\"\n [ngClass]=\"value.length > size ? 'has-text-danger' : ''\"\n >{{ value ? value.length : 0 }}/{{ size }}</span\n >\n </p>\n <wac-progress-bar *ngIf=\"progressBar && value\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n </div>\n </div>\n</div>\n",
|
|
2034
2034
|
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }]
|
|
2035
2035
|
},] }
|
|
2036
2036
|
];
|
|
@@ -2042,11 +2042,12 @@
|
|
|
2042
2042
|
textError: [{ type: i0.Input }],
|
|
2043
2043
|
size: [{ type: i0.Input }],
|
|
2044
2044
|
min: [{ type: i0.Input }],
|
|
2045
|
-
maxlength: [{ type: i0.Input }],
|
|
2046
2045
|
max: [{ type: i0.Input }],
|
|
2047
2046
|
dynamicSize: [{ type: i0.Input }],
|
|
2048
2047
|
progressBar: [{ type: i0.Input }],
|
|
2049
|
-
disabled: [{ type: i0.Input }]
|
|
2048
|
+
disabled: [{ type: i0.Input }],
|
|
2049
|
+
maxlength: [{ type: i0.Input }],
|
|
2050
|
+
minlength: [{ type: i0.Input }]
|
|
2050
2051
|
};
|
|
2051
2052
|
|
|
2052
2053
|
var H1Component = /** @class */ (function () {
|
|
@@ -2213,7 +2214,7 @@
|
|
|
2213
2214
|
InputComponent.decorators = [
|
|
2214
2215
|
{ type: i0.Component, args: [{
|
|
2215
2216
|
selector: 'wac-input',
|
|
2216
|
-
template: "<div\n class=\"field wac-input\"\n [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'is-medium': medium, 'with-padding': padding, 'indication-left': indicationLeft, 'with-progress-bar': progressBar }\"\n>\n <div class=\"field-label is-normal has-text-left\" *ngIf=\"!withoutBlock\">\n <label\n [ngClass]=\"[boldLabel == 'true' ? 'label has-text-weight-bold' : 'label has-text-weight-normal', showTooltip ? 'label-inline' : '']\"\n [innerHTML]=\"label\"\n [for]=\"id\"\n ></label>\n <wac-tooltip\n *ngIf=\"showTooltip\"\n [tooltipIcon]=\"iconTooltip\"\n [tooltipText]=\"textTooltip\"\n [tooltipLink]=\"linkTooltip\"\n [tooltipUrl]=\"urlTooltip\"\n ></wac-tooltip>\n <!-- Size -->\n <span *ngIf=\"
|
|
2217
|
+
template: "<div\n class=\"field wac-input\"\n [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'is-medium': medium, 'with-padding': padding, 'indication-left': indicationLeft, 'with-progress-bar': progressBar }\"\n>\n <div class=\"field-label is-normal has-text-left\" *ngIf=\"!withoutBlock\">\n <label\n [ngClass]=\"[boldLabel == 'true' ? 'label has-text-weight-bold' : 'label has-text-weight-normal', showTooltip ? 'label-inline' : '']\"\n [innerHTML]=\"label\"\n [for]=\"id\"\n ></label>\n <wac-tooltip\n *ngIf=\"showTooltip\"\n [tooltipIcon]=\"iconTooltip\"\n [tooltipText]=\"textTooltip\"\n [tooltipLink]=\"linkTooltip\"\n [tooltipUrl]=\"urlTooltip\"\n ></wac-tooltip>\n <!-- Size -->\n <span *ngIf=\"size && !progressBar\" class=\"is-size-7 wac-input__size\">\n <strong>{{ value.toString().length }}</strong> / {{ size }}\n </span>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <p\n class=\"control\"\n [ngClass]=\"{ 'has-icons-right': textError || success, 'has-icons-left': icon !== '', 'has-input-group': textAppend || textPrepend }\"\n >\n <!-- Text Prepend -->\n <span *ngIf=\"textPrepend\" class=\"has-input-group\">\n <span class=\"has-input-group-text prepend\">{{ textPrepend }}</span>\n <span *ngIf=\"icon !== ''\" class=\"icon is-small is-left\">\n <i [class]=\"icon\"></i>\n </span>\n </span>\n\n <!-- Input -->\n <input\n [class]=\"'input ' + extraClasses\"\n [id]=\"id\"\n [ngClass]=\"{\n 'is-danger': textError,\n 'is-large': big,\n 'is-number': isNumber,\n 'remove-margin': disableMargin,\n 'text-append': textAppend\n }\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [attr.size]=\"size\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n (focusout)=\"onFocusOut()\"\n [min]=\"min\"\n [max]=\"max\"\n [maxlength]=\"maxlength ? maxlength : 524288\"\n [minlength]=\"minlength ? minlength : 0\"\n (keypress)=\"keyPress($event)\"\n />\n\n <!-- Indication at the end of the input -->\n <span class=\"indication\" *ngIf=\"indication\" [ngClass]=\"{'reverse': indicationLeft}\">\n <span [innerHTML]=\"indication\"></span>\n </span>\n\n <!-- Text Append -->\n <span *ngIf=\"textAppend && !indicationLeft\" class=\"has-input-group\">\n <span class=\"has-input-group-text append\">{{ textAppend }}</span>\n <!-- error if text append not empty -->\n <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n <i class=\"fal fa-times has-text-danger\"></i>\n </span>\n </span>\n\n <!-- Icon Left -->\n <span *ngIf=\"icon !== '' && !textPrepend && !indicationLeft\" class=\"icon is-small is-left\">\n <i [class]=\"icon\"></i>\n </span>\n\n <!-- Icon error if textAppend empty -->\n <span *ngIf=\"textError && !textAppend && !indicationLeft\" class=\"icon is-small is-right\">\n <i class=\"fal fa-times has-text-danger\"></i>\n </span>\n\n <!-- Icon success -->\n <span *ngIf=\"success\" class=\"icon is-small is-right\">\n <i class=\"fas fa-check has-text-success\"></i>\n </span>\n\n <!-- Text Info -->\n <span\n *ngIf=\"textInfo && (textError === null || textError === '') && !progressBar && !indicationLeft\"\n class=\"is-size-7 wac-input__info text-info\"\n [innerHtml]=\"textInfo\"\n ></span>\n\n <!-- Text Error -->\n <span *ngIf=\"textError && !progressBar && !indicationLeft\" class=\"is-size-7 wac-input__error has-text-danger\" [innerHtml]=\"textError\"></span>\n </p>\n\n <!-- Progress Bar -->\n <wac-progress-bar *ngIf=\"progressBar && !indicationLeft\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n </div>\n </div>\n</div>\n",
|
|
2217
2218
|
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: InputComponent, multi: true }]
|
|
2218
2219
|
},] }
|
|
2219
2220
|
];
|
|
@@ -2248,6 +2249,8 @@
|
|
|
2248
2249
|
disabled: [{ type: i0.Input }],
|
|
2249
2250
|
indication: [{ type: i0.Input }],
|
|
2250
2251
|
success: [{ type: i0.Input }],
|
|
2252
|
+
maxlength: [{ type: i0.Input }],
|
|
2253
|
+
minlength: [{ type: i0.Input }],
|
|
2251
2254
|
indicationLeft: [{ type: i0.Input }],
|
|
2252
2255
|
keypressEnter: [{ type: i0.Output }]
|
|
2253
2256
|
};
|
|
@@ -4209,12 +4212,14 @@
|
|
|
4209
4212
|
WrapperSidebarComponent.decorators = [
|
|
4210
4213
|
{ type: i0.Component, args: [{
|
|
4211
4214
|
selector: 'wac-wrapper-sidebar',
|
|
4212
|
-
template: "<div class=\"wac-wrapper-sidebar\" [ngClass]=\"{'reverse': reverse}\">\n <div class=\"wac-wrapper-sidebar__left\">\n <ng-content select=\"[sidebar]\"></ng-content>\n </div>\n <div class=\"wac-wrapper-sidebar__right\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</div>\n"
|
|
4215
|
+
template: "<div class=\"wac-wrapper-sidebar\" [ngClass]=\"{'reverse': reverse}\">\n <div class=\"wac-wrapper-sidebar__left\">\n <ng-content select=\"[sidebar]\"></ng-content>\n </div>\n <div class=\"wac-wrapper-sidebar__right\" [style.backgroundImage]=\"'url(' + backgroundGrey + ')'\" [style.backgroundSize]=\"backgroundWidth\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</div>\n"
|
|
4213
4216
|
},] }
|
|
4214
4217
|
];
|
|
4215
4218
|
WrapperSidebarComponent.ctorParameters = function () { return []; };
|
|
4216
4219
|
WrapperSidebarComponent.propDecorators = {
|
|
4217
|
-
reverse: [{ type: i0.Input }]
|
|
4220
|
+
reverse: [{ type: i0.Input }],
|
|
4221
|
+
backgroundGrey: [{ type: i0.Input }],
|
|
4222
|
+
backgroundWidth: [{ type: i0.Input }]
|
|
4218
4223
|
};
|
|
4219
4224
|
|
|
4220
4225
|
var BreadcrumbsComponent = /** @class */ (function () {
|
|
@@ -4389,43 +4394,56 @@
|
|
|
4389
4394
|
|
|
4390
4395
|
var MosaicComponent = /** @class */ (function () {
|
|
4391
4396
|
function MosaicComponent() {
|
|
4392
|
-
this.
|
|
4393
|
-
this.
|
|
4397
|
+
this._imagesList = [];
|
|
4398
|
+
this.isLoading = false;
|
|
4399
|
+
this.numberOfColumn = 3;
|
|
4400
|
+
this.importImageSrc = new i0.EventEmitter();
|
|
4394
4401
|
}
|
|
4395
|
-
MosaicComponent.prototype
|
|
4396
|
-
|
|
4397
|
-
|
|
4398
|
-
|
|
4399
|
-
|
|
4400
|
-
this.
|
|
4402
|
+
Object.defineProperty(MosaicComponent.prototype, "imagesList", {
|
|
4403
|
+
get: function () {
|
|
4404
|
+
return this._imagesList;
|
|
4405
|
+
},
|
|
4406
|
+
set: function (imagesList) {
|
|
4407
|
+
this._imagesList = imagesList;
|
|
4408
|
+
this.generateColumns();
|
|
4409
|
+
},
|
|
4410
|
+
enumerable: false,
|
|
4411
|
+
configurable: true
|
|
4412
|
+
});
|
|
4413
|
+
MosaicComponent.prototype.generateColumns = function () {
|
|
4414
|
+
this.columns = this.sliceIntoChunks();
|
|
4415
|
+
};
|
|
4416
|
+
MosaicComponent.prototype.sliceIntoChunks = function () {
|
|
4417
|
+
var columns = [];
|
|
4418
|
+
var numberOfImagePerColumn = this.imagesList.length / this.numberOfColumn;
|
|
4419
|
+
for (var i = 0; i < this.imagesList.length; i += numberOfImagePerColumn) {
|
|
4420
|
+
var chunk = this.imagesList.slice(i, i + numberOfImagePerColumn);
|
|
4421
|
+
columns.push(chunk);
|
|
4401
4422
|
}
|
|
4402
|
-
|
|
4423
|
+
return columns;
|
|
4403
4424
|
};
|
|
4404
|
-
MosaicComponent.prototype.
|
|
4405
|
-
|
|
4425
|
+
MosaicComponent.prototype.onBottomReached = function () {
|
|
4426
|
+
console.log('end bottom !');
|
|
4406
4427
|
};
|
|
4407
|
-
MosaicComponent.prototype.
|
|
4408
|
-
|
|
4409
|
-
for (var i = 0; i < arr.length; i += chunkSize) {
|
|
4410
|
-
var chunk = arr.slice(i, i + chunkSize);
|
|
4411
|
-
res.push(chunk);
|
|
4412
|
-
}
|
|
4413
|
-
return res;
|
|
4428
|
+
MosaicComponent.prototype.onImportImage = function (src) {
|
|
4429
|
+
this.importImageSrc.emit(src);
|
|
4414
4430
|
};
|
|
4415
4431
|
return MosaicComponent;
|
|
4416
4432
|
}());
|
|
4417
4433
|
MosaicComponent.decorators = [
|
|
4418
4434
|
{ type: i0.Component, args: [{
|
|
4419
4435
|
selector: 'wac-mosaic',
|
|
4420
|
-
template: "<div class=\"wac-
|
|
4436
|
+
template: "<div class=\"wac-mosaic\" *ngIf=\"!isLoading; else loading\">\n <ng-scrollbar (reachedBottom)=\"onBottomReached()\" reachedOffset=\"200\" class=\"wac-mosaic__wrapper__scrollbar\">\n <div class=\"wac-mosaic__wrapper\">\n <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns\">\n <div class=\"wac-mosaic__wrapper__column__image\" *ngFor=\"let image of column; let i = index;\">\n <img [src]=\"image.src\" [alt]=\"image.alt\"/>\n <div class=\"hover\">\n <ng-container\n [ngTemplateOutlet]=\"importButtonTemplate || defaultImportButton\"\n [ngTemplateOutletContext]=\"{ $implicit: image }\"\n >\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </ng-scrollbar>\n</div>\n\n<ng-template #defaultImportButton let-image>\n <wac-button [icon]=\"'fa-solid fa-image'\" [label]=\"'wac.MosaicComponent.import' | translate\" [extraClasses]=\"'is-success'\" (click)=\"onImportImage(image.src)\"></wac-button>\n</ng-template>\n\n<ng-template #loading>\n <div class=\"wac-mosaic__loader\" *ngIf=\"isLoading\">\n <wac-loader></wac-loader>\n </div>\n</ng-template>\n",
|
|
4437
|
+
encapsulation: i0.ViewEncapsulation.None
|
|
4421
4438
|
},] }
|
|
4422
4439
|
];
|
|
4423
4440
|
MosaicComponent.ctorParameters = function () { return []; };
|
|
4424
4441
|
MosaicComponent.propDecorators = {
|
|
4425
|
-
|
|
4426
|
-
|
|
4427
|
-
|
|
4428
|
-
|
|
4442
|
+
imagesList: [{ type: i0.Input }],
|
|
4443
|
+
isLoading: [{ type: i0.Input }],
|
|
4444
|
+
numberOfColumn: [{ type: i0.Input }],
|
|
4445
|
+
importButtonTemplate: [{ type: i0.Input }],
|
|
4446
|
+
importImageSrc: [{ type: i0.Output }]
|
|
4429
4447
|
};
|
|
4430
4448
|
|
|
4431
4449
|
var components = [
|
|
@@ -4522,6 +4540,8 @@
|
|
|
4522
4540
|
AlertPopupModule,
|
|
4523
4541
|
router.RouterModule,
|
|
4524
4542
|
ngxAutosize.AutosizeModule,
|
|
4543
|
+
ngxScrollbar.NgScrollbarModule,
|
|
4544
|
+
reachedEvent.NgScrollbarReachedModule,
|
|
4525
4545
|
TreeModule
|
|
4526
4546
|
],
|
|
4527
4547
|
declarations: components,
|