@saooti/octopus-sdk 42.0.3 → 42.0.5

package/dist/ClassicHelpButton-DkCQoPpA.mjs

@@ -0,0 +1,57 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { t as ClassicPopover_default } from "./ClassicPopover-Bk5kf37e.mjs";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, openBlock, renderSlot, withCtx } from "vue";
+import HelpCircleIcon from "vue-material-design-icons/HelpCircle.vue";
+//#region src/components/misc/ClassicHelpButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var _hoisted_2 = { class: "content" };
+var ClassicHelpButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ClassicHelpButton",
+	props: {
+		colored: { type: Boolean },
+		inModal: { type: Boolean },
+		relativeClass: {},
+		small: { type: Boolean }
+	},
+	setup(__props) {
+		/** The color to use for the icon */
+		const color = computed(() => {
+			if (__props.colored) return "var(--octopus-primary-darker)";
+			else return "black";
+		});
+		/** The internal ID for the elements */
+		const computedId = computed(() => {
+			return "popover-" + getCurrentInstance()?.uid;
+		});
+		/** The size of the icon, according to the props */
+		const iconSize = computed(() => {
+			if (__props.small) return 24;
+			else return 30;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				id: computedId.value,
+				class: "btn-transparent"
+			}, [createVNode(HelpCircleIcon, {
+				"fill-color": color.value,
+				size: iconSize.value
+			}, null, 8, ["fill-color", "size"]), createVNode(ClassicPopover_default, {
+				target: computedId.value,
+				"popover-class": "help-popover",
+				"relative-class": __props.inModal ? "octopus-modal" : __props.relativeClass
+			}, {
+				default: withCtx(() => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])]),
+				_: 3
+			}, 8, ["target", "relative-class"])], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+//#region src/components/misc/ClassicHelpButton.vue
+var ClassicHelpButton_exports = /* @__PURE__ */ __exportAll({ default: () => ClassicHelpButton_default });
+var ClassicHelpButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ClassicHelpButton_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9edec232"]]);
+//#endregion
+export { ClassicHelpButton_exports as n, ClassicHelpButton_default as t };
+
+//# sourceMappingURL=ClassicHelpButton-DkCQoPpA.mjs.map

