@witchcraft/ui 0.0.1 → 0.1.1

package/dist/runtime/components/LibRecorder/LibRecorder.vue

@@ -4,8 +4,9 @@
 	contenteditable=false is because of storybook, it's shortcuts interfere when not using real input elements
 	-->
 <div
-	:id="id?? fallbackId"
-	:class="twMerge(`recorder
+	:id="id ?? fallbackId"
+	:class="twMerge(
+  `recorder
 			flex items-center
 			gap-2
 			px-2
@@ -13,37 +14,38 @@
 			focus-outline-no-offset
 			rounded-sm
 		`,
-		border &&`
+  border && `
 			border
 			border-neutral-500
 			focus:border-accent-500
 		`,
-
-		(disabled || readonly) && `
+  (disabled || readonly) && `
 			text-neutral-400
 			dark:text-neutral-600
 		`,
-		(disabled || readonly) && border && `
+  (disabled || readonly) && border && `
 			bg-neutral-50
 			dark:bg-neutral-950
 			border-neutral-400
 			dark:border-neutral-600
-		`
-		, ($attrs as any).class)"
+		`,
+  $attrs.class
+)"
 	:aria-disabled="disabled"
 	:aria-readonly="readonly"
 	:tabindex="disabled ? -1 : 0"
 	:title="recording ? recordingTitle : tempValue"
 	contenteditable="false"
 	ref="recorderEl"
-	v-bind="{...ariaLabel, ...$attrs, class:undefined}"
+	v-bind="{ ...ariaLabel, ...$attrs, class: void 0 }"
 	@blur="handleBlurRecorder($event)"
 	@click="handleClickRecorder($event)"
 	@keydown.space.prevent="handleClickRecorder($event, true)"
 >
 	<!-- :aria-description="recording ? recordingTitle : ''" -->
 	<div
-		:class="twMerge(`recorder-indicator
+		:class="twMerge(
+  `recorder--indicator
 				inline-block
 				bg-red-700
 				rounded-full
@@ -52,192 +54,145 @@
 				shrink-0
 				hover:bg-red-500
 			`,
-			recording && `
+  recording && `
 				animate-[blink_1s_infinite]
 				bg-red-500
 			`,
-			(disabled || readonly) && `
+  (disabled || readonly) && `
 				bg-neutral-500
 			`
-		)"
+)"
 		ref="recorderIndicatorEl"
 	/>
-	<div class="recorder-value before:content-vertical-holder truncate">
-		{{ recording
-			? recordingValue ?? t("recorder.recording")
-			: tempValue }}
+	<div class="recorder--value before:content-vertical-holder truncate">
+		{{ recording ? recordingValue ?? t("recorder.recording") : tempValue }}
 	</div>
 </div>
 </template>
-<script setup lang="ts">
-import { keys } from "@alanscodelog/utils/keys.js"
-import { computed, type HTMLAttributes ,onBeforeUnmount, onMounted, type PropType, ref, watch, watchPostEffect } from "vue"
-
-import { useAriaLabel } from "../../composables/useAriaLabel.js"
-import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
-import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId, type LabelProps, type LinkableByIdProps,type TailwindClassProp } from "../shared/props.js"
 
