{"version":3,"file":"236.min.js?t=1744984834426","mappings":"6JAGe,MAAMA,EACpBC,iBAAmB,CAClBC,gBAAiB,oCACjBC,KAAM,uCACNC,UAAW,qCACXC,sBACC,wDACDC,YAAa,+CAGdL,eAAiB,CAChBM,MAAO,gCACPC,OAAQ,iCACRC,cAAe,yCAGhBR,cAAgB,CACfS,SAAU,WACVC,UAAW,aAGZV,yBAA2B,EAE3BW,WAAAA,CAAYC,GACXC,KAAKD,QAAUA,EACfC,KAAKC,GAAKF,GAASE,IAAM,GACzBD,KAAKE,WAAaC,OAAOC,WAAW,sBACpCJ,KAAKK,UAAYL,KAAKE,WAAWI,QAEjCN,KAAKO,WACLP,KAAKQ,eAE4B,OAA7BR,KAAKS,qBACRT,KAAKU,oBAEP,CAKAH,QAAAA,GACCP,KAAKW,eAAiBX,KAAKD,QAAQa,cAClC1B,EAAkB2B,UAAUzB,iBAE7BY,KAAKc,MAAQd,KAAKD,QAAQgB,iBACzB7B,EAAkB2B,UAAUxB,MAE7BW,KAAKS,oBAAsBT,KAAKD,QAAQa,cACvC1B,EAAkB2B,UAAUtB,uBAEI,OAA7BS,KAAKS,sBACRT,KAAKgB,WAAahB,KAAKD,QAAQa,cAC9B1B,EAAkB2B,UAAUrB,aAG/B,CAKAgB,YAAAA,GACkC,OAA7BR,KAAKS,qBACRT,KAAKE,WAAWe,iBAAiB,SAAUjB,KAAKU,mBAElD,CAKAQ,YAAAA,GACClB,KAAKE,WAAWiB,oBAAoB,SAAUnB,KAAKU,mBACpD,CAKAU,OAAAA,GACkC,OAA7BpB,KAAKS,sBACRT,KAAKqB,gBACLrB,KAAKsB,iBACLtB,KAAKkB,eAEP,CAMAR,mBAAqBA,KACpBV,KAAKK,UAAYL,KAAKE,WAAWI,QAG7BN,KAAKK,WACRL,KAAKqB,gBACLrB,KAAKuB,kBAGLvB,KAAKsB,iBACLtB,KAAKwB,eACN,EAODC,WAAcC,IACbA,EAAMC,iBAGNC,MAAMC,KAAK7B,KAAKc,OAAOgB,SAAQ,CAACC,EAAMC,KACjCA,EAAQ9C,EAAkB+C,mBAC7BF,EAAKG,UAAUC,OAAOjD,EAAkBkD,QAAQ1C,QAE7CsC,IAAU9C,EAAkB+C,mBAC/BF,EAAKG,UAAUC,OAAOjD,EAAkBkD,QAAQ3C,MACjD,IAIoC,UAAjCO,KAAKgB,WAAWqB,cACnBrC,KAAKgB,WAAWsB,UAAYpD,EAAkBqD,OAAO1C,UACrDG,KAAKgB,WAAWwB,UAAYtD,EAAkBqD,OAAO1C,UACrDG,KAAKgB,WAAWqB,aAAe,SAE/BrC,KAAKgB,WAAWsB,UAAYpD,EAAkBqD,OAAO3C,SACrDI,KAAKgB,WAAWwB,UAAYtD,EAAkBqD,OAAO3C,SACrDI,KAAKgB,WAAWqB,aAAe,QAC/BrC,KAAKW,eAAe8B,eAAe,CAClCC,SAAU,WAEZ,EAMDnB,aAAAA,GAECvB,KAAKc,MAAMgB,SAASC,IACnBA,EAAKG,UAAUS,OAAOzD,EAAkBkD,QAAQ1C,QAChDqC,EAAKG,UAAUS,OAAOzD,EAAkBkD,QAAQ3C,MAAM,IAGvDO,KAAKS,oBAAoByB,UAAUU,IAClC1D,EAAkBkD,QAAQzC,cAE5B,CAKA2B,cAAAA,GACCtB,KAAKgB,WAAWqB,aAAe,OAChC,CAMAb,YAAAA,GAEExB,KAAKgB,YACLhB,KAAKS,oBAAoByB,UAAUW,SAClC3D,EAAkBkD,QAAQzC,gBAE3BK,KAAKc,MAAMgC,OAAS5D,EAAkB+C,oBAGtCjC,KAAKS,oBAAoByB,UAAUS,OAClCzD,EAAkBkD,QAAQzC,eAG3BK,KAAKc,MAAMgB,SAAQ,CAACC,EAAMC,KACrBA,EAAQ9C,EAAkB+C,mBAC7BF,EAAKG,UAAUU,IAAI1D,EAAkBkD,QAAQ1C,OAC9C,IAGDM,KAAKc,MAAM5B,EAAkB+C,mBAAmBC,UAAUU,IACzD1D,EAAkBkD,QAAQ3C,OAG3BO,KAAKgB,WAAWC,iBAAiB,QAASjB,KAAKyB,YAEjD,CAKAJ,aAAAA,GACCrB,KAAKgB,WAAWqB,aAAe,QAC/BrC,KAAKgB,WAAWG,oBAAoB,QAASnB,KAAKyB,WACnD,E","sources":["webpack://@hero-digital/masonite/./src/components/modules/CategoryHighlight/CategoryHighlight.js"],"sourcesContent":["/**\n * Module that displays a list of cards in a grid.\n */\nexport default class CategoryHighlight {\n\tstatic SELECTORS = {\n\t\tCARDS_CONTAINER: '[data-cmp-hook=\"cards-container\"]',\n\t\tCARD: '[data-cmp-category-highlight=\"card\"]',\n\t\tCOMPONENT: '[data-cmp-is=\"category-highlight\"]',\n\t\tVIEW_BUTTON_CONTAINER:\n\t\t\t'[data-cmp-category-highlight=\"view-button-container\"]',\n\t\tVIEW_BUTTON: '[data-cmp-category-highlight=\"view-button\"]'\n\t}\n\n\tstatic CLASSES = {\n\t\tFADED: 'mod-category-highlight__faded',\n\t\tHIDDEN: 'mod-category-highlight__hidden',\n\t\tNOT_DISPLAYED: 'mod-category-highlight__not-displayed'\n\t}\n\n\tstatic LABELS = {\n\t\tVIEW_ALL: 'View All',\n\t\tVIEW_LESS: 'View Less'\n\t}\n\n\tstatic MOBILE_CARD_LIMIT = 3\n\n\tconstructor(element) {\n\t\tthis.element = element // ref to component element\n\t\tthis.id = element?.id || '' // ref to component id\n\t\tthis.mediaQuery = window.matchMedia('(min-width: 768px)') // ref to breakpoint\n\t\tthis.isDesktop = this.mediaQuery.matches // bool for if the breakpoint is Desktop\n\n\t\tthis.cacheDom()\n\t\tthis.attachEvents()\n\n\t\tif (this.viewButtonContainer !== null) {\n\t\t\tthis.onBreakpointChange()\n\t\t}\n\t}\n\n\t/**\n\t * Cache the dom refs needed for the component\n\t */\n\tcacheDom() {\n\t\tthis.cardsContainer = this.element.querySelector(\n\t\t\tCategoryHighlight.SELECTORS.CARDS_CONTAINER\n\t\t)\n\t\tthis.cards = this.element.querySelectorAll(\n\t\t\tCategoryHighlight.SELECTORS.CARD\n\t\t)\n\t\tthis.viewButtonContainer = this.element.querySelector(\n\t\t\tCategoryHighlight.SELECTORS.VIEW_BUTTON_CONTAINER\n\t\t)\n\t\tif (this.viewButtonContainer !== null) {\n\t\t\tthis.viewButton = this.element.querySelector(\n\t\t\t\tCategoryHighlight.SELECTORS.VIEW_BUTTON\n\t\t\t)\n\t\t}\n\t}\n\n\t/**\n\t * Attach component event listeners\n\t */\n\tattachEvents() {\n\t\tif (this.viewButtonContainer !== null) {\n\t\t\tthis.mediaQuery.addEventListener('change', this.onBreakpointChange)\n\t\t}\n\t}\n\n\t/**\n\t * Detach component event listeners\n\t */\n\tdetachEvents() {\n\t\tthis.mediaQuery.removeEventListener('change', this.onBreakpointChange)\n\t}\n\n\t/**\n\t * Destroy the component and clean up event listeners\n\t */\n\tdestroy() {\n\t\tif (this.viewButtonContainer !== null) {\n\t\t\tthis.destroyMobile()\n\t\t\tthis.destroyDesktop()\n\t\t\tthis.detachEvents()\n\t\t}\n\t}\n\n\t/**\n\t * Callback applied when the media query changes that renders\n\t * the desktop or mobile nav based on the matched media query\n\t */\n\tonBreakpointChange = () => {\n\t\tthis.isDesktop = this.mediaQuery.matches\n\n\t\t// Desktop\n\t\tif (this.isDesktop) {\n\t\t\tthis.destroyMobile()\n\t\t\tthis.renderDesktop()\n\t\t\t// Mobile / Tablet\n\t\t} else {\n\t\t\tthis.destroyDesktop()\n\t\t\tthis.renderMobile()\n\t\t}\n\t}\n\n\t/**\n\t * Toggle compressed and expanded states\n\t * @param {Event} event Click event callback\n\t */\n\ttoggleView = (event) => {\n\t\tevent.preventDefault()\n\n\t\t// Toggle hidden and faded classes on cards\n\t\tArray.from(this.cards).forEach((card, index) => {\n\t\t\tif (index > CategoryHighlight.MOBILE_CARD_LIMIT) {\n\t\t\t\tcard.classList.toggle(CategoryHighlight.CLASSES.HIDDEN)\n\t\t\t}\n\t\t\tif (index === CategoryHighlight.MOBILE_CARD_LIMIT) {\n\t\t\t\tcard.classList.toggle(CategoryHighlight.CLASSES.FADED)\n\t\t\t}\n\t\t})\n\n\t\t// Toggle button label\n\t\tif (this.viewButton.ariaExpanded === 'false') {\n\t\t\tthis.viewButton.innerText = CategoryHighlight.LABELS.VIEW_LESS\n\t\t\tthis.viewButton.ariaLabel = CategoryHighlight.LABELS.VIEW_LESS\n\t\t\tthis.viewButton.ariaExpanded = 'true'\n\t\t} else {\n\t\t\tthis.viewButton.innerText = CategoryHighlight.LABELS.VIEW_ALL\n\t\t\tthis.viewButton.ariaLabel = CategoryHighlight.LABELS.VIEW_ALL\n\t\t\tthis.viewButton.ariaExpanded = 'false'\n\t\t\tthis.cardsContainer.scrollIntoView({\n\t\t\t\tbehavior: 'smooth'\n\t\t\t})\n\t\t}\n\t}\n\n\t/**\n\t * Renders the desktop nav by displaying all the cards and hiding the View All button\n\t */\n\trenderDesktop() {\n\t\t// Display all cards\n\t\tthis.cards.forEach((card) => {\n\t\t\tcard.classList.remove(CategoryHighlight.CLASSES.HIDDEN)\n\t\t\tcard.classList.remove(CategoryHighlight.CLASSES.FADED)\n\t\t})\n\t\t// Hide View All button\n\t\tthis.viewButtonContainer.classList.add(\n\t\t\tCategoryHighlight.CLASSES.NOT_DISPLAYED\n\t\t)\n\t}\n\n\t/**\n\t * Destroys the desktop component\n\t */\n\tdestroyDesktop() {\n\t\tthis.viewButton.ariaExpanded = 'false'\n\t}\n\n\t/**\n\t * Renders the mobile component by displaying a View All button\n\t * and hiding all but the first few cards\n\t */\n\trenderMobile() {\n\t\tif (\n\t\t\tthis.viewButton &&\n\t\t\tthis.viewButtonContainer.classList.contains(\n\t\t\t\tCategoryHighlight.CLASSES.NOT_DISPLAYED\n\t\t\t) &&\n\t\t\tthis.cards.length > CategoryHighlight.MOBILE_CARD_LIMIT\n\t\t) {\n\t\t\t// Show View All button\n\t\t\tthis.viewButtonContainer.classList.remove(\n\t\t\t\tCategoryHighlight.CLASSES.NOT_DISPLAYED\n\t\t\t)\n\t\t\t// Hide all cards except the first few\n\t\t\tthis.cards.forEach((card, index) => {\n\t\t\t\tif (index > CategoryHighlight.MOBILE_CARD_LIMIT) {\n\t\t\t\t\tcard.classList.add(CategoryHighlight.CLASSES.HIDDEN)\n\t\t\t\t}\n\t\t\t})\n\t\t\t// Fade the last visible card\n\t\t\tthis.cards[CategoryHighlight.MOBILE_CARD_LIMIT].classList.add(\n\t\t\t\tCategoryHighlight.CLASSES.FADED\n\t\t\t)\n\t\t\t// Add click event handler to View All button\n\t\t\tthis.viewButton.addEventListener('click', this.toggleView)\n\t\t}\n\t}\n\n\t/**\n\t * Destroys the mobile nav by removing the click events\n\t */\n\tdestroyMobile() {\n\t\tthis.viewButton.ariaExpanded = 'false'\n\t\tthis.viewButton.removeEventListener('click', this.toggleView)\n\t}\n}\n"],"names":["CategoryHighlight","static","CARDS_CONTAINER","CARD","COMPONENT","VIEW_BUTTON_CONTAINER","VIEW_BUTTON","FADED","HIDDEN","NOT_DISPLAYED","VIEW_ALL","VIEW_LESS","constructor","element","this","id","mediaQuery","window","matchMedia","isDesktop","matches","cacheDom","attachEvents","viewButtonContainer","onBreakpointChange","cardsContainer","querySelector","SELECTORS","cards","querySelectorAll","viewButton","addEventListener","detachEvents","removeEventListener","destroy","destroyMobile","destroyDesktop","renderDesktop","renderMobile","toggleView","event","preventDefault","Array","from","forEach","card","index","MOBILE_CARD_LIMIT","classList","toggle","CLASSES","ariaExpanded","innerText","LABELS","ariaLabel","scrollIntoView","behavior","remove","add","contains","length"],"sourceRoot":""}