@meshmakers/octo-process-diagrams 3.4.1490 → 3.5.10

package/fesm2022/meshmakers-octo-process-diagrams.mjs

@@ -30934,14 +30934,14 @@ class SymbolLibraryListComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SymbolLibraryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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', 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", "rowClass", "messages", "selectable", "columns", "rowLabelField"], outputs: ["rowClicked", "rowAction", "resetFilters"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SymbolLibraryListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mm-symbol-library-list', standalone: true, imports: [
                         SymbolLibraryDataSourceDirective,
                         ListViewComponent
-                    ], 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', 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"] }]
+                    ], 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"] }]
         }], propDecorators: { dataSource: [{
                 type: ViewChild,
                 args: ['dir', { static: false }]
@@ -31512,7 +31512,7 @@ class SymbolLibraryDetailComponent {
         return style.stroke?.opacity ?? defaultOpacity;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SymbolLibraryDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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"], outputs: ["triggered"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SymbolLibraryDetailComponent, decorators: [{
             type: Component,
@@ -31956,14 +31956,14 @@ class ProcessDiagramListComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ProcessDiagramListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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', 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", "rowClass", "messages", "selectable", "columns", "rowLabelField"], outputs: ["rowClicked", "rowAction", "resetFilters"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ProcessDiagramListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mm-process-diagram-list', standalone: true, imports: [
                         ProcessDiagramDataSourceDirective,
                         ListViewComponent
-                    ], 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', 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"] }]
+                    ], 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"] }]
         }], propDecorators: { dataSource: [{
                 type: ViewChild,
                 args: ['dir', { static: false }]