@wizishop/angular-components 0.0.71 → 0.0.74

package/fesm2015/wizishop-angular-components.js

@@ -1,5 +1,5 @@
 import { NwbFilterRoutingBuilder, NwbAllModule } from '@wizishop/ng-wizi-bulma';
-import { Component, ViewEncapsulation, Input, EventEmitter, Output, Directive, HostListener, ɵɵdefineInjectable, ɵɵinject, ComponentFactoryResolver, ApplicationRef, INJECTOR, Injectable, Injector, ElementRef, Renderer2, NgModule, ViewChild, Pipe, Inject } from '@angular/core';
+import { Component, ViewEncapsulation, Input, EventEmitter, Output, Directive, HostListener, ɵɵdefineInjectable, ɵɵinject, ComponentFactoryResolver, ApplicationRef, INJECTOR, Injectable, Injector, ElementRef, Renderer2, NgModule, ViewChild, Pipe, Inject, ContentChild } from '@angular/core';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
@@ -517,13 +517,16 @@ class TagComponent {
     constructor() {
         this.label = '';
         this.hasClose = false;
-        this.isOpen = true;
         this.big = false;
+        this.isOpen = true;
+        this.isOpenChange = new EventEmitter();
     }
     closeTag() {
-        if (this.hasClose) {
-            this.isOpen = false;
+        if (!this.hasClose) {
+            return;
         }
+        this.isOpen = false;
+        this.isOpenChange.next(this.isOpen);
     }
 }
 TagComponent.decorators = [
@@ -537,7 +540,9 @@ TagComponent.propDecorators = {
     label: [{ type: Input }],
     class: [{ type: Input }],
     hasClose: [{ type: Input }],
-    big: [{ type: Input }]
+    big: [{ type: Input }],
+    isOpen: [{ type: Input }],
+    isOpenChange: [{ type: Output }]
 };
 
 class TabComponent {
@@ -574,6 +579,7 @@ class ButtonComponent {
         this.label = '';
         this.icon = '';
         this.widthAuto = false;
+        this.contentHorizontalPosition = 'center';
         this.iconFontSize = 12;
         this.hasLoader = false;
         this.disabled = false;
@@ -665,7 +671,7 @@ class ButtonComponent {
 ButtonComponent.decorators = [
     { type: 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]=\"[label === '' ? 'alone' : '',animationRight ? 'animation-right' : '', animation ? 'animationText' : '', isLoading ? 'is-loading' : '', opacity ? 'opacity' : '', disabled ? 'disabled' : '', widthAuto ? 'width-auto' : '', whiteSpaceNowrap ? 'white-space-no-wrap' : '', !waitForConfirmDelete && confirmDelete ? 'step-delete' : '', confirmDelete ? 'deletePosition-' + confirmDeletePosition : '']\"\n>\n  <span class=\"wac-button__wrapper\">\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\n    class=\"wac-button__loader\"\n    [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n    *ngIf=\"isLoading || interval !== null\"\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    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\">\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\n    class=\"wac-button__loader\"\n    [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n    *ngIf=\"isLoading || interval !== null\"\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"
             },] }
 ];
 ButtonComponent.ctorParameters = () => [];
@@ -675,6 +681,7 @@ ButtonComponent.propDecorators = {
     icon: [{ type: Input }],
     iconNext: [{ type: Input }],
     widthAuto: [{ type: Input }],
+    contentHorizontalPosition: [{ type: Input }],
     iconFontSize: [{ type: Input }],
     hasLoader: [{ type: Input }],
     disabled: [{ type: Input }],
@@ -3291,6 +3298,131 @@ SelectedListComponent.propDecorators = {
     unSelectedItemsAll: [{ type: Output }]
 };
 
+class TreeComponent {
+    constructor() {
+        this.treeDepth = 0;
+    }
+    ngOnInit() { }
+}
+TreeComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'wac-tree',
+                template: "<div *ngFor=\"let item of items; index as i\" [ngClass]=\"['treeDepth-' + treeDepth]\">\n  <ul>\n   <li>\n\n    <ng-template #defaultItem>\n      {{ item?.treeLabel }}\n    </ng-template>\n\n    <ng-container\n      [ngTemplateOutlet]=\"optionTemplateRef || defaultItem\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\"\n    >\n    </ng-container>\n\n    <wac-tree [items]=\"item.treeChildren\" *ngIf=\"item.treeChildren?.length\">\n      <!-- Todo maybe pass child template -->\n    </wac-tree>\n   </li>\n  </ul>\n</div>"
+            },] }
+];
+TreeComponent.ctorParameters = () => [];
+TreeComponent.propDecorators = {
+    items: [{ type: Input }],
+    treeDepth: [{ type: Input }],
+    optionTemplateRef: [{ type: ContentChild, args: ["optionTemplate", { static: false },] }]
+};
+
+class FormatObjectToRecursifTreePipe {
+    constructor() {
+        this.childrenProperties = [];
+    }
+    transform(objectList, childrenProperties) {
+        this.childrenProperties = childrenProperties;
+        const treeDepth = 0;
+        objectList.forEach(object => this.recursiveFormatObjectToRecursifTree(object, treeDepth));
+        return objectList;
+    }
+    recursiveFormatObjectToRecursifTree(object, treeDepth) {
+        for (const childrenProperty of this.childrenProperties) {
+            object.hasTreeChrildren = true;
+            if (!object.hasOwnProperty(childrenProperty)) {
+                // No more chrildren
+                object.hasTreeChrildren = false;
+                continue;
+            }
+            if (Array.isArray(object[childrenProperty])) {
+                throw `Property : "${childrenProperty}", is not an array. it could not be transform to a recursive list.`;
+            }
+            // Add treeChildren property filled with name children property
+            object.treeChildren = object[childrenProperty];
+            // call this function recursively until no children can be generated
+            this.recursiveFormatObjectToRecursifTree(object.treeChildren, treeDepth++);
+            break;
+        }
+        object.treeDepth = treeDepth;
+    }
+}
+FormatObjectToRecursifTreePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'formatObjectToRecursifTree'
+            },] }
+];
+
+class FormatObjectToSimpleTreePipe {
+    constructor() {
+        this.childrenProperties = [];
+        this.labelProperties = [];
+    }
+    transform(objectList, childrenProperties, labelProperties) {
+        this.childrenProperties = childrenProperties;
+        this.labelProperties = labelProperties;
+        const treeDepth = 0;
+        objectList.forEach(object => this.recursiveFormatObjectToSimpleTree(object, treeDepth));
+        return objectList;
+    }
+    recursiveFormatObjectToSimpleTree(object, treeDepth) {
+        for (const property in object) {
+            if (!Object.prototype.hasOwnProperty.call(object, property)) {
+                continue;
+            }
+            if (this.labelProperties.includes(property)) {
+                object.treeLabel = object[property];
+                continue;
+            }
+            object.hasTreeChrildren = true;
+            if (!this.childrenProperties.includes(property)) {
+                // No more chrildren
+                object.hasTreeChrildren = false;
+                continue;
+            }
+            if (Array.isArray(object[property])) {
+                throw `Property : "${property}", is not an array. it could not be transform to a recursive list.`;
+            }
+            // Add treeChildren property filled with name children property
+            object.treeChildren = object[property];
+            // call this function recursively until no children can be generated
+            this.recursiveFormatObjectToSimpleTree(object.treeChildren, treeDepth++);
+            break;
+        }
+    }
+}
+FormatObjectToSimpleTreePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'formatObjectToSimpleTree'
+            },] }
+];
+
+const exportedPipes = [FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe];
+class SharedPipes {
+}
+SharedPipes.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, FormsModule],
+                declarations: exportedPipes,
+                exports: exportedPipes
+            },] }
+];
+
+class TreeModule {
+}
+TreeModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    SharedPipes
+                ],
+                exports: [TreeComponent],
+                declarations: [TreeComponent],
+                providers: [],
+            },] }
+];
+
 const components = [
     TagComponent,
     TabComponent,
@@ -3346,7 +3478,8 @@ const exportsFromModule = [
     TooltipComponent,
     CheckboxComponent,
     LoaderComponent,
-    ProgressBarComponent
+    ProgressBarComponent,
+    TreeComponent
 ];
 class SharedComponentsModule {
 }
@@ -3371,7 +3504,8 @@ SharedComponentsModule.decorators = [
                     ProgressBarModule,
                     PerfectScrollbarModule,
                     AlertPopupModule,
-                    RouterModule
+                    RouterModule,
+                    TreeModule
                 ],
                 declarations: components,
                 exports: [...components, ...exportsFromModule]
@@ -3386,9 +3520,10 @@ WiziComponentsModule.decorators = [
                     CommonModule,
                     SharedComponentsModule,
                     SharedDirectives,
+                    SharedPipes,
                     NwbAllModule
                 ],
-                exports: [SharedComponentsModule, SharedDirectives]
+                exports: [SharedComponentsModule, SharedDirectives, SharedPipes]
             },] }
 ];
 
@@ -3400,5 +3535,5 @@ WiziComponentsModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractDebounceDirective, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AutoHideDirective, BackComponent, BlockComponent, ButtonComponent, CalendarComponent, CheckBoxRow, CheckboxComponent, DebounceKeyupDirective, DeleteComponent, DropdownComponent, FiltersComponent, FiltersTableService, FreePopinComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MultipleSearchComponent, MultipleSearchPlusComponent, PaginationComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectInTextComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SnackbarComponent, StateComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableRow, TagComponent, TextAreaComponent, TextComponent, TooltipComponent, UploadComponent, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, 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, inOutX as ɵn };
+export { AbstractDebounceDirective, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AutoHideDirective, BackComponent, BlockComponent, ButtonComponent, CalendarComponent, CheckBoxRow, CheckboxComponent, DebounceKeyupDirective, DeleteComponent, DropdownComponent, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MultipleSearchComponent, MultipleSearchPlusComponent, PaginationComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectInTextComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableRow, TagComponent, TextAreaComponent, TextComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, 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, inOutX as ɵn };
 //# sourceMappingURL=wizishop-angular-components.js.map