@davincihealthcare/elty-design-system-vue 1.72.0 → 1.72.1

package/dist/ElAccordion.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElAccordion.vue.cjs2.js","sources":["../../src/ElAccordion.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elAccordionColors = ['primary', 'secondary'] as const;\nexport type ElAccordionColor = (typeof elAccordionColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { ref, computed } from 'vue';\nimport ElIcon from '@/ElIcon.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    label: string;\n    open?: boolean;\n    color?: ElAccordionColor;\n  }>(),\n  {\n    color: 'primary',\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'update:open', open?: boolean): void;\n}>();\n\nconst openLocal = ref<boolean>(false);\n\nconst openProxy = computed<boolean>({\n  set(open: boolean) {\n    emit('update:open', open);\n    openLocal.value = open;\n  },\n  get(): boolean {\n    return props.open || openLocal.value;\n  },\n});\n</script>\n\n<template>\n  <div class=\"relative rounded-md bg-white overflow-hidden\">\n    <button class=\"w-full h-10\" @click.prevent=\"openProxy = !openProxy\">\n      <div\n        class=\"h-full w-full flex justify-between items-center rounded-md cursor-pointer px-2 select-none active:bg-neutral-pressed active:text-neutral-darker hover:bg-neutral-hover\"\n        :class=\"[\n          color === 'primary' && !openProxy && 'bg-neutral-surface text-neutral-darker',\n          color === 'primary' && openProxy && 'bg-neutral-active text-primary-active',\n          color === 'secondary' && !openProxy && 'bg-neutral-surface text-neutral-darker',\n          color === 'secondary' && openProxy && 'bg-neutral-active text-secondary-active',\n        ]\"\n      >\n        <span class=\"text-ellipsis whitespace-nowrap overflow-hidden text-sm font-medium\">{{ label }}</span>\n        <ElIcon solid :name=\"openProxy ? 'ChevronUpIcon' : 'ChevronDownIcon'\" class=\"w-4 h-4\" />\n      </div>\n    </button>\n\n    <div class=\"overflow-hidden w-full\">\n      <Transition\n        enter-active-class=\"ease-out\"\n        enter-from-class=\"-translate-y-full\"\n        enter-to-class=\"translate-y-0\"\n        leave-active-class=\"ease-in\"\n        leave-from-class=\"translate-y-0\"\n        leave-to-class=\"-translate-y-full\"\n        :duration=\"100\"\n      >\n        <div v-show=\"openProxy\" class=\"transform duration-100 w-full flex flex-col gap-2 p-2 bg-white\">\n          <slot />\n        </div>\n      </Transition>\n    </div>\n  </div>\n</template>\n"],"names":["elAccordionColors","props","__props","emit","__emit","openLocal","ref","openProxy","computed","open"],"mappings":"4ZACaA,EAAoB,CAAC,UAAW,WAAW,mJAQxD,MAAMC,EAAQC,EAWRC,EAAOC,EAIPC,EAAYC,MAAa,EAAK,EAE9BC,EAAYC,EAAAA,SAAkB,CAClC,IAAIC,EAAe,CACjBN,EAAK,cAAeM,CAAI,EACxBJ,EAAU,MAAQI,CACpB,EACA,KAAe,CACN,OAAAR,EAAM,MAAQI,EAAU,KACjC,CAAA,CACD"}
+{"version":3,"file":"ElAccordion.vue.cjs2.js","sources":["../src/ElAccordion.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elAccordionColors = ['primary', 'secondary'] as const;\nexport type ElAccordionColor = (typeof elAccordionColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { ref, computed } from 'vue';\nimport ElIcon from '@/ElIcon.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    label: string;\n    open?: boolean;\n    color?: ElAccordionColor;\n  }>(),\n  {\n    color: 'primary',\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'update:open', open?: boolean): void;\n}>();\n\nconst openLocal = ref<boolean>(false);\n\nconst openProxy = computed<boolean>({\n  set(open: boolean) {\n    emit('update:open', open);\n    openLocal.value = open;\n  },\n  get(): boolean {\n    return props.open || openLocal.value;\n  },\n});\n</script>\n\n<template>\n  <div class=\"relative rounded-md bg-white overflow-hidden\">\n    <button class=\"w-full h-10\" @click.prevent=\"openProxy = !openProxy\">\n      <div\n        class=\"h-full w-full flex justify-between items-center rounded-md cursor-pointer px-2 select-none active:bg-neutral-pressed active:text-neutral-darker hover:bg-neutral-hover\"\n        :class=\"[\n          color === 'primary' && !openProxy && 'bg-neutral-surface text-neutral-darker',\n          color === 'primary' && openProxy && 'bg-neutral-active text-primary-active',\n          color === 'secondary' && !openProxy && 'bg-neutral-surface text-neutral-darker',\n          color === 'secondary' && openProxy && 'bg-neutral-active text-secondary-active',\n        ]\"\n      >\n        <span class=\"text-ellipsis whitespace-nowrap overflow-hidden text-sm font-medium\">{{ label }}</span>\n        <ElIcon solid :name=\"openProxy ? 'ChevronUpIcon' : 'ChevronDownIcon'\" class=\"w-4 h-4\" />\n      </div>\n    </button>\n\n    <div class=\"overflow-hidden w-full\">\n      <Transition\n        enter-active-class=\"ease-out\"\n        enter-from-class=\"-translate-y-full\"\n        enter-to-class=\"translate-y-0\"\n        leave-active-class=\"ease-in\"\n        leave-from-class=\"translate-y-0\"\n        leave-to-class=\"-translate-y-full\"\n        :duration=\"100\"\n      >\n        <div v-show=\"openProxy\" class=\"transform duration-100 w-full flex flex-col gap-2 p-2 bg-white\">\n          <slot />\n        </div>\n      </Transition>\n    </div>\n  </div>\n</template>\n"],"names":["elAccordionColors","props","__props","emit","__emit","openLocal","ref","openProxy","computed","open"],"mappings":"4ZACaA,EAAoB,CAAC,UAAW,WAAW,mJAQxD,MAAMC,EAAQC,EAWRC,EAAOC,EAIPC,EAAYC,MAAa,EAAK,EAE9BC,EAAYC,EAAAA,SAAkB,CAClC,IAAIC,EAAe,CACjBN,EAAK,cAAeM,CAAI,EACxBJ,EAAU,MAAQI,CACpB,EACA,KAAe,CACN,OAAAR,EAAM,MAAQI,EAAU,KACjC,CAAA,CACD"}

package/dist/ElAccordion.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElAccordion.vue.esm2.js","sources":["../../src/ElAccordion.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elAccordionColors = ['primary', 'secondary'] as const;\nexport type ElAccordionColor = (typeof elAccordionColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { ref, computed } from 'vue';\nimport ElIcon from '@/ElIcon.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    label: string;\n    open?: boolean;\n    color?: ElAccordionColor;\n  }>(),\n  {\n    color: 'primary',\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'update:open', open?: boolean): void;\n}>();\n\nconst openLocal = ref<boolean>(false);\n\nconst openProxy = computed<boolean>({\n  set(open: boolean) {\n    emit('update:open', open);\n    openLocal.value = open;\n  },\n  get(): boolean {\n    return props.open || openLocal.value;\n  },\n});\n</script>\n\n<template>\n  <div class=\"relative rounded-md bg-white overflow-hidden\">\n    <button class=\"w-full h-10\" @click.prevent=\"openProxy = !openProxy\">\n      <div\n        class=\"h-full w-full flex justify-between items-center rounded-md cursor-pointer px-2 select-none active:bg-neutral-pressed active:text-neutral-darker hover:bg-neutral-hover\"\n        :class=\"[\n          color === 'primary' && !openProxy && 'bg-neutral-surface text-neutral-darker',\n          color === 'primary' && openProxy && 'bg-neutral-active text-primary-active',\n          color === 'secondary' && !openProxy && 'bg-neutral-surface text-neutral-darker',\n          color === 'secondary' && openProxy && 'bg-neutral-active text-secondary-active',\n        ]\"\n      >\n        <span class=\"text-ellipsis whitespace-nowrap overflow-hidden text-sm font-medium\">{{ label }}</span>\n        <ElIcon solid :name=\"openProxy ? 'ChevronUpIcon' : 'ChevronDownIcon'\" class=\"w-4 h-4\" />\n      </div>\n    </button>\n\n    <div class=\"overflow-hidden w-full\">\n      <Transition\n        enter-active-class=\"ease-out\"\n        enter-from-class=\"-translate-y-full\"\n        enter-to-class=\"translate-y-0\"\n        leave-active-class=\"ease-in\"\n        leave-from-class=\"translate-y-0\"\n        leave-to-class=\"-translate-y-full\"\n        :duration=\"100\"\n      >\n        <div v-show=\"openProxy\" class=\"transform duration-100 w-full flex flex-col gap-2 p-2 bg-white\">\n          <slot />\n        </div>\n      </Transition>\n    </div>\n  </div>\n</template>\n"],"names":["elAccordionColors","props","__props","emit","__emit","openLocal","ref","openProxy","computed","open"],"mappings":"sjBACaA,EAAoB,CAAC,UAAW,WAAW,mIAQxD,MAAMC,EAAQC,EAWRC,EAAOC,EAIPC,EAAYC,EAAa,EAAK,EAE9BC,EAAYC,EAAkB,CAClC,IAAIC,EAAe,CACjBN,EAAK,cAAeM,CAAI,EACxBJ,EAAU,MAAQI,CACpB,EACA,KAAe,CACN,OAAAR,EAAM,MAAQI,EAAU,KACjC,CAAA,CACD"}
+{"version":3,"file":"ElAccordion.vue.esm2.js","sources":["../src/ElAccordion.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elAccordionColors = ['primary', 'secondary'] as const;\nexport type ElAccordionColor = (typeof elAccordionColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { ref, computed } from 'vue';\nimport ElIcon from '@/ElIcon.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    label: string;\n    open?: boolean;\n    color?: ElAccordionColor;\n  }>(),\n  {\n    color: 'primary',\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'update:open', open?: boolean): void;\n}>();\n\nconst openLocal = ref<boolean>(false);\n\nconst openProxy = computed<boolean>({\n  set(open: boolean) {\n    emit('update:open', open);\n    openLocal.value = open;\n  },\n  get(): boolean {\n    return props.open || openLocal.value;\n  },\n});\n</script>\n\n<template>\n  <div class=\"relative rounded-md bg-white overflow-hidden\">\n    <button class=\"w-full h-10\" @click.prevent=\"openProxy = !openProxy\">\n      <div\n        class=\"h-full w-full flex justify-between items-center rounded-md cursor-pointer px-2 select-none active:bg-neutral-pressed active:text-neutral-darker hover:bg-neutral-hover\"\n        :class=\"[\n          color === 'primary' && !openProxy && 'bg-neutral-surface text-neutral-darker',\n          color === 'primary' && openProxy && 'bg-neutral-active text-primary-active',\n          color === 'secondary' && !openProxy && 'bg-neutral-surface text-neutral-darker',\n          color === 'secondary' && openProxy && 'bg-neutral-active text-secondary-active',\n        ]\"\n      >\n        <span class=\"text-ellipsis whitespace-nowrap overflow-hidden text-sm font-medium\">{{ label }}</span>\n        <ElIcon solid :name=\"openProxy ? 'ChevronUpIcon' : 'ChevronDownIcon'\" class=\"w-4 h-4\" />\n      </div>\n    </button>\n\n    <div class=\"overflow-hidden w-full\">\n      <Transition\n        enter-active-class=\"ease-out\"\n        enter-from-class=\"-translate-y-full\"\n        enter-to-class=\"translate-y-0\"\n        leave-active-class=\"ease-in\"\n        leave-from-class=\"translate-y-0\"\n        leave-to-class=\"-translate-y-full\"\n        :duration=\"100\"\n      >\n        <div v-show=\"openProxy\" class=\"transform duration-100 w-full flex flex-col gap-2 p-2 bg-white\">\n          <slot />\n        </div>\n      </Transition>\n    </div>\n  </div>\n</template>\n"],"names":["elAccordionColors","props","__props","emit","__emit","openLocal","ref","openProxy","computed","open"],"mappings":"sjBACaA,EAAoB,CAAC,UAAW,WAAW,mIAQxD,MAAMC,EAAQC,EAWRC,EAAOC,EAIPC,EAAYC,EAAa,EAAK,EAE9BC,EAAYC,EAAkB,CAClC,IAAIC,EAAe,CACjBN,EAAK,cAAeM,CAAI,EACxBJ,EAAU,MAAQI,CACpB,EACA,KAAe,CACN,OAAAR,EAAM,MAAQI,EAAU,KACjC,CAAA,CACD"}

package/dist/ElActionButton.vue.cjs2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");;/* empty css               */require("./polyfills.cjs.js");require("vee-validate");require("../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.cjs.js");require("../node_modules/lodash/lodash.cjs.js");require("./tailwind.plugin.cjs.js");require("../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js");const o=require("./ElIcon.vue.cjs2.js"),c=require("./ElBadge.vue.cjs2.js");require("./forms/ElInputText.vue.cjs2.js");require("./forms/ElInputCheckbox.vue.cjs2.js");require("./forms/ElInputDate.vue.cjs2.js");require("./forms/ElInputFile.vue.cjs2.js");require("./forms/ElInputMeasureUnit.vue.cjs2.js");require("./forms/ElInputNumber.vue.cjs2.js");require("./forms/ElInputPhone.vue.cjs2.js");require("./forms/ElInputSelect.vue.cjs2.js");require("./forms/ElInputTextarea.vue.cjs2.js");require("./ElToast.vue.cjs2.js");require("./forms/ElInputRadioButton.vue.cjs2.js");require("../node_modules/swiper/shared/swiper-core.cjs.js");;/* empty css                                     */;/* empty css                                                 */require("./forms/ElInputSearch.vue.cjs2.js");const d=["data-cy"],p={key:2,class:"h-4 ml-1 relative flex justify-center items-start"},m=["base","l"],g=["primary","secondary"],v=["default","hover","pressed","active"],b=e.defineComponent({__name:"ElActionButton",props:{id:{},label:{},size:{default:"base"},color:{default:"primary"},status:{default:"default"},leadingIcon:{},trailingIcon:{},badge:{},onClick:{}},emits:["click"],setup(l,{emit:n}){const r=l,u=()=>{a.value=!0,i("click",r.onClick)},a=e.ref(r.status==="pressed"),i=n;return(t,s)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker focus:bg-neutral-pressed focus:ring-neutral-pressed",{"text-sm h-8":r.size==="base","text-base h-10":r.size==="l","border-transparent text-neutral-darker":r.status==="default","border-transparent text-neutral-darker bg-neutral-hover":r.status==="hover","border-transparent bg-neutral-pressed ":(a.value||r.status==="pressed")&&r.status!=="active"&&r.status!=="default"&&r.status!=="hover","text-primary-active bg-primary-light-active border-primary-active":r.status==="active"&&r.color==="primary","text-secondary-active bg-secondary-light-active border-secondary-active":r.status==="active"&&r.color==="secondary"}]),"data-cy":r.label?r.label.trim().replace(/\s+/g,""):"default-action-button",onMouseDown:s[0]||(s[0]=f=>a.value=!0),onClick:u},[t.leadingIcon?(e.openBlock(),e.createBlock(e.unref(o.default),e.mergeProps({key:0},t.leadingIcon,{class:{"h-5 w-5":t.size==="base","h-6 w-6":t.size==="l"}}),null,16,["class"])):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(r.label),1),t.trailingIcon?(e.openBlock(),e.createBlock(e.unref(o.default),e.mergeProps({key:1},t.trailingIcon,{class:{"h-5 w-5":t.size==="base","h-6 w-6":t.size==="l"}}),null,16,["class"])):e.createCommentVNode("",!0),t.badge?(e.openBlock(),e.createElementBlock("div",p,[e.createVNode(e.unref(c.default),e.normalizeProps(e.guardReactiveProps(t.badge)),null,16)])):e.createCommentVNode("",!0)],42,d))}});exports.default=b;exports.elActionButtonColors=g;exports.elActionButtonSizes=m;exports.elActionButtonStatus=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");;/* empty css               */require("./polyfills.cjs.js");require("vee-validate");require("./node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.cjs.js");require("./node_modules/lodash/lodash.cjs.js");require("./tailwind.plugin.cjs.js");require("./node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js");const o=require("./ElIcon.vue.cjs2.js"),c=require("./ElBadge.vue.cjs2.js");require("./forms/ElInputText.vue.cjs2.js");require("./forms/ElInputCheckbox.vue.cjs2.js");require("./forms/ElInputDate.vue.cjs2.js");require("./forms/ElInputFile.vue.cjs2.js");require("./forms/ElInputMeasureUnit.vue.cjs2.js");require("./forms/ElInputNumber.vue.cjs2.js");require("./forms/ElInputPhone.vue.cjs2.js");require("./forms/ElInputSelect.vue.cjs2.js");require("./forms/ElInputTextarea.vue.cjs2.js");require("./ElToast.vue.cjs2.js");require("./forms/ElInputRadioButton.vue.cjs2.js");require("./node_modules/swiper/shared/swiper-core.cjs.js");;/* empty css                                    */;/* empty css                                                */require("./forms/ElInputSearch.vue.cjs2.js");const d=["data-cy"],p={key:2,class:"h-4 ml-1 relative flex justify-center items-start"},m=["base","l"],g=["primary","secondary"],v=["default","hover","pressed","active"],b=e.defineComponent({__name:"ElActionButton",props:{id:{},label:{},size:{default:"base"},color:{default:"primary"},status:{default:"default"},leadingIcon:{},trailingIcon:{},badge:{},onClick:{}},emits:["click"],setup(l,{emit:n}){const r=l,u=()=>{a.value=!0,i("click",r.onClick)},a=e.ref(r.status==="pressed"),i=n;return(t,s)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker focus:bg-neutral-pressed focus:ring-neutral-pressed",{"text-sm h-8":r.size==="base","text-base h-10":r.size==="l","border-transparent text-neutral-darker":r.status==="default","border-transparent text-neutral-darker bg-neutral-hover":r.status==="hover","border-transparent bg-neutral-pressed ":(a.value||r.status==="pressed")&&r.status!=="active"&&r.status!=="default"&&r.status!=="hover","text-primary-active bg-primary-light-active border-primary-active":r.status==="active"&&r.color==="primary","text-secondary-active bg-secondary-light-active border-secondary-active":r.status==="active"&&r.color==="secondary"}]),"data-cy":r.label?r.label.trim().replace(/\s+/g,""):"default-action-button",onMouseDown:s[0]||(s[0]=f=>a.value=!0),onClick:u},[t.leadingIcon?(e.openBlock(),e.createBlock(e.unref(o.default),e.mergeProps({key:0},t.leadingIcon,{class:{"h-5 w-5":t.size==="base","h-6 w-6":t.size==="l"}}),null,16,["class"])):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(r.label),1),t.trailingIcon?(e.openBlock(),e.createBlock(e.unref(o.default),e.mergeProps({key:1},t.trailingIcon,{class:{"h-5 w-5":t.size==="base","h-6 w-6":t.size==="l"}}),null,16,["class"])):e.createCommentVNode("",!0),t.badge?(e.openBlock(),e.createElementBlock("div",p,[e.createVNode(e.unref(c.default),e.normalizeProps(e.guardReactiveProps(t.badge)),null,16)])):e.createCommentVNode("",!0)],42,d))}});exports.default=b;exports.elActionButtonColors=g;exports.elActionButtonSizes=m;exports.elActionButtonStatus=v;
 //# sourceMappingURL=ElActionButton.vue.cjs2.js.map

package/dist/ElActionButton.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElActionButton.vue.cjs2.js","sources":["../../src/ElActionButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elActionButtonSizes = ['base', 'l'] as const;\nexport type ElActionButtonSizes = (typeof elActionButtonSizes)[number];\n\nexport const elActionButtonColors = ['primary', 'secondary'] as const;\nexport type ElActionButtonColors = (typeof elActionButtonColors)[number];\n\nexport const elActionButtonStatus = ['default', 'hover', 'pressed', 'active'] as const;\nexport type ElActionButtonStatus = (typeof elActionButtonStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ElBadge, ElIcon } from '.';\nimport { ref } from 'vue';\n\nexport interface ActionButtonProps {\n  id?: string;\n  label: string;\n  size: ElActionButtonSizes;\n  color: ElActionButtonColors;\n  status: ElActionButtonStatus;\n  leadingIcon?: InstanceType<typeof ElIcon>['$props'];\n  trailingIcon?: InstanceType<typeof ElIcon>['$props'];\n  badge?: InstanceType<typeof ElBadge>['$props'];\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n  size: 'base',\n  color: 'primary',\n  status: 'default',\n});\n\nconst onClick = () => {\n  isPressed.value = true;\n  $emits('click', props.onClick);\n};\n\nconst isPressed = ref<boolean>(props.status === 'pressed');\nconst $emits = defineEmits(['click']);\n</script>\n\n<template>\n  <button\n    class=\"w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker focus:bg-neutral-pressed focus:ring-neutral-pressed\"\n    :class=\"{\n      'text-sm h-8': props.size === 'base',\n      'text-base h-10': props.size === 'l',\n      'border-transparent text-neutral-darker': props.status === 'default',\n      'border-transparent text-neutral-darker bg-neutral-hover': props.status === 'hover',\n      'border-transparent bg-neutral-pressed ':\n        (isPressed || props.status === 'pressed') && props.status !== 'active' && props.status !== 'default' && props.status !== 'hover',\n      'text-primary-active bg-primary-light-active border-primary-active': props.status === 'active' && props.color === 'primary',\n      'text-secondary-active bg-secondary-light-active border-secondary-active': props.status === 'active' && props.color === 'secondary',\n    }\"\n    :data-cy=\"props.label ? props.label.trim().replace(/\\s+/g, '') : 'default-action' + '-button'\"\n    @mouse-down=\"isPressed = true\"\n    @click=\"onClick\"\n  >\n    <ElIcon\n      v-if=\"leadingIcon\"\n      v-bind=\"leadingIcon\"\n      :class=\"{\n        'h-5 w-5': size === 'base',\n        'h-6 w-6': size === 'l',\n      }\"\n    />\n    <span> {{ props.label }}</span>\n    <ElIcon\n      v-if=\"trailingIcon\"\n      v-bind=\"trailingIcon\"\n      :class=\"{\n        'h-5 w-5': size === 'base',\n        'h-6 w-6': size === 'l',\n      }\"\n    />\n    <div v-if=\"badge\" class=\"h-4 ml-1 relative flex justify-center items-start\">\n      <ElBadge v-bind=\"badge\" />\n    </div>\n  </button>\n</template>\n"],"names":["elActionButtonSizes","elActionButtonColors","elActionButtonStatus","props","__props","onClick","isPressed","$emits","ref","__emit"],"mappings":"s0CACaA,EAAsB,CAAC,OAAQ,GAAG,EAGlCC,EAAuB,CAAC,UAAW,WAAW,EAG9CC,EAAuB,CAAC,UAAW,QAAS,UAAW,QAAQ,sOAoB5E,MAAMC,EAAQC,EAMRC,EAAU,IAAM,CACpBC,EAAU,MAAQ,GACXC,EAAA,QAASJ,EAAM,OAAO,CAAA,EAGzBG,EAAYE,EAAA,IAAaL,EAAM,SAAW,SAAS,EACnDI,EAASE"}
+{"version":3,"file":"ElActionButton.vue.cjs2.js","sources":["../src/ElActionButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elActionButtonSizes = ['base', 'l'] as const;\nexport type ElActionButtonSizes = (typeof elActionButtonSizes)[number];\n\nexport const elActionButtonColors = ['primary', 'secondary'] as const;\nexport type ElActionButtonColors = (typeof elActionButtonColors)[number];\n\nexport const elActionButtonStatus = ['default', 'hover', 'pressed', 'active'] as const;\nexport type ElActionButtonStatus = (typeof elActionButtonStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ElBadge, ElIcon } from '.';\nimport { ref } from 'vue';\n\nexport interface ActionButtonProps {\n  id?: string;\n  label: string;\n  size: ElActionButtonSizes;\n  color: ElActionButtonColors;\n  status: ElActionButtonStatus;\n  leadingIcon?: InstanceType<typeof ElIcon>['$props'];\n  trailingIcon?: InstanceType<typeof ElIcon>['$props'];\n  badge?: InstanceType<typeof ElBadge>['$props'];\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n  size: 'base',\n  color: 'primary',\n  status: 'default',\n});\n\nconst onClick = () => {\n  isPressed.value = true;\n  $emits('click', props.onClick);\n};\n\nconst isPressed = ref<boolean>(props.status === 'pressed');\nconst $emits = defineEmits(['click']);\n</script>\n\n<template>\n  <button\n    class=\"w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker focus:bg-neutral-pressed focus:ring-neutral-pressed\"\n    :class=\"{\n      'text-sm h-8': props.size === 'base',\n      'text-base h-10': props.size === 'l',\n      'border-transparent text-neutral-darker': props.status === 'default',\n      'border-transparent text-neutral-darker bg-neutral-hover': props.status === 'hover',\n      'border-transparent bg-neutral-pressed ':\n        (isPressed || props.status === 'pressed') && props.status !== 'active' && props.status !== 'default' && props.status !== 'hover',\n      'text-primary-active bg-primary-light-active border-primary-active': props.status === 'active' && props.color === 'primary',\n      'text-secondary-active bg-secondary-light-active border-secondary-active': props.status === 'active' && props.color === 'secondary',\n    }\"\n    :data-cy=\"props.label ? props.label.trim().replace(/\\s+/g, '') : 'default-action' + '-button'\"\n    @mouse-down=\"isPressed = true\"\n    @click=\"onClick\"\n  >\n    <ElIcon\n      v-if=\"leadingIcon\"\n      v-bind=\"leadingIcon\"\n      :class=\"{\n        'h-5 w-5': size === 'base',\n        'h-6 w-6': size === 'l',\n      }\"\n    />\n    <span> {{ props.label }}</span>\n    <ElIcon\n      v-if=\"trailingIcon\"\n      v-bind=\"trailingIcon\"\n      :class=\"{\n        'h-5 w-5': size === 'base',\n        'h-6 w-6': size === 'l',\n      }\"\n    />\n    <div v-if=\"badge\" class=\"h-4 ml-1 relative flex justify-center items-start\">\n      <ElBadge v-bind=\"badge\" />\n    </div>\n  </button>\n</template>\n"],"names":["elActionButtonSizes","elActionButtonColors","elActionButtonStatus","props","__props","onClick","isPressed","$emits","ref","__emit"],"mappings":"g0CACaA,EAAsB,CAAC,OAAQ,GAAG,EAGlCC,EAAuB,CAAC,UAAW,WAAW,EAG9CC,EAAuB,CAAC,UAAW,QAAS,UAAW,QAAQ,sOAoB5E,MAAMC,EAAQC,EAMRC,EAAU,IAAM,CACpBC,EAAU,MAAQ,GACXC,EAAA,QAASJ,EAAM,OAAO,CAAA,EAGzBG,EAAYE,EAAA,IAAaL,EAAM,SAAW,SAAS,EACnDI,EAASE"}