package/dist/ClassicHelpButton-DkCQoPpA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassicHelpButton-DkCQoPpA.mjs","names":[],"sources":["../src/components/misc/ClassicHelpButton.vue","../src/components/misc/ClassicHelpButton.vue"],"sourcesContent":["<!--\n    A simple component to display a help button that shows its message when\n    hovered.\n\n    Usage: \n        <ClassicHelpButton>This is my help message</ClassicHelpButton>\n-->\n<template>\n    <button\n        :id=\"computedId\"\n        class=\"btn-transparent\"\n    >\n        <!-- Button icon -->\n        <HelpCircleIcon :fill-color=\"color\" :size=\"iconSize\" />\n\n        <!-- Tooltip -->\n        <ClassicPopover\n            :target=\"computedId\"\n            popover-class=\"help-popover\"\n            :relative-class=\"inModal ? 'octopus-modal' : relativeClass\"\n        >\n            <div class=\"content\">\n                <slot />\n            </div>\n        </ClassicPopover>\n    </button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, getCurrentInstance } from 'vue';\n\nimport HelpCircleIcon from \"vue-material-design-icons/HelpCircle.vue\";\nimport ClassicPopover from './ClassicPopover.vue';\n\nconst { colored, small } = defineProps<{\n    colored?: boolean;\n    /** Automatically sets relative class to octopus-modal */\n    inModal?: boolean;\n    /** Make the popover relative (userful when in page-element) */\n    relativeClass?: string;\n    /** Make the icon smaller if true *(default: false)* */\n    small?: boolean;\n}>();\n\n/** The color to use for the icon */\nconst color = computed(() => {\n    if (colored) {\n        return \"var(--octopus-primary-darker)\";\n    } else {\n        return \"black\";\n    }\n});\n\n/** The internal ID for the elements */\nconst computedId = computed(() => {\n    return 'popover-' + getCurrentInstance()?.uid;\n});\n\n/** The size of the icon, according to the props */\nconst iconSize = computed(() => {\n    if (small) {\n        return 24;\n    } else {\n        return 30;\n    }\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.content {\n    font: revert;\n    font-size: 18px !important;\n    text-align: start;\n}\n\n.help-popover {\n    background-color: var(--octopus-secondary-lighter);\n    max-width: 60%;\n}\n</style>\n","<!--\n    A simple component to display a help button that shows its message when\n    hovered.\n\n    Usage: \n        <ClassicHelpButton>This is my help message</ClassicHelpButton>\n-->\n<template>\n    <button\n        :id=\"computedId\"\n        class=\"btn-transparent\"\n    >\n        <!-- Button icon -->\n        <HelpCircleIcon :fill-color=\"color\" :size=\"iconSize\" />\n\n        <!-- Tooltip -->\n        <ClassicPopover\n            :target=\"computedId\"\n            popover-class=\"help-popover\"\n            :relative-class=\"inModal ? 'octopus-modal' : relativeClass\"\n        >\n            <div class=\"content\">\n                <slot />\n            </div>\n        </ClassicPopover>\n    </button>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, getCurrentInstance } from 'vue';\n\nimport HelpCircleIcon from \"vue-material-design-icons/HelpCircle.vue\";\nimport ClassicPopover from './ClassicPopover.vue';\n\nconst { colored, small } = defineProps<{\n    colored?: boolean;\n    /** Automatically sets relative class to octopus-modal */\n    inModal?: boolean;\n    /** Make the popover relative (userful when in page-element) */\n    relativeClass?: string;\n    /** Make the icon smaller if true *(default: false)* */\n    small?: boolean;\n}>();\n\n/** The color to use for the icon */\nconst color = computed(() => {\n    if (colored) {\n        return \"var(--octopus-primary-darker)\";\n    } else {\n        return \"black\";\n    }\n});\n\n/** The internal ID for the elements */\nconst computedId = computed(() => {\n    return 'popover-' + getCurrentInstance()?.uid;\n});\n\n/** The size of the icon, according to the props */\nconst iconSize = computed(() => {\n    if (small) {\n        return 24;\n    } else {\n        return 30;\n    }\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.content {\n    font: revert;\n    font-size: 18px !important;\n    text-align: start;\n}\n\n.help-popover {\n    background-color: var(--octopus-secondary-lighter);\n    max-width: 60%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EA6CA,MAAM,QAAQ,eAAe;GACzB,IAAI,QAAA,SACA,OAAO;QAEP,OAAO;EAEf,CAAC;;EAGD,MAAM,aAAa,eAAe;GAC9B,OAAO,aAAa,mBAAmB,GAAG;EAC9C,CAAC;;EAGD,MAAM,WAAW,eAAe;GAC5B,IAAI,QAAA,OACA,OAAO;QAEP,OAAO;EAEf,CAAC;;uBAzDG,mBAiBS,UAAA;IAhBJ,IAAI,WAAA;IACL,OAAM;OAGN,YAAuD,gBAAA;IAAtC,cAAY,MAAA;IAAQ,MAAM,SAAA;wCAG3C,YAQiB,wBAAA;IAPZ,QAAQ,WAAA;IACT,iBAAc;IACb,kBAAgB,QAAA,UAAO,kBAAqB,QAAA;;2BAIvC,CAFN,mBAEM,OAFN,YAEM,CADF,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/ClassicInputText-B7EAwP2N.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassicInputText-B7EAwP2N.mjs","names":[],"sources":["../src/components/form/ClassicInputText.vue","../src/components/form/ClassicInputText.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-flex flex-column classic-input-text\"\n    :class=\"{ 'form-margin': displayLabel }\"\n  >\n    <div class=\"d-flex align-items-center\">\n      <slot name=\"complementLabel\" />\n      <component\n        :is=\"isWysiwyg? 'div': 'label'\"\n        :class=\"[classLabel, displayLabel ? '' : 'd-none']\"\n        :for=\"isWysiwyg ? '': computedInputId\"\n      >\n        {{ label }}\n        <AsteriskIcon\n          v-if=\"displayRequired\"\n          :size=\"10\"\n          class=\"ms-1 mb-2\"\n          :title=\"t('Mandatory input')\"\n        />\n      </component>\n      <slot name=\"afterTitle\" />\n      <template v-if=\"popover\">\n        <button\n          :id=\"'popover' + computedInputId\"\n          :title=\"t('Help')\"\n          class=\"btn-transparent\"\n        >\n          <HelpCircleIcon :size=\"30\" />\n        </button>\n\n        <ClassicPopover\n          :target=\"'popover' + computedInputId\"\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      <slot name=\"afterHelp\" />\n    </div>\n    <slot name=\"betweenTitleInput\" />\n    <input\n      v-if=\"!isWysiwyg && !isTextarea\"\n      v-show=\"showField\"\n      :id=\"computedInputId\"\n      ref=\"focusElement\"\n      v-model=\"textValue\"\n      :type=\"typeInput\"\n      class=\"form-input\"\n      :placeholder=\"placeholder\"\n      :data-selenium=\"dataSelenium\"\n      :data-value=\"textValue\"\n      :maxlength=\"inputMaxLengthField\"\n      :readonly=\"readonly ? 'readonly' : undefined\"\n      :class=\"{\n        'border border-danger':\n          forceError || (isError && (undefined !== textValue || canBeNull)),\n      }\"\n      :disabled=\"isDisable || disabled\"\n      :required=\"!canBeNull\"\n      :aria-required=\"!canBeNull\"\n      :autocomplete=\"autocompleteType\"\n      @blur=\"emit('blur')\"\n    >\n    <textarea\n      v-else-if=\"isTextarea\"\n      v-show=\"showField\"\n      :id=\"computedInputId\"\n      ref=\"focusElement\"\n      v-model=\"textValue\"\n      :data-selenium=\"dataSelenium\"\n      :placeholder=\"placeholder\"\n      :readonly=\"readonly ? 'readonly' : undefined\"\n      class=\"form-input\"\n      :class=\"{\n        'border border-danger':\n          forceError || (isError && (undefined !== textValue || canBeNull)),\n      }\"\n      :disabled=\"isDisable || disabled\"\n      :required=\"!canBeNull\"\n    />\n    <ClassicWysiwyg\n      v-else\n      v-show=\"showField\"\n      v-model:content=\"textValue\"\n      :error-description=\"\n        forceError || (isError && (undefined !== textValue || canBeNull))\n      \"\n      :is-disabled=\"isDisable || disabled\"\n    />\n    <div class=\"d-flex\">\n      <ClassicEmojiPicker\n        v-if=\"isEmojiPicker\"\n        :popover-relative-class=\"popoverRelativeClass\"\n        :is-top-position=\"true\"\n        @emoji-selected=\"addEmojiSelected\"\n      />\n      <div\n        v-if=\"isWysiwyg\"\n        class=\"h6\"\n      >\n        {{ t(\"Characters number calculated over HTML code\") }}\n      </div>\n      <div\n        v-else-if=\"'' !== indicText\"\n        class=\"text-indic\"\n      >\n        {{ indicText }}\n      </div>\n      <div\n        v-else-if=\"\n          forceError || (isError && (undefined !== textValue || canBeNull))\n        \"\n        class=\"text-danger\"\n      >\n        {{ errorText }}\n      </div>\n      <p\n        v-if=\"0 !== maxLength && showField\"\n        class=\"counter-align-right\"\n        :class=\"{ 'text-danger': !valueLengthValid }\"\n      >\n        {{ countValue + \" / \" + maxLength }}\n      </p>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport AsteriskIcon from \"vue-material-design-icons/Asterisk.vue\";\nimport HelpCircleIcon from \"vue-material-design-icons/HelpCircle.vue\";\nimport { computed, defineAsyncComponent, onMounted, onUnmounted, Ref, ref, useTemplateRef, watch, getCurrentInstance } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../misc/ClassicPopover.vue\"),\n);\nconst ClassicWysiwyg = defineAsyncComponent(\n  () => import(\"./ClassicWysiwyg.vue\"),\n);\nconst ClassicEmojiPicker = defineAsyncComponent(\n  () => import(\"./ClassicEmojiPicker.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  inputId: { default: \"\", type: String },\n  label: { default: \"\", type: String },\n  /** The input's value */\n  textInit: { default: undefined, type: String },\n  maxLength: { default: 0, type: Number },\n  errorText: { default: \"\", type: String },\n  isTextarea: { default: false, type: Boolean },\n  isWysiwyg: { default: false, type: Boolean },\n  /** A regex checked against the input, if the input doesn't match mark it with error */\n  regex: { default: undefined, type: RegExp },\n  canBeNull: { default: false, type: Boolean },\n  inputMaxLengthField: { default: undefined, type: Number },\n  errorVariable: { default: true, type: Boolean },\n  /**\n   * Disable the text input\n   * @deprecated Use `disabled` instead\n   */\n  isDisable: { default: false, type: Boolean },\n  /**\n   * Disable the text input\n   */\n  disabled: { default: false, type: Boolean },\n  indicText: { default: \"\", type: String },\n  dataSelenium: { default: \"\", type: String },\n  placeholder: { default: \"\", type: String },\n  popover: { default: undefined, type: String },\n  /**\n   * Display content but do not allow changes\n   */\n  readonly: { default: false, type: Boolean },\n  forceError: { default: false, type: Boolean },\n  displayLabel: { default: true, type: Boolean },\n  focus: { default: false, type: Boolean },\n  isEmojiPicker: { default: false, type: Boolean },\n  popoverRelativeClass: { default: undefined, type: String },\n  forceReload: { default: false, type: Boolean },\n  typeInput: { default: \"text\", type: String },\n  displayRequired: { default: false, type: Boolean },\n  classLabel: { default: \"form-label\", type: String },\n  showField: { default: true, type: Boolean },\n  autocompleteType: { default: \"off\", type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"update:textInit\", \"update:errorVariable\", \"blur\"]);\n\n//Data \nconst textValue : Ref<string | undefined>= ref(undefined);\nconst focusElementRef = useTemplateRef('focusElement');\n\n//Composables \nconst { t } = useI18n();\n\n//Computed\nconst computedInputId = computed(() => props.inputId || 'input-' + getCurrentInstance()?.uid);\nconst isError = computed(() => !valueTrimValid.value || !valueLengthValid.value || !valueRegexValid.value);\nconst countValue = computed(() => {\n  if (textValue.value) {\n    return textValue.value.length;\n  }\n  return 0;\n});\nconst valueTrimValid = computed(() => {\n  if (!props.canBeNull) {\n    if (!textValue.value) {\n      return false;\n    }\n    return 0 !== textValue.value.trim().length;\n  }\n  return true;\n});\nconst valueLengthValid = computed(() => {\n  if (0 === props.maxLength) {\n    return true;\n  }\n  return props.maxLength >= countValue.value;\n});\nconst valueRegexValid = computed(() => {\n  if (props.regex === undefined) {\n    return true;\n  }\n  if (!textValue.value || \"\" === textValue.value) {\n    return props.canBeNull;\n  }\n  return textValue.value.match(props.regex) !== null;\n});\n  \n//Watch\nwatch(()=>props.forceReload, () => {\n  if (props.textInit !== textValue.value) {\n    textValue.value = props.textInit;\n  }\n});\nwatch(isError, () => {\n  emit(\"update:errorVariable\", isError.value);\n});\nwatch(textValue, () => {\n  if (props.textInit !== textValue.value) {\n    emit(\"update:textInit\", textValue.value);\n  }\n});\nwatch(()=>props.textInit, () => {\n  if (props.textInit !== textValue.value) {\n    textValue.value = props.textInit;\n  }\n});\n\n\nonMounted(()=>{\n  if (props.focus) {\n    (focusElementRef?.value as HTMLElement)?.focus();\n  }\n  textValue.value = props.textInit;\n  if (props.errorVariable !== isError.value) {\n    emit(\"update:errorVariable\", isError.value);\n  }\n\n  if (props.isTextarea) {\n    // Delay a scroll back to the top of the text area\n    scrollTimer = setTimeout(() => {\n      const textArea = document.getElementById(computedInputId.value);\n      if (textArea) {\n        textArea.scrollTop = 0;\n      }\n    }, 100);\n  }\n});\n\nlet scrollTimer: ReturnType<typeof setTimeout> | undefined;\nonUnmounted(() => {\n  clearTimeout(scrollTimer);\n});\n \n//Methods\nfunction addEmojiSelected(emoji: string) {\n  textValue.value = (textValue.value ?? \"\") + emoji;\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app .classic-input-text {\n  .text-indic {\n    font-style: italic;\n    font-size: 0.7rem;\n    color: var(--octopus-gray-text);\n  }\n\n  textarea {\n    height: auto;\n    min-height: 120px;\n  }\n}\n</style>\n","<template>\n  <div\n    class=\"d-flex flex-column classic-input-text\"\n    :class=\"{ 'form-margin': displayLabel }\"\n  >\n    <div class=\"d-flex align-items-center\">\n      <slot name=\"complementLabel\" />\n      <component\n        :is=\"isWysiwyg? 'div': 'label'\"\n        :class=\"[classLabel, displayLabel ? '' : 'd-none']\"\n        :for=\"isWysiwyg ? '': computedInputId\"\n      >\n        {{ label }}\n        <AsteriskIcon\n          v-if=\"displayRequired\"\n          :size=\"10\"\n          class=\"ms-1 mb-2\"\n          :title=\"t('Mandatory input')\"\n        />\n      </component>\n      <slot name=\"afterTitle\" />\n      <template v-if=\"popover\">\n        <button\n          :id=\"'popover' + computedInputId\"\n          :title=\"t('Help')\"\n          class=\"btn-transparent\"\n        >\n          <HelpCircleIcon :size=\"30\" />\n        </button>\n\n        <ClassicPopover\n          :target=\"'popover' + computedInputId\"\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      <slot name=\"afterHelp\" />\n    </div>\n    <slot name=\"betweenTitleInput\" />\n    <input\n      v-if=\"!isWysiwyg && !isTextarea\"\n      v-show=\"showField\"\n      :id=\"computedInputId\"\n      ref=\"focusElement\"\n      v-model=\"textValue\"\n      :type=\"typeInput\"\n      class=\"form-input\"\n      :placeholder=\"placeholder\"\n      :data-selenium=\"dataSelenium\"\n      :data-value=\"textValue\"\n      :maxlength=\"inputMaxLengthField\"\n      :readonly=\"readonly ? 'readonly' : undefined\"\n      :class=\"{\n        'border border-danger':\n          forceError || (isError && (undefined !== textValue || canBeNull)),\n      }\"\n      :disabled=\"isDisable || disabled\"\n      :required=\"!canBeNull\"\n      :aria-required=\"!canBeNull\"\n      :autocomplete=\"autocompleteType\"\n      @blur=\"emit('blur')\"\n    >\n    <textarea\n      v-else-if=\"isTextarea\"\n      v-show=\"showField\"\n      :id=\"computedInputId\"\n      ref=\"focusElement\"\n      v-model=\"textValue\"\n      :data-selenium=\"dataSelenium\"\n      :placeholder=\"placeholder\"\n      :readonly=\"readonly ? 'readonly' : undefined\"\n      class=\"form-input\"\n      :class=\"{\n        'border border-danger':\n          forceError || (isError && (undefined !== textValue || canBeNull)),\n      }\"\n      :disabled=\"isDisable || disabled\"\n      :required=\"!canBeNull\"\n    />\n    <ClassicWysiwyg\n      v-else\n      v-show=\"showField\"\n      v-model:content=\"textValue\"\n      :error-description=\"\n        forceError || (isError && (undefined !== textValue || canBeNull))\n      \"\n      :is-disabled=\"isDisable || disabled\"\n    />\n    <div class=\"d-flex\">\n      <ClassicEmojiPicker\n        v-if=\"isEmojiPicker\"\n        :popover-relative-class=\"popoverRelativeClass\"\n        :is-top-position=\"true\"\n        @emoji-selected=\"addEmojiSelected\"\n      />\n      <div\n        v-if=\"isWysiwyg\"\n        class=\"h6\"\n      >\n        {{ t(\"Characters number calculated over HTML code\") }}\n      </div>\n      <div\n        v-else-if=\"'' !== indicText\"\n        class=\"text-indic\"\n      >\n        {{ indicText }}\n      </div>\n      <div\n        v-else-if=\"\n          forceError || (isError && (undefined !== textValue || canBeNull))\n        \"\n        class=\"text-danger\"\n      >\n        {{ errorText }}\n      </div>\n      <p\n        v-if=\"0 !== maxLength && showField\"\n        class=\"counter-align-right\"\n        :class=\"{ 'text-danger': !valueLengthValid }\"\n      >\n        {{ countValue + \" / \" + maxLength }}\n      </p>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport AsteriskIcon from \"vue-material-design-icons/Asterisk.vue\";\nimport HelpCircleIcon from \"vue-material-design-icons/HelpCircle.vue\";\nimport { computed, defineAsyncComponent, onMounted, onUnmounted, Ref, ref, useTemplateRef, watch, getCurrentInstance } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../misc/ClassicPopover.vue\"),\n);\nconst ClassicWysiwyg = defineAsyncComponent(\n  () => import(\"./ClassicWysiwyg.vue\"),\n);\nconst ClassicEmojiPicker = defineAsyncComponent(\n  () => import(\"./ClassicEmojiPicker.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  inputId: { default: \"\", type: String },\n  label: { default: \"\", type: String },\n  /** The input's value */\n  textInit: { default: undefined, type: String },\n  maxLength: { default: 0, type: Number },\n  errorText: { default: \"\", type: String },\n  isTextarea: { default: false, type: Boolean },\n  isWysiwyg: { default: false, type: Boolean },\n  /** A regex checked against the input, if the input doesn't match mark it with error */\n  regex: { default: undefined, type: RegExp },\n  canBeNull: { default: false, type: Boolean },\n  inputMaxLengthField: { default: undefined, type: Number },\n  errorVariable: { default: true, type: Boolean },\n  /**\n   * Disable the text input\n   * @deprecated Use `disabled` instead\n   */\n  isDisable: { default: false, type: Boolean },\n  /**\n   * Disable the text input\n   */\n  disabled: { default: false, type: Boolean },\n  indicText: { default: \"\", type: String },\n  dataSelenium: { default: \"\", type: String },\n  placeholder: { default: \"\", type: String },\n  popover: { default: undefined, type: String },\n  /**\n   * Display content but do not allow changes\n   */\n  readonly: { default: false, type: Boolean },\n  forceError: { default: false, type: Boolean },\n  displayLabel: { default: true, type: Boolean },\n  focus: { default: false, type: Boolean },\n  isEmojiPicker: { default: false, type: Boolean },\n  popoverRelativeClass: { default: undefined, type: String },\n  forceReload: { default: false, type: Boolean },\n  typeInput: { default: \"text\", type: String },\n  displayRequired: { default: false, type: Boolean },\n  classLabel: { default: \"form-label\", type: String },\n  showField: { default: true, type: Boolean },\n  autocompleteType: { default: \"off\", type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"update:textInit\", \"update:errorVariable\", \"blur\"]);\n\n//Data \nconst textValue : Ref<string | undefined>= ref(undefined);\nconst focusElementRef = useTemplateRef('focusElement');\n\n//Composables \nconst { t } = useI18n();\n\n//Computed\nconst computedInputId = computed(() => props.inputId || 'input-' + getCurrentInstance()?.uid);\nconst isError = computed(() => !valueTrimValid.value || !valueLengthValid.value || !valueRegexValid.value);\nconst countValue = computed(() => {\n  if (textValue.value) {\n    return textValue.value.length;\n  }\n  return 0;\n});\nconst valueTrimValid = computed(() => {\n  if (!props.canBeNull) {\n    if (!textValue.value) {\n      return false;\n    }\n    return 0 !== textValue.value.trim().length;\n  }\n  return true;\n});\nconst valueLengthValid = computed(() => {\n  if (0 === props.maxLength) {\n    return true;\n  }\n  return props.maxLength >= countValue.value;\n});\nconst valueRegexValid = computed(() => {\n  if (props.regex === undefined) {\n    return true;\n  }\n  if (!textValue.value || \"\" === textValue.value) {\n    return props.canBeNull;\n  }\n  return textValue.value.match(props.regex) !== null;\n});\n  \n//Watch\nwatch(()=>props.forceReload, () => {\n  if (props.textInit !== textValue.value) {\n    textValue.value = props.textInit;\n  }\n});\nwatch(isError, () => {\n  emit(\"update:errorVariable\", isError.value);\n});\nwatch(textValue, () => {\n  if (props.textInit !== textValue.value) {\n    emit(\"update:textInit\", textValue.value);\n  }\n});\nwatch(()=>props.textInit, () => {\n  if (props.textInit !== textValue.value) {\n    textValue.value = props.textInit;\n  }\n});\n\n\nonMounted(()=>{\n  if (props.focus) {\n    (focusElementRef?.value as HTMLElement)?.focus();\n  }\n  textValue.value = props.textInit;\n  if (props.errorVariable !== isError.value) {\n    emit(\"update:errorVariable\", isError.value);\n  }\n\n  if (props.isTextarea) {\n    // Delay a scroll back to the top of the text area\n    scrollTimer = setTimeout(() => {\n      const textArea = document.getElementById(computedInputId.value);\n      if (textArea) {\n        textArea.scrollTop = 0;\n      }\n    }, 100);\n  }\n});\n\nlet scrollTimer: ReturnType<typeof setTimeout> | undefined;\nonUnmounted(() => {\n  clearTimeout(scrollTimer);\n});\n \n//Methods\nfunction addEmojiSelected(emoji: string) {\n  textValue.value = (textValue.value ?? \"\") + emoji;\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app .classic-input-text {\n  .text-indic {\n    font-style: italic;\n    font-size: 0.7rem;\n    color: var(--octopus-gray-text);\n  }\n\n  textarea {\n    height: auto;\n    min-height: 120px;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/ClassicInputText-adAE0MPy.mjs

@@ -0,0 +1,335 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineAsyncComponent, defineComponent, getCurrentInstance, normalizeClass, onMounted, onUnmounted, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, vModelDynamic, vModelText, vShow, watch, withCtx, withDirectives } from "vue";
+import { useI18n } from "vue-i18n";
+import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
+import HelpCircleIcon from "vue-material-design-icons/HelpCircle.vue";
+//#region src/components/form/ClassicInputText.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "d-flex align-items-center" };
+var _hoisted_2 = ["id", "title"];
+var _hoisted_3 = ["innerHTML"];
+var _hoisted_4 = [
+	"id",
+	"type",
+	"placeholder",
+	"data-selenium",
+	"data-value",
+	"maxlength",
+	"readonly",
+	"disabled",
+	"required",
+	"aria-required",
+	"autocomplete"
+];
+var _hoisted_5 = [
+	"id",
+	"data-selenium",
+	"placeholder",
+	"readonly",
+	"disabled",
+	"required"
+];
+var _hoisted_6 = { class: "d-flex" };
+var _hoisted_7 = {
+	key: 1,
+	class: "h6"
+};
+var _hoisted_8 = {
+	key: 2,
+	class: "text-indic"
+};
+var _hoisted_9 = {
+	key: 3,
+	class: "text-danger"
+};
+var ClassicInputText_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ClassicInputText",
+	props: {
+		inputId: {
+			default: "",
+			type: String
+		},
+		label: {
+			default: "",
+			type: String
+		},
+		/** The input's value */
+		textInit: {
+			default: void 0,
+			type: String
+		},
+		maxLength: {
+			default: 0,
+			type: Number
+		},
+		errorText: {
+			default: "",
+			type: String
+		},
+		isTextarea: {
+			default: false,
+			type: Boolean
+		},
+		isWysiwyg: {
+			default: false,
+			type: Boolean
+		},
+		/** A regex checked against the input, if the input doesn't match mark it with error */
+		regex: {
+			default: void 0,
+			type: RegExp
+		},
+		canBeNull: {
+			default: false,
+			type: Boolean
+		},
+		inputMaxLengthField: {
+			default: void 0,
+			type: Number
+		},
+		errorVariable: {
+			default: true,
+			type: Boolean
+		},
+		/**
+		* Disable the text input
+		* @deprecated Use `disabled` instead
+		*/
+		isDisable: {
+			default: false,
+			type: Boolean
+		},
+		/**
+		* Disable the text input
+		*/
+		disabled: {
+			default: false,
+			type: Boolean
+		},
+		indicText: {
+			default: "",
+			type: String
+		},
+		dataSelenium: {
+			default: "",
+			type: String
+		},
+		placeholder: {
+			default: "",
+			type: String
+		},
+		popover: {
+			default: void 0,
+			type: String
+		},
+		/**
+		* Display content but do not allow changes
+		*/
+		readonly: {
+			default: false,
+			type: Boolean
+		},
+		forceError: {
+			default: false,
+			type: Boolean
+		},
+		displayLabel: {
+			default: true,
+			type: Boolean
+		},
+		focus: {
+			default: false,
+			type: Boolean
+		},
+		isEmojiPicker: {
+			default: false,
+			type: Boolean
+		},
+		popoverRelativeClass: {
+			default: void 0,
+			type: String
+		},
+		forceReload: {
+			default: false,
+			type: Boolean
+		},
+		typeInput: {
+			default: "text",
+			type: String
+		},
+		displayRequired: {
+			default: false,
+			type: Boolean
+		},
+		classLabel: {
+			default: "form-label",
+			type: String
+		},
+		showField: {
+			default: true,
+			type: Boolean
+		},
+		autocompleteType: {
+			default: "off",
+			type: String
+		}
+	},
+	emits: [
+		"update:textInit",
+		"update:errorVariable",
+		"blur"
+	],
+	setup(__props, { emit: __emit }) {
+		const ClassicPopover = defineAsyncComponent(() => import("./ClassicPopover-Bk5kf37e.mjs").then((n) => n.n));
+		const ClassicWysiwyg = defineAsyncComponent(() => import("./ClassicWysiwyg-CRx5L0lR.mjs"));
+		const ClassicEmojiPicker = defineAsyncComponent(() => import("./ClassicEmojiPicker-BJeHH_oM.mjs"));
+		const props = __props;
+		const emit = __emit;
+		const textValue = ref(void 0);
+		const focusElementRef = useTemplateRef("focusElement");
+		const { t } = useI18n();
+		const computedInputId = computed(() => props.inputId || "input-" + getCurrentInstance()?.uid);
+		const isError = computed(() => !valueTrimValid.value || !valueLengthValid.value || !valueRegexValid.value);
+		const countValue = computed(() => {
+			if (textValue.value) return textValue.value.length;
+			return 0;
+		});
+		const valueTrimValid = computed(() => {
+			if (!props.canBeNull) {
+				if (!textValue.value) return false;
+				return 0 !== textValue.value.trim().length;
+			}
+			return true;
+		});
+		const valueLengthValid = computed(() => {
+			if (0 === props.maxLength) return true;
+			return props.maxLength >= countValue.value;
+		});
+		const valueRegexValid = computed(() => {
+			if (props.regex === void 0) return true;
+			if (!textValue.value || "" === textValue.value) return props.canBeNull;
+			return textValue.value.match(props.regex) !== null;
+		});
+		watch(() => props.forceReload, () => {
+			if (props.textInit !== textValue.value) textValue.value = props.textInit;
+		});
+		watch(isError, () => {
+			emit("update:errorVariable", isError.value);
+		});
+		watch(textValue, () => {
+			if (props.textInit !== textValue.value) emit("update:textInit", textValue.value);
+		});
+		watch(() => props.textInit, () => {
+			if (props.textInit !== textValue.value) textValue.value = props.textInit;
+		});
+		onMounted(() => {
+			if (props.focus) (focusElementRef?.value)?.focus();
+			textValue.value = props.textInit;
+			if (props.errorVariable !== isError.value) emit("update:errorVariable", isError.value);
+			if (props.isTextarea) scrollTimer = setTimeout(() => {
+				const textArea = document.getElementById(computedInputId.value);
+				if (textArea) textArea.scrollTop = 0;
+			}, 100);
+		});
+		let scrollTimer;
+		onUnmounted(() => {
+			clearTimeout(scrollTimer);
+		});
+		function addEmojiSelected(emoji) {
+			textValue.value = (textValue.value ?? "") + emoji;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["d-flex flex-column classic-input-text", { "form-margin": __props.displayLabel }]) }, [
+				createElementVNode("div", _hoisted_1, [
+					renderSlot(_ctx.$slots, "complementLabel"),
+					(openBlock(), createBlock(resolveDynamicComponent(__props.isWysiwyg ? "div" : "label"), {
+						class: normalizeClass([__props.classLabel, __props.displayLabel ? "" : "d-none"]),
+						for: __props.isWysiwyg ? "" : computedInputId.value
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.label) + " ", 1), __props.displayRequired ? (openBlock(), createBlock(AsteriskIcon, {
+							key: 0,
+							size: 10,
+							class: "ms-1 mb-2",
+							title: unref(t)("Mandatory input")
+						}, null, 8, ["title"])) : createCommentVNode("", true)]),
+						_: 1
+					}, 8, ["class", "for"])),
+					renderSlot(_ctx.$slots, "afterTitle"),
+					__props.popover ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("button", {
+						id: "popover" + computedInputId.value,
+						title: unref(t)("Help"),
+						class: "btn-transparent"
+					}, [createVNode(HelpCircleIcon, { size: 30 })], 8, _hoisted_2), createVNode(unref(ClassicPopover), {
+						target: "popover" + computedInputId.value,
+						"popover-class": "popover-z-index",
+						"relative-class": __props.popoverRelativeClass
+					}, {
+						default: withCtx(() => [createElementVNode("div", { innerHTML: __props.popover }, null, 8, _hoisted_3)]),
+						_: 1
+					}, 8, ["target", "relative-class"])], 64)) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "afterHelp")
+				]),
+				renderSlot(_ctx.$slots, "betweenTitleInput"),
+				!__props.isWysiwyg && !__props.isTextarea ? withDirectives((openBlock(), createElementBlock("input", {
+					key: 0,
+					id: computedInputId.value,
+					ref: "focusElement",
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => textValue.value = $event),
+					type: __props.typeInput,
+					class: normalizeClass(["form-input", { "border border-danger": __props.forceError || isError.value && (void 0 !== textValue.value || __props.canBeNull) }]),
+					placeholder: __props.placeholder,
+					"data-selenium": __props.dataSelenium,
+					"data-value": textValue.value,
+					maxlength: __props.inputMaxLengthField,
+					readonly: __props.readonly ? "readonly" : void 0,
+					disabled: __props.isDisable || __props.disabled,
+					required: !__props.canBeNull,
+					"aria-required": !__props.canBeNull,
+					autocomplete: __props.autocompleteType,
+					onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur"))
+				}, null, 42, _hoisted_4)), [[vShow, __props.showField], [vModelDynamic, textValue.value]]) : __props.isTextarea ? withDirectives((openBlock(), createElementBlock("textarea", {
+					key: 1,
+					id: computedInputId.value,
+					ref: "focusElement",
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => textValue.value = $event),
+					"data-selenium": __props.dataSelenium,
+					placeholder: __props.placeholder,
+					readonly: __props.readonly ? "readonly" : void 0,
+					class: normalizeClass(["form-input", { "border border-danger": __props.forceError || isError.value && (void 0 !== textValue.value || __props.canBeNull) }]),
+					disabled: __props.isDisable || __props.disabled,
+					required: !__props.canBeNull
+				}, null, 10, _hoisted_5)), [[vShow, __props.showField], [vModelText, textValue.value]]) : withDirectives((openBlock(), createBlock(unref(ClassicWysiwyg), {
+					key: 2,
+					content: textValue.value,
+					"onUpdate:content": _cache[3] || (_cache[3] = ($event) => textValue.value = $event),
+					"error-description": __props.forceError || isError.value && (void 0 !== textValue.value || __props.canBeNull),
+					"is-disabled": __props.isDisable || __props.disabled
+				}, null, 8, [
+					"content",
+					"error-description",
+					"is-disabled"
+				])), [[vShow, __props.showField]]),
+				createElementVNode("div", _hoisted_6, [
+					__props.isEmojiPicker ? (openBlock(), createBlock(unref(ClassicEmojiPicker), {
+						key: 0,
+						"popover-relative-class": __props.popoverRelativeClass,
+						"is-top-position": true,
+						onEmojiSelected: addEmojiSelected
+					}, null, 8, ["popover-relative-class"])) : createCommentVNode("", true),
+					__props.isWysiwyg ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(unref(t)("Characters number calculated over HTML code")), 1)) : "" !== __props.indicText ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(__props.indicText), 1)) : __props.forceError || isError.value && (void 0 !== textValue.value || __props.canBeNull) ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString(__props.errorText), 1)) : createCommentVNode("", true),
+					0 !== __props.maxLength && __props.showField ? (openBlock(), createElementBlock("p", {
+						key: 4,
+						class: normalizeClass(["counter-align-right", { "text-danger": !valueLengthValid.value }])
+					}, toDisplayString(countValue.value + " / " + __props.maxLength), 3)) : createCommentVNode("", true)
+				])
+			], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/form/ClassicInputText.vue
+var ClassicInputText_exports = /* @__PURE__ */ __exportAll({ default: () => ClassicInputText_default });
+var ClassicInputText_default = ClassicInputText_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ClassicInputText_exports as n, ClassicInputText_default as t };
+
+//# sourceMappingURL=ClassicInputText-adAE0MPy.mjs.map

