@banta/sdk 4.7.12 → 4.7.14

package/fesm2020/banta-sdk.mjs

@@ -2,8 +2,9 @@ import { Observable, Subject, BehaviorSubject, Subscription } from 'rxjs';
 import { publish, take } from 'rxjs/operators';
 import * as i0 from '@angular/core';
 import { Component, Input, ViewChild, Pipe, Inject, Optional, Output, HostBinding, NgModule, ViewChildren, Directive, TemplateRef, ContentChild, Injectable as Injectable$1 } from '@angular/core';
-import * as i1 from 'projects/sdk/src/lib/common/timer-pool.service';
-import { TimerPool as TimerPool$1 } from 'projects/sdk/src/lib/common/timer-pool.service';
+import { __decorate } from 'tslib';
+import * as i1$2 from '@banta/common';
+import { Injectable, CommentsOrder, SocketRPC, RpcEvent, DurableSocket } from '@banta/common';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/material/icon';
@@ -11,22 +12,19 @@ import { MatIconModule } from '@angular/material/icon';
 import * as marked from 'marked';
 import createDOMPurify from 'dompurify';
 import twemoji$1 from 'twemoji';
-import * as i1$1 from '@angular/platform-browser';
+import * as i1 from '@angular/platform-browser';
 import * as i3 from '@angular/cdk/bidi';
 import * as i4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i6 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import { __decorate } from 'tslib';
-import * as i1$3 from '@banta/common';
-import { Injectable, CommentsOrder, SocketRPC, RpcEvent, DurableSocket } from '@banta/common';
 import * as i4$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i6$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i7 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i1$2 from '@angular/cdk/overlay';
+import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i4$2 from '@angular/cdk/portal';
 import { PortalModule } from '@angular/cdk/portal';
@@ -58,6 +56,86 @@ function lazyConnection(options) {
     return obs.pipe(publish()).refCount();
 }
 
+/**
+ * Provides a way to hook in to a shared set of timers, instead of creating a timer per instance.
+ * This is very useful for cases where the update is not extremely time-sensitive, but happens at scale.
+ * The principal use case is the TimestampComponent. When several hundred (or several thousand) comments are
+ * being displayed, we do not want to trigger thousands of independent relative timestamp updates, because over
+ * time the updates will saturate the CPU since they don't perfectly align.
+ */
+let TimerPool = class TimerPool {
+    constructor() {
+        this.subscriptions = new Map();
+        this.newSubscriptions = new Map();
+        this.removedSubscriptions = new Map();
+    }
+    addTimer(interval, callback) {
+        if (interval <= 0) {
+            console.warn(`Refusing to set timer with interval of ${interval}!`);
+            return () => { };
+        }
+        let state;
+        let sizeWas = this.subscriptions.size;
+        if (!this.subscriptions.has(interval)) {
+            state = { subscribers: [] };
+            state.handle = setInterval(() => {
+                console.debug(`[Banta/TimerPool] Notifying ${state.subscribers.length} subs [${interval}ms]`);
+                state.subscribers.forEach(sub => sub());
+            }, interval);
+            this.subscriptions.set(interval, state);
+        }
+        else {
+            state = this.subscriptions.get(interval);
+        }
+        state.subscribers.push(callback);
+        // Debug information //////////////////////////
+        //
+        if (!this.newSubscriptions.has(interval))
+            this.newSubscriptions.set(interval, 0);
+        this.newSubscriptions.set(interval, (this.newSubscriptions.get(interval) ?? 0) + 1);
+        clearTimeout(this.newSubscriptionsNotice);
+        this.newSubscriptionsNotice = setTimeout(() => {
+            for (let [interval, count] of this.newSubscriptions) {
+                console.debug(`[Banta/TimerPool] ${count} new subscriptions to ${interval}ms [${state.subscribers.length} total]`);
+            }
+            this.newSubscriptions.clear();
+        });
+        //
+        ///////////////////////////////////////////////
+        if (sizeWas === 0) {
+            console.debug(`[Banta/TimerPool] No longer idle.`);
+        }
+        // Unsubscribe function 
+        return () => {
+            let state = this.subscriptions.get(interval);
+            let index = state.subscribers.indexOf(callback);
+            if (index >= 0)
+                state.subscribers.splice(index, 1);
+            if (state.subscribers.length === 0) {
+                clearInterval(state.handle);
+                this.subscriptions.delete(interval);
+            }
+            if (!this.removedSubscriptions.has(interval))
+                this.removedSubscriptions.set(interval, 0);
+            this.removedSubscriptions.set(interval, (this.removedSubscriptions.get(interval) ?? 0) + 1);
+            // Debug information ////////////////////////////////////////////////////////////////////
+            clearTimeout(this.removedSubscriptionsNotice);
+            this.removedSubscriptionsNotice = setTimeout(() => {
+                for (let [interval, count] of this.removedSubscriptions) {
+                    let state = this.subscriptions.get(interval);
+                    console.debug(`[Banta/TimerPool] ${count} unsubscribed from ${interval}ms [${state?.subscribers?.length ?? 0} remain]`);
+                }
+                if (this.subscriptions.size === 0)
+                    console.debug(`[Banta/TimerPool] All subscriptions have been removed. Now idle.`);
+                this.removedSubscriptions.clear();
+            });
+        };
+    }
+};
+TimerPool = __decorate([
+    Injectable()
+], TimerPool);
+
 class TimestampComponent {
     constructor(timerPool) {
         this.timerPool = timerPool;
@@ -154,7 +232,7 @@ class TimestampComponent {
         }
     }
 }
-TimestampComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TimestampComponent, deps: [{ token: i1.TimerPool }], target: i0.ɵɵFactoryTarget.Component });
+TimestampComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TimestampComponent, deps: [{ token: TimerPool }], target: i0.ɵɵFactoryTarget.Component });
 TimestampComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TimestampComponent, selector: "banta-timestamp", inputs: { value: "value" }, ngImport: i0, template: `
         <span *ngIf="showAbsolute" [title]="value | date : 'short'">
             {{value | date : 'shortDate'}}
@@ -173,7 +251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             {{relative}}
         </span>
     ` }]
-        }], ctorParameters: function () { return [{ type: i1.TimerPool }]; }, propDecorators: { value: [{
+        }], ctorParameters: function () { return [{ type: TimerPool }]; }, propDecorators: { value: [{
                 type: Input
             }] } });
 
@@ -275,14 +353,14 @@ class BantaMarkdownToHtmlPipe {
         }));
     }
 }
-BantaMarkdownToHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, deps: [{ token: i1$1.DomSanitizer }, { token: BANTA_SDK_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
+BantaMarkdownToHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, deps: [{ token: i1.DomSanitizer }, { token: BANTA_SDK_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
 BantaMarkdownToHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, name: "markdownToHtml" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'markdownToHtml'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BANTA_SDK_OPTIONS]
                 }, {
@@ -299,14 +377,14 @@ class BantaTrustResourceUrlPipe {
         return this.sanitizer.bypassSecurityTrustResourceUrl(value);
     }
 }
-BantaTrustResourceUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaTrustResourceUrlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+BantaTrustResourceUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaTrustResourceUrlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
 BantaTrustResourceUrlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BantaTrustResourceUrlPipe, name: "trustResourceUrl" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaTrustResourceUrlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'trustResourceUrl'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
+        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });
 
 class BantaMentionLinkerPipe {
     transform(value, links) {
@@ -513,86 +591,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Output
             }] } });
 
