@wizishop/angular-components 0.0.39 → 0.0.43

package/fesm2015/wizishop-angular-components.js

@@ -1,10 +1,11 @@
 import { NwbFilterRoutingBuilder, NwbAllModule } from '@wizishop/ng-wizi-bulma';
-import { Component, ViewEncapsulation, Input, EventEmitter, Output, Directive, HostListener, ɵɵdefineInjectable, Injectable, ElementRef, Renderer2, NgModule, ɵɵinject, ViewChild, Pipe, ApplicationRef, Inject, ComponentFactoryResolver, Injector } from '@angular/core';
+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 { CommonModule, DOCUMENT } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { Subject } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
+import { OverlayContainer } from '@angular/cdk/overlay';
 import { CdkTableModule } from '@angular/cdk/table';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import { TagInputModule } from 'ngx-chips';
@@ -128,7 +129,11 @@ DebounceKeyupDirective.propDecorators = {
 };
 
 class DomService {
-    constructor() {
+    constructor(componentFactoryResolver, appRef, injector, overlayContainer) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.appRef = appRef;
+        this.injector = injector;
+        this.overlayContainer = overlayContainer;
         this.documentEventSource = new Subject();
         this.documentEventDone = this.documentEventSource.asObservable();
         this.eventInitialisation = true;
@@ -156,13 +161,31 @@ class DomService {
             this.documentScrollSource.next(window);
         };
     }
+    attachComponentPortal(component, injector) {
+        const componentRef = this.componentFactoryResolver
+            .resolveComponentFactory(component)
+            .create(injector ? injector : this.injector);
+        this.appRef.attachView(componentRef.hostView);
+        this.overlayContainer.getContainerElement().appendChild(this._getComponentRootNode(componentRef));
+        return componentRef;
+    }
+    /** Gets the root HTMLElement for an instantiated component. */
+    _getComponentRootNode(componentRef) {
+        return componentRef.hostView.rootNodes[0];
+    }
 }
-DomService.ɵprov = ɵɵdefineInjectable({ factory: function DomService_Factory() { return new DomService(); }, token: DomService, providedIn: "root" });
+DomService.ɵprov = ɵɵdefineInjectable({ factory: function DomService_Factory() { return new DomService(ɵɵinject(ComponentFactoryResolver), ɵɵinject(ApplicationRef), ɵɵinject(INJECTOR), ɵɵinject(OverlayContainer)); }, token: DomService, providedIn: "root" });
 DomService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root'
             },] }
 ];
+DomService.ctorParameters = () => [
+    { type: ComponentFactoryResolver },
+    { type: ApplicationRef },
+    { type: Injector },
+    { type: OverlayContainer }
+];
 
 class AutoHideDirective {
     constructor(_elementRef, domService) {
@@ -552,6 +575,7 @@ class ButtonComponent {
         this.iconFontSize = 12;
         this.hasLoader = false;
         this.disabled = false;
+        this.whiteSpaceNowrap = false;
         this.click = new EventEmitter();
         this.isLoading = false;
         this.interval = null;
@@ -589,7 +613,7 @@ class ButtonComponent {
 ButtonComponent.decorators = [
     { type: Component, args: [{
                 selector: 'wac-button',
-                template: "<a\n  [class]=\"'wac-button ' + extraClasses\"\n  (click)=\"onButtonClick($event)\"\n  [ngClass]=\"[label === '' ? 'alone' : '', isLoading ? 'is-loading' : '', disabled ? 'disabled' : '', widthAuto ? 'width-auto' : '']\"\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\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  </span>\n</a>\n"
+                template: "<a\n  [class]=\"'wac-button ' + extraClasses\"\n  (click)=\"onButtonClick($event)\"\n  [ngClass]=\"[label === '' ? 'alone' : '', isLoading ? 'is-loading' : '', disabled ? 'disabled' : '', widthAuto ? 'width-auto' : '', whiteSpaceNowrap ? 'white-space-no-wrap' : '']\"\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\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  </span>\n</a>\n"
             },] }
 ];
 ButtonComponent.ctorParameters = () => [];
@@ -602,6 +626,7 @@ ButtonComponent.propDecorators = {
     iconFontSize: [{ type: Input }],
     hasLoader: [{ type: Input }],
     disabled: [{ type: Input }],
+    whiteSpaceNowrap: [{ type: Input }],
     click: [{ type: Output }]
 };
 
@@ -1330,6 +1355,7 @@ class InputComponent {
         this.withoutBlock = false;
         this.icon = '';
         this.big = false;
+        this.medium = false;
         this.boldLabel = 'false';
         this.min = null;
         this.max = null;
@@ -1397,7 +1423,7 @@ class InputComponent {
 InputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'wac-input',
-                template: "<div\n  class=\"field wac-input\"\n  [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'with-padding': padding, '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=\"value && 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          (keypress)=\"keyPress($event)\"\n        />\n\n        <!-- Indication at the end of the input -->\n        <span class=\"indication\" *ngIf=\"indication\">\n          <span [innerHTML]=\"indication\"></span>\n        </span>\n\n        <!-- Text Append -->\n        <span *ngIf=\"textAppend\" 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\" 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\" 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\"\n          class=\"is-size-7 wac-input__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n\n        <!-- Text Error -->\n        <span *ngIf=\"textError && !progressBar\" 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\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n",
+                template: "<div\n  class=\"field wac-input\"\n  [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'is-medium': medium, 'with-padding': padding, '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=\"value && 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          (keypress)=\"keyPress($event)\"\n        />\n\n        <!-- Indication at the end of the input -->\n        <span class=\"indication\" *ngIf=\"indication\">\n          <span [innerHTML]=\"indication\"></span>\n        </span>\n\n        <!-- Text Append -->\n        <span *ngIf=\"textAppend\" 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\" 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\" 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\"\n          class=\"is-size-7 wac-input__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n\n        <!-- Text Error -->\n        <span *ngIf=\"textError && !progressBar\" 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\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n",
                 providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: InputComponent, multi: true }]
             },] }
 ];
