taon-ui 19.0.30 → 21.0.2

package/browser/fesm2022/taon-ui.mjs

@@ -3,6 +3,7 @@ import { EventEmitter, HostListener, HostBinding, Output, Input, Directive, Pipe
 import { _, json5, Helpers } from 'tnp-core/browser';
 import { Log, Level } from 'ng2-logger/browser';
 import * as i1 from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i5$1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
@@ -52,7 +53,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
 import * as i2$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgIf } from '@angular/common';
 import { Resource } from 'ng2-rest/browser';
 import * as i1$1 from '@ngneat/hot-toast';
 import { __decorate, __metadata } from 'tslib';
@@ -72,6 +73,8 @@ import { StaticColumnsModule } from 'static-columns/browser';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i4 from 'ngx-scrollbar';
 import { NgScrollbarModule } from 'ngx-scrollbar';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
+import { distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, filter } from 'rxjs/operators';
 import * as i2$3 from '@ng-bootstrap/ng-bootstrap';
 import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
 import { ModalModule } from 'ngx-bootstrap/modal';
@@ -1230,6 +1233,188 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 args: ['window:resize', ['$event']]
             }] } });
 
+// iframe-sync.component.ts
+// taon-iframe-sync.component.ts
+class TaonIframeSyncComponent {
+    constructor() {
+        this.loaderBackgroundColor = 'white';
+        this.destroy$ = new Subject();
+        this.iframeWin = null;
+        // This is the key: iframe stays hidden until first correct page is confirmed loaded
+        this.isReady = false;
+        this.hasInitialSync = false;
+        this.queryParamKey = 'internalIframePath';
+        this.initialPath = null;
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        this.sanitizer = inject(DomSanitizer);
+        // This is called when iframe confirms: "Yes, I loaded the correct page!"
+        this.handleIframeMessage = (event) => {
+            const expected = this.targetOrigin ?? this.getSafeOrigin(this.iframeSrc);
+            if (event.origin !== expected)
+                return;
+            // NEW: iframe tells us when it's truly ready
+            if (event.data?.type === 'IFRAME_READY') {
+                this.isReady = true; // NOW show the iframe!
+                return;
+            }
+            if (event.data?.type === 'IFRAME_PATH_UPDATE') {
+                const path = event.data.path || '/';
+                this.router.navigate([], {
+                    queryParams: { [this.queryParamKey]: path === '/' ? null : path },
+                    queryParamsHandling: 'merge',
+                    replaceUrl: true,
+                });
+            }
+        };
+    }
+    // ... same inputs as before
+    #src;
+    set iframeSrc(v) {
+        this.#src = v.trim();
+        this.safeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.#src);
+    }
+    get iframeSrc() {
+        return this.#src;
+    }
+    ngAfterViewInit() {
+        this.setupSync();
+        window.addEventListener('message', this.handleIframeMessage);
+    }
+    setupSync() {
+        this.route.queryParamMap
+            .pipe(distinctUntilChanged$1((a, b) => a.get(this.queryParamKey) === b.get(this.queryParamKey)), takeUntil$1(this.destroy$))
+            .subscribe(() => this.sendNavigateIfReady());
+        this.router.events
+            .pipe(filter((e) => e instanceof NavigationEnd), takeUntil$1(this.destroy$))
+            .subscribe(() => this.sendNavigateIfReady());
+    }
+    onIframeLoad() {
+        this.iframeWin = this.iframeRef?.nativeElement?.contentWindow;
+        // Send the correct path — iframe will load it
+        this.sendNavigateIfReady();
+        // The real magic: wait for iframe to confirm it loaded the right page
+        // (we'll enhance the iframe script to send a "READY" message)
+    }
+    sendNavigateIfReady() {
+        if (!this.iframeWin ||
+            !this.isValidUrl(this.iframeSrc) ||
+            this.hasInitialSync)
+            return;
+        const path = this.route.snapshot.queryParamMap.get(this.queryParamKey) ??
+            this.initialPath ??
+            '/';
+        const origin = this.targetOrigin ?? this.getSafeOrigin(this.iframeSrc);
+        this.iframeWin.postMessage({ type: 'NAVIGATE', path }, origin);
+        this.hasInitialSync = true;
+    }
+    // ────── Safe URL helpers ──────
+    isValidUrl(string) {
+        if (!string)
+            return false;
+        try {
+            new URL(string, window.location.origin);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    getSafeOrigin(src) {
+        if (!src)
+            return window.location.origin;
+        try {
+            // Full URL
+            if (src.startsWith('http')) {
+                return new URL(src).origin;
+            }
+            // Relative path
+            if (src.startsWith('/')) {
+                return window.location.origin;
+            }
+            // Protocol-relative
+            if (src.startsWith('//')) {
+                return new URL(src, window.location.origin).origin;
+            }
+            // Just return current origin for anything else
+            return window.location.origin;
+        }
+        catch {
+            return window.location.origin;
+        }
+    }
+    // ... rest of helpers (isValidUrl, getSafeOrigin) same as before
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        window.removeEventListener('message', this.handleIframeMessage);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TaonIframeSyncComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TaonIframeSyncComponent, isStandalone: true, selector: "taon-iframe-sync", inputs: { loaderBackgroundColor: "loaderBackgroundColor", iframeSrc: "iframeSrc", queryParamKey: "queryParamKey", initialPath: "initialPath", targetOrigin: "targetOrigin" }, viewQueries: [{ propertyName: "iframeRef", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: `
+    <!-- Hidden by default, shown only when ready -->
+    <iframe
+      #iframe
+      [src]="safeSrc"
+      [style.display]="isReady ? 'block' : 'none'"
+      [style.visibility]="isReady ? 'visible' : 'hidden'"
+      [style.opacity]="isReady ? '1' : '0'"
+      frameborder="0"
+      style="width:100%; height:100%; border:none; transition: opacity 0.2s ease;"
+      (load)="onIframeLoad()"
+      allow="clipboard-write"></iframe>
+
+    <!-- Optional: nice loading placeholder -->
+    <div
+      *ngIf="!isReady"
+      class="iframe-loading-placeholder"
+      [style.background]="loaderBackgroundColor"
+      >
+      <div class="spinner"></div>
+      <p>Loading documentation...</p>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%;position:relative}.iframe-loading-placeholder{position:absolute;inset:0;background:var(--md-primary-fg-color--light);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--text-color, #666);font-family:system-ui,sans-serif}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TaonIframeSyncComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-iframe-sync', template: `
+    <!-- Hidden by default, shown only when ready -->
+    <iframe
+      #iframe
+      [src]="safeSrc"
+      [style.display]="isReady ? 'block' : 'none'"
+      [style.visibility]="isReady ? 'visible' : 'hidden'"
+      [style.opacity]="isReady ? '1' : '0'"
+      frameborder="0"
+      style="width:100%; height:100%; border:none; transition: opacity 0.2s ease;"
+      (load)="onIframeLoad()"
+      allow="clipboard-write"></iframe>
+
+    <!-- Optional: nice loading placeholder -->
+    <div
+      *ngIf="!isReady"
+      class="iframe-loading-placeholder"
+      [style.background]="loaderBackgroundColor"
+      >
+      <div class="spinner"></div>
+      <p>Loading documentation...</p>
+    </div>
+  `, standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%;position:relative}.iframe-loading-placeholder{position:absolute;inset:0;background:var(--md-primary-fg-color--light);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--text-color, #666);font-family:system-ui,sans-serif}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { loaderBackgroundColor: [{
+                type: Input
+            }], iframeRef: [{
+                type: ViewChild,
+                args: ['iframe']
+            }], iframeSrc: [{
+                type: Input,
+                args: [{ required: true }]
+            }], queryParamKey: [{
+                type: Input
+            }], initialPath: [{
+                type: Input
+            }], targetOrigin: [{
+                type: Input
+            }] } });
+
 //#region @browser
 //#endregion
 
@@ -1261,5 +1446,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SafePipe, TaonAdminModeConfigurationComponent, TaonBootstrapNavbarComponent, TaonFullMaterialModule, TaonGithubForkMeCornerComponent, TaonGithubForkMeCornerModule, TaonGithubForkMeRibbonComponent, TaonGithubForkMeRibbonModule, TaonInjectHTMLDirective, TaonLongPress, TaonNotificationOptions, TaonNotificationsComponent, TaonNotificationsModule, TaonNotificationsService, TaonProgressBarComponent, TaonProgressBarModule, TaonSessionPasscodeComponent, TaonTableComponent, TaonTableModule };
+export { SafePipe, TaonAdminModeConfigurationComponent, TaonBootstrapNavbarComponent, TaonFullMaterialModule, TaonGithubForkMeCornerComponent, TaonGithubForkMeCornerModule, TaonGithubForkMeRibbonComponent, TaonGithubForkMeRibbonModule, TaonIframeSyncComponent, TaonInjectHTMLDirective, TaonLongPress, TaonNotificationOptions, TaonNotificationsComponent, TaonNotificationsModule, TaonNotificationsService, TaonProgressBarComponent, TaonProgressBarModule, TaonSessionPasscodeComponent, TaonTableComponent, TaonTableModule };
 //# sourceMappingURL=taon-ui.mjs.map