-/**
- * Provides a way to hook in to a shared set of timers, instead of creating a timer per instance.
- * This is very useful for cases where the update is not extremely time-sensitive, but happens at scale.
- * The principal use case is the TimestampComponent. When several hundred (or several thousand) comments are
- * being displayed, we do not want to trigger thousands of independent relative timestamp updates, because over
- * time the updates will saturate the CPU since they don't perfectly align.
- */
-let TimerPool = class TimerPool {
-    constructor() {
-        this.subscriptions = new Map();
-        this.newSubscriptions = new Map();
-        this.removedSubscriptions = new Map();
-    }
-    addTimer(interval, callback) {
-        if (interval <= 0) {
-            console.warn(`Refusing to set timer with interval of ${interval}!`);
-            return () => { };
-        }
-        let state;
-        let sizeWas = this.subscriptions.size;
-        if (!this.subscriptions.has(interval)) {
-            state = { subscribers: [] };
-            state.handle = setInterval(() => {
-                console.debug(`[Banta/TimerPool] Notifying ${state.subscribers.length} subs [${interval}ms]`);
-                state.subscribers.forEach(sub => sub());
-            }, interval);
-            this.subscriptions.set(interval, state);
-        }
-        else {
-            state = this.subscriptions.get(interval);
-        }
-        state.subscribers.push(callback);
-        // Debug information //////////////////////////
-        //
-        if (!this.newSubscriptions.has(interval))
-            this.newSubscriptions.set(interval, 0);
-        this.newSubscriptions.set(interval, (this.newSubscriptions.get(interval) ?? 0) + 1);
-        clearTimeout(this.newSubscriptionsNotice);
-        this.newSubscriptionsNotice = setTimeout(() => {
-            for (let [interval, count] of this.newSubscriptions) {
-                console.debug(`[Banta/TimerPool] ${count} new subscriptions to ${interval}ms [${state.subscribers.length} total]`);
-            }
-            this.newSubscriptions.clear();
-        });
-        //
-        ///////////////////////////////////////////////
-        if (sizeWas === 0) {
-            console.debug(`[Banta/TimerPool] No longer idle.`);
-        }
-        // Unsubscribe function 
-        return () => {
-            let state = this.subscriptions.get(interval);
-            let index = state.subscribers.indexOf(callback);
-            if (index >= 0)
-                state.subscribers.splice(index, 1);
-            if (state.subscribers.length === 0) {
-                clearInterval(state.handle);
-                this.subscriptions.delete(interval);
-            }
-            if (!this.removedSubscriptions.has(interval))
-                this.removedSubscriptions.set(interval, 0);
-            this.removedSubscriptions.set(interval, (this.removedSubscriptions.get(interval) ?? 0) + 1);
-            // Debug information ////////////////////////////////////////////////////////////////////
-            clearTimeout(this.removedSubscriptionsNotice);
-            this.removedSubscriptionsNotice = setTimeout(() => {
-                for (let [interval, count] of this.removedSubscriptions) {
-                    let state = this.subscriptions.get(interval);
-                    console.debug(`[Banta/TimerPool] ${count} unsubscribed from ${interval}ms [${state?.subscribers?.length ?? 0} remain]`);
-                }
-                if (this.subscriptions.size === 0)
-                    console.debug(`[Banta/TimerPool] All subscriptions have been removed. Now idle.`);
-                this.removedSubscriptions.clear();
-            });
-        };
-    }
-};
-TimerPool = __decorate([
-    Injectable()
-], TimerPool);
-
 const COMPONENTS$3 = [
     TimestampComponent,
     LightboxComponent,
@@ -607,7 +605,7 @@ class BantaCommonModule {
         return {
             ngModule: BantaCommonModule,
             providers: [
-                TimerPool$1
+                TimerPool
             ]
         };
     }
@@ -7227,12 +7225,12 @@ class EmojiSelectorPanelComponent {
         this.categories = this.pairs(cats).map(pair => pair[1]);
     }
 }
-EmojiSelectorPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EmojiSelectorPanelComponent, deps: [{ token: i1$1.DomSanitizer }, { token: BANTA_SDK_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+EmojiSelectorPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EmojiSelectorPanelComponent, deps: [{ token: i1.DomSanitizer }, { token: BANTA_SDK_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 EmojiSelectorPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: EmojiSelectorPanelComponent, selector: "emoji-selector-panel", outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"search-box\" *ngIf=\"searchVisible\">\r\n\t<a mat-icon-button href=\"javascript:;\" (click)=\"hideSearch()\">\r\n\t\t<mat-icon>arrow_back</mat-icon>\r\n\t</a>\r\n\t<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n\t\t<mat-label>Search for emoji</mat-label>\r\n\t\t<input name=\"search\" type=\"text\" matInput placeholder=\"Start typing\" [(ngModel)]=\"searchQuery\" />\r\n\t</mat-form-field>\r\n</div>\r\n\r\n<div class=\"selector\">\r\n\t<ng-container *ngIf=\"searchVisible\">\r\n\t\t<div class=\"emoji-list\">\r\n\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t*ngFor=\"let emoji of searchResults\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t</a>\r\n\t\t</div>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t<div class=\"categories\">\r\n\t\t\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t\t\t<a [title]=\"humanize(category.name)\" [class.active]=\"activeCategory === category.name\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t\t\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\r\n\t\t\t\t<a title=\"Search\" [class.active] mat-icon-button (click)=\"showSearch()\">\r\n\t\t\t\t\t<mat-icon>search</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngFor=\"let category of categories\">\r\n\t\t\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t\t*ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t\t</a>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>", styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em - 5px)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:.4s opacity ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width: 500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}:host-context(.banta-mobile) .selector{flex-direction:row;height:27em}:host-context(.banta-mobile) .emoji-list{height:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EmojiSelectorPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emoji-selector-panel', template: "<div class=\"search-box\" *ngIf=\"searchVisible\">\r\n\t<a mat-icon-button href=\"javascript:;\" (click)=\"hideSearch()\">\r\n\t\t<mat-icon>arrow_back</mat-icon>\r\n\t</a>\r\n\t<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n\t\t<mat-label>Search for emoji</mat-label>\r\n\t\t<input name=\"search\" type=\"text\" matInput placeholder=\"Start typing\" [(ngModel)]=\"searchQuery\" />\r\n\t</mat-form-field>\r\n</div>\r\n\r\n<div class=\"selector\">\r\n\t<ng-container *ngIf=\"searchVisible\">\r\n\t\t<div class=\"emoji-list\">\r\n\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t*ngFor=\"let emoji of searchResults\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t</a>\r\n\t\t</div>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t<div class=\"categories\">\r\n\t\t\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t\t\t<a [title]=\"humanize(category.name)\" [class.active]=\"activeCategory === category.name\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t\t\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\r\n\t\t\t\t<a title=\"Search\" [class.active] mat-icon-button (click)=\"showSearch()\">\r\n\t\t\t\t\t<mat-icon>search</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngFor=\"let category of categories\">\r\n\t\t\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t\t*ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t\t</a>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>", styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em - 5px)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:.4s opacity ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width: 500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}:host-context(.banta-mobile) .selector{flex-direction:row;height:27em}:host-context(.banta-mobile) .emoji-list{height:auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BANTA_SDK_OPTIONS]
                 }, {
@@ -7306,7 +7304,7 @@ class EmojiSelectorButtonComponent {
         this.overlayRef.attach(this.selectorPanelTemplate);
     }
 }
-EmojiSelectorButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EmojiSelectorButtonComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+EmojiSelectorButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EmojiSelectorButtonComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
 EmojiSelectorButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: EmojiSelectorButtonComponent, selector: "emoji-selector-button", inputs: { overlayX: "overlayX", overlayY: "overlayY", originX: "originX", originY: "originY" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "selectorPanelTemplate", first: true, predicate: ["selectorPanelTemplate"], descendants: true }], ngImport: i0, template: `
         <button #button type="button" mat-icon-button (click)="show()">
             <mat-icon>emoji_emotions</mat-icon>
@@ -7331,7 +7329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 ></emoji-selector-panel>
         </ng-template>
     `, styles: [":host{display:block;position:relative}button{color:#666}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.Overlay }]; }, propDecorators: { selectorPanelTemplate: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.Overlay }]; }, propDecorators: { selectorPanelTemplate: [{
                 type: ViewChild,
                 args: ['selectorPanelTemplate']
             }], selected: [{
@@ -8046,12 +8044,12 @@ class AttachmentButtonComponent {
         }
     }
 }
-AttachmentButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AttachmentButtonComponent, deps: [{ token: i1$3.CDNProvider }], target: i0.ɵɵFactoryTarget.Component });
+AttachmentButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AttachmentButtonComponent, deps: [{ token: i1$2.CDNProvider }], target: i0.ɵɵFactoryTarget.Component });
 AttachmentButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AttachmentButtonComponent, selector: "banta-attachment-button", outputs: { addedAttachment: "addedAttachment", attachmentError: "attachmentError" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileUpload"], descendants: true }], ngImport: i0, template: "<button matTooltip=\"Add an image or gif\" #button type=\"button\" mat-icon-button (click)=\"show()\">\r\n\t<mat-icon>image</mat-icon>\r\n</button>\r\n<input style=\"display: none;\" #fileUpload [multiple]=\"false\"  (change)=\"fileChange($event)\" type=\"file\" >", styles: ["button{color:#666}\n"], dependencies: [{ kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AttachmentButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'banta-attachment-button', template: "<button matTooltip=\"Add an image or gif\" #button type=\"button\" mat-icon-button (click)=\"show()\">\r\n\t<mat-icon>image</mat-icon>\r\n</button>\r\n<input style=\"display: none;\" #fileUpload [multiple]=\"false\"  (change)=\"fileChange($event)\" type=\"file\" >", styles: ["button{color:#666}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.CDNProvider }]; }, propDecorators: { fileInput: [{
+        }], ctorParameters: function () { return [{ type: i1$2.CDNProvider }]; }, propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileUpload', { static: false }]
             }], addedAttachment: [{