admins-components 9.0.27 → 9.0.29

package/dist/admins-components39.js

@@ -1,147 +1,5 @@
-import e from "./admins-components6.js";
-import t from "./admins-components33.js";
-import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, onMounted as u, onUnmounted as d, openBlock as f, ref as p, vModelCheckbox as m, vModelText as h, watch as g, withCtx as _, withDirectives as v } from "vue";
-//#region src/components/custom/ImagePicker.vue?vue&type=script&setup=true&lang.ts
-var y = { class: "ac-component" }, b = { class: "c-image-picker" }, x = { class: "c-image-picker__preview" }, S = ["src", "alt"], C = {
-	key: 1,
-	class: "c-image-picker__placeholder"
-}, w = { class: "c-image-picker__buttons" }, T = {
-	key: 0,
-	class: "c-image-picker__details"
-}, E = { class: "c-input-row" }, D = ["disabled"], O = { class: "c-input-row" }, k = ["disabled"], A = { class: "flex-center gap-1" }, j = ["checked", "disabled"], M = [
-	"viewid",
-	"environment",
-	"aeurl"
-], N = {
-	id: "",
-	url: "",
-	isAdult: !1,
-	source: "",
-	title: ""
-}, P = /* @__PURE__ */ c({
-	__name: "ImagePicker",
-	props: {
-		modelValue: { default: void 0 },
-		details: {
-			type: Boolean,
-			default: !1
-		},
-		editable: {
-			type: Boolean,
-			default: !1
-		},
-		direction: { default: "vertical" },
-		articleEditorUrl: {},
-		environment: {},
-		searchImageWidgetUrl: {},
-		imageBaseUrl: {},
-		imageViewId: {}
-	},
-	emits: ["update:modelValue"],
-	setup(c, { emit: P }) {
-		let F = c, I = P, L = p(N), R = p(!1);
-		g(() => L.value, () => {
-			I("update:modelValue", L.value);
-		}, { deep: !0 }), g(() => F.modelValue, (e) => {
-			e && (L.value = e);
-		}, {
-			deep: !0,
-			immediate: !0
-		});
-		let z = `${typeof crypto < "u" && crypto.randomUUID ? crypto.randomUUID() : `ip-${Date.now()}-${Math.random().toString(36).slice(2)}`}-image-picker-causation`;
-		u(() => {
-			if (!customElements.get("hvg-search-image") && !document.querySelector(`script[src="${F.searchImageWidgetUrl}"]`)) {
-				let e = document.createElement("script");
-				e.type = "text/javascript", e.src = F.searchImageWidgetUrl, e.async = !0, document.head.appendChild(e);
-			}
-		});
-		let B = n(() => L.value && (L.value.url && L.value.url.length > 0 || L.value.id && L.value.id.length > 0)), V = n(() => {
-			if (B.value) return L.value.url && L.value.url.length > 0 ? L.value.url : `${F.imageBaseUrl}/${F.imageViewId}/${L.value.id}.img`;
-		}), H = n(() => F.direction === "horizontal"), U = (e) => {
-			e.preventDefault(), R.value = !0;
-		}, W = (e) => {
-			e.preventDefault(), L.value = { ...N };
-		}, G = (e) => {
-			e?.detail?.causationid === z && (R.value = !1, e.detail?.image && (L.value = {
-				id: e.detail.image.id,
-				url: "",
-				isAdult: e.detail.image.isAdult,
-				source: e.detail.image.source,
-				title: e.detail.image.title
-			}));
-		};
-		return u(() => {
-			window.addEventListener("image-selected", G);
-		}), d(() => {
-			window.removeEventListener("image-selected", G);
-		}), (n, u) => (f(), a("div", y, [o("div", b, [o("div", { class: l(["c-image-picker__container", { "c-image-picker__container--horizontal": H.value }]) }, [
-			o("div", x, [B.value ? (f(), a("img", {
-				key: 0,
-				src: V.value,
-				alt: L.value.title || "Selected image",
-				class: "c-image-picker__img"
-			}, null, 8, S)) : (f(), a("p", C, "Nincs kiválasztott kép"))]),
-			o("div", w, [s(e, {
-				type: "success",
-				label: "Kép kiválasztása",
-				class: "nowrap",
-				onClick: U,
-				icon: "fa-solid fa-image"
-			}), s(e, {
-				type: "error",
-				label: "Eltávolítás",
-				class: "nowrap",
-				onClick: W,
-				icon: "fa-solid fa-trash"
-			})]),
-			c.details && L.value.id ? (f(), a("div", T, [
-				o("div", null, [u[4] ||= o("label", {
-					for: "image-source",
-					class: "c-label"
-				}, "Forrás", -1), o("div", E, [v(o("input", {
-					"onUpdate:modelValue": u[0] ||= (e) => L.value.source = e,
-					id: "image-source",
-					type: "text",
-					class: "c-input",
-					placeholder: "Kép forrása",
-					disabled: !c.editable
-				}, null, 8, D), [[h, L.value.source]])])]),
-				o("div", null, [u[5] ||= o("label", {
-					for: "image-title",
-					class: "c-label"
-				}, "Cím / Alt szöveg", -1), o("div", O, [v(o("textarea", {
-					"onUpdate:modelValue": u[1] ||= (e) => L.value.title = e,
-					id: "image-title",
-					class: "c-input c-image-picker__textarea",
-					placeholder: "Cím vagy alt szöveg",
-					disabled: !c.editable
-				}, null, 8, k), [[h, L.value.title]])])]),
-				o("div", A, [v(o("input", {
-					id: "image-adult",
-					"onUpdate:modelValue": u[2] ||= (e) => L.value.isAdult = e,
-					type: "checkbox",
-					class: "c-checkbox",
-					checked: L.value.isAdult,
-					disabled: !c.editable
-				}, null, 8, j), [[m, L.value.isAdult]]), u[6] ||= o("label", {
-					for: "image-adult",
-					class: "c-label"
-				}, "Felnőtt tartalom", -1)])
-			])) : i("", !0)
-		], 2), R.value ? (f(), r(t, {
-			key: 0,
-			onClose: u[3] ||= (e) => R.value = !1
-		}, {
-			default: _(() => [o("hvg-search-image", {
-				causationid: z,
-				viewid: c.imageViewId,
-				environment: c.environment,
-				aeurl: c.articleEditorUrl,
-				selectonly: "true"
-			}, null, 8, M)]),
-			_: 1
-		})) : i("", !0)])]));
-	}
-});
+import e from "./admins-components38.js";
+//#region src/components/ConfirmModal.vue
+var t = e;
 //#endregion
-export { P as default };
+export { t as default };