@@ -1413,6 +1439,7 @@ InputComponent.propDecorators = {
     withoutBlock: [{ type: Input }],
     icon: [{ type: Input }],
     big: [{ type: Input }],
+    medium: [{ type: Input }],
     boldLabel: [{ type: Input }],
     min: [{ type: Input }],
     max: [{ type: Input }],
@@ -2976,6 +3003,84 @@ SnackbarComponent.propDecorators = {
     response: [{ type: Output }]
 };
 
+class AlertPopupComponent {
+    constructor() {
+        /** Subject for notifying the user that the dialog has finished closing. */
+        this.afterClosedPopup = new Subject();
+        this.open = false;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.open = true;
+        }, 50);
+        if (this.config.duration > 0) {
+            this.timer = setTimeout(() => this.dismiss(), this.config.duration);
+        }
+    }
+    dismiss() {
+        this.open = false;
+        setTimeout(() => {
+            this.afterClosedPopup.next(true);
+            this.afterClosedPopup.complete();
+        }, 200);
+    }
+    /**
+     * Gets an observable that is notified when the dialog is finished closing.
+     */
+    afterClosed() {
+        return this.afterClosedPopup.asObservable();
+    }
+}
+AlertPopupComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'wac-alert-popup',
+                template: "<div\n  [class]=\"'alert ' + ((config.color) ? config.color : ' is-primary') + ((config.extraClasses) ? ' ' + config.extraClasses : '') + ((config.position) ? ' ' + config.position : '') + ((config.fullsize) ? ' fullsize' : '') + ((config.opacity) ? ' opacity-active' : '') + ((config.small) ? ' small' : '')\"\n  [ngClass]=\"{'is-active': open}\"\n>\n  <div class=\"alert--message\">\n    <span class=\"icon\" *ngIf=\"config.icon\">\n        <i [class]=\"config.icon\"></i>\n    </span>\n    <span (click)=\"dismiss()\" class=\"wac-alert-popup__close\"><i class=\"fas fa-times\"></i></span>\n    <p *ngIf=\"config.title\" class=\"wac-alert-popup__title\" [innerHTML]=\"config.title\"></p>\n    <p *ngIf=\"config.message\" class=\"wac-alert-popup__text\" [innerHTML]=\"config.message\"></p>\n  </div>\n</div>\n",
+                host: {
+                    class: 'wac-alert-popup'
+                },
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+
+class AlertPopupService {
+    constructor(domService) {
+        this.domService = domService;
+    }
+    open(config) {
+        const componentRef = this.getComponentRef(config);
+        return componentRef.instance;
+    }
+    getComponentRef(config) {
+        const componentRef = this.domService.attachComponentPortal(AlertPopupComponent);
+        config = Object.assign({
+            position: 'is-top'
+        }, config);
+        componentRef.instance.config = config;
+        componentRef.instance.afterClosed().subscribe(() => {
+            componentRef.destroy();
+        });
+        return componentRef;
+    }
+}
+AlertPopupService.decorators = [
+    { type: Injectable }
+];
+AlertPopupService.ctorParameters = () => [
+    { type: DomService }
+];
+
+class AlertPopupModule {
+}
+AlertPopupModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                providers: [AlertPopupService],
+                entryComponents: [AlertPopupComponent],
+                declarations: [AlertPopupComponent],
+                exports: [AlertPopupComponent]
+            },] }
+];
+
 const components = [
     TagComponent,
     TabComponent,
@@ -3053,6 +3158,7 @@ SharedComponentsModule.decorators = [
                     LoaderModule,
                     ProgressBarModule,
                     PerfectScrollbarModule,
+                    AlertPopupModule,
                     RouterModule
                 ],
                 declarations: components,
@@ -3082,5 +3188,5 @@ WiziComponentsModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractDebounceDirective, AlertComponent, 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, SelectComponent, SelectInTextComponent, 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, 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, SelectComponent, SelectInTextComponent, 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, AlertPopupModule as ɵn, inOutX as ɵo };
 //# sourceMappingURL=wizishop-angular-components.js.map