xv-webcomponents 1.24.18 → 1.24.19-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xv-webcomponents",
-  "version": "1.24.18",
+  "version": "1.24.19-dev.0",
   "description": "Reusable Web Components for XV Applications",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/xv-webcomponents/p-ec19bcc7.entry.js

@@ -1 +0,0 @@
-import{r as e,c as n,h as t,F as a,H as m,a as x}from"./p-Owr_mJOX.js";import{a as i}from"./p-D0yFoU2h.js";const s=class{constructor(t){e(this,t),this.openChange=n(this,"openChange",7),this.mobileSize=991,this.open=!1,this.menuItems=[],this.applicationContext="Xv",this.menuLoading=!1}handleClickOutside(e){this.open&&!this.el.contains(e.target)&&this.handleClose()}handleClose(){this.open=!1,this.activeItem=this.activeGroup=void 0,this.openChange.emit(this.open)}get isMobile(){return window.outerWidth<=this.mobileSize}setActiveItem(e){var n,t,a,m,x;this.activeItem=(null===(n=this.activeItem)||void 0===n?void 0:n.id)===(null==e?void 0:e.id)?void 0:e,this.isMobile&&1!==((null===(a=null===(t=this.activeItem)||void 0===t?void 0:t.groups)||void 0===a?void 0:a.length)||0)||this.setActiveGroup(null===(x=null===(m=this.activeItem)||void 0===m?void 0:m.groups)||void 0===x?void 0:x[0]),this.isMobile||(this.open=!!this.activeItem,!this.open&&this.handleClose())}setActiveGroup(e){var n;this.activeGroup=this.isMobile&&(null===(n=this.activeGroup)||void 0===n?void 0:n.id)===(null==e?void 0:e.id)?void 0:e}navActionClick(e){window.location.href=e.url}parseMenuData(e){if(!e)return null;if(Array.isArray(e))return e;try{const n=JSON.parse(e);return Array.isArray(n)?n:null}catch(e){return console.warn("xv-mega-menu-next: invalid menu-data JSON",e),null}}async fetchMenuData(){try{this.menuItems=await i.get("/api-fd/v1/home/menu",{awaitWl:!0,credentials:"include"}).then((({data:e,meta:n})=>(this.applicationContext=n.applicationContext,e||[])))}catch(e){console.error("fetchMenuData error",e),this.menuItems=[]}}onMenuDataChange(e){const n=this.parseMenuData(e);n&&(this.menuItems=n)}componentWillLoad(){const e=this.parseMenuData(this.menuData);e?this.menuItems=e:this.fetchMenuData()}render(){return t(m,{key:"2aedf5fcd9dfb34d64b7febf92585088548a68e9"},t("nav",{key:"e3e0a1e52a24094470100f1da66a03f02a8b46b7",class:{"xv-menu":!0,open:this.open}},this.menuLoading&&t("div",{key:"5ae91639ffd7d2ec8f1ec88ac5730b40dca0fcb0",class:{"xv-menu-loader":!0,open:this.open}},t("xv-loader-v2",{key:"dc99655021a279ea4fdc09f0989e61404e3c7af3"})),t("ul",{key:"c246f2b56c05e4115a3b0d5865468d883823c27a",class:{menu:!0,open:this.open}},this.menuItems.map((e=>{var n,m;return t("li",{class:{"menu-item":!0,active:e.id===(null===(n=this.activeItem)||void 0===n?void 0:n.id)}},e.route?t("a",{class:"menu-item-label",href:e.route.route},null===(m=e.route)||void 0===m?void 0:m.label):t(a,null,t("p",{class:"menu-item-label",onClick:()=>this.setActiveItem(e)},null==e?void 0:e.label),t("ul",{class:"menu-item-groups"},e.groups.map((n=>{var a;return t("li",{class:{group:!0,active:(null===(a=this.activeGroup)||void 0===a?void 0:a.id)===n.id}},n.label&&e.groups.length>1&&t("div",{class:"group-label",onClick:()=>this.setActiveGroup(n)},t("span",{class:"group-label-text"},n.label),t("span",{class:"group-label-icon"})),t("div",{class:"group-container"},t("div",{class:{"group-container-absolute":!0,noLabel:!(n.label&&e.groups.length>1)}},t("div",{class:"group-menus"},t("ul",{class:{"group-menus-categories":!0,inline:"inline"===n.layout}},n.categories.map((e=>t("li",{class:"category"},t("p",{class:"category-label"},e.label),t("ul",{class:"category-routes"},e.routes.map((e=>t("li",{class:"route"},t("a",{class:"route-link",href:e.route||"#"},e.label),e.tag&&t("xv-tag-v2",{class:"route-tag",size:"sm",color:"#161616",bg:"#E0E0E0"},e.tag))))))))),t("ul",{class:"group-menus-actions"},n.actions.map((e=>t("li",{class:"action"},"link"===e.type&&t("a",{class:"action-link",href:null==e?void 0:e.url},e.label,t("span",{class:"link-chevron"},"→")),"button"===e.type&&t("xv-button-v2",{onClick:()=>this.navActionClick(e),block:!0,variant:"tertiary"},e.label)))))),(null==n?void 0:n.card)&&t("div",{class:"group-card"},t("xv-card-v2",{media:"Komsa"!==this.applicationContext?n.card.image:void 0,variant:this.isMobile?"horizontal":"vertical"},t("h5",{slot:"header",class:"group-card-title"},n.card.title),t("p",{slot:"body",class:"group-card-desc"},n.card.description),n.card.linkLabel&&t("a",{slot:"footer",class:"action-link",href:n.card.linkUrl||"#"},n.card.linkLabel,t("span",{class:"link-chevron"},"→")))))))})))))})),t("li",{key:"fc1f177ba14892c4568d445344f69297975e6fa4",class:"menu--right"},t("slot",{key:"7873fc7f12c0837c3a78a46b6fd63f7123ef2775",name:"menu-right"})),this.open&&t("li",{key:"dc8ebef4ebd45ca734e5377904846e5cdbd1975f",class:"menu--backdrop",onClick:()=>this.handleClose()}))))}get el(){return x(this)}static get watchers(){return{menuData:[{onMenuDataChange:0}]}}};s.style=".sc-xv-mega-menu-next-h{--menu-group-width:244px;--menu-group-height:454px;--link-visited:var(--link-primary)}.xv-menu.sc-xv-mega-menu-next{background:inherit;position:relative;font-family:var(--ff-work-sans), sans-serif}@media (min-width: 992px){.xv-menu.sc-xv-mega-menu-next{min-height:55px}}.xv-menu-loader.sc-xv-mega-menu-next{position:absolute;top:0;left:0;width:100%;height:100%;z-index:4;background-color:rgba(255, 255, 255, 0.7);display:flex;align-items:center;justify-content:center}@media (max-width: 991px){.xv-menu-loader.sc-xv-mega-menu-next:not(.open){display:none}}@media (max-width: 991px){.xv-menu.open.sc-xv-mega-menu-next{padding-bottom:env(safe-area-inset-bottom);max-height:calc(100vh - 120px);overflow:auto;overscroll-behavior:contain}}.xv-menu_mobile.sc-xv-mega-menu-next{position:relative;display:none}@media (max-width: 991px){.xv-menu_mobile.sc-xv-mega-menu-next{display:inline-flex}}.xv-menu.sc-xv-mega-menu-next ul.sc-xv-mega-menu-next{margin:0;padding:0;list-style:none}.xv-menu.sc-xv-mega-menu-next .link-chevron.sc-xv-mega-menu-next{display:inline-block;margin-inline-start:var(--spacing-01)}.xv-menu.sc-xv-mega-menu-next .action-link.sc-xv-mega-menu-next{display:block;color:var(--link-primary);text-decoration:none;transition:color 200ms ease-in-out}.xv-menu.sc-xv-mega-menu-next .action-link.sc-xv-mega-menu-next:visited{color:var(--link-primary)}.xv-menu.sc-xv-mega-menu-next .action-link.sc-xv-mega-menu-next:hover,.xv-menu.sc-xv-mega-menu-next .action-link.sc-xv-mega-menu-next:focus,.xv-menu.sc-xv-mega-menu-next .action-link.sc-xv-mega-menu-next:active{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;text-decoration-color:var(--link-primary)}.xv-menu.sc-xv-mega-menu-next .action-link.sc-xv-mega-menu-next:hover{color:var(--link-primary-hover);cursor:pointer}.xv-menu.sc-xv-mega-menu-next .action-link.sc-xv-mega-menu-next:focus{outline:1px solid var(--focus);outline-offset:1px}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next{overflow-x:auto;display:flex;justify-content:flex-start;column-gap:var(--spacing-08)}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next{flex-direction:column;display:none}}.xv-menu.sc-xv-mega-menu-next .menu--right.sc-xv-mega-menu-next{margin-left:auto;display:flex;align-items:center;align-self:center}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu--right.sc-xv-mega-menu-next{margin-left:unset;padding-block:var(--spacing-05)}}.xv-menu.sc-xv-mega-menu-next .menu--backdrop.sc-xv-mega-menu-next{z-index:-1;background-color:rgba(0, 0, 0, 0.3);position:fixed;top:0;left:0;width:100%;height:100%}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu.open.sc-xv-mega-menu-next{display:flex}}.xv-menu.sc-xv-mega-menu-next .menu-item.sc-xv-mega-menu-next:hover .menu-item-label.sc-xv-mega-menu-next{border-bottom-color:var(--interactive-02)}.xv-menu.sc-xv-mega-menu-next .menu-item.active.sc-xv-mega-menu-next .menu-item-groups.sc-xv-mega-menu-next{z-index:990;display:flex}.xv-menu.sc-xv-mega-menu-next .menu-item.active.sc-xv-mega-menu-next .menu-item-label.sc-xv-mega-menu-next{border-bottom-color:var(--interactive-02)}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu-item.active.sc-xv-mega-menu-next{border-bottom:1px solid #E1E4ED}}.xv-menu.sc-xv-mega-menu-next .menu-item-label.sc-xv-mega-menu-next{display:block;margin:0;padding-block:var(--spacing-05, 16px);color:inherit;text-decoration:none;font-size:16px;line-height:24px;font-family:var(--ff-body), sans-serif;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:250ms ease-in-out border-bottom-color;user-select:none;white-space:nowrap}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu-item-label.sc-xv-mega-menu-next{border-bottom:1px solid #E1E4ED}}.xv-menu.sc-xv-mega-menu-next .menu-item-groups.sc-xv-mega-menu-next{z-index:-1;position:absolute;left:0;top:100%;width:100%;background-color:var(--background, #fff);display:none;flex-direction:column;border:1px solid var(--border-subtle-01);row-gap:var(--spacing-05);padding-block:var(--spacing-08) var(--spacing-06);min-height:var(--menu-group-height);border-radius:0 0 8px 8px;overflow:hidden;color:var(--interactive-01, #273435)}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu-item-groups.sc-xv-mega-menu-next{min-height:unset;padding-block:unset;position:relative;row-gap:unset;border:none}}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group.sc-xv-mega-menu-next{display:flex;align-items:flex-start}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group.sc-xv-mega-menu-next{flex-direction:column;align-items:stretch}}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-label.sc-xv-mega-menu-next{user-select:none;min-width:var(--menu-group-width);max-width:var(--menu-group-width);color:var(--text-primary, #333);font-size:16px;font-style:normal;font-weight:400;line-height:137.5%;display:flex;column-gap:var(--spacing-04);text-align:right;justify-content:flex-end;cursor:pointer}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-label-text.sc-xv-mega-menu-next{text-overflow:ellipsis;overflow:hidden}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-label-icon.sc-xv-mega-menu-next{width:8px;height:8px;border-bottom:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(-45deg);transform-origin:bottom;align-self:center}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-label.sc-xv-mega-menu-next{max-width:unset;min-width:unset;align-items:stretch;justify-content:flex-start;padding-block:var(--spacing-05)}}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-container.sc-xv-mega-menu-next{flex:1;display:none}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-container-absolute.sc-xv-mega-menu-next{position:absolute;top:0;right:0;width:calc(100% - (var(--menu-group-width) + var(--spacing-06) + var(--spacing-09) + var(--spacing-05)));min-height:calc(100% - (var(--spacing-08) + var(--spacing-06)));padding:var(--spacing-08) var(--spacing-06) var(--spacing-06) var(--spacing-09);display:flex;background-color:var(--layer-01, #F7F7F7)}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-container-absolute.sc-xv-mega-menu-next{position:unset;flex-direction:column;width:100%;flex:1;padding:var(--spacing-06) 0;background-color:var(--background)}}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-container-absolute.noLabel.sc-xv-mega-menu-next{left:0;width:calc(100% - (var(--spacing-06) + var(--spacing-09)))}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group.active.sc-xv-mega-menu-next .group-label.sc-xv-mega-menu-next{font-weight:600}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group.active.sc-xv-mega-menu-next .group-label-icon.sc-xv-mega-menu-next{transform-origin:center;transform:rotate(45deg)}}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group.active.sc-xv-mega-menu-next .group-container.sc-xv-mega-menu-next{display:flex}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-menus.sc-xv-mega-menu-next{flex:1;display:flex;flex-direction:column;row-gap:var(--spacing-06)}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-menus-categories.sc-xv-mega-menu-next{display:flex;row-gap:var(--spacing-07);column-gap:var(--spacing-05);flex:1}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-menus-categories.sc-xv-mega-menu-next{flex-direction:column;gap:var(--spacing-07)}}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-menus-categories.inline.sc-xv-mega-menu-next{flex-direction:column;flex-wrap:wrap;max-height:365px}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-menus-categories.inline.sc-xv-mega-menu-next{max-height:unset}}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-menus-categories.inline.sc-xv-mega-menu-next .category.sc-xv-mega-menu-next{flex:none}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-menus-actions.sc-xv-mega-menu-next{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-05)}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-menus-actions.sc-xv-mega-menu-next{flex-direction:column;justify-content:stretch;align-items:stretch;text-align:center}}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-card.sc-xv-mega-menu-next{box-sizing:content-box;max-width:228px;min-width:200px;padding-left:var(--spacing-06);border-left:1px solid var(--border-subtle-01)}@media (min-width: 992px) and (max-width: 1199px){.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-card.sc-xv-mega-menu-next{display:none}}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-card.sc-xv-mega-menu-next{margin-block-start:var(--spacing-06);border-left:none;padding-left:0;max-width:unset;min-width:unset}}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-card.sc-xv-mega-menu-next .xv-card.sc-xv-mega-menu-next{box-shadow:none;background-color:var(--background, #fff)}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-card.sc-xv-mega-menu-next .xv-card.sc-xv-mega-menu-next{width:unset}}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-card-title.sc-xv-mega-menu-next,.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-card-desc.sc-xv-mega-menu-next{font-size:var(--fz-md, 14px);font-style:normal;line-height:18px;letter-spacing:0.16px}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-card.sc-xv-mega-menu-next .xv-link_standalone.sc-xv-mega-menu-next,.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-card-title.sc-xv-mega-menu-next,.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-card-desc.sc-xv-mega-menu-next{font-family:var(--ff-work-sans), sans-serif}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-card-title.sc-xv-mega-menu-next{color:var(--text-primary, #333);font-weight:600}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .group-card-desc.sc-xv-mega-menu-next{color:var(--text-secondary, #515151);font-weight:400;padding-top:var(--spacing-03);display:-webkit-box;-webkit-line-clamp:11;-webkit-box-orient:vertical;overflow:hidden}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .category.sc-xv-mega-menu-next{flex:1;display:flex;flex-direction:column;row-gap:var(--spacing-05)}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .category.sc-xv-mega-menu-next{flex:0}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .category.sc-xv-mega-menu-next:not(:last-child){border-bottom:1px solid var(--border-subtle-01);padding-bottom:var(--spacing-04)}}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .category-label.sc-xv-mega-menu-next{margin:0;font-size:var(--fz-md, 14px);color:var(--text-secondary)}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .category-routes.sc-xv-mega-menu-next{display:flex;flex-direction:column;row-gap:var(--spacing-05)}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .route.sc-xv-mega-menu-next{display:inline-flex;align-items:center;column-gap:var(--spacing-03);position:relative;font-size:var(--fz-lg, 16px)}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .route.sc-xv-mega-menu-next .route-link.sc-xv-mega-menu-next{color:inherit;text-decoration:none;font-family:var(--ff-work-sans), sans-serif;line-height:133.333%;transition:color 200ms ease-in-out}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .route.sc-xv-mega-menu-next .route-link.sc-xv-mega-menu-next:visited{color:inherit}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .route.sc-xv-mega-menu-next .route-link.sc-xv-mega-menu-next:hover{color:var(--link-primary);cursor:pointer}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .route.sc-xv-mega-menu-next .route-link.sc-xv-mega-menu-next:focus{outline:1px solid var(--focus);outline-offset:1px}@media (max-width: 991px){.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .route.sc-xv-mega-menu-next{white-space:nowrap}}.xv-menu.sc-xv-mega-menu-next .menu.sc-xv-mega-menu-next .route.sc-xv-mega-menu-next .route-tag.sc-xv-mega-menu-next{font-size:9px}";export{s as xv_mega_menu_next}