@rtsee/ngx 0.0.88 → 0.0.89

package/dist/ngx/fesm2022/rtsee-ngx.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, ViewChild, Directive, DOCUMENT, HostListener, Inject, EventEmitter, Output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { Injectable, Input, Component, ViewChild, Directive, DOCUMENT, HostListener, Inject, EventEmitter, Output, output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/common';
 import { NgClass, NgIf, NgForOf, SlicePipe, NgStyle, NgOptimizedImage, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -52,6 +52,9 @@ import { RTSeeRoutesList } from '@rtsee/factory';
 import { Avatar } from 'primeng/avatar';
 import { Image } from 'primeng/image';
 import { Tooltip } from 'primeng/tooltip';
+import { PanelMenu } from 'primeng/panelmenu';
+import { RecursiveSelect } from '@rtsee/utilities-ui';
+import { Menu } from 'primeng/menu';
 import { Password } from 'primeng/password';
 import { Checkbox } from 'primeng/checkbox';
 import { AutosizeModule } from 'ngx-autosize';
@@ -1586,6 +1589,7 @@ class JoinCallComponent {
         this.messageService = messageService;
         this.recentlyCopied = false;
         this.window = window;
+        this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
     }
     copyClicked() {
         this.messageService.add({
@@ -1599,7 +1603,7 @@ class JoinCallComponent {
         }, 2000);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: JoinCallComponent, deps: [{ token: i1$2.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: JoinCallComponent, isStandalone: true, selector: "rtsee-join-call", inputs: { presentation: "presentation", room: "room" }, providers: [MessageService], ngImport: i0, template: "<div class=\"rtsee-join-call\">\n  <div class=\"rtsee-join-call-button\">\n    <p-button label=\"Start A Call\"\n              (click)=\"presentation.emitJoinRoomCallEvent()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-share-call-link\">\n    <div class=\"rtsee-share-call-explain-section\">\n      <div class=\"rtsee-share-call-explain-section-icon\">\n        <span class=\"pi pi-link rtsee-link-icon\"></span>\n      </div>\n      <div class=\"rtsee-share-call-explain-section-text\">\n        <span>Anyone can join your storytelling session using this link.</span>\n      </div>\n    </div>\n    <div class=\"rtsee-share-call-link-section\">\n      <p-toast position=\"bottom-center\" />\n      <p-button [icon]=\"recentlyCopied ? 'pi pi-check' : 'pi pi-copy'\"\n                severity=\"secondary\"\n                class=\"rtsee-share-call-link-copy-btn\"\n                [cdkCopyToClipboard]=\"window.location.origin + '?room_id=' + room.id\"\n                (cdkCopyToClipboardCopied)=\"copyClicked()\"\n      ></p-button>\n      <p-message severity=\"info\"\n                 class=\"rtsee-share-call-link-text\"\n      >{{ window.location.origin + '?room_id=' + room.id }}</p-message>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: JoinCallComponent, isStandalone: true, selector: "rtsee-join-call", inputs: { presentation: "presentation", room: "room" }, providers: [MessageService], ngImport: i0, template: "<div class=\"rtsee-join-call\">\n  <div class=\"rtsee-join-call-button\">\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.START_A_CALL_BUTTON]\"\n              (click)=\"presentation.emitJoinRoomCallEvent()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-share-call-link\">\n    <div class=\"rtsee-share-call-explain-section\">\n      <div class=\"rtsee-share-call-explain-section-icon\">\n        <span class=\"pi pi-link rtsee-link-icon\"></span>\n      </div>\n      <div class=\"rtsee-share-call-explain-section-text\">\n        <span>Anyone can join your storytelling session using this link.</span>\n      </div>\n    </div>\n    <div class=\"rtsee-share-call-link-section\">\n      <p-toast position=\"bottom-center\" />\n      <p-button [icon]=\"recentlyCopied ? 'pi pi-check' : 'pi pi-copy'\"\n                severity=\"secondary\"\n                class=\"rtsee-share-call-link-copy-btn\"\n                [cdkCopyToClipboard]=\"window.location.origin + '?room_id=' + room.id\"\n                (cdkCopyToClipboardCopied)=\"copyClicked()\"\n      ></p-button>\n      <p-message severity=\"info\"\n                 class=\"rtsee-share-call-link-text\"\n      >{{ window.location.origin + '?room_id=' + room.id }}</p-message>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: JoinCallComponent, decorators: [{
             type: Component,
@@ -1608,7 +1612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         CdkCopyToClipboard,
                         Message,
                         Toast
-                    ], providers: [MessageService], template: "<div class=\"rtsee-join-call\">\n  <div class=\"rtsee-join-call-button\">\n    <p-button label=\"Start A Call\"\n              (click)=\"presentation.emitJoinRoomCallEvent()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-share-call-link\">\n    <div class=\"rtsee-share-call-explain-section\">\n      <div class=\"rtsee-share-call-explain-section-icon\">\n        <span class=\"pi pi-link rtsee-link-icon\"></span>\n      </div>\n      <div class=\"rtsee-share-call-explain-section-text\">\n        <span>Anyone can join your storytelling session using this link.</span>\n      </div>\n    </div>\n    <div class=\"rtsee-share-call-link-section\">\n      <p-toast position=\"bottom-center\" />\n      <p-button [icon]=\"recentlyCopied ? 'pi pi-check' : 'pi pi-copy'\"\n                severity=\"secondary\"\n                class=\"rtsee-share-call-link-copy-btn\"\n                [cdkCopyToClipboard]=\"window.location.origin + '?room_id=' + room.id\"\n                (cdkCopyToClipboardCopied)=\"copyClicked()\"\n      ></p-button>\n      <p-message severity=\"info\"\n                 class=\"rtsee-share-call-link-text\"\n      >{{ window.location.origin + '?room_id=' + room.id }}</p-message>\n    </div>\n  </div>\n</div>\n" }]
+                    ], providers: [MessageService], template: "<div class=\"rtsee-join-call\">\n  <div class=\"rtsee-join-call-button\">\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.START_A_CALL_BUTTON]\"\n              (click)=\"presentation.emitJoinRoomCallEvent()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-share-call-link\">\n    <div class=\"rtsee-share-call-explain-section\">\n      <div class=\"rtsee-share-call-explain-section-icon\">\n        <span class=\"pi pi-link rtsee-link-icon\"></span>\n      </div>\n      <div class=\"rtsee-share-call-explain-section-text\">\n        <span>Anyone can join your storytelling session using this link.</span>\n      </div>\n    </div>\n    <div class=\"rtsee-share-call-link-section\">\n      <p-toast position=\"bottom-center\" />\n      <p-button [icon]=\"recentlyCopied ? 'pi pi-check' : 'pi pi-copy'\"\n                severity=\"secondary\"\n                class=\"rtsee-share-call-link-copy-btn\"\n                [cdkCopyToClipboard]=\"window.location.origin + '?room_id=' + room.id\"\n                (cdkCopyToClipboardCopied)=\"copyClicked()\"\n      ></p-button>\n      <p-message severity=\"info\"\n                 class=\"rtsee-share-call-link-text\"\n      >{{ window.location.origin + '?room_id=' + room.id }}</p-message>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$2.MessageService }], propDecorators: { presentation: [{
                 type: Input
             }], room: [{
@@ -1620,7 +1624,7 @@ class PresentationHeaderComponent {
         this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n\n  @if (presentation.activeRoom && !presentation.activeStory) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: JoinCallComponent, selector: "rtsee-join-call", inputs: ["presentation", "room"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\n  }\n\n\n  @if (presentation.activeRoom && !presentation.activeStory) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</header>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: JoinCallComponent, selector: "rtsee-join-call", inputs: ["presentation", "room"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, decorators: [{
             type: Component,
@@ -1629,11 +1633,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         NgClass,
                         Chip,
                         JoinCallComponent
-                    ], standalone: true, template: "<div class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n\n  @if (presentation.activeRoom && !presentation.activeStory) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</div>\n" }]
+                    ], standalone: true, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\n  }\n\n\n  @if (presentation.activeRoom && !presentation.activeStory) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-arrow-left rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-ellipsis-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen) {\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</header>\n" }]
         }], propDecorators: { presentation: [{
                 type: Input
             }] } });
 
