{"version":3,"file":"skeletonBox-Wy37WO4_.js","sources":["../../../../Coloplast.UI/src/shared/components/skeleton/skeletonBox.vue"],"sourcesContent":["<script setup>\r\nimport { computed } from 'vue';\r\n\r\nconst props = defineProps({\r\n\twidth: {\r\n\t\ttype: String,\r\n\t\tdefault: '100%',\r\n\t},\r\n\theight: {\r\n\t\ttype: String,\r\n\t\tdefault: null,\r\n\t},\r\n\taspectRatio: {\r\n\t\ttype: String,\r\n\t\tdefault: null,\r\n\t},\r\n\tadditionalClasses: {\r\n\t\ttype: String,\r\n\t\tdefault: '',\r\n\t},\r\n})\r\n\r\nconst cssVars = computed(() => ({\r\n\t\t'--width': `${props.width?.endsWith('%') ? props.width : props.width + 'px'}`,\r\n\t\t'--height': `${props.height?.endsWith('%') ? props.height : props.height + 'px'}`,\r\n\t\t'--aspect-ratio': `${props.aspectRatio}`,\r\n\t})\r\n);\r\n\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\t:style=\"cssVars\"\r\n\t\tclass=\"c-skeleton__element c-skeleton-box\"\r\n\t\t:class=\"additionalClasses\"\r\n\t></div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n@import \"src/shared/styles/settings/settings\";\r\n@import \"src/shared/styles/tools/tools\";\r\n\r\n.c-skeleton-box {\r\n\taspect-ratio: var(--aspect-ratio);\r\n\tbackground-color: ds-color('bg', 'neutral');\r\n\tborder-radius: t-rem(4px);\r\n\theight: var(--height);\r\n\tmargin: 0 0 8px;\r\n\twidth: var(--width);\r\n}\r\n\r\n</style>\r\n"],"names":["props","__props","cssVars","computed","_a","_b"],"mappings":"gVAGA,MAAMA,EAAQC,EAmBRC,EAAUC,EAAS,IAAO,SAAA,OAC9B,UAAW,IAAGC,EAAAJ,EAAM,QAAN,MAAAI,EAAa,SAAS,KAAOJ,EAAM,MAAQA,EAAM,MAAQ,IAAI,GAC3E,WAAY,IAAGK,EAAAL,EAAM,SAAN,MAAAK,EAAc,SAAS,KAAOL,EAAM,OAASA,EAAM,OAAS,IAAI,GAC/E,iBAAkB,GAAGA,EAAM,WAAW,EACxC,EACA"}