@ah-oh/ao-workspaces-design-system 0.0.47 → 0.0.49

package/fesm2022/ah-oh-ao-workspaces-design-system.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, inject, signal, Injectable, makeEnvironmentProviders, input, ChangeDetectionStrategy, computed, model, forwardRef, output, DestroyRef, ElementRef, HostListener, viewChild, TemplateRef, Directive, contentChildren, effect, ViewContainerRef, ViewChild, InjectionToken, ApplicationRef, Injector, EnvironmentInjector, createComponent, untracked, Optional, SkipSelf, NgModule, EventEmitter, PLATFORM_ID, Output, Input, Inject, viewChildren } from '@angular/core';
+import { Component, inject, signal, Injectable, makeEnvironmentProviders, input, ChangeDetectionStrategy, computed, model, forwardRef, output, DestroyRef, ElementRef, HostListener, viewChild, TemplateRef, Directive, contentChildren, effect, ViewContainerRef, ViewChild, InjectionToken, ApplicationRef, Injector, EnvironmentInjector, createComponent, runInInjectionContext, untracked, Optional, SkipSelf, NgModule, EventEmitter, PLATFORM_ID, Output, Input, Inject, viewChildren } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet, isPlatformBrowser, DatePipe } from '@angular/common';
 import * as i2 from '@angular/common/http';
 import { withInterceptors, HttpParams, HttpHeaders, HttpRequest, HttpResponse, HttpClient } from '@angular/common/http';
