@anglr/dynamic 1.0.0-beta.20241108054607 → 1.0.0-beta.20241112190317

package/es2022/basic-components/src/dynamicItems/block/block.component.js

@@ -9,15 +9,15 @@ import * as i0 from "@angular/core";
  * Component used for displaying block
  */
 let BlockSAComponent = class BlockSAComponent extends LayoutComponentBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: BlockSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: BlockSAComponent, isStandalone: true, selector: "block", usesInheritance: true, ngImport: i0, template: "<ng-container *layoutComponentRenderer=\"options?.content\"/>", styles: [":host{display: block;}"], dependencies: [{ kind: "directive", type: LayoutComponentRendererSADirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererCallback", "layoutComponentRendererProviders"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: BlockSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: BlockSAComponent, isStandalone: true, selector: "block", usesInheritance: true, ngImport: i0, template: "<ng-container *layoutComponentRenderer=\"options?.content\"/>", styles: [":host{display: block;}"], dependencies: [{ kind: "directive", type: LayoutComponentRendererSADirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererCallback", "layoutComponentRendererProviders"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 BlockSAComponent = __decorate([
     DescendantsGetter(options => options?.content ? [options?.content] : []),
     LayoutEditorMetadata(BlockLayoutMetadataLoader)
 ], BlockSAComponent);
 export { BlockSAComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: BlockSAComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: BlockSAComponent, decorators: [{
             type: Component,
             args: [{ selector: 'block', standalone: true, imports: [
                         LayoutComponentRendererSADirective,

package/es2022/basic-components/src/dynamicItems/block/block.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"block.component.js","sourceRoot":"","sources":["../../../../../basic-components/src/dynamicItems/block/block.component.ts","../../../../../basic-components/src/dynamicItems/block/block.component.html"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAC,qBAAqB,EAAC,MAAM,eAAe,CAAC;AACpD,OAAO,EAAkB,mBAAmB,EAAE,kCAAkC,EAAC,MAAM,uBAAuB,CAAC;AAC/G,OAAO,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,8BAA8B,CAAC;AAGrF,OAAO,EAAC,yBAAyB,EAAC,MAAM,kBAAkB,CAAC;;AAE3D;;GAEG;AAeI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,mBAA0C;8GAAnE,gBAAgB;kGAAhB,gBAAgB,wFCzB7B,+DAA2D,gFDmBnD,kCAAkC;;AAM7B,gBAAgB;IAF5B,iBAAiB,CAAwB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/F,oBAAoB,CAAC,yBAAyB,CAAC;GACnC,gBAAgB,CAE5B;;2FAFY,gBAAgB;kBAd5B,SAAS;+BAEI,OAAO,cAGL,IAAI,WAEhB;wBACI,kCAAkC;qBACrC,mBACgB,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\nimport {HostDisplayBlockStyle} from '@anglr/common';\nimport {LayoutComponent, LayoutComponentBase, LayoutComponentRendererSADirective} from '@anglr/dynamic/layout';\nimport {DescendantsGetter, LayoutEditorMetadata} from '@anglr/dynamic/layout-editor';\n\nimport {BlockComponentOptions} from './block.options';\nimport {BlockLayoutMetadataLoader} from './block.metadata';\n\n/**\n * Component used for displaying block\n */\n@Component(\n{\n    selector: 'block',\n    templateUrl: 'block.component.html',\n    styles: [HostDisplayBlockStyle],\n    standalone: true,\n    imports:\n    [\n        LayoutComponentRendererSADirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\n@DescendantsGetter<BlockComponentOptions>(options => options?.content ? [options?.content] : [])\n@LayoutEditorMetadata(BlockLayoutMetadataLoader)\nexport class BlockSAComponent extends LayoutComponentBase<BlockComponentOptions> implements LayoutComponent<BlockComponentOptions>\n{\n}","<ng-container *layoutComponentRenderer=\"options?.content\"/>"]}
+{"version":3,"file":"block.component.js","sourceRoot":"","sources":["../../../../../basic-components/src/dynamicItems/block/block.component.ts","../../../../../basic-components/src/dynamicItems/block/block.component.html"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAC,qBAAqB,EAAC,MAAM,eAAe,CAAC;AACpD,OAAO,EAAkB,mBAAmB,EAAE,kCAAkC,EAAC,MAAM,uBAAuB,CAAC;AAC/G,OAAO,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,8BAA8B,CAAC;AAGrF,OAAO,EAAC,yBAAyB,EAAC,MAAM,kBAAkB,CAAC;;AAE3D;;GAEG;AAeI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,mBAA0C;+GAAnE,gBAAgB;mGAAhB,gBAAgB,wFCzB7B,+DAA2D,gFDmBnD,kCAAkC;;AAM7B,gBAAgB;IAF5B,iBAAiB,CAAwB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/F,oBAAoB,CAAC,yBAAyB,CAAC;GACnC,gBAAgB,CAE5B;;4FAFY,gBAAgB;kBAd5B,SAAS;+BAEI,OAAO,cAGL,IAAI,WAEhB;wBACI,kCAAkC;qBACrC,mBACgB,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\nimport {HostDisplayBlockStyle} from '@anglr/common';\nimport {LayoutComponent, LayoutComponentBase, LayoutComponentRendererSADirective} from '@anglr/dynamic/layout';\nimport {DescendantsGetter, LayoutEditorMetadata} from '@anglr/dynamic/layout-editor';\n\nimport {BlockComponentOptions} from './block.options';\nimport {BlockLayoutMetadataLoader} from './block.metadata';\n\n/**\n * Component used for displaying block\n */\n@Component(\n{\n    selector: 'block',\n    templateUrl: 'block.component.html',\n    styles: [HostDisplayBlockStyle],\n    standalone: true,\n    imports:\n    [\n        LayoutComponentRendererSADirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\n@DescendantsGetter<BlockComponentOptions>(options => options?.content ? [options?.content] : [])\n@LayoutEditorMetadata(BlockLayoutMetadataLoader)\nexport class BlockSAComponent extends LayoutComponentBase<BlockComponentOptions> implements LayoutComponent<BlockComponentOptions>\n{\n}","<ng-container *layoutComponentRenderer=\"options?.content\"/>"]}

package/es2022/basic-components/src/dynamicItems/button/button.component.js

@@ -33,8 +33,8 @@ let ButtonSAComponent = class ButtonSAComponent extends LayoutComponentBase {
     onOptionsSet() {
         this.disabled = this.options?.disabled ?? false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ButtonSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: ButtonSAComponent, isStandalone: true, selector: "button-component", inputs: { disabled: "disabled" }, usesInheritance: true, ngImport: i0, template: "<button class=\"live-events-supported\" [type]=\"options?.type ?? 'button'\" [disabled]=\"disabled\" [ngClass]=\"options?.buttonCssClass ?? ''\" (click)=\"click = {}\" [tooltip]=\"options?.tooltip\">\n    <span [ngClass]=\"options?.icon\"></span>\n    <span>{{options?.text}}</span>\n</button>", styles: [":host{display: block;}"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "allowHtml", "template", "tooltipOptions", "tooltipVisible", "containerElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ButtonSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: ButtonSAComponent, isStandalone: true, selector: "button-component", inputs: { disabled: "disabled" }, usesInheritance: true, ngImport: i0, template: "<button class=\"live-events-supported\" [type]=\"options?.type ?? 'button'\" [disabled]=\"disabled\" [ngClass]=\"options?.buttonCssClass ?? ''\" (click)=\"click = {}\" [tooltip]=\"options?.tooltip\">\n    <span [ngClass]=\"options?.icon\"></span>\n    <span>{{options?.text}}</span>\n</button>", styles: [":host{display: block;}"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "allowHtml", "template", "tooltipOptions", "tooltipVisible", "containerElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 __decorate([
     DynamicOutput({ skipInit: true, sync: true }),
@@ -53,7 +53,7 @@ ButtonSAComponent = __decorate([
     LayoutEditorMetadata(ButtonLayoutMetadataLoader)
 ], ButtonSAComponent);
 export { ButtonSAComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ButtonSAComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ButtonSAComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button-component', standalone: true, imports: [
                         NgClass,

package/es2022/basic-components/src/dynamicItems/button/button.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../../../basic-components/src/dynamicItems/button/button.component.ts","../../../../../basic-components/src/dynamicItems/button/button.component.html"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AACxE,OAAO,EAAC,OAAO,EAAC,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAkB,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAC,oBAAoB,EAAC,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAC,SAAS,EAAE,aAAa,EAAqB,MAAM,0BAA0B,CAAC;AACtF,OAAO,EAAC,uBAAuB,EAAa,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAC,qBAAqB,EAAE,gBAAgB,EAAC,MAAM,eAAe,CAAC;AACtE,OAAO,EAAC,MAAM,EAAY,MAAM,gBAAgB,CAAC;AAGjD,OAAO,EAAC,0BAA0B,EAAE,6BAA6B,EAAC,MAAM,mBAAmB,CAAC;;AAE5F;;GAEG;AA2BI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,mBAA2C;IAA3E;;QASH,gFAAgF;QAEhF;;WAEG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC,yFAAyF;QAEzF;;WAEG;QAEI,UAAK,GAAe,EAAE,CAAC;KAWjC;IATG,2EAA2E;IAE3E;;OAEG;IACgB,YAAY;QAE3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,QAAQ,IAAI,KAAK,CAAC;IACpD,CAAC;8GAjCQ,iBAAiB;kGAAjB,iBAAiB,qICzC9B,uSAGS,gFDoBD,OAAO,oFACP,gBAAgB;;AAwCb;IADN,aAAa,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC;;gDACd;AAvBrB,iBAAiB;IAb7B,SAAS,CACV;QACI,MAAM,EACN;YACI,MAAM,CAAoB,UAAU,CAAC;SACxC;QACD,OAAO,EACP;YACI,MAAM,CAAoB,OAAO,CAAC;SACrC;KACJ,CAAC;IACD,uBAAuB,CAAC,6BAA6B,CAAC;IACtD,oBAAoB,CAAC,0BAA0B,CAAC;GACpC,iBAAiB,CAkC7B;;2FAlCY,iBAAiB;kBA1B7B,SAAS;+BAEI,kBAAkB,cAGhB,IAAI,WAEhB;wBACI,OAAO;wBACP,gBAAgB;qBACnB,mBACgB,uBAAuB,CAAC,MAAM;8BA8BxC,QAAQ;sBADd,KAAK;gBASC,KAAK","sourcesContent":["import {Component, ChangeDetectionStrategy, Input} from '@angular/core';\nimport {NgClass} from '@angular/common';\nimport {LayoutComponent, LayoutComponentBase} from '@anglr/dynamic/layout';\nimport {LayoutEditorMetadata} from '@anglr/dynamic/layout-editor';\nimport {DebugData, DynamicOutput, RelationsComponent} from '@anglr/dynamic/relations';\nimport {RelationsEditorMetadata, VoidObject} from '@anglr/dynamic/relations-editor';\nimport {HostDisplayBlockStyle, TooltipDirective} from '@anglr/common';\nimport {nameof, PromiseOr} from '@jscrpt/common';\n\nimport {ButtonComponentOptions, ButtonComponentRelationsOptions} from './button.options';\nimport {ButtonLayoutMetadataLoader, ButtonRelationsMetadataLoader} from './button.metadata';\n\n/**\n * Component used for displaying button\n */\n@Component(\n{\n    selector: 'button-component',\n    templateUrl: 'button.component.html',\n    styles: [HostDisplayBlockStyle],\n    standalone: true,\n    imports:\n    [\n        NgClass,\n        TooltipDirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\n@DebugData(\n{\n    inputs:\n    [\n        nameof<ButtonSAComponent>('disabled'),\n    ],\n    outputs:\n    [\n        nameof<ButtonSAComponent>('click'),\n    ],\n})\n@RelationsEditorMetadata(ButtonRelationsMetadataLoader)\n@LayoutEditorMetadata(ButtonLayoutMetadataLoader)\nexport class ButtonSAComponent extends LayoutComponentBase<ButtonComponentOptions> implements LayoutComponent<ButtonComponentOptions>, RelationsComponent<ButtonComponentRelationsOptions>\n{\n    //######################### public properties - implementation of RelationsComponent #########################\n\n    /**\n     * @inheritdoc\n     */\n    public relationsOptions: ButtonComponentRelationsOptions|undefined|null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Indication whether is button disabled\n     */\n    @Input()\n    public disabled: boolean = false;\n\n    //######################### public properties - dynamic outputs #########################\n\n    /**\n     * Output used for emitting new void object value when clicked\n     */\n    @DynamicOutput({skipInit: true, sync: true})\n    public click: VoidObject = {};\n\n    //######################### protected - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected override onOptionsSet(): PromiseOr<void>\n    {\n        this.disabled = this.options?.disabled ?? false;\n    }\n}","<button class=\"live-events-supported\" [type]=\"options?.type ?? 'button'\" [disabled]=\"disabled\" [ngClass]=\"options?.buttonCssClass ?? ''\" (click)=\"click = {}\" [tooltip]=\"options?.tooltip\">\n    <span [ngClass]=\"options?.icon\"></span>\n    <span>{{options?.text}}</span>\n</button>"]}
+{"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../../../basic-components/src/dynamicItems/button/button.component.ts","../../../../../basic-components/src/dynamicItems/button/button.component.html"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AACxE,OAAO,EAAC,OAAO,EAAC,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAkB,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAC,oBAAoB,EAAC,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAC,SAAS,EAAE,aAAa,EAAqB,MAAM,0BAA0B,CAAC;AACtF,OAAO,EAAC,uBAAuB,EAAa,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAC,qBAAqB,EAAE,gBAAgB,EAAC,MAAM,eAAe,CAAC;AACtE,OAAO,EAAC,MAAM,EAAY,MAAM,gBAAgB,CAAC;AAGjD,OAAO,EAAC,0BAA0B,EAAE,6BAA6B,EAAC,MAAM,mBAAmB,CAAC;;AAE5F;;GAEG;AA2BI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,mBAA2C;IAA3E;;QASH,gFAAgF;QAEhF;;WAEG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC,yFAAyF;QAEzF;;WAEG;QAEI,UAAK,GAAe,EAAE,CAAC;KAWjC;IATG,2EAA2E;IAE3E;;OAEG;IACgB,YAAY;QAE3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,QAAQ,IAAI,KAAK,CAAC;IACpD,CAAC;+GAjCQ,iBAAiB;mGAAjB,iBAAiB,qICzC9B,uSAGS,gFDoBD,OAAO,oFACP,gBAAgB;;AAwCb;IADN,aAAa,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC;;gDACd;AAvBrB,iBAAiB;IAb7B,SAAS,CACV;QACI,MAAM,EACN;YACI,MAAM,CAAoB,UAAU,CAAC;SACxC;QACD,OAAO,EACP;YACI,MAAM,CAAoB,OAAO,CAAC;SACrC;KACJ,CAAC;IACD,uBAAuB,CAAC,6BAA6B,CAAC;IACtD,oBAAoB,CAAC,0BAA0B,CAAC;GACpC,iBAAiB,CAkC7B;;4FAlCY,iBAAiB;kBA1B7B,SAAS;+BAEI,kBAAkB,cAGhB,IAAI,WAEhB;wBACI,OAAO;wBACP,gBAAgB;qBACnB,mBACgB,uBAAuB,CAAC,MAAM;8BA8BxC,QAAQ;sBADd,KAAK;gBASC,KAAK","sourcesContent":["import {Component, ChangeDetectionStrategy, Input} from '@angular/core';\nimport {NgClass} from '@angular/common';\nimport {LayoutComponent, LayoutComponentBase} from '@anglr/dynamic/layout';\nimport {LayoutEditorMetadata} from '@anglr/dynamic/layout-editor';\nimport {DebugData, DynamicOutput, RelationsComponent} from '@anglr/dynamic/relations';\nimport {RelationsEditorMetadata, VoidObject} from '@anglr/dynamic/relations-editor';\nimport {HostDisplayBlockStyle, TooltipDirective} from '@anglr/common';\nimport {nameof, PromiseOr} from '@jscrpt/common';\n\nimport {ButtonComponentOptions, ButtonComponentRelationsOptions} from './button.options';\nimport {ButtonLayoutMetadataLoader, ButtonRelationsMetadataLoader} from './button.metadata';\n\n/**\n * Component used for displaying button\n */\n@Component(\n{\n    selector: 'button-component',\n    templateUrl: 'button.component.html',\n    styles: [HostDisplayBlockStyle],\n    standalone: true,\n    imports:\n    [\n        NgClass,\n        TooltipDirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\n@DebugData(\n{\n    inputs:\n    [\n        nameof<ButtonSAComponent>('disabled'),\n    ],\n    outputs:\n    [\n        nameof<ButtonSAComponent>('click'),\n    ],\n})\n@RelationsEditorMetadata(ButtonRelationsMetadataLoader)\n@LayoutEditorMetadata(ButtonLayoutMetadataLoader)\nexport class ButtonSAComponent extends LayoutComponentBase<ButtonComponentOptions> implements LayoutComponent<ButtonComponentOptions>, RelationsComponent<ButtonComponentRelationsOptions>\n{\n    //######################### public properties - implementation of RelationsComponent #########################\n\n    /**\n     * @inheritdoc\n     */\n    public relationsOptions: ButtonComponentRelationsOptions|undefined|null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Indication whether is button disabled\n     */\n    @Input()\n    public disabled: boolean = false;\n\n    //######################### public properties - dynamic outputs #########################\n\n    /**\n     * Output used for emitting new void object value when clicked\n     */\n    @DynamicOutput({skipInit: true, sync: true})\n    public click: VoidObject = {};\n\n    //######################### protected - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected override onOptionsSet(): PromiseOr<void>\n    {\n        this.disabled = this.options?.disabled ?? false;\n    }\n}","<button class=\"live-events-supported\" [type]=\"options?.type ?? 'button'\" [disabled]=\"disabled\" [ngClass]=\"options?.buttonCssClass ?? ''\" (click)=\"click = {}\" [tooltip]=\"options?.tooltip\">\n    <span [ngClass]=\"options?.icon\"></span>\n    <span>{{options?.text}}</span>\n</button>"]}

package/es2022/basic-components/src/dynamicItems/button/node/buttonNode.component.js

@@ -6,10 +6,10 @@ import * as i0 from "@angular/core";
  * Relations node component for button
  */
 export class ButtonNodeSAComponent extends RelationsNodeBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ButtonNodeSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: ButtonNodeSAComponent, isStandalone: true, selector: "button-node", usesInheritance: true, ngImport: i0, template: "<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"disabled\" [parent]=\"this\"></relation-node-input>\n                <div>{{'disabled'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'click'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"click\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "component", type: RelationsNodeHeaderSAComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputSAComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputSAComponent, selector: "relation-node-output" }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ButtonNodeSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: ButtonNodeSAComponent, isStandalone: true, selector: "button-node", usesInheritance: true, ngImport: i0, template: "<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"disabled\" [parent]=\"this\"></relation-node-input>\n                <div>{{'disabled'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'click'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"click\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "component", type: RelationsNodeHeaderSAComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputSAComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputSAComponent, selector: "relation-node-output" }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ButtonNodeSAComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ButtonNodeSAComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button-node', standalone: true, imports: [
                         RelationsNodeHeaderSAComponent,

package/es2022/basic-components/src/dynamicItems/button/node/buttonNode.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonNode.component.js","sourceRoot":"","sources":["../../../../../../basic-components/src/dynamicItems/button/node/buttonNode.component.ts","../../../../../../basic-components/src/dynamicItems/button/node/buttonNode.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAgB,iBAAiB,EAAE,4BAA4B,EAAE,6BAA6B,EAAE,8BAA8B,EAAC,MAAM,iCAAiC,CAAC;AAC9K,OAAO,EAAC,4BAA4B,EAAC,MAAM,eAAe,CAAC;;AAE3D;;GAEG;AAeH,MAAM,OAAO,qBAAsB,SAAQ,iBAAiB;8GAA/C,qBAAqB;kGAArB,qBAAqB,8FCrBlC,i1BAkBM,4CDJE,8BAA8B,gHAC9B,4BAA4B,gEAC5B,6BAA6B,4DAC7B,4BAA4B;;2FAIvB,qBAAqB;kBAdjC,SAAS;+BAEI,aAAa,cAEX,IAAI,WAEhB;wBACI,8BAA8B;wBAC9B,4BAA4B;wBAC5B,6BAA6B;wBAC7B,4BAA4B;qBAC/B,mBACgB,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\nimport {RelationsNode, RelationsNodeBase, RelationNodeInputSAComponent, RelationNodeOutputSAComponent, RelationsNodeHeaderSAComponent} from '@anglr/dynamic/relations-editor';\nimport {FirstUppercaseLocalizeSAPipe} from '@anglr/common';\n\n/**\n * Relations node component for button\n */\n@Component(\n{\n    selector: 'button-node',\n    templateUrl: 'buttonNode.component.html',\n    standalone: true,\n    imports:\n    [\n        RelationsNodeHeaderSAComponent,\n        RelationNodeInputSAComponent,\n        RelationNodeOutputSAComponent,\n        FirstUppercaseLocalizeSAPipe,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ButtonNodeSAComponent extends RelationsNodeBase implements RelationsNode\n{\n}","<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"disabled\" [parent]=\"this\"></relation-node-input>\n                <div>{{'disabled'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'click'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"click\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>"]}
+{"version":3,"file":"buttonNode.component.js","sourceRoot":"","sources":["../../../../../../basic-components/src/dynamicItems/button/node/buttonNode.component.ts","../../../../../../basic-components/src/dynamicItems/button/node/buttonNode.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAgB,iBAAiB,EAAE,4BAA4B,EAAE,6BAA6B,EAAE,8BAA8B,EAAC,MAAM,iCAAiC,CAAC;AAC9K,OAAO,EAAC,4BAA4B,EAAC,MAAM,eAAe,CAAC;;AAE3D;;GAEG;AAeH,MAAM,OAAO,qBAAsB,SAAQ,iBAAiB;+GAA/C,qBAAqB;mGAArB,qBAAqB,8FCrBlC,i1BAkBM,4CDJE,8BAA8B,gHAC9B,4BAA4B,gEAC5B,6BAA6B,4DAC7B,4BAA4B;;4FAIvB,qBAAqB;kBAdjC,SAAS;+BAEI,aAAa,cAEX,IAAI,WAEhB;wBACI,8BAA8B;wBAC9B,4BAA4B;wBAC5B,6BAA6B;wBAC7B,4BAA4B;qBAC/B,mBACgB,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\nimport {RelationsNode, RelationsNodeBase, RelationNodeInputSAComponent, RelationNodeOutputSAComponent, RelationsNodeHeaderSAComponent} from '@anglr/dynamic/relations-editor';\nimport {FirstUppercaseLocalizeSAPipe} from '@anglr/common';\n\n/**\n * Relations node component for button\n */\n@Component(\n{\n    selector: 'button-node',\n    templateUrl: 'buttonNode.component.html',\n    standalone: true,\n    imports:\n    [\n        RelationsNodeHeaderSAComponent,\n        RelationNodeInputSAComponent,\n        RelationNodeOutputSAComponent,\n        FirstUppercaseLocalizeSAPipe,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ButtonNodeSAComponent extends RelationsNodeBase implements RelationsNode\n{\n}","<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"disabled\" [parent]=\"this\"></relation-node-input>\n                <div>{{'disabled'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'click'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"click\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>"]}

package/es2022/basic-components/src/dynamicItems/debounceValue/node/debounceValueNode.component.js

@@ -39,10 +39,10 @@ export class DebounceValueNodeSAComponent extends RelationsNodeBase {
             this.debounceTime.patchValue(this.metadata?.relationsOptions.delay);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DebounceValueNodeSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: DebounceValueNodeSAComponent, isStandalone: true, selector: "debounce-value-node", usesInheritance: true, ngImport: i0, template: "<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'debounce value'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small dynamic-margin-bottom-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">{{'debounce time'|firstUppercaseLocalize}}</label>\n        <input type=\"text\" class=\"dynamic-form-control\" [formControl]=\"debounceTime\" number required>\n    </div>\n\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"value\" [parent]=\"this\"></relation-node-input>\n                <div>{{'value'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'value'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"value\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NumberInputModule }, { kind: "directive", type: i2.NumberInputControlValueAccessor, selector: "input[number][formControlName],input[number][formControl],input[number][ngModel]" }, { kind: "directive", type: i2.NumberInputValidatorDirective, selector: "input[number][formControlName],input[number][formControl],input[number][ngModel]" }, { kind: "component", type: RelationsNodeHeaderSAComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputSAComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputSAComponent, selector: "relation-node-output" }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DebounceValueNodeSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: DebounceValueNodeSAComponent, isStandalone: true, selector: "debounce-value-node", usesInheritance: true, ngImport: i0, template: "<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'debounce value'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small dynamic-margin-bottom-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">{{'debounce time'|firstUppercaseLocalize}}</label>\n        <input type=\"text\" class=\"dynamic-form-control\" [formControl]=\"debounceTime\" number required>\n    </div>\n\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"value\" [parent]=\"this\"></relation-node-input>\n                <div>{{'value'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'value'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"value\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NumberInputModule }, { kind: "directive", type: i2.NumberInputControlValueAccessor, selector: "input[number][formControlName],input[number][formControl],input[number][ngModel]" }, { kind: "directive", type: i2.NumberInputValidatorDirective, selector: "input[number][formControlName],input[number][formControl],input[number][ngModel]" }, { kind: "component", type: RelationsNodeHeaderSAComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputSAComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputSAComponent, selector: "relation-node-output" }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DebounceValueNodeSAComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DebounceValueNodeSAComponent, decorators: [{
             type: Component,
             args: [{ selector: 'debounce-value-node', standalone: true, imports: [
                         ReactiveFormsModule,

package/es2022/basic-components/src/dynamicItems/debounceValue/node/debounceValueNode.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"debounceValueNode.component.js","sourceRoot":"","sources":["../../../../../../basic-components/src/dynamicItems/debounceValue/node/debounceValueNode.component.ts","../../../../../../basic-components/src/dynamicItems/debounceValue/node/debounceValueNode.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAC,WAAW,EAAE,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAC,4BAA4B,EAAC,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAgB,iBAAiB,EAAE,4BAA4B,EAAE,6BAA6B,EAAE,8BAA8B,EAAC,MAAM,iCAAiC,CAAC;AAC9K,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;;;;AAIxC;;GAEG;AAiBH,MAAM,OAAO,4BAA6B,SAAQ,iBAAgD;IAhBlG;;QAkBI,8FAA8F;QAE9F;;WAEG;QACO,iBAAY,GAA6B,IAAI,WAAW,CAAS,EAAE,CAAC,CAAC;KA8BlF;IA5BG,mFAAmF;IAEnF;;OAEG;IACa,UAAU;QAEtB,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAE7C,IAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,gBAAgB,EACtE,CAAC;gBACG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,KAAK,GAAG,KAAK,CAAC;gBAE7C,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;YAC/B,CAAC;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IAED;;OAEG;IACgB,WAAW;QAE1B,IAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,EAAE,KAAK,EACzC,CAAC;YACG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACxE,CAAC;IACL,CAAC;8GApCQ,4BAA4B;kGAA5B,4BAA4B,sGC5BzC,ytCAuBM,2CDJE,mBAAmB,syBACnB,iBAAiB,2VACjB,8BAA8B,gHAC9B,4BAA4B,gEAC5B,6BAA6B,4DAC7B,4BAA4B;;2FAIvB,4BAA4B;kBAhBxC,SAAS;+BAEI,qBAAqB,cAEnB,IAAI,WAEhB;wBACI,mBAAmB;wBACnB,iBAAiB;wBACjB,8BAA8B;wBAC9B,4BAA4B;wBAC5B,6BAA6B;wBAC7B,4BAA4B;qBAC/B,mBACgB,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\nimport {FormControl, ReactiveFormsModule} from '@angular/forms';\nimport {FirstUppercaseLocalizeSAPipe} from '@anglr/common';\nimport {NumberInputModule} from '@anglr/common/forms';\nimport {RelationsNode, RelationsNodeBase, RelationNodeInputSAComponent, RelationNodeOutputSAComponent, RelationsNodeHeaderSAComponent} from '@anglr/dynamic/relations-editor';\nimport {isNumber} from '@jscrpt/common';\n\nimport {DebounceValueRelationsOptions} from '../debounceValue.options';\n\n/**\n * Debounce value node component for negation\n */\n@Component(\n{\n    selector: 'debounce-value-node',\n    templateUrl: 'debounceValueNode.component.html',\n    standalone: true,\n    imports:\n    [\n        ReactiveFormsModule,\n        NumberInputModule,\n        RelationsNodeHeaderSAComponent,\n        RelationNodeInputSAComponent,\n        RelationNodeOutputSAComponent,\n        FirstUppercaseLocalizeSAPipe,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DebounceValueNodeSAComponent extends RelationsNodeBase<DebounceValueRelationsOptions> implements RelationsNode<DebounceValueRelationsOptions>\n{\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Form control for handling debounce time\n     */\n    protected debounceTime: FormControl<number|null> = new FormControl<number>(50);\n\n    //######################### protected methods - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    public override initialize(): void\n    {\n        this.debounceTime.valueChanges.subscribe(value =>\n        {\n            if(isNumber(value) && !isNaN(value) && this.metadata?.relationsOptions)\n            {\n                this.metadata.relationsOptions.delay = value;\n\n                this.history.getNewState();\n            }\n        });\n    }\n\n    /**\n     * @inheritdoc\n     */\n    protected override metadataSet(): void\n    {\n        if(this.metadata?.relationsOptions?.delay)\n        {\n            this.debounceTime.patchValue(this.metadata?.relationsOptions.delay);\n        }\n    }\n}","<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'debounce value'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small dynamic-margin-bottom-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">{{'debounce time'|firstUppercaseLocalize}}</label>\n        <input type=\"text\" class=\"dynamic-form-control\" [formControl]=\"debounceTime\" number required>\n    </div>\n\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"value\" [parent]=\"this\"></relation-node-input>\n                <div>{{'value'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'value'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"value\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>"]}
+{"version":3,"file":"debounceValueNode.component.js","sourceRoot":"","sources":["../../../../../../basic-components/src/dynamicItems/debounceValue/node/debounceValueNode.component.ts","../../../../../../basic-components/src/dynamicItems/debounceValue/node/debounceValueNode.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAC,WAAW,EAAE,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAC,4BAA4B,EAAC,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAgB,iBAAiB,EAAE,4BAA4B,EAAE,6BAA6B,EAAE,8BAA8B,EAAC,MAAM,iCAAiC,CAAC;AAC9K,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;;;;AAIxC;;GAEG;AAiBH,MAAM,OAAO,4BAA6B,SAAQ,iBAAgD;IAhBlG;;QAkBI,8FAA8F;QAE9F;;WAEG;QACO,iBAAY,GAA6B,IAAI,WAAW,CAAS,EAAE,CAAC,CAAC;KA8BlF;IA5BG,mFAAmF;IAEnF;;OAEG;IACa,UAAU;QAEtB,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAE7C,IAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,gBAAgB,EACtE,CAAC;gBACG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,KAAK,GAAG,KAAK,CAAC;gBAE7C,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;YAC/B,CAAC;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IAED;;OAEG;IACgB,WAAW;QAE1B,IAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,EAAE,KAAK,EACzC,CAAC;YACG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACxE,CAAC;IACL,CAAC;+GApCQ,4BAA4B;mGAA5B,4BAA4B,sGC5BzC,ytCAuBM,2CDJE,mBAAmB,syBACnB,iBAAiB,2VACjB,8BAA8B,gHAC9B,4BAA4B,gEAC5B,6BAA6B,4DAC7B,4BAA4B;;4FAIvB,4BAA4B;kBAhBxC,SAAS;+BAEI,qBAAqB,cAEnB,IAAI,WAEhB;wBACI,mBAAmB;wBACnB,iBAAiB;wBACjB,8BAA8B;wBAC9B,4BAA4B;wBAC5B,6BAA6B;wBAC7B,4BAA4B;qBAC/B,mBACgB,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\nimport {FormControl, ReactiveFormsModule} from '@angular/forms';\nimport {FirstUppercaseLocalizeSAPipe} from '@anglr/common';\nimport {NumberInputModule} from '@anglr/common/forms';\nimport {RelationsNode, RelationsNodeBase, RelationNodeInputSAComponent, RelationNodeOutputSAComponent, RelationsNodeHeaderSAComponent} from '@anglr/dynamic/relations-editor';\nimport {isNumber} from '@jscrpt/common';\n\nimport {DebounceValueRelationsOptions} from '../debounceValue.options';\n\n/**\n * Debounce value node component for negation\n */\n@Component(\n{\n    selector: 'debounce-value-node',\n    templateUrl: 'debounceValueNode.component.html',\n    standalone: true,\n    imports:\n    [\n        ReactiveFormsModule,\n        NumberInputModule,\n        RelationsNodeHeaderSAComponent,\n        RelationNodeInputSAComponent,\n        RelationNodeOutputSAComponent,\n        FirstUppercaseLocalizeSAPipe,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DebounceValueNodeSAComponent extends RelationsNodeBase<DebounceValueRelationsOptions> implements RelationsNode<DebounceValueRelationsOptions>\n{\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Form control for handling debounce time\n     */\n    protected debounceTime: FormControl<number|null> = new FormControl<number>(50);\n\n    //######################### protected methods - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    public override initialize(): void\n    {\n        this.debounceTime.valueChanges.subscribe(value =>\n        {\n            if(isNumber(value) && !isNaN(value) && this.metadata?.relationsOptions)\n            {\n                this.metadata.relationsOptions.delay = value;\n\n                this.history.getNewState();\n            }\n        });\n    }\n\n    /**\n     * @inheritdoc\n     */\n    protected override metadataSet(): void\n    {\n        if(this.metadata?.relationsOptions?.delay)\n        {\n            this.debounceTime.patchValue(this.metadata?.relationsOptions.delay);\n        }\n    }\n}","<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'debounce value'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small dynamic-margin-bottom-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">{{'debounce time'|firstUppercaseLocalize}}</label>\n        <input type=\"text\" class=\"dynamic-form-control\" [formControl]=\"debounceTime\" number required>\n    </div>\n\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"value\" [parent]=\"this\"></relation-node-input>\n                <div>{{'value'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'value'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"value\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>"]}

package/es2022/basic-components/src/dynamicItems/deconstruct/node/deconstructNode.component.js

@@ -82,10 +82,10 @@ export class DeconstructNodeSAComponent extends RelationsNodeBase {
         }
         return result ?? false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DeconstructNodeSAComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TitledDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: DeconstructNodeSAComponent, isStandalone: true, selector: "deconstruct-node", usesInheritance: true, ngImport: i0, template: "<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'deconstruct'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"object\" [parent]=\"this\"></relation-node-input>\n                <div>{{'object'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\" *ngFor=\"let property of properties\">\n                <div class=\"dynamic-flex-row\">\n                    <div>{{property.name}}</div>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); configureEndpoint(property)\">\n                        <span class=\"fas fa-pen\"></span>\n                    </button>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeProperty(property.name)\">\n                        <span class=\"fas fa-times\"></span>\n                    </button>\n                </div>\n\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"property.name\" [parent]=\"this\"></relation-node-output>\n            </div>\n\n            <div class=\"dynamic-flex-row dynamic-flex-end\">\n                <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-left-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); addProperty()\">\n                    <span class=\"fas fa-plus\"></span>\n                </button>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "component", type: RelationsNodeHeaderSAComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputSAComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputSAComponent, selector: "relation-node-output" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DeconstructNodeSAComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TitledDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: DeconstructNodeSAComponent, isStandalone: true, selector: "deconstruct-node", usesInheritance: true, ngImport: i0, template: "<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'deconstruct'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"object\" [parent]=\"this\"></relation-node-input>\n                <div>{{'object'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\" *ngFor=\"let property of properties\">\n                <div class=\"dynamic-flex-row\">\n                    <div>{{property.name}}</div>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); configureEndpoint(property)\">\n                        <span class=\"fas fa-pen\"></span>\n                    </button>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeProperty(property.name)\">\n                        <span class=\"fas fa-times\"></span>\n                    </button>\n                </div>\n\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"property.name\" [parent]=\"this\"></relation-node-output>\n            </div>\n\n            <div class=\"dynamic-flex-row dynamic-flex-end\">\n                <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-left-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); addProperty()\">\n                    <span class=\"fas fa-plus\"></span>\n                </button>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "component", type: RelationsNodeHeaderSAComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputSAComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputSAComponent, selector: "relation-node-output" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DeconstructNodeSAComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: DeconstructNodeSAComponent, decorators: [{
             type: Component,
             args: [{ selector: 'deconstruct-node', standalone: true, imports: [
                         RelationsNodeHeaderSAComponent,

package/es2022/basic-components/src/dynamicItems/deconstruct/node/deconstructNode.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"deconstructNode.component.js","sourceRoot":"","sources":["../../../../../../basic-components/src/dynamicItems/deconstruct/node/deconstructNode.component.ts","../../../../../../basic-components/src/dynamicItems/deconstruct/node/deconstructNode.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {FirstUppercaseLocalizeSAPipe} from '@anglr/common';\nimport {TitledDialogService} from '@anglr/common/material';\nimport {RelationsNode, RelationsNodeBase, RelationNodeOutputSAComponent, RelationsNodeHeaderSAComponent, RelationNodeInputSAComponent} from '@anglr/dynamic/relations-editor';\nimport {ComponentEndpointDef, ConfigureNodeEndpointData, ConfigureNodeEndpointSAComponent} from '@anglr/dynamic/layout-relations';\nimport {lastValueFrom} from '@jscrpt/common/rxjs';\n\nimport {DeconstructRelationsOptions} from '../deconstruct.options';\n\n/**\n * Relations node component for deconstruct\n */\n@Component(\n{\n    selector: 'deconstruct-node',\n    templateUrl: 'deconstructNode.component.html',\n    standalone: true,\n    imports:\n    [\n        RelationsNodeHeaderSAComponent,\n        RelationNodeInputSAComponent,\n        RelationNodeOutputSAComponent,\n        CommonModule,\n        FirstUppercaseLocalizeSAPipe,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DeconstructNodeSAComponent extends RelationsNodeBase<DeconstructRelationsOptions> implements RelationsNode<DeconstructRelationsOptions>\n{\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Gets added property names\n     */\n    protected get properties(): ComponentEndpointDef[]\n    {\n        if(!this.metadata)\n        {\n            return [];\n        }\n\n        this.metadata.relationsOptions ??= \n        {\n            properties: [],\n        };\n\n        return this.metadata.relationsOptions.properties ?? [];\n    }\n\n    //######################### constructor #########################\n    constructor(changeDetector: ChangeDetectorRef,\n                element: ElementRef<HTMLElement>,\n                protected dialog: TitledDialogService,)\n    {\n        super(changeDetector, element);\n    }\n\n    //######################### protected methods - template bindings #########################\n\n    /**\n     * Adds new property\n     */\n    protected async addProperty(): Promise<void>\n    {\n        const name: ConfigureNodeEndpointData =\n        {\n            name: `property${this.properties.length + 1}`,\n            defaultValue: undefined,\n            noDefaultValue: true,\n            skipInit: false,\n            allowSkipInit: true,\n        };\n\n        await this.configureEndpoint(name);\n    }\n\n    /**\n     * Removes property\n     * @param name - Name of property to be removed\n     */\n    protected removeProperty(name: string): void\n    {\n        let index: number;\n\n        if(this.metadata?.relationsOptions?.properties && (index = this.metadata.relationsOptions.properties.findIndex(itm => itm.name == name)) >= 0)\n        {\n            this.metadata.relationsOptions.properties.splice(index, 1);\n\n            this.history.getNewState();\n        }\n    }\n\n    /**\n     * Configures endpoint\n     * @param endpoint - Endpoint to be configured\n     */\n    protected async configureEndpoint(endpoint: ConfigureNodeEndpointData): Promise<boolean>\n    {\n        const newEndpoint = JSON.parse(JSON.stringify(endpoint));\n        \n        const result = await lastValueFrom(this.dialog.open<ConfigureNodeEndpointSAComponent, ConfigureNodeEndpointData, true|undefined|null>(ConfigureNodeEndpointSAComponent,\n        {\n            title: 'configure property',\n            width: '60vw',\n            data: newEndpoint,\n        }).afterClosed());\n\n        //rename\n        if(result && this.metadata?.relationsOptions)\n        {\n            let index: number;\n\n            if(this.metadata.relationsOptions.properties && (index = this.metadata.relationsOptions.properties.findIndex(itm => itm.name == endpoint.name)) >= 0)\n            {\n                this.metadata.relationsOptions.properties.splice(index, 1);\n                this.metadata.relationsOptions.properties.splice(index, 0, newEndpoint);\n            }\n            else\n            {\n                this.metadata.relationsOptions.properties ??= [];\n                this.metadata.relationsOptions.properties.push(newEndpoint);\n            }\n\n            this.history.getNewState();\n        }\n\n        return result ?? false;\n    }\n}","<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'deconstruct'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"object\" [parent]=\"this\"></relation-node-input>\n                <div>{{'object'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\" *ngFor=\"let property of properties\">\n                <div class=\"dynamic-flex-row\">\n                    <div>{{property.name}}</div>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); configureEndpoint(property)\">\n                        <span class=\"fas fa-pen\"></span>\n                    </button>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeProperty(property.name)\">\n                        <span class=\"fas fa-times\"></span>\n                    </button>\n                </div>\n\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"property.name\" [parent]=\"this\"></relation-node-output>\n            </div>\n\n            <div class=\"dynamic-flex-row dynamic-flex-end\">\n                <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-left-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); addProperty()\">\n                    <span class=\"fas fa-plus\"></span>\n                </button>\n            </div>\n        </div>\n    </div>\n</div>"]}
+{"version":3,"file":"deconstructNode.component.js","sourceRoot":"","sources":["../../../../../../basic-components/src/dynamicItems/deconstruct/node/deconstructNode.component.ts","../../../../../../basic-components/src/dynamicItems/deconstruct/node/deconstructNode.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,UAAU,EAAC,MAAM,eAAe,CAAC;AAChG,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAC,4BAA4B,EAAC,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAC,mBAAmB,EAAC,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAgB,iBAAiB,EAAE,6BAA6B,EAAE,8BAA8B,EAAE,4BAA4B,EAAC,MAAM,iCAAiC,CAAC;AAC9K,OAAO,EAAkD,gCAAgC,EAAC,MAAM,iCAAiC,CAAC;AAClI,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;;;;AAIlD;;GAEG;AAgBH,MAAM,OAAO,0BAA2B,SAAQ,iBAA8C;IAE1F,8FAA8F;IAE9F;;OAEG;IACH,IAAc,UAAU;QAEpB,IAAG,CAAC,IAAI,CAAC,QAAQ,EACjB,CAAC;YACG,OAAO,EAAE,CAAC;QACd,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,gBAAgB;YAC9B;gBACI,UAAU,EAAE,EAAE;aACjB,CAAC;QAEF,OAAO,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,IAAI,EAAE,CAAC;IAC3D,CAAC;IAED,iEAAiE;IACjE,YAAY,cAAiC,EACjC,OAAgC,EACtB,MAA2B;QAE7C,KAAK,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QAFb,WAAM,GAAN,MAAM,CAAqB;IAGjD,CAAC;IAED,2FAA2F;IAE3F;;OAEG;IACO,KAAK,CAAC,WAAW;QAEvB,MAAM,IAAI,GACV;YACI,IAAI,EAAE,WAAW,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;YAC7C,YAAY,EAAE,SAAS;YACvB,cAAc,EAAE,IAAI;YACpB,QAAQ,EAAE,KAAK;YACf,aAAa,EAAE,IAAI;SACtB,CAAC;QAEF,MAAM,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC;IAED;;;OAGG;IACO,cAAc,CAAC,IAAY;QAEjC,IAAI,KAAa,CAAC;QAElB,IAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,EAAE,UAAU,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,EAC7I,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAE3D,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;QAC/B,CAAC;IACL,CAAC;IAED;;;OAGG;IACO,KAAK,CAAC,iBAAiB,CAAC,QAAmC;QAEjE,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;QAEzD,MAAM,MAAM,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAmF,gCAAgC,EACtK;YACI,KAAK,EAAE,oBAAoB;YAC3B,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,WAAW;SACpB,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;QAElB,QAAQ;QACR,IAAG,MAAM,IAAI,IAAI,CAAC,QAAQ,EAAE,gBAAgB,EAC5C,CAAC;YACG,IAAI,KAAa,CAAC;YAElB,IAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EACpJ,CAAC;gBACG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;gBAC3D,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC;YAC5E,CAAC;iBAED,CAAC;gBACG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,KAAK,EAAE,CAAC;gBACjD,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAChE,CAAC;YAED,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;QAC/B,CAAC;QAED,OAAO,MAAM,IAAI,KAAK,CAAC;IAC3B,CAAC;+GApGQ,0BAA0B;mGAA1B,0BAA0B,mGC5BvC,m3DAmCM,4CDfE,8BAA8B,gHAC9B,4BAA4B,gEAC5B,6BAA6B,gEAC7B,YAAY,uJACZ,4BAA4B;;4FAIvB,0BAA0B;kBAftC,SAAS;+BAEI,kBAAkB,cAEhB,IAAI,WAEhB;wBACI,8BAA8B;wBAC9B,4BAA4B;wBAC5B,6BAA6B;wBAC7B,YAAY;wBACZ,4BAA4B;qBAC/B,mBACgB,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {FirstUppercaseLocalizeSAPipe} from '@anglr/common';\nimport {TitledDialogService} from '@anglr/common/material';\nimport {RelationsNode, RelationsNodeBase, RelationNodeOutputSAComponent, RelationsNodeHeaderSAComponent, RelationNodeInputSAComponent} from '@anglr/dynamic/relations-editor';\nimport {ComponentEndpointDef, ConfigureNodeEndpointData, ConfigureNodeEndpointSAComponent} from '@anglr/dynamic/layout-relations';\nimport {lastValueFrom} from '@jscrpt/common/rxjs';\n\nimport {DeconstructRelationsOptions} from '../deconstruct.options';\n\n/**\n * Relations node component for deconstruct\n */\n@Component(\n{\n    selector: 'deconstruct-node',\n    templateUrl: 'deconstructNode.component.html',\n    standalone: true,\n    imports:\n    [\n        RelationsNodeHeaderSAComponent,\n        RelationNodeInputSAComponent,\n        RelationNodeOutputSAComponent,\n        CommonModule,\n        FirstUppercaseLocalizeSAPipe,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DeconstructNodeSAComponent extends RelationsNodeBase<DeconstructRelationsOptions> implements RelationsNode<DeconstructRelationsOptions>\n{\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Gets added property names\n     */\n    protected get properties(): ComponentEndpointDef[]\n    {\n        if(!this.metadata)\n        {\n            return [];\n        }\n\n        this.metadata.relationsOptions ??= \n        {\n            properties: [],\n        };\n\n        return this.metadata.relationsOptions.properties ?? [];\n    }\n\n    //######################### constructor #########################\n    constructor(changeDetector: ChangeDetectorRef,\n                element: ElementRef<HTMLElement>,\n                protected dialog: TitledDialogService,)\n    {\n        super(changeDetector, element);\n    }\n\n    //######################### protected methods - template bindings #########################\n\n    /**\n     * Adds new property\n     */\n    protected async addProperty(): Promise<void>\n    {\n        const name: ConfigureNodeEndpointData =\n        {\n            name: `property${this.properties.length + 1}`,\n            defaultValue: undefined,\n            noDefaultValue: true,\n            skipInit: false,\n            allowSkipInit: true,\n        };\n\n        await this.configureEndpoint(name);\n    }\n\n    /**\n     * Removes property\n     * @param name - Name of property to be removed\n     */\n    protected removeProperty(name: string): void\n    {\n        let index: number;\n\n        if(this.metadata?.relationsOptions?.properties && (index = this.metadata.relationsOptions.properties.findIndex(itm => itm.name == name)) >= 0)\n        {\n            this.metadata.relationsOptions.properties.splice(index, 1);\n\n            this.history.getNewState();\n        }\n    }\n\n    /**\n     * Configures endpoint\n     * @param endpoint - Endpoint to be configured\n     */\n    protected async configureEndpoint(endpoint: ConfigureNodeEndpointData): Promise<boolean>\n    {\n        const newEndpoint = JSON.parse(JSON.stringify(endpoint));\n        \n        const result = await lastValueFrom(this.dialog.open<ConfigureNodeEndpointSAComponent, ConfigureNodeEndpointData, true|undefined|null>(ConfigureNodeEndpointSAComponent,\n        {\n            title: 'configure property',\n            width: '60vw',\n            data: newEndpoint,\n        }).afterClosed());\n\n        //rename\n        if(result && this.metadata?.relationsOptions)\n        {\n            let index: number;\n\n            if(this.metadata.relationsOptions.properties && (index = this.metadata.relationsOptions.properties.findIndex(itm => itm.name == endpoint.name)) >= 0)\n            {\n                this.metadata.relationsOptions.properties.splice(index, 1);\n                this.metadata.relationsOptions.properties.splice(index, 0, newEndpoint);\n            }\n            else\n            {\n                this.metadata.relationsOptions.properties ??= [];\n                this.metadata.relationsOptions.properties.push(newEndpoint);\n            }\n\n            this.history.getNewState();\n        }\n\n        return result ?? false;\n    }\n}","<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'deconstruct'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"object\" [parent]=\"this\"></relation-node-input>\n                <div>{{'object'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\" *ngFor=\"let property of properties\">\n                <div class=\"dynamic-flex-row\">\n                    <div>{{property.name}}</div>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); configureEndpoint(property)\">\n                        <span class=\"fas fa-pen\"></span>\n                    </button>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeProperty(property.name)\">\n                        <span class=\"fas fa-times\"></span>\n                    </button>\n                </div>\n\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"property.name\" [parent]=\"this\"></relation-node-output>\n            </div>\n\n            <div class=\"dynamic-flex-row dynamic-flex-end\">\n                <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-left-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); addProperty()\">\n                    <span class=\"fas fa-plus\"></span>\n                </button>\n            </div>\n        </div>\n    </div>\n</div>"]}

package/es2022/basic-components/src/dynamicItems/empty/node/emptyNode.component.js

@@ -6,10 +6,10 @@ import * as i0 from "@angular/core";
  * Relations node component for empty
  */
 export class EmptyNodeSAComponent extends RelationsNodeBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: EmptyNodeSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: EmptyNodeSAComponent, isStandalone: true, selector: "empty-node", usesInheritance: true, ngImport: i0, template: "<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'empty'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"value\" [parent]=\"this\"></relation-node-input>\n                <div>{{'value'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'result'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"result\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "component", type: RelationsNodeHeaderSAComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputSAComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputSAComponent, selector: "relation-node-output" }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: EmptyNodeSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: EmptyNodeSAComponent, isStandalone: true, selector: "empty-node", usesInheritance: true, ngImport: i0, template: "<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'empty'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"value\" [parent]=\"this\"></relation-node-input>\n                <div>{{'value'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'result'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"result\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "component", type: RelationsNodeHeaderSAComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputSAComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputSAComponent, selector: "relation-node-output" }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: EmptyNodeSAComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: EmptyNodeSAComponent, decorators: [{
             type: Component,
             args: [{ selector: 'empty-node', standalone: true, imports: [
                         RelationsNodeHeaderSAComponent,

package/es2022/basic-components/src/dynamicItems/empty/node/emptyNode.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"emptyNode.component.js","sourceRoot":"","sources":["../../../../../../basic-components/src/dynamicItems/empty/node/emptyNode.component.ts","../../../../../../basic-components/src/dynamicItems/empty/node/emptyNode.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAgB,iBAAiB,EAAE,4BAA4B,EAAE,6BAA6B,EAAE,8BAA8B,EAAC,MAAM,iCAAiC,CAAC;AAC9K,OAAO,EAAC,4BAA4B,EAAC,MAAM,eAAe,CAAC;;AAE3D;;GAEG;AAeH,MAAM,OAAO,oBAAqB,SAAQ,iBAAiB;8GAA9C,oBAAoB;kGAApB,oBAAoB,6FCrBjC,u3BAkBM,4CDJE,8BAA8B,gHAC9B,4BAA4B,gEAC5B,6BAA6B,4DAC7B,4BAA4B;;2FAIvB,oBAAoB;kBAdhC,SAAS;+BAEI,YAAY,cAEV,IAAI,WAEhB;wBACI,8BAA8B;wBAC9B,4BAA4B;wBAC5B,6BAA6B;wBAC7B,4BAA4B;qBAC/B,mBACgB,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\nimport {RelationsNode, RelationsNodeBase, RelationNodeInputSAComponent, RelationNodeOutputSAComponent, RelationsNodeHeaderSAComponent} from '@anglr/dynamic/relations-editor';\nimport {FirstUppercaseLocalizeSAPipe} from '@anglr/common';\n\n/**\n * Relations node component for empty\n */\n@Component(\n{\n    selector: 'empty-node',\n    templateUrl: 'emptyNode.component.html',\n    standalone: true,\n    imports:\n    [\n        RelationsNodeHeaderSAComponent,\n        RelationNodeInputSAComponent,\n        RelationNodeOutputSAComponent,\n        FirstUppercaseLocalizeSAPipe,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class EmptyNodeSAComponent extends RelationsNodeBase implements RelationsNode\n{\n}","<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'empty'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"value\" [parent]=\"this\"></relation-node-input>\n                <div>{{'value'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'result'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"result\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>"]}
+{"version":3,"file":"emptyNode.component.js","sourceRoot":"","sources":["../../../../../../basic-components/src/dynamicItems/empty/node/emptyNode.component.ts","../../../../../../basic-components/src/dynamicItems/empty/node/emptyNode.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAgB,iBAAiB,EAAE,4BAA4B,EAAE,6BAA6B,EAAE,8BAA8B,EAAC,MAAM,iCAAiC,CAAC;AAC9K,OAAO,EAAC,4BAA4B,EAAC,MAAM,eAAe,CAAC;;AAE3D;;GAEG;AAeH,MAAM,OAAO,oBAAqB,SAAQ,iBAAiB;+GAA9C,oBAAoB;mGAApB,oBAAoB,6FCrBjC,u3BAkBM,4CDJE,8BAA8B,gHAC9B,4BAA4B,gEAC5B,6BAA6B,4DAC7B,4BAA4B;;4FAIvB,oBAAoB;kBAdhC,SAAS;+BAEI,YAAY,cAEV,IAAI,WAEhB;wBACI,8BAA8B;wBAC9B,4BAA4B;wBAC5B,6BAA6B;wBAC7B,4BAA4B;qBAC/B,mBACgB,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\nimport {RelationsNode, RelationsNodeBase, RelationNodeInputSAComponent, RelationNodeOutputSAComponent, RelationsNodeHeaderSAComponent} from '@anglr/dynamic/relations-editor';\nimport {FirstUppercaseLocalizeSAPipe} from '@anglr/common';\n\n/**\n * Relations node component for empty\n */\n@Component(\n{\n    selector: 'empty-node',\n    templateUrl: 'emptyNode.component.html',\n    standalone: true,\n    imports:\n    [\n        RelationsNodeHeaderSAComponent,\n        RelationNodeInputSAComponent,\n        RelationNodeOutputSAComponent,\n        FirstUppercaseLocalizeSAPipe,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class EmptyNodeSAComponent extends RelationsNodeBase implements RelationsNode\n{\n}","<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'empty'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"value\" [parent]=\"this\"></relation-node-input>\n                <div>{{'value'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'result'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"result\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>"]}

package/es2022/basic-components/src/dynamicItems/firstNonNull/node/firstNonNullNode.component.js

@@ -43,10 +43,10 @@ export class FirstNonNullNodeSAComponent extends RelationsNodeBase {
             this.history.getNewState();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FirstNonNullNodeSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: FirstNonNullNodeSAComponent, isStandalone: true, selector: "first-non-null-node", usesInheritance: true, ngImport: i0, template: "<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'first non null'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"data1\" [parent]=\"this\"></relation-node-input>\n                <div>{{'data1'|firstUppercaseLocalize}}</div>\n            </div>\n\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"data2\" [parent]=\"this\"></relation-node-input>\n                <div>{{'data2'|firstUppercaseLocalize}}</div>\n            </div>\n\n            <div class=\"input\" *ngFor=\"let property of properties\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"property\" [parent]=\"this\"></relation-node-input>\n\n                <div class=\"dynamic-flex-row\">\n                    <div>{{property|firstUppercaseLocalize}}</div>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeProperty(property)\">\n                        <span class=\"fas fa-times\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"dynamic-flex-row\">\n                <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-left-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); addProperty()\">\n                    <span class=\"fas fa-plus\"></span>\n                </button>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'data'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"data\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "component", type: RelationsNodeHeaderSAComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputSAComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputSAComponent, selector: "relation-node-output" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: FirstNonNullNodeSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: FirstNonNullNodeSAComponent, isStandalone: true, selector: "first-non-null-node", usesInheritance: true, ngImport: i0, template: "<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'first non null'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"data1\" [parent]=\"this\"></relation-node-input>\n                <div>{{'data1'|firstUppercaseLocalize}}</div>\n            </div>\n\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"data2\" [parent]=\"this\"></relation-node-input>\n                <div>{{'data2'|firstUppercaseLocalize}}</div>\n            </div>\n\n            <div class=\"input\" *ngFor=\"let property of properties\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"property\" [parent]=\"this\"></relation-node-input>\n\n                <div class=\"dynamic-flex-row\">\n                    <div>{{property|firstUppercaseLocalize}}</div>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeProperty(property)\">\n                        <span class=\"fas fa-times\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"dynamic-flex-row\">\n                <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-left-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); addProperty()\">\n                    <span class=\"fas fa-plus\"></span>\n                </button>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'data'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"data\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "component", type: RelationsNodeHeaderSAComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputSAComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputSAComponent, selector: "relation-node-output" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FirstNonNullNodeSAComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: FirstNonNullNodeSAComponent, decorators: [{
             type: Component,
             args: [{ selector: 'first-non-null-node', standalone: true, imports: [
                         RelationsNodeHeaderSAComponent,

package/es2022/basic-components/src/dynamicItems/firstNonNull/node/firstNonNullNode.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"firstNonNullNode.component.js","sourceRoot":"","sources":["../../../../../../basic-components/src/dynamicItems/firstNonNull/node/firstNonNullNode.component.ts","../../../../../../basic-components/src/dynamicItems/firstNonNull/node/firstNonNullNode.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAC,4BAA4B,EAAC,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAgB,iBAAiB,EAAE,4BAA4B,EAAE,6BAA6B,EAAE,8BAA8B,EAAC,MAAM,iCAAiC,CAAC;;;AAI9K;;GAEG;AAgBH,MAAM,OAAO,2BAA4B,SAAQ,iBAA+C;IAE5F,8FAA8F;IAE9F;;OAEG;IACH,IAAc,UAAU;QAEpB,IAAG,CAAC,IAAI,CAAC,QAAQ,EACjB,CAAC;YACG,OAAO,EAAE,CAAC;QACd,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,gBAAgB;YAC9B;gBACI,UAAU,EAAE,EAAE;aACjB,CAAC;QAEF,OAAO,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,IAAI,EAAE,CAAC;IAC3D,CAAC;IAED;;OAEG;IACO,WAAW;QAEjB,IAAI,IAAI,CAAC,QAAQ,EAAE,gBAAgB,EACnC,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,KAAK,EAAE,CAAC;YACjD,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC;YAEpF,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;QAC/B,CAAC;IACL,CAAC;IAED;;;OAGG;IACO,cAAc,CAAC,IAAY;QAEjC,IAAI,KAAa,CAAC;QAElB,IAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAChI,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAE3D,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;QAC/B,CAAC;IACL,CAAC;8GAlDQ,2BAA2B;kGAA3B,2BAA2B,sGCzBxC,4mEAyCM,4CDxBE,8BAA8B,gHAC9B,4BAA4B,gEAC5B,6BAA6B,gEAC7B,YAAY,uJACZ,4BAA4B;;2FAIvB,2BAA2B;kBAfvC,SAAS;+BAEI,qBAAqB,cAEnB,IAAI,WAEhB;wBACI,8BAA8B;wBAC9B,4BAA4B;wBAC5B,6BAA6B;wBAC7B,YAAY;wBACZ,4BAA4B;qBAC/B,mBACgB,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {FirstUppercaseLocalizeSAPipe} from '@anglr/common';\nimport {RelationsNode, RelationsNodeBase, RelationNodeInputSAComponent, RelationNodeOutputSAComponent, RelationsNodeHeaderSAComponent} from '@anglr/dynamic/relations-editor';\n\nimport {FirstNonNullRelationsOptions} from '../firstNonNull.options';\n\n/**\n * Relations node component for first non null\n */\n@Component(\n{\n    selector: 'first-non-null-node',\n    templateUrl: 'firstNonNullNode.component.html',\n    standalone: true,\n    imports:\n    [\n        RelationsNodeHeaderSAComponent,\n        RelationNodeInputSAComponent,\n        RelationNodeOutputSAComponent,\n        CommonModule,\n        FirstUppercaseLocalizeSAPipe,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FirstNonNullNodeSAComponent extends RelationsNodeBase<FirstNonNullRelationsOptions> implements RelationsNode<FirstNonNullRelationsOptions>\n{\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Gets added properties names\n     */\n    protected get properties(): string[]\n    {\n        if(!this.metadata)\n        {\n            return [];\n        }\n\n        this.metadata.relationsOptions ??= \n        {\n            properties: []\n        };\n\n        return this.metadata.relationsOptions.properties ?? [];\n    }\n\n    /**\n     * Adds new property\n     */\n    protected addProperty(): void\n    {\n        if (this.metadata?.relationsOptions)\n        {\n            this.metadata.relationsOptions.properties ??= [];\n            this.metadata.relationsOptions.properties.push(`data${this.properties.length + 3}`);\n\n            this.history.getNewState();\n        }\n    }\n\n    /**\n     * Removes property\n     * @param name - Name of property to be removed\n     */\n    protected removeProperty(name: string): void\n    {\n        let index: number;\n\n        if(this.metadata?.relationsOptions?.properties?.length && (index = this.metadata.relationsOptions.properties.indexOf(name)) >= 0)\n        {\n            this.metadata.relationsOptions.properties.splice(index, 1);\n\n            this.history.getNewState();\n        }\n    }\n}","<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'first non null'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"data1\" [parent]=\"this\"></relation-node-input>\n                <div>{{'data1'|firstUppercaseLocalize}}</div>\n            </div>\n\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"data2\" [parent]=\"this\"></relation-node-input>\n                <div>{{'data2'|firstUppercaseLocalize}}</div>\n            </div>\n\n            <div class=\"input\" *ngFor=\"let property of properties\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"property\" [parent]=\"this\"></relation-node-input>\n\n                <div class=\"dynamic-flex-row\">\n                    <div>{{property|firstUppercaseLocalize}}</div>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeProperty(property)\">\n                        <span class=\"fas fa-times\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"dynamic-flex-row\">\n                <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-left-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); addProperty()\">\n                    <span class=\"fas fa-plus\"></span>\n                </button>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'data'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"data\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>"]}
+{"version":3,"file":"firstNonNullNode.component.js","sourceRoot":"","sources":["../../../../../../basic-components/src/dynamicItems/firstNonNull/node/firstNonNullNode.component.ts","../../../../../../basic-components/src/dynamicItems/firstNonNull/node/firstNonNullNode.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAC,4BAA4B,EAAC,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAgB,iBAAiB,EAAE,4BAA4B,EAAE,6BAA6B,EAAE,8BAA8B,EAAC,MAAM,iCAAiC,CAAC;;;AAI9K;;GAEG;AAgBH,MAAM,OAAO,2BAA4B,SAAQ,iBAA+C;IAE5F,8FAA8F;IAE9F;;OAEG;IACH,IAAc,UAAU;QAEpB,IAAG,CAAC,IAAI,CAAC,QAAQ,EACjB,CAAC;YACG,OAAO,EAAE,CAAC;QACd,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,gBAAgB;YAC9B;gBACI,UAAU,EAAE,EAAE;aACjB,CAAC;QAEF,OAAO,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,IAAI,EAAE,CAAC;IAC3D,CAAC;IAED;;OAEG;IACO,WAAW;QAEjB,IAAI,IAAI,CAAC,QAAQ,EAAE,gBAAgB,EACnC,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,KAAK,EAAE,CAAC;YACjD,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC;YAEpF,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;QAC/B,CAAC;IACL,CAAC;IAED;;;OAGG;IACO,cAAc,CAAC,IAAY;QAEjC,IAAI,KAAa,CAAC;QAElB,IAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAChI,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAE3D,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;QAC/B,CAAC;IACL,CAAC;+GAlDQ,2BAA2B;mGAA3B,2BAA2B,sGCzBxC,4mEAyCM,4CDxBE,8BAA8B,gHAC9B,4BAA4B,gEAC5B,6BAA6B,gEAC7B,YAAY,uJACZ,4BAA4B;;4FAIvB,2BAA2B;kBAfvC,SAAS;+BAEI,qBAAqB,cAEnB,IAAI,WAEhB;wBACI,8BAA8B;wBAC9B,4BAA4B;wBAC5B,6BAA6B;wBAC7B,YAAY;wBACZ,4BAA4B;qBAC/B,mBACgB,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {FirstUppercaseLocalizeSAPipe} from '@anglr/common';\nimport {RelationsNode, RelationsNodeBase, RelationNodeInputSAComponent, RelationNodeOutputSAComponent, RelationsNodeHeaderSAComponent} from '@anglr/dynamic/relations-editor';\n\nimport {FirstNonNullRelationsOptions} from '../firstNonNull.options';\n\n/**\n * Relations node component for first non null\n */\n@Component(\n{\n    selector: 'first-non-null-node',\n    templateUrl: 'firstNonNullNode.component.html',\n    standalone: true,\n    imports:\n    [\n        RelationsNodeHeaderSAComponent,\n        RelationNodeInputSAComponent,\n        RelationNodeOutputSAComponent,\n        CommonModule,\n        FirstUppercaseLocalizeSAPipe,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FirstNonNullNodeSAComponent extends RelationsNodeBase<FirstNonNullRelationsOptions> implements RelationsNode<FirstNonNullRelationsOptions>\n{\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Gets added properties names\n     */\n    protected get properties(): string[]\n    {\n        if(!this.metadata)\n        {\n            return [];\n        }\n\n        this.metadata.relationsOptions ??= \n        {\n            properties: []\n        };\n\n        return this.metadata.relationsOptions.properties ?? [];\n    }\n\n    /**\n     * Adds new property\n     */\n    protected addProperty(): void\n    {\n        if (this.metadata?.relationsOptions)\n        {\n            this.metadata.relationsOptions.properties ??= [];\n            this.metadata.relationsOptions.properties.push(`data${this.properties.length + 3}`);\n\n            this.history.getNewState();\n        }\n    }\n\n    /**\n     * Removes property\n     * @param name - Name of property to be removed\n     */\n    protected removeProperty(name: string): void\n    {\n        let index: number;\n\n        if(this.metadata?.relationsOptions?.properties?.length && (index = this.metadata.relationsOptions.properties.indexOf(name)) >= 0)\n        {\n            this.metadata.relationsOptions.properties.splice(index, 1);\n\n            this.history.getNewState();\n        }\n    }\n}","<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'first non null'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\">\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"data1\" [parent]=\"this\"></relation-node-input>\n                <div>{{'data1'|firstUppercaseLocalize}}</div>\n            </div>\n\n            <div class=\"input\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"data2\" [parent]=\"this\"></relation-node-input>\n                <div>{{'data2'|firstUppercaseLocalize}}</div>\n            </div>\n\n            <div class=\"input\" *ngFor=\"let property of properties\">\n                <relation-node-input [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"property\" [parent]=\"this\"></relation-node-input>\n\n                <div class=\"dynamic-flex-row\">\n                    <div>{{property|firstUppercaseLocalize}}</div>\n\n                    <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeProperty(property)\">\n                        <span class=\"fas fa-times\"></span>\n                    </button>\n                </div>\n            </div>\n\n            <div class=\"dynamic-flex-row\">\n                <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-left-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); addProperty()\">\n                    <span class=\"fas fa-plus\"></span>\n                </button>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'data'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"data\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>"]}

package/es2022/basic-components/src/dynamicItems/gridPanel/gridPanel.component.js

@@ -19,15 +19,15 @@ let GridPanelSAComponent = class GridPanelSAComponent extends LayoutComponentBas
         this.componentElement.nativeElement.style.gridTemplateRows = toGridRowsTemplate(this.optionsSafe.rows);
         this.componentElement.nativeElement.style.gridTemplateColumns = toGridColumnsTemplate(this.optionsSafe.columns);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: GridPanelSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: GridPanelSAComponent, isStandalone: true, selector: "grid-panel", usesInheritance: true, ngImport: i0, template: "@for(type of optionsSafe.areas; track type)\n{\n    <ng-container *layoutComponentRenderer=\"type\"/>\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: LayoutComponentRendererSADirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererCallback", "layoutComponentRendererProviders"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: GridPanelSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: GridPanelSAComponent, isStandalone: true, selector: "grid-panel", usesInheritance: true, ngImport: i0, template: "@for(type of optionsSafe.areas; track type)\n{\n    <ng-container *layoutComponentRenderer=\"type\"/>\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: LayoutComponentRendererSADirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererCallback", "layoutComponentRendererProviders"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 GridPanelSAComponent = __decorate([
     DescendantsGetter(options => options?.areas ?? []),
     LayoutEditorMetadata(GridPanelLayoutMetadataLoader)
 ], GridPanelSAComponent);
 export { GridPanelSAComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: GridPanelSAComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: GridPanelSAComponent, decorators: [{
             type: Component,
             args: [{ selector: 'grid-panel', standalone: true, imports: [
                         CommonModule,

package/es2022/basic-components/src/dynamicItems/gridPanel/gridPanel.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"gridPanel.component.js","sourceRoot":"","sources":["../../../../../basic-components/src/dynamicItems/gridPanel/gridPanel.component.ts","../../../../../basic-components/src/dynamicItems/gridPanel/gridPanel.component.html"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAkB,mBAAmB,EAAE,kCAAkC,EAAC,MAAM,uBAAuB,CAAC;AAC/G,OAAO,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,8BAA8B,CAAC;AAGrF,OAAO,EAAC,6BAA6B,EAAC,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAC,yBAAyB,EAAE,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AACnF,OAAO,EAAC,qBAAqB,EAAE,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;;AAE3E;;GAEG;AAiBI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,mBAA8C;IAEpF,2EAA2E;IAE3E;;OAEG;IACgB,YAAY;QAE3B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,KAAK,CAAC,gBAAgB,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACvG,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,KAAK,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACpH,CAAC;8GAXQ,oBAAoB;kGAApB,oBAAoB,6FC7BjC,0GAGC,2CDiBO,YAAY,+BAGZ,kCAAkC;;AAM7B,oBAAoB;IAFhC,iBAAiB,CAA4B,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,IAAI,EAAE,CAAC;IAC7E,oBAAoB,CAAC,6BAA6B,CAAC;GACvC,oBAAoB,CAYhC;;2FAZY,oBAAoB;kBAhBhC,SAAS;+BAEI,YAAY,cAEV,IAAI,WAEhB;wBACI,YAAY;wBACZ,sBAAsB;wBACtB,yBAAyB;wBACzB,kCAAkC;qBACrC,mBACgB,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {LayoutComponent, LayoutComponentBase, LayoutComponentRendererSADirective} from '@anglr/dynamic/layout';\nimport {DescendantsGetter, LayoutEditorMetadata} from '@anglr/dynamic/layout-editor';\n\nimport {GridPanelComponentOptions} from './gridPanel.options';\nimport {GridPanelLayoutMetadataLoader} from './gridPanel.metadata';\nimport {ToGridColumnsTemplatePipe, ToGridRowsTemplatePipe} from '../../misc/pipes';\nimport {toGridColumnsTemplate, toGridRowsTemplate} from '../../misc/utils';\n\n/**\n * Component used for displaying grid panel layout\n */\n@Component(\n{\n    selector: 'grid-panel',\n    templateUrl: 'gridPanel.component.html',\n    standalone: true,\n    imports:\n    [\n        CommonModule,\n        ToGridRowsTemplatePipe,\n        ToGridColumnsTemplatePipe,\n        LayoutComponentRendererSADirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\n@DescendantsGetter<GridPanelComponentOptions>(options => options?.areas ?? [])\n@LayoutEditorMetadata(GridPanelLayoutMetadataLoader)\nexport class GridPanelSAComponent extends LayoutComponentBase<GridPanelComponentOptions> implements LayoutComponent<GridPanelComponentOptions>\n{\n    //######################### protected - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected override onOptionsSet(): void\n    {\n        this.componentElement.nativeElement.style.gridTemplateRows = toGridRowsTemplate(this.optionsSafe.rows);\n        this.componentElement.nativeElement.style.gridTemplateColumns = toGridColumnsTemplate(this.optionsSafe.columns);\n    }\n}","@for(type of optionsSafe.areas; track type)\n{\n    <ng-container *layoutComponentRenderer=\"type\"/>\n}"]}
+{"version":3,"file":"gridPanel.component.js","sourceRoot":"","sources":["../../../../../basic-components/src/dynamicItems/gridPanel/gridPanel.component.ts","../../../../../basic-components/src/dynamicItems/gridPanel/gridPanel.component.html"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAkB,mBAAmB,EAAE,kCAAkC,EAAC,MAAM,uBAAuB,CAAC;AAC/G,OAAO,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,8BAA8B,CAAC;AAGrF,OAAO,EAAC,6BAA6B,EAAC,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAC,yBAAyB,EAAE,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AACnF,OAAO,EAAC,qBAAqB,EAAE,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;;AAE3E;;GAEG;AAiBI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,mBAA8C;IAEpF,2EAA2E;IAE3E;;OAEG;IACgB,YAAY;QAE3B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,KAAK,CAAC,gBAAgB,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACvG,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,KAAK,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACpH,CAAC;+GAXQ,oBAAoB;mGAApB,oBAAoB,6FC7BjC,0GAGC,2CDiBO,YAAY,+BAGZ,kCAAkC;;AAM7B,oBAAoB;IAFhC,iBAAiB,CAA4B,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,IAAI,EAAE,CAAC;IAC7E,oBAAoB,CAAC,6BAA6B,CAAC;GACvC,oBAAoB,CAYhC;;4FAZY,oBAAoB;kBAhBhC,SAAS;+BAEI,YAAY,cAEV,IAAI,WAEhB;wBACI,YAAY;wBACZ,sBAAsB;wBACtB,yBAAyB;wBACzB,kCAAkC;qBACrC,mBACgB,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {LayoutComponent, LayoutComponentBase, LayoutComponentRendererSADirective} from '@anglr/dynamic/layout';\nimport {DescendantsGetter, LayoutEditorMetadata} from '@anglr/dynamic/layout-editor';\n\nimport {GridPanelComponentOptions} from './gridPanel.options';\nimport {GridPanelLayoutMetadataLoader} from './gridPanel.metadata';\nimport {ToGridColumnsTemplatePipe, ToGridRowsTemplatePipe} from '../../misc/pipes';\nimport {toGridColumnsTemplate, toGridRowsTemplate} from '../../misc/utils';\n\n/**\n * Component used for displaying grid panel layout\n */\n@Component(\n{\n    selector: 'grid-panel',\n    templateUrl: 'gridPanel.component.html',\n    standalone: true,\n    imports:\n    [\n        CommonModule,\n        ToGridRowsTemplatePipe,\n        ToGridColumnsTemplatePipe,\n        LayoutComponentRendererSADirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\n@DescendantsGetter<GridPanelComponentOptions>(options => options?.areas ?? [])\n@LayoutEditorMetadata(GridPanelLayoutMetadataLoader)\nexport class GridPanelSAComponent extends LayoutComponentBase<GridPanelComponentOptions> implements LayoutComponent<GridPanelComponentOptions>\n{\n    //######################### protected - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected override onOptionsSet(): void\n    {\n        this.componentElement.nativeElement.style.gridTemplateRows = toGridRowsTemplate(this.optionsSafe.rows);\n        this.componentElement.nativeElement.style.gridTemplateColumns = toGridColumnsTemplate(this.optionsSafe.columns);\n    }\n}","@for(type of optionsSafe.areas; track type)\n{\n    <ng-container *layoutComponentRenderer=\"type\"/>\n}"]}

package/es2022/basic-components/src/dynamicItems/gridPanel/misc/components/gridAreasDefinitionDialog/gridAreasDefinitionDialog.component.js

@@ -143,10 +143,10 @@ export class GridAreasDefinitionDialogComponent {
         this.endEditation();
         this.areas.splice(index, 1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: GridAreasDefinitionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: GridAreasDefinitionDialogComponent, isStandalone: true, selector: "grid-areas-definition-dialog", ngImport: i0, template: "<div class=\"dynamic-flex-1 dynamic-margin-small dynamic-flex-column\">\n    <div class=\"dynamic-flex-row dynamic-column-gap-extra-small dynamic-margin-bottom-small\">\n        <div>{{'areas' | firstUppercaseLocalize}}</div>\n\n        <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"addArea()\" [disabled]=\"editing()\" [tooltip]=\"'add area' | firstUppercaseLocalize\">\n            <span class=\"fas fa-plus\"></span>\n        </button>\n    \n        @for(area of areas; track area)\n        {\n            <div [style.background-color]=\"area.id | stringToColor\" class=\"dynamic-flex-row dynamic-column-gap-extra-small\">\n                <div>{{area.displayName}}</div>\n\n                <button type=\"button\" class=\"dynamic-btn-icon\" [disabled]=\"editing()\" (click)=\"editArea($index)\">\n                    <span class=\"fas fa-pencil\"></span>\n                </button>\n\n                <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"removeArea($index)\">\n                    <span class=\"fas fa-trash\"></span>\n                </button>\n            </div>\n        }\n    </div>\n\n    @if(editing())\n    {\n        <div class=\"dynamic-flex-row dynamic-column-gap-extra-small dynamic-margin-bottom-small\">\n            <input class=\"dynamic-form-control dynamic-flex-1\" [formControl]=\"displayNameForm\">\n    \n            <button type=\"button\" class=\"dynamic-btn-icon\" [tooltip]=\"'confirm changes to area' | firstUppercaseLocalize\" (click)=\"endEditation()\">\n                <span class=\"fas fa-check\"></span>\n            </button>\n    \n            <div class=\"dynamic-flex-5\"></div>\n        </div>\n    }\n\n    <div class=\"grid-preview\"\n         [style.grid-template-rows]=\"options.rows | toGridRowsTemplate\"\n         [style.grid-template-columns]=\"options.columns | toGridColumnsTemplate\">\n\n        @for(row of (options.rows.length ? options.rows : [{height: 'auto'}]); track row; let rowIndex=$index)\n        {\n            @for(column of (options.columns.length ? options.columns : [{width: 'auto'}]); track column; let columnIndex=$index)\n            {\n                <div class=\"grid-preview-cell\"\n                     [class.editing]=\"editing()\"\n                     [style.grid-row]=\"(rowIndex + 1) + '/' + (rowIndex + 2)\"\n                     [style.grid-column]=\"(columnIndex + 1) + '/' + (columnIndex + 2)\"\n                     (click)=\"selectArea(rowIndex, columnIndex)\"\n                     (mouseenter)=\"setAreaEnd(rowIndex, columnIndex)\"></div>\n            }\n        }\n\n        @for(area of areas; track area)\n        {\n            <div class=\"grid-area\"\n                 [class.editing]=\"editing() && editedIndex() === $index\"\n                 [style.background-color]=\"area.id | stringToColor\"\n                 [style.grid-row]=\"(editedIndex() === $index ? (editedArea()?.gridRowStart ?? area.options?.gridRowStart) : area.options?.gridRowStart) + '/' + (editedIndex() === $index ? (editedArea()?.gridRowEnd ?? area.options?.gridRowEnd) : area.options?.gridRowEnd)\"\n                 [style.grid-column]=\"(editedIndex() === $index ? (editedArea()?.gridColumnStart ?? area.options?.gridColumnStart) : area.options?.gridColumnStart) + '/' + (editedIndex() === $index ? (editedArea()?.gridColumnEnd ?? area.options?.gridColumnEnd) : area.options?.gridColumnEnd)\"></div>\n        }\n    </div>\n</div>\n\n<div class=\"dynamic-flex-row dynamic-flex-end dynamic-buttons-gap\">\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-danger\" mat-dialog-close>\n        <span>{{'cancel' | firstUppercaseLocalize}}</span>\n    </button>\n\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-success\" [mat-dialog-close]=\"{areas, rows: options.rows, columns: options.columns}\">\n        <span>{{'save' | firstUppercaseLocalize}}</span>\n    </button>\n</div>", styles: [".grid-preview\n{\n    display: grid;\n    gap: 2px;\n    background-color: #aaa;\n    border: 2px solid #aaa;\n    flex: 1;\n}\n\n.grid-preview-cell\n{\n    background-color: #fff;\n}\n\n.grid-preview-cell:empty\n{\n    min-width: 10px;\n    min-height: 10px;\n}\n\n.grid-preview-cell.editing\n{\n    cursor: pointer;\n}\n\n.grid-preview-cell.editing:hover\n{\n    background-color: #999;\n}\n\n.grid-area\n{\n    opacity: .6;\n}\n\n.grid-area.editing\n{\n    pointer-events: none;\n}"], dependencies: [{ kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }, { kind: "pipe", type: ToGridColumnsTemplatePipe, name: "toGridColumnsTemplate" }, { kind: "pipe", type: ToGridRowsTemplatePipe, name: "toGridRowsTemplate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: StringToColorPipe, name: "stringToColor" }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "allowHtml", "template", "tooltipOptions", "tooltipVisible", "containerElement"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: GridAreasDefinitionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: GridAreasDefinitionDialogComponent, isStandalone: true, selector: "grid-areas-definition-dialog", ngImport: i0, template: "<div class=\"dynamic-flex-1 dynamic-margin-small dynamic-flex-column\">\n    <div class=\"dynamic-flex-row dynamic-column-gap-extra-small dynamic-margin-bottom-small\">\n        <div>{{'areas' | firstUppercaseLocalize}}</div>\n\n        <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"addArea()\" [disabled]=\"editing()\" [tooltip]=\"'add area' | firstUppercaseLocalize\">\n            <span class=\"fas fa-plus\"></span>\n        </button>\n    \n        @for(area of areas; track area)\n        {\n            <div [style.background-color]=\"area.id | stringToColor\" class=\"dynamic-flex-row dynamic-column-gap-extra-small\">\n                <div>{{area.displayName}}</div>\n\n                <button type=\"button\" class=\"dynamic-btn-icon\" [disabled]=\"editing()\" (click)=\"editArea($index)\">\n                    <span class=\"fas fa-pencil\"></span>\n                </button>\n\n                <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"removeArea($index)\">\n                    <span class=\"fas fa-trash\"></span>\n                </button>\n            </div>\n        }\n    </div>\n\n    @if(editing())\n    {\n        <div class=\"dynamic-flex-row dynamic-column-gap-extra-small dynamic-margin-bottom-small\">\n            <input class=\"dynamic-form-control dynamic-flex-1\" [formControl]=\"displayNameForm\">\n    \n            <button type=\"button\" class=\"dynamic-btn-icon\" [tooltip]=\"'confirm changes to area' | firstUppercaseLocalize\" (click)=\"endEditation()\">\n                <span class=\"fas fa-check\"></span>\n            </button>\n    \n            <div class=\"dynamic-flex-5\"></div>\n        </div>\n    }\n\n    <div class=\"grid-preview\"\n         [style.grid-template-rows]=\"options.rows | toGridRowsTemplate\"\n         [style.grid-template-columns]=\"options.columns | toGridColumnsTemplate\">\n\n        @for(row of (options.rows.length ? options.rows : [{height: 'auto'}]); track row; let rowIndex=$index)\n        {\n            @for(column of (options.columns.length ? options.columns : [{width: 'auto'}]); track column; let columnIndex=$index)\n            {\n                <div class=\"grid-preview-cell\"\n                     [class.editing]=\"editing()\"\n                     [style.grid-row]=\"(rowIndex + 1) + '/' + (rowIndex + 2)\"\n                     [style.grid-column]=\"(columnIndex + 1) + '/' + (columnIndex + 2)\"\n                     (click)=\"selectArea(rowIndex, columnIndex)\"\n                     (mouseenter)=\"setAreaEnd(rowIndex, columnIndex)\"></div>\n            }\n        }\n\n        @for(area of areas; track area)\n        {\n            <div class=\"grid-area\"\n                 [class.editing]=\"editing() && editedIndex() === $index\"\n                 [style.background-color]=\"area.id | stringToColor\"\n                 [style.grid-row]=\"(editedIndex() === $index ? (editedArea()?.gridRowStart ?? area.options?.gridRowStart) : area.options?.gridRowStart) + '/' + (editedIndex() === $index ? (editedArea()?.gridRowEnd ?? area.options?.gridRowEnd) : area.options?.gridRowEnd)\"\n                 [style.grid-column]=\"(editedIndex() === $index ? (editedArea()?.gridColumnStart ?? area.options?.gridColumnStart) : area.options?.gridColumnStart) + '/' + (editedIndex() === $index ? (editedArea()?.gridColumnEnd ?? area.options?.gridColumnEnd) : area.options?.gridColumnEnd)\"></div>\n        }\n    </div>\n</div>\n\n<div class=\"dynamic-flex-row dynamic-flex-end dynamic-buttons-gap\">\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-danger\" mat-dialog-close>\n        <span>{{'cancel' | firstUppercaseLocalize}}</span>\n    </button>\n\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-success\" [mat-dialog-close]=\"{areas, rows: options.rows, columns: options.columns}\">\n        <span>{{'save' | firstUppercaseLocalize}}</span>\n    </button>\n</div>", styles: [".grid-preview\n{\n    display: grid;\n    gap: 2px;\n    background-color: #aaa;\n    border: 2px solid #aaa;\n    flex: 1;\n}\n\n.grid-preview-cell\n{\n    background-color: #fff;\n}\n\n.grid-preview-cell:empty\n{\n    min-width: 10px;\n    min-height: 10px;\n}\n\n.grid-preview-cell.editing\n{\n    cursor: pointer;\n}\n\n.grid-preview-cell.editing:hover\n{\n    background-color: #999;\n}\n\n.grid-area\n{\n    opacity: .6;\n}\n\n.grid-area.editing\n{\n    pointer-events: none;\n}"], dependencies: [{ kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }, { kind: "pipe", type: ToGridColumnsTemplatePipe, name: "toGridColumnsTemplate" }, { kind: "pipe", type: ToGridRowsTemplatePipe, name: "toGridRowsTemplate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: StringToColorPipe, name: "stringToColor" }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "allowHtml", "template", "tooltipOptions", "tooltipVisible", "containerElement"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: GridAreasDefinitionDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: GridAreasDefinitionDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'grid-areas-definition-dialog', standalone: true, imports: [
                         FirstUppercaseLocalizeSAPipe,

package/es2022/basic-components/src/dynamicItems/gridPanel/misc/components/gridAreasDefinitionDialog/gridAreasDefinitionDialog.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"gridAreasDefinitionDialog.component.js","sourceRoot":"","sources":["../../../../../../../../basic-components/src/dynamicItems/gridPanel/misc/components/gridAreasDefinitionDialog/gridAreasDefinitionDialog.component.ts","../../../../../../../../basic-components/src/dynamicItems/gridPanel/misc/components/gridAreasDefinitionDialog/gridAreasDefinitionDialog.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, inject, WritableSignal, signal} from '@angular/core';\nimport {MatDialogModule} from '@angular/material/dialog';\nimport {FormControl, ReactiveFormsModule} from '@angular/forms';\nimport {TITLED_DIALOG_DATA} from '@anglr/common/material';\nimport {LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {FirstUppercaseLocalizeSAPipe, TooltipDirective} from '@anglr/common';\nimport {generateId, isBlank} from '@jscrpt/common';\n\nimport {GridPanelComponentOptions} from '../../../gridPanel.options';\nimport {GridPanelAreaComponentOptions} from '../../../../gridPanelArea';\nimport {StringToColorPipe, ToGridColumnsTemplatePipe, ToGridRowsTemplatePipe} from '../../../../../misc/pipes';\n\n/**\n * Component used for defining grid areas\n */\n@Component(\n{\n    selector: 'grid-areas-definition-dialog',\n    templateUrl: 'gridAreasDefinitionDialog.component.html',\n    styleUrl: 'gridAreasDefinitionDialog.component.css',\n    standalone: true,\n    imports:\n    [\n        FirstUppercaseLocalizeSAPipe,\n        ToGridColumnsTemplatePipe,\n        ToGridRowsTemplatePipe,\n        ReactiveFormsModule,\n        StringToColorPipe,\n        TooltipDirective,\n        MatDialogModule,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class GridAreasDefinitionDialogComponent\n{\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Options for grid panel whose area is being set\n     */\n    protected options: GridPanelComponentOptions = inject<GridPanelComponentOptions>(TITLED_DIALOG_DATA);\n\n    /**\n     * Available grid areas\n     */\n    protected areas: LayoutComponentMetadata<GridPanelAreaComponentOptions>[] = [...inject<GridPanelComponentOptions>(TITLED_DIALOG_DATA).areas];\n\n    /**\n     * Indication whether is area under editation\n     */\n    protected editing: WritableSignal<boolean> = signal(false);\n\n    /**\n     * Index of currently edited area\n     */\n    protected editedIndex: WritableSignal<number|undefined|null> = signal(null);\n\n    /**\n     * Copy of currently edited area coordinates\n     */\n    protected editedArea: WritableSignal<GridPanelAreaComponentOptions|undefined|null> = signal(null);\n\n    /**\n     * Form control for changing display name\n     */\n    protected displayNameForm: FormControl<string> = new FormControl<string>('', {nonNullable: true});\n\n    //######################### protected methods - template bindings #########################\n\n    /**\n     * Ends editation of area\n     */\n    protected endEditation(): void\n    {\n        const editedIndex = this.editedIndex();\n\n        if(isBlank(editedIndex))\n        {\n            return;\n        }\n\n        this.areas[editedIndex].displayName = this.displayNameForm.value;\n\n        this.editing.set(false);\n        this.editedIndex.set(null);\n        this.displayNameForm.setValue('');\n    }\n\n    /**\n     * Enable adding of grid area\n     */\n    protected addArea(): void\n    {\n        const id = `gridPanelArea-${generateId(10)}`;\n\n        this.areas.push(\n        {\n            id,\n            name: 'gridPanelArea',\n            package: 'basic-components',\n            displayName: id,\n            scope: null,\n            options:\n            {\n                gridColumnEnd: -1,\n                gridColumnStart: 1,\n                gridRowEnd: -1,\n                gridRowStart: 1,\n            }\n        });\n\n        const editedIndex = this.areas.length - 1;\n\n        this.editing.set(true);\n        this.editedIndex.set(editedIndex);\n        this.displayNameForm.setValue(this.areas[editedIndex].displayName ?? id);\n    }\n\n    /**\n     * Sets row and column ends for area\n     * @param row - Start index of row\n     * @param column - Start index of column\n     */\n    protected setAreaEnd(row: number, column: number): void\n    {\n        if(!this.editedArea())\n        {\n            return;\n        }\n\n        this.editedArea.update(editedArea =>\n        {\n            if(!editedArea)\n            {\n                throw new Error('GridAreasDefinitionDialogComponent: edited area was not set!');\n            }\n\n            return {\n                gridColumnStart: editedArea.gridColumnStart,\n                gridColumnEnd: column + 2,\n                gridRowStart: editedArea.gridRowStart,\n                gridRowEnd: row + 2,\n            };\n        });\n    }\n\n    /**\n     * Selects row and column for area, first time start, second time end\n     * @param row - Start index of row\n     * @param column - Start index of column\n     */\n    protected selectArea(row: number, column: number): void\n    {\n        if(!this.editing())\n        {\n            return;\n        }\n\n        const editedIndex = this.editedIndex();\n\n        if(isBlank(editedIndex))\n        {\n            throw new Error('GridAreasDefinitionDialogComponent: edited index was not set!');\n        }\n        \n        if(this.editedArea())\n        {\n            this.areas[editedIndex].options = {...this.areas[editedIndex].options, ...this.editedArea()} as GridPanelAreaComponentOptions;\n            this.editedArea.set(null);\n\n            return;\n        }\n\n        const editedArea = this.areas[editedIndex].options;\n        \n        if(isBlank(editedArea))\n        {\n            throw new Error('GridAreasDefinitionDialogComponent: edited area was not set!');\n        }\n\n        this.editedArea.set(\n        {\n            gridRowStart: row + 1,\n            gridColumnStart: column + 1,\n            gridColumnEnd: editedArea.gridColumnEnd,\n            gridRowEnd: editedArea.gridRowEnd,\n        });\n    }\n\n    /**\n     * Enables editation of area\n     * @param index - Index of area to be edited\n     */\n    protected editArea(index: number): void\n    {\n        this.editing.set(true);\n        this.editedIndex.set(index);\n        this.displayNameForm.setValue(this.areas[index].displayName ?? '');\n    }\n\n    /**\n     * Removes area\n     * @param index - Index of area to be removed\n     */\n    protected removeArea(index: number): void\n    {\n        this.endEditation();\n\n        this.areas.splice(index, 1);\n    }\n}","<div class=\"dynamic-flex-1 dynamic-margin-small dynamic-flex-column\">\n    <div class=\"dynamic-flex-row dynamic-column-gap-extra-small dynamic-margin-bottom-small\">\n        <div>{{'areas' | firstUppercaseLocalize}}</div>\n\n        <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"addArea()\" [disabled]=\"editing()\" [tooltip]=\"'add area' | firstUppercaseLocalize\">\n            <span class=\"fas fa-plus\"></span>\n        </button>\n    \n        @for(area of areas; track area)\n        {\n            <div [style.background-color]=\"area.id | stringToColor\" class=\"dynamic-flex-row dynamic-column-gap-extra-small\">\n                <div>{{area.displayName}}</div>\n\n                <button type=\"button\" class=\"dynamic-btn-icon\" [disabled]=\"editing()\" (click)=\"editArea($index)\">\n                    <span class=\"fas fa-pencil\"></span>\n                </button>\n\n                <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"removeArea($index)\">\n                    <span class=\"fas fa-trash\"></span>\n                </button>\n            </div>\n        }\n    </div>\n\n    @if(editing())\n    {\n        <div class=\"dynamic-flex-row dynamic-column-gap-extra-small dynamic-margin-bottom-small\">\n            <input class=\"dynamic-form-control dynamic-flex-1\" [formControl]=\"displayNameForm\">\n    \n            <button type=\"button\" class=\"dynamic-btn-icon\" [tooltip]=\"'confirm changes to area' | firstUppercaseLocalize\" (click)=\"endEditation()\">\n                <span class=\"fas fa-check\"></span>\n            </button>\n    \n            <div class=\"dynamic-flex-5\"></div>\n        </div>\n    }\n\n    <div class=\"grid-preview\"\n         [style.grid-template-rows]=\"options.rows | toGridRowsTemplate\"\n         [style.grid-template-columns]=\"options.columns | toGridColumnsTemplate\">\n\n        @for(row of (options.rows.length ? options.rows : [{height: 'auto'}]); track row; let rowIndex=$index)\n        {\n            @for(column of (options.columns.length ? options.columns : [{width: 'auto'}]); track column; let columnIndex=$index)\n            {\n                <div class=\"grid-preview-cell\"\n                     [class.editing]=\"editing()\"\n                     [style.grid-row]=\"(rowIndex + 1) + '/' + (rowIndex + 2)\"\n                     [style.grid-column]=\"(columnIndex + 1) + '/' + (columnIndex + 2)\"\n                     (click)=\"selectArea(rowIndex, columnIndex)\"\n                     (mouseenter)=\"setAreaEnd(rowIndex, columnIndex)\"></div>\n            }\n        }\n\n        @for(area of areas; track area)\n        {\n            <div class=\"grid-area\"\n                 [class.editing]=\"editing() && editedIndex() === $index\"\n                 [style.background-color]=\"area.id | stringToColor\"\n                 [style.grid-row]=\"(editedIndex() === $index ? (editedArea()?.gridRowStart ?? area.options?.gridRowStart) : area.options?.gridRowStart) + '/' + (editedIndex() === $index ? (editedArea()?.gridRowEnd ?? area.options?.gridRowEnd) : area.options?.gridRowEnd)\"\n                 [style.grid-column]=\"(editedIndex() === $index ? (editedArea()?.gridColumnStart ?? area.options?.gridColumnStart) : area.options?.gridColumnStart) + '/' + (editedIndex() === $index ? (editedArea()?.gridColumnEnd ?? area.options?.gridColumnEnd) : area.options?.gridColumnEnd)\"></div>\n        }\n    </div>\n</div>\n\n<div class=\"dynamic-flex-row dynamic-flex-end dynamic-buttons-gap\">\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-danger\" mat-dialog-close>\n        <span>{{'cancel' | firstUppercaseLocalize}}</span>\n    </button>\n\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-success\" [mat-dialog-close]=\"{areas, rows: options.rows, columns: options.columns}\">\n        <span>{{'save' | firstUppercaseLocalize}}</span>\n    </button>\n</div>"]}
+{"version":3,"file":"gridAreasDefinitionDialog.component.js","sourceRoot":"","sources":["../../../../../../../../basic-components/src/dynamicItems/gridPanel/misc/components/gridAreasDefinitionDialog/gridAreasDefinitionDialog.component.ts","../../../../../../../../basic-components/src/dynamicItems/gridPanel/misc/components/gridAreasDefinitionDialog/gridAreasDefinitionDialog.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, inject, WritableSignal, signal} from '@angular/core';\nimport {MatDialogModule} from '@angular/material/dialog';\nimport {FormControl, ReactiveFormsModule} from '@angular/forms';\nimport {TITLED_DIALOG_DATA} from '@anglr/common/material';\nimport {LayoutComponentMetadata} from '@anglr/dynamic/layout';\nimport {FirstUppercaseLocalizeSAPipe, TooltipDirective} from '@anglr/common';\nimport {generateId, isBlank} from '@jscrpt/common';\n\nimport {GridPanelComponentOptions} from '../../../gridPanel.options';\nimport {GridPanelAreaComponentOptions} from '../../../../gridPanelArea';\nimport {StringToColorPipe, ToGridColumnsTemplatePipe, ToGridRowsTemplatePipe} from '../../../../../misc/pipes';\n\n/**\n * Component used for defining grid areas\n */\n@Component(\n{\n    selector: 'grid-areas-definition-dialog',\n    templateUrl: 'gridAreasDefinitionDialog.component.html',\n    styleUrl: 'gridAreasDefinitionDialog.component.css',\n    standalone: true,\n    imports:\n    [\n        FirstUppercaseLocalizeSAPipe,\n        ToGridColumnsTemplatePipe,\n        ToGridRowsTemplatePipe,\n        ReactiveFormsModule,\n        StringToColorPipe,\n        TooltipDirective,\n        MatDialogModule,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class GridAreasDefinitionDialogComponent\n{\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Options for grid panel whose area is being set\n     */\n    protected options: GridPanelComponentOptions = inject<GridPanelComponentOptions>(TITLED_DIALOG_DATA);\n\n    /**\n     * Available grid areas\n     */\n    protected areas: LayoutComponentMetadata<GridPanelAreaComponentOptions>[] = [...inject<GridPanelComponentOptions>(TITLED_DIALOG_DATA).areas];\n\n    /**\n     * Indication whether is area under editation\n     */\n    protected editing: WritableSignal<boolean> = signal(false);\n\n    /**\n     * Index of currently edited area\n     */\n    protected editedIndex: WritableSignal<number|undefined|null> = signal(null);\n\n    /**\n     * Copy of currently edited area coordinates\n     */\n    protected editedArea: WritableSignal<GridPanelAreaComponentOptions|undefined|null> = signal(null);\n\n    /**\n     * Form control for changing display name\n     */\n    protected displayNameForm: FormControl<string> = new FormControl<string>('', {nonNullable: true});\n\n    //######################### protected methods - template bindings #########################\n\n    /**\n     * Ends editation of area\n     */\n    protected endEditation(): void\n    {\n        const editedIndex = this.editedIndex();\n\n        if(isBlank(editedIndex))\n        {\n            return;\n        }\n\n        this.areas[editedIndex].displayName = this.displayNameForm.value;\n\n        this.editing.set(false);\n        this.editedIndex.set(null);\n        this.displayNameForm.setValue('');\n    }\n\n    /**\n     * Enable adding of grid area\n     */\n    protected addArea(): void\n    {\n        const id = `gridPanelArea-${generateId(10)}`;\n\n        this.areas.push(\n        {\n            id,\n            name: 'gridPanelArea',\n            package: 'basic-components',\n            displayName: id,\n            scope: null,\n            options:\n            {\n                gridColumnEnd: -1,\n                gridColumnStart: 1,\n                gridRowEnd: -1,\n                gridRowStart: 1,\n            }\n        });\n\n        const editedIndex = this.areas.length - 1;\n\n        this.editing.set(true);\n        this.editedIndex.set(editedIndex);\n        this.displayNameForm.setValue(this.areas[editedIndex].displayName ?? id);\n    }\n\n    /**\n     * Sets row and column ends for area\n     * @param row - Start index of row\n     * @param column - Start index of column\n     */\n    protected setAreaEnd(row: number, column: number): void\n    {\n        if(!this.editedArea())\n        {\n            return;\n        }\n\n        this.editedArea.update(editedArea =>\n        {\n            if(!editedArea)\n            {\n                throw new Error('GridAreasDefinitionDialogComponent: edited area was not set!');\n            }\n\n            return {\n                gridColumnStart: editedArea.gridColumnStart,\n                gridColumnEnd: column + 2,\n                gridRowStart: editedArea.gridRowStart,\n                gridRowEnd: row + 2,\n            };\n        });\n    }\n\n    /**\n     * Selects row and column for area, first time start, second time end\n     * @param row - Start index of row\n     * @param column - Start index of column\n     */\n    protected selectArea(row: number, column: number): void\n    {\n        if(!this.editing())\n        {\n            return;\n        }\n\n        const editedIndex = this.editedIndex();\n\n        if(isBlank(editedIndex))\n        {\n            throw new Error('GridAreasDefinitionDialogComponent: edited index was not set!');\n        }\n        \n        if(this.editedArea())\n        {\n            this.areas[editedIndex].options = {...this.areas[editedIndex].options, ...this.editedArea()} as GridPanelAreaComponentOptions;\n            this.editedArea.set(null);\n\n            return;\n        }\n\n        const editedArea = this.areas[editedIndex].options;\n        \n        if(isBlank(editedArea))\n        {\n            throw new Error('GridAreasDefinitionDialogComponent: edited area was not set!');\n        }\n\n        this.editedArea.set(\n        {\n            gridRowStart: row + 1,\n            gridColumnStart: column + 1,\n            gridColumnEnd: editedArea.gridColumnEnd,\n            gridRowEnd: editedArea.gridRowEnd,\n        });\n    }\n\n    /**\n     * Enables editation of area\n     * @param index - Index of area to be edited\n     */\n    protected editArea(index: number): void\n    {\n        this.editing.set(true);\n        this.editedIndex.set(index);\n        this.displayNameForm.setValue(this.areas[index].displayName ?? '');\n    }\n\n    /**\n     * Removes area\n     * @param index - Index of area to be removed\n     */\n    protected removeArea(index: number): void\n    {\n        this.endEditation();\n\n        this.areas.splice(index, 1);\n    }\n}","<div class=\"dynamic-flex-1 dynamic-margin-small dynamic-flex-column\">\n    <div class=\"dynamic-flex-row dynamic-column-gap-extra-small dynamic-margin-bottom-small\">\n        <div>{{'areas' | firstUppercaseLocalize}}</div>\n\n        <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"addArea()\" [disabled]=\"editing()\" [tooltip]=\"'add area' | firstUppercaseLocalize\">\n            <span class=\"fas fa-plus\"></span>\n        </button>\n    \n        @for(area of areas; track area)\n        {\n            <div [style.background-color]=\"area.id | stringToColor\" class=\"dynamic-flex-row dynamic-column-gap-extra-small\">\n                <div>{{area.displayName}}</div>\n\n                <button type=\"button\" class=\"dynamic-btn-icon\" [disabled]=\"editing()\" (click)=\"editArea($index)\">\n                    <span class=\"fas fa-pencil\"></span>\n                </button>\n\n                <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"removeArea($index)\">\n                    <span class=\"fas fa-trash\"></span>\n                </button>\n            </div>\n        }\n    </div>\n\n    @if(editing())\n    {\n        <div class=\"dynamic-flex-row dynamic-column-gap-extra-small dynamic-margin-bottom-small\">\n            <input class=\"dynamic-form-control dynamic-flex-1\" [formControl]=\"displayNameForm\">\n    \n            <button type=\"button\" class=\"dynamic-btn-icon\" [tooltip]=\"'confirm changes to area' | firstUppercaseLocalize\" (click)=\"endEditation()\">\n                <span class=\"fas fa-check\"></span>\n            </button>\n    \n            <div class=\"dynamic-flex-5\"></div>\n        </div>\n    }\n\n    <div class=\"grid-preview\"\n         [style.grid-template-rows]=\"options.rows | toGridRowsTemplate\"\n         [style.grid-template-columns]=\"options.columns | toGridColumnsTemplate\">\n\n        @for(row of (options.rows.length ? options.rows : [{height: 'auto'}]); track row; let rowIndex=$index)\n        {\n            @for(column of (options.columns.length ? options.columns : [{width: 'auto'}]); track column; let columnIndex=$index)\n            {\n                <div class=\"grid-preview-cell\"\n                     [class.editing]=\"editing()\"\n                     [style.grid-row]=\"(rowIndex + 1) + '/' + (rowIndex + 2)\"\n                     [style.grid-column]=\"(columnIndex + 1) + '/' + (columnIndex + 2)\"\n                     (click)=\"selectArea(rowIndex, columnIndex)\"\n                     (mouseenter)=\"setAreaEnd(rowIndex, columnIndex)\"></div>\n            }\n        }\n\n        @for(area of areas; track area)\n        {\n            <div class=\"grid-area\"\n                 [class.editing]=\"editing() && editedIndex() === $index\"\n                 [style.background-color]=\"area.id | stringToColor\"\n                 [style.grid-row]=\"(editedIndex() === $index ? (editedArea()?.gridRowStart ?? area.options?.gridRowStart) : area.options?.gridRowStart) + '/' + (editedIndex() === $index ? (editedArea()?.gridRowEnd ?? area.options?.gridRowEnd) : area.options?.gridRowEnd)\"\n                 [style.grid-column]=\"(editedIndex() === $index ? (editedArea()?.gridColumnStart ?? area.options?.gridColumnStart) : area.options?.gridColumnStart) + '/' + (editedIndex() === $index ? (editedArea()?.gridColumnEnd ?? area.options?.gridColumnEnd) : area.options?.gridColumnEnd)\"></div>\n        }\n    </div>\n</div>\n\n<div class=\"dynamic-flex-row dynamic-flex-end dynamic-buttons-gap\">\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-danger\" mat-dialog-close>\n        <span>{{'cancel' | firstUppercaseLocalize}}</span>\n    </button>\n\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-success\" [mat-dialog-close]=\"{areas, rows: options.rows, columns: options.columns}\">\n        <span>{{'save' | firstUppercaseLocalize}}</span>\n    </button>\n</div>"]}

package/es2022/basic-components/src/dynamicItems/gridPanel/misc/components/gridAreasPropertiesControl/gridAreasPropertiesControl.component.js

@@ -39,10 +39,10 @@ export class GridAreasPropertiesControlComponent extends PropertiesControlBase {
             this.form.patchValue(result);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: GridAreasPropertiesControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: GridAreasPropertiesControlComponent, isStandalone: true, selector: "grid-areas-properties-control", usesInheritance: true, ngImport: i0, template: "<button type=\"button\" class=\"dynamic-btn dynamic-btn-primary dynamic-align-self-center dynamic-margin-vertical-extra-small\" (click)=\"showDialog()\">\n    <span>{{'grid areas' | firstUppercaseLocalize}}</span>\n</button>", styles: [":host\n{\n    display: flex;\n    flex-direction: column;\n}"], dependencies: [{ kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: GridAreasPropertiesControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: GridAreasPropertiesControlComponent, isStandalone: true, selector: "grid-areas-properties-control", usesInheritance: true, ngImport: i0, template: "<button type=\"button\" class=\"dynamic-btn dynamic-btn-primary dynamic-align-self-center dynamic-margin-vertical-extra-small\" (click)=\"showDialog()\">\n    <span>{{'grid areas' | firstUppercaseLocalize}}</span>\n</button>", styles: [":host\n{\n    display: flex;\n    flex-direction: column;\n}"], dependencies: [{ kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: GridAreasPropertiesControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: GridAreasPropertiesControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'grid-areas-properties-control', standalone: true, imports: [
                         FirstUppercaseLocalizeSAPipe,