+<script setup>
+import { keys } from "@alanscodelog/utils/keys.js";
+import { computed, onBeforeUnmount, onMounted, ref, watch, watchPostEffect } from "vue";
+import { useAriaLabel } from "../../composables/useAriaLabel.js";
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
+import { twMerge } from "../../utils/twMerge.js";
+import { baseInteractivePropsDefaults, getFallbackId } from "../shared/props.js";
 defineOptions({
-	name: "lib-recorder",
-	inheritAttrs: false,
-})
-const t = useInjectedI18n()
-
-const emits = defineEmits<{
-	/** Recorder is blurred */
-	(e: "recorder:blur", $event: FocusEvent): void
-	/** Recorder is clicked. The component's indicator and recorder elements are passed to help filter out those clicks. */
-	(e: "recorder:click", { event, indicator, input }: { event: MouseEvent | KeyboardEvent, indicator: HTMLElement, input: HTMLInputElement }): void
-	/* User presses enter. Not emitted when multiple values are used. */
-	(e: "focus:parent"): void
-}>()
-const fallbackId = getFallbackId()
-// eslint-disable-next-line no-use-before-define
-const props = withDefaults(defineProps<Props>(), {
-	recordingTitle: "",
-	id: undefined,
-	binders: undefined,
-	recorder: undefined,
-	...baseInteractivePropsDefaults
-})
-/**
- * Puts the element into recording mode if true. See {@link props.recorder}.
- */
-const recording = defineModel<boolean>("recording", { required: false, default: false })
-
-/** The final value of the recorder. For intermediate values while recording, pass a recorder and set an appropriate recording value. */
-const modelValue = defineModel<string>({ required: true })
-
-
-const recorderEl = ref<HTMLInputElement | null>(null)
-const recorderIndicatorEl = ref<HTMLElement | null>(null)
-const canEdit = computed(() => !props.disabled && !props.readonly)
-const tempValue = ref(modelValue.value)
-
+  name: "lib-recorder",
+  inheritAttrs: false
+});
+const t = useInjectedI18n();
+const emits = defineEmits(["recorder:blur", "recorder:click", "focus:parent"]);
+const fallbackId = getFallbackId();
+const props = defineProps(/* @__PURE__ */ _mergeDefaults({
+  id: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  border: { type: Boolean, required: false },
+  unstyle: { type: Boolean, required: false },
+  label: { type: String, required: false },
+  recordingValue: { type: String, required: false },
+  recordingTitle: { type: String, required: false },
+  recorder: { type: null, required: false },
+  binders: { type: null, required: false }
+}, {
+  recordingTitle: "",
+  id: void 0,
+  binders: void 0,
+  recorder: void 0,
+  ...baseInteractivePropsDefaults
+}));
+const recording = defineModel("recording", { type: Boolean, ...{ required: false, default: false } });
+const modelValue = defineModel({ type: String, ...{ required: true } });
+const recorderEl = ref(null);
+const recorderIndicatorEl = ref(null);
+const canEdit = computed(() => !props.disabled && !props.readonly);
+const tempValue = ref(modelValue.value);
 watch([() => props.binders, () => props.binders], () => {
-	if (recording.value) {
-		throw new Error("Component was not designed to allow swapping out of binders/recorders while recording")
-	}
-})
-
+  if (recording.value) {
+    throw new Error("Component was not designed to allow swapping out of binders/recorders while recording");
+  }
+});
 watch(modelValue, () => {
-	tempValue.value = modelValue.value
-})
-const ariaLabel = useAriaLabel(props)
-
-const boundListeners: Record<string, any> = {}
-let isBound = false
-
-const unbindListeners = (): void => {
-	if (!isBound) return
-	isBound = false
-	if (props.recorder) {
-		for (const key of keys(boundListeners)) {
-			recorderEl.value?.removeEventListener(key, boundListeners[key])
-			delete boundListeners[key]
-		}
-	}
-	if (props.binders && recorderEl.value) {
-		props.binders.unbind(recorderEl.value as HTMLInputElement)
-	}
-}
-const bindListeners = (): void => {
-	if (!props.recorder && !props.binders) {
-		throw new Error("Record is true but no recorder or binders props was passed")
-	}
-	if (props.recorder && props.binders) {
-		throw new Error("Recording is true and was passed both a recorder and a binders prop. Both cannot be used at the same time.")
-	}
-	isBound = true
-	if (props.recorder) {
-		for (const key of keys(props.recorder)) {
-			recorderEl.value?.addEventListener(key, props.recorder[key], { passive: false })
-			boundListeners[key] = props.recorder[key]
-		}
-	}
-	if (props.binders && recorderEl.value) {
-		props.binders.bind(recorderEl.value as HTMLInputElement)
-	}
-}
-
+  tempValue.value = modelValue.value;
+});
+const ariaLabel = useAriaLabel(props);
+const boundListeners = {};
+let isBound = false;
+const unbindListeners = () => {
+  if (!isBound) return;
+  isBound = false;
+  if (props.recorder) {
+    for (const key of keys(boundListeners)) {
+      recorderEl.value?.removeEventListener(key, boundListeners[key]);
+      delete boundListeners[key];
+    }
+  }
+  if (props.binders && recorderEl.value) {
+    props.binders.unbind(recorderEl.value);
+  }
+};
+const bindListeners = () => {
+  if (!props.recorder && !props.binders) {
+    throw new Error("Record is true but no recorder or binders props was passed");
+  }
+  if (props.recorder && props.binders) {
+    throw new Error("Recording is true and was passed both a recorder and a binders prop. Both cannot be used at the same time.");
+  }
+  isBound = true;
+  if (props.recorder) {
+    for (const key of keys(props.recorder)) {
+      recorderEl.value?.addEventListener(key, props.recorder[key], { passive: false });
+      boundListeners[key] = props.recorder[key];
+    }
+  }
+  if (props.binders && recorderEl.value) {
+    props.binders.bind(recorderEl.value);
+  }
+};
 watchPostEffect(() => {
-	if (!canEdit.value) {
-		unbindListeners()
-		recording.value = false
-		return
-	}
-	if (recording.value) {
-		bindListeners()
-	} else {
-		if ((props.recorder || props.binders) && isBound) {
-			unbindListeners()
-			// if we just blur the input then we can't shift+tab backwards
-			// this way we can go forwards or backwards without actually focusing since parentEl is not focusable
-			// parentEl.value?.focus()
-			emits("focus:parent")
-		}
-	}
-})
-
+  if (!canEdit.value) {
+    unbindListeners();
+    recording.value = false;
+    return;
+  }
+  if (recording.value) {
+    bindListeners();
+  } else {
+    if ((props.recorder || props.binders) && isBound) {
+      unbindListeners();
+      emits("focus:parent");
+    }
+  }
+});
 onBeforeUnmount(() => {
-	unbindListeners()
-})
+  unbindListeners();
+});
 onMounted(() => {
-	if (recording.value) {
-		bindListeners()
-	}
-})
-
-const handleBlurRecorder = (e: FocusEvent): void => {
-	if (!canEdit.value) return
-	if (props.recorder || props.binders) {
-		emits("recorder:blur", e)
-	}
-}
-
-const handleClickRecorder = (e: MouseEvent | KeyboardEvent, isSpaceKey: boolean = false): void => {
-	if (!canEdit.value) return
-	if (!recording.value) {
-		recorderEl.value?.focus()
-	}
-	// toggle if clicking on the recording indicator, otherwise only allow starting recording, so if needed, clicks can be recorded
-	if (props.recorder || props.binders) {
-		if (isSpaceKey) { return }
-		emits("recorder:click", { event: e as MouseEvent, indicator: recorderIndicatorEl.value! as HTMLElement, input: recorderEl.value! as HTMLInputElement })
-	}
-}
-
+  if (recording.value) {
+    bindListeners();
+  }
+});
+const handleBlurRecorder = (e) => {
+  if (!canEdit.value) return;
+  if (props.recorder || props.binders) {
+    emits("recorder:blur", e);
+  }
+};
+const handleClickRecorder = (e, isSpaceKey = false) => {
+  if (!canEdit.value) return;
+  if (!recording.value) {
+    recorderEl.value?.focus();
+  }
+  if (props.recorder || props.binders) {
+    if (isSpaceKey) {
+      return;
+    }
+    emits("recorder:click", { event: e, indicator: recorderIndicatorEl.value, input: recorderEl.value });
+  }
+};
 </script>
