import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, InjectionToken, ViewChild, } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { Subject, filter, fromEvent, map, takeUntil } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/platform-browser";
const _c0 = ["iframe"];
function HelpDocumentComponent_div_16_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "div", 13);
} }
const _c1 = function (a0) { return { is_small: a0, "frame-body": true }; };
export const TOKEN_HELP_DOC_DATA = new InjectionToken('help document data context');
const DOC_WINDOW_SMALL_SIZE_THRESHOLD = 770;
export class HelpDocumentComponent {
    constructor(data, cdr, sanitizer) {
        this.data = data;
        this.cdr = cdr;
        this.sanitizer = sanitizer;
        this.overlay = false;
        this.currentHref = this.data.rawUrl;
        this.small = true;
        this.destroy$$ = new Subject();
        this.close = new EventEmitter();
        // 等一个tick
        this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.data.rawUrl);
        fromEvent(window, 'message')
            .pipe(map((evt) => {
            try {
                return JSON.parse(evt.data);
            }
            catch {
                return null;
            }
        }), takeUntil(this.destroy$$), filter(i => !!i))
            .subscribe(data => {
            this.currentHref = data.href;
            this.cdr.markForCheck();
        });
    }
    onResized({ width }) {
        this.small = width < DOC_WINDOW_SMALL_SIZE_THRESHOLD;
        this.cdr.markForCheck();
    }
    back() {
        if (this.currentHref !== this.data.rawUrl) {
            this.frame.nativeElement.setAttribute('src', this.data.rawUrl);
        }
    }
    ngOnDestroy() {
        this.destroy$$.next();
    }
}
HelpDocumentComponent.ɵfac = function HelpDocumentComponent_Factory(t) { return new (t || HelpDocumentComponent)(i0.ɵɵdirectiveInject(TOKEN_HELP_DOC_DATA), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.DomSanitizer)); };
HelpDocumentComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HelpDocumentComponent, selectors: [["ng-component"]], viewQuery: function HelpDocumentComponent_Query(rf, ctx) { if (rf & 1) {
        i0.ɵɵviewQuery(_c0, 5);
    } if (rf & 2) {
        let _t;
        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.frame = _t.first);
    } }, decls: 17, vars: 12, consts: [["aclMutable", "", "aclDragBoundary", "html", 1, "resize-wrapper", "wrapper", 3, "aclDragStarted", "aclDragEnded", "aclResizeStarted", "aclResizeEnded"], ["container", ""], ["aclDragHandle", "", 1, "header"], ["icon", "basic:arrow_left_s", "size", "16px", 1, "icon-btn", "mr-4", 3, "click"], [2, "flex", "1"], ["icon", "close", "size", "16px", 1, "icon-btn", 3, "click"], [1, "content"], ["aclResize", "", 3, "ngClass", "resized"], ["iframe", ""], [1, "bar_open-new"], ["target", "_blank", "rel", "noopener noreferrer", 3, "href"], ["icon", "basic:jump", "margin", "left"], ["class", "mask", 4, "ngIf"], [1, "mask"]], template: function HelpDocumentComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵelementStart(0, "div", 0, 1);
        i0.ɵɵlistener("aclDragStarted", function HelpDocumentComponent_Template_div_aclDragStarted_0_listener() { return ctx.overlay = true; })("aclDragEnded", function HelpDocumentComponent_Template_div_aclDragEnded_0_listener() { return ctx.overlay = false; })("aclResizeStarted", function HelpDocumentComponent_Template_div_aclResizeStarted_0_listener() { return ctx.overlay = true; })("aclResizeEnded", function HelpDocumentComponent_Template_div_aclResizeEnded_0_listener() { return ctx.overlay = false; });
        i0.ɵɵelementStart(2, "div", 2)(3, "aui-icon", 3);
        i0.ɵɵlistener("click", function HelpDocumentComponent_Template_aui_icon_click_3_listener() { return ctx.back(); });
        i0.ɵɵelementEnd();
        i0.ɵɵtext(4);
        i0.ɵɵpipe(5, "translate");
        i0.ɵɵelement(6, "div", 4);
        i0.ɵɵelementStart(7, "aui-icon", 5);
        i0.ɵɵlistener("click", function HelpDocumentComponent_Template_aui_icon_click_7_listener() { return ctx.close.next(); });
        i0.ɵɵelementEnd()();
        i0.ɵɵelementStart(8, "div", 6)(9, "iframe", 7, 8);
        i0.ɵɵlistener("resized", function HelpDocumentComponent_Template_iframe_resized_9_listener($event) { return ctx.onResized($event); });
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(11, "div", 9)(12, "a", 10);
        i0.ɵɵtext(13);
        i0.ɵɵpipe(14, "translate");
        i0.ɵɵelement(15, "aui-icon", 11);
        i0.ɵɵelementEnd()()();
        i0.ɵɵtemplate(16, HelpDocumentComponent_div_16_Template, 1, 0, "div", 12);
        i0.ɵɵelementEnd();
    } if (rf & 2) {
        i0.ɵɵadvance(4);
        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 6, ctx.data.title), " ");
        i0.ɵɵadvance(5);
        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1, ctx.small));
        i0.ɵɵattribute("src", ctx.safeUrl, i0.ɵɵsanitizeResourceUrl);
        i0.ɵɵadvance(3);
        i0.ɵɵproperty("href", ctx.currentHref, i0.ɵɵsanitizeUrl);
        i0.ɵɵadvance(1);
        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(14, 8, "open_in_doc_center"), "");
        i0.ɵɵadvance(3);
        i0.ɵɵproperty("ngIf", ctx.overlay);
    } }, styles: [".wrapper[_ngcontent-%COMP%]{z-index:1000;height:548px;width:456px;display:flex;position:fixed;top:92px;right:-2px;flex-direction:column;justify-content:stretch;border:3px solid transparent}.header[_ngcontent-%COMP%]{height:44px;position:absolute;left:0;right:0;background-color:rgb(var(--aui-color-n-1));color:rgb(var(--aui-color-n-4));display:flex;box-sizing:border-box;padding:12px 24px;justify-content:space-between;align-items:center;font-size:16px;line-height:20px;cursor:move}.content[_ngcontent-%COMP%]{width:100%;max-width:100%;flex:1;overflow:auto;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-n-10));box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.16);display:flex;height:100%;flex-direction:column;align-items:stretch}.resize-wrapper[_ngcontent-%COMP%]{flex:1;display:flex;flex-direction:column}.mask[_ngcontent-%COMP%]{top:44px;right:0;left:0;bottom:0;z-index:100;position:absolute}.icon-btn[_ngcontent-%COMP%]{color:rgb(var(--aui-color-n-4))}.icon-btn[_ngcontent-%COMP%]:hover{color:rgb(var(--aui-color-n-10));cursor:pointer}.frame-body[_ngcontent-%COMP%]{width:100%;height:100%;flex:1;margin:16px 0 32px}.frame-body.is_small[_ngcontent-%COMP%]{margin-top:-66px}.bar_open-new[_ngcontent-%COMP%]{display:flex;align-items:center;height:32px;padding-left:24px;position:absolute;bottom:0;width:100%;box-shadow:0 -1px 2px #0000001a}"], changeDetection: 0 });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HelpDocumentComponent, [{
        type: Component,
        args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  aclMutable\n  aclDragBoundary=\"html\"\n  (aclDragStarted)=\"overlay = true\"\n  (aclDragEnded)=\"overlay = false\"\n  (aclResizeStarted)=\"overlay = true\"\n  (aclResizeEnded)=\"overlay = false\"\n  class=\"resize-wrapper wrapper\"\n  #container\n>\n  <div\n    class=\"header\"\n    aclDragHandle\n  >\n    <aui-icon\n      icon=\"basic:arrow_left_s\"\n      size=\"16px\"\n      (click)=\"back()\"\n      class=\"icon-btn mr-4\"\n    ></aui-icon>\n    {{ data.title | translate }}\n    <div style=\"flex: 1\"></div>\n    <aui-icon\n      icon=\"close\"\n      size=\"16px\"\n      (click)=\"close.next()\"\n      class=\"icon-btn\"\n    ></aui-icon>\n  </div>\n  <div class=\"content\">\n    <iframe\n      #iframe\n      aclResize\n      (resized)=\"onResized($event)\"\n      [attr.src]=\"safeUrl\"\n      [ngClass]=\"{\n        is_small: small,\n        'frame-body': true\n      }\"\n    ></iframe>\n\n    <div class=\"bar_open-new\">\n      <a\n        [href]=\"currentHref\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        {{ 'open_in_doc_center' | translate\n        }}<aui-icon\n          icon=\"basic:jump\"\n          margin=\"left\"\n        ></aui-icon>\n      </a>\n    </div>\n  </div>\n\n  <div\n    class=\"mask\"\n    *ngIf=\"overlay\"\n  ></div>\n</div>\n", styles: [".wrapper{z-index:1000;height:548px;width:456px;display:flex;position:fixed;top:92px;right:-2px;flex-direction:column;justify-content:stretch;border:3px solid transparent}.header{height:44px;position:absolute;left:0;right:0;background-color:rgb(var(--aui-color-n-1));color:rgb(var(--aui-color-n-4));display:flex;box-sizing:border-box;padding:12px 24px;justify-content:space-between;align-items:center;font-size:16px;line-height:20px;cursor:move}.content{width:100%;max-width:100%;flex:1;overflow:auto;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-n-10));box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.16);display:flex;height:100%;flex-direction:column;align-items:stretch}.resize-wrapper{flex:1;display:flex;flex-direction:column}.mask{top:44px;right:0;left:0;bottom:0;z-index:100;position:absolute}.icon-btn{color:rgb(var(--aui-color-n-4))}.icon-btn:hover{color:rgb(var(--aui-color-n-10));cursor:pointer}.frame-body{width:100%;height:100%;flex:1;margin:16px 0 32px}.frame-body.is_small{margin-top:-66px}.bar_open-new{display:flex;align-items:center;height:32px;padding-left:24px;position:absolute;bottom:0;width:100%;box-shadow:0 -1px 2px #0000001a}\n"] }]
    }], function () { return [{ type: undefined, decorators: [{
                type: Inject,
                args: [TOKEN_HELP_DOC_DATA]
            }] }, { type: i0.ChangeDetectorRef }, { type: i1.DomSanitizer }]; }, { frame: [{
            type: ViewChild,
            args: ['iframe']
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 