@meshmakers/octo-process-diagrams 3.4.1480 → 3.5.0
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/README.md +6 -4
- package/fesm2022/meshmakers-octo-process-diagrams.mjs +137 -54
- package/fesm2022/meshmakers-octo-process-diagrams.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/{_dockview-lcars-theme.scss → _dockview-theme.scss} +77 -92
- package/styles/_index.scss +1 -1
- package/types/meshmakers-octo-process-diagrams.d.ts +4 -1
|
@@ -22,7 +22,7 @@ import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
|
|
|
22
22
|
import * as i3 from '@progress/kendo-angular-dialog';
|
|
23
23
|
import { DialogsModule } from '@progress/kendo-angular-dialog';
|
|
24
24
|
import { PROPERTY_KEYS_DOCKVIEW, createDockview } from 'dockview-core';
|
|
25
|
-
import { SaveAsDialogService, DataSourceBase, ListViewComponent, FetchResultBase, ConfirmationService, InputService, HAS_UNSAVED_CHANGES } from '@meshmakers/shared-ui';
|
|
25
|
+
import { SaveAsDialogService, DataSourceBase, ListViewComponent, FetchResultBase, ConfirmationService, InputService, MM_ACTION_ICONS, RowActionsComponent, HAS_UNSAVED_CHANGES } from '@meshmakers/shared-ui';
|
|
26
26
|
import { Router, ActivatedRoute } from '@angular/router';
|
|
27
27
|
import { NotificationService } from '@progress/kendo-angular-notification';
|
|
28
28
|
import { map, catchError } from 'rxjs/operators';
|
|
@@ -10557,7 +10557,8 @@ class PathEditorComponent {
|
|
|
10557
10557
|
class="toolbar-btn"
|
|
10558
10558
|
[disabled]="!pathService.selectedNode()"
|
|
10559
10559
|
(click)="deleteSelectedNode()"
|
|
10560
|
-
title="Delete segment"
|
|
10560
|
+
title="Delete segment"
|
|
10561
|
+
aria-label="Delete segment">
|
|
10561
10562
|
<svg viewBox="0 0 24 24" width="16" height="16">
|
|
10562
10563
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="currentColor"/>
|
|
10563
10564
|
</svg>
|
|
@@ -10677,7 +10678,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
10677
10678
|
class="toolbar-btn"
|
|
10678
10679
|
[disabled]="!pathService.selectedNode()"
|
|
10679
10680
|
(click)="deleteSelectedNode()"
|
|
10680
|
-
title="Delete segment"
|
|
10681
|
+
title="Delete segment"
|
|
10682
|
+
aria-label="Delete segment">
|
|
10681
10683
|
<svg viewBox="0 0 24 24" width="16" height="16">
|
|
10682
10684
|
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="currentColor"/>
|
|
10683
10685
|
</svg>
|
|
@@ -11413,9 +11415,14 @@ class BindingEditorDialogComponent {
|
|
|
11413
11415
|
</div>
|
|
11414
11416
|
<div class="binding-actions">
|
|
11415
11417
|
<button kendoButton [svgIcon]="expandedIndex() === i ? chevronUpIcon : chevronDownIcon"
|
|
11416
|
-
look="flat" size="small"
|
|
11418
|
+
look="flat" size="small"
|
|
11419
|
+
[title]="expandedIndex() === i ? 'Collapse binding' : 'Expand binding'"
|
|
11420
|
+
[attr.aria-label]="(expandedIndex() === i ? 'Collapse binding ' : 'Expand binding ') + getTargetName(binding)"
|
|
11421
|
+
[attr.aria-expanded]="expandedIndex() === i">
|
|
11417
11422
|
</button>
|
|
11418
|
-
<button kendoButton [svgIcon]="trashIcon" look="flat" size="small"
|
|
11423
|
+
<button kendoButton [svgIcon]="trashIcon" look="flat" size="small" themeColor="error"
|
|
11424
|
+
title="Delete binding"
|
|
11425
|
+
[attr.aria-label]="'Delete binding ' + getTargetName(binding)"
|
|
11419
11426
|
(click)="deleteBinding(i, $event)">
|
|
11420
11427
|
</button>
|
|
11421
11428
|
</div>
|
|
@@ -11501,6 +11508,7 @@ class BindingEditorDialogComponent {
|
|
|
11501
11508
|
class="anchor-point"
|
|
11502
11509
|
[class.selected]="(binding.anchor ?? 'center') === anchor.value"
|
|
11503
11510
|
[title]="anchor.label"
|
|
11511
|
+
[attr.aria-label]="anchor.label"
|
|
11504
11512
|
(click)="updateBinding(i, 'anchor', anchor.value)">
|
|
11505
11513
|
<span class="anchor-dot"></span>
|
|
11506
11514
|
</button>
|
|
@@ -11597,9 +11605,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
11597
11605
|
</div>
|
|
11598
11606
|
<div class="binding-actions">
|
|
11599
11607
|
<button kendoButton [svgIcon]="expandedIndex() === i ? chevronUpIcon : chevronDownIcon"
|
|
11600
|
-
look="flat" size="small"
|
|
11608
|
+
look="flat" size="small"
|
|
11609
|
+
[title]="expandedIndex() === i ? 'Collapse binding' : 'Expand binding'"
|
|
11610
|
+
[attr.aria-label]="(expandedIndex() === i ? 'Collapse binding ' : 'Expand binding ') + getTargetName(binding)"
|
|
11611
|
+
[attr.aria-expanded]="expandedIndex() === i">
|
|
11601
11612
|
</button>
|
|
11602
|
-
<button kendoButton [svgIcon]="trashIcon" look="flat" size="small"
|
|
11613
|
+
<button kendoButton [svgIcon]="trashIcon" look="flat" size="small" themeColor="error"
|
|
11614
|
+
title="Delete binding"
|
|
11615
|
+
[attr.aria-label]="'Delete binding ' + getTargetName(binding)"
|
|
11603
11616
|
(click)="deleteBinding(i, $event)">
|
|
11604
11617
|
</button>
|
|
11605
11618
|
</div>
|
|
@@ -11685,6 +11698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
11685
11698
|
class="anchor-point"
|
|
11686
11699
|
[class.selected]="(binding.anchor ?? 'center') === anchor.value"
|
|
11687
11700
|
[title]="anchor.label"
|
|
11701
|
+
[attr.aria-label]="anchor.label"
|
|
11688
11702
|
(click)="updateBinding(i, 'anchor', anchor.value)">
|
|
11689
11703
|
<span class="anchor-dot"></span>
|
|
11690
11704
|
</button>
|
|
@@ -19040,12 +19054,15 @@ class TransformPropertyEditorComponent {
|
|
|
19040
19054
|
</div>
|
|
19041
19055
|
<div class="property-actions">
|
|
19042
19056
|
<button kendoButton [svgIcon]="linkIcon" look="flat" title="Edit Bindings"
|
|
19057
|
+
[attr.aria-label]="'Edit bindings of ' + property.name"
|
|
19043
19058
|
(click)="openBindingEditor(property)">
|
|
19044
19059
|
</button>
|
|
19045
19060
|
<button kendoButton [svgIcon]="pencilIcon" look="flat" title="Edit Property"
|
|
19061
|
+
[attr.aria-label]="'Edit property ' + property.name"
|
|
19046
19062
|
(click)="editProperty(property)">
|
|
19047
19063
|
</button>
|
|
19048
|
-
<button kendoButton [svgIcon]="trashIcon" look="flat" title="Delete Property"
|
|
19064
|
+
<button kendoButton [svgIcon]="trashIcon" look="flat" themeColor="error" title="Delete Property"
|
|
19065
|
+
[attr.aria-label]="'Delete property ' + property.name"
|
|
19049
19066
|
(click)="deleteProperty(property)">
|
|
19050
19067
|
</button>
|
|
19051
19068
|
</div>
|
|
@@ -19077,7 +19094,7 @@ class TransformPropertyEditorComponent {
|
|
|
19077
19094
|
}
|
|
19078
19095
|
</div>
|
|
19079
19096
|
</div>
|
|
19080
|
-
`, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.transform-property-editor{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.editor-toolbar{flex-shrink:0;display:flex;justify-content:flex-end;padding:.5rem;border-bottom:1px solid #e0e0e0}.properties-list{flex:1;min-height:0;overflow-y:auto;padding:.5rem}.empty-state{padding:1rem;text-align:center;color:#666}.hint{font-size:12px;color:#999;margin-top:.5rem}.property-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:.5rem;padding:.75rem;transition:box-shadow .2s}.property-card:hover{box-shadow:0 2px 8px #00000014}.property-card.editing{border-color:#1976d2;box-shadow:0 2px 8px #1976d233}.property-header{display:flex;justify-content:space-between;align-items:center}.property-info{display:flex;align-items:center;gap:.5rem}.property-name{font-weight:500;font-size:13px}.property-type-badge{display:inline-block;padding:.125rem .5rem;background:#e3f2fd;border-radius:4px;font-size:10px;color:#1976d2
|
|
19097
|
+
`, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.transform-property-editor{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.editor-toolbar{flex-shrink:0;display:flex;justify-content:flex-end;padding:.5rem;border-bottom:1px solid #e0e0e0}.properties-list{flex:1;min-height:0;overflow-y:auto;padding:.5rem}.empty-state{padding:1rem;text-align:center;color:#666}.hint{font-size:12px;color:#999;margin-top:.5rem}.property-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:.5rem;padding:.75rem;transition:box-shadow .2s}.property-card:hover{box-shadow:0 2px 8px #00000014}.property-card.editing{border-color:#1976d2;box-shadow:0 2px 8px #1976d233}.property-header{display:flex;justify-content:space-between;align-items:center}.property-info{display:flex;align-items:center;gap:.5rem}.property-name{font-weight:500;font-size:13px}.property-type-badge{display:inline-block;padding:.125rem .5rem;background:#e3f2fd;border-radius:4px;font-size:10px;color:#1976d2}.property-unit{font-size:11px;color:#666}.property-actions{display:flex;gap:.25rem}.property-details{display:flex;gap:1rem;margin-top:.5rem;font-size:11px;color:#666}.detail{display:flex;align-items:center;gap:.25rem}.color-swatch{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid #ccc}.bindings-count{padding:.125rem .5rem;background:#f5f5f5;border-radius:4px}.property-description{margin-top:.5rem;font-size:11px;color:#999;font-style:italic}.property-edit-form{display:flex;flex-direction:column;gap:.5rem}.form-row{display:flex;align-items:center;gap:.5rem}.form-row label{flex:0 0 80px;font-size:11px;color:#666}.form-row input[type=text],.form-row input[type=number],.form-row select{flex:1;padding:.375rem .5rem;border:1px solid #e0e0e0;border-radius:4px;font-size:12px}.form-row input:focus,.form-row select:focus{outline:none;border-color:#1976d2}.form-row input[type=color]{flex:0 0 50px;height:32px;padding:2px;border:1px solid #e0e0e0;border-radius:4px}.form-row input[type=checkbox]{margin:0}.form-row.two-col{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.form-row.two-col>div{display:flex;flex-direction:column;gap:.25rem}.form-row.two-col label{flex:none}.form-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #e0e0e0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "ngmodule", type: DropDownsModule }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
19081
19098
|
}
|
|
19082
19099
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TransformPropertyEditorComponent, decorators: [{
|
|
19083
19100
|
type: Component,
|
|
@@ -19299,12 +19316,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
19299
19316
|
</div>
|
|
19300
19317
|
<div class="property-actions">
|
|
19301
19318
|
<button kendoButton [svgIcon]="linkIcon" look="flat" title="Edit Bindings"
|
|
19319
|
+
[attr.aria-label]="'Edit bindings of ' + property.name"
|
|
19302
19320
|
(click)="openBindingEditor(property)">
|
|
19303
19321
|
</button>
|
|
19304
19322
|
<button kendoButton [svgIcon]="pencilIcon" look="flat" title="Edit Property"
|
|
19323
|
+
[attr.aria-label]="'Edit property ' + property.name"
|
|
19305
19324
|
(click)="editProperty(property)">
|
|
19306
19325
|
</button>
|
|
19307
|
-
<button kendoButton [svgIcon]="trashIcon" look="flat" title="Delete Property"
|
|
19326
|
+
<button kendoButton [svgIcon]="trashIcon" look="flat" themeColor="error" title="Delete Property"
|
|
19327
|
+
[attr.aria-label]="'Delete property ' + property.name"
|
|
19308
19328
|
(click)="deleteProperty(property)">
|
|
19309
19329
|
</button>
|
|
19310
19330
|
</div>
|
|
@@ -19336,7 +19356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
19336
19356
|
}
|
|
19337
19357
|
</div>
|
|
19338
19358
|
</div>
|
|
19339
|
-
`, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.transform-property-editor{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.editor-toolbar{flex-shrink:0;display:flex;justify-content:flex-end;padding:.5rem;border-bottom:1px solid #e0e0e0}.properties-list{flex:1;min-height:0;overflow-y:auto;padding:.5rem}.empty-state{padding:1rem;text-align:center;color:#666}.hint{font-size:12px;color:#999;margin-top:.5rem}.property-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:.5rem;padding:.75rem;transition:box-shadow .2s}.property-card:hover{box-shadow:0 2px 8px #00000014}.property-card.editing{border-color:#1976d2;box-shadow:0 2px 8px #1976d233}.property-header{display:flex;justify-content:space-between;align-items:center}.property-info{display:flex;align-items:center;gap:.5rem}.property-name{font-weight:500;font-size:13px}.property-type-badge{display:inline-block;padding:.125rem .5rem;background:#e3f2fd;border-radius:4px;font-size:10px;color:#1976d2
|
|
19359
|
+
`, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.transform-property-editor{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.editor-toolbar{flex-shrink:0;display:flex;justify-content:flex-end;padding:.5rem;border-bottom:1px solid #e0e0e0}.properties-list{flex:1;min-height:0;overflow-y:auto;padding:.5rem}.empty-state{padding:1rem;text-align:center;color:#666}.hint{font-size:12px;color:#999;margin-top:.5rem}.property-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:.5rem;padding:.75rem;transition:box-shadow .2s}.property-card:hover{box-shadow:0 2px 8px #00000014}.property-card.editing{border-color:#1976d2;box-shadow:0 2px 8px #1976d233}.property-header{display:flex;justify-content:space-between;align-items:center}.property-info{display:flex;align-items:center;gap:.5rem}.property-name{font-weight:500;font-size:13px}.property-type-badge{display:inline-block;padding:.125rem .5rem;background:#e3f2fd;border-radius:4px;font-size:10px;color:#1976d2}.property-unit{font-size:11px;color:#666}.property-actions{display:flex;gap:.25rem}.property-details{display:flex;gap:1rem;margin-top:.5rem;font-size:11px;color:#666}.detail{display:flex;align-items:center;gap:.25rem}.color-swatch{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid #ccc}.bindings-count{padding:.125rem .5rem;background:#f5f5f5;border-radius:4px}.property-description{margin-top:.5rem;font-size:11px;color:#999;font-style:italic}.property-edit-form{display:flex;flex-direction:column;gap:.5rem}.form-row{display:flex;align-items:center;gap:.5rem}.form-row label{flex:0 0 80px;font-size:11px;color:#666}.form-row input[type=text],.form-row input[type=number],.form-row select{flex:1;padding:.375rem .5rem;border:1px solid #e0e0e0;border-radius:4px;font-size:12px}.form-row input:focus,.form-row select:focus{outline:none;border-color:#1976d2}.form-row input[type=color]{flex:0 0 50px;height:32px;padding:2px;border:1px solid #e0e0e0;border-radius:4px}.form-row input[type=checkbox]{margin:0}.form-row.two-col{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.form-row.two-col>div{display:flex;flex-direction:column;gap:.25rem}.form-row.two-col label{flex:none}.form-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #e0e0e0}\n"] }]
|
|
19340
19360
|
}], propDecorators: { transformProperties: [{
|
|
19341
19361
|
type: Input
|
|
19342
19362
|
}], propertyBindings: [{
|
|
@@ -19767,12 +19787,15 @@ class AnimationEditorComponent {
|
|
|
19767
19787
|
<div class="item-actions">
|
|
19768
19788
|
<button kendoButton look="flat" size="small"
|
|
19769
19789
|
[svgIcon]="pencilIcon"
|
|
19770
|
-
title="Edit"
|
|
19790
|
+
title="Edit animation"
|
|
19791
|
+
[attr.aria-label]="'Edit animation ' + (anim.name || getAnimationTypeName(anim))"
|
|
19771
19792
|
(click)="onEditClick($event, anim)">
|
|
19772
19793
|
</button>
|
|
19773
19794
|
<button kendoButton look="flat" size="small"
|
|
19774
19795
|
[svgIcon]="trashIcon"
|
|
19775
|
-
|
|
19796
|
+
themeColor="error"
|
|
19797
|
+
title="Delete animation"
|
|
19798
|
+
[attr.aria-label]="'Delete animation ' + (anim.name || getAnimationTypeName(anim))"
|
|
19776
19799
|
(click)="onDeleteClick($event, i)">
|
|
19777
19800
|
</button>
|
|
19778
19801
|
</div>
|
|
@@ -19976,6 +19999,7 @@ class AnimationEditorComponent {
|
|
|
19976
19999
|
<button class="anchor-point"
|
|
19977
20000
|
[class.selected]="(anim.anchor ?? 'center') === anchor"
|
|
19978
20001
|
[title]="getAnchorLabel(anchor)"
|
|
20002
|
+
[attr.aria-label]="getAnchorLabel(anchor)"
|
|
19979
20003
|
(click)="updateAnimationField(i, 'anchor', anchor)">
|
|
19980
20004
|
<span class="anchor-dot"></span>
|
|
19981
20005
|
</button>
|
|
@@ -20025,7 +20049,7 @@ class AnimationEditorComponent {
|
|
|
20025
20049
|
}
|
|
20026
20050
|
</div>
|
|
20027
20051
|
</div>
|
|
20028
|
-
`, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.animation-editor{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;border:1px solid #e0e0e0;border-radius:4px;background:#fafafa}.editor-toolbar{flex-shrink:0;display:flex;justify-content:flex-end;padding:.5rem;border-bottom:1px solid #e0e0e0}.section-content{flex:1;min-height:0;overflow-y:auto;padding:.5rem}.empty-state{text-align:center;padding:1rem;color:#666}.empty-state p{margin:0 0 .5rem;font-size:12px}.animation-item{background:#fff;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:.5rem}.animation-item:last-child{margin-bottom:0}.item-header{display:flex;align-items:center;gap:.5rem;padding:.5rem;cursor:pointer}.item-header:hover{background:#f5f5f5}.item-icon{font-size:14px}.item-name{font-size:12px;font-weight:500;flex:1}.item-info{font-size:11px;color:#666}.item-actions{display:flex;gap:.25rem;opacity:0;transition:opacity .15s}.item-header:hover .item-actions{opacity:1}.item-edit-form{padding:.75rem;border-top:1px solid #e0e0e0;background:#fafafa}.form-row{margin-bottom:.75rem}.form-row:last-child{margin-bottom:0}.form-row label{display:block;font-size:11px;color:#666;margin-bottom:.25rem}.form-row input[type=checkbox]{margin-right:.5rem}.form-row-group{display:flex;gap:.5rem}.form-row.half{flex:1}.form-row.hint-row{background:#e3f2fd;padding:.5rem;border-radius:4px;margin-top:.5rem}.hint-text{font-size:11px;color:#1565c0;line-height:1.4}.input-with-unit{display:flex;align-items:center;gap:.25rem}.input-with-unit .unit{font-size:11px;color:#666}.anchor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:72px}.anchor-point{width:20px;height:20px;border:1px solid #ccc;border-radius:2px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.anchor-point:hover{border-color:#1976d2}.anchor-point.selected{border-color:#1976d2;background:#e3f2fd}.anchor-dot{width:6px;height:6px;border-radius:50%;background:#666}.anchor-point.selected .anchor-dot{background:#1976d2}.preset-picker{background:#fff;border:1px solid #1976d2;border-radius:4px;margin-top:.5rem}.preset-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:#e3f2fd;border-bottom:1px solid #1976d2;font-size:12px;font-weight:500}.preset-groups{padding:.5rem;max-height:200px;overflow-y:auto}.preset-group{margin-bottom:.75rem}.preset-group:last-child{margin-bottom:0}.group-name{font-size:10px;
|
|
20052
|
+
`, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.animation-editor{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;border:1px solid #e0e0e0;border-radius:4px;background:#fafafa}.editor-toolbar{flex-shrink:0;display:flex;justify-content:flex-end;padding:.5rem;border-bottom:1px solid #e0e0e0}.section-content{flex:1;min-height:0;overflow-y:auto;padding:.5rem}.empty-state{text-align:center;padding:1rem;color:#666}.empty-state p{margin:0 0 .5rem;font-size:12px}.animation-item{background:#fff;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:.5rem}.animation-item:last-child{margin-bottom:0}.item-header{display:flex;align-items:center;gap:.5rem;padding:.5rem;cursor:pointer}.item-header:hover{background:#f5f5f5}.item-icon{font-size:14px}.item-name{font-size:12px;font-weight:500;flex:1}.item-info{font-size:11px;color:#666}.item-actions{display:flex;gap:.25rem;opacity:0;transition:opacity .15s}.item-header:hover .item-actions{opacity:1}.item-edit-form{padding:.75rem;border-top:1px solid #e0e0e0;background:#fafafa}.form-row{margin-bottom:.75rem}.form-row:last-child{margin-bottom:0}.form-row label{display:block;font-size:11px;color:#666;margin-bottom:.25rem}.form-row input[type=checkbox]{margin-right:.5rem}.form-row-group{display:flex;gap:.5rem}.form-row.half{flex:1}.form-row.hint-row{background:#e3f2fd;padding:.5rem;border-radius:4px;margin-top:.5rem}.hint-text{font-size:11px;color:#1565c0;line-height:1.4}.input-with-unit{display:flex;align-items:center;gap:.25rem}.input-with-unit .unit{font-size:11px;color:#666}.anchor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:72px}.anchor-point{width:20px;height:20px;border:1px solid #ccc;border-radius:2px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.anchor-point:hover{border-color:#1976d2}.anchor-point.selected{border-color:#1976d2;background:#e3f2fd}.anchor-dot{width:6px;height:6px;border-radius:50%;background:#666}.anchor-point.selected .anchor-dot{background:#1976d2}.preset-picker{background:#fff;border:1px solid #1976d2;border-radius:4px;margin-top:.5rem}.preset-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:#e3f2fd;border-bottom:1px solid #1976d2;font-size:12px;font-weight:500}.preset-groups{padding:.5rem;max-height:200px;overflow-y:auto}.preset-group{margin-bottom:.75rem}.preset-group:last-child{margin-bottom:0}.group-name{font-size:10px;color:#666;margin-bottom:.25rem}.group-presets{display:flex;flex-wrap:wrap;gap:.25rem}.preset-button{font-size:11px;padding:.25rem .5rem;border:1px solid #e0e0e0;border-radius:3px;background:#fff;cursor:pointer}.preset-button:hover{border-color:#1976d2;background:#e3f2fd}.path-textarea{width:100%;min-height:60px;font-family:monospace;font-size:11px;padding:.5rem;border:1px solid #ccc;border-radius:4px;resize:vertical;line-height:1.4;box-sizing:border-box}.path-preview{margin:.5rem 0}.motion-path-preview{width:100%;height:60px;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:4px}.path-select{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:4px;font-size:12px;background:#fff}.flow-particles-hint{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#e8f5e9;border-radius:4px;margin-bottom:.75rem;font-size:11px;color:#2e7d32}.hint-icon{font-size:14px}.color-input{width:40px;height:24px;border:1px solid #ccc;border-radius:4px;cursor:pointer;padding:0}.color-hint{font-size:10px;color:#666;margin-left:.5rem}:host ::ng-deep .k-dropdownlist,:host ::ng-deep .k-textbox,:host ::ng-deep .k-numerictextbox{width:100%}:host ::ng-deep .k-input-sm{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i3$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: IconsModule }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
20029
20053
|
}
|
|
20030
20054
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AnimationEditorComponent, decorators: [{
|
|
20031
20055
|
type: Component,
|
|
@@ -20075,12 +20099,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
20075
20099
|
<div class="item-actions">
|
|
20076
20100
|
<button kendoButton look="flat" size="small"
|
|
20077
20101
|
[svgIcon]="pencilIcon"
|
|
20078
|
-
title="Edit"
|
|
20102
|
+
title="Edit animation"
|
|
20103
|
+
[attr.aria-label]="'Edit animation ' + (anim.name || getAnimationTypeName(anim))"
|
|
20079
20104
|
(click)="onEditClick($event, anim)">
|
|
20080
20105
|
</button>
|
|
20081
20106
|
<button kendoButton look="flat" size="small"
|
|
20082
20107
|
[svgIcon]="trashIcon"
|
|
20083
|
-
|
|
20108
|
+
themeColor="error"
|
|
20109
|
+
title="Delete animation"
|
|
20110
|
+
[attr.aria-label]="'Delete animation ' + (anim.name || getAnimationTypeName(anim))"
|
|
20084
20111
|
(click)="onDeleteClick($event, i)">
|
|
20085
20112
|
</button>
|
|
20086
20113
|
</div>
|
|
@@ -20284,6 +20311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
20284
20311
|
<button class="anchor-point"
|
|
20285
20312
|
[class.selected]="(anim.anchor ?? 'center') === anchor"
|
|
20286
20313
|
[title]="getAnchorLabel(anchor)"
|
|
20314
|
+
[attr.aria-label]="getAnchorLabel(anchor)"
|
|
20287
20315
|
(click)="updateAnimationField(i, 'anchor', anchor)">
|
|
20288
20316
|
<span class="anchor-dot"></span>
|
|
20289
20317
|
</button>
|
|
@@ -20333,7 +20361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
20333
20361
|
}
|
|
20334
20362
|
</div>
|
|
20335
20363
|
</div>
|
|
20336
|
-
`, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.animation-editor{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;border:1px solid #e0e0e0;border-radius:4px;background:#fafafa}.editor-toolbar{flex-shrink:0;display:flex;justify-content:flex-end;padding:.5rem;border-bottom:1px solid #e0e0e0}.section-content{flex:1;min-height:0;overflow-y:auto;padding:.5rem}.empty-state{text-align:center;padding:1rem;color:#666}.empty-state p{margin:0 0 .5rem;font-size:12px}.animation-item{background:#fff;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:.5rem}.animation-item:last-child{margin-bottom:0}.item-header{display:flex;align-items:center;gap:.5rem;padding:.5rem;cursor:pointer}.item-header:hover{background:#f5f5f5}.item-icon{font-size:14px}.item-name{font-size:12px;font-weight:500;flex:1}.item-info{font-size:11px;color:#666}.item-actions{display:flex;gap:.25rem;opacity:0;transition:opacity .15s}.item-header:hover .item-actions{opacity:1}.item-edit-form{padding:.75rem;border-top:1px solid #e0e0e0;background:#fafafa}.form-row{margin-bottom:.75rem}.form-row:last-child{margin-bottom:0}.form-row label{display:block;font-size:11px;color:#666;margin-bottom:.25rem}.form-row input[type=checkbox]{margin-right:.5rem}.form-row-group{display:flex;gap:.5rem}.form-row.half{flex:1}.form-row.hint-row{background:#e3f2fd;padding:.5rem;border-radius:4px;margin-top:.5rem}.hint-text{font-size:11px;color:#1565c0;line-height:1.4}.input-with-unit{display:flex;align-items:center;gap:.25rem}.input-with-unit .unit{font-size:11px;color:#666}.anchor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:72px}.anchor-point{width:20px;height:20px;border:1px solid #ccc;border-radius:2px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.anchor-point:hover{border-color:#1976d2}.anchor-point.selected{border-color:#1976d2;background:#e3f2fd}.anchor-dot{width:6px;height:6px;border-radius:50%;background:#666}.anchor-point.selected .anchor-dot{background:#1976d2}.preset-picker{background:#fff;border:1px solid #1976d2;border-radius:4px;margin-top:.5rem}.preset-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:#e3f2fd;border-bottom:1px solid #1976d2;font-size:12px;font-weight:500}.preset-groups{padding:.5rem;max-height:200px;overflow-y:auto}.preset-group{margin-bottom:.75rem}.preset-group:last-child{margin-bottom:0}.group-name{font-size:10px;
|
|
20364
|
+
`, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.animation-editor{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;border:1px solid #e0e0e0;border-radius:4px;background:#fafafa}.editor-toolbar{flex-shrink:0;display:flex;justify-content:flex-end;padding:.5rem;border-bottom:1px solid #e0e0e0}.section-content{flex:1;min-height:0;overflow-y:auto;padding:.5rem}.empty-state{text-align:center;padding:1rem;color:#666}.empty-state p{margin:0 0 .5rem;font-size:12px}.animation-item{background:#fff;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:.5rem}.animation-item:last-child{margin-bottom:0}.item-header{display:flex;align-items:center;gap:.5rem;padding:.5rem;cursor:pointer}.item-header:hover{background:#f5f5f5}.item-icon{font-size:14px}.item-name{font-size:12px;font-weight:500;flex:1}.item-info{font-size:11px;color:#666}.item-actions{display:flex;gap:.25rem;opacity:0;transition:opacity .15s}.item-header:hover .item-actions{opacity:1}.item-edit-form{padding:.75rem;border-top:1px solid #e0e0e0;background:#fafafa}.form-row{margin-bottom:.75rem}.form-row:last-child{margin-bottom:0}.form-row label{display:block;font-size:11px;color:#666;margin-bottom:.25rem}.form-row input[type=checkbox]{margin-right:.5rem}.form-row-group{display:flex;gap:.5rem}.form-row.half{flex:1}.form-row.hint-row{background:#e3f2fd;padding:.5rem;border-radius:4px;margin-top:.5rem}.hint-text{font-size:11px;color:#1565c0;line-height:1.4}.input-with-unit{display:flex;align-items:center;gap:.25rem}.input-with-unit .unit{font-size:11px;color:#666}.anchor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:72px}.anchor-point{width:20px;height:20px;border:1px solid #ccc;border-radius:2px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.anchor-point:hover{border-color:#1976d2}.anchor-point.selected{border-color:#1976d2;background:#e3f2fd}.anchor-dot{width:6px;height:6px;border-radius:50%;background:#666}.anchor-point.selected .anchor-dot{background:#1976d2}.preset-picker{background:#fff;border:1px solid #1976d2;border-radius:4px;margin-top:.5rem}.preset-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:#e3f2fd;border-bottom:1px solid #1976d2;font-size:12px;font-weight:500}.preset-groups{padding:.5rem;max-height:200px;overflow-y:auto}.preset-group{margin-bottom:.75rem}.preset-group:last-child{margin-bottom:0}.group-name{font-size:10px;color:#666;margin-bottom:.25rem}.group-presets{display:flex;flex-wrap:wrap;gap:.25rem}.preset-button{font-size:11px;padding:.25rem .5rem;border:1px solid #e0e0e0;border-radius:3px;background:#fff;cursor:pointer}.preset-button:hover{border-color:#1976d2;background:#e3f2fd}.path-textarea{width:100%;min-height:60px;font-family:monospace;font-size:11px;padding:.5rem;border:1px solid #ccc;border-radius:4px;resize:vertical;line-height:1.4;box-sizing:border-box}.path-preview{margin:.5rem 0}.motion-path-preview{width:100%;height:60px;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:4px}.path-select{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:4px;font-size:12px;background:#fff}.flow-particles-hint{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#e8f5e9;border-radius:4px;margin-bottom:.75rem;font-size:11px;color:#2e7d32}.hint-icon{font-size:14px}.color-input{width:40px;height:24px;border:1px solid #ccc;border-radius:4px;cursor:pointer;padding:0}.color-hint{font-size:10px;color:#666;margin-left:.5rem}:host ::ng-deep .k-dropdownlist,:host ::ng-deep .k-textbox,:host ::ng-deep .k-numerictextbox{width:100%}:host ::ng-deep .k-input-sm{font-size:12px}\n"] }]
|
|
20337
20365
|
}], ctorParameters: () => [], propDecorators: { primitiveId: [{
|
|
20338
20366
|
type: Input
|
|
20339
20367
|
}], animations: [{
|
|
@@ -20599,6 +20627,7 @@ class SimulationPanelComponent {
|
|
|
20599
20627
|
size="small"
|
|
20600
20628
|
[svgIcon]="resetIcon"
|
|
20601
20629
|
title="Reset to default"
|
|
20630
|
+
[attr.aria-label]="'Reset ' + property.name + ' to default'"
|
|
20602
20631
|
(click)="resetProperty(property)">
|
|
20603
20632
|
</button>
|
|
20604
20633
|
</div>
|
|
@@ -20694,6 +20723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
20694
20723
|
size="small"
|
|
20695
20724
|
[svgIcon]="resetIcon"
|
|
20696
20725
|
title="Reset to default"
|
|
20726
|
+
[attr.aria-label]="'Reset ' + property.name + ' to default'"
|
|
20697
20727
|
(click)="resetProperty(property)">
|
|
20698
20728
|
</button>
|
|
20699
20729
|
</div>
|
|
@@ -20883,7 +20913,7 @@ class SettingsPanelComponent {
|
|
|
20883
20913
|
</div>
|
|
20884
20914
|
</div>
|
|
20885
20915
|
</div>
|
|
20886
|
-
`, isInline: true, styles: [".panel-container{padding:.5rem;background:#fff}.settings-section{margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid #e0e0e0}.settings-section:last-child{border-bottom:none;margin-bottom:0}.settings-section h4{font-size:11px;font-weight:600;
|
|
20916
|
+
`, isInline: true, styles: [".panel-container{padding:.5rem;background:#fff}.settings-section{margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid #e0e0e0}.settings-section:last-child{border-bottom:none;margin-bottom:0}.settings-section h4{font-size:11px;font-weight:600;color:#666;margin:0 0 .5rem}.form-group{margin-bottom:.5rem}.form-group label{display:block;font-size:11px;color:#666;margin-bottom:.25rem}.form-group input,.form-group textarea,.form-group kendo-numerictextbox{width:100%}.form-row{display:flex;gap:.5rem}.form-row .form-group{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i3$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: i3$1.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: NumericTextBoxModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
20887
20917
|
}
|
|
20888
20918
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SettingsPanelComponent, decorators: [{
|
|
20889
20919
|
type: Component,
|
|
@@ -20960,7 +20990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
20960
20990
|
</div>
|
|
20961
20991
|
</div>
|
|
20962
20992
|
</div>
|
|
20963
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".panel-container{padding:.5rem;background:#fff}.settings-section{margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid #e0e0e0}.settings-section:last-child{border-bottom:none;margin-bottom:0}.settings-section h4{font-size:11px;font-weight:600;
|
|
20993
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".panel-container{padding:.5rem;background:#fff}.settings-section{margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid #e0e0e0}.settings-section:last-child{border-bottom:none;margin-bottom:0}.settings-section h4{font-size:11px;font-weight:600;color:#666;margin:0 0 .5rem}.form-group{margin-bottom:.5rem}.form-group label{display:block;font-size:11px;color:#666;margin-bottom:.25rem}.form-group input,.form-group textarea,.form-group kendo-numerictextbox{width:100%}.form-row{display:flex;gap:.5rem}.form-row .form-group{flex:1}\n"] }]
|
|
20964
20994
|
}] });
|
|
20965
20995
|
|
|
20966
20996
|
/**
|
|
@@ -21222,7 +21252,8 @@ class StylesPanelComponent {
|
|
|
21222
21252
|
</svg>
|
|
21223
21253
|
</div>
|
|
21224
21254
|
<span class="style-name">{{ styleClass.name }}</span>
|
|
21225
|
-
<button class="delete-button" (click)="deleteStyle(styleClass); $event.stopPropagation()" title="Delete style"
|
|
21255
|
+
<button class="delete-button" (click)="deleteStyle(styleClass); $event.stopPropagation()" title="Delete style"
|
|
21256
|
+
[attr.aria-label]="'Delete style ' + styleClass.name">
|
|
21226
21257
|
<svg viewBox="0 0 24 24" width="14" height="14">
|
|
21227
21258
|
<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
|
|
21228
21259
|
</svg>
|
|
@@ -21319,7 +21350,7 @@ class StylesPanelComponent {
|
|
|
21319
21350
|
<p class="hint">Drag a style onto selected elements to apply</p>
|
|
21320
21351
|
</div>
|
|
21321
21352
|
</div>
|
|
21322
|
-
`, isInline: true, styles: [":host{--panel-bg: var(--designer-panel-bg, #fff);--panel-bg-elevated: var(--designer-panel-bg-elevated, #fafafa);--panel-border: var(--designer-panel-border, #e0e0e0);--panel-text: var(--designer-panel-text, #333);--panel-text-secondary: var(--designer-panel-text-secondary, #666);--panel-text-muted: var(--designer-panel-text-muted, #999);--panel-accent: var(--designer-panel-accent, #1976d2);--panel-accent-hover-bg: var(--designer-panel-accent-hover-bg, #e3f2fd);--panel-input-bg: var(--designer-panel-input-bg, #fff);--panel-delete-hover-bg: var(--designer-panel-delete-hover-bg, #ffebee);--panel-delete-color: var(--designer-panel-delete-color, #d32f2f)}.panel-container{display:flex;flex-direction:column;height:100%;min-height:0;overflow-y:auto;background:var(--panel-bg)}.panel-toolbar{display:flex;padding:.5rem;border-bottom:1px solid var(--panel-border);flex-shrink:0}.add-button{flex:1;padding:.375rem .75rem;font-size:12px;border:1px dashed var(--panel-border);background:var(--panel-bg-elevated);border-radius:4px;cursor:pointer;color:var(--panel-text-secondary);transition:all .15s ease}.add-button:hover{border-color:var(--panel-accent);background:var(--panel-accent-hover-bg);color:var(--panel-accent)}.style-list{flex:0 0 auto;padding:.5rem}.style-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border:1px solid var(--panel-border);border-radius:4px;margin-bottom:.375rem;cursor:grab;background:var(--panel-bg);transition:all .15s ease}.style-item:hover{border-color:var(--panel-accent);background:var(--panel-bg-elevated)}.style-item.selected{border-color:var(--panel-accent);background:var(--panel-accent-hover-bg)}.style-item:active{cursor:grabbing}.style-preview{width:24px;height:24px;flex-shrink:0;border-radius:3px;overflow:hidden;background:repeating-conic-gradient(#555 0% 25%,#333 0% 50%) 50% / 8px 8px}.style-preview svg{display:block;width:100%;height:100%}.style-name{flex:1;font-size:12px;color:var(--panel-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.delete-button{width:20px;height:20px;padding:0;border:none;background:transparent;cursor:pointer;color:var(--panel-text-muted);border-radius:3px;display:flex;align-items:center;justify-content:center;opacity:.5;transition:all .15s ease}.delete-button:hover{background:var(--panel-delete-hover-bg);color:var(--panel-delete-color);opacity:1}.empty-state{padding:1.5rem 1rem;text-align:center;color:var(--panel-text-muted)}.empty-state p{margin:0;font-size:12px}.empty-state .hint{margin-top:.25rem;font-size:11px}.style-editor{border-top:1px solid var(--panel-border);padding:.5rem;background:var(--panel-bg-elevated)}.editor-section h4{font-size:11px;font-weight:600;
|
|
21353
|
+
`, isInline: true, styles: [":host{--panel-bg: var(--designer-panel-bg, #fff);--panel-bg-elevated: var(--designer-panel-bg-elevated, #fafafa);--panel-border: var(--designer-panel-border, #e0e0e0);--panel-text: var(--designer-panel-text, #333);--panel-text-secondary: var(--designer-panel-text-secondary, #666);--panel-text-muted: var(--designer-panel-text-muted, #999);--panel-accent: var(--designer-panel-accent, #1976d2);--panel-accent-hover-bg: var(--designer-panel-accent-hover-bg, #e3f2fd);--panel-input-bg: var(--designer-panel-input-bg, #fff);--panel-delete-hover-bg: var(--designer-panel-delete-hover-bg, #ffebee);--panel-delete-color: var(--designer-panel-delete-color, #d32f2f)}.panel-container{display:flex;flex-direction:column;height:100%;min-height:0;overflow-y:auto;background:var(--panel-bg)}.panel-toolbar{display:flex;padding:.5rem;border-bottom:1px solid var(--panel-border);flex-shrink:0}.add-button{flex:1;padding:.375rem .75rem;font-size:12px;border:1px dashed var(--panel-border);background:var(--panel-bg-elevated);border-radius:4px;cursor:pointer;color:var(--panel-text-secondary);transition:all .15s ease}.add-button:hover{border-color:var(--panel-accent);background:var(--panel-accent-hover-bg);color:var(--panel-accent)}.style-list{flex:0 0 auto;padding:.5rem}.style-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border:1px solid var(--panel-border);border-radius:4px;margin-bottom:.375rem;cursor:grab;background:var(--panel-bg);transition:all .15s ease}.style-item:hover{border-color:var(--panel-accent);background:var(--panel-bg-elevated)}.style-item.selected{border-color:var(--panel-accent);background:var(--panel-accent-hover-bg)}.style-item:active{cursor:grabbing}.style-preview{width:24px;height:24px;flex-shrink:0;border-radius:3px;overflow:hidden;background:repeating-conic-gradient(#555 0% 25%,#333 0% 50%) 50% / 8px 8px}.style-preview svg{display:block;width:100%;height:100%}.style-name{flex:1;font-size:12px;color:var(--panel-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.delete-button{width:20px;height:20px;padding:0;border:none;background:transparent;cursor:pointer;color:var(--panel-text-muted);border-radius:3px;display:flex;align-items:center;justify-content:center;opacity:.5;transition:all .15s ease}.delete-button:hover{background:var(--panel-delete-hover-bg);color:var(--panel-delete-color);opacity:1}.empty-state{padding:1.5rem 1rem;text-align:center;color:var(--panel-text-muted)}.empty-state p{margin:0;font-size:12px}.empty-state .hint{margin-top:.25rem;font-size:11px}.style-editor{border-top:1px solid var(--panel-border);padding:.5rem;background:var(--panel-bg-elevated)}.editor-section h4{font-size:11px;font-weight:600;color:var(--panel-text-secondary);margin:0 0 .5rem}.form-group{margin-bottom:.5rem}.form-group label{display:block;font-size:11px;color:var(--panel-text-secondary);margin-bottom:.25rem}.form-group input[type=text]{width:150px;padding:.25rem .5rem;border:1px solid var(--panel-border);border-radius:4px;font-size:12px;background:var(--panel-input-bg);color:var(--panel-text)}.form-group input[type=text]:focus{outline:none;border-color:var(--panel-accent)}.form-group input[type=number]{width:80px;padding:.25rem .5rem;border:1px solid var(--panel-border);border-radius:4px;font-size:12px;background:var(--panel-input-bg);color:var(--panel-text)}.form-group input[type=number]:focus{outline:none;border-color:var(--panel-accent)}.color-row{display:flex;align-items:center;gap:.5rem}.color-row input[type=color]{width:32px;height:24px;padding:2px;border:1px solid var(--panel-border);border-radius:4px;cursor:pointer}.opacity-slider{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,transparent,var(--panel-accent));border-radius:2px;cursor:pointer}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--panel-accent);cursor:pointer;border:2px solid var(--panel-bg);box-shadow:0 1px 3px #0000004d}.opacity-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--panel-accent);cursor:pointer;border:2px solid var(--panel-bg);box-shadow:0 1px 3px #0000004d}.opacity-value{width:36px;font-size:11px;color:var(--panel-text-secondary);text-align:right}.line-type-row{display:flex;align-items:center;gap:.5rem}.line-type-select{flex:1;padding:.25rem .5rem;border:1px solid var(--panel-border);border-radius:4px;font-size:12px;background:var(--panel-input-bg);color:var(--panel-text)}.line-type-select:focus{outline:none;border-color:var(--panel-accent)}.line-preview{width:50px;height:16px;border:1px solid var(--panel-border);border-radius:3px;background:var(--panel-input-bg)}.panel-footer{padding:.5rem;border-top:1px solid var(--panel-border);background:var(--panel-bg-elevated)}.panel-footer .hint{margin:0;font-size:10px;color:var(--panel-text-muted);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: InputsModule }, { kind: "ngmodule", type: ButtonsModule }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
21323
21354
|
}
|
|
21324
21355
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: StylesPanelComponent, decorators: [{
|
|
21325
21356
|
type: Component,
|
|
@@ -21348,7 +21379,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
21348
21379
|
</svg>
|
|
21349
21380
|
</div>
|
|
21350
21381
|
<span class="style-name">{{ styleClass.name }}</span>
|
|
21351
|
-
<button class="delete-button" (click)="deleteStyle(styleClass); $event.stopPropagation()" title="Delete style"
|
|
21382
|
+
<button class="delete-button" (click)="deleteStyle(styleClass); $event.stopPropagation()" title="Delete style"
|
|
21383
|
+
[attr.aria-label]="'Delete style ' + styleClass.name">
|
|
21352
21384
|
<svg viewBox="0 0 24 24" width="14" height="14">
|
|
21353
21385
|
<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
|
|
21354
21386
|
</svg>
|
|
@@ -21445,7 +21477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
21445
21477
|
<p class="hint">Drag a style onto selected elements to apply</p>
|
|
21446
21478
|
</div>
|
|
21447
21479
|
</div>
|
|
21448
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--panel-bg: var(--designer-panel-bg, #fff);--panel-bg-elevated: var(--designer-panel-bg-elevated, #fafafa);--panel-border: var(--designer-panel-border, #e0e0e0);--panel-text: var(--designer-panel-text, #333);--panel-text-secondary: var(--designer-panel-text-secondary, #666);--panel-text-muted: var(--designer-panel-text-muted, #999);--panel-accent: var(--designer-panel-accent, #1976d2);--panel-accent-hover-bg: var(--designer-panel-accent-hover-bg, #e3f2fd);--panel-input-bg: var(--designer-panel-input-bg, #fff);--panel-delete-hover-bg: var(--designer-panel-delete-hover-bg, #ffebee);--panel-delete-color: var(--designer-panel-delete-color, #d32f2f)}.panel-container{display:flex;flex-direction:column;height:100%;min-height:0;overflow-y:auto;background:var(--panel-bg)}.panel-toolbar{display:flex;padding:.5rem;border-bottom:1px solid var(--panel-border);flex-shrink:0}.add-button{flex:1;padding:.375rem .75rem;font-size:12px;border:1px dashed var(--panel-border);background:var(--panel-bg-elevated);border-radius:4px;cursor:pointer;color:var(--panel-text-secondary);transition:all .15s ease}.add-button:hover{border-color:var(--panel-accent);background:var(--panel-accent-hover-bg);color:var(--panel-accent)}.style-list{flex:0 0 auto;padding:.5rem}.style-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border:1px solid var(--panel-border);border-radius:4px;margin-bottom:.375rem;cursor:grab;background:var(--panel-bg);transition:all .15s ease}.style-item:hover{border-color:var(--panel-accent);background:var(--panel-bg-elevated)}.style-item.selected{border-color:var(--panel-accent);background:var(--panel-accent-hover-bg)}.style-item:active{cursor:grabbing}.style-preview{width:24px;height:24px;flex-shrink:0;border-radius:3px;overflow:hidden;background:repeating-conic-gradient(#555 0% 25%,#333 0% 50%) 50% / 8px 8px}.style-preview svg{display:block;width:100%;height:100%}.style-name{flex:1;font-size:12px;color:var(--panel-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.delete-button{width:20px;height:20px;padding:0;border:none;background:transparent;cursor:pointer;color:var(--panel-text-muted);border-radius:3px;display:flex;align-items:center;justify-content:center;opacity:.5;transition:all .15s ease}.delete-button:hover{background:var(--panel-delete-hover-bg);color:var(--panel-delete-color);opacity:1}.empty-state{padding:1.5rem 1rem;text-align:center;color:var(--panel-text-muted)}.empty-state p{margin:0;font-size:12px}.empty-state .hint{margin-top:.25rem;font-size:11px}.style-editor{border-top:1px solid var(--panel-border);padding:.5rem;background:var(--panel-bg-elevated)}.editor-section h4{font-size:11px;font-weight:600;
|
|
21480
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--panel-bg: var(--designer-panel-bg, #fff);--panel-bg-elevated: var(--designer-panel-bg-elevated, #fafafa);--panel-border: var(--designer-panel-border, #e0e0e0);--panel-text: var(--designer-panel-text, #333);--panel-text-secondary: var(--designer-panel-text-secondary, #666);--panel-text-muted: var(--designer-panel-text-muted, #999);--panel-accent: var(--designer-panel-accent, #1976d2);--panel-accent-hover-bg: var(--designer-panel-accent-hover-bg, #e3f2fd);--panel-input-bg: var(--designer-panel-input-bg, #fff);--panel-delete-hover-bg: var(--designer-panel-delete-hover-bg, #ffebee);--panel-delete-color: var(--designer-panel-delete-color, #d32f2f)}.panel-container{display:flex;flex-direction:column;height:100%;min-height:0;overflow-y:auto;background:var(--panel-bg)}.panel-toolbar{display:flex;padding:.5rem;border-bottom:1px solid var(--panel-border);flex-shrink:0}.add-button{flex:1;padding:.375rem .75rem;font-size:12px;border:1px dashed var(--panel-border);background:var(--panel-bg-elevated);border-radius:4px;cursor:pointer;color:var(--panel-text-secondary);transition:all .15s ease}.add-button:hover{border-color:var(--panel-accent);background:var(--panel-accent-hover-bg);color:var(--panel-accent)}.style-list{flex:0 0 auto;padding:.5rem}.style-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border:1px solid var(--panel-border);border-radius:4px;margin-bottom:.375rem;cursor:grab;background:var(--panel-bg);transition:all .15s ease}.style-item:hover{border-color:var(--panel-accent);background:var(--panel-bg-elevated)}.style-item.selected{border-color:var(--panel-accent);background:var(--panel-accent-hover-bg)}.style-item:active{cursor:grabbing}.style-preview{width:24px;height:24px;flex-shrink:0;border-radius:3px;overflow:hidden;background:repeating-conic-gradient(#555 0% 25%,#333 0% 50%) 50% / 8px 8px}.style-preview svg{display:block;width:100%;height:100%}.style-name{flex:1;font-size:12px;color:var(--panel-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.delete-button{width:20px;height:20px;padding:0;border:none;background:transparent;cursor:pointer;color:var(--panel-text-muted);border-radius:3px;display:flex;align-items:center;justify-content:center;opacity:.5;transition:all .15s ease}.delete-button:hover{background:var(--panel-delete-hover-bg);color:var(--panel-delete-color);opacity:1}.empty-state{padding:1.5rem 1rem;text-align:center;color:var(--panel-text-muted)}.empty-state p{margin:0;font-size:12px}.empty-state .hint{margin-top:.25rem;font-size:11px}.style-editor{border-top:1px solid var(--panel-border);padding:.5rem;background:var(--panel-bg-elevated)}.editor-section h4{font-size:11px;font-weight:600;color:var(--panel-text-secondary);margin:0 0 .5rem}.form-group{margin-bottom:.5rem}.form-group label{display:block;font-size:11px;color:var(--panel-text-secondary);margin-bottom:.25rem}.form-group input[type=text]{width:150px;padding:.25rem .5rem;border:1px solid var(--panel-border);border-radius:4px;font-size:12px;background:var(--panel-input-bg);color:var(--panel-text)}.form-group input[type=text]:focus{outline:none;border-color:var(--panel-accent)}.form-group input[type=number]{width:80px;padding:.25rem .5rem;border:1px solid var(--panel-border);border-radius:4px;font-size:12px;background:var(--panel-input-bg);color:var(--panel-text)}.form-group input[type=number]:focus{outline:none;border-color:var(--panel-accent)}.color-row{display:flex;align-items:center;gap:.5rem}.color-row input[type=color]{width:32px;height:24px;padding:2px;border:1px solid var(--panel-border);border-radius:4px;cursor:pointer}.opacity-slider{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,transparent,var(--panel-accent));border-radius:2px;cursor:pointer}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--panel-accent);cursor:pointer;border:2px solid var(--panel-bg);box-shadow:0 1px 3px #0000004d}.opacity-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--panel-accent);cursor:pointer;border:2px solid var(--panel-bg);box-shadow:0 1px 3px #0000004d}.opacity-value{width:36px;font-size:11px;color:var(--panel-text-secondary);text-align:right}.line-type-row{display:flex;align-items:center;gap:.5rem}.line-type-select{flex:1;padding:.25rem .5rem;border:1px solid var(--panel-border);border-radius:4px;font-size:12px;background:var(--panel-input-bg);color:var(--panel-text)}.line-type-select:focus{outline:none;border-color:var(--panel-accent)}.line-preview{width:50px;height:16px;border:1px solid var(--panel-border);border-radius:3px;background:var(--panel-input-bg)}.panel-footer{padding:.5rem;border-top:1px solid var(--panel-border);background:var(--panel-bg-elevated)}.panel-footer .hint{margin:0;font-size:10px;color:var(--panel-text-muted);text-align:center}\n"] }]
|
|
21449
21481
|
}] });
|
|
21450
21482
|
|
|
21451
21483
|
/**
|
|
@@ -28700,7 +28732,7 @@ class SymbolEditorComponent {
|
|
|
28700
28732
|
(closed)="onBindingEditorClosed()"
|
|
28701
28733
|
(saved)="onBindingsSaved($event)">
|
|
28702
28734
|
</mm-binding-editor-dialog>
|
|
28703
|
-
`, isInline: true, styles: [":host{--editor-bg: var(--designer-bg, #f5f5f5);--editor-surface: var(--designer-surface, #ffffff);--editor-surface-alt: var(--designer-surface-alt, #f5f5f5);--editor-border: var(--designer-border, #e0e0e0);--editor-text: var(--designer-text, #333333);--editor-text-muted: var(--designer-text-muted, #666666);--editor-accent: var(--designer-accent, #1976d2);--editor-hover-bg: var(--designer-hover-bg, #eeeeee);display:flex;flex-direction:column;flex:1;width:100%;height:100%;min-height:0;overflow:hidden}.symbol-editor-container{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden;background:var(--editor-bg)}.editor-main{display:flex;flex:1;height:100%;min-height:0;min-width:0;position:relative;overflow:hidden}.editor-canvas{display:flex;flex:1;height:100%;min-width:0;min-height:0;overflow:hidden}mm-process-designer{flex:1;height:100%;min-height:0;min-width:0}.properties-panel{width:300px;display:flex;flex-direction:column;border-left:1px solid var(--editor-border);background:var(--editor-surface)}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--editor-surface-alt);border-bottom:1px solid var(--editor-border);flex-shrink:0}.panel-title{font-size:13px;font-weight:500;color:var(--editor-text)}.panel-close{width:24px;height:24px;border:none;background:transparent;cursor:pointer;font-size:18px;color:var(--editor-text-muted);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0}.panel-close:hover{background:var(--editor-hover-bg);color:var(--editor-accent)}.panel-content{flex:1;overflow-y:auto;min-height:0}mm-transform-property-editor{display:block}.panel-collapsed{width:28px;background:var(--editor-surface-alt);border-left:1px solid var(--editor-border);display:flex;flex-direction:column;align-items:center;padding-top:12px;cursor:pointer;transition:background .15s ease}.panel-collapsed:hover{background:var(--editor-hover-bg)}.collapsed-icon{color:var(--editor-text-muted);margin-bottom:8px}.collapsed-label{writing-mode:vertical-rl;text-orientation:mixed;font-size:11px;font-weight:500;color:var(--editor-text-muted)
|
|
28735
|
+
`, isInline: true, styles: [":host{--editor-bg: var(--designer-bg, #f5f5f5);--editor-surface: var(--designer-surface, #ffffff);--editor-surface-alt: var(--designer-surface-alt, #f5f5f5);--editor-border: var(--designer-border, #e0e0e0);--editor-text: var(--designer-text, #333333);--editor-text-muted: var(--designer-text-muted, #666666);--editor-accent: var(--designer-accent, #1976d2);--editor-hover-bg: var(--designer-hover-bg, #eeeeee);display:flex;flex-direction:column;flex:1;width:100%;height:100%;min-height:0;overflow:hidden}.symbol-editor-container{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden;background:var(--editor-bg)}.editor-main{display:flex;flex:1;height:100%;min-height:0;min-width:0;position:relative;overflow:hidden}.editor-canvas{display:flex;flex:1;height:100%;min-width:0;min-height:0;overflow:hidden}mm-process-designer{flex:1;height:100%;min-height:0;min-width:0}.properties-panel{width:300px;display:flex;flex-direction:column;border-left:1px solid var(--editor-border);background:var(--editor-surface)}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--editor-surface-alt);border-bottom:1px solid var(--editor-border);flex-shrink:0}.panel-title{font-size:13px;font-weight:500;color:var(--editor-text)}.panel-close{width:24px;height:24px;border:none;background:transparent;cursor:pointer;font-size:18px;color:var(--editor-text-muted);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0}.panel-close:hover{background:var(--editor-hover-bg);color:var(--editor-accent)}.panel-content{flex:1;overflow-y:auto;min-height:0}mm-transform-property-editor{display:block}.panel-collapsed{width:28px;background:var(--editor-surface-alt);border-left:1px solid var(--editor-border);display:flex;flex-direction:column;align-items:center;padding-top:12px;cursor:pointer;transition:background .15s ease}.panel-collapsed:hover{background:var(--editor-hover-bg)}.collapsed-icon{color:var(--editor-text-muted);margin-bottom:8px}.collapsed-label{writing-mode:vertical-rl;text-orientation:mixed;font-size:11px;font-weight:500;color:var(--editor-text-muted)}mm-simulation-panel{flex-shrink:0}.symbol-editor-container.dockview-enabled .editor-main,.symbol-editor-container.dockview-enabled .editor-canvas{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ProcessDesignerComponent, selector: "mm-process-designer", inputs: ["diagramConfig", "editorMode", "showSaveButtons", "transformProperties", "propertyBindings", "simulationPropertyValues", "useDockview", "symbolSettings", "styleClasses"], outputs: ["diagramChange", "saveRequest", "transformPropertiesChange", "simulationValueChange", "simulationReset", "symbolSettingsChange", "styleClassesChange"] }, { kind: "component", type: TransformPropertyEditorComponent, selector: "mm-transform-property-editor", inputs: ["transformProperties", "propertyBindings", "primitives", "symbolInstances"], outputs: ["propertiesChange", "openBindings"] }, { kind: "component", type: BindingEditorDialogComponent, selector: "mm-binding-editor-dialog", inputs: ["show", "property", "existingBindings", "primitives", "symbolInstances", "symbolDefinitions"], outputs: ["closed", "saved"] }, { kind: "component", type: SimulationPanelComponent, selector: "mm-simulation-panel", inputs: ["properties", "values"], outputs: ["valueChange", "resetValues"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
28704
28736
|
}
|
|
28705
28737
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SymbolEditorComponent, decorators: [{
|
|
28706
28738
|
type: Component,
|
|
@@ -28787,7 +28819,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
28787
28819
|
(closed)="onBindingEditorClosed()"
|
|
28788
28820
|
(saved)="onBindingsSaved($event)">
|
|
28789
28821
|
</mm-binding-editor-dialog>
|
|
28790
|
-
`, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{--editor-bg: var(--designer-bg, #f5f5f5);--editor-surface: var(--designer-surface, #ffffff);--editor-surface-alt: var(--designer-surface-alt, #f5f5f5);--editor-border: var(--designer-border, #e0e0e0);--editor-text: var(--designer-text, #333333);--editor-text-muted: var(--designer-text-muted, #666666);--editor-accent: var(--designer-accent, #1976d2);--editor-hover-bg: var(--designer-hover-bg, #eeeeee);display:flex;flex-direction:column;flex:1;width:100%;height:100%;min-height:0;overflow:hidden}.symbol-editor-container{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden;background:var(--editor-bg)}.editor-main{display:flex;flex:1;height:100%;min-height:0;min-width:0;position:relative;overflow:hidden}.editor-canvas{display:flex;flex:1;height:100%;min-width:0;min-height:0;overflow:hidden}mm-process-designer{flex:1;height:100%;min-height:0;min-width:0}.properties-panel{width:300px;display:flex;flex-direction:column;border-left:1px solid var(--editor-border);background:var(--editor-surface)}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--editor-surface-alt);border-bottom:1px solid var(--editor-border);flex-shrink:0}.panel-title{font-size:13px;font-weight:500;color:var(--editor-text)}.panel-close{width:24px;height:24px;border:none;background:transparent;cursor:pointer;font-size:18px;color:var(--editor-text-muted);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0}.panel-close:hover{background:var(--editor-hover-bg);color:var(--editor-accent)}.panel-content{flex:1;overflow-y:auto;min-height:0}mm-transform-property-editor{display:block}.panel-collapsed{width:28px;background:var(--editor-surface-alt);border-left:1px solid var(--editor-border);display:flex;flex-direction:column;align-items:center;padding-top:12px;cursor:pointer;transition:background .15s ease}.panel-collapsed:hover{background:var(--editor-hover-bg)}.collapsed-icon{color:var(--editor-text-muted);margin-bottom:8px}.collapsed-label{writing-mode:vertical-rl;text-orientation:mixed;font-size:11px;font-weight:500;color:var(--editor-text-muted)
|
|
28822
|
+
`, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{--editor-bg: var(--designer-bg, #f5f5f5);--editor-surface: var(--designer-surface, #ffffff);--editor-surface-alt: var(--designer-surface-alt, #f5f5f5);--editor-border: var(--designer-border, #e0e0e0);--editor-text: var(--designer-text, #333333);--editor-text-muted: var(--designer-text-muted, #666666);--editor-accent: var(--designer-accent, #1976d2);--editor-hover-bg: var(--designer-hover-bg, #eeeeee);display:flex;flex-direction:column;flex:1;width:100%;height:100%;min-height:0;overflow:hidden}.symbol-editor-container{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden;background:var(--editor-bg)}.editor-main{display:flex;flex:1;height:100%;min-height:0;min-width:0;position:relative;overflow:hidden}.editor-canvas{display:flex;flex:1;height:100%;min-width:0;min-height:0;overflow:hidden}mm-process-designer{flex:1;height:100%;min-height:0;min-width:0}.properties-panel{width:300px;display:flex;flex-direction:column;border-left:1px solid var(--editor-border);background:var(--editor-surface)}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--editor-surface-alt);border-bottom:1px solid var(--editor-border);flex-shrink:0}.panel-title{font-size:13px;font-weight:500;color:var(--editor-text)}.panel-close{width:24px;height:24px;border:none;background:transparent;cursor:pointer;font-size:18px;color:var(--editor-text-muted);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0}.panel-close:hover{background:var(--editor-hover-bg);color:var(--editor-accent)}.panel-content{flex:1;overflow-y:auto;min-height:0}mm-transform-property-editor{display:block}.panel-collapsed{width:28px;background:var(--editor-surface-alt);border-left:1px solid var(--editor-border);display:flex;flex-direction:column;align-items:center;padding-top:12px;cursor:pointer;transition:background .15s ease}.panel-collapsed:hover{background:var(--editor-hover-bg)}.collapsed-icon{color:var(--editor-text-muted);margin-bottom:8px}.collapsed-label{writing-mode:vertical-rl;text-orientation:mixed;font-size:11px;font-weight:500;color:var(--editor-text-muted)}mm-simulation-panel{flex-shrink:0}.symbol-editor-container.dockview-enabled .editor-main,.symbol-editor-container.dockview-enabled .editor-canvas{flex:1}\n"] }]
|
|
28791
28823
|
}], propDecorators: { processDesigner: [{
|
|
28792
28824
|
type: ViewChild,
|
|
28793
28825
|
args: [ProcessDesignerComponent]
|
|
@@ -30216,7 +30248,7 @@ class SymbolLibraryAdminComponent {
|
|
|
30216
30248
|
</kendo-dialog>
|
|
30217
30249
|
}
|
|
30218
30250
|
</div>
|
|
30219
|
-
`, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden}.symbol-admin{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden;background:#f5f5f5}.admin-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#fff;border-bottom:1px solid #e0e0e0}.admin-header h2{margin:0;font-size:18px;font-weight:500}.header-actions{display:flex;align-items:center;gap:.75rem}.edit-label{font-size:14px;color:#666;margin-right:.5rem}.admin-content{display:flex;flex:1;overflow:hidden;gap:1px;background:#e0e0e0}.edit-mode-container{display:flex;flex:1;height:100%;min-height:0;overflow:hidden}.edit-settings{width:220px;background:#fff;border-right:1px solid #e0e0e0;overflow-y:auto;flex-shrink:0}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:#f5f5f5;border-bottom:1px solid #e0e0e0;font-size:12px;font-weight:600;color:#333}.settings-close{width:20px;height:20px;background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:0;display:flex;align-items:center;justify-content:center;border-radius:2px}.settings-close:hover{background:#e0e0e0;color:#333}.settings-collapsed{width:28px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;align-items:center;padding:.5rem 0;cursor:pointer;flex-shrink:0;writing-mode:vertical-rl;text-orientation:mixed}.settings-collapsed:hover{background:#f0f0f0}.settings-collapsed .collapsed-icon{font-size:14px;color:#666;margin-bottom:.5rem}.settings-collapsed .collapsed-label{font-size:11px;color:#666;font-weight:500}.settings-section{margin-bottom:1rem;padding:0 .75rem .75rem;border-bottom:1px solid #f0f0f0}.settings-section:first-of-type{padding-top:.75rem}.settings-section:last-child{border-bottom:none;margin-bottom:0}.settings-section h4{margin:0 0 .5rem;font-size:12px;font-weight:600;color:#666
|
|
30251
|
+
`, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden}.symbol-admin{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden;background:#f5f5f5}.admin-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#fff;border-bottom:1px solid #e0e0e0}.admin-header h2{margin:0;font-size:18px;font-weight:500}.header-actions{display:flex;align-items:center;gap:.75rem}.edit-label{font-size:14px;color:#666;margin-right:.5rem}.admin-content{display:flex;flex:1;overflow:hidden;gap:1px;background:#e0e0e0}.edit-mode-container{display:flex;flex:1;height:100%;min-height:0;overflow:hidden}.edit-settings{width:220px;background:#fff;border-right:1px solid #e0e0e0;overflow-y:auto;flex-shrink:0}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:#f5f5f5;border-bottom:1px solid #e0e0e0;font-size:12px;font-weight:600;color:#333}.settings-close{width:20px;height:20px;background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:0;display:flex;align-items:center;justify-content:center;border-radius:2px}.settings-close:hover{background:#e0e0e0;color:#333}.settings-collapsed{width:28px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;align-items:center;padding:.5rem 0;cursor:pointer;flex-shrink:0;writing-mode:vertical-rl;text-orientation:mixed}.settings-collapsed:hover{background:#f0f0f0}.settings-collapsed .collapsed-icon{font-size:14px;color:#666;margin-bottom:.5rem}.settings-collapsed .collapsed-label{font-size:11px;color:#666;font-weight:500}.settings-section{margin-bottom:1rem;padding:0 .75rem .75rem;border-bottom:1px solid #f0f0f0}.settings-section:first-of-type{padding-top:.75rem}.settings-section:last-child{border-bottom:none;margin-bottom:0}.settings-section h4{margin:0 0 .5rem;font-size:12px;font-weight:600;color:#666}.editor-container{flex:1;display:flex;height:100%;min-width:0;min-height:0}.libraries-panel,.symbols-panel,.editor-panel{display:flex;flex-direction:column;background:#fff}.libraries-panel{width:250px}.symbols-panel{width:300px}.editor-panel{flex:1}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem;border-bottom:1px solid #e0e0e0;background:#fafafa}.panel-header h3{margin:0;font-size:14px;font-weight:500}.panel-content{flex:1;overflow-y:auto;padding:.5rem}.loading,.empty-state{padding:2rem 1rem;text-align:center;color:#999;font-size:13px}.library-item{padding:.75rem;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:.5rem;cursor:pointer;transition:all .15s ease}.library-item:hover{border-color:#1976d2;background:#f5f5f5}.library-item.selected{border-color:#1976d2;background:#e3f2fd}.library-name{font-weight:500;margin-bottom:.25rem}.library-info{font-size:11px;color:#666}.symbol-item{display:flex;align-items:center;gap:.75rem;padding:.5rem;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:.5rem;cursor:pointer;transition:all .15s ease}.symbol-item:hover,.symbol-item.selected{border-color:#9c27b0;background:#f3e5f5}.symbol-preview{width:48px;height:48px;background:#fafafa;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.symbol-preview img{max-width:100%;max-height:100%;object-fit:contain}.preview-svg{width:100%;height:100%}.symbol-info{flex:1}.symbol-name{font-weight:500;margin-bottom:.25rem}.symbol-size{font-size:11px;color:#666}.symbol-details{margin-bottom:1rem}.detail-row{display:flex;padding:.5rem 0;border-bottom:1px solid #f0f0f0}.detail-row label{width:100px;color:#666;font-size:12px}.detail-row span{flex:1;font-size:13px}.symbol-preview-large{background:#fafafa;border:1px solid #e0e0e0;border-radius:4px;padding:1rem;display:flex;align-items:center;justify-content:center;min-height:200px}.symbol-preview-large svg{max-width:100%;max-height:300px}.edit-form{display:flex;flex-direction:column;gap:.5rem}.dialog-content{padding:1rem}.form-group{margin-bottom:.75rem}.form-group label{display:block;margin-bottom:.25rem;font-size:12px;font-weight:500;color:#666}.form-group input,.form-group textarea,.form-group select{width:100%;box-sizing:border-box}.form-group textarea{min-height:40px}.form-row{display:flex;gap:.5rem}.form-row .form-group{flex:1}.template-select{padding:.5rem;border:1px solid #e0e0e0;border-radius:4px;font-size:14px}.svg-import-group{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:#f5f5f5;border-radius:4px;margin-top:.5rem}.svg-filename{font-weight:500;color:#1976d2}.svg-info{font-size:12px;color:#666}.svg-scale-group{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:#e3f2fd;border-radius:4px;margin-top:.25rem}.svg-scale-group label{font-weight:500;margin:0}.scale-info{font-size:12px;color:#666;flex:1}.warning-text{color:#d32f2f;font-size:14px;margin-top:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i3$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: i3$1.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: NumericTextBoxModule }, { kind: "ngmodule", type: DialogsModule }, { kind: "component", type: i3.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i3.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: SymbolEditorComponent, selector: "mm-symbol-editor", inputs: ["symbol", "canvasWidth", "canvasHeight", "gridSize", "showPropertyEditorPanel", "useDockview", "symbolSettings"], outputs: ["symbolChange", "saveRequest", "symbolSettingsChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
30220
30252
|
}
|
|
30221
30253
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SymbolLibraryAdminComponent, decorators: [{
|
|
30222
30254
|
type: Component,
|
|
@@ -30713,7 +30745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
30713
30745
|
</kendo-dialog>
|
|
30714
30746
|
}
|
|
30715
30747
|
</div>
|
|
30716
|
-
`, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden}.symbol-admin{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden;background:#f5f5f5}.admin-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#fff;border-bottom:1px solid #e0e0e0}.admin-header h2{margin:0;font-size:18px;font-weight:500}.header-actions{display:flex;align-items:center;gap:.75rem}.edit-label{font-size:14px;color:#666;margin-right:.5rem}.admin-content{display:flex;flex:1;overflow:hidden;gap:1px;background:#e0e0e0}.edit-mode-container{display:flex;flex:1;height:100%;min-height:0;overflow:hidden}.edit-settings{width:220px;background:#fff;border-right:1px solid #e0e0e0;overflow-y:auto;flex-shrink:0}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:#f5f5f5;border-bottom:1px solid #e0e0e0;font-size:12px;font-weight:600;color:#333}.settings-close{width:20px;height:20px;background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:0;display:flex;align-items:center;justify-content:center;border-radius:2px}.settings-close:hover{background:#e0e0e0;color:#333}.settings-collapsed{width:28px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;align-items:center;padding:.5rem 0;cursor:pointer;flex-shrink:0;writing-mode:vertical-rl;text-orientation:mixed}.settings-collapsed:hover{background:#f0f0f0}.settings-collapsed .collapsed-icon{font-size:14px;color:#666;margin-bottom:.5rem}.settings-collapsed .collapsed-label{font-size:11px;color:#666;font-weight:500}.settings-section{margin-bottom:1rem;padding:0 .75rem .75rem;border-bottom:1px solid #f0f0f0}.settings-section:first-of-type{padding-top:.75rem}.settings-section:last-child{border-bottom:none;margin-bottom:0}.settings-section h4{margin:0 0 .5rem;font-size:12px;font-weight:600;color:#666
|
|
30748
|
+
`, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden}.symbol-admin{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden;background:#f5f5f5}.admin-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#fff;border-bottom:1px solid #e0e0e0}.admin-header h2{margin:0;font-size:18px;font-weight:500}.header-actions{display:flex;align-items:center;gap:.75rem}.edit-label{font-size:14px;color:#666;margin-right:.5rem}.admin-content{display:flex;flex:1;overflow:hidden;gap:1px;background:#e0e0e0}.edit-mode-container{display:flex;flex:1;height:100%;min-height:0;overflow:hidden}.edit-settings{width:220px;background:#fff;border-right:1px solid #e0e0e0;overflow-y:auto;flex-shrink:0}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:#f5f5f5;border-bottom:1px solid #e0e0e0;font-size:12px;font-weight:600;color:#333}.settings-close{width:20px;height:20px;background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:0;display:flex;align-items:center;justify-content:center;border-radius:2px}.settings-close:hover{background:#e0e0e0;color:#333}.settings-collapsed{width:28px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;align-items:center;padding:.5rem 0;cursor:pointer;flex-shrink:0;writing-mode:vertical-rl;text-orientation:mixed}.settings-collapsed:hover{background:#f0f0f0}.settings-collapsed .collapsed-icon{font-size:14px;color:#666;margin-bottom:.5rem}.settings-collapsed .collapsed-label{font-size:11px;color:#666;font-weight:500}.settings-section{margin-bottom:1rem;padding:0 .75rem .75rem;border-bottom:1px solid #f0f0f0}.settings-section:first-of-type{padding-top:.75rem}.settings-section:last-child{border-bottom:none;margin-bottom:0}.settings-section h4{margin:0 0 .5rem;font-size:12px;font-weight:600;color:#666}.editor-container{flex:1;display:flex;height:100%;min-width:0;min-height:0}.libraries-panel,.symbols-panel,.editor-panel{display:flex;flex-direction:column;background:#fff}.libraries-panel{width:250px}.symbols-panel{width:300px}.editor-panel{flex:1}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem;border-bottom:1px solid #e0e0e0;background:#fafafa}.panel-header h3{margin:0;font-size:14px;font-weight:500}.panel-content{flex:1;overflow-y:auto;padding:.5rem}.loading,.empty-state{padding:2rem 1rem;text-align:center;color:#999;font-size:13px}.library-item{padding:.75rem;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:.5rem;cursor:pointer;transition:all .15s ease}.library-item:hover{border-color:#1976d2;background:#f5f5f5}.library-item.selected{border-color:#1976d2;background:#e3f2fd}.library-name{font-weight:500;margin-bottom:.25rem}.library-info{font-size:11px;color:#666}.symbol-item{display:flex;align-items:center;gap:.75rem;padding:.5rem;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:.5rem;cursor:pointer;transition:all .15s ease}.symbol-item:hover,.symbol-item.selected{border-color:#9c27b0;background:#f3e5f5}.symbol-preview{width:48px;height:48px;background:#fafafa;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.symbol-preview img{max-width:100%;max-height:100%;object-fit:contain}.preview-svg{width:100%;height:100%}.symbol-info{flex:1}.symbol-name{font-weight:500;margin-bottom:.25rem}.symbol-size{font-size:11px;color:#666}.symbol-details{margin-bottom:1rem}.detail-row{display:flex;padding:.5rem 0;border-bottom:1px solid #f0f0f0}.detail-row label{width:100px;color:#666;font-size:12px}.detail-row span{flex:1;font-size:13px}.symbol-preview-large{background:#fafafa;border:1px solid #e0e0e0;border-radius:4px;padding:1rem;display:flex;align-items:center;justify-content:center;min-height:200px}.symbol-preview-large svg{max-width:100%;max-height:300px}.edit-form{display:flex;flex-direction:column;gap:.5rem}.dialog-content{padding:1rem}.form-group{margin-bottom:.75rem}.form-group label{display:block;margin-bottom:.25rem;font-size:12px;font-weight:500;color:#666}.form-group input,.form-group textarea,.form-group select{width:100%;box-sizing:border-box}.form-group textarea{min-height:40px}.form-row{display:flex;gap:.5rem}.form-row .form-group{flex:1}.template-select{padding:.5rem;border:1px solid #e0e0e0;border-radius:4px;font-size:14px}.svg-import-group{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:#f5f5f5;border-radius:4px;margin-top:.5rem}.svg-filename{font-weight:500;color:#1976d2}.svg-info{font-size:12px;color:#666}.svg-scale-group{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:#e3f2fd;border-radius:4px;margin-top:.25rem}.svg-scale-group label{font-weight:500;margin:0}.scale-info{font-size:12px;color:#666;flex:1}.warning-text{color:#d32f2f;font-size:14px;margin-top:.5rem}\n"] }]
|
|
30717
30749
|
}], propDecorators: { symbolEditor: [{
|
|
30718
30750
|
type: ViewChild,
|
|
30719
30751
|
args: ['symbolEditor']
|
|
@@ -30793,10 +30825,10 @@ class SymbolLibraryListComponent {
|
|
|
30793
30825
|
notificationService = inject(NotificationService);
|
|
30794
30826
|
inputService = inject(InputService);
|
|
30795
30827
|
symbolLibraryService = inject(SymbolLibraryService);
|
|
30796
|
-
plusIcon =
|
|
30797
|
-
editIcon =
|
|
30798
|
-
deleteIcon =
|
|
30799
|
-
viewIcon =
|
|
30828
|
+
plusIcon = MM_ACTION_ICONS.add;
|
|
30829
|
+
editIcon = MM_ACTION_ICONS.edit;
|
|
30830
|
+
deleteIcon = MM_ACTION_ICONS.delete;
|
|
30831
|
+
viewIcon = MM_ACTION_ICONS.view;
|
|
30800
30832
|
dataSource;
|
|
30801
30833
|
onRowClick(event) {
|
|
30802
30834
|
const library = event;
|
|
@@ -30865,10 +30897,19 @@ class SymbolLibraryListComponent {
|
|
|
30865
30897
|
});
|
|
30866
30898
|
return;
|
|
30867
30899
|
}
|
|
30868
|
-
const
|
|
30869
|
-
|
|
30870
|
-
|
|
30871
|
-
|
|
30900
|
+
const single = itemsToDelete.length === 1;
|
|
30901
|
+
const targetName = single
|
|
30902
|
+
? (itemsToDelete[0].name || itemsToDelete[0].rtId)
|
|
30903
|
+
: `${itemsToDelete.length} symbol libraries`;
|
|
30904
|
+
// AB#5580: danger confirmation naming the target (Studio action guideline §2.4).
|
|
30905
|
+
const confirmed = await this.confirmationService.showDangerConfirm({
|
|
30906
|
+
title: single ? `Delete symbol library ${targetName}?` : `Delete ${targetName}?`,
|
|
30907
|
+
targetName,
|
|
30908
|
+
consequence: single
|
|
30909
|
+
? 'The library and all its symbols are deleted. Diagrams using them lose these symbols. This cannot be undone.'
|
|
30910
|
+
: 'The libraries and all their symbols are deleted. Diagrams using them lose these symbols. This cannot be undone.',
|
|
30911
|
+
confirmText: single ? 'Delete symbol library' : 'Delete symbol libraries',
|
|
30912
|
+
});
|
|
30872
30913
|
if (confirmed) {
|
|
30873
30914
|
try {
|
|
30874
30915
|
// TODO: Implement delete via SymbolLibraryService
|
|
@@ -30893,14 +30934,14 @@ class SymbolLibraryListComponent {
|
|
|
30893
30934
|
}
|
|
30894
30935
|
};
|
|
30895
30936
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SymbolLibraryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
30896
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: SymbolLibraryListComponent, isStandalone: true, selector: "mm-symbol-library-list", viewQueries: [{ propertyName: "dataSource", first: true, predicate: ["dir"], descendants: true }], ngImport: i0, template: "<div class=\"symbol-library-list-container\">\n <mm-list-view\n mmSymbolLibraryDataSource\n #dir=\"mmSymbolLibraryDataSource\"\n [sortable]=\"true\"\n [searchTextBoxEnabled]=\"true\"\n [selectable]=\"{mode: 'multiple', enabled: true}\"\n [pageable]=\"{buttonCount: 3, pageSizes: [10, 20, 50, 100]}\"\n [pageSize]=\"20\"\n [columns]=\"[\n {field: 'name', displayName: 'Name', dataType: 'text'},\n {field: 'description', displayName: 'Description', dataType: 'text'},\n {field: 'symbolCount', displayName: 'Symbols', dataType: 'numeric'},\n {field: 'isReadOnly', displayName: 'Read Only', dataType: 'boolean'}\n ]\"\n [actionCommandItems]=\"[\n {id: 'view', type:'link', text: 'View Symbols', svgIcon: viewIcon, onClick: onViewClick}\n ]\"\n [leftToolbarActions]=\"[\n {id: 'new', type:'link', text: 'New Library', svgIcon: plusIcon, onClick: onNewLibrary}\n ]\"\n [contextMenuCommandItems]=\"[\n {id: 'delete', type:'link', text: 'Delete', onClick: onDeleteClick, svgIcon: deleteIcon}\n ]\"\n (rowClicked)=\"onRowClick($event)\">\n </mm-list-view>\n</div>\n", styles: [".symbol-library-list-container{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}\n"], dependencies: [{ kind: "directive", type: SymbolLibraryDataSourceDirective, selector: "[mmSymbolLibraryDataSource]", exportAs: ["mmSymbolLibraryDataSource"] }, { kind: "component", type: ListViewComponent, selector: "mm-list-view", inputs: ["pageSize", "skip", "autoPageSize", "rowIsClickable", "showRowCheckBoxes", "showRowSelectAllCheckBox", "contextMenuType", "leftToolbarActions", "rightToolbarActions", "actionCommandItems", "contextMenuCommandItems", "excelExportFileName", "pdfExportFileName", "pageable", "sortable", "rowFilterEnabled", "searchTextBoxEnabled", "persistListState", "listStateKey", "resizable", "actionsColumnWidth", "hideCheckboxesBelow", "cardModeBelow", "collapseCommandsBelow", "rowClass", "messages", "selectable", "columns"], outputs: ["rowClicked", "resetFilters"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
30937
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: SymbolLibraryListComponent, isStandalone: true, selector: "mm-symbol-library-list", viewQueries: [{ propertyName: "dataSource", first: true, predicate: ["dir"], descendants: true }], ngImport: i0, template: "<div class=\"symbol-library-list-container\">\n <mm-list-view\n mmSymbolLibraryDataSource\n #dir=\"mmSymbolLibraryDataSource\"\n [sortable]=\"true\"\n [searchTextBoxEnabled]=\"true\"\n [emptyState]=\"{title: 'No symbol libraries yet', text: 'Create your first library with New Library.'}\"\n [selectable]=\"{mode: 'multiple', enabled: true}\"\n [pageable]=\"{buttonCount: 3, pageSizes: [10, 20, 50, 100]}\"\n [pageSize]=\"20\"\n [columns]=\"[\n {field: 'name', displayName: 'Name', dataType: 'text'},\n {field: 'description', displayName: 'Description', dataType: 'text'},\n {field: 'symbolCount', displayName: 'Symbols', dataType: 'numeric'},\n {field: 'isReadOnly', displayName: 'Read Only', dataType: 'boolean'}\n ]\"\n [actionCommandItems]=\"[\n {id: 'view', type:'link', text: 'View Symbols', svgIcon: viewIcon, onClick: onViewClick}\n ]\"\n [leftToolbarActions]=\"[\n {id: 'new', type:'link', text: 'New Library', svgIcon: plusIcon, onClick: onNewLibrary}\n ]\"\n [contextMenuCommandItems]=\"[\n {id: 'delete', type:'link', text: 'Delete', danger: true, onClick: onDeleteClick, svgIcon: deleteIcon}\n ]\"\n (rowClicked)=\"onRowClick($event)\">\n </mm-list-view>\n</div>\n", styles: [".symbol-library-list-container{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}\n"], dependencies: [{ kind: "directive", type: SymbolLibraryDataSourceDirective, selector: "[mmSymbolLibraryDataSource]", exportAs: ["mmSymbolLibraryDataSource"] }, { kind: "component", type: ListViewComponent, selector: "mm-list-view", inputs: ["pageSize", "skip", "autoPageSize", "rowIsClickable", "showRowCheckBoxes", "showRowSelectAllCheckBox", "contextMenuType", "leftToolbarActions", "rightToolbarActions", "actionCommandItems", "contextMenuCommandItems", "rowActions", "maxInlineRowActions", "excelExportFileName", "pdfExportFileName", "pageable", "sortable", "rowFilterEnabled", "searchTextBoxEnabled", "persistListState", "listStateKey", "resizable", "actionsColumnWidth", "hideCheckboxesBelow", "cardModeBelow", "collapseCommandsBelow", "hasExternalFilters", "emptyState", "emptyTemplate", "rowClass", "messages", "selectable", "columns", "rowLabelField"], outputs: ["rowClicked", "rowAction", "resetFilters"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
30897
30938
|
}
|
|
30898
30939
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SymbolLibraryListComponent, decorators: [{
|
|
30899
30940
|
type: Component,
|
|
30900
30941
|
args: [{ selector: 'mm-symbol-library-list', standalone: true, imports: [
|
|
30901
30942
|
SymbolLibraryDataSourceDirective,
|
|
30902
30943
|
ListViewComponent
|
|
30903
|
-
], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"symbol-library-list-container\">\n <mm-list-view\n mmSymbolLibraryDataSource\n #dir=\"mmSymbolLibraryDataSource\"\n [sortable]=\"true\"\n [searchTextBoxEnabled]=\"true\"\n [selectable]=\"{mode: 'multiple', enabled: true}\"\n [pageable]=\"{buttonCount: 3, pageSizes: [10, 20, 50, 100]}\"\n [pageSize]=\"20\"\n [columns]=\"[\n {field: 'name', displayName: 'Name', dataType: 'text'},\n {field: 'description', displayName: 'Description', dataType: 'text'},\n {field: 'symbolCount', displayName: 'Symbols', dataType: 'numeric'},\n {field: 'isReadOnly', displayName: 'Read Only', dataType: 'boolean'}\n ]\"\n [actionCommandItems]=\"[\n {id: 'view', type:'link', text: 'View Symbols', svgIcon: viewIcon, onClick: onViewClick}\n ]\"\n [leftToolbarActions]=\"[\n {id: 'new', type:'link', text: 'New Library', svgIcon: plusIcon, onClick: onNewLibrary}\n ]\"\n [contextMenuCommandItems]=\"[\n {id: 'delete', type:'link', text: 'Delete', onClick: onDeleteClick, svgIcon: deleteIcon}\n ]\"\n (rowClicked)=\"onRowClick($event)\">\n </mm-list-view>\n</div>\n", styles: [".symbol-library-list-container{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}\n"] }]
|
|
30944
|
+
], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"symbol-library-list-container\">\n <mm-list-view\n mmSymbolLibraryDataSource\n #dir=\"mmSymbolLibraryDataSource\"\n [sortable]=\"true\"\n [searchTextBoxEnabled]=\"true\"\n [emptyState]=\"{title: 'No symbol libraries yet', text: 'Create your first library with New Library.'}\"\n [selectable]=\"{mode: 'multiple', enabled: true}\"\n [pageable]=\"{buttonCount: 3, pageSizes: [10, 20, 50, 100]}\"\n [pageSize]=\"20\"\n [columns]=\"[\n {field: 'name', displayName: 'Name', dataType: 'text'},\n {field: 'description', displayName: 'Description', dataType: 'text'},\n {field: 'symbolCount', displayName: 'Symbols', dataType: 'numeric'},\n {field: 'isReadOnly', displayName: 'Read Only', dataType: 'boolean'}\n ]\"\n [actionCommandItems]=\"[\n {id: 'view', type:'link', text: 'View Symbols', svgIcon: viewIcon, onClick: onViewClick}\n ]\"\n [leftToolbarActions]=\"[\n {id: 'new', type:'link', text: 'New Library', svgIcon: plusIcon, onClick: onNewLibrary}\n ]\"\n [contextMenuCommandItems]=\"[\n {id: 'delete', type:'link', text: 'Delete', danger: true, onClick: onDeleteClick, svgIcon: deleteIcon}\n ]\"\n (rowClicked)=\"onRowClick($event)\">\n </mm-list-view>\n</div>\n", styles: [".symbol-library-list-container{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}\n"] }]
|
|
30904
30945
|
}], propDecorators: { dataSource: [{
|
|
30905
30946
|
type: ViewChild,
|
|
30906
30947
|
args: ['dir', { static: false }]
|
|
@@ -30927,11 +30968,11 @@ class SymbolLibraryDetailComponent {
|
|
|
30927
30968
|
notificationService = inject(NotificationService);
|
|
30928
30969
|
symbolLibraryService = inject(SymbolLibraryService);
|
|
30929
30970
|
svgImportService = inject(SvgImportService);
|
|
30930
|
-
plusIcon =
|
|
30931
|
-
editIcon =
|
|
30932
|
-
deleteIcon =
|
|
30971
|
+
plusIcon = MM_ACTION_ICONS.add;
|
|
30972
|
+
editIcon = MM_ACTION_ICONS.edit;
|
|
30973
|
+
deleteIcon = MM_ACTION_ICONS.delete;
|
|
30933
30974
|
backIcon = arrowLeftIcon;
|
|
30934
|
-
uploadIcon =
|
|
30975
|
+
uploadIcon = MM_ACTION_ICONS.import;
|
|
30935
30976
|
library = signal(null, /* @ts-ignore */
|
|
30936
30977
|
...(ngDevMode ? [{ debugName: "library" }] : /* istanbul ignore next */ []));
|
|
30937
30978
|
isLoading = signal(true, /* @ts-ignore */
|
|
@@ -31318,8 +31359,40 @@ class SymbolLibraryDetailComponent {
|
|
|
31318
31359
|
}
|
|
31319
31360
|
};
|
|
31320
31361
|
}
|
|
31362
|
+
/** Row actions of a symbol card (AB#5580): Edit, Delete (danger; disabled with reason in read-only libraries). */
|
|
31363
|
+
symbolActions = computed(() => {
|
|
31364
|
+
const readOnly = !!this.library()?.isReadOnly;
|
|
31365
|
+
return [
|
|
31366
|
+
{ id: 'edit', label: 'Edit symbol', icon: this.editIcon },
|
|
31367
|
+
{
|
|
31368
|
+
id: 'delete',
|
|
31369
|
+
label: 'Delete symbol',
|
|
31370
|
+
icon: this.deleteIcon,
|
|
31371
|
+
danger: true,
|
|
31372
|
+
disabledReason: readOnly ? 'The library is read-only' : null,
|
|
31373
|
+
},
|
|
31374
|
+
];
|
|
31375
|
+
}, /* @ts-ignore */
|
|
31376
|
+
...(ngDevMode ? [{ debugName: "symbolActions" }] : /* istanbul ignore next */ []));
|
|
31377
|
+
onSymbolAction(id, symbol) {
|
|
31378
|
+
if (id === 'edit') {
|
|
31379
|
+
this.editSymbol(symbol);
|
|
31380
|
+
}
|
|
31381
|
+
else {
|
|
31382
|
+
void this.deleteSymbol(symbol);
|
|
31383
|
+
}
|
|
31384
|
+
}
|
|
31321
31385
|
async deleteSymbol(symbol) {
|
|
31322
|
-
|
|
31386
|
+
if (this.library()?.isReadOnly) {
|
|
31387
|
+
return;
|
|
31388
|
+
}
|
|
31389
|
+
// AB#5580: danger confirmation naming the symbol.
|
|
31390
|
+
const confirmed = await this.confirmationService.showDangerConfirm({
|
|
31391
|
+
title: `Delete symbol ${symbol.name}?`,
|
|
31392
|
+
targetName: symbol.name,
|
|
31393
|
+
consequence: 'The symbol is removed from the library. Diagrams using it can no longer render it. This cannot be undone.',
|
|
31394
|
+
confirmText: 'Delete symbol',
|
|
31395
|
+
});
|
|
31323
31396
|
if (confirmed) {
|
|
31324
31397
|
try {
|
|
31325
31398
|
const success = await this.symbolLibraryService.deleteSymbol(symbol);
|
|
@@ -31439,7 +31512,7 @@ class SymbolLibraryDetailComponent {
|
|
|
31439
31512
|
return style.stroke?.opacity ?? defaultOpacity;
|
|
31440
31513
|
}
|
|
31441
31514
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SymbolLibraryDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
31442
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SymbolLibraryDetailComponent, isStandalone: true, selector: "mm-symbol-library-detail", viewQueries: [{ propertyName: "svgFileInputRef", first: true, predicate: ["svgFileInput"], descendants: true }], ngImport: i0, template: "<div class=\"symbol-library-detail-container\">\n @if (isLoading()) {\n <div class=\"loading-container\">\n <div class=\"loading-spinner\"></div>\n <span>Loading library...</span>\n </div>\n } @else if (library()) {\n <!-- Header -->\n <div class=\"detail-header\">\n <div class=\"header-left\">\n <button kendoButton\n [svgIcon]=\"backIcon\"\n fillMode=\"flat\"\n title=\"Back to library list\"\n (click)=\"navigateBack()\">\n </button>\n <h2 class=\"library-title\">{{ libraryName() }}</h2>\n @if (library()?.isReadOnly) {\n <span class=\"readonly-badge\">Read Only</span>\n }\n </div>\n <div class=\"header-right\">\n <button kendoButton\n [svgIcon]=\"uploadIcon\"\n fillMode=\"outline\"\n title=\"Import SVG\"\n (click)=\"showSvgImportDialogFn()\"\n [disabled]=\"!!library()?.isReadOnly\">\n </button>\n <button kendoButton\n [svgIcon]=\"plusIcon\"\n themeColor=\"primary\"\n title=\"New Symbol\"\n (click)=\"showCreateSymbolDialog()\"\n [disabled]=\"!!library()?.isReadOnly\">\n </button>\n </div>\n </div>\n\n <!-- Symbols Grid -->\n <div class=\"symbols-grid\">\n @for (symbol of symbols(); track symbol.rtId) {\n <div class=\"symbol-card\"\n [class.selected]=\"selectedSymbol()?.rtId === symbol.rtId\"\n (click)=\"selectSymbol(symbol)\">\n <div class=\"symbol-preview\">\n <svg [attr.viewBox]=\"'0 0 ' + symbol.bounds.width + ' ' + symbol.bounds.height\" preserveAspectRatio=\"xMidYMid meet\">\n @for (primitive of symbol.primitives; track primitive.id) {\n @switch (primitive.type) {\n @case ('rectangle') {\n <rect\n [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config?.width\"\n [attr.height]=\"$any(primitive).config?.height\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n [attr.rx]=\"$any(primitive).config?.cornerRadius || 0\"\n [attr.ry]=\"$any(primitive).config?.cornerRadius || 0\"\n />\n }\n @case ('ellipse') {\n <ellipse\n [attr.cx]=\"primitive.position.x + ($any(primitive).config?.radiusX || 0)\"\n [attr.cy]=\"primitive.position.y + ($any(primitive).config?.radiusY || 0)\"\n [attr.rx]=\"$any(primitive).config?.radiusX\"\n [attr.ry]=\"$any(primitive).config?.radiusY\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('line') {\n <line\n [attr.x1]=\"$any(primitive).config?.start?.x\"\n [attr.y1]=\"$any(primitive).config?.start?.y\"\n [attr.x2]=\"$any(primitive).config?.end?.x\"\n [attr.y2]=\"$any(primitive).config?.end?.y\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('path') {\n <path\n [attr.d]=\"$any(primitive).config?.d\"\n [attr.transform]=\"'translate(' + primitive.position.x + ',' + primitive.position.y + ')'\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, 'none')\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('text') {\n <text\n [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, '#333333')\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.font-size]=\"$any(primitive).config?.fontSize || 12\"\n [attr.font-family]=\"$any(primitive).config?.fontFamily || 'sans-serif'\"\n >{{ $any(primitive).config?.text }}</text>\n }\n @case ('polyline') {\n <polyline\n [attr.points]=\"getPointsWithOffset(primitive)\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, 'none')\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('polygon') {\n <polygon\n [attr.points]=\"getPointsWithOffset(primitive)\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n }\n }\n </svg>\n </div>\n <div class=\"symbol-info\">\n <span class=\"symbol-name\">{{ symbol.name }}</span>\n <div class=\"symbol-actions\">\n <button kendoButton [svgIcon]=\"editIcon\" fillMode=\"flat\" size=\"small\" (click)=\"editSymbol(symbol); $event.stopPropagation()\">\n </button>\n <button kendoButton [svgIcon]=\"deleteIcon\" fillMode=\"flat\" size=\"small\"\n [disabled]=\"!!library()?.isReadOnly\"\n (click)=\"deleteSymbol(symbol); $event.stopPropagation()\">\n </button>\n </div>\n </div>\n </div>\n } @empty {\n <div class=\"no-symbols\">\n <p>No symbols in this library</p>\n <button kendoButton [svgIcon]=\"plusIcon\" themeColor=\"primary\" (click)=\"showCreateSymbolDialog()\" [disabled]=\"!!library()?.isReadOnly\">\n Create First Symbol\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"error-container\">\n <p>Library not found</p>\n <button kendoButton (click)=\"navigateBack()\">Go Back</button>\n </div>\n }\n</div>\n\n<!-- Create Symbol Dialog -->\n@if (showSymbolDialog()) {\n <kendo-dialog title=\"Create Symbol\" (close)=\"closeSymbolDialog()\" [width]=\"450\">\n <div class=\"dialog-content\">\n <div class=\"form-group\">\n <label>Name *</label>\n <input kendoTextBox [(ngModel)]=\"newSymbol.name\" placeholder=\"Symbol name\"/>\n </div>\n <div class=\"form-group\">\n <label>Description</label>\n <textarea kendoTextArea [(ngModel)]=\"newSymbol.description\" placeholder=\"Optional description\" rows=\"2\"></textarea>\n </div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Width</label>\n <kendo-numerictextbox [(ngModel)]=\"newSymbol.width\" [min]=\"10\" [max]=\"2000\" [step]=\"10\" [format]=\"'n0'\"></kendo-numerictextbox>\n </div>\n <div class=\"form-group\">\n <label>Height</label>\n <kendo-numerictextbox [(ngModel)]=\"newSymbol.height\" [min]=\"10\" [max]=\"2000\" [step]=\"10\" [format]=\"'n0'\"></kendo-numerictextbox>\n </div>\n </div>\n <div class=\"form-group\">\n <label>Category</label>\n <input kendoTextBox [(ngModel)]=\"newSymbol.category\" placeholder=\"e.g., Basic, Flow, Equipment\"/>\n </div>\n </div>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closeSymbolDialog()\">Cancel</button>\n <button kendoButton themeColor=\"primary\" (click)=\"createSymbol()\" [disabled]=\"!newSymbol.name\">\n Create\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n\n<!-- Import SVG Dialog -->\n@if (showSvgImportDialog()) {\n <kendo-dialog title=\"Import Symbol from SVG\" (close)=\"closeSvgImportDialog()\" [width]=\"500\">\n <div class=\"dialog-content\">\n <!-- Hidden file input -->\n <input #svgFileInput\n type=\"file\"\n accept=\".svg,image/svg+xml\"\n style=\"display: none\"\n (change)=\"onSvgFileSelected($event)\"/>\n\n <!-- File Selection -->\n <div class=\"form-group svg-file-group\">\n <button kendoButton (click)=\"svgFileInputRef.nativeElement.click()\">\n {{ svgImport.svgFileName ? 'Change SVG file...' : 'Select SVG file...' }}\n </button>\n @if (svgImport.svgFileName) {\n <div class=\"svg-file-info\">\n <span class=\"svg-filename\">{{ svgImport.svgFileName }}</span>\n <span class=\"svg-stats\">\n {{ svgImport.svgPrimitives?.length || 0 }} elements\n @if (svgImport.styleClasses && svgImport.styleClasses.length > 0) {\n , {{ svgImport.styleClasses.length }} style(s)\n }\n </span>\n </div>\n }\n </div>\n\n @if (svgImport.svgPrimitives) {\n <!-- Scale Control -->\n <div class=\"form-group svg-scale-group\">\n <label>Scale:</label>\n <kendo-numerictextbox\n [(ngModel)]=\"svgImport.svgScale\"\n [min]=\"0.1\"\n [max]=\"10\"\n [step]=\"0.1\"\n [decimals]=\"1\"\n [format]=\"'n1'\"\n (valueChange)=\"onSvgScaleChange($event)\"\n style=\"width: 100px\">\n </kendo-numerictextbox>\n <span class=\"scale-info\">\n Original: {{ svgImport.svgOriginalWidth }}\u00D7{{ svgImport.svgOriginalHeight }}px\n \u2192 {{ svgImport.width }}\u00D7{{ svgImport.height }}px\n </span>\n <button kendoButton look=\"flat\" (click)=\"resetSvgScale()\" title=\"Reset to 1x\">\n Reset\n </button>\n </div>\n\n <!-- Symbol Properties -->\n <div class=\"form-group\">\n <label>Name *</label>\n <input kendoTextBox [(ngModel)]=\"svgImport.name\" placeholder=\"Symbol name\"/>\n </div>\n <div class=\"form-group\">\n <label>Description</label>\n <textarea kendoTextArea [(ngModel)]=\"svgImport.description\" placeholder=\"Optional description\" rows=\"2\"></textarea>\n </div>\n <div class=\"form-group\">\n <label>Category</label>\n <input kendoTextBox [(ngModel)]=\"svgImport.category\" placeholder=\"e.g., Basic, Flow, Equipment\"/>\n </div>\n }\n </div>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closeSvgImportDialog()\">Cancel</button>\n <button kendoButton themeColor=\"primary\"\n (click)=\"createSymbolFromSvg()\"\n [disabled]=\"!svgImport.name || !svgImport.svgPrimitives?.length\">\n Import\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n", styles: [":host{--card-bg: var(--symbol-card-bg, #1a2332);--card-border: var(--symbol-card-border, rgba(100, 206, 185, .3));--card-hover-border: var(--symbol-card-hover-border, #64ceb9);--card-preview-bg: var(--symbol-card-preview-bg, #394555);--card-info-border: var(--symbol-card-info-border, rgba(100, 206, 185, .2));--text-primary: var(--symbol-text-primary, #e0e0e0);--text-secondary: var(--symbol-text-secondary, #999);--accent-color: var(--symbol-accent-color, #64ceb9)}.symbol-library-detail-container{display:flex;flex-direction:column;height:100%;padding:12px 16px;gap:12px}.loading-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:16px}.loading-spinner{width:40px;height:40px;border:3px solid var(--card-border);border-top-color:var(--accent-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.detail-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--card-border)}.header-left{display:flex;align-items:center;gap:8px}.library-title{margin:0;font-size:1.25rem;font-weight:500;color:var(--text-primary)}.readonly-badge{padding:4px 8px;font-size:.75rem;background:var(--card-preview-bg);border:1px solid var(--card-border);border-radius:4px;color:var(--text-secondary)}.symbols-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;flex:1;overflow-y:auto;padding:4px;align-content:start}.symbol-card{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--card-border);border-radius:8px;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s}.symbol-card:hover{border-color:var(--card-hover-border);box-shadow:0 2px 8px #0000004d}.symbol-card.selected{border-color:var(--accent-color);box-shadow:0 0 0 2px #64ceb94d}.symbol-preview{display:flex;align-items:center;justify-content:center;height:120px;padding:12px;background:var(--card-preview-bg)}.symbol-preview svg{width:100%;height:100%;max-width:120px;max-height:100px}.symbol-info{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--card-info-border)}.symbol-name{font-size:.875rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}.symbol-actions{display:flex;gap:4px}.no-symbols{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;gap:16px;color:var(--text-secondary)}.header-right{display:flex;gap:4px}.dialog-content{padding:16px 0}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:#333}.form-group input,.form-group textarea,.form-group kendo-numerictextbox{width:100%}.form-row{display:flex;gap:16px}.form-row .form-group{flex:1}.svg-file-group{display:flex;flex-direction:column;gap:8px;padding:16px;background:#f5f5f5;border-radius:6px;margin-bottom:16px}.svg-file-info{display:flex;flex-direction:column;gap:4px}.svg-filename{font-weight:500;color:#1976d2}.svg-stats{font-size:12px;color:#666}.svg-scale-group{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#e3f2fd;border-radius:6px;margin-bottom:16px}.svg-scale-group label{font-weight:500;margin:0;white-space:nowrap}.svg-scale-group kendo-numerictextbox{width:100px}.svg-scale-group .scale-info{flex:1;font-size:12px;color:#666}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i3$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: i3$1.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: NumericTextBoxModule }, { kind: "ngmodule", type: DialogsModule }, { kind: "component", type: i3.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i3.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
31515
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SymbolLibraryDetailComponent, isStandalone: true, selector: "mm-symbol-library-detail", viewQueries: [{ propertyName: "svgFileInputRef", first: true, predicate: ["svgFileInput"], descendants: true }], ngImport: i0, template: "<div class=\"symbol-library-detail-container\">\n @if (isLoading()) {\n <div class=\"loading-container\">\n <div class=\"loading-spinner\"></div>\n <span>Loading library...</span>\n </div>\n } @else if (library()) {\n <!-- Header -->\n <div class=\"detail-header\">\n <div class=\"header-left\">\n <button kendoButton\n [svgIcon]=\"backIcon\"\n fillMode=\"flat\"\n title=\"Back to library list\"\n aria-label=\"Back to library list\"\n (click)=\"navigateBack()\">\n </button>\n <h2 class=\"library-title\">{{ libraryName() }}</h2>\n @if (library()?.isReadOnly) {\n <span class=\"readonly-badge\">Read Only</span>\n }\n </div>\n <div class=\"header-right\">\n <button kendoButton\n [svgIcon]=\"uploadIcon\"\n fillMode=\"outline\"\n title=\"Import SVG\"\n aria-label=\"Import SVG\"\n (click)=\"showSvgImportDialogFn()\"\n [disabled]=\"!!library()?.isReadOnly\">\n </button>\n <button kendoButton\n [svgIcon]=\"plusIcon\"\n themeColor=\"primary\"\n title=\"New Symbol\"\n aria-label=\"New Symbol\"\n (click)=\"showCreateSymbolDialog()\"\n [disabled]=\"!!library()?.isReadOnly\">\n </button>\n </div>\n </div>\n\n <!-- Symbols Grid -->\n <div class=\"symbols-grid\">\n @for (symbol of symbols(); track symbol.rtId) {\n <div class=\"symbol-card\"\n [class.selected]=\"selectedSymbol()?.rtId === symbol.rtId\"\n (click)=\"selectSymbol(symbol)\">\n <div class=\"symbol-preview\">\n <svg [attr.viewBox]=\"'0 0 ' + symbol.bounds.width + ' ' + symbol.bounds.height\" preserveAspectRatio=\"xMidYMid meet\">\n @for (primitive of symbol.primitives; track primitive.id) {\n @switch (primitive.type) {\n @case ('rectangle') {\n <rect\n [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config?.width\"\n [attr.height]=\"$any(primitive).config?.height\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n [attr.rx]=\"$any(primitive).config?.cornerRadius || 0\"\n [attr.ry]=\"$any(primitive).config?.cornerRadius || 0\"\n />\n }\n @case ('ellipse') {\n <ellipse\n [attr.cx]=\"primitive.position.x + ($any(primitive).config?.radiusX || 0)\"\n [attr.cy]=\"primitive.position.y + ($any(primitive).config?.radiusY || 0)\"\n [attr.rx]=\"$any(primitive).config?.radiusX\"\n [attr.ry]=\"$any(primitive).config?.radiusY\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('line') {\n <line\n [attr.x1]=\"$any(primitive).config?.start?.x\"\n [attr.y1]=\"$any(primitive).config?.start?.y\"\n [attr.x2]=\"$any(primitive).config?.end?.x\"\n [attr.y2]=\"$any(primitive).config?.end?.y\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('path') {\n <path\n [attr.d]=\"$any(primitive).config?.d\"\n [attr.transform]=\"'translate(' + primitive.position.x + ',' + primitive.position.y + ')'\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, 'none')\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('text') {\n <text\n [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, '#333333')\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.font-size]=\"$any(primitive).config?.fontSize || 12\"\n [attr.font-family]=\"$any(primitive).config?.fontFamily || 'sans-serif'\"\n >{{ $any(primitive).config?.text }}</text>\n }\n @case ('polyline') {\n <polyline\n [attr.points]=\"getPointsWithOffset(primitive)\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, 'none')\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('polygon') {\n <polygon\n [attr.points]=\"getPointsWithOffset(primitive)\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n }\n }\n </svg>\n </div>\n <div class=\"symbol-info\">\n <span class=\"symbol-name\">{{ symbol.name }}</span>\n <!-- AB#5580: shared row actions (icon buttons with tooltip + accessible name, danger delete) -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div class=\"symbol-actions\" (click)=\"$event.stopPropagation()\">\n <mm-row-actions [actions]=\"symbolActions()\" [rowLabel]=\"symbol.name\" (triggered)=\"onSymbolAction($event.id, symbol)\" />\n </div>\n </div>\n </div>\n } @empty {\n <div class=\"no-symbols\">\n <p>No symbols in this library</p>\n <button kendoButton [svgIcon]=\"plusIcon\" themeColor=\"primary\" (click)=\"showCreateSymbolDialog()\" [disabled]=\"!!library()?.isReadOnly\">\n Create First Symbol\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"error-container\">\n <p>Library not found</p>\n <button kendoButton (click)=\"navigateBack()\">Go Back</button>\n </div>\n }\n</div>\n\n<!-- Create Symbol Dialog -->\n@if (showSymbolDialog()) {\n <kendo-dialog title=\"Create Symbol\" (close)=\"closeSymbolDialog()\" [width]=\"450\">\n <div class=\"dialog-content\">\n <div class=\"form-group\">\n <label>Name *</label>\n <input kendoTextBox [(ngModel)]=\"newSymbol.name\" placeholder=\"Symbol name\"/>\n </div>\n <div class=\"form-group\">\n <label>Description</label>\n <textarea kendoTextArea [(ngModel)]=\"newSymbol.description\" placeholder=\"Optional description\" rows=\"2\"></textarea>\n </div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Width</label>\n <kendo-numerictextbox [(ngModel)]=\"newSymbol.width\" [min]=\"10\" [max]=\"2000\" [step]=\"10\" [format]=\"'n0'\"></kendo-numerictextbox>\n </div>\n <div class=\"form-group\">\n <label>Height</label>\n <kendo-numerictextbox [(ngModel)]=\"newSymbol.height\" [min]=\"10\" [max]=\"2000\" [step]=\"10\" [format]=\"'n0'\"></kendo-numerictextbox>\n </div>\n </div>\n <div class=\"form-group\">\n <label>Category</label>\n <input kendoTextBox [(ngModel)]=\"newSymbol.category\" placeholder=\"e.g., Basic, Flow, Equipment\"/>\n </div>\n </div>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closeSymbolDialog()\">Cancel</button>\n <button kendoButton themeColor=\"primary\" (click)=\"createSymbol()\" [disabled]=\"!newSymbol.name\">\n Create\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n\n<!-- Import SVG Dialog -->\n@if (showSvgImportDialog()) {\n <kendo-dialog title=\"Import Symbol from SVG\" (close)=\"closeSvgImportDialog()\" [width]=\"500\">\n <div class=\"dialog-content\">\n <!-- Hidden file input -->\n <input #svgFileInput\n type=\"file\"\n accept=\".svg,image/svg+xml\"\n style=\"display: none\"\n (change)=\"onSvgFileSelected($event)\"/>\n\n <!-- File Selection -->\n <div class=\"form-group svg-file-group\">\n <button kendoButton (click)=\"svgFileInputRef.nativeElement.click()\">\n {{ svgImport.svgFileName ? 'Change SVG file...' : 'Select SVG file...' }}\n </button>\n @if (svgImport.svgFileName) {\n <div class=\"svg-file-info\">\n <span class=\"svg-filename\">{{ svgImport.svgFileName }}</span>\n <span class=\"svg-stats\">\n {{ svgImport.svgPrimitives?.length || 0 }} elements\n @if (svgImport.styleClasses && svgImport.styleClasses.length > 0) {\n , {{ svgImport.styleClasses.length }} style(s)\n }\n </span>\n </div>\n }\n </div>\n\n @if (svgImport.svgPrimitives) {\n <!-- Scale Control -->\n <div class=\"form-group svg-scale-group\">\n <label>Scale:</label>\n <kendo-numerictextbox\n [(ngModel)]=\"svgImport.svgScale\"\n [min]=\"0.1\"\n [max]=\"10\"\n [step]=\"0.1\"\n [decimals]=\"1\"\n [format]=\"'n1'\"\n (valueChange)=\"onSvgScaleChange($event)\"\n style=\"width: 100px\">\n </kendo-numerictextbox>\n <span class=\"scale-info\">\n Original: {{ svgImport.svgOriginalWidth }}\u00D7{{ svgImport.svgOriginalHeight }}px\n \u2192 {{ svgImport.width }}\u00D7{{ svgImport.height }}px\n </span>\n <button kendoButton look=\"flat\" (click)=\"resetSvgScale()\" title=\"Reset to 1x\">\n Reset\n </button>\n </div>\n\n <!-- Symbol Properties -->\n <div class=\"form-group\">\n <label>Name *</label>\n <input kendoTextBox [(ngModel)]=\"svgImport.name\" placeholder=\"Symbol name\"/>\n </div>\n <div class=\"form-group\">\n <label>Description</label>\n <textarea kendoTextArea [(ngModel)]=\"svgImport.description\" placeholder=\"Optional description\" rows=\"2\"></textarea>\n </div>\n <div class=\"form-group\">\n <label>Category</label>\n <input kendoTextBox [(ngModel)]=\"svgImport.category\" placeholder=\"e.g., Basic, Flow, Equipment\"/>\n </div>\n }\n </div>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closeSvgImportDialog()\">Cancel</button>\n <button kendoButton themeColor=\"primary\"\n (click)=\"createSymbolFromSvg()\"\n [disabled]=\"!svgImport.name || !svgImport.svgPrimitives?.length\">\n Import\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n", styles: [":host{--card-bg: var(--symbol-card-bg, #1a2332);--card-border: var(--symbol-card-border, rgba(100, 206, 185, .3));--card-hover-border: var(--symbol-card-hover-border, #64ceb9);--card-preview-bg: var(--symbol-card-preview-bg, #394555);--card-info-border: var(--symbol-card-info-border, rgba(100, 206, 185, .2));--text-primary: var(--symbol-text-primary, #e0e0e0);--text-secondary: var(--symbol-text-secondary, #999);--accent-color: var(--symbol-accent-color, #64ceb9)}.symbol-library-detail-container{display:flex;flex-direction:column;height:100%;padding:12px 16px;gap:12px}.loading-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:16px}.loading-spinner{width:40px;height:40px;border:3px solid var(--card-border);border-top-color:var(--accent-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.detail-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--card-border)}.header-left{display:flex;align-items:center;gap:8px}.library-title{margin:0;font-size:1.25rem;font-weight:500;color:var(--text-primary)}.readonly-badge{padding:4px 8px;font-size:.75rem;background:var(--card-preview-bg);border:1px solid var(--card-border);border-radius:4px;color:var(--text-secondary)}.symbols-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;flex:1;overflow-y:auto;padding:4px;align-content:start}.symbol-card{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--card-border);border-radius:8px;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s}.symbol-card:hover{border-color:var(--card-hover-border);box-shadow:0 2px 8px #0000004d}.symbol-card.selected{border-color:var(--accent-color);box-shadow:0 0 0 2px #64ceb94d}.symbol-preview{display:flex;align-items:center;justify-content:center;height:120px;padding:12px;background:var(--card-preview-bg)}.symbol-preview svg{width:100%;height:100%;max-width:120px;max-height:100px}.symbol-info{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--card-info-border)}.symbol-name{font-size:.875rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}.symbol-actions{display:flex;gap:4px}.no-symbols{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;gap:16px;color:var(--text-secondary)}.header-right{display:flex;gap:4px}.dialog-content{padding:16px 0}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:#333}.form-group input,.form-group textarea,.form-group kendo-numerictextbox{width:100%}.form-row{display:flex;gap:16px}.form-row .form-group{flex:1}.svg-file-group{display:flex;flex-direction:column;gap:8px;padding:16px;background:#f5f5f5;border-radius:6px;margin-bottom:16px}.svg-file-info{display:flex;flex-direction:column;gap:4px}.svg-filename{font-weight:500;color:#1976d2}.svg-stats{font-size:12px;color:#666}.svg-scale-group{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#e3f2fd;border-radius:6px;margin-bottom:16px}.svg-scale-group label{font-weight:500;margin:0;white-space:nowrap}.svg-scale-group kendo-numerictextbox{width:100px}.svg-scale-group .scale-info{flex:1;font-size:12px;color:#666}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i3$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: i3$1.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: NumericTextBoxModule }, { kind: "ngmodule", type: DialogsModule }, { kind: "component", type: i3.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "component", type: i3.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: RowActionsComponent, selector: "mm-row-actions", inputs: ["actions", "rowLabel", "maxInline", "messages"], outputs: ["triggered"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
31443
31516
|
}
|
|
31444
31517
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SymbolLibraryDetailComponent, decorators: [{
|
|
31445
31518
|
type: Component,
|
|
@@ -31450,8 +31523,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
31450
31523
|
SVGIconModule,
|
|
31451
31524
|
InputsModule,
|
|
31452
31525
|
NumericTextBoxModule,
|
|
31453
|
-
DialogsModule
|
|
31454
|
-
], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"symbol-library-detail-container\">\n @if (isLoading()) {\n <div class=\"loading-container\">\n <div class=\"loading-spinner\"></div>\n <span>Loading library...</span>\n </div>\n } @else if (library()) {\n <!-- Header -->\n <div class=\"detail-header\">\n <div class=\"header-left\">\n <button kendoButton\n [svgIcon]=\"backIcon\"\n fillMode=\"flat\"\n title=\"Back to library list\"\n (click)=\"navigateBack()\">\n </button>\n <h2 class=\"library-title\">{{ libraryName() }}</h2>\n @if (library()?.isReadOnly) {\n <span class=\"readonly-badge\">Read Only</span>\n }\n </div>\n <div class=\"header-right\">\n <button kendoButton\n [svgIcon]=\"uploadIcon\"\n fillMode=\"outline\"\n title=\"Import SVG\"\n (click)=\"showSvgImportDialogFn()\"\n [disabled]=\"!!library()?.isReadOnly\">\n </button>\n <button kendoButton\n [svgIcon]=\"plusIcon\"\n themeColor=\"primary\"\n title=\"New Symbol\"\n (click)=\"showCreateSymbolDialog()\"\n [disabled]=\"!!library()?.isReadOnly\">\n </button>\n </div>\n </div>\n\n <!-- Symbols Grid -->\n <div class=\"symbols-grid\">\n @for (symbol of symbols(); track symbol.rtId) {\n <div class=\"symbol-card\"\n [class.selected]=\"selectedSymbol()?.rtId === symbol.rtId\"\n (click)=\"selectSymbol(symbol)\">\n <div class=\"symbol-preview\">\n <svg [attr.viewBox]=\"'0 0 ' + symbol.bounds.width + ' ' + symbol.bounds.height\" preserveAspectRatio=\"xMidYMid meet\">\n @for (primitive of symbol.primitives; track primitive.id) {\n @switch (primitive.type) {\n @case ('rectangle') {\n <rect\n [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config?.width\"\n [attr.height]=\"$any(primitive).config?.height\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n [attr.rx]=\"$any(primitive).config?.cornerRadius || 0\"\n [attr.ry]=\"$any(primitive).config?.cornerRadius || 0\"\n />\n }\n @case ('ellipse') {\n <ellipse\n [attr.cx]=\"primitive.position.x + ($any(primitive).config?.radiusX || 0)\"\n [attr.cy]=\"primitive.position.y + ($any(primitive).config?.radiusY || 0)\"\n [attr.rx]=\"$any(primitive).config?.radiusX\"\n [attr.ry]=\"$any(primitive).config?.radiusY\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('line') {\n <line\n [attr.x1]=\"$any(primitive).config?.start?.x\"\n [attr.y1]=\"$any(primitive).config?.start?.y\"\n [attr.x2]=\"$any(primitive).config?.end?.x\"\n [attr.y2]=\"$any(primitive).config?.end?.y\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('path') {\n <path\n [attr.d]=\"$any(primitive).config?.d\"\n [attr.transform]=\"'translate(' + primitive.position.x + ',' + primitive.position.y + ')'\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, 'none')\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('text') {\n <text\n [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, '#333333')\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.font-size]=\"$any(primitive).config?.fontSize || 12\"\n [attr.font-family]=\"$any(primitive).config?.fontFamily || 'sans-serif'\"\n >{{ $any(primitive).config?.text }}</text>\n }\n @case ('polyline') {\n <polyline\n [attr.points]=\"getPointsWithOffset(primitive)\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, 'none')\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('polygon') {\n <polygon\n [attr.points]=\"getPointsWithOffset(primitive)\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n }\n }\n </svg>\n </div>\n <div class=\"symbol-info\">\n <span class=\"symbol-name\">{{ symbol.name }}</span>\n <div class=\"symbol-actions\">\n <button kendoButton [svgIcon]=\"editIcon\" fillMode=\"flat\" size=\"small\" (click)=\"editSymbol(symbol); $event.stopPropagation()\">\n </button>\n <button kendoButton [svgIcon]=\"deleteIcon\" fillMode=\"flat\" size=\"small\"\n [disabled]=\"!!library()?.isReadOnly\"\n (click)=\"deleteSymbol(symbol); $event.stopPropagation()\">\n </button>\n </div>\n </div>\n </div>\n } @empty {\n <div class=\"no-symbols\">\n <p>No symbols in this library</p>\n <button kendoButton [svgIcon]=\"plusIcon\" themeColor=\"primary\" (click)=\"showCreateSymbolDialog()\" [disabled]=\"!!library()?.isReadOnly\">\n Create First Symbol\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"error-container\">\n <p>Library not found</p>\n <button kendoButton (click)=\"navigateBack()\">Go Back</button>\n </div>\n }\n</div>\n\n<!-- Create Symbol Dialog -->\n@if (showSymbolDialog()) {\n <kendo-dialog title=\"Create Symbol\" (close)=\"closeSymbolDialog()\" [width]=\"450\">\n <div class=\"dialog-content\">\n <div class=\"form-group\">\n <label>Name *</label>\n <input kendoTextBox [(ngModel)]=\"newSymbol.name\" placeholder=\"Symbol name\"/>\n </div>\n <div class=\"form-group\">\n <label>Description</label>\n <textarea kendoTextArea [(ngModel)]=\"newSymbol.description\" placeholder=\"Optional description\" rows=\"2\"></textarea>\n </div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Width</label>\n <kendo-numerictextbox [(ngModel)]=\"newSymbol.width\" [min]=\"10\" [max]=\"2000\" [step]=\"10\" [format]=\"'n0'\"></kendo-numerictextbox>\n </div>\n <div class=\"form-group\">\n <label>Height</label>\n <kendo-numerictextbox [(ngModel)]=\"newSymbol.height\" [min]=\"10\" [max]=\"2000\" [step]=\"10\" [format]=\"'n0'\"></kendo-numerictextbox>\n </div>\n </div>\n <div class=\"form-group\">\n <label>Category</label>\n <input kendoTextBox [(ngModel)]=\"newSymbol.category\" placeholder=\"e.g., Basic, Flow, Equipment\"/>\n </div>\n </div>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closeSymbolDialog()\">Cancel</button>\n <button kendoButton themeColor=\"primary\" (click)=\"createSymbol()\" [disabled]=\"!newSymbol.name\">\n Create\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n\n<!-- Import SVG Dialog -->\n@if (showSvgImportDialog()) {\n <kendo-dialog title=\"Import Symbol from SVG\" (close)=\"closeSvgImportDialog()\" [width]=\"500\">\n <div class=\"dialog-content\">\n <!-- Hidden file input -->\n <input #svgFileInput\n type=\"file\"\n accept=\".svg,image/svg+xml\"\n style=\"display: none\"\n (change)=\"onSvgFileSelected($event)\"/>\n\n <!-- File Selection -->\n <div class=\"form-group svg-file-group\">\n <button kendoButton (click)=\"svgFileInputRef.nativeElement.click()\">\n {{ svgImport.svgFileName ? 'Change SVG file...' : 'Select SVG file...' }}\n </button>\n @if (svgImport.svgFileName) {\n <div class=\"svg-file-info\">\n <span class=\"svg-filename\">{{ svgImport.svgFileName }}</span>\n <span class=\"svg-stats\">\n {{ svgImport.svgPrimitives?.length || 0 }} elements\n @if (svgImport.styleClasses && svgImport.styleClasses.length > 0) {\n , {{ svgImport.styleClasses.length }} style(s)\n }\n </span>\n </div>\n }\n </div>\n\n @if (svgImport.svgPrimitives) {\n <!-- Scale Control -->\n <div class=\"form-group svg-scale-group\">\n <label>Scale:</label>\n <kendo-numerictextbox\n [(ngModel)]=\"svgImport.svgScale\"\n [min]=\"0.1\"\n [max]=\"10\"\n [step]=\"0.1\"\n [decimals]=\"1\"\n [format]=\"'n1'\"\n (valueChange)=\"onSvgScaleChange($event)\"\n style=\"width: 100px\">\n </kendo-numerictextbox>\n <span class=\"scale-info\">\n Original: {{ svgImport.svgOriginalWidth }}\u00D7{{ svgImport.svgOriginalHeight }}px\n \u2192 {{ svgImport.width }}\u00D7{{ svgImport.height }}px\n </span>\n <button kendoButton look=\"flat\" (click)=\"resetSvgScale()\" title=\"Reset to 1x\">\n Reset\n </button>\n </div>\n\n <!-- Symbol Properties -->\n <div class=\"form-group\">\n <label>Name *</label>\n <input kendoTextBox [(ngModel)]=\"svgImport.name\" placeholder=\"Symbol name\"/>\n </div>\n <div class=\"form-group\">\n <label>Description</label>\n <textarea kendoTextArea [(ngModel)]=\"svgImport.description\" placeholder=\"Optional description\" rows=\"2\"></textarea>\n </div>\n <div class=\"form-group\">\n <label>Category</label>\n <input kendoTextBox [(ngModel)]=\"svgImport.category\" placeholder=\"e.g., Basic, Flow, Equipment\"/>\n </div>\n }\n </div>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closeSvgImportDialog()\">Cancel</button>\n <button kendoButton themeColor=\"primary\"\n (click)=\"createSymbolFromSvg()\"\n [disabled]=\"!svgImport.name || !svgImport.svgPrimitives?.length\">\n Import\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n", styles: [":host{--card-bg: var(--symbol-card-bg, #1a2332);--card-border: var(--symbol-card-border, rgba(100, 206, 185, .3));--card-hover-border: var(--symbol-card-hover-border, #64ceb9);--card-preview-bg: var(--symbol-card-preview-bg, #394555);--card-info-border: var(--symbol-card-info-border, rgba(100, 206, 185, .2));--text-primary: var(--symbol-text-primary, #e0e0e0);--text-secondary: var(--symbol-text-secondary, #999);--accent-color: var(--symbol-accent-color, #64ceb9)}.symbol-library-detail-container{display:flex;flex-direction:column;height:100%;padding:12px 16px;gap:12px}.loading-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:16px}.loading-spinner{width:40px;height:40px;border:3px solid var(--card-border);border-top-color:var(--accent-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.detail-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--card-border)}.header-left{display:flex;align-items:center;gap:8px}.library-title{margin:0;font-size:1.25rem;font-weight:500;color:var(--text-primary)}.readonly-badge{padding:4px 8px;font-size:.75rem;background:var(--card-preview-bg);border:1px solid var(--card-border);border-radius:4px;color:var(--text-secondary)}.symbols-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;flex:1;overflow-y:auto;padding:4px;align-content:start}.symbol-card{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--card-border);border-radius:8px;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s}.symbol-card:hover{border-color:var(--card-hover-border);box-shadow:0 2px 8px #0000004d}.symbol-card.selected{border-color:var(--accent-color);box-shadow:0 0 0 2px #64ceb94d}.symbol-preview{display:flex;align-items:center;justify-content:center;height:120px;padding:12px;background:var(--card-preview-bg)}.symbol-preview svg{width:100%;height:100%;max-width:120px;max-height:100px}.symbol-info{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--card-info-border)}.symbol-name{font-size:.875rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}.symbol-actions{display:flex;gap:4px}.no-symbols{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;gap:16px;color:var(--text-secondary)}.header-right{display:flex;gap:4px}.dialog-content{padding:16px 0}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:#333}.form-group input,.form-group textarea,.form-group kendo-numerictextbox{width:100%}.form-row{display:flex;gap:16px}.form-row .form-group{flex:1}.svg-file-group{display:flex;flex-direction:column;gap:8px;padding:16px;background:#f5f5f5;border-radius:6px;margin-bottom:16px}.svg-file-info{display:flex;flex-direction:column;gap:4px}.svg-filename{font-weight:500;color:#1976d2}.svg-stats{font-size:12px;color:#666}.svg-scale-group{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#e3f2fd;border-radius:6px;margin-bottom:16px}.svg-scale-group label{font-weight:500;margin:0;white-space:nowrap}.svg-scale-group kendo-numerictextbox{width:100px}.svg-scale-group .scale-info{flex:1;font-size:12px;color:#666}\n"] }]
|
|
31526
|
+
DialogsModule,
|
|
31527
|
+
RowActionsComponent
|
|
31528
|
+
], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"symbol-library-detail-container\">\n @if (isLoading()) {\n <div class=\"loading-container\">\n <div class=\"loading-spinner\"></div>\n <span>Loading library...</span>\n </div>\n } @else if (library()) {\n <!-- Header -->\n <div class=\"detail-header\">\n <div class=\"header-left\">\n <button kendoButton\n [svgIcon]=\"backIcon\"\n fillMode=\"flat\"\n title=\"Back to library list\"\n aria-label=\"Back to library list\"\n (click)=\"navigateBack()\">\n </button>\n <h2 class=\"library-title\">{{ libraryName() }}</h2>\n @if (library()?.isReadOnly) {\n <span class=\"readonly-badge\">Read Only</span>\n }\n </div>\n <div class=\"header-right\">\n <button kendoButton\n [svgIcon]=\"uploadIcon\"\n fillMode=\"outline\"\n title=\"Import SVG\"\n aria-label=\"Import SVG\"\n (click)=\"showSvgImportDialogFn()\"\n [disabled]=\"!!library()?.isReadOnly\">\n </button>\n <button kendoButton\n [svgIcon]=\"plusIcon\"\n themeColor=\"primary\"\n title=\"New Symbol\"\n aria-label=\"New Symbol\"\n (click)=\"showCreateSymbolDialog()\"\n [disabled]=\"!!library()?.isReadOnly\">\n </button>\n </div>\n </div>\n\n <!-- Symbols Grid -->\n <div class=\"symbols-grid\">\n @for (symbol of symbols(); track symbol.rtId) {\n <div class=\"symbol-card\"\n [class.selected]=\"selectedSymbol()?.rtId === symbol.rtId\"\n (click)=\"selectSymbol(symbol)\">\n <div class=\"symbol-preview\">\n <svg [attr.viewBox]=\"'0 0 ' + symbol.bounds.width + ' ' + symbol.bounds.height\" preserveAspectRatio=\"xMidYMid meet\">\n @for (primitive of symbol.primitives; track primitive.id) {\n @switch (primitive.type) {\n @case ('rectangle') {\n <rect\n [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.width]=\"$any(primitive).config?.width\"\n [attr.height]=\"$any(primitive).config?.height\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n [attr.rx]=\"$any(primitive).config?.cornerRadius || 0\"\n [attr.ry]=\"$any(primitive).config?.cornerRadius || 0\"\n />\n }\n @case ('ellipse') {\n <ellipse\n [attr.cx]=\"primitive.position.x + ($any(primitive).config?.radiusX || 0)\"\n [attr.cy]=\"primitive.position.y + ($any(primitive).config?.radiusY || 0)\"\n [attr.rx]=\"$any(primitive).config?.radiusX\"\n [attr.ry]=\"$any(primitive).config?.radiusY\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('line') {\n <line\n [attr.x1]=\"$any(primitive).config?.start?.x\"\n [attr.y1]=\"$any(primitive).config?.start?.y\"\n [attr.x2]=\"$any(primitive).config?.end?.x\"\n [attr.y2]=\"$any(primitive).config?.end?.y\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('path') {\n <path\n [attr.d]=\"$any(primitive).config?.d\"\n [attr.transform]=\"'translate(' + primitive.position.x + ',' + primitive.position.y + ')'\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, 'none')\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('text') {\n <text\n [attr.x]=\"primitive.position.x\"\n [attr.y]=\"primitive.position.y\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, '#333333')\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.font-size]=\"$any(primitive).config?.fontSize || 12\"\n [attr.font-family]=\"$any(primitive).config?.fontFamily || 'sans-serif'\"\n >{{ $any(primitive).config?.text }}</text>\n }\n @case ('polyline') {\n <polyline\n [attr.points]=\"getPointsWithOffset(primitive)\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses, 'none')\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n @case ('polygon') {\n <polygon\n [attr.points]=\"getPointsWithOffset(primitive)\"\n [attr.fill]=\"getFillColor(primitive, symbol.styleClasses)\"\n [attr.stroke]=\"getStrokeColor(primitive, symbol.styleClasses)\"\n [attr.stroke-width]=\"getStrokeWidth(primitive, symbol.styleClasses)\"\n [attr.fill-opacity]=\"getFillOpacity(primitive, symbol.styleClasses)\"\n [attr.stroke-opacity]=\"getStrokeOpacity(primitive, symbol.styleClasses)\"\n />\n }\n }\n }\n </svg>\n </div>\n <div class=\"symbol-info\">\n <span class=\"symbol-name\">{{ symbol.name }}</span>\n <!-- AB#5580: shared row actions (icon buttons with tooltip + accessible name, danger delete) -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <div class=\"symbol-actions\" (click)=\"$event.stopPropagation()\">\n <mm-row-actions [actions]=\"symbolActions()\" [rowLabel]=\"symbol.name\" (triggered)=\"onSymbolAction($event.id, symbol)\" />\n </div>\n </div>\n </div>\n } @empty {\n <div class=\"no-symbols\">\n <p>No symbols in this library</p>\n <button kendoButton [svgIcon]=\"plusIcon\" themeColor=\"primary\" (click)=\"showCreateSymbolDialog()\" [disabled]=\"!!library()?.isReadOnly\">\n Create First Symbol\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"error-container\">\n <p>Library not found</p>\n <button kendoButton (click)=\"navigateBack()\">Go Back</button>\n </div>\n }\n</div>\n\n<!-- Create Symbol Dialog -->\n@if (showSymbolDialog()) {\n <kendo-dialog title=\"Create Symbol\" (close)=\"closeSymbolDialog()\" [width]=\"450\">\n <div class=\"dialog-content\">\n <div class=\"form-group\">\n <label>Name *</label>\n <input kendoTextBox [(ngModel)]=\"newSymbol.name\" placeholder=\"Symbol name\"/>\n </div>\n <div class=\"form-group\">\n <label>Description</label>\n <textarea kendoTextArea [(ngModel)]=\"newSymbol.description\" placeholder=\"Optional description\" rows=\"2\"></textarea>\n </div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Width</label>\n <kendo-numerictextbox [(ngModel)]=\"newSymbol.width\" [min]=\"10\" [max]=\"2000\" [step]=\"10\" [format]=\"'n0'\"></kendo-numerictextbox>\n </div>\n <div class=\"form-group\">\n <label>Height</label>\n <kendo-numerictextbox [(ngModel)]=\"newSymbol.height\" [min]=\"10\" [max]=\"2000\" [step]=\"10\" [format]=\"'n0'\"></kendo-numerictextbox>\n </div>\n </div>\n <div class=\"form-group\">\n <label>Category</label>\n <input kendoTextBox [(ngModel)]=\"newSymbol.category\" placeholder=\"e.g., Basic, Flow, Equipment\"/>\n </div>\n </div>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closeSymbolDialog()\">Cancel</button>\n <button kendoButton themeColor=\"primary\" (click)=\"createSymbol()\" [disabled]=\"!newSymbol.name\">\n Create\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n\n<!-- Import SVG Dialog -->\n@if (showSvgImportDialog()) {\n <kendo-dialog title=\"Import Symbol from SVG\" (close)=\"closeSvgImportDialog()\" [width]=\"500\">\n <div class=\"dialog-content\">\n <!-- Hidden file input -->\n <input #svgFileInput\n type=\"file\"\n accept=\".svg,image/svg+xml\"\n style=\"display: none\"\n (change)=\"onSvgFileSelected($event)\"/>\n\n <!-- File Selection -->\n <div class=\"form-group svg-file-group\">\n <button kendoButton (click)=\"svgFileInputRef.nativeElement.click()\">\n {{ svgImport.svgFileName ? 'Change SVG file...' : 'Select SVG file...' }}\n </button>\n @if (svgImport.svgFileName) {\n <div class=\"svg-file-info\">\n <span class=\"svg-filename\">{{ svgImport.svgFileName }}</span>\n <span class=\"svg-stats\">\n {{ svgImport.svgPrimitives?.length || 0 }} elements\n @if (svgImport.styleClasses && svgImport.styleClasses.length > 0) {\n , {{ svgImport.styleClasses.length }} style(s)\n }\n </span>\n </div>\n }\n </div>\n\n @if (svgImport.svgPrimitives) {\n <!-- Scale Control -->\n <div class=\"form-group svg-scale-group\">\n <label>Scale:</label>\n <kendo-numerictextbox\n [(ngModel)]=\"svgImport.svgScale\"\n [min]=\"0.1\"\n [max]=\"10\"\n [step]=\"0.1\"\n [decimals]=\"1\"\n [format]=\"'n1'\"\n (valueChange)=\"onSvgScaleChange($event)\"\n style=\"width: 100px\">\n </kendo-numerictextbox>\n <span class=\"scale-info\">\n Original: {{ svgImport.svgOriginalWidth }}\u00D7{{ svgImport.svgOriginalHeight }}px\n \u2192 {{ svgImport.width }}\u00D7{{ svgImport.height }}px\n </span>\n <button kendoButton look=\"flat\" (click)=\"resetSvgScale()\" title=\"Reset to 1x\">\n Reset\n </button>\n </div>\n\n <!-- Symbol Properties -->\n <div class=\"form-group\">\n <label>Name *</label>\n <input kendoTextBox [(ngModel)]=\"svgImport.name\" placeholder=\"Symbol name\"/>\n </div>\n <div class=\"form-group\">\n <label>Description</label>\n <textarea kendoTextArea [(ngModel)]=\"svgImport.description\" placeholder=\"Optional description\" rows=\"2\"></textarea>\n </div>\n <div class=\"form-group\">\n <label>Category</label>\n <input kendoTextBox [(ngModel)]=\"svgImport.category\" placeholder=\"e.g., Basic, Flow, Equipment\"/>\n </div>\n }\n </div>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closeSvgImportDialog()\">Cancel</button>\n <button kendoButton themeColor=\"primary\"\n (click)=\"createSymbolFromSvg()\"\n [disabled]=\"!svgImport.name || !svgImport.svgPrimitives?.length\">\n Import\n </button>\n </kendo-dialog-actions>\n </kendo-dialog>\n}\n", styles: [":host{--card-bg: var(--symbol-card-bg, #1a2332);--card-border: var(--symbol-card-border, rgba(100, 206, 185, .3));--card-hover-border: var(--symbol-card-hover-border, #64ceb9);--card-preview-bg: var(--symbol-card-preview-bg, #394555);--card-info-border: var(--symbol-card-info-border, rgba(100, 206, 185, .2));--text-primary: var(--symbol-text-primary, #e0e0e0);--text-secondary: var(--symbol-text-secondary, #999);--accent-color: var(--symbol-accent-color, #64ceb9)}.symbol-library-detail-container{display:flex;flex-direction:column;height:100%;padding:12px 16px;gap:12px}.loading-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:16px}.loading-spinner{width:40px;height:40px;border:3px solid var(--card-border);border-top-color:var(--accent-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.detail-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--card-border)}.header-left{display:flex;align-items:center;gap:8px}.library-title{margin:0;font-size:1.25rem;font-weight:500;color:var(--text-primary)}.readonly-badge{padding:4px 8px;font-size:.75rem;background:var(--card-preview-bg);border:1px solid var(--card-border);border-radius:4px;color:var(--text-secondary)}.symbols-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;flex:1;overflow-y:auto;padding:4px;align-content:start}.symbol-card{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--card-border);border-radius:8px;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s}.symbol-card:hover{border-color:var(--card-hover-border);box-shadow:0 2px 8px #0000004d}.symbol-card.selected{border-color:var(--accent-color);box-shadow:0 0 0 2px #64ceb94d}.symbol-preview{display:flex;align-items:center;justify-content:center;height:120px;padding:12px;background:var(--card-preview-bg)}.symbol-preview svg{width:100%;height:100%;max-width:120px;max-height:100px}.symbol-info{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--card-info-border)}.symbol-name{font-size:.875rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}.symbol-actions{display:flex;gap:4px}.no-symbols{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;gap:16px;color:var(--text-secondary)}.header-right{display:flex;gap:4px}.dialog-content{padding:16px 0}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:#333}.form-group input,.form-group textarea,.form-group kendo-numerictextbox{width:100%}.form-row{display:flex;gap:16px}.form-row .form-group{flex:1}.svg-file-group{display:flex;flex-direction:column;gap:8px;padding:16px;background:#f5f5f5;border-radius:6px;margin-bottom:16px}.svg-file-info{display:flex;flex-direction:column;gap:4px}.svg-filename{font-weight:500;color:#1976d2}.svg-stats{font-size:12px;color:#666}.svg-scale-group{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#e3f2fd;border-radius:6px;margin-bottom:16px}.svg-scale-group label{font-weight:500;margin:0;white-space:nowrap}.svg-scale-group kendo-numerictextbox{width:100px}.svg-scale-group .scale-info{flex:1;font-size:12px;color:#666}\n"] }]
|
|
31455
31529
|
}], propDecorators: { svgFileInputRef: [{
|
|
31456
31530
|
type: ViewChild,
|
|
31457
31531
|
args: ['svgFileInput']
|
|
@@ -31774,9 +31848,9 @@ class ProcessDiagramListComponent {
|
|
|
31774
31848
|
notificationService = inject(NotificationService);
|
|
31775
31849
|
inputService = inject(InputService);
|
|
31776
31850
|
dataService = inject(ProcessDiagramDataService);
|
|
31777
|
-
plusIcon =
|
|
31778
|
-
editIcon =
|
|
31779
|
-
deleteIcon =
|
|
31851
|
+
plusIcon = MM_ACTION_ICONS.add;
|
|
31852
|
+
editIcon = MM_ACTION_ICONS.edit;
|
|
31853
|
+
deleteIcon = MM_ACTION_ICONS.delete;
|
|
31780
31854
|
dataSource;
|
|
31781
31855
|
onRowClick(event) {
|
|
31782
31856
|
const diagram = event;
|
|
@@ -31839,10 +31913,19 @@ class ProcessDiagramListComponent {
|
|
|
31839
31913
|
const itemsToDelete = eventArgs.data instanceof Array ? eventArgs.data : [eventArgs.data];
|
|
31840
31914
|
if (itemsToDelete.length === 0)
|
|
31841
31915
|
return;
|
|
31842
|
-
const
|
|
31843
|
-
|
|
31844
|
-
|
|
31845
|
-
|
|
31916
|
+
const single = itemsToDelete.length === 1;
|
|
31917
|
+
const targetName = single
|
|
31918
|
+
? (itemsToDelete[0].name || itemsToDelete[0].rtId)
|
|
31919
|
+
: `${itemsToDelete.length} process diagrams`;
|
|
31920
|
+
// AB#5580: danger confirmation naming the target (Studio action guideline §2.4).
|
|
31921
|
+
const confirmed = await this.confirmationService.showDangerConfirm({
|
|
31922
|
+
title: single ? `Delete process diagram ${targetName}?` : `Delete ${targetName}?`,
|
|
31923
|
+
targetName,
|
|
31924
|
+
consequence: single
|
|
31925
|
+
? 'The diagram and its layout are deleted. This cannot be undone.'
|
|
31926
|
+
: 'The diagrams and their layouts are deleted. This cannot be undone.',
|
|
31927
|
+
confirmText: single ? 'Delete process diagram' : 'Delete process diagrams',
|
|
31928
|
+
});
|
|
31846
31929
|
if (confirmed) {
|
|
31847
31930
|
try {
|
|
31848
31931
|
for (const item of itemsToDelete) {
|
|
@@ -31873,14 +31956,14 @@ class ProcessDiagramListComponent {
|
|
|
31873
31956
|
}
|
|
31874
31957
|
};
|
|
31875
31958
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ProcessDiagramListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
31876
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: ProcessDiagramListComponent, isStandalone: true, selector: "mm-process-diagram-list", viewQueries: [{ propertyName: "dataSource", first: true, predicate: ["dir"], descendants: true }], ngImport: i0, template: "<div class=\"process-diagram-list-container\">\n <mm-list-view\n mmProcessDiagramDataSource\n #dir=\"mmProcessDiagramDataSource\"\n [sortable]=\"true\"\n [searchTextBoxEnabled]=\"true\"\n [selectable]=\"{mode: 'multiple', enabled: true}\"\n [pageable]=\"{buttonCount: 3, pageSizes: [10, 20, 50, 100]}\"\n [pageSize]=\"20\"\n [columns]=\"[\n {field: 'name', displayName: 'Name', dataType: 'text'},\n {field: 'description', displayName: 'Description', dataType: 'text'},\n {field: 'version', displayName: 'Version', dataType: 'text'},\n {field: 'canvasWidth', displayName: 'Width', dataType: 'numeric'},\n {field: 'canvasHeight', displayName: 'Height', dataType: 'numeric'}\n ]\"\n [actionCommandItems]=\"[\n {id: 'edit', type:'link', text: 'Edit', svgIcon: editIcon, onClick: onEditClick}\n ]\"\n [leftToolbarActions]=\"[\n {id: 'new', type:'link', text: 'New Diagram', svgIcon: plusIcon, onClick: onNewDiagram}\n ]\"\n [contextMenuCommandItems]=\"[\n {id: 'delete', type:'link', text: 'Delete', onClick: onDeleteClick, svgIcon: deleteIcon}\n ]\"\n (rowClicked)=\"onRowClick($event)\">\n </mm-list-view>\n</div>\n", styles: [".process-diagram-list-container{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}\n"], dependencies: [{ kind: "directive", type: ProcessDiagramDataSourceDirective, selector: "[mmProcessDiagramDataSource]", exportAs: ["mmProcessDiagramDataSource"] }, { kind: "component", type: ListViewComponent, selector: "mm-list-view", inputs: ["pageSize", "skip", "autoPageSize", "rowIsClickable", "showRowCheckBoxes", "showRowSelectAllCheckBox", "contextMenuType", "leftToolbarActions", "rightToolbarActions", "actionCommandItems", "contextMenuCommandItems", "excelExportFileName", "pdfExportFileName", "pageable", "sortable", "rowFilterEnabled", "searchTextBoxEnabled", "persistListState", "listStateKey", "resizable", "actionsColumnWidth", "hideCheckboxesBelow", "cardModeBelow", "collapseCommandsBelow", "rowClass", "messages", "selectable", "columns"], outputs: ["rowClicked", "resetFilters"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
31959
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: ProcessDiagramListComponent, isStandalone: true, selector: "mm-process-diagram-list", viewQueries: [{ propertyName: "dataSource", first: true, predicate: ["dir"], descendants: true }], ngImport: i0, template: "<div class=\"process-diagram-list-container\">\n <mm-list-view\n mmProcessDiagramDataSource\n #dir=\"mmProcessDiagramDataSource\"\n [sortable]=\"true\"\n [searchTextBoxEnabled]=\"true\"\n [emptyState]=\"{title: 'No process diagrams yet', text: 'Create your first diagram with New Diagram.'}\"\n [selectable]=\"{mode: 'multiple', enabled: true}\"\n [pageable]=\"{buttonCount: 3, pageSizes: [10, 20, 50, 100]}\"\n [pageSize]=\"20\"\n [columns]=\"[\n {field: 'name', displayName: 'Name', dataType: 'text'},\n {field: 'description', displayName: 'Description', dataType: 'text'},\n {field: 'version', displayName: 'Version', dataType: 'text'},\n {field: 'canvasWidth', displayName: 'Width', dataType: 'numeric'},\n {field: 'canvasHeight', displayName: 'Height', dataType: 'numeric'}\n ]\"\n [actionCommandItems]=\"[\n {id: 'edit', type:'link', text: 'Edit', svgIcon: editIcon, onClick: onEditClick}\n ]\"\n [leftToolbarActions]=\"[\n {id: 'new', type:'link', text: 'New Diagram', svgIcon: plusIcon, onClick: onNewDiagram}\n ]\"\n [contextMenuCommandItems]=\"[\n {id: 'delete', type:'link', text: 'Delete', danger: true, onClick: onDeleteClick, svgIcon: deleteIcon}\n ]\"\n (rowClicked)=\"onRowClick($event)\">\n </mm-list-view>\n</div>\n", styles: [".process-diagram-list-container{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}\n"], dependencies: [{ kind: "directive", type: ProcessDiagramDataSourceDirective, selector: "[mmProcessDiagramDataSource]", exportAs: ["mmProcessDiagramDataSource"] }, { kind: "component", type: ListViewComponent, selector: "mm-list-view", inputs: ["pageSize", "skip", "autoPageSize", "rowIsClickable", "showRowCheckBoxes", "showRowSelectAllCheckBox", "contextMenuType", "leftToolbarActions", "rightToolbarActions", "actionCommandItems", "contextMenuCommandItems", "rowActions", "maxInlineRowActions", "excelExportFileName", "pdfExportFileName", "pageable", "sortable", "rowFilterEnabled", "searchTextBoxEnabled", "persistListState", "listStateKey", "resizable", "actionsColumnWidth", "hideCheckboxesBelow", "cardModeBelow", "collapseCommandsBelow", "hasExternalFilters", "emptyState", "emptyTemplate", "rowClass", "messages", "selectable", "columns", "rowLabelField"], outputs: ["rowClicked", "rowAction", "resetFilters"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
31877
31960
|
}
|
|
31878
31961
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ProcessDiagramListComponent, decorators: [{
|
|
31879
31962
|
type: Component,
|
|
31880
31963
|
args: [{ selector: 'mm-process-diagram-list', standalone: true, imports: [
|
|
31881
31964
|
ProcessDiagramDataSourceDirective,
|
|
31882
31965
|
ListViewComponent
|
|
31883
|
-
], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"process-diagram-list-container\">\n <mm-list-view\n mmProcessDiagramDataSource\n #dir=\"mmProcessDiagramDataSource\"\n [sortable]=\"true\"\n [searchTextBoxEnabled]=\"true\"\n [selectable]=\"{mode: 'multiple', enabled: true}\"\n [pageable]=\"{buttonCount: 3, pageSizes: [10, 20, 50, 100]}\"\n [pageSize]=\"20\"\n [columns]=\"[\n {field: 'name', displayName: 'Name', dataType: 'text'},\n {field: 'description', displayName: 'Description', dataType: 'text'},\n {field: 'version', displayName: 'Version', dataType: 'text'},\n {field: 'canvasWidth', displayName: 'Width', dataType: 'numeric'},\n {field: 'canvasHeight', displayName: 'Height', dataType: 'numeric'}\n ]\"\n [actionCommandItems]=\"[\n {id: 'edit', type:'link', text: 'Edit', svgIcon: editIcon, onClick: onEditClick}\n ]\"\n [leftToolbarActions]=\"[\n {id: 'new', type:'link', text: 'New Diagram', svgIcon: plusIcon, onClick: onNewDiagram}\n ]\"\n [contextMenuCommandItems]=\"[\n {id: 'delete', type:'link', text: 'Delete', onClick: onDeleteClick, svgIcon: deleteIcon}\n ]\"\n (rowClicked)=\"onRowClick($event)\">\n </mm-list-view>\n</div>\n", styles: [".process-diagram-list-container{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}\n"] }]
|
|
31966
|
+
], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"process-diagram-list-container\">\n <mm-list-view\n mmProcessDiagramDataSource\n #dir=\"mmProcessDiagramDataSource\"\n [sortable]=\"true\"\n [searchTextBoxEnabled]=\"true\"\n [emptyState]=\"{title: 'No process diagrams yet', text: 'Create your first diagram with New Diagram.'}\"\n [selectable]=\"{mode: 'multiple', enabled: true}\"\n [pageable]=\"{buttonCount: 3, pageSizes: [10, 20, 50, 100]}\"\n [pageSize]=\"20\"\n [columns]=\"[\n {field: 'name', displayName: 'Name', dataType: 'text'},\n {field: 'description', displayName: 'Description', dataType: 'text'},\n {field: 'version', displayName: 'Version', dataType: 'text'},\n {field: 'canvasWidth', displayName: 'Width', dataType: 'numeric'},\n {field: 'canvasHeight', displayName: 'Height', dataType: 'numeric'}\n ]\"\n [actionCommandItems]=\"[\n {id: 'edit', type:'link', text: 'Edit', svgIcon: editIcon, onClick: onEditClick}\n ]\"\n [leftToolbarActions]=\"[\n {id: 'new', type:'link', text: 'New Diagram', svgIcon: plusIcon, onClick: onNewDiagram}\n ]\"\n [contextMenuCommandItems]=\"[\n {id: 'delete', type:'link', text: 'Delete', danger: true, onClick: onDeleteClick, svgIcon: deleteIcon}\n ]\"\n (rowClicked)=\"onRowClick($event)\">\n </mm-list-view>\n</div>\n", styles: [".process-diagram-list-container{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}\n"] }]
|
|
31884
31967
|
}], propDecorators: { dataSource: [{
|
|
31885
31968
|
type: ViewChild,
|
|
31886
31969
|
args: ['dir', { static: false }]
|