package/dist/ElActionButton.vue.esm2.js

@@ -1,2 +1,2 @@
-import{defineComponent as f,ref as g,openBlock as r,createElementBlock as n,normalizeClass as v,createBlock as l,unref as a,mergeProps as c,createCommentVNode as s,createElementVNode as y,toDisplayString as h,createVNode as k,normalizeProps as z,guardReactiveProps as B}from"vue";/* empty css             */import"./polyfills.esm.js";import"vee-validate";import"../node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.esm.js";import"../node_modules/lodash/lodash.esm.js";import"./tailwind.plugin.esm.js";import"../node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.esm.js";import u from"./ElIcon.vue.esm2.js";import C from"./ElBadge.vue.esm2.js";import"./forms/ElInputText.vue.esm2.js";import"./forms/ElInputCheckbox.vue.esm2.js";import"./forms/ElInputDate.vue.esm2.js";import"./forms/ElInputFile.vue.esm2.js";import"./forms/ElInputMeasureUnit.vue.esm2.js";import"./forms/ElInputNumber.vue.esm2.js";import"./forms/ElInputPhone.vue.esm2.js";import"./forms/ElInputSelect.vue.esm2.js";import"./forms/ElInputTextarea.vue.esm2.js";import"./ElToast.vue.esm2.js";import"./forms/ElInputRadioButton.vue.esm2.js";import"../node_modules/swiper/shared/swiper-core.esm.js";/* empty css                                   *//* empty css                                               */import"./forms/ElInputSearch.vue.esm2.js";const w=["data-cy"],I={key:2,class:"h-4 ml-1 relative flex justify-center items-start"},Y=["base","l"],Z=["primary","secondary"],ee=["default","hover","pressed","active"],te=f({__name:"ElActionButton",props:{id:{},label:{},size:{default:"base"},color:{default:"primary"},status:{default:"default"},leadingIcon:{},trailingIcon:{},badge:{},onClick:{}},emits:["click"],setup(p,{emit:m}){const e=p,d=()=>{o.value=!0,b("click",e.onClick)},o=g(e.status==="pressed"),b=m;return(t,i)=>(r(),n("button",{class:v(["w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker focus:bg-neutral-pressed focus:ring-neutral-pressed",{"text-sm h-8":e.size==="base","text-base h-10":e.size==="l","border-transparent text-neutral-darker":e.status==="default","border-transparent text-neutral-darker bg-neutral-hover":e.status==="hover","border-transparent bg-neutral-pressed ":(o.value||e.status==="pressed")&&e.status!=="active"&&e.status!=="default"&&e.status!=="hover","text-primary-active bg-primary-light-active border-primary-active":e.status==="active"&&e.color==="primary","text-secondary-active bg-secondary-light-active border-secondary-active":e.status==="active"&&e.color==="secondary"}]),"data-cy":e.label?e.label.trim().replace(/\s+/g,""):"default-action-button",onMouseDown:i[0]||(i[0]=A=>o.value=!0),onClick:d},[t.leadingIcon?(r(),l(a(u),c({key:0},t.leadingIcon,{class:{"h-5 w-5":t.size==="base","h-6 w-6":t.size==="l"}}),null,16,["class"])):s("",!0),y("span",null,h(e.label),1),t.trailingIcon?(r(),l(a(u),c({key:1},t.trailingIcon,{class:{"h-5 w-5":t.size==="base","h-6 w-6":t.size==="l"}}),null,16,["class"])):s("",!0),t.badge?(r(),n("div",I,[k(a(C),z(B(t.badge)),null,16)])):s("",!0)],42,w))}});export{te as default,Z as elActionButtonColors,Y as elActionButtonSizes,ee as elActionButtonStatus};
+import{defineComponent as f,ref as g,openBlock as r,createElementBlock as n,normalizeClass as v,createBlock as l,unref as a,mergeProps as c,createCommentVNode as s,createElementVNode as y,toDisplayString as h,createVNode as k,normalizeProps as z,guardReactiveProps as B}from"vue";/* empty css             */import"./polyfills.esm.js";import"vee-validate";import"./node_modules/codice-fiscale-js/dist/codice.fiscale.commonjs2.esm.js";import"./node_modules/lodash/lodash.esm.js";import"./tailwind.plugin.esm.js";import"./node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.esm.js";import u from"./ElIcon.vue.esm2.js";import C from"./ElBadge.vue.esm2.js";import"./forms/ElInputText.vue.esm2.js";import"./forms/ElInputCheckbox.vue.esm2.js";import"./forms/ElInputDate.vue.esm2.js";import"./forms/ElInputFile.vue.esm2.js";import"./forms/ElInputMeasureUnit.vue.esm2.js";import"./forms/ElInputNumber.vue.esm2.js";import"./forms/ElInputPhone.vue.esm2.js";import"./forms/ElInputSelect.vue.esm2.js";import"./forms/ElInputTextarea.vue.esm2.js";import"./ElToast.vue.esm2.js";import"./forms/ElInputRadioButton.vue.esm2.js";import"./node_modules/swiper/shared/swiper-core.esm.js";/* empty css                                  *//* empty css                                              */import"./forms/ElInputSearch.vue.esm2.js";const w=["data-cy"],I={key:2,class:"h-4 ml-1 relative flex justify-center items-start"},Y=["base","l"],Z=["primary","secondary"],ee=["default","hover","pressed","active"],te=f({__name:"ElActionButton",props:{id:{},label:{},size:{default:"base"},color:{default:"primary"},status:{default:"default"},leadingIcon:{},trailingIcon:{},badge:{},onClick:{}},emits:["click"],setup(p,{emit:m}){const e=p,d=()=>{o.value=!0,b("click",e.onClick)},o=g(e.status==="pressed"),b=m;return(t,i)=>(r(),n("button",{class:v(["w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker focus:bg-neutral-pressed focus:ring-neutral-pressed",{"text-sm h-8":e.size==="base","text-base h-10":e.size==="l","border-transparent text-neutral-darker":e.status==="default","border-transparent text-neutral-darker bg-neutral-hover":e.status==="hover","border-transparent bg-neutral-pressed ":(o.value||e.status==="pressed")&&e.status!=="active"&&e.status!=="default"&&e.status!=="hover","text-primary-active bg-primary-light-active border-primary-active":e.status==="active"&&e.color==="primary","text-secondary-active bg-secondary-light-active border-secondary-active":e.status==="active"&&e.color==="secondary"}]),"data-cy":e.label?e.label.trim().replace(/\s+/g,""):"default-action-button",onMouseDown:i[0]||(i[0]=A=>o.value=!0),onClick:d},[t.leadingIcon?(r(),l(a(u),c({key:0},t.leadingIcon,{class:{"h-5 w-5":t.size==="base","h-6 w-6":t.size==="l"}}),null,16,["class"])):s("",!0),y("span",null,h(e.label),1),t.trailingIcon?(r(),l(a(u),c({key:1},t.trailingIcon,{class:{"h-5 w-5":t.size==="base","h-6 w-6":t.size==="l"}}),null,16,["class"])):s("",!0),t.badge?(r(),n("div",I,[k(a(C),z(B(t.badge)),null,16)])):s("",!0)],42,w))}});export{te as default,Z as elActionButtonColors,Y as elActionButtonSizes,ee as elActionButtonStatus};
 //# sourceMappingURL=ElActionButton.vue.esm2.js.map

package/dist/ElActionButton.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElActionButton.vue.esm2.js","sources":["../../src/ElActionButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elActionButtonSizes = ['base', 'l'] as const;\nexport type ElActionButtonSizes = (typeof elActionButtonSizes)[number];\n\nexport const elActionButtonColors = ['primary', 'secondary'] as const;\nexport type ElActionButtonColors = (typeof elActionButtonColors)[number];\n\nexport const elActionButtonStatus = ['default', 'hover', 'pressed', 'active'] as const;\nexport type ElActionButtonStatus = (typeof elActionButtonStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ElBadge, ElIcon } from '.';\nimport { ref } from 'vue';\n\nexport interface ActionButtonProps {\n  id?: string;\n  label: string;\n  size: ElActionButtonSizes;\n  color: ElActionButtonColors;\n  status: ElActionButtonStatus;\n  leadingIcon?: InstanceType<typeof ElIcon>['$props'];\n  trailingIcon?: InstanceType<typeof ElIcon>['$props'];\n  badge?: InstanceType<typeof ElBadge>['$props'];\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n  size: 'base',\n  color: 'primary',\n  status: 'default',\n});\n\nconst onClick = () => {\n  isPressed.value = true;\n  $emits('click', props.onClick);\n};\n\nconst isPressed = ref<boolean>(props.status === 'pressed');\nconst $emits = defineEmits(['click']);\n</script>\n\n<template>\n  <button\n    class=\"w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker focus:bg-neutral-pressed focus:ring-neutral-pressed\"\n    :class=\"{\n      'text-sm h-8': props.size === 'base',\n      'text-base h-10': props.size === 'l',\n      'border-transparent text-neutral-darker': props.status === 'default',\n      'border-transparent text-neutral-darker bg-neutral-hover': props.status === 'hover',\n      'border-transparent bg-neutral-pressed ':\n        (isPressed || props.status === 'pressed') && props.status !== 'active' && props.status !== 'default' && props.status !== 'hover',\n      'text-primary-active bg-primary-light-active border-primary-active': props.status === 'active' && props.color === 'primary',\n      'text-secondary-active bg-secondary-light-active border-secondary-active': props.status === 'active' && props.color === 'secondary',\n    }\"\n    :data-cy=\"props.label ? props.label.trim().replace(/\\s+/g, '') : 'default-action' + '-button'\"\n    @mouse-down=\"isPressed = true\"\n    @click=\"onClick\"\n  >\n    <ElIcon\n      v-if=\"leadingIcon\"\n      v-bind=\"leadingIcon\"\n      :class=\"{\n        'h-5 w-5': size === 'base',\n        'h-6 w-6': size === 'l',\n      }\"\n    />\n    <span> {{ props.label }}</span>\n    <ElIcon\n      v-if=\"trailingIcon\"\n      v-bind=\"trailingIcon\"\n      :class=\"{\n        'h-5 w-5': size === 'base',\n        'h-6 w-6': size === 'l',\n      }\"\n    />\n    <div v-if=\"badge\" class=\"h-4 ml-1 relative flex justify-center items-start\">\n      <ElBadge v-bind=\"badge\" />\n    </div>\n  </button>\n</template>\n"],"names":["elActionButtonSizes","elActionButtonColors","elActionButtonStatus","props","__props","onClick","isPressed","$emits","ref","__emit"],"mappings":"u5CACaA,EAAsB,CAAC,OAAQ,GAAG,EAGlCC,EAAuB,CAAC,UAAW,WAAW,EAG9CC,GAAuB,CAAC,UAAW,QAAS,UAAW,QAAQ,uNAoB5E,MAAMC,EAAQC,EAMRC,EAAU,IAAM,CACpBC,EAAU,MAAQ,GACXC,EAAA,QAASJ,EAAM,OAAO,CAAA,EAGzBG,EAAYE,EAAaL,EAAM,SAAW,SAAS,EACnDI,EAASE"}
+{"version":3,"file":"ElActionButton.vue.esm2.js","sources":["../src/ElActionButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elActionButtonSizes = ['base', 'l'] as const;\nexport type ElActionButtonSizes = (typeof elActionButtonSizes)[number];\n\nexport const elActionButtonColors = ['primary', 'secondary'] as const;\nexport type ElActionButtonColors = (typeof elActionButtonColors)[number];\n\nexport const elActionButtonStatus = ['default', 'hover', 'pressed', 'active'] as const;\nexport type ElActionButtonStatus = (typeof elActionButtonStatus)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ElBadge, ElIcon } from '.';\nimport { ref } from 'vue';\n\nexport interface ActionButtonProps {\n  id?: string;\n  label: string;\n  size: ElActionButtonSizes;\n  color: ElActionButtonColors;\n  status: ElActionButtonStatus;\n  leadingIcon?: InstanceType<typeof ElIcon>['$props'];\n  trailingIcon?: InstanceType<typeof ElIcon>['$props'];\n  badge?: InstanceType<typeof ElBadge>['$props'];\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ActionButtonProps>(), {\n  size: 'base',\n  color: 'primary',\n  status: 'default',\n});\n\nconst onClick = () => {\n  isPressed.value = true;\n  $emits('click', props.onClick);\n};\n\nconst isPressed = ref<boolean>(props.status === 'pressed');\nconst $emits = defineEmits(['click']);\n</script>\n\n<template>\n  <button\n    class=\"w-fit border flex flex-1 justify-center items-center gap-1 font-semibold leading-6 rounded-lg px-3 hover:bg-neutral-hover hover:text-neutral-darker focus:bg-neutral-pressed focus:ring-neutral-pressed\"\n    :class=\"{\n      'text-sm h-8': props.size === 'base',\n      'text-base h-10': props.size === 'l',\n      'border-transparent text-neutral-darker': props.status === 'default',\n      'border-transparent text-neutral-darker bg-neutral-hover': props.status === 'hover',\n      'border-transparent bg-neutral-pressed ':\n        (isPressed || props.status === 'pressed') && props.status !== 'active' && props.status !== 'default' && props.status !== 'hover',\n      'text-primary-active bg-primary-light-active border-primary-active': props.status === 'active' && props.color === 'primary',\n      'text-secondary-active bg-secondary-light-active border-secondary-active': props.status === 'active' && props.color === 'secondary',\n    }\"\n    :data-cy=\"props.label ? props.label.trim().replace(/\\s+/g, '') : 'default-action' + '-button'\"\n    @mouse-down=\"isPressed = true\"\n    @click=\"onClick\"\n  >\n    <ElIcon\n      v-if=\"leadingIcon\"\n      v-bind=\"leadingIcon\"\n      :class=\"{\n        'h-5 w-5': size === 'base',\n        'h-6 w-6': size === 'l',\n      }\"\n    />\n    <span> {{ props.label }}</span>\n    <ElIcon\n      v-if=\"trailingIcon\"\n      v-bind=\"trailingIcon\"\n      :class=\"{\n        'h-5 w-5': size === 'base',\n        'h-6 w-6': size === 'l',\n      }\"\n    />\n    <div v-if=\"badge\" class=\"h-4 ml-1 relative flex justify-center items-start\">\n      <ElBadge v-bind=\"badge\" />\n    </div>\n  </button>\n</template>\n"],"names":["elActionButtonSizes","elActionButtonColors","elActionButtonStatus","props","__props","onClick","isPressed","$emits","ref","__emit"],"mappings":"i5CACaA,EAAsB,CAAC,OAAQ,GAAG,EAGlCC,EAAuB,CAAC,UAAW,WAAW,EAG9CC,GAAuB,CAAC,UAAW,QAAS,UAAW,QAAQ,uNAoB5E,MAAMC,EAAQC,EAMRC,EAAU,IAAM,CACpBC,EAAU,MAAQ,GACXC,EAAA,QAASJ,EAAM,OAAO,CAAA,EAGzBG,EAAYE,EAAaL,EAAM,SAAW,SAAS,EACnDI,EAASE"}

