@anglr/dynamic 1.0.0-beta.20250602071909 → 1.0.0-beta.20260115130320

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 BlockComponent = class BlockComponent extends LayoutComponentBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BlockComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: BlockComponent, isStandalone: true, selector: "block", usesInheritance: true, ngImport: i0, template: "<ng-container *layoutComponentRenderer=\"options?.content\"/>", styles: [":host{display: block;}"], dependencies: [{ kind: "directive", type: LayoutComponentRendererDirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererCallback", "layoutComponentRendererProviders"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BlockComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BlockComponent, isStandalone: true, selector: "block", usesInheritance: true, ngImport: i0, template: "<ng-container *layoutComponentRenderer=\"options?.content\"/>", styles: [":host{display: block;}"], dependencies: [{ kind: "directive", type: LayoutComponentRendererDirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererCallback", "layoutComponentRendererProviders"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 BlockComponent = __decorate([
     DescendantsGetter(options => options?.content ? [options?.content] : []),
     LayoutEditorMetadata(BlockLayoutMetadataLoader)
 ], BlockComponent);
 export { BlockComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BlockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BlockComponent, decorators: [{
             type: Component,
             args: [{ selector: 'block', imports: [
                         LayoutComponentRendererDirective,

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

@@ -33,8 +33,8 @@ let ButtonComponent = class ButtonComponent extends LayoutComponentBase {
     onOptionsSet() {
         this.disabled = this.options?.disabled ?? false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ButtonComponent, 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: "21.0.6", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ButtonComponent, 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 @@ ButtonComponent = __decorate([
     LayoutEditorMetadata(ButtonLayoutMetadataLoader)
 ], ButtonComponent);
 export { ButtonComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button-component', 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;AA0BI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,mBAA2C;IAAzE;;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,eAAe;kGAAf,eAAe,qICxC5B,uSAGS,gFDmBD,OAAO,oFACP,gBAAgB;;AAwCb;IADN,aAAa,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC;;8CACd;AAvBrB,eAAe;IAb3B,SAAS,CACV;QACI,MAAM,EACN;YACI,MAAM,CAAkB,UAAU,CAAC;SACtC;QACD,OAAO,EACP;YACI,MAAM,CAAkB,OAAO,CAAC;SACnC;KACJ,CAAC;IACD,uBAAuB,CAAC,6BAA6B,CAAC;IACtD,oBAAoB,CAAC,0BAA0B,CAAC;GACpC,eAAe,CAkC3B;;2FAlCY,eAAe;kBAzB3B,SAAS;+BAEI,kBAAkB,WAI5B;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    imports:\n    [\n        NgClass,\n        TooltipDirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\n@DebugData(\n{\n    inputs:\n    [\n        nameof<ButtonComponent>('disabled'),\n    ],\n    outputs:\n    [\n        nameof<ButtonComponent>('click'),\n    ],\n})\n@RelationsEditorMetadata(ButtonRelationsMetadataLoader)\n@LayoutEditorMetadata(ButtonLayoutMetadataLoader)\nexport class ButtonComponent 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;AA0BI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,mBAA2C;IAAzE;;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,eAAe;kGAAf,eAAe,qICxC5B,uSAGS,gFDmBD,OAAO,oFACP,gBAAgB;;AAwCb;IADN,aAAa,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC;;8CACd;AAvBrB,eAAe;IAb3B,SAAS,CACV;QACI,MAAM,EACN;YACI,MAAM,CAAkB,UAAU,CAAC;SACtC;QACD,OAAO,EACP;YACI,MAAM,CAAkB,OAAO,CAAC;SACnC;KACJ,CAAC;IACD,uBAAuB,CAAC,6BAA6B,CAAC;IACtD,oBAAoB,CAAC,0BAA0B,CAAC;GACpC,eAAe,CAkC3B;;2FAlCY,eAAe;kBAzB3B,SAAS;+BAEI,kBAAkB,WAI5B;wBACI,OAAO;wBACP,gBAAgB;qBACnB,mBACgB,uBAAuB,CAAC,MAAM;;sBA6B9C,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    imports:\n    [\n        NgClass,\n        TooltipDirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\n@DebugData(\n{\n    inputs:\n    [\n        nameof<ButtonComponent>('disabled'),\n    ],\n    outputs:\n    [\n        nameof<ButtonComponent>('click'),\n    ],\n})\n@RelationsEditorMetadata(ButtonRelationsMetadataLoader)\n@LayoutEditorMetadata(ButtonLayoutMetadataLoader)\nexport class ButtonComponent 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 ButtonNodeComponent extends RelationsNodeBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ButtonNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ButtonNodeComponent, 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: RelationsNodeHeaderComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputComponent, selector: "relation-node-output" }, { kind: "pipe", type: FirstUppercaseLocalizePipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ButtonNodeComponent, 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: RelationsNodeHeaderComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputComponent, selector: "relation-node-output" }, { kind: "pipe", type: FirstUppercaseLocalizePipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ButtonNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button-node', imports: [
                         RelationsNodeHeaderComponent,

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

@@ -39,10 +39,10 @@ export class DebounceValueNodeComponent extends RelationsNodeBase {
             this.debounceTime.patchValue(this.metadata?.relationsOptions.delay);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DebounceValueNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: DebounceValueNodeComponent, 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: RelationsNodeHeaderComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputComponent, selector: "relation-node-output" }, { kind: "pipe", type: FirstUppercaseLocalizePipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DebounceValueNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: DebounceValueNodeComponent, 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: RelationsNodeHeaderComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputComponent, selector: "relation-node-output" }, { kind: "pipe", type: FirstUppercaseLocalizePipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DebounceValueNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DebounceValueNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'debounce-value-node', imports: [
                         ReactiveFormsModule,

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

@@ -82,10 +82,10 @@ export class DeconstructNodeComponent extends RelationsNodeBase {
         }
         return result ?? false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DeconstructNodeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TitledDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: DeconstructNodeComponent, 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: RelationsNodeHeaderComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputComponent, selector: "relation-node-output" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: FirstUppercaseLocalizePipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DeconstructNodeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TitledDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: DeconstructNodeComponent, 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: RelationsNodeHeaderComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputComponent, selector: "relation-node-output" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: FirstUppercaseLocalizePipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DeconstructNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DeconstructNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'deconstruct-node', imports: [
                         RelationsNodeHeaderComponent,

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 EmptyNodeComponent extends RelationsNodeBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EmptyNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: EmptyNodeComponent, 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: RelationsNodeHeaderComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputComponent, selector: "relation-node-output" }, { kind: "pipe", type: FirstUppercaseLocalizePipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmptyNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: EmptyNodeComponent, 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: RelationsNodeHeaderComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputComponent, selector: "relation-node-output" }, { kind: "pipe", type: FirstUppercaseLocalizePipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EmptyNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmptyNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'empty-node', imports: [
                         RelationsNodeHeaderComponent,

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

@@ -43,10 +43,10 @@ export class FirstNonNullNodeComponent extends RelationsNodeBase {
             this.history.getNewState();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FirstNonNullNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: FirstNonNullNodeComponent, 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: RelationsNodeHeaderComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputComponent, selector: "relation-node-output" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: FirstUppercaseLocalizePipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FirstNonNullNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: FirstNonNullNodeComponent, 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: RelationsNodeHeaderComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputComponent, selector: "relation-node-output" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: FirstUppercaseLocalizePipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FirstNonNullNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FirstNonNullNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'first-non-null-node', imports: [
                         RelationsNodeHeaderComponent,

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

@@ -18,15 +18,15 @@ let GridPanelComponent = class GridPanelComponent extends LayoutComponentBase {
         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: "20.0.0", ngImport: i0, type: GridPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: GridPanelComponent, 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: LayoutComponentRendererDirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererCallback", "layoutComponentRendererProviders"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GridPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: GridPanelComponent, 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: LayoutComponentRendererDirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererCallback", "layoutComponentRendererProviders"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 GridPanelComponent = __decorate([
     DescendantsGetter(options => options?.areas ?? []),
     LayoutEditorMetadata(GridPanelLayoutMetadataLoader)
 ], GridPanelComponent);
 export { GridPanelComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GridPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GridPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'grid-panel', imports: [
                         CommonModule,

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

@@ -25,15 +25,15 @@ export class GridAreasDefinitionDialogComponent {
         /**
          * Indication whether is area under editation
          */
-        this.editing = signal(false);
+        this.editing = signal(false, ...(ngDevMode ? [{ debugName: "editing" }] : []));
         /**
          * Index of currently edited area
          */
-        this.editedIndex = signal(null);
+        this.editedIndex = signal(null, ...(ngDevMode ? [{ debugName: "editedIndex" }] : []));
         /**
          * Copy of currently edited area coordinates
          */
-        this.editedArea = signal(null);
+        this.editedArea = signal(null, ...(ngDevMode ? [{ debugName: "editedArea" }] : []));
         /**
          * Form control for changing display name
          */
@@ -143,10 +143,10 @@ export class GridAreasDefinitionDialogComponent {
         this.endEditation();
         this.areas.splice(index, 1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GridAreasDefinitionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: FirstUppercaseLocalizePipe, 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: "21.0.6", ngImport: i0, type: GridAreasDefinitionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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: "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: "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"] }, { kind: "pipe", type: FirstUppercaseLocalizePipe, name: "firstUppercaseLocalize" }, { kind: "pipe", type: ToGridColumnsTemplatePipe, name: "toGridColumnsTemplate" }, { kind: "pipe", type: ToGridRowsTemplatePipe, name: "toGridRowsTemplate" }, { kind: "pipe", type: StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GridAreasDefinitionDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GridAreasDefinitionDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'grid-areas-definition-dialog', imports: [
                         FirstUppercaseLocalizePipe,

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":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,MAAM,EAAkB,MAAM,EAAC,MAAM,eAAe,CAAC;AACjG,OAAO,EAAC,eAAe,EAAC,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAC,WAAW,EAAE,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAC,kBAAkB,EAAC,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAC,0BAA0B,EAAE,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAC,UAAU,EAAE,OAAO,EAAC,MAAM,gBAAgB,CAAC;AAInD,OAAO,EAAC,iBAAiB,EAAE,yBAAyB,EAAE,sBAAsB,EAAC,MAAM,2BAA2B,CAAC;;;;AAE/G;;GAEG;AAkBH,MAAM,OAAO,kCAAkC;IAjB/C;QAmBI,8FAA8F;QAE9F;;WAEG;QACO,YAAO,GAA8B,MAAM,CAA4B,kBAAkB,CAAC,CAAC;QAErG;;WAEG;QACO,UAAK,GAA6D,CAAC,GAAG,MAAM,CAA4B,kBAAkB,CAAC,CAAC,KAAK,CAAC,CAAC;QAE7I;;WAEG;QACO,YAAO,GAA4B,MAAM,CAAC,KAAK,CAAC,CAAC;QAE3D;;WAEG;QACO,gBAAW,GAA0C,MAAM,CAAC,IAAI,CAAC,CAAC;QAE5E;;WAEG;QACO,eAAU,GAAiE,MAAM,CAAC,IAAI,CAAC,CAAC;QAElG;;WAEG;QACO,oBAAe,GAAwB,IAAI,WAAW,CAAS,EAAE,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,CAAC,CAAC;KAiJrG;IA/IG,2FAA2F;IAE3F;;OAEG;IACO,YAAY;QAElB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEvC,IAAG,OAAO,CAAC,WAAW,CAAC,EACvB,CAAC;YACG,OAAO;QACX,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;QAEjE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IACtC,CAAC;IAED;;OAEG;IACO,OAAO;QAEb,MAAM,EAAE,GAAG,iBAAiB,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC;QAE7C,IAAI,CAAC,KAAK,CAAC,IAAI,CACf;YACI,EAAE;YACF,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,kBAAkB;YAC3B,WAAW,EAAE,EAAE;YACf,KAAK,EAAE,IAAI;YACX,OAAO,EACP;gBACI,aAAa,EAAE,CAAC,CAAC;gBACjB,eAAe,EAAE,CAAC;gBAClB,UAAU,EAAE,CAAC,CAAC;gBACd,YAAY,EAAE,CAAC;aAClB;SACJ,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QAE1C,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAClC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;IAC7E,CAAC;IAED;;;;OAIG;IACO,UAAU,CAAC,GAAW,EAAE,MAAc;QAE5C,IAAG,CAAC,IAAI,CAAC,UAAU,EAAE,EACrB,CAAC;YACG,OAAO;QACX,CAAC;QAED,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE;YAEhC,IAAG,CAAC,UAAU,EACd,CAAC;gBACG,MAAM,IAAI,KAAK,CAAC,8DAA8D,CAAC,CAAC;YACpF,CAAC;YAED,OAAO;gBACH,eAAe,EAAE,UAAU,CAAC,eAAe;gBAC3C,aAAa,EAAE,MAAM,GAAG,CAAC;gBACzB,YAAY,EAAE,UAAU,CAAC,YAAY;gBACrC,UAAU,EAAE,GAAG,GAAG,CAAC;aACtB,CAAC;QACN,CAAC,CAAC,CAAC;IACP,CAAC;IAED;;;;OAIG;IACO,UAAU,CAAC,GAAW,EAAE,MAAc;QAE5C,IAAG,CAAC,IAAI,CAAC,OAAO,EAAE,EAClB,CAAC;YACG,OAAO;QACX,CAAC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEvC,IAAG,OAAO,CAAC,WAAW,CAAC,EACvB,CAAC;YACG,MAAM,IAAI,KAAK,CAAC,+DAA+D,CAAC,CAAC;QACrF,CAAC;QAED,IAAG,IAAI,CAAC,UAAU,EAAE,EACpB,CAAC;YACG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,OAAO,GAAG,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,EAAkC,CAAC;YAC9H,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAE1B,OAAO;QACX,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC;QAEnD,IAAG,OAAO,CAAC,UAAU,CAAC,EACtB,CAAC;YACG,MAAM,IAAI,KAAK,CAAC,8DAA8D,CAAC,CAAC;QACpF,CAAC;QAED,IAAI,CAAC,UAAU,CAAC,GAAG,CACnB;YACI,YAAY,EAAE,GAAG,GAAG,CAAC;YACrB,eAAe,EAAE,MAAM,GAAG,CAAC;YAC3B,aAAa,EAAE,UAAU,CAAC,aAAa;YACvC,UAAU,EAAE,UAAU,CAAC,UAAU;SACpC,CAAC,CAAC;IACP,CAAC;IAED;;;OAGG;IACO,QAAQ,CAAC,KAAa;QAE5B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;IACvE,CAAC;IAED;;;OAGG;IACO,UAAU,CAAC,KAAa;QAE9B,IAAI,CAAC,YAAY,EAAE,CAAC;QAEpB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAChC,CAAC;8GAhLQ,kCAAkC;kGAAlC,kCAAkC,wFChC/C,u0HAyEM,yhBDnDE,0BAA0B,0DAC1B,yBAAyB,yDACzB,sBAAsB,0DACtB,mBAAmB,qkBACnB,iBAAiB,sDACjB,gBAAgB,2JAChB,eAAe;;2FAIV,kCAAkC;kBAjB9C,SAAS;+BAEI,8BAA8B,WAIxC;wBACI,0BAA0B;wBAC1B,yBAAyB;wBACzB,sBAAsB;wBACtB,mBAAmB;wBACnB,iBAAiB;wBACjB,gBAAgB;wBAChB,eAAe;qBAClB,mBACgB,uBAAuB,CAAC,MAAM","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 {FirstUppercaseLocalizePipe, 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    imports:\n    [\n        FirstUppercaseLocalizePipe,\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 {FirstUppercaseLocalizePipe, 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    imports:\n    [\n        FirstUppercaseLocalizePipe,\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: "20.0.0", ngImport: i0, type: GridAreasPropertiesControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", 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: FirstUppercaseLocalizePipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GridAreasPropertiesControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.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: FirstUppercaseLocalizePipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GridAreasPropertiesControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GridAreasPropertiesControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'grid-areas-properties-control', imports: [
                         FirstUppercaseLocalizePipe,

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

@@ -17,15 +17,15 @@ let GridPanelAreaComponent = class GridPanelAreaComponent extends LayoutComponen
         const style = this.componentElement.nativeElement.style;
         applyGridCoordinates(this.options, style);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GridPanelAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: GridPanelAreaComponent, isStandalone: true, selector: "grid-panel-area", usesInheritance: true, ngImport: i0, template: "<ng-container *layoutComponentRenderer=\"options?.component\"/>", dependencies: [{ kind: "directive", type: LayoutComponentRendererDirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererCallback", "layoutComponentRendererProviders"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GridPanelAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: GridPanelAreaComponent, isStandalone: true, selector: "grid-panel-area", usesInheritance: true, ngImport: i0, template: "<ng-container *layoutComponentRenderer=\"options?.component\"/>", dependencies: [{ kind: "directive", type: LayoutComponentRendererDirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererCallback", "layoutComponentRendererProviders"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 GridPanelAreaComponent = __decorate([
     DescendantsGetter(options => options?.component ? [options.component] : []),
     LayoutEditorMetadata(GridPanelAreaLayoutMetadataLoader)
 ], GridPanelAreaComponent);
 export { GridPanelAreaComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GridPanelAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GridPanelAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'grid-panel-area', imports: [
                         LayoutComponentRendererDirective,

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

@@ -37,8 +37,8 @@ let HtmlBlockComponent = class HtmlBlockComponent extends LayoutComponentBase {
             this.componentElement.nativeElement.innerHTML = this.content ?? '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: HtmlBlockComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: HtmlBlockComponent, isStandalone: true, selector: "html-block", inputs: { content: "content" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display: block;}"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HtmlBlockComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: HtmlBlockComponent, isStandalone: true, selector: "html-block", inputs: { content: "content" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{display: block;}"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 HtmlBlockComponent = __decorate([
     DebugData({
@@ -50,7 +50,7 @@ HtmlBlockComponent = __decorate([
     LayoutEditorMetadata(HtmlBlockLayoutMetadataLoader)
 ], HtmlBlockComponent);
 export { HtmlBlockComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: HtmlBlockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HtmlBlockComponent, decorators: [{
             type: Component,
             args: [{ selector: 'html-block', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display: block;}"] }]
         }], propDecorators: { content: [{

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

@@ -1 +1 @@
-{"version":3,"file":"htmlBlock.component.js","sourceRoot":"","sources":["../../../../../basic-components/src/dynamicItems/htmlBlock/htmlBlock.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACvF,OAAO,EAAkB,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAC,oBAAoB,EAAC,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAC,SAAS,EAAqB,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAC,uBAAuB,EAAC,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAC,qBAAqB,EAAC,MAAM,eAAe,CAAC;AACpD,OAAO,EAAC,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAGtC,OAAO,EAAC,6BAA6B,EAAE,gCAAgC,EAAC,MAAM,sBAAsB,CAAC;;AAErG;;GAEG;AAiBI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,mBAA8C;IAiBlF,kGAAkG;IAElG;;OAEG;IACa,KAAK,CAAC,gBAAgB,CAAC,OAAsB;QAEzD,MAAM,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAEtC,IAAG,MAAM,CAAqB,SAAS,CAAC,IAAI,OAAO,EACnD,CAAC;YACG,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC;QACvE,CAAC;IACL,CAAC;IAED,2EAA2E;IAE3E;;OAEG;IACgB,YAAY;QAE3B,yBAAyB;QACzB,wBAAwB;QACxB,IAAI;QACJ,cAAc;QACd,IAAI;QAEJ,IAAG,IAAI,CAAC,OAAO,EAAE,OAAO,EACxB,CAAC;YACG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;YACpC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC;QACvE,CAAC;IACL,CAAC;8GAlDQ,kBAAkB;kGAAlB,kBAAkB,6HAbjB,EAAE;;AAaH,kBAAkB;IAT9B,SAAS,CACV;QACI,MAAM,EACN;YACI,MAAM,CAAqB,SAAS,CAAC;SACxC;KACJ,CAAC;IACD,uBAAuB,CAAC,gCAAgC,CAAC;IACzD,oBAAoB,CAAC,6BAA6B,CAAC;GACvC,kBAAkB,CAmD9B;;2FAnDY,kBAAkB;kBAhB9B,SAAS;+BAEI,YAAY,YACZ,EAAE,mBAEK,uBAAuB,CAAC,MAAM;8BA0BxC,OAAO;sBADb,KAAK","sourcesContent":["import {Component, ChangeDetectionStrategy, Input, SimpleChanges} from '@angular/core';\nimport {LayoutComponent, LayoutComponentBase} from '@anglr/dynamic/layout';\nimport {LayoutEditorMetadata} from '@anglr/dynamic/layout-editor';\nimport {DebugData, RelationsComponent} from '@anglr/dynamic/relations';\nimport {RelationsEditorMetadata} from '@anglr/dynamic/relations-editor';\nimport {HostDisplayBlockStyle} from '@anglr/common';\nimport {nameof} from '@jscrpt/common';\n\nimport {HtmlBlockComponentOptions} from './htmlBlock.options';\nimport {HtmlBlockLayoutMetadataLoader, HtmlBlockRelationsMetadataLoader} from './htmlBlock.metadata';\n\n/**\n * Component used for displaying html block\n */\n@Component(\n{\n    selector: 'html-block',\n    template: '',\n    styles: [HostDisplayBlockStyle],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\n@DebugData(\n{\n    inputs:\n    [\n        nameof<HtmlBlockComponent>('content'),\n    ],\n})\n@RelationsEditorMetadata(HtmlBlockRelationsMetadataLoader)\n@LayoutEditorMetadata(HtmlBlockLayoutMetadataLoader)\nexport class HtmlBlockComponent extends LayoutComponentBase<HtmlBlockComponentOptions> implements LayoutComponent<HtmlBlockComponentOptions>, RelationsComponent\n{\n    //######################### public properties - implementation of RelationsComponent #########################\n\n    /**\n     * @inheritdoc\n     */\n    public relationsOptions: any;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Html content to be displayed inside block\n     */\n    @Input()\n    public content: string|undefined|null;\n\n    //######################### public methods - implementation of OnChanges #########################\n\n    /**\n     * @inheritdoc\n     */\n    public override async dynamicOnChanges(changes: SimpleChanges): Promise<void>\n    {\n        await super.dynamicOnChanges(changes);\n\n        if(nameof<HtmlBlockComponent>('content') in changes)\n        {\n            this.componentElement.nativeElement.innerHTML = this.content ?? '';\n        }\n    }\n\n    //######################### protected - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected override onOptionsSet(): void\n    {\n        //TODO: check if required\n        // if(!this.initialized)\n        // {\n        //     return;\n        // }\n\n        if(this.options?.content)\n        {\n            this.content = this.options.content;\n            this.componentElement.nativeElement.innerHTML = this.content ?? '';\n        }\n    }\n}"]}
+{"version":3,"file":"htmlBlock.component.js","sourceRoot":"","sources":["../../../../../basic-components/src/dynamicItems/htmlBlock/htmlBlock.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACvF,OAAO,EAAkB,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAC,oBAAoB,EAAC,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAC,SAAS,EAAqB,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAC,uBAAuB,EAAC,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAC,qBAAqB,EAAC,MAAM,eAAe,CAAC;AACpD,OAAO,EAAC,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAGtC,OAAO,EAAC,6BAA6B,EAAE,gCAAgC,EAAC,MAAM,sBAAsB,CAAC;;AAErG;;GAEG;AAiBI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,mBAA8C;IAiBlF,kGAAkG;IAElG;;OAEG;IACa,KAAK,CAAC,gBAAgB,CAAC,OAAsB;QAEzD,MAAM,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAEtC,IAAG,MAAM,CAAqB,SAAS,CAAC,IAAI,OAAO,EACnD,CAAC;YACG,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC;QACvE,CAAC;IACL,CAAC;IAED,2EAA2E;IAE3E;;OAEG;IACgB,YAAY;QAE3B,yBAAyB;QACzB,wBAAwB;QACxB,IAAI;QACJ,cAAc;QACd,IAAI;QAEJ,IAAG,IAAI,CAAC,OAAO,EAAE,OAAO,EACxB,CAAC;YACG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;YACpC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC;QACvE,CAAC;IACL,CAAC;8GAlDQ,kBAAkB;kGAAlB,kBAAkB,6HAbjB,EAAE;;AAaH,kBAAkB;IAT9B,SAAS,CACV;QACI,MAAM,EACN;YACI,MAAM,CAAqB,SAAS,CAAC;SACxC;KACJ,CAAC;IACD,uBAAuB,CAAC,gCAAgC,CAAC;IACzD,oBAAoB,CAAC,6BAA6B,CAAC;GACvC,kBAAkB,CAmD9B;;2FAnDY,kBAAkB;kBAhB9B,SAAS;+BAEI,YAAY,YACZ,EAAE,mBAEK,uBAAuB,CAAC,MAAM;;sBAyB9C,KAAK","sourcesContent":["import {Component, ChangeDetectionStrategy, Input, SimpleChanges} from '@angular/core';\nimport {LayoutComponent, LayoutComponentBase} from '@anglr/dynamic/layout';\nimport {LayoutEditorMetadata} from '@anglr/dynamic/layout-editor';\nimport {DebugData, RelationsComponent} from '@anglr/dynamic/relations';\nimport {RelationsEditorMetadata} from '@anglr/dynamic/relations-editor';\nimport {HostDisplayBlockStyle} from '@anglr/common';\nimport {nameof} from '@jscrpt/common';\n\nimport {HtmlBlockComponentOptions} from './htmlBlock.options';\nimport {HtmlBlockLayoutMetadataLoader, HtmlBlockRelationsMetadataLoader} from './htmlBlock.metadata';\n\n/**\n * Component used for displaying html block\n */\n@Component(\n{\n    selector: 'html-block',\n    template: '',\n    styles: [HostDisplayBlockStyle],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\n@DebugData(\n{\n    inputs:\n    [\n        nameof<HtmlBlockComponent>('content'),\n    ],\n})\n@RelationsEditorMetadata(HtmlBlockRelationsMetadataLoader)\n@LayoutEditorMetadata(HtmlBlockLayoutMetadataLoader)\nexport class HtmlBlockComponent extends LayoutComponentBase<HtmlBlockComponentOptions> implements LayoutComponent<HtmlBlockComponentOptions>, RelationsComponent\n{\n    //######################### public properties - implementation of RelationsComponent #########################\n\n    /**\n     * @inheritdoc\n     */\n    public relationsOptions: any;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Html content to be displayed inside block\n     */\n    @Input()\n    public content: string|undefined|null;\n\n    //######################### public methods - implementation of OnChanges #########################\n\n    /**\n     * @inheritdoc\n     */\n    public override async dynamicOnChanges(changes: SimpleChanges): Promise<void>\n    {\n        await super.dynamicOnChanges(changes);\n\n        if(nameof<HtmlBlockComponent>('content') in changes)\n        {\n            this.componentElement.nativeElement.innerHTML = this.content ?? '';\n        }\n    }\n\n    //######################### protected - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected override onOptionsSet(): void\n    {\n        //TODO: check if required\n        // if(!this.initialized)\n        // {\n        //     return;\n        // }\n\n        if(this.options?.content)\n        {\n            this.content = this.options.content;\n            this.componentElement.nativeElement.innerHTML = this.content ?? '';\n        }\n    }\n}"]}

package/es2022/basic-components/src/dynamicItems/htmlBlock/node/htmlBlockNode.component.js

@@ -6,10 +6,10 @@ import * as i0 from "@angular/core";
  * Relations node component for html block
  */
 export class HtmlBlockNodeComponent extends RelationsNodeBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: HtmlBlockNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: HtmlBlockNodeComponent, isStandalone: true, selector: "html-block-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=\"content\" [parent]=\"this\"></relation-node-input>\n                <div>{{'content'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "component", type: RelationsNodeHeaderComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputComponent, selector: "relation-node-input" }, { kind: "pipe", type: FirstUppercaseLocalizePipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HtmlBlockNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: HtmlBlockNodeComponent, isStandalone: true, selector: "html-block-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=\"content\" [parent]=\"this\"></relation-node-input>\n                <div>{{'content'|firstUppercaseLocalize}}</div>\n            </div>\n        </div>\n\n        <div class=\"outputs\">\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "component", type: RelationsNodeHeaderComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputComponent, selector: "relation-node-input" }, { kind: "pipe", type: FirstUppercaseLocalizePipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: HtmlBlockNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HtmlBlockNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'html-block-node', imports: [
                         RelationsNodeHeaderComponent,

package/es2022/basic-components/src/dynamicItems/ifBlock/designer/ifBlockDesigner.component.js

@@ -20,10 +20,10 @@ export class IfBlockDesignerComponent extends IfBlockComponent {
             this.componentElement.nativeElement.classList.add('dynamic-hidden');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IfBlockDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: IfBlockDesignerComponent, isStandalone: true, selector: "if-block-designer", usesInheritance: true, ngImport: i0, template: "<ng-container *layoutComponentRenderer=\"options?.content\"/>", styles: [":host{display: block;}"], dependencies: [{ kind: "directive", type: LayoutComponentRendererDirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererCallback", "layoutComponentRendererProviders"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IfBlockDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: IfBlockDesignerComponent, isStandalone: true, selector: "if-block-designer", usesInheritance: true, ngImport: i0, template: "<ng-container *layoutComponentRenderer=\"options?.content\"/>", styles: [":host{display: block;}"], dependencies: [{ kind: "directive", type: LayoutComponentRendererDirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererCallback", "layoutComponentRendererProviders"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IfBlockDesignerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IfBlockDesignerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'if-block-designer', imports: [
                         LayoutComponentRendererDirective,

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

@@ -28,8 +28,8 @@ let IfBlockComponent = class IfBlockComponent extends LayoutComponentBase {
     onOptionsSet() {
         this.condition = this.options?.condition ?? false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IfBlockComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IfBlockComponent, isStandalone: true, selector: "if-block", inputs: { condition: "condition" }, usesInheritance: true, ngImport: i0, template: "@if(condition)\n{\n    <ng-container *layoutComponentRenderer=\"options?.content\"/>\n}", styles: [":host{display: block;}"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: LayoutComponentRendererDirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererCallback", "layoutComponentRendererProviders"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IfBlockComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: IfBlockComponent, isStandalone: true, selector: "if-block", inputs: { condition: "condition" }, usesInheritance: true, ngImport: i0, template: "@if(condition)\n{\n    <ng-container *layoutComponentRenderer=\"options?.content\"/>\n}", styles: [":host{display: block;}"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: LayoutComponentRendererDirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererCallback", "layoutComponentRendererProviders"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 IfBlockComponent = __decorate([
     DebugData({
@@ -43,7 +43,7 @@ IfBlockComponent = __decorate([
     LayoutEditorMetadata(IfBlockLayoutMetadataLoader)
 ], IfBlockComponent);
 export { IfBlockComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IfBlockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IfBlockComponent, decorators: [{
             type: Component,
             args: [{ selector: 'if-block', imports: [
                         CommonModule,

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

@@ -1 +1 @@
-{"version":3,"file":"ifBlock.component.js","sourceRoot":"","sources":["../../../../../basic-components/src/dynamicItems/ifBlock/ifBlock.component.ts","../../../../../basic-components/src/dynamicItems/ifBlock/ifBlock.component.html"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AACxE,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAkB,mBAAmB,EAAE,gCAAgC,EAAC,MAAM,uBAAuB,CAAC;AAC7G,OAAO,EAAC,iBAAiB,EAAE,wBAAwB,EAAE,oBAAoB,EAAC,MAAM,8BAA8B,CAAC;AAC/G,OAAO,EAAC,SAAS,EAAqB,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAC,uBAAuB,EAAC,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAC,qBAAqB,EAAC,MAAM,eAAe,CAAC;AACpD,OAAO,EAAC,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAGtC,OAAO,EAAC,+BAA+B,EAAE,2BAA2B,EAAE,8BAA8B,EAAC,MAAM,oBAAoB,CAAC;;AAEhI;;GAEG;AAwBI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,mBAA4C;IAA3E;;QASH,gFAAgF;QAEhF;;WAEG;QAEI,cAAS,GAAY,IAAI,CAAC;KAWpC;IATG,2EAA2E;IAE3E;;OAEG;IACgB,YAAY;QAE3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,EAAE,SAAS,IAAI,KAAK,CAAC;IACtD,CAAC;8GAzBQ,gBAAgB;kGAAhB,gBAAgB,+HCtC7B,yFAGC,+EDmBO,YAAY,+BACZ,gCAAgC;;AAe3B,gBAAgB;IAX5B,SAAS,CACV;QACI,MAAM,EACN;YACI,MAAM,CAAmB,WAAW,CAAC;SACxC;KACJ,CAAC;IACD,iBAAiB,CAA0B,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACjG,wBAAwB,CAAC,+BAA+B,CAAC;IACzD,uBAAuB,CAAC,8BAA8B,CAAC;IACvD,oBAAoB,CAAC,2BAA2B,CAAC;GACrC,gBAAgB,CA0B5B;;2FA1BY,gBAAgB;kBAvB5B,SAAS;+BAEI,UAAU,WAIpB;wBACI,YAAY;wBACZ,gCAAgC;qBACnC,mBACgB,uBAAuB,CAAC,MAAM;8BA4BxC,SAAS;sBADf,KAAK","sourcesContent":["import {Component, ChangeDetectionStrategy, Input} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {LayoutComponent, LayoutComponentBase, LayoutComponentRendererDirective} from '@anglr/dynamic/layout';\nimport {DescendantsGetter, LayoutEditorDesignerType, LayoutEditorMetadata} from '@anglr/dynamic/layout-editor';\nimport {DebugData, RelationsComponent} from '@anglr/dynamic/relations';\nimport {RelationsEditorMetadata} from '@anglr/dynamic/relations-editor';\nimport {HostDisplayBlockStyle} from '@anglr/common';\nimport {nameof} from '@jscrpt/common';\n\nimport {IfBlockComponentOptions} from './ifBlock.options';\nimport {IfBlockLayoutDesignerTypeLoader, IfBlockLayoutMetadataLoader, IfBlockRelationsMetadataLoader} from './ifBlock.metadata';\n\n/**\n * Component used for displaying if block\n */\n@Component(\n{\n    selector: 'if-block',\n    templateUrl: 'ifBlock.component.html',\n    styles: [HostDisplayBlockStyle],\n    imports:\n    [\n        CommonModule,\n        LayoutComponentRendererDirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\n@DebugData(\n{\n    inputs:\n    [\n        nameof<IfBlockComponent>('condition'),\n    ],\n})\n@DescendantsGetter<IfBlockComponentOptions>(options => options?.content ? [options?.content] : [])\n@LayoutEditorDesignerType(IfBlockLayoutDesignerTypeLoader)\n@RelationsEditorMetadata(IfBlockRelationsMetadataLoader)\n@LayoutEditorMetadata(IfBlockLayoutMetadataLoader)\nexport class IfBlockComponent extends LayoutComponentBase<IfBlockComponentOptions> implements LayoutComponent<IfBlockComponentOptions>, RelationsComponent\n{\n    //######################### public properties - implementation of RelationsComponent #########################\n\n    /**\n     * @inheritdoc\n     */\n    public relationsOptions: any;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Condition used for displaying content of if block\n     */\n    @Input()\n    public condition: boolean = true;\n\n    //######################### protected - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected override onOptionsSet(): void\n    {\n        this.condition = this.options?.condition ?? false;\n    }\n}","@if(condition)\n{\n    <ng-container *layoutComponentRenderer=\"options?.content\"/>\n}"]}
+{"version":3,"file":"ifBlock.component.js","sourceRoot":"","sources":["../../../../../basic-components/src/dynamicItems/ifBlock/ifBlock.component.ts","../../../../../basic-components/src/dynamicItems/ifBlock/ifBlock.component.html"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AACxE,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAkB,mBAAmB,EAAE,gCAAgC,EAAC,MAAM,uBAAuB,CAAC;AAC7G,OAAO,EAAC,iBAAiB,EAAE,wBAAwB,EAAE,oBAAoB,EAAC,MAAM,8BAA8B,CAAC;AAC/G,OAAO,EAAC,SAAS,EAAqB,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAC,uBAAuB,EAAC,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAC,qBAAqB,EAAC,MAAM,eAAe,CAAC;AACpD,OAAO,EAAC,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAGtC,OAAO,EAAC,+BAA+B,EAAE,2BAA2B,EAAE,8BAA8B,EAAC,MAAM,oBAAoB,CAAC;;AAEhI;;GAEG;AAwBI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,mBAA4C;IAA3E;;QASH,gFAAgF;QAEhF;;WAEG;QAEI,cAAS,GAAY,IAAI,CAAC;KAWpC;IATG,2EAA2E;IAE3E;;OAEG;IACgB,YAAY;QAE3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,EAAE,SAAS,IAAI,KAAK,CAAC;IACtD,CAAC;8GAzBQ,gBAAgB;kGAAhB,gBAAgB,+HCtC7B,yFAGC,+EDmBO,YAAY,+BACZ,gCAAgC;;AAe3B,gBAAgB;IAX5B,SAAS,CACV;QACI,MAAM,EACN;YACI,MAAM,CAAmB,WAAW,CAAC;SACxC;KACJ,CAAC;IACD,iBAAiB,CAA0B,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACjG,wBAAwB,CAAC,+BAA+B,CAAC;IACzD,uBAAuB,CAAC,8BAA8B,CAAC;IACvD,oBAAoB,CAAC,2BAA2B,CAAC;GACrC,gBAAgB,CA0B5B;;2FA1BY,gBAAgB;kBAvB5B,SAAS;+BAEI,UAAU,WAIpB;wBACI,YAAY;wBACZ,gCAAgC;qBACnC,mBACgB,uBAAuB,CAAC,MAAM;;sBA2B9C,KAAK","sourcesContent":["import {Component, ChangeDetectionStrategy, Input} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {LayoutComponent, LayoutComponentBase, LayoutComponentRendererDirective} from '@anglr/dynamic/layout';\nimport {DescendantsGetter, LayoutEditorDesignerType, LayoutEditorMetadata} from '@anglr/dynamic/layout-editor';\nimport {DebugData, RelationsComponent} from '@anglr/dynamic/relations';\nimport {RelationsEditorMetadata} from '@anglr/dynamic/relations-editor';\nimport {HostDisplayBlockStyle} from '@anglr/common';\nimport {nameof} from '@jscrpt/common';\n\nimport {IfBlockComponentOptions} from './ifBlock.options';\nimport {IfBlockLayoutDesignerTypeLoader, IfBlockLayoutMetadataLoader, IfBlockRelationsMetadataLoader} from './ifBlock.metadata';\n\n/**\n * Component used for displaying if block\n */\n@Component(\n{\n    selector: 'if-block',\n    templateUrl: 'ifBlock.component.html',\n    styles: [HostDisplayBlockStyle],\n    imports:\n    [\n        CommonModule,\n        LayoutComponentRendererDirective,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\n@DebugData(\n{\n    inputs:\n    [\n        nameof<IfBlockComponent>('condition'),\n    ],\n})\n@DescendantsGetter<IfBlockComponentOptions>(options => options?.content ? [options?.content] : [])\n@LayoutEditorDesignerType(IfBlockLayoutDesignerTypeLoader)\n@RelationsEditorMetadata(IfBlockRelationsMetadataLoader)\n@LayoutEditorMetadata(IfBlockLayoutMetadataLoader)\nexport class IfBlockComponent extends LayoutComponentBase<IfBlockComponentOptions> implements LayoutComponent<IfBlockComponentOptions>, RelationsComponent\n{\n    //######################### public properties - implementation of RelationsComponent #########################\n\n    /**\n     * @inheritdoc\n     */\n    public relationsOptions: any;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Condition used for displaying content of if block\n     */\n    @Input()\n    public condition: boolean = true;\n\n    //######################### protected - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected override onOptionsSet(): void\n    {\n        this.condition = this.options?.condition ?? false;\n    }\n}","@if(condition)\n{\n    <ng-container *layoutComponentRenderer=\"options?.content\"/>\n}"]}