@rtsee/ngx 0.0.96 → 0.0.97

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, output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { Injectable, Input, Component, ViewChild, Directive, DOCUMENT, HostListener, Inject, EventEmitter, Output, forwardRef, output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/common';
 import { NgClass, NgIf, NgForOf, SlicePipe, NgStyle, DatePipe, NgOptimizedImage, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -42,10 +42,11 @@ import { Checkbox } from 'primeng/checkbox';
 import { InputNumber } from 'primeng/inputnumber';
 import * as i1$3 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
+import { Fieldset } from 'primeng/fieldset';
+import { DatePicker } from 'primeng/datepicker';
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'primeng/tabs';
 import { ColorPicker } from 'primeng/colorpicker';
 import { Slider } from 'primeng/slider';
-import { Fieldset } from 'primeng/fieldset';
 import { Tag } from 'primeng/tag';
 import { Listbox } from 'primeng/listbox';
 import { RTSeeRater } from '@rtsee/utilities-ui';
@@ -1632,13 +1633,15 @@ 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    <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      @if (story.rating) {\n        <rtsee-rating [rate]=\"{maxValue: 5, value: story.rating}\"></rtsee-rating>\n      }\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      }\n      @if (story.recommendedAge) {\n        <span class=\"rtsee-story-thumbnail-label-container\">{{story.recommendedAge}}</span>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: RatingComponent, selector: "rtsee-rating", inputs: ["config", "rate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryThumbnailComponent, isStandalone: true, selector: "rtsee-story-thumbnail", inputs: { story: "story", presentation: "presentation" }, ngImport: i0, template: "<a [routerLink]=\"[presentation.routePrefix, story.friendlyUrl]\" 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      @if (story.rating) {\n        <rtsee-rating [rate]=\"{maxValue: 5, value: story.rating}\"></rtsee-rating>\n      }\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      }\n      @if (story.recommendedAge) {\n        <span class=\"rtsee-story-thumbnail-label-container\">{{story.recommendedAge}}</span>\n      }\n    </div>\n  </div>\n</a>\n", dependencies: [{ kind: "component", type: RatingComponent, selector: "rtsee-rating", inputs: ["config", "rate"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryThumbnailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-story-thumbnail', imports: [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      @if (story.rating) {\n        <rtsee-rating [rate]=\"{maxValue: 5, value: story.rating}\"></rtsee-rating>\n      }\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      }\n      @if (story.recommendedAge) {\n        <span class=\"rtsee-story-thumbnail-label-container\">{{story.recommendedAge}}</span>\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-story-thumbnail', imports: [RatingComponent, RouterLink], standalone: true, template: "<a [routerLink]=\"[presentation.routePrefix, story.friendlyUrl]\" 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      @if (story.rating) {\n        <rtsee-rating [rate]=\"{maxValue: 5, value: story.rating}\"></rtsee-rating>\n      }\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      }\n      @if (story.recommendedAge) {\n        <span class=\"rtsee-story-thumbnail-label-container\">{{story.recommendedAge}}</span>\n      }\n    </div>\n  </div>\n</a>\n" }]
         }], propDecorators: { story: [{
                 type: Input
+            }], presentation: [{
+                type: Input
             }] } });
 
 class SlideComponent {
@@ -2002,6 +2005,264 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Output
             }] } });
 