package/dist/ClassicInputText-adAE0MPy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassicInputText-adAE0MPy.mjs","names":[],"sources":["../src/components/form/ClassicInputText.vue","../src/components/form/ClassicInputText.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-flex flex-column classic-input-text\"\n    :class=\"{ 'form-margin': displayLabel }\"\n  >\n    <div class=\"d-flex align-items-center\">\n      <slot name=\"complementLabel\" />\n      <component\n        :is=\"isWysiwyg? 'div': 'label'\"\n        :class=\"[classLabel, displayLabel ? '' : 'd-none']\"\n        :for=\"isWysiwyg ? '': computedInputId\"\n      >\n        {{ label }}\n        <AsteriskIcon\n          v-if=\"displayRequired\"\n          :size=\"10\"\n          class=\"ms-1 mb-2\"\n          :title=\"t('Mandatory input')\"\n        />\n      </component>\n      <slot name=\"afterTitle\" />\n      <template v-if=\"popover\">\n        <button\n          :id=\"'popover' + computedInputId\"\n          :title=\"t('Help')\"\n          class=\"btn-transparent\"\n        >\n          <HelpCircleIcon :size=\"30\" />\n        </button>\n\n        <ClassicPopover\n          :target=\"'popover' + computedInputId\"\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      <slot name=\"afterHelp\" />\n    </div>\n    <slot name=\"betweenTitleInput\" />\n    <input\n      v-if=\"!isWysiwyg && !isTextarea\"\n      v-show=\"showField\"\n      :id=\"computedInputId\"\n      ref=\"focusElement\"\n      v-model=\"textValue\"\n      :type=\"typeInput\"\n      class=\"form-input\"\n      :placeholder=\"placeholder\"\n      :data-selenium=\"dataSelenium\"\n      :data-value=\"textValue\"\n      :maxlength=\"inputMaxLengthField\"\n      :readonly=\"readonly ? 'readonly' : undefined\"\n      :class=\"{\n        'border border-danger':\n          forceError || (isError && (undefined !== textValue || canBeNull)),\n      }\"\n      :disabled=\"isDisable || disabled\"\n      :required=\"!canBeNull\"\n      :aria-required=\"!canBeNull\"\n      :autocomplete=\"autocompleteType\"\n      @blur=\"emit('blur')\"\n    >\n    <textarea\n      v-else-if=\"isTextarea\"\n      v-show=\"showField\"\n      :id=\"computedInputId\"\n      ref=\"focusElement\"\n      v-model=\"textValue\"\n      :data-selenium=\"dataSelenium\"\n      :placeholder=\"placeholder\"\n      :readonly=\"readonly ? 'readonly' : undefined\"\n      class=\"form-input\"\n      :class=\"{\n        'border border-danger':\n          forceError || (isError && (undefined !== textValue || canBeNull)),\n      }\"\n      :disabled=\"isDisable || disabled\"\n      :required=\"!canBeNull\"\n    />\n    <ClassicWysiwyg\n      v-else\n      v-show=\"showField\"\n      v-model:content=\"textValue\"\n      :error-description=\"\n        forceError || (isError && (undefined !== textValue || canBeNull))\n      \"\n      :is-disabled=\"isDisable || disabled\"\n    />\n    <div class=\"d-flex\">\n      <ClassicEmojiPicker\n        v-if=\"isEmojiPicker\"\n        :popover-relative-class=\"popoverRelativeClass\"\n        :is-top-position=\"true\"\n        @emoji-selected=\"addEmojiSelected\"\n      />\n      <div\n        v-if=\"isWysiwyg\"\n        class=\"h6\"\n      >\n        {{ t(\"Characters number calculated over HTML code\") }}\n      </div>\n      <div\n        v-else-if=\"'' !== indicText\"\n        class=\"text-indic\"\n      >\n        {{ indicText }}\n      </div>\n      <div\n        v-else-if=\"\n          forceError || (isError && (undefined !== textValue || canBeNull))\n        \"\n        class=\"text-danger\"\n      >\n        {{ errorText }}\n      </div>\n      <p\n        v-if=\"0 !== maxLength && showField\"\n        class=\"counter-align-right\"\n        :class=\"{ 'text-danger': !valueLengthValid }\"\n      >\n        {{ countValue + \" / \" + maxLength }}\n      </p>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport AsteriskIcon from \"vue-material-design-icons/Asterisk.vue\";\nimport HelpCircleIcon from \"vue-material-design-icons/HelpCircle.vue\";\nimport { computed, defineAsyncComponent, onMounted, onUnmounted, Ref, ref, useTemplateRef, watch, getCurrentInstance } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../misc/ClassicPopover.vue\"),\n);\nconst ClassicWysiwyg = defineAsyncComponent(\n  () => import(\"./ClassicWysiwyg.vue\"),\n);\nconst ClassicEmojiPicker = defineAsyncComponent(\n  () => import(\"./ClassicEmojiPicker.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  inputId: { default: \"\", type: String },\n  label: { default: \"\", type: String },\n  /** The input's value */\n  textInit: { default: undefined, type: String },\n  maxLength: { default: 0, type: Number },\n  errorText: { default: \"\", type: String },\n  isTextarea: { default: false, type: Boolean },\n  isWysiwyg: { default: false, type: Boolean },\n  /** A regex checked against the input, if the input doesn't match mark it with error */\n  regex: { default: undefined, type: RegExp },\n  canBeNull: { default: false, type: Boolean },\n  inputMaxLengthField: { default: undefined, type: Number },\n  errorVariable: { default: true, type: Boolean },\n  /**\n   * Disable the text input\n   * @deprecated Use `disabled` instead\n   */\n  isDisable: { default: false, type: Boolean },\n  /**\n   * Disable the text input\n   */\n  disabled: { default: false, type: Boolean },\n  indicText: { default: \"\", type: String },\n  dataSelenium: { default: \"\", type: String },\n  placeholder: { default: \"\", type: String },\n  popover: { default: undefined, type: String },\n  /**\n   * Display content but do not allow changes\n   */\n  readonly: { default: false, type: Boolean },\n  forceError: { default: false, type: Boolean },\n  displayLabel: { default: true, type: Boolean },\n  focus: { default: false, type: Boolean },\n  isEmojiPicker: { default: false, type: Boolean },\n  popoverRelativeClass: { default: undefined, type: String },\n  forceReload: { default: false, type: Boolean },\n  typeInput: { default: \"text\", type: String },\n  displayRequired: { default: false, type: Boolean },\n  classLabel: { default: \"form-label\", type: String },\n  showField: { default: true, type: Boolean },\n  autocompleteType: { default: \"off\", type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"update:textInit\", \"update:errorVariable\", \"blur\"]);\n\n//Data \nconst textValue : Ref<string | undefined>= ref(undefined);\nconst focusElementRef = useTemplateRef('focusElement');\n\n//Composables \nconst { t } = useI18n();\n\n//Computed\nconst computedInputId = computed(() => props.inputId || 'input-' + getCurrentInstance()?.uid);\nconst isError = computed(() => !valueTrimValid.value || !valueLengthValid.value || !valueRegexValid.value);\nconst countValue = computed(() => {\n  if (textValue.value) {\n    return textValue.value.length;\n  }\n  return 0;\n});\nconst valueTrimValid = computed(() => {\n  if (!props.canBeNull) {\n    if (!textValue.value) {\n      return false;\n    }\n    return 0 !== textValue.value.trim().length;\n  }\n  return true;\n});\nconst valueLengthValid = computed(() => {\n  if (0 === props.maxLength) {\n    return true;\n  }\n  return props.maxLength >= countValue.value;\n});\nconst valueRegexValid = computed(() => {\n  if (props.regex === undefined) {\n    return true;\n  }\n  if (!textValue.value || \"\" === textValue.value) {\n    return props.canBeNull;\n  }\n  return textValue.value.match(props.regex) !== null;\n});\n  \n//Watch\nwatch(()=>props.forceReload, () => {\n  if (props.textInit !== textValue.value) {\n    textValue.value = props.textInit;\n  }\n});\nwatch(isError, () => {\n  emit(\"update:errorVariable\", isError.value);\n});\nwatch(textValue, () => {\n  if (props.textInit !== textValue.value) {\n    emit(\"update:textInit\", textValue.value);\n  }\n});\nwatch(()=>props.textInit, () => {\n  if (props.textInit !== textValue.value) {\n    textValue.value = props.textInit;\n  }\n});\n\n\nonMounted(()=>{\n  if (props.focus) {\n    (focusElementRef?.value as HTMLElement)?.focus();\n  }\n  textValue.value = props.textInit;\n  if (props.errorVariable !== isError.value) {\n    emit(\"update:errorVariable\", isError.value);\n  }\n\n  if (props.isTextarea) {\n    // Delay a scroll back to the top of the text area\n    scrollTimer = setTimeout(() => {\n      const textArea = document.getElementById(computedInputId.value);\n      if (textArea) {\n        textArea.scrollTop = 0;\n      }\n    }, 100);\n  }\n});\n\nlet scrollTimer: ReturnType<typeof setTimeout> | undefined;\nonUnmounted(() => {\n  clearTimeout(scrollTimer);\n});\n \n//Methods\nfunction addEmojiSelected(emoji: string) {\n  textValue.value = (textValue.value ?? \"\") + emoji;\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app .classic-input-text {\n  .text-indic {\n    font-style: italic;\n    font-size: 0.7rem;\n    color: var(--octopus-gray-text);\n  }\n\n  textarea {\n    height: auto;\n    min-height: 120px;\n  }\n}\n</style>\n","<template>\n  <div\n    class=\"d-flex flex-column classic-input-text\"\n    :class=\"{ 'form-margin': displayLabel }\"\n  >\n    <div class=\"d-flex align-items-center\">\n      <slot name=\"complementLabel\" />\n      <component\n        :is=\"isWysiwyg? 'div': 'label'\"\n        :class=\"[classLabel, displayLabel ? '' : 'd-none']\"\n        :for=\"isWysiwyg ? '': computedInputId\"\n      >\n        {{ label }}\n        <AsteriskIcon\n          v-if=\"displayRequired\"\n          :size=\"10\"\n          class=\"ms-1 mb-2\"\n          :title=\"t('Mandatory input')\"\n        />\n      </component>\n      <slot name=\"afterTitle\" />\n      <template v-if=\"popover\">\n        <button\n          :id=\"'popover' + computedInputId\"\n          :title=\"t('Help')\"\n          class=\"btn-transparent\"\n        >\n          <HelpCircleIcon :size=\"30\" />\n        </button>\n\n        <ClassicPopover\n          :target=\"'popover' + computedInputId\"\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      <slot name=\"afterHelp\" />\n    </div>\n    <slot name=\"betweenTitleInput\" />\n    <input\n      v-if=\"!isWysiwyg && !isTextarea\"\n      v-show=\"showField\"\n      :id=\"computedInputId\"\n      ref=\"focusElement\"\n      v-model=\"textValue\"\n      :type=\"typeInput\"\n      class=\"form-input\"\n      :placeholder=\"placeholder\"\n      :data-selenium=\"dataSelenium\"\n      :data-value=\"textValue\"\n      :maxlength=\"inputMaxLengthField\"\n      :readonly=\"readonly ? 'readonly' : undefined\"\n      :class=\"{\n        'border border-danger':\n          forceError || (isError && (undefined !== textValue || canBeNull)),\n      }\"\n      :disabled=\"isDisable || disabled\"\n      :required=\"!canBeNull\"\n      :aria-required=\"!canBeNull\"\n      :autocomplete=\"autocompleteType\"\n      @blur=\"emit('blur')\"\n    >\n    <textarea\n      v-else-if=\"isTextarea\"\n      v-show=\"showField\"\n      :id=\"computedInputId\"\n      ref=\"focusElement\"\n      v-model=\"textValue\"\n      :data-selenium=\"dataSelenium\"\n      :placeholder=\"placeholder\"\n      :readonly=\"readonly ? 'readonly' : undefined\"\n      class=\"form-input\"\n      :class=\"{\n        'border border-danger':\n          forceError || (isError && (undefined !== textValue || canBeNull)),\n      }\"\n      :disabled=\"isDisable || disabled\"\n      :required=\"!canBeNull\"\n    />\n    <ClassicWysiwyg\n      v-else\n      v-show=\"showField\"\n      v-model:content=\"textValue\"\n      :error-description=\"\n        forceError || (isError && (undefined !== textValue || canBeNull))\n      \"\n      :is-disabled=\"isDisable || disabled\"\n    />\n    <div class=\"d-flex\">\n      <ClassicEmojiPicker\n        v-if=\"isEmojiPicker\"\n        :popover-relative-class=\"popoverRelativeClass\"\n        :is-top-position=\"true\"\n        @emoji-selected=\"addEmojiSelected\"\n      />\n      <div\n        v-if=\"isWysiwyg\"\n        class=\"h6\"\n      >\n        {{ t(\"Characters number calculated over HTML code\") }}\n      </div>\n      <div\n        v-else-if=\"'' !== indicText\"\n        class=\"text-indic\"\n      >\n        {{ indicText }}\n      </div>\n      <div\n        v-else-if=\"\n          forceError || (isError && (undefined !== textValue || canBeNull))\n        \"\n        class=\"text-danger\"\n      >\n        {{ errorText }}\n      </div>\n      <p\n        v-if=\"0 !== maxLength && showField\"\n        class=\"counter-align-right\"\n        :class=\"{ 'text-danger': !valueLengthValid }\"\n      >\n        {{ countValue + \" / \" + maxLength }}\n      </p>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport AsteriskIcon from \"vue-material-design-icons/Asterisk.vue\";\nimport HelpCircleIcon from \"vue-material-design-icons/HelpCircle.vue\";\nimport { computed, defineAsyncComponent, onMounted, onUnmounted, Ref, ref, useTemplateRef, watch, getCurrentInstance } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ClassicPopover = defineAsyncComponent(\n  () => import(\"../misc/ClassicPopover.vue\"),\n);\nconst ClassicWysiwyg = defineAsyncComponent(\n  () => import(\"./ClassicWysiwyg.vue\"),\n);\nconst ClassicEmojiPicker = defineAsyncComponent(\n  () => import(\"./ClassicEmojiPicker.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  inputId: { default: \"\", type: String },\n  label: { default: \"\", type: String },\n  /** The input's value */\n  textInit: { default: undefined, type: String },\n  maxLength: { default: 0, type: Number },\n  errorText: { default: \"\", type: String },\n  isTextarea: { default: false, type: Boolean },\n  isWysiwyg: { default: false, type: Boolean },\n  /** A regex checked against the input, if the input doesn't match mark it with error */\n  regex: { default: undefined, type: RegExp },\n  canBeNull: { default: false, type: Boolean },\n  inputMaxLengthField: { default: undefined, type: Number },\n  errorVariable: { default: true, type: Boolean },\n  /**\n   * Disable the text input\n   * @deprecated Use `disabled` instead\n   */\n  isDisable: { default: false, type: Boolean },\n  /**\n   * Disable the text input\n   */\n  disabled: { default: false, type: Boolean },\n  indicText: { default: \"\", type: String },\n  dataSelenium: { default: \"\", type: String },\n  placeholder: { default: \"\", type: String },\n  popover: { default: undefined, type: String },\n  /**\n   * Display content but do not allow changes\n   */\n  readonly: { default: false, type: Boolean },\n  forceError: { default: false, type: Boolean },\n  displayLabel: { default: true, type: Boolean },\n  focus: { default: false, type: Boolean },\n  isEmojiPicker: { default: false, type: Boolean },\n  popoverRelativeClass: { default: undefined, type: String },\n  forceReload: { default: false, type: Boolean },\n  typeInput: { default: \"text\", type: String },\n  displayRequired: { default: false, type: Boolean },\n  classLabel: { default: \"form-label\", type: String },\n  showField: { default: true, type: Boolean },\n  autocompleteType: { default: \"off\", type: String },\n})\n\n//Emits\nconst emit = defineEmits([\"update:textInit\", \"update:errorVariable\", \"blur\"]);\n\n//Data \nconst textValue : Ref<string | undefined>= ref(undefined);\nconst focusElementRef = useTemplateRef('focusElement');\n\n//Composables \nconst { t } = useI18n();\n\n//Computed\nconst computedInputId = computed(() => props.inputId || 'input-' + getCurrentInstance()?.uid);\nconst isError = computed(() => !valueTrimValid.value || !valueLengthValid.value || !valueRegexValid.value);\nconst countValue = computed(() => {\n  if (textValue.value) {\n    return textValue.value.length;\n  }\n  return 0;\n});\nconst valueTrimValid = computed(() => {\n  if (!props.canBeNull) {\n    if (!textValue.value) {\n      return false;\n    }\n    return 0 !== textValue.value.trim().length;\n  }\n  return true;\n});\nconst valueLengthValid = computed(() => {\n  if (0 === props.maxLength) {\n    return true;\n  }\n  return props.maxLength >= countValue.value;\n});\nconst valueRegexValid = computed(() => {\n  if (props.regex === undefined) {\n    return true;\n  }\n  if (!textValue.value || \"\" === textValue.value) {\n    return props.canBeNull;\n  }\n  return textValue.value.match(props.regex) !== null;\n});\n  \n//Watch\nwatch(()=>props.forceReload, () => {\n  if (props.textInit !== textValue.value) {\n    textValue.value = props.textInit;\n  }\n});\nwatch(isError, () => {\n  emit(\"update:errorVariable\", isError.value);\n});\nwatch(textValue, () => {\n  if (props.textInit !== textValue.value) {\n    emit(\"update:textInit\", textValue.value);\n  }\n});\nwatch(()=>props.textInit, () => {\n  if (props.textInit !== textValue.value) {\n    textValue.value = props.textInit;\n  }\n});\n\n\nonMounted(()=>{\n  if (props.focus) {\n    (focusElementRef?.value as HTMLElement)?.focus();\n  }\n  textValue.value = props.textInit;\n  if (props.errorVariable !== isError.value) {\n    emit(\"update:errorVariable\", isError.value);\n  }\n\n  if (props.isTextarea) {\n    // Delay a scroll back to the top of the text area\n    scrollTimer = setTimeout(() => {\n      const textArea = document.getElementById(computedInputId.value);\n      if (textArea) {\n        textArea.scrollTop = 0;\n      }\n    }, 100);\n  }\n});\n\nlet scrollTimer: ReturnType<typeof setTimeout> | undefined;\nonUnmounted(() => {\n  clearTimeout(scrollTimer);\n});\n \n//Methods\nfunction addEmojiSelected(emoji: string) {\n  textValue.value = (textValue.value ?? \"\") + emoji;\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app .classic-input-text {\n  .text-indic {\n    font-style: italic;\n    font-size: 0.7rem;\n    color: var(--octopus-gray-text);\n  }\n\n  textarea {\n    height: auto;\n    min-height: 120px;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/ClassicLazy-7mFHxG6O.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassicLazy-7mFHxG6O.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBCjHE,mBAGM,OAAA;EAHD,KAAI;EAAY,OAAK,eAAA,cAAgB,OAAA,UAAS,IAAA;KACrC,OAAA,eAAZ,WAA4B,KAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA,IAC5B,WAA8B,KAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/ClassicLazy-DKgiCdDI.mjs

