\n 
\n \n `\n : html``\n }\n \n this.toggleSectionOpen('account-information')}\"\n >\n 
\n
\n \n \n ![](\"${this.logoUrl}\")
\n ![](\"/static/icons/SVG/arrow-black-1px-4x8.svg\")
\n
\n ${\n this.featureImgUrl\n ? html`\n \n ${this.headerText}
\n \n \n\n Return to Groups
\n \n\n \n `\n : html``\n }\n ![](\"/static/icons/SVG/arrow-black-5x10.svg\"){kind=icon}
\n ![](\"/static/icons/SVG/search.svg\"){kind=icon}
\n ![](\"/static/icons/SVG/download-12x16.svg\"){kind=icon}
\n ![](\"/static/icons/SVG/arrow-white-5x10.svg\"){kind=icon}
\n \n ![](\"${this.imagebossUrl(option.image.src,)
\n ![](\"/static/icons/SVG/align-leaf-18x10.svg\"){kind=icon}
\n ![](\"/static/icons/SVG/download-10x10.svg\"){kind=icon}
\n ![](\"/static/icons/SVG/download-black-12x16.svg\"){kind=icon}
\n \n `;\n }\n\n _handleClick() {\n this.sendAnalyticsDownloadEvent();\n }\n\n get parsedDownloadData() {\n // EXPECTED DATA STRUCTURE FOR ANALYTICS\n // {\n // file_format: 'JPG',\n // file_name: 'Rose Carousel Image',\n // link_url: image[1].full_resolution_src,\n // link_type: 'IMAGE',\n // placement: 'Rose Block',\n // }\n\n if (this.downloadData) return this.downloadData;\n\n this.downloadData = this.getAttribute('download-data')\n ? JSON.parse(this.getAttribute('download-data'))\n : null;\n\n return this.downloadData;\n }\n\n sendAnalyticsDownloadEvent() {\n handleFileDownloadEvent(analyticsCtaDataObject(this.downloadData));\n }\n\n get downloadUrl() {\n return this.getAttribute('download-url');\n }\n}\ncustomElements.define('download-button', DownloadButton);\n","import { LitElement } from 'lit';\n\nclass HorizontalRule extends LitElement {}\ncustomElements.define('horizontal-rule', HorizontalRule);\n","import { css } from 'lit';\n\nexport const styles = css`\n .multi-select-wrapper {\n display: flex;\n flex-direction: column;\n border: 1px solid rgb(34, 34, 34);\n width: calc(100% - calc(34rem / var(--default-rem-px-count)));\n margin: calc(20rem / var(--default-rem-px-count)) 0;\n padding: calc(4rem / var(--default-rem-px-count))\n calc(16rem / var(--default-rem-px-count));\n }\n\n .header {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n height: calc(42rem / var(--default-rem-px-count));\n width: 100%;\n cursor: pointer;\n }\n\n .select-arrow {\n height: calc(16rem / var(--default-rem-px-count));\n margin: auto 0;\n padding: 0 2px;\n }\n\n .arrow-closed {\n transform: rotate(90deg);\n }\n\n .arrow-expanded {\n transform: rotate(270deg);\n }\n\n .options-content,\n .options-buttons {\n width: 100%;\n display: flex;\n flex-direction: row;\n gap: calc(15em / var(--default-rem-px-count));\n padding-bottom: calc(16rem / var(--default-rem-px-count));\n }\n\n .options-content .side {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .option-category-header {\n font-weight: 500;\n margin: calc(16rem / var(--default-rem-px-count)) 0;\n }\n\n .options-buttons {\n padding-top: calc(12rem / var(--default-rem-px-count));\n }\n\n .options-buttons cta-button {\n flex-grow: 1;\n }\n\n /* Custom Checkbox Styling */\n\n .filter-option {\n padding: calc(4rem / var(--default-rem-px-count)) 0;\n }\n\n .filter-option label {\n display: flex;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n }\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n }\n\n /* For iPhone, any font size < 16px will trigger a zoom that breaks the UI */\n input[type='text'] {\n font-size: max(1rem, 16px);\n }\n\n .option-label-checkbox {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: calc(8rem / var(--default-rem-px-count));\n height: calc(16rem / var(--default-rem-px-count));\n width: calc(16rem / var(--default-rem-px-count));\n border: 1px solid black;\n }\n\n .option-label-checkbox div {\n height: calc(100% - calc(4rem / var(--default-rem-px-count)));\n width: calc(100% - calc(4rem / var(--default-rem-px-count)));\n }\n\n .option-label:hover span div {\n background-color: #dddddd;\n }\n\n .option-label-checkbox input:checked ~ div {\n background-color: #ff993d;\n }\n\n .input-wrapper {\n flex-grow: 1;\n position: relative;\n display: flex;\n }\n\n .input-wrapper.search {\n border: 1px solid #222222;\n }\n\n .search input {\n width: 100%;\n }\n\n /* Override browser defaults */\n input {\n -webkit-appearance: none;\n outline: none;\n box-shadow: none;\n border: none;\n padding: 0;\n background: none;\n }\n\n input {\n height: calc(42rem / var(--default-rem-px-count));\n width: 100%;\n padding-top: calc(4rem / var(--default-rem-px-count));\n padding-left: calc(16rem / var(--default-rem-px-count));\n display: block;\n }\n\n .search-icon {\n padding-top: calc(4rem / var(--default-rem-px-count));\n padding-right: calc(16rem / var(--default-rem-px-count));\n height: calc(16rem / var(--default-rem-px-count));\n margin: auto;\n }\n\n @media (min-width: 600px) {\n input[type='text'] {\n font-size: inherit;\n }\n }\n`;\n","import { LitElement, html, css } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { LIT_CSS_VARIABLES } from '@Root/lib/lit-styles.js';\nimport { SHARED_ELEMENTS, SHARED_CLASSES } from '../../styles';\nimport '../cta-button';\nimport { styles } from './css';\n\nimport { fireAdobeAnalyticsEvent } from '../../../../helpers/adobe-analytics';\nclass StyledMultiSelect extends LitElement {\n static get properties() {\n return {\n _expanded: { type: Boolean },\n _dataReady: { type: Boolean },\n _optionsData: { type: Array },\n _dataHeaderString: { type: String },\n _includeSearch: { type: Boolean },\n _searchString: { type: String },\n };\n }\n\n static get styles() {\n return [LIT_CSS_VARIABLES, SHARED_ELEMENTS, SHARED_CLASSES, styles];\n }\n\n constructor() {\n super();\n\n this._expanded = false;\n this._dataReady = false;\n this._optionsData = [];\n this._dataHeaderString = '';\n this._includeSearch = false;\n this._searchString = '';\n document.addEventListener('clearFilterSelections', e => {\n this.clearFilters();\n this._expanded = false;\n });\n document.addEventListener('visualizedMaterialSelected', e => {\n this._expanded = false;\n this.requestUpdate();\n });\n }\n\n async connectedCallback() {\n super.connectedCallback();\n this.processOptionsData();\n\n this._includeSearch = this.includeSearch;\n this._dataHeaderString = this.dataHeaderString;\n }\n\n disconnectedCallback() {\n document.removeEventListener('clearFilterSelections', e => {\n this.clearFilters();\n });\n super.disconnectedCallback();\n }\n\n render() {\n return this._dataReady\n ? html`\n