@volverjs/ui-vue 0.0.3 → 0.0.5-beta.1

package/dist/components/VvDropdownAction/VvDropdownAction.es.js

@@ -0,0 +1,454 @@
+import { inject, defineComponent, ref, watch, computed, openBlock, createBlock, resolveDynamicComponent, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, provide, createElementBlock, toRefs, createVNode } from "vue";
+import "mitt";
+import { useElementHover, useFocus, useFocusWithin } from "@vueuse/core";
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+var Placement = /* @__PURE__ */ ((Placement2) => {
+  Placement2["topStart"] = "top-start";
+  Placement2["topEnd"] = "top-end";
+  Placement2["bottomStart"] = "bottom-start";
+  Placement2["bottomEnd"] = "bottom-end";
+  Placement2["leftStart"] = "left-start";
+  Placement2["leftEnd"] = "left-end";
+  Placement2["rightStart"] = "right-start";
+  Placement2["rightEnd"] = "right-end";
+  return Placement2;
+})(Placement || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["before"] = "before";
+  Position2["after"] = "after";
+  return Position2;
+})(Position || {});
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  ButtonType2["reset"] = "reset";
+  return ButtonType2;
+})(ButtonType || {});
+var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["nuxtLink"] = "nuxt-link";
+  ActionTag2["routerLink"] = "router-link";
+  ActionTag2["a"] = "a";
+  ActionTag2["button"] = "button";
+  return ActionTag2;
+})(ActionTag || {});
+var ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
+  ActionRoles2["button"] = "button";
+  ActionRoles2["link"] = "link";
+  ActionRoles2["menuitem"] = "menuitem";
+  return ActionRoles2;
+})(ActionRoles || {});
+var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
+  AnchorTarget2["_blank"] = "_blank";
+  AnchorTarget2["_self"] = "_self";
+  AnchorTarget2["_parent"] = "_parent";
+  AnchorTarget2["_top"] = "_top";
+  return AnchorTarget2;
+})(AnchorTarget || {});
+const INJECTION_KEY_VOLVER = Symbol.for("volver");
+const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for("dropdownTrigger");
+const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for("dropdownItem");
+const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for("dropdownAction");
+const LinkProps = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (value) => Object.values(AnchorTarget).includes(value)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+};
+const DisabledProps = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
+};
+const ActiveProps = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+};
+const PressedProps = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+};
+const LabelProps = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+};
+const ModifiersProps = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: [String, Array]
+};
+({
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
+  icon: { type: [String, Object] },
+  /**
+   * VvIcon position
+   */
+  iconPosition: {
+    type: String,
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
+  }
+});
+({
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
+    }
+  },
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String
+  },
+  /**
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
+   */
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
+  /**
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
+   */
+  shift: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /**
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
+   */
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
+  },
+  /**
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Close dropdown on click outside
+   */
+  autoClose: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+});
+const ActionProps = {
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
+};
+const VvActionEvents = ["click", "mouseover", "mouseleave"];
+const VvActionProps = ActionProps;
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
+}
+function useInjectedDropdownTrigger() {
+  return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
+}
+function useInjectedDropdownItem() {
+  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
+}
+function useInjectedDropdownAction() {
+  return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
+}
+const __default__$2 = {
+  name: "VvAction"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
+  props: VvActionProps,
+  emits: VvActionEvents,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const volver = useVolver();
+    const element = ref(null);
+    expose({ $el: element });
+    const {
+      reference: dropdownTriggerReference,
+      bus: dropdownEventBus,
+      aria: dropdownAria,
+      expanded: dropdownExpanded
+    } = useInjectedDropdownTrigger();
+    watch(
+      () => element.value,
+      (newValue) => {
+        if (dropdownTriggerReference) {
+          dropdownTriggerReference.value = newValue;
+        }
+      }
+    );
+    const pressed = computed(() => {
+      return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
+    });
+    const { role } = useInjectedDropdownAction();
+    const hasTag = computed(() => {
+      switch (true) {
+        case props.disabled:
+          return ActionTag.button;
+        case props.to !== void 0:
+          return (volver == null ? void 0 : volver.nuxt) ? ActionTag.nuxtLink : ActionTag.routerLink;
+        case props.href !== void 0:
+          return ActionTag.a;
+        default:
+          return ActionTag.button;
+      }
+    });
+    const hasProps = computed(() => {
+      const toReturn = {
+        ...dropdownAria == null ? void 0 : dropdownAria.value,
+        "aria-pressed": pressed.value ? true : void 0,
+        role
+      };
+      switch (hasTag.value) {
+        case ActionTag.a:
+          return {
+            ...toReturn,
+            href: props.href,
+            target: props.target,
+            rel: props.rel
+          };
+        case ActionTag.routerLink:
+        case ActionTag.nuxtLink:
+          return {
+            ...toReturn,
+            to: props.to,
+            target: props.target
+          };
+        default:
+          return {
+            ...toReturn,
+            type: props.type,
+            disabled: props.disabled
+          };
+      }
+    });
+    const onClick = (e) => {
+      if (props.disabled) {
+        e.preventDefault();
+        return;
+      }
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
+      emit("click", e);
+    };
+    const onMouseover = (e) => {
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
+      emit("mouseover", e);
+    };
+    const onMouseleave = (e) => {
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
+      emit("mouseleave", e);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
+        ref_key: "element",
+        ref: element,
+        class: {
+          active: _ctx.active,
+          pressed: unref(pressed),
+          disabled: _ctx.disabled
+        },
+        onClickPassive: onClick,
+        onMouseoverPassive: onMouseover,
+        onMouseleavePassive: onMouseleave
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(_ctx.label), 1)
+          ])
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+function useProvideDropdownAction({
+  expanded
+}) {
+  provide(INJECTION_KEY_DROPDOWN_ACTION, {
+    role: ActionRoles.menuitem,
+    expanded
+  });
+}
+const __default__$1 = {
+  name: "VvDropdownItem"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  setup(__props) {
+    const { role, expanded } = useInjectedDropdownItem();
+    const element = ref(null);
+    useProvideDropdownAction({ expanded });
+    const hovered = useElementHover(element);
+    const { focused } = useFocus(element);
+    const { focused: focusedWithin } = useFocusWithin(element);
+    watch(hovered, (newValue) => {
+      if (newValue) {
+        focused.value = true;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", mergeProps({ role: unref(role) }, {
+        ref_key: "element",
+        ref: element,
+        class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    return toReturn;
+  });
+}
+const __default__ = {
+  name: "VvDropdownAction"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: {
+    ...ActionProps,
+    ...ModifiersProps
+  },
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-dropdown-action", modifiers);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, null, {
+        default: withCtx(() => [
+          createVNode(_sfc_main$2, mergeProps({
+            disabled: _ctx.disabled,
+            pressed: _ctx.pressed,
+            active: _ctx.active,
+            type: _ctx.type,
+            to: _ctx.to,
+            href: _ctx.href,
+            target: _ctx.target,
+            rel: _ctx.rel
+          }, { class: unref(bemCssClasses) }), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, () => [
+                createTextVNode(toDisplayString(_ctx.label), 1)
+              ])
+            ]),
+            _: 3
+          }, 16, ["class"])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/VvDropdownAction/VvDropdownAction.umd.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownAction=t(e.vue,null,e.core)}(this,(function(e,t,o){"use strict";var r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),n=(e=>(e.before="before",e.after="after",e))(n||{}),l=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(l||{}),u=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(u||{}),a=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(a||{}),s=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(s||{});const i=Symbol.for("volver"),d=Symbol.for("dropdownTrigger"),c=Symbol.for("dropdownItem"),f=Symbol.for("dropdownAction"),p={to:{type:[String,Object]},href:String,target:{type:String,validator:e=>Object.values(s).includes(e)},rel:{type:String,default:"noopener noreferrer"}},v={disabled:Boolean},m={active:Boolean},b={pressed:Boolean},y={label:[String,Number]},g={modifiers:[String,Array]};n.before,r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const k={...v,...y,...b,...m,...p,type:{type:String,default:l.button,validator:e=>Object.values(l).includes(e)}},h=k;const x=e.defineComponent({name:"VvAction",props:h,emits:["click","mouseover","mouseleave"],setup(t,{expose:o,emit:r}){const n=t,l=e.inject(i),a=e.ref(null);o({$el:a});const{reference:s,bus:c,aria:p,expanded:v}=e.inject(d,{});e.watch((()=>a.value),(e=>{s&&(s.value=e)}));const m=e.computed((()=>n.pressed||(null==v?void 0:v.value))),{role:b}=e.inject(f,{}),y=e.computed((()=>{switch(!0){case n.disabled:return u.button;case void 0!==n.to:return(null==l?void 0:l.nuxt)?u.nuxtLink:u.routerLink;case void 0!==n.href:return u.a;default:return u.button}})),g=e.computed((()=>{const e={...null==p?void 0:p.value,"aria-pressed":!!m.value||void 0,role:b};switch(y.value){case u.a:return{...e,href:n.href,target:n.target,rel:n.rel};case u.routerLink:case u.nuxtLink:return{...e,to:n.to,target:n.target};default:return{...e,type:n.type,disabled:n.disabled}}})),k=e=>{n.disabled?e.preventDefault():(null==c||c.emit("click",e),r("click",e))},h=e=>{null==c||c.emit("mouseover",e),r("mouseover",e)},x=e=>{null==c||c.emit("mouseleave",e),r("mouseleave",e)};return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(y)),e.mergeProps(e.unref(g),{ref_key:"element",ref:a,class:{active:t.active,pressed:e.unref(m),disabled:t.disabled},onClickPassive:k,onMouseoverPassive:h,onMouseleavePassive:x}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}});const B=e.defineComponent({name:"VvDropdownItem",setup(t){const{role:r,expanded:n}=e.inject(c,{}),l=e.ref(null);!function({expanded:t}){e.provide(f,{role:a.menuitem,expanded:t})}({expanded:n});const u=o.useElementHover(l),{focused:s}=o.useFocus(l),{focused:i}=o.useFocusWithin(l);return e.watch(u,(e=>{e&&(s.value=!0)})),(t,o)=>(e.openBlock(),e.createElementBlock("li",e.mergeProps({role:e.unref(r)},{ref_key:"element",ref:l,class:["vv-dropdown__item",{"focus-visible":e.unref(s)||e.unref(i)}]}),[e.renderSlot(t.$slots,"default")],16))}});return e.defineComponent({name:"VvDropdownAction",props:{...k,...g},setup(t){const o=t,{modifiers:r}=e.toRefs(o),n=function(t,o,r){return e.computed((()=>{const n={[t]:!0},l="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(n[`${t}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((o=>{n[`${t}--${o}`]=e.unref(r.value[o])})),n}))}("vv-dropdown-action",r);return(t,o)=>(e.openBlock(),e.createBlock(B,null,{default:e.withCtx((()=>[e.createVNode(x,e.mergeProps({disabled:t.disabled,pressed:t.pressed,active:t.active,type:t.type,to:t.to,href:t.href,target:t.target,rel:t.rel},{class:e.unref(n)}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"])])),_:3}))}})}));