-<script lang="ts">
-type RealProps =
-& LinkableByIdProps
-& BaseInteractiveProps
-& LabelProps
-& {
-	border?: boolean
-	/** A value to display while recording, if none given the i18n `recorder.recording` key is used. */
-	recordingValue?: string
-	/** A title to display on the input div while recording. Is also used as the aria-description. */
-	recordingTitle?: string
-	/**
-	 * The recorder object is a series of event listeners to attach to the input div while recording is started. If you need to bind directly to the element, see the `binders` prop.
-	 *
-	 * The listeners are then unbound when recording is set to false again.
-	 *
-	 * Note that the component does not handle the setting of `recording` (unless the component is disabled), `modelValue`,  or `recordingValue` at all and has no mechanism for cancelling a recording. It is left to the recorder listeners and any `recorder:*` handlers to determine what to do.
-	 */
-	recorder?: undefined | Record<string, any>
-	/** This provides a way to manually attach/remove event listeners to/from the element. It is an alternative to the `recorder` prop, see it for more details. Both cannot be specified at the same time.*/
-	binders?: undefined | { bind: (el: HTMLElement) => void, unbind: (el: HTMLElement) => void }
-	/** The id of the element. If not provided, the id will be generated automatically. */
-	id?: string
-}
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
-	RealProps
-{ }
+<script>
+
 </script>