@@ -9,7 +9,7 @@ import { ReactiveFormsModule, NG_VALUE_ACCESSOR, FormsModule, FormControl, Valid
 import * as phosphorIcons from '@ng-icons/phosphor-icons/regular';
 import { phosphorLockSimple, phosphorWarning, phosphorCaretDown, phosphorSquare, phosphorCheckSquare, phosphorMinusSquare, phosphorCaretLeft, phosphorCaretRight, phosphorCalendarBlank, phosphorDotsThreeVertical, phosphorPlus, phosphorTrash, phosphorDatabase, phosphorMagnifyingGlass, phosphorFunnel, phosphorArrowsDownUp, phosphorCaretUp, phosphorPencilSimple, phosphorEye, phosphorArrowClockwise, phosphorArrowCounterClockwise, phosphorMinus, phosphorLink, phosphorCodeBlock, phosphorQuotes, phosphorListNumbers, phosphorListBullets, phosphorTextHThree, phosphorTextHTwo, phosphorTextHOne, phosphorCode, phosphorTextStrikethrough, phosphorTextItalic, phosphorTextB, phosphorCheck, phosphorX, phosphorSparkle, phosphorMicrophone, phosphorArrowRight, phosphorBell, phosphorBookOpenText, phosphorTestTube, phosphorPaperPlaneRight, phosphorClockCounterClockwise, phosphorSignOut, phosphorRobot, phosphorPuzzlePiece, phosphorGearSix, phosphorPenNib, phosphorTreeStructure, phosphorSquaresFour } from '@ng-icons/phosphor-icons/regular';
 import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
-import { Subject, debounceTime, BehaviorSubject, map as map$1, catchError, of, tap, takeUntil, firstValueFrom, filter as filter$1, distinctUntilChanged, switchMap, timer, fromEvent } from 'rxjs';
+import { Subject, debounceTime, BehaviorSubject, map as map$1, catchError, of, tap, takeUntil, throttleTime, asyncScheduler, switchMap, firstValueFrom, filter as filter$1, distinctUntilChanged, timer, fromEvent } from 'rxjs';
 import { Editor } from '@tiptap/core';
 import Link from '@tiptap/extension-link';
 import Placeholder from '@tiptap/extension-placeholder';
@@ -21,7 +21,7 @@ import { Product, AccessRole } from '@ah-oh/ao-workspaces-types';
 import * as i1$1 from '@angular/router';
 import { NavigationEnd, Router } from '@angular/router';
 import RecordRTC from 'recordrtc';
-import { filter, map, throttleTime } from 'rxjs/operators';
+import { filter, map, throttleTime as throttleTime$1 } from 'rxjs/operators';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { MarkdownComponent } from 'ngx-markdown';
 import { CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
@@ -2767,16 +2767,19 @@ class TabsComponent {
     activeTab = model('', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     tabChange = output();
     panels = contentChildren(TabPanelComponent, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            const panelList = this.panels();
-            const currentActiveTab = untracked(() => this.activeTab());
-            if (panelList.length > 0 && !currentActiveTab) {
-                const firstEnabled = panelList.find((p) => !p.disabled());
-                if (firstEnabled) {
-                    this.activeTab.set(firstEnabled.id());
+    injector = inject(Injector);
+    ngAfterViewInit() {
+        runInInjectionContext(this.injector, () => {
+            effect(() => {
+                const panelList = this.panels();
+                const currentActiveTab = untracked(() => this.activeTab());
+                if (panelList.length > 0 && !currentActiveTab) {
+                    const firstEnabled = panelList.find(p => !p.disabled());
+                    if (firstEnabled) {
+                        this.activeTab.set(firstEnabled.id());
+                    }
                 }
-            }
+            });
         });
     }
     selectTab(panel) {
@@ -2788,19 +2791,17 @@ class TabsComponent {
         this.tabChange.emit({ previousTabId, currentTabId: panel.id() });
     }
     onKeydown(event, currentPanel) {
-        const enabledPanels = this.panels().filter((p) => !p.disabled());
-        const currentIndex = enabledPanels.findIndex((p) => p.id() === currentPanel.id());
+        const enabledPanels = this.panels().filter(p => !p.disabled());
+        const currentIndex = enabledPanels.findIndex(p => p.id() === currentPanel.id());
         if (currentIndex === -1)
             return;
         let targetIndex = null;
         switch (event.key) {
             case 'ArrowLeft':
-                targetIndex =
-                    currentIndex > 0 ? currentIndex - 1 : enabledPanels.length - 1;
+                targetIndex = currentIndex > 0 ? currentIndex - 1 : enabledPanels.length - 1;
                 break;
             case 'ArrowRight':
-                targetIndex =
-                    currentIndex < enabledPanels.length - 1 ? currentIndex + 1 : 0;
+                targetIndex = currentIndex < enabledPanels.length - 1 ? currentIndex + 1 : 0;
                 break;
             case 'Home':
                 targetIndex = 0;
@@ -2828,7 +2829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             args: [{ selector: 'ao-tabs', imports: [NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ao-tabs',
                     }, template: "<div class=\"ao-tabs__header\" role=\"tablist\">\n  @for (panel of panels(); track panel.id()) {\n    <button\n      class=\"ao-tabs__tab\"\n      role=\"tab\"\n      type=\"button\"\n      [class.ao-tabs__tab--active]=\"panel.id() === activeTab()\"\n      [class.ao-tabs__tab--disabled]=\"panel.disabled()\"\n      [attr.aria-selected]=\"panel.id() === activeTab()\"\n      [attr.aria-controls]=\"'panel-' + panel.id()\"\n      [attr.aria-disabled]=\"panel.disabled()\"\n      [attr.data-tab-id]=\"panel.id()\"\n      [attr.tabindex]=\"panel.id() === activeTab() ? 0 : -1\"\n      [disabled]=\"panel.disabled()\"\n      (click)=\"selectTab(panel)\"\n      (keydown)=\"onKeydown($event, panel)\"\n    >\n      @if (panel.icon()) {\n        <ao-icon [svg]=\"panel.icon()!\" size=\"sm\" />\n      }\n      {{ panel.label() }}\n    </button>\n  }\n</div>\n<div class=\"ao-tabs__content\">\n  @for (panel of panels(); track panel.id()) {\n    <div\n      class=\"ao-tabs__panel\"\n      role=\"tabpanel\"\n      [id]=\"'panel-' + panel.id()\"\n      [attr.aria-labelledby]=\"panel.id()\"\n      [class.ao-tabs__panel--active]=\"panel.id() === activeTab()\"\n      [attr.hidden]=\"panel.id() !== activeTab() ? true : null\"\n    >\n      @if (panel.id() === activeTab()) {\n        <ng-container [ngTemplateOutlet]=\"panel.panelContent()\" />\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.ao-tabs__header{display:flex;gap:20px;border-bottom:1px solid #e9e9e9}.ao-tabs__tab{font-size:13px;font-weight:700;line-height:19.5px;letter-spacing:0;position:relative;display:inline-flex;align-items:center;gap:5px;padding:10px 5px;background:transparent;border:none;color:#212121;cursor:pointer;transition:color .2s ease}.ao-tabs__tab:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:3px;background:transparent;transition:background-color .2s ease}.ao-tabs__tab:hover:not(:disabled){color:#ff004d}.ao-tabs__tab:focus-visible{outline:2px solid #ff004d;outline-offset:2px}.ao-tabs__tab--active{color:#ff004d}.ao-tabs__tab--active:after{background:#ff004d}.ao-tabs__tab--disabled{color:#909090;cursor:not-allowed}.ao-tabs__content{padding-top:15px}.ao-tabs__panel[hidden]{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabPanelComponent), { isSignal: true }] }] } });
+        }], propDecorators: { activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabPanelComponent), { isSignal: true }] }] } });
 
 class SideNavComponent {
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
@@ -5971,7 +5972,7 @@ const ROBIN_SEARCH_APP_NAME = new InjectionToken('ROBIN_SEARCH_APP_NAME', {
     providedIn: 'root',
     factory: () => 'unknown',
 });
-const QUICK_DEBOUNCE_MS = 200;
+const QUICK_THROTTLE_MS = 200;
 class RobinSearchService {
     http = inject(HttpClient);
     baseUrl = inject(ROBIN_API_BASE_URL);
@@ -5983,8 +5984,12 @@ class RobinSearchService {
     resultGroups = signal([], ...(ngDevMode ? [{ debugName: "resultGroups" }] : /* istanbul ignore next */ []));
     pageSuggestion = signal(null, ...(ngDevMode ? [{ debugName: "pageSuggestion" }] : /* istanbul ignore next */ []));
     aiSuggestions = signal([], ...(ngDevMode ? [{ debugName: "aiSuggestions" }] : /* istanbul ignore next */ []));
-    debounceHandle = null;
-    requestSeq = 0;
+    quickSearchInput$ = new Subject();
+    constructor() {
+        this.quickSearchInput$
+            .pipe(throttleTime(QUICK_THROTTLE_MS, asyncScheduler, { leading: true, trailing: true }), switchMap(({ query, type }) => this.fetchQuickSearch(query, type)))
+            .subscribe((outcome) => this.applyQuickSearchOutcome(outcome));
+    }
     async loadRecommendedFilters() {
         try {
             const params = new HttpParams().set('appName', this.appName);
@@ -5998,9 +6003,6 @@ class RobinSearchService {
     }
     search(query, type) {
         this.query.set(query);
-        if (this.debounceHandle !== null) {
-            clearTimeout(this.debounceHandle);
-        }
         if (!query.trim()) {
             this.resultGroups.set([]);
             this.pageSuggestion.set(null);
@@ -6010,9 +6012,7 @@ class RobinSearchService {
             return;
         }
         this.loading.set(true);
-        this.debounceHandle = setTimeout(() => {
-            void this.runQuickSearch(query, type);
-        }, QUICK_DEBOUNCE_MS);
+        this.quickSearchInput$.next({ query, type });
     }
     async loadFull(query, type, date) {
         let params = new HttpParams().set('q', query).set('appName', this.appName);
@@ -6040,35 +6040,35 @@ class RobinSearchService {
             this.loading.set(false);
         }
     }
-    async runQuickSearch(query, type) {
-        const seq = ++this.requestSeq;
+    fetchQuickSearch(query, type) {
         let params = new HttpParams().set('q', query).set('appName', this.appName);
         if (type)
             params = params.set('type', type);
-        try {
-            const payload = await firstValueFrom(this.http.get(this.url('/search/quick'), { params }));
-            if (seq !== this.requestSeq)
-                return;
-            const safe = payload ?? {};
-            this.resultGroups.set(safe.groups ?? []);
-            this.pageSuggestion.set(safe.pageSuggestion ?? null);
-            this.aiSuggestions.set(safe.aiSuggestions ?? []);
-            this.error.set(null);
-        }
-        catch (err) {
-            if (seq !== this.requestSeq)
-                return;
+        return this.http
+            .get(this.url('/search/quick'), { params })
+            .pipe(map$1((payload) => ({ query, payload, failed: false })), catchError((err) => {
             console.warn('[RobinSearch] quickSearch failed', err);
+            return of({ query, payload: null, failed: true });
+        }));
+    }
+    applyQuickSearchOutcome(outcome) {
+        if (this.query() !== outcome.query) {
+            return;
+        }
+        if (outcome.failed) {
             this.error.set('Suche fehlgeschlagen');
             this.resultGroups.set([]);
             this.pageSuggestion.set(null);
             this.aiSuggestions.set([]);
         }
-        finally {
-            if (seq === this.requestSeq) {
-                this.loading.set(false);
-            }
+        else {
+            const safe = outcome.payload ?? {};
+            this.resultGroups.set(safe.groups ?? []);
+            this.pageSuggestion.set(safe.pageSuggestion ?? null);
+            this.aiSuggestions.set(safe.aiSuggestions ?? []);
+            this.error.set(null);
         }
+        this.loading.set(false);
     }
     url(path) {
         return `${this.baseUrl}${path}`;
@@ -6079,7 +6079,7 @@ class RobinSearchService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: RobinSearchService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class LogoMenuComponent {
     workspaceNavbarService = inject(WorkspaceNavbarService);
@@ -7184,7 +7184,7 @@ class WorkspaceNavbarComponent {
     ngAfterViewInit() {
         if (isPlatformBrowser(this.platformId)) {
             fromEvent(window, 'scroll', { passive: true })
-                .pipe(throttleTime(50), takeUntilDestroyed(this.destroyRef))
+                .pipe(throttleTime$1(50), takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => {
                 const scrollY = window.scrollY ?? window.pageYOffset ?? 0;
                 if (scrollY <= this.scrollThreshold) {