{"version":3,"sources":["common/dialogs/dialog-base.ts"],"names":["html","render","nothing","addTranslation","determineTranslation","DialogBase","HTMLElement","constructor","super","this","titleTemplate","bodyTemplate","buttonsTemplate","translations","template","title","dialogLabels","close","handleClose","bind","name","value","onBeforeOpen","onBeforeClose","configure","locale","localValues","show","await","renderView","adjustBeforeOpen","dialog","showModal","returnValue","open","length","adjustBeforeClose","onDialogInternalClose","val","document","body","style","overflow","classList","remove","add","removeProperty","setTimeout","connectedCallback","createElement","addEventListener","appendChild"],"mappings":"OAISA,KAAMC,OAAQC,OAAyB,KAAV,kBAC7BC,eAAgBC,oBAAqD,KAAzB,gCAE/BC,mBAAmBC,YAIrCC,cACIC,MAAK,EAOFC,KAAAC,cAA2B,IAAM,KACjCD,KAAAE,aAA0B,IAAM,KAChCF,KAAAG,gBAA6B,IAAM,KAWhCH,KAAAI,aAAe,GAuDjBJ,KAAAK,SAAW,KACf,IAAMJ,EAAgBD,KAAKC,cAAa,EAClCE,EAAkBH,KAAKG,gBAAe,EAuB5C,OArBiBZ;;kBAEPU,EACIV,OAAOU,IACPV,gCAAgCS,KAAKM;qFAC0BN,KAAKO,aAAaC;6BAC1ER,KAAKS,YAAYC,KAAKV,IAAI,WAAWA,KAAKO,aAAaC;;;;;sBAK9DR,KAAKE,aAAY;;;;kBAIrBC,EACIZ,mCAAmCY,UACnCV;;mBAKlB,EAnGIO,KAAKN,eAAe,KAAM,CAAC,CAACiB,KAAK,QAASC,MAAM,OAAO,EAAE,EACzDZ,KAAKN,eAAe,KAAM,CAAC,CAACiB,KAAK,QAASC,MAAM,MAAM,EAAE,CAC5D,CASUC,sBACAC,uBACAC,mBAOHrB,eAAesB,EAAgBC,GAClCvB,eAAeM,KAAKI,aAAcY,EAAQC,CAAW,EACrDjB,KAAKO,aAAeZ,qBAAqBK,KAAKI,YAAY,CAC9D,CAKOc,aACHC,MAAMnB,KAAKa,aAAY,EACvBM,MAAMnB,KAAKoB,WAAU,EACrBD,MAAMnB,KAAKqB,iBAAgB,EAC3BrB,KAAKsB,OAAOJ,KAAI,CACpB,CAEOK,kBACHJ,MAAMnB,KAAKa,aAAY,EACvBM,MAAMnB,KAAKoB,WAAU,EACrBD,MAAMnB,KAAKqB,iBAAgB,EAC3BrB,KAAKsB,OAAOC,UAAS,CACzB,CAEOf,YAAYgB,GACVxB,KAAKsB,QAAWtB,KAAKsB,OAAOG,OAI5BD,GAAgBA,EAAYE,SAC7B1B,KAAKsB,OAAOE,YAAc,IAG9BL,MAAMnB,KAAKc,cAAa,EACxBK,MAAMnB,KAAK2B,kBAAiB,EAC5B3B,KAAKsB,OAAOd,MAAMgB,CAAW,EACjC,CAEQI,8BACJT,MAAMnB,KAAKc,cAAa,EACxBK,MAAMnB,KAAK2B,kBAAiB,CAChC,CAEAH,kBACI,OAAOxB,KAAKsB,QAAQE,WACxB,CAEAA,gBAAuBK,GACf7B,KAAKsB,SACLtB,KAAKsB,OAAOE,YAAcK,EAElC,CAgCQT,mBACJ5B,OAAOQ,KAAKK,SAAQ,EAAIL,KAAKsB,MAAM,EACnCH,MAAMnB,KAAKe,UAAS,CACxB,CAEQM,yBACJS,SAASC,KAAKC,MAAMC,SAAW,SAC/BjC,KAAKsB,OAAOY,UAAUC,OAAO,QAAQ,EACrCnC,KAAKsB,OAAOY,UAAUE,IAAI,QAAQ,CACtC,CAEQT,0BACJG,SAASC,KAAKC,MAAMK,eAAe,UAAU,EAC7CrC,KAAKsB,OAAOY,UAAUC,OAAO,QAAQ,EACrCnC,KAAKsB,OAAOY,UAAUE,IAAI,QAAQ,CACtC,CAKQ3B,oBACJ6B,WAAW,IAAMtC,KAAKQ,MAAK,EAAI,GAAG,CACtC,CAGA+B,oBACIvC,KAAKsB,OAASQ,SAASU,cAAc,QAAQ,EAC7CxC,KAAKsB,OAAOY,UAAUE,IAAI,YAAY,EACtCpC,KAAKsB,OAAOY,UAAUE,IAAI,aAAa,EACvCpC,KAAKsB,OAAOmB,iBAAiB,QAASzC,KAAK4B,sBAAsBlB,KAAKV,IAAI,CAAC,EAC3E8B,SAASC,KAAKW,YAAY1C,KAAKsB,MAAM,CACzC,C,QA3IkB1B,U","file":"dialog-base.js","sourcesContent":["// Note: Customized built-in element support (https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements)\r\n// can not be used for now, because it is not supported by some of the modern browsers:\r\n// https://caniuse.com/mdn-api_customelementregistry_builtin_element_support\r\n\r\nimport { html, render, nothing } from 'lit-html';\r\nimport { addTranslation, determineTranslation } from \"../../utils/language.js\";\r\n\r\nexport abstract class DialogBase extends HTMLElement {\r\n\r\n    private dialog: HTMLDialogElement;\r\n\r\n    constructor() {\r\n        super();\r\n\r\n        this.addTranslation(\"en\", [{name:'close', value:'Close'}])\r\n        this.addTranslation(\"no\", [{name:'close', value:'Lukk'}])\r\n    }\r\n\r\n    // #region Markup\r\n    public titleTemplate: () => any = () => null;\r\n    public bodyTemplate: () => any = () => null;\r\n    public buttonsTemplate: () => any = () => null;\r\n    // #endregion\r\n\r\n    // #region Protected\r\n    protected async onBeforeOpen(): Promise<void> {};\r\n    protected async onBeforeClose(): Promise<void> {};\r\n    protected async configure(): Promise<void> {};\r\n    // #endregion\r\n\r\n    // #region Translations\r\n\r\n    protected translations = {};\r\n    protected dialogLabels: { [key: string]:any };\r\n    public addTranslation(locale: string, localValues: {name: string; value: string}[]): void {\r\n        addTranslation(this.translations, locale, localValues);\r\n        this.dialogLabels = determineTranslation(this.translations);\r\n    }\r\n\r\n    //#endregion\r\n\r\n    // #region Public\r\n    public async show(): Promise<void> {\r\n        await this.onBeforeOpen();\r\n        await this.renderView();\r\n        await this.adjustBeforeOpen();\r\n        this.dialog.show();\r\n    }\r\n\r\n    public async showModal(): Promise<void> {\r\n        await this.onBeforeOpen();\r\n        await this.renderView();\r\n        await this.adjustBeforeOpen();\r\n        this.dialog.showModal();\r\n    }\r\n\r\n    public async close(returnValue?: string): Promise<void> {\r\n        if (!this.dialog || !this.dialog.open) {\r\n            return;\r\n        }\r\n\r\n        if (!returnValue || !returnValue.length) {\r\n            this.dialog.returnValue = \"\";\r\n        }\r\n\r\n        await this.onBeforeClose();\r\n        await this.adjustBeforeClose();\r\n        this.dialog.close(returnValue);\r\n    }\r\n\r\n    private async onDialogInternalClose() {\r\n        await this.onBeforeClose();\r\n        await this.adjustBeforeClose();\r\n    }\r\n\r\n    public get returnValue() {\r\n        return this.dialog?.returnValue;\r\n    }\r\n\r\n    public set returnValue(val: string) {\r\n        if (this.dialog) {\r\n            this.dialog.returnValue = val;\r\n        }\r\n    }\r\n    // #endregion\r\n\r\n    // #region Private\r\n    private template = (): any => {\r\n        const titleTemplate = this.titleTemplate();\r\n        const buttonsTemplate = this.buttonsTemplate();\r\n\r\n        const template = html`\r\n            <div class=\"dialog-header\">\r\n                ${titleTemplate\r\n                    ? html`${titleTemplate}`\r\n                    : html`<h4 class=\"dialog-title\">${this.title}</h4>`}\r\n                <button type=\"button\" class=\"btn btn-icon dialog-btn-close\" title=\"${this.dialogLabels.close}\"\r\n                    @click=${this.handleClose.bind(this)}><span>${this.dialogLabels.close}</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"dialog-body\">\r\n                <div class=\"dialog-content\">\r\n                    ${this.bodyTemplate()}\r\n                </div>\r\n            </div>\r\n            <div class=\"dialog-footer\">\r\n                ${buttonsTemplate\r\n                    ? html`<div class=\"dialog-buttons\">${buttonsTemplate}</div>`\r\n                    : nothing}\r\n                </div>\r\n            </div>`\r\n\r\n        return template;\r\n    };\r\n\r\n    private async renderView(): Promise<void> {\r\n        render(this.template(), this.dialog);\r\n        await this.configure();\r\n    }\r\n\r\n    private async adjustBeforeOpen(): Promise<void>{\r\n        document.body.style.overflow = \"hidden\";\r\n        this.dialog.classList.remove('d-none');\r\n        this.dialog.classList.add('d-flex');\r\n    }\r\n\r\n    private async adjustBeforeClose(): Promise<void>{\r\n        document.body.style.removeProperty(\"overflow\");\r\n        this.dialog.classList.remove('d-flex');\r\n        this.dialog.classList.add('d-none');\r\n    }\r\n\r\n    // #endregion\r\n\r\n    // #region Event handlers\r\n    private async handleClose() {\r\n        setTimeout(() => this.close(), 100);\r\n    }\r\n    // #endregion\r\n\r\n    connectedCallback() {\r\n        this.dialog = document.createElement(\"dialog\");\r\n        this.dialog.classList.add(\"cms-dialog\");\r\n        this.dialog.classList.add(\"flex-column\");\r\n        this.dialog.addEventListener(\"close\", this.onDialogInternalClose.bind(this));\r\n        document.body.appendChild(this.dialog);\r\n    }\r\n}\r\n"]}