package/dist/runtime/components/LibRecorder/LibRecorder.vue.d.ts

@@ -0,0 +1,77 @@
+import { type HTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
+    border?: boolean;
+    /** A value to display while recording, if none given the i18n `recorder.recording` key is used. */
+    recordingValue?: string;
+    /** A title to display on the input div while recording. Is also used as the aria-description. */
+    recordingTitle?: string;
+    /**
+     * The recorder object is a series of event listeners to attach to the input div while recording is started. If you need to bind directly to the element, see the `binders` prop.
+     *
+     * The listeners are then unbound when recording is set to false again.
+     *
+     * Note that the component does not handle the setting of `recording` (unless the component is disabled), `modelValue`,  or `recordingValue` at all and has no mechanism for cancelling a recording. It is left to the recorder listeners and any `recorder:*` handlers to determine what to do.
+     */
+    recorder?: undefined | Record<string, any>;
+    /** This provides a way to manually attach/remove event listeners to/from the element. It is an alternative to the `recorder` prop, see it for more details. Both cannot be specified at the same time.*/
+    binders?: undefined | {
+        bind: (el: HTMLElement) => void;
+        unbind: (el: HTMLElement) => void;
+    };
+    /** The id of the element. If not provided, the id will be generated automatically. */
+    id?: string;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
+}
+declare const _default: import("vue").DefineComponent<Props & {
+    /**
+     * Puts the element into recording mode if true. See {@link props.recorder}.
+     */
+    recording?: boolean;
+    /** The final value of the recorder. For intermediate values while recording, pass a recorder and set an appropriate recording value. */
+    modelValue: string;
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    "update:recording": (value: boolean) => any;
+} & {
+    "recorder:blur": ($event: FocusEvent) => any;
+    "recorder:click": (args_0: {
+        event: MouseEvent | KeyboardEvent;
+        indicator: HTMLElement;
+        input: HTMLInputElement;
+    }) => any;
+    "focus:parent": () => any;
+}, string, import("vue").PublicProps, Readonly<Props & {
+    /**
+     * Puts the element into recording mode if true. See {@link props.recorder}.
+     */
+    recording?: boolean;
+    /** The final value of the recorder. For intermediate values while recording, pass a recorder and set an appropriate recording value. */
+    modelValue: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:recording"?: ((value: boolean) => any) | undefined;
+    "onRecorder:blur"?: (($event: FocusEvent) => any) | undefined;
+    "onRecorder:click"?: ((args_0: {
+        event: MouseEvent | KeyboardEvent;
+        indicator: HTMLElement;
+        input: HTMLInputElement;
+    }) => any) | undefined;
+    "onFocus:parent"?: (() => any) | undefined;
+}>, {
+    id: string;
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+    recordingTitle: string;
+    recorder: Record<string, any>;
+    binders: {
+        bind: (el: HTMLElement) => void;
+        unbind: (el: HTMLElement) => void;
+    };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/LibRoot/LibRoot.vue

@@ -2,125 +2,111 @@
 <div :id="id"
 	tabindex="-1"
 	:class="twMerge(
-		(showOutline ? 'group outlined outlined-visible' : '[&_*]:outline-hidden'),
-		darkMode && ' dark',
-		($attrs['wrapperAttrs'] as any)?.class
-	)"
-	v-bind="{ ...($attrs['wrapperAttrs']), attrs:undefined, class: undefined }"
+  showOutline ? 'group outlined outlined-visible' : '[&_*]:outline-hidden',
+  darkMode && ' dark',
+  $attrs['wrapperAttrs']?.class
+)"
+	v-bind="{ ...$attrs['wrapperAttrs'], attrs: void 0, class: void 0 }"
 	:ref="handleRef"
 >
 	<!-- id root is useful for teleports, so they are at the topmost level where they can still be styled -->
 	<!-- See TestControls for why the margins here -->
 	<div
 		id="root"
