@rtsee/ngx 0.0.95 → 0.0.96

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

@@ -48,7 +48,7 @@ import { Slider } from 'primeng/slider';
 import { Fieldset } from 'primeng/fieldset';
 import { Tag } from 'primeng/tag';
 import { Listbox } from 'primeng/listbox';
-import { RTSeeRater, RecursiveSelect } from '@rtsee/utilities-ui';
+import { RTSeeRater } from '@rtsee/utilities-ui';
 import { RTSeeRoutesList } from '@rtsee/factory';
 import { Avatar } from 'primeng/avatar';
 import { Image } from 'primeng/image';
@@ -1632,11 +1632,11 @@ 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        <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: ["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" }, 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"] }] }); }
 }
 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        <span class=\"rtsee-story-thumbnail-label-container\">{{\"7\"}}+</span>\n      }\n    </div>\n  </div>\n</div>\n" }]
+            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" }]
         }], propDecorators: { story: [{
                 type: Input
             }] } });
@@ -1966,11 +1966,11 @@ class RecursiveSelectFieldComponent {
         this.fieldChanged.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RecursiveSelectFieldComponent, isStandalone: true, selector: "rtsee-field-recursive-select", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <rtsee-recursive-select [selectModel]=\"field.recursiveSelect\"></rtsee-recursive-select>\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: RecursiveSelectComponent, selector: "rtsee-recursive-select", inputs: ["selectModel"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RecursiveSelectFieldComponent, isStandalone: true, selector: "rtsee-field-recursive-select", inputs: { field: "field" }, outputs: { fieldChanged: "fieldChanged" }, ngImport: i0, template: "<div class=\"rtsee-form-field-container\">\n  <p-divider></p-divider>\n  <p>{{field.name}}</p>\n  <rtsee-recursive-select [selectModel]=\"field.recursiveSelect\"></rtsee-recursive-select>\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  <p-divider></p-divider>\n</div>\n", dependencies: [{ kind: "component", type: RecursiveSelectComponent, selector: "rtsee-recursive-select", inputs: ["selectModel"] }, { 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: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RecursiveSelectFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rtsee-field-recursive-select", standalone: true, imports: [RecursiveSelectComponent, Message], template: "<div class=\"rtsee-form-field-container\">\n  <rtsee-recursive-select [selectModel]=\"field.recursiveSelect\"></rtsee-recursive-select>\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" }]
+            args: [{ selector: "rtsee-field-recursive-select", standalone: true, imports: [RecursiveSelectComponent, Message, Divider], template: "<div class=\"rtsee-form-field-container\">\n  <p-divider></p-divider>\n  <p>{{field.name}}</p>\n  <rtsee-recursive-select [selectModel]=\"field.recursiveSelect\"></rtsee-recursive-select>\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  <p-divider></p-divider>\n</div>\n" }]
         }], propDecorators: { field: [{
                 type: Input
             }], fieldChanged: [{
@@ -2863,11 +2863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class RtseeTagManageComponent {
-    constructor(formBuilder) {
-        this.formBuilder = formBuilder;
-        this.tagsRecursiveSelect = null;
-        this.tagForm = this.getTagForm();
-    }
+    constructor() { }
     ngOnInit() {
         if (!this.manageTags.activeTag) {
             this.manageTags.setBlankActiveTag();
@@ -2875,124 +2871,20 @@ class RtseeTagManageComponent {
         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.applicationId,
-            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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeTagManageComponent, deps: [], 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  @if (manageTags.activeTagForm) {\n    <rtsee-form [form]=\"manageTags.activeTagForm\" (submit)=\"manageTags.activeTagForm.submit()\">\n      <p-button type=\"submit\"\n                label=\"Submit\"\n                [disabled]=\"manageTags.saveInProgress\"\n      ></p-button>\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageTags.saveInProgress\"\n      />\n    </rtsee-form>\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: "component", type: FormComponent, selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }] }); }
 }
 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: [{
+                        FormComponent,
+                    ], template: "<div class=\"rtsee-manage-tag\">\n  @if (manageTags.activeTagForm) {\n    <rtsee-form [form]=\"manageTags.activeTagForm\" (submit)=\"manageTags.activeTagForm.submit()\">\n      <p-button type=\"submit\"\n                label=\"Submit\"\n                [disabled]=\"manageTags.saveInProgress\"\n      ></p-button>\n      <p-button [label]=\"'Cancel'\"\n                severity=\"secondary\"\n                (click)=\"cancel()\"\n                [disabled]=\"manageTags.saveInProgress\"\n      />\n    </rtsee-form>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { manageTags: [{
                 type: Input
             }] } });