@saooti/octopus-sdk 42.0.3 → 42.0.5

package/dist/ClassicLazy-DKgiCdDI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassicLazy-DKgiCdDI.mjs","names":[],"sources":["../src/components/misc/ClassicLazy.vue","../src/components/misc/ClassicLazy.vue"],"sourcesContent":["<template>\n  <div ref=\"targetEl\" :style=\"`min-height:${minHeight}px;`\">\n    <slot v-if=\"shouldRender\" />\n    <slot v-else name=\"preview\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useIntersectionObserver } from \"@vueuse/core\";\nimport { ref, nextTick, watch, onMounted } from \"vue\";\n\n//Props\nconst props = defineProps({\n  renderOnIdle: Boolean,\n  unrender: Boolean,\n  minHeight: {type: Number,default: 0},\n  initRenderDelay: {type: Number, default: 0},\n  unrenderDelay: {type: Number,default: 10000},\n});\n\n//Emits\nconst emit = defineEmits([\"isRender\"]);\n\n//Data\nconst waitBeforeInit = ref(true);\nconst shouldRender = ref(false);\nconst targetEl = ref();\nlet unrenderTimer: ReturnType<typeof setTimeout> | undefined;\nlet renderTimer: ReturnType<typeof setTimeout> | undefined;\n\n//Composables\nconst { pause, resume } = useIntersectionObserver(\n  targetEl,\n  ([{ isIntersecting }]) => {\n    if (waitBeforeInit.value) {\n      return;\n    }\n    if (isIntersecting) {\n      // perhaps the user re-scrolled to a component that was set to unrender. In that case stop the unrendering timer\n      clearTimeout(unrenderTimer);\n\n      // if we're dealing underndering lets add a waiting period of 200ms before rendering. If a component enters the viewport and also leaves it within 200ms it will not render at all. This saves work and improves performance when user scrolls very fast\n      renderTimer = setTimeout(\n        () => {\n          shouldRender.value = true;\n          emit(\"isRender\", true);\n        },\n        props.unrender ? 200 : 0,\n      );\n\n      if (!props.unrender) {\n        pause();\n      }\n    } else if (props.unrender) {\n      // if the component was set to render, cancel that\n      clearTimeout(renderTimer);\n      unrenderTimer = setTimeout(() => {\n        shouldRender.value = false;\n        emit(\"isRender\", false);\n      }, props.unrenderDelay);\n    }\n  },\n  {\n    rootMargin: \"600px\",\n  },\n);\n\n//Logic\nonMounted(() => {\n  if (props.initRenderDelay <= 0) {\n    // If there's no render delay, do not delay initialization\n    waitBeforeInit.value = false;\n  } else {\n    // Otherwise delay initialization\n    setTimeout(() => {\n      waitBeforeInit.value = false;\n    }, props.initRenderDelay);\n  }\n\n  if (props.renderOnIdle) {\n    onIdle(() => {\n      shouldRender.value = true;\n      emit(\"isRender\", true);\n      if (!props.unrender) {\n        pause();\n      }\n    });\n  }\n});\n\n//Watch\nwatch(\n  () => props.unrender,\n  (newValue) => {\n    if (newValue) {\n      clearTimeout(renderTimer);\n      unrenderTimer = setTimeout(() => {\n        shouldRender.value = false;\n        emit(\"isRender\", false);\n        resume();\n      }, props.unrenderDelay);\n    }\n  },\n);\n\n//Methods\nfunction onIdle(cb = () => {}) {\n  if (\"requestIdleCallback\" in window) {\n    window.requestIdleCallback(cb);\n  } else {\n    setTimeout(() => {\n      nextTick(cb);\n    }, 300);\n  }\n}\n</script>\n","<template>\n  <div ref=\"targetEl\" :style=\"`min-height:${minHeight}px;`\">\n    <slot v-if=\"shouldRender\" />\n    <slot v-else name=\"preview\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useIntersectionObserver } from \"@vueuse/core\";\nimport { ref, nextTick, watch, onMounted } from \"vue\";\n\n//Props\nconst props = defineProps({\n  renderOnIdle: Boolean,\n  unrender: Boolean,\n  minHeight: {type: Number,default: 0},\n  initRenderDelay: {type: Number, default: 0},\n  unrenderDelay: {type: Number,default: 10000},\n});\n\n//Emits\nconst emit = defineEmits([\"isRender\"]);\n\n//Data\nconst waitBeforeInit = ref(true);\nconst shouldRender = ref(false);\nconst targetEl = ref();\nlet unrenderTimer: ReturnType<typeof setTimeout> | undefined;\nlet renderTimer: ReturnType<typeof setTimeout> | undefined;\n\n//Composables\nconst { pause, resume } = useIntersectionObserver(\n  targetEl,\n  ([{ isIntersecting }]) => {\n    if (waitBeforeInit.value) {\n      return;\n    }\n    if (isIntersecting) {\n      // perhaps the user re-scrolled to a component that was set to unrender. In that case stop the unrendering timer\n      clearTimeout(unrenderTimer);\n\n      // if we're dealing underndering lets add a waiting period of 200ms before rendering. If a component enters the viewport and also leaves it within 200ms it will not render at all. This saves work and improves performance when user scrolls very fast\n      renderTimer = setTimeout(\n        () => {\n          shouldRender.value = true;\n          emit(\"isRender\", true);\n        },\n        props.unrender ? 200 : 0,\n      );\n\n      if (!props.unrender) {\n        pause();\n      }\n    } else if (props.unrender) {\n      // if the component was set to render, cancel that\n      clearTimeout(renderTimer);\n      unrenderTimer = setTimeout(() => {\n        shouldRender.value = false;\n        emit(\"isRender\", false);\n      }, props.unrenderDelay);\n    }\n  },\n  {\n    rootMargin: \"600px\",\n  },\n);\n\n//Logic\nonMounted(() => {\n  if (props.initRenderDelay <= 0) {\n    // If there's no render delay, do not delay initialization\n    waitBeforeInit.value = false;\n  } else {\n    // Otherwise delay initialization\n    setTimeout(() => {\n      waitBeforeInit.value = false;\n    }, props.initRenderDelay);\n  }\n\n  if (props.renderOnIdle) {\n    onIdle(() => {\n      shouldRender.value = true;\n      emit(\"isRender\", true);\n      if (!props.unrender) {\n        pause();\n      }\n    });\n  }\n});\n\n//Watch\nwatch(\n  () => props.unrender,\n  (newValue) => {\n    if (newValue) {\n      clearTimeout(renderTimer);\n      unrenderTimer = setTimeout(() => {\n        shouldRender.value = false;\n        emit(\"isRender\", false);\n        resume();\n      }, props.unrenderDelay);\n    }\n  },\n);\n\n//Methods\nfunction onIdle(cb = () => {}) {\n  if (\"requestIdleCallback\" in window) {\n    window.requestIdleCallback(cb);\n  } else {\n    setTimeout(() => {\n      nextTick(cb);\n    }, 300);\n  }\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ;EASd,MAAM,OAAO;EAGb,MAAM,iBAAiB,IAAI,IAAI;EAC/B,MAAM,eAAe,IAAI,KAAK;EAC9B,MAAM,WAAW,IAAI;EACrB,IAAI;EACJ,IAAI;EAGJ,MAAM,EAAE,OAAO,WAAW,wBACxB,WACC,CAAC,EAAE,sBAAsB;GACxB,IAAI,eAAe,OACjB;GAEF,IAAI,gBAAgB;IAElB,aAAa,aAAa;IAG1B,cAAc,iBACN;KACJ,aAAa,QAAQ;KACrB,KAAK,YAAY,IAAI;IACvB,GACA,MAAM,WAAW,MAAM,CACzB;IAEA,IAAI,CAAC,MAAM,UACT,MAAM;GAEV,OAAO,IAAI,MAAM,UAAU;IAEzB,aAAa,WAAW;IACxB,gBAAgB,iBAAiB;KAC/B,aAAa,QAAQ;KACrB,KAAK,YAAY,KAAK;IACxB,GAAG,MAAM,aAAa;GACxB;EACF,GACA,EACE,YAAY,QACd,CACF;EAGA,gBAAgB;GACd,IAAI,MAAM,mBAAmB,GAE3B,eAAe,QAAQ;QAGvB,iBAAiB;IACf,eAAe,QAAQ;GACzB,GAAG,MAAM,eAAe;GAG1B,IAAI,MAAM,cACR,aAAa;IACX,aAAa,QAAQ;IACrB,KAAK,YAAY,IAAI;IACrB,IAAI,CAAC,MAAM,UACT,MAAM;GAEV,CAAC;EAEL,CAAC;EAGD,YACQ,MAAM,WACX,aAAa;GACZ,IAAI,UAAU;IACZ,aAAa,WAAW;IACxB,gBAAgB,iBAAiB;KAC/B,aAAa,QAAQ;KACrB,KAAK,YAAY,KAAK;KACtB,OAAO;IACT,GAAG,MAAM,aAAa;GACxB;EACF,CACF;EAGA,SAAS,OAAO,WAAW,CAAC,GAAG;GAC7B,IAAI,yBAAyB,QAC3B,OAAO,oBAAoB,EAAE;QAE7B,iBAAiB;IACf,SAAS,EAAE;GACb,GAAG,GAAG;EAEV;;uBAjHE,mBAGM,OAAA;aAHG;IAAJ,KAAI;IAAY,OAAK,eAAA,cAAgB,QAAA,UAAS,IAAA;OACrC,aAAA,QAAZ,WAA4B,KAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA,IAC5B,WAA8B,KAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/ClassicLoading-Crlw7cAx.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassicLoading-Crlw7cAx.mjs","names":[],"sources":["../src/components/form/ClassicLoading.vue","../src/components/form/ClassicLoading.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"loadingText\"\n    class=\"d-flex align-items-center justify-content-center\"\n  >\n    <ClassicSpinner :small=\"small\" :color=\"spinnerColor\" class=\"me-3\" />\n    <div :class=\"small ? 'text-secondary' : 'h3'\">\n      {{ loadingText }}\n    </div>\n  </div>\n  <div v-else-if=\"errorText\" class=\"text-center text-danger\">\n    <h3>{{ errorText }}</h3>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicSpinner from \"../misc/ClassicSpinner.vue\";\n\n//Props \ndefineProps({\n  loadingText: { default: undefined, type: String },\n  errorText: { default: undefined, type: String },\n  /** Reduce size of the loading animation and text */\n  small: { default: false, type: Boolean },\n  /** Color of the spinner */\n  spinnerColor: { default: undefined, type: String }\n})\n</script>\n","<template>\n  <div\n    v-if=\"loadingText\"\n    class=\"d-flex align-items-center justify-content-center\"\n  >\n    <ClassicSpinner :small=\"small\" :color=\"spinnerColor\" class=\"me-3\" />\n    <div :class=\"small ? 'text-secondary' : 'h3'\">\n      {{ loadingText }}\n    </div>\n  </div>\n  <div v-else-if=\"errorText\" class=\"text-center text-danger\">\n    <h3>{{ errorText }}</h3>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicSpinner from \"../misc/ClassicSpinner.vue\";\n\n//Props \ndefineProps({\n  loadingText: { default: undefined, type: String },\n  errorText: { default: undefined, type: String },\n  /** Reduce size of the loading animation and text */\n  small: { default: false, type: Boolean },\n  /** Color of the spinner */\n  spinnerColor: { default: undefined, type: String }\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CCGI,OAAM;;;;CAOmB,OAAM;;;QARzB,OAAA,eAAA,UAAA,GADR,mBAQM,OARN,YAQM,CAJJ,YAAoE,OAAA,mBAAA;EAAnD,OAAO,OAAA;EAAQ,OAAO,OAAA;EAAc,OAAM;kCAC3D,mBAEM,OAAA,EAFA,OAAK,eAAE,OAAA,QAAK,mBAAA,IAAA,EAAA,GAAA,gBACb,OAAA,WAAW,GAAA,CAAA,CAAA,CAAA,KAGF,OAAA,aAAA,UAAA,GAAhB,mBAEM,OAFN,YAEM,CADJ,mBAAwB,MAAA,MAAA,gBAAjB,OAAA,SAAS,GAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,QAAA,IAAA"}

