@wizishop/angular-components 0.0.174 → 0.0.177
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 +2514 -2133
- package/bundles/wizishop-angular-components.umd.js +83 -46
- 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/block-with-checkbox/block-with-checkbox.component.js +9 -20
- package/esm2015/lib/components/button/button.component.js +6 -2
- package/esm2015/lib/components/card-price/card-price.component.js +15 -3
- package/esm2015/lib/components/content-with-buttons/content-with-buttons.component.js +14 -0
- package/esm2015/lib/components/mosaic/mosaic.component.js +39 -20
- package/esm2015/lib/components/shared-components.module.js +4 -2
- package/esm2015/public-api.js +2 -1
- package/fesm2015/wizishop-angular-components.js +81 -43
- package/fesm2015/wizishop-angular-components.js.map +1 -1
- package/lib/components/block-with-checkbox/block-with-checkbox.component.d.ts +1 -6
- package/lib/components/button/button.component.d.ts +3 -0
- package/lib/components/card-price/card-price.component.d.ts +7 -0
- package/lib/components/content-with-buttons/content-with-buttons.component.d.ts +5 -0
- package/lib/components/mosaic/mosaic.component.d.ts +10 -8
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/wizishop-angular-components-0.0.177.tgz +0 -0
- package/wizishop-angular-components.metadata.json +1 -1
- package/wizishop-angular-components-0.0.174.tgz +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { NwbFilterRoutingBuilder, NwbAllModule, NwbFilterGroup } from '@wizishop/ng-wizi-bulma';
|
|
2
|
-
import { Component, ViewEncapsulation, Input, EventEmitter, Output, Directive, HostListener, ɵɵdefineInjectable, ɵɵinject, ComponentFactoryResolver, ApplicationRef, INJECTOR, Injectable, Injector, ElementRef, Renderer2, TemplateRef, ViewContainerRef, NgModule, Inject, ContentChildren, ViewChild, Pipe } from '@angular/core';
|
|
2
|
+
import { Component, ViewEncapsulation, Input, EventEmitter, Output, Directive, HostListener, ɵɵdefineInjectable, ɵɵinject, ComponentFactoryResolver, ApplicationRef, INJECTOR, Injectable, Injector, ElementRef, Renderer2, TemplateRef, ViewContainerRef, NgModule, Inject, ContentChildren, ViewChild, Pipe, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
import { CommonModule, DOCUMENT } from '@angular/common';
|
|
4
4
|
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
|
@@ -892,6 +892,7 @@ class ButtonComponent {
|
|
|
892
892
|
this.animationText = '';
|
|
893
893
|
this.confirmDelete = false;
|
|
894
894
|
this.confirmDeleteText = '';
|
|
895
|
+
this.tooltipPosition = 'top-center';
|
|
895
896
|
this.confirmDeletePosition = 'right';
|
|
896
897
|
this.click = new EventEmitter();
|
|
897
898
|
this.isLoadingChange = new EventEmitter();
|
|
@@ -973,7 +974,7 @@ class ButtonComponent {
|
|
|
973
974
|
ButtonComponent.decorators = [
|
|
974
975
|
{ type: Component, args: [{
|
|
975
976
|
selector: 'wac-button',
|
|
976
|
-
template: "<a\n [class]=\"'wac-button ' + extraClasses\"\n (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n (mouseenter)=\"animation ? addMaxWidth() : '';\"\n wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n [ngClass]=\"[\n label === '' ? 'alone' : '',\n coin ? 'has-coin width-auto' : '',\n animationRight ? 'animation-right' : '',\n animation ? 'animationText' : '',\n isLoading ? 'is-loading' : '',\n opacity ? 'opacity' : '',\n disabled ? 'disabled' : '',\n widthAuto ? 'width-auto' : '',\n whiteSpaceNowrap ? 'white-space-no-wrap' : '',\n !waitForConfirmDelete && confirmDelete ? 'step-delete' : '',\n confirmDelete ? 'deletePosition-' + confirmDeletePosition : ''\n ]\"\n [ngStyle]=\"{\n 'text-align': contentHorizontalPosition\n }\"\n>\n <span class=\"wac-button__wrapper\" [style.color]=\"textcolor ? textcolor : ''\">\n <i *ngIf=\"icon\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n </span>\n <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n </span>\n <span *ngIf=\"coin\" class=\"wac-button__coin\"><i class=\"fa-solid fa-coin-front\"></i><span [innerHTML]=\"coin\"></span></span>\n <span\n class=\"wac-button__loader\"\n [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n *ngIf=\"isLoading\"\n [style.width]=\"currentLoading + '%'\"\n >\n <span *ngIf=\"extraClasses.includes('is-outlined')\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n\n </span>\n</a>\n"
|
|
977
|
+
template: "<a\n [class]=\"'wac-button ' + extraClasses\"\n (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n (mouseenter)=\"animation ? addMaxWidth() : '';\"\n wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n [ngClass]=\"[\n label === '' ? 'alone' : '',\n coin ? 'has-coin width-auto' : '',\n animationRight ? 'animation-right' : '',\n animation ? 'animationText' : '',\n isLoading ? 'is-loading' : '',\n opacity ? 'opacity' : '',\n disabled ? 'disabled' : '',\n widthAuto ? 'width-auto' : '',\n whiteSpaceNowrap ? 'white-space-no-wrap' : '',\n !waitForConfirmDelete && confirmDelete ? 'step-delete' : '',\n confirmDelete ? 'deletePosition-' + confirmDeletePosition : ''\n ]\"\n [ngStyle]=\"{\n 'text-align': contentHorizontalPosition\n }\"\n>\n <span class=\"wac-button__wrapper\" [style.color]=\"textcolor ? textcolor : ''\">\n <i *ngIf=\"icon\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n </span>\n <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n </span>\n <span *ngIf=\"coin\" class=\"wac-button__coin\"><i class=\"fa-solid fa-coin-front\"></i><span [innerHTML]=\"coin\"></span></span>\n <span\n class=\"wac-button__loader\"\n [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n *ngIf=\"isLoading\"\n [style.width]=\"currentLoading + '%'\"\n >\n <span *ngIf=\"extraClasses.includes('is-outlined')\">\n <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n {{ label }}\n <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n </span>\n </span>\n <span class=\"wac-button__tooltips {{ tooltipPosition }}\" [style.minWidth]=\"tooltipWidth\" *ngIf=\"tooltip\">\n {{ tooltip }}\n </span>\n</a>\n"
|
|
977
978
|
},] }
|
|
978
979
|
];
|
|
979
980
|
ButtonComponent.ctorParameters = () => [];
|
|
@@ -996,6 +997,9 @@ ButtonComponent.propDecorators = {
|
|
|
996
997
|
confirmDelete: [{ type: Input }],
|
|
997
998
|
confirmDeleteText: [{ type: Input }],
|
|
998
999
|
coin: [{ type: Input }],
|
|
1000
|
+
tooltip: [{ type: Input }],
|
|
1001
|
+
tooltipWidth: [{ type: Input }],
|
|
1002
|
+
tooltipPosition: [{ type: Input }],
|
|
999
1003
|
confirmDeletePosition: [{ type: Input }],
|
|
1000
1004
|
click: [{ type: Output }],
|
|
1001
1005
|
isLoading: [{ type: Input }],
|
|
@@ -3731,38 +3735,50 @@ BreadcrumbsComponent.propDecorators = {
|
|
|
3731
3735
|
|
|
3732
3736
|
class CardPriceComponent {
|
|
3733
3737
|
constructor() {
|
|
3738
|
+
this.selected = false;
|
|
3734
3739
|
this.disabled = false;
|
|
3735
3740
|
this.btnTextcolor = '#ffffff';
|
|
3736
3741
|
this.extraClasses = 'is-success';
|
|
3742
|
+
this.extraClassesSelected = 'is-success is-outlined';
|
|
3737
3743
|
this.hideButton = false;
|
|
3738
3744
|
this.click = new EventEmitter();
|
|
3745
|
+
this.removePackage = new EventEmitter();
|
|
3739
3746
|
}
|
|
3740
3747
|
ngOnInit() {
|
|
3741
3748
|
}
|
|
3742
3749
|
triggerClick() {
|
|
3743
3750
|
this.click.emit(true);
|
|
3744
3751
|
}
|
|
3752
|
+
removePackageTrigger() {
|
|
3753
|
+
this.removePackage.emit(true);
|
|
3754
|
+
}
|
|
3745
3755
|
}
|
|
3746
3756
|
CardPriceComponent.decorators = [
|
|
3747
3757
|
{ type: Component, args: [{
|
|
3748
3758
|
selector: 'wac-card-price',
|
|
3749
|
-
template: "<div class=\"wac-card-price\">\n <strong>{{amount}}</strong>\n <p>{{title}}</p>\n <div class=\"price\">\n <span class=\"amount\">{{price}} <span>{{currency}}</span></span><span class=\"month\">{{priceWording}}</span>\n </div>\n <div class=\"subtitle\">{{subtitle}}</div>\n <div class=\"cta\">\n <wac-button [label]=\"btnLabel\" [extraClasses]=\"extraClasses\" (click)=\"triggerClick()\" [disabled]=\"disabled\" [textcolor]=\"btnTextcolor\" *ngIf=\"!hideButton\"></wac-button>\n </div>\n</div>\n"
|
|
3759
|
+
template: "<div class=\"wac-card-price\" [ngClass]=\"{'selected': selected}\">\n <strong>{{amount}}</strong>\n <p>{{title}}</p>\n <div class=\"price\">\n <span class=\"amount\">{{price}} <span>{{currency}}</span></span><span class=\"month\">{{priceWording}}</span>\n </div>\n <div class=\"subtitle\">{{subtitle}}</div>\n <div class=\"cta\" *ngIf=\"!selected\">\n <wac-button [label]=\"btnLabel\" [extraClasses]=\"extraClasses\" (click)=\"triggerClick()\" [disabled]=\"disabled\" [whiteSpaceNowrap]=\"true\" [textcolor]=\"btnTextcolor\" *ngIf=\"!hideButton\"></wac-button>\n </div>\n <div class=\"cta\" *ngIf=\"selected\">\n <wac-button [icon]=\"'fa-solid fa-check'\" [label]=\"btnLabelSelected\" [extraClasses]=\"extraClassesSelected\" [whiteSpaceNowrap]=\"true\" *ngIf=\"!hideButton\"></wac-button>\n </div>\n <div class=\"package-subtitle\" *ngIf=\"packageSubtitle\">{{packageSubtitle}}</div>\n <div class=\"link-bottom\">\n <wac-link (click)=\"removePackageTrigger()\">{{linkPackageLabel}}</wac-link>\n </div>\n</div>\n"
|
|
3750
3760
|
},] }
|
|
3751
3761
|
];
|
|
3752
3762
|
CardPriceComponent.ctorParameters = () => [];
|
|
3753
3763
|
CardPriceComponent.propDecorators = {
|
|
3754
3764
|
amount: [{ type: Input }],
|
|
3755
3765
|
title: [{ type: Input }],
|
|
3766
|
+
selected: [{ type: Input }],
|
|
3767
|
+
btnLabelSelected: [{ type: Input }],
|
|
3756
3768
|
price: [{ type: Input }],
|
|
3757
3769
|
currency: [{ type: Input }],
|
|
3758
3770
|
priceWording: [{ type: Input }],
|
|
3759
3771
|
subtitle: [{ type: Input }],
|
|
3760
3772
|
btnLabel: [{ type: Input }],
|
|
3773
|
+
packageSubtitle: [{ type: Input }],
|
|
3774
|
+
linkPackageLabel: [{ type: Input }],
|
|
3761
3775
|
disabled: [{ type: Input }],
|
|
3762
3776
|
btnTextcolor: [{ type: Input }],
|
|
3763
3777
|
extraClasses: [{ type: Input }],
|
|
3778
|
+
extraClassesSelected: [{ type: Input }],
|
|
3764
3779
|
hideButton: [{ type: Input }],
|
|
3765
|
-
click: [{ type: Output }]
|
|
3780
|
+
click: [{ type: Output }],
|
|
3781
|
+
removePackage: [{ type: Output }]
|
|
3766
3782
|
};
|
|
3767
3783
|
|
|
3768
3784
|
class TokenCheckComponent {
|
|
@@ -3788,10 +3804,7 @@ TokenCheckComponent.propDecorators = {
|
|
|
3788
3804
|
class BlockWithCheckboxComponent {
|
|
3789
3805
|
constructor() {
|
|
3790
3806
|
this.selected = false;
|
|
3791
|
-
this.
|
|
3792
|
-
this.iconWorld = 'fa-thin fa-globe';
|
|
3793
|
-
this.copyAction = new EventEmitter();
|
|
3794
|
-
this.worldAction = new EventEmitter();
|
|
3807
|
+
this.disabled = false;
|
|
3795
3808
|
this.checkboxAction = new EventEmitter();
|
|
3796
3809
|
this.nameRadio = 'wacBlockCheckboxRadio';
|
|
3797
3810
|
this.isFirst = false;
|
|
@@ -3801,16 +3814,11 @@ class BlockWithCheckboxComponent {
|
|
|
3801
3814
|
this.randomLabelName = 'radioBlock' + Math.random() * (900 - 700) + 700;
|
|
3802
3815
|
}
|
|
3803
3816
|
eventSelected(event) {
|
|
3804
|
-
|
|
3805
|
-
|
|
3806
|
-
|
|
3807
|
-
|
|
3808
|
-
|
|
3809
|
-
eventCopy() {
|
|
3810
|
-
this.copyAction.emit(true);
|
|
3811
|
-
}
|
|
3812
|
-
eventWorld() {
|
|
3813
|
-
this.worldAction.emit(true);
|
|
3817
|
+
if (!this.disabled) {
|
|
3818
|
+
this.selected = event.target.checked;
|
|
3819
|
+
this.checkboxAction.emit(this.selected);
|
|
3820
|
+
this.isFirst = false;
|
|
3821
|
+
}
|
|
3814
3822
|
}
|
|
3815
3823
|
removeFirstClass() {
|
|
3816
3824
|
if (typeof document.querySelectorAll('.firstWacRadioBLock')[0] !== typeof undefined) {
|
|
@@ -3821,16 +3829,13 @@ class BlockWithCheckboxComponent {
|
|
|
3821
3829
|
BlockWithCheckboxComponent.decorators = [
|
|
3822
3830
|
{ type: Component, args: [{
|
|
3823
3831
|
selector: 'wac-block-with-checkbox',
|
|
3824
|
-
template: "<div class=\"block-with-checkbox\" [ngClass]=\"{'selected': inputRadioA.checked, 'firstWacRadioBLock': isFirst}\" [style.opacity]=\"opacity\" (mouseover)=\"removeFirstClass()\">\n <div class=\"block-with-checkbox__left\" (click)=\"inputRadioA.click()\">\n <div class=\"wac-radio-block\">\n <div class=\"wac-radio__row\">\n <input #inputRadioA [name]=\"nameRadio\" type=\"radio\" [value]=\"selected\" (change)=\"eventSelected($event)\" [id]=\"randomLabelName\">\n <label [for]=\"randomLabelName\"></label>\n </div>\n </div>\n </div>\n <div class=\"block-with-checkbox__center\" (click)=\"inputRadioA.click()\">\n <ng-content></ng-content>\n </div>\n
|
|
3832
|
+
template: "<div class=\"block-with-checkbox\" [ngClass]=\"{'selected': inputRadioA.checked || selected, 'firstWacRadioBLock': isFirst, 'disabled': disabled}\" [style.opacity]=\"opacity\" (mouseover)=\"removeFirstClass()\">\n <div class=\"block-with-checkbox__left\" (click)=\"inputRadioA.click()\">\n <div class=\"wac-radio-block\">\n <div class=\"wac-radio__row\">\n <input #inputRadioA [name]=\"nameRadio\" type=\"radio\" [checked]=\"selected\" [value]=\"selected\" (change)=\"eventSelected($event)\" [id]=\"randomLabelName\">\n <label [for]=\"randomLabelName\"></label>\n </div>\n </div>\n </div>\n <div class=\"block-with-checkbox__center\" (click)=\"inputRadioA.click()\">\n <ng-content></ng-content>\n </div>\n</div>\n"
|
|
3825
3833
|
},] }
|
|
3826
3834
|
];
|
|
3827
3835
|
BlockWithCheckboxComponent.ctorParameters = () => [];
|
|
3828
3836
|
BlockWithCheckboxComponent.propDecorators = {
|
|
3829
3837
|
selected: [{ type: Input }],
|
|
3830
|
-
|
|
3831
|
-
iconWorld: [{ type: Input }],
|
|
3832
|
-
copyAction: [{ type: Output }],
|
|
3833
|
-
worldAction: [{ type: Output }],
|
|
3838
|
+
disabled: [{ type: Input }],
|
|
3834
3839
|
checkboxAction: [{ type: Output }],
|
|
3835
3840
|
nameRadio: [{ type: Input }],
|
|
3836
3841
|
isFirst: [{ type: Input }],
|
|
@@ -3874,32 +3879,49 @@ ConfirmDeleteComponent.propDecorators = {
|
|
|
3874
3879
|
|
|
3875
3880
|
class MosaicComponent {
|
|
3876
3881
|
constructor() {
|
|
3877
|
-
this.
|
|
3882
|
+
this.imagesList = [];
|
|
3878
3883
|
this.isLoading = false;
|
|
3879
3884
|
this.numberOfColumn = 3;
|
|
3880
3885
|
this.importImageSrc = new EventEmitter();
|
|
3886
|
+
this.loadMoreImages = new EventEmitter();
|
|
3881
3887
|
}
|
|
3882
|
-
|
|
3883
|
-
|
|
3884
|
-
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
|
|
3888
|
+
ngOnChanges(changes) {
|
|
3889
|
+
console.log('changes', changes);
|
|
3890
|
+
const isNumberOfColumnChange = changes.numberOfColumn && (changes.numberOfColumn.currentValue !== changes.numberOfColumn.previousValue);
|
|
3891
|
+
if (changes.imagesList) {
|
|
3892
|
+
this.generateColumns(changes.imagesList.previousValue, changes.imagesList.currentValue, isNumberOfColumnChange);
|
|
3893
|
+
return;
|
|
3894
|
+
}
|
|
3895
|
+
if (isNumberOfColumnChange) {
|
|
3896
|
+
this.generateColumns(null, this.imagesList, isNumberOfColumnChange);
|
|
3897
|
+
}
|
|
3888
3898
|
}
|
|
3889
|
-
generateColumns() {
|
|
3890
|
-
|
|
3899
|
+
generateColumns(previousList, currentList, isNumberOfColumnChange) {
|
|
3900
|
+
const isNewListSmaller = (currentList && previousList) && (currentList.length < previousList.length);
|
|
3901
|
+
const resetColumns = isNumberOfColumnChange || isNewListSmaller;
|
|
3902
|
+
const isPreviousListExisting = previousList === null || previousList === void 0 ? void 0 : previousList.length;
|
|
3903
|
+
const newImagesToDisplay = !isPreviousListExisting || resetColumns ? currentList : currentList.slice(previousList.length);
|
|
3904
|
+
let columns = this.separateImagesIntoColumns(newImagesToDisplay);
|
|
3905
|
+
if (isPreviousListExisting && !resetColumns) {
|
|
3906
|
+
const existingColumns = this.columns;
|
|
3907
|
+
columns = this.concatColumns(existingColumns, columns);
|
|
3908
|
+
}
|
|
3909
|
+
this.columns = columns;
|
|
3891
3910
|
}
|
|
3892
|
-
|
|
3911
|
+
separateImagesIntoColumns(newImagesToDisplay) {
|
|
3893
3912
|
const columns = [];
|
|
3894
|
-
const numberOfImagePerColumn =
|
|
3895
|
-
for (let i = 0; i <
|
|
3896
|
-
const chunk =
|
|
3913
|
+
const numberOfImagePerColumn = Math.floor(newImagesToDisplay.length / this.numberOfColumn);
|
|
3914
|
+
for (let i = 0; i < newImagesToDisplay.length; i += numberOfImagePerColumn) {
|
|
3915
|
+
const chunk = newImagesToDisplay.slice(i, i + numberOfImagePerColumn);
|
|
3897
3916
|
columns.push(chunk);
|
|
3898
3917
|
}
|
|
3899
3918
|
return columns;
|
|
3900
3919
|
}
|
|
3920
|
+
concatColumns(oldColumns, newColumns) {
|
|
3921
|
+
return oldColumns.map((oldColumn, columnIndex) => [...oldColumn, ...newColumns[columnIndex]]);
|
|
3922
|
+
}
|
|
3901
3923
|
onBottomReached() {
|
|
3902
|
-
|
|
3924
|
+
this.loadMoreImages.emit();
|
|
3903
3925
|
}
|
|
3904
3926
|
onImportImage(src) {
|
|
3905
3927
|
this.importImageSrc.emit(src);
|
|
@@ -3908,8 +3930,9 @@ class MosaicComponent {
|
|
|
3908
3930
|
MosaicComponent.decorators = [
|
|
3909
3931
|
{ type: Component, args: [{
|
|
3910
3932
|
selector: 'wac-mosaic',
|
|
3911
|
-
template: "<div class=\"wac-mosaic\"
|
|
3912
|
-
encapsulation: ViewEncapsulation.None
|
|
3933
|
+
template: "<div class=\"wac-mosaic\">\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]=\"hoverImageTemplate || defaultImportButton\"\n [ngTemplateOutletContext]=\"{ $implicit: image }\"\n >\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </ng-scrollbar>\n</div>\n\n<div class=\"wac-mosaic__loader\" *ngIf=\"isLoading\">\n <wac-loader></wac-loader>\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",
|
|
3934
|
+
encapsulation: ViewEncapsulation.None,
|
|
3935
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
|
3913
3936
|
},] }
|
|
3914
3937
|
];
|
|
3915
3938
|
MosaicComponent.ctorParameters = () => [];
|
|
@@ -3917,10 +3940,24 @@ MosaicComponent.propDecorators = {
|
|
|
3917
3940
|
imagesList: [{ type: Input }],
|
|
3918
3941
|
isLoading: [{ type: Input }],
|
|
3919
3942
|
numberOfColumn: [{ type: Input }],
|
|
3920
|
-
|
|
3921
|
-
importImageSrc: [{ type: Output }]
|
|
3943
|
+
hoverImageTemplate: [{ type: Input }],
|
|
3944
|
+
importImageSrc: [{ type: Output }],
|
|
3945
|
+
loadMoreImages: [{ type: Output }]
|
|
3922
3946
|
};
|
|
3923
3947
|
|
|
3948
|
+
class ContentWithButtonsComponent {
|
|
3949
|
+
constructor() { }
|
|
3950
|
+
ngOnInit() {
|
|
3951
|
+
}
|
|
3952
|
+
}
|
|
3953
|
+
ContentWithButtonsComponent.decorators = [
|
|
3954
|
+
{ type: Component, args: [{
|
|
3955
|
+
selector: 'wac-content-with-buttons',
|
|
3956
|
+
template: "<p>content-with-buttons works!</p>\n"
|
|
3957
|
+
},] }
|
|
3958
|
+
];
|
|
3959
|
+
ContentWithButtonsComponent.ctorParameters = () => [];
|
|
3960
|
+
|
|
3924
3961
|
const components = [
|
|
3925
3962
|
TagComponent,
|
|
3926
3963
|
TabComponent,
|
|
@@ -3969,7 +4006,8 @@ const components = [
|
|
|
3969
4006
|
TokenCheckComponent,
|
|
3970
4007
|
BlockWithCheckboxComponent,
|
|
3971
4008
|
ConfirmDeleteComponent,
|
|
3972
|
-
MosaicComponent
|
|
4009
|
+
MosaicComponent,
|
|
4010
|
+
ContentWithButtonsComponent
|
|
3973
4011
|
];
|
|
3974
4012
|
const exportsFromModule = [
|
|
3975
4013
|
PaginationComponent,
|
|
@@ -4053,5 +4091,5 @@ class TableFiltersGroup extends NwbFilterGroup {
|
|
|
4053
4091
|
* Generated bundle index. Do not edit.
|
|
4054
4092
|
*/
|
|
4055
4093
|
|
|
4056
|
-
export { AbstractDebounceDirective, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockWithCheckboxComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CardPriceComponent, CheckBoxRow, CheckboxComponent, ConfirmDeleteComponent, DebounceKeyupDirective, DeleteComponent, DropdownComponent, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, PaginationComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectFiltersPipe, SelectInTextComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TagComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective, DomService as ɵa, PaginationModule as ɵb, PagniationArrayTotalPages as ɵc, PagniationIsLastPage as ɵd, PagniationText as ɵe, TableModule as ɵf, InputSearchModule as ɵg, InputModule as ɵh, TooltipModule as ɵi, ProgressBarModule as ɵj, LoaderModule as ɵk, CheckboxModule as ɵl, inOutY as ɵm, TableCheckboxIdService as ɵn, MultiSelectionService as ɵo, inOutX as ɵp };
|
|
4094
|
+
export { AbstractDebounceDirective, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockWithCheckboxComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CardPriceComponent, CheckBoxRow, CheckboxComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, DebounceKeyupDirective, DeleteComponent, DropdownComponent, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, PaginationComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectFiltersPipe, SelectInTextComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TagComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective, DomService as ɵa, PaginationModule as ɵb, PagniationArrayTotalPages as ɵc, PagniationIsLastPage as ɵd, PagniationText as ɵe, TableModule as ɵf, InputSearchModule as ɵg, InputModule as ɵh, TooltipModule as ɵi, ProgressBarModule as ɵj, LoaderModule as ɵk, CheckboxModule as ɵl, inOutY as ɵm, TableCheckboxIdService as ɵn, MultiSelectionService as ɵo, inOutX as ɵp };
|
|
4057
4095
|
//# sourceMappingURL=wizishop-angular-components.js.map
|