@wizishop/angular-components 0.0.174 → 0.0.175

package/bundles/wizishop-angular-components.umd.js

@@ -1243,6 +1243,7 @@
             this.animationText = '';
             this.confirmDelete = false;
             this.confirmDeleteText = '';
+            this.tooltipPosition = 'top-center';
             this.confirmDeletePosition = 'right';
             this.click = new i0.EventEmitter();
             this.isLoadingChange = new i0.EventEmitter();
@@ -1332,7 +1333,7 @@
     ButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-button',
-                    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"
+                    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 }}\" *ngIf=\"tooltip\">\n    {{ tooltip }}\n  </span>\n</a>\n"
                 },] }
     ];
     ButtonComponent.ctorParameters = function () { return []; };
@@ -1355,6 +1356,8 @@
         confirmDelete: [{ type: i0.Input }],
         confirmDeleteText: [{ type: i0.Input }],
         coin: [{ type: i0.Input }],
+        tooltip: [{ type: i0.Input }],
+        tooltipPosition: [{ type: i0.Input }],
         confirmDeletePosition: [{ type: i0.Input }],
         click: [{ type: i0.Output }],
         isLoading: [{ type: i0.Input }],
@@ -4310,8 +4313,9 @@
     var BlockWithCheckboxComponent = /** @class */ (function () {
         function BlockWithCheckboxComponent() {
             this.selected = false;
-            this.iconCopy = 'fa-solid fa-copy';
-            this.iconWorld = 'fa-thin fa-globe';
+            this.disabled = false;
+            this.iconCopy = 'fa-solid fa-paste';
+            this.iconWorld = 'fa-light fa-globe';
             this.copyAction = new i0.EventEmitter();
             this.worldAction = new i0.EventEmitter();
             this.checkboxAction = new i0.EventEmitter();
@@ -4323,10 +4327,11 @@
             this.randomLabelName = 'radioBlock' + Math.random() * (900 - 700) + 700;
         };
         BlockWithCheckboxComponent.prototype.eventSelected = function (event) {
-            console.log(event);
-            this.selected = event.target.checked;
-            this.checkboxAction.emit(this.selected);
-            this.isFirst = false;
+            if (!this.disabled) {
+                this.selected = event.target.checked;
+                this.checkboxAction.emit(this.selected);
+                this.isFirst = false;
+            }
         };
         BlockWithCheckboxComponent.prototype.eventCopy = function () {
             this.copyAction.emit(true);
@@ -4344,12 +4349,13 @@
     BlockWithCheckboxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-block-with-checkbox',
-                    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  <div class=\"block-with-checkbox__right\">\n    <div><wac-button extraClasses=\"is-blue opacity static-width\"  [iconFontSize]=\"18\" [icon]=\"iconCopy\" (click)=\"eventCopy()\"></wac-button></div>\n    <div><wac-button extraClasses=\"is-green opacity static-width\" [iconFontSize]=\"18\" [icon]=\"iconWorld\"  (click)=\"eventWorld()\"></wac-button></div>\n  </div>\n</div>\n"
+                    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 class=\"block-with-checkbox__right\">\n    <div><wac-button extraClasses=\"is-blue opacity static-width\"  [iconFontSize]=\"18\" [icon]=\"iconCopy\" (click)=\"eventCopy()\"></wac-button></div>\n    <div><wac-button extraClasses=\"is-green opacity static-width\" [iconFontSize]=\"18\" [icon]=\"iconWorld\"  (click)=\"eventWorld()\"></wac-button></div>\n  </div>\n</div>\n"
                 },] }
     ];
     BlockWithCheckboxComponent.ctorParameters = function () { return []; };
     BlockWithCheckboxComponent.propDecorators = {
         selected: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
         iconCopy: [{ type: i0.Input }],
         iconWorld: [{ type: i0.Input }],
         copyAction: [{ type: i0.Output }],
@@ -4398,36 +4404,49 @@
 
     var MosaicComponent = /** @class */ (function () {
         function MosaicComponent() {
-            this._imagesList = [];
+            this.imagesList = [];
             this.isLoading = false;
             this.numberOfColumn = 3;
             this.importImageSrc = new i0.EventEmitter();
+            this.loadMoreImages = new i0.EventEmitter();
         }
-        Object.defineProperty(MosaicComponent.prototype, "imagesList", {
-            get: function () {
-                return this._imagesList;
-            },
-            set: function (imagesList) {
-                this._imagesList = imagesList;
-                this.generateColumns();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MosaicComponent.prototype.generateColumns = function () {
-            this.columns = this.sliceIntoChunks();
+        MosaicComponent.prototype.ngOnChanges = function (changes) {
+            console.log('changes', changes);
+            var isNumberOfColumnChange = changes.numberOfColumn && (changes.numberOfColumn.currentValue !== changes.numberOfColumn.previousValue);
+            if (changes.imagesList) {
+                this.generateColumns(changes.imagesList.previousValue, changes.imagesList.currentValue, isNumberOfColumnChange);
+                return;
+            }
+            if (isNumberOfColumnChange) {
+                this.generateColumns(null, this.imagesList, isNumberOfColumnChange);
+            }
         };
-        MosaicComponent.prototype.sliceIntoChunks = function () {
+        MosaicComponent.prototype.generateColumns = function (previousList, currentList, isNumberOfColumnChange) {
+            var isNewListSmaller = (currentList && previousList) && (currentList.length < previousList.length);
+            var resetColumns = isNumberOfColumnChange || isNewListSmaller;
+            var isPreviousListExisting = previousList === null || previousList === void 0 ? void 0 : previousList.length;
+            var newImagesToDisplay = !isPreviousListExisting || resetColumns ? currentList : currentList.slice(previousList.length);
+            var columns = this.separateImagesIntoColumns(newImagesToDisplay);
+            if (isPreviousListExisting && !resetColumns) {
+                var existingColumns = this.columns;
+                columns = this.concatColumns(existingColumns, columns);
+            }
+            this.columns = columns;
+        };
+        MosaicComponent.prototype.separateImagesIntoColumns = function (newImagesToDisplay) {
             var columns = [];
-            var numberOfImagePerColumn = this.imagesList.length / this.numberOfColumn;
-            for (var i = 0; i < this.imagesList.length; i += numberOfImagePerColumn) {
-                var chunk = this.imagesList.slice(i, i + numberOfImagePerColumn);
+            var numberOfImagePerColumn = Math.floor(newImagesToDisplay.length / this.numberOfColumn);
+            for (var i = 0; i < newImagesToDisplay.length; i += numberOfImagePerColumn) {
+                var chunk = newImagesToDisplay.slice(i, i + numberOfImagePerColumn);
                 columns.push(chunk);
             }
             return columns;
         };
+        MosaicComponent.prototype.concatColumns = function (oldColumns, newColumns) {
+            return oldColumns.map(function (oldColumn, columnIndex) { return __spread(oldColumn, newColumns[columnIndex]); });
+        };
         MosaicComponent.prototype.onBottomReached = function () {
-            console.log('end bottom !');
+            this.loadMoreImages.emit();
         };
         MosaicComponent.prototype.onImportImage = function (src) {
             this.importImageSrc.emit(src);
@@ -4437,8 +4456,9 @@
     MosaicComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-mosaic',
-                    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",
-                    encapsulation: i0.ViewEncapsulation.None
+                    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]=\"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<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",
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     MosaicComponent.ctorParameters = function () { return []; };
@@ -4447,9 +4467,25 @@
         isLoading: [{ type: i0.Input }],
         numberOfColumn: [{ type: i0.Input }],
         importButtonTemplate: [{ type: i0.Input }],
-        importImageSrc: [{ type: i0.Output }]
+        importImageSrc: [{ type: i0.Output }],
+        loadMoreImages: [{ type: i0.Output }]
     };
 
+    var ContentWithButtonsComponent = /** @class */ (function () {
+        function ContentWithButtonsComponent() {
+        }
+        ContentWithButtonsComponent.prototype.ngOnInit = function () {
+        };
+        return ContentWithButtonsComponent;
+    }());
+    ContentWithButtonsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'wac-content-with-buttons',
+                    template: "<p>content-with-buttons works!</p>\n"
+                },] }
+    ];
+    ContentWithButtonsComponent.ctorParameters = function () { return []; };
+
     var components = [
         TagComponent,
         TabComponent,
@@ -4498,7 +4534,8 @@
         TokenCheckComponent,
         BlockWithCheckboxComponent,
         ConfirmDeleteComponent,
-        MosaicComponent
+        MosaicComponent,
+        ContentWithButtonsComponent
     ];
     var exportsFromModule = [
         PaginationComponent,
@@ -4610,6 +4647,7 @@
     exports.CheckBoxRow = CheckBoxRow;
     exports.CheckboxComponent = CheckboxComponent;
     exports.ConfirmDeleteComponent = ConfirmDeleteComponent;
+    exports.ContentWithButtonsComponent = ContentWithButtonsComponent;
     exports.DebounceKeyupDirective = DebounceKeyupDirective;
     exports.DeleteComponent = DeleteComponent;
     exports.DropdownComponent = DropdownComponent;