package/dist/ClassicLoading-DZLIyuUd.mjs

@@ -0,0 +1,52 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.mjs";
+import { t as ClassicSpinner_default } from "./ClassicSpinner-CL99QR-h.mjs";
+import { createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString } from "vue";
+//#region src/components/form/ClassicLoading.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "d-flex align-items-center justify-content-center"
+};
+var _hoisted_2 = {
+	key: 1,
+	class: "text-center text-danger"
+};
+var ClassicLoading_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ClassicLoading",
+	props: {
+		loadingText: {
+			default: void 0,
+			type: String
+		},
+		errorText: {
+			default: void 0,
+			type: String
+		},
+		/** Reduce size of the loading animation and text */
+		small: {
+			default: false,
+			type: Boolean
+		},
+		/** Color of the spinner */
+		spinnerColor: {
+			default: void 0,
+			type: String
+		}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return __props.loadingText ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(ClassicSpinner_default, {
+				small: __props.small,
+				color: __props.spinnerColor,
+				class: "me-3"
+			}, null, 8, ["small", "color"]), createElementVNode("div", { class: normalizeClass(__props.small ? "text-secondary" : "h3") }, toDisplayString(__props.loadingText), 3)])) : __props.errorText ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("h3", null, toDisplayString(__props.errorText), 1)])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+//#region src/components/form/ClassicLoading.vue
+var ClassicLoading_exports = /* @__PURE__ */ __exportAll({ default: () => ClassicLoading_default });
+var ClassicLoading_default = ClassicLoading_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ClassicLoading_exports as n, ClassicLoading_default as t };
+
+//# sourceMappingURL=ClassicLoading-DZLIyuUd.mjs.map

package/dist/ClassicLoading-DZLIyuUd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassicLoading-DZLIyuUd.mjs","names":[],"sources":["../src/components/form/ClassicLoading.vue","../src/components/form/ClassicLoading.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"loadingText\"\n    class=\"d-flex align-items-center justify-content-center\"\n  >\n    <ClassicSpinner :small=\"small\" :color=\"spinnerColor\" class=\"me-3\" />\n    <div :class=\"small ? 'text-secondary' : 'h3'\">\n      {{ loadingText }}\n    </div>\n  </div>\n  <div v-else-if=\"errorText\" class=\"text-center text-danger\">\n    <h3>{{ errorText }}</h3>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicSpinner from \"../misc/ClassicSpinner.vue\";\n\n//Props \ndefineProps({\n  loadingText: { default: undefined, type: String },\n  errorText: { default: undefined, type: String },\n  /** Reduce size of the loading animation and text */\n  small: { default: false, type: Boolean },\n  /** Color of the spinner */\n  spinnerColor: { default: undefined, type: String }\n})\n</script>\n","<template>\n  <div\n    v-if=\"loadingText\"\n    class=\"d-flex align-items-center justify-content-center\"\n  >\n    <ClassicSpinner :small=\"small\" :color=\"spinnerColor\" class=\"me-3\" />\n    <div :class=\"small ? 'text-secondary' : 'h3'\">\n      {{ loadingText }}\n    </div>\n  </div>\n  <div v-else-if=\"errorText\" class=\"text-center text-danger\">\n    <h3>{{ errorText }}</h3>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ClassicSpinner from \"../misc/ClassicSpinner.vue\";\n\n//Props \ndefineProps({\n  loadingText: { default: undefined, type: String },\n  errorText: { default: undefined, type: String },\n  /** Reduce size of the loading animation and text */\n  small: { default: false, type: Boolean },\n  /** Color of the spinner */\n  spinnerColor: { default: undefined, type: String }\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAEU,QAAA,eAAA,UAAA,GADR,mBAQM,OARN,YAQM,CAJJ,YAAoE,wBAAA;IAAnD,OAAO,QAAA;IAAQ,OAAO,QAAA;IAAc,OAAM;oCAC3D,mBAEM,OAAA,EAFA,OAAK,eAAE,QAAA,QAAK,mBAAA,IAAA,EAAA,GAAA,gBACb,QAAA,WAAW,GAAA,CAAA,CAAA,CAAA,KAGF,QAAA,aAAA,UAAA,GAAhB,mBAEM,OAFN,YAEM,CADJ,mBAAwB,MAAA,MAAA,gBAAjB,QAAA,SAAS,GAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/ClassicModal-CilwHp9p.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassicModal-CilwHp9p.mjs","names":[],"sources":["../src/components/misc/modal/ClassicModal.vue","../src/components/misc/modal/ClassicModal.vue"],"sourcesContent":["<template>\n  <dialog\n    :id=\"idModal\"\n    ref=\"modal\"\n    class=\"octopus-modal octopus-modal-top-layer\"\n    :class=\"onlyHeader ? 'octopus-only-header-modal' : ''\"\n  >\n    <div class=\"octopus-modal-header\">\n      <h5 class=\"octopus-modal-title\">\n        {{ titleModal }}\n      </h5>\n      <div class=\"d-flex align-items-center\">\n        <button\n          v-if=\"canBeReduced\"\n          class=\"btn-transparent text-light\"\n          :title=\"onlyHeader ? t('Enlarge') : t('Reduce')\"\n          @click=\"onlyHeader = !onlyHeader\"\n        >\n          <ChevronDownIcon :class=\"{ 'arrow-transform': !onlyHeader }\" />\n        </button>\n        <button\n          v-if=\"closable\"\n          autofocus\n          type=\"button\"\n          class=\"btn-transparent text-light\"\n          :title=\"t('Close')\"\n          @click=\"closePopup\"\n        >\n          <WindowCloseIcon />\n        </button>\n      </div>\n    </div>\n    <div v-show=\"!onlyHeader\" class=\"octopus-modal-body\">\n      <slot />\n      <slot name=\"body\" />\n    </div>\n    <div v-show=\"!onlyHeader\" class=\"octopus-modal-footer\">\n      <slot name=\"footer\" />\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport WindowCloseIcon from \"vue-material-design-icons/WindowClose.vue\";\nimport { onMounted, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  idModal: { default: undefined, type: String },\n  /** The title of the modal */\n  titleModal: { default: undefined, type: String },\n  /** If false, the modal won't display a close button (default: true) */\n  closable: { default: true, type: Boolean },\n  /** If true, the modal can be reduced to show only the header (default: false) */\n  canBeReduced: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n\n//Data \nconst onlyHeader = ref(false);\nconst modalRef = useTemplateRef('modal');\n\n\n//Composables\nconst { t } = useI18n();\n\n\nonMounted(()=>{\n  const dialog = modalRef?.value as HTMLDialogElement;\n  dialog.showModal();\n  dialog.addEventListener('cancel', (event) => {\n    event.preventDefault();\n    emit(\"close\");\n  });\n})\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n</script>\n\n<style lang=\"scss\">\n\n.octopus-app .octopus-modal.octopus-modal-top-layer{\n  &::backdrop {\n    opacity: 0.5;\n    background-color: black;\n  }\n\n  &.octopus-only-header-modal::backdrop{\n    opacity: 0.1;\n  }\n\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  border: 0;\n  border-radius: var(--octopus-border-radius);\n  box-shadow: 0 0.2rem 0.5rem var(--octopus-shadow);\n  color: var(--octopus-color-text) !important;\n  margin-top: 2rem;\n  width: 80vw;\n  max-height: 90dvh;\n  overflow: hidden;\n\n  @media (width <= 500px) {\n    width: 95vw;\n    margin-left: 2.5vw;\n    margin-right: 2.5vw;\n  }\n\n .octopus-modal-body {\n    flex: 1 1 auto;\n    padding: 1rem;\n    overflow-x: auto;\n\n    .scroller-vertical {\n      min-height: 200px;\n      height: 200px;\n    }\n  }\n\n  .octopus-modal-header {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: space-between;\n    border: 0;\n    border-radius: var(--octopus-border-radius)\n      var(--octopus-border-radius) 0 0;\n    background: var(--octopus-primary);\n    color: white;\n    padding: 1rem;\n  }\n\n  .octopus-modal-footer {\n    display: flex;\n    flex-shrink: 0;\n    border: 0;\n    flex-wrap: initial;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 1rem;\n\n    button {\n      margin: 0.1rem;\n    }\n  }\n}\n</style>\n","<template>\n  <dialog\n    :id=\"idModal\"\n    ref=\"modal\"\n    class=\"octopus-modal octopus-modal-top-layer\"\n    :class=\"onlyHeader ? 'octopus-only-header-modal' : ''\"\n  >\n    <div class=\"octopus-modal-header\">\n      <h5 class=\"octopus-modal-title\">\n        {{ titleModal }}\n      </h5>\n      <div class=\"d-flex align-items-center\">\n        <button\n          v-if=\"canBeReduced\"\n          class=\"btn-transparent text-light\"\n          :title=\"onlyHeader ? t('Enlarge') : t('Reduce')\"\n          @click=\"onlyHeader = !onlyHeader\"\n        >\n          <ChevronDownIcon :class=\"{ 'arrow-transform': !onlyHeader }\" />\n        </button>\n        <button\n          v-if=\"closable\"\n          autofocus\n          type=\"button\"\n          class=\"btn-transparent text-light\"\n          :title=\"t('Close')\"\n          @click=\"closePopup\"\n        >\n          <WindowCloseIcon />\n        </button>\n      </div>\n    </div>\n    <div v-show=\"!onlyHeader\" class=\"octopus-modal-body\">\n      <slot />\n      <slot name=\"body\" />\n    </div>\n    <div v-show=\"!onlyHeader\" class=\"octopus-modal-footer\">\n      <slot name=\"footer\" />\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport WindowCloseIcon from \"vue-material-design-icons/WindowClose.vue\";\nimport { onMounted, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  idModal: { default: undefined, type: String },\n  /** The title of the modal */\n  titleModal: { default: undefined, type: String },\n  /** If false, the modal won't display a close button (default: true) */\n  closable: { default: true, type: Boolean },\n  /** If true, the modal can be reduced to show only the header (default: false) */\n  canBeReduced: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n\n//Data \nconst onlyHeader = ref(false);\nconst modalRef = useTemplateRef('modal');\n\n\n//Composables\nconst { t } = useI18n();\n\n\nonMounted(()=>{\n  const dialog = modalRef?.value as HTMLDialogElement;\n  dialog.showModal();\n  dialog.addEventListener('cancel', (event) => {\n    event.preventDefault();\n    emit(\"close\");\n  });\n})\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n</script>\n\n<style lang=\"scss\">\n\n.octopus-app .octopus-modal.octopus-modal-top-layer{\n  &::backdrop {\n    opacity: 0.5;\n    background-color: black;\n  }\n\n  &.octopus-only-header-modal::backdrop{\n    opacity: 0.1;\n  }\n\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  border: 0;\n  border-radius: var(--octopus-border-radius);\n  box-shadow: 0 0.2rem 0.5rem var(--octopus-shadow);\n  color: var(--octopus-color-text) !important;\n  margin-top: 2rem;\n  width: 80vw;\n  max-height: 90dvh;\n  overflow: hidden;\n\n  @media (width <= 500px) {\n    width: 95vw;\n    margin-left: 2.5vw;\n    margin-right: 2.5vw;\n  }\n\n .octopus-modal-body {\n    flex: 1 1 auto;\n    padding: 1rem;\n    overflow-x: auto;\n\n    .scroller-vertical {\n      min-height: 200px;\n      height: 200px;\n    }\n  }\n\n  .octopus-modal-header {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: space-between;\n    border: 0;\n    border-radius: var(--octopus-border-radius)\n      var(--octopus-border-radius) 0 0;\n    background: var(--octopus-primary);\n    color: white;\n    padding: 1rem;\n  }\n\n  .octopus-modal-footer {\n    display: flex;\n    flex-shrink: 0;\n    border: 0;\n    flex-wrap: initial;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 1rem;\n\n    button {\n      margin: 0.1rem;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,MAAM,OAAO;EAGb,MAAM,aAAa,IAAI,KAAK;EAC5B,MAAM,WAAW,eAAe,OAAO;EAIvC,MAAM,EAAE,MAAM,QAAQ;EAGtB,gBAAc;GACZ,MAAM,SAAS,UAAU;GACzB,OAAO,UAAU;GACjB,OAAO,iBAAiB,WAAW,UAAU;IAC3C,MAAM,eAAe;IACrB,KAAK,OAAO;GACd,CAAC;EACH,CAAC;EAGD,SAAS,aAAmB;GAC1B,KAAK,OAAO;EACd;;;;;;;;;;;;;;;;;;;;;mBC5ES,OAAM,uBAAsB;mBAC3B,OAAM,sBAAqB;mBAG1B,OAAM,4BAA2B;;;mBAqBd,OAAM,qBAAoB;mBAI1B,OAAM,uBAAsB;;qBAnCxD,mBAsCS,UAAA;EArCN,IAAI,OAAA;EACL,KAAI;EACJ,OAAK,eAAA,CAAC,yCACE,OAAA,aAAU,8BAAA,EAAA,CAAA;;EAElB,mBAwBM,OAxBN,YAwBM,CAvBJ,mBAEK,MAFL,YAEK,gBADA,OAAA,UAAU,GAAA,CAAA,GAEf,mBAmBM,OAnBN,YAmBM,CAjBI,OAAA,gBAAA,UAAA,GADR,mBAOS,UAAA;;GALP,OAAM;GACL,OAAO,OAAA,aAAa,OAAA,EAAC,SAAA,IAAc,OAAA,EAAC,QAAA;GACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,aAAU,CAAI,OAAA;MAEtB,YAA+D,OAAA,oBAAA,EAA7C,OAAK,eAAA,EAAA,mBAAA,CAAwB,OAAA,WAAU,CAAA,EAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,QAAA,IAAA,GAGnD,OAAA,YAAA,UAAA,GADR,mBASS,UAAA;;GAPP,WAAA;GACA,MAAK;GACL,OAAM;GACL,OAAO,OAAA,EAAC,OAAA;GACR,SAAO,OAAA;MAER,YAAmB,OAAA,kBAAA,CAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,CAAA,CAAA,CAAA;iBAIzB,mBAGM,OAHN,YAGM,CAFJ,WAAQ,KAAA,QAAA,SAAA,GACR,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA,OAAA,CAFR,OAAA,UAAU,CAAA,CAAA;iBAIxB,mBAEM,OAFN,YAEM,CADJ,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA,OAAA,CADV,OAAA,UAAU,CAAA,CAAA"}

