{"version":3,"file":"heroHeaderSearchPlaceholderWrapper-de8Gym9x.js","sources":["../../../../Coloplast.UI/Features/Campaign/HeroHeaderBlock/Views/heroHeaderSearchPlaceholder.vue","../../../../Coloplast.UI/Features/Campaign/HeroHeaderBlock/Views/heroHeaderSearchPlaceholderWrapper.vue"],"sourcesContent":["<script setup>\r\nimport { ref } from \"vue\";\r\nimport ContentSearchFieldWrapper from 'shared/components/contentLibrary/contentLibraryWrappers/contentSearchFieldWrapper.vue';\r\nimport SearchFieldWrapper from 'shared/components/product/searchFieldWrapper.vue';\r\n\r\nimport useProductList from 'shared/components/product/composables/useProductList.js';\r\nimport useContentLibrary from 'shared/components/contentLibrary/composables/useContentLibrary.js';\r\n\r\nconst productListComposable = ref(null);\r\nconst contentLibraryComposable = ref(null);\r\n\r\nproductListComposable.value = useProductList();\r\ncontentLibraryComposable.value = useContentLibrary();\r\n\r\n</script>\r\n<template>\r\n\t<div class=\"hero-search-placeholder\" v-if=\"productListComposable?.displaySearchOnHero || contentLibraryComposable?.displaySearchOnHero\">\r\n\t\t<template v-if=\"productListComposable?.displaySearchOnHero\">\r\n\t\t\t<SearchFieldWrapper />\r\n\t\t</template>\r\n\t\t<template v-else-if=\"contentLibraryComposable?.displaySearchOnHero\">\r\n\t\t\t<ContentSearchFieldWrapper />\r\n\t\t</template>\r\n\t</div>\r\n</template>\r\n\r\n<style lang=\"scss\">\r\n@import 'multisite/styles/settings/settings';\r\n@import 'multisite/styles/tools/tools';\r\n$margin-left: 84px;\r\n\r\n.hero-search-placeholder {\r\n\twidth: calc(100% - 84px);\r\n\tmargin-left: $margin-left;\r\n\tmargin-top: ds-space(10);\r\n\tdisplay: flex;\r\n\r\n\r\n\t.facet__button__container {\r\n\t\tmargin: 0 0 0 ds-space(4);\r\n\t\tborder: 1px solid ds-color('border', 'strong');\r\n\t\tbackground: ds-color('bg', 'default');\r\n\t}\r\n\r\n\t.c-search.c-search--product-page {\r\n\t\twidth: 100%;\r\n\t\tmargin-bottom: 0;\r\n\t\tmargin-left: 0;\r\n\t}\r\n\r\n\t.c-content-library__topcontainer {\r\n\t\tflex-wrap: nowrap;\r\n\t\tflex-direction: row;\r\n\t\twidth: 100%;\r\n\t\tmargin-bottom: 0;\r\n\r\n\t\t.c-content-search__button {\r\n\t\t\torder: 1;\r\n\t\t\tz-index: 1;\r\n\t\t\tleft: 1px;\r\n\t\t}\r\n\r\n\t\t.c-content-search__field {\r\n\t\t\torder: 2;\r\n\t\t\tmargin-left: -45px;\r\n\t\t\tpadding-left: 46px;\r\n\t\t}\r\n\r\n\t\t.c-content-search__wrapper {\r\n\t\t\tflex: auto;\r\n\t\t}\r\n\t}\r\n\r\n\t.hide-on-desktop {\r\n\t\tdisplay: none;\r\n\t}\r\n\r\n\t.hide-on-mobile {\r\n\t\tdisplay: flex;\r\n\t}\r\n\r\n\t.c-content-library__topcontainer-button {\r\n\t\tborder: 1px solid ds-color('border', 'strong');\r\n\t\tbackground: ds-color('bg', 'default');\r\n\t}\r\n}\r\n\r\n.no-media .hero-search-placeholder {\r\n\tmargin-left: 0;\r\n\twidth: 100%;\r\n}\r\n\r\n.reverse .hero-search-placeholder {\r\n\tmargin-left: ds-space(10);\r\n\tmargin-right: 84px;\r\n\twidth: auto;\r\n\r\n\t@include t-respond-to-max(ds-breakpoint('xl')) {\r\n\t\twidth: calc(100% - 84px);\r\n\t}\r\n\r\n\t.c-search.c-search--product-page {\r\n\t\tmargin-left: 0;\r\n\t}\r\n}\r\n\r\n@include t-respond-to-max(ds-breakpoint('md')) {\r\n\t.hero-search-placeholder,\r\n\t.reverse .hero-search-placeholder {\r\n\t\tmargin: 0;\r\n\t\twidth: 100%;\r\n\r\n\t\t.c-content-library__topcontainer-button {\r\n\t\t\tmargin: 0 0 0 ds-space(4);\r\n\t\t}\r\n\t}\r\n}\r\n</style>\r\n","<script setup>\r\nimport { computed, ref } from 'vue';\r\nimport HeroHeaderSearchPlaceholder from './heroHeaderSearchPlaceholder.vue';\r\nimport useProductList from 'shared/components/product/composables/useProductList.js';\r\nimport useContentLibrary from 'shared/components/contentLibrary/composables/useContentLibrary.js';\r\n\r\ndefineProps({\r\n\tisMobile: {\r\n\t\ttype: Boolean,\r\n\t\tdefailt: false\r\n\t},\r\n\thasImages: {\r\n\t\ttype: Boolean,\r\n\t\tdefailt: true\r\n\t},\r\n\tcssClasses: {\r\n\t\ttype: String,\r\n\t\tdefailt: \"\"\r\n\t}\r\n});\r\n\r\nconst displaySearch = computed(() =>\r\n\tproductListComposable.value.displaySearchOnHero || contentLibraryComposable.value.displaySearchOnHero\r\n);\r\n\r\nconst productListComposable = ref(null);\r\nconst contentLibraryComposable = ref(null);\r\n\r\nproductListComposable.value = useProductList();\r\ncontentLibraryComposable.value = useContentLibrary();\r\n\r\n\r\n</script>\r\n\r\n<template>\r\n\t<template v-if=\"displaySearch\">\r\n\t\t<span class=\"c-hero-header-block__hero-search-wrapper\"\r\n\t\t\t\tdata-testid=\"hero-header-search-placeholder-wrapper\"\r\n\t\t\t\t:class=\"[isMobile ? cssClasses : '', isMobile ? 'hide-on-desktop' : 'hide-on-mobile' , {'c-hero-header-block__hero-search-wrapper--no-media': !hasImages}]\"\r\n\t\t\t\t>\r\n\t\t\t\t<HeroHeaderSearchPlaceholder />\r\n\t\t\t</span>\r\n\t</template>\r\n</template>\r\n"],"names":["productListComposable","ref","contentLibraryComposable","useProductList","useContentLibrary","displaySearch","computed"],"mappings":"8kCAQA,MAAMA,EAAwBC,EAAI,IAAI,EAChCC,EAA2BD,EAAI,IAAI,EAEzC,OAAAD,EAAsB,MAAQG,IAC9BD,EAAyB,MAAQE,4bCSjC,MAAMC,EAAgBC,EAAS,IAC9BN,EAAsB,MAAM,qBAAuBE,EAAyB,MAAM,mBACnF,EAEMF,EAAwBC,EAAI,IAAI,EAChCC,EAA2BD,EAAI,IAAI,EAEzC,OAAAD,EAAsB,MAAQG,IAC9BD,EAAyB,MAAQE"}