https://www.zwolsetheaters.nl/assets/js/elements/header-filter-block.0ea.js

1"use strict";(self["webpackChunkfrontend"]=self["webpackChunkfrontend"]||[]).push([[1624],{8080:function(e,r,t){t.r(r),t.d(r,{default:function(){return E}});var l=t(9726);const _=["innerHTML"],o=["action"],a=["name","value"],i=["name","value"],s=["name","value"],c=["aria-label"],n=["placeholder","value"],d=["id","value"],b=["for","innerHTML"],u=["id","value"],f=["for","innerHTML"],k=["innerHTML"],h=["action"],g=["name","placeholder","aria-label"];function p(e,r,t,p,m,y){const v=(0,l.g2)("BaseTextElement"),C=(0,l.g2)("BaseIcon"),F=(0,l.g2)("BaseButton"),$=(0,l.g2)("FormDatePicker"),M=(0,l.gN)("click-outside");return(0,l.uX)(),(0,l.CE)("article",{class:(0,l.C4)(e.$style["header-filter-block"])},[(0,l.Lk)("div",{class:(0,l.C4)(e.$style["header-filter-block__wrapper"])},[(0,l.Lk)("div",{class:(0,l.C4)([e.$style["header-filter-block__section"],e.$style["is--discover"]]),ref:"routeGenrePickerScroll"},[(0,l.Lk)("div",{class:(0,l.C4)(e.$style["header-filter-block__content"])},[e.baseModel.discoverTitle?((0,l.uX)(),(0,l.CE)("span",{key:0,class:(0,l.C4)(e.$style["header-filter-block__content__title"]),innerHTML:e.baseModel.discoverTitle},null,10,_)):(0,l.Q3)("",!0),(0,l.bF)(v,{class:(0,l.C4)(e.$style["header-filter-block__content__text"]),text:e.baseModel.discoverText},null,8,["class","text"])],2),(0,l.Lk)("form",{action:e.baseModel.url,class:(0,l.C4)(e.$style["header-filter-block__form"])},[(0,l.Lk)("input",{type:"hidden",name:e.baseModel.routeGenreFilter.routeParameters[0],value:e.routesKeys},null,8,a),(0,l.Lk)("input",{type:"hidden",name:e.baseModel.routeGenreFilter.genreParameters[0],value:e.genresKeys},null,8,i),(0,l.Lk)("input",{type:"hidden",name:e.baseModel.dateFilter.parameters[0],value:e.datesFormatted},null,8,s),(0,l.bo)(((0,l.uX)(),(0,l.CE)("div",{class:(0,l.C4)([e.$style["header-filter-block__form__field"],e.$style["header-filter-block__form__route-genre-picker"],{[e.$style["is--active"]]:e.routeGenrePickerActive}])},[(0,l.Lk)("button",{type:"button",class:(0,l.C4)(e.$style["header-filter-block__form__route-genre-picker__trigger"]),"aria-label":e.baseModel.routeGenreFilter.label,onClick:r[0]||(r[0]=r=>e.routeGenrePickerToggle())},[(0,l.Lk)("input",{class:(0,l.C4)(e.$style["header-filter-block__form__input-bold"]),placeholder:e.baseModel.routeGenreFilter.placeholder+"...",value:e.routes.length||e.genres.length?e.baseModel.routeGenreFilter.placeholder+" "+e.routesValues.concat(e.genresValues).join(", "):"",readonly:""},null,10,n),(0,l.Lk)("div",{class:(0,l.C4)(e.$style["header-filter-block__form__input-bold__icon-wrapper"])},[(0,l.bF)(C,{name:"chevron-down-bold",class:(0,l.C4)(e.$style["header-filter-block__form__input-bold__icon"])},null,8,["class"])],2)],10,c),(0,l.bF)(l.eB,{name:"fade"},{default:(0,l.k6)(()=>[e.routeGenrePickerActive?((0,l.uX)(),(0,l.CE)("div",{key:0,class:(0,l.C4)(e.$style["header-filter-block__form__route-genre-picker__content"])},[e.baseModel.routeGenreFilter.routes.length?((0,l.uX)(),(0,l.CE)("div",{key:0,class:(0,l.C4)(e.$style["header-filter-block__form__route-genre-picker__tags"])},[((0,l.uX)(!0),(0,l.CE)(l.FK,null,(0,l.pI)(e.baseModel.routeGenreFilter.routes,(t,_)=>((0,l.uX)(),(0,l.CE)("div",{key:_,class:(0,l.C4)(e.$style["header-filter-block__form__route-genre-picker__tags__item"])},[(0,l.bo)((0,l.Lk)("input",{"onUpdate:modelValue":r[1]||(r[1]=r=>e.routes=r),id:"header-route_"+t.key,value:t,type:"checkbox",class:(0,l.C4)(e.$style["header-filter-block__form__route-genre-picker__tags__item__input"])},null,10,d),[[l.lH,e.routes]]),(0,l.Lk)("label",{for:"header-route_"+t.key,class:(0,l.C4)([e.$style["header-filter-block__form__route-genre-picker__tags__item__label"],e.$style["bg--"+t.backgroundColor]]),innerHTML:t.value},null,10,b)],2))),128))],2)):(0,l.Q3)("",!0),e.baseModel.routeGenreFilter.genres.length?((0,l.uX)(),(0,l.CE)("div",{key:1,class:(0,l.C4)(e.$style["header-filter-block__form__route-genre-picker__tags"])},[((0,l.uX)(!0),(0,l.CE)(l.FK,null,(0,l.pI)(e.baseModel.routeGenreFilter.genres,(t,_)=>((0,l.uX)(),(0,l.CE)("div",{key:_,class:(0,l.C4)(e.$style["header-filter-block__form__route-genre-picker__tags__item"])},[(0,l.bo)((0,l.Lk)("input",{"onUpdate:modelValue":r[2]||(r[2]=r=>e.genres=r),id:"header-genre_"+t.key,value:t,type:"checkbox",class:(0,l.C4)(e.$style["header-filter-block__form__route-genre-picker__tags__item__input"])},null,10,u),[[l.lH,e.genres]]),(0,l.Lk)("label",{for:"header-genre_"+t.key,class:(0,l.C4)([e.$style["header-filter-block__form__route-genre-picker__tags__item__label"],e.$style["bg--"+t.backgroundColor]]),innerHTML:t.value},null,10,f)],2))),128))],2)):(0,l.Q3)("",!0),(0,l.bF)(F,{onClick:r[3]||(r[3]=r=>e.routeGenrePickerActiveToFalse()),title:e.baseModel.submitFilterButton,class:(0,l.C4)(e.$style["header-filter-block__form__route-genre-picker__button"])},null,8,["title","class"])],2)):(0,l.Q3)("",!0)]),_:1})],2)),[[M,()=>e.routeGenrePickerActive=!1]]),(0,l.bF)($,{dates:e.dates,"onUpdate:dates":r[4]||(r[4]=r=>e.dates=r),datesFormatted:e.datesFormatted,"onUpdate:datesFormatted":r[5]||(r[5]=r=>e.datesFormatted=r),range:!1,scroll:!0,placeholder:e.baseModel.dateFilter.placeholder,"aria-labels":{input:e.baseModel.dateFilter.label},"input-class-name":e.$style["header-filter-block__form__input-bold"],class:(0,l.C4)([e.$style["header-filter-block__form__field"],{[e.$style["is--active"]]:e.datePickerActive}]),onOpen:r[6]||(r[6]=r=>e.datePickerActive=!0),onClosed:r[7]||(r[7]=r=>e.datePickerActive=!1)},{"input-icon":(0,l.k6)(()=>[(0,l.Lk)("div",{class:(0,l.C4)(e.$style["header-filter-block__form__input-bold__icon-wrapper"])},[(0,l.bF)(C,{name:"chevron-down-bold",class:(0,l.C4)(e.$style["header-filter-block__form__input-bold__icon"])},null,8,["class"])],2)]),_:1},8,["dates","datesFormatted","placeholder","aria-labels","input-class-name","class"]),(0,l.bF)(F,{type:"submit",title:e.baseModel.submitButton,class:(0,l.C4)(e.$style["header-filter-block__form__button"])},null,8,["title","class"])],10,o)],2),(0,l.Lk)("div",{class:(0,l.C4)([e.$style["header-filter-block__section"],e.$style["is--search"]])},[(0,l.Lk)("div",{class:(0,l.C4)(e.$style["header-filter-block__content"])},[e.baseModel.searchTitle?((0,l.uX)(),(0,l.CE)("span",{key:0,class:(0,l.C4)(e.$style["header-filter-block__content__title"]),innerHTML:e.baseModel.searchTitle}

1,null,10,k)):(0,l.Q3)("",!0)],2),(0,l.Lk)("form",{action:e.baseModel.url,class:(0,l.C4)(e.$style["header-filter-block__form"])},[(0,l.Lk)("input",{type:"text",name:e.baseModel.searchFilter.parameters[0],placeholder:e.baseModel.searchFilter.placeholder,class:(0,l.C4)(e.$style["header-filter-block__form__input-search"]),"aria-label":e.baseModel.searchFilter.label},null,10,g),(0,l.bF)(F,{type:"submit","title-attr":e.baseModel.submitButton,class:(0,l.C4)(e.$style["header-filter-block__form__button-icon"])},null,8,["title-attr","class"])],10,h)],2)],2)],2)}t(3725),t(1339);var m=t(8557),y=t(6125),v=t(6401);class C{constructor(e=null){(0,y.A)(this,"label",""),(0,y.A)(this,"placeholder",""),(0,y.A)(this,"parameters",[]),(0,v.A)(e)||(0,m.Gv)().mergeExistingProps(this,{...e})}}class F extends C{constructor(e=null){super(e),(0,y.A)(this,"routeParameters",[]),(0,y.A)(this,"genreParameters",[]),(0,y.A)(this,"routes",[]),(0,y.A)(this,"genres",[]),(0,v.A)(e)||(0,m.Gv)().mergeExistingProps(this,{...e,routes:e.routes?e.routes.map(e=>new $(e)):[],genres:e.genres?e.genres.map(e=>new $(e)):[]})}}class ${constructor(e=null){(0,y.A)(this,"key",""),(0,y.A)(this,"value",""),(0,y.A)(this,"backgroundColor",""),(0,v.A)(e)||(0,m.Gv)().mergeExistingProps(this,{...e})}}class M extends m.xu{constructor(e=null){super(e),(0,y.A)(this,"url",""),(0,y.A)(this,"discoverTitle",""),(0,y.A)(this,"discoverText",""),(0,y.A)(this,"searchTitle",""),(0,y.A)(this,"submitButton",""),(0,y.A)(this,"submitFilterButton",""),(0,y.A)(this,"routeGenreFilter",new F),(0,y.A)(this,"dateFilter",new C),(0,y.A)(this,"searchFilter",new C),(0,v.A)(e)||(0,m.Gv)().mergeExistingProps(this,{...e,routeGenreFilter:e.routeGenreFilter&&new F(e.routeGenreFilter),dateFilter:e.dateFilter&&new C(e.dateFilter),searchFilter:e.searchFilter&&new C(e.searchFilter)})}}var A=t(7031),L=(0,l.pM)({props:{model:{type:Object,required:!0}},setup(e){const r=(0,l.KR)([]),t=(0,l.EW)(()=>r.value.map(e=>e.value.toLocaleLowerCase())),_=(0,l.EW)(()=>r.value.map(e=>e.key)),o=(0,l.KR)([]),a=(0,l.EW)(()=>o.value.map(e=>e.value.toLocaleLowerCase())),i=(0,l.EW)(()=>o.value.map(e=>e.key)),s=(0,l.KR)([void 0]),c=(0,l.KR)([void 0]),n=(0,l.KR)(),d=(0,l.KR)(!1),b=(0,l.KR)(!1),u=()=>{setTimeout(()=>{!b.value&&n.value&&n.value?.scrollIntoView({behavior:"smooth"}),b.value=!b.value},500)},f=()=>{b.value=!1,window.scrollTo({top:0,behavior:"smooth"})};return{baseModel:new M(e.model),routes:r,routesValues:t,routesKeys:_,genres:o,genresValues:a,genresKeys:i,dates:s,datesFormatted:c,datePickerActive:d,routeGenrePickerScroll:n,routeGenrePickerActive:b,routeGenrePickerToggle:u,routeGenrePickerActiveToFalse:f}},components:{BaseTextElement:m.dG,FormDatePicker:A["default"]}}),G={"header-filter-block__form__route-genre-picker__tags__item__input":"header-filter-block__form__route-genre-picker__tags__item__input__a35842","header-filter-block__content__title":"header-filter-block__content__title__b77f18","header-filter-block__form__input-bold__icon":"header-filter-block__form__input-bold__icon__a74257","header-filter-block__form__route-genre-picker__button":"header-filter-block__form__route-genre-picker__button__a01cd3","header-filter-block__form__button":"header-filter-block__form__button__c2765b","header-filter-block__form__button-icon":"header-filter-block__form__button-icon__ae1153","is--loading":"is--loading__fd9363","header-filter-block__form__route-genre-picker__trigger":"header-filter-block__form__route-genre-picker__trigger__fd8226",disabled:"disabled__e1994d","header-filter-block__form__input-bold":"header-filter-block__form__input-bold__ff6f5d","header-filter-block__form__input-search":"header-filter-block__form__input-search__bb5b04","header-filter-block":"header-filter-block__b2f8c7","header-filter-block__wrapper":"header-filter-block__wrapper__a85987","header-filter-block__section":"header-filter-block__section__feaccf","is--discover":"is--discover__bd8712","is--search":"is--search__d415bf","header-filter-block__content":"header-filter-block__content__fddf7c","header-filter-block__content__text":"header-filter-block__content__text__d03cc7","header-filter-block__form":"header-filter-block__form__cd3d52","header-filter-block__form__field":"header-filter-block__form__field__f0882d","header-filter-block__form__label":"header-filter-block__form__label__ce2132","header-filter-block__form__input-bold__icon-wrapper":"header-filter-block__form__input-bold__icon-wrapper__bf88e3","is--active":"is--active__ae3664","header-filter-block__form__route-genre-picker":"header-filter-block__form__route-genre-picker__f7e4d9","header-filter-block__form__route-genre-picker__content":"header-filter-block__form__route-genre-picker__content__fa85e7","header-filter-block__form__route-genre-picker__tags":"header-filter-block__form__route-genre-picker__tags__b9b486","header-filter-block__form__route-genre-picker__tags__item":"header-filter-block__form__route-genre-picker__tags__item__b78635","header-filter-block__form__route-genre-picker__tags__item__label":"header-filter-block__form__route-genre-picker__tags__item__label__f6f178","bg--black-1":"bg--black-1__db7c85","bg--white-1":"bg--white-1__b62673","bg--red-1":"bg--red-1__fc24ea","bg--orange-1":"bg--orange-1__c529d6","bg--green-1":"bg--green-1__ceedbf","bg--green-2":"bg--green-2__c57299","bg--blue-1":"bg--blue-1__a1b3bf","bg--blue-2":"bg--blue-2__a3d4cf","bg--turquoise-1":"bg--turquoise-1__a73eef","bg--purple-1":"bg--purple-1__c00312","bg--purple-2":"bg--purple-2__d73ca5","bg--sand-1":"bg--sand-1__e7f3df","bg--grey-1":"bg--grey-1__ff3e94","bg--grey-2":"bg--grey-2__b810be","bg--grey-3":"bg--grey-3__b8bcc0","bg--grey-4":"bg--grey-4__a0208d","bg--grey-5":"bg--grey-5__dffbce","bg--grey-6":"bg--grey-6__f18e08"},w=t(6262);const P={};P["$style"]=G;const T=(0,w.A)(L,[["render",p],["__cssModules",P]]);var E=T}}]);