package/dist/ClassicModal-DbRPVcJr.mjs

@@ -0,0 +1,87 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.mjs";
+import { createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, useTemplateRef, vShow, withDirectives } from "vue";
+import { useI18n } from "vue-i18n";
+import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
+import WindowCloseIcon from "vue-material-design-icons/WindowClose.vue";
+//#region src/components/misc/modal/ClassicModal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var _hoisted_2 = { class: "octopus-modal-header" };
+var _hoisted_3 = { class: "octopus-modal-title" };
+var _hoisted_4 = { class: "d-flex align-items-center" };
+var _hoisted_5 = ["title"];
+var _hoisted_6 = ["title"];
+var _hoisted_7 = { class: "octopus-modal-body" };
+var _hoisted_8 = { class: "octopus-modal-footer" };
+var ClassicModal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ClassicModal",
+	props: {
+		idModal: {
+			default: void 0,
+			type: String
+		},
+		/** The title of the modal */
+		titleModal: {
+			default: void 0,
+			type: String
+		},
+		/** If false, the modal won't display a close button (default: true) */
+		closable: {
+			default: true,
+			type: Boolean
+		},
+		/** If true, the modal can be reduced to show only the header (default: false) */
+		canBeReduced: {
+			default: false,
+			type: Boolean
+		}
+	},
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const onlyHeader = ref(false);
+		const modalRef = useTemplateRef("modal");
+		const { t } = useI18n();
+		onMounted(() => {
+			const dialog = modalRef?.value;
+			dialog.showModal();
+			dialog.addEventListener("cancel", (event) => {
+				event.preventDefault();
+				emit("close");
+			});
+		});
+		function closePopup() {
+			emit("close");
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("dialog", {
+				id: __props.idModal,
+				ref: "modal",
+				class: normalizeClass(["octopus-modal octopus-modal-top-layer", onlyHeader.value ? "octopus-only-header-modal" : ""])
+			}, [
+				createElementVNode("div", _hoisted_2, [createElementVNode("h5", _hoisted_3, toDisplayString(__props.titleModal), 1), createElementVNode("div", _hoisted_4, [__props.canBeReduced ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					class: "btn-transparent text-light",
+					title: onlyHeader.value ? unref(t)("Enlarge") : unref(t)("Reduce"),
+					onClick: _cache[0] || (_cache[0] = ($event) => onlyHeader.value = !onlyHeader.value)
+				}, [createVNode(ChevronDownIcon, { class: normalizeClass({ "arrow-transform": !onlyHeader.value }) }, null, 8, ["class"])], 8, _hoisted_5)) : createCommentVNode("", true), __props.closable ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					autofocus: "",
+					type: "button",
+					class: "btn-transparent text-light",
+					title: unref(t)("Close"),
+					onClick: closePopup
+				}, [createVNode(WindowCloseIcon)], 8, _hoisted_6)) : createCommentVNode("", true)])]),
+				withDirectives(createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "default"), renderSlot(_ctx.$slots, "body")], 512), [[vShow, !onlyHeader.value]]),
+				withDirectives(createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "footer")], 512), [[vShow, !onlyHeader.value]])
+			], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+//#region src/components/misc/modal/ClassicModal.vue
+var ClassicModal_exports = /* @__PURE__ */ __exportAll({ default: () => ClassicModal_default });
+var ClassicModal_default = ClassicModal_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ClassicModal_exports as n, ClassicModal_default as t };
+
+//# sourceMappingURL=ClassicModal-DbRPVcJr.mjs.map

