@agorapulse/ui-components 13.2.2 → 13.2.3

package/fesm2015/agorapulse-ui-components.mjs

@@ -45,7 +45,7 @@ import moment from 'moment';
 import * as i2$1 from 'ngx-daterangepicker-material';
 import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
 import * as i1$3 from '@angular/animations';
-import { animate, style, trigger, transition } from '@angular/animations';
+import { animate, style, trigger, transition, keyframes } from '@angular/animations';
 import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
 import { Subject, of, fromEvent, BehaviorSubject } from 'rxjs';
 import { switchMap, delay, takeUntil, debounceTime, distinctUntilChanged, tap, catchError, map } from 'rxjs/operators';
@@ -3283,28 +3283,30 @@ class MultiStyleTextDirective {
         for (const child of this.childrenCreated) {
             this.renderer.removeChild(this.elRef.nativeElement, child);
         }
-        MultiStyleTextDirective.parse(fullText).forEach((part) => {
-            if (part.clazz || part.clickName) {
-                // Parsed item with styling classes and/or event listening.
-                const span = this.renderer.createElement('span');
-                const text = this.renderer.createText(part.content);
-                this.renderer.appendChild(span, text);
-                if (part.clazz) {
-                    part.clazz.forEach(clazz => this.renderer.addClass(span, clazz));
+        if (fullText && fullText.length > 0) {
+            MultiStyleTextDirective.parse(fullText).forEach((part) => {
+                if (part.clazz || part.clickName) {
+                    // Parsed item with styling classes and/or event listening.
+                    const span = this.renderer.createElement('span');
+                    const text = this.renderer.createText(part.content);
+                    this.renderer.appendChild(span, text);
+                    if (part.clazz) {
+                        part.clazz.forEach(clazz => this.renderer.addClass(span, clazz));
+                    }
+                    if (part.clickName) {
+                        this.renderer.listen(span, 'click', () => this.partEvent.emit(part.clickName));
+                    }
+                    this.renderer.appendChild(this.elRef.nativeElement, span);
+                    this.childrenCreated.push(span);
                 }
-                if (part.clickName) {
-                    this.renderer.listen(span, 'click', () => this.partEvent.emit(part.clickName));
+                else {
+                    // Specific of part without styling classes (could be used to get event listening only)
+                    const text = this.renderer.createText(part.content);
+                    this.renderer.appendChild(this.elRef.nativeElement, text);
+                    this.childrenCreated.push(text);
                 }
-                this.renderer.appendChild(this.elRef.nativeElement, span);
-                this.childrenCreated.push(span);
-            }
-            else {
-                // Specific of part without styling classes (could be used to get event listening only)
-                const text = this.renderer.createText(part.content);
-                this.renderer.appendChild(this.elRef.nativeElement, text);
-                this.childrenCreated.push(text);
-            }
-        });
+            });
+        }
     }
     static parse(toParse) {
         const parts = [];
@@ -3392,6 +3394,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Output
             }] } });
 
