https://www.vzug.com/product-category-feature.module-VPIQNNJ5.js

1import{a as Tt,b as It}from"./chunk-UDSWL347.js";import{a as kt}from"./chunk-JHJ2LJAO.js";import{a as Ft}from"./chunk-ZQP5IB5S.js";import{a as O,b as St,c as A,d as D,e as xt}from"./chunk-IIVUVU24.js";import{c as Et}from"./chunk-7UYBN44Z.js";import{a as Rt}from"./chunk-IFPSOMEL.js";import"./chunk-5H2XEJW2.js";import"./chunk-XJV6KU5D.js";import"./chunk-6YQLZPO2.js";import"./chunk-TO4G5SQP.js";import"./chunk-GJJP6AOF.js";import{b as ft,c as ht,d as wt}from"./chunk-EPBWRYCN.js";import"./chunk-E6FVIUIM.js";import"./chunk-22ISET2Y.js";import"./chunk-PNLX6JSO.js";import{L as Ct,M as vt,l as Qe,m as Ye,n as Ge,o as Ke,p as Je,q as Xe,r as Ze,s as et}from"./chunk-3RNOYD7Z.js";import"./chunk-SNHMLIJV.js";import"./chunk-TDOLGIQO.js";import"./chunk-BGW4JFVC.js";import"./chunk-FK5B46MF.js";import{e as _t,f as yt}from"./chunk-ISMLZ5AO.js";import{a as bt,b as ut}from"./chunk-ERVRDRGD.js";import{d as tt,t as dt,u as mt,v as gt,x as pt}from"./chunk-NKA5FZDD.js";import{Nc as lt,ga as nt,ja as ct,r as te,s as re,sc as st}from"./chunk-KNPV2EHA.js";import{Y as qe}from"./chunk-DDP3RWEG.js";import{a as ot,b as at}from"./chunk-RCCDZFTR.js";import{a as rt,f as it}from"./chunk-7RSDEBSU.js";import{A as je,a as Ve,e as Ue,g as ze,h as We}from"./chunk-Z5KZRLC7.js";import"./chunk-QWOVKJEQ.js";import"./chunk-H7WMH4BU.js";import{Aa as Fe,Ba as ee,Ca as Ee,Jd as De,Ka as Pe,Kd as Le,Qc as Ae,ab as Be,c as Se,j as xe,nb as Me,pc as He,r as ke,sa as Te,ta as X,ua as C,va as Ie,vb as T,wa as Re,xb as Ne,xc as $e,yc as Oe,za as Z}from"./chunk-5JM3UTP4.js";import{$b as pe,Aa as B,Ba as de,Fa as c,Ib as m,Ic as x,K as U,Na as w,Oa as S,Oc as k,Qc as d,R as ce,Uc as Ce,Vc as j,Wc as q,Y as se,_ as E,_b as ge,_c as Q,a as oe,ad as ve,cd as Y,dc as _e,dd as fe,e as F,eb as me,ec as ye,fd as he,mc as z,nc as W,nd as G,o as ae,oc as M,pc as be,qc as N,ra as P,rc as ue,rd as we,sd as K,tc as H,ua as h,uc as $,va as le,vc as _,w as u,wc as l,x as ne,xc as s,xd as p,yc as y,yd as b,zd as J}from"./chunk-4MWVABFH.js";import{a as f,b as V}from"./chunk-76DGGKHL.js";var I=Ie(D),Xt=C(I,r=>Object.values(r.categories)),Pt=r=>C(I,a=>a?.categories[r]),Bt=C(I,r=>r.loading),Zt=C(I,r=>r.error),er=C(I,r=>r.success);var v=class r{constructor(){this.store=c(Te);this.loading$=this.store.pipe(X(Bt))}getCategory(a){return this.store.pipe(X(Pt(a)))}loadCategory(a,e){this.store.dispatch(O({categoryCode:a,catalogId:e}))}static{this.\u0275fac=function(e){return new(e||r)}}static{this.\u0275prov=B({token:r,factory:r.\u0275fac})}};var Ot=["tabList"],At=["contentWrapper"],Dt=r=>({categoryName:r}),Lt=r=>({productName:r}),Vt=()=>[];function Ut(r,a){if(r&1){let e=x();l(0,"div")(1,"c-product-tile",18),p(2,"priceRange"),p(3,"cxTranslate"),k("click",function(){let i=w(e),o=i.$implicit,n=i.$index,g=d(3).$implicit,Nt=d(3);return S(Nt.handleProductTileClick(o,n,g))}),s()()}if(r&2){let e=a.$implicit,t=a.$index,i=d(6);Y(G("c-category-browser__base-products g-col-12 g-col-sm-5 g-col-md-3 g-start-sm-",t%2===0?1:7," g-start-md-",t%3*3+(t%3+1))),m(),_("images",e.bestVariant.images)("name",e.name)("description",e.description)("colorRange",i.colorRanges.get(e.code))("price",b(2,19,e.priceRange))("hasZeroPrice",!e.priceRange||!e.priceRange.minPrice||!e.priceRange.minPrice.value||e.priceRange.minPrice.value===0)("startingPrice",e.priceRange==null||e.priceRange.minPrice==null?null:e.priceRange.minPrice.value)("endingPrice",e.priceRange==null||e.priceRange.maxPrice==null?null:e.priceRange.maxPrice.value)("priceFontWeight",i.FontWeight.MEDIUM)("url",e.bestVariant.url)("showButton",!0)("useUrlForButton",!0)("buttonText",J(3,21,"product.discoverProduct",K(24,Lt,e.name)))("buttonModifier",i.ButtonModifier.SECONDARY)("pricePosition",i.PricePosition.INLINE)}}function zt(r,a){if(r&1){let e=x();l(0,"div",3)(1,"div",12,1)(3,"c-teaser-primary",13),p(4,"encodeUriComponent"),p(5,"cxTranslate"),k("handleTeaserLinkClick",function(){w(e);let i=d(2).$implicit,o=d(3);return S(o.handleTeaserLinkClick(i))}),s()(),l(6,"div",14),y(7,"e-heading",15),s(),l(8,"div",16),p(9,"async"),H(10,Ut,4,26,"div",17,W().trackByCode,!0),s()()}if(r&2){let e=d(2),t=e.$implicit,i=e.$index,o=d(2),n=d();m(3),_("title",t.teaserTitle)("text",t.description)("imageFallback",t.teaserImageFallback)("imageSrcSet",t.teaserImageSrcSet)("imageAlt",t.teaserImageAlt)("linkUrl",o.category+"--c"+o.category+"?query="+n.deviceFilter+n.productCategoryCode+o.category+n.primaryCategoryCode+b(4,16,t.id))("linkText",J(5,18,"product.discoverCategory",K(23,Dt,t.name)))("buttonModifier",n.ButtonModifier.PRIMARY)("disableAnimation",!0),m(4),_("theme",o.theme)("title",t.linkTitle)("headingType",n.HeadingType.H3)("headingFont",n.HeadingFont.TEXT)("fontWeight",n.FontWeight.LIGHT),m(),ve("active",i===b(9,21,n.activeTabIndex)),m(2),$(t.baseProducts)}}function Wt(r,a){if(r&1){let e=x();l(0,"div",9)(1,"a",10),k("click",function(){w(e);let i=d(),o=i.$implicit,n=i.$index,g=d(3);return S(g.handleCategorySelectionClick(o,n))}),fe(2),s(),ye(3,zt,12,25,"ng-template",11),s()}if(r&2){let e=d(),t=e.$implicit,i=e.$index;_("ngbNavItem",i),m(),z("data-tab-id",i),m(),he(" ",t.name," ")}}function jt(r,a){if(r&1&&M(0,Wt,4,3,"div",9),r&2){let e=a.$implicit;N(e?0:-1)}}function qt(r,a){if(r&1){let e=x();l(0,"div",3)(1,"div",5)(2,"div",6,0),p(5,"async"),H(6,jt,1,1,null,null,W().trackById,!0),s(),l(8,"e-scroll-indicator",7),p(9,"async"),k("scrollClick",function(i){w(e);let o=d(2);return S(o.handleScrollClick(i))}),s()(),y(10,"div",8),s()}if(r&2){let e=Q(3),t=Q(4),i=d(2);m(2),_("activeId",b(5,7,i.activeTabIndex))("destroyOnHide",!1),m(4),$(a),m(2),_("scrollableElement",t)("initTrigger$",i.indicatorInitTrigger$)("scrollStep",b(9,9,i.scrollStep$))("theme",i.theme),m(2),_("ngbNavOutlet",e)}}function Qt(r,a){if(r&1&&(l(0,"div"),y(1,"e-skeleton-loader",28),s()),r&2){let e=a.$index;Y(G("c-category-browser__base-products g-col-12 g-col-sm-5 g-col-md-3 g-start-sm-",e%2===0?1:7," g-start-md-",e%3*3+(e%3+1)))}}function Yt(r,a){r&1&&(l(0,"div",4)(1,"div",3)(2,"div",19),y(3,"e-skeleton-loader",20),s(),l(4,"div",21)(5,"div",22)(6,"div",23),y(7,"e-skeleton-loader",24),s(),l(8,"div",25),y(9,"e-skeleton-loader",26),s()()(),l(10,"div",14),y(11,"e-skeleton-loader",27),s(),l(12,"div",16),H(13,Qt,2,4,"div",17,ue),s()()()),r&2&&(m(13),$(we(0,Vt).constructor(3)))}function Gt(r,a){if(r&1&&(l(0,"div",2),M(1,qt,11,11,"div",3),p(2,"async"),be(3,Yt,15,1,"div",4),s()),r&2){let e,t=d();_("dComponentUid",t.componentUid)("ngClass",t.componentClasses),z("data-theme",a.theme),m(),N((e=b(2,4,t.categories$))?1:3,e)}}var R=class r extends kt{constructor(){super(...arguments);this.categoryFacade=c(v);this.baseSiteService=c(Me);this.routingService=c(He);this.productSelectionFacade=c(Et);this.eventService=c(Ne);this.imageRenditionsService=c(ct);this.winRef=c(Be);this.vzugBreakPointService=c(nt);this.scrollHandlerService=c(lt);this.productImageNormalizer=c(Ae);this.onNavigateService=c(wt);this.directionService=c(st);this.componentClasses="c-category-browser";this.ButtonModifier=Ve;this.HeadingType=ze;this.HeadingFont=We;this.FontWeight=rt;this.TextTag=je;this.IconKeys=Ue;this.PricePosition=qe;this.componentUid=this.component.uid;this.deviceFilter=":relevance-desc:tabItemType:Device";this.productCategoryCode=":productCategoryCode:";this.primaryCategoryCode=":primaryCategoryCode:";this._indicatorInitTrigger=new F(!1);this.indicatorInitTrigger$=this._indicatorInitTrigger.asObservable();this.sub=new oe;this.activeTabIndex=new F(0);this.categoryHierarchy$=this.data$.pipe(E((e,t)=>e.category===t.category),P(e=>this.categoryFacade.getCategory(e.category)),U(e=>e!==void 0));this.routerState$=this.routingService.getRouterState().pipe(U(e=>e.nextState===void 0),E((e,t)=>JSON.stringify(e.state)===JSON.stringify(t.state)));this.categories$=this.categoryHierarchy$.pipe(u(e=>this.mapCategories(e)),h(e=>{this.colorRanges.clear(),e.forEach(t=>t.baseProducts&&this.updateColorRanges(t.baseProducts))}),h(()=>this.onNavigateService.renderingCompleted(this.component.uid)),le(this.routerState$),u(([e,t])=>(this.preselectCategoryFromUrl(e,t),e)));this.colorRanges=new Map;this._scrollStep=new F(50);this.scrollStep$=this._scrollStep.asObservable();this.isMobile=this.vzugBreakPointService.isMobile();this.isLtrDirection=this.directionService.isLtrDirection();this.trackById=(e,t)=>t.id;this.trackByCode=(e,t)=>t.code||""}ngOnInit(){super.ngOnInit(),this.sub.add(ne([this.data$,this.baseSiteService.getAll(),this.baseSiteService.getActive()]).pipe(E(([e,,t],[i,,o])=>e.category===i.category&&t===o),h(([e,t,i])=>{let o=t.filter(n=>n.uid===i)[0];this.categoryFacade.loadCategory(e.category,o.defaultCatalogId??"")})).subscribe())}ngAfterViewInit(){this.sub.add(this.categories$.pipe(se(0),h(()=>this.winRef.nativeWindow?.requestAnimationFrame(()=>{this._indicatorInitTrigger.next(!0),this.scrollToTabItem(this.activeTabIndex?.value||0)}))).subscribe())}ngOnDestroy(){super.ngOnDestroy(),this.sub.unsubscribe()}getCategoryTeaserMedia(e){let{pictureBaseUrl:t,altText:i}=e||{};return{teaserImageSrcSet:t?this.imageRenditionsService.getSrcSet(t,"16x9",[600,960,1200,1680,1920,2400,3360]):"",teaserImageFallback:t?this.imageRenditionsService.getFallbackImage(t,"16x9",1200):"",teaserImageAlt:i||""}}mapCategories(e){return e.subcategories?.filter(t=>t.marketingCategory===!0)?.map(t=>

1f(f({},t),this.getCategoryTeaserMedia(t.teaserMedia)))||[]}updateColorRanges(e){e.forEach(t=>{let i=this.productSelectionFacade.findSelectableByCode(t,"vzgpi_Design");this.sub.add(i.subscribe(o=>{let n=o&&V(f({},o),{values:o?.values.map(g=>V(f({},g),{images:g.images&&Array.isArray(g.images)?this.productImageNormalizer.normalize(g.images):void 0}))})||null;this.colorRanges.set(t.code??"",n)}))})}preselectCategoryFromUrl(e,t){let o=(t.state.queryParams[ft]??void 0)?.split(ht)[1],n=e.find(g=>g.id===o);if(n){let g=e.indexOf(n);this.activeTabIndex.next(g)}}scrollToTabItem(e){this.scrollHandlerService.scrollTabIntoView(this.tabList?.nativeElement,`[data-tab-id="${e}"]`)}handleCategorySelectionClick(e,t){this.activeTabIndex.next(t),this.isMobile()&&this.scrollToTabItem(t),this.eventService.dispatch(T(re,{event:"category_browser_select_subcategory",item_name:e.name})),this.eventService.dispatch(T(te,{event:"view_item_list",ecommerce:{items:e.baseProducts?.map((i,o)=>({item_name:i?.name,item_id:i?.code,price:i.priceRange?.minPrice?.value,quantity:1,item_brand:i?.manufacturer,item_variant:i.bestVariant?.code,item_list_name:"category_browser_"+e.name,item_list_id:"category_browser_"+e.id,index:o}))},_clear:!0}))}handleTeaserLinkClick(e){this.eventService.dispatch(T(re,{event:"category_browser_subcategory_list_button",item_name:e.name}))}handleProductTileClick(e,t,i){this.eventService.dispatch(T(te,{event:"select_item",ecommerce:{items:[{item_name:e.name,item_id:e.code,price:e.priceRange?.minPrice?.value,max_price:e.priceRange?.maxPrice?.value,quantity:1,item_brand:e.manufacturer,item_variant:e.bestVariant?.code,item_list_name:"category_browser_"+i?.name,item_list_id:"category_browser_"+i?.id,index:t}]},_clear:!0}))}handleScrollClick(e){let t=this.elementRef.nativeElement.querySelector(".c-category-browser__title-link.active"),i=this.elementRef.nativeElement.querySelectorAll(".c-category-browser__title-link"),o=e==="next"?this.activeTabIndex.value+1:this.activeTabIndex.value-1;if(t){let n=this.isLtrDirection()?1:-1;this._scrollStep.next(n*t.clientWidth)}i[o]?.click()}static{this.\u0275fac=(()=>{let e;return function(i){return(e||(e=me(r)))(i||r)}})()}static{this.\u0275cmp=ge({type:r,selectors:[["c-category-browser"]],viewQuery:function(t,i){if(t&1&&Ce(Ot,5)(At,5),t&2){let o;j(o=q())&&(i.tabList=o.first),j(o=q())&&(i.contentWrapper=o.first)}},features:[_e],decls:2,vars:3,consts:[["nav","ngbNav","tabList",""],["contentWrapper",""],[3,"dComponentUid","ngClass"],[1,"grid"],[1,"c-category-browser__skeleton-loading"],[1,"g-col-12","g-col-sm-11","g-start-sm-2","c-category-browser__tab-list-wrapper"],["ngbNav","",1,"c-category-browser__tab-title-list","nav-tabs",3,"activeId","destroyOnHide"],[3,"scrollClick","

1scrollableElement","initTrigger$","scrollStep","theme"],[1,"c-category-browser__tab-content-wrapper","g-col-12",3,"ngbNavOutlet"],[1,"c-category-browser__tab-title-item",3,"ngbNavItem"],["ngbNavLink","",1,"c-category-browser__title-link",3,"click"],["ngbNavContent",""],[1,"c-category-browser__category-teaser-wrapper","g-col-12"],[3,"handleTeaserLinkClick","title","text","imageFallback","imageSrcSet","imageAlt","linkUrl","linkText","buttonModifier","disableAnimation"],[1,"c-category-browser__category-link-title","g-col-12","g-col-sm-11","g-start-sm-2"],[3,"theme","title","headingType","headingFont","fontWeight"],[1,"c-category-browser__tab-content","g-col-12","g-col-sm-11","g-start-sm-2","grid"],[3,"class"],[3,"click","images","name","description","colorRange","price","hasZeroPrice","startingPrice","endingPrice","priceFontWeight","url","showButton","useUrlForButton","buttonText","buttonModifier","pricePosition"],[1,"c-category-browser__tab-title-list","g-col-12","g-col-sm-11","g-start-sm-2"],["height","52px"],[1,"c-category-browser__tab-content-wrapper","g-col-12"],[1,"c-category-browser__category-teaser-wrapper","grid"],[1,"c-category-browser__skeleton-teaser-image","g-col-12","g-col-md-7","g-start-md-2"],["height","auto"],[1,"c-category-browser__skeleton-teaser-text","g-col-12","g-col-md-4","g-start-md-10"],["height","200px"],["height","3em"],["height","550px"]],template:function(t,i){if(t&1&&(M(0,Gt,4,6,"div",2),p(1,"async")),t&2){let o;N((o=b(1,1,i.data$))?0:-1,o)}},dependencies:[ke,Se,at,ot,it,It,Tt,tt,ut,Le,et,Qe,Ke,Ge,Ye,Xe,Je,Ze,vt,Ct,gt,mt,dt,yt,pt,Rt,xe,bt,De,_t],styles:[`[dir=ltr]{--x-direction: 1}[dir=rtl]{--x-direction: -1}c-category-browser{display:block;max-width:100%}.c-category-browser{display:block;position:relative}.c-category-browser__tab-list-wrapper{position:relative}.c-category-browser__tab-list-wrapper .e-scroll-indicator{padding-bottom:1.2rem}@media all and (min-width:1025px){.c-category-browser__tab-list-wrapper .e-scroll-indicator{padding-bottom:1.2rem}}.c-category-browser__tab-content{row-gap:6rem}@media all and (min-width:1025px){.c-category-browser__tab-content{row-gap:7.2rem}}@media all and (min-width:720px){.c-category-browser__tab-content{--bs-columns: 11}}.c-category-browser__category-link-title{margin-bottom:2rem}@media all and (min-width:1025px){.c-category-browser__category-link-title{margin-bottom:2.4rem}}.c-category-browser__tab-content-wrapper{padding-top:7.2rem}@media all and (min-width:1025px){.c-category-browser__tab-content-wrapper{padding-top:9.6rem}}.c-category-browser__tab-content-wrapper>.tab-pane{display:none;visibility:hidden}.c-category-browser__tab-content-wrapper>.tab-pane.active{display:block;visibility:visible}.c-category-browser__tab-title-list{display:flex;align-items:baseline;flex-wrap:nowrap;overflow:auto;position:relative}@media all and (max-width:719px){.c-category-browser__tab-title-list{width:calc(100vw - 12px)}}.c-category-browser__tab-title-list{scrollbar-width:none;-ms-overflow-style:-ms-autohiding-scrollbar}.c-category-browser__tab-title-list::-webkit-scrollbar{display:none}.c-category-browser__tab-title-item{padding-inline-end:2.4rem}@media all and (min-width:1025px){.c-category-browser__tab-title-item{padding-inline-end:3.6rem}}.c-category-browser__tab-title-item{display:inline-block;border-bottom:1px solid #c7c8ca}.c-category-browser__tab-title-item:last-child{flex:1;padding-inline-end:0}@media all and (max-width:719px){.c-category-browser__tab-title-item:last-child{margin-inline-end:12px}}.c-category-browser__title-link{padding-bottom:1.2rem}@media all and (min-width:1025px){.c-category-browser__title-link{padding-bottom:1.2rem}}.c-category-browser__title-link{transition:color .2s ease-in-out;display:inline-block;color:#585a5f;white-space:nowrap;position:relative;margin-bottom:-1px}.c-category-browser__title-link:after{content:"";position:absolute;inset-inline-start:0;bottom:0;height:1px;width:100%;background-color:transparent;z-index:1}.c-category-browser__title-link:hover{color:#706966}.c-category-browser__title-link:focus-visible{color:#706966}.c-category-browser__title-link:focus-visible:after{background-color:#706966}.c-category-browser__title-link.active{color:#1d2025;cursor:default}.c-category-browser__title-link.active:after{background-color:#1d2025}.c-category-browser__title-link{font-size:2.4rem;line-height:1.333;font-family:Suisse-Intl,sans-serif;font-weight:300}@media all and (min-width:1025px){.c-category-browser__title-link{font-size:3rem;line-height:1.333;font-family:Suisse-Intl,sans-serif;font-weight:300}}

1.c-category-browser__category-teaser-wrapper{margin-bottom:7.2rem}@media all and (min-width:1025px){.c-category-browser__category-teaser-wrapper{margin-bottom:9.6rem}}
2`,`[dir=ltr]{--x-direction: 1}[dir=rtl]{--x-direction: -1}.c-category-browser .c-category-browser__skeleton-loading .c-category-browser__tab-title-list{display:block}.c-category-browser .c-category-browser__skeleton-loading .c-category-browser__category-teaser-wrapper .e-skeleton-loader{aspect-ratio:1.7777777778;width:100%}.c-category-browser .c-category-browser__skeleton-loading .c-category-browser__skeleton-teaser-text{padding-top:4.8rem}@media all and (min-width:1025px){.c-category-browser .c-category-browser__skeleton-loading .c-category-browser__skeleton-teaser-text{padding-top:6rem}}.c-category-browser .c-category-browser__skeleton-loading .c-category-browser__category-link-title .e-skeleton-loader{width:500px;max-width:80%}.c-category-browser .c-category-browser__skeleton-loading .c-category-browser__tab-content{margin-top:4.8rem}@media all and (min-width:1025px){.c-category-browser .c-category-browser__skeleton-loading .c-category-browser__tab-content{margin-top:6rem}}
3`],encapsulation:2,changeDetection:0})}};var L=class r{constructor(){this.actions$=c(Fe);this.categoryService=c(Ft);this.globalMessageService=c(Oe);this.getCategory$=Z(()=>this.actions$.pipe(ee(O),P(a=>this.categoryService.getCategoryHierarchy(a.categoryCode,a.catalogId).pipe(u(e=>e?St({category:e}):A()),ce(()=>ae(A()))))));this.getCategoryFailure$=Z(()=>this.actions$.pipe(ee(A),u(()=>{this.globalMessageService.add({key:"category.code.invalid"},$e.MSG_TYPE_ERROR)})),{dispatch:!1})}static{this.\u0275fac=function(e){return new(e||r)}}static{this.\u0275prov=B({token:r,factory:r.\u0275fac})}};var Mt=class r{static{this.\u0275fac=function(e){return new(e||r)}}static{this.\u0275mod=pe({type:r})}static{this.\u0275inj=de({providers:[v,Pe({cmsComponents:{VzugCategoryBrowserComponent:{component:R}}})],imports:[R,Re.forFeature(D,xt),Ee.forFeature([L])]})}};export{Mt as ProductCategoryFeatureModule};