@anglr/dynamic 1.0.0-beta.20221109083513 → 1.0.0-beta.20221109102920

package/es2015/layout-editor/src/interfaces/propertiesControl/propertiesControl.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"propertiesControl.interface.js","sourceRoot":"","sources":["../../../../../layout-editor/src/interfaces/propertiesControl/propertiesControl.interface.ts"],"names":[],"mappings":"","sourcesContent":["import {OnInit} from '@angular/core';\nimport {FormGroup} from '@angular/forms';\nimport {FormModelGroup} from '@anglr/common/forms';\nimport {Dictionary, PromiseOr} from '@jscrpt/common';\n\nimport {LayoutEditorPropertyMetadata} from '../../misc/types';\nimport {LayoutPropertyTypeData} from '../../decorators';\n\n//TODO: also rework for ngOnInit\n\n/**\n * Defines control that will handle displaying of properties/options of component\n */\nexport interface PropertiesControl<TOptions = any> extends OnInit\n{\n    /**\n     * Form group representing whole options\n     */\n    form: FormGroup<FormModelGroup<TOptions>>|undefined;\n\n    /**\n     * Properties metadata that are being rendered\n     */\n    propertiesMetadata: Dictionary<LayoutEditorPropertyMetadata&LayoutPropertyTypeData>|null;\n\n    /**\n     * Initialize component\n     */\n    initialize(): PromiseOr<void>;\n\n    /**\n     * Explicitly runs invalidation of content (change detection)\n     */\n    invalidateVisuals(): void;\n}"]}
+{"version":3,"file":"propertiesControl.interface.js","sourceRoot":"","sources":["../../../../../layout-editor/src/interfaces/propertiesControl/propertiesControl.interface.ts"],"names":[],"mappings":"","sourcesContent":["import {OnInit} from '@angular/core';\nimport {FormGroup} from '@angular/forms';\nimport {FormModelGroup} from '@anglr/common/forms';\nimport {Dictionary, PromiseOr} from '@jscrpt/common';\n\nimport {LayoutEditorPropertyMetadata} from '../../misc/types';\nimport {LayoutPropertyTypeData} from '../../decorators';\n\n//TODO: also rework for ngOnInit\n//TODO: allow specifying usedProperties, to filter out some properties\n\n/**\n * Defines control that will handle displaying of properties/options of component\n */\nexport interface PropertiesControl<TOptions = any> extends OnInit\n{\n    /**\n     * Form group representing whole options\n     */\n    form: FormGroup<FormModelGroup<TOptions>>|undefined;\n\n    /**\n     * Properties metadata that are being rendered\n     */\n    propertiesMetadata: Dictionary<LayoutEditorPropertyMetadata&LayoutPropertyTypeData>|null;\n\n    /**\n     * Initialize component\n     */\n    initialize(): PromiseOr<void>;\n\n    /**\n     * Explicitly runs invalidation of content (change detection)\n     */\n    invalidateVisuals(): void;\n}"]}

package/es2015/layout-editor/src/modules/propertiesControls/components/genericPropertiesControl/genericPropertiesControl.component.js

@@ -23,10 +23,10 @@ export class DefaultGenericPropertiesControlComponent extends PropertiesControlB
     }
 }
 DefaultGenericPropertiesControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: DefaultGenericPropertiesControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DefaultGenericPropertiesControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: DefaultGenericPropertiesControlComponent, selector: "default-generic-properties-control", inputs: { properties: "properties" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let property of properties\">\n    <!-- TODO pipe for control.control -->\n    <div class=\"properties-form-group\">\n        <label class=\"properties-control-label\">{{propertiesMetadata?.[property]?.name ?? property}} <span *ngIf=\"propertiesMetadata?.[property]?.description\" class=\"fas fa-info-circle\" [tooltip]=\"propertiesMetadata?.[property]?.description\"></span></label>\n        <ng-container [propertyTypeControl]=\"propertiesMetadata?.[property]?.type\" [control]=\"$any(form?.get(property) | asFormControl)\" [values]=\"propertiesMetadata?.[property]?.values ?? []\"></ng-container>\n    </div>\n</ng-container>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "allowHtml", "template", "tooltipOptions", "tooltipVisible"] }, { kind: "directive", type: i3.PropertyTypeControlRendererDirective, selector: "[propertyTypeControl]", inputs: ["control", "propertyTypeControl", "values"] }, { kind: "pipe", type: i4.AsFormControlPipe, name: "asFormControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DefaultGenericPropertiesControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: DefaultGenericPropertiesControlComponent, selector: "default-generic-properties-control", inputs: { properties: "properties" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let property of properties\">\n    <!-- TODO pipe for control.control -->\n    <div class=\"properties-form-group\" *ngIf=\"form?.get(property)\">\n        <label class=\"properties-control-label\">{{propertiesMetadata?.[property]?.name ?? property}} <span *ngIf=\"propertiesMetadata?.[property]?.description\" class=\"fas fa-info-circle\" [tooltip]=\"propertiesMetadata?.[property]?.description\"></span></label>\n        <ng-container [propertyTypeControl]=\"propertiesMetadata?.[property]?.type\" [control]=\"$any(form?.get(property) | asFormControl)\" [values]=\"propertiesMetadata?.[property]?.values ?? []\"></ng-container>\n    </div>\n</ng-container>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "allowHtml", "template", "tooltipOptions", "tooltipVisible"] }, { kind: "directive", type: i3.PropertyTypeControlRendererDirective, selector: "[propertyTypeControl]", inputs: ["control", "propertyTypeControl", "values"] }, { kind: "pipe", type: i4.AsFormControlPipe, name: "asFormControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: DefaultGenericPropertiesControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'default-generic-properties-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let property of properties\">\n    <!-- TODO pipe for control.control -->\n    <div class=\"properties-form-group\">\n        <label class=\"properties-control-label\">{{propertiesMetadata?.[property]?.name ?? property}} <span *ngIf=\"propertiesMetadata?.[property]?.description\" class=\"fas fa-info-circle\" [tooltip]=\"propertiesMetadata?.[property]?.description\"></span></label>\n        <ng-container [propertyTypeControl]=\"propertiesMetadata?.[property]?.type\" [control]=\"$any(form?.get(property) | asFormControl)\" [values]=\"propertiesMetadata?.[property]?.values ?? []\"></ng-container>\n    </div>\n</ng-container>" }]
+            args: [{ selector: 'default-generic-properties-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let property of properties\">\n    <!-- TODO pipe for control.control -->\n    <div class=\"properties-form-group\" *ngIf=\"form?.get(property)\">\n        <label class=\"properties-control-label\">{{propertiesMetadata?.[property]?.name ?? property}} <span *ngIf=\"propertiesMetadata?.[property]?.description\" class=\"fas fa-info-circle\" [tooltip]=\"propertiesMetadata?.[property]?.description\"></span></label>\n        <ng-container [propertyTypeControl]=\"propertiesMetadata?.[property]?.type\" [control]=\"$any(form?.get(property) | asFormControl)\" [values]=\"propertiesMetadata?.[property]?.values ?? []\"></ng-container>\n    </div>\n</ng-container>" }]
         }], propDecorators: { properties: [{
                 type: Input
             }] } });