package/dist/admins-components39.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components39.js","names":[],"sources":["../src/components/custom/ImagePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ImagePickerModel {\n  id: string\n  url: string\n  source: string\n  title: string\n  isAdult: boolean\n}\n\nexport interface ImagePickerProps {\n  modelValue?: ImagePickerModel\n  details?: boolean\n  editable?: boolean\n  direction?: 'horizontal' | 'vertical'\n  articleEditorUrl: string\n  environment: string\n  searchImageWidgetUrl: string\n  imageBaseUrl: string\n  imageViewId: string\n}\n\nconst defaultValue: ImagePickerModel = {\n  id: '',\n  url: '',\n  isAdult: false,\n  source: '',\n  title: '',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport Modal from '@/components/Modal.vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<ImagePickerProps>(), {\n  modelValue: undefined,\n  details: false,\n  editable: false,\n  direction: 'vertical',\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: ImagePickerModel): void\n}>()\n\nconst local = ref<ImagePickerModel>(defaultValue)\nconst showImageModal = ref(false)\n\nwatch(\n  () => local.value,\n  () => {\n    emit('update:modelValue', local.value)\n  },\n  { deep: true },\n)\n\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    if (newValue) {\n      local.value = newValue\n    }\n  },\n  { deep: true, immediate: true },\n)\n\n// Generate unique ID\nconst uniqueId = (() => {\n  if (typeof crypto !== 'undefined' && crypto.randomUUID) return crypto.randomUUID()\n  return `ip-${Date.now()}-${Math.random().toString(36).slice(2)}`\n})()\n\nconst imageCausationId = `${uniqueId}-image-picker-causation`\n\n// Load external search image widget script\nonMounted(() => {\n  // Check if custom element is already registered\n  if (!customElements.get('hvg-search-image')) {\n    if (!document.querySelector(`script[src=\"${props.searchImageWidgetUrl}\"]`)) {\n      const script = document.createElement('script')\n      script.type = 'text/javascript'\n      script.src = props.searchImageWidgetUrl\n      script.async = true\n      document.head.appendChild(script)\n    }\n  }\n})\n\n// Computed properties\nconst hasImage = computed(() => {\n  return (\n    local.value &&\n    ((local.value.url && local.value.url.length > 0) ||\n      (local.value.id && local.value.id.length > 0))\n  )\n})\n\nconst imageUrl = computed(() => {\n  if (!hasImage.value) return undefined\n  if (local.value.url && local.value.url.length > 0) return local.value.url\n  return `${props.imageBaseUrl}/${props.imageViewId}/${local.value.id}.img`\n})\n\nconst isHorizontal = computed(() => props.direction === 'horizontal')\n\n// Event handlers\nconst selectImage = (event: MouseEvent) => {\n  event.preventDefault()\n  showImageModal.value = true\n}\n\nconst resetImage = (event: MouseEvent) => {\n  event.preventDefault()\n  local.value = { ...defaultValue }\n}\n\nconst onImageSelected = (e: CustomEvent) => {\n  if (e?.detail?.causationid === imageCausationId) {\n    showImageModal.value = false\n\n    if (e.detail?.image) {\n      local.value = {\n        id: e.detail.image.id,\n        url: '',\n        isAdult: e.detail.image.isAdult,\n        source: e.detail.image.source,\n        title: e.detail.image.title,\n      }\n    }\n  }\n}\n\n// Event listeners\nonMounted(() => {\n  window.addEventListener('image-selected', onImageSelected as EventListener)\n})\n\nonUnmounted(() => {\n  window.removeEventListener('image-selected', onImageSelected as EventListener)\n})\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-image-picker\">\n      <div\n        class=\"c-image-picker__container\"\n        :class=\"{ 'c-image-picker__container--horizontal': isHorizontal }\"\n      >\n        <div class=\"c-image-picker__preview\">\n          <img\n            v-if=\"hasImage\"\n            :src=\"imageUrl\"\n            :alt=\"local.title || 'Selected image'\"\n            class=\"c-image-picker__img\"\n          />\n          <p v-else class=\"c-image-picker__placeholder\">Nincs kiválasztott kép</p>\n        </div>\n\n        <!-- Action Buttons -->\n        <div class=\"c-image-picker__buttons\">\n          <Button\n            type=\"success\"\n            label=\"Kép kiválasztása\"\n            class=\"nowrap\"\n            @click=\"selectImage\"\n            icon=\"fa-solid fa-image\"\n          ></Button>\n          <Button\n            type=\"error\"\n            label=\"Eltávolítás\"\n            class=\"nowrap\"\n            @click=\"resetImage\"\n            icon=\"fa-solid fa-trash\"\n          ></Button>\n        </div>\n\n        <!-- Details Section -->\n        <div v-if=\"details && local.id\" class=\"c-image-picker__details\">\n          <!-- Source Input -->\n          <div>\n            <label for=\"image-source\" class=\"c-label\">Forrás</label>\n            <div class=\"c-input-row\">\n              <input\n                v-model=\"local.source\"\n                id=\"image-source\"\n                type=\"text\"\n                class=\"c-input\"\n                placeholder=\"Kép forrása\"\n                :disabled=\"!editable\"\n              />\n            </div>\n          </div>\n\n          <!-- Title/Alt Text Input -->\n          <div>\n            <label for=\"image-title\" class=\"c-label\">Cím / Alt szöveg</label>\n            <div class=\"c-input-row\">\n              <textarea\n                v-model=\"local.title\"\n                id=\"image-title\"\n                class=\"c-input c-image-picker__textarea\"\n                placeholder=\"Cím vagy alt szöveg\"\n                :disabled=\"!editable\"\n              />\n            </div>\n          </div>\n\n          <!-- Adult Content Checkbox -->\n          <div class=\"flex-center gap-1\">\n            <input\n              id=\"image-adult\"\n              v-model=\"local.isAdult\"\n              type=\"checkbox\"\n              class=\"c-checkbox\"\n              :checked=\"local.isAdult\"\n              :disabled=\"!editable\"\n            />\n            <label for=\"image-adult\" class=\"c-label\">Felnőtt tartalom</label>\n          </div>\n        </div>\n      </div>\n\n      <!-- Image Search Modal Dialog -->\n      <Modal v-if=\"showImageModal\" @close=\"showImageModal = false\">\n        <hvg-search-image\n          :causationid=\"imageCausationId\"\n          :viewid=\"imageViewId\"\n          :environment=\"environment\"\n          :aeurl=\"articleEditorUrl\"\n          selectonly=\"true\"\n        />\n      </Modal>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/image-picker.scss\"></style>\n"],"mappings":"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"}
+{"version":3,"file":"admins-components39.js","names":[],"sources":["../src/components/ConfirmModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ConfirmModalProps {\n  title: string\n  message: string\n  confirmLabel?: string\n  cancelLabel?: string\n  type?: ButtonType\n}\n</script>\n\n<script setup lang=\"ts\">\nimport Modal from '@/components/Modal.vue'\nimport Button, { type ButtonType } from '@/components/Button.vue'\n\nwithDefaults(defineProps<ConfirmModalProps>(), {\n  confirmLabel: 'Confirm',\n  cancelLabel: 'Cancel',\n  type: 'normal',\n})\n\nconst emit = defineEmits<{\n  confirm: []\n  cancel: []\n}>()\n</script>\n\n<template>\n  <Modal :title=\"title\" @close=\"emit('cancel')\">\n    <p class=\"c-confirm-modal-message\">{{ message }}</p>\n    <template #footer>\n      <Button :label=\"cancelLabel\" type=\"normal\" outline @click=\"emit('cancel')\" />\n      <Button :label=\"confirmLabel\" :type=\"type\" @click=\"emit('confirm')\" />\n    </template>\n  </Modal>\n</template>\n"],"mappings":""}

package/dist/{admins-components36.js.map → admins-components40.js.map}

@@ -1 +1 @@
-{"version":3,"file":"admins-components36.js","names":[],"sources":["../src/components/CopyToClipboard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  value?: unknown\n  target?: string | HTMLElement\n  useParent?: boolean\n}>()\n\nconst copied = ref(false)\n\nfunction copy(event?: MouseEvent) {\n  let text = ''\n\n  if (props.target) {\n    const element: HTMLElement | null = typeof props.target === 'string'\n      ? document.querySelector(props.target)\n      : props.target\n\n    if (element) {\n      text = element.innerText\n    }\n  }\n  else if (props.useParent && event?.target) {\n    const parent = (event.target as HTMLElement).parentElement\n    if (parent) {\n      text = parent.innerText\n    }\n  }\n  else {\n    text = props.value == null ? '' : String(props.value)\n  }\n\n  if (text) {\n    navigator.clipboard.writeText(text)\n    copied.value = true\n    setTimeout(() => { copied.value = false }, 1500)\n  }\n}\n</script>\n\n<template>\n  <i\n    :class=\"copied ? 'fa-solid fa-check c-copy-btn--copied' : 'fa-regular fa-copy'\"\n    class=\"c-copy-btn\"\n    tabindex=\"0\"\n    @click.stop=\"copy\"\n  ></i>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/copy-to-clipboard.scss\"></style>\n"],"mappings":";;;;;;;;;;EAGA,IAAM,IAAQ,GAMR,IAAS,EAAI,EAAK;EAExB,SAAS,EAAK,GAAoB;GAChC,IAAI,IAAO;GAEX,IAAI,EAAM,QAAQ;IAChB,IAAM,IAA8B,OAAO,EAAM,UAAW,WACxD,SAAS,cAAc,EAAM,MAAM,IACnC,EAAM;IAEV,AAAI,MACF,IAAO,EAAQ;GAEnB,OACK,IAAI,EAAM,aAAa,GAAO,QAAQ;IACzC,IAAM,IAAU,EAAM,OAAuB;IAC7C,AAAI,MACF,IAAO,EAAO;GAElB,OAEE,IAAO,EAAM,SAAS,OAAO,KAAK,OAAO,EAAM,KAAK;GAGtD,AAAI,MACF,UAAU,UAAU,UAAU,CAAI,GAClC,EAAO,QAAQ,IACf,iBAAiB;IAAE,EAAO,QAAQ;GAAM,GAAG,IAAI;EAEnD;yBAIE,EAKK,KAAA;GAJF,OAAK,EAAA,CAAE,EAAA,QAAM,yCAAA,sBACR,YAAY,CAAA;GAClB,UAAS;GACR,SAAK,EAAO,GAAI,CAAA,MAAA,CAAA"}
+{"version":3,"file":"admins-components40.js","names":[],"sources":["../src/components/CopyToClipboard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  value?: unknown\n  target?: string | HTMLElement\n  useParent?: boolean\n}>()\n\nconst copied = ref(false)\n\nfunction copy(event?: MouseEvent) {\n  let text = ''\n\n  if (props.target) {\n    const element: HTMLElement | null = typeof props.target === 'string'\n      ? document.querySelector(props.target)\n      : props.target\n\n    if (element) {\n      text = element.innerText\n    }\n  }\n  else if (props.useParent && event?.target) {\n    const parent = (event.target as HTMLElement).parentElement\n    if (parent) {\n      text = parent.innerText\n    }\n  }\n  else {\n    text = props.value == null ? '' : String(props.value)\n  }\n\n  if (text) {\n    navigator.clipboard.writeText(text)\n    copied.value = true\n    setTimeout(() => { copied.value = false }, 1500)\n  }\n}\n</script>\n\n<template>\n  <i\n    :class=\"copied ? 'fa-solid fa-check c-copy-btn--copied' : 'fa-regular fa-copy'\"\n    class=\"c-copy-btn\"\n    tabindex=\"0\"\n    @click.stop=\"copy\"\n  ></i>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/copy-to-clipboard.scss\"></style>\n"],"mappings":";;;;;;;;;;EAGA,IAAM,IAAQ,GAMR,IAAS,EAAI,EAAK;EAExB,SAAS,EAAK,GAAoB;GAChC,IAAI,IAAO;GAEX,IAAI,EAAM,QAAQ;IAChB,IAAM,IAA8B,OAAO,EAAM,UAAW,WACxD,SAAS,cAAc,EAAM,MAAM,IACnC,EAAM;IAEV,AAAI,MACF,IAAO,EAAQ;GAEnB,OACK,IAAI,EAAM,aAAa,GAAO,QAAQ;IACzC,IAAM,IAAU,EAAM,OAAuB;IAC7C,AAAI,MACF,IAAO,EAAO;GAElB,OAEE,IAAO,EAAM,SAAS,OAAO,KAAK,OAAO,EAAM,KAAK;GAGtD,AAAI,MACF,UAAU,UAAU,UAAU,CAAI,GAClC,EAAO,QAAQ,IACf,iBAAiB;IAAE,EAAO,QAAQ;GAAM,GAAG,IAAI;EAEnD;yBAIE,EAKK,KAAA;GAJF,OAAK,EAAA,CAAE,EAAA,QAAM,yCAAA,sBACR,YAAY,CAAA;GAClB,UAAS;GACR,SAAK,EAAO,GAAI,CAAA,MAAA,CAAA"}

package/dist/admins-components42.js

@@ -1,125 +1,7 @@
-import e from "./admins-components22.js";
-import t from "./admins-components41.js";
-import { createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, openBlock as o, ref as s, watch as c } from "vue";
-//#region src/components/custom/ExternalArticleOffer.vue?vue&type=script&setup=true&lang.ts
-var l = { class: "ac-component" }, u = { class: "d-flex flex-column gap-2" }, d = { class: "c-input-row" }, f = ["value"], p = { class: "c-input-row" }, m = ["value"], h = { class: "c-input-row" }, g = ["value"], _ = /* @__PURE__ */ a({
-	__name: "ExternalArticleOffer",
-	props: {
-		modelValue: {},
-		onArticleUrlChanged: { type: Function },
-		articleEditorUrl: {},
-		environment: {},
-		searchImageWidgetUrl: {},
-		imageBaseUrl: {},
-		imageViewId: {},
-		formats: {}
-	},
-	emits: ["update:modelValue"],
-	setup(a, { emit: _ }) {
-		let v = {
-			article: {
-				url: "",
-				imageUrl: "",
-				imageId: "",
-				title: "",
-				lead: ""
-			},
-			format: ""
-		}, y = _, b = a, x = s(v), S = s({
-			id: x.value.article.imageId,
-			url: "",
-			source: "",
-			title: "",
-			isAdult: !1
-		});
-		c(() => b.modelValue, (e) => {
-			e ? x.value = e : x.value = v;
-		}, {
-			deep: !0,
-			immediate: !0
-		}), c(() => x, (e) => {
-			y("update:modelValue", x.value), S.value.id = e.value.article.imageId, S.value.url = e.value.article.imageUrl;
-		}, {
-			deep: !0,
-			immediate: !0
-		}), c(() => S.value.id, (e) => {
-			x.value.article.imageId = e;
-		}, {
-			deep: !0,
-			immediate: !0
-		}), c(() => S.value.url, (e) => {
-			x.value.article.imageUrl = e;
-		}, {
-			deep: !0,
-			immediate: !0
-		});
-		let C = (e) => {
-			x.value.article.url = e.target?.value || "", x.value.article.url && b.onArticleUrlChanged(x.value.article.url, (e) => {
-				x.value.article = e;
-			});
-		};
-		return ((e) => {
-			if (!customElements.get("hvg-search-image") && !document.querySelector(`script[src="${e}"]`)) {
-				let t = document.createElement("script");
-				t.type = "text/javascript", t.src = e, document.head.appendChild(t);
-			}
-		})(b.searchImageWidgetUrl), (a, s) => (o(), n("div", l, [r("div", u, [
-			r("div", null, [s[4] ||= r("label", {
-				for: "articleUrl",
-				class: "c-label"
-			}, "Article URL", -1), r("div", d, [r("textarea", {
-				id: "articleUrl",
-				class: "c-input",
-				placeholder: "Article URL",
-				value: x.value.article.url,
-				onInput: C
-			}, null, 40, f)])]),
-			r("div", null, [s[5] ||= r("label", {
-				for: "articleTitle",
-				class: "c-label"
-			}, "Title", -1), r("div", p, [r("textarea", {
-				id: "articleTitle",
-				class: "c-input",
-				placeholder: "Article title",
-				value: x.value.article.title,
-				onInput: s[0] ||= (e) => x.value.article.title = e.target?.value || ""
-			}, null, 40, m)])]),
-			r("div", null, [s[6] ||= r("label", {
-				for: "articleLead",
-				class: "c-label"
-			}, "Lead", -1), r("div", h, [r("textarea", {
-				id: "articleLead",
-				class: "c-input",
-				placeholder: "Article lead / description",
-				value: x.value.article.lead,
-				onInput: s[1] ||= (e) => x.value.article.lead = e.target?.value || ""
-			}, null, 40, g)])]),
-			r("div", null, [i(t, {
-				modelValue: S.value,
-				"onUpdate:modelValue": s[2] ||= (e) => S.value = e,
-				details: !1,
-				editable: !1,
-				environment: b.environment,
-				"article-editor-url": b.articleEditorUrl,
-				"search-image-widget-url": b.searchImageWidgetUrl,
-				"image-base-url": b.imageBaseUrl,
-				"image-view-id": b.imageViewId
-			}, null, 8, [
-				"modelValue",
-				"environment",
-				"article-editor-url",
-				"search-image-widget-url",
-				"image-base-url",
-				"image-view-id"
-			])]),
-			r("div", null, [s[7] ||= r("label", { class: "c-label" }, "Format", -1), i(e, {
-				modelValue: x.value.format,
-				"onUpdate:modelValue": s[3] ||= (e) => x.value.format = e,
-				options: b.formats,
-				config: { placeholder: "Select format..." }
-			}, null, 8, ["modelValue", "options"])])
-		])]));
-	}
-});
+import './src/styles/components/copy-to-clipboard.scss_vue_type_style_index_0_src_true_lang.css';
+import e from "./admins-components40.js";
+/* empty css                    */
+//#region src/components/CopyToClipboard.vue
+var t = e;
 //#endregion
-export { _ as default };
+export { t as default };

package/dist/admins-components42.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components42.js","names":[],"sources":["../src/components/custom/ExternalArticleOffer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\nimport ImagePicker from '@/components/custom/ImagePicker.vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\n\nexport interface Article {\n  url: string\n  imageUrl: string\n  imageId: string\n  title: string\n  lead: string\n}\n\nexport interface ExternalArticleOfferModel {\n  article: Article\n  format: string\n}\n\nconst defaultValue: ExternalArticleOfferModel = {\n  article: {\n    url: '',\n    imageUrl: '',\n    imageId: '',\n    title: '',\n    lead: '',\n  },\n  format: '',\n}\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: ExternalArticleOfferModel): void\n}>()\n\nconst props = defineProps<{\n  modelValue?: ExternalArticleOfferModel\n  onArticleUrlChanged: (url: string, callback: (article: Article) => void) => void\n  articleEditorUrl: string\n  environment: string\n  searchImageWidgetUrl: string\n  imageBaseUrl: string\n  imageViewId: string\n  formats: { label: string; value: string }[]\n}>()\n\nconst localModel = ref<ExternalArticleOfferModel>(defaultValue)\nconst imageModel = ref({\n  id: localModel.value.article.imageId,\n  url: '',\n  source: '',\n  title: '',\n  isAdult: false,\n})\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (!newVal) {\n      localModel.value = defaultValue\n    } else {\n      localModel.value = newVal\n    }\n  },\n  { deep: true, immediate: true },\n)\n\nwatch(\n  () => localModel,\n  (newVal) => {\n    emit('update:modelValue', localModel.value)\n    imageModel.value.id = newVal.value.article.imageId\n    imageModel.value.url = newVal.value.article.imageUrl\n  },\n  { deep: true, immediate: true },\n)\n\nwatch(\n  () => imageModel.value.id,\n  (id) => {\n    localModel.value.article.imageId = id\n  },\n  { deep: true, immediate: true },\n)\n\nwatch(\n  () => imageModel.value.url,\n  (url) => {\n    localModel.value.article.imageUrl = url\n  },\n  { deep: true, immediate: true },\n)\n\nconst onUrlChanged = (event: Event) => {\n  localModel.value.article.url = (event.target as any)?.value || ''\n  if (!localModel.value.article.url) return\n\n  props.onArticleUrlChanged(localModel.value.article.url, (article) => {\n    localModel.value.article = article\n  })\n}\n\nconst addScript = (url: string) => {\n  if (!customElements.get('hvg-search-image')) {\n    if (!document.querySelector(`script[src=\"${url}\"]`)) {\n      const script = document.createElement('script')\n      script.type = 'text/javascript'\n      script.src = url\n      document.head.appendChild(script)\n    }\n  }\n}\n\naddScript(props.searchImageWidgetUrl)\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"d-flex flex-column gap-2\">\n      <div>\n        <label for=\"articleUrl\" class=\"c-label\">Article URL</label>\n        <div class=\"c-input-row\">\n          <textarea\n            id=\"articleUrl\"\n            class=\"c-input\"\n            placeholder=\"Article URL\"\n            :value=\"localModel.article.url\"\n            @input=\"onUrlChanged\"\n          />\n        </div>\n      </div>\n\n      <div>\n        <label for=\"articleTitle\" class=\"c-label\">Title</label>\n        <div class=\"c-input-row\">\n          <textarea\n            id=\"articleTitle\"\n            class=\"c-input\"\n            placeholder=\"Article title\"\n            :value=\"localModel.article.title\"\n            @input=\"localModel.article.title = ($event.target as any)?.value || ''\"\n          />\n        </div>\n      </div>\n\n      <div>\n        <label for=\"articleLead\" class=\"c-label\">Lead</label>\n        <div class=\"c-input-row\">\n          <textarea\n            id=\"articleLead\"\n            class=\"c-input\"\n            placeholder=\"Article lead / description\"\n            :value=\"localModel.article.lead\"\n            @input=\"localModel.article.lead = ($event.target as any)?.value || ''\"\n          />\n        </div>\n      </div>\n\n      <div>\n        <ImagePicker\n          v-model=\"imageModel\"\n          :details=\"false\"\n          :editable=\"false\"\n          :environment=\"props.environment\"\n          :article-editor-url=\"props.articleEditorUrl\"\n          :search-image-widget-url=\"props.searchImageWidgetUrl\"\n          :image-base-url=\"props.imageBaseUrl\"\n          :image-view-id=\"props.imageViewId\"\n        />\n      </div>\n\n      <div>\n        <label class=\"c-label\">Format</label>\n        <DropdownSelect\n          v-model=\"localModel.format\"\n          :options=\"props.formats\"\n          :config=\"{ placeholder: 'Select format...' }\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"admins-components42.js","names":[],"sources":["../src/components/CopyToClipboard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  value?: unknown\n  target?: string | HTMLElement\n  useParent?: boolean\n}>()\n\nconst copied = ref(false)\n\nfunction copy(event?: MouseEvent) {\n  let text = ''\n\n  if (props.target) {\n    const element: HTMLElement | null = typeof props.target === 'string'\n      ? document.querySelector(props.target)\n      : props.target\n\n    if (element) {\n      text = element.innerText\n    }\n  }\n  else if (props.useParent && event?.target) {\n    const parent = (event.target as HTMLElement).parentElement\n    if (parent) {\n      text = parent.innerText\n    }\n  }\n  else {\n    text = props.value == null ? '' : String(props.value)\n  }\n\n  if (text) {\n    navigator.clipboard.writeText(text)\n    copied.value = true\n    setTimeout(() => { copied.value = false }, 1500)\n  }\n}\n</script>\n\n<template>\n  <i\n    :class=\"copied ? 'fa-solid fa-check c-copy-btn--copied' : 'fa-regular fa-copy'\"\n    class=\"c-copy-btn\"\n    tabindex=\"0\"\n    @click.stop=\"copy\"\n  ></i>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/copy-to-clipboard.scss\"></style>\n"],"mappings":""}

package/dist/admins-components43.js

@@ -1,5 +1,147 @@
-import e from "./admins-components42.js";
-//#region src/components/custom/ExternalArticleOffer.vue
-var t = e;
+import e from "./admins-components6.js";
+import t from "./admins-components37.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, onMounted as u, onUnmounted as d, openBlock as f, ref as p, vModelCheckbox as m, vModelText as h, watch as g, withCtx as _, withDirectives as v } from "vue";
+//#region src/components/custom/ImagePicker.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "ac-component" }, b = { class: "c-image-picker" }, x = { class: "c-image-picker__preview" }, S = ["src", "alt"], C = {
+	key: 1,
+	class: "c-image-picker__placeholder"
+}, w = { class: "c-image-picker__buttons" }, T = {
+	key: 0,
+	class: "c-image-picker__details"
+}, E = { class: "c-input-row" }, D = ["disabled"], O = { class: "c-input-row" }, k = ["disabled"], A = { class: "flex-center gap-1" }, j = ["checked", "disabled"], M = [
+	"viewid",
+	"environment",
+	"aeurl"
+], N = {
+	id: "",
+	url: "",
+	isAdult: !1,
+	source: "",
+	title: ""
+}, P = /* @__PURE__ */ c({
+	__name: "ImagePicker",
+	props: {
+		modelValue: { default: void 0 },
+		details: {
+			type: Boolean,
+			default: !1
+		},
+		editable: {
+			type: Boolean,
+			default: !1
+		},
+		direction: { default: "vertical" },
+		articleEditorUrl: {},
+		environment: {},
+		searchImageWidgetUrl: {},
+		imageBaseUrl: {},
+		imageViewId: {}
+	},
+	emits: ["update:modelValue"],
+	setup(c, { emit: P }) {
+		let F = c, I = P, L = p(N), R = p(!1);
+		g(() => L.value, () => {
+			I("update:modelValue", L.value);
+		}, { deep: !0 }), g(() => F.modelValue, (e) => {
+			e && (L.value = e);
+		}, {
+			deep: !0,
+			immediate: !0
+		});
+		let z = `${typeof crypto < "u" && crypto.randomUUID ? crypto.randomUUID() : `ip-${Date.now()}-${Math.random().toString(36).slice(2)}`}-image-picker-causation`;
+		u(() => {
+			if (!customElements.get("hvg-search-image") && !document.querySelector(`script[src="${F.searchImageWidgetUrl}"]`)) {
+				let e = document.createElement("script");
+				e.type = "text/javascript", e.src = F.searchImageWidgetUrl, e.async = !0, document.head.appendChild(e);
+			}
+		});
+		let B = n(() => L.value && (L.value.url && L.value.url.length > 0 || L.value.id && L.value.id.length > 0)), V = n(() => {
+			if (B.value) return L.value.url && L.value.url.length > 0 ? L.value.url : `${F.imageBaseUrl}/${F.imageViewId}/${L.value.id}.img`;
+		}), H = n(() => F.direction === "horizontal"), U = (e) => {
+			e.preventDefault(), R.value = !0;
+		}, W = (e) => {
+			e.preventDefault(), L.value = { ...N };
+		}, G = (e) => {
+			e?.detail?.causationid === z && (R.value = !1, e.detail?.image && (L.value = {
+				id: e.detail.image.id,
+				url: "",
+				isAdult: e.detail.image.isAdult,
+				source: e.detail.image.source,
+				title: e.detail.image.title
+			}));
+		};
+		return u(() => {
+			window.addEventListener("image-selected", G);
+		}), d(() => {
+			window.removeEventListener("image-selected", G);
+		}), (n, u) => (f(), a("div", y, [o("div", b, [o("div", { class: l(["c-image-picker__container", { "c-image-picker__container--horizontal": H.value }]) }, [
+			o("div", x, [B.value ? (f(), a("img", {
+				key: 0,
+				src: V.value,
+				alt: L.value.title || "Selected image",
+				class: "c-image-picker__img"
+			}, null, 8, S)) : (f(), a("p", C, "Nincs kiválasztott kép"))]),
+			o("div", w, [s(e, {
+				type: "success",
+				label: "Kép kiválasztása",
+				class: "nowrap",
+				onClick: U,
+				icon: "fa-solid fa-image"
+			}), s(e, {
+				type: "error",
+				label: "Eltávolítás",
+				class: "nowrap",
+				onClick: W,
+				icon: "fa-solid fa-trash"
+			})]),
+			c.details && L.value.id ? (f(), a("div", T, [
+				o("div", null, [u[4] ||= o("label", {
+					for: "image-source",
+					class: "c-label"
+				}, "Forrás", -1), o("div", E, [v(o("input", {
+					"onUpdate:modelValue": u[0] ||= (e) => L.value.source = e,
+					id: "image-source",
+					type: "text",
+					class: "c-input",
+					placeholder: "Kép forrása",
+					disabled: !c.editable
+				}, null, 8, D), [[h, L.value.source]])])]),
+				o("div", null, [u[5] ||= o("label", {
+					for: "image-title",
+					class: "c-label"
+				}, "Cím / Alt szöveg", -1), o("div", O, [v(o("textarea", {
+					"onUpdate:modelValue": u[1] ||= (e) => L.value.title = e,
+					id: "image-title",
+					class: "c-input c-image-picker__textarea",
+					placeholder: "Cím vagy alt szöveg",
+					disabled: !c.editable
+				}, null, 8, k), [[h, L.value.title]])])]),
+				o("div", A, [v(o("input", {
+					id: "image-adult",
+					"onUpdate:modelValue": u[2] ||= (e) => L.value.isAdult = e,
+					type: "checkbox",
+					class: "c-checkbox",
+					checked: L.value.isAdult,
+					disabled: !c.editable
+				}, null, 8, j), [[m, L.value.isAdult]]), u[6] ||= o("label", {
+					for: "image-adult",
+					class: "c-label"
+				}, "Felnőtt tartalom", -1)])
+			])) : i("", !0)
+		], 2), R.value ? (f(), r(t, {
+			key: 0,
+			onClose: u[3] ||= (e) => R.value = !1
+		}, {
+			default: _(() => [o("hvg-search-image", {
+				causationid: z,
+				viewid: c.imageViewId,
+				environment: c.environment,
+				aeurl: c.articleEditorUrl,
+				selectonly: "true"
+			}, null, 8, M)]),
+			_: 1
+		})) : i("", !0)])]));
+	}
+});
 //#endregion