+class RatingComponent {
+    constructor() {
+        this.stars = [];
+    }
+    ngOnInit() {
+        this.initStars();
+    }
+    initStars() {
+        const stars = [];
+        const full = Math.floor(this.rating.value);
+        const hasHalf = this.rating.value - full >= 0.25;
+        for (let i = 0; i < full; i++) {
+            stars.push('full');
+        }
+        if (hasHalf) {
+            stars.push('half');
+        }
+        while (stars.length < this.rating.max) {
+            stars.push('empty');
+        }
+        this.stars = stars;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RatingComponent, isStandalone: true, selector: "rtsee-rating", inputs: { rating: "rating" }, ngImport: i0, template: "<div class=\"rtsee-rating\">\n  @for (star of stars; track $index) {\n    <span class=\"rtsee-rating-star\" [ngClass]=\"{\n      'rtsee-rating-star-full': star === 'full',\n      'rtsee-rating-star-half': star === 'half',\n      'rtsee-rating-star-empty': star === 'empty',\n    }\">\u2605</span>\n  }\n  <span class=\"rtsee-rating-number\">{{ rating.value }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-rating', imports: [
+                        NgClass
+                    ], template: "<div class=\"rtsee-rating\">\n  @for (star of stars; track $index) {\n    <span class=\"rtsee-rating-star\" [ngClass]=\"{\n      'rtsee-rating-star-full': star === 'full',\n      'rtsee-rating-star-half': star === 'half',\n      'rtsee-rating-star-empty': star === 'empty',\n    }\">\u2605</span>\n  }\n  <span class=\"rtsee-rating-number\">{{ rating.value }}</span>\n</div>\n" }]
+        }], propDecorators: { rating: [{
+                type: Input
+            }] } });
+
 class StoryThumbnailComponent {
     constructor() {
         this.progressPercent = 0;
@@ -1646,13 +1684,13 @@ class StoryThumbnailComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryThumbnailComponent, isStandalone: true, selector: "rtsee-story-thumbnail", inputs: { story: "story" }, ngImport: i0, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\"\n       [ngStyle]=\"{'background-image': 'url(' + story.imageUrl + ')'}\"\n  >\n    @if (story.preselectedSlideNumber) {\n      <div class=\"rtsee-story-thumbnail-progress-bar-container\">\n        <div class=\"rtsee-story-thumbnail-progress-bar\">\n          <div class=\"rtsee-story-thumbnail-progress-bar-inner\"\n               [style.width]=\"progressPercent + '%'\"\n          ></div>\n        </div>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <div class=\"rtsee-story-thumbnail-title-container\">\n      <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    </div>\n    @if (story.averageReadTime) {\n      <div class=\"rtsee-story-thumbnail-info-container\">\n        <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n        <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryThumbnailComponent, isStandalone: true, selector: "rtsee-story-thumbnail", inputs: { story: "story" }, ngImport: i0, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\">\n    <div class=\"rtsee-story-thumbnail-image\">\n      <img [src]=\"story.imageUrl\"\n           [alt]=\"story.name\"\n           class=\"rtsee-story-thumbnail-image\"\n      />\n    </div>\n    @if (story.preselectedSlideNumber) {\n      <div class=\"rtsee-story-thumbnail-progress-bar-container\">\n        <div class=\"rtsee-story-thumbnail-progress-bar\">\n          <div class=\"rtsee-story-thumbnail-progress-bar-inner\"\n               [style.width]=\"progressPercent + '%'\"\n          ></div>\n        </div>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    <div class=\"rtsee-story-thumbnail-body-meta\">\n      <rtsee-rating [rating]=\"{max: 5, value: 3.5}\"></rtsee-rating>\n      @if (story.averageReadTime) {\n        <span class=\"rtsee-story-thumbnail-time-container\">\n          <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n          <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n        </span>\n        <span class=\"rtsee-story-thumbnail-label-container\">{{\"7\"}}+</span>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: RatingComponent, selector: "rtsee-rating", inputs: ["rating"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryThumbnailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-story-thumbnail', imports: [
-                        NgStyle
-                    ], standalone: true, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\"\n       [ngStyle]=\"{'background-image': 'url(' + story.imageUrl + ')'}\"\n  >\n    @if (story.preselectedSlideNumber) {\n      <div class=\"rtsee-story-thumbnail-progress-bar-container\">\n        <div class=\"rtsee-story-thumbnail-progress-bar\">\n          <div class=\"rtsee-story-thumbnail-progress-bar-inner\"\n               [style.width]=\"progressPercent + '%'\"\n          ></div>\n        </div>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <div class=\"rtsee-story-thumbnail-title-container\">\n      <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    </div>\n    @if (story.averageReadTime) {\n      <div class=\"rtsee-story-thumbnail-info-container\">\n        <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n        <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n      </div>\n    }\n  </div>\n</div>\n" }]
+                        RatingComponent
+                    ], standalone: true, template: "<div class=\"rtsee-story-thumbnail\">\n  <div class=\"rtsee-story-thumbnail-image-container\">\n    <div class=\"rtsee-story-thumbnail-image\">\n      <img [src]=\"story.imageUrl\"\n           [alt]=\"story.name\"\n           class=\"rtsee-story-thumbnail-image\"\n      />\n    </div>\n    @if (story.preselectedSlideNumber) {\n      <div class=\"rtsee-story-thumbnail-progress-bar-container\">\n        <div class=\"rtsee-story-thumbnail-progress-bar\">\n          <div class=\"rtsee-story-thumbnail-progress-bar-inner\"\n               [style.width]=\"progressPercent + '%'\"\n          ></div>\n        </div>\n      </div>\n    }\n  </div>\n  <div class=\"rtsee-story-thumbnail-body-container\">\n    <h4 class=\"rtsee-story-thumbnail-title\">{{story.name}}</h4>\n    <div class=\"rtsee-story-thumbnail-body-meta\">\n      <rtsee-rating [rating]=\"{max: 5, value: 3.5}\"></rtsee-rating>\n      @if (story.averageReadTime) {\n        <span class=\"rtsee-story-thumbnail-time-container\">\n          <span class=\"rtsee-story-thumbnail-info-time-icon material-icons-outlined\">schedule</span>\n          <span class=\"rtsee-story-thumbnail-info-read-time\">{{ Math.ceil(story.averageReadTime / 60) }} \u0445\u0432</span>\n        </span>\n        <span class=\"rtsee-story-thumbnail-label-container\">{{\"7\"}}+</span>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { story: [{
                 type: Input
             }] } });
