@wizishop/angular-components 15.1.112 → 15.1.114
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/esm2020/lib/components/mosaic/mosaic.component.mjs +14 -11
- package/esm2020/lib/components/multiple-search-plus/multiple-search-plus.component.mjs +6 -3
- package/fesm2015/wizishop-angular-components.mjs +18 -12
- package/fesm2015/wizishop-angular-components.mjs.map +1 -1
- package/fesm2020/wizishop-angular-components.mjs +18 -12
- package/fesm2020/wizishop-angular-components.mjs.map +1 -1
- package/lib/components/mosaic/mosaic.component.d.ts +2 -2
- package/lib/components/multiple-search-plus/multiple-search-plus.component.d.ts +2 -1
- package/package.json +1 -1
- package/wizishop-angular-components-15.1.114.tgz +0 -0
- package/wizishop-angular-components-15.1.112.tgz +0 -0
|
@@ -4018,6 +4018,7 @@ class MultipleSearchPlusComponent {
|
|
|
4018
4018
|
this.openSearchResults = false;
|
|
4019
4019
|
this.isLoading = true;
|
|
4020
4020
|
this.disabled = false;
|
|
4021
|
+
this.hideResults = false;
|
|
4021
4022
|
this.searchValue = new EventEmitter();
|
|
4022
4023
|
this.optionsChange = new EventEmitter();
|
|
4023
4024
|
}
|
|
@@ -4080,16 +4081,18 @@ class MultipleSearchPlusComponent {
|
|
|
4080
4081
|
}
|
|
4081
4082
|
}
|
|
4082
4083
|
MultipleSearchPlusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: MultipleSearchPlusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4083
|
-
MultipleSearchPlusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: MultipleSearchPlusComponent, selector: "wac-multiple-search-plus", inputs: { options: "options", searchResults: "searchResults", disabled: "disabled" }, outputs: { searchValue: "searchValue", optionsChange: "optionsChange" }, ngImport: i0, template: "<div class=\"wac-multiple-search-plus\" [zIndexToggle]=\"openSelect || openSearchResults\" [ngClass]=\"{ 'disabled': disabled }\">\r\n <!-- Multiple select with search input -->\r\n <div class=\"wac-multiple-search\" [ngClass]=\"{ open: openSelect }\">\r\n <div class=\"wac-multiple-search__wrapper\">\r\n <div class=\"wac-multiple-search__wrapper__left\" *ngIf=\"options.length > 1\" [ngClass]=\"{ open: openSelect }\" wzAutoHide (clickOutside)=\"closeSelect()\">\r\n <span>{{ label }}</span>\r\n <i class=\"fal fa-chevron-down\"></i>\r\n <div class=\"wac-multiple-search__wrapper__left__background\" (click)=\"onToggleSelect()\"></div>\r\n <div class=\"wac-multiple-search__wrapper__left__select\" *ngIf=\"openSelect\">\r\n <div\r\n class=\"wac-multiple-search__wrapper__left__select__item\"\r\n *ngFor=\"let option of options; let i = index\"\r\n [attr.data-index]=\"i\"\r\n (click)=\"resetAllVue(i); inputSearch.value = ''\"\r\n >\r\n <span>{{ option.label }}</span>\r\n <input type=\"hidden\" value=\"\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wac-multiple-search__wrapper__right\" wzAutoHide (clickOutside)=\"closeSearchResults()\">\r\n <button><i class=\"fal fa-search\"></i></button>\r\n <input\r\n #inputSearch\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n debounceKeyUp\r\n [debounceTime]=\"500\"\r\n (onEventChange)=\"setSearchValue($event)\"\r\n />\r\n <div class=\"wac-multiple-search__wrapper__left__select\" *ngIf=\"openSearchResults\">\r\n <div\r\n class=\"wac-multiple-search__wrapper__left__select__item\"\r\n *ngFor=\"let res of searchResults; let i = index\"\r\n (click)=\"addResult(i); inputSearch.value = ''\"\r\n >\r\n <wac-image *ngIf=\"res.image\" [src]=\"res.image\"></wac-image>\r\n <wac-text>#{{ res.id }} {{ res.name }}</wac-text>\r\n </div>\r\n <div class=\"wac-table__body__loader\" *ngIf=\"isLoading && !searchResults\">\r\n <wac-loader [small]=\"true\"></wac-loader>\r\n </div>\r\n <div\r\n class=\"wac-multiple-search__wrapper__left__select__item\"\r\n *ngIf=\"!searchResults?.length\"\r\n >\r\n <span>{{'wac.datatable.noresult' | translate}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Results checked -->\r\n <div *ngFor=\"let option of options; let i = index\">\r\n <div class=\"wac-multiple-search-plus__wrapper\" *ngIf=\"option.table.length\">\r\n <wac-h3>{{ option.title }}</wac-h3>\r\n <div class=\"wac-multiple-search-plus__wrapper__block hover default\" *ngFor=\"let item of option.table; let indexItem = index\">\r\n <wac-image *ngIf=\"item.image\" [src]=\"item.image\"></wac-image>\r\n <wac-text>{{ item.name }}</wac-text>\r\n <span (click)=\"deleteResult(indexItem, i)\"><i class=\"fas fa-times\"></i></span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DebounceKeyupDirective, selector: "input[debounceKeyUp]" }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "component", type: LoaderComponent, selector: "wac-loader", inputs: ["text", "small"] }, { kind: "component", type: ImageComponent, selector: "wac-image", inputs: ["src"] }, { kind: "component", type: H3Component, selector: "wac-h3", inputs: ["grey"] }, { kind: "component", type: TextComponent, selector: "wac-text", inputs: ["textClass"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
|
|
4084
|
+
MultipleSearchPlusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: MultipleSearchPlusComponent, selector: "wac-multiple-search-plus", inputs: { options: "options", searchResults: "searchResults", disabled: "disabled", hideResults: "hideResults" }, outputs: { searchValue: "searchValue", optionsChange: "optionsChange" }, ngImport: i0, template: "<div class=\"wac-multiple-search-plus\" [zIndexToggle]=\"openSelect || openSearchResults\" [ngClass]=\"{ 'disabled': disabled }\">\r\n <!-- Multiple select with search input -->\r\n <div class=\"wac-multiple-search\" [ngClass]=\"{ open: openSelect }\">\r\n <div class=\"wac-multiple-search__wrapper\">\r\n <div class=\"wac-multiple-search__wrapper__left\" *ngIf=\"options.length > 1\" [ngClass]=\"{ open: openSelect }\" wzAutoHide (clickOutside)=\"closeSelect()\">\r\n <span>{{ label }}</span>\r\n <i class=\"fal fa-chevron-down\"></i>\r\n <div class=\"wac-multiple-search__wrapper__left__background\" (click)=\"onToggleSelect()\"></div>\r\n <div class=\"wac-multiple-search__wrapper__left__select\" *ngIf=\"openSelect\">\r\n <div\r\n class=\"wac-multiple-search__wrapper__left__select__item\"\r\n *ngFor=\"let option of options; let i = index\"\r\n [attr.data-index]=\"i\"\r\n (click)=\"resetAllVue(i); inputSearch.value = ''\"\r\n >\r\n <span>{{ option.label }}</span>\r\n <input type=\"hidden\" value=\"\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wac-multiple-search__wrapper__right\" wzAutoHide (clickOutside)=\"closeSearchResults()\">\r\n <button><i class=\"fal fa-search\"></i></button>\r\n <input\r\n #inputSearch\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n debounceKeyUp\r\n [debounceTime]=\"500\"\r\n (onEventChange)=\"setSearchValue($event)\"\r\n />\r\n <div class=\"wac-multiple-search__wrapper__left__select\" *ngIf=\"openSearchResults\">\r\n <div\r\n class=\"wac-multiple-search__wrapper__left__select__item\"\r\n *ngFor=\"let res of searchResults; let i = index\"\r\n (click)=\"addResult(i); inputSearch.value = ''\"\r\n >\r\n <wac-image *ngIf=\"res.image\" [src]=\"res.image\"></wac-image>\r\n <wac-text>#{{ res.id }} {{ res.name }}</wac-text>\r\n </div>\r\n <div class=\"wac-table__body__loader\" *ngIf=\"isLoading && !searchResults\">\r\n <wac-loader [small]=\"true\"></wac-loader>\r\n </div>\r\n <div\r\n class=\"wac-multiple-search__wrapper__left__select__item\"\r\n *ngIf=\"!searchResults?.length\"\r\n >\r\n <span>{{'wac.datatable.noresult' | translate}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Results checked -->\r\n <div *ngFor=\"let option of options; let i = index\">\r\n <div class=\"wac-multiple-search-plus__wrapper\" *ngIf=\"option.table.length && !hideResults\">\r\n <wac-h3>{{ option.title }}</wac-h3>\r\n <div class=\"wac-multiple-search-plus__wrapper__block hover default\" *ngFor=\"let item of option.table; let indexItem = index\">\r\n <wac-image *ngIf=\"item.image\" [src]=\"item.image\"></wac-image>\r\n <wac-text>{{ item.name }}</wac-text>\r\n <span (click)=\"deleteResult(indexItem, i)\"><i class=\"fas fa-times\"></i></span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DebounceKeyupDirective, selector: "input[debounceKeyUp]" }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "component", type: LoaderComponent, selector: "wac-loader", inputs: ["text", "small"] }, { kind: "component", type: ImageComponent, selector: "wac-image", inputs: ["src"] }, { kind: "component", type: H3Component, selector: "wac-h3", inputs: ["grey"] }, { kind: "component", type: TextComponent, selector: "wac-text", inputs: ["textClass"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
|
|
4084
4085
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: MultipleSearchPlusComponent, decorators: [{
|
|
4085
4086
|
type: Component,
|
|
4086
|
-
args: [{ selector: 'wac-multiple-search-plus', template: "<div class=\"wac-multiple-search-plus\" [zIndexToggle]=\"openSelect || openSearchResults\" [ngClass]=\"{ 'disabled': disabled }\">\r\n <!-- Multiple select with search input -->\r\n <div class=\"wac-multiple-search\" [ngClass]=\"{ open: openSelect }\">\r\n <div class=\"wac-multiple-search__wrapper\">\r\n <div class=\"wac-multiple-search__wrapper__left\" *ngIf=\"options.length > 1\" [ngClass]=\"{ open: openSelect }\" wzAutoHide (clickOutside)=\"closeSelect()\">\r\n <span>{{ label }}</span>\r\n <i class=\"fal fa-chevron-down\"></i>\r\n <div class=\"wac-multiple-search__wrapper__left__background\" (click)=\"onToggleSelect()\"></div>\r\n <div class=\"wac-multiple-search__wrapper__left__select\" *ngIf=\"openSelect\">\r\n <div\r\n class=\"wac-multiple-search__wrapper__left__select__item\"\r\n *ngFor=\"let option of options; let i = index\"\r\n [attr.data-index]=\"i\"\r\n (click)=\"resetAllVue(i); inputSearch.value = ''\"\r\n >\r\n <span>{{ option.label }}</span>\r\n <input type=\"hidden\" value=\"\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wac-multiple-search__wrapper__right\" wzAutoHide (clickOutside)=\"closeSearchResults()\">\r\n <button><i class=\"fal fa-search\"></i></button>\r\n <input\r\n #inputSearch\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n debounceKeyUp\r\n [debounceTime]=\"500\"\r\n (onEventChange)=\"setSearchValue($event)\"\r\n />\r\n <div class=\"wac-multiple-search__wrapper__left__select\" *ngIf=\"openSearchResults\">\r\n <div\r\n class=\"wac-multiple-search__wrapper__left__select__item\"\r\n *ngFor=\"let res of searchResults; let i = index\"\r\n (click)=\"addResult(i); inputSearch.value = ''\"\r\n >\r\n <wac-image *ngIf=\"res.image\" [src]=\"res.image\"></wac-image>\r\n <wac-text>#{{ res.id }} {{ res.name }}</wac-text>\r\n </div>\r\n <div class=\"wac-table__body__loader\" *ngIf=\"isLoading && !searchResults\">\r\n <wac-loader [small]=\"true\"></wac-loader>\r\n </div>\r\n <div\r\n class=\"wac-multiple-search__wrapper__left__select__item\"\r\n *ngIf=\"!searchResults?.length\"\r\n >\r\n <span>{{'wac.datatable.noresult' | translate}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Results checked -->\r\n <div *ngFor=\"let option of options; let i = index\">\r\n <div class=\"wac-multiple-search-plus__wrapper\" *ngIf=\"option.table.length\">\r\n <wac-h3>{{ option.title }}</wac-h3>\r\n <div class=\"wac-multiple-search-plus__wrapper__block hover default\" *ngFor=\"let item of option.table; let indexItem = index\">\r\n <wac-image *ngIf=\"item.image\" [src]=\"item.image\"></wac-image>\r\n <wac-text>{{ item.name }}</wac-text>\r\n <span (click)=\"deleteResult(indexItem, i)\"><i class=\"fas fa-times\"></i></span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n" }]
|
|
4087
|
+
args: [{ selector: 'wac-multiple-search-plus', template: "<div class=\"wac-multiple-search-plus\" [zIndexToggle]=\"openSelect || openSearchResults\" [ngClass]=\"{ 'disabled': disabled }\">\r\n <!-- Multiple select with search input -->\r\n <div class=\"wac-multiple-search\" [ngClass]=\"{ open: openSelect }\">\r\n <div class=\"wac-multiple-search__wrapper\">\r\n <div class=\"wac-multiple-search__wrapper__left\" *ngIf=\"options.length > 1\" [ngClass]=\"{ open: openSelect }\" wzAutoHide (clickOutside)=\"closeSelect()\">\r\n <span>{{ label }}</span>\r\n <i class=\"fal fa-chevron-down\"></i>\r\n <div class=\"wac-multiple-search__wrapper__left__background\" (click)=\"onToggleSelect()\"></div>\r\n <div class=\"wac-multiple-search__wrapper__left__select\" *ngIf=\"openSelect\">\r\n <div\r\n class=\"wac-multiple-search__wrapper__left__select__item\"\r\n *ngFor=\"let option of options; let i = index\"\r\n [attr.data-index]=\"i\"\r\n (click)=\"resetAllVue(i); inputSearch.value = ''\"\r\n >\r\n <span>{{ option.label }}</span>\r\n <input type=\"hidden\" value=\"\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wac-multiple-search__wrapper__right\" wzAutoHide (clickOutside)=\"closeSearchResults()\">\r\n <button><i class=\"fal fa-search\"></i></button>\r\n <input\r\n #inputSearch\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n debounceKeyUp\r\n [debounceTime]=\"500\"\r\n (onEventChange)=\"setSearchValue($event)\"\r\n />\r\n <div class=\"wac-multiple-search__wrapper__left__select\" *ngIf=\"openSearchResults\">\r\n <div\r\n class=\"wac-multiple-search__wrapper__left__select__item\"\r\n *ngFor=\"let res of searchResults; let i = index\"\r\n (click)=\"addResult(i); inputSearch.value = ''\"\r\n >\r\n <wac-image *ngIf=\"res.image\" [src]=\"res.image\"></wac-image>\r\n <wac-text>#{{ res.id }} {{ res.name }}</wac-text>\r\n </div>\r\n <div class=\"wac-table__body__loader\" *ngIf=\"isLoading && !searchResults\">\r\n <wac-loader [small]=\"true\"></wac-loader>\r\n </div>\r\n <div\r\n class=\"wac-multiple-search__wrapper__left__select__item\"\r\n *ngIf=\"!searchResults?.length\"\r\n >\r\n <span>{{'wac.datatable.noresult' | translate}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Results checked -->\r\n <div *ngFor=\"let option of options; let i = index\">\r\n <div class=\"wac-multiple-search-plus__wrapper\" *ngIf=\"option.table.length && !hideResults\">\r\n <wac-h3>{{ option.title }}</wac-h3>\r\n <div class=\"wac-multiple-search-plus__wrapper__block hover default\" *ngFor=\"let item of option.table; let indexItem = index\">\r\n <wac-image *ngIf=\"item.image\" [src]=\"item.image\"></wac-image>\r\n <wac-text>{{ item.name }}</wac-text>\r\n <span (click)=\"deleteResult(indexItem, i)\"><i class=\"fas fa-times\"></i></span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n" }]
|
|
4087
4088
|
}], ctorParameters: function () { return []; }, propDecorators: { options: [{
|
|
4088
4089
|
type: Input
|
|
4089
4090
|
}], searchResults: [{
|
|
4090
4091
|
type: Input
|
|
4091
4092
|
}], disabled: [{
|
|
4092
4093
|
type: Input
|
|
4094
|
+
}], hideResults: [{
|
|
4095
|
+
type: Input
|
|
4093
4096
|
}], searchValue: [{
|
|
4094
4097
|
type: Output
|
|
4095
4098
|
}], optionsChange: [{
|
|
@@ -5535,9 +5538,10 @@ class MosaicComponent {
|
|
|
5535
5538
|
return image.src;
|
|
5536
5539
|
}
|
|
5537
5540
|
ngOnChanges(changes) {
|
|
5541
|
+
const imagesListChange = changes.imagesList;
|
|
5538
5542
|
const isNumberOfColumnChange = changes.numberOfColumn && (changes.numberOfColumn.currentValue !== changes.numberOfColumn.previousValue);
|
|
5539
|
-
if (
|
|
5540
|
-
this.generateColumns(
|
|
5543
|
+
if (imagesListChange && imagesListChange.currentValue !== imagesListChange.previousValue) {
|
|
5544
|
+
this.generateColumns(imagesListChange.previousValue, imagesListChange.currentValue, isNumberOfColumnChange);
|
|
5541
5545
|
return;
|
|
5542
5546
|
}
|
|
5543
5547
|
if (isNumberOfColumnChange) {
|
|
@@ -5557,19 +5561,21 @@ class MosaicComponent {
|
|
|
5557
5561
|
this.columns = columns;
|
|
5558
5562
|
}
|
|
5559
5563
|
separateImagesIntoColumns(newImagesToDisplay) {
|
|
5560
|
-
const columns = [];
|
|
5561
|
-
|
|
5562
|
-
|
|
5563
|
-
|
|
5564
|
-
columns.push(chunk);
|
|
5565
|
-
}
|
|
5564
|
+
const columns = Array.from({ length: this.numberOfColumn }, () => []);
|
|
5565
|
+
newImagesToDisplay.forEach((image, index) => {
|
|
5566
|
+
columns[index % this.numberOfColumn].push(image);
|
|
5567
|
+
});
|
|
5566
5568
|
return columns;
|
|
5567
5569
|
}
|
|
5568
5570
|
concatColumns(oldColumns, newColumns) {
|
|
5569
|
-
return oldColumns.map((oldColumn, columnIndex) =>
|
|
5571
|
+
return oldColumns.map((oldColumn, columnIndex) => {
|
|
5572
|
+
return [...oldColumn, ...newColumns[columnIndex]];
|
|
5573
|
+
});
|
|
5570
5574
|
}
|
|
5571
5575
|
onBottomReached() {
|
|
5572
|
-
this.
|
|
5576
|
+
if (!this.isLoading) {
|
|
5577
|
+
this.loadMoreImages.emit();
|
|
5578
|
+
}
|
|
5573
5579
|
}
|
|
5574
5580
|
onImportImage(src) {
|
|
5575
5581
|
this.importImageSrc.emit(src);
|