@banta/sdk 4.7.5 → 4.7.7

package/fesm2020/banta-sdk.mjs

@@ -1,7 +1,7 @@
 import { Observable, Subject, BehaviorSubject, Subscription } from 'rxjs';
 import { publish, take } from 'rxjs/operators';
 import * as i0 from '@angular/core';
-import { Component, Input, ViewChild, Pipe, Output, HostBinding, NgModule, ViewChildren, Directive, TemplateRef, ContentChild, Injectable, Inject } from '@angular/core';
+import { Component, Input, ViewChild, Pipe, Output, HostBinding, NgModule, Inject, Optional, ViewChildren, Directive, TemplateRef, ContentChild, Injectable } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/material/icon';
@@ -368,7 +368,7 @@ class BantaAttachmentComponent {
         return this.errorMessage || this.attachment?.transientState?.errorMessage;
     }
     get isLoading() {
-        return !this.editing && (this.loading || !this.attachment || this.attachment.transientState?.loading
+        return this.editing && (this.loading || !this.attachment || this.attachment.transientState?.loading
             || !this.attachment.url);
     }
     get isImageAttachment() {
@@ -394,10 +394,10 @@ class BantaAttachmentComponent {
     }
 }
 BantaAttachmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaAttachmentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BantaAttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BantaAttachmentComponent, selector: "banta-attachment", inputs: { attachment: "attachment", loading: "loading", editing: "editing", loadingMessage: "loadingMessage", error: "error", errorMessage: "errorMessage" }, outputs: { removed: "removed", activated: "activated", loaded: "loaded" }, host: { properties: { "class.loading": "this.isLoading" } }, ngImport: i0, template: "<button type=\"button\" (click)=\"remove()\" mat-mini-fab color=\"primary\" class=\"remove-button\" *ngIf=\"editing\">\r\n    <mat-icon>close</mat-icon>\r\n</button>\r\n\r\n<ng-container *ngIf=\"isError\">\r\n    <mat-icon class=\"error\">close</mat-icon>\r\n    <em class=\"error\">{{theErrorMessage}}</em>\r\n</ng-container>\r\n<ng-container *ngIf=\"!isError\">\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n        <em>{{loadingMessage}}</em>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!isLoading && attachment\">\r\n        <iframe *ngIf=\"hasFrame\"\r\n            sandbox=\"allow-scripts allow-popups allow-same-origin allow-presentation\" \r\n            [src]=\"frameUrl | trustResourceUrl\"></iframe>\r\n        <a *ngIf=\"attachment.type === 'card'\" class=\"card-attachment\" [href]=\"attachment.url\" target=\"_blank\" [class.has-image]=\"attachment.card.image\">\r\n            <img \r\n                *ngIf=\"attachment.card.image\"\r\n                class=\"thumbnail\" \r\n                [src]=\"attachment.card.image\"\r\n                />\r\n            <div class=\"description\">\r\n                <h1>{{attachment.card.title}}</h1>\r\n                <div class=\"summary\">\r\n                    {{attachment.card.description}}\r\n                </div>\r\n                <cite>{{attachment.card.url}}</cite>\r\n            </div>\r\n        </a>\r\n        <a class=\"image-attachment\" *ngIf=\"isImageAttachment\" href=\"javascript:;\" (click)=\"activate()\">\r\n            <img [src]=\"attachment.url\" alt=\"Image Attachment\">\r\n        </a>\r\n        <blockquote *ngIf=\"attachment.type === 'tweet'\" \r\n            class=\"twitter-tweet\">\r\n                <p lang=\"en\" dir=\"ltr\"></p>\r\n                <a [href]=\"attachment.url\"></a>\r\n        </blockquote>\r\n    </ng-container>\r\n</ng-container>", styles: [":host{position:relative;display:block}:host.loading{outline:1px solid #333;padding:1em 0;width:300px;text-align:center}:host.loading mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}a.card-attachment{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919;margin:1em 0}a.card-attachment img{width:250px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}a.card-attachment.has-image h1{font-size:22px}a.card-attachment h1{min-width:0;margin:0 0 .5em;font-size:26px}a.card-attachment cite{min-width:0;opacity:.75;margin-top:1em;display:block;font-size:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}a.card-attachment .description{min-width:0;width:100%}a.card-attachment .summary{overflow-x:hidden;text-overflow:ellipsis}.remove-button{position:absolute;right:10px;top:10px;margin:0;z-index:1}a.image-attachment{width:300px;position:relative;text-align:center}a.image-attachment.with-border{outline:1px solid #333;padding:1em 0}a.image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}a.image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}a.image-attachment .error{color:#b76363}a.image-attachment img{width:300px;border-radius:10px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}iframe{border:none;width:100%;aspect-ratio:16/9}@media (max-width: 700px){a.card-attachment{flex-direction:column}a.card-attachment img{width:100%}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { 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: "pipe", type: BantaTrustResourceUrlPipe, name: "trustResourceUrl" }] });
+BantaAttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BantaAttachmentComponent, selector: "banta-attachment", inputs: { attachment: "attachment", loading: "loading", editing: "editing", loadingMessage: "loadingMessage", error: "error", errorMessage: "errorMessage" }, outputs: { removed: "removed", activated: "activated", loaded: "loaded" }, host: { properties: { "class.loading": "this.isLoading" } }, ngImport: i0, template: "<button type=\"button\" (click)=\"remove()\" mat-mini-fab color=\"primary\" class=\"remove-button\" *ngIf=\"editing\">\r\n    <mat-icon>close</mat-icon>\r\n</button>\r\n\r\n<ng-container *ngIf=\"isError\">\r\n    <mat-icon class=\"error\">close</mat-icon>\r\n    <em class=\"error\">{{theErrorMessage}}</em>\r\n</ng-container>\r\n<ng-container *ngIf=\"!isError\">\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n        <em>{{loadingMessage}}</em>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!isLoading && attachment\">\r\n        <iframe *ngIf=\"hasFrame\"\r\n            sandbox=\"allow-scripts allow-popups allow-same-origin allow-presentation\" \r\n            [src]=\"frameUrl | trustResourceUrl\"></iframe>\r\n        <a *ngIf=\"attachment.type === 'card'\" class=\"card-attachment\" [href]=\"attachment.url\" target=\"_blank\" [class.has-image]=\"attachment.card.image\">\r\n            <img \r\n                *ngIf=\"attachment.card.image\"\r\n                class=\"thumbnail\" \r\n                [src]=\"attachment.card.image\"\r\n                />\r\n            <div class=\"description\">\r\n                <h1>{{attachment.card.title}}</h1>\r\n                <div class=\"summary\">\r\n                    {{attachment.card.description}}\r\n                </div>\r\n                <cite>{{attachment.card.url}}</cite>\r\n            </div>\r\n        </a>\r\n        <a class=\"image-attachment\" *ngIf=\"isImageAttachment && attachment.url\" href=\"javascript:;\" (click)=\"activate()\">\r\n            <img [src]=\"attachment.url\" alt=\"Image Attachment\">\r\n        </a>\r\n        <blockquote *ngIf=\"attachment.type === 'tweet'\" \r\n            class=\"twitter-tweet\">\r\n                <p lang=\"en\" dir=\"ltr\"></p>\r\n                <a [href]=\"attachment.url\"></a>\r\n        </blockquote>\r\n    </ng-container>\r\n</ng-container>", styles: [":host{position:relative;display:block}:host.loading{outline:1px solid #333;padding:1em 0;width:300px;text-align:center}:host.loading mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}a.card-attachment{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919;margin:1em 0}a.card-attachment img{width:250px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}a.card-attachment.has-image h1{font-size:22px}a.card-attachment h1{min-width:0;margin:0 0 .5em;font-size:26px}a.card-attachment cite{min-width:0;opacity:.75;margin-top:1em;display:block;font-size:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}a.card-attachment .description{min-width:0;width:100%}a.card-attachment .summary{overflow-x:hidden;text-overflow:ellipsis}.remove-button{position:absolute;right:10px;top:10px;margin:0;z-index:1}a.image-attachment{width:300px;position:relative;text-align:center}a.image-attachment.with-border{outline:1px solid #333;padding:1em 0}a.image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}a.image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}a.image-attachment .error{color:#b76363}a.image-attachment img{width:300px;border-radius:10px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}iframe{border:none;width:100%;aspect-ratio:16/9}@media (max-width: 700px){a.card-attachment{flex-direction:column}a.card-attachment img{width:100%}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { 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: "pipe", type: BantaTrustResourceUrlPipe, name: "trustResourceUrl" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaAttachmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'banta-attachment', template: "<button type=\"button\" (click)=\"remove()\" mat-mini-fab color=\"primary\" class=\"remove-button\" *ngIf=\"editing\">\r\n    <mat-icon>close</mat-icon>\r\n</button>\r\n\r\n<ng-container *ngIf=\"isError\">\r\n    <mat-icon class=\"error\">close</mat-icon>\r\n    <em class=\"error\">{{theErrorMessage}}</em>\r\n</ng-container>\r\n<ng-container *ngIf=\"!isError\">\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n        <em>{{loadingMessage}}</em>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!isLoading && attachment\">\r\n        <iframe *ngIf=\"hasFrame\"\r\n            sandbox=\"allow-scripts allow-popups allow-same-origin allow-presentation\" \r\n            [src]=\"frameUrl | trustResourceUrl\"></iframe>\r\n        <a *ngIf=\"attachment.type === 'card'\" class=\"card-attachment\" [href]=\"attachment.url\" target=\"_blank\" [class.has-image]=\"attachment.card.image\">\r\n            <img \r\n                *ngIf=\"attachment.card.image\"\r\n                class=\"thumbnail\" \r\n                [src]=\"attachment.card.image\"\r\n                />\r\n            <div class=\"description\">\r\n                <h1>{{attachment.card.title}}</h1>\r\n                <div class=\"summary\">\r\n                    {{attachment.card.description}}\r\n                </div>\r\n                <cite>{{attachment.card.url}}</cite>\r\n            </div>\r\n        </a>\r\n        <a class=\"image-attachment\" *ngIf=\"isImageAttachment\" href=\"javascript:;\" (click)=\"activate()\">\r\n            <img [src]=\"attachment.url\" alt=\"Image Attachment\">\r\n        </a>\r\n        <blockquote *ngIf=\"attachment.type === 'tweet'\" \r\n            class=\"twitter-tweet\">\r\n                <p lang=\"en\" dir=\"ltr\"></p>\r\n                <a [href]=\"attachment.url\"></a>\r\n        </blockquote>\r\n    </ng-container>\r\n</ng-container>", styles: [":host{position:relative;display:block}:host.loading{outline:1px solid #333;padding:1em 0;width:300px;text-align:center}:host.loading mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}a.card-attachment{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919;margin:1em 0}a.card-attachment img{width:250px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}a.card-attachment.has-image h1{font-size:22px}a.card-attachment h1{min-width:0;margin:0 0 .5em;font-size:26px}a.card-attachment cite{min-width:0;opacity:.75;margin-top:1em;display:block;font-size:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}a.card-attachment .description{min-width:0;width:100%}a.card-attachment .summary{overflow-x:hidden;text-overflow:ellipsis}.remove-button{position:absolute;right:10px;top:10px;margin:0;z-index:1}a.image-attachment{width:300px;position:relative;text-align:center}a.image-attachment.with-border{outline:1px solid #333;padding:1em 0}a.image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}a.image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}a.image-attachment .error{color:#b76363}a.image-attachment img{width:300px;border-radius:10px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}iframe{border:none;width:100%;aspect-ratio:16/9}@media (max-width: 700px){a.card-attachment{flex-direction:column}a.card-attachment img{width:100%}}\n"] }]
+            args: [{ selector: 'banta-attachment', template: "<button type=\"button\" (click)=\"remove()\" mat-mini-fab color=\"primary\" class=\"remove-button\" *ngIf=\"editing\">\r\n    <mat-icon>close</mat-icon>\r\n</button>\r\n\r\n<ng-container *ngIf=\"isError\">\r\n    <mat-icon class=\"error\">close</mat-icon>\r\n    <em class=\"error\">{{theErrorMessage}}</em>\r\n</ng-container>\r\n<ng-container *ngIf=\"!isError\">\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n        <em>{{loadingMessage}}</em>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!isLoading && attachment\">\r\n        <iframe *ngIf=\"hasFrame\"\r\n            sandbox=\"allow-scripts allow-popups allow-same-origin allow-presentation\" \r\n            [src]=\"frameUrl | trustResourceUrl\"></iframe>\r\n        <a *ngIf=\"attachment.type === 'card'\" class=\"card-attachment\" [href]=\"attachment.url\" target=\"_blank\" [class.has-image]=\"attachment.card.image\">\r\n            <img \r\n                *ngIf=\"attachment.card.image\"\r\n                class=\"thumbnail\" \r\n                [src]=\"attachment.card.image\"\r\n                />\r\n            <div class=\"description\">\r\n                <h1>{{attachment.card.title}}</h1>\r\n                <div class=\"summary\">\r\n                    {{attachment.card.description}}\r\n                </div>\r\n                <cite>{{attachment.card.url}}</cite>\r\n            </div>\r\n        </a>\r\n        <a class=\"image-attachment\" *ngIf=\"isImageAttachment && attachment.url\" href=\"javascript:;\" (click)=\"activate()\">\r\n            <img [src]=\"attachment.url\" alt=\"Image Attachment\">\r\n        </a>\r\n        <blockquote *ngIf=\"attachment.type === 'tweet'\" \r\n            class=\"twitter-tweet\">\r\n                <p lang=\"en\" dir=\"ltr\"></p>\r\n                <a [href]=\"attachment.url\"></a>\r\n        </blockquote>\r\n    </ng-container>\r\n</ng-container>", styles: [":host{position:relative;display:block}:host.loading{outline:1px solid #333;padding:1em 0;width:300px;text-align:center}:host.loading mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}a.card-attachment{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919;margin:1em 0}a.card-attachment img{width:250px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}a.card-attachment.has-image h1{font-size:22px}a.card-attachment h1{min-width:0;margin:0 0 .5em;font-size:26px}a.card-attachment cite{min-width:0;opacity:.75;margin-top:1em;display:block;font-size:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}a.card-attachment .description{min-width:0;width:100%}a.card-attachment .summary{overflow-x:hidden;text-overflow:ellipsis}.remove-button{position:absolute;right:10px;top:10px;margin:0;z-index:1}a.image-attachment{width:300px;position:relative;text-align:center}a.image-attachment.with-border{outline:1px solid #333;padding:1em 0}a.image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}a.image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}a.image-attachment .error{color:#b76363}a.image-attachment img{width:300px;border-radius:10px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}iframe{border:none;width:100%;aspect-ratio:16/9}@media (max-width: 700px){a.card-attachment{flex-direction:column}a.card-attachment img{width:100%}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { attachment: [{
                 type: Input
             }], loading: [{
@@ -533,6 +533,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
+const BANTA_SDK_OPTIONS = 'BANTA_SDK_OPTIONS';
+
 const EMOJIS = {
     "grinning": {
         "keywords": ["face", "smile", "happy", "joy", ":D", "grin"],
@@ -7042,8 +7044,9 @@ const EMOJIS = {
 };
 
 class EmojiSelectorPanelComponent {
-    constructor(sanitizer) {
+    constructor(sanitizer, sdkOptions) {
         this.sanitizer = sanitizer;
+        this.sdkOptions = sdkOptions;
         this.activeCategory = 'people';
         this.searchResults = [];
         this.searchVisible = false;
@@ -7081,6 +7084,9 @@ class EmojiSelectorPanelComponent {
             this.searchVisible = true;
         });
     }
+    get emojiUrl() {
+        return this.sdkOptions?.emojiUrl ?? 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/';
+    }
     ngOnInit() {
         let cats = {};
         let categoryIcons = {
@@ -7103,18 +7109,23 @@ class EmojiSelectorPanelComponent {
                     emojis: []
                 };
             }
-            emoji.html = this.sanitizer.bypassSecurityTrustHtml(twemoji.parse(emoji.char || '', { base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' }));
+            emoji.html = this.sanitizer.bypassSecurityTrustHtml(twemoji.parse(emoji.char || '', { base: this.emojiUrl }));
             cats[emoji.category].emojis.push(emoji);
         }
         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.DomSanitizer }], 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.DomSanitizer }]; }, propDecorators: { selected: [{
+        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [BANTA_SDK_OPTIONS]
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { selected: [{
                 type: Output
             }] } });
 
@@ -10196,8 +10207,6 @@ __decorate([
     RpcEvent()
 ], ChatSource.prototype, "onChatMessage", null);
 
-const BANTA_SDK_OPTIONS = 'BANTA_SDK_OPTIONS';
-
 class ChatBackend extends ChatBackendBase {
     constructor(options) {
         super();