@useinsider/guido 3.16.0 → 3.17.0-beta.3e9d6e7

package/dist/node_modules/@useinsider/design-system-organisms/node_modules/@useinsider/design-system-vue/dist/InDrawer.js

@@ -0,0 +1,166 @@
+import { ref as d, watch as C, computed as i } from "vue";
+import { InButtonV2 as b } from "./InButtonV2.js";
+import { h as S, i as l } from "./chunks/helpers.CgHNyjAJ.js";
+import { c as g } from "./chunks/clickOutside.qP9M0QCm.js";
+import { n as $ } from "./chunks/_plugin-vue2_normalizer.WQT2Fc8L.js";
+/* empty css                      */
+const k = "_in-drawer__container_v01428_4Qg2K", D = "_in-drawer__overlay_v01428_x7TIe", x = "_in-drawer__wrapper_v01428_Sp4xG", G = "_in-drawer__wrapper--open_v01428_YYicR", T = "_in-drawer__content_v01428_lASiO", W = "_in-drawer__content-full-width_v01428_uLxOF", F = "_in-drawer__footer_v01428_EU50w", V = "_in-drawer__footer-with-buttons_v01428_HRdXc", H = "_in-drawer__footer-buttons-with-slot_v01428_VkjB8", j = "_in-drawer__button-group_v01428_YCVfb", z = "_in-drawer__title-area_v01428_Dovph", M = "_in-drawer__header-main_v01428_UyW7H", R = "_in-drawer__title_v01428_UzW-C", U = "_in-drawer__description_v01428_x-OO2", Y = "_in-drawer__header-right_v01428_Ta9pS", I = "_in-drawer__header_v01428_i-Hp0", L = "_in-drawer__wrapper--small_v01428_xC0do", E = "_in-drawer__wrapper--medium_v01428_aSmOC", P = "_in-drawer__wrapper--large_v01428_-ZdZ6", Z = {
+  "in-drawer__container": "_in-drawer__container_v01428_4Qg2K",
+  inDrawerContainer: k,
+  "in-drawer__overlay": "_in-drawer__overlay_v01428_x7TIe",
+  inDrawerOverlay: D,
+  "in-drawer__wrapper": "_in-drawer__wrapper_v01428_Sp4xG",
+  inDrawerWrapper: x,
+  "in-drawer__wrapper--open": "_in-drawer__wrapper--open_v01428_YYicR",
+  inDrawerWrapperOpen: G,
+  "in-drawer__content": "_in-drawer__content_v01428_lASiO",
+  inDrawerContent: T,
+  "in-drawer__content-full-width": "_in-drawer__content-full-width_v01428_uLxOF",
+  inDrawerContentFullWidth: W,
+  "in-drawer__footer": "_in-drawer__footer_v01428_EU50w",
+  inDrawerFooter: F,
+  "in-drawer__footer-with-buttons": "_in-drawer__footer-with-buttons_v01428_HRdXc",
+  inDrawerFooterWithButtons: V,
+  "in-drawer__footer-buttons-with-slot": "_in-drawer__footer-buttons-with-slot_v01428_VkjB8",
+  inDrawerFooterButtonsWithSlot: H,
+  "in-drawer__button-group": "_in-drawer__button-group_v01428_YCVfb",
+  inDrawerButtonGroup: j,
+  "in-drawer__title-area": "_in-drawer__title-area_v01428_Dovph",
+  inDrawerTitleArea: z,
+  "in-drawer__header-main": "_in-drawer__header-main_v01428_UyW7H",
+  inDrawerHeaderMain: M,
+  "in-drawer__title": "_in-drawer__title_v01428_UzW-C",
+  inDrawerTitle: R,
+  "in-drawer__description": "_in-drawer__description_v01428_x-OO2",
+  inDrawerDescription: U,
+  "in-drawer__header-right": "_in-drawer__header-right_v01428_Ta9pS",
+  inDrawerHeaderRight: Y,
+  "in-drawer__header": "_in-drawer__header_v01428_i-Hp0",
+  inDrawerHeader: I,
+  "in-drawer__wrapper--small": "_in-drawer__wrapper--small_v01428_xC0do",
+  inDrawerWrapperSmall: L,
+  "in-drawer__wrapper--medium": "_in-drawer__wrapper--medium_v01428_aSmOC",
+  inDrawerWrapperMedium: E,
+  "in-drawer__wrapper--large": "_in-drawer__wrapper--large_v01428_-ZdZ6",
+  inDrawerWrapperLarge: P
+}, n = {
+  default: "default",
+  danger: "danger",
+  warning: "warning"
+}, A = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+}, q = 300, K = {
+  components: { InButtonV2: b },
+  directives: { clickOutside: g },
+  props: {
+    closeButtonStatus: { type: Boolean, default: !0 },
+    closeOnOutsideClick: { type: Boolean, default: !0 },
+    fullWidthContentStatus: { type: Boolean, default: !1 },
+    descriptionStatus: { type: Boolean, default: !0 },
+    descriptionText: { type: String, default: "" },
+    footerStatus: { type: Boolean, default: !0 },
+    id: { type: String, default: "" },
+    overlayStatus: { type: Boolean, default: !0 },
+    size: { type: String, required: !0, validator: (t) => Object.values(A).includes(t) },
+    state: { type: String, default: "default", validator: (t) => Object.values(n).includes(t) },
+    status: { type: Boolean, default: !0 },
+    titleText: { type: String, required: !0 },
+    footerButtonGroupOptions: { type: Object, default: () => ({}) }
+  },
+  setup(t, { emit: e }) {
+    const a = d(t.status), _ = d(""), o = (r = !1) => {
+      if (r) {
+        document.body.style.overflow = "";
+        return;
+      }
+      document.body.style.overflow = a.value ? "hidden" : "";
+    };
+    C(
+      () => t.status,
+      (r) => {
+        r ? (a.value = !0, o(), setTimeout(() => {
+          _.value = "in-drawer__wrapper--open";
+        }, 5)) : _.value = "", r || (o(!0), setTimeout(() => {
+          a.value = !1;
+        }, q));
+      },
+      { immediate: !0 }
+    );
+    const s = () => {
+      e("onCloseEvent"), o(!0);
+    }, w = () => {
+      t.closeOnOutsideClick && s();
+    }, c = (r) => {
+      e(`${r}ButtonEvent`);
+    }, p = i(() => Object.values(t.footerButtonGroupOptions).length > 0), v = i(() => {
+      const { primaryButton: r } = S(t.footerButtonGroupOptions), B = r.type || n.primary, O = n[t.state] || n.primary;
+      return r.type = t.state === n.default ? B : O, r;
+    }), f = () => {
+      t.overlayStatus || !t.closeOnOutsideClick || s();
+    }, y = i(() => !l(t.footerButtonGroupOptions.cancelOrBackButton)), h = i(() => !l(t.footerButtonGroupOptions.primaryButton)), m = i(() => !l(t.footerButtonGroupOptions.secondaryButton));
+    return {
+      onButtonClick: c,
+      closeModal: s,
+      closeFromOverlay: w,
+      checkClickOutside: f,
+      handleOverflow: o,
+      hasFooterButtonGroupOptions: p,
+      isCancelOrBackButtonVisible: y,
+      isPrimaryButtonVisible: h,
+      isSecondaryButtonVisible: m,
+      primaryButtonOptions: v,
+      statusClone: a,
+      animationClass: _
+    };
+  }
+};
+var Q = function() {
+  var t = this, e = t._self._c;
+  return t.statusClone ? e("div", { staticClass: "in-drawer__container", class: t.$style["in-drawer__container"] }, [t.overlayStatus ? e("div", { staticClass: "in-drawer__overlay", class: t.$style["in-drawer__overlay"], on: { click: t.closeFromOverlay } }) : t._e(), e("div", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: t.checkClickOutside, expression: "checkClickOutside" }], staticClass: "in-drawer__wrapper", class: [
+    t.$style["in-drawer__wrapper"],
+    `in-drawer__wrapper--${t.size}`,
+    t.$style[`in-drawer__wrapper--${t.size}`],
+    t.animationClass,
+    t.$style[t.animationClass]
+  ] }, [e("div", { staticClass: "in-drawer__header", class: t.$style["in-drawer__header"] }, [e("div", { staticClass: "in-drawer__header-main", class: t.$style["in-drawer__header-main"] }, [e("div", { staticClass: "in-drawer__header-left" }, [e("div", { staticClass: "in-drawer__title-area", class: t.$style["in-drawer__title-area"] }, [e("div", { staticClass: "in-drawer__title", class: t.$style["in-drawer__title"], attrs: { title: t.titleText }, domProps: { innerHTML: t._s(t.titleText) } }), t._t("headerTitleSlot")], 2), t.descriptionStatus ? e("div", { staticClass: "in-drawer__description", class: t.$style["in-drawer__description"], domProps: { innerHTML: t._s(t.descriptionText) } }) : t._e()]), e("div", { staticClass: "in-drawer__header-right", class: t.$style["in-drawer__header-right"] }, [t._t("headerRightSlot"), t.closeButtonStatus ? e("in-button-v2", { staticClass: "in-drawer__close-icon", attrs: { id: `close-button-${t.id}`, "left-icon": "line-close-netural", "label-text-status": !1, size: "small", type: "secondary", styling: "ghost" }, on: { click: t.closeModal } }) : t._e()], 2)]), e("div", { staticClass: "in-drawer__bottom-slot" }, [t._t("headerBottomSlot")], 2)]), e("div", { staticClass: "in-drawer__content", class: [
+    t.$style["in-drawer__content"],
+    {
+      "in-drawer__content-full-width": t.fullWidthContentStatus,
+      [t.$style["in-drawer__content-full-width"]]: t.fullWidthContentStatus
+    }
+  ] }, [t._t("contentSlot")], 2), t.footerStatus ? e("div", { staticClass: "in-drawer__footer", class: [
+    t.$style["in-drawer__footer"],
+    {
+      "in-drawer__footer-with-buttons": t.hasFooterButtonGroupOptions,
+      [t.$style["in-drawer__footer-with-buttons"]]: t.hasFooterButtonGroupOptions,
+      "in-drawer__footer-buttons-with-slot": t.hasFooterButtonGroupOptions && t.$slots.footerSlot,
+      [t.$style["in-drawer__footer-buttons-with-slot"]]: t.hasFooterButtonGroupOptions && t.$slots.footerSlot
+    }
+  ] }, [t.$slots.footerSlot ? e("div", [t._t("footerSlot")], 2) : t._e(), t.hasFooterButtonGroupOptions ? e("div", { staticClass: "in-drawer__button-group", class: t.$style["in-drawer__button-group"] }, [t.isCancelOrBackButtonVisible ? e("in-button-v2", t._b({ attrs: { id: `button-footer-cancel-${t.id}` }, on: { click: function(a) {
+    return t.onButtonClick("cancelOrBack");
+  } } }, "in-button-v2", t.footerButtonGroupOptions.cancelOrBackButton, !1)) : t._e(), t.isSecondaryButtonVisible ? e("in-button-v2", t._b({ attrs: { id: `button-footer-secondary-${t.id}` }, on: { click: function(a) {
+    return t.onButtonClick("secondary");
+  } } }, "in-button-v2", t.footerButtonGroupOptions.secondaryButton, !1)) : t._e(), t.isPrimaryButtonVisible ? e("in-button-v2", t._b({ attrs: { id: `button-footer-primary-${t.id}` }, on: { click: function(a) {
+    return t.onButtonClick("primary");
+  } } }, "in-button-v2", t.primaryButtonOptions, !1)) : t._e()], 1) : t._e()]) : t._e()])]) : t._e();
+}, X = [];
+const u = {
+  $style: Z
+};
+function N(t) {
+  for (var e in u)
+    this[e] = u[e];
+}
+var J = /* @__PURE__ */ $(
+  K,
+  Q,
+  X,
+  !1,
+  N
+);
+const ot = J.exports;
+export {
+  ot as InDrawer
+};