@@ -45,7 +45,7 @@ export function genericPropertiesControlFor(properties) {
         }
     }
     GenericPropertiesControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: GenericPropertiesControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    GenericPropertiesControl.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: GenericPropertiesControl, isStandalone: true, selector: "generic-properties-control", inputs: { properties: "properties" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let property of properties\">\n    <!-- TODO pipe for control.control -->\n    <div class=\"properties-form-group\">\n        <label class=\"properties-control-label\">{{propertiesMetadata?.[property]?.name ?? property}} <span *ngIf=\"propertiesMetadata?.[property]?.description\" class=\"fas fa-info-circle\" [tooltip]=\"propertiesMetadata?.[property]?.description\"></span></label>\n        <ng-container [propertyTypeControl]=\"propertiesMetadata?.[property]?.type\" [control]=\"$any(form?.get(property) | asFormControl)\" [values]=\"propertiesMetadata?.[property]?.values ?? []\"></ng-container>\n    </div>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "allowHtml", "template", "tooltipOptions", "tooltipVisible"] }, { kind: "ngmodule", type: PropertyTypeControlsModule }, { kind: "directive", type: i3.PropertyTypeControlRendererDirective, selector: "[propertyTypeControl]", inputs: ["control", "propertyTypeControl", "values"] }, { kind: "ngmodule", type: FormPipesModule }, { kind: "pipe", type: i4.AsFormControlPipe, name: "asFormControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    GenericPropertiesControl.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: GenericPropertiesControl, isStandalone: true, selector: "generic-properties-control", inputs: { properties: "properties" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let property of properties\">\n    <!-- TODO pipe for control.control -->\n    <div class=\"properties-form-group\" *ngIf=\"form?.get(property)\">\n        <label class=\"properties-control-label\">{{propertiesMetadata?.[property]?.name ?? property}} <span *ngIf=\"propertiesMetadata?.[property]?.description\" class=\"fas fa-info-circle\" [tooltip]=\"propertiesMetadata?.[property]?.description\"></span></label>\n        <ng-container [propertyTypeControl]=\"propertiesMetadata?.[property]?.type\" [control]=\"$any(form?.get(property) | asFormControl)\" [values]=\"propertiesMetadata?.[property]?.values ?? []\"></ng-container>\n    </div>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "allowHtml", "template", "tooltipOptions", "tooltipVisible"] }, { kind: "ngmodule", type: PropertyTypeControlsModule }, { kind: "directive", type: i3.PropertyTypeControlRendererDirective, selector: "[propertyTypeControl]", inputs: ["control", "propertyTypeControl", "values"] }, { kind: "ngmodule", type: FormPipesModule }, { kind: "pipe", type: i4.AsFormControlPipe, name: "asFormControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
     i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: GenericPropertiesControl, decorators: [{
                 type: Component,
                 args: [{ selector: 'generic-properties-control', standalone: true, imports: [
@@ -53,7 +53,7 @@ export function genericPropertiesControlFor(properties) {
                             TooltipModule,
                             PropertyTypeControlsModule,
                             FormPipesModule,
-                        ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let property of properties\">\n    <!-- TODO pipe for control.control -->\n    <div class=\"properties-form-group\">\n        <label class=\"properties-control-label\">{{propertiesMetadata?.[property]?.name ?? property}} <span *ngIf=\"propertiesMetadata?.[property]?.description\" class=\"fas fa-info-circle\" [tooltip]=\"propertiesMetadata?.[property]?.description\"></span></label>\n        <ng-container [propertyTypeControl]=\"propertiesMetadata?.[property]?.type\" [control]=\"$any(form?.get(property) | asFormControl)\" [values]=\"propertiesMetadata?.[property]?.values ?? []\"></ng-container>\n    </div>\n</ng-container>" }]
+                        ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let property of properties\">\n    <!-- TODO pipe for control.control -->\n    <div class=\"properties-form-group\" *ngIf=\"form?.get(property)\">\n        <label class=\"properties-control-label\">{{propertiesMetadata?.[property]?.name ?? property}} <span *ngIf=\"propertiesMetadata?.[property]?.description\" class=\"fas fa-info-circle\" [tooltip]=\"propertiesMetadata?.[property]?.description\"></span></label>\n        <ng-container [propertyTypeControl]=\"propertiesMetadata?.[property]?.type\" [control]=\"$any(form?.get(property) | asFormControl)\" [values]=\"propertiesMetadata?.[property]?.values ?? []\"></ng-container>\n    </div>\n</ng-container>" }]
             }], propDecorators: { properties: [{
                     type: Input
                 }] } });