+class DynamicFieldsFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicFieldsFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DynamicFieldsFieldComponent, isStandalone: true, selector: "rtsee-dynamic-fields-field", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-dynamic-fields-field\">\n  <p-button label=\"Add a field\"\n            (click)=\"field.add()\"\n  ></p-button>\n\n  <div class=\"rtsee-dynamic-fields-definitions\">\n    @for (definition of field.fields; track definition.name) {\n      <p-divider></p-divider>\n      <p>dynamic field</p>\n      <rtsee-form [form]=\"definition.form\"></rtsee-form>\n      <p-button label=\"Add a field\"\n                (click)=\"field.remove($index)\"\n      ></p-button>\n      <p-divider></p-divider>\n    }\n  </div>\n\n</div>\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => 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: i0.forwardRef(() => FormComponent), selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }, { kind: "component", type: i0.forwardRef(() => Divider), selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DynamicFieldsFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-dynamic-fields-field", standalone: true, imports: [
+                        Button,
+                        forwardRef(() => FormComponent),
+                        Divider
+                    ], template: "<div class=\"rtsee-dynamic-fields-field\">\n  <p-button label=\"Add a field\"\n            (click)=\"field.add()\"\n  ></p-button>\n\n  <div class=\"rtsee-dynamic-fields-definitions\">\n    @for (definition of field.fields; track definition.name) {\n      <p-divider></p-divider>\n      <p>dynamic field</p>\n      <rtsee-form [form]=\"definition.form\"></rtsee-form>\n      <p-button label=\"Add a field\"\n                (click)=\"field.remove($index)\"\n      ></p-button>\n      <p-divider></p-divider>\n    }\n  </div>\n\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class FieldDefinitionFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FieldDefinitionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FieldDefinitionFieldComponent, isStandalone: true, selector: "rtsee-field-definition-field", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-field-definition\">\n  <div class=\"rtsee-form-field-container\">\n    <p-divider></p-divider>\n    <p>Custom Field</p>\n\n    <rtsee-form [form]=\"field.form\"></rtsee-form>\n    <p-divider></p-divider>\n  </div>\n</div>\n\n<div class=\"rtsee-form-field-container\">\n  <p-divider></p-divider>\n  <p>Custom Field</p>\n\n  <p-select [options]=\"field.typeOptions\"\n            [optionLabel]=\"'friendlyName'\"\n  ></p-select>\n\n\n\n  <p-button label=\"remove\"\n            severity=\"warn\"\n  ></p-button>\n\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n  <p-divider></p-divider>\n</div>\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => Message), selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: i0.forwardRef(() => 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: i0.forwardRef(() => Divider), selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: i0.forwardRef(() => 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: "component", type: i0.forwardRef(() => FormComponent), selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FieldDefinitionFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-definition-field", standalone: true, imports: [
+                        Message,
+                        Button,
+                        Divider,
+                        Select,
+                        forwardRef(() => FormComponent)
+                    ], template: "<div class=\"rtsee-field-definition\">\n  <div class=\"rtsee-form-field-container\">\n    <p-divider></p-divider>\n    <p>Custom Field</p>\n\n    <rtsee-form [form]=\"field.form\"></rtsee-form>\n    <p-divider></p-divider>\n  </div>\n</div>\n\n<div class=\"rtsee-form-field-container\">\n  <p-divider></p-divider>\n  <p>Custom Field</p>\n\n  <p-select [options]=\"field.typeOptions\"\n            [optionLabel]=\"'friendlyName'\"\n  ></p-select>\n\n\n\n  <p-button label=\"remove\"\n            severity=\"warn\"\n  ></p-button>\n\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n  <p-divider></p-divider>\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class SelectFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SelectFieldComponent, isStandalone: true, selector: "rtsee-field-select", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-select [inputId]=\"field.name\"\n                class=\"rtsee-form-field\"\n                [options]=\"field.options\"\n                [optionLabel]=\"field.labelKey\"\n                [optionValue]=\"field.valueKey\"\n                [(ngModel)]=\"field.value\"\n                (ngModelChange)=\"onModelChange()\"\n                [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-select>\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"c\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n\n", dependencies: [{ 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"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { 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: 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-select", standalone: true, imports: [FormsModule, InputGroup, FloatLabel, Message, Select], template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-select [inputId]=\"field.name\"\n                class=\"rtsee-form-field\"\n                [options]=\"field.options\"\n                [optionLabel]=\"field.labelKey\"\n                [optionValue]=\"field.valueKey\"\n                [(ngModel)]=\"field.value\"\n                (ngModelChange)=\"onModelChange()\"\n                [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-select>\n      <label [for]=\"field.name\">{{ field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"c\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class LocationFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LocationFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: LocationFieldComponent, isStandalone: true, selector: "rtsee-field-location", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container rtsee-field-location-container mb-3\">\n  <p-fieldset [legend]=\"field.description || field.name || 'Location'\">\n    @if (field.form) {\n      <rtsee-form [form]=\"field.form\" (formSubmit)=\"onModelChange()\"></rtsee-form>\n    }\n  </p-fieldset>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => Fieldset), selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: i0.forwardRef(() => Message), selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: i0.forwardRef(() => FormComponent), selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LocationFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-location", standalone: true, imports: [
+                        Fieldset,
+                        Message,
+                        forwardRef(() => FormComponent)
+                    ], template: "<div class=\"rtsee-form-field-container rtsee-field-location-container mb-3\">\n  <p-fieldset [legend]=\"field.description || field.name || 'Location'\">\n    @if (field.form) {\n      <rtsee-form [form]=\"field.form\" (formSubmit)=\"onModelChange()\"></rtsee-form>\n    }\n  </p-fieldset>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class TimeSlotFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TimeSlotFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TimeSlotFieldComponent, isStandalone: true, selector: "rtsee-field-time-slot", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container rtsee-field-time-slot-container mb-3\">\n  <p-fieldset [legend]=\"field.description || field.name || 'Time Slot'\">\n    @if (field.form) {\n      <rtsee-form [form]=\"field.form\" (formSubmit)=\"onModelChange()\"></rtsee-form>\n    }\n  </p-fieldset>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => Fieldset), selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: i0.forwardRef(() => Message), selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: i0.forwardRef(() => FormComponent), selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TimeSlotFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-time-slot", standalone: true, imports: [
+                        Fieldset,
+                        Message,
+                        forwardRef(() => FormComponent)
+                    ], template: "<div class=\"rtsee-form-field-container rtsee-field-time-slot-container mb-3\">\n  <p-fieldset [legend]=\"field.description || field.name || 'Time Slot'\">\n    @if (field.form) {\n      <rtsee-form [form]=\"field.form\" (formSubmit)=\"onModelChange()\"></rtsee-form>\n    }\n  </p-fieldset>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class TimeSlotsFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TimeSlotsFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TimeSlotsFieldComponent, isStandalone: true, selector: "rtsee-field-time-slots", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container rtsee-field-time-slots-container mb-3\">\n  <p-fieldset [legend]=\"field.description || field.name || 'Time Slots'\">\n    <div class=\"mb-3\">\n      <p-button label=\"Add Time Slot\" (click)=\"field.add()\"></p-button>\n    </div>\n    @for (slotField of field.slotFields; track $index) {\n      <div class=\"p-3 border rounded mb-2\">\n        @if (slotField.form) {\n          <rtsee-form [form]=\"slotField.form\" (formSubmit)=\"onModelChange()\"></rtsee-form>\n        }\n        <div class=\"mt-2 text-right\">\n          <p-button label=\"Remove Slot\" severity=\"warn\" (click)=\"field.remove($index)\"></p-button>\n        </div>\n      </div>\n    }\n  </p-fieldset>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => 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: i0.forwardRef(() => Message), selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: i0.forwardRef(() => Fieldset), selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: i0.forwardRef(() => FormComponent), selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TimeSlotsFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-time-slots", standalone: true, imports: [
+                        Button,
+                        Divider,
+                        Message,
+                        Fieldset,
+                        forwardRef(() => FormComponent)
+                    ], template: "<div class=\"rtsee-form-field-container rtsee-field-time-slots-container mb-3\">\n  <p-fieldset [legend]=\"field.description || field.name || 'Time Slots'\">\n    <div class=\"mb-3\">\n      <p-button label=\"Add Time Slot\" (click)=\"field.add()\"></p-button>\n    </div>\n    @for (slotField of field.slotFields; track $index) {\n      <div class=\"p-3 border rounded mb-2\">\n        @if (slotField.form) {\n          <rtsee-form [form]=\"slotField.form\" (formSubmit)=\"onModelChange()\"></rtsee-form>\n        }\n        <div class=\"mt-2 text-right\">\n          <p-button label=\"Remove Slot\" severity=\"warn\" (click)=\"field.remove($index)\"></p-button>\n        </div>\n      </div>\n    }\n  </p-fieldset>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class EntityFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.field.autocompleteField?.autocomplete) {
+            this.field.autocompleteField.autocomplete.on("select", () => {
+                this.onModelChange();
+            });
+        }
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EntityFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: EntityFieldComponent, isStandalone: true, selector: "rtsee-field-entity", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  @if (field.autocompleteField) {\n    <rtsee-autocomplete [config]=\"field.autocompleteField.autocomplete\"></rtsee-autocomplete>\n  }\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EntityFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-entity", standalone: true, imports: [AutocompleteComponent, Message], template: "<div class=\"rtsee-form-field-container\">\n  @if (field.autocompleteField) {\n    <rtsee-autocomplete [config]=\"field.autocompleteField.autocomplete\"></rtsee-autocomplete>\n  }\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class EntitiesListFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.field.autocompleteField?.autocomplete) {
+            this.field.autocompleteField.autocomplete.on("select", () => {
+                this.onModelChange();
+            });
+        }
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EntitiesListFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: EntitiesListFieldComponent, isStandalone: true, selector: "rtsee-field-entities-list", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  @if (field.autocompleteField) {\n    <rtsee-autocomplete [config]=\"field.autocompleteField.autocomplete\"></rtsee-autocomplete>\n  }\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EntitiesListFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-entities-list", standalone: true, imports: [AutocompleteComponent, Message], template: "<div class=\"rtsee-form-field-container\">\n  @if (field.autocompleteField) {\n    <rtsee-autocomplete [config]=\"field.autocompleteField.autocomplete\"></rtsee-autocomplete>\n  }\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message block mt-1\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class DateFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DateFieldComponent, isStandalone: true, selector: "rtsee-field-date", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-datePicker [inputId]=\"field.name\"\n                    class=\"rtsee-form-field\"\n                    [(ngModel)]=\"field.value\"\n                    (ngModelChange)=\"onModelChange()\"\n                    [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-datePicker>\n      <label [for]=\"field.name\">{{ field.description || field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ 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"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DateFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-date", standalone: true, imports: [FormsModule, DatePicker, InputGroup, FloatLabel, Message], template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-datePicker [inputId]=\"field.name\"\n                    class=\"rtsee-form-field\"\n                    [(ngModel)]=\"field.value\"\n                    (ngModelChange)=\"onModelChange()\"\n                    [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-datePicker>\n      <label [for]=\"field.name\">{{ field.description || field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class VarcharFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VarcharFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: VarcharFieldComponent, isStandalone: true, selector: "rtsee-field-varchar", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <input pInputText\n             [id]=\"field.name\"\n             class=\"rtsee-form-field\"\n             [(ngModel)]=\"field.value\"\n             (ngModelChange)=\"onModelChange()\"\n             [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      />\n      <label [for]=\"field.name\">{{ field.description || field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: VarcharFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-varchar", standalone: true, imports: [FormsModule, InputText, InputGroup, FloatLabel, Message], template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <input pInputText\n             [id]=\"field.name\"\n             class=\"rtsee-form-field\"\n             [(ngModel)]=\"field.value\"\n             (ngModelChange)=\"onModelChange()\"\n             [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      />\n      <label [for]=\"field.name\">{{ field.description || field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
+class FloatFieldComponent {
+    constructor() {
+        this.fieldChanged = new EventEmitter();
+    }
+    onModelChange() {
+        this.field.digest();
+        this.fieldChanged.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FloatFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FloatFieldComponent, isStandalone: true, selector: "rtsee-field-float", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-inputNumber [inputId]=\"field.name\"\n                     class=\"rtsee-form-field\"\n                     [minFractionDigits]=\"1\"\n                     [maxFractionDigits]=\"6\"\n                     [(ngModel)]=\"field.value\"\n                     (ngModelChange)=\"onModelChange()\"\n                     [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-inputNumber>\n      <label [for]=\"field.name\">{{ field.description || field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n", dependencies: [{ 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"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FloatFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-field-float", standalone: true, imports: [FormsModule, InputNumber, InputGroup, FloatLabel, Message], template: "<div class=\"rtsee-form-field-container\">\n  <p-inputgroup>\n    <p-floatlabel variant=\"on\">\n      <p-inputNumber [inputId]=\"field.name\"\n                     class=\"rtsee-form-field\"\n                     [minFractionDigits]=\"1\"\n                     [maxFractionDigits]=\"6\"\n                     [(ngModel)]=\"field.value\"\n                     (ngModelChange)=\"onModelChange()\"\n                     [class.p-invalid]=\"!field.isValid && field.isDirty\"\n      ></p-inputNumber>\n      <label [for]=\"field.name\">{{ field.description || field.name }}</label>\n    </p-floatlabel>\n  </p-inputgroup>\n  @if (!field.isValid && field.isDirty) {\n    @for (error of field.validator.result.errors; track error.message) {\n      <p-message class=\"rtsee-form-field-error-message\"\n                 severity=\"error\"\n                 variant=\"simple\"\n                 size=\"small\"\n      >{{ error.message }}</p-message>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], fieldChanged: [{
+                type: Output
+            }] } });
+
 class FormFieldComponent {
     constructor() {
         this.fieldChanged = new EventEmitter();
@@ -2010,7 +2271,7 @@ class FormFieldComponent {
         this.fieldChanged.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormFieldComponent, isStandalone: true, selector: "rtsee-form-field", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "@switch (field.type) {\n  @case ('text') {\n    <rtsee-field-text [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-text>\n  }\n  @case ('textarea') {\n    <rtsee-field-textarea [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-textarea>\n  }\n  @case ('checkbox') {\n    <rtsee-field-checkbox [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-checkbox>\n  }\n  @case ('radio') {\n    <rtsee-field-radio [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-radio>\n  }\n  @case ('number') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('autocomplete') {\n    <rtsee-field-autocomplete [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-autocomplete>\n  }\n  @case ('recursive-select') {\n    <rtsee-field-recursive-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-recursive-select>\n  }\n  @case ('image-uploader') {\n    <rtsee-field-image-uploader [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-image-uploader>\n  }\n}\n", dependencies: [{ kind: "component", type: TextFieldComponent, selector: "rtsee-field-text", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: TextareaFieldComponent, selector: "rtsee-field-textarea", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: CheckboxFieldComponent, selector: "rtsee-field-checkbox", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: RadioFieldComponent, selector: "rtsee-field-radio", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: NumberFieldComponent, selector: "rtsee-field-number", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: AutocompleteFieldComponent, selector: "rtsee-field-autocomplete", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: RecursiveSelectFieldComponent, selector: "rtsee-field-recursive-select", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: ImageUploaderFieldComponent, selector: "rtsee-field-image-uploader", inputs: ["field"], outputs: ["fieldChanged"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormFieldComponent, isStandalone: true, selector: "rtsee-form-field", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "@switch (field.type) {\n  @case ('text') {\n    <rtsee-field-text [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-text>\n  }\n  @case ('varchar') {\n    <rtsee-field-varchar [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-varchar>\n  }\n  @case ('textarea') {\n    <rtsee-field-textarea [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-textarea>\n  }\n  @case ('checkbox') {\n    <rtsee-field-checkbox [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-checkbox>\n  }\n  @case ('radio') {\n    <rtsee-field-radio [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-radio>\n  }\n  @case ('number') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('integer') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('float4') {\n    <rtsee-field-float [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-float>\n  }\n  @case ('date') {\n    <rtsee-field-date [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-date>\n  }\n  @case ('autocomplete') {\n    <rtsee-field-autocomplete [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-autocomplete>\n  }\n  @case ('entity') {\n    <rtsee-field-entity [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-entity>\n  }\n  @case ('entities-list') {\n    <rtsee-field-entities-list [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-entities-list>\n  }\n  @case ('location') {\n    <rtsee-field-location [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-location>\n  }\n  @case ('time_slot') {\n    <rtsee-field-time-slot [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-time-slot>\n  }\n  @case ('time_slots') {\n    <rtsee-field-time-slots [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-time-slots>\n  }\n  @case ('recursive-select') {\n    <rtsee-field-recursive-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-recursive-select>\n  }\n  @case ('select') {\n    <rtsee-field-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-select>\n  }\n  @case ('image-uploader') {\n    <rtsee-field-image-uploader [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-image-uploader>\n  }\n  @case ('field-definition') {\n    <rtsee-field-definition-field [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-definition-field>\n  }\n  @case ('dynamic-fields') {\n    <rtsee-dynamic-fields-field [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-dynamic-fields-field>\n  }\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => TextFieldComponent), selector: "rtsee-field-text", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => TextareaFieldComponent), selector: "rtsee-field-textarea", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => CheckboxFieldComponent), selector: "rtsee-field-checkbox", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => RadioFieldComponent), selector: "rtsee-field-radio", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => NumberFieldComponent), selector: "rtsee-field-number", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => AutocompleteFieldComponent), selector: "rtsee-field-autocomplete", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => RecursiveSelectFieldComponent), selector: "rtsee-field-recursive-select", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => ImageUploaderFieldComponent), selector: "rtsee-field-image-uploader", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => FieldDefinitionFieldComponent), selector: "rtsee-field-definition-field", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => DynamicFieldsFieldComponent), selector: "rtsee-dynamic-fields-field", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => SelectFieldComponent), selector: "rtsee-field-select", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => LocationFieldComponent), selector: "rtsee-field-location", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => TimeSlotFieldComponent), selector: "rtsee-field-time-slot", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => TimeSlotsFieldComponent), selector: "rtsee-field-time-slots", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => EntityFieldComponent), selector: "rtsee-field-entity", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => EntitiesListFieldComponent), selector: "rtsee-field-entities-list", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => DateFieldComponent), selector: "rtsee-field-date", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => VarcharFieldComponent), selector: "rtsee-field-varchar", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "component", type: i0.forwardRef(() => FloatFieldComponent), selector: "rtsee-field-float", inputs: ["field"], outputs: ["fieldChanged"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -2022,8 +2283,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         NumberFieldComponent,
                         AutocompleteFieldComponent,
                         RecursiveSelectFieldComponent,
-                        ImageUploaderFieldComponent
-                    ], template: "@switch (field.type) {\n  @case ('text') {\n    <rtsee-field-text [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-text>\n  }\n  @case ('textarea') {\n    <rtsee-field-textarea [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-textarea>\n  }\n  @case ('checkbox') {\n    <rtsee-field-checkbox [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-checkbox>\n  }\n  @case ('radio') {\n    <rtsee-field-radio [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-radio>\n  }\n  @case ('number') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('autocomplete') {\n    <rtsee-field-autocomplete [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-autocomplete>\n  }\n  @case ('recursive-select') {\n    <rtsee-field-recursive-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-recursive-select>\n  }\n  @case ('image-uploader') {\n    <rtsee-field-image-uploader [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-image-uploader>\n  }\n}\n" }]
+                        ImageUploaderFieldComponent,
+                        forwardRef(() => FieldDefinitionFieldComponent),
+                        forwardRef(() => DynamicFieldsFieldComponent),
+                        SelectFieldComponent,
+                        LocationFieldComponent,
+                        TimeSlotFieldComponent,
+                        TimeSlotsFieldComponent,
+                        EntityFieldComponent,
+                        EntitiesListFieldComponent,
+                        DateFieldComponent,
+                        VarcharFieldComponent,
+                        FloatFieldComponent
+                    ], template: "@switch (field.type) {\n  @case ('text') {\n    <rtsee-field-text [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-text>\n  }\n  @case ('varchar') {\n    <rtsee-field-varchar [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-varchar>\n  }\n  @case ('textarea') {\n    <rtsee-field-textarea [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-textarea>\n  }\n  @case ('checkbox') {\n    <rtsee-field-checkbox [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-checkbox>\n  }\n  @case ('radio') {\n    <rtsee-field-radio [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-radio>\n  }\n  @case ('number') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('integer') {\n    <rtsee-field-number [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-number>\n  }\n  @case ('float4') {\n    <rtsee-field-float [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-float>\n  }\n  @case ('date') {\n    <rtsee-field-date [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-date>\n  }\n  @case ('autocomplete') {\n    <rtsee-field-autocomplete [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-autocomplete>\n  }\n  @case ('entity') {\n    <rtsee-field-entity [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-entity>\n  }\n  @case ('entities-list') {\n    <rtsee-field-entities-list [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-entities-list>\n  }\n  @case ('location') {\n    <rtsee-field-location [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-location>\n  }\n  @case ('time_slot') {\n    <rtsee-field-time-slot [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-time-slot>\n  }\n  @case ('time_slots') {\n    <rtsee-field-time-slots [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-time-slots>\n  }\n  @case ('recursive-select') {\n    <rtsee-field-recursive-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-recursive-select>\n  }\n  @case ('select') {\n    <rtsee-field-select [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-select>\n  }\n  @case ('image-uploader') {\n    <rtsee-field-image-uploader [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-image-uploader>\n  }\n  @case ('field-definition') {\n    <rtsee-field-definition-field [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-field-definition-field>\n  }\n  @case ('dynamic-fields') {\n    <rtsee-dynamic-fields-field [field]=\"$any(field)\" (fieldChanged)=\"onFieldChanged()\"></rtsee-dynamic-fields-field>\n  }\n}\n" }]
         }], propDecorators: { field: [{
                 type: Input
             }], fieldChanged: [{
@@ -2043,11 +2315,11 @@ class FormComponent {
         this.form.evaluateIsChanged();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormComponent, isStandalone: true, selector: "rtsee-form", inputs: { form: "form" }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "<div class=\"rtsee-form-container\">\n  @if (form.name) {\n    <h3 class=\"rtsee-form-title font-bold text-lg mb-2\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rtsee-form-description text-sm text-gray-500 mb-4\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-story-form rtsee-form\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container\">\n        <rtsee-form-field [field]=\"field\"\n                          (fieldChanged)=\"onFieldChanged()\"\n        ></rtsee-form-field>\n      </div>\n    }\n\n    <div class=\"rtsee-form-submit-container mt-4\">\n      <ng-content>\n        <p-button type=\"submit\" label=\"Submit\" [disabled]=\"!form.isValid\"></p-button>\n      </ng-content>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "component", type: FormFieldComponent, selector: "rtsee-form-field", inputs: ["field"], outputs: ["fieldChanged"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormComponent, isStandalone: true, selector: "rtsee-form", inputs: { form: "form" }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "<div class=\"rtsee-form-container\">\n  @if (form.name) {\n    <h3 class=\"rtsee-form-title font-bold text-lg mb-2\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rtsee-form-description text-sm text-gray-500 mb-4\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-story-form rtsee-form\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container\">\n        @if (field.active) {\n          <rtsee-form-field [field]=\"field\"\n                            (fieldChanged)=\"onFieldChanged()\"\n          ></rtsee-form-field>\n        }\n      </div>\n    }\n    <div class=\"rtsee-form-submit-container\">\n      <ng-content>\n      </ng-content>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "component", type: FormFieldComponent, selector: "rtsee-form-field", inputs: ["field"], outputs: ["fieldChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rtsee-form", standalone: true, imports: [FormFieldComponent, Button, FormsModule], template: "<div class=\"rtsee-form-container\">\n  @if (form.name) {\n    <h3 class=\"rtsee-form-title font-bold text-lg mb-2\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rtsee-form-description text-sm text-gray-500 mb-4\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-story-form rtsee-form\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container\">\n        <rtsee-form-field [field]=\"field\"\n                          (fieldChanged)=\"onFieldChanged()\"\n        ></rtsee-form-field>\n      </div>\n    }\n\n    <div class=\"rtsee-form-submit-container mt-4\">\n      <ng-content>\n        <p-button type=\"submit\" label=\"Submit\" [disabled]=\"!form.isValid\"></p-button>\n      </ng-content>\n    </div>\n  </form>\n</div>\n" }]
+            args: [{ selector: "rtsee-form", standalone: true, imports: [FormFieldComponent, Button, FormsModule], template: "<div class=\"rtsee-form-container\">\n  @if (form.name) {\n    <h3 class=\"rtsee-form-title font-bold text-lg mb-2\">{{ form.name }}</h3>\n  }\n  @if (form.description) {\n    <p class=\"rtsee-form-description text-sm text-gray-500 mb-4\">{{ form.description }}</p>\n  }\n  <form class=\"rtsee-story-form rtsee-form\" (ngSubmit)=\"submit()\">\n    @for (field of form.fields; track field.name) {\n      <div class=\"rtsee-form-field-container\">\n        @if (field.active) {\n          <rtsee-form-field [field]=\"field\"\n                            (fieldChanged)=\"onFieldChanged()\"\n          ></rtsee-form-field>\n        }\n      </div>\n    }\n    <div class=\"rtsee-form-submit-container\">\n      <ng-content>\n      </ng-content>\n    </div>\n  </form>\n</div>\n" }]
         }], propDecorators: { form: [{
                 type: Input
             }], formSubmit: [{
@@ -2685,8 +2957,13 @@ class PresentationComponent {
     constructor() {
         this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
     }
+    onStoryThumbnailClicked(story) {
+        if (!story.friendlyUrl) {
+            void this.presentation.openStoryDetails(story.id, story.preselectedSlideNumber || undefined);
+        }
+    }
     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        <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"] }] }); }
+    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)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\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)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\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", "presentation"] }, { 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,
@@ -2699,7 +2976,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        <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" }]
+                    ], 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)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\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)=\"onStoryThumbnailClicked(story)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n                [presentation]=\"presentation\"\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: [{
@@ -2788,7 +3065,7 @@ class RTSeeContainerComponent {
         this.isSidenavExpanded = !this.isSidenavExpanded;
     }
     defineSideNavState(url) {
-        const isBase = url === '/' || url.startsWith('/?');
+        const isBase = url === '/' || url.startsWith('/?') || url.startsWith('/story');
         const routeUrlSplit = url.split('/');
         const rootRoutePath = isBase ? '' : routeUrlSplit[1] || null;
         if (!rootRoutePath && !isBase) {