@meshmakers/octo-ui 3.3.580 → 3.3.600

package/fesm2022/meshmakers-octo-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Component, Injectable, EventEmitter, Output, Input, ElementRef, forwardRef, ViewChild, signal, computed, makeEnvironmentProviders } from '@angular/core';
+import { inject, Component, Injectable, EventEmitter, Output, Input, ElementRef, forwardRef, ViewChild, signal, computed, HostListener, makeEnvironmentProviders } from '@angular/core';
 import { AttributeSelectorService, AttributeValueTypeDto as AttributeValueTypeDto$1, CkTypeAttributeService, CkTypeSelectorService, GetEntitiesByCkTypeDtoGQL, RuntimeEntitySelectDataSource, RuntimeEntityDialogDataSource, SearchFilterTypesDto, SortOrdersDto, FieldFilterOperatorsDto, provideOctoServices } from '@meshmakers/octo-services';
 import { WindowStateService, EntitySelectInputComponent, DataSourceTyped, HierarchyDataSourceBase, NotificationDisplayService, provideMmSharedUi } from '@meshmakers/shared-ui';
 import { provideMmSharedAuth } from '@meshmakers/shared-auth';
@@ -10,14 +10,14 @@ import { FormsModule, FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VA
 import * as i3 from '@progress/kendo-angular-grid';
 import { GridModule } from '@progress/kendo-angular-grid';
 import * as i4 from '@progress/kendo-angular-buttons';
-import { ButtonsModule, ButtonModule } from '@progress/kendo-angular-buttons';
+import { ButtonsModule, ButtonModule, ButtonComponent } from '@progress/kendo-angular-buttons';
 import * as i5 from '@progress/kendo-angular-inputs';
 import { InputsModule } from '@progress/kendo-angular-inputs';
 import * as i3$1 from '@progress/kendo-angular-dropdowns';
 import { DropDownListModule, DropDownsModule, AutoCompleteModule } from '@progress/kendo-angular-dropdowns';
 import * as i5$1 from '@progress/kendo-angular-icons';
-import { IconsModule, SVGIconModule } from '@progress/kendo-angular-icons';
-import { searchIcon, sortAscSmallIcon, sortDescSmallIcon, chevronRightIcon, chevronDownIcon, downloadIcon, fileIcon, folderIcon, calendarIcon, checkboxCheckedIcon, listUnorderedIcon, filterClearIcon, arrowRightIcon, arrowLeftIcon, chevronDoubleRightIcon, chevronDoubleLeftIcon, arrowUpIcon, arrowDownIcon, pencilIcon, trashIcon, plusIcon, minusIcon, dollarIcon, copyIcon } from '@progress/kendo-svg-icons';
+import { IconsModule, SVGIconModule, SVGIconComponent } from '@progress/kendo-angular-icons';
+import { searchIcon, sortAscSmallIcon, sortDescSmallIcon, chevronRightIcon, chevronDownIcon, downloadIcon, fileIcon, folderIcon, calendarIcon, checkboxCheckedIcon, listUnorderedIcon, filterClearIcon, arrowRightIcon, arrowLeftIcon, chevronDoubleRightIcon, chevronDoubleLeftIcon, arrowUpIcon, arrowDownIcon, pencilIcon, trashIcon, plusIcon, minusIcon, dollarIcon, copyIcon, arrowRotateCwIcon } from '@progress/kendo-svg-icons';
 import { WindowRef, WindowModule, WindowService, WindowCloseResult } from '@progress/kendo-angular-dialog';
 import { Subject, firstValueFrom, of, forkJoin, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap, map, tap, catchError } from 'rxjs/operators';
@@ -25,7 +25,7 @@ import { LoaderModule } from '@progress/kendo-angular-indicators';
 import { isCompositeFilterDescriptor } from '@progress/kendo-data-query';
 import * as i6 from '@progress/kendo-angular-dateinputs';
 import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
-import { PopupModule } from '@progress/kendo-angular-popup';
+import { PopupModule, PopupComponent } from '@progress/kendo-angular-popup';
 import { IntlModule } from '@progress/kendo-angular-intl';
 
 class AttributeSortSelectorDialogComponent {
@@ -35,6 +35,8 @@ class AttributeSortSelectorDialogComponent {
     // Dialog data
     data;
     ckTypeId;
+    includeNavigationProperties = undefined;
+    attributePathsSet = null;
     searchText = '';
     currentSortOrder = 'standard';
     selectedValueTypeFilter = null;
@@ -77,6 +79,8 @@ class AttributeSortSelectorDialogComponent {
         if (this.data) {
             this.ckTypeId = this.data.ckTypeId;
             this.dialogTitle = this.data.dialogTitle || 'Select Attributes with Sort Order';
+            this.includeNavigationProperties = this.data.includeNavigationProperties;
+            this.attributePathsSet = this.data.attributePaths ? new Set(this.data.attributePaths) : null;
             if (this.data.selectedAttributes && this.data.selectedAttributes.length > 0) {
                 this.selectedAttributes = [...this.data.selectedAttributes];
                 this.updateSelectedGrid();
@@ -90,10 +94,14 @@ class AttributeSortSelectorDialogComponent {
         this.loadAvailableAttributes();
     }
     loadAvailableAttributes(searchTerm) {
-        this.attributeService.getAvailableAttributes(this.ckTypeId, undefined, undefined, undefined, this.selectedValueTypeFilter || undefined, searchTerm || undefined).subscribe(result => {
+        this.attributeService.getAvailableAttributes(this.ckTypeId, undefined, undefined, undefined, this.selectedValueTypeFilter || undefined, searchTerm || undefined, this.includeNavigationProperties, undefined).subscribe(result => {
             // Filter out already selected attributes
             const selectedPaths = new Set(this.selectedAttributes.map(a => a.attributePath));
-            this.availableAttributes = result.items.filter(item => !selectedPaths.has(item.attributePath));
+            // Apply client-side attribute path restriction if set
+            const filteredItems = this.attributePathsSet
+                ? result.items.filter(item => this.attributePathsSet.has(item.attributePath))
+                : result.items;
+            this.availableAttributes = filteredItems.filter(item => !selectedPaths.has(item.attributePath));
             this.updateAvailableGrid();
         });
     }
@@ -499,13 +507,18 @@ class AttributeSortSelectorDialogService {
      * @param ckTypeId The CkType ID to fetch attributes for
      * @param selectedAttributes Optional array of pre-selected attributes with sort orders
      * @param dialogTitle Optional custom dialog title
+     * @param includeNavigationProperties Optional flag to control navigation property inclusion
+     * @param hideNavigationControls Optional flag to hide the navigation property controls
      * @returns Promise that resolves with the result containing selected attributes with sort orders and confirmation status
      */
-    async openAttributeSortSelector(ckTypeId, selectedAttributes, dialogTitle) {
+    async openAttributeSortSelector(ckTypeId, selectedAttributes, dialogTitle, includeNavigationProperties, hideNavigationControls, attributePaths) {
         const data = {
             ckTypeId,
             selectedAttributes,
-            dialogTitle
+            dialogTitle,
+            includeNavigationProperties,
+            hideNavigationControls,
+            attributePaths
         };
         const size = this.windowStateService.resolveWindowSize('attribute-sort-selector', { width: 1200, height: 750 });
         const windowRef = this.windowService.open({
@@ -2701,11 +2714,14 @@ class AttributeSelectorDialogComponent {
     dialogTitle = 'Select Attributes';
     rtCkTypeId;
     singleSelect = false;
+    additionalAttributes = [];
     searchText = '';
     selectedSingleKey = [];
     selectedValueTypeFilter = null;
     includeNavigationProperties = true;
     maxDepth = null;
+    hideNavigationControls = false;
+    attributePathsSet = null;
     availableAttributes = [];
     selectedAttributes = [];
     availableGridData = { data: [], total: 0 };
@@ -2734,6 +2750,9 @@ class AttributeSelectorDialogComponent {
             this.singleSelect = this.data.singleSelect ?? false;
             this.includeNavigationProperties = this.data.includeNavigationProperties ?? true;
             this.maxDepth = this.data.maxDepth ?? null;
+            this.additionalAttributes = this.data.additionalAttributes ?? [];
+            this.hideNavigationControls = this.data.hideNavigationControls ?? false;
+            this.attributePathsSet = this.data.attributePaths ? new Set(this.data.attributePaths) : null;
             if (this.data.selectedAttributes && this.data.selectedAttributes.length > 0) {
                 if (this.singleSelect) {
                     this.selectedSingleKey = [this.data.selectedAttributes[0]];
@@ -2755,15 +2774,35 @@ class AttributeSelectorDialogComponent {
         this.attributeService.getAvailableAttributes(this.rtCkTypeId, undefined, undefined, undefined, this.selectedValueTypeFilter || undefined, searchTerm || undefined, this.includeNavigationProperties, this.maxDepth ?? undefined).subscribe(result => {
             // Filter out already selected attributes
             const selectedPaths = new Set(this.selectedAttributes.map(a => a.attributePath));
-            this.availableAttributes = result.items.filter(item => !selectedPaths.has(item.attributePath));
+            // Apply client-side attribute path restriction if set (additionalAttributes bypass this filter intentionally)
+            const filteredItems = this.attributePathsSet
+                ? result.items.filter(item => this.attributePathsSet.has(item.attributePath))
+                : result.items;
+            // Include additional virtual attributes (e.g., Timestamp for stream data), filtered by search/type
+            const filteredAdditional = this.additionalAttributes.filter(attr => {
+                if (selectedPaths.has(attr.attributePath))
+                    return false;
+                if (searchTerm && !attr.attributePath.toLowerCase().includes(searchTerm.toLowerCase()))
+                    return false;
+                if (this.selectedValueTypeFilter && attr.attributeValueType !== this.selectedValueTypeFilter)
+                    return false;
+                return true;
+            });
+            this.availableAttributes = [
+                ...filteredAdditional,
+                ...filteredItems.filter(item => !selectedPaths.has(item.attributePath))
+            ];
             this.updateAvailableGrid();
         });
     }
     loadInitialSelectedAttributes(attributePaths) {
         // Load all attributes to get the details for selected ones
         this.attributeService.getAvailableAttributes(this.rtCkTypeId).subscribe(result => {
-            // Create a map for quick lookup
+            // Create a map for quick lookup, including additional virtual attributes
             const attributeMap = new Map(result.items.map(item => [item.attributePath, item]));
+            for (const attr of this.additionalAttributes) {
+                attributeMap.set(attr.attributePath, attr);
+            }
             // Preserve the order from attributePaths
             this.selectedAttributes = attributePaths
                 .map(path => attributeMap.get(path))
@@ -2771,7 +2810,10 @@ class AttributeSelectorDialogComponent {
             this.updateSelectedGrid();
             // Filter out selected from available
             const selectedPaths = new Set(this.selectedAttributes.map(a => a.attributePath));
-            this.availableAttributes = result.items.filter(item => !selectedPaths.has(item.attributePath));
+            this.availableAttributes = [
+                ...this.additionalAttributes.filter(attr => !selectedPaths.has(attr.attributePath)),
+                ...result.items.filter(item => !selectedPaths.has(item.attributePath))
+            ];
             this.updateAvailableGrid();
         });
     }
@@ -2979,7 +3021,7 @@ class AttributeSelectorDialogComponent {
         this.updateGrids();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AttributeSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: AttributeSelectorDialogComponent, isStandalone: true, selector: "mm-attribute-selector-dialog", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AttributeSelectorDialogComponent, isStandalone: true, selector: "mm-attribute-selector-dialog", ngImport: i0, template: `
     <div class="attribute-selector-container">
       <div class="filter-container">
         <kendo-textbox
@@ -3002,23 +3044,25 @@ class AttributeSelectorDialogComponent {
         </kendo-dropdownlist>
       </div>
 
-      <div class="options-container">
-        <input type="checkbox" kendoCheckBox
-          [(ngModel)]="includeNavigationProperties"
-          (ngModelChange)="onNavigationPropertiesChange()" />
-        <label class="option-label">Include Navigation Properties</label>
+      @if (!hideNavigationControls) {
+        <div class="options-container">
+          <input type="checkbox" kendoCheckBox
+            [(ngModel)]="includeNavigationProperties"
+            (ngModelChange)="onNavigationPropertiesChange()" />
+          <label class="option-label">Include Navigation Properties</label>
 
-        <kendo-numerictextbox
-          [(ngModel)]="maxDepth"
-          [min]="1" [max]="5" [step]="1" [format]="'n0'"
-          [placeholder]="'Depth'"
-          [spinners]="true"
-          [disabled]="!includeNavigationProperties"
-          (valueChange)="onMaxDepthChange($event)"
-          class="depth-input">
-        </kendo-numerictextbox>
-        <label class="option-label">Max Depth</label>
-      </div>
+          <kendo-numerictextbox
+            [(ngModel)]="maxDepth"
+            [min]="1" [max]="5" [step]="1" [format]="'n0'"
+            [placeholder]="'Depth'"
+            [spinners]="true"
+            [disabled]="!includeNavigationProperties"
+            (valueChange)="onMaxDepthChange($event)"
+            class="depth-input">
+          </kendo-numerictextbox>
+          <label class="option-label">Max Depth</label>
+        </div>
+      }
 
       <div class="lists-container" *ngIf="!singleSelect">
         <div class="list-section">
@@ -3166,23 +3210,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         </kendo-dropdownlist>
       </div>
 
-      <div class="options-container">
-        <input type="checkbox" kendoCheckBox
-          [(ngModel)]="includeNavigationProperties"
-          (ngModelChange)="onNavigationPropertiesChange()" />
-        <label class="option-label">Include Navigation Properties</label>
+      @if (!hideNavigationControls) {
+        <div class="options-container">
+          <input type="checkbox" kendoCheckBox
+            [(ngModel)]="includeNavigationProperties"
+            (ngModelChange)="onNavigationPropertiesChange()" />
+          <label class="option-label">Include Navigation Properties</label>
 
-        <kendo-numerictextbox
-          [(ngModel)]="maxDepth"
-          [min]="1" [max]="5" [step]="1" [format]="'n0'"
-          [placeholder]="'Depth'"
-          [spinners]="true"
-          [disabled]="!includeNavigationProperties"
-          (valueChange)="onMaxDepthChange($event)"
-          class="depth-input">
-        </kendo-numerictextbox>
-        <label class="option-label">Max Depth</label>
-      </div>
+          <kendo-numerictextbox
+            [(ngModel)]="maxDepth"
+            [min]="1" [max]="5" [step]="1" [format]="'n0'"
+            [placeholder]="'Depth'"
+            [spinners]="true"
+            [disabled]="!includeNavigationProperties"
+            (valueChange)="onMaxDepthChange($event)"
+            class="depth-input">
+          </kendo-numerictextbox>
+          <label class="option-label">Max Depth</label>
+        </div>
+      }
 
       <div class="lists-container" *ngIf="!singleSelect">
         <div class="list-section">
@@ -3306,14 +3352,23 @@ class AttributeSelectorDialogService {
      * @param selectedAttributes Optional array of pre-selected attribute paths
      * @param dialogTitle Optional custom dialog title
      * @param singleSelect Optional flag for single-select mode
+     * @param additionalAttributes Optional virtual attributes to include (e.g., Timestamp for stream data)
+     * @param includeNavigationProperties Optional flag to control navigation property inclusion
+     * @param maxDepth Optional max depth for navigation properties
+     * @param hideNavigationControls Optional flag to hide the navigation property controls in the dialog
      * @returns Promise that resolves with the result containing selected attributes and confirmation status
      */
-    async openAttributeSelector(rtCkTypeId, selectedAttributes, dialogTitle, singleSelect) {
+    async openAttributeSelector(rtCkTypeId, selectedAttributes, dialogTitle, singleSelect, additionalAttributes, includeNavigationProperties, maxDepth, hideNavigationControls, attributePaths) {
         const data = {
             rtCkTypeId,
             selectedAttributes,
             dialogTitle,
-            singleSelect
+            singleSelect,
+            additionalAttributes,
+            includeNavigationProperties,
+            maxDepth,
+            hideNavigationControls,
+            attributePaths
         };
         const dialogKey = singleSelect ? 'attribute-selector-single' : 'attribute-selector';
         const defaultWidth = singleSelect ? 550 : 1000;
@@ -3883,6 +3938,17 @@ class FieldFilterEditorComponent {
      * When not set, the component uses the externally provided availableAttributes input.
      */
     ckTypeId;
+    /**
+     * When true, hides the "Include Navigation Properties" checkbox and Max Depth controls,
+     * and forces attribute loading without navigation properties.
+     * Used for stream data queries which don't support navigation properties.
+     */
+    hideNavigationProperties = false;
+    /**
+     * When set, restricts the available attributes to only these attribute paths (filtered client-side after fetching).
+     * Used for stream data queries to show only stream-data-enabled attributes.
+     */
+    attributePaths;
     /** Enable variable mode - allows using variables instead of literal values */
     enableVariables = false;
     /** Available variables for selection when enableVariables is true */
@@ -3905,8 +3971,13 @@ class FieldFilterEditorComponent {
     filtersChange = new EventEmitter();
     selectedKeys = [];
     ngOnChanges(changes) {
-        // Self-load attributes when ckTypeId changes
-        if (changes?.['ckTypeId'] && this.ckTypeId) {
+        // When hideNavigationProperties changes to true, reset nav props
+        if (changes?.['hideNavigationProperties'] && this.hideNavigationProperties) {
+            this.includeNavigationProperties = false;
+            this.maxDepth = null;
+        }
+        // Reload attributes when ckTypeId, hideNavigationProperties, or attributePaths changes
+        if ((changes?.['ckTypeId'] || changes?.['hideNavigationProperties'] || changes?.['attributePaths']) && this.ckTypeId) {
             this.loadAttributesFromCkType();
         }
         this.filteredAttributeList = [...this.availableAttributes];
@@ -3950,14 +4021,19 @@ class FieldFilterEditorComponent {
         if (!this.ckTypeId || !this.attributeService)
             return;
         this.isLoadingAttributes = true;
+        const includeNavProps = this.hideNavigationProperties ? false : this.includeNavigationProperties;
         try {
             const result = await firstValueFrom(this.attributeService.getAvailableAttributes(this.ckTypeId, undefined, // filter
             1000, // first
             undefined, // after
             undefined, // attributeValueType
             undefined, // searchTerm
-            this.includeNavigationProperties, this.maxDepth ?? undefined));
-            this.availableAttributes = result.items;
+            includeNavProps, this.maxDepth ?? undefined));
+            // Apply client-side attribute path restriction if set
+            const allowedPathsSet = this.attributePaths ? new Set(this.attributePaths) : null;
+            this.availableAttributes = allowedPathsSet
+                ? result.items.filter(item => allowedPathsSet.has(item.attributePath))
+                : result.items;
             this.filteredAttributeList = [...this.availableAttributes];
             this.buildAttributeTypeMap();
         }
@@ -4294,9 +4370,9 @@ class FieldFilterEditorComponent {
         return values;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldFilterEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FieldFilterEditorComponent, isStandalone: true, selector: "mm-field-filter-editor", inputs: { availableAttributes: "availableAttributes", ckTypeId: "ckTypeId", enableVariables: "enableVariables", availableVariables: "availableVariables", filters: "filters" }, outputs: { filtersChange: "filtersChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FieldFilterEditorComponent, isStandalone: true, selector: "mm-field-filter-editor", inputs: { availableAttributes: "availableAttributes", ckTypeId: "ckTypeId", hideNavigationProperties: "hideNavigationProperties", attributePaths: "attributePaths", enableVariables: "enableVariables", availableVariables: "availableVariables", filters: "filters" }, outputs: { filtersChange: "filtersChange" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="field-filter-editor">
-      @if (ckTypeId) {
+      @if (ckTypeId && !hideNavigationProperties) {
         <div class="attribute-options">
           <label class="inline-checkbox">
             <input type="checkbox" kendoCheckBox
@@ -4565,7 +4641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         IntlModule
                     ], template: `
     <div class="field-filter-editor">
-      @if (ckTypeId) {
+      @if (ckTypeId && !hideNavigationProperties) {
         <div class="attribute-options">
           <label class="inline-checkbox">
             <input type="checkbox" kendoCheckBox
@@ -4822,6 +4898,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 type: Input
             }], ckTypeId: [{
                 type: Input
+            }], hideNavigationProperties: [{
+                type: Input
+            }], attributePaths: [{
+                type: Input
             }], enableVariables: [{
                 type: Input
             }], availableVariables: [{
@@ -5155,6 +5235,159 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 type: Input
             }] } });
 
+class TenantSwitcherComponent {
+    currentTenantId = null;
+    allowedTenants = [];
+    isDenied = false;
+    tenantSelected = new EventEmitter();
+    refreshRequested = new EventEmitter();
+    refreshIcon = arrowRotateCwIcon;
+    isRefreshing = false;
+    anchor = null;
+    popup = null;
+    showPopup = false;
+    onKeydown(event) {
+        if (event.code === 'Escape') {
+            this.showPopup = false;
+        }
+    }
+    onDocumentClick(event) {
+        if (!this.contains(event.target)) {
+            this.showPopup = false;
+        }
+    }
+    onToggle() {
+        if (!this.isDenied) {
+            this.showPopup = !this.showPopup;
+        }
+    }
+    onSelectTenant(tenantId) {
+        if (tenantId !== this.currentTenantId) {
+            this.tenantSelected.emit(tenantId);
+        }
+        this.showPopup = false;
+    }
+    onRefresh(event) {
+        event.stopPropagation();
+        if (!this.isRefreshing) {
+            this.isRefreshing = true;
+            this.refreshRequested.emit();
+            // Reset spinning after a short delay to give visual feedback
+            setTimeout(() => this.isRefreshing = false, 1500);
+        }
+    }
+    contains(target) {
+        return ((this.anchor?.nativeElement.contains(target) ?? false) ||
+            (this.popup?.nativeElement.contains(target) ?? false));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TenantSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TenantSwitcherComponent, isStandalone: true, selector: "mm-tenant-switcher", inputs: { currentTenantId: "currentTenantId", allowedTenants: "allowedTenants", isDenied: "isDenied" }, outputs: { tenantSelected: "tenantSelected", refreshRequested: "refreshRequested" }, host: { listeners: { "document:keydown": "onKeydown($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["badgeEl"], descendants: true, read: ElementRef }, { propertyName: "popup", first: true, predicate: ["popupContent"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    @if (currentTenantId) {
+      <div #badgeEl class="tenant-badge" [class.denied]="isDenied" (click)="onToggle()">
+        <span class="tenant-icon">{{ isDenied ? '\u26A0' : '\u25C6' }}</span>
+        <span class="tenant-name">{{ currentTenantId }}</span>
+        @if (isDenied) {
+          <span class="denied-label">NO ACCESS</span>
+        }
+      </div>
+
+      @if (showPopup && !isDenied) {
+        <kendo-popup #popupContent [anchor]="badgeEl"
+                     (anchorViewportLeave)="showPopup = false">
+          <div class="tenant-popup">
+            <div class="tenant-popup-header">
+              <span>Switch Tenant</span>
+              <button kendoButton fillMode="flat" size="small" class="refresh-btn"
+                      [disabled]="isRefreshing"
+                      title="Refresh tenant list"
+                      (click)="onRefresh($event)">
+                <kendo-svgicon [icon]="refreshIcon" size="small"
+                               [class.spinning]="isRefreshing"></kendo-svgicon>
+              </button>
+            </div>
+            <ul class="tenant-list">
+              @for (tenant of allowedTenants; track tenant) {
+                <li class="tenant-list-item" [class.active]="tenant === currentTenantId"
+                    (click)="onSelectTenant(tenant)">
+                  <span class="tenant-list-icon">&#9670;</span>
+                  <span>{{ tenant }}</span>
+                </li>
+              }
+            </ul>
+          </div>
+        </kendo-popup>
+      }
+    }
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center}.tenant-badge{display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--mm-tenant-switcher-bg, var(--kendo-color-surface, transparent));border:1px solid var(--mm-tenant-switcher-border, var(--kendo-color-border, #dee2e6));border-radius:var(--mm-tenant-switcher-radius, 4px 16px 16px 4px);box-shadow:var(--mm-tenant-switcher-shadow, none);cursor:pointer;transition:all .2s ease}.tenant-badge:hover{background:var(--mm-tenant-switcher-bg-hover, var(--kendo-color-base-hover, rgba(0, 0, 0, .04)));box-shadow:var(--mm-tenant-switcher-shadow-hover, var(--mm-tenant-switcher-shadow, none))}.tenant-icon{font-size:.7rem;color:var(--mm-tenant-switcher-accent, var(--kendo-color-primary, #ff6358));animation:var(--mm-tenant-switcher-icon-animation, none)}.tenant-name{font-family:var(--mm-tenant-switcher-font, inherit);font-size:.85rem;font-weight:600;letter-spacing:1px;color:var(--mm-tenant-switcher-accent, var(--kendo-color-primary, #ff6358));text-transform:uppercase;text-shadow:var(--mm-tenant-switcher-text-shadow, none)}.denied{background:var(--mm-tenant-switcher-denied-bg, var(--mm-tenant-switcher-bg, var(--kendo-color-surface, transparent)));border-color:var(--mm-tenant-switcher-denied-border, var(--kendo-color-error, #d9534f));box-shadow:var(--mm-tenant-switcher-denied-shadow, none)}.denied .tenant-icon,.denied .tenant-name{color:var(--mm-tenant-switcher-denied-accent, var(--kendo-color-error, #d9534f));text-shadow:var(--mm-tenant-switcher-denied-text-shadow, none)}.denied-label{font-family:var(--mm-tenant-switcher-font, inherit);font-size:.55rem;font-weight:700;letter-spacing:1px;color:var(--mm-tenant-switcher-denied-accent, var(--kendo-color-error, #d9534f));background:var(--mm-tenant-switcher-denied-label-bg, color-mix(in srgb, var(--kendo-color-error, #d9534f) 15%, transparent));padding:2px 6px;border-radius:3px}.tenant-popup{min-width:220px;padding:8px 0;background:var(--kendo-color-surface, #fff);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.tenant-popup-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-subtle, #666);border-bottom:1px solid var(--kendo-color-border, #dee2e6);margin-bottom:4px}.refresh-btn{padding:2px;min-width:unset}.spinning{animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tenant-list{list-style:none;margin:0;padding:0}.tenant-list-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;font-size:.85rem;transition:background .15s ease}.tenant-list-item:hover{background:var(--kendo-color-base-hover, rgba(0, 0, 0, .04))}.tenant-list-item.active{color:var(--kendo-color-primary, #ff6358);font-weight:600}.tenant-list-icon{font-size:.5rem;color:var(--kendo-color-subtle, #666)}.tenant-list-item.active .tenant-list-icon{color:var(--kendo-color-primary, #ff6358)}@keyframes mm-icon-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}\n"], dependencies: [{ kind: "component", type: PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TenantSwitcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-tenant-switcher', standalone: true, imports: [
+                        PopupComponent,
+                        ButtonComponent,
+                        SVGIconComponent
+                    ], template: `
+    @if (currentTenantId) {
+      <div #badgeEl class="tenant-badge" [class.denied]="isDenied" (click)="onToggle()">
+        <span class="tenant-icon">{{ isDenied ? '\u26A0' : '\u25C6' }}</span>
+        <span class="tenant-name">{{ currentTenantId }}</span>
+        @if (isDenied) {
+          <span class="denied-label">NO ACCESS</span>
+        }
+      </div>
+
+      @if (showPopup && !isDenied) {
+        <kendo-popup #popupContent [anchor]="badgeEl"
+                     (anchorViewportLeave)="showPopup = false">
+          <div class="tenant-popup">
+            <div class="tenant-popup-header">
+              <span>Switch Tenant</span>
+              <button kendoButton fillMode="flat" size="small" class="refresh-btn"
+                      [disabled]="isRefreshing"
+                      title="Refresh tenant list"
+                      (click)="onRefresh($event)">
+                <kendo-svgicon [icon]="refreshIcon" size="small"
+                               [class.spinning]="isRefreshing"></kendo-svgicon>
+              </button>
+            </div>
+            <ul class="tenant-list">
+              @for (tenant of allowedTenants; track tenant) {
+                <li class="tenant-list-item" [class.active]="tenant === currentTenantId"
+                    (click)="onSelectTenant(tenant)">
+                  <span class="tenant-list-icon">&#9670;</span>
+                  <span>{{ tenant }}</span>
+                </li>
+              }
+            </ul>
+          </div>
+        </kendo-popup>
+      }
+    }
+  `, styles: [":host{display:inline-flex;align-items:center}.tenant-badge{display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--mm-tenant-switcher-bg, var(--kendo-color-surface, transparent));border:1px solid var(--mm-tenant-switcher-border, var(--kendo-color-border, #dee2e6));border-radius:var(--mm-tenant-switcher-radius, 4px 16px 16px 4px);box-shadow:var(--mm-tenant-switcher-shadow, none);cursor:pointer;transition:all .2s ease}.tenant-badge:hover{background:var(--mm-tenant-switcher-bg-hover, var(--kendo-color-base-hover, rgba(0, 0, 0, .04)));box-shadow:var(--mm-tenant-switcher-shadow-hover, var(--mm-tenant-switcher-shadow, none))}.tenant-icon{font-size:.7rem;color:var(--mm-tenant-switcher-accent, var(--kendo-color-primary, #ff6358));animation:var(--mm-tenant-switcher-icon-animation, none)}.tenant-name{font-family:var(--mm-tenant-switcher-font, inherit);font-size:.85rem;font-weight:600;letter-spacing:1px;color:var(--mm-tenant-switcher-accent, var(--kendo-color-primary, #ff6358));text-transform:uppercase;text-shadow:var(--mm-tenant-switcher-text-shadow, none)}.denied{background:var(--mm-tenant-switcher-denied-bg, var(--mm-tenant-switcher-bg, var(--kendo-color-surface, transparent)));border-color:var(--mm-tenant-switcher-denied-border, var(--kendo-color-error, #d9534f));box-shadow:var(--mm-tenant-switcher-denied-shadow, none)}.denied .tenant-icon,.denied .tenant-name{color:var(--mm-tenant-switcher-denied-accent, var(--kendo-color-error, #d9534f));text-shadow:var(--mm-tenant-switcher-denied-text-shadow, none)}.denied-label{font-family:var(--mm-tenant-switcher-font, inherit);font-size:.55rem;font-weight:700;letter-spacing:1px;color:var(--mm-tenant-switcher-denied-accent, var(--kendo-color-error, #d9534f));background:var(--mm-tenant-switcher-denied-label-bg, color-mix(in srgb, var(--kendo-color-error, #d9534f) 15%, transparent));padding:2px 6px;border-radius:3px}.tenant-popup{min-width:220px;padding:8px 0;background:var(--kendo-color-surface, #fff);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.tenant-popup-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--kendo-color-subtle, #666);border-bottom:1px solid var(--kendo-color-border, #dee2e6);margin-bottom:4px}.refresh-btn{padding:2px;min-width:unset}.spinning{animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tenant-list{list-style:none;margin:0;padding:0}.tenant-list-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;font-size:.85rem;transition:background .15s ease}.tenant-list-item:hover{background:var(--kendo-color-base-hover, rgba(0, 0, 0, .04))}.tenant-list-item.active{color:var(--kendo-color-primary, #ff6358);font-weight:600}.tenant-list-icon{font-size:.5rem;color:var(--kendo-color-subtle, #666)}.tenant-list-item.active .tenant-list-icon{color:var(--kendo-color-primary, #ff6358)}@keyframes mm-icon-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}\n"] }]
+        }], propDecorators: { currentTenantId: [{
+                type: Input
+            }], allowedTenants: [{
+                type: Input
+            }], isDenied: [{
+                type: Input
+            }], tenantSelected: [{
+                type: Output
+            }], refreshRequested: [{
+                type: Output
+            }], anchor: [{
+                type: ViewChild,
+                args: ['badgeEl', { read: ElementRef }]
+            }], popup: [{
+                type: ViewChild,
+                args: ['popupContent', { read: ElementRef }]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 /*
  * Public API Surface of octo-ui
  */
@@ -5178,5 +5411,5 @@ function provideOctoUi() {
  * Generated bundle index. Do not edit.
  */
 
-export { AttributeSelectorDialogComponent, AttributeSelectorDialogService, AttributeSortSelectorDialogComponent, AttributeSortSelectorDialogService, AttributeValueTypeDto, CkTypeSelectorDialogComponent, CkTypeSelectorDialogService, CkTypeSelectorInputComponent, DefaultPropertyCategory, EntityIdInfoComponent, FieldFilterEditorComponent, OctoGraphQlDataSource, OctoGraphQlHierarchyDataSource, OctoLoaderComponent, PropertyConverterService, PropertyDisplayMode, PropertyGridComponent, PropertyValueDisplayComponent, RuntimeEntityVariableDialogComponent, RuntimeEntityVariableDialogService, provideOctoUi };
+export { AttributeSelectorDialogComponent, AttributeSelectorDialogService, AttributeSortSelectorDialogComponent, AttributeSortSelectorDialogService, AttributeValueTypeDto, CkTypeSelectorDialogComponent, CkTypeSelectorDialogService, CkTypeSelectorInputComponent, DefaultPropertyCategory, EntityIdInfoComponent, FieldFilterEditorComponent, OctoGraphQlDataSource, OctoGraphQlHierarchyDataSource, OctoLoaderComponent, PropertyConverterService, PropertyDisplayMode, PropertyGridComponent, PropertyValueDisplayComponent, RuntimeEntityVariableDialogComponent, RuntimeEntityVariableDialogService, TenantSwitcherComponent, provideOctoUi };
 //# sourceMappingURL=meshmakers-octo-ui.mjs.map