import{_ as D,g as L,h as P,i as E,L as V,t as B,a0 as U,C as O,r as g,o as l,c as n,a as c,x as h,j as u,e as o,w as y,n as v,G as _,b as f,k,F,E as b,p as H,f as M}from"./app.2934e07b.js";import{B as I}from"./breadcrumb.d66f3160.js";import"./anchor.6cf59b96.js";const K=L(()=>P(()=>E(()=>import("./vue-select.es.12d6cbe5.js"),["assets/vue-select.es.12d6cbe5.js","assets/app.2934e07b.js","assets/app.3901f893.css"]))),z={name:"articles-with-filter",components:{Anchor:V,Breadcrumb:I,CustomPicture:B,Heading:U,CustomSvg:O,VueSelect:K},props:["sectionClasses","contentClasses","containerClasses","heading","content","buttons","organizationId","initialArticles","articleCategories","articleServices","articleTypes","initialFilters","articleTypeFilters","showKeywordSearch","componentStyles","styles"],data(){return{searchError:!1,nextPageUrl:null,articles:[],strings:{continue:"Continue reading"},filters:{category:{value:this.articleCategories.find(t=>t.category===(this.initialFilters.category||null))||null,active:!1},service:{value:this.articleServices.find(t=>t.service===(this.initialFilters.service||null))||null,active:!1},keyword:{value:this.initialFilters.keyword||null,active:!1},types:[]}}},methods:{onBreadcrumbAnchorClicked(t){if(t.target&&t.target.tagName.toLowerCase()==="a"){const e=new URL(t.target.href);if(e){const r=e.searchParams.get("category")||null;if(r){const C=this.articleCategories.find(s=>s.category===r);C&&this.onCategorySelected(C)}}}},async getArticles(t){await axios.get(t).then(e=>{this.articles=this.articles.concat(e.data.articles),this.nextPageUrl=e.data.nextPageUrl,this.searchError=!1})},async loadMore(t){t.preventDefault();const e=this.$refs.buttonContainer;e.classList.contains("disabled")||(e.classList.add("disabled"),await this.getArticles(this.nextPageUrl),e.classList.remove("disabled"))},articleHeadingConfig(t){return{classes:[],tag:"heading",level:3,heading:'<span class="standout-text">'+t.title+"</span>"}},async refreshArticles(){const t=new URLSearchParams([["articleTypes",this.filters.types.length?this.filters.types.filter(e=>this.articleTypes.includes(e)):this.articleTypes],this.filters.category.value?["category",this.filters.category.value.category]:null,this.filters.service.value?["service",this.filters.service.value.service]:null,this.filters.keyword.value?["keyword",this.filters.keyword.value]:null].filter(e=>e!==null));await axios.get("/api/filtered-articles",{params:t}).then(e=>{e.data.articles.length?(this.articles=e.data.articles,this.nextPageUrl=e.data.nextPageUrl,this.searchError=!1):this.searchError=!0})},toggleFilterContainerDisabled(t){document.querySelector(".filter-container").classList.toggle("disabled",t)},async onCategorySelected(t){this.filters.category.value!==t&&(this.toggleFilterContainerDisabled(!0),this.setFilterValue("category",t),await this.refreshArticles(),this.toggleFilterContainerDisabled(!1),this.searchError&&this.setFilterValue("category",null)),await this.toggleFilterActive("category",!1)},async onServiceSelected(t){this.filters.service.value!==t&&(this.toggleFilterContainerDisabled(!0),this.setFilterValue("service",t),await this.refreshArticles(),this.toggleFilterContainerDisabled(!1),this.searchError&&this.setFilterValue("service",null)),await this.toggleFilterActive("service",!1)},async onKeywordSelected(t){t.preventDefault(),this.$refs.input_keyword.blur();const e=this.$refs.input_keyword.value.trim()||null;this.filters.keyword.value!==e&&(this.toggleFilterContainerDisabled(!0),this.setFilterValue("keyword",e),await this.refreshArticles(),this.toggleFilterContainerDisabled(!1),this.searchError&&(this.setFilterValue("keyword",null),this.$refs.input_keyword.value="")),await this.toggleFilterActive("keyword",!1)},setFilterValue(t,e){this.filters[t].value=e},async addTypeFilter(t){this.filters.types.find(e=>e===t)||((this.filters.types.length<3||this.filters.types.length===this.articleTypes.length-1)&&(this.filters.types=[]),this.toggleFilterContainerDisabled(!0),this.filters.types.push(t),await this.refreshArticles(),this.toggleFilterContainerDisabled(!1),this.searchError&&(this.filters.types=this.filters.types.filter(e=>e!==t)))},async removeTypeFilter(t){this.filters.types.find(e=>e===t)&&(this.toggleFilterContainerDisabled(!0),this.filters.types=this.filters.types.filter(e=>e!==t),await this.refreshArticles(),this.toggleFilterContainerDisabled(!1))},async toggleTypeFilter(t){this.filters.types.find(e=>e===t)?await this.removeTypeFilter(t):await this.addTypeFilter(t)},async toggleFilterActive(t,e,r=!1){this.filters[t].active=e,t==="category"?(this.filters.keyword.active&&!r&&await this.toggleFilterActive("keyword",!1,!0),this.filters.service.active&&!r&&await this.toggleFilterActive("service",!1,!0),this.$refs.input_category&&(this.$refs.input_category.clearSelection(),e&&(await this.$nextTick,this.$refs.input_category.$refs.search.focus()))):t==="service"?(this.filters.category.active&&!r&&await this.toggleFilterActive("category",!1,!0),this.filters.keyword.active&&!r&&await this.toggleFilterActive("keyword",!1,!0),this.$refs.input_service&&(this.$refs.input_service.clearSelection(),e&&(await this.$nextTick,this.$refs.input_service.$refs.search.focus()))):t==="keyword"&&(this.filters.category.active&&!r&&await this.toggleFilterActive("category",!1,!0),this.filters.service.active&&!r&&await this.toggleFilterActive("service",!1,!0),this.$refs.input_keyword&&(this.$refs.input_keyword.value="",e&&(await this.$nextTick,this.$refs.input_keyword.focus())))},async resetFilter(t,e=!0){e&&this.toggleFilterContainerDisabled(!0),this.setFilterValue(t,null),this.toggleFilterActive(t,!1),e&&(await this.refreshArticles(),this.toggleFilterContainerDisabled(!1))},async resetState(){this.toggleFilterContainerDisabled(!0),this.filters.types=[],await this.resetFilter("category",!1),await this.resetFilter("service",!1),await this.resetFilter("keyword",!1),await this.refreshArticles(),this.toggleFilterContainerDisabled(!1)}},created(){this.initialArticles&&(this.articles=this.articles.concat(this.initialArticles.data),this.nextPageUrl=this.initialArticles.next_page_url),this.organizationId&&(this.orgId=this.organizationId)}},N=t=>(H("data-v-0f951d32"),t=t(),M(),t),R={class:"filter-content-container"},W={class:"filter-content"},j=["innerHTML"],q={class:"filter-container"},G=N(()=>c("p",{class:"filter-label"},"Filter by",-1)),J={class:"filters"},Q={key:1,class:"filter filter-category"},X=["textContent"],Y={class:"filter-form"},Z={key:2,class:"filter filter-service"},$=["textContent"],ee={class:"filter-form"},te={class:"filter filter-article-type"},ie=["onClick","textContent"],se={key:3,class:"filter filter-keyword"},re=["textContent"],le={class:"filter-form two-fields"},ae={ref:"input_keyword",type:"text",placeholder:"Enter a keyword\u2026"},ce={key:0,class:"articles"},ne={class:"article-details"},oe=["innerHTML"],he={key:0,class:"buttons",ref:"buttonContainer"},fe=["href","textContent"];function ue(t,e,r,C,s,a){const x=g("heading"),d=g("custom-svg"),S=g("vue-select"),A=g("custom-picture"),m=g("anchor"),T=g("breadcrumb");return l(),n("section",{class:h(r.sectionClasses)},[c("div",{class:h(r.contentClasses)},[c("div",{class:h(r.containerClasses)},[c("div",R,[c("div",W,[r.heading?(l(),u(x,{key:0,class:"filter-heading",config:r.heading},null,8,["config"])):o("",!0),r.content?(l(),n("div",{key:1,innerHTML:r.content},null,8,j)):o("",!0)]),c("div",q,[G,c("div",J,[s.filters.category.value!==null||s.filters.service.value!==null||s.filters.keyword.value!==null||this.filters.types.length>0?(l(),n("p",{key:0,class:"clear-filters",onClick:e[0]||(e[0]=(...i)=>a.resetState&&a.resetState(...i))},"Clear all filters")):o("",!0),r.articleCategories&&r.articleCategories.length?(l(),n("div",Q,[s.filters.category.value!==null&&!s.filters.category.active?(l(),u(d,{key:0,type:"icon",name:"icon-close-thick",onClick:e[1]||(e[1]=i=>a.resetFilter("category")),class:"icon-close-thick"})):o("",!0),y(c("label",{onClick:e[2]||(e[2]=i=>a.toggleFilterActive("category",!0)),class:h(s.filters.category.value!==null?"active":null),textContent:_(s.filters.category.value!==null?s.filters.category.value.category:"Health library topic")},null,10,X),[[v,!s.filters.category.active]]),y(c("div",Y,[f(S,{ref:"input_category",placeholder:"Choose a topic\u2026",label:"category",options:r.articleCategories,clearable:!1,clearSearchOnBlur:()=>!0,"close-on-select":!0,"select-on-tab":!0,"onOption:selected":a.onCategorySelected},{"open-indicator":k(()=>[f(d,{type:"icon",name:"icon-select-arrow",class:"select-arrow-icon"})]),_:1},8,["options","onOption:selected"])],512),[[v,s.filters.category.active]])])):o("",!0),r.articleServices&&r.articleServices.length?(l(),n("div",Z,[s.filters.service.value!==null&&!s.filters.service.active?(l(),u(d,{key:0,type:"icon",name:"icon-close-thick",onClick:e[3]||(e[3]=i=>a.resetFilter("service")),class:"icon-close-thick"})):o("",!0),y(c("label",{onClick:e[4]||(e[4]=i=>a.toggleFilterActive("service",!0)),class:h(s.filters.service.value!==null?"active":null),textContent:_(s.filters.service.value!==null?s.filters.service.value.service:"Patient story service")},null,10,$),[[v,!s.filters.service.active]]),y(c("div",ee,[f(S,{ref:"input_service",placeholder:"Choose a service\u2026",label:"service",options:r.articleServices,clearable:!1,clearSearchOnBlur:()=>!0,"close-on-select":!0,"select-on-tab":!0,"onOption:selected":a.onServiceSelected},{"open-indicator":k(()=>[f(d,{type:"icon",name:"icon-select-arrow",class:"select-arrow-icon"})]),_:1},8,["options","onOption:selected"])],512),[[v,s.filters.service.active]])])):o("",!0),(l(!0),n(F,null,b(r.articleTypeFilters,(i,p)=>(l(),n("div",te,[s.filters.types.find(w=>w===i)?(l(),u(d,{key:0,type:"icon",name:"icon-close-thick",onClick:w=>a.removeTypeFilter(i),class:"icon-close-thick"},null,8,["onClick"])):o("",!0),c("label",{onClick:w=>a.toggleTypeFilter(i),class:h(s.filters.types.find(w=>w===i)?"active":null),textContent:_(p)},null,10,ie)]))),256)),r.showKeywordSearch?(l(),n("div",se,[s.filters.keyword.value!==null&&!s.filters.keyword.active?(l(),u(d,{key:0,type:"icon",name:"icon-close-thick",onClick:e[5]||(e[5]=i=>a.resetFilter("keyword")),class:"icon-close-thick"})):o("",!0),y(c("label",{onClick:e[6]||(e[6]=i=>a.toggleFilterActive("keyword",!0)),class:h(s.filters.keyword.value!==null?"active":null),textContent:_(s.filters.keyword.value!==null?s.filters.keyword.value:"Keyword search")},null,10,re),[[v,!s.filters.keyword.active]]),y(c("form",le,[c("input",ae,null,512),c("button",{class:"cta tertiary",onClick:e[7]||(e[7]=(...i)=>a.onKeywordSelected&&a.onKeywordSelected(...i))},"Search")],512),[[v,s.filters.keyword.active]])])):o("",!0),this.searchError?(l(),n("p",{key:4,class:"search-error red",onClick:e[8]||(e[8]=(...i)=>a.resetState&&a.resetState(...i))},"We are unable to find articles matching these filters. Please\xA0try\xA0again.")):o("",!0)])])]),this.articles&&this.articles.length?(l(),n("ul",ce,[(l(!0),n(F,null,b(this.articles,i=>(l(),n("li",{key:i.id},[i.picture?(l(),u(m,{key:0,href:i.url,class:"image-container"},{default:k(()=>[f(A,{pictureClasses:"img-container",src:i.picture.url,sources:i.picture.media,width:i.picture.width,height:i.picture.height,alt:i.picture.alt,title:i.picture.alt},null,8,["src","sources","width","height","alt","title"])]),_:2},1032,["href"])):o("",!0),c("div",ne,[i.breadcrumbItems?(l(),u(T,{key:0,items:i.breadcrumbItems,onOnBreadcrumbAnchorClicked:a.onBreadcrumbAnchorClicked},null,8,["items","onOnBreadcrumbAnchorClicked"])):o("",!0),f(m,{href:i.url},{default:k(()=>[f(x,{config:a.articleHeadingConfig(i)},null,8,["config"])]),_:2},1032,["href"]),c("p",{class:"excerpt",innerHTML:i.excerpt},null,8,oe),f(m,{class:"continue",href:i.url,textContent:_(s.strings.continue)},null,8,["href","textContent"])])]))),128))])):o("",!0)],2),r.buttons&&this.nextPageUrl?(l(),n("div",he,[(l(!0),n(F,null,b(r.buttons,i=>(l(),n("a",{href:i.href,class:h(i.class),textContent:_(i.text),onClick:e[9]||(e[9]=(...p)=>a.loadMore&&a.loadMore(...p))},null,10,fe))),256))],512)):o("",!0)],2)],2)}const ve=D(z,[["render",ue],["__scopeId","data-v-0f951d32"]]);export{ve as default};