package/dist/ClassicModal-DbRPVcJr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassicModal-DbRPVcJr.mjs","names":[],"sources":["../src/components/misc/modal/ClassicModal.vue","../src/components/misc/modal/ClassicModal.vue"],"sourcesContent":["<template>\n  <dialog\n    :id=\"idModal\"\n    ref=\"modal\"\n    class=\"octopus-modal octopus-modal-top-layer\"\n    :class=\"onlyHeader ? 'octopus-only-header-modal' : ''\"\n  >\n    <div class=\"octopus-modal-header\">\n      <h5 class=\"octopus-modal-title\">\n        {{ titleModal }}\n      </h5>\n      <div class=\"d-flex align-items-center\">\n        <button\n          v-if=\"canBeReduced\"\n          class=\"btn-transparent text-light\"\n          :title=\"onlyHeader ? t('Enlarge') : t('Reduce')\"\n          @click=\"onlyHeader = !onlyHeader\"\n        >\n          <ChevronDownIcon :class=\"{ 'arrow-transform': !onlyHeader }\" />\n        </button>\n        <button\n          v-if=\"closable\"\n          autofocus\n          type=\"button\"\n          class=\"btn-transparent text-light\"\n          :title=\"t('Close')\"\n          @click=\"closePopup\"\n        >\n          <WindowCloseIcon />\n        </button>\n      </div>\n    </div>\n    <div v-show=\"!onlyHeader\" class=\"octopus-modal-body\">\n      <slot />\n      <slot name=\"body\" />\n    </div>\n    <div v-show=\"!onlyHeader\" class=\"octopus-modal-footer\">\n      <slot name=\"footer\" />\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport WindowCloseIcon from \"vue-material-design-icons/WindowClose.vue\";\nimport { onMounted, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  idModal: { default: undefined, type: String },\n  /** The title of the modal */\n  titleModal: { default: undefined, type: String },\n  /** If false, the modal won't display a close button (default: true) */\n  closable: { default: true, type: Boolean },\n  /** If true, the modal can be reduced to show only the header (default: false) */\n  canBeReduced: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n\n//Data \nconst onlyHeader = ref(false);\nconst modalRef = useTemplateRef('modal');\n\n\n//Composables\nconst { t } = useI18n();\n\n\nonMounted(()=>{\n  const dialog = modalRef?.value as HTMLDialogElement;\n  dialog.showModal();\n  dialog.addEventListener('cancel', (event) => {\n    event.preventDefault();\n    emit(\"close\");\n  });\n})\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n</script>\n\n<style lang=\"scss\">\n\n.octopus-app .octopus-modal.octopus-modal-top-layer{\n  &::backdrop {\n    opacity: 0.5;\n    background-color: black;\n  }\n\n  &.octopus-only-header-modal::backdrop{\n    opacity: 0.1;\n  }\n\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  border: 0;\n  border-radius: var(--octopus-border-radius);\n  box-shadow: 0 0.2rem 0.5rem var(--octopus-shadow);\n  color: var(--octopus-color-text) !important;\n  margin-top: 2rem;\n  width: 80vw;\n  max-height: 90dvh;\n  overflow: hidden;\n\n  @media (width <= 500px) {\n    width: 95vw;\n    margin-left: 2.5vw;\n    margin-right: 2.5vw;\n  }\n\n .octopus-modal-body {\n    flex: 1 1 auto;\n    padding: 1rem;\n    overflow-x: auto;\n\n    .scroller-vertical {\n      min-height: 200px;\n      height: 200px;\n    }\n  }\n\n  .octopus-modal-header {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: space-between;\n    border: 0;\n    border-radius: var(--octopus-border-radius)\n      var(--octopus-border-radius) 0 0;\n    background: var(--octopus-primary);\n    color: white;\n    padding: 1rem;\n  }\n\n  .octopus-modal-footer {\n    display: flex;\n    flex-shrink: 0;\n    border: 0;\n    flex-wrap: initial;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 1rem;\n\n    button {\n      margin: 0.1rem;\n    }\n  }\n}\n</style>\n","<template>\n  <dialog\n    :id=\"idModal\"\n    ref=\"modal\"\n    class=\"octopus-modal octopus-modal-top-layer\"\n    :class=\"onlyHeader ? 'octopus-only-header-modal' : ''\"\n  >\n    <div class=\"octopus-modal-header\">\n      <h5 class=\"octopus-modal-title\">\n        {{ titleModal }}\n      </h5>\n      <div class=\"d-flex align-items-center\">\n        <button\n          v-if=\"canBeReduced\"\n          class=\"btn-transparent text-light\"\n          :title=\"onlyHeader ? t('Enlarge') : t('Reduce')\"\n          @click=\"onlyHeader = !onlyHeader\"\n        >\n          <ChevronDownIcon :class=\"{ 'arrow-transform': !onlyHeader }\" />\n        </button>\n        <button\n          v-if=\"closable\"\n          autofocus\n          type=\"button\"\n          class=\"btn-transparent text-light\"\n          :title=\"t('Close')\"\n          @click=\"closePopup\"\n        >\n          <WindowCloseIcon />\n        </button>\n      </div>\n    </div>\n    <div v-show=\"!onlyHeader\" class=\"octopus-modal-body\">\n      <slot />\n      <slot name=\"body\" />\n    </div>\n    <div v-show=\"!onlyHeader\" class=\"octopus-modal-footer\">\n      <slot name=\"footer\" />\n    </div>\n  </dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport WindowCloseIcon from \"vue-material-design-icons/WindowClose.vue\";\nimport { onMounted, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  idModal: { default: undefined, type: String },\n  /** The title of the modal */\n  titleModal: { default: undefined, type: String },\n  /** If false, the modal won't display a close button (default: true) */\n  closable: { default: true, type: Boolean },\n  /** If true, the modal can be reduced to show only the header (default: false) */\n  canBeReduced: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n\n//Data \nconst onlyHeader = ref(false);\nconst modalRef = useTemplateRef('modal');\n\n\n//Composables\nconst { t } = useI18n();\n\n\nonMounted(()=>{\n  const dialog = modalRef?.value as HTMLDialogElement;\n  dialog.showModal();\n  dialog.addEventListener('cancel', (event) => {\n    event.preventDefault();\n    emit(\"close\");\n  });\n})\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n</script>\n\n<style lang=\"scss\">\n\n.octopus-app .octopus-modal.octopus-modal-top-layer{\n  &::backdrop {\n    opacity: 0.5;\n    background-color: black;\n  }\n\n  &.octopus-only-header-modal::backdrop{\n    opacity: 0.1;\n  }\n\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  border: 0;\n  border-radius: var(--octopus-border-radius);\n  box-shadow: 0 0.2rem 0.5rem var(--octopus-shadow);\n  color: var(--octopus-color-text) !important;\n  margin-top: 2rem;\n  width: 80vw;\n  max-height: 90dvh;\n  overflow: hidden;\n\n  @media (width <= 500px) {\n    width: 95vw;\n    margin-left: 2.5vw;\n    margin-right: 2.5vw;\n  }\n\n .octopus-modal-body {\n    flex: 1 1 auto;\n    padding: 1rem;\n    overflow-x: auto;\n\n    .scroller-vertical {\n      min-height: 200px;\n      height: 200px;\n    }\n  }\n\n  .octopus-modal-header {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: space-between;\n    border: 0;\n    border-radius: var(--octopus-border-radius)\n      var(--octopus-border-radius) 0 0;\n    background: var(--octopus-primary);\n    color: white;\n    padding: 1rem;\n  }\n\n  .octopus-modal-footer {\n    display: flex;\n    flex-shrink: 0;\n    border: 0;\n    flex-wrap: initial;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 1rem;\n\n    button {\n      margin: 0.1rem;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,MAAM,OAAO;EAGb,MAAM,aAAa,IAAI,KAAK;EAC5B,MAAM,WAAW,eAAe,OAAO;EAIvC,MAAM,EAAE,MAAM,QAAQ;EAGtB,gBAAc;GACZ,MAAM,SAAS,UAAU;GACzB,OAAO,UAAU;GACjB,OAAO,iBAAiB,WAAW,UAAU;IAC3C,MAAM,eAAe;IACrB,KAAK,OAAO;GACd,CAAC;EACH,CAAC;EAGD,SAAS,aAAmB;GAC1B,KAAK,OAAO;EACd;;uBAlFE,mBAsCS,UAAA;IArCN,IAAI,QAAA;IACL,KAAI;IACJ,OAAK,eAAA,CAAC,yCACE,WAAA,QAAU,8BAAA,EAAA,CAAA;;IAElB,mBAwBM,OAxBN,YAwBM,CAvBJ,mBAEK,MAFL,YAEK,gBADA,QAAA,UAAU,GAAA,CAAA,GAEf,mBAmBM,OAnBN,YAmBM,CAjBI,QAAA,gBAAA,UAAA,GADR,mBAOS,UAAA;;KALP,OAAM;KACL,OAAO,WAAA,QAAa,MAAA,CAAA,EAAC,SAAA,IAAc,MAAA,CAAA,EAAC,QAAA;KACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,WAAA,QAAU,CAAI,WAAA;QAEtB,YAA+D,iBAAA,EAA7C,OAAK,eAAA,EAAA,mBAAA,CAAwB,WAAA,MAAU,CAAA,EAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,GAGnD,QAAA,YAAA,UAAA,GADR,mBASS,UAAA;;KAPP,WAAA;KACA,MAAK;KACL,OAAM;KACL,OAAO,MAAA,CAAA,EAAC,OAAA;KACR,SAAO;QAER,YAAmB,eAAA,CAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,CAAA;mBAIzB,mBAGM,OAHN,YAGM,CAFJ,WAAQ,KAAA,QAAA,SAAA,GACR,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA,OAAA,CAFR,WAAA,KAAU,CAAA,CAAA;mBAIxB,mBAEM,OAFN,YAEM,CADJ,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA,OAAA,CADV,WAAA,KAAU,CAAA,CAAA"}