package/dist/components/VvDropdownItem/VvDropdownItem.es.js

@@ -1,23 +1,53 @@
-import { defineComponent as l, openBlock as d, createElementBlock as f, mergeProps as i, unref as t, renderSlot as m } from "vue";
-const p = {
+import { inject, provide, defineComponent, ref, watch, openBlock, createElementBlock, mergeProps, unref, renderSlot } from "vue";
+import "mitt";
+import { useElementHover, useFocus, useFocusWithin } from "@vueuse/core";
+var ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
+  ActionRoles2["button"] = "button";
+  ActionRoles2["link"] = "link";
+  ActionRoles2["menuitem"] = "menuitem";
+  return ActionRoles2;
+})(ActionRoles || {});
+const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for("dropdownItem");
+const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for("dropdownAction");
+function useInjectedDropdownItem() {
+  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
+}
+function useProvideDropdownAction({
+  expanded
+}) {
+  provide(INJECTION_KEY_DROPDOWN_ACTION, {
+    role: ActionRoles.menuitem,
+    expanded
+  });
+}
+const __default__ = {
   name: "VvDropdownItem"
-}, h = /* @__PURE__ */ l({
-  ...p,
-  setup(a) {
-    const { role: s, expanded: r } = useInjectedDropdownItem(), e = ref(null);
-    useProvideDropdownAction({ expanded: r });
-    const c = useElementHover(e), { focused: n } = useFocus(e), { focused: u } = useFocusWithin(e);
-    return watch(c, (o) => {
-      o && (n.value = !0);
-    }), (o, _) => (d(), f("li", i({ role: t(s) }, {
-      ref_key: "element",
-      ref: e,
-      class: ["vv-dropdown__item", { "focus-visible": t(n) || t(u) }]
-    }), [
-      m(o.$slots, "default")
-    ], 16));
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  setup(__props) {
+    const { role, expanded } = useInjectedDropdownItem();
+    const element = ref(null);
+    useProvideDropdownAction({ expanded });
+    const hovered = useElementHover(element);
+    const { focused } = useFocus(element);
+    const { focused: focusedWithin } = useFocusWithin(element);
+    watch(hovered, (newValue) => {
+      if (newValue) {
+        focused.value = true;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", mergeProps({ role: unref(role) }, {
+        ref_key: "element",
+        ref: element,
+        class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
   }
 });
 export {
-  h as default
+  _sfc_main as default
 };

package/dist/components/VvDropdownItem/VvDropdownItem.umd.js

@@ -1 +1 @@
-(function(e,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("vue")):typeof define=="function"&&define.amd?define(["vue"],n):(e=typeof globalThis<"u"?globalThis:e||self,e.VvDropdownItem=n(e.vue))})(this,function(e){"use strict";const n={name:"VvDropdownItem"};return e.defineComponent({...n,setup(i){const{role:r,expanded:d}=useInjectedDropdownItem(),o=ref(null);useProvideDropdownAction({expanded:d});const u=useElementHover(o),{focused:s}=useFocus(o),{focused:c}=useFocusWithin(o);return watch(u,t=>{t&&(s.value=!0)}),(t,l)=>(e.openBlock(),e.createElementBlock("li",e.mergeProps({role:e.unref(r)},{ref_key:"element",ref:o,class:["vv-dropdown__item",{"focus-visible":e.unref(s)||e.unref(c)}]}),[e.renderSlot(t.$slots,"default")],16))}})});
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownItem=o(e.vue,null,e.core)}(this,(function(e,o,n){"use strict";var t=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(t||{});const u=Symbol.for("dropdownItem"),r=Symbol.for("dropdownAction");return e.defineComponent({name:"VvDropdownItem",setup(o){const{role:i,expanded:d}=e.inject(u,{}),l=e.ref(null);!function({expanded:o}){e.provide(r,{role:t.menuitem,expanded:o})}({expanded:d});const s=n.useElementHover(l),{focused:f}=n.useFocus(l),{focused:c}=n.useFocusWithin(l);return e.watch(s,(e=>{e&&(f.value=!0)})),(o,n)=>(e.openBlock(),e.createElementBlock("li",e.mergeProps({role:e.unref(i)},{ref_key:"element",ref:l,class:["vv-dropdown__item",{"focus-visible":e.unref(f)||e.unref(c)}]}),[e.renderSlot(o.$slots,"default")],16))}})}));