@@ -0,0 +1,92 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.mjs";
+import { createElementBlock, defineComponent, nextTick, normalizeStyle, onMounted, openBlock, ref, renderSlot, watch } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+//#region src/components/misc/ClassicLazy.vue?vue&type=script&setup=true&lang.ts
+var ClassicLazy_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ClassicLazy",
+	props: {
+		renderOnIdle: Boolean,
+		unrender: Boolean,
+		minHeight: {
+			type: Number,
+			default: 0
+		},
+		initRenderDelay: {
+			type: Number,
+			default: 0
+		},
+		unrenderDelay: {
+			type: Number,
+			default: 1e4
+		}
+	},
+	emits: ["isRender"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const waitBeforeInit = ref(true);
+		const shouldRender = ref(false);
+		const targetEl = ref();
+		let unrenderTimer;
+		let renderTimer;
+		const { pause, resume } = useIntersectionObserver(targetEl, ([{ isIntersecting }]) => {
+			if (waitBeforeInit.value) return;
+			if (isIntersecting) {
+				clearTimeout(unrenderTimer);
+				renderTimer = setTimeout(() => {
+					shouldRender.value = true;
+					emit("isRender", true);
+				}, props.unrender ? 200 : 0);
+				if (!props.unrender) pause();
+			} else if (props.unrender) {
+				clearTimeout(renderTimer);
+				unrenderTimer = setTimeout(() => {
+					shouldRender.value = false;
+					emit("isRender", false);
+				}, props.unrenderDelay);
+			}
+		}, { rootMargin: "600px" });
+		onMounted(() => {
+			if (props.initRenderDelay <= 0) waitBeforeInit.value = false;
+			else setTimeout(() => {
+				waitBeforeInit.value = false;
+			}, props.initRenderDelay);
+			if (props.renderOnIdle) onIdle(() => {
+				shouldRender.value = true;
+				emit("isRender", true);
+				if (!props.unrender) pause();
+			});
+		});
+		watch(() => props.unrender, (newValue) => {
+			if (newValue) {
+				clearTimeout(renderTimer);
+				unrenderTimer = setTimeout(() => {
+					shouldRender.value = false;
+					emit("isRender", false);
+					resume();
+				}, props.unrenderDelay);
+			}
+		});
+		function onIdle(cb = () => {}) {
+			if ("requestIdleCallback" in window) window.requestIdleCallback(cb);
+			else setTimeout(() => {
+				nextTick(cb);
+			}, 300);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "targetEl",
+				ref: targetEl,
+				style: normalizeStyle(`min-height:${__props.minHeight}px;`)
+			}, [shouldRender.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : renderSlot(_ctx.$slots, "preview", { key: 1 })], 4);
+		};
+	}
+});
+//#endregion
+//#region src/components/misc/ClassicLazy.vue
+var ClassicLazy_exports = /* @__PURE__ */ __exportAll({ default: () => ClassicLazy_default });
+var ClassicLazy_default = ClassicLazy_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ClassicLazy_exports as n, ClassicLazy_default as t };
+
+//# sourceMappingURL=ClassicLazy-DKgiCdDI.mjs.map