@@ -2289,7 +2327,7 @@ class PresentationComponent {
         this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <p class=\"rtsee-presentation-category-name\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</span>\n        </p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id, story.preselectedSlideNumber || undefined)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <p class=\"rtsee-presentation-category-name\">{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story", "settings"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }, { kind: "component", type: PresentationSettingsComponent, selector: "rtsee-presentation-settings", inputs: ["settings", "presentation"] }, { kind: "component", type: StoryDetailsComponent, selector: "rtsee-story-details", inputs: ["story", "presentation", "messenger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</h2>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id, story.preselectedSlideNumber || undefined)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{ category.name }}</h2>\n          <span class=\"rtsee-presentation-category-description\">{{ category.description }}</span>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story", "settings"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }, { kind: "component", type: PresentationSettingsComponent, selector: "rtsee-presentation-settings", inputs: ["settings", "presentation"] }, { kind: "component", type: StoryDetailsComponent, selector: "rtsee-story-details", inputs: ["story", "presentation", "messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, decorators: [{
             type: Component,
@@ -2302,7 +2340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         PresentationsDashboardComponent,
                         PresentationSettingsComponent,
                         StoryDetailsComponent
-                    ], standalone: true, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <p class=\"rtsee-presentation-category-name\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</span>\n        </p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id, story.preselectedSlideNumber || undefined)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <p class=\"rtsee-presentation-category-name\">{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n\n      @if (presentation.activeSessionsStories.length) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{presentation.labels[RTSeeTextLabelKeys.CONTINUE_SESSIONS_LABEL]}}</h2>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of presentation.activeSessionsStories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id, story.preselectedSlideNumber || undefined)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n\n      @for (category of presentation.categories; track category.id) {\n        <div class=\"rtsee-presentation-category-header\">\n          <h2 class=\"rtsee-presentation-category-name\">{{ category.name }}</h2>\n          <span class=\"rtsee-presentation-category-description\">{{ category.description }}</span>\n        </div>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory && !presentation.isDashboardOpen) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails && !presentation.isDashboardOpen) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { presentation: [{
                 type: Input
             }], messenger: [{
@@ -2427,6 +2465,664 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+class RtseeTagsAccordionMenuComponent {
+    constructor() {
+        this.items = [];
+        this.onTagClicked = output();
+    }
+    ngOnInit() {
+        this.manageTags.loadTags()
+            .then(() => {
+            this.items = this.tagsToItems(this.manageTags.tags);
+            console.log(this.items);
+        }).catch((err) => {
+            console.log(err);
+        });
+    }
+    tagsToItems(tags) {
+        return tags.map((t) => {
+            return {
+                label: t.name,
+                icon: t.iconClassName || undefined,
+                items: t.children ? this.tagsToItems(t.children) : undefined,
+                isSelected: false,
+                command: () => {
+                    this.onTagClicked.emit(t);
+                }
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeTagsAccordionMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: RtseeTagsAccordionMenuComponent, isStandalone: true, selector: "rtsee-tags-accordion", inputs: { manageTags: "manageTags" }, outputs: { onTagClicked: "onTagClicked" }, ngImport: i0, template: "<div class=\"rtsee-tags-accordion\">\n  <p-panel-menu [model]=\"items\"/>\n</div>\n", dependencies: [{ kind: "component", type: PanelMenu, selector: "p-panelMenu, p-panelmenu, p-panel-menu", inputs: ["model", "styleClass", "multiple", "transitionOptions", "id", "tabindex"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeTagsAccordionMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-tags-accordion', imports: [
+                        PanelMenu
+                    ], template: "<div class=\"rtsee-tags-accordion\">\n  <p-panel-menu [model]=\"items\"/>\n</div>\n" }]
+        }], propDecorators: { manageTags: [{
+                type: Input
+            }] } });
+
+class RecursiveSelectComponent {
+    constructor() {
+        this.value = undefined;
+    }
+    ngOnInit() {
+        this.value = this.selectModel.value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RecursiveSelectComponent, isStandalone: true, selector: "rtsee-recursive-select", inputs: { selectModel: "selectModel" }, ngImport: i0, template: "<div class=\"rtsee-recursive-select\">\n  @for (item of selectModel.selectionHierarchy; track item.level) {\n    <div class=\"rtsee-form-field-container\">\n      <p-select [options]=\"item.children\"\n                [(ngModel)]=\"item.selected\"\n                [optionLabel]=\"'label'\"\n                [placeholder]=\"selectModel.placeholderValue\"\n                (onChange)=\"selectModel.onSelectionChanged(item.selected, item.level)\"\n                class=\"rtsee-form-field\"\n      />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-recursive-select', imports: [
+                        Select,
+                        FormsModule
+                    ], template: "<div class=\"rtsee-recursive-select\">\n  @for (item of selectModel.selectionHierarchy; track item.level) {\n    <div class=\"rtsee-form-field-container\">\n      <p-select [options]=\"item.children\"\n                [(ngModel)]=\"item.selected\"\n                [optionLabel]=\"'label'\"\n                [placeholder]=\"selectModel.placeholderValue\"\n                (onChange)=\"selectModel.onSelectionChanged(item.selected, item.level)\"\n                class=\"rtsee-form-field\"\n      />\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { selectModel: [{
+                type: Input
+            }] } });
+
+class RtseeTagManageComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.tagsRecursiveSelect = null;
+        this.tagForm = this.getTagForm();
+    }
+    ngOnInit() {
+        if (!this.manageTags.activeTag) {
+            this.manageTags.setBlankActiveTag();
+        }
+        if (!this.manageTags.activeTag) {
+            throw new Error(`Active tag should be selected`);
+        }
+        this.presetFields(this.manageTags.activeTag);
+    }
+    async presetParent() {
+        console.log("presetParent", this.manageTags.activeTag);
+        if (!this.manageTags.activeTag) {
+            return;
+        }
+        const selectOptions = {
+            items: this.manageTags.tags,
+            placeholderValue: 'Select A tag',
+            getChildren: (tag) => {
+                return tag.children || [];
+            },
+            getLabel: (tag) => {
+                return tag.name;
+            },
+            getRemoteParent: (tag) => {
+                if (!tag.parentId) {
+                    return Promise.resolve(null);
+                }
+                return this.manageTags.getTag(tag.parentId);
+            }
+        };
+        console.log('active tag', this.manageTags.activeTag);
+        if (this.manageTags.activeTag.parentId) {
+            selectOptions.value = await this.manageTags.getTag(this.manageTags.activeTag.parentId);
+        }
+        this.tagsRecursiveSelect = new RecursiveSelect(selectOptions);
+    }
+    async submit() {
+        if (this.tagForm.invalid || !this.manageTags.peer.rtseeAppId || !this.manageTags.activeTag) {
+            console.log('Form Invalid!');
+            return;
+        }
+        const parentId = this.tagsRecursiveSelect?.value?.id;
+        const tagParams = {
+            name: this.nameField.getRawValue(),
+            description: this.descriptionField.getRawValue(),
+            applicationId: this.manageTags.peer.rtseeAppId,
+            parentId
+        };
+        if (this.manageTags.activeTag.id) {
+            const options = {
+                id: this.manageTags.activeTag.id,
+                ...tagParams
+            };
+            await this.manageTags.updateTag(options);
+        }
+        else {
+            await this.manageTags.createTag(tagParams);
+        }
+    }
+    cancel() {
+        console.log('Cancel');
+    }
+    presetFields(tag) {
+        this.nameField.setValue(tag.name);
+        this.descriptionField.setValue(tag.description || '');
+        this.iconClassField.setValue(tag.iconClassName || '');
+        console.log('preset fields');
+        void this.presetParent();
+    }
+    getTagForm() {
+        return this.formBuilder.group({
+            name: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(3),
+                    Validators.maxLength(131)
+                ]
+            }),
+            description: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(6),
+                    Validators.maxLength(244)
+                ]
+            }),
+            iconClass: this.formBuilder.control('', {
+                validators: [
+                    Validators.minLength(1),
+                    Validators.maxLength(244)
+                ]
+            }),
+            value: this.formBuilder.control('', {
+                validators: [
+                    Validators.minLength(1),
+                    Validators.maxLength(244)
+                ]
+            })
+        });
+    }
+    get nameField() {
+        return this.tagForm.get('name');
+    }
+    get descriptionField() {
+        return this.tagForm.get('description');
+    }
+    get iconClassField() {
+        return this.tagForm.get('iconClass');
+    }
+    get valueField() {
+        return this.tagForm.get('value');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeTagManageComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeTagManageComponent, isStandalone: true, selector: "rtsee-rtsee-tag-manage", inputs: { manageTags: "manageTags" }, ngImport: i0, template: "<div class=\"rtsee-manage-tag\">\n  <div class=\"rtsee-manage-tag-info rtsee-form-container\">\n    <form class=\"rtsee-tag-form rtsee-form\"\n          [formGroup]=\"tagForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-label-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-story-label-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      @if (tagsRecursiveSelect && manageTags.activeTag) {\n        <div class=\"rtsee-select-tag-container\">\n          <p-divider></p-divider>\n          <p>Parent Tag</p>\n          <rtsee-recursive-select [selectModel]=\"tagsRecursiveSelect\"\n          ></rtsee-recursive-select>\n          <p-divider></p-divider>\n        </div>\n      }\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n          <textarea [formControl]=\"descriptionField\"\n                    id=\"rtsee-story-label-description-field\"\n                    class=\"rtsee-form-field\"\n                    rows=\"3\"\n                    cols=\"30\"\n                    pTextarea\n                    [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n          ></textarea>\n            <label for=\"rtsee-story-label-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (descriptionField.hasError('required') && descriptionField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-label-symbol-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"iconClassField\"\n                   [class.p-invalid]=\"iconClassField.invalid && iconClassField.touched\"\n            />\n            <label for=\"rtsee-story-label-symbol-field\">Symbol</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (iconClassField.hasError('required') && iconClassField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Symbol is required, pick a smile, dummy</p-message>\n        }\n      </div>\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageTags.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageTags.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: RecursiveSelectComponent, selector: "rtsee-recursive-select", inputs: ["selectModel"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeTagManageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-rtsee-tag-manage', imports: [
+                        Button,
+                        FloatLabel,
+                        FormsModule,
+                        InputGroup,
+                        InputText,
+                        Message,
+                        Textarea,
+                        ReactiveFormsModule,
+                        RecursiveSelectComponent,
+                        Divider
+                    ], template: "<div class=\"rtsee-manage-tag\">\n  <div class=\"rtsee-manage-tag-info rtsee-form-container\">\n    <form class=\"rtsee-tag-form rtsee-form\"\n          [formGroup]=\"tagForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-label-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-story-label-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      @if (tagsRecursiveSelect && manageTags.activeTag) {\n        <div class=\"rtsee-select-tag-container\">\n          <p-divider></p-divider>\n          <p>Parent Tag</p>\n          <rtsee-recursive-select [selectModel]=\"tagsRecursiveSelect\"\n          ></rtsee-recursive-select>\n          <p-divider></p-divider>\n        </div>\n      }\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n          <textarea [formControl]=\"descriptionField\"\n                    id=\"rtsee-story-label-description-field\"\n                    class=\"rtsee-form-field\"\n                    rows=\"3\"\n                    cols=\"30\"\n                    pTextarea\n                    [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n          ></textarea>\n            <label for=\"rtsee-story-label-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (descriptionField.hasError('required') && descriptionField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-label-symbol-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"iconClassField\"\n                   [class.p-invalid]=\"iconClassField.invalid && iconClassField.touched\"\n            />\n            <label for=\"rtsee-story-label-symbol-field\">Symbol</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (iconClassField.hasError('required') && iconClassField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Symbol is required, pick a smile, dummy</p-message>\n        }\n      </div>\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageTags.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageTags.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageTags: [{
+                type: Input
+            }] } });
+
+class RtseeTagGroupsManageComponent {
+    constructor() {
+        this.items = [];
+        this.selectedTagGroup = undefined;
+        this.onTagGroupClicked = output();
+    }
+    ngOnInit() {
+        this.manageTagGroups.loadTagGroups()
+            .then(() => {
+            this.items = this.tagGroupsToItems(this.manageTagGroups.tagGroups);
+        }).catch((err) => {
+            console.log(err);
+        });
+    }
+    tagGroupsToItems(tagGroups) {
+        console.log("tagGroupsToItems", tagGroups);
+        return tagGroups.map((tg) => {
+            return {
+                label: tg.name,
+                isSelected: false,
+                command: () => {
+                    this.selectedTagGroup = tg;
+                    this.onTagGroupClicked.emit(tg);
+                }
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeTagGroupsManageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: RtseeTagGroupsManageComponent, isStandalone: true, selector: "rtsee-rtsee-tag-groups-manage", inputs: { manageTagGroups: "manageTagGroups" }, outputs: { onTagGroupClicked: "onTagGroupClicked" }, ngImport: i0, template: "<div class=\"rtsee-manage-tag-groups\">\n  <p-menu [model]=\"items\" />\n</div>\n", dependencies: [{ kind: "component", type: Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeTagGroupsManageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-rtsee-tag-groups-manage', imports: [
+                        Menu
+                    ], template: "<div class=\"rtsee-manage-tag-groups\">\n  <p-menu [model]=\"items\" />\n</div>\n" }]
+        }], propDecorators: { manageTagGroups: [{
+                type: Input
+            }] } });
+
+class RtseeTagGroupManageComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.tagGroupForm = this.getTagGroupForm();
+    }
+    ngOnInit() {
+        if (!this.manageTagGroups.activeTagGroup) {
+            this.manageTagGroups.setBlankActiveTag();
+        }
+        if (!this.manageTagGroups.activeTagGroup) {
+            throw new Error(`Active tagGroup should be selected`);
+        }
+        this.presetFields(this.manageTagGroups.activeTagGroup);
+        void this.manageTagGroups.initMultiselect();
+    }
+    async submit() {
+        if (!this.manageTagGroups.activeTagGroup) {
+            throw new Error(`Active tagGroup should be selected`);
+        }
+        if (this.tagGroupForm.invalid || !this.manageTagGroups.peer.rtseeAppId) {
+            console.log('Form Invalid!');
+            return;
+        }
+        const tagGroupParams = {
+            name: this.nameField.getRawValue(),
+            description: this.descriptionField.getRawValue(),
+            applicationId: this.manageTagGroups.peer.rtseeAppId
+        };
+        if (this.manageTagGroups.activeTagGroup.id) {
+            await this.manageTagGroups.updateTagGroup({
+                ...tagGroupParams,
+                id: this.manageTagGroups.activeTagGroup.id
+            });
+        }
+        else {
+            await this.manageTagGroups.createTagGroup(tagGroupParams);
+        }
+    }
+    cancel() {
+        console.log('Cancel');
+    }
+    presetFields(tagGroup) {
+        this.nameField.setValue(tagGroup.name);
+        this.descriptionField.setValue(tagGroup.description || '');
+    }
+    getTagGroupForm() {
+        return this.formBuilder.group({
+            name: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(3),
+                    Validators.maxLength(131)
+                ]
+            }),
+            description: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(6),
+                    Validators.maxLength(244)
+                ]
+            })
+        });
+    }
+    get nameField() {
+        return this.tagGroupForm.get('name');
+    }
+    get descriptionField() {
+        return this.tagGroupForm.get('description');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeTagGroupManageComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeTagGroupManageComponent, isStandalone: true, selector: "rtsee-rtsee-tag-group-manage", inputs: { manageTagGroups: "manageTagGroups" }, ngImport: i0, template: "<div class=\"rtsee-manage-tag-group\">\n  <div class=\"rtsee-manage-tag-group-info rtsee-form-container\">\n    <form class=\"rtsee-tag-form rtsee-form\"\n          [formGroup]=\"tagGroupForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-label-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-story-label-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n          <textarea [formControl]=\"descriptionField\"\n                    id=\"rtsee-story-label-description-field\"\n                    class=\"rtsee-form-field\"\n                    rows=\"3\"\n                    cols=\"30\"\n                    pTextarea\n                    [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n          ></textarea>\n            <label for=\"rtsee-story-label-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n\n        @if (descriptionField.hasError('required') && descriptionField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n\n      @if (manageTagGroups && manageTagGroups.tagsMultiselect) {\n        <div class=\"rtsee-form-field-container\">\n          <rtsee-autocomplete [config]=\"manageTagGroups.tagsMultiselect\"></rtsee-autocomplete>\n        </div>\n      }\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageTagGroups.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageTagGroups.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeTagGroupManageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-rtsee-tag-group-manage', imports: [
+                        Button,
+                        FloatLabel,
+                        InputGroup,
+                        InputText,
+                        Message,
+                        ReactiveFormsModule,
+                        Textarea,
+                        AutocompleteComponent
+                    ], template: "<div class=\"rtsee-manage-tag-group\">\n  <div class=\"rtsee-manage-tag-group-info rtsee-form-container\">\n    <form class=\"rtsee-tag-form rtsee-form\"\n          [formGroup]=\"tagGroupForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-story-label-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-story-label-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n          <textarea [formControl]=\"descriptionField\"\n                    id=\"rtsee-story-label-description-field\"\n                    class=\"rtsee-form-field\"\n                    rows=\"3\"\n                    cols=\"30\"\n                    pTextarea\n                    [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n          ></textarea>\n            <label for=\"rtsee-story-label-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n\n        @if (descriptionField.hasError('required') && descriptionField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n\n      @if (manageTagGroups && manageTagGroups.tagsMultiselect) {\n        <div class=\"rtsee-form-field-container\">\n          <rtsee-autocomplete [config]=\"manageTagGroups.tagsMultiselect\"></rtsee-autocomplete>\n        </div>\n      }\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageTagGroups.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageTagGroups.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageTagGroups: [{
+                type: Input
+            }] } });
+
+class EntitiesConfigurationsListComponent {
+    constructor() {
+        this.items = [];
+        this.onConfigurationClicked = output();
+    }
+    ngOnInit() {
+        this.manageEntityConfigurations.loadEntityConfigurations()
+            .then(() => {
+            this.items = this.configurationsToItems(this.manageEntityConfigurations.entityConfigurations);
+        }).catch((err) => {
+            console.log(err);
+        });
+    }
+    configurationsToItems(entityConfigurations) {
+        console.log("entityConfigsToItems", entityConfigurations);
+        return entityConfigurations.map((ec) => {
+            return {
+                label: ec.name,
+                isSelected: false,
+                command: () => {
+                    this.selectedEntityConfiguration = ec;
+                    this.onConfigurationClicked.emit(ec);
+                }
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EntitiesConfigurationsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: EntitiesConfigurationsListComponent, isStandalone: true, selector: "rtsee-entities-configurations-list", inputs: { manageEntityConfigurations: "manageEntityConfigurations" }, outputs: { onConfigurationClicked: "onConfigurationClicked" }, ngImport: i0, template: "<div class=\"rtsee-entities-configurations-list\">\n  <p-menu [model]=\"items\" />\n</div>\n", dependencies: [{ kind: "component", type: Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EntitiesConfigurationsListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-entities-configurations-list', imports: [
+                        Menu
+                    ], template: "<div class=\"rtsee-entities-configurations-list\">\n  <p-menu [model]=\"items\" />\n</div>\n" }]
+        }], propDecorators: { manageEntityConfigurations: [{
+                type: Input
+            }] } });
+
+class ManageEntityConfigurationComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.entityConfigurationForm = this.getEntityConfigurationForm();
+    }
+    ngOnInit() {
+        if (!this.manageEntityConfigurations.activeEntityConfiguration) {
+            this.manageEntityConfigurations.setBlankActiveEntityConfiguration();
+        }
+        if (!this.manageEntityConfigurations.activeEntityConfiguration) {
+            throw new Error(`Active entityConfig should be selected`);
+        }
+        this.presetFields(this.manageEntityConfigurations.activeEntityConfiguration);
+        void this.manageEntityConfigurations.initMultiselect();
+    }
+    async submit() {
+        if (!this.manageEntityConfigurations.activeEntityConfiguration) {
+            throw new Error(`Active entityConfiguration should be selected`);
+        }
+        if (this.entityConfigurationForm.invalid || !this.manageEntityConfigurations.peer.rtseeAppId) {
+            console.log('Form Invalid!');
+            return;
+        }
+        const configurationParams = {
+            name: this.nameField.getRawValue(),
+            description: this.descriptionField.getRawValue(),
+            applicationId: this.manageEntityConfigurations.peer.rtseeAppId,
+            taggingEnabled: this.taggingEnabledField.getRawValue(),
+            commentsEnabled: this.commentsEnabledField.getRawValue(),
+            ratingEnabled: this.ratingEnabledField.getRawValue(),
+        };
+        if (this.manageEntityConfigurations.activeEntityConfiguration.id) {
+            await this.manageEntityConfigurations.updateEntityConfiguration({
+                ...configurationParams,
+                id: this.manageEntityConfigurations.activeEntityConfiguration.id
+            });
+        }
+        else {
+            await this.manageEntityConfigurations.createEntityConfiguration(configurationParams);
+        }
+    }
+    cancel() {
+        console.log('Cancel');
+    }
+    presetFields(entityConfiguration) {
+        this.nameField.setValue(entityConfiguration.name);
+        this.descriptionField.setValue(entityConfiguration.description || '');
+        this.taggingEnabledField.setValue(entityConfiguration.taggingEnabled || false);
+        this.commentsEnabledField.setValue(entityConfiguration.commentsEnabled || false);
+        this.ratingEnabledField.setValue(entityConfiguration.ratingEnabled || false);
+    }
+    getEntityConfigurationForm() {
+        return this.formBuilder.group({
+            name: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(3),
+                    Validators.maxLength(131)
+                ]
+            }),
+            description: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(6),
+                    Validators.maxLength(244)
+                ]
+            }),
+            taggingEnabled: this.formBuilder.control(false),
+            commentsEnabled: this.formBuilder.control(false),
+            ratingEnabled: this.formBuilder.control(false)
+        });
+    }
+    get nameField() {
+        return this.entityConfigurationForm.get('name');
+    }
+    get descriptionField() {
+        return this.entityConfigurationForm.get('description');
+    }
+    get taggingEnabledField() {
+        return this.entityConfigurationForm.get('taggingEnabled');
+    }
+    get commentsEnabledField() {
+        return this.entityConfigurationForm.get('commentsEnabled');
+    }
+    get ratingEnabledField() {
+        return this.entityConfigurationForm.get('ratingEnabled');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityConfigurationComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageEntityConfigurationComponent, isStandalone: true, selector: "rtsee-manage-entity-configuration", inputs: { manageEntityConfigurations: "manageEntityConfigurations" }, ngImport: i0, template: "<div class=\"rtsee-manage-entity-configuration\">\n  <div class=\"rtsee-manage-entity-configuration-info rtsee-form-container\">\n    <form class=\"rtsee-entity-configuration-form rtsee-form\"\n          [formGroup]=\"entityConfigurationForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-config-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-entity-config-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n          <textarea [formControl]=\"descriptionField\"\n                    id=\"rtsee-entity-config-description-field\"\n                    class=\"rtsee-form-field\"\n                    rows=\"3\"\n                    cols=\"30\"\n                    pTextarea\n                    [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n          ></textarea>\n            <label for=\"rtsee-entity-config-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n\n        @if (descriptionField.hasError('required') && descriptionField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n\n      @if (manageEntityConfigurations && manageEntityConfigurations.tagGroupsMultiselect) {\n        <div class=\"rtsee-form-field-container\">\n          <rtsee-autocomplete [config]=\"manageEntityConfigurations.tagGroupsMultiselect\"></rtsee-autocomplete>\n        </div>\n      }\n\n      <div class=\"rtsee-form-field-container\">\n        <p>Tagging Enabled</p>\n        <p-toggleswitch name=\"tagging-enabled\" formControlName=\"taggingEnabled\"/>\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p>Comments Enabled</p>\n        <p-toggleswitch name=\"comments-enabled\" formControlName=\"commentsEnabled\"/>\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p>Rating Enabled</p>\n        <p-toggleswitch name=\"ratings-enabled\" formControlName=\"ratingEnabled\"/>\n      </div>\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageEntityConfigurations.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntityConfigurations.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityConfigurationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-entity-configuration', imports: [
+                        AutocompleteComponent,
+                        Button,
+                        FloatLabel,
+                        FormsModule,
+                        InputGroup,
+                        InputText,
+                        Message,
+                        Textarea,
+                        ReactiveFormsModule,
+                        ToggleSwitch
+                    ], template: "<div class=\"rtsee-manage-entity-configuration\">\n  <div class=\"rtsee-manage-entity-configuration-info rtsee-form-container\">\n    <form class=\"rtsee-entity-configuration-form rtsee-form\"\n          [formGroup]=\"entityConfigurationForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-config-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-entity-config-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n          <textarea [formControl]=\"descriptionField\"\n                    id=\"rtsee-entity-config-description-field\"\n                    class=\"rtsee-form-field\"\n                    rows=\"3\"\n                    cols=\"30\"\n                    pTextarea\n                    [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n          ></textarea>\n            <label for=\"rtsee-entity-config-description-field\">Description</label>\n          </p-floatlabel>\n        </p-inputgroup>\n\n        @if (descriptionField.hasError('required') && descriptionField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Description is required</p-message>\n        }\n      </div>\n\n      @if (manageEntityConfigurations && manageEntityConfigurations.tagGroupsMultiselect) {\n        <div class=\"rtsee-form-field-container\">\n          <rtsee-autocomplete [config]=\"manageEntityConfigurations.tagGroupsMultiselect\"></rtsee-autocomplete>\n        </div>\n      }\n\n      <div class=\"rtsee-form-field-container\">\n        <p>Tagging Enabled</p>\n        <p-toggleswitch name=\"tagging-enabled\" formControlName=\"taggingEnabled\"/>\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p>Comments Enabled</p>\n        <p-toggleswitch name=\"comments-enabled\" formControlName=\"commentsEnabled\"/>\n      </div>\n      <div class=\"rtsee-form-field-container\">\n        <p>Rating Enabled</p>\n        <p-toggleswitch name=\"ratings-enabled\" formControlName=\"ratingEnabled\"/>\n      </div>\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageEntityConfigurations.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntityConfigurations.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageEntityConfigurations: [{
+                type: Input
+            }] } });
+
+class EntitiesListComponent {
+    constructor() {
+        this.items = [];
+        this.onEntityClicked = output();
+    }
+    ngOnInit() {
+        this.manageEntities.loadEntities()
+            .then(() => {
+            this.items = this.entitiesToItems(this.manageEntities.entities);
+        }).catch((err) => {
+            console.log(err);
+        });
+    }
+    entitiesToItems(entityConfigurations) {
+        console.log("entityConfigsToItems", entityConfigurations);
+        return entityConfigurations.map((et) => {
+            return {
+                label: et.name,
+                isSelected: false,
+                command: () => {
+                    this.selectedEntity = et;
+                    this.onEntityClicked.emit(et);
+                }
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EntitiesListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: EntitiesListComponent, isStandalone: true, selector: "rtsee-entities-list", inputs: { manageEntities: "manageEntities" }, outputs: { onEntityClicked: "onEntityClicked" }, ngImport: i0, template: "<div class=\"rtsee-entities-list\">\n  <p-menu [model]=\"items\" />\n</div>\n", dependencies: [{ kind: "component", type: Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EntitiesListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-entities-list', imports: [
+                        Menu
+                    ], template: "<div class=\"rtsee-entities-list\">\n  <p-menu [model]=\"items\" />\n</div>\n" }]
+        }], propDecorators: { manageEntities: [{
+                type: Input
+            }] } });
+
+class ManageEntityComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.entityForm = this.getEntityForm();
+    }
+    ngOnInit() {
+        if (!this.manageEntities.activeEntity) {
+            this.manageEntities.setBlankActiveEntity();
+        }
+        if (!this.manageEntities.activeEntity) {
+            throw new Error(`Active entity should be selected`);
+        }
+        this.presetFields(this.manageEntities.activeEntity);
+        void this.manageEntities.initMultiselect();
+    }
+    async submit() {
+        if (!this.manageEntities.activeEntity) {
+            throw new Error(`Active entity should be selected`);
+        }
+        if (this.entityForm.invalid || !this.manageEntities.peer.rtseeAppId) {
+            console.log('Form Invalid!');
+            return;
+        }
+        const entityParams = {
+            name: this.nameField.getRawValue(),
+            applicationId: this.manageEntities.peer.rtseeAppId,
+            configurationId: this.configurationIdField.getRawValue(),
+            imageUrl: this.imageUrlField.getRawValue(),
+            tags: [],
+            tagIds: []
+        };
+        if (this.manageEntities.activeEntity.id) {
+            await this.manageEntities.updateEntity({
+                ...entityParams,
+                id: this.manageEntities.activeEntity.id
+            });
+        }
+        else {
+            await this.manageEntities.createEntity(entityParams);
+        }
+    }
+    configurationInputChanged() {
+        console.log('Configuration Input Changed');
+    }
+    cancel() {
+        console.log('Cancel');
+    }
+    presetFields(entityConfiguration) {
+        this.nameField.setValue(entityConfiguration.name);
+        this.imageUrlField.setValue(entityConfiguration.imageUrl || '');
+        this.configurationIdField.setValue(entityConfiguration.configurationId || '');
+    }
+    getEntityForm() {
+        return this.formBuilder.group({
+            name: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                    Validators.minLength(3),
+                    Validators.maxLength(131)
+                ]
+            }),
+            configurationId: this.formBuilder.control('', {
+                validators: [
+                    Validators.required,
+                ]
+            }),
+            imageUrl: this.formBuilder.control('', {
+                validators: [
+                    Validators.minLength(6),
+                    Validators.maxLength(244)
+                ]
+            })
+        });
+    }
+    get nameField() {
+        return this.entityForm.get('name');
+    }
+    get imageUrlField() {
+        return this.entityForm.get('imageUrl');
+    }
+    get configurationIdField() {
+        return this.entityForm.get('configurationId');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageEntityComponent, isStandalone: true, selector: "rtsee-manage-entity", inputs: { manageEntities: "manageEntities" }, ngImport: i0, template: "<div class=\"rtsee-manage-entity\">\n  <div class=\"rtsee-manage-entity-info rtsee-form-container\">\n    <form class=\"rtsee-entity-form rtsee-form\"\n          [formGroup]=\"entityForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-entity-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      @if (manageEntities.activeEntity) {\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <p-select [options]=\"manageEntities.configurations\"\n                        [formControl]=\"configurationIdField\"\n                        inputId=\"configuration_input\"\n                        optionLabel=\"name\"\n                        optionValue=\"id\"\n                        class=\"rtsee-entity-configuration-input\" />\n              <label for=\"configuration_input\">Entity Configuration</label>\n            </p-floatlabel>\n          </p-inputgroup>\n\n          @if (configurationIdField.hasError('required') && configurationIdField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Entity Configuration is required</p-message>\n          }\n        </div>\n      }\n\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-image-url-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"imageUrlField\"\n                   [class.p-invalid]=\"imageUrlField.invalid && imageUrlField.touched\"\n            />\n            <label for=\"rtsee-entity-image-url-field\">ImageUrl</label>\n          </p-floatlabel>\n        </p-inputgroup>\n      </div>\n\n      @if (manageEntities && manageEntities.tagsMultiselect) {\n        <div class=\"rtsee-form-field-container\">\n          <rtsee-autocomplete [config]=\"manageEntities.tagsMultiselect\"></rtsee-autocomplete>\n        </div>\n      }\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageEntityComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-manage-entity', imports: [
+                        AutocompleteComponent,
+                        Button,
+                        FloatLabel,
+                        InputGroup,
+                        InputText,
+                        Message,
+                        ReactiveFormsModule,
+                        Select,
+                        FormsModule
+                    ], template: "<div class=\"rtsee-manage-entity\">\n  <div class=\"rtsee-manage-entity-info rtsee-form-container\">\n    <form class=\"rtsee-entity-form rtsee-form\"\n          [formGroup]=\"entityForm\" (ngSubmit)=\"submit()\">\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-name-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"nameField\"\n                   [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n            />\n            <label for=\"rtsee-entity-name-field\">Name</label>\n          </p-floatlabel>\n        </p-inputgroup>\n        @if (nameField.hasError('required') && nameField.touched) {\n          <p-message class=\"rtsee-form-field-error-message\"\n                     severity=\"error\"\n                     variant=\"simple\"\n                     size=\"small\"\n          >Name is required</p-message>\n        }\n      </div>\n      @if (manageEntities.activeEntity) {\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <p-select [options]=\"manageEntities.configurations\"\n                        [formControl]=\"configurationIdField\"\n                        inputId=\"configuration_input\"\n                        optionLabel=\"name\"\n                        optionValue=\"id\"\n                        class=\"rtsee-entity-configuration-input\" />\n              <label for=\"configuration_input\">Entity Configuration</label>\n            </p-floatlabel>\n          </p-inputgroup>\n\n          @if (configurationIdField.hasError('required') && configurationIdField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Entity Configuration is required</p-message>\n          }\n        </div>\n      }\n\n      <div class=\"rtsee-form-field-container\">\n        <p-inputgroup>\n          <p-floatlabel variant=\"on\">\n            <input id=\"rtsee-entity-image-url-field\"\n                   class=\"rtsee-form-field\"\n                   pInputText\n                   [formControl]=\"imageUrlField\"\n                   [class.p-invalid]=\"imageUrlField.invalid && imageUrlField.touched\"\n            />\n            <label for=\"rtsee-entity-image-url-field\">ImageUrl</label>\n          </p-floatlabel>\n        </p-inputgroup>\n      </div>\n\n      @if (manageEntities && manageEntities.tagsMultiselect) {\n        <div class=\"rtsee-form-field-container\">\n          <rtsee-autocomplete [config]=\"manageEntities.tagsMultiselect\"></rtsee-autocomplete>\n        </div>\n      }\n\n      <p-button type=\"submit\"\n                [label]=\"'Save'\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageEntities.saveInProgress\"\n      />\n    </form>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageEntities: [{
+                type: Input
+            }] } });
+
+class RtseeEntityCommentsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityCommentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEntityCommentsComponent, isStandalone: true, selector: "rtsee-entity-comments", inputs: { messenger: "messenger", chat: "chat" }, ngImport: i0, template: "<div class=\"rtsee-entity-comments\">\n  @if (messenger && chat) {\n    <rtsee-chat [messenger]=\"messenger\"\n                [chatData]=\"chat\"\n    ></rtsee-chat>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "messenger"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityCommentsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-entity-comments', imports: [
+                        ChatComponent
+                    ], template: "<div class=\"rtsee-entity-comments\">\n  @if (messenger && chat) {\n    <rtsee-chat [messenger]=\"messenger\"\n                [chatData]=\"chat\"\n    ></rtsee-chat>\n  }\n</div>\n" }]
+        }], propDecorators: { messenger: [{
+                type: Input
+            }], chat: [{
+                type: Input
+            }] } });
+
+class RtseeEntityTagsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityTagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEntityTagsComponent, isStandalone: true, selector: "rtsee-entity-tags", inputs: { entity: "entity" }, ngImport: i0, template: "<div class=\"rtsee-entity-tags\">\n  @if (entity && entity.tags?.length) {\n    <div class=\"rtsee-entity-tags-list\">\n      @for (tag of entity.tags; track tag.id) {\n        <p-chip class=\"rtsee-entity-tag\">\n          <span class=\"rtsee-entity-tag-right\"\n          >{{tag.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityTagsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-entity-tags', imports: [
+                        Chip
+                    ], template: "<div class=\"rtsee-entity-tags\">\n  @if (entity && entity.tags?.length) {\n    <div class=\"rtsee-entity-tags-list\">\n      @for (tag of entity.tags; track tag.id) {\n        <p-chip class=\"rtsee-entity-tag\">\n          <span class=\"rtsee-entity-tag-right\"\n          >{{tag.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { entity: [{
+                type: Input
+            }] } });
+
+class RtseeEntityPreviewComponent {
+    ngOnInit() {
+        void this.entity.reload();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEntityPreviewComponent, isStandalone: true, selector: "rtsee-entity-preview", inputs: { entity: "entity", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-entity-preview\">\n  <div class=\"rtsee-entity-preview-tags\">\n    <rtsee-entity-tags [entity]=\"entity\"></rtsee-entity-tags>\n  </div>\n  <div class=\"rtsee-entity-preview-comments\">\n    @if (entity.comments && messenger) {\n      <rtsee-entity-comments [messenger]=\"messenger\"\n                             [chat]=\"entity.comments\"\n      ></rtsee-entity-comments>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: RtseeEntityCommentsComponent, selector: "rtsee-entity-comments", inputs: ["messenger", "chat"] }, { kind: "component", type: RtseeEntityTagsComponent, selector: "rtsee-entity-tags", inputs: ["entity"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-entity-preview', imports: [
+                        RtseeEntityCommentsComponent,
+                        RtseeEntityTagsComponent
+                    ], template: "<div class=\"rtsee-entity-preview\">\n  <div class=\"rtsee-entity-preview-tags\">\n    <rtsee-entity-tags [entity]=\"entity\"></rtsee-entity-tags>\n  </div>\n  <div class=\"rtsee-entity-preview-comments\">\n    @if (entity.comments && messenger) {\n      <rtsee-entity-comments [messenger]=\"messenger\"\n                             [chat]=\"entity.comments\"\n      ></rtsee-entity-comments>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { entity: [{
+                type: Input
+            }], messenger: [{
+                type: Input
+            }] } });
+
 class SignInComponent {
     constructor(formBuilder, router, authService) {
         this.formBuilder = formBuilder;
@@ -3193,5 +3889,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent };
+export { EntitiesConfigurationsListComponent, EntitiesListComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent };
 //# sourceMappingURL=rtsee-ngx.mjs.map