-		v-bind="{ ...$attrs.attrs, class: undefined, wrapperAttrs: undefined }"
-		:class="twMerge( `
+		v-bind="{ ...$attrs.attrs, class: void 0, wrapperAttrs: void 0 }"
+		:class="twMerge(
+  `
 			dark:bg-fg
 			dark:text-bg
 			bg-bg
 			text-fg
 		`,
-			testWrapperMode && `
+  testWrapperMode && `
 			px-10
 			pb-10
 		`,
-			!testWrapperMode && `
+  !testWrapperMode && `
 			min-h-dvh
 			flex
 			flex-col
 		`,
-			($attrs as any).attrs?.class)"
+  $attrs.attrs?.class
+)"
 	>
 		<TestControls v-if="testWrapperMode" :show-outline="showOutline"/>
+		<Notifications v-if="useNotifications && isClientSide"/>
 		<slot/>
 	</div>
 </div>
 </template>
 
-<script setup lang="ts">
-import { unreachable } from "@alanscodelog/utils/unreachable.js"
-import { type Theme } from "metamorphosis"
-import { type ComponentPublicInstance, computed, onBeforeUnmount, onMounted, ref, toRaw } from "vue"
-
-import { useAccesibilityOutline } from "../../composables/useAccesibilityOutline.js"
-import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
-import { useSetupDarkMode } from "../../composables/useSetupDarkMode.js"
-import { useSetupI18n } from "../../composables/useSetupI18n.js"
-import { useSetupLocale } from "../../composables/useSetupLocale.js"
-import { useShowDevOnlyKey } from "../../composables/useShowDevOnlyKey.js"
-import { theme as defaultTheme } from "../../theme.js"
-import { twMerge } from "../../utils/twMerge.js"
-import TestControls from "../TestControls/TestControls.vue"
-
-const $attrs = useDivideAttrs(["wrapper"])
-
-defineOptions({ name: "root", inheritAttrs: false, suspensible: false })
-const props = withDefaults(defineProps<{
-	theme?: Theme
-	outline?: boolean
-	forceOutline?: boolean
-	testWrapperMode?: boolean
-	id?: string
-	/** You can set a ref to the root element by passing :getRef="_ => el = _" */
-	getRef?: (el: HTMLElement | null) => void
-	/** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
-	isClientSide?: boolean
-	useBuiltinTranslations?: boolean
-}>(), {
-	theme: undefined,
-	testWrapperMode: false,
-	outline: true,
-	forceOutline: false,
-	id: "app",
-	getRef: undefined,
-	isClientSide: true,
-	useBuiltinTranslations: true
-})
-
-const el = ref<HTMLElement | null>(null)
-
-function handleRef(_: Element | ComponentPublicInstance | null): void {
-	if (_ !== null && !(_ instanceof HTMLElement)) unreachable()
-	el.value = _
-	props.getRef?.(_)
+<script setup>
+import { unreachable } from "@alanscodelog/utils/unreachable.js";
+import {} from "metamorphosis";
+import { computed, onBeforeUnmount, onMounted, ref, toRaw } from "vue";
+import { useAccesibilityOutline } from "../../composables/useAccesibilityOutline.js";
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
+import { useNotificationHandler } from "../../composables/useNotificationHandler.js";
+import { useSetupDarkMode } from "../../composables/useSetupDarkMode.js";
+import { useSetupI18n } from "../../composables/useSetupI18n.js";
+import { useSetupLocale } from "../../composables/useSetupLocale.js";
+import { useShowDevOnlyKey } from "../../composables/useShowDevOnlyKey.js";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js";
+import { theme as defaultTheme } from "../../theme.js";
+import { twMerge } from "../../utils/twMerge.js";
+import Notifications from "../LibNotifications/LibNotifications.vue";
+import TestControls from "../TestControls/TestControls.vue";
+const $attrs = useDivideAttrs(["wrapper"]);
+defineOptions({ name: "root", inheritAttrs: false, suspensible: false });
+const props = defineProps({
+  theme: { type: Object, required: false, default: void 0 },
+  outline: { type: Boolean, required: false, default: true },
+  forceOutline: { type: Boolean, required: false, default: false },
+  testWrapperMode: { type: Boolean, required: false, default: false },
+  id: { type: String, required: false, default: "app" },
+  getRef: { type: Function, required: false, default: void 0 },
+  isClientSide: { type: Boolean, required: false, default: true },
+  useBuiltinTranslations: { type: Boolean, required: false, default: true },
+  useNotifications: { type: Boolean, required: false, default: true },
+  notificationHandler: { type: Object, required: false, default: void 0 }
+});
+const el = ref(null);
+function handleRef(_) {
+  if (_ !== null && !(_ instanceof HTMLElement)) unreachable();
+  el.value = _;
+  props.getRef?.(_);
 }
-
-const autoOutline = useAccesibilityOutline(el).outline
-
-const showOutline = computed(() => (props.outline && autoOutline.value) || props.forceOutline)
-
-const theme = computed(() => props.theme ?? defaultTheme)
-const themeCb = (): void => {
-	toRaw(theme.value).attach(el.value!)
+if (props.useNotifications) {
+  const handler = props.notificationHandler ?? new NotificationHandler();
+  useNotificationHandler(handler, props.isClientSide);
 }
+const autoOutline = useAccesibilityOutline(el).outline;
+const showOutline = computed(() => props.outline && autoOutline.value || props.forceOutline);
+const theme = computed(() => props.theme ?? defaultTheme);
+const themeCb = () => {
+  toRaw(theme.value).attach(el.value);
+};
 if (props.isClientSide) {
-	onMounted(() => {
-		toRaw(theme.value).on("change", themeCb)
-		themeCb()
-	})
-	onBeforeUnmount(() => {
-		toRaw(theme.value).off("change", themeCb)
-	})
+  onMounted(() => {
+    toRaw(theme.value).on("change", themeCb);
+    themeCb();
+  });
+  onBeforeUnmount(() => {
+    toRaw(theme.value).off("change", themeCb);
+  });
 }
-
-const darkModeSetup = useSetupDarkMode({ isClientSide: props.isClientSide })
-
-const darkMode = darkModeSetup.darkMode
-
-useShowDevOnlyKey()
-
+const darkModeSetup = useSetupDarkMode({ isClientSide: props.isClientSide });
+const darkMode = darkModeSetup.darkMode;
+useShowDevOnlyKey();
 defineExpose({
-	darkMode: darkModeSetup,
-})
-
+  darkMode: darkModeSetup
+});
 if (props.useBuiltinTranslations) {
-	const { languageLocale } = useSetupLocale()
-	void useSetupI18n({
-		locale: languageLocale,
-		useBuiltinTranslations: true,
-		useDummyMessageSetWhileLoading: true,
-	})
+  const { languageLocale } = useSetupLocale();
+  void useSetupI18n({
+    locale: languageLocale,
+    useBuiltinTranslations: true,
+    useDummyMessageSetWhileLoading: true
+  });
 }
-
 </script>
-