package/dist/ClassicModalInBody-BkaRcZZx.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassicModalInBody-BkaRcZZx.mjs","names":[],"sources":["../src/components/misc/modal/ClassicModalInBody.vue","../src/components/misc/modal/ClassicModalInBody.vue"],"sourcesContent":["<template>\n  <div\n    :id=\"idModal\"\n    class=\"octopus-modal octopus-modal-in-body\"\n    :class=\"onlyHeader ? 'octopus-only-header-modal' : ''\"\n  >\n    <div class=\"octopus-modal-backdrop\" />\n    <div class=\"octopus-modal-dialog\">\n      <div class=\"octopus-modal-content\">\n        <div class=\"octopus-modal-header\">\n          <h5 cclass=\"octopus-modal-title\">\n            {{ titleModal }}\n          </h5>\n          <div class=\"d-flex align-items-center\">\n            <button\n              v-if=\"canBeReduced\"\n              class=\"btn-transparent text-light\"\n              :title=\"onlyHeader ? t('Enlarge') : t('Reduce')\"\n              @click=\"onlyHeader = !onlyHeader\"\n            >\n              <ChevronDownIcon :class=\"{ 'arrow-transform': !onlyHeader }\" />\n            </button>\n            <button\n              v-if=\"closable\"\n              :ref=\"closable ? 'focusElement' : ''\"\n              type=\"button\"\n              class=\"btn-transparent text-light\"\n              :title=\"t('Close')\"\n              @click=\"closePopup\"\n            >\n              <WindowCloseIcon />\n            </button>\n          </div>\n        </div>\n        <div v-show=\"!onlyHeader\" class=\"octopus-modal-body\">\n          <slot name=\"body\" />\n        </div>\n        <div v-show=\"!onlyHeader\" class=\"octopus-modal-footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport WindowCloseIcon from \"vue-material-design-icons/WindowClose.vue\";\nimport { onMounted, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  idModal: { default: undefined, type: String },\n  titleModal: { default: undefined, type: String },\n  closable: { default: true, type: Boolean },\n  canBeReduced: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n\n//Data \nconst onlyHeader = ref(false);\nconst focusElementRef = useTemplateRef('focusElement');\n\n//Composables\nconst { t } = useI18n();\n\nonMounted(()=>{\n  (focusElementRef?.value as HTMLElement)?.focus();\n})\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n\n</script>\n<style lang=\"scss\">\n.octopus-app .octopus-modal.octopus-modal-in-body{\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: block;\n  z-index: 1400;\n  width: 100%;\n  height: 100%;\n  overflow: hidden auto;\n  outline: 0;\n\n  .octopus-modal-backdrop {\n    opacity: 0.5;\n    z-index: 0;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: black;\n  }\n\n  &.octopus-only-header-modal .octopus-modal-backdrop {\n    opacity: 0.1;\n  }\n\n  .octopus-modal-dialog {\n    position: relative;\n    pointer-events: none;\n    margin: 1.75rem auto;\n    max-width: 80vw;\n    max-height: 90dvh;\n    width: 100%;\n    display: flex;\n    color: var(--octopus-color-text) !important;\n\n    @media (width <= 500px) {\n      width: 95%;\n    }\n  }\n\n  .octopus-modal-body {\n    flex: 1 1 auto;\n    padding: 1rem;\n    overflow-x: auto;\n\n    .scroller-vertical {\n      min-height: 200px;\n      height: 200px;\n    }\n  }\n\n  .octopus-modal-header {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: space-between;\n    border: 0;\n    border-radius: var(--octopus-border-radius) var(--octopus-border-radius) 0 0;\n    background: var(--octopus-primary);\n    color: white;\n    padding: 1rem;\n  }\n\n  .octopus-modal-content {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    width: 100%;\n    background-color: white;\n    background-clip: padding-box;\n    border: 0;\n    outline: 0;\n    height: auto !important;\n    max-height: initial !important;\n    border-radius: var(--octopus-border-radius);\n    box-shadow: 0 0.2rem 0.5rem var(--octopus-shadow);\n  }\n\n  &:not(.octopus-only-header-modal) .octopus-modal-dialog,\n  &:not(.octopus-only-header-modal) .octopus-modal-content {\n    min-height: 300px;\n  }\n\n\n  .octopus-modal-footer {\n    display: flex;\n    flex-shrink: 0;\n    border: 0;\n    flex-wrap: initial;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 1rem;\n\n    button {\n      margin: 0.1rem;\n    }\n  }\n}\n</style>","<template>\n  <div\n    :id=\"idModal\"\n    class=\"octopus-modal octopus-modal-in-body\"\n    :class=\"onlyHeader ? 'octopus-only-header-modal' : ''\"\n  >\n    <div class=\"octopus-modal-backdrop\" />\n    <div class=\"octopus-modal-dialog\">\n      <div class=\"octopus-modal-content\">\n        <div class=\"octopus-modal-header\">\n          <h5 cclass=\"octopus-modal-title\">\n            {{ titleModal }}\n          </h5>\n          <div class=\"d-flex align-items-center\">\n            <button\n              v-if=\"canBeReduced\"\n              class=\"btn-transparent text-light\"\n              :title=\"onlyHeader ? t('Enlarge') : t('Reduce')\"\n              @click=\"onlyHeader = !onlyHeader\"\n            >\n              <ChevronDownIcon :class=\"{ 'arrow-transform': !onlyHeader }\" />\n            </button>\n            <button\n              v-if=\"closable\"\n              :ref=\"closable ? 'focusElement' : ''\"\n              type=\"button\"\n              class=\"btn-transparent text-light\"\n              :title=\"t('Close')\"\n              @click=\"closePopup\"\n            >\n              <WindowCloseIcon />\n            </button>\n          </div>\n        </div>\n        <div v-show=\"!onlyHeader\" class=\"octopus-modal-body\">\n          <slot name=\"body\" />\n        </div>\n        <div v-show=\"!onlyHeader\" class=\"octopus-modal-footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport WindowCloseIcon from \"vue-material-design-icons/WindowClose.vue\";\nimport { onMounted, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  idModal: { default: undefined, type: String },\n  titleModal: { default: undefined, type: String },\n  closable: { default: true, type: Boolean },\n  canBeReduced: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n\n//Data \nconst onlyHeader = ref(false);\nconst focusElementRef = useTemplateRef('focusElement');\n\n//Composables\nconst { t } = useI18n();\n\nonMounted(()=>{\n  (focusElementRef?.value as HTMLElement)?.focus();\n})\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n\n</script>\n<style lang=\"scss\">\n.octopus-app .octopus-modal.octopus-modal-in-body{\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: block;\n  z-index: 1400;\n  width: 100%;\n  height: 100%;\n  overflow: hidden auto;\n  outline: 0;\n\n  .octopus-modal-backdrop {\n    opacity: 0.5;\n    z-index: 0;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: black;\n  }\n\n  &.octopus-only-header-modal .octopus-modal-backdrop {\n    opacity: 0.1;\n  }\n\n  .octopus-modal-dialog {\n    position: relative;\n    pointer-events: none;\n    margin: 1.75rem auto;\n    max-width: 80vw;\n    max-height: 90dvh;\n    width: 100%;\n    display: flex;\n    color: var(--octopus-color-text) !important;\n\n    @media (width <= 500px) {\n      width: 95%;\n    }\n  }\n\n  .octopus-modal-body {\n    flex: 1 1 auto;\n    padding: 1rem;\n    overflow-x: auto;\n\n    .scroller-vertical {\n      min-height: 200px;\n      height: 200px;\n    }\n  }\n\n  .octopus-modal-header {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: space-between;\n    border: 0;\n    border-radius: var(--octopus-border-radius) var(--octopus-border-radius) 0 0;\n    background: var(--octopus-primary);\n    color: white;\n    padding: 1rem;\n  }\n\n  .octopus-modal-content {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    width: 100%;\n    background-color: white;\n    background-clip: padding-box;\n    border: 0;\n    outline: 0;\n    height: auto !important;\n    max-height: initial !important;\n    border-radius: var(--octopus-border-radius);\n    box-shadow: 0 0.2rem 0.5rem var(--octopus-shadow);\n  }\n\n  &:not(.octopus-only-header-modal) .octopus-modal-dialog,\n  &:not(.octopus-only-header-modal) .octopus-modal-content {\n    min-height: 300px;\n  }\n\n\n  .octopus-modal-footer {\n    display: flex;\n    flex-shrink: 0;\n    border: 0;\n    flex-wrap: initial;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 1rem;\n\n    button {\n      margin: 0.1rem;\n    }\n  }\n}\n</style>"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,MAAM,OAAO;EAGb,MAAM,aAAa,IAAI,KAAK;EAC5B,MAAM,kBAAkB,eAAe,cAAc;EAGrD,MAAM,EAAE,MAAM,QAAQ;EAEtB,gBAAc;GACZ,CAAC,iBAAiB,QAAuB,MAAM;EACjD,CAAC;EAGD,SAAS,aAAmB;GAC1B,KAAK,OAAO;EACd;;;;;;;;;;;;;;;;;;;;mBCrES,OAAM,uBAAsB;mBAC1B,OAAM,wBAAuB;mBAC3B,OAAM,uBAAsB;mBAC3B,QAAO,sBAAqB;mBAG3B,OAAM,4BAA2B;;;mBAqBd,OAAM,qBAAoB;oBAG1B,OAAM,uBAAsB;;qBApC5D,mBAyCM,OAAA;EAxCH,IAAI,OAAA;EACL,OAAK,eAAA,CAAC,uCACE,OAAA,aAAU,8BAAA,EAAA,CAAA;+BAElB,mBAAsC,OAAA,EAAjC,OAAM,yBAAwB,GAAA,MAAA,EAAA,IACnC,mBAkCM,OAlCN,YAkCM,CAjCJ,mBAgCM,OAhCN,YAgCM;EA/BJ,mBAwBM,OAxBN,YAwBM,CAvBJ,mBAEK,MAFL,YAEK,gBADA,OAAA,UAAU,GAAA,CAAA,GAEf,mBAmBM,OAnBN,YAmBM,CAjBI,OAAA,gBAAA,UAAA,GADR,mBAOS,UAAA;;GALP,OAAM;GACL,OAAO,OAAA,aAAa,OAAA,EAAC,SAAA,IAAc,OAAA,EAAC,QAAA;GACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,aAAU,CAAI,OAAA;MAEtB,YAA+D,OAAA,oBAAA,EAA7C,OAAK,eAAA,EAAA,mBAAA,CAAwB,OAAA,WAAU,CAAA,EAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,QAAA,IAAA,GAGnD,OAAA,YAAA,UAAA,GADR,mBASS,UAAA;;GAPN,KAAK,OAAA,WAAQ,iBAAA;GACd,MAAK;GACL,OAAM;GACL,OAAO,OAAA,EAAC,OAAA;GACR,SAAO,OAAA;MAER,YAAmB,OAAA,kBAAA,CAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,CAAA,CAAA,CAAA;iBAIzB,mBAEM,OAFN,YAEM,CADJ,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA,OAAA,CADR,OAAA,UAAU,CAAA,CAAA;iBAGxB,mBAEM,OAFN,aAEM,CADJ,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA,OAAA,CADV,OAAA,UAAU,CAAA,CAAA"}

package/dist/ClassicModalInBody-Dq9PBoaB.mjs

@@ -0,0 +1,77 @@
+import { createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, useTemplateRef, vShow, withDirectives } from "vue";
+import { useI18n } from "vue-i18n";
+import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
+import WindowCloseIcon from "vue-material-design-icons/WindowClose.vue";
+//#region src/components/misc/modal/ClassicModalInBody.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var _hoisted_2 = { class: "octopus-modal-dialog" };
+var _hoisted_3 = { class: "octopus-modal-content" };
+var _hoisted_4 = { class: "octopus-modal-header" };
+var _hoisted_5 = { cclass: "octopus-modal-title" };
+var _hoisted_6 = { class: "d-flex align-items-center" };
+var _hoisted_7 = ["title"];
+var _hoisted_8 = ["title"];
+var _hoisted_9 = { class: "octopus-modal-body" };
+var _hoisted_10 = { class: "octopus-modal-footer" };
+//#endregion
+//#region src/components/misc/modal/ClassicModalInBody.vue
+var ClassicModalInBody_default = /* @__PURE__ */ defineComponent({
+	__name: "ClassicModalInBody",
+	props: {
+		idModal: {
+			default: void 0,
+			type: String
+		},
+		titleModal: {
+			default: void 0,
+			type: String
+		},
+		closable: {
+			default: true,
+			type: Boolean
+		},
+		canBeReduced: {
+			default: false,
+			type: Boolean
+		}
+	},
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const onlyHeader = ref(false);
+		const focusElementRef = useTemplateRef("focusElement");
+		const { t } = useI18n();
+		onMounted(() => {
+			(focusElementRef?.value)?.focus();
+		});
+		function closePopup() {
+			emit("close");
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: __props.idModal,
+				class: normalizeClass(["octopus-modal octopus-modal-in-body", onlyHeader.value ? "octopus-only-header-modal" : ""])
+			}, [_cache[1] || (_cache[1] = createElementVNode("div", { class: "octopus-modal-backdrop" }, null, -1)), createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [
+				createElementVNode("div", _hoisted_4, [createElementVNode("h5", _hoisted_5, toDisplayString(__props.titleModal), 1), createElementVNode("div", _hoisted_6, [__props.canBeReduced ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					class: "btn-transparent text-light",
+					title: onlyHeader.value ? unref(t)("Enlarge") : unref(t)("Reduce"),
+					onClick: _cache[0] || (_cache[0] = ($event) => onlyHeader.value = !onlyHeader.value)
+				}, [createVNode(ChevronDownIcon, { class: normalizeClass({ "arrow-transform": !onlyHeader.value }) }, null, 8, ["class"])], 8, _hoisted_7)) : createCommentVNode("", true), __props.closable ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					ref: __props.closable ? "focusElement" : "",
+					type: "button",
+					class: "btn-transparent text-light",
+					title: unref(t)("Close"),
+					onClick: closePopup
+				}, [createVNode(WindowCloseIcon)], 8, _hoisted_8)) : createCommentVNode("", true)])]),
+				withDirectives(createElementVNode("div", _hoisted_9, [renderSlot(_ctx.$slots, "body")], 512), [[vShow, !onlyHeader.value]]),
+				withDirectives(createElementVNode("div", _hoisted_10, [renderSlot(_ctx.$slots, "footer")], 512), [[vShow, !onlyHeader.value]])
+			])])], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { ClassicModalInBody_default as default };
+
+//# sourceMappingURL=ClassicModalInBody-Dq9PBoaB.mjs.map

