@metadev/daga-angular 4.2.3 → 4.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/Changelog.md CHANGED
@@ -6,6 +6,19 @@ List of releases and changes.
6
6
 
7
7
  ## Next release Joyeuse
8
8
 
9
+ ## v. 4.2.5
10
+
11
+ - Add methods `getZoomLevel()` and `getViewCoordinates()` in `canvas` to obtain the current zoom and pan level of the view [#317](https://github.com/metadevpro/daga/pull/317)
12
+ - Enable configuring the height of the palette and property editor [#319](https://github.com/metadevpro/daga/pull/319)
13
+ - Correctly update the connection point of ports when pasting [#321](https://github.com/metadevpro/daga/pull/321)
14
+
15
+ ## v. 4.2.4
16
+
17
+ - Enable configuring line style in shaped looks [#313](https://github.com/metadevpro/daga/pull/313)
18
+ - Enable default values for parameters of looks [#313](https://github.com/metadevpro/daga/pull/313)
19
+ - Use optional `label` fields in `Property` [#314](https://github.com/metadevpro/daga/pull/314)
20
+ - Use default values for `basic` and `editable` fields of `Property` [#315](https://github.com/metadevpro/daga/pull/315)
21
+
9
22
  ## v. 4.2.3
10
23
 
11
24
  - Enable toggling whether individual sections can be highlighted or entire nodes [#308](https://github.com/metadevpro/daga/pull/308)
@@ -8,7 +8,10 @@ daga-property-editor {
8
8
  font-size: 1rem;
9
9
  font-weight: 500;
10
10
  }
11
- .daga-panel-content {
11
+ .daga-panel-content:empty {
12
+ height: 0 !important;
13
+ }
14
+ .daga-panel-content:not(:empty) {
12
15
  padding: 1rem;
13
16
  }
14
17
  .daga-property {
@@ -1,4 +1,4 @@
1
- import { Side, DiagramCanvas, DiagramActions, Corner, layouts, getLocationsOfNodes, ApplyLayoutAction, Events, setCursorStyle, CursorStyle, DragEvents, filterByOnlyDescendants, AddNodeAction, generalClosedPath, DIAGRAM_FIELD_DEFAULTS, getLeftMargin, getTopMargin, Type, Property, isObject, equals, Keys, DagaImporter, DagaExporter } from '@metadev/daga';
1
+ import { Side, DiagramCanvas, DiagramActions, Corner, layouts, getLocationsOfNodes, ApplyLayoutAction, Events, setCursorStyle, CursorStyle, DragEvents, filterByOnlyDescendants, AddNodeAction, generalClosedPath, ClosedShape, DIAGRAM_FIELD_DEFAULTS, getLeftMargin, getTopMargin, Type, Property, isObject, equals, Keys, DagaImporter, DagaExporter } from '@metadev/daga';
2
2
  export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, ApplyLayoutAction, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, DagaExporter, DagaImporter, DiagramActionMethod, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramDecorator, DiagramDecoratorSet, DiagramDoubleClickEvent, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramEvents, DiagramField, DiagramFieldSet, DiagramHighlightedEvent, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramPortType, DiagramSecondaryClickEvent, DiagramSection, DiagramSectionSet, DiagramSelectionEvent, EditFieldAction, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, MoveAction, PasteAction, PriorityLayout, Property, PropertySet, RemoveAction, SetGeometryAction, SetParentAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, getLocationsOfNodes, layouts } from '@metadev/daga';
3
3
  import * as i0 from '@angular/core';
4
4
  import { ElementRef, Input, Component, Injectable, inject, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, Output, NgModule } from '@angular/core';
@@ -525,6 +525,11 @@ class PaletteComponent {
525
525
  .style('width', this.width)
526
526
  .select('.daga-palette-view')
527
527
  .style('flex-direction', 'row');
528
+ if (this.height) {
529
+ this.selectPanel()
530
+ .select('.daga-panel-content')
531
+ .style('height', this.height);
532
+ }
528
533
  break;
529
534
  case Side.Left:
530
535
  case Side.Right:
@@ -532,6 +537,11 @@ class PaletteComponent {
532
537
  .style('height', this.width)
533
538
  .select('.daga-palette-view')
534
539
  .style('flex-direction', 'column');
540
+ if (this.height) {
541
+ this.selectPanel()
542
+ .select('.daga-panel-content')
543
+ .style('width', this.height);
544
+ }
535
545
  break;
536
546
  }
537
547
  this.selectPanel()
@@ -547,6 +557,7 @@ class PaletteComponent {
547
557
  this.location = config.components?.palette?.location || Corner.TopLeft;
548
558
  this.direction = config.components?.palette?.direction || Side.Bottom;
549
559
  this.width = config.components?.palette?.width || '12rem';
560
+ this.height = config.components?.palette?.height;
550
561
  this.gap = config.components?.palette?.gap || '1rem';
551
562
  this.palettes = config.components?.palette?.sections || [];
552
563
  this.currentPalette = this.palettes[0];
@@ -639,7 +650,7 @@ class PaletteComponent {
639
650
  return;
640
651
  }
641
652
  const borderThickness = type.defaultLook.lookType === 'shaped-look'
642
- ? type.defaultLook.borderThickness
653
+ ? type.defaultLook.borderThickness || 1
643
654
  : 0;
644
655
  const templateHeight = type.defaultHeight + borderThickness;
645
656
  const templateWidth = type.defaultWidth + borderThickness;
@@ -770,9 +781,9 @@ class PaletteComponent {
770
781
  case 'shaped-look':
771
782
  thisComponent
772
783
  .append('path')
773
- .attr('d', generalClosedPath(nodeLook.shape, nodeLook.borderThickness / 2, nodeLook.borderThickness / 2, type.defaultWidth, type.defaultHeight))
774
- .attr('fill', nodeLook.fillColor)
775
- .attr('stroke', nodeLook.borderColor)
784
+ .attr('d', generalClosedPath(nodeLook.shape || ClosedShape.Rectangle, (nodeLook.borderThickness || 1) / 2, (nodeLook.borderThickness || 1) / 2, type.defaultWidth, type.defaultHeight))
785
+ .attr('fill', nodeLook.fillColor || '#FFFFFF')
786
+ .attr('stroke', nodeLook.borderColor || '#000000')
776
787
  .attr('stroke-width', `${nodeLook.borderThickness}px`);
777
788
  break;
778
789
  case 'image-look':
@@ -962,7 +973,7 @@ class PaletteComponent {
962
973
  }
963
974
  }
964
975
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
965
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location", direction: "direction", width: "width", gap: "gap" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"daga-panel daga-{{ location }} daga-{{ direction }}\">\r\n <daga-collapse-button\r\n #collapseButton\r\n [direction]=\"direction\"\r\n [collapsableSelector]=\"panel\"\r\n collapsableAdditionalSelector=\".daga-panel-content\"\r\n rule=\"display\"\r\n collapsedValue=\"none\"\r\n visibleValue=\"block\"\r\n />\r\n <div class=\"daga-panel-content\">\r\n @if (palettes.length > 1) {\r\n <div class=\"daga-panel-tabs\">\r\n @for (palette of palettes; track palette) {\r\n <div\r\n class=\"daga-panel-tab\"\r\n [class]=\"palette === currentPalette ? 'daga-current-tab' : ''\"\r\n (click)=\"switchPalette(palette)\"\r\n >\r\n {{ palette.name }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"daga-palette-view\"></div>\r\n </div>\r\n </div>\r\n", dependencies: [{ kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
976
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location", direction: "direction", width: "width", height: "height", gap: "gap" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"daga-panel daga-{{ location }} daga-{{ direction }}\">\r\n <daga-collapse-button\r\n #collapseButton\r\n [direction]=\"direction\"\r\n [collapsableSelector]=\"panel\"\r\n collapsableAdditionalSelector=\".daga-panel-content\"\r\n rule=\"display\"\r\n collapsedValue=\"none\"\r\n visibleValue=\"block\"\r\n />\r\n <div class=\"daga-panel-content\">\r\n @if (palettes.length > 1) {\r\n <div class=\"daga-panel-tabs\">\r\n @for (palette of palettes; track palette) {\r\n <div\r\n class=\"daga-panel-tab\"\r\n [class]=\"palette === currentPalette ? 'daga-current-tab' : ''\"\r\n (click)=\"switchPalette(palette)\"\r\n >\r\n {{ palette.name }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"daga-palette-view\"></div>\r\n </div>\r\n </div>\r\n", dependencies: [{ kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
966
977
  }
967
978
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PaletteComponent, decorators: [{
968
979
  type: Component,
@@ -982,6 +993,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
982
993
  type: Input
983
994
  }], width: [{
984
995
  type: Input
996
+ }], height: [{
997
+ type: Input
985
998
  }], gap: [{
986
999
  type: Input
987
1000
  }] } });
@@ -1172,11 +1185,11 @@ class PropertySettingsComponent {
1172
1185
  this.addListeners();
1173
1186
  }
1174
1187
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertySettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1175
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: PropertySettingsComponent, isStandalone: true, selector: "daga-property-settings", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\r\n class=\"daga-dropbar\"\r\n [class]=\"'daga-index-' + 0 + ' daga-depth-' + depth\"\r\n></div>\r\n@for (\r\n property of valueSet?.displayedProperties || [];\r\n track property;\r\n let i = $index\r\n) {\r\n <div\r\n class=\"daga-property-and-dropbar\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n >\r\n <div\r\n class=\"daga-property\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n >\r\n <div class=\"daga-property-name\">\r\n <span>{{ property.name }}</span>\r\n <div class=\"daga-buttons\">\r\n <button class=\"daga-property-button daga-move-button\">\r\n <div class=\"daga-icon daga-move-icon\"></div>\r\n </button>\r\n <button\r\n class=\"daga-property-button daga-hide-button\"\r\n (click)=\"hideProperty(property.name)\"\r\n >\r\n <div class=\"daga-icon daga-hide-icon\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n @if (property.type !== Type.Object) {\r\n <div class=\"daga-property-value\">\r\n {{ asString(valueSet?.getValue(property.name)) }}\r\n </div>\r\n }\r\n @if (property.type === Type.Object) {\r\n <div>\r\n <daga-property-settings\r\n [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n [depth]=\"depth + 1\"\r\n ></daga-property-settings>\r\n </div>\r\n }\r\n </div>\r\n <div\r\n class=\"daga-dropbar\"\r\n [class]=\"'daga-index-' + (i + 1) + ' daga-depth-' + depth\"\r\n ></div>\r\n </div>\r\n}\r\n@if (valueSet && valueSet.hiddenProperties.length > 0) {\r\n <div class=\"daga-property\">\r\n <p class=\"daga-property-name\">Add property:</p>\r\n <select (change)=\"displayProperty($event)\">\r\n <option value=\"\">Select a property</option>\r\n @for (property of valueSet.hiddenProperties || []; track property) {\r\n <option [value]=\"property.name\">\r\n {{ property.name }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n}\r\n", dependencies: [{ kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1188
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: PropertySettingsComponent, isStandalone: true, selector: "daga-property-settings", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\r\n class=\"daga-dropbar\"\r\n [class]=\"'daga-index-' + 0 + ' daga-depth-' + depth\"\r\n></div>\r\n@for (\r\n property of valueSet?.displayedProperties || [];\r\n track property;\r\n let i = $index\r\n) {\r\n <div\r\n class=\"daga-property-and-dropbar\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n >\r\n <div\r\n class=\"daga-property\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n >\r\n <div class=\"daga-property-name\">\r\n <span>{{ property.label || property.name }}</span>\r\n <div class=\"daga-buttons\">\r\n <button class=\"daga-property-button daga-move-button\">\r\n <div class=\"daga-icon daga-move-icon\"></div>\r\n </button>\r\n <button\r\n class=\"daga-property-button daga-hide-button\"\r\n (click)=\"hideProperty(property.name)\"\r\n >\r\n <div class=\"daga-icon daga-hide-icon\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n @if (property.type !== Type.Object) {\r\n <div class=\"daga-property-value\">\r\n {{ asString(valueSet?.getValue(property.name)) }}\r\n </div>\r\n }\r\n @if (property.type === Type.Object) {\r\n <div>\r\n <daga-property-settings\r\n [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n [depth]=\"depth + 1\"\r\n ></daga-property-settings>\r\n </div>\r\n }\r\n </div>\r\n <div\r\n class=\"daga-dropbar\"\r\n [class]=\"'daga-index-' + (i + 1) + ' daga-depth-' + depth\"\r\n ></div>\r\n </div>\r\n}\r\n@if (valueSet && valueSet.hiddenProperties.length > 0) {\r\n <div class=\"daga-property\">\r\n <p class=\"daga-property-name\">Add property:</p>\r\n <select (change)=\"displayProperty($event)\">\r\n <option value=\"\">Select a property</option>\r\n @for (property of valueSet.hiddenProperties || []; track property) {\r\n <option [value]=\"property.name\">\r\n {{ property.label || property.name }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n}\r\n", dependencies: [{ kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1176
1189
  }
1177
1190
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertySettingsComponent, decorators: [{
1178
1191
  type: Component,
1179
- args: [{ selector: 'daga-property-settings', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"daga-dropbar\"\r\n [class]=\"'daga-index-' + 0 + ' daga-depth-' + depth\"\r\n></div>\r\n@for (\r\n property of valueSet?.displayedProperties || [];\r\n track property;\r\n let i = $index\r\n) {\r\n <div\r\n class=\"daga-property-and-dropbar\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n >\r\n <div\r\n class=\"daga-property\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n >\r\n <div class=\"daga-property-name\">\r\n <span>{{ property.name }}</span>\r\n <div class=\"daga-buttons\">\r\n <button class=\"daga-property-button daga-move-button\">\r\n <div class=\"daga-icon daga-move-icon\"></div>\r\n </button>\r\n <button\r\n class=\"daga-property-button daga-hide-button\"\r\n (click)=\"hideProperty(property.name)\"\r\n >\r\n <div class=\"daga-icon daga-hide-icon\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n @if (property.type !== Type.Object) {\r\n <div class=\"daga-property-value\">\r\n {{ asString(valueSet?.getValue(property.name)) }}\r\n </div>\r\n }\r\n @if (property.type === Type.Object) {\r\n <div>\r\n <daga-property-settings\r\n [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n [depth]=\"depth + 1\"\r\n ></daga-property-settings>\r\n </div>\r\n }\r\n </div>\r\n <div\r\n class=\"daga-dropbar\"\r\n [class]=\"'daga-index-' + (i + 1) + ' daga-depth-' + depth\"\r\n ></div>\r\n </div>\r\n}\r\n@if (valueSet && valueSet.hiddenProperties.length > 0) {\r\n <div class=\"daga-property\">\r\n <p class=\"daga-property-name\">Add property:</p>\r\n <select (change)=\"displayProperty($event)\">\r\n <option value=\"\">Select a property</option>\r\n @for (property of valueSet.hiddenProperties || []; track property) {\r\n <option [value]=\"property.name\">\r\n {{ property.name }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n}\r\n" }]
1192
+ args: [{ selector: 'daga-property-settings', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"daga-dropbar\"\r\n [class]=\"'daga-index-' + 0 + ' daga-depth-' + depth\"\r\n></div>\r\n@for (\r\n property of valueSet?.displayedProperties || [];\r\n track property;\r\n let i = $index\r\n) {\r\n <div\r\n class=\"daga-property-and-dropbar\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n >\r\n <div\r\n class=\"daga-property\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n >\r\n <div class=\"daga-property-name\">\r\n <span>{{ property.label || property.name }}</span>\r\n <div class=\"daga-buttons\">\r\n <button class=\"daga-property-button daga-move-button\">\r\n <div class=\"daga-icon daga-move-icon\"></div>\r\n </button>\r\n <button\r\n class=\"daga-property-button daga-hide-button\"\r\n (click)=\"hideProperty(property.name)\"\r\n >\r\n <div class=\"daga-icon daga-hide-icon\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n @if (property.type !== Type.Object) {\r\n <div class=\"daga-property-value\">\r\n {{ asString(valueSet?.getValue(property.name)) }}\r\n </div>\r\n }\r\n @if (property.type === Type.Object) {\r\n <div>\r\n <daga-property-settings\r\n [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n [depth]=\"depth + 1\"\r\n ></daga-property-settings>\r\n </div>\r\n }\r\n </div>\r\n <div\r\n class=\"daga-dropbar\"\r\n [class]=\"'daga-index-' + (i + 1) + ' daga-depth-' + depth\"\r\n ></div>\r\n </div>\r\n}\r\n@if (valueSet && valueSet.hiddenProperties.length > 0) {\r\n <div class=\"daga-property\">\r\n <p class=\"daga-property-name\">Add property:</p>\r\n <select (change)=\"displayProperty($event)\">\r\n <option value=\"\">Select a property</option>\r\n @for (property of valueSet.hiddenProperties || []; track property) {\r\n <option [value]=\"property.name\">\r\n {{ property.label || property.name }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n}\r\n" }]
1180
1193
  }], propDecorators: { valueSet: [{
1181
1194
  type: Input
1182
1195
  }], depth: [{
@@ -1723,7 +1736,7 @@ class ObjectEditorComponent {
1723
1736
  if (this.valueSet === undefined) {
1724
1737
  return;
1725
1738
  }
1726
- if (property.editable) {
1739
+ if (property.editable !== false) {
1727
1740
  if (!equals(this.valueSet.getValue(property.name), value)) {
1728
1741
  this.valueSet.setValue(property.name, value);
1729
1742
  this.canvas.propertyEditorChanges$?.next();
@@ -1747,7 +1760,7 @@ class ObjectEditorComponent {
1747
1760
  return new Date(string);
1748
1761
  }
1749
1762
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ObjectEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1750
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ObjectEditorComponent, isStandalone: true, selector: "daga-object-editor", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "@for (property of valueSet?.displayedProperties || []; track property) {\r\n <div\r\n class=\"daga-property\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n >\r\n <p class=\"daga-property-name\">\r\n {{ property.name }}\r\n </p>\r\n @if (property.type === Type.Text) {\r\n <input\r\n type=\"daga-text\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.TextArea) {\r\n <textarea\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n ></textarea>\r\n }\r\n @if (property.type === Type.Number) {\r\n <input\r\n type=\"number\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Color) {\r\n <input\r\n type=\"text\"\r\n pattern=\"#[0-9a-fA-F]{6}\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Datetime) {\r\n <input\r\n type=\"datetime-local\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n />\r\n }\r\n @if (property.type === Type.Date) {\r\n <input\r\n type=\"date\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Time) {\r\n <input\r\n type=\"time\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Url) {\r\n <input\r\n type=\"url\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Boolean) {\r\n <div class=\"daga-radio\">\r\n <label\r\n class=\"daga-radio-item daga-radio-start\"\r\n [class]=\"\r\n valueSet?.getValue(property.name) === false ? 'daga-checked' : ''\r\n \"\r\n >\r\n <input\r\n type=\"radio\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [name]=\"property.name\"\r\n value=\"false\"\r\n (change)=\"setValue(property, false)\"\r\n />\r\n No\r\n </label>\r\n <label\r\n class=\"daga-radio-item daga-radio-end\"\r\n [class]=\"valueSet?.getValue(property.name) === true ? 'daga-checked' : ''\"\r\n >\r\n <input\r\n type=\"radio\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [name]=\"property.name\"\r\n value=\"true\"\r\n (change)=\"setValue(property, true)\"\r\n />\r\n Yes\r\n </label>\r\n </div>\r\n }\r\n @if (property.type === Type.Option) {\r\n <div class=\"daga-relatively-positioned\">\r\n <daga-autocomplete\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [options]=\"property.options || []\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n />\r\n </div>\r\n }\r\n @if (\r\n property.type === Type.OptionList || property.type === Type.OptionSet\r\n ) {\r\n <daga-option-list-editor\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [allowRepeats]=\"property.type === Type.OptionList\"\r\n [options]=\"property.options || []\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-option-list-editor>\r\n }\r\n @if (property.type === Type.TextList || property.type === Type.TextSet) {\r\n <daga-text-list-editor\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [allowRepeats]=\"property.type === Type.TextList\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-text-list-editor>\r\n }\r\n @if (property.type === Type.TextMap) {\r\n <daga-text-map-editor\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-text-map-editor>\r\n }\r\n @if (property.type === Type.Object) {\r\n <div class=\"daga-left-bar\">\r\n <daga-object-editor\r\n [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n [depth]=\"depth + 1\"\r\n ></daga-object-editor>\r\n </div>\r\n }\r\n </div>\r\n }\r\n", dependencies: [{ kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OptionListEditorComponent, selector: "daga-option-list-editor", inputs: ["value", "options", "valueInput", "allowRepeats", "optionsNotPresentInValue", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextListEditorComponent, selector: "daga-text-list-editor", inputs: ["value", "valueInput", "allowRepeats", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextMapEditorComponent, selector: "daga-text-map-editor", inputs: ["value", "keyInput", "valueInput", "disabled"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1763
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ObjectEditorComponent, isStandalone: true, selector: "daga-object-editor", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "@for (property of valueSet?.displayedProperties || []; track property) {\r\n <div\r\n class=\"daga-property\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n >\r\n <p class=\"daga-property-name\">\r\n {{ property.label || property.name }}\r\n </p>\r\n @if (property.type === Type.Text) {\r\n <input\r\n type=\"daga-text\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.TextArea) {\r\n <textarea\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n ></textarea>\r\n }\r\n @if (property.type === Type.Number) {\r\n <input\r\n type=\"number\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Color) {\r\n <input\r\n type=\"text\"\r\n pattern=\"#[0-9a-fA-F]{6}\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Datetime) {\r\n <input\r\n type=\"datetime-local\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n />\r\n }\r\n @if (property.type === Type.Date) {\r\n <input\r\n type=\"date\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Time) {\r\n <input\r\n type=\"time\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Url) {\r\n <input\r\n type=\"url\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Boolean) {\r\n <div class=\"daga-radio\">\r\n <label\r\n class=\"daga-radio-item daga-radio-start\"\r\n [class]=\"\r\n valueSet?.getValue(property.name) === false ? 'daga-checked' : ''\r\n \"\r\n >\r\n <input\r\n type=\"radio\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [name]=\"property.name\"\r\n value=\"false\"\r\n (change)=\"setValue(property, false)\"\r\n />\r\n No\r\n </label>\r\n <label\r\n class=\"daga-radio-item daga-radio-end\"\r\n [class]=\"\r\n valueSet?.getValue(property.name) === true ? 'daga-checked' : ''\r\n \"\r\n >\r\n <input\r\n type=\"radio\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [name]=\"property.name\"\r\n value=\"true\"\r\n (change)=\"setValue(property, true)\"\r\n />\r\n Yes\r\n </label>\r\n </div>\r\n }\r\n @if (property.type === Type.Option) {\r\n <div class=\"daga-relatively-positioned\">\r\n <daga-autocomplete\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [options]=\"property.options || []\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n />\r\n </div>\r\n }\r\n @if (\r\n property.type === Type.OptionList || property.type === Type.OptionSet\r\n ) {\r\n <daga-option-list-editor\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [allowRepeats]=\"property.type === Type.OptionList\"\r\n [options]=\"property.options || []\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-option-list-editor>\r\n }\r\n @if (property.type === Type.TextList || property.type === Type.TextSet) {\r\n <daga-text-list-editor\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [allowRepeats]=\"property.type === Type.TextList\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-text-list-editor>\r\n }\r\n @if (property.type === Type.TextMap) {\r\n <daga-text-map-editor\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-text-map-editor>\r\n }\r\n @if (property.type === Type.Object) {\r\n <div class=\"daga-left-bar\">\r\n <daga-object-editor\r\n [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n [depth]=\"depth + 1\"\r\n ></daga-object-editor>\r\n </div>\r\n }\r\n </div>\r\n}\r\n", dependencies: [{ kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OptionListEditorComponent, selector: "daga-option-list-editor", inputs: ["value", "options", "valueInput", "allowRepeats", "optionsNotPresentInValue", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextListEditorComponent, selector: "daga-text-list-editor", inputs: ["value", "valueInput", "allowRepeats", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextMapEditorComponent, selector: "daga-text-map-editor", inputs: ["value", "keyInput", "valueInput", "disabled"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1751
1764
  }
1752
1765
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ObjectEditorComponent, decorators: [{
1753
1766
  type: Component,
@@ -1757,7 +1770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
1757
1770
  OptionListEditorComponent,
1758
1771
  TextListEditorComponent,
1759
1772
  TextMapEditorComponent
1760
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (property of valueSet?.displayedProperties || []; track property) {\r\n <div\r\n class=\"daga-property\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n >\r\n <p class=\"daga-property-name\">\r\n {{ property.name }}\r\n </p>\r\n @if (property.type === Type.Text) {\r\n <input\r\n type=\"daga-text\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.TextArea) {\r\n <textarea\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n ></textarea>\r\n }\r\n @if (property.type === Type.Number) {\r\n <input\r\n type=\"number\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Color) {\r\n <input\r\n type=\"text\"\r\n pattern=\"#[0-9a-fA-F]{6}\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Datetime) {\r\n <input\r\n type=\"datetime-local\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n />\r\n }\r\n @if (property.type === Type.Date) {\r\n <input\r\n type=\"date\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Time) {\r\n <input\r\n type=\"time\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Url) {\r\n <input\r\n type=\"url\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Boolean) {\r\n <div class=\"daga-radio\">\r\n <label\r\n class=\"daga-radio-item daga-radio-start\"\r\n [class]=\"\r\n valueSet?.getValue(property.name) === false ? 'daga-checked' : ''\r\n \"\r\n >\r\n <input\r\n type=\"radio\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [name]=\"property.name\"\r\n value=\"false\"\r\n (change)=\"setValue(property, false)\"\r\n />\r\n No\r\n </label>\r\n <label\r\n class=\"daga-radio-item daga-radio-end\"\r\n [class]=\"valueSet?.getValue(property.name) === true ? 'daga-checked' : ''\"\r\n >\r\n <input\r\n type=\"radio\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [name]=\"property.name\"\r\n value=\"true\"\r\n (change)=\"setValue(property, true)\"\r\n />\r\n Yes\r\n </label>\r\n </div>\r\n }\r\n @if (property.type === Type.Option) {\r\n <div class=\"daga-relatively-positioned\">\r\n <daga-autocomplete\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [options]=\"property.options || []\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n />\r\n </div>\r\n }\r\n @if (\r\n property.type === Type.OptionList || property.type === Type.OptionSet\r\n ) {\r\n <daga-option-list-editor\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [allowRepeats]=\"property.type === Type.OptionList\"\r\n [options]=\"property.options || []\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-option-list-editor>\r\n }\r\n @if (property.type === Type.TextList || property.type === Type.TextSet) {\r\n <daga-text-list-editor\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [allowRepeats]=\"property.type === Type.TextList\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-text-list-editor>\r\n }\r\n @if (property.type === Type.TextMap) {\r\n <daga-text-map-editor\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-text-map-editor>\r\n }\r\n @if (property.type === Type.Object) {\r\n <div class=\"daga-left-bar\">\r\n <daga-object-editor\r\n [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n [depth]=\"depth + 1\"\r\n ></daga-object-editor>\r\n </div>\r\n }\r\n </div>\r\n }\r\n" }]
1773
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (property of valueSet?.displayedProperties || []; track property) {\r\n <div\r\n class=\"daga-property\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n >\r\n <p class=\"daga-property-name\">\r\n {{ property.label || property.name }}\r\n </p>\r\n @if (property.type === Type.Text) {\r\n <input\r\n type=\"daga-text\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.TextArea) {\r\n <textarea\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n ></textarea>\r\n }\r\n @if (property.type === Type.Number) {\r\n <input\r\n type=\"number\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Color) {\r\n <input\r\n type=\"text\"\r\n pattern=\"#[0-9a-fA-F]{6}\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Datetime) {\r\n <input\r\n type=\"datetime-local\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n />\r\n }\r\n @if (property.type === Type.Date) {\r\n <input\r\n type=\"date\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Time) {\r\n <input\r\n type=\"time\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Url) {\r\n <input\r\n type=\"url\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n }\r\n @if (property.type === Type.Boolean) {\r\n <div class=\"daga-radio\">\r\n <label\r\n class=\"daga-radio-item daga-radio-start\"\r\n [class]=\"\r\n valueSet?.getValue(property.name) === false ? 'daga-checked' : ''\r\n \"\r\n >\r\n <input\r\n type=\"radio\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [name]=\"property.name\"\r\n value=\"false\"\r\n (change)=\"setValue(property, false)\"\r\n />\r\n No\r\n </label>\r\n <label\r\n class=\"daga-radio-item daga-radio-end\"\r\n [class]=\"\r\n valueSet?.getValue(property.name) === true ? 'daga-checked' : ''\r\n \"\r\n >\r\n <input\r\n type=\"radio\"\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [name]=\"property.name\"\r\n value=\"true\"\r\n (change)=\"setValue(property, true)\"\r\n />\r\n Yes\r\n </label>\r\n </div>\r\n }\r\n @if (property.type === Type.Option) {\r\n <div class=\"daga-relatively-positioned\">\r\n <daga-autocomplete\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [options]=\"property.options || []\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n />\r\n </div>\r\n }\r\n @if (\r\n property.type === Type.OptionList || property.type === Type.OptionSet\r\n ) {\r\n <daga-option-list-editor\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [allowRepeats]=\"property.type === Type.OptionList\"\r\n [options]=\"property.options || []\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-option-list-editor>\r\n }\r\n @if (property.type === Type.TextList || property.type === Type.TextSet) {\r\n <daga-text-list-editor\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [allowRepeats]=\"property.type === Type.TextList\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-text-list-editor>\r\n }\r\n @if (property.type === Type.TextMap) {\r\n <daga-text-map-editor\r\n [disabled]=\"property.editable === false || !userCanEdit\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-text-map-editor>\r\n }\r\n @if (property.type === Type.Object) {\r\n <div class=\"daga-left-bar\">\r\n <daga-object-editor\r\n [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n [depth]=\"depth + 1\"\r\n ></daga-object-editor>\r\n </div>\r\n }\r\n </div>\r\n}\r\n" }]
1761
1774
  }], propDecorators: { valueSet: [{
1762
1775
  type: Input
1763
1776
  }], depth: [{
@@ -1804,6 +1817,7 @@ class PropertyEditorComponent {
1804
1817
  this.direction =
1805
1818
  config.components?.propertyEditor?.direction || Side.Bottom;
1806
1819
  this.width = config.components?.propertyEditor?.width || '24rem';
1820
+ this.height = config.components?.propertyEditor?.height;
1807
1821
  this.title = undefined;
1808
1822
  this.valueSet = undefined;
1809
1823
  this.setPanelWidth();
@@ -1814,10 +1828,20 @@ class PropertyEditorComponent {
1814
1828
  case Side.Bottom:
1815
1829
  case Side.Top:
1816
1830
  this.selectPanel().style('width', this.width);
1831
+ if (this.height) {
1832
+ this.selectPanel()
1833
+ .select('.daga-panel-content')
1834
+ .style('height', this.height);
1835
+ }
1817
1836
  break;
1818
1837
  case Side.Left:
1819
1838
  case Side.Right:
1820
1839
  this.selectPanel().style('height', this.width);
1840
+ if (this.height) {
1841
+ this.selectPanel()
1842
+ .select('.daga-panel-content')
1843
+ .style('width', this.height);
1844
+ }
1821
1845
  break;
1822
1846
  }
1823
1847
  }
@@ -1845,7 +1869,7 @@ class PropertyEditorComponent {
1845
1869
  }
1846
1870
  }
1847
1871
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertyEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1848
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { valueSet: "valueSet" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div\r\n #panel\r\n class=\"daga-panel daga-bottom daga-{{ location }} daga-{{ direction }}\"\r\n >\r\n <daga-collapse-button\r\n #collapse\r\n [disabled]=\"\r\n !valueSet ||\r\n !valueSet.propertySet ||\r\n !valueSet.propertySet.hasProperties()\r\n \"\r\n [direction]=\"direction\"\r\n [collapsableSelector]=\"panel\"\r\n collapsableAdditionalSelector=\".daga-panel-content\"\r\n rule=\"display\"\r\n collapsedValue=\"none\"\r\n visibleValue=\"block\"\r\n />\r\n @if (\r\n valueSet &&\r\n valueSet.propertySet &&\r\n valueSet.propertySet.hasProperties() &&\r\n !collapse.collapsed\r\n ) {\r\n <div\r\n class=\"daga-panel-content\"\r\n >\r\n @if (title) {\r\n <p class=\"daga-title\">\r\n {{ title }}\r\n <button class=\"daga-property-button\" (click)=\"settings = !settings\">\r\n <div\r\n class=\"daga-icon daga-settings-icon\"\r\n [class]=\"\r\n settings === undefined\r\n ? ''\r\n : settings\r\n ? 'daga-unrotate'\r\n : 'daga-rotate'\r\n \"\r\n ></div>\r\n </button>\r\n </p>\r\n }\r\n @if (!settings) {\r\n <daga-object-editor [valueSet]=\"valueSet\" />\r\n }\r\n @if (settings) {\r\n <daga-property-settings [valueSet]=\"valueSet\" />\r\n }\r\n </div>\r\n }\r\n </div>\r\n", dependencies: [{ kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }, { kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1872
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { valueSet: "valueSet" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div\r\n #panel\r\n class=\"daga-panel daga-bottom daga-{{ location }} daga-{{ direction }}\"\r\n>\r\n <daga-collapse-button\r\n #collapse\r\n [disabled]=\"\r\n !valueSet ||\r\n !valueSet.propertySet ||\r\n !valueSet.propertySet.hasProperties()\r\n \"\r\n [direction]=\"direction\"\r\n [collapsableSelector]=\"panel\"\r\n collapsableAdditionalSelector=\".daga-panel-content\"\r\n rule=\"display\"\r\n collapsedValue=\"none\"\r\n visibleValue=\"block\"\r\n />\r\n <div class=\"daga-panel-content\">\r\n @if (\r\n valueSet &&\r\n valueSet.propertySet &&\r\n valueSet.propertySet.hasProperties() &&\r\n !collapse.collapsed\r\n ) {\r\n @if (title) {\r\n <p class=\"daga-title\">\r\n {{ title }}\r\n <button class=\"daga-property-button\" (click)=\"settings = !settings\">\r\n <div\r\n class=\"daga-icon daga-settings-icon\"\r\n [class]=\"\r\n settings === undefined\r\n ? ''\r\n : settings\r\n ? 'daga-unrotate'\r\n : 'daga-rotate'\r\n \"\r\n ></div>\r\n </button>\r\n </p>\r\n }\r\n @if (!settings) {\r\n <daga-object-editor [valueSet]=\"valueSet\" />\r\n }\r\n @if (settings) {\r\n <daga-property-settings [valueSet]=\"valueSet\" />\r\n }\r\n }\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }, { kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1849
1873
  }
1850
1874
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertyEditorComponent, decorators: [{
1851
1875
  type: Component,
@@ -1853,7 +1877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
1853
1877
  CollapseButtonComponent,
1854
1878
  ObjectEditorComponent,
1855
1879
  PropertySettingsComponent
1856
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n #panel\r\n class=\"daga-panel daga-bottom daga-{{ location }} daga-{{ direction }}\"\r\n >\r\n <daga-collapse-button\r\n #collapse\r\n [disabled]=\"\r\n !valueSet ||\r\n !valueSet.propertySet ||\r\n !valueSet.propertySet.hasProperties()\r\n \"\r\n [direction]=\"direction\"\r\n [collapsableSelector]=\"panel\"\r\n collapsableAdditionalSelector=\".daga-panel-content\"\r\n rule=\"display\"\r\n collapsedValue=\"none\"\r\n visibleValue=\"block\"\r\n />\r\n @if (\r\n valueSet &&\r\n valueSet.propertySet &&\r\n valueSet.propertySet.hasProperties() &&\r\n !collapse.collapsed\r\n ) {\r\n <div\r\n class=\"daga-panel-content\"\r\n >\r\n @if (title) {\r\n <p class=\"daga-title\">\r\n {{ title }}\r\n <button class=\"daga-property-button\" (click)=\"settings = !settings\">\r\n <div\r\n class=\"daga-icon daga-settings-icon\"\r\n [class]=\"\r\n settings === undefined\r\n ? ''\r\n : settings\r\n ? 'daga-unrotate'\r\n : 'daga-rotate'\r\n \"\r\n ></div>\r\n </button>\r\n </p>\r\n }\r\n @if (!settings) {\r\n <daga-object-editor [valueSet]=\"valueSet\" />\r\n }\r\n @if (settings) {\r\n <daga-property-settings [valueSet]=\"valueSet\" />\r\n }\r\n </div>\r\n }\r\n </div>\r\n" }]
1880
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n #panel\r\n class=\"daga-panel daga-bottom daga-{{ location }} daga-{{ direction }}\"\r\n>\r\n <daga-collapse-button\r\n #collapse\r\n [disabled]=\"\r\n !valueSet ||\r\n !valueSet.propertySet ||\r\n !valueSet.propertySet.hasProperties()\r\n \"\r\n [direction]=\"direction\"\r\n [collapsableSelector]=\"panel\"\r\n collapsableAdditionalSelector=\".daga-panel-content\"\r\n rule=\"display\"\r\n collapsedValue=\"none\"\r\n visibleValue=\"block\"\r\n />\r\n <div class=\"daga-panel-content\">\r\n @if (\r\n valueSet &&\r\n valueSet.propertySet &&\r\n valueSet.propertySet.hasProperties() &&\r\n !collapse.collapsed\r\n ) {\r\n @if (title) {\r\n <p class=\"daga-title\">\r\n {{ title }}\r\n <button class=\"daga-property-button\" (click)=\"settings = !settings\">\r\n <div\r\n class=\"daga-icon daga-settings-icon\"\r\n [class]=\"\r\n settings === undefined\r\n ? ''\r\n : settings\r\n ? 'daga-unrotate'\r\n : 'daga-rotate'\r\n \"\r\n ></div>\r\n </button>\r\n </p>\r\n }\r\n @if (!settings) {\r\n <daga-object-editor [valueSet]=\"valueSet\" />\r\n }\r\n @if (settings) {\r\n <daga-property-settings [valueSet]=\"valueSet\" />\r\n }\r\n }\r\n </div>\r\n</div>\r\n" }]
1857
1881
  }], propDecorators: { panel: [{
1858
1882
  type: ViewChild,
1859
1883
  args: ['panel']
@@ -2006,7 +2030,7 @@ class DiagramComponent {
2006
2030
  }
2007
2031
  }
2008
2032
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2009
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DiagramComponent, isStandalone: true, selector: "daga-diagram", inputs: { config: "config", model: "model" }, outputs: { modelChange: "modelChange", diagramEvent: "diagramEvent" }, providers: [CanvasProviderService, DagaConfigurationService], viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"daga-append-to\" #appendTo></div>\r\n@if (\r\n config.components?.buttons !== undefined &&\r\n config.components?.buttons?.enabled !== false\r\n ) {\r\n <daga-diagram-buttons\r\n #diagramButtons\r\n />\r\n}\r\n@if (\r\n config.components?.palette !== undefined &&\r\n config.components?.palette?.enabled !== false &&\r\n config.components?.palette?.sections &&\r\n (config.components?.palette?.sections?.length || 0) > 0\r\n ) {\r\n <daga-palette\r\n #palette\r\n />\r\n}\r\n@if (\r\n config.components?.propertyEditor !== undefined &&\r\n config.components?.propertyEditor?.enabled !== false\r\n ) {\r\n <daga-property-editor\r\n #propertyEditor\r\n />\r\n}\r\n@if (\r\n config.components?.errors !== undefined &&\r\n config.components?.errors?.enabled !== false\r\n ) {\r\n <daga-errors\r\n />\r\n}\r\n<ng-content />\r\n", dependencies: [{ kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["location", "direction", "enableAction", "enableFilter", "enableLayout", "enableSelection", "enableZoom"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location", "direction", "width", "gap"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2033
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DiagramComponent, isStandalone: true, selector: "daga-diagram", inputs: { config: "config", model: "model" }, outputs: { modelChange: "modelChange", diagramEvent: "diagramEvent" }, providers: [CanvasProviderService, DagaConfigurationService], viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"daga-append-to\" #appendTo></div>\r\n@if (\r\n config.components?.buttons !== undefined &&\r\n config.components?.buttons?.enabled !== false\r\n ) {\r\n <daga-diagram-buttons\r\n #diagramButtons\r\n />\r\n}\r\n@if (\r\n config.components?.palette !== undefined &&\r\n config.components?.palette?.enabled !== false &&\r\n config.components?.palette?.sections &&\r\n (config.components?.palette?.sections?.length || 0) > 0\r\n ) {\r\n <daga-palette\r\n #palette\r\n />\r\n}\r\n@if (\r\n config.components?.propertyEditor !== undefined &&\r\n config.components?.propertyEditor?.enabled !== false\r\n ) {\r\n <daga-property-editor\r\n #propertyEditor\r\n />\r\n}\r\n@if (\r\n config.components?.errors !== undefined &&\r\n config.components?.errors?.enabled !== false\r\n ) {\r\n <daga-errors\r\n />\r\n}\r\n<ng-content />\r\n", dependencies: [{ kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["location", "direction", "enableAction", "enableFilter", "enableLayout", "enableSelection", "enableZoom"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location", "direction", "width", "height", "gap"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2010
2034
  }
2011
2035
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DiagramComponent, decorators: [{
2012
2036
  type: Component,