@meshmakers/octo-ui 3.3.590 → 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 {
@@ -5235,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
  */
@@ -5258,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