-export { t as default };
+export { P as default };

package/dist/admins-components43.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components43.js","names":[],"sources":["../src/components/custom/ExternalArticleOffer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\nimport ImagePicker from '@/components/custom/ImagePicker.vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\n\nexport interface Article {\n  url: string\n  imageUrl: string\n  imageId: string\n  title: string\n  lead: string\n}\n\nexport interface ExternalArticleOfferModel {\n  article: Article\n  format: string\n}\n\nconst defaultValue: ExternalArticleOfferModel = {\n  article: {\n    url: '',\n    imageUrl: '',\n    imageId: '',\n    title: '',\n    lead: '',\n  },\n  format: '',\n}\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: ExternalArticleOfferModel): void\n}>()\n\nconst props = defineProps<{\n  modelValue?: ExternalArticleOfferModel\n  onArticleUrlChanged: (url: string, callback: (article: Article) => void) => void\n  articleEditorUrl: string\n  environment: string\n  searchImageWidgetUrl: string\n  imageBaseUrl: string\n  imageViewId: string\n  formats: { label: string; value: string }[]\n}>()\n\nconst localModel = ref<ExternalArticleOfferModel>(defaultValue)\nconst imageModel = ref({\n  id: localModel.value.article.imageId,\n  url: '',\n  source: '',\n  title: '',\n  isAdult: false,\n})\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (!newVal) {\n      localModel.value = defaultValue\n    } else {\n      localModel.value = newVal\n    }\n  },\n  { deep: true, immediate: true },\n)\n\nwatch(\n  () => localModel,\n  (newVal) => {\n    emit('update:modelValue', localModel.value)\n    imageModel.value.id = newVal.value.article.imageId\n    imageModel.value.url = newVal.value.article.imageUrl\n  },\n  { deep: true, immediate: true },\n)\n\nwatch(\n  () => imageModel.value.id,\n  (id) => {\n    localModel.value.article.imageId = id\n  },\n  { deep: true, immediate: true },\n)\n\nwatch(\n  () => imageModel.value.url,\n  (url) => {\n    localModel.value.article.imageUrl = url\n  },\n  { deep: true, immediate: true },\n)\n\nconst onUrlChanged = (event: Event) => {\n  localModel.value.article.url = (event.target as any)?.value || ''\n  if (!localModel.value.article.url) return\n\n  props.onArticleUrlChanged(localModel.value.article.url, (article) => {\n    localModel.value.article = article\n  })\n}\n\nconst addScript = (url: string) => {\n  if (!customElements.get('hvg-search-image')) {\n    if (!document.querySelector(`script[src=\"${url}\"]`)) {\n      const script = document.createElement('script')\n      script.type = 'text/javascript'\n      script.src = url\n      document.head.appendChild(script)\n    }\n  }\n}\n\naddScript(props.searchImageWidgetUrl)\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"d-flex flex-column gap-2\">\n      <div>\n        <label for=\"articleUrl\" class=\"c-label\">Article URL</label>\n        <div class=\"c-input-row\">\n          <textarea\n            id=\"articleUrl\"\n            class=\"c-input\"\n            placeholder=\"Article URL\"\n            :value=\"localModel.article.url\"\n            @input=\"onUrlChanged\"\n          />\n        </div>\n      </div>\n\n      <div>\n        <label for=\"articleTitle\" class=\"c-label\">Title</label>\n        <div class=\"c-input-row\">\n          <textarea\n            id=\"articleTitle\"\n            class=\"c-input\"\n            placeholder=\"Article title\"\n            :value=\"localModel.article.title\"\n            @input=\"localModel.article.title = ($event.target as any)?.value || ''\"\n          />\n        </div>\n      </div>\n\n      <div>\n        <label for=\"articleLead\" class=\"c-label\">Lead</label>\n        <div class=\"c-input-row\">\n          <textarea\n            id=\"articleLead\"\n            class=\"c-input\"\n            placeholder=\"Article lead / description\"\n            :value=\"localModel.article.lead\"\n            @input=\"localModel.article.lead = ($event.target as any)?.value || ''\"\n          />\n        </div>\n      </div>\n\n      <div>\n        <ImagePicker\n          v-model=\"imageModel\"\n          :details=\"false\"\n          :editable=\"false\"\n          :environment=\"props.environment\"\n          :article-editor-url=\"props.articleEditorUrl\"\n          :search-image-widget-url=\"props.searchImageWidgetUrl\"\n          :image-base-url=\"props.imageBaseUrl\"\n          :image-view-id=\"props.imageViewId\"\n        />\n      </div>\n\n      <div>\n        <label class=\"c-label\">Format</label>\n        <DropdownSelect\n          v-model=\"localModel.format\"\n          :options=\"props.formats\"\n          :config=\"{ placeholder: 'Select format...' }\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"admins-components43.js","names":[],"sources":["../src/components/custom/ImagePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ImagePickerModel {\n  id: string\n  url: string\n  source: string\n  title: string\n  isAdult: boolean\n}\n\nexport interface ImagePickerProps {\n  modelValue?: ImagePickerModel\n  details?: boolean\n  editable?: boolean\n  direction?: 'horizontal' | 'vertical'\n  articleEditorUrl: string\n  environment: string\n  searchImageWidgetUrl: string\n  imageBaseUrl: string\n  imageViewId: string\n}\n\nconst defaultValue: ImagePickerModel = {\n  id: '',\n  url: '',\n  isAdult: false,\n  source: '',\n  title: '',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport Modal from '@/components/Modal.vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<ImagePickerProps>(), {\n  modelValue: undefined,\n  details: false,\n  editable: false,\n  direction: 'vertical',\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: ImagePickerModel): void\n}>()\n\nconst local = ref<ImagePickerModel>(defaultValue)\nconst showImageModal = ref(false)\n\nwatch(\n  () => local.value,\n  () => {\n    emit('update:modelValue', local.value)\n  },\n  { deep: true },\n)\n\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    if (newValue) {\n      local.value = newValue\n    }\n  },\n  { deep: true, immediate: true },\n)\n\n// Generate unique ID\nconst uniqueId = (() => {\n  if (typeof crypto !== 'undefined' && crypto.randomUUID) return crypto.randomUUID()\n  return `ip-${Date.now()}-${Math.random().toString(36).slice(2)}`\n})()\n\nconst imageCausationId = `${uniqueId}-image-picker-causation`\n\n// Load external search image widget script\nonMounted(() => {\n  // Check if custom element is already registered\n  if (!customElements.get('hvg-search-image')) {\n    if (!document.querySelector(`script[src=\"${props.searchImageWidgetUrl}\"]`)) {\n      const script = document.createElement('script')\n      script.type = 'text/javascript'\n      script.src = props.searchImageWidgetUrl\n      script.async = true\n      document.head.appendChild(script)\n    }\n  }\n})\n\n// Computed properties\nconst hasImage = computed(() => {\n  return (\n    local.value &&\n    ((local.value.url && local.value.url.length > 0) ||\n      (local.value.id && local.value.id.length > 0))\n  )\n})\n\nconst imageUrl = computed(() => {\n  if (!hasImage.value) return undefined\n  if (local.value.url && local.value.url.length > 0) return local.value.url\n  return `${props.imageBaseUrl}/${props.imageViewId}/${local.value.id}.img`\n})\n\nconst isHorizontal = computed(() => props.direction === 'horizontal')\n\n// Event handlers\nconst selectImage = (event: MouseEvent) => {\n  event.preventDefault()\n  showImageModal.value = true\n}\n\nconst resetImage = (event: MouseEvent) => {\n  event.preventDefault()\n  local.value = { ...defaultValue }\n}\n\nconst onImageSelected = (e: CustomEvent) => {\n  if (e?.detail?.causationid === imageCausationId) {\n    showImageModal.value = false\n\n    if (e.detail?.image) {\n      local.value = {\n        id: e.detail.image.id,\n        url: '',\n        isAdult: e.detail.image.isAdult,\n        source: e.detail.image.source,\n        title: e.detail.image.title,\n      }\n    }\n  }\n}\n\n// Event listeners\nonMounted(() => {\n  window.addEventListener('image-selected', onImageSelected as EventListener)\n})\n\nonUnmounted(() => {\n  window.removeEventListener('image-selected', onImageSelected as EventListener)\n})\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-image-picker\">\n      <div\n        class=\"c-image-picker__container\"\n        :class=\"{ 'c-image-picker__container--horizontal': isHorizontal }\"\n      >\n        <div class=\"c-image-picker__preview\">\n          <img\n            v-if=\"hasImage\"\n            :src=\"imageUrl\"\n            :alt=\"local.title || 'Selected image'\"\n            class=\"c-image-picker__img\"\n          />\n          <p v-else class=\"c-image-picker__placeholder\">Nincs kiválasztott kép</p>\n        </div>\n\n        <!-- Action Buttons -->\n        <div class=\"c-image-picker__buttons\">\n          <Button\n            type=\"success\"\n            label=\"Kép kiválasztása\"\n            class=\"nowrap\"\n            @click=\"selectImage\"\n            icon=\"fa-solid fa-image\"\n          ></Button>\n          <Button\n            type=\"error\"\n            label=\"Eltávolítás\"\n            class=\"nowrap\"\n            @click=\"resetImage\"\n            icon=\"fa-solid fa-trash\"\n          ></Button>\n        </div>\n\n        <!-- Details Section -->\n        <div v-if=\"details && local.id\" class=\"c-image-picker__details\">\n          <!-- Source Input -->\n          <div>\n            <label for=\"image-source\" class=\"c-label\">Forrás</label>\n            <div class=\"c-input-row\">\n              <input\n                v-model=\"local.source\"\n                id=\"image-source\"\n                type=\"text\"\n                class=\"c-input\"\n                placeholder=\"Kép forrása\"\n                :disabled=\"!editable\"\n              />\n            </div>\n          </div>\n\n          <!-- Title/Alt Text Input -->\n          <div>\n            <label for=\"image-title\" class=\"c-label\">Cím / Alt szöveg</label>\n            <div class=\"c-input-row\">\n              <textarea\n                v-model=\"local.title\"\n                id=\"image-title\"\n                class=\"c-input c-image-picker__textarea\"\n                placeholder=\"Cím vagy alt szöveg\"\n                :disabled=\"!editable\"\n              />\n            </div>\n          </div>\n\n          <!-- Adult Content Checkbox -->\n          <div class=\"flex-center gap-1\">\n            <input\n              id=\"image-adult\"\n              v-model=\"local.isAdult\"\n              type=\"checkbox\"\n              class=\"c-checkbox\"\n              :checked=\"local.isAdult\"\n              :disabled=\"!editable\"\n            />\n            <label for=\"image-adult\" class=\"c-label\">Felnőtt tartalom</label>\n          </div>\n        </div>\n      </div>\n\n      <!-- Image Search Modal Dialog -->\n      <Modal v-if=\"showImageModal\" @close=\"showImageModal = false\">\n        <hvg-search-image\n          :causationid=\"imageCausationId\"\n          :viewid=\"imageViewId\"\n          :environment=\"environment\"\n          :aeurl=\"articleEditorUrl\"\n          selectonly=\"true\"\n        />\n      </Modal>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/image-picker.scss\"></style>\n"],"mappings":"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"}