package/dist/ClassicModalInBody-Dq9PBoaB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassicModalInBody-Dq9PBoaB.mjs","names":[],"sources":["../src/components/misc/modal/ClassicModalInBody.vue","../src/components/misc/modal/ClassicModalInBody.vue"],"sourcesContent":["<template>\n  <div\n    :id=\"idModal\"\n    class=\"octopus-modal octopus-modal-in-body\"\n    :class=\"onlyHeader ? 'octopus-only-header-modal' : ''\"\n  >\n    <div class=\"octopus-modal-backdrop\" />\n    <div class=\"octopus-modal-dialog\">\n      <div class=\"octopus-modal-content\">\n        <div class=\"octopus-modal-header\">\n          <h5 cclass=\"octopus-modal-title\">\n            {{ titleModal }}\n          </h5>\n          <div class=\"d-flex align-items-center\">\n            <button\n              v-if=\"canBeReduced\"\n              class=\"btn-transparent text-light\"\n              :title=\"onlyHeader ? t('Enlarge') : t('Reduce')\"\n              @click=\"onlyHeader = !onlyHeader\"\n            >\n              <ChevronDownIcon :class=\"{ 'arrow-transform': !onlyHeader }\" />\n            </button>\n            <button\n              v-if=\"closable\"\n              :ref=\"closable ? 'focusElement' : ''\"\n              type=\"button\"\n              class=\"btn-transparent text-light\"\n              :title=\"t('Close')\"\n              @click=\"closePopup\"\n            >\n              <WindowCloseIcon />\n            </button>\n          </div>\n        </div>\n        <div v-show=\"!onlyHeader\" class=\"octopus-modal-body\">\n          <slot name=\"body\" />\n        </div>\n        <div v-show=\"!onlyHeader\" class=\"octopus-modal-footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport WindowCloseIcon from \"vue-material-design-icons/WindowClose.vue\";\nimport { onMounted, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  idModal: { default: undefined, type: String },\n  titleModal: { default: undefined, type: String },\n  closable: { default: true, type: Boolean },\n  canBeReduced: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n\n//Data \nconst onlyHeader = ref(false);\nconst focusElementRef = useTemplateRef('focusElement');\n\n//Composables\nconst { t } = useI18n();\n\nonMounted(()=>{\n  (focusElementRef?.value as HTMLElement)?.focus();\n})\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n\n</script>\n<style lang=\"scss\">\n.octopus-app .octopus-modal.octopus-modal-in-body{\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: block;\n  z-index: 1400;\n  width: 100%;\n  height: 100%;\n  overflow: hidden auto;\n  outline: 0;\n\n  .octopus-modal-backdrop {\n    opacity: 0.5;\n    z-index: 0;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: black;\n  }\n\n  &.octopus-only-header-modal .octopus-modal-backdrop {\n    opacity: 0.1;\n  }\n\n  .octopus-modal-dialog {\n    position: relative;\n    pointer-events: none;\n    margin: 1.75rem auto;\n    max-width: 80vw;\n    max-height: 90dvh;\n    width: 100%;\n    display: flex;\n    color: var(--octopus-color-text) !important;\n\n    @media (width <= 500px) {\n      width: 95%;\n    }\n  }\n\n  .octopus-modal-body {\n    flex: 1 1 auto;\n    padding: 1rem;\n    overflow-x: auto;\n\n    .scroller-vertical {\n      min-height: 200px;\n      height: 200px;\n    }\n  }\n\n  .octopus-modal-header {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: space-between;\n    border: 0;\n    border-radius: var(--octopus-border-radius) var(--octopus-border-radius) 0 0;\n    background: var(--octopus-primary);\n    color: white;\n    padding: 1rem;\n  }\n\n  .octopus-modal-content {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    width: 100%;\n    background-color: white;\n    background-clip: padding-box;\n    border: 0;\n    outline: 0;\n    height: auto !important;\n    max-height: initial !important;\n    border-radius: var(--octopus-border-radius);\n    box-shadow: 0 0.2rem 0.5rem var(--octopus-shadow);\n  }\n\n  &:not(.octopus-only-header-modal) .octopus-modal-dialog,\n  &:not(.octopus-only-header-modal) .octopus-modal-content {\n    min-height: 300px;\n  }\n\n\n  .octopus-modal-footer {\n    display: flex;\n    flex-shrink: 0;\n    border: 0;\n    flex-wrap: initial;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 1rem;\n\n    button {\n      margin: 0.1rem;\n    }\n  }\n}\n</style>","<template>\n  <div\n    :id=\"idModal\"\n    class=\"octopus-modal octopus-modal-in-body\"\n    :class=\"onlyHeader ? 'octopus-only-header-modal' : ''\"\n  >\n    <div class=\"octopus-modal-backdrop\" />\n    <div class=\"octopus-modal-dialog\">\n      <div class=\"octopus-modal-content\">\n        <div class=\"octopus-modal-header\">\n          <h5 cclass=\"octopus-modal-title\">\n            {{ titleModal }}\n          </h5>\n          <div class=\"d-flex align-items-center\">\n            <button\n              v-if=\"canBeReduced\"\n              class=\"btn-transparent text-light\"\n              :title=\"onlyHeader ? t('Enlarge') : t('Reduce')\"\n              @click=\"onlyHeader = !onlyHeader\"\n            >\n              <ChevronDownIcon :class=\"{ 'arrow-transform': !onlyHeader }\" />\n            </button>\n            <button\n              v-if=\"closable\"\n              :ref=\"closable ? 'focusElement' : ''\"\n              type=\"button\"\n              class=\"btn-transparent text-light\"\n              :title=\"t('Close')\"\n              @click=\"closePopup\"\n            >\n              <WindowCloseIcon />\n            </button>\n          </div>\n        </div>\n        <div v-show=\"!onlyHeader\" class=\"octopus-modal-body\">\n          <slot name=\"body\" />\n        </div>\n        <div v-show=\"!onlyHeader\" class=\"octopus-modal-footer\">\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport WindowCloseIcon from \"vue-material-design-icons/WindowClose.vue\";\nimport { onMounted, ref, useTemplateRef } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \ndefineProps({\n  idModal: { default: undefined, type: String },\n  titleModal: { default: undefined, type: String },\n  closable: { default: true, type: Boolean },\n  canBeReduced: { default: false, type: Boolean },\n})\n\n//Emits\nconst emit = defineEmits([\"close\"]);\n\n//Data \nconst onlyHeader = ref(false);\nconst focusElementRef = useTemplateRef('focusElement');\n\n//Composables\nconst { t } = useI18n();\n\nonMounted(()=>{\n  (focusElementRef?.value as HTMLElement)?.focus();\n})\n\n//Methods\nfunction closePopup(): void {\n  emit(\"close\");\n}\n\n</script>\n<style lang=\"scss\">\n.octopus-app .octopus-modal.octopus-modal-in-body{\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: block;\n  z-index: 1400;\n  width: 100%;\n  height: 100%;\n  overflow: hidden auto;\n  outline: 0;\n\n  .octopus-modal-backdrop {\n    opacity: 0.5;\n    z-index: 0;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: black;\n  }\n\n  &.octopus-only-header-modal .octopus-modal-backdrop {\n    opacity: 0.1;\n  }\n\n  .octopus-modal-dialog {\n    position: relative;\n    pointer-events: none;\n    margin: 1.75rem auto;\n    max-width: 80vw;\n    max-height: 90dvh;\n    width: 100%;\n    display: flex;\n    color: var(--octopus-color-text) !important;\n\n    @media (width <= 500px) {\n      width: 95%;\n    }\n  }\n\n  .octopus-modal-body {\n    flex: 1 1 auto;\n    padding: 1rem;\n    overflow-x: auto;\n\n    .scroller-vertical {\n      min-height: 200px;\n      height: 200px;\n    }\n  }\n\n  .octopus-modal-header {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: space-between;\n    border: 0;\n    border-radius: var(--octopus-border-radius) var(--octopus-border-radius) 0 0;\n    background: var(--octopus-primary);\n    color: white;\n    padding: 1rem;\n  }\n\n  .octopus-modal-content {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    width: 100%;\n    background-color: white;\n    background-clip: padding-box;\n    border: 0;\n    outline: 0;\n    height: auto !important;\n    max-height: initial !important;\n    border-radius: var(--octopus-border-radius);\n    box-shadow: 0 0.2rem 0.5rem var(--octopus-shadow);\n  }\n\n  &:not(.octopus-only-header-modal) .octopus-modal-dialog,\n  &:not(.octopus-only-header-modal) .octopus-modal-content {\n    min-height: 300px;\n  }\n\n\n  .octopus-modal-footer {\n    display: flex;\n    flex-shrink: 0;\n    border: 0;\n    flex-wrap: initial;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 1rem;\n\n    button {\n      margin: 0.1rem;\n    }\n  }\n}\n</style>"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,MAAM,OAAO;EAGb,MAAM,aAAa,IAAI,KAAK;EAC5B,MAAM,kBAAkB,eAAe,cAAc;EAGrD,MAAM,EAAE,MAAM,QAAQ;EAEtB,gBAAc;GACZ,CAAC,iBAAiB,QAAuB,MAAM;EACjD,CAAC;EAGD,SAAS,aAAmB;GAC1B,KAAK,OAAO;EACd;;uBA3EE,mBAyCM,OAAA;IAxCH,IAAI,QAAA;IACL,OAAK,eAAA,CAAC,uCACE,WAAA,QAAU,8BAAA,EAAA,CAAA;iCAElB,mBAAsC,OAAA,EAAjC,OAAM,yBAAwB,GAAA,MAAA,EAAA,IACnC,mBAkCM,OAlCN,YAkCM,CAjCJ,mBAgCM,OAhCN,YAgCM;IA/BJ,mBAwBM,OAxBN,YAwBM,CAvBJ,mBAEK,MAFL,YAEK,gBADA,QAAA,UAAU,GAAA,CAAA,GAEf,mBAmBM,OAnBN,YAmBM,CAjBI,QAAA,gBAAA,UAAA,GADR,mBAOS,UAAA;;KALP,OAAM;KACL,OAAO,WAAA,QAAa,MAAA,CAAA,EAAC,SAAA,IAAc,MAAA,CAAA,EAAC,QAAA;KACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,WAAA,QAAU,CAAI,WAAA;QAEtB,YAA+D,iBAAA,EAA7C,OAAK,eAAA,EAAA,mBAAA,CAAwB,WAAA,MAAU,CAAA,EAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,GAGnD,QAAA,YAAA,UAAA,GADR,mBASS,UAAA;;KAPN,KAAK,QAAA,WAAQ,iBAAA;KACd,MAAK;KACL,OAAM;KACL,OAAO,MAAA,CAAA,EAAC,OAAA;KACR,SAAO;QAER,YAAmB,eAAA,CAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,CAAA;mBAIzB,mBAEM,OAFN,YAEM,CADJ,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA,OAAA,CADR,WAAA,KAAU,CAAA,CAAA;mBAGxB,mBAEM,OAFN,aAEM,CADJ,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA,OAAA,CADV,WAAA,KAAU,CAAA,CAAA"}