package/dist/ElAvatar.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElAvatar.vue.cjs2.js","sources":["../../src/ElAvatar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elAvatarSizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\nexport type ElAvatarSize = (typeof elAvatarSizes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue';\n\nconst props = withDefaults(\n  defineProps<{\n    picture?: string;\n    size: ElAvatarSize;\n    label?: string;\n  }>(),\n  {\n    picture: undefined,\n    size: 'md',\n    label: undefined,\n  },\n);\n\nconst initials = computed(() => {\n  if (!props.label) return '';\n  const trimmedFullName = props.label.trim();\n  let initialNames = '';\n  initialNames += trimmedFullName.trim().charAt(0);\n  const lastSurnameFirstChar = trimmedFullName.lastIndexOf(' ');\n  initialNames += trimmedFullName.charAt(lastSurnameFirstChar === -1 ? lastSurnameFirstChar + 2 : lastSurnameFirstChar + 1);\n  return initialNames.toUpperCase();\n});\n</script>\n\n<template>\n  <div v-if=\"picture\">\n    <img\n      alt=\"avatar\"\n      class=\"rounded-full object-cover\"\n      :class=\"{\n        'w-36 h-36 text-5xl': size === 'xl',\n        'w-20 h-20 text-3xl': size === 'lg',\n        'w-14 h-14 text-2xl': size === 'md',\n        'w-10 h-10 text-base': size === 'sm',\n        'w-8 h-8 text-sm': size === 'xs',\n        'w-5 h-5 text-xs': size === 'xxs',\n      }\"\n      :src=\"picture\"\n    />\n  </div>\n  <div\n    v-else-if=\"props.label\"\n    class=\"rounded-full bg-brandBlue-100 text-neutral-darker flex justify-center items-center\"\n    :class=\"{\n      'w-36 h-36 text-5xl': size === 'xl',\n      'w-20 h-20 text-3xl': size === 'lg',\n      'w-14 h-14 text-2xl': size === 'md',\n      'w-10 h-10 text-base': size === 'sm',\n      'w-8 h-8 text-sm': size === 'xs',\n      'w-5 h-5 text-xs': size === 'xxs',\n    }\"\n  >\n    {{ initials }}\n  </div>\n</template>\n"],"names":["elAvatarSizes","props","__props","initials","computed","trimmedFullName","initialNames","lastSurnameFirstChar"],"mappings":"uJACaA,EAAgB,CAAC,MAAO,KAAM,KAAM,KAAM,KAAM,IAAI,8HAOjE,MAAMC,EAAQC,EAaRC,EAAWC,EAAAA,SAAS,IAAM,CAC9B,GAAI,CAACH,EAAM,MAAc,MAAA,GACnB,MAAAI,EAAkBJ,EAAM,MAAM,KAAK,EACzC,IAAIK,EAAe,GACnBA,GAAgBD,EAAgB,KAAO,EAAA,OAAO,CAAC,EACzC,MAAAE,EAAuBF,EAAgB,YAAY,GAAG,EAC5D,OAAAC,GAAgBD,EAAgB,OAAOE,IAAyB,GAAKA,EAAuB,EAAIA,EAAuB,CAAC,EACjHD,EAAa,aAAY,CACjC"}
+{"version":3,"file":"ElAvatar.vue.cjs2.js","sources":["../src/ElAvatar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elAvatarSizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\nexport type ElAvatarSize = (typeof elAvatarSizes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue';\n\nconst props = withDefaults(\n  defineProps<{\n    picture?: string;\n    size: ElAvatarSize;\n    label?: string;\n  }>(),\n  {\n    picture: undefined,\n    size: 'md',\n    label: undefined,\n  },\n);\n\nconst initials = computed(() => {\n  if (!props.label) return '';\n  const trimmedFullName = props.label.trim();\n  let initialNames = '';\n  initialNames += trimmedFullName.trim().charAt(0);\n  const lastSurnameFirstChar = trimmedFullName.lastIndexOf(' ');\n  initialNames += trimmedFullName.charAt(lastSurnameFirstChar === -1 ? lastSurnameFirstChar + 2 : lastSurnameFirstChar + 1);\n  return initialNames.toUpperCase();\n});\n</script>\n\n<template>\n  <div v-if=\"picture\">\n    <img\n      alt=\"avatar\"\n      class=\"rounded-full object-cover\"\n      :class=\"{\n        'w-36 h-36 text-5xl': size === 'xl',\n        'w-20 h-20 text-3xl': size === 'lg',\n        'w-14 h-14 text-2xl': size === 'md',\n        'w-10 h-10 text-base': size === 'sm',\n        'w-8 h-8 text-sm': size === 'xs',\n        'w-5 h-5 text-xs': size === 'xxs',\n      }\"\n      :src=\"picture\"\n    />\n  </div>\n  <div\n    v-else-if=\"props.label\"\n    class=\"rounded-full bg-brandBlue-100 text-neutral-darker flex justify-center items-center\"\n    :class=\"{\n      'w-36 h-36 text-5xl': size === 'xl',\n      'w-20 h-20 text-3xl': size === 'lg',\n      'w-14 h-14 text-2xl': size === 'md',\n      'w-10 h-10 text-base': size === 'sm',\n      'w-8 h-8 text-sm': size === 'xs',\n      'w-5 h-5 text-xs': size === 'xxs',\n    }\"\n  >\n    {{ initials }}\n  </div>\n</template>\n"],"names":["elAvatarSizes","props","__props","initials","computed","trimmedFullName","initialNames","lastSurnameFirstChar"],"mappings":"uJACaA,EAAgB,CAAC,MAAO,KAAM,KAAM,KAAM,KAAM,IAAI,8HAOjE,MAAMC,EAAQC,EAaRC,EAAWC,EAAAA,SAAS,IAAM,CAC9B,GAAI,CAACH,EAAM,MAAc,MAAA,GACnB,MAAAI,EAAkBJ,EAAM,MAAM,KAAK,EACzC,IAAIK,EAAe,GACnBA,GAAgBD,EAAgB,KAAO,EAAA,OAAO,CAAC,EACzC,MAAAE,EAAuBF,EAAgB,YAAY,GAAG,EAC5D,OAAAC,GAAgBD,EAAgB,OAAOE,IAAyB,GAAKA,EAAuB,EAAIA,EAAuB,CAAC,EACjHD,EAAa,aAAY,CACjC"}

package/dist/ElAvatar.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElAvatar.vue.esm2.js","sources":["../../src/ElAvatar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elAvatarSizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\nexport type ElAvatarSize = (typeof elAvatarSizes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue';\n\nconst props = withDefaults(\n  defineProps<{\n    picture?: string;\n    size: ElAvatarSize;\n    label?: string;\n  }>(),\n  {\n    picture: undefined,\n    size: 'md',\n    label: undefined,\n  },\n);\n\nconst initials = computed(() => {\n  if (!props.label) return '';\n  const trimmedFullName = props.label.trim();\n  let initialNames = '';\n  initialNames += trimmedFullName.trim().charAt(0);\n  const lastSurnameFirstChar = trimmedFullName.lastIndexOf(' ');\n  initialNames += trimmedFullName.charAt(lastSurnameFirstChar === -1 ? lastSurnameFirstChar + 2 : lastSurnameFirstChar + 1);\n  return initialNames.toUpperCase();\n});\n</script>\n\n<template>\n  <div v-if=\"picture\">\n    <img\n      alt=\"avatar\"\n      class=\"rounded-full object-cover\"\n      :class=\"{\n        'w-36 h-36 text-5xl': size === 'xl',\n        'w-20 h-20 text-3xl': size === 'lg',\n        'w-14 h-14 text-2xl': size === 'md',\n        'w-10 h-10 text-base': size === 'sm',\n        'w-8 h-8 text-sm': size === 'xs',\n        'w-5 h-5 text-xs': size === 'xxs',\n      }\"\n      :src=\"picture\"\n    />\n  </div>\n  <div\n    v-else-if=\"props.label\"\n    class=\"rounded-full bg-brandBlue-100 text-neutral-darker flex justify-center items-center\"\n    :class=\"{\n      'w-36 h-36 text-5xl': size === 'xl',\n      'w-20 h-20 text-3xl': size === 'lg',\n      'w-14 h-14 text-2xl': size === 'md',\n      'w-10 h-10 text-base': size === 'sm',\n      'w-8 h-8 text-sm': size === 'xs',\n      'w-5 h-5 text-xs': size === 'xxs',\n    }\"\n  >\n    {{ initials }}\n  </div>\n</template>\n"],"names":["elAvatarSizes","props","__props","initials","computed","trimmedFullName","initialNames","lastSurnameFirstChar"],"mappings":"8MACaA,EAAgB,CAAC,MAAO,KAAM,KAAM,KAAM,KAAM,IAAI,8GAOjE,MAAMC,EAAQC,EAaRC,EAAWC,EAAS,IAAM,CAC9B,GAAI,CAACH,EAAM,MAAc,MAAA,GACnB,MAAAI,EAAkBJ,EAAM,MAAM,KAAK,EACzC,IAAIK,EAAe,GACnBA,GAAgBD,EAAgB,KAAO,EAAA,OAAO,CAAC,EACzC,MAAAE,EAAuBF,EAAgB,YAAY,GAAG,EAC5D,OAAAC,GAAgBD,EAAgB,OAAOE,IAAyB,GAAKA,EAAuB,EAAIA,EAAuB,CAAC,EACjHD,EAAa,aAAY,CACjC"}
+{"version":3,"file":"ElAvatar.vue.esm2.js","sources":["../src/ElAvatar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elAvatarSizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\nexport type ElAvatarSize = (typeof elAvatarSizes)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue';\n\nconst props = withDefaults(\n  defineProps<{\n    picture?: string;\n    size: ElAvatarSize;\n    label?: string;\n  }>(),\n  {\n    picture: undefined,\n    size: 'md',\n    label: undefined,\n  },\n);\n\nconst initials = computed(() => {\n  if (!props.label) return '';\n  const trimmedFullName = props.label.trim();\n  let initialNames = '';\n  initialNames += trimmedFullName.trim().charAt(0);\n  const lastSurnameFirstChar = trimmedFullName.lastIndexOf(' ');\n  initialNames += trimmedFullName.charAt(lastSurnameFirstChar === -1 ? lastSurnameFirstChar + 2 : lastSurnameFirstChar + 1);\n  return initialNames.toUpperCase();\n});\n</script>\n\n<template>\n  <div v-if=\"picture\">\n    <img\n      alt=\"avatar\"\n      class=\"rounded-full object-cover\"\n      :class=\"{\n        'w-36 h-36 text-5xl': size === 'xl',\n        'w-20 h-20 text-3xl': size === 'lg',\n        'w-14 h-14 text-2xl': size === 'md',\n        'w-10 h-10 text-base': size === 'sm',\n        'w-8 h-8 text-sm': size === 'xs',\n        'w-5 h-5 text-xs': size === 'xxs',\n      }\"\n      :src=\"picture\"\n    />\n  </div>\n  <div\n    v-else-if=\"props.label\"\n    class=\"rounded-full bg-brandBlue-100 text-neutral-darker flex justify-center items-center\"\n    :class=\"{\n      'w-36 h-36 text-5xl': size === 'xl',\n      'w-20 h-20 text-3xl': size === 'lg',\n      'w-14 h-14 text-2xl': size === 'md',\n      'w-10 h-10 text-base': size === 'sm',\n      'w-8 h-8 text-sm': size === 'xs',\n      'w-5 h-5 text-xs': size === 'xxs',\n    }\"\n  >\n    {{ initials }}\n  </div>\n</template>\n"],"names":["elAvatarSizes","props","__props","initials","computed","trimmedFullName","initialNames","lastSurnameFirstChar"],"mappings":"8MACaA,EAAgB,CAAC,MAAO,KAAM,KAAM,KAAM,KAAM,IAAI,8GAOjE,MAAMC,EAAQC,EAaRC,EAAWC,EAAS,IAAM,CAC9B,GAAI,CAACH,EAAM,MAAc,MAAA,GACnB,MAAAI,EAAkBJ,EAAM,MAAM,KAAK,EACzC,IAAIK,EAAe,GACnBA,GAAgBD,EAAgB,KAAO,EAAA,OAAO,CAAC,EACzC,MAAAE,EAAuBF,EAAgB,YAAY,GAAG,EAC5D,OAAAC,GAAgBD,EAAgB,OAAOE,IAAyB,GAAKA,EAAuB,EAAIA,EAAuB,CAAC,EACjHD,EAAa,aAAY,CACjC"}

package/dist/ElBadge.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElBadge.vue.cjs2.js","sources":["../../src/ElBadge.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elBadgeColors = ['primary', 'secondary', 'red'] as const;\nexport type ElBadgeColors = (typeof elBadgeColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\ndefineProps<{\n  value?: string;\n  color: ElBadgeColors;\n}>();\n</script>\n\n<template>\n  <span\n    class=\"absolute flex h-2 min-w-2 items-center justify-center overflow-hidden rounded-full p-[2px] text-[0.375rem] font-medium leading-4 text-white\"\n    :class=\"{\n      'bg-primary-active': color === 'primary',\n      'bg-secondary-active': color === 'secondary',\n      'bg-red-500': color === 'red',\n    }\"\n    >{{ value ?? '' }}</span\n  >\n</template>\n"],"names":["elBadgeColors"],"mappings":"mIACaA,EAAgB,CAAC,UAAW,YAAa,KAAK"}
+{"version":3,"file":"ElBadge.vue.cjs2.js","sources":["../src/ElBadge.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elBadgeColors = ['primary', 'secondary', 'red'] as const;\nexport type ElBadgeColors = (typeof elBadgeColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\ndefineProps<{\n  value?: string;\n  color: ElBadgeColors;\n}>();\n</script>\n\n<template>\n  <span\n    class=\"absolute flex h-2 min-w-2 items-center justify-center overflow-hidden rounded-full p-[2px] text-[0.375rem] font-medium leading-4 text-white\"\n    :class=\"{\n      'bg-primary-active': color === 'primary',\n      'bg-secondary-active': color === 'secondary',\n      'bg-red-500': color === 'red',\n    }\"\n    >{{ value ?? '' }}</span\n  >\n</template>\n"],"names":["elBadgeColors"],"mappings":"mIACaA,EAAgB,CAAC,UAAW,YAAa,KAAK"}

package/dist/ElBadge.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElBadge.vue.esm2.js","sources":["../../src/ElBadge.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elBadgeColors = ['primary', 'secondary', 'red'] as const;\nexport type ElBadgeColors = (typeof elBadgeColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\ndefineProps<{\n  value?: string;\n  color: ElBadgeColors;\n}>();\n</script>\n\n<template>\n  <span\n    class=\"absolute flex h-2 min-w-2 items-center justify-center overflow-hidden rounded-full p-[2px] text-[0.375rem] font-medium leading-4 text-white\"\n    :class=\"{\n      'bg-primary-active': color === 'primary',\n      'bg-secondary-active': color === 'secondary',\n      'bg-red-500': color === 'red',\n    }\"\n    >{{ value ?? '' }}</span\n  >\n</template>\n"],"names":["elBadgeColors"],"mappings":"sHACO,MAAMA,EAAgB,CAAC,UAAW,YAAa,KAAK"}
+{"version":3,"file":"ElBadge.vue.esm2.js","sources":["../src/ElBadge.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elBadgeColors = ['primary', 'secondary', 'red'] as const;\nexport type ElBadgeColors = (typeof elBadgeColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\ndefineProps<{\n  value?: string;\n  color: ElBadgeColors;\n}>();\n</script>\n\n<template>\n  <span\n    class=\"absolute flex h-2 min-w-2 items-center justify-center overflow-hidden rounded-full p-[2px] text-[0.375rem] font-medium leading-4 text-white\"\n    :class=\"{\n      'bg-primary-active': color === 'primary',\n      'bg-secondary-active': color === 'secondary',\n      'bg-red-500': color === 'red',\n    }\"\n    >{{ value ?? '' }}</span\n  >\n</template>\n"],"names":["elBadgeColors"],"mappings":"sHACO,MAAMA,EAAgB,CAAC,UAAW,YAAa,KAAK"}

package/dist/ElBubbleChat.vue.cjs2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("./ElAvatar.vue.cjs2.js"),B=require("./ElFile.vue.cjs2.js"),C=require("./ElIcon.vue.cjs2.js"),E=require("./forms/ElInputCheckbox.vue.cjs2.js"),M=require("../node_modules/lodash/lodash.cjs.js"),V=require("./ElItem.vue.cjs2.js"),N={class:"flex flex-col gap-2 w-fit"},S={class:"flex gap-3"},z={key:0,class:"text-neutral-lighter text-xs font-medium"},j=["src"],I={class:"flex w-full flex-col gap-1"},W={key:0},q={key:1},$=["filled","outlined"],A=["brand-blue","brand-green","indigo","purple","pink"],D=e.defineComponent({__name:"ElBubbleChat",props:{appearence:{},color:{default:"brand-blue"},time:{default:void 0},message:{default:void 0},automaticMessage:{default:void 0},headline:{default:void 0},avatar:{default:void 0},file:{default:void 0},picture:{default:void 0},loading:{type:Boolean},error:{type:Boolean},multiSelect:{type:Boolean},selected:{type:Boolean},maxWidth:{default:60},contextMenuItems:{default:void 0}},emits:["row-selection","open-file","open-picture"],setup(v,{emit:h}){const o=v,u=h,d=e.ref(!1),r=e.ref(0),n=e.ref(0),k=l=>{d.value=!0,r.value=l.pageX,n.value=l.pageY},i=e.ref(),s=e.computed(()=>i.value?{width:i.value.clientWidth,height:i.value.clientHeight}:{width:0,height:0}),p=e.computed(()=>({width:window.innerWidth,height:window.innerHeight})),g=e.computed(()=>r.value+s.value.width>p.value.width?r.value-s.value.width:r.value),b=e.computed(()=>n.value+s.value.height>p.value.height?n.value-s.value.height:n.value),y=e.computed(()=>{let l=o.maxWidth;return o.maxWidth<10&&(l=10),o.maxWidth>100&&(l=100),o.appearence==="filled"&&(o.error||o.multiSelect)?`calc(${l}% + 2.75rem)`:o.avatar?`calc(${l}% + 3.25rem)`:`${l}%`});return(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["w-full flex",{"justify-end":l.appearence==="filled","justify-start":l.appearence==="outlined"}])},[e.createElementVNode("div",{class:"flex flex-col gap-2 w-fit",style:e.normalizeStyle({"max-width":y.value})},[l.automaticMessage?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["text-sm font-semibold text-neutral-lighter flex",{"justify-end":l.appearence==="filled","justify-start":l.appearence==="outlined","opacity-0 select-none":l.appearence==="filled"&&l.multiSelect&&!l.error,"mr-11":l.appearence==="filled"&&l.error}])},e.toDisplayString(l.automaticMessage),3)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["flex gap-5 items-center",{"justify-end":l.appearence==="filled","justify-start":l.appearence==="outlined"}])},[e.createElementVNode("div",N,[e.createElementVNode("div",S,[l.avatar&&l.appearence==="outlined"?(e.openBlock(),e.createBlock(w.default,{key:0,size:"sm",picture:l.avatar.picture,label:l.avatar.label,class:"shrink-0"},null,8,["picture","label"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center",{"text-white":l.appearence==="filled","bg-brandBlue-500":l.appearence==="filled"&&l.color==="brand-blue","bg-brandGreen-500":l.appearence==="filled"&&l.color==="brand-green","bg-indigo-500":l.appearence==="filled"&&l.color==="indigo","bg-purple-500":l.appearence==="filled"&&l.color==="purple","bg-pink-500":l.appearence==="filled"&&l.color==="pink","bg-neutral-surface text-gray-900 border border-neutral-surface":l.appearence==="outlined"}]),onContextmenu:a[2]||(a[2]=e.withModifiers(t=>l.contextMenuItems&&l.contextMenuItems.length&&k(t),["prevent"]))},[l.headline&&l.appearence==="outlined"?(e.openBlock(),e.createElementBlock("div",z,e.toDisplayString(l.headline),1)):e.createCommentVNode("",!0),l.picture?(e.openBlock(),e.createElementBlock("div",{key:1,class:"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer",onClick:a[0]||(a[0]=t=>u("open-picture"))},[e.createElementVNode("img",{src:l.picture,class:"w-full h-full object-cover"},null,8,j)])):e.createCommentVNode("",!0),l.file?(e.openBlock(),e.createBlock(B.default,{key:2,variant:l.appearence==="filled"?"alpha":"outlined",name:l.file.name,format:l.file.format,class:"cursor-pointer",onClick:a[1]||(a[1]=t=>u("open-file"))},null,8,["variant","name","format"])):e.createCommentVNode("",!0),l.message?(e.openBlock(),e.createElementBlock("div",{key:3,class:e.normalizeClass(["flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap",{"text-neutral-inverse":l.appearence==="filled","text-neutral-darker":l.appearence==="outlined"}])},e.toDisplayString(l.message),3)):e.createCommentVNode("",!0)],34)])]),l.appearence==="filled"&&l.error?(e.openBlock(),e.createBlock(C.default,{key:0,name:"ExclamationCircleIcon",solid:"",class:"w-6 h-6 text-error-active flex justify-start shrink-0"})):e.createCommentVNode("",!0),l.appearence==="filled"&&l.multiSelect&&!l.error?(e.openBlock(),e.createBlock(E.default,{key:1,"model-value":l.selected,color:l.color,class:"shrink-0","onUpdate:modelValue":a[3]||(a[3]=t=>u("row-selection",t))},null,8,["model-value","color"])):e.createCommentVNode("",!0)],2),l.contextMenuItems&&l.contextMenuItems.length&&d.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default",onClick:a[4]||(a[4]=()=>d.value=!1)},[e.createElementVNode("div",{ref_key:"contextMenuElement",ref:i,class:"z-50 absolute bg-white rounded-md shadow p-2 min-w-52",style:e.normalizeStyle({top:b.value+"px",left:g.value+"px"})},[e.createElementVNode("div",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.contextMenuItems,(t,c)=>{var f;return e.openBlock(),e.createBlock(V.default,e.mergeProps({id:"option-"+c,ref_for:!0,ref:"itemRefs",key:c,class:["self-stretch",{"cursor-pointer":!t.disabled,"cursor-default":t.disabled}],role:"option",tabindex:"-1"},e.unref(M.lodashExports.omit)(t,"onClick"),{disabled:t.disabled,"data-cy":`${(f=t.text)==null?void 0:f.trim().replaceAll(" ","").replaceAll(",","")}-dropdown-item`,onClick:e.withModifiers(H=>{var m;return!t.disabled&&((m=t.onClick)==null?void 0:m.call(t))},["prevent"])}),null,16,["id","class","disabled","data-cy","onClick"])}),128))])],4)])):e.createCommentVNode("",!0),l.time||l.loading?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["text-xs text-neutral-lighter flex justify-end",{"opacity-0 select-none":l.appearence==="filled"&&(l.multiSelect||l.error)}])},[l.loading&&l.appearence==="filled"?(e.openBlock(),e.createElementBlock("div",W,"Invio in corso")):(e.openBlock(),e.createElementBlock("div",q,e.toDisplayString(l.time),1))],2)):e.createCommentVNode("",!0)],4)],2))}});exports.default=D;exports.elBubbleChatAppearences=$;exports.elBubbleChatColors=A;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("./ElAvatar.vue.cjs2.js"),B=require("./ElFile.vue.cjs2.js"),C=require("./ElIcon.vue.cjs2.js"),E=require("./forms/ElInputCheckbox.vue.cjs2.js"),M=require("./node_modules/lodash/lodash.cjs.js"),V=require("./ElItem.vue.cjs2.js"),N={class:"flex flex-col gap-2 w-fit"},S={class:"flex gap-3"},z={key:0,class:"text-neutral-lighter text-xs font-medium"},j=["src"],I={class:"flex w-full flex-col gap-1"},W={key:0},q={key:1},$=["filled","outlined"],A=["brand-blue","brand-green","indigo","purple","pink"],D=e.defineComponent({__name:"ElBubbleChat",props:{appearence:{},color:{default:"brand-blue"},time:{default:void 0},message:{default:void 0},automaticMessage:{default:void 0},headline:{default:void 0},avatar:{default:void 0},file:{default:void 0},picture:{default:void 0},loading:{type:Boolean},error:{type:Boolean},multiSelect:{type:Boolean},selected:{type:Boolean},maxWidth:{default:60},contextMenuItems:{default:void 0}},emits:["row-selection","open-file","open-picture"],setup(v,{emit:h}){const o=v,u=h,d=e.ref(!1),r=e.ref(0),n=e.ref(0),k=l=>{d.value=!0,r.value=l.pageX,n.value=l.pageY},i=e.ref(),s=e.computed(()=>i.value?{width:i.value.clientWidth,height:i.value.clientHeight}:{width:0,height:0}),p=e.computed(()=>({width:window.innerWidth,height:window.innerHeight})),g=e.computed(()=>r.value+s.value.width>p.value.width?r.value-s.value.width:r.value),b=e.computed(()=>n.value+s.value.height>p.value.height?n.value-s.value.height:n.value),y=e.computed(()=>{let l=o.maxWidth;return o.maxWidth<10&&(l=10),o.maxWidth>100&&(l=100),o.appearence==="filled"&&(o.error||o.multiSelect)?`calc(${l}% + 2.75rem)`:o.avatar?`calc(${l}% + 3.25rem)`:`${l}%`});return(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["w-full flex",{"justify-end":l.appearence==="filled","justify-start":l.appearence==="outlined"}])},[e.createElementVNode("div",{class:"flex flex-col gap-2 w-fit",style:e.normalizeStyle({"max-width":y.value})},[l.automaticMessage?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["text-sm font-semibold text-neutral-lighter flex",{"justify-end":l.appearence==="filled","justify-start":l.appearence==="outlined","opacity-0 select-none":l.appearence==="filled"&&l.multiSelect&&!l.error,"mr-11":l.appearence==="filled"&&l.error}])},e.toDisplayString(l.automaticMessage),3)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["flex gap-5 items-center",{"justify-end":l.appearence==="filled","justify-start":l.appearence==="outlined"}])},[e.createElementVNode("div",N,[e.createElementVNode("div",S,[l.avatar&&l.appearence==="outlined"?(e.openBlock(),e.createBlock(w.default,{key:0,size:"sm",picture:l.avatar.picture,label:l.avatar.label,class:"shrink-0"},null,8,["picture","label"])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center",{"text-white":l.appearence==="filled","bg-brandBlue-500":l.appearence==="filled"&&l.color==="brand-blue","bg-brandGreen-500":l.appearence==="filled"&&l.color==="brand-green","bg-indigo-500":l.appearence==="filled"&&l.color==="indigo","bg-purple-500":l.appearence==="filled"&&l.color==="purple","bg-pink-500":l.appearence==="filled"&&l.color==="pink","bg-neutral-surface text-gray-900 border border-neutral-surface":l.appearence==="outlined"}]),onContextmenu:a[2]||(a[2]=e.withModifiers(t=>l.contextMenuItems&&l.contextMenuItems.length&&k(t),["prevent"]))},[l.headline&&l.appearence==="outlined"?(e.openBlock(),e.createElementBlock("div",z,e.toDisplayString(l.headline),1)):e.createCommentVNode("",!0),l.picture?(e.openBlock(),e.createElementBlock("div",{key:1,class:"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer",onClick:a[0]||(a[0]=t=>u("open-picture"))},[e.createElementVNode("img",{src:l.picture,class:"w-full h-full object-cover"},null,8,j)])):e.createCommentVNode("",!0),l.file?(e.openBlock(),e.createBlock(B.default,{key:2,variant:l.appearence==="filled"?"alpha":"outlined",name:l.file.name,format:l.file.format,class:"cursor-pointer",onClick:a[1]||(a[1]=t=>u("open-file"))},null,8,["variant","name","format"])):e.createCommentVNode("",!0),l.message?(e.openBlock(),e.createElementBlock("div",{key:3,class:e.normalizeClass(["flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap",{"text-neutral-inverse":l.appearence==="filled","text-neutral-darker":l.appearence==="outlined"}])},e.toDisplayString(l.message),3)):e.createCommentVNode("",!0)],34)])]),l.appearence==="filled"&&l.error?(e.openBlock(),e.createBlock(C.default,{key:0,name:"ExclamationCircleIcon",solid:"",class:"w-6 h-6 text-error-active flex justify-start shrink-0"})):e.createCommentVNode("",!0),l.appearence==="filled"&&l.multiSelect&&!l.error?(e.openBlock(),e.createBlock(E.default,{key:1,"model-value":l.selected,color:l.color,class:"shrink-0","onUpdate:modelValue":a[3]||(a[3]=t=>u("row-selection",t))},null,8,["model-value","color"])):e.createCommentVNode("",!0)],2),l.contextMenuItems&&l.contextMenuItems.length&&d.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default",onClick:a[4]||(a[4]=()=>d.value=!1)},[e.createElementVNode("div",{ref_key:"contextMenuElement",ref:i,class:"z-50 absolute bg-white rounded-md shadow p-2 min-w-52",style:e.normalizeStyle({top:b.value+"px",left:g.value+"px"})},[e.createElementVNode("div",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.contextMenuItems,(t,c)=>{var f;return e.openBlock(),e.createBlock(V.default,e.mergeProps({id:"option-"+c,ref_for:!0,ref:"itemRefs",key:c,class:["self-stretch",{"cursor-pointer":!t.disabled,"cursor-default":t.disabled}],role:"option",tabindex:"-1"},e.unref(M.lodashExports.omit)(t,"onClick"),{disabled:t.disabled,"data-cy":`${(f=t.text)==null?void 0:f.trim().replaceAll(" ","").replaceAll(",","")}-dropdown-item`,onClick:e.withModifiers(H=>{var m;return!t.disabled&&((m=t.onClick)==null?void 0:m.call(t))},["prevent"])}),null,16,["id","class","disabled","data-cy","onClick"])}),128))])],4)])):e.createCommentVNode("",!0),l.time||l.loading?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["text-xs text-neutral-lighter flex justify-end",{"opacity-0 select-none":l.appearence==="filled"&&(l.multiSelect||l.error)}])},[l.loading&&l.appearence==="filled"?(e.openBlock(),e.createElementBlock("div",W,"Invio in corso")):(e.openBlock(),e.createElementBlock("div",q,e.toDisplayString(l.time),1))],2)):e.createCommentVNode("",!0)],4)],2))}});exports.default=D;exports.elBubbleChatAppearences=$;exports.elBubbleChatColors=A;
 //# sourceMappingURL=ElBubbleChat.vue.cjs2.js.map