package/es2015/layout-editor/src/modules/propertiesControls/components/genericPropertiesControl/genericPropertiesControl.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"genericPropertiesControl.component.js","sourceRoot":"","sources":["../../../../../../../layout-editor/src/modules/propertiesControls/components/genericPropertiesControl/genericPropertiesControl.component.ts","../../../../../../../layout-editor/src/modules/propertiesControls/components/genericPropertiesControl/genericPropertiesControl.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAO,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAC,aAAa,EAAC,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAC,eAAe,EAAC,MAAM,qBAAqB,CAAC;AAGpD,OAAO,EAAC,qBAAqB,EAAC,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAC,0BAA0B,EAAC,MAAM,+BAA+B,CAAC;;;;;;AAEzE;;GAEG;AAOH,MAAM,OAAO,wCAAyD,SAAQ,qBAA+B;IAN7G;;QAQI,gFAAgF;QAEhF;;WAEG;QAEI,eAAU,GAAa,EAAE,CAAC;KACpC;;qIATY,wCAAwC;yHAAxC,wCAAwC,uIClBrD,6oBAMe;2FDYF,wCAAwC;kBANpD,SAAS;+BAEI,oCAAoC,mBAE7B,uBAAuB,CAAC,MAAM;8BAUxC,UAAU;sBADhB,KAAK;;AAIV;;;GAGG;AACH,MAAM,UAAU,2BAA2B,CAAS,UAA6C;IAE7F,MAcM,wBAAyC,SAAQ,wCAAwC;QAd/F;;YAgBI;;eAEG;YAEa,eAAU,GAAa,UAAU,CAAC;SACrD;;yHAPK,wBAAwB;6GAAxB,wBAAwB,mJCjDlC,6oBAMe,2CDoCH,YAAY,+PACZ,aAAa,yLACb,0BAA0B,6LAC1B,eAAe;+FAIjB,wBAAwB;sBAd7B,SAAS;mCAEI,4BAA4B,cAE1B,IAAI,WAEhB;4BACI,YAAY;4BACZ,aAAa;4BACb,0BAA0B;4BAC1B,eAAe;yBAClB,mBACgB,uBAAuB,CAAC,MAAM;kCAQ/B,UAAU;0BADzB,KAAK;;IAIV,OAAO,wBAAwB,CAAC;CACnC","sourcesContent":["import {ChangeDetectionStrategy, Component, Input, Type} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {TooltipModule} from '@anglr/common';\nimport {FormPipesModule} from '@anglr/common/forms';\n\nimport {PropertiesControl} from '../../../../interfaces';\nimport {PropertiesControlBase} from '../propertiesControlBase';\nimport {PropertyTypeControlsModule} from '../../../propertyTypeControls';\n\n/**\n * Component used for displaying default generic properties control, displaying specified properties\n */\n@Component(\n{\n    selector: 'default-generic-properties-control',\n    templateUrl: 'genericPropertiesControl.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DefaultGenericPropertiesControlComponent<TOptions = any> extends PropertiesControlBase<TOptions> implements PropertiesControl<TOptions>\n{\n    //######################### public properties - inputs #########################\n\n    /**\n     * Array of properties that should be displayed by this component\n     */\n    @Input()\n    public properties: string[] = [];\n}\n\n/**\n * Gets generic properties control component for specific properties\n * @param properties - Array of properties which will be displayed in generic properties control\n */\nexport function genericPropertiesControlFor<TModel>(properties: (Extract<keyof TModel, string>)[]): Type<PropertiesControl>\n{\n    @Component(\n    {\n        selector: 'generic-properties-control',\n        templateUrl: 'genericPropertiesControl.component.html',\n        standalone: true,\n        imports:\n        [\n            CommonModule,\n            TooltipModule,\n            PropertyTypeControlsModule,\n            FormPipesModule,\n        ],\n        changeDetection: ChangeDetectionStrategy.OnPush\n    })\n    class GenericPropertiesControl<TOptions = any> extends DefaultGenericPropertiesControlComponent implements PropertiesControl<TOptions>\n    {\n        /**\n         * @inheritdoc\n         */\n        @Input()\n        public override properties: string[] = properties;\n    }\n\n    return GenericPropertiesControl;\n}","<ng-container *ngFor=\"let property of properties\">\n    <!-- TODO pipe for control.control -->\n    <div class=\"properties-form-group\">\n        <label class=\"properties-control-label\">{{propertiesMetadata?.[property]?.name ?? property}} <span *ngIf=\"propertiesMetadata?.[property]?.description\" class=\"fas fa-info-circle\" [tooltip]=\"propertiesMetadata?.[property]?.description\"></span></label>\n        <ng-container [propertyTypeControl]=\"propertiesMetadata?.[property]?.type\" [control]=\"$any(form?.get(property) | asFormControl)\" [values]=\"propertiesMetadata?.[property]?.values ?? []\"></ng-container>\n    </div>\n</ng-container>"]}
+{"version":3,"file":"genericPropertiesControl.component.js","sourceRoot":"","sources":["../../../../../../../layout-editor/src/modules/propertiesControls/components/genericPropertiesControl/genericPropertiesControl.component.ts","../../../../../../../layout-editor/src/modules/propertiesControls/components/genericPropertiesControl/genericPropertiesControl.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAO,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAC,aAAa,EAAC,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAC,eAAe,EAAC,MAAM,qBAAqB,CAAC;AAGpD,OAAO,EAAC,qBAAqB,EAAC,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAC,0BAA0B,EAAC,MAAM,+BAA+B,CAAC;;;;;;AAEzE;;GAEG;AAOH,MAAM,OAAO,wCAAyD,SAAQ,qBAA+B;IAN7G;;QAQI,gFAAgF;QAEhF;;WAEG;QAEI,eAAU,GAAa,EAAE,CAAC;KACpC;;qIATY,wCAAwC;yHAAxC,wCAAwC,uIClBrD,2qBAMe;2FDYF,wCAAwC;kBANpD,SAAS;+BAEI,oCAAoC,mBAE7B,uBAAuB,CAAC,MAAM;8BAUxC,UAAU;sBADhB,KAAK;;AAIV;;;GAGG;AACH,MAAM,UAAU,2BAA2B,CAAS,UAA6C;IAE7F,MAcM,wBAAyC,SAAQ,wCAAwC;QAd/F;;YAgBI;;eAEG;YAEa,eAAU,GAAa,UAAU,CAAC;SACrD;;yHAPK,wBAAwB;6GAAxB,wBAAwB,mJCjDlC,2qBAMe,2CDoCH,YAAY,+PACZ,aAAa,yLACb,0BAA0B,6LAC1B,eAAe;+FAIjB,wBAAwB;sBAd7B,SAAS;mCAEI,4BAA4B,cAE1B,IAAI,WAEhB;4BACI,YAAY;4BACZ,aAAa;4BACb,0BAA0B;4BAC1B,eAAe;yBAClB,mBACgB,uBAAuB,CAAC,MAAM;kCAQ/B,UAAU;0BADzB,KAAK;;IAIV,OAAO,wBAAwB,CAAC;CACnC","sourcesContent":["import {ChangeDetectionStrategy, Component, Input, Type} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {TooltipModule} from '@anglr/common';\nimport {FormPipesModule} from '@anglr/common/forms';\n\nimport {PropertiesControl} from '../../../../interfaces';\nimport {PropertiesControlBase} from '../propertiesControlBase';\nimport {PropertyTypeControlsModule} from '../../../propertyTypeControls';\n\n/**\n * Component used for displaying default generic properties control, displaying specified properties\n */\n@Component(\n{\n    selector: 'default-generic-properties-control',\n    templateUrl: 'genericPropertiesControl.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DefaultGenericPropertiesControlComponent<TOptions = any> extends PropertiesControlBase<TOptions> implements PropertiesControl<TOptions>\n{\n    //######################### public properties - inputs #########################\n\n    /**\n     * Array of properties that should be displayed by this component\n     */\n    @Input()\n    public properties: string[] = [];\n}\n\n/**\n * Gets generic properties control component for specific properties\n * @param properties - Array of properties which will be displayed in generic properties control\n */\nexport function genericPropertiesControlFor<TModel>(properties: (Extract<keyof TModel, string>)[]): Type<PropertiesControl>\n{\n    @Component(\n    {\n        selector: 'generic-properties-control',\n        templateUrl: 'genericPropertiesControl.component.html',\n        standalone: true,\n        imports:\n        [\n            CommonModule,\n            TooltipModule,\n            PropertyTypeControlsModule,\n            FormPipesModule,\n        ],\n        changeDetection: ChangeDetectionStrategy.OnPush\n    })\n    class GenericPropertiesControl<TOptions = any> extends DefaultGenericPropertiesControlComponent implements PropertiesControl<TOptions>\n    {\n        /**\n         * @inheritdoc\n         */\n        @Input()\n        public override properties: string[] = properties;\n    }\n\n    return GenericPropertiesControl;\n}","<ng-container *ngFor=\"let property of properties\">\n    <!-- TODO pipe for control.control -->\n    <div class=\"properties-form-group\" *ngIf=\"form?.get(property)\">\n        <label class=\"properties-control-label\">{{propertiesMetadata?.[property]?.name ?? property}} <span *ngIf=\"propertiesMetadata?.[property]?.description\" class=\"fas fa-info-circle\" [tooltip]=\"propertiesMetadata?.[property]?.description\"></span></label>\n        <ng-container [propertyTypeControl]=\"propertiesMetadata?.[property]?.type\" [control]=\"$any(form?.get(property) | asFormControl)\" [values]=\"propertiesMetadata?.[property]?.values ?? []\"></ng-container>\n    </div>\n</ng-container>"]}

package/es2015/layout-relations/src/components/customComponentOptions/customComponentOptions.component.js

@@ -0,0 +1,146 @@
+import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { DialogRef } from '@angular/cdk/dialog';
+import { CommonModule } from '@angular/common';
+import { MatDialogModule } from '@angular/material/dialog';
+import { FormModelBuilder } from '@anglr/common/forms';
+import { TITLED_DIALOG_DATA } from '@anglr/common/material';
+import { TooltipModule } from '@anglr/common';
+import { GetModelSAPipe, PropertySelectedSAPipe, PropertiesMetadataSAPipe } from '../../pipes';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/dialog";
+import * as i2 from "@anglr/common/forms";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/material/dialog";
+import * as i5 from "@angular/forms";
+import * as i6 from "@anglr/common";
+/**
+ * Component used for displaying and editation of custom component options
+ */
+export class CustomComponentOptionsSAComponent {
+    //######################### constructor #########################
+    constructor(data, dialog, formModelBuilder) {
+        var _a, _b, _c, _d, _e;
+        var _f, _g, _h;
+        this.data = data;
+        this.dialog = dialog;
+        //######################### protected properties - template bindings #########################
+        /**
+         * Instance of form control that is used for selection of component
+         */
+        this.component = new FormControl();
+        /**
+         * Array of used properties for components and their models
+         */
+        this.usedProperties = {};
+        /**
+         * Array of available properties for components and their models
+         */
+        this.availableProperties = {};
+        /**
+         * Array of content components that are available
+         */
+        this.contentComponents = [];
+        this.contentComponents = Object.keys(data.customComponentContentMetadata);
+        this.nameDescriptionForm = formModelBuilder.build({ displayName: '', description: '', });
+        for (const id in this.data.configuration.configurableProperties) {
+            const models = this.data.configuration.configurableProperties[id];
+            (_a = (_f = this.usedProperties)[id]) !== null && _a !== void 0 ? _a : (_f[id] = {});
+            for (const modelName in models) {
+                const properties = models[modelName];
+                this.usedProperties[id][modelName] = [...properties];
+            }
+        }
+        const usedComponents = Object.keys(this.usedProperties);
+        this.contentComponents = this.contentComponents.filter(itm => usedComponents.indexOf(itm) < 0);
+        for (const id in data.customComponentContentMetadata) {
+            const meta = data.customComponentContentMetadata[id];
+            if (!((_c = (_b = meta === null || meta === void 0 ? void 0 : meta.editorMetadata.metaInfo) === null || _b === void 0 ? void 0 : _b.optionsMetadata) === null || _c === void 0 ? void 0 : _c.propertiesMetadata)) {
+                continue;
+            }
+            for (const propMeta of meta.editorMetadata.metaInfo.optionsMetadata.propertiesMetadata) {
+                const model = new propMeta.modelType(undefined);
+                if (!Object.keys(model).length) {
+                    continue;
+                }
+                const modelName = propMeta.modelType.name;
+                (_d = (_g = this.availableProperties)[id]) !== null && _d !== void 0 ? _d : (_g[id] = {});
+                (_e = (_h = this.availableProperties[id])[modelName]) !== null && _e !== void 0 ? _e : (_h[modelName] = []);
+                for (const prop in model) {
+                    this.availableProperties[id][modelName].push(prop);
+                }
+            }
+        }
+    }
+    //######################### protected methods - template bindings #########################
+    /**
+     * Adds component from custom component layout
+     */
+    addComponent() {
+        var _a;
+        if (!this.component.value) {
+            return;
+        }
+        this.usedProperties[this.component.value] = {};
+        const index = this.contentComponents.indexOf(this.component.value);
+        if (index >= 0) {
+            this.contentComponents.splice(index, 1);
+            this.component.setValue((_a = this.contentComponents[0]) !== null && _a !== void 0 ? _a : null);
+        }
+    }
+    /**
+     * Removes component options
+     * @param id - Id of component that should be removed
+     */
+    removeComponent(id) {
+        delete this.usedProperties[id];
+        this.contentComponents.push(id);
+        if (this.contentComponents.length == 1) {
+            this.component.setValue(this.contentComponents[0]);
+        }
+    }
+    /**
+     * Toggle selected property in component in model
+     * @param id - Id of component to be edited
+     * @param modelName - Name of model to be edited
+     * @param propertyName - Name of property to be toggled
+     */
+    toggleSelected(id, modelName, propertyName) {
+        var _a, _b;
+        var _c, _d;
+        (_a = (_c = this.usedProperties)[id]) !== null && _a !== void 0 ? _a : (_c[id] = {});
+        (_b = (_d = this.usedProperties[id])[modelName]) !== null && _b !== void 0 ? _b : (_d[modelName] = []);
+        const index = this.usedProperties[id][modelName].indexOf(propertyName);
+        //remove
+        if (index >= 0) {
+            this.usedProperties[id][modelName].splice(index, 1);
+            this.usedProperties[id][modelName] = [...this.usedProperties[id][modelName]];
+        }
+        //add
+        else {
+            this.usedProperties[id][modelName] =
+                [
+                    ...this.usedProperties[id][modelName],
+                    propertyName,
+                ];
+        }
+    }
+}
+CustomComponentOptionsSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: CustomComponentOptionsSAComponent, deps: [{ token: TITLED_DIALOG_DATA }, { token: i1.DialogRef }, { token: i2.FormModelBuilder }], target: i0.ɵɵFactoryTarget.Component });
+CustomComponentOptionsSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: CustomComponentOptionsSAComponent, isStandalone: true, selector: "custom-component-options", providers: [FormModelBuilder], ngImport: i0, template: "<div class=\"dynamic-margin-bottom-small dynamic-flex-row\">\n    <div class=\"dynamic-flex-1 dynamic-margin-right-small\">\n        <label class=\"dynamic-control-label\">Available content components</label>\n\n        <select class=\"dynamic-form-control\" [formControl]=\"component\">\n            <option *ngFor=\"let component of contentComponents\" [value]=\"component\">{{data.customComponentContentMetadata[component]?.metadata?.displayName}}</option>\n        </select>\n    </div>\n\n    <a class=\"dynamic-btn-icon dynamic-margin-left-small dynamic-large-text\" (click)=\"addComponent()\">\n        <span class=\"fas fa-plus\"></span>\n    </a>\n</div>\n\n<div>\n    <div *ngFor=\"let component of usedProperties | keyvalue\" class=\"dynamic-margin-bottom-small\">\n        <div class=\"dynamic-bold dynamic-flex-row \">\n            <span class=\"dynamic-margin-right-small\">{{data.customComponentContentMetadata[component.key]?.metadata?.displayName}}</span>\n            \n            <a class=\"dynamic-btn-icon\" (click)=\"removeComponent(component.key)\">\n                <span class=\"fas fa-times\"></span>\n            </a>\n        </div>\n        \n        <ng-container *ngFor=\"let modelProps of availableProperties[component.key] | keyvalue\">\n            <div *ngFor=\"let prop of modelProps.value\">\n                <label>\n                    <input type=\"checkbox\" (change)=\"toggleSelected(component.key, modelProps.key, prop)\" [checked]=\"usedProperties | propertySelected: component.key: modelProps.key: prop\">\n                    <span>{{(modelProps.key | getModel: data.customComponentContentMetadata[component.key] | propertiesMetadata: data.propsMetadataExtractor)?.[prop]?.name ?? prop}}</span>\n                    <span class=\"fas fa-info-circle dynamic-margin-left-extra-small\" *ngIf=\"(modelProps.key | getModel: data.customComponentContentMetadata[component.key] | propertiesMetadata: data.propsMetadataExtractor)?.[prop]?.description as description\" [tooltip]=\"description\" ></span>\n                </label>\n            </div>\n        </ng-container>\n    </div>\n</div>\n\n<div class=\"dynamic-flex-row dynamic-flex-end\">\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-info dynamic-margin-right-extra-small\" [mat-dialog-close]=\"undefined\">\n        <span>cancel</span>\n    </button>\n\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-primary\" [mat-dialog-close]=\"{configurableProperties: usedProperties, displayName: '', description: ''}\">\n        <span>ok</span>\n    </button>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: PropertySelectedSAPipe, name: "propertySelected" }, { kind: "pipe", type: GetModelSAPipe, name: "getModel" }, { kind: "pipe", type: PropertiesMetadataSAPipe, name: "propertiesMetadata" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "allowHtml", "template", "tooltipOptions", "tooltipVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: CustomComponentOptionsSAComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'custom-component-options', standalone: true, imports: [
+                        CommonModule,
+                        MatDialogModule,
+                        ReactiveFormsModule,
+                        PropertySelectedSAPipe,
+                        GetModelSAPipe,
+                        PropertiesMetadataSAPipe,
+                        TooltipModule,
+                    ], providers: [FormModelBuilder], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dynamic-margin-bottom-small dynamic-flex-row\">\n    <div class=\"dynamic-flex-1 dynamic-margin-right-small\">\n        <label class=\"dynamic-control-label\">Available content components</label>\n\n        <select class=\"dynamic-form-control\" [formControl]=\"component\">\n            <option *ngFor=\"let component of contentComponents\" [value]=\"component\">{{data.customComponentContentMetadata[component]?.metadata?.displayName}}</option>\n        </select>\n    </div>\n\n    <a class=\"dynamic-btn-icon dynamic-margin-left-small dynamic-large-text\" (click)=\"addComponent()\">\n        <span class=\"fas fa-plus\"></span>\n    </a>\n</div>\n\n<div>\n    <div *ngFor=\"let component of usedProperties | keyvalue\" class=\"dynamic-margin-bottom-small\">\n        <div class=\"dynamic-bold dynamic-flex-row \">\n            <span class=\"dynamic-margin-right-small\">{{data.customComponentContentMetadata[component.key]?.metadata?.displayName}}</span>\n            \n            <a class=\"dynamic-btn-icon\" (click)=\"removeComponent(component.key)\">\n                <span class=\"fas fa-times\"></span>\n            </a>\n        </div>\n        \n        <ng-container *ngFor=\"let modelProps of availableProperties[component.key] | keyvalue\">\n            <div *ngFor=\"let prop of modelProps.value\">\n                <label>\n                    <input type=\"checkbox\" (change)=\"toggleSelected(component.key, modelProps.key, prop)\" [checked]=\"usedProperties | propertySelected: component.key: modelProps.key: prop\">\n                    <span>{{(modelProps.key | getModel: data.customComponentContentMetadata[component.key] | propertiesMetadata: data.propsMetadataExtractor)?.[prop]?.name ?? prop}}</span>\n                    <span class=\"fas fa-info-circle dynamic-margin-left-extra-small\" *ngIf=\"(modelProps.key | getModel: data.customComponentContentMetadata[component.key] | propertiesMetadata: data.propsMetadataExtractor)?.[prop]?.description as description\" [tooltip]=\"description\" ></span>\n                </label>\n            </div>\n        </ng-container>\n    </div>\n</div>\n\n<div class=\"dynamic-flex-row dynamic-flex-end\">\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-info dynamic-margin-right-extra-small\" [mat-dialog-close]=\"undefined\">\n        <span>cancel</span>\n    </button>\n\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-primary\" [mat-dialog-close]=\"{configurableProperties: usedProperties, displayName: '', description: ''}\">\n        <span>ok</span>\n    </button>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TITLED_DIALOG_DATA]
+                }] }, { type: i1.DialogRef }, { type: i2.FormModelBuilder }]; } });
+//# sourceMappingURL=customComponentOptions.component.js.map