package/dist/admins-components45.js

@@ -1,5 +1,7 @@
-import e from "./admins-components44.js";
-//#region src/components/custom/InternalArticleOffer.vue
+import './src/styles/components/image-picker.scss_vue_type_style_index_0_src_true_lang.css';
+import e from "./admins-components43.js";
+/* empty css                    */
+//#region src/components/custom/ImagePicker.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/admins-components45.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components45.js","names":[],"sources":["../src/components/custom/InternalArticleOffer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, ref, watch } from 'vue'\nimport ImagePicker from '@/components/custom/ImagePicker.vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\nimport Modal from '@/components/Modal.vue'\nimport Button from '@/components/Button.vue'\n\nexport interface Article {\n  siteId: string\n  id: string\n  imageId: string\n  title: string\n  lead: string\n}\n\nexport interface InternalArticleOfferModel {\n  article: Article\n  format: string\n}\n\nconst defaultValue: InternalArticleOfferModel = {\n  article: {\n    siteId: '',\n    id: '',\n    imageId: '',\n    title: '',\n    lead: '',\n  },\n  format: '',\n}\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: InternalArticleOfferModel): void\n}>()\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: InternalArticleOfferModel\n    searchArticleApiUrl: string\n    searchArticleWidgetUrl: string\n    environment: string\n    searchImageWidgetUrl: string\n    imageBaseUrl: string\n    imageViewId: string\n    showIds?: boolean\n    formats: { label: string; value: string }[]\n  }>(),\n  {\n    showIds: true,\n  },\n)\n\nconst localModel = ref<InternalArticleOfferModel>(defaultValue)\nconst imageModel = ref({\n  id: localModel.value.article.imageId || '',\n  url: '',\n  source: '',\n  title: '',\n  isAdult: false,\n})\nconst showArticleModal = ref(false)\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (!newVal) {\n      localModel.value = defaultValue\n    } else {\n      localModel.value = newVal\n    }\n  },\n  { deep: true, immediate: true },\n)\n\nwatch(\n  () => localModel,\n  (newVal) => {\n    emit('update:modelValue', localModel.value)\n    imageModel.value.id = newVal.value.article.imageId\n  },\n  { deep: true, immediate: true },\n)\n\nwatch(\n  () => imageModel.value.id,\n  (id) => {\n    localModel.value.article.imageId = id\n  },\n  { deep: true, immediate: true },\n)\n\nconst articleCausationId = ref(new Date().getTime().toString() + 'article')\nconst EMPTYGUID = '00000000-0000-0000-0000-000000000000'\n\nonUnmounted(() => {\n  window.removeEventListener('search_posts_selected', onPostSelected)\n})\n\nonMounted(() => {\n  window.addEventListener('search_posts_selected', onPostSelected)\n})\n\nconst onPostSelected = (e: any) => {\n  if (e.detail.id == articleCausationId.value) {\n    if (e.detail.result && e.detail.posts.length > 0) {\n      localModel.value.article.id = e.detail.posts[0].id\n      localModel.value.article.siteId = e.detail.posts[0].siteId\n      localModel.value.article.title = e.detail.posts[0].title\n      localModel.value.article.lead = e.detail.posts[0].lead\n      const imageId = e.detail.posts[0].featuredImage\n      localModel.value.article.imageId = imageId || EMPTYGUID\n    }\n\n    showArticleModal.value = false\n  }\n}\n\nconst selectArticle = () => {\n  showArticleModal.value = true\n}\n\nconst addScript = (url: string) => {\n  if (!customElements.get('search-posts-widget')) {\n    if (!document.querySelector(`script[src=\"${url}\"]`)) {\n      const script = document.createElement('script')\n      script.type = 'text/javascript'\n      script.src = url\n      document.head.appendChild(script)\n    }\n  }\n}\n\nif (!customElements.get('hvg-search-image')) {\n  if (!document.querySelector(`script[src=\"${props.searchImageWidgetUrl}\"]`)) {\n    const script = document.createElement('script')\n    script.type = 'text/javascript'\n    script.src = props.searchImageWidgetUrl\n    script.async = true\n    document.head.appendChild(script)\n  }\n}\n\naddScript(props.searchArticleWidgetUrl)\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"d-flex flex-column gap-2\">\n      <div>\n        <Button\n          type=\"success\"\n          label=\"Cikk kiválasztása\"\n          class=\"nowrap\"\n          @click=\"selectArticle\"\n          icon=\"fa-solid fa-newspaper\"\n        />\n      </div>\n\n      <template v-if=\"showIds\">\n        <div class=\"flex gap-2\">\n          <div>\n            <label for=\"articleId\" class=\"c-label\">Article ID</label>\n            <div class=\"c-input-row\">\n              <input\n                id=\"articleId\"\n                type=\"text\"\n                class=\"c-input\"\n                placeholder=\"Article ID\"\n                disabled\n                :value=\"localModel.article.id\"\n              />\n            </div>\n          </div>\n\n          <div>\n            <label for=\"articleSiteId\" class=\"c-label\">Site ID</label>\n            <div class=\"c-input-row\">\n              <input\n                id=\"articleSiteId\"\n                type=\"text\"\n                class=\"c-input\"\n                placeholder=\"Site ID\"\n                disabled\n                :value=\"localModel.article.siteId\"\n              />\n            </div>\n          </div>\n        </div>\n      </template>\n\n      <div>\n        <label for=\"articleTitle\" class=\"c-label\">Title</label>\n        <div class=\"c-input-row\">\n          <textarea\n            id=\"articleTitle\"\n            class=\"c-input\"\n            placeholder=\"Article title\"\n            :value=\"localModel.article.title\"\n            @input=\"localModel.article.title = ($event.target as any)?.value || ''\"\n          />\n        </div>\n      </div>\n\n      <div>\n        <label for=\"articleLead\" class=\"c-label\">Lead</label>\n        <div class=\"c-input-row\">\n          <textarea\n            id=\"articleLead\"\n            class=\"c-input\"\n            placeholder=\"Article lead / description\"\n            :value=\"localModel.article.lead\"\n            @input=\"localModel.article.lead = ($event.target as any)?.value || ''\"\n          />\n        </div>\n      </div>\n\n      <hr class=\"separator\" />\n\n      <div>\n        <ImagePicker\n          v-model=\"imageModel\"\n          :details=\"false\"\n          :editable=\"false\"\n          :environment=\"props.environment\"\n          :article-editor-url=\"props.searchArticleApiUrl\"\n          :search-image-widget-url=\"props.searchImageWidgetUrl\"\n          :image-base-url=\"props.imageBaseUrl\"\n          :image-view-id=\"props.imageViewId\"\n        />\n      </div>\n\n      <div>\n        <label class=\"c-label\">Format</label>\n        <DropdownSelect\n          v-model=\"localModel.format\"\n          :options=\"props.formats\"\n          :config=\"{ placeholder: 'Select format...' }\"\n        />\n      </div>\n\n      <Modal v-if=\"showArticleModal\" title=\"Search Article\" @close=\"showArticleModal = false\">\n        <search-posts-widget\n          :id=\"articleCausationId\"\n          selector=\"true\"\n          :apiurl=\"props.searchArticleApiUrl\"\n          wpurl=\"\"\n          searchurl=\"\"\n          style=\"height: 500px\"\n        />\n      </Modal>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"admins-components45.js","names":[],"sources":["../src/components/custom/ImagePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ImagePickerModel {\n  id: string\n  url: string\n  source: string\n  title: string\n  isAdult: boolean\n}\n\nexport interface ImagePickerProps {\n  modelValue?: ImagePickerModel\n  details?: boolean\n  editable?: boolean\n  direction?: 'horizontal' | 'vertical'\n  articleEditorUrl: string\n  environment: string\n  searchImageWidgetUrl: string\n  imageBaseUrl: string\n  imageViewId: string\n}\n\nconst defaultValue: ImagePickerModel = {\n  id: '',\n  url: '',\n  isAdult: false,\n  source: '',\n  title: '',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport Modal from '@/components/Modal.vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<ImagePickerProps>(), {\n  modelValue: undefined,\n  details: false,\n  editable: false,\n  direction: 'vertical',\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: ImagePickerModel): void\n}>()\n\nconst local = ref<ImagePickerModel>(defaultValue)\nconst showImageModal = ref(false)\n\nwatch(\n  () => local.value,\n  () => {\n    emit('update:modelValue', local.value)\n  },\n  { deep: true },\n)\n\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    if (newValue) {\n      local.value = newValue\n    }\n  },\n  { deep: true, immediate: true },\n)\n\n// Generate unique ID\nconst uniqueId = (() => {\n  if (typeof crypto !== 'undefined' && crypto.randomUUID) return crypto.randomUUID()\n  return `ip-${Date.now()}-${Math.random().toString(36).slice(2)}`\n})()\n\nconst imageCausationId = `${uniqueId}-image-picker-causation`\n\n// Load external search image widget script\nonMounted(() => {\n  // Check if custom element is already registered\n  if (!customElements.get('hvg-search-image')) {\n    if (!document.querySelector(`script[src=\"${props.searchImageWidgetUrl}\"]`)) {\n      const script = document.createElement('script')\n      script.type = 'text/javascript'\n      script.src = props.searchImageWidgetUrl\n      script.async = true\n      document.head.appendChild(script)\n    }\n  }\n})\n\n// Computed properties\nconst hasImage = computed(() => {\n  return (\n    local.value &&\n    ((local.value.url && local.value.url.length > 0) ||\n      (local.value.id && local.value.id.length > 0))\n  )\n})\n\nconst imageUrl = computed(() => {\n  if (!hasImage.value) return undefined\n  if (local.value.url && local.value.url.length > 0) return local.value.url\n  return `${props.imageBaseUrl}/${props.imageViewId}/${local.value.id}.img`\n})\n\nconst isHorizontal = computed(() => props.direction === 'horizontal')\n\n// Event handlers\nconst selectImage = (event: MouseEvent) => {\n  event.preventDefault()\n  showImageModal.value = true\n}\n\nconst resetImage = (event: MouseEvent) => {\n  event.preventDefault()\n  local.value = { ...defaultValue }\n}\n\nconst onImageSelected = (e: CustomEvent) => {\n  if (e?.detail?.causationid === imageCausationId) {\n    showImageModal.value = false\n\n    if (e.detail?.image) {\n      local.value = {\n        id: e.detail.image.id,\n        url: '',\n        isAdult: e.detail.image.isAdult,\n        source: e.detail.image.source,\n        title: e.detail.image.title,\n      }\n    }\n  }\n}\n\n// Event listeners\nonMounted(() => {\n  window.addEventListener('image-selected', onImageSelected as EventListener)\n})\n\nonUnmounted(() => {\n  window.removeEventListener('image-selected', onImageSelected as EventListener)\n})\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-image-picker\">\n      <div\n        class=\"c-image-picker__container\"\n        :class=\"{ 'c-image-picker__container--horizontal': isHorizontal }\"\n      >\n        <div class=\"c-image-picker__preview\">\n          <img\n            v-if=\"hasImage\"\n            :src=\"imageUrl\"\n            :alt=\"local.title || 'Selected image'\"\n            class=\"c-image-picker__img\"\n          />\n          <p v-else class=\"c-image-picker__placeholder\">Nincs kiválasztott kép</p>\n        </div>\n\n        <!-- Action Buttons -->\n        <div class=\"c-image-picker__buttons\">\n          <Button\n            type=\"success\"\n            label=\"Kép kiválasztása\"\n            class=\"nowrap\"\n            @click=\"selectImage\"\n            icon=\"fa-solid fa-image\"\n          ></Button>\n          <Button\n            type=\"error\"\n            label=\"Eltávolítás\"\n            class=\"nowrap\"\n            @click=\"resetImage\"\n            icon=\"fa-solid fa-trash\"\n          ></Button>\n        </div>\n\n        <!-- Details Section -->\n        <div v-if=\"details && local.id\" class=\"c-image-picker__details\">\n          <!-- Source Input -->\n          <div>\n            <label for=\"image-source\" class=\"c-label\">Forrás</label>\n            <div class=\"c-input-row\">\n              <input\n                v-model=\"local.source\"\n                id=\"image-source\"\n                type=\"text\"\n                class=\"c-input\"\n                placeholder=\"Kép forrása\"\n                :disabled=\"!editable\"\n              />\n            </div>\n          </div>\n\n          <!-- Title/Alt Text Input -->\n          <div>\n            <label for=\"image-title\" class=\"c-label\">Cím / Alt szöveg</label>\n            <div class=\"c-input-row\">\n              <textarea\n                v-model=\"local.title\"\n                id=\"image-title\"\n                class=\"c-input c-image-picker__textarea\"\n                placeholder=\"Cím vagy alt szöveg\"\n                :disabled=\"!editable\"\n              />\n            </div>\n          </div>\n\n          <!-- Adult Content Checkbox -->\n          <div class=\"flex-center gap-1\">\n            <input\n              id=\"image-adult\"\n              v-model=\"local.isAdult\"\n              type=\"checkbox\"\n              class=\"c-checkbox\"\n              :checked=\"local.isAdult\"\n              :disabled=\"!editable\"\n            />\n            <label for=\"image-adult\" class=\"c-label\">Felnőtt tartalom</label>\n          </div>\n        </div>\n      </div>\n\n      <!-- Image Search Modal Dialog -->\n      <Modal v-if=\"showImageModal\" @close=\"showImageModal = false\">\n        <hvg-search-image\n          :causationid=\"imageCausationId\"\n          :viewid=\"imageViewId\"\n          :environment=\"environment\"\n          :aeurl=\"articleEditorUrl\"\n          selectonly=\"true\"\n        />\n      </Modal>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/image-picker.scss\"></style>\n"],"mappings":""}