package/dist/ElBubbleChat.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElBubbleChat.vue.cjs2.js","sources":["../../src/ElBubbleChat.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elBubbleChatAppearences = ['filled', 'outlined'] as const;\nexport type ElBubbleChatAppearences = (typeof elBubbleChatAppearences)[number];\n\nexport const elBubbleChatColors = ['brand-blue', 'brand-green', 'indigo', 'purple', 'pink'] as const;\nexport type ElBubbleChatColors = (typeof elBubbleChatColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport ElAvatar from './ElAvatar.vue';\nimport { DropdownItem } from './ElDropdown.vue';\nimport ElFile from './ElFile.vue';\nimport ElIcon from './ElIcon.vue';\nimport ElInputCheckbox, { ElInputCheckboxModelValues } from './forms/ElInputCheckbox.vue';\nimport { omit } from 'lodash';\nimport ElItem from './ElItem.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    appearence: ElBubbleChatAppearences;\n    color?: ElBubbleChatColors;\n    time?: string;\n    message?: string;\n    automaticMessage?: string;\n    headline?: string;\n    avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n    file?: Pick<InstanceType<typeof ElFile>['$props'], 'name' | 'format'>;\n    picture?: string;\n    loading?: boolean;\n    error?: boolean;\n    multiSelect?: boolean;\n    selected?: boolean;\n    maxWidth?: number;\n    contextMenuItems?: DropdownItem[];\n  }>(),\n  {\n    color: 'brand-blue',\n    file: undefined,\n    picture: undefined,\n    automaticMessage: undefined,\n    time: undefined,\n    message: undefined,\n    headline: undefined,\n    avatar: undefined,\n    maxWidth: 60,\n    contextMenuItems: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'row-selection', value: ElInputCheckboxModelValues): void;\n  (event: 'open-file'): void;\n  (event: 'open-picture'): void;\n}>();\n\nconst showMenu = ref<boolean>(false);\nconst menuX = ref<number>(0);\nconst menuY = ref<number>(0);\n\nconst handleShowContextMenu = (event: MouseEvent) => {\n  showMenu.value = true;\n  menuX.value = event.pageX;\n  menuY.value = event.pageY;\n};\n\nconst contextMenuElement = ref<HTMLDivElement>();\n\nconst contextMenuSize = computed(() => {\n  if (!contextMenuElement.value)\n    return {\n      width: 0,\n      height: 0,\n    };\n\n  return {\n    width: contextMenuElement.value.clientWidth,\n    height: contextMenuElement.value.clientHeight,\n  };\n});\n\nconst deviceSize = computed(() => {\n  return { width: window.innerWidth, height: window.innerHeight };\n});\n\nconst positionX = computed(() => {\n  const totalWidth = menuX.value + contextMenuSize.value.width;\n\n  if (totalWidth > deviceSize.value.width) return menuX.value - contextMenuSize.value.width;\n\n  return menuX.value;\n});\n\nconst positionY = computed(() => {\n  const totalHeight = menuY.value + contextMenuSize.value.height;\n\n  if (totalHeight > deviceSize.value.height) return menuY.value - contextMenuSize.value.height;\n\n  return menuY.value;\n});\n\nconst bubbleMaxWidth = computed(() => {\n  let maxWidth = props.maxWidth;\n\n  if (props.maxWidth < 10) maxWidth = 10;\n  if (props.maxWidth > 100) maxWidth = 100;\n\n  if (props.appearence === 'filled' && (props.error || props.multiSelect)) return `calc(${maxWidth}% + 2.75rem)`;\n\n  if (props.avatar) return `calc(${maxWidth}% + 3.25rem)`;\n\n  return `${maxWidth}%`;\n});\n</script>\n\n<template>\n  <div\n    class=\"w-full flex\"\n    :class=\"{\n      'justify-end': appearence === 'filled',\n      'justify-start': appearence === 'outlined',\n    }\"\n  >\n    <div\n      class=\"flex flex-col gap-2 w-fit\"\n      :style=\"{\n        /* The message container width should be max 60% (default) of parent width.\n        To ensure that when the checkbox for multiselect/error/avatar are visible,\n        we add extra width (same as multiselect/error/user avatar width),\n        so the maximum width of the message container should not change */\n        'max-width': bubbleMaxWidth,\n      }\"\n    >\n      <div\n        v-if=\"automaticMessage\"\n        class=\"text-sm font-semibold text-neutral-lighter flex\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n          'opacity-0 select-none': appearence === 'filled' && multiSelect && !error,\n          'mr-11': appearence === 'filled' && error,\n        }\"\n      >\n        {{ automaticMessage }}\n      </div>\n\n      <div\n        class=\"flex gap-5 items-center\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n        }\"\n      >\n        <div class=\"flex flex-col gap-2 w-fit\">\n          <div class=\"flex gap-3\">\n            <ElAvatar\n              v-if=\"avatar && appearence === 'outlined'\"\n              size=\"sm\"\n              :picture=\"avatar.picture\"\n              :label=\"avatar.label\"\n              class=\"shrink-0\"\n            />\n\n            <div\n              class=\"rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center\"\n              :class=\"{\n                'text-white': appearence === 'filled',\n                'bg-brandBlue-500': appearence === 'filled' && color === 'brand-blue',\n                'bg-brandGreen-500': appearence === 'filled' && color === 'brand-green',\n                'bg-indigo-500': appearence === 'filled' && color === 'indigo',\n                'bg-purple-500': appearence === 'filled' && color === 'purple',\n                'bg-pink-500': appearence === 'filled' && color === 'pink',\n                'bg-neutral-surface text-gray-900 border border-neutral-surface': appearence === 'outlined',\n              }\"\n              @contextmenu.prevent=\"contextMenuItems && contextMenuItems.length && handleShowContextMenu($event)\"\n            >\n              <div v-if=\"headline && appearence === 'outlined'\" class=\"text-neutral-lighter text-xs font-medium\">{{ headline }}</div>\n\n              <div v-if=\"picture\" class=\"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer\" @click=\"emit('open-picture')\">\n                <img :src=\"picture\" class=\"w-full h-full object-cover\" />\n              </div>\n\n              <ElFile\n                v-if=\"file\"\n                :variant=\"appearence === 'filled' ? 'alpha' : 'outlined'\"\n                :name=\"file.name\"\n                :format=\"file.format\"\n                class=\"cursor-pointer\"\n                @click=\"emit('open-file')\"\n              />\n\n              <div\n                v-if=\"message\"\n                class=\"flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap\"\n                :class=\"{\n                  'text-neutral-inverse': appearence === 'filled',\n                  'text-neutral-darker': appearence === 'outlined',\n                }\"\n              >\n                {{ message }}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <ElIcon\n          v-if=\"appearence === 'filled' && error\"\n          name=\"ExclamationCircleIcon\"\n          solid\n          class=\"w-6 h-6 text-error-active flex justify-start shrink-0\"\n        />\n\n        <ElInputCheckbox\n          v-if=\"appearence === 'filled' && multiSelect && !error\"\n          :model-value=\"selected\"\n          :color=\"color\"\n          class=\"shrink-0\"\n          @update:model-value=\"val => emit('row-selection', val)\"\n        />\n      </div>\n\n      <!-- Context menu -->\n      <div\n        v-if=\"contextMenuItems && contextMenuItems.length && showMenu\"\n        class=\"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default\"\n        @click=\"() => (showMenu = false)\"\n      >\n        <div\n          ref=\"contextMenuElement\"\n          class=\"z-50 absolute bg-white rounded-md shadow p-2 min-w-52\"\n          :style=\"{ top: positionY + 'px', left: positionX + 'px' }\"\n        >\n          <div class=\"flex w-full flex-col gap-1\">\n            <ElItem\n              v-for=\"(item, index) in contextMenuItems\"\n              :id=\"'option-' + index\"\n              ref=\"itemRefs\"\n              :key=\"index\"\n              class=\"self-stretch\"\n              :class=\"{\n                'cursor-pointer': !item.disabled,\n                'cursor-default': item.disabled,\n              }\"\n              role=\"option\"\n              tabindex=\"-1\"\n              v-bind=\"omit(item, 'onClick')\"\n              :disabled=\"item.disabled\"\n              :data-cy=\"`${item.text?.trim().replaceAll(' ', '').replaceAll(',', '')}-dropdown-item`\"\n              @click.prevent=\"!item.disabled && item.onClick?.()\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <div\n        v-if=\"time || loading\"\n        class=\"text-xs text-neutral-lighter flex justify-end\"\n        :class=\"{\n          'opacity-0 select-none': appearence === 'filled' && (multiSelect || error),\n        }\"\n      >\n        <div v-if=\"loading && appearence === 'filled'\">Invio in corso</div>\n        <div v-else>\n          {{ time }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["elBubbleChatAppearences","elBubbleChatColors","props","__props","emit","__emit","showMenu","ref","menuX","menuY","handleShowContextMenu","event","contextMenuElement","contextMenuSize","computed","deviceSize","positionX","positionY","bubbleMaxWidth","maxWidth"],"mappings":"6iBACaA,EAA0B,CAAC,SAAU,UAAU,EAG/CC,EAAqB,CAAC,aAAc,cAAe,SAAU,SAAU,MAAM,8eAc1F,MAAMC,EAAQC,EAgCRC,EAAOC,EAMPC,EAAWC,MAAa,EAAK,EAC7BC,EAAQD,MAAY,CAAC,EACrBE,EAAQF,MAAY,CAAC,EAErBG,EAAyBC,GAAsB,CACnDL,EAAS,MAAQ,GACjBE,EAAM,MAAQG,EAAM,MACpBF,EAAM,MAAQE,EAAM,KAAA,EAGhBC,EAAqBL,EAAAA,MAErBM,EAAkBC,EAAAA,SAAS,IAC1BF,EAAmB,MAMjB,CACL,MAAOA,EAAmB,MAAM,YAChC,OAAQA,EAAmB,MAAM,YAAA,EAP1B,CACL,MAAO,EACP,OAAQ,CAAA,CAOb,EAEKG,EAAaD,EAAAA,SAAS,KACnB,CAAE,MAAO,OAAO,WAAY,OAAQ,OAAO,aACnD,EAEKE,EAAYF,EAAAA,SAAS,IACNN,EAAM,MAAQK,EAAgB,MAAM,MAEtCE,EAAW,MAAM,MAAcP,EAAM,MAAQK,EAAgB,MAAM,MAE7EL,EAAM,KACd,EAEKS,EAAYH,EAAAA,SAAS,IACLL,EAAM,MAAQI,EAAgB,MAAM,OAEtCE,EAAW,MAAM,OAAeN,EAAM,MAAQI,EAAgB,MAAM,OAE/EJ,EAAM,KACd,EAEKS,EAAiBJ,EAAAA,SAAS,IAAM,CACpC,IAAIK,EAAWjB,EAAM,SAKrB,OAHIA,EAAM,SAAW,KAAeiB,EAAA,IAChCjB,EAAM,SAAW,MAAgBiB,EAAA,KAEjCjB,EAAM,aAAe,WAAaA,EAAM,OAASA,EAAM,aAAqB,QAAQiB,CAAQ,eAE5FjB,EAAM,OAAe,QAAQiB,CAAQ,eAElC,GAAGA,CAAQ,GAAA,CACnB"}
+{"version":3,"file":"ElBubbleChat.vue.cjs2.js","sources":["../src/ElBubbleChat.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elBubbleChatAppearences = ['filled', 'outlined'] as const;\nexport type ElBubbleChatAppearences = (typeof elBubbleChatAppearences)[number];\n\nexport const elBubbleChatColors = ['brand-blue', 'brand-green', 'indigo', 'purple', 'pink'] as const;\nexport type ElBubbleChatColors = (typeof elBubbleChatColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport ElAvatar from './ElAvatar.vue';\nimport { DropdownItem } from './ElDropdown.vue';\nimport ElFile from './ElFile.vue';\nimport ElIcon from './ElIcon.vue';\nimport ElInputCheckbox, { ElInputCheckboxModelValues } from './forms/ElInputCheckbox.vue';\nimport { omit } from 'lodash';\nimport ElItem from './ElItem.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    appearence: ElBubbleChatAppearences;\n    color?: ElBubbleChatColors;\n    time?: string;\n    message?: string;\n    automaticMessage?: string;\n    headline?: string;\n    avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n    file?: Pick<InstanceType<typeof ElFile>['$props'], 'name' | 'format'>;\n    picture?: string;\n    loading?: boolean;\n    error?: boolean;\n    multiSelect?: boolean;\n    selected?: boolean;\n    maxWidth?: number;\n    contextMenuItems?: DropdownItem[];\n  }>(),\n  {\n    color: 'brand-blue',\n    file: undefined,\n    picture: undefined,\n    automaticMessage: undefined,\n    time: undefined,\n    message: undefined,\n    headline: undefined,\n    avatar: undefined,\n    maxWidth: 60,\n    contextMenuItems: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'row-selection', value: ElInputCheckboxModelValues): void;\n  (event: 'open-file'): void;\n  (event: 'open-picture'): void;\n}>();\n\nconst showMenu = ref<boolean>(false);\nconst menuX = ref<number>(0);\nconst menuY = ref<number>(0);\n\nconst handleShowContextMenu = (event: MouseEvent) => {\n  showMenu.value = true;\n  menuX.value = event.pageX;\n  menuY.value = event.pageY;\n};\n\nconst contextMenuElement = ref<HTMLDivElement>();\n\nconst contextMenuSize = computed(() => {\n  if (!contextMenuElement.value)\n    return {\n      width: 0,\n      height: 0,\n    };\n\n  return {\n    width: contextMenuElement.value.clientWidth,\n    height: contextMenuElement.value.clientHeight,\n  };\n});\n\nconst deviceSize = computed(() => {\n  return { width: window.innerWidth, height: window.innerHeight };\n});\n\nconst positionX = computed(() => {\n  const totalWidth = menuX.value + contextMenuSize.value.width;\n\n  if (totalWidth > deviceSize.value.width) return menuX.value - contextMenuSize.value.width;\n\n  return menuX.value;\n});\n\nconst positionY = computed(() => {\n  const totalHeight = menuY.value + contextMenuSize.value.height;\n\n  if (totalHeight > deviceSize.value.height) return menuY.value - contextMenuSize.value.height;\n\n  return menuY.value;\n});\n\nconst bubbleMaxWidth = computed(() => {\n  let maxWidth = props.maxWidth;\n\n  if (props.maxWidth < 10) maxWidth = 10;\n  if (props.maxWidth > 100) maxWidth = 100;\n\n  if (props.appearence === 'filled' && (props.error || props.multiSelect)) return `calc(${maxWidth}% + 2.75rem)`;\n\n  if (props.avatar) return `calc(${maxWidth}% + 3.25rem)`;\n\n  return `${maxWidth}%`;\n});\n</script>\n\n<template>\n  <div\n    class=\"w-full flex\"\n    :class=\"{\n      'justify-end': appearence === 'filled',\n      'justify-start': appearence === 'outlined',\n    }\"\n  >\n    <div\n      class=\"flex flex-col gap-2 w-fit\"\n      :style=\"{\n        /* The message container width should be max 60% (default) of parent width.\n        To ensure that when the checkbox for multiselect/error/avatar are visible,\n        we add extra width (same as multiselect/error/user avatar width),\n        so the maximum width of the message container should not change */\n        'max-width': bubbleMaxWidth,\n      }\"\n    >\n      <div\n        v-if=\"automaticMessage\"\n        class=\"text-sm font-semibold text-neutral-lighter flex\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n          'opacity-0 select-none': appearence === 'filled' && multiSelect && !error,\n          'mr-11': appearence === 'filled' && error,\n        }\"\n      >\n        {{ automaticMessage }}\n      </div>\n\n      <div\n        class=\"flex gap-5 items-center\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n        }\"\n      >\n        <div class=\"flex flex-col gap-2 w-fit\">\n          <div class=\"flex gap-3\">\n            <ElAvatar\n              v-if=\"avatar && appearence === 'outlined'\"\n              size=\"sm\"\n              :picture=\"avatar.picture\"\n              :label=\"avatar.label\"\n              class=\"shrink-0\"\n            />\n\n            <div\n              class=\"rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center\"\n              :class=\"{\n                'text-white': appearence === 'filled',\n                'bg-brandBlue-500': appearence === 'filled' && color === 'brand-blue',\n                'bg-brandGreen-500': appearence === 'filled' && color === 'brand-green',\n                'bg-indigo-500': appearence === 'filled' && color === 'indigo',\n                'bg-purple-500': appearence === 'filled' && color === 'purple',\n                'bg-pink-500': appearence === 'filled' && color === 'pink',\n                'bg-neutral-surface text-gray-900 border border-neutral-surface': appearence === 'outlined',\n              }\"\n              @contextmenu.prevent=\"contextMenuItems && contextMenuItems.length && handleShowContextMenu($event)\"\n            >\n              <div v-if=\"headline && appearence === 'outlined'\" class=\"text-neutral-lighter text-xs font-medium\">{{ headline }}</div>\n\n              <div v-if=\"picture\" class=\"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer\" @click=\"emit('open-picture')\">\n                <img :src=\"picture\" class=\"w-full h-full object-cover\" />\n              </div>\n\n              <ElFile\n                v-if=\"file\"\n                :variant=\"appearence === 'filled' ? 'alpha' : 'outlined'\"\n                :name=\"file.name\"\n                :format=\"file.format\"\n                class=\"cursor-pointer\"\n                @click=\"emit('open-file')\"\n              />\n\n              <div\n                v-if=\"message\"\n                class=\"flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap\"\n                :class=\"{\n                  'text-neutral-inverse': appearence === 'filled',\n                  'text-neutral-darker': appearence === 'outlined',\n                }\"\n              >\n                {{ message }}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <ElIcon\n          v-if=\"appearence === 'filled' && error\"\n          name=\"ExclamationCircleIcon\"\n          solid\n          class=\"w-6 h-6 text-error-active flex justify-start shrink-0\"\n        />\n\n        <ElInputCheckbox\n          v-if=\"appearence === 'filled' && multiSelect && !error\"\n          :model-value=\"selected\"\n          :color=\"color\"\n          class=\"shrink-0\"\n          @update:model-value=\"val => emit('row-selection', val)\"\n        />\n      </div>\n\n      <!-- Context menu -->\n      <div\n        v-if=\"contextMenuItems && contextMenuItems.length && showMenu\"\n        class=\"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default\"\n        @click=\"() => (showMenu = false)\"\n      >\n        <div\n          ref=\"contextMenuElement\"\n          class=\"z-50 absolute bg-white rounded-md shadow p-2 min-w-52\"\n          :style=\"{ top: positionY + 'px', left: positionX + 'px' }\"\n        >\n          <div class=\"flex w-full flex-col gap-1\">\n            <ElItem\n              v-for=\"(item, index) in contextMenuItems\"\n              :id=\"'option-' + index\"\n              ref=\"itemRefs\"\n              :key=\"index\"\n              class=\"self-stretch\"\n              :class=\"{\n                'cursor-pointer': !item.disabled,\n                'cursor-default': item.disabled,\n              }\"\n              role=\"option\"\n              tabindex=\"-1\"\n              v-bind=\"omit(item, 'onClick')\"\n              :disabled=\"item.disabled\"\n              :data-cy=\"`${item.text?.trim().replaceAll(' ', '').replaceAll(',', '')}-dropdown-item`\"\n              @click.prevent=\"!item.disabled && item.onClick?.()\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <div\n        v-if=\"time || loading\"\n        class=\"text-xs text-neutral-lighter flex justify-end\"\n        :class=\"{\n          'opacity-0 select-none': appearence === 'filled' && (multiSelect || error),\n        }\"\n      >\n        <div v-if=\"loading && appearence === 'filled'\">Invio in corso</div>\n        <div v-else>\n          {{ time }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["elBubbleChatAppearences","elBubbleChatColors","props","__props","emit","__emit","showMenu","ref","menuX","menuY","handleShowContextMenu","event","contextMenuElement","contextMenuSize","computed","deviceSize","positionX","positionY","bubbleMaxWidth","maxWidth"],"mappings":"4iBACaA,EAA0B,CAAC,SAAU,UAAU,EAG/CC,EAAqB,CAAC,aAAc,cAAe,SAAU,SAAU,MAAM,8eAc1F,MAAMC,EAAQC,EAgCRC,EAAOC,EAMPC,EAAWC,MAAa,EAAK,EAC7BC,EAAQD,MAAY,CAAC,EACrBE,EAAQF,MAAY,CAAC,EAErBG,EAAyBC,GAAsB,CACnDL,EAAS,MAAQ,GACjBE,EAAM,MAAQG,EAAM,MACpBF,EAAM,MAAQE,EAAM,KAAA,EAGhBC,EAAqBL,EAAAA,MAErBM,EAAkBC,EAAAA,SAAS,IAC1BF,EAAmB,MAMjB,CACL,MAAOA,EAAmB,MAAM,YAChC,OAAQA,EAAmB,MAAM,YAAA,EAP1B,CACL,MAAO,EACP,OAAQ,CAAA,CAOb,EAEKG,EAAaD,EAAAA,SAAS,KACnB,CAAE,MAAO,OAAO,WAAY,OAAQ,OAAO,aACnD,EAEKE,EAAYF,EAAAA,SAAS,IACNN,EAAM,MAAQK,EAAgB,MAAM,MAEtCE,EAAW,MAAM,MAAcP,EAAM,MAAQK,EAAgB,MAAM,MAE7EL,EAAM,KACd,EAEKS,EAAYH,EAAAA,SAAS,IACLL,EAAM,MAAQI,EAAgB,MAAM,OAEtCE,EAAW,MAAM,OAAeN,EAAM,MAAQI,EAAgB,MAAM,OAE/EJ,EAAM,KACd,EAEKS,EAAiBJ,EAAAA,SAAS,IAAM,CACpC,IAAIK,EAAWjB,EAAM,SAKrB,OAHIA,EAAM,SAAW,KAAeiB,EAAA,IAChCjB,EAAM,SAAW,MAAgBiB,EAAA,KAEjCjB,EAAM,aAAe,WAAaA,EAAM,OAASA,EAAM,aAAqB,QAAQiB,CAAQ,eAE5FjB,EAAM,OAAe,QAAQiB,CAAQ,eAElC,GAAGA,CAAQ,GAAA,CACnB"}

package/dist/ElBubbleChat.vue.esm2.js

@@ -1,2 +1,2 @@
-import{defineComponent as E,ref as v,computed as d,openBlock as a,createElementBlock as r,normalizeClass as s,createElementVNode as o,normalizeStyle as M,toDisplayString as h,createCommentVNode as n,createBlock as u,withModifiers as $,Fragment as H,renderList as A,mergeProps as V,unref as X}from"vue";import Y from"./ElAvatar.vue.esm2.js";import N from"./ElFile.vue.esm2.js";import D from"./ElIcon.vue.esm2.js";import F from"./forms/ElInputCheckbox.vue.esm2.js";import{l as G}from"../node_modules/lodash/lodash.esm.js";import L from"./ElItem.vue.esm2.js";const P={class:"flex flex-col gap-2 w-fit"},R={class:"flex gap-3"},U={key:0,class:"text-neutral-lighter text-xs font-medium"},q=["src"],J={class:"flex w-full flex-col gap-1"},K={key:0},O={key:1},te=["filled","outlined"],re=["brand-blue","brand-green","indigo","purple","pink"],ne=E({__name:"ElBubbleChat",props:{appearence:{},color:{default:"brand-blue"},time:{default:void 0},message:{default:void 0},automaticMessage:{default:void 0},headline:{default:void 0},avatar:{default:void 0},file:{default:void 0},picture:{default:void 0},loading:{type:Boolean},error:{type:Boolean},multiSelect:{type:Boolean},selected:{type:Boolean},maxWidth:{default:60},contextMenuItems:{default:void 0}},emits:["row-selection","open-file","open-picture"],setup(B,{emit:j}){const i=B,g=j,b=v(!1),p=v(0),f=v(0),S=e=>{b.value=!0,p.value=e.pageX,f.value=e.pageY},c=v(),m=d(()=>c.value?{width:c.value.clientWidth,height:c.value.clientHeight}:{width:0,height:0}),w=d(()=>({width:window.innerWidth,height:window.innerHeight})),W=d(()=>p.value+m.value.width>w.value.width?p.value-m.value.width:p.value),I=d(()=>f.value+m.value.height>w.value.height?f.value-m.value.height:f.value),z=d(()=>{let e=i.maxWidth;return i.maxWidth<10&&(e=10),i.maxWidth>100&&(e=100),i.appearence==="filled"&&(i.error||i.multiSelect)?`calc(${e}% + 2.75rem)`:i.avatar?`calc(${e}% + 3.25rem)`:`${e}%`});return(e,t)=>(a(),r("div",{class:s(["w-full flex",{"justify-end":e.appearence==="filled","justify-start":e.appearence==="outlined"}])},[o("div",{class:"flex flex-col gap-2 w-fit",style:M({"max-width":z.value})},[e.automaticMessage?(a(),r("div",{key:0,class:s(["text-sm font-semibold text-neutral-lighter flex",{"justify-end":e.appearence==="filled","justify-start":e.appearence==="outlined","opacity-0 select-none":e.appearence==="filled"&&e.multiSelect&&!e.error,"mr-11":e.appearence==="filled"&&e.error}])},h(e.automaticMessage),3)):n("",!0),o("div",{class:s(["flex gap-5 items-center",{"justify-end":e.appearence==="filled","justify-start":e.appearence==="outlined"}])},[o("div",P,[o("div",R,[e.avatar&&e.appearence==="outlined"?(a(),u(Y,{key:0,size:"sm",picture:e.avatar.picture,label:e.avatar.label,class:"shrink-0"},null,8,["picture","label"])):n("",!0),o("div",{class:s(["rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center",{"text-white":e.appearence==="filled","bg-brandBlue-500":e.appearence==="filled"&&e.color==="brand-blue","bg-brandGreen-500":e.appearence==="filled"&&e.color==="brand-green","bg-indigo-500":e.appearence==="filled"&&e.color==="indigo","bg-purple-500":e.appearence==="filled"&&e.color==="purple","bg-pink-500":e.appearence==="filled"&&e.color==="pink","bg-neutral-surface text-gray-900 border border-neutral-surface":e.appearence==="outlined"}]),onContextmenu:t[2]||(t[2]=$(l=>e.contextMenuItems&&e.contextMenuItems.length&&S(l),["prevent"]))},[e.headline&&e.appearence==="outlined"?(a(),r("div",U,h(e.headline),1)):n("",!0),e.picture?(a(),r("div",{key:1,class:"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer",onClick:t[0]||(t[0]=l=>g("open-picture"))},[o("img",{src:e.picture,class:"w-full h-full object-cover"},null,8,q)])):n("",!0),e.file?(a(),u(N,{key:2,variant:e.appearence==="filled"?"alpha":"outlined",name:e.file.name,format:e.file.format,class:"cursor-pointer",onClick:t[1]||(t[1]=l=>g("open-file"))},null,8,["variant","name","format"])):n("",!0),e.message?(a(),r("div",{key:3,class:s(["flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap",{"text-neutral-inverse":e.appearence==="filled","text-neutral-darker":e.appearence==="outlined"}])},h(e.message),3)):n("",!0)],34)])]),e.appearence==="filled"&&e.error?(a(),u(D,{key:0,name:"ExclamationCircleIcon",solid:"",class:"w-6 h-6 text-error-active flex justify-start shrink-0"})):n("",!0),e.appearence==="filled"&&e.multiSelect&&!e.error?(a(),u(F,{key:1,"model-value":e.selected,color:e.color,class:"shrink-0","onUpdate:modelValue":t[3]||(t[3]=l=>g("row-selection",l))},null,8,["model-value","color"])):n("",!0)],2),e.contextMenuItems&&e.contextMenuItems.length&&b.value?(a(),r("div",{key:1,class:"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default",onClick:t[4]||(t[4]=()=>b.value=!1)},[o("div",{ref_key:"contextMenuElement",ref:c,class:"z-50 absolute bg-white rounded-md shadow p-2 min-w-52",style:M({top:I.value+"px",left:W.value+"px"})},[o("div",J,[(a(!0),r(H,null,A(e.contextMenuItems,(l,y)=>{var k;return a(),u(L,V({id:"option-"+y,ref_for:!0,ref:"itemRefs",key:y,class:["self-stretch",{"cursor-pointer":!l.disabled,"cursor-default":l.disabled}],role:"option",tabindex:"-1"},X(G.omit)(l,"onClick"),{disabled:l.disabled,"data-cy":`${(k=l.text)==null?void 0:k.trim().replaceAll(" ","").replaceAll(",","")}-dropdown-item`,onClick:$(Q=>{var C;return!l.disabled&&((C=l.onClick)==null?void 0:C.call(l))},["prevent"])}),null,16,["id","class","disabled","data-cy","onClick"])}),128))])],4)])):n("",!0),e.time||e.loading?(a(),r("div",{key:2,class:s(["text-xs text-neutral-lighter flex justify-end",{"opacity-0 select-none":e.appearence==="filled"&&(e.multiSelect||e.error)}])},[e.loading&&e.appearence==="filled"?(a(),r("div",K,"Invio in corso")):(a(),r("div",O,h(e.time),1))],2)):n("",!0)],4)],2))}});export{ne as default,te as elBubbleChatAppearences,re as elBubbleChatColors};
+import{defineComponent as E,ref as v,computed as d,openBlock as a,createElementBlock as r,normalizeClass as s,createElementVNode as o,normalizeStyle as M,toDisplayString as h,createCommentVNode as n,createBlock as u,withModifiers as $,Fragment as H,renderList as A,mergeProps as V,unref as X}from"vue";import Y from"./ElAvatar.vue.esm2.js";import N from"./ElFile.vue.esm2.js";import D from"./ElIcon.vue.esm2.js";import F from"./forms/ElInputCheckbox.vue.esm2.js";import{l as G}from"./node_modules/lodash/lodash.esm.js";import L from"./ElItem.vue.esm2.js";const P={class:"flex flex-col gap-2 w-fit"},R={class:"flex gap-3"},U={key:0,class:"text-neutral-lighter text-xs font-medium"},q=["src"],J={class:"flex w-full flex-col gap-1"},K={key:0},O={key:1},te=["filled","outlined"],re=["brand-blue","brand-green","indigo","purple","pink"],ne=E({__name:"ElBubbleChat",props:{appearence:{},color:{default:"brand-blue"},time:{default:void 0},message:{default:void 0},automaticMessage:{default:void 0},headline:{default:void 0},avatar:{default:void 0},file:{default:void 0},picture:{default:void 0},loading:{type:Boolean},error:{type:Boolean},multiSelect:{type:Boolean},selected:{type:Boolean},maxWidth:{default:60},contextMenuItems:{default:void 0}},emits:["row-selection","open-file","open-picture"],setup(B,{emit:j}){const i=B,g=j,b=v(!1),p=v(0),f=v(0),S=e=>{b.value=!0,p.value=e.pageX,f.value=e.pageY},c=v(),m=d(()=>c.value?{width:c.value.clientWidth,height:c.value.clientHeight}:{width:0,height:0}),w=d(()=>({width:window.innerWidth,height:window.innerHeight})),W=d(()=>p.value+m.value.width>w.value.width?p.value-m.value.width:p.value),I=d(()=>f.value+m.value.height>w.value.height?f.value-m.value.height:f.value),z=d(()=>{let e=i.maxWidth;return i.maxWidth<10&&(e=10),i.maxWidth>100&&(e=100),i.appearence==="filled"&&(i.error||i.multiSelect)?`calc(${e}% + 2.75rem)`:i.avatar?`calc(${e}% + 3.25rem)`:`${e}%`});return(e,t)=>(a(),r("div",{class:s(["w-full flex",{"justify-end":e.appearence==="filled","justify-start":e.appearence==="outlined"}])},[o("div",{class:"flex flex-col gap-2 w-fit",style:M({"max-width":z.value})},[e.automaticMessage?(a(),r("div",{key:0,class:s(["text-sm font-semibold text-neutral-lighter flex",{"justify-end":e.appearence==="filled","justify-start":e.appearence==="outlined","opacity-0 select-none":e.appearence==="filled"&&e.multiSelect&&!e.error,"mr-11":e.appearence==="filled"&&e.error}])},h(e.automaticMessage),3)):n("",!0),o("div",{class:s(["flex gap-5 items-center",{"justify-end":e.appearence==="filled","justify-start":e.appearence==="outlined"}])},[o("div",P,[o("div",R,[e.avatar&&e.appearence==="outlined"?(a(),u(Y,{key:0,size:"sm",picture:e.avatar.picture,label:e.avatar.label,class:"shrink-0"},null,8,["picture","label"])):n("",!0),o("div",{class:s(["rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center",{"text-white":e.appearence==="filled","bg-brandBlue-500":e.appearence==="filled"&&e.color==="brand-blue","bg-brandGreen-500":e.appearence==="filled"&&e.color==="brand-green","bg-indigo-500":e.appearence==="filled"&&e.color==="indigo","bg-purple-500":e.appearence==="filled"&&e.color==="purple","bg-pink-500":e.appearence==="filled"&&e.color==="pink","bg-neutral-surface text-gray-900 border border-neutral-surface":e.appearence==="outlined"}]),onContextmenu:t[2]||(t[2]=$(l=>e.contextMenuItems&&e.contextMenuItems.length&&S(l),["prevent"]))},[e.headline&&e.appearence==="outlined"?(a(),r("div",U,h(e.headline),1)):n("",!0),e.picture?(a(),r("div",{key:1,class:"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer",onClick:t[0]||(t[0]=l=>g("open-picture"))},[o("img",{src:e.picture,class:"w-full h-full object-cover"},null,8,q)])):n("",!0),e.file?(a(),u(N,{key:2,variant:e.appearence==="filled"?"alpha":"outlined",name:e.file.name,format:e.file.format,class:"cursor-pointer",onClick:t[1]||(t[1]=l=>g("open-file"))},null,8,["variant","name","format"])):n("",!0),e.message?(a(),r("div",{key:3,class:s(["flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap",{"text-neutral-inverse":e.appearence==="filled","text-neutral-darker":e.appearence==="outlined"}])},h(e.message),3)):n("",!0)],34)])]),e.appearence==="filled"&&e.error?(a(),u(D,{key:0,name:"ExclamationCircleIcon",solid:"",class:"w-6 h-6 text-error-active flex justify-start shrink-0"})):n("",!0),e.appearence==="filled"&&e.multiSelect&&!e.error?(a(),u(F,{key:1,"model-value":e.selected,color:e.color,class:"shrink-0","onUpdate:modelValue":t[3]||(t[3]=l=>g("row-selection",l))},null,8,["model-value","color"])):n("",!0)],2),e.contextMenuItems&&e.contextMenuItems.length&&b.value?(a(),r("div",{key:1,class:"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default",onClick:t[4]||(t[4]=()=>b.value=!1)},[o("div",{ref_key:"contextMenuElement",ref:c,class:"z-50 absolute bg-white rounded-md shadow p-2 min-w-52",style:M({top:I.value+"px",left:W.value+"px"})},[o("div",J,[(a(!0),r(H,null,A(e.contextMenuItems,(l,y)=>{var k;return a(),u(L,V({id:"option-"+y,ref_for:!0,ref:"itemRefs",key:y,class:["self-stretch",{"cursor-pointer":!l.disabled,"cursor-default":l.disabled}],role:"option",tabindex:"-1"},X(G.omit)(l,"onClick"),{disabled:l.disabled,"data-cy":`${(k=l.text)==null?void 0:k.trim().replaceAll(" ","").replaceAll(",","")}-dropdown-item`,onClick:$(Q=>{var C;return!l.disabled&&((C=l.onClick)==null?void 0:C.call(l))},["prevent"])}),null,16,["id","class","disabled","data-cy","onClick"])}),128))])],4)])):n("",!0),e.time||e.loading?(a(),r("div",{key:2,class:s(["text-xs text-neutral-lighter flex justify-end",{"opacity-0 select-none":e.appearence==="filled"&&(e.multiSelect||e.error)}])},[e.loading&&e.appearence==="filled"?(a(),r("div",K,"Invio in corso")):(a(),r("div",O,h(e.time),1))],2)):n("",!0)],4)],2))}});export{ne as default,te as elBubbleChatAppearences,re as elBubbleChatColors};
 //# sourceMappingURL=ElBubbleChat.vue.esm2.js.map

package/dist/ElBubbleChat.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElBubbleChat.vue.esm2.js","sources":["../../src/ElBubbleChat.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elBubbleChatAppearences = ['filled', 'outlined'] as const;\nexport type ElBubbleChatAppearences = (typeof elBubbleChatAppearences)[number];\n\nexport const elBubbleChatColors = ['brand-blue', 'brand-green', 'indigo', 'purple', 'pink'] as const;\nexport type ElBubbleChatColors = (typeof elBubbleChatColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport ElAvatar from './ElAvatar.vue';\nimport { DropdownItem } from './ElDropdown.vue';\nimport ElFile from './ElFile.vue';\nimport ElIcon from './ElIcon.vue';\nimport ElInputCheckbox, { ElInputCheckboxModelValues } from './forms/ElInputCheckbox.vue';\nimport { omit } from 'lodash';\nimport ElItem from './ElItem.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    appearence: ElBubbleChatAppearences;\n    color?: ElBubbleChatColors;\n    time?: string;\n    message?: string;\n    automaticMessage?: string;\n    headline?: string;\n    avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n    file?: Pick<InstanceType<typeof ElFile>['$props'], 'name' | 'format'>;\n    picture?: string;\n    loading?: boolean;\n    error?: boolean;\n    multiSelect?: boolean;\n    selected?: boolean;\n    maxWidth?: number;\n    contextMenuItems?: DropdownItem[];\n  }>(),\n  {\n    color: 'brand-blue',\n    file: undefined,\n    picture: undefined,\n    automaticMessage: undefined,\n    time: undefined,\n    message: undefined,\n    headline: undefined,\n    avatar: undefined,\n    maxWidth: 60,\n    contextMenuItems: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'row-selection', value: ElInputCheckboxModelValues): void;\n  (event: 'open-file'): void;\n  (event: 'open-picture'): void;\n}>();\n\nconst showMenu = ref<boolean>(false);\nconst menuX = ref<number>(0);\nconst menuY = ref<number>(0);\n\nconst handleShowContextMenu = (event: MouseEvent) => {\n  showMenu.value = true;\n  menuX.value = event.pageX;\n  menuY.value = event.pageY;\n};\n\nconst contextMenuElement = ref<HTMLDivElement>();\n\nconst contextMenuSize = computed(() => {\n  if (!contextMenuElement.value)\n    return {\n      width: 0,\n      height: 0,\n    };\n\n  return {\n    width: contextMenuElement.value.clientWidth,\n    height: contextMenuElement.value.clientHeight,\n  };\n});\n\nconst deviceSize = computed(() => {\n  return { width: window.innerWidth, height: window.innerHeight };\n});\n\nconst positionX = computed(() => {\n  const totalWidth = menuX.value + contextMenuSize.value.width;\n\n  if (totalWidth > deviceSize.value.width) return menuX.value - contextMenuSize.value.width;\n\n  return menuX.value;\n});\n\nconst positionY = computed(() => {\n  const totalHeight = menuY.value + contextMenuSize.value.height;\n\n  if (totalHeight > deviceSize.value.height) return menuY.value - contextMenuSize.value.height;\n\n  return menuY.value;\n});\n\nconst bubbleMaxWidth = computed(() => {\n  let maxWidth = props.maxWidth;\n\n  if (props.maxWidth < 10) maxWidth = 10;\n  if (props.maxWidth > 100) maxWidth = 100;\n\n  if (props.appearence === 'filled' && (props.error || props.multiSelect)) return `calc(${maxWidth}% + 2.75rem)`;\n\n  if (props.avatar) return `calc(${maxWidth}% + 3.25rem)`;\n\n  return `${maxWidth}%`;\n});\n</script>\n\n<template>\n  <div\n    class=\"w-full flex\"\n    :class=\"{\n      'justify-end': appearence === 'filled',\n      'justify-start': appearence === 'outlined',\n    }\"\n  >\n    <div\n      class=\"flex flex-col gap-2 w-fit\"\n      :style=\"{\n        /* The message container width should be max 60% (default) of parent width.\n        To ensure that when the checkbox for multiselect/error/avatar are visible,\n        we add extra width (same as multiselect/error/user avatar width),\n        so the maximum width of the message container should not change */\n        'max-width': bubbleMaxWidth,\n      }\"\n    >\n      <div\n        v-if=\"automaticMessage\"\n        class=\"text-sm font-semibold text-neutral-lighter flex\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n          'opacity-0 select-none': appearence === 'filled' && multiSelect && !error,\n          'mr-11': appearence === 'filled' && error,\n        }\"\n      >\n        {{ automaticMessage }}\n      </div>\n\n      <div\n        class=\"flex gap-5 items-center\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n        }\"\n      >\n        <div class=\"flex flex-col gap-2 w-fit\">\n          <div class=\"flex gap-3\">\n            <ElAvatar\n              v-if=\"avatar && appearence === 'outlined'\"\n              size=\"sm\"\n              :picture=\"avatar.picture\"\n              :label=\"avatar.label\"\n              class=\"shrink-0\"\n            />\n\n            <div\n              class=\"rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center\"\n              :class=\"{\n                'text-white': appearence === 'filled',\n                'bg-brandBlue-500': appearence === 'filled' && color === 'brand-blue',\n                'bg-brandGreen-500': appearence === 'filled' && color === 'brand-green',\n                'bg-indigo-500': appearence === 'filled' && color === 'indigo',\n                'bg-purple-500': appearence === 'filled' && color === 'purple',\n                'bg-pink-500': appearence === 'filled' && color === 'pink',\n                'bg-neutral-surface text-gray-900 border border-neutral-surface': appearence === 'outlined',\n              }\"\n              @contextmenu.prevent=\"contextMenuItems && contextMenuItems.length && handleShowContextMenu($event)\"\n            >\n              <div v-if=\"headline && appearence === 'outlined'\" class=\"text-neutral-lighter text-xs font-medium\">{{ headline }}</div>\n\n              <div v-if=\"picture\" class=\"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer\" @click=\"emit('open-picture')\">\n                <img :src=\"picture\" class=\"w-full h-full object-cover\" />\n              </div>\n\n              <ElFile\n                v-if=\"file\"\n                :variant=\"appearence === 'filled' ? 'alpha' : 'outlined'\"\n                :name=\"file.name\"\n                :format=\"file.format\"\n                class=\"cursor-pointer\"\n                @click=\"emit('open-file')\"\n              />\n\n              <div\n                v-if=\"message\"\n                class=\"flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap\"\n                :class=\"{\n                  'text-neutral-inverse': appearence === 'filled',\n                  'text-neutral-darker': appearence === 'outlined',\n                }\"\n              >\n                {{ message }}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <ElIcon\n          v-if=\"appearence === 'filled' && error\"\n          name=\"ExclamationCircleIcon\"\n          solid\n          class=\"w-6 h-6 text-error-active flex justify-start shrink-0\"\n        />\n\n        <ElInputCheckbox\n          v-if=\"appearence === 'filled' && multiSelect && !error\"\n          :model-value=\"selected\"\n          :color=\"color\"\n          class=\"shrink-0\"\n          @update:model-value=\"val => emit('row-selection', val)\"\n        />\n      </div>\n\n      <!-- Context menu -->\n      <div\n        v-if=\"contextMenuItems && contextMenuItems.length && showMenu\"\n        class=\"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default\"\n        @click=\"() => (showMenu = false)\"\n      >\n        <div\n          ref=\"contextMenuElement\"\n          class=\"z-50 absolute bg-white rounded-md shadow p-2 min-w-52\"\n          :style=\"{ top: positionY + 'px', left: positionX + 'px' }\"\n        >\n          <div class=\"flex w-full flex-col gap-1\">\n            <ElItem\n              v-for=\"(item, index) in contextMenuItems\"\n              :id=\"'option-' + index\"\n              ref=\"itemRefs\"\n              :key=\"index\"\n              class=\"self-stretch\"\n              :class=\"{\n                'cursor-pointer': !item.disabled,\n                'cursor-default': item.disabled,\n              }\"\n              role=\"option\"\n              tabindex=\"-1\"\n              v-bind=\"omit(item, 'onClick')\"\n              :disabled=\"item.disabled\"\n              :data-cy=\"`${item.text?.trim().replaceAll(' ', '').replaceAll(',', '')}-dropdown-item`\"\n              @click.prevent=\"!item.disabled && item.onClick?.()\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <div\n        v-if=\"time || loading\"\n        class=\"text-xs text-neutral-lighter flex justify-end\"\n        :class=\"{\n          'opacity-0 select-none': appearence === 'filled' && (multiSelect || error),\n        }\"\n      >\n        <div v-if=\"loading && appearence === 'filled'\">Invio in corso</div>\n        <div v-else>\n          {{ time }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["elBubbleChatAppearences","elBubbleChatColors","props","__props","emit","__emit","showMenu","ref","menuX","menuY","handleShowContextMenu","event","contextMenuElement","contextMenuSize","computed","deviceSize","positionX","positionY","bubbleMaxWidth","maxWidth"],"mappings":"+uBACaA,GAA0B,CAAC,SAAU,UAAU,EAG/CC,GAAqB,CAAC,aAAc,cAAe,SAAU,SAAU,MAAM,+dAc1F,MAAMC,EAAQC,EAgCRC,EAAOC,EAMPC,EAAWC,EAAa,EAAK,EAC7BC,EAAQD,EAAY,CAAC,EACrBE,EAAQF,EAAY,CAAC,EAErBG,EAAyBC,GAAsB,CACnDL,EAAS,MAAQ,GACjBE,EAAM,MAAQG,EAAM,MACpBF,EAAM,MAAQE,EAAM,KAAA,EAGhBC,EAAqBL,IAErBM,EAAkBC,EAAS,IAC1BF,EAAmB,MAMjB,CACL,MAAOA,EAAmB,MAAM,YAChC,OAAQA,EAAmB,MAAM,YAAA,EAP1B,CACL,MAAO,EACP,OAAQ,CAAA,CAOb,EAEKG,EAAaD,EAAS,KACnB,CAAE,MAAO,OAAO,WAAY,OAAQ,OAAO,aACnD,EAEKE,EAAYF,EAAS,IACNN,EAAM,MAAQK,EAAgB,MAAM,MAEtCE,EAAW,MAAM,MAAcP,EAAM,MAAQK,EAAgB,MAAM,MAE7EL,EAAM,KACd,EAEKS,EAAYH,EAAS,IACLL,EAAM,MAAQI,EAAgB,MAAM,OAEtCE,EAAW,MAAM,OAAeN,EAAM,MAAQI,EAAgB,MAAM,OAE/EJ,EAAM,KACd,EAEKS,EAAiBJ,EAAS,IAAM,CACpC,IAAIK,EAAWjB,EAAM,SAKrB,OAHIA,EAAM,SAAW,KAAeiB,EAAA,IAChCjB,EAAM,SAAW,MAAgBiB,EAAA,KAEjCjB,EAAM,aAAe,WAAaA,EAAM,OAASA,EAAM,aAAqB,QAAQiB,CAAQ,eAE5FjB,EAAM,OAAe,QAAQiB,CAAQ,eAElC,GAAGA,CAAQ,GAAA,CACnB"}
+{"version":3,"file":"ElBubbleChat.vue.esm2.js","sources":["../src/ElBubbleChat.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elBubbleChatAppearences = ['filled', 'outlined'] as const;\nexport type ElBubbleChatAppearences = (typeof elBubbleChatAppearences)[number];\n\nexport const elBubbleChatColors = ['brand-blue', 'brand-green', 'indigo', 'purple', 'pink'] as const;\nexport type ElBubbleChatColors = (typeof elBubbleChatColors)[number];\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport ElAvatar from './ElAvatar.vue';\nimport { DropdownItem } from './ElDropdown.vue';\nimport ElFile from './ElFile.vue';\nimport ElIcon from './ElIcon.vue';\nimport ElInputCheckbox, { ElInputCheckboxModelValues } from './forms/ElInputCheckbox.vue';\nimport { omit } from 'lodash';\nimport ElItem from './ElItem.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    appearence: ElBubbleChatAppearences;\n    color?: ElBubbleChatColors;\n    time?: string;\n    message?: string;\n    automaticMessage?: string;\n    headline?: string;\n    avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n    file?: Pick<InstanceType<typeof ElFile>['$props'], 'name' | 'format'>;\n    picture?: string;\n    loading?: boolean;\n    error?: boolean;\n    multiSelect?: boolean;\n    selected?: boolean;\n    maxWidth?: number;\n    contextMenuItems?: DropdownItem[];\n  }>(),\n  {\n    color: 'brand-blue',\n    file: undefined,\n    picture: undefined,\n    automaticMessage: undefined,\n    time: undefined,\n    message: undefined,\n    headline: undefined,\n    avatar: undefined,\n    maxWidth: 60,\n    contextMenuItems: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'row-selection', value: ElInputCheckboxModelValues): void;\n  (event: 'open-file'): void;\n  (event: 'open-picture'): void;\n}>();\n\nconst showMenu = ref<boolean>(false);\nconst menuX = ref<number>(0);\nconst menuY = ref<number>(0);\n\nconst handleShowContextMenu = (event: MouseEvent) => {\n  showMenu.value = true;\n  menuX.value = event.pageX;\n  menuY.value = event.pageY;\n};\n\nconst contextMenuElement = ref<HTMLDivElement>();\n\nconst contextMenuSize = computed(() => {\n  if (!contextMenuElement.value)\n    return {\n      width: 0,\n      height: 0,\n    };\n\n  return {\n    width: contextMenuElement.value.clientWidth,\n    height: contextMenuElement.value.clientHeight,\n  };\n});\n\nconst deviceSize = computed(() => {\n  return { width: window.innerWidth, height: window.innerHeight };\n});\n\nconst positionX = computed(() => {\n  const totalWidth = menuX.value + contextMenuSize.value.width;\n\n  if (totalWidth > deviceSize.value.width) return menuX.value - contextMenuSize.value.width;\n\n  return menuX.value;\n});\n\nconst positionY = computed(() => {\n  const totalHeight = menuY.value + contextMenuSize.value.height;\n\n  if (totalHeight > deviceSize.value.height) return menuY.value - contextMenuSize.value.height;\n\n  return menuY.value;\n});\n\nconst bubbleMaxWidth = computed(() => {\n  let maxWidth = props.maxWidth;\n\n  if (props.maxWidth < 10) maxWidth = 10;\n  if (props.maxWidth > 100) maxWidth = 100;\n\n  if (props.appearence === 'filled' && (props.error || props.multiSelect)) return `calc(${maxWidth}% + 2.75rem)`;\n\n  if (props.avatar) return `calc(${maxWidth}% + 3.25rem)`;\n\n  return `${maxWidth}%`;\n});\n</script>\n\n<template>\n  <div\n    class=\"w-full flex\"\n    :class=\"{\n      'justify-end': appearence === 'filled',\n      'justify-start': appearence === 'outlined',\n    }\"\n  >\n    <div\n      class=\"flex flex-col gap-2 w-fit\"\n      :style=\"{\n        /* The message container width should be max 60% (default) of parent width.\n        To ensure that when the checkbox for multiselect/error/avatar are visible,\n        we add extra width (same as multiselect/error/user avatar width),\n        so the maximum width of the message container should not change */\n        'max-width': bubbleMaxWidth,\n      }\"\n    >\n      <div\n        v-if=\"automaticMessage\"\n        class=\"text-sm font-semibold text-neutral-lighter flex\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n          'opacity-0 select-none': appearence === 'filled' && multiSelect && !error,\n          'mr-11': appearence === 'filled' && error,\n        }\"\n      >\n        {{ automaticMessage }}\n      </div>\n\n      <div\n        class=\"flex gap-5 items-center\"\n        :class=\"{\n          'justify-end': appearence === 'filled',\n          'justify-start': appearence === 'outlined',\n        }\"\n      >\n        <div class=\"flex flex-col gap-2 w-fit\">\n          <div class=\"flex gap-3\">\n            <ElAvatar\n              v-if=\"avatar && appearence === 'outlined'\"\n              size=\"sm\"\n              :picture=\"avatar.picture\"\n              :label=\"avatar.label\"\n              class=\"shrink-0\"\n            />\n\n            <div\n              class=\"rounded-2xl shadow-sm p-2 flex flex-col gap-1 justify-center\"\n              :class=\"{\n                'text-white': appearence === 'filled',\n                'bg-brandBlue-500': appearence === 'filled' && color === 'brand-blue',\n                'bg-brandGreen-500': appearence === 'filled' && color === 'brand-green',\n                'bg-indigo-500': appearence === 'filled' && color === 'indigo',\n                'bg-purple-500': appearence === 'filled' && color === 'purple',\n                'bg-pink-500': appearence === 'filled' && color === 'pink',\n                'bg-neutral-surface text-gray-900 border border-neutral-surface': appearence === 'outlined',\n              }\"\n              @contextmenu.prevent=\"contextMenuItems && contextMenuItems.length && handleShowContextMenu($event)\"\n            >\n              <div v-if=\"headline && appearence === 'outlined'\" class=\"text-neutral-lighter text-xs font-medium\">{{ headline }}</div>\n\n              <div v-if=\"picture\" class=\"overflow-hidden rounded-xl w-48 max-h-80 cursor-pointer\" @click=\"emit('open-picture')\">\n                <img :src=\"picture\" class=\"w-full h-full object-cover\" />\n              </div>\n\n              <ElFile\n                v-if=\"file\"\n                :variant=\"appearence === 'filled' ? 'alpha' : 'outlined'\"\n                :name=\"file.name\"\n                :format=\"file.format\"\n                class=\"cursor-pointer\"\n                @click=\"emit('open-file')\"\n              />\n\n              <div\n                v-if=\"message\"\n                class=\"flex text-sm font-normal supports-[overflow-wrap:anywhere]:[overflow-wrap:anywhere] supports-[not(overflow-wrap:anywhere)]:[word-break:break-word] whitespace-pre-wrap\"\n                :class=\"{\n                  'text-neutral-inverse': appearence === 'filled',\n                  'text-neutral-darker': appearence === 'outlined',\n                }\"\n              >\n                {{ message }}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <ElIcon\n          v-if=\"appearence === 'filled' && error\"\n          name=\"ExclamationCircleIcon\"\n          solid\n          class=\"w-6 h-6 text-error-active flex justify-start shrink-0\"\n        />\n\n        <ElInputCheckbox\n          v-if=\"appearence === 'filled' && multiSelect && !error\"\n          :model-value=\"selected\"\n          :color=\"color\"\n          class=\"shrink-0\"\n          @update:model-value=\"val => emit('row-selection', val)\"\n        />\n      </div>\n\n      <!-- Context menu -->\n      <div\n        v-if=\"contextMenuItems && contextMenuItems.length && showMenu\"\n        class=\"fixed w-screen h-screen top-0 left-0 z-40 bg-transparent cursor-default\"\n        @click=\"() => (showMenu = false)\"\n      >\n        <div\n          ref=\"contextMenuElement\"\n          class=\"z-50 absolute bg-white rounded-md shadow p-2 min-w-52\"\n          :style=\"{ top: positionY + 'px', left: positionX + 'px' }\"\n        >\n          <div class=\"flex w-full flex-col gap-1\">\n            <ElItem\n              v-for=\"(item, index) in contextMenuItems\"\n              :id=\"'option-' + index\"\n              ref=\"itemRefs\"\n              :key=\"index\"\n              class=\"self-stretch\"\n              :class=\"{\n                'cursor-pointer': !item.disabled,\n                'cursor-default': item.disabled,\n              }\"\n              role=\"option\"\n              tabindex=\"-1\"\n              v-bind=\"omit(item, 'onClick')\"\n              :disabled=\"item.disabled\"\n              :data-cy=\"`${item.text?.trim().replaceAll(' ', '').replaceAll(',', '')}-dropdown-item`\"\n              @click.prevent=\"!item.disabled && item.onClick?.()\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <div\n        v-if=\"time || loading\"\n        class=\"text-xs text-neutral-lighter flex justify-end\"\n        :class=\"{\n          'opacity-0 select-none': appearence === 'filled' && (multiSelect || error),\n        }\"\n      >\n        <div v-if=\"loading && appearence === 'filled'\">Invio in corso</div>\n        <div v-else>\n          {{ time }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["elBubbleChatAppearences","elBubbleChatColors","props","__props","emit","__emit","showMenu","ref","menuX","menuY","handleShowContextMenu","event","contextMenuElement","contextMenuSize","computed","deviceSize","positionX","positionY","bubbleMaxWidth","maxWidth"],"mappings":"8uBACaA,GAA0B,CAAC,SAAU,UAAU,EAG/CC,GAAqB,CAAC,aAAc,cAAe,SAAU,SAAU,MAAM,+dAc1F,MAAMC,EAAQC,EAgCRC,EAAOC,EAMPC,EAAWC,EAAa,EAAK,EAC7BC,EAAQD,EAAY,CAAC,EACrBE,EAAQF,EAAY,CAAC,EAErBG,EAAyBC,GAAsB,CACnDL,EAAS,MAAQ,GACjBE,EAAM,MAAQG,EAAM,MACpBF,EAAM,MAAQE,EAAM,KAAA,EAGhBC,EAAqBL,IAErBM,EAAkBC,EAAS,IAC1BF,EAAmB,MAMjB,CACL,MAAOA,EAAmB,MAAM,YAChC,OAAQA,EAAmB,MAAM,YAAA,EAP1B,CACL,MAAO,EACP,OAAQ,CAAA,CAOb,EAEKG,EAAaD,EAAS,KACnB,CAAE,MAAO,OAAO,WAAY,OAAQ,OAAO,aACnD,EAEKE,EAAYF,EAAS,IACNN,EAAM,MAAQK,EAAgB,MAAM,MAEtCE,EAAW,MAAM,MAAcP,EAAM,MAAQK,EAAgB,MAAM,MAE7EL,EAAM,KACd,EAEKS,EAAYH,EAAS,IACLL,EAAM,MAAQI,EAAgB,MAAM,OAEtCE,EAAW,MAAM,OAAeN,EAAM,MAAQI,EAAgB,MAAM,OAE/EJ,EAAM,KACd,EAEKS,EAAiBJ,EAAS,IAAM,CACpC,IAAIK,EAAWjB,EAAM,SAKrB,OAHIA,EAAM,SAAW,KAAeiB,EAAA,IAChCjB,EAAM,SAAW,MAAgBiB,EAAA,KAEjCjB,EAAM,aAAe,WAAaA,EAAM,OAASA,EAAM,aAAqB,QAAQiB,CAAQ,eAE5FjB,EAAM,OAAe,QAAQiB,CAAQ,eAElC,GAAGA,CAAQ,GAAA,CACnB"}

package/dist/ElButton.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElButton.vue.cjs2.js","sources":["../../src/ElButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elButtonSizes = ['xs', 'sm', 'base', 'l', 'xl'] as const;\nexport type ElButtonSize = (typeof elButtonSizes)[number];\n\nexport const elButtonVariants = ['primary', 'secondary', 'tertiary'] as const;\nexport type ElButtonVariant = (typeof elButtonVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport { ref, computed, ButtonHTMLAttributes } from 'vue';\n\nexport interface ElButtonProps {\n  disabled?: boolean;\n  dark?: boolean;\n  loading?: boolean;\n  icon?: ElIconProps;\n  iconRight?: boolean;\n  error?: boolean;\n  label: string;\n  size?: ElButtonSize;\n  variant?: ElButtonVariant;\n  type?: ButtonHTMLAttributes['type'];\n  loadOnClick?: boolean;\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ElButtonProps>(), {\n  disabled: false,\n  dark: false,\n  loading: false,\n  error: false,\n  label: '',\n  icon: undefined,\n  size: 'base',\n  variant: 'primary',\n  type: 'button',\n  loadOnClick: false,\n  onClick: undefined,\n});\n\nconst callbackLoading = ref<boolean>(false);\nconst defaultLoading = ref<boolean>(false);\nconst computedLoading = computed(() => callbackLoading.value || defaultLoading.value || props.loading);\n\nconst onClick = async () => {\n  if (callbackLoading.value || computedLoading.value) return;\n  defaultLoading.value = callbackLoading.value = props.loadOnClick;\n  setTimeout(() => {\n    defaultLoading.value = false;\n  }, 3000);\n  await props.onClick?.();\n  callbackLoading.value = false;\n};\n</script>\n\n<template>\n  <button\n    :disabled=\"disabled || loading\"\n    :type=\"type\"\n    class=\"inline-flex items-center justify-center py-0 font-semibold leading-4 transition duration-150 ease-in-out\"\n    :class=\"{\n      'h-6 rounded text-xs': size === 'xs',\n      'h-7 rounded text-xs': size === 'sm',\n      'h-8 rounded-md text-sm': size === 'base',\n      'text-base h-10 rounded-md ': size === 'l',\n      'text-base h-12 rounded-md ': size === 'xl',\n      'cursor-pointer': !computedLoading,\n      'cursor-wait': computedLoading,\n      'px-4': variant !== 'tertiary' && (size === 'base' || size === 'l' || size === 'xl'),\n      'px-3': (variant !== 'tertiary' && (size === 'sm' || size === 'xs')) || (variant === 'tertiary' && (size === 'l' || size === 'xl')),\n      'px-2': variant === 'tertiary' && (size === 'xs' || size === 'sm' || size === 'base'),\n      ...(dark\n        ? {\n            'bg-alpha-200 text-white hover:bg-alpha-300 focus:bg-alpha-300 focus:border focus:border-alpha-400 focus:outline-none':\n              variant === 'primary' && !disabled,\n            'bg-alpha-100 text-alpha-400 cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-black border border-alpha-500 hover:bg-alpha-100 focus:bg-alpha-100 text-white focus:outline-none':\n              variant === 'secondary' && !error && !disabled,\n            'text-alpha-400 bg-alpha-100 cursor-not-allowed focus:outline-none': variant === 'secondary' && disabled,\n            'bg-transparent hover:bg-alpha-100 focus:bg-alpha-100 border-none text-white focus:outline-none':\n              variant === 'tertiary' && !error && !disabled,\n            'text-alpha-400 cursor-not-allowed border-none bg-transparent focus:outline-none': variant === 'tertiary' && disabled,\n          }\n        : {\n            'bg-primary hover:bg-primary-hover focus:bg-primary-pressed focus:outlined-primary text-white':\n              variant === 'primary' && !error && !disabled,\n            'bg-error hover:bg-error-hover focus:bg-error-pressed focus:outlined-error text-white':\n              variant === 'primary' && error && !disabled,\n            'bg-neutral-inactive text-neutral-inactive cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-white border border-primary hover:border-primary-hover hover:bg-primary-light-hover hover:text-primary-hover focus:text-primary-pressed focus:bg-primary-light focus:border-primary-pressed text-primary focus:outlined-primary':\n              variant === 'secondary' && !error && !disabled,\n            'border-error text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border bg-white':\n              variant === 'secondary' && error && !disabled,\n            'text-neutral-inactive border-neutral-inactive cursor-not-allowed border': variant === 'secondary' && disabled,\n            'text-primary hover:text-primary-hover hover:bg-primary-light-hover focus:text-primary-pressed focus:bg-primary-light-pressed focus:outlined-primary border-none bg-transparent':\n              variant === 'tertiary' && !error && !disabled,\n            'text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border-none':\n              variant === 'tertiary' && error && !disabled,\n            'text-neutral-inactive cursor-not-allowed border-none bg-transparent': variant === 'tertiary' && disabled,\n          }),\n    }\"\n    :data-cy=\"`${label.trim()?.replaceAll(' ', '').replaceAll(',', '')}-button`\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"!computedLoading\" class=\"inline-flex items-center\" :class=\"iconRight ? 'flex-row-reverse' : 'flex-row'\">\n      <ElIcon\n        v-if=\"icon\"\n        :name=\"icon.name\"\n        :solid=\"icon.solid\"\n        :class=\"{\n          'h-[14px] w-[14px]': size === 'xs',\n          'h-4 w-4': size === 'sm',\n          'h-5 w-5': size === 'base',\n          'h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n      />\n      <span\n        v-if=\"icon && label !== ''\"\n        :class=\"{\n          'w-1': size === 'xs',\n          'w-2': size === 'sm' || size === 'base',\n          'w-3': size === 'l' || size === 'xl',\n        }\"\n      ></span>\n      <span class=\"font-semibold\">{{ label }}</span>\n    </span>\n    <span v-else class=\"inline-flex items-center\">\n      <svg\n        class=\"animate-spin\"\n        :class=\"{\n          'mr-1 h-[14px] w-[14px]': size === 'xs',\n          'mr-2 h-4 w-4': size === 'sm',\n          'mr-2 h-5 w-5': size === 'base',\n          'mr-3 h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n      </svg>\n      <span class=\"font-semibold\">Un attimo...</span>\n    </span>\n  </button>\n</template>\n"],"names":["elButtonSizes","elButtonVariants","props","__props","callbackLoading","ref","defaultLoading","computedLoading","computed","onClick","_a"],"mappings":"6pBACaA,EAAgB,CAAC,KAAM,KAAM,OAAQ,IAAK,IAAI,EAG9CC,EAAmB,CAAC,UAAW,YAAa,UAAU,uZAuBnE,MAAMC,EAAQC,EAcRC,EAAkBC,MAAa,EAAK,EACpCC,EAAiBD,MAAa,EAAK,EACnCE,EAAkBC,WAAS,IAAMJ,EAAgB,OAASE,EAAe,OAASJ,EAAM,OAAO,EAE/FO,EAAU,SAAY,OACtBL,EAAgB,OAASG,EAAgB,QAC9BD,EAAA,MAAQF,EAAgB,MAAQF,EAAM,YACrD,WAAW,IAAM,CACfI,EAAe,MAAQ,IACtB,GAAI,EACP,OAAMI,EAAAR,EAAM,UAAN,YAAAQ,EAAA,KAAAR,IACNE,EAAgB,MAAQ,GAAA"}
+{"version":3,"file":"ElButton.vue.cjs2.js","sources":["../src/ElButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elButtonSizes = ['xs', 'sm', 'base', 'l', 'xl'] as const;\nexport type ElButtonSize = (typeof elButtonSizes)[number];\n\nexport const elButtonVariants = ['primary', 'secondary', 'tertiary'] as const;\nexport type ElButtonVariant = (typeof elButtonVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport { ref, computed, ButtonHTMLAttributes } from 'vue';\n\nexport interface ElButtonProps {\n  disabled?: boolean;\n  dark?: boolean;\n  loading?: boolean;\n  icon?: ElIconProps;\n  iconRight?: boolean;\n  error?: boolean;\n  label: string;\n  size?: ElButtonSize;\n  variant?: ElButtonVariant;\n  type?: ButtonHTMLAttributes['type'];\n  loadOnClick?: boolean;\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ElButtonProps>(), {\n  disabled: false,\n  dark: false,\n  loading: false,\n  error: false,\n  label: '',\n  icon: undefined,\n  size: 'base',\n  variant: 'primary',\n  type: 'button',\n  loadOnClick: false,\n  onClick: undefined,\n});\n\nconst callbackLoading = ref<boolean>(false);\nconst defaultLoading = ref<boolean>(false);\nconst computedLoading = computed(() => callbackLoading.value || defaultLoading.value || props.loading);\n\nconst onClick = async () => {\n  if (callbackLoading.value || computedLoading.value) return;\n  defaultLoading.value = callbackLoading.value = props.loadOnClick;\n  setTimeout(() => {\n    defaultLoading.value = false;\n  }, 3000);\n  await props.onClick?.();\n  callbackLoading.value = false;\n};\n</script>\n\n<template>\n  <button\n    :disabled=\"disabled || loading\"\n    :type=\"type\"\n    class=\"inline-flex items-center justify-center py-0 font-semibold leading-4 transition duration-150 ease-in-out\"\n    :class=\"{\n      'h-6 rounded text-xs': size === 'xs',\n      'h-7 rounded text-xs': size === 'sm',\n      'h-8 rounded-md text-sm': size === 'base',\n      'text-base h-10 rounded-md ': size === 'l',\n      'text-base h-12 rounded-md ': size === 'xl',\n      'cursor-pointer': !computedLoading,\n      'cursor-wait': computedLoading,\n      'px-4': variant !== 'tertiary' && (size === 'base' || size === 'l' || size === 'xl'),\n      'px-3': (variant !== 'tertiary' && (size === 'sm' || size === 'xs')) || (variant === 'tertiary' && (size === 'l' || size === 'xl')),\n      'px-2': variant === 'tertiary' && (size === 'xs' || size === 'sm' || size === 'base'),\n      ...(dark\n        ? {\n            'bg-alpha-200 text-white hover:bg-alpha-300 focus:bg-alpha-300 focus:border focus:border-alpha-400 focus:outline-none':\n              variant === 'primary' && !disabled,\n            'bg-alpha-100 text-alpha-400 cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-black border border-alpha-500 hover:bg-alpha-100 focus:bg-alpha-100 text-white focus:outline-none':\n              variant === 'secondary' && !error && !disabled,\n            'text-alpha-400 bg-alpha-100 cursor-not-allowed focus:outline-none': variant === 'secondary' && disabled,\n            'bg-transparent hover:bg-alpha-100 focus:bg-alpha-100 border-none text-white focus:outline-none':\n              variant === 'tertiary' && !error && !disabled,\n            'text-alpha-400 cursor-not-allowed border-none bg-transparent focus:outline-none': variant === 'tertiary' && disabled,\n          }\n        : {\n            'bg-primary hover:bg-primary-hover focus:bg-primary-pressed focus:outlined-primary text-white':\n              variant === 'primary' && !error && !disabled,\n            'bg-error hover:bg-error-hover focus:bg-error-pressed focus:outlined-error text-white':\n              variant === 'primary' && error && !disabled,\n            'bg-neutral-inactive text-neutral-inactive cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-white border border-primary hover:border-primary-hover hover:bg-primary-light-hover hover:text-primary-hover focus:text-primary-pressed focus:bg-primary-light focus:border-primary-pressed text-primary focus:outlined-primary':\n              variant === 'secondary' && !error && !disabled,\n            'border-error text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border bg-white':\n              variant === 'secondary' && error && !disabled,\n            'text-neutral-inactive border-neutral-inactive cursor-not-allowed border': variant === 'secondary' && disabled,\n            'text-primary hover:text-primary-hover hover:bg-primary-light-hover focus:text-primary-pressed focus:bg-primary-light-pressed focus:outlined-primary border-none bg-transparent':\n              variant === 'tertiary' && !error && !disabled,\n            'text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border-none':\n              variant === 'tertiary' && error && !disabled,\n            'text-neutral-inactive cursor-not-allowed border-none bg-transparent': variant === 'tertiary' && disabled,\n          }),\n    }\"\n    :data-cy=\"`${label.trim()?.replaceAll(' ', '').replaceAll(',', '')}-button`\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"!computedLoading\" class=\"inline-flex items-center\" :class=\"iconRight ? 'flex-row-reverse' : 'flex-row'\">\n      <ElIcon\n        v-if=\"icon\"\n        :name=\"icon.name\"\n        :solid=\"icon.solid\"\n        :class=\"{\n          'h-[14px] w-[14px]': size === 'xs',\n          'h-4 w-4': size === 'sm',\n          'h-5 w-5': size === 'base',\n          'h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n      />\n      <span\n        v-if=\"icon && label !== ''\"\n        :class=\"{\n          'w-1': size === 'xs',\n          'w-2': size === 'sm' || size === 'base',\n          'w-3': size === 'l' || size === 'xl',\n        }\"\n      ></span>\n      <span class=\"font-semibold\">{{ label }}</span>\n    </span>\n    <span v-else class=\"inline-flex items-center\">\n      <svg\n        class=\"animate-spin\"\n        :class=\"{\n          'mr-1 h-[14px] w-[14px]': size === 'xs',\n          'mr-2 h-4 w-4': size === 'sm',\n          'mr-2 h-5 w-5': size === 'base',\n          'mr-3 h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n      </svg>\n      <span class=\"font-semibold\">Un attimo...</span>\n    </span>\n  </button>\n</template>\n"],"names":["elButtonSizes","elButtonVariants","props","__props","callbackLoading","ref","defaultLoading","computedLoading","computed","onClick","_a"],"mappings":"6pBACaA,EAAgB,CAAC,KAAM,KAAM,OAAQ,IAAK,IAAI,EAG9CC,EAAmB,CAAC,UAAW,YAAa,UAAU,uZAuBnE,MAAMC,EAAQC,EAcRC,EAAkBC,MAAa,EAAK,EACpCC,EAAiBD,MAAa,EAAK,EACnCE,EAAkBC,WAAS,IAAMJ,EAAgB,OAASE,EAAe,OAASJ,EAAM,OAAO,EAE/FO,EAAU,SAAY,OACtBL,EAAgB,OAASG,EAAgB,QAC9BD,EAAA,MAAQF,EAAgB,MAAQF,EAAM,YACrD,WAAW,IAAM,CACfI,EAAe,MAAQ,IACtB,GAAI,EACP,OAAMI,EAAAR,EAAM,UAAN,YAAAQ,EAAA,KAAAR,IACNE,EAAgB,MAAQ,GAAA"}

package/dist/ElButton.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElButton.vue.esm2.js","sources":["../../src/ElButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elButtonSizes = ['xs', 'sm', 'base', 'l', 'xl'] as const;\nexport type ElButtonSize = (typeof elButtonSizes)[number];\n\nexport const elButtonVariants = ['primary', 'secondary', 'tertiary'] as const;\nexport type ElButtonVariant = (typeof elButtonVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport { ref, computed, ButtonHTMLAttributes } from 'vue';\n\nexport interface ElButtonProps {\n  disabled?: boolean;\n  dark?: boolean;\n  loading?: boolean;\n  icon?: ElIconProps;\n  iconRight?: boolean;\n  error?: boolean;\n  label: string;\n  size?: ElButtonSize;\n  variant?: ElButtonVariant;\n  type?: ButtonHTMLAttributes['type'];\n  loadOnClick?: boolean;\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ElButtonProps>(), {\n  disabled: false,\n  dark: false,\n  loading: false,\n  error: false,\n  label: '',\n  icon: undefined,\n  size: 'base',\n  variant: 'primary',\n  type: 'button',\n  loadOnClick: false,\n  onClick: undefined,\n});\n\nconst callbackLoading = ref<boolean>(false);\nconst defaultLoading = ref<boolean>(false);\nconst computedLoading = computed(() => callbackLoading.value || defaultLoading.value || props.loading);\n\nconst onClick = async () => {\n  if (callbackLoading.value || computedLoading.value) return;\n  defaultLoading.value = callbackLoading.value = props.loadOnClick;\n  setTimeout(() => {\n    defaultLoading.value = false;\n  }, 3000);\n  await props.onClick?.();\n  callbackLoading.value = false;\n};\n</script>\n\n<template>\n  <button\n    :disabled=\"disabled || loading\"\n    :type=\"type\"\n    class=\"inline-flex items-center justify-center py-0 font-semibold leading-4 transition duration-150 ease-in-out\"\n    :class=\"{\n      'h-6 rounded text-xs': size === 'xs',\n      'h-7 rounded text-xs': size === 'sm',\n      'h-8 rounded-md text-sm': size === 'base',\n      'text-base h-10 rounded-md ': size === 'l',\n      'text-base h-12 rounded-md ': size === 'xl',\n      'cursor-pointer': !computedLoading,\n      'cursor-wait': computedLoading,\n      'px-4': variant !== 'tertiary' && (size === 'base' || size === 'l' || size === 'xl'),\n      'px-3': (variant !== 'tertiary' && (size === 'sm' || size === 'xs')) || (variant === 'tertiary' && (size === 'l' || size === 'xl')),\n      'px-2': variant === 'tertiary' && (size === 'xs' || size === 'sm' || size === 'base'),\n      ...(dark\n        ? {\n            'bg-alpha-200 text-white hover:bg-alpha-300 focus:bg-alpha-300 focus:border focus:border-alpha-400 focus:outline-none':\n              variant === 'primary' && !disabled,\n            'bg-alpha-100 text-alpha-400 cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-black border border-alpha-500 hover:bg-alpha-100 focus:bg-alpha-100 text-white focus:outline-none':\n              variant === 'secondary' && !error && !disabled,\n            'text-alpha-400 bg-alpha-100 cursor-not-allowed focus:outline-none': variant === 'secondary' && disabled,\n            'bg-transparent hover:bg-alpha-100 focus:bg-alpha-100 border-none text-white focus:outline-none':\n              variant === 'tertiary' && !error && !disabled,\n            'text-alpha-400 cursor-not-allowed border-none bg-transparent focus:outline-none': variant === 'tertiary' && disabled,\n          }\n        : {\n            'bg-primary hover:bg-primary-hover focus:bg-primary-pressed focus:outlined-primary text-white':\n              variant === 'primary' && !error && !disabled,\n            'bg-error hover:bg-error-hover focus:bg-error-pressed focus:outlined-error text-white':\n              variant === 'primary' && error && !disabled,\n            'bg-neutral-inactive text-neutral-inactive cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-white border border-primary hover:border-primary-hover hover:bg-primary-light-hover hover:text-primary-hover focus:text-primary-pressed focus:bg-primary-light focus:border-primary-pressed text-primary focus:outlined-primary':\n              variant === 'secondary' && !error && !disabled,\n            'border-error text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border bg-white':\n              variant === 'secondary' && error && !disabled,\n            'text-neutral-inactive border-neutral-inactive cursor-not-allowed border': variant === 'secondary' && disabled,\n            'text-primary hover:text-primary-hover hover:bg-primary-light-hover focus:text-primary-pressed focus:bg-primary-light-pressed focus:outlined-primary border-none bg-transparent':\n              variant === 'tertiary' && !error && !disabled,\n            'text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border-none':\n              variant === 'tertiary' && error && !disabled,\n            'text-neutral-inactive cursor-not-allowed border-none bg-transparent': variant === 'tertiary' && disabled,\n          }),\n    }\"\n    :data-cy=\"`${label.trim()?.replaceAll(' ', '').replaceAll(',', '')}-button`\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"!computedLoading\" class=\"inline-flex items-center\" :class=\"iconRight ? 'flex-row-reverse' : 'flex-row'\">\n      <ElIcon\n        v-if=\"icon\"\n        :name=\"icon.name\"\n        :solid=\"icon.solid\"\n        :class=\"{\n          'h-[14px] w-[14px]': size === 'xs',\n          'h-4 w-4': size === 'sm',\n          'h-5 w-5': size === 'base',\n          'h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n      />\n      <span\n        v-if=\"icon && label !== ''\"\n        :class=\"{\n          'w-1': size === 'xs',\n          'w-2': size === 'sm' || size === 'base',\n          'w-3': size === 'l' || size === 'xl',\n        }\"\n      ></span>\n      <span class=\"font-semibold\">{{ label }}</span>\n    </span>\n    <span v-else class=\"inline-flex items-center\">\n      <svg\n        class=\"animate-spin\"\n        :class=\"{\n          'mr-1 h-[14px] w-[14px]': size === 'xs',\n          'mr-2 h-4 w-4': size === 'sm',\n          'mr-2 h-5 w-5': size === 'base',\n          'mr-3 h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n      </svg>\n      <span class=\"font-semibold\">Un attimo...</span>\n    </span>\n  </button>\n</template>\n"],"names":["elButtonSizes","elButtonVariants","props","__props","callbackLoading","ref","defaultLoading","computedLoading","computed","onClick","_a"],"mappings":"urBACaA,EAAgB,CAAC,KAAM,KAAM,OAAQ,IAAK,IAAI,EAG9CC,EAAmB,CAAC,UAAW,YAAa,UAAU,uYAuBnE,MAAMC,EAAQC,EAcRC,EAAkBC,EAAa,EAAK,EACpCC,EAAiBD,EAAa,EAAK,EACnCE,EAAkBC,EAAS,IAAMJ,EAAgB,OAASE,EAAe,OAASJ,EAAM,OAAO,EAE/FO,EAAU,SAAY,OACtBL,EAAgB,OAASG,EAAgB,QAC9BD,EAAA,MAAQF,EAAgB,MAAQF,EAAM,YACrD,WAAW,IAAM,CACfI,EAAe,MAAQ,IACtB,GAAI,EACP,OAAMI,EAAAR,EAAM,UAAN,YAAAQ,EAAA,KAAAR,IACNE,EAAgB,MAAQ,GAAA"}
+{"version":3,"file":"ElButton.vue.esm2.js","sources":["../src/ElButton.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elButtonSizes = ['xs', 'sm', 'base', 'l', 'xl'] as const;\nexport type ElButtonSize = (typeof elButtonSizes)[number];\n\nexport const elButtonVariants = ['primary', 'secondary', 'tertiary'] as const;\nexport type ElButtonVariant = (typeof elButtonVariants)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport { ref, computed, ButtonHTMLAttributes } from 'vue';\n\nexport interface ElButtonProps {\n  disabled?: boolean;\n  dark?: boolean;\n  loading?: boolean;\n  icon?: ElIconProps;\n  iconRight?: boolean;\n  error?: boolean;\n  label: string;\n  size?: ElButtonSize;\n  variant?: ElButtonVariant;\n  type?: ButtonHTMLAttributes['type'];\n  loadOnClick?: boolean;\n  onClick?: (() => unknown) | (() => Promise<unknown>);\n}\n\nconst props = withDefaults(defineProps<ElButtonProps>(), {\n  disabled: false,\n  dark: false,\n  loading: false,\n  error: false,\n  label: '',\n  icon: undefined,\n  size: 'base',\n  variant: 'primary',\n  type: 'button',\n  loadOnClick: false,\n  onClick: undefined,\n});\n\nconst callbackLoading = ref<boolean>(false);\nconst defaultLoading = ref<boolean>(false);\nconst computedLoading = computed(() => callbackLoading.value || defaultLoading.value || props.loading);\n\nconst onClick = async () => {\n  if (callbackLoading.value || computedLoading.value) return;\n  defaultLoading.value = callbackLoading.value = props.loadOnClick;\n  setTimeout(() => {\n    defaultLoading.value = false;\n  }, 3000);\n  await props.onClick?.();\n  callbackLoading.value = false;\n};\n</script>\n\n<template>\n  <button\n    :disabled=\"disabled || loading\"\n    :type=\"type\"\n    class=\"inline-flex items-center justify-center py-0 font-semibold leading-4 transition duration-150 ease-in-out\"\n    :class=\"{\n      'h-6 rounded text-xs': size === 'xs',\n      'h-7 rounded text-xs': size === 'sm',\n      'h-8 rounded-md text-sm': size === 'base',\n      'text-base h-10 rounded-md ': size === 'l',\n      'text-base h-12 rounded-md ': size === 'xl',\n      'cursor-pointer': !computedLoading,\n      'cursor-wait': computedLoading,\n      'px-4': variant !== 'tertiary' && (size === 'base' || size === 'l' || size === 'xl'),\n      'px-3': (variant !== 'tertiary' && (size === 'sm' || size === 'xs')) || (variant === 'tertiary' && (size === 'l' || size === 'xl')),\n      'px-2': variant === 'tertiary' && (size === 'xs' || size === 'sm' || size === 'base'),\n      ...(dark\n        ? {\n            'bg-alpha-200 text-white hover:bg-alpha-300 focus:bg-alpha-300 focus:border focus:border-alpha-400 focus:outline-none':\n              variant === 'primary' && !disabled,\n            'bg-alpha-100 text-alpha-400 cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-black border border-alpha-500 hover:bg-alpha-100 focus:bg-alpha-100 text-white focus:outline-none':\n              variant === 'secondary' && !error && !disabled,\n            'text-alpha-400 bg-alpha-100 cursor-not-allowed focus:outline-none': variant === 'secondary' && disabled,\n            'bg-transparent hover:bg-alpha-100 focus:bg-alpha-100 border-none text-white focus:outline-none':\n              variant === 'tertiary' && !error && !disabled,\n            'text-alpha-400 cursor-not-allowed border-none bg-transparent focus:outline-none': variant === 'tertiary' && disabled,\n          }\n        : {\n            'bg-primary hover:bg-primary-hover focus:bg-primary-pressed focus:outlined-primary text-white':\n              variant === 'primary' && !error && !disabled,\n            'bg-error hover:bg-error-hover focus:bg-error-pressed focus:outlined-error text-white':\n              variant === 'primary' && error && !disabled,\n            'bg-neutral-inactive text-neutral-inactive cursor-not-allowed': variant === 'primary' && disabled,\n            'bg-white border border-primary hover:border-primary-hover hover:bg-primary-light-hover hover:text-primary-hover focus:text-primary-pressed focus:bg-primary-light focus:border-primary-pressed text-primary focus:outlined-primary':\n              variant === 'secondary' && !error && !disabled,\n            'border-error text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border bg-white':\n              variant === 'secondary' && error && !disabled,\n            'text-neutral-inactive border-neutral-inactive cursor-not-allowed border': variant === 'secondary' && disabled,\n            'text-primary hover:text-primary-hover hover:bg-primary-light-hover focus:text-primary-pressed focus:bg-primary-light-pressed focus:outlined-primary border-none bg-transparent':\n              variant === 'tertiary' && !error && !disabled,\n            'text-error hover:bg-error-light-hover focus:bg-error-light-pressed focus:outlined-error border-none':\n              variant === 'tertiary' && error && !disabled,\n            'text-neutral-inactive cursor-not-allowed border-none bg-transparent': variant === 'tertiary' && disabled,\n          }),\n    }\"\n    :data-cy=\"`${label.trim()?.replaceAll(' ', '').replaceAll(',', '')}-button`\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"!computedLoading\" class=\"inline-flex items-center\" :class=\"iconRight ? 'flex-row-reverse' : 'flex-row'\">\n      <ElIcon\n        v-if=\"icon\"\n        :name=\"icon.name\"\n        :solid=\"icon.solid\"\n        :class=\"{\n          'h-[14px] w-[14px]': size === 'xs',\n          'h-4 w-4': size === 'sm',\n          'h-5 w-5': size === 'base',\n          'h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n      />\n      <span\n        v-if=\"icon && label !== ''\"\n        :class=\"{\n          'w-1': size === 'xs',\n          'w-2': size === 'sm' || size === 'base',\n          'w-3': size === 'l' || size === 'xl',\n        }\"\n      ></span>\n      <span class=\"font-semibold\">{{ label }}</span>\n    </span>\n    <span v-else class=\"inline-flex items-center\">\n      <svg\n        class=\"animate-spin\"\n        :class=\"{\n          'mr-1 h-[14px] w-[14px]': size === 'xs',\n          'mr-2 h-4 w-4': size === 'sm',\n          'mr-2 h-5 w-5': size === 'base',\n          'mr-3 h-6 w-6': size === 'l' || size === 'xl',\n        }\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n      </svg>\n      <span class=\"font-semibold\">Un attimo...</span>\n    </span>\n  </button>\n</template>\n"],"names":["elButtonSizes","elButtonVariants","props","__props","callbackLoading","ref","defaultLoading","computedLoading","computed","onClick","_a"],"mappings":"urBACaA,EAAgB,CAAC,KAAM,KAAM,OAAQ,IAAK,IAAI,EAG9CC,EAAmB,CAAC,UAAW,YAAa,UAAU,uYAuBnE,MAAMC,EAAQC,EAcRC,EAAkBC,EAAa,EAAK,EACpCC,EAAiBD,EAAa,EAAK,EACnCE,EAAkBC,EAAS,IAAMJ,EAAgB,OAASE,EAAe,OAASJ,EAAM,OAAO,EAE/FO,EAAU,SAAY,OACtBL,EAAgB,OAASG,EAAgB,QAC9BD,EAAA,MAAQF,EAAgB,MAAQF,EAAM,YACrD,WAAW,IAAM,CACfI,EAAe,MAAQ,IACtB,GAAI,EACP,OAAMI,EAAAR,EAAM,UAAN,YAAAQ,EAAA,KAAAR,IACNE,EAAgB,MAAQ,GAAA"}

package/dist/ElCalendarCard.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElCalendarCard.vue.cjs2.js","sources":["../../src/ElCalendarCard.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elCalendarCardColors = [\n  'purple',\n  'orange',\n  'brandBlue',\n  'green',\n  'rose',\n  'indigo',\n  'red',\n  'pink',\n  'cyan',\n  'sapphire',\n  'teal',\n  'yellow',\n  'gray',\n] as const;\nexport type ElCalendarCardColor = (typeof elCalendarCardColors)[number];\n\nexport const elCalendarCardStatuses = ['confirmed', 'to-be-confirmed', 'past'] as const;\nexport type ElCalendarCardStatus = (typeof elCalendarCardStatuses)[number];\n</script>\n\n<script setup lang=\"ts\">\nwithDefaults(\n  defineProps<{\n    height?: number;\n    color: ElCalendarCardColor;\n    status?: ElCalendarCardStatus;\n    primaryRow?: string;\n    secondaryRow?: string;\n    tertiaryRow?: string;\n    horizontalPaddingLeft?: boolean;\n    cursor?: 'default' | 'pointer';\n  }>(),\n  {\n    height: 50,\n    color: 'sapphire',\n    status: 'past',\n    label: undefined,\n    primaryRow: undefined,\n    secondaryRow: undefined,\n    tertiaryRow: undefined,\n    horizontalPaddingLeft: true,\n    cursor: 'pointer',\n  },\n);\n\nconst confirmedBackgroundColors = {\n  purple: 'bg-purple-500',\n  orange: 'bg-orange-500',\n  brandBlue: 'bg-brandBlue-500',\n  green: 'bg-green-500',\n  rose: 'bg-rose-500',\n  indigo: 'bg-indigo-500',\n  red: 'bg-red-500',\n  pink: 'bg-pink-500',\n  cyan: 'bg-cyan-500',\n  sapphire: 'bg-brandBlue-500',\n  teal: 'bg-teal-500',\n  yellow: 'bg-yellow-500',\n  gray: 'bg-neutral-500',\n} as const;\n\nconst pastBackgroundColors = {\n  purple: 'bg-purple-300',\n  orange: 'bg-orange-300',\n  brandBlue: 'bg-brandBlue-300',\n  green: 'bg-green-300',\n  rose: 'bg-rose-300',\n  indigo: 'bg-indigo-300',\n  red: 'bg-red-300',\n  pink: 'bg-pink-300',\n  cyan: 'bg-cyan-300',\n  sapphire: 'bg-brandBlue-300',\n  teal: 'bg-teal-300',\n  yellow: 'bg-yellow-300',\n  gray: 'bg-neutral-300',\n} as const;\n\nconst toBeConfirmedStrokeColors = {\n  purple: 'text-purple-500 border-purple-500',\n  orange: 'text-orange-500 border-orange-500',\n  brandBlue: 'text-brandBlue-500 border-brandBlue-500',\n  green: 'text-green-500 border-green-500',\n  rose: 'text-rose-500 border-rose-500',\n  indigo: 'text-indigo-500 border-indigo-500',\n  red: 'text-red-500 border-red-500',\n  pink: 'text-pink-500 border-pink-500',\n  cyan: 'text-cyan-500 border-cyan-500',\n  sapphire: 'text-brandBlue-500 border-brandBlue-500',\n  teal: 'text-teal-500 border-teal-500',\n  yellow: 'text-yellow-500 border-yellow-500',\n  gray: 'text-neutral-500 border-neutral-500',\n} as const;\n</script>\n\n<template>\n  <div class=\"-ml-1 -mr-1 pr-0.5\" :class=\"{ 'pl-3': horizontalPaddingLeft }\" :style=\"{ height: `${Math.max(12, height)}px` }\">\n    <div\n      class=\"grid max-w-full border rounded h-full\"\n      :class=\"{\n        'cursor-pointer': cursor === 'pointer',\n        'cursor-default': cursor === 'default',\n        'rounded-sm': height < 32,\n        rounded: height >= 32,\n        [confirmedBackgroundColors[color]]: status === 'confirmed',\n        [pastBackgroundColors[color]]: status === 'past',\n        'bg-white': status === 'to-be-confirmed',\n        'text-white': status === 'confirmed' || status === 'past',\n        'border-white': status === 'confirmed' || status === 'past',\n        [toBeConfirmedStrokeColors[color]]: status === 'to-be-confirmed',\n        'border-dashed': status === 'to-be-confirmed',\n      }\"\n    >\n      <div class=\"overflow-hidden\">\n        <div\n          class=\"flex flex-col justify-center text-xs px-1 leading-none\"\n          :class=\"{\n            'py-2': height >= 48,\n            'gap-1': height >= 32 && height < 48,\n            'gap-2': height >= 48 && height < 96,\n            'gap-3': height >= 96,\n          }\"\n        >\n          <span v-if=\"primaryRow\" class=\"font-semibold truncate\">\n            {{ primaryRow }}\n          </span>\n          <span v-if=\"secondaryRow\" class=\"font-semibold truncate\">\n            {{ secondaryRow }}\n          </span>\n          <span v-if=\"tertiaryRow\" class=\"truncate\">\n            {{ tertiaryRow }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["elCalendarCardColors","elCalendarCardStatuses","confirmedBackgroundColors","pastBackgroundColors","toBeConfirmedStrokeColors"],"mappings":"4QACaA,EAAuB,CAClC,SACA,SACA,YACA,QACA,OACA,SACA,MACA,OACA,OACA,WACA,OACA,SACA,MACF,EAGaC,EAAyB,CAAC,YAAa,kBAAmB,MAAM,ySA6B7E,MAAMC,EAA4B,CAChC,OAAQ,gBACR,OAAQ,gBACR,UAAW,mBACX,MAAO,eACP,KAAM,cACN,OAAQ,gBACR,IAAK,aACL,KAAM,cACN,KAAM,cACN,SAAU,mBACV,KAAM,cACN,OAAQ,gBACR,KAAM,gBAAA,EAGFC,EAAuB,CAC3B,OAAQ,gBACR,OAAQ,gBACR,UAAW,mBACX,MAAO,eACP,KAAM,cACN,OAAQ,gBACR,IAAK,aACL,KAAM,cACN,KAAM,cACN,SAAU,mBACV,KAAM,cACN,OAAQ,gBACR,KAAM,gBAAA,EAGFC,EAA4B,CAChC,OAAQ,oCACR,OAAQ,oCACR,UAAW,0CACX,MAAO,kCACP,KAAM,gCACN,OAAQ,oCACR,IAAK,8BACL,KAAM,gCACN,KAAM,gCACN,SAAU,0CACV,KAAM,gCACN,OAAQ,oCACR,KAAM,qCAAA"}
+{"version":3,"file":"ElCalendarCard.vue.cjs2.js","sources":["../src/ElCalendarCard.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elCalendarCardColors = [\n  'purple',\n  'orange',\n  'brandBlue',\n  'green',\n  'rose',\n  'indigo',\n  'red',\n  'pink',\n  'cyan',\n  'sapphire',\n  'teal',\n  'yellow',\n  'gray',\n] as const;\nexport type ElCalendarCardColor = (typeof elCalendarCardColors)[number];\n\nexport const elCalendarCardStatuses = ['confirmed', 'to-be-confirmed', 'past'] as const;\nexport type ElCalendarCardStatus = (typeof elCalendarCardStatuses)[number];\n</script>\n\n<script setup lang=\"ts\">\nwithDefaults(\n  defineProps<{\n    height?: number;\n    color: ElCalendarCardColor;\n    status?: ElCalendarCardStatus;\n    primaryRow?: string;\n    secondaryRow?: string;\n    tertiaryRow?: string;\n    horizontalPaddingLeft?: boolean;\n    cursor?: 'default' | 'pointer';\n  }>(),\n  {\n    height: 50,\n    color: 'sapphire',\n    status: 'past',\n    label: undefined,\n    primaryRow: undefined,\n    secondaryRow: undefined,\n    tertiaryRow: undefined,\n    horizontalPaddingLeft: true,\n    cursor: 'pointer',\n  },\n);\n\nconst confirmedBackgroundColors = {\n  purple: 'bg-purple-500',\n  orange: 'bg-orange-500',\n  brandBlue: 'bg-brandBlue-500',\n  green: 'bg-green-500',\n  rose: 'bg-rose-500',\n  indigo: 'bg-indigo-500',\n  red: 'bg-red-500',\n  pink: 'bg-pink-500',\n  cyan: 'bg-cyan-500',\n  sapphire: 'bg-brandBlue-500',\n  teal: 'bg-teal-500',\n  yellow: 'bg-yellow-500',\n  gray: 'bg-neutral-500',\n} as const;\n\nconst pastBackgroundColors = {\n  purple: 'bg-purple-300',\n  orange: 'bg-orange-300',\n  brandBlue: 'bg-brandBlue-300',\n  green: 'bg-green-300',\n  rose: 'bg-rose-300',\n  indigo: 'bg-indigo-300',\n  red: 'bg-red-300',\n  pink: 'bg-pink-300',\n  cyan: 'bg-cyan-300',\n  sapphire: 'bg-brandBlue-300',\n  teal: 'bg-teal-300',\n  yellow: 'bg-yellow-300',\n  gray: 'bg-neutral-300',\n} as const;\n\nconst toBeConfirmedStrokeColors = {\n  purple: 'text-purple-500 border-purple-500',\n  orange: 'text-orange-500 border-orange-500',\n  brandBlue: 'text-brandBlue-500 border-brandBlue-500',\n  green: 'text-green-500 border-green-500',\n  rose: 'text-rose-500 border-rose-500',\n  indigo: 'text-indigo-500 border-indigo-500',\n  red: 'text-red-500 border-red-500',\n  pink: 'text-pink-500 border-pink-500',\n  cyan: 'text-cyan-500 border-cyan-500',\n  sapphire: 'text-brandBlue-500 border-brandBlue-500',\n  teal: 'text-teal-500 border-teal-500',\n  yellow: 'text-yellow-500 border-yellow-500',\n  gray: 'text-neutral-500 border-neutral-500',\n} as const;\n</script>\n\n<template>\n  <div class=\"-ml-1 -mr-1 pr-0.5\" :class=\"{ 'pl-3': horizontalPaddingLeft }\" :style=\"{ height: `${Math.max(12, height)}px` }\">\n    <div\n      class=\"grid max-w-full border rounded h-full\"\n      :class=\"{\n        'cursor-pointer': cursor === 'pointer',\n        'cursor-default': cursor === 'default',\n        'rounded-sm': height < 32,\n        rounded: height >= 32,\n        [confirmedBackgroundColors[color]]: status === 'confirmed',\n        [pastBackgroundColors[color]]: status === 'past',\n        'bg-white': status === 'to-be-confirmed',\n        'text-white': status === 'confirmed' || status === 'past',\n        'border-white': status === 'confirmed' || status === 'past',\n        [toBeConfirmedStrokeColors[color]]: status === 'to-be-confirmed',\n        'border-dashed': status === 'to-be-confirmed',\n      }\"\n    >\n      <div class=\"overflow-hidden\">\n        <div\n          class=\"flex flex-col justify-center text-xs px-1 leading-none\"\n          :class=\"{\n            'py-2': height >= 48,\n            'gap-1': height >= 32 && height < 48,\n            'gap-2': height >= 48 && height < 96,\n            'gap-3': height >= 96,\n          }\"\n        >\n          <span v-if=\"primaryRow\" class=\"font-semibold truncate\">\n            {{ primaryRow }}\n          </span>\n          <span v-if=\"secondaryRow\" class=\"font-semibold truncate\">\n            {{ secondaryRow }}\n          </span>\n          <span v-if=\"tertiaryRow\" class=\"truncate\">\n            {{ tertiaryRow }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["elCalendarCardColors","elCalendarCardStatuses","confirmedBackgroundColors","pastBackgroundColors","toBeConfirmedStrokeColors"],"mappings":"4QACaA,EAAuB,CAClC,SACA,SACA,YACA,QACA,OACA,SACA,MACA,OACA,OACA,WACA,OACA,SACA,MACF,EAGaC,EAAyB,CAAC,YAAa,kBAAmB,MAAM,ySA6B7E,MAAMC,EAA4B,CAChC,OAAQ,gBACR,OAAQ,gBACR,UAAW,mBACX,MAAO,eACP,KAAM,cACN,OAAQ,gBACR,IAAK,aACL,KAAM,cACN,KAAM,cACN,SAAU,mBACV,KAAM,cACN,OAAQ,gBACR,KAAM,gBAAA,EAGFC,EAAuB,CAC3B,OAAQ,gBACR,OAAQ,gBACR,UAAW,mBACX,MAAO,eACP,KAAM,cACN,OAAQ,gBACR,IAAK,aACL,KAAM,cACN,KAAM,cACN,SAAU,mBACV,KAAM,cACN,OAAQ,gBACR,KAAM,gBAAA,EAGFC,EAA4B,CAChC,OAAQ,oCACR,OAAQ,oCACR,UAAW,0CACX,MAAO,kCACP,KAAM,gCACN,OAAQ,oCACR,IAAK,8BACL,KAAM,gCACN,KAAM,gCACN,SAAU,0CACV,KAAM,gCACN,OAAQ,oCACR,KAAM,qCAAA"}

package/dist/ElCalendarCard.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElCalendarCard.vue.esm2.js","sources":["../../src/ElCalendarCard.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elCalendarCardColors = [\n  'purple',\n  'orange',\n  'brandBlue',\n  'green',\n  'rose',\n  'indigo',\n  'red',\n  'pink',\n  'cyan',\n  'sapphire',\n  'teal',\n  'yellow',\n  'gray',\n] as const;\nexport type ElCalendarCardColor = (typeof elCalendarCardColors)[number];\n\nexport const elCalendarCardStatuses = ['confirmed', 'to-be-confirmed', 'past'] as const;\nexport type ElCalendarCardStatus = (typeof elCalendarCardStatuses)[number];\n</script>\n\n<script setup lang=\"ts\">\nwithDefaults(\n  defineProps<{\n    height?: number;\n    color: ElCalendarCardColor;\n    status?: ElCalendarCardStatus;\n    primaryRow?: string;\n    secondaryRow?: string;\n    tertiaryRow?: string;\n    horizontalPaddingLeft?: boolean;\n    cursor?: 'default' | 'pointer';\n  }>(),\n  {\n    height: 50,\n    color: 'sapphire',\n    status: 'past',\n    label: undefined,\n    primaryRow: undefined,\n    secondaryRow: undefined,\n    tertiaryRow: undefined,\n    horizontalPaddingLeft: true,\n    cursor: 'pointer',\n  },\n);\n\nconst confirmedBackgroundColors = {\n  purple: 'bg-purple-500',\n  orange: 'bg-orange-500',\n  brandBlue: 'bg-brandBlue-500',\n  green: 'bg-green-500',\n  rose: 'bg-rose-500',\n  indigo: 'bg-indigo-500',\n  red: 'bg-red-500',\n  pink: 'bg-pink-500',\n  cyan: 'bg-cyan-500',\n  sapphire: 'bg-brandBlue-500',\n  teal: 'bg-teal-500',\n  yellow: 'bg-yellow-500',\n  gray: 'bg-neutral-500',\n} as const;\n\nconst pastBackgroundColors = {\n  purple: 'bg-purple-300',\n  orange: 'bg-orange-300',\n  brandBlue: 'bg-brandBlue-300',\n  green: 'bg-green-300',\n  rose: 'bg-rose-300',\n  indigo: 'bg-indigo-300',\n  red: 'bg-red-300',\n  pink: 'bg-pink-300',\n  cyan: 'bg-cyan-300',\n  sapphire: 'bg-brandBlue-300',\n  teal: 'bg-teal-300',\n  yellow: 'bg-yellow-300',\n  gray: 'bg-neutral-300',\n} as const;\n\nconst toBeConfirmedStrokeColors = {\n  purple: 'text-purple-500 border-purple-500',\n  orange: 'text-orange-500 border-orange-500',\n  brandBlue: 'text-brandBlue-500 border-brandBlue-500',\n  green: 'text-green-500 border-green-500',\n  rose: 'text-rose-500 border-rose-500',\n  indigo: 'text-indigo-500 border-indigo-500',\n  red: 'text-red-500 border-red-500',\n  pink: 'text-pink-500 border-pink-500',\n  cyan: 'text-cyan-500 border-cyan-500',\n  sapphire: 'text-brandBlue-500 border-brandBlue-500',\n  teal: 'text-teal-500 border-teal-500',\n  yellow: 'text-yellow-500 border-yellow-500',\n  gray: 'text-neutral-500 border-neutral-500',\n} as const;\n</script>\n\n<template>\n  <div class=\"-ml-1 -mr-1 pr-0.5\" :class=\"{ 'pl-3': horizontalPaddingLeft }\" :style=\"{ height: `${Math.max(12, height)}px` }\">\n    <div\n      class=\"grid max-w-full border rounded h-full\"\n      :class=\"{\n        'cursor-pointer': cursor === 'pointer',\n        'cursor-default': cursor === 'default',\n        'rounded-sm': height < 32,\n        rounded: height >= 32,\n        [confirmedBackgroundColors[color]]: status === 'confirmed',\n        [pastBackgroundColors[color]]: status === 'past',\n        'bg-white': status === 'to-be-confirmed',\n        'text-white': status === 'confirmed' || status === 'past',\n        'border-white': status === 'confirmed' || status === 'past',\n        [toBeConfirmedStrokeColors[color]]: status === 'to-be-confirmed',\n        'border-dashed': status === 'to-be-confirmed',\n      }\"\n    >\n      <div class=\"overflow-hidden\">\n        <div\n          class=\"flex flex-col justify-center text-xs px-1 leading-none\"\n          :class=\"{\n            'py-2': height >= 48,\n            'gap-1': height >= 32 && height < 48,\n            'gap-2': height >= 48 && height < 96,\n            'gap-3': height >= 96,\n          }\"\n        >\n          <span v-if=\"primaryRow\" class=\"font-semibold truncate\">\n            {{ primaryRow }}\n          </span>\n          <span v-if=\"secondaryRow\" class=\"font-semibold truncate\">\n            {{ secondaryRow }}\n          </span>\n          <span v-if=\"tertiaryRow\" class=\"truncate\">\n            {{ tertiaryRow }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["elCalendarCardColors","elCalendarCardStatuses","confirmedBackgroundColors","pastBackgroundColors","toBeConfirmedStrokeColors"],"mappings":"yUACaA,EAAuB,CAClC,SACA,SACA,YACA,QACA,OACA,SACA,MACA,OACA,OACA,WACA,OACA,SACA,MACF,EAGaC,EAAyB,CAAC,YAAa,kBAAmB,MAAM,yRA6B7E,MAAMC,EAA4B,CAChC,OAAQ,gBACR,OAAQ,gBACR,UAAW,mBACX,MAAO,eACP,KAAM,cACN,OAAQ,gBACR,IAAK,aACL,KAAM,cACN,KAAM,cACN,SAAU,mBACV,KAAM,cACN,OAAQ,gBACR,KAAM,gBAAA,EAGFC,EAAuB,CAC3B,OAAQ,gBACR,OAAQ,gBACR,UAAW,mBACX,MAAO,eACP,KAAM,cACN,OAAQ,gBACR,IAAK,aACL,KAAM,cACN,KAAM,cACN,SAAU,mBACV,KAAM,cACN,OAAQ,gBACR,KAAM,gBAAA,EAGFC,EAA4B,CAChC,OAAQ,oCACR,OAAQ,oCACR,UAAW,0CACX,MAAO,kCACP,KAAM,gCACN,OAAQ,oCACR,IAAK,8BACL,KAAM,gCACN,KAAM,gCACN,SAAU,0CACV,KAAM,gCACN,OAAQ,oCACR,KAAM,qCAAA"}
+{"version":3,"file":"ElCalendarCard.vue.esm2.js","sources":["../src/ElCalendarCard.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elCalendarCardColors = [\n  'purple',\n  'orange',\n  'brandBlue',\n  'green',\n  'rose',\n  'indigo',\n  'red',\n  'pink',\n  'cyan',\n  'sapphire',\n  'teal',\n  'yellow',\n  'gray',\n] as const;\nexport type ElCalendarCardColor = (typeof elCalendarCardColors)[number];\n\nexport const elCalendarCardStatuses = ['confirmed', 'to-be-confirmed', 'past'] as const;\nexport type ElCalendarCardStatus = (typeof elCalendarCardStatuses)[number];\n</script>\n\n<script setup lang=\"ts\">\nwithDefaults(\n  defineProps<{\n    height?: number;\n    color: ElCalendarCardColor;\n    status?: ElCalendarCardStatus;\n    primaryRow?: string;\n    secondaryRow?: string;\n    tertiaryRow?: string;\n    horizontalPaddingLeft?: boolean;\n    cursor?: 'default' | 'pointer';\n  }>(),\n  {\n    height: 50,\n    color: 'sapphire',\n    status: 'past',\n    label: undefined,\n    primaryRow: undefined,\n    secondaryRow: undefined,\n    tertiaryRow: undefined,\n    horizontalPaddingLeft: true,\n    cursor: 'pointer',\n  },\n);\n\nconst confirmedBackgroundColors = {\n  purple: 'bg-purple-500',\n  orange: 'bg-orange-500',\n  brandBlue: 'bg-brandBlue-500',\n  green: 'bg-green-500',\n  rose: 'bg-rose-500',\n  indigo: 'bg-indigo-500',\n  red: 'bg-red-500',\n  pink: 'bg-pink-500',\n  cyan: 'bg-cyan-500',\n  sapphire: 'bg-brandBlue-500',\n  teal: 'bg-teal-500',\n  yellow: 'bg-yellow-500',\n  gray: 'bg-neutral-500',\n} as const;\n\nconst pastBackgroundColors = {\n  purple: 'bg-purple-300',\n  orange: 'bg-orange-300',\n  brandBlue: 'bg-brandBlue-300',\n  green: 'bg-green-300',\n  rose: 'bg-rose-300',\n  indigo: 'bg-indigo-300',\n  red: 'bg-red-300',\n  pink: 'bg-pink-300',\n  cyan: 'bg-cyan-300',\n  sapphire: 'bg-brandBlue-300',\n  teal: 'bg-teal-300',\n  yellow: 'bg-yellow-300',\n  gray: 'bg-neutral-300',\n} as const;\n\nconst toBeConfirmedStrokeColors = {\n  purple: 'text-purple-500 border-purple-500',\n  orange: 'text-orange-500 border-orange-500',\n  brandBlue: 'text-brandBlue-500 border-brandBlue-500',\n  green: 'text-green-500 border-green-500',\n  rose: 'text-rose-500 border-rose-500',\n  indigo: 'text-indigo-500 border-indigo-500',\n  red: 'text-red-500 border-red-500',\n  pink: 'text-pink-500 border-pink-500',\n  cyan: 'text-cyan-500 border-cyan-500',\n  sapphire: 'text-brandBlue-500 border-brandBlue-500',\n  teal: 'text-teal-500 border-teal-500',\n  yellow: 'text-yellow-500 border-yellow-500',\n  gray: 'text-neutral-500 border-neutral-500',\n} as const;\n</script>\n\n<template>\n  <div class=\"-ml-1 -mr-1 pr-0.5\" :class=\"{ 'pl-3': horizontalPaddingLeft }\" :style=\"{ height: `${Math.max(12, height)}px` }\">\n    <div\n      class=\"grid max-w-full border rounded h-full\"\n      :class=\"{\n        'cursor-pointer': cursor === 'pointer',\n        'cursor-default': cursor === 'default',\n        'rounded-sm': height < 32,\n        rounded: height >= 32,\n        [confirmedBackgroundColors[color]]: status === 'confirmed',\n        [pastBackgroundColors[color]]: status === 'past',\n        'bg-white': status === 'to-be-confirmed',\n        'text-white': status === 'confirmed' || status === 'past',\n        'border-white': status === 'confirmed' || status === 'past',\n        [toBeConfirmedStrokeColors[color]]: status === 'to-be-confirmed',\n        'border-dashed': status === 'to-be-confirmed',\n      }\"\n    >\n      <div class=\"overflow-hidden\">\n        <div\n          class=\"flex flex-col justify-center text-xs px-1 leading-none\"\n          :class=\"{\n            'py-2': height >= 48,\n            'gap-1': height >= 32 && height < 48,\n            'gap-2': height >= 48 && height < 96,\n            'gap-3': height >= 96,\n          }\"\n        >\n          <span v-if=\"primaryRow\" class=\"font-semibold truncate\">\n            {{ primaryRow }}\n          </span>\n          <span v-if=\"secondaryRow\" class=\"font-semibold truncate\">\n            {{ secondaryRow }}\n          </span>\n          <span v-if=\"tertiaryRow\" class=\"truncate\">\n            {{ tertiaryRow }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["elCalendarCardColors","elCalendarCardStatuses","confirmedBackgroundColors","pastBackgroundColors","toBeConfirmedStrokeColors"],"mappings":"yUACaA,EAAuB,CAClC,SACA,SACA,YACA,QACA,OACA,SACA,MACA,OACA,OACA,WACA,OACA,SACA,MACF,EAGaC,EAAyB,CAAC,YAAa,kBAAmB,MAAM,yRA6B7E,MAAMC,EAA4B,CAChC,OAAQ,gBACR,OAAQ,gBACR,UAAW,mBACX,MAAO,eACP,KAAM,cACN,OAAQ,gBACR,IAAK,aACL,KAAM,cACN,KAAM,cACN,SAAU,mBACV,KAAM,cACN,OAAQ,gBACR,KAAM,gBAAA,EAGFC,EAAuB,CAC3B,OAAQ,gBACR,OAAQ,gBACR,UAAW,mBACX,MAAO,eACP,KAAM,cACN,OAAQ,gBACR,IAAK,aACL,KAAM,cACN,KAAM,cACN,SAAU,mBACV,KAAM,cACN,OAAQ,gBACR,KAAM,gBAAA,EAGFC,EAA4B,CAChC,OAAQ,oCACR,OAAQ,oCACR,UAAW,0CACX,MAAO,kCACP,KAAM,gCACN,OAAQ,oCACR,IAAK,8BACL,KAAM,gCACN,KAAM,gCACN,SAAU,0CACV,KAAM,gCACN,OAAQ,oCACR,KAAM,qCAAA"}