package/dist/ClassicMultiselect-BEY-HpGk.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassicMultiselect-BEY-HpGk.mjs","names":[],"sources":["../src/components/form/ClassicMultiselect.vue","../src/components/form/ClassicMultiselect.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      'multiselect-in-modal': inModal,\n      'multiselect-no-deselect': noDeselect,\n      'form-margin': displayLabel,\n    }\"\n    :style=\"{ width: width, height: height }\"\n  >\n    <div class=\"d-flex align-items-center\">\n      <label :class=\"displayLabel ? '' : 'd-none'\" :for=\"id\" class=\"form-label\">{{\n        label\n      }}\n        <AsteriskIcon v-if=\"displayRequired\" :size=\"10\" class=\"ms-1 mb-2\" :title=\"t('Mandatory input')\"/>\n      </label>\n\n      <template v-if=\"popover\">\n        <button\n          :id=\"'popover' + id\"\n          :title=\"t('Help')\"\n          class=\"btn-transparent\"\n        >\n          <HelpCircleIcon :size=\"30\" />\n        </button>\n        <ClassicPopover\n          :target=\"'popover' + id\"\n          popover-class=\"popover-z-index\"\n          :relative-class=\"popoverRelativeClass\"\n        >\n          <!-- eslint-disable vue/no-v-html -->\n          <div v-html=\"popover\" />\n          <!-- eslint-enable -->\n        </ClassicPopover>\n      </template>\n    </div>\n\n    <vSelect\n      v-model=\"optionSelected\"\n      :input-id=\"id\"\n      :label=\"optionLabel\"\n      :multiple=\"multiple\"\n      :options=\"options\"\n      :disabled=\"isDisabled\"\n      :loading=\"isLoading\"\n      :placeholder=\"placeholder\"\n      :clear-search-on-blur=\"\n        () => {\n          return true;\n        }\n      \"\n      :filter=\"fakeSearch\"\n      :selectable=\"() => !maxOptionsSelected\"\n      :style=\"{height: height }\"\n      :class=\"{ 'border border-danger': textDanger?.length }\"\n      @open=\"onSearch\"\n      @search=\"onSearch\"\n      @close=\"onClose\"\n      @option:selected=\"onOptionSelected\"\n      @option:deselected=\"onOptionDeselect\"\n    >\n      \n      <template v-if=\"optionCustomTemplating.length\" #option=\"option\">\n        <slot :name=\"optionCustomTemplating\" :option=\"option\" />\n      </template>\n\n      <template v-else-if=\"withSelectAll\" #option=\"option\">\n        <strong v-if=\"option.id === selectAll.id\">\n          {{ option[optionLabel] }}\n        </strong>\n        <span v-else>\n          {{ option[optionLabel] }}\n        </span>\n      </template>\n\n      <template\n        v-if=\"optionSelectedCustomTemplating.length\"\n        #selected-option=\"option\"\n      >\n        <slot :name=\"optionSelectedCustomTemplating\" :option=\"option\" />\n      </template>\n\n      <template #selected-option-container=\"{ option, deselect, disabled, multiple: mul }\">\n        <slot name=\"selected-option-container\" v-bind=\"{ option, deselect, disabled, multiple: mul }\" />\n      </template>\n\n      <template #no-options=\"{ searching }\">\n        <span v-if=\"searching\">{{\n          t(\"No elements found. Consider changing the search query.\")\n        }}</span>\n        <span v-else>{{ t(\"List is empty\") }}</span>\n      </template>\n\n      <template #list-footer>\n        <div v-if=\"remainingElements\" class=\"vs__dropdown-option\">\n          {{\n            t(\n              \"Count more elements matched your query, please make a more specific search.\",\n              { count: remainingElements },\n            )\n          }}\n        </div>\n      </template>\n\n      <template #list-header>\n        <div v-if=\"maxOptionsSelected\" class=\"vs__dropdown-option\">\n          {{ t(\"Multiselect max options\", { max: maxOptions }) }}\n        </div>\n      </template>\n\n      <template #open-indicator=\"{ attributes }\">\n        <ChevronDownIcon v-bind=\"attributes\" />\n      </template>\n    </vSelect>\n    <div v-if=\"textDanger\" class=\"text-danger\">\n      {{ textDanger }}\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\" generic=\"T\">\nimport { computed, defineAsyncComponent, ref, Ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport AsteriskIcon from \"vue-material-design-icons/Asterisk.vue\";\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport vSelect from \"vue-select\";\nimport HelpCircleIcon from \"vue-material-design-icons/HelpCircle.vue\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../misc/ClassicPopover.vue\"),\n);\n\n//Props \nconst {\n  inModal = false, multiple = false, isDisabled = false, width = \"100%\",\n  maxElement = 50, minSearchLength = 3, noDeselect = true, displayLabel = false,\n  allowEmpty = true, optionChosen, maxOptions = null,\n  optionCustomTemplating = '', optionSelectedCustomTemplating = '',\n  optionLabel,\n  withSelectAll = false\n} = defineProps<{\n  id?: string;\n  label?: string;\n  placeholder?: string;\n  optionLabel?: keyof T;\n  inModal?: boolean;\n  multiple?: boolean;\n  isDisabled?: boolean;\n  width?: string;\n  height?: string;\n  maxElement?: number;\n  minSearchLength?: number;\n  /** Currently chosen option */\n  optionChosen?: T|Array<T>;\n  noDeselect?: boolean;\n  optionCustomTemplating?: string;\n  optionSelectedCustomTemplating?: string;\n  displayLabel?: boolean;\n  maxOptions?: number;\n  allowEmpty?: boolean;\n  textDanger ?:string;\n  displayRequired?: boolean;\n  popover?: string;\n  popoverRelativeClass?: string;\n  /**\n   * Add an option to select everything at once\n   * If set to a truthy string, the added option will have this value as its\n   * label. If set to true, use a generic label.\n   */\n  withSelectAll?: boolean|string;\n}>();\n\n//Emits\nconst emit = defineEmits<{\n  (e: \"onSearch\", query: string): void;\n  (e: \"selected\", data: Array<T>|T): void;\n  (e: \"onClose\", data: string): void;\n}>();\n\n//Composables\nconst { t } = useI18n();\n\n\n//Data \nconst optionSelected : Ref<T|T[]>= ref(undefined);\nconst options : Ref<Array<T>>= ref([]);\nconst remainingElements = ref(0);\nconst isLoading = ref(false);\nconst searchInput = ref(\"\");\nconst selectAll = {\n  id: 'SELECT_ALL',\n  [optionLabel]: withSelectAll && typeof withSelectAll === 'string' ? withSelectAll : t('All')\n} as unknown as T;\n\n//Computed\nconst maxOptionsSelected = computed(() => {\n  if (maxOptions !== null && multiple) {\n    return (\n      (optionSelected.value as Array<T>).length >= maxOptions\n    );\n  }\n  return false;\n});\n\n//Watch\nwatch(()=>optionChosen, () => {\n  optionSelected.value = optionChosen;\n}, {deep: true, immediate: true});\nwatch(optionSelected, () => {\n  if (noDeselect || null !== optionSelected.value) {\n    return;\n  }\n  emit(\"selected\", undefined);\n}, {deep: true});\n\n//Methods\nfunction fakeSearch(): Array<unknown> {\n  return options.value;\n}\n\nfunction onSearch(search?: string): void {\n  if (search && search.length < minSearchLength) {\n    return;\n  } else if (search) {\n    searchInput.value = search;\n  }\n  isLoading.value = true;\n  emit(\"onSearch\", search);\n}\n\nfunction onClose() {\n  emit(\"onClose\", searchInput.value);\n  searchInput.value = \"\";\n}\n\nfunction afterSearch(optionsFetched: Array<T>, count: number): void {\n  if (withSelectAll) {\n    options.value = [selectAll, ...optionsFetched];\n    count += 1;\n  } else {\n    options.value = optionsFetched;\n  }\n  remainingElements.value = Math.max(0, count - maxElement);\n  isLoading.value = false;\n}\n\nfunction onOptionSelected(newValue: Array<T>|T): void {\n  // Check if selectAll is included\n  if (withSelectAll && Array.isArray(newValue) && newValue.find(o => o.id === selectAll.id)) {\n    emit(\"selected\", options.value.slice(1));\n  } else {\n    emit(\"selected\", newValue);\n  }\n}\n\nfunction onOptionDeselect(event: T): void {\n  if (!multiple) {\n    return;\n  }\n  if (\n    !allowEmpty &&\n    0 === (optionSelected.value as Array<T>).length\n  ) {\n    (optionSelected.value as Array<T>).push(event);\n    return;\n  }\n  emit(\"selected\", (optionSelected.value as Array<T>));\n}\n\n//Expose\ndefineExpose({\n  afterSearch\n});\n</script>\n\n<style lang=\"scss\">\n@use \"vue-select/dist/vue-select.css\";\n/* stylelint-disable */\n:root {\n  --vs-dropdown-z-index: 1405;\n  --vs-border-radius: 0.2rem;\n  --vs-dropdown-option--active-bg: var(--octopus-secondary);\n  --vs-dropdown-option--active-color: black;\n  --vs-font-size: 0.8rem;\n  --vs-border-width: 2px;\n  --vs-border-color: var(--octopus-border-default);\n}\n\n.octopus-app {\n  .vs__dropdown-option {\n    white-space: initial;\n  }\n\n  .vs--searchable .vs__dropdown-toggle {\n    cursor: pointer;\n  }\n\n  .vs__dropdown-toggle {\n    padding: 0;\n    height: 100%;\n  }\n\n  .vs__search, .vs__search:focus{\n    border: var(--vs-selected-border-width) solid transparent;\n  }\n  .vs__search:focus {\n    min-width: 150px;\n  }\n\n  .multiselect-no-deselect .vs__clear {\n    display: none;\n  }\n\n  .multiselect-transparent {\n    --vs-border-color: transparent;\n  }\n\n  .multiselect-white {\n    --vs-selected-color: white;\n    --vs-selected-bg: transparent;\n    --vs-dropdown-bg: black;\n    --vs-controls-color: white;\n\n    .vs__actions path {\n      fill: white;\n    }\n  }\n\n  .multiselect-in-modal{\n    .vs__dropdown-menu{\n      position: relative !important;\n    }\n  }\n}\n/* stylelint-enable */\n</style>\n","<template>\n  <div\n    :class=\"{\n      'multiselect-in-modal': inModal,\n      'multiselect-no-deselect': noDeselect,\n      'form-margin': displayLabel,\n    }\"\n    :style=\"{ width: width, height: height }\"\n  >\n    <div class=\"d-flex align-items-center\">\n      <label :class=\"displayLabel ? '' : 'd-none'\" :for=\"id\" class=\"form-label\">{{\n        label\n      }}\n        <AsteriskIcon v-if=\"displayRequired\" :size=\"10\" class=\"ms-1 mb-2\" :title=\"t('Mandatory input')\"/>\n      </label>\n\n      <template v-if=\"popover\">\n        <button\n          :id=\"'popover' + id\"\n          :title=\"t('Help')\"\n          class=\"btn-transparent\"\n        >\n          <HelpCircleIcon :size=\"30\" />\n        </button>\n        <ClassicPopover\n          :target=\"'popover' + id\"\n          popover-class=\"popover-z-index\"\n          :relative-class=\"popoverRelativeClass\"\n        >\n          <!-- eslint-disable vue/no-v-html -->\n          <div v-html=\"popover\" />\n          <!-- eslint-enable -->\n        </ClassicPopover>\n      </template>\n    </div>\n\n    <vSelect\n      v-model=\"optionSelected\"\n      :input-id=\"id\"\n      :label=\"optionLabel\"\n      :multiple=\"multiple\"\n      :options=\"options\"\n      :disabled=\"isDisabled\"\n      :loading=\"isLoading\"\n      :placeholder=\"placeholder\"\n      :clear-search-on-blur=\"\n        () => {\n          return true;\n        }\n      \"\n      :filter=\"fakeSearch\"\n      :selectable=\"() => !maxOptionsSelected\"\n      :style=\"{height: height }\"\n      :class=\"{ 'border border-danger': textDanger?.length }\"\n      @open=\"onSearch\"\n      @search=\"onSearch\"\n      @close=\"onClose\"\n      @option:selected=\"onOptionSelected\"\n      @option:deselected=\"onOptionDeselect\"\n    >\n      \n      <template v-if=\"optionCustomTemplating.length\" #option=\"option\">\n        <slot :name=\"optionCustomTemplating\" :option=\"option\" />\n      </template>\n\n      <template v-else-if=\"withSelectAll\" #option=\"option\">\n        <strong v-if=\"option.id === selectAll.id\">\n          {{ option[optionLabel] }}\n        </strong>\n        <span v-else>\n          {{ option[optionLabel] }}\n        </span>\n      </template>\n\n      <template\n        v-if=\"optionSelectedCustomTemplating.length\"\n        #selected-option=\"option\"\n      >\n        <slot :name=\"optionSelectedCustomTemplating\" :option=\"option\" />\n      </template>\n\n      <template #selected-option-container=\"{ option, deselect, disabled, multiple: mul }\">\n        <slot name=\"selected-option-container\" v-bind=\"{ option, deselect, disabled, multiple: mul }\" />\n      </template>\n\n      <template #no-options=\"{ searching }\">\n        <span v-if=\"searching\">{{\n          t(\"No elements found. Consider changing the search query.\")\n        }}</span>\n        <span v-else>{{ t(\"List is empty\") }}</span>\n      </template>\n\n      <template #list-footer>\n        <div v-if=\"remainingElements\" class=\"vs__dropdown-option\">\n          {{\n            t(\n              \"Count more elements matched your query, please make a more specific search.\",\n              { count: remainingElements },\n            )\n          }}\n        </div>\n      </template>\n\n      <template #list-header>\n        <div v-if=\"maxOptionsSelected\" class=\"vs__dropdown-option\">\n          {{ t(\"Multiselect max options\", { max: maxOptions }) }}\n        </div>\n      </template>\n\n      <template #open-indicator=\"{ attributes }\">\n        <ChevronDownIcon v-bind=\"attributes\" />\n      </template>\n    </vSelect>\n    <div v-if=\"textDanger\" class=\"text-danger\">\n      {{ textDanger }}\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\" generic=\"T\">\nimport { computed, defineAsyncComponent, ref, Ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport AsteriskIcon from \"vue-material-design-icons/Asterisk.vue\";\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport vSelect from \"vue-select\";\nimport HelpCircleIcon from \"vue-material-design-icons/HelpCircle.vue\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../misc/ClassicPopover.vue\"),\n);\n\n//Props \nconst {\n  inModal = false, multiple = false, isDisabled = false, width = \"100%\",\n  maxElement = 50, minSearchLength = 3, noDeselect = true, displayLabel = false,\n  allowEmpty = true, optionChosen, maxOptions = null,\n  optionCustomTemplating = '', optionSelectedCustomTemplating = '',\n  optionLabel,\n  withSelectAll = false\n} = defineProps<{\n  id?: string;\n  label?: string;\n  placeholder?: string;\n  optionLabel?: keyof T;\n  inModal?: boolean;\n  multiple?: boolean;\n  isDisabled?: boolean;\n  width?: string;\n  height?: string;\n  maxElement?: number;\n  minSearchLength?: number;\n  /** Currently chosen option */\n  optionChosen?: T|Array<T>;\n  noDeselect?: boolean;\n  optionCustomTemplating?: string;\n  optionSelectedCustomTemplating?: string;\n  displayLabel?: boolean;\n  maxOptions?: number;\n  allowEmpty?: boolean;\n  textDanger ?:string;\n  displayRequired?: boolean;\n  popover?: string;\n  popoverRelativeClass?: string;\n  /**\n   * Add an option to select everything at once\n   * If set to a truthy string, the added option will have this value as its\n   * label. If set to true, use a generic label.\n   */\n  withSelectAll?: boolean|string;\n}>();\n\n//Emits\nconst emit = defineEmits<{\n  (e: \"onSearch\", query: string): void;\n  (e: \"selected\", data: Array<T>|T): void;\n  (e: \"onClose\", data: string): void;\n}>();\n\n//Composables\nconst { t } = useI18n();\n\n\n//Data \nconst optionSelected : Ref<T|T[]>= ref(undefined);\nconst options : Ref<Array<T>>= ref([]);\nconst remainingElements = ref(0);\nconst isLoading = ref(false);\nconst searchInput = ref(\"\");\nconst selectAll = {\n  id: 'SELECT_ALL',\n  [optionLabel]: withSelectAll && typeof withSelectAll === 'string' ? withSelectAll : t('All')\n} as unknown as T;\n\n//Computed\nconst maxOptionsSelected = computed(() => {\n  if (maxOptions !== null && multiple) {\n    return (\n      (optionSelected.value as Array<T>).length >= maxOptions\n    );\n  }\n  return false;\n});\n\n//Watch\nwatch(()=>optionChosen, () => {\n  optionSelected.value = optionChosen;\n}, {deep: true, immediate: true});\nwatch(optionSelected, () => {\n  if (noDeselect || null !== optionSelected.value) {\n    return;\n  }\n  emit(\"selected\", undefined);\n}, {deep: true});\n\n//Methods\nfunction fakeSearch(): Array<unknown> {\n  return options.value;\n}\n\nfunction onSearch(search?: string): void {\n  if (search && search.length < minSearchLength) {\n    return;\n  } else if (search) {\n    searchInput.value = search;\n  }\n  isLoading.value = true;\n  emit(\"onSearch\", search);\n}\n\nfunction onClose() {\n  emit(\"onClose\", searchInput.value);\n  searchInput.value = \"\";\n}\n\nfunction afterSearch(optionsFetched: Array<T>, count: number): void {\n  if (withSelectAll) {\n    options.value = [selectAll, ...optionsFetched];\n    count += 1;\n  } else {\n    options.value = optionsFetched;\n  }\n  remainingElements.value = Math.max(0, count - maxElement);\n  isLoading.value = false;\n}\n\nfunction onOptionSelected(newValue: Array<T>|T): void {\n  // Check if selectAll is included\n  if (withSelectAll && Array.isArray(newValue) && newValue.find(o => o.id === selectAll.id)) {\n    emit(\"selected\", options.value.slice(1));\n  } else {\n    emit(\"selected\", newValue);\n  }\n}\n\nfunction onOptionDeselect(event: T): void {\n  if (!multiple) {\n    return;\n  }\n  if (\n    !allowEmpty &&\n    0 === (optionSelected.value as Array<T>).length\n  ) {\n    (optionSelected.value as Array<T>).push(event);\n    return;\n  }\n  emit(\"selected\", (optionSelected.value as Array<T>));\n}\n\n//Expose\ndefineExpose({\n  afterSearch\n});\n</script>\n\n<style lang=\"scss\">\n@use \"vue-select/dist/vue-select.css\";\n/* stylelint-disable */\n:root {\n  --vs-dropdown-z-index: 1405;\n  --vs-border-radius: 0.2rem;\n  --vs-dropdown-option--active-bg: var(--octopus-secondary);\n  --vs-dropdown-option--active-color: black;\n  --vs-font-size: 0.8rem;\n  --vs-border-width: 2px;\n  --vs-border-color: var(--octopus-border-default);\n}\n\n.octopus-app {\n  .vs__dropdown-option {\n    white-space: initial;\n  }\n\n  .vs--searchable .vs__dropdown-toggle {\n    cursor: pointer;\n  }\n\n  .vs__dropdown-toggle {\n    padding: 0;\n    height: 100%;\n  }\n\n  .vs__search, .vs__search:focus{\n    border: var(--vs-selected-border-width) solid transparent;\n  }\n  .vs__search:focus {\n    min-width: 150px;\n  }\n\n  .multiselect-no-deselect .vs__clear {\n    display: none;\n  }\n\n  .multiselect-transparent {\n    --vs-border-color: transparent;\n  }\n\n  .multiselect-white {\n    --vs-selected-color: white;\n    --vs-selected-bg: transparent;\n    --vs-dropdown-bg: black;\n    --vs-controls-color: white;\n\n    .vs__actions path {\n      fill: white;\n    }\n  }\n\n  .multiselect-in-modal{\n    .vs__dropdown-menu{\n      position: relative !important;\n    }\n  }\n}\n/* stylelint-enable */\n</style>\n"],"mappings":"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"}