{"version":3,"sources":["src/components/search/atomic-layout/atomic-search-layout.pcss?tag=atomic-search-layout","src/components/search/atomic-layout/atomic-search-layout.tsx"],"names":["atomicSearchLayoutCss","AtomicSearchLayout","[object Object]","hostRef","this","mobileBreakpoint","DEFAULT_MOBILE_BREAKPOINT","id","host","randomID","styleTag","document","createElement","innerHTML","buildSearchLayout","appendChild"],"mappings":"uMAAA,MAAMA,EAAwB,i+HCajBC,EAAkB,MAL/BC,YAAAC,aAWgCC,KAAAC,iBAAmBC,EAE1CJ,mBACL,MAAMK,EAAKH,KAAKI,KAAKD,IAAME,EAAS,yBACpCL,KAAKI,KAAKD,GAAKA,EAEf,MAAMG,EAAWC,SAASC,cAAc,SACxCF,EAASG,UAAYC,EAAkBV,KAAKI,KAAMJ,KAAKC,kBACvDD,KAAKI,KAAKO,YAAYL","sourcesContent":[".atomic-modal-opened {\n overflow-y: hidden;\n}\n\natomic-layout-section[section='search'] {\n grid-area: atomic-section-search;\n}\n\natomic-layout-section[section='facets'] {\n grid-area: atomic-section-facets;\n}\n\natomic-layout-section[section='main'] {\n grid-area: atomic-section-main;\n}\n\natomic-layout-section[section='status'] {\n grid-area: atomic-section-status;\n}\n\natomic-layout-section[section='pagination'] {\n grid-area: atomic-section-pagination;\n}\n\n/**\n * @prop --atomic-layout-max-search-box-input-width: The maximum width that the search box input will take.\n * @prop --atomic-layout-max-search-box-double-suggestions-width: The maximum width that the search box suggestions will take when displaying a double list.\n * @prop --atomic-layout-search-box-left-suggestions-width: When displaying a double list, the width of the left list.\n */\natomic-search-layout {\n width: 100%;\n height: 100%;\n display: none;\n grid-template-areas:\n '. atomic-section-search .'\n '. atomic-section-main .';\n grid-template-columns: var(--atomic-layout-spacing-x) minmax(0, 1fr) var(--atomic-layout-spacing-x);\n\n atomic-layout-section[section='search'] {\n margin: var(--atomic-layout-spacing-y) 0;\n max-width: var(--atomic-layout-max-search-box-input-width, 678px);\n width: 100%;\n justify-self: center;\n\n /* Only affects desktop */\n atomic-search-box {\n &::part(suggestions-double-list) {\n width: 125%;\n max-width: var(--atomic-layout-max-search-box-double-suggestions-width, 800px);\n }\n\n &::part(suggestions-left) {\n flex-basis: var(--atomic-layout-search-box-left-suggestions-width, 30%);\n }\n\n &::part(suggestions-right) {\n flex-basis: calc(100% - var(--atomic-layout-search-box-left-suggestions-width, 30%));\n }\n }\n }\n\n atomic-layout-section[section='facets'] {\n display: none;\n\n & * {\n margin-bottom: var(--atomic-layout-spacing-y);\n }\n }\n\n atomic-layout-section[section='main'] {\n margin-bottom: var(--atomic-layout-spacing-y);\n }\n\n atomic-layout-section[section='horizontal-facets'] {\n display: flex;\n flex-wrap: wrap;\n margin-bottom: var(--atomic-layout-spacing-y);\n row-gap: 0.5rem;\n\n & > * {\n max-width: 100%;\n }\n\n & > atomic-segmented-facet,\n & > atomic-popover {\n margin-right: 0.5rem;\n }\n\n & > atomic-popover {\n display: none;\n }\n }\n\n atomic-layout-section[section='status'] {\n display: grid;\n justify-content: space-between;\n grid-template-areas:\n 'atomic-breadbox atomic-breadbox'\n 'atomic-query-summary atomic-sort'\n 'atomic-did-you-mean atomic-did-you-mean'\n 'atomic-notifications atomic-notifications';\n\n & > * {\n margin-bottom: var(--atomic-layout-spacing-y);\n }\n\n atomic-breadbox {\n grid-area: atomic-breadbox;\n }\n\n atomic-query-summary {\n grid-area: atomic-query-summary;\n align-self: center;\n overflow: hidden;\n }\n\n atomic-sort-dropdown {\n grid-area: atomic-sort;\n justify-self: end;\n }\n\n atomic-refine-toggle {\n grid-area: atomic-sort;\n }\n\n atomic-did-you-mean {\n grid-area: atomic-did-you-mean;\n }\n\n atomic-notifications {\n grid-area: atomic-notifications;\n }\n }\n\n atomic-layout-section[section='results'] {\n atomic-smart-snippet {\n margin-bottom: 1.5rem;\n }\n\n atomic-smart-snippet-suggestions {\n margin-bottom: 1.5rem;\n }\n }\n\n atomic-layout-section[section='pagination'] {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n\n atomic-load-more-results {\n width: 100%;\n }\n\n & > * {\n margin-top: var(--atomic-layout-spacing-y);\n }\n\n /* Approx. width of pager & results per page */\n @media only screen and (min-width: 50rem) {\n flex-direction: row;\n }\n }\n}\n","import {Component, Element, Prop} from '@stencil/core';\nimport {DEFAULT_MOBILE_BREAKPOINT} from '../../../utils/replace-breakpoint';\nimport {randomID} from '../../../utils/utils';\nimport {buildSearchLayout} from './search-layout';\n\n/**\n * The `atomic-search-layout` helps organize elements in the page.\n */\n@Component({\n tag: 'atomic-search-layout',\n styleUrl: 'atomic-search-layout.pcss',\n shadow: false,\n})\nexport class AtomicSearchLayout {\n @Element() private host!: HTMLElement;\n /**\n * CSS value that defines where the layout goes from mobile to desktop.\n * e.g., 800px, 65rem.\n */\n @Prop({reflect: true}) public mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT;\n\n public componentDidLoad() {\n const id = this.host.id || randomID('atomic-search-layout-');\n this.host.id = id;\n\n const styleTag = document.createElement('style');\n styleTag.innerHTML = buildSearchLayout(this.host, this.mobileBreakpoint);\n this.host.appendChild(styleTag);\n }\n}\n"]}