+const ANIMATION_STYLES = new Map([
+    ['position', 'absolute'],
+    ['bottom', '0'],
+    ['height', '5px'],
+    ['border-radius', '6px'],
+    ['animation', 'slide 1s linear infinite']
+]);
+/**
+ * This directive aims to manage a slider animation.
+ */
+class LoadingSliderDirective {
+    constructor(elRef, renderer, animationBuilder) {
+        this.elRef = elRef;
+        this.renderer = renderer;
+        this.animationBuilder = animationBuilder;
+        this.loadingSlider = false;
+        this.sliderWidth = '50px';
+        this.sliderColor = '#ff6726';
+        this.sliderAnimationTime = 2000;
+        this.partEvent = new EventEmitter();
+    }
+    ngOnDestroy() {
+        this.removeSlider();
+    }
+    ngOnChanges(changes) {
+        let recreate = false;
+        if (changes.sliderWidth || changes.sliderColor || changes.sliderAnimationTime) {
+            recreate = true;
+        }
+        if (this.loadingSlider) {
+            if (!this.child || recreate) {
+                this.createSlider();
+            }
+            this.showSlider();
+        }
+        else {
+            this.hideSlider();
+        }
+    }
+    createSlider() {
+        this.removeSlider();
+        const div = this.renderer.createElement('div');
+        this.renderer.setStyle(this.elRef.nativeElement, 'position', 'relative');
+        this.renderer.setStyle(this.elRef.nativeElement, 'overflow', 'hidden');
+        this.renderer.addClass(div, 'animation-slider');
+        ANIMATION_STYLES.forEach((value, key) => this.renderer.setStyle(div, key, value));
+        this.renderer.setStyle(div, 'width', this.sliderWidth);
+        this.renderer.setStyle(div, 'background-color', this.sliderColor);
+        // Animate
+        const loaderFadeOutAnimation = this.animationBuilder.build([
+            animate(this.sliderAnimationTime, keyframes([
+                style({ left: "-" + this.sliderWidth, offset: 0 }),
+                style({ left: "calc(100%)", offset: 1 })
+            ]))
+        ]);
+        this.animation = loaderFadeOutAnimation.create(div);
+        const loop = () => {
+            // Stop loop on destroy
+            if (this.animation) {
+                this.animation.reset();
+                this.animation.onDone(loop);
+                this.animation.play();
+            }
+        };
+        this.animation.onDone(loop);
+        this.animation.play();
+        // Append new element
+        this.renderer.appendChild(this.elRef.nativeElement, div);
+        this.child = div;
+    }
+    removeSlider() {
+        if (this.animation) {
+            this.animation.destroy();
+            this.animation = undefined;
+        }
+        if (this.child) {
+            this.renderer.removeChild(this.elRef.nativeElement, this.child);
+            this.child = undefined;
+        }
+    }
+    hideSlider() {
+        if (this.child) {
+            this.renderer.setProperty(this.child, 'hidden', true);
+        }
+        if (this.animation) {
+            this.animation.pause();
+        }
+    }
+    showSlider() {
+        if (this.child) {
+            this.renderer.setProperty(this.child, 'hidden', false);
+        }
+        if (this.animation) {
+            this.animation.reset();
+            this.animation.play();
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ LoadingSliderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoadingSliderDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$3.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ LoadingSliderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: LoadingSliderDirective, selector: "[loadingSlider]", inputs: { loadingSlider: "loadingSlider", sliderWidth: "sliderWidth", sliderColor: "sliderColor", sliderAnimationTime: "sliderAnimationTime" }, outputs: { partEvent: "partEvent" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoadingSliderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // tslint:disable-next-line:directive-selector
+                    selector: '[loadingSlider]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$3.AnimationBuilder }]; }, propDecorators: { loadingSlider: [{
+                type: Input
+            }], sliderWidth: [{
+                type: Input
+            }], sliderColor: [{
+                type: Input
+            }], sliderAnimationTime: [{
+                type: Input
+            }], partEvent: [{
+                type: Output
+            }] } });
+
 // Angular
 class TruncateTooltipDirective {
     constructor(tooltipNeo, elementRef) {
@@ -3527,7 +3647,8 @@ class AgorapulseUiComponentsModule {
         EqualValidatorDirective,
         MultiStyleTextDirective,
         TruncateTooltipDirective,
-        TooltipNeoDirective
+        TooltipNeoDirective,
+        LoadingSliderDirective
     ], imports: [AgorapulseUiSymbolModule,
         CommonModule,
         NgxDaterangepickerMd,
@@ -3608,6 +3729,7 @@ class AgorapulseUiComponentsModule {
         MultiStyleTextDirective,
         TruncateTooltipDirective,
         TooltipNeoDirective,
+        LoadingSliderDirective,
         // Modules
         NgSelectModule,
         PopmenuModule,
@@ -3774,6 +3896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         MultiStyleTextDirective,
                         TruncateTooltipDirective,
                         TooltipNeoDirective,
+                        LoadingSliderDirective,
                     ],
                     imports: [
                         AgorapulseUiSymbolModule,
@@ -3859,6 +3982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         MultiStyleTextDirective,
                         TruncateTooltipDirective,
                         TooltipNeoDirective,
+                        LoadingSliderDirective,
                         // Modules
                         NgSelectModule,
                         PopmenuModule,
@@ -4009,5 +4133,5 @@ function generateCodeStatus(text, type) {
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommentComponent, AgorapulseUiComponentsModule, AutosizeTextareaDirective, AvatarComponent, ConfirmModalComponent, DatepickerComponent, DatepickerMode, DefaultImageDirective, DotsStepperComponent, EllipsisDirective, EqualValidatorDirective, FeatureOnboardingComponent, FrozenGifDirective, ImageCarouselComponent, InstagramCarouselItemType, LabelComponent, LabelListComponent, LabelsSelectorComponent, MediaDisplayOverlayDialogComponent, ModalComponent, MultiStyleTextDirective, NotificationComponent, OverlayDialogComponent, OverlayDialogService, OverlayInDivComponent, PaginatorButtonComponent, PaginatorComponent, PasswordInputComponent, PlaceComponent, PlaceListComponent, PopmenuComponent, PopmenuDirective, PopmenuModule, SlideToggleComponent, SnackBarComponent, SnackbarsThreadComponent, SnackbarsThreadService, SplashscreenComponent, StarRatingComponent, StepperComponent, TimeFormat, TimepickerComponent, TooltipNeoDirective, TruncateTooltipDirective, TryPopupComponent, generateCodeStatus };
+export { AddCommentComponent, AgorapulseUiComponentsModule, AutosizeTextareaDirective, AvatarComponent, ConfirmModalComponent, DatepickerComponent, DatepickerMode, DefaultImageDirective, DotsStepperComponent, EllipsisDirective, EqualValidatorDirective, FeatureOnboardingComponent, FrozenGifDirective, ImageCarouselComponent, InstagramCarouselItemType, LabelComponent, LabelListComponent, LabelsSelectorComponent, LoadingSliderDirective, MediaDisplayOverlayDialogComponent, ModalComponent, MultiStyleTextDirective, NotificationComponent, OverlayDialogComponent, OverlayDialogService, OverlayInDivComponent, PaginatorButtonComponent, PaginatorComponent, PasswordInputComponent, PlaceComponent, PlaceListComponent, PopmenuComponent, PopmenuDirective, PopmenuModule, SlideToggleComponent, SnackBarComponent, SnackbarsThreadComponent, SnackbarsThreadService, SplashscreenComponent, StarRatingComponent, StepperComponent, TimeFormat, TimepickerComponent, TooltipNeoDirective, TruncateTooltipDirective, TryPopupComponent, generateCodeStatus };
 //# sourceMappingURL=agorapulse-ui-components.mjs.map