@progress/kendo-vue-dialogs/Dialog.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as I, createVNode as n } from "vue";
import { DialogTitleBar as C } from "./DialogTitleBar.mjs";
import { templateRendering as y, getListeners as k, getDefaultSlots as D, WatermarkOverlay as S, guid as h, Keys as $, hasListener as x, validatePackage as b, shouldShowValidationUI as v, getLicenseMessage as L } from "@progress/kendo-vue-common";
import { packageMetadata as d } from "./package-metadata.mjs";
import { DEFAULT_DIALOGS_ZINDEX as W } from "./constants.mjs";
const K = /* @__PURE__ */ I({
  name: "KendoDialog",
  emits: {
    close: (e) => !0,
    overlayclick: null
  },
  props: {
    appendTo: String,
    title: String,
    titleRender: [String, Function],
    id: String,
    wrapperId: String,
    dir: String,
    closeIcon: {
      type: Boolean,
      default: !0
    },
    modal: {
      type: Boolean,
      default: !0
    },
    width: [String, Number],
    height: [String, Number],
    minWidth: [String, Number],
    className: String,
    dialogClass: String,
    onClose: Function
  },
  provide() {
    return {
      kCurrentZIndex: W
    };
  },
  data() {
    return {
      showLicenseWatermark: !1,
      licenseMessage: void 0
    };
  },
  created() {
    b(d), this.showLicenseWatermark = v(d), this.licenseMessage = L(d), this.titleId = this.generateTitleId(), this.contentId = this.generateContentId();
  },
  computed: {
    wrapperClass() {
      const {
        className: e
      } = this.$props;
      return {
        "k-dialog-wrapper": !0,
        [e]: e
      };
    },
    dialogElementClass() {
      const {
        dialogClass: e
      } = this.$props;
      return {
        "k-window": !0,
        "k-dialog": !0,
        [e]: e
      };
    }
  },
  mounted() {
    const e = this.$props.appendTo ? document.querySelector(this.$props.appendTo) : document.body;
    e && (this.windowElement = this.$el, e.appendChild(this.windowElement));
  },
  beforeUnmount() {
    var e;
    (e = this.windowElement) != null && e.parentNode && this.windowElement.remove();
  },
  methods: {
    handleCloseDialog(e) {
      e.preventDefault(), this.$emit("close", {
        event: e,
        target: this
      });
    },
    handleKeyDown(e) {
      e.keyCode === $.esc && x.call(this, "close") && (e.preventDefault(), this.handleCloseDialog(e));
    },
    transformDimesion(e) {
      return typeof e == "string" && (e.endsWith("px") || e.endsWith("%")) ? e : e + "px";
    },
    getActionBarIndex(e) {
      return e.findIndex((t) => t && t.tag && t.tag.toLowerCase().indexOf("dialogactionsbar") !== -1 || t.componentOptions && t.componentOptions.tag && t.componentOptions.tag.toLowerCase().indexOf("actions-bar") !== -1 || t.type && t.type.name && t.type.name.toLowerCase().indexOf("dialogactionsbar") !== -1);
    },
    generateTitleId() {
      return "dialog-title" + h();
    },
    generateContentId() {
      return "dialog-content" + h();
    },
    handleClick(e) {
      this.$emit("overlayclick", e);
    }
  },
  render() {
    const e = this.$props.id !== void 0 ? this.$props.id : this.titleId;
    let {
      title: o,
      width: t,
      height: s,
      minWidth: r,
      dir: m,
      contentStyle: g,
      wrapperId: u
    } = this.$props;
    const a = this.$props.titleRender ? y.call(this, this.$props.titleRender, k.call(this)) : null, i = D(this) || [];
    t = this.transformDimesion(t), s = this.transformDimesion(s), r = this.transformDimesion(r);
    const f = this.showLicenseWatermark ? n(S, {
      message: this.licenseMessage
    }, null) : null, l = this.getActionBarIndex(i);
    let p;
    l !== -1 && (p = i[l], i.splice(l, 1));
    const w = this.$props.closeIcon !== void 0 ? this.$props.closeIcon : !0, c = n("div", {
      ref: "wrapper",
      class: this.wrapperClass,
      onKeydown: this.handleKeyDown,
      tabindex: 0,
      id: u,
      dir: m
    }, [this.$props.modal && n("div", {
      class: "k-overlay",
      onClick: this.handleClick
    }, null), n("div", {
      "aria-labelledby": o || a ? e : void 0,
      "aria-describedby": this.contentId,
      "aria-modal": this.$props.modal || void 0,
      class: this.dialogElementClass,
      role: "dialog",
      style: {
        width: t,
        height: s,
        minWidth: r,
        overflow: "hidden"
      }
    }, [(o || a) && n(C, {
      closeIcon: w,
      onClosebuttonclick: this.handleCloseDialog,
      id: e,
      title: o,
      titleRender: a
    }, null), n("div", {
      class: "k-window-content k-dialog-content",
      style: g,
      id: this.contentId
    }, [i]), p, f])]);
    return this.$props.appendTo ? n("div", null, [c]) : c;
  }
});
export {
  K as Dialog
};