package/es2015/layout-relations/src/components/customComponentOptions/customComponentOptions.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customComponentOptions.component.js","sourceRoot":"","sources":["../../../../../layout-relations/src/components/customComponentOptions/customComponentOptions.component.ts","../../../../../layout-relations/src/components/customComponentOptions/customComponentOptions.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Inject} from '@angular/core';\nimport {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';\nimport {DialogRef} from '@angular/cdk/dialog';\nimport {CommonModule} from '@angular/common';\nimport {MatDialogModule} from '@angular/material/dialog';\nimport {FormModelBuilder, FormModelGroup} from '@anglr/common/forms';\nimport {TITLED_DIALOG_DATA} from '@anglr/common/material';\nimport {TooltipModule} from '@anglr/common';\nimport {Dictionary} from '@jscrpt/common';\n\nimport {CustomComponentOptionsData} from './customComponentOptions.interface';\nimport {GetModelSAPipe, PropertySelectedSAPipe, PropertiesMetadataSAPipe} from '../../pipes';\nimport {CustomComponentConfiguration} from '../../services';\n\n/**\n * Component used for displaying and editation of custom component options\n */\n@Component(\n{\n    selector: 'custom-component-options',\n    templateUrl: 'customComponentOptions.component.html',\n    standalone: true,\n    imports:\n    [\n        CommonModule,\n        MatDialogModule,\n        ReactiveFormsModule,\n        PropertySelectedSAPipe,\n        GetModelSAPipe,\n        PropertiesMetadataSAPipe,\n        TooltipModule,\n    ],\n    providers: [FormModelBuilder],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class CustomComponentOptionsSAComponent<TConfig extends CustomComponentConfiguration = CustomComponentConfiguration>\n{\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Instance of form control that is used for selection of component\n     */\n    protected component: FormControl<string> = new FormControl();\n\n    /**\n     * Form for name and description of custom component\n     */\n    protected nameDescriptionForm: FormGroup<FormModelGroup<CustomComponentConfiguration>>;\n\n    /**\n     * Array of used properties for components and their models\n     */\n    protected usedProperties: Dictionary<Dictionary<string[]>> = {};\n\n    /**\n     * Array of available properties for components and their models\n     */\n    protected availableProperties: Dictionary<Dictionary<string[]>> = {};\n\n    /**\n     * Array of content components that are available\n     */\n    protected contentComponents: string[] = [];\n\n    //######################### constructor #########################\n    constructor(@Inject(TITLED_DIALOG_DATA) protected data: CustomComponentOptionsData,\n                protected dialog: DialogRef<CustomComponentOptionsSAComponent<TConfig>, TConfig>,\n                formModelBuilder: FormModelBuilder,)\n    {\n        this.contentComponents = Object.keys(data.customComponentContentMetadata);\n        this.nameDescriptionForm = formModelBuilder.build<CustomComponentConfiguration>({displayName: '', description: '',});\n\n        for(const id in this.data.configuration.configurableProperties)\n        {\n            const models = this.data.configuration.configurableProperties[id];\n\n            this.usedProperties[id] ??= {};\n\n            for(const modelName in models)\n            {\n                const properties = models[modelName];\n\n                this.usedProperties[id][modelName] = [...properties];\n            }\n        }\n\n        const usedComponents = Object.keys(this.usedProperties);\n        this.contentComponents = this.contentComponents.filter(itm => usedComponents.indexOf(itm) < 0);\n\n        for(const id in data.customComponentContentMetadata)\n        {\n            const meta = data.customComponentContentMetadata[id];\n\n            if(!meta?.editorMetadata.metaInfo?.optionsMetadata?.propertiesMetadata)\n            {\n                continue;\n            }\n\n            for(const propMeta of meta.editorMetadata.metaInfo.optionsMetadata.propertiesMetadata)\n            {\n                const model = new propMeta.modelType(undefined);\n\n                if(!Object.keys(model).length)\n                {\n                    continue;\n                }\n\n                const modelName = propMeta.modelType.name;\n\n                this.availableProperties[id] ??= {};\n                this.availableProperties[id][modelName] ??= [];\n\n                for(const prop in model)\n                {\n                    this.availableProperties[id][modelName].push(prop);\n                }\n            }\n        }\n    }\n\n    //######################### protected methods - template bindings #########################\n\n    /**\n     * Adds component from custom component layout\n     */\n    protected addComponent(): void\n    {\n        if(!this.component.value)\n        {\n            return;\n        }\n\n        this.usedProperties[this.component.value] = {};\n        const index = this.contentComponents.indexOf(this.component.value);\n\n        if(index >= 0)\n        {\n            this.contentComponents.splice(index, 1);\n            this.component.setValue(this.contentComponents[0] ?? null);\n        }\n    }\n\n    /**\n     * Removes component options\n     * @param id - Id of component that should be removed\n     */\n    protected removeComponent(id: string): void\n    {\n        delete this.usedProperties[id];\n        this.contentComponents.push(id);\n\n        if(this.contentComponents.length == 1)\n        {\n            this.component.setValue(this.contentComponents[0]);\n        }\n    }\n\n    /**\n     * Toggle selected property in component in model\n     * @param id - Id of component to be edited\n     * @param modelName - Name of model to be edited\n     * @param propertyName - Name of property to be toggled\n     */\n    protected toggleSelected(id: string, modelName: string, propertyName: string): void\n    {\n        this.usedProperties[id] ??= {};\n        this.usedProperties[id][modelName] ??= [];\n\n        const index = this.usedProperties[id][modelName].indexOf(propertyName);\n\n        //remove\n        if(index >= 0)\n        {\n            this.usedProperties[id][modelName].splice(index, 1);\n            this.usedProperties[id][modelName] = [...this.usedProperties[id][modelName]];\n        }\n        //add\n        else\n        {\n            this.usedProperties[id][modelName] =\n            [\n                ...this.usedProperties[id][modelName],\n                propertyName,\n            ];\n        }\n    }\n}","<div class=\"dynamic-margin-bottom-small dynamic-flex-row\">\n    <div class=\"dynamic-flex-1 dynamic-margin-right-small\">\n        <label class=\"dynamic-control-label\">Available content components</label>\n\n        <select class=\"dynamic-form-control\" [formControl]=\"component\">\n            <option *ngFor=\"let component of contentComponents\" [value]=\"component\">{{data.customComponentContentMetadata[component]?.metadata?.displayName}}</option>\n        </select>\n    </div>\n\n    <a class=\"dynamic-btn-icon dynamic-margin-left-small dynamic-large-text\" (click)=\"addComponent()\">\n        <span class=\"fas fa-plus\"></span>\n    </a>\n</div>\n\n<div>\n    <div *ngFor=\"let component of usedProperties | keyvalue\" class=\"dynamic-margin-bottom-small\">\n        <div class=\"dynamic-bold dynamic-flex-row \">\n            <span class=\"dynamic-margin-right-small\">{{data.customComponentContentMetadata[component.key]?.metadata?.displayName}}</span>\n            \n            <a class=\"dynamic-btn-icon\" (click)=\"removeComponent(component.key)\">\n                <span class=\"fas fa-times\"></span>\n            </a>\n        </div>\n        \n        <ng-container *ngFor=\"let modelProps of availableProperties[component.key] | keyvalue\">\n            <div *ngFor=\"let prop of modelProps.value\">\n                <label>\n                    <input type=\"checkbox\" (change)=\"toggleSelected(component.key, modelProps.key, prop)\" [checked]=\"usedProperties | propertySelected: component.key: modelProps.key: prop\">\n                    <span>{{(modelProps.key | getModel: data.customComponentContentMetadata[component.key] | propertiesMetadata: data.propsMetadataExtractor)?.[prop]?.name ?? prop}}</span>\n                    <span class=\"fas fa-info-circle dynamic-margin-left-extra-small\" *ngIf=\"(modelProps.key | getModel: data.customComponentContentMetadata[component.key] | propertiesMetadata: data.propsMetadataExtractor)?.[prop]?.description as description\" [tooltip]=\"description\" ></span>\n                </label>\n            </div>\n        </ng-container>\n    </div>\n</div>\n\n<div class=\"dynamic-flex-row dynamic-flex-end\">\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-info dynamic-margin-right-extra-small\" [mat-dialog-close]=\"undefined\">\n        <span>cancel</span>\n    </button>\n\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-primary\" [mat-dialog-close]=\"{configurableProperties: usedProperties, displayName: '', description: ''}\">\n        <span>ok</span>\n    </button>\n</div>"]}

package/es2015/layout-relations/src/components/customComponentOptions/customComponentOptions.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=customComponentOptions.interface.js.map

package/es2015/layout-relations/src/components/customComponentOptions/customComponentOptions.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customComponentOptions.interface.js","sourceRoot":"","sources":["../../../../../layout-relations/src/components/customComponentOptions/customComponentOptions.interface.ts"],"names":[],"mappings":"","sourcesContent":["import {LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {LayoutEditorMetadataDescriptor, LayoutEditorPropertyMetadataExtractor} from '@anglr/dynamic/layout-editor';\nimport {Dictionary} from '@jscrpt/common';\n\nimport {CustomComponentConfiguration} from '../../services';\n\n/**\n * Data that are stored for content component\n */\nexport interface ContentComponentData\n{\n    /**\n     * Metadata of component\n     */\n    metadata: LayoutComponentMetadata;\n\n    /**\n     * Editor metadata of component\n     */\n    editorMetadata: LayoutEditorMetadataDescriptor;\n}\n\n/**\n * Data that are passed to custom component options dialog\n */\nexport interface CustomComponentOptionsData<TConfig extends CustomComponentConfiguration = CustomComponentConfiguration>\n{\n    /**\n     * Metadata for each component in custom component\n     */\n    customComponentContentMetadata: Dictionary<ContentComponentData|undefined|null>;\n\n    /**\n     * Current value of configuration\n     */\n    configuration: TConfig;\n\n    /**\n     * Instance of property metadata extractor for models\n     */\n    propsMetadataExtractor: LayoutEditorPropertyMetadataExtractor;\n}"]}

package/es2015/layout-relations/src/components/index.js

@@ -1,5 +1,5 @@
 export * from './configureNodeEndpoint/configureNodeEndpoint.component';
 export * from './configureNodeEndpoint/configureNodeEndpoint.model';
-export * from './contentOptionsSelection/contentOptionsSelection.component';
-export * from './contentOptionsSelection/contentOptionsSelection.interface';
+export * from './customComponentOptions/customComponentOptions.component';
+export * from './customComponentOptions/customComponentOptions.interface';
 //# sourceMappingURL=index.js.map

package/es2015/layout-relations/src/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../layout-relations/src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,yDAAyD,CAAC;AACxE,cAAc,qDAAqD,CAAC;AACpE,cAAc,6DAA6D,CAAC;AAC5E,cAAc,6DAA6D,CAAC","sourcesContent":["export * from './configureNodeEndpoint/configureNodeEndpoint.component';\nexport * from './configureNodeEndpoint/configureNodeEndpoint.model';\nexport * from './contentOptionsSelection/contentOptionsSelection.component';\nexport * from './contentOptionsSelection/contentOptionsSelection.interface';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../layout-relations/src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,yDAAyD,CAAC;AACxE,cAAc,qDAAqD,CAAC;AACpE,cAAc,2DAA2D,CAAC;AAC1E,cAAc,2DAA2D,CAAC","sourcesContent":["export * from './configureNodeEndpoint/configureNodeEndpoint.component';\nexport * from './configureNodeEndpoint/configureNodeEndpoint.model';\nexport * from './customComponentOptions/customComponentOptions.component';\nexport * from './customComponentOptions/customComponentOptions.interface';\n"]}

package/es2015/layout-relations/src/directives/index.js

@@ -1,2 +1,2 @@
-export * from './showContentOptionsSelection/showContentOptionsSelection.directive';
+export * from './showCustomComponentOptions/showCustomComponentOptions.directive';
 //# sourceMappingURL=index.js.map

package/es2015/layout-relations/src/directives/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../layout-relations/src/directives/index.ts"],"names":[],"mappings":"AAAA,cAAc,qEAAqE,CAAC","sourcesContent":["export * from './showContentOptionsSelection/showContentOptionsSelection.directive';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../layout-relations/src/directives/index.ts"],"names":[],"mappings":"AAAA,cAAc,mEAAmE,CAAC","sourcesContent":["export * from './showCustomComponentOptions/showCustomComponentOptions.directive';\n"]}

package/es2015/layout-relations/src/directives/showCustomComponentOptions/showCustomComponentOptions.directive.js

@@ -0,0 +1,97 @@
+import { __awaiter } from "tslib";
+import { Directive, HostListener, Injector, Input } from '@angular/core';
+import { TitledDialogService } from '@anglr/common/material';
+import { LayoutEditorPropertyMetadataExtractor } from '@anglr/dynamic/layout-editor';
+import { lastValueFrom } from '@jscrpt/common/rxjs';
+import { CustomComponentOptionsSAComponent } from '../../components';
+import { getCustomComponentMeta } from '../../misc/utils';
+import { CustomComponentsRegister } from '../../services';
+import * as i0 from "@angular/core";
+import * as i1 from "@anglr/common/material";
+import * as i2 from "../../services";
+import * as i3 from "@anglr/dynamic/layout-editor";
+/**
+ * Directive that is used for displaying custom component options
+ */
+export class ShowCustomComponentOptionsSADirective {
+    //######################### constructor #########################
+    constructor(injector, dialogSvc, customComponentsRegister, propsMetadataExtractor) {
+        this.injector = injector;
+        this.dialogSvc = dialogSvc;
+        this.customComponentsRegister = customComponentsRegister;
+        this.propsMetadataExtractor = propsMetadataExtractor;
+        //######################### protected properties #########################
+        /**
+         * Metadata for each component in custom component
+         */
+        this.customComponentContentMetadata = {};
+    }
+    //######################### public methods - implementation of OnChanges #########################
+    /**
+     * Called when input value changes
+     */
+    ngOnChanges() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.name) {
+                return;
+            }
+            const result = (yield getCustomComponentMeta(this.name, this.injector));
+            if (!result) {
+                return;
+            }
+            this.customComponentContentMetadata = result.contentMetadata;
+            this.customComponentMetadata = result.metadata;
+        });
+    }
+    //######################### public methods - implementation of OnInit #########################
+    /**
+     * Initialize component
+     */
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.name) {
+                throw new Error('Please provide name of custom component for its options');
+            }
+        });
+    }
+    //######################### protected methods - host #########################
+    /**
+     * Shows content options selection dialog
+     * @param event - Event that occured
+     */
+    show(event) {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function* () {
+            event.preventDefault();
+            event.stopPropagation();
+            const result = yield lastValueFrom(this.dialogSvc.open(CustomComponentOptionsSAComponent, {
+                title: 'custom component options',
+                width: '75vw',
+                data: {
+                    customComponentContentMetadata: this.customComponentContentMetadata,
+                    configuration: (_b = this.customComponentsRegister.getConfigurationForComponent((_a = this.name) !== null && _a !== void 0 ? _a : '')) !== null && _b !== void 0 ? _b : {},
+                    propsMetadataExtractor: this.propsMetadataExtractor,
+                }
+            }).afterClosed());
+            if (result) {
+                yield this.customComponentsRegister.setConfigurationForComponent((_c = this.name) !== null && _c !== void 0 ? _c : '', result);
+            }
+        });
+    }
+}
+ShowCustomComponentOptionsSADirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ShowCustomComponentOptionsSADirective, deps: [{ token: i0.Injector }, { token: i1.TitledDialogService }, { token: i2.CustomComponentsRegister }, { token: i3.LayoutEditorPropertyMetadataExtractor }], target: i0.ɵɵFactoryTarget.Directive });
+ShowCustomComponentOptionsSADirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.0", type: ShowCustomComponentOptionsSADirective, isStandalone: true, selector: "[showCustomComponentOptions]", inputs: { name: ["showCustomComponentOptions", "name"] }, host: { listeners: { "click": "show($event)" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ShowCustomComponentOptionsSADirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[showCustomComponentOptions]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.TitledDialogService }, { type: i2.CustomComponentsRegister }, { type: i3.LayoutEditorPropertyMetadataExtractor }]; }, propDecorators: { name: [{
+                type: Input,
+                args: ['showCustomComponentOptions']
+            }], show: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+//# sourceMappingURL=showCustomComponentOptions.directive.js.map

package/es2015/layout-relations/src/directives/showCustomComponentOptions/showCustomComponentOptions.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"showCustomComponentOptions.directive.js","sourceRoot":"","sources":["../../../../../layout-relations/src/directives/showCustomComponentOptions/showCustomComponentOptions.directive.ts"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAoB,MAAM,eAAe,CAAC;AAE1F,OAAO,EAAC,mBAAmB,EAAC,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAC,qCAAqC,EAAC,MAAM,8BAA8B,CAAC;AACnF,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAmD,iCAAiC,EAAC,MAAM,kBAAkB,CAAC;AACrH,OAAO,EAAC,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAA+B,wBAAwB,EAAC,MAAM,gBAAgB,CAAC;;;;;AAEtF;;GAEG;AAMH,MAAM,OAAO,qCAAqC;IAsB9C,iEAAiE;IACjE,YAAsB,QAAkB,EAClB,SAA8B,EAC9B,wBAA2D,EAC3D,sBAA6D;QAH7D,aAAQ,GAAR,QAAQ,CAAU;QAClB,cAAS,GAAT,SAAS,CAAqB;QAC9B,6BAAwB,GAAxB,wBAAwB,CAAmC;QAC3D,2BAAsB,GAAtB,sBAAsB,CAAuC;QAxBnF,0EAA0E;QAE1E;;WAEG;QACO,mCAA8B,GAAoD,EAAE,CAAC;IAqB/F,CAAC;IAED,kGAAkG;IAElG;;OAEG;IACU,WAAW;;YAEpB,IAAG,CAAC,IAAI,CAAC,IAAI,EACb;gBACI,OAAO;aACV;YAED,MAAM,MAAM,GAAG,CAAC,MAAM,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;YAExE,IAAG,CAAC,MAAM,EACV;gBACI,OAAO;aACV;YAED,IAAI,CAAC,8BAA8B,GAAG,MAAM,CAAC,eAAe,CAAC;YAC7D,IAAI,CAAC,uBAAuB,GAAG,MAAM,CAAC,QAAQ,CAAC;QACnD,CAAC;KAAA;IAED,+FAA+F;IAE/F;;OAEG;IACU,QAAQ;;YAEjB,IAAG,CAAC,IAAI,CAAC,IAAI,EACb;gBACI,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAC;aAC9E;QACL,CAAC;KAAA;IAED,8EAA8E;IAE9E;;;OAGG;IAEa,IAAI,CAAC,KAAiB;;;YAElC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAExB,MAAM,MAAM,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAwF,iCAAiC,EAC/K;gBACI,KAAK,EAAE,0BAA0B;gBACjC,KAAK,EAAE,MAAM;gBACb,IAAI,EACJ;oBACI,8BAA8B,EAAE,IAAI,CAAC,8BAA8B;oBACnE,aAAa,EAAE,MAAA,IAAI,CAAC,wBAAwB,CAAC,4BAA4B,CAAC,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,CAAC,mCAAI,EAAE;oBAChG,sBAAsB,EAAE,IAAI,CAAC,sBAAsB;iBACtD;aACJ,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;YAElB,IAAG,MAAM,EACT;gBACI,MAAM,IAAI,CAAC,wBAAwB,CAAC,4BAA4B,CAAC,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,EAAE,MAAM,CAAC,CAAC;aAC7F;;KACJ;;kIA9FQ,qCAAqC;sHAArC,qCAAqC;2FAArC,qCAAqC;kBALjD,SAAS;mBACV;oBACI,QAAQ,EAAE,8BAA8B;oBACxC,UAAU,EAAE,IAAI;iBACnB;4NAqBU,IAAI;sBADV,KAAK;uBAAC,4BAA4B;gBAsDnB,IAAI;sBADnB,YAAY;uBAAC,OAAO,EAAE,CAAC,QAAQ,CAAC","sourcesContent":["import {Directive, HostListener, Injector, Input, OnChanges, OnInit} from '@angular/core';\nimport {LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {TitledDialogService} from '@anglr/common/material';\nimport {LayoutEditorPropertyMetadataExtractor} from '@anglr/dynamic/layout-editor';\nimport {lastValueFrom} from '@jscrpt/common/rxjs';\nimport {Dictionary} from '@jscrpt/common';\n\nimport {ContentComponentData, CustomComponentOptionsData, CustomComponentOptionsSAComponent} from '../../components';\nimport {getCustomComponentMeta} from '../../misc/utils';\nimport {CustomComponentConfiguration, CustomComponentsRegister} from '../../services';\n\n/**\n * Directive that is used for displaying custom component options\n */\n@Directive(\n{\n    selector: '[showCustomComponentOptions]',\n    standalone: true,\n})\nexport class ShowCustomComponentOptionsSADirective<TConfig extends CustomComponentConfiguration = CustomComponentConfiguration> implements OnInit, OnChanges\n{\n    //######################### protected properties #########################\n\n    /**\n     * Metadata for each component in custom component\n     */\n    protected customComponentContentMetadata: Dictionary<ContentComponentData|undefined|null> = {};\n\n    /**\n     * Custom component layout metadata\n     */\n    protected customComponentMetadata: LayoutComponentMetadata|undefined|null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Name of custom component which will be edited\n     */\n    @Input('showCustomComponentOptions')\n    public name: string|undefined|null;\n\n    //######################### constructor #########################\n    constructor(protected injector: Injector,\n                protected dialogSvc: TitledDialogService,\n                protected customComponentsRegister: CustomComponentsRegister<TConfig>,\n                protected propsMetadataExtractor: LayoutEditorPropertyMetadataExtractor,)\n    {\n    }\n\n    //######################### public methods - implementation of OnChanges #########################\n    \n    /**\n     * Called when input value changes\n     */\n    public async ngOnChanges(): Promise<void>\n    {\n        if(!this.name)\n        {\n            return;\n        }\n\n        const result = (await getCustomComponentMeta(this.name, this.injector));\n\n        if(!result)\n        {\n            return;\n        }\n\n        this.customComponentContentMetadata = result.contentMetadata;\n        this.customComponentMetadata = result.metadata;\n    }\n\n    //######################### public methods - implementation of OnInit #########################\n\n    /**\n     * Initialize component\n     */\n    public async ngOnInit(): Promise<void>\n    {\n        if(!this.name)\n        {\n            throw new Error('Please provide name of custom component for its options');\n        }\n    }\n    \n    //######################### protected methods - host #########################\n\n    /**\n     * Shows content options selection dialog\n     * @param event - Event that occured\n     */\n    @HostListener('click', ['$event'])\n    protected async show(event: MouseEvent): Promise<void>\n    {\n        event.preventDefault();\n        event.stopPropagation();\n        \n        const result = await lastValueFrom(this.dialogSvc.open<CustomComponentOptionsSAComponent, CustomComponentOptionsData, TConfig|undefined|null>(CustomComponentOptionsSAComponent,\n        {\n            title: 'custom component options',\n            width: '75vw',\n            data:\n            {\n                customComponentContentMetadata: this.customComponentContentMetadata,\n                configuration: this.customComponentsRegister.getConfigurationForComponent(this.name ?? '') ?? {},\n                propsMetadataExtractor: this.propsMetadataExtractor,\n            }\n        }).afterClosed());\n\n        if(result)\n        {\n            await this.customComponentsRegister.setConfigurationForComponent(this.name ?? '', result);\n        }\n    }\n}"]}

package/es2015/layout-relations/src/dynamicItems/customComponent/customComponent.options.js.map

@@ -1 +1 @@
-{"version":3,"file":"customComponent.options.js","sourceRoot":"","sources":["../../../../../layout-relations/src/dynamicItems/customComponent/customComponent.options.ts"],"names":[],"mappings":"","sourcesContent":["import {LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {Dictionary} from '@jscrpt/common';\n\n/**\n * Options for custom component component\n */\nexport interface CustomComponentComponentOptions\n{\n    /**\n     * Name of custom component, used for obtaining metadata\n     */\n    name: string;\n\n    /**\n     * Represents layout metadata for all placeholders used within custom component\n     */\n    placeholderContainers: Dictionary<LayoutComponentMetadata>|undefined|null;\n\n    /**\n     * Static options for content components\n     */\n    contentOptions: Dictionary<unknown>;\n\n    /**\n     * Represents components that have custom options and what properties are set\n     */\n    usedComponents: Dictionary<string[]>;\n}\n\n/**\n * Options for custom component relations\n */\nexport interface CustomComponentRelationsOptions\n{\n    /**\n     * Name of custom component, used for obtaining metadata\n     */\n    name: string;\n}"]}
+{"version":3,"file":"customComponent.options.js","sourceRoot":"","sources":["../../../../../layout-relations/src/dynamicItems/customComponent/customComponent.options.ts"],"names":[],"mappings":"","sourcesContent":["import {LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {Dictionary} from '@jscrpt/common';\n\n/**\n * Options for custom component component\n */\nexport interface CustomComponentComponentOptions\n{\n    /**\n     * Name of custom component, used for obtaining metadata\n     */\n    name: string;\n\n    /**\n     * Represents layout metadata for all placeholders used within custom component\n     */\n    placeholderContainers: Dictionary<LayoutComponentMetadata>|undefined|null;\n\n    /**\n     * Static options for content components\n     */\n    contentOptions: Dictionary<unknown>;\n}\n\n/**\n * Options for custom component relations\n */\nexport interface CustomComponentRelationsOptions\n{\n    /**\n     * Name of custom component, used for obtaining metadata\n     */\n    name: string;\n}"]}

package/es2015/layout-relations/src/dynamicItems/customComponent/metadata/customComponent.model.js

@@ -14,10 +14,6 @@ export class CustomComponentModel {
          * @inheritdoc
          */
         this.contentOptions = {};
-        /**
-         * @inheritdoc
-         */
-        this.usedComponents = {};
         mapValuesToThis.bind(this)(value);
     }
 }

package/es2015/layout-relations/src/dynamicItems/customComponent/metadata/customComponent.model.js.map

@@ -1 +1 @@
-{"version":3,"file":"customComponent.model.js","sourceRoot":"","sources":["../../../../../../layout-relations/src/dynamicItems/customComponent/metadata/customComponent.model.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAI3D;;GAEG;AACH,MAAM,OAAO,oBAAoB;IAwB7B,iEAAiE;IACjE,YAAY,KAAqD;QAvBjE,uEAAuE;QAEvE;;WAEG;QACI,SAAI,GAAW,EAAE,CAAC;QAOzB;;WAEG;QACI,mBAAc,GAAwB,EAAE,CAAC;QAEhD;;WAEG;QACI,mBAAc,GAAyB,EAAE,CAAC;QAK7C,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC;CACJ","sourcesContent":["import {LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {Dictionary, mapValuesToThis} from '@jscrpt/common';\n\nimport {CustomComponentComponentOptions} from '../customComponent.options';\n\n/**\n * Custom component model for properties editor\n */\nexport class CustomComponentModel implements CustomComponentComponentOptions\n{\n    //######################### public properties #########################\n\n    /**\n     * @inheritdoc\n     */\n    public name: string = '';\n\n    /**\n     * @inheritdoc\n     */\n    public placeholderContainers: Dictionary<LayoutComponentMetadata>|undefined|null;\n\n    /**\n     * @inheritdoc\n     */\n    public contentOptions: Dictionary<unknown> = {};\n\n    /**\n     * @inheritdoc\n     */\n    public usedComponents: Dictionary<string[]> = {};\n\n    //######################### constructor #########################\n    constructor(value: CustomComponentComponentOptions|undefined|null)\n    {\n        mapValuesToThis.bind(this)(value);\n    }\n}"]}
+{"version":3,"file":"customComponent.model.js","sourceRoot":"","sources":["../../../../../../layout-relations/src/dynamicItems/customComponent/metadata/customComponent.model.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAI3D;;GAEG;AACH,MAAM,OAAO,oBAAoB;IAmB7B,iEAAiE;IACjE,YAAY,KAAqD;QAlBjE,uEAAuE;QAEvE;;WAEG;QACI,SAAI,GAAW,EAAE,CAAC;QAOzB;;WAEG;QACI,mBAAc,GAAwB,EAAE,CAAC;QAK5C,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC;CACJ","sourcesContent":["import {LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {Dictionary, mapValuesToThis} from '@jscrpt/common';\n\nimport {CustomComponentComponentOptions} from '../customComponent.options';\n\n/**\n * Custom component model for properties editor\n */\nexport class CustomComponentModel implements CustomComponentComponentOptions\n{\n    //######################### public properties #########################\n\n    /**\n     * @inheritdoc\n     */\n    public name: string = '';\n\n    /**\n     * @inheritdoc\n     */\n    public placeholderContainers: Dictionary<LayoutComponentMetadata>|undefined|null;\n\n    /**\n     * @inheritdoc\n     */\n    public contentOptions: Dictionary<unknown> = {};\n\n    //######################### constructor #########################\n    constructor(value: CustomComponentComponentOptions|undefined|null)\n    {\n        mapValuesToThis.bind(this)(value);\n    }\n}"]}