xv-webcomponents 2.0.0-beta.2 → 2.0.0-beta.28

package/dist/vscode-data.json

@@ -432,7 +432,7 @@
       "name": "xv-data-table",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "> **Deprecated.** Superseded by [`xv-table`](../xv-table), which adds sorting, selection, batch\r\n> actions, expansion, column resizing, reordering and hiding, a persisted layout and pagination.\r\n> This component stays only until its 22 usages in XvMarketplaceNG are migrated; removal is\r\n> tracked by MAR-15895."
       },
       "attributes": [
         {
@@ -2160,23 +2160,176 @@
       ]
     },
     {
-      "name": "xv-table-v2",
+      "name": "xv-table",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "A data table built on CSS grid with `subgrid` rows, so a row keeps its own box while its cells\nstay aligned to the table's columns and an expanded panel can span the full width.\n\n`columns` always describes the structure — widths, order, sorting, resizing, hiding and the\nstored layout all read from it. Rows come either from `rows` as data, or as slotted\n`xv-table-row` children when the cells hold arbitrary markup."
       },
       "attributes": [
+        {
+          "name": "block",
+          "description": "Stretches the table to the full width of its container."
+        },
+        {
+          "name": "columns",
+          "description": "Column definitions. Accepts its JSON string form so it is settable from plain markup."
+        },
+        {
+          "name": "columns-label",
+          "description": "Tooltip on the column picker trigger."
+        },
+        {
+          "name": "description",
+          "description": "Supporting text under the title."
+        },
+        {
+          "name": "empty-label",
+          "description": "Shown when there are no rows."
+        },
+        {
+          "name": "expand-label",
+          "description": "Accessible name of a row's expand toggle."
+        },
+        {
+          "name": "expand-mode",
+          "description": "Whether rows expand, and whether more than one may be open.",
+          "values": [
+            {
+              "name": "multiple"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "single"
+            }
+          ]
+        },
+        {
+          "name": "expanded",
+          "description": "Values of the expanded rows."
+        },
         {
           "name": "hover",
-          "description": ""
+          "description": "Highlights a row on pointer hover."
+        },
+        {
+          "name": "label",
+          "description": "Title above the table."
+        },
+        {
+          "name": "layout",
+          "description": "Controlled column layout. Overrides whatever is stored."
         },
         {
           "name": "loading",
-          "description": ""
+          "description": "Covers the body with a loading state."
+        },
+        {
+          "name": "locale",
+          "description": "Locale used for sorting and cell formatting. Falls back to the nearest `[lang]` ancestor."
+        },
+        {
+          "name": "min-width",
+          "description": "Width below which the table scrolls instead of squeezing, at any viewport. Left unset, a table\nonly stops squeezing below 1180px, where it scrolls at the width its columns declared."
+        },
+        {
+          "name": "page",
+          "description": "Current page, 1-based."
+        },
+        {
+          "name": "page-size",
+          "description": "Rows per page."
+        },
+        {
+          "name": "page-size-options",
+          "description": "Page size choices. Accepts a comma-separated attribute."
+        },
+        {
+          "name": "pagination-mode",
+          "description": "`client` slices the `rows` prop; `server` only emits `pageChange`.",
+          "values": [
+            {
+              "name": "client"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "server"
+            }
+          ]
+        },
+        {
+          "name": "reorder-label",
+          "description": "Accessible name of a row's drag grip."
+        },
+        {
+          "name": "reorderable",
+          "description": "Allows dragging column headers into a new order. Off by default, like `resizable`."
+        },
+        {
+          "name": "reset-label",
+          "description": "Text of the button that restores the declared column layout."
+        },
+        {
+          "name": "resizable",
+          "description": "Allows dragging column edges. Off by default: no handle is rendered and nothing is bound\nuntil it is switched on. A column may switch itself off, never on."
+        },
+        {
+          "name": "row-clickable",
+          "description": "Emits `rowClick` when a row is clicked outside an interactive element."
+        },
+        {
+          "name": "row-key",
+          "description": "Property of a row object that identifies it in selection and expansion payloads."
+        },
+        {
+          "name": "row-reorder-handle",
+          "description": "Whether the whole row drags, or only a grip in a leading control cell.",
+          "values": [
+            {
+              "name": "icon"
+            },
+            {
+              "name": "row"
+            }
+          ]
+        },
+        {
+          "name": "row-reorderable",
+          "description": "Allows dragging rows into a new order. Off by default: nothing is bound and no handle is\nrendered until it is switched on."
+        },
+        {
+          "name": "rows",
+          "description": "Row data. Ignored when `xv-table-row` children are slotted."
+        },
+        {
+          "name": "selected",
+          "description": "Values of the selected rows."
+        },
+        {
+          "name": "selected-label",
+          "description": "Text of the batch bar counter. `{count}` is replaced with the number of selected rows."
+        },
+        {
+          "name": "selection",
+          "description": "`multiple` renders checkboxes, `single` renders radios.",
+          "values": [
+            {
+              "name": "multiple"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "single"
+            }
+          ]
         },
         {
           "name": "size",
-          "description": "",
+          "description": "Row height ladder.",
           "values": [
             {
               "name": "lg"
@@ -2194,6 +2347,45 @@
               "name": "xs"
             }
           ]
+        },
+        {
+          "name": "skeleton-rows",
+          "description": "Placeholder rows drawn while `loading`. Zero draws a spinner instead."
+        },
+        {
+          "name": "sort-by",
+          "description": "Active sort, as `asc(field)` / `desc(field)` or an object."
+        },
+        {
+          "name": "sort-mode",
+          "description": "`none` makes headers inert whatever the column says; `client` sorts the `rows` prop itself;\n`server` offers the affordance and only emits `sortChange` for the consumer to reload.",
+          "values": [
+            {
+              "name": "client"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "server"
+            }
+          ]
+        },
+        {
+          "name": "sticky-header",
+          "description": "Keeps the header visible while the body scrolls."
+        },
+        {
+          "name": "storage-key",
+          "description": "Persists the column layout under this key. Empty means the layout is not remembered."
+        },
+        {
+          "name": "storage-owner",
+          "description": "Scopes the stored layout to a user."
+        },
+        {
+          "name": "total",
+          "description": "Total row count, for `server` pagination."
         }
       ],
       "references": [
@@ -2204,38 +2396,85 @@
       ]
     },
     {
-      "name": "xv-table-v2-cell",
+      "name": "xv-table-cell",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "One cell of a table row. It holds arbitrary markup — buttons, links, tags, nested components —\r\nwhich is why the table stays composed rather than driven only by data.\r\n\r\nIn a header row it also carries the column affordances: the sort arrow, the drag grip and the\r\nresize handle. The table renders this same component in both modes, so a header written as\r\nmarkup can do everything a header built from `columns` can."
       },
       "attributes": [
         {
           "name": "align",
-          "description": "",
+          "description": "Horizontal alignment of the content.",
           "values": [
             {
               "name": "center"
             },
             {
-              "name": "left"
+              "name": "end"
             },
             {
-              "name": "right"
+              "name": "start"
             }
           ]
         },
         {
-          "name": "multiline",
-          "description": ""
+          "name": "clamp-lines",
+          "description": "Lines kept before clamping, when `overflow` is `clamp`."
         },
         {
-          "name": "name",
-          "description": ""
+          "name": "column-id",
+          "description": "Column this cell belongs to. Identifies it for sorting, resizing and the stored layout."
         },
         {
-          "name": "sort",
-          "description": ""
+          "name": "header",
+          "description": "Renders the cell as a column header. Set by the table from the row it sits in."
+        },
+        {
+          "name": "hideable",
+          "description": "Lets the column picker hide this column. A header cell only."
+        },
+        {
+          "name": "overflow",
+          "description": "How content wider than the column behaves.",
+          "values": [
+            {
+              "name": "clamp"
+            },
+            {
+              "name": "ellipsis"
+            },
+            {
+              "name": "wrap"
+            }
+          ]
+        },
+        {
+          "name": "reorder-label",
+          "description": "Accessible name of the drag grip."
+        },
+        {
+          "name": "reorderable",
+          "description": "Offers the drag grip. A header cell only."
+        },
+        {
+          "name": "resizable",
+          "description": "Offers the resize handle. A header cell only."
+        },
+        {
+          "name": "sort-direction",
+          "description": "Direction currently sorted by; empty when this column is not the active one."
+        },
+        {
+          "name": "sortable",
+          "description": "Offers the sort affordance. A header cell only."
+        },
+        {
+          "name": "tooltip",
+          "description": "Tooltip shown on hover. Only a cell that sets it pays for the tooltip component."
+        },
+        {
+          "name": "width",
+          "description": "Column width. Read off the header row when the table has no `columns`. Any CSS length."
         }
       ],
       "references": [
@@ -2246,82 +2485,134 @@
       ]
     },
     {
-      "name": "xv-table-v2-expand",
+      "name": "xv-table-row",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "One row of a table. Everything it needs is pushed down by `xv-table`, so it never reads the\r\ntable's attributes itself — the old row did that on `slotchange` only and went stale."
       },
       "attributes": [
         {
           "name": "disabled",
-          "description": ""
+          "description": "Blocks selection and expansion."
         },
         {
-          "name": "open",
-          "description": ""
-        }
-      ],
-      "references": [
+          "name": "expand-label",
+          "description": "Accessible name of the expand toggle. Set by the table."
+        },
         {
-          "name": "Source code",
-          "url": "https:/github.com/crossvertise/XV-WebComponents/blob/development/src/src/components/xv-table/xv-table-expand/xv-table-expand.tsx"
-        }
-      ]
-    },
-    {
-      "name": "xv-table-v2-row",
-      "description": {
-        "kind": "markdown",
-        "value": ""
-      },
-      "attributes": [
+          "name": "expand-mode",
+          "description": "Whether the row can be expanded. Set by the table.",
+          "values": [
+            {
+              "name": "multiple"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "single"
+            }
+          ]
+        },
         {
-          "name": "checked",
-          "description": ""
+          "name": "expandable",
+          "description": "Whether this row has anything to expand. Set by the table."
         },
         {
-          "name": "disabled",
-          "description": ""
+          "name": "expanded",
+          "description": "Whether the row's expand panel is open."
+        },
+        {
+          "name": "group",
+          "description": "Renders the row as a subtotal or grouping row: no controls, accented background."
+        },
+        {
+          "name": "has-panel",
+          "description": "Whether the row carries `slot=\"expand\"` content. Set by the table."
         },
         {
           "name": "header",
-          "description": ""
+          "description": "Marks the row as the table's header. Its cells supply the column labels."
         },
         {
           "name": "hover",
-          "description": ""
+          "description": "Highlights the row on pointer hover. Set by the table."
         },
         {
-          "name": "name",
-          "description": ""
+          "name": "parent",
+          "description": "Value of the row this one belongs to. Child rows are siblings in the same grid, so they keep\r\nthe table's columns instead of living in a panel of their own."
         },
         {
           "name": "partial",
-          "description": ""
+          "description": "Indeterminate state of the header row's select-all checkbox."
         },
         {
-          "name": "readonly",
-          "description": ""
+          "name": "reorder-label",
+          "description": "Accessible name of the drag grip. Set by the table."
         },
         {
-          "name": "required",
-          "description": ""
+          "name": "row-reorder-handle",
+          "description": "Whether the whole row drags, or only its grip. Set by the table.",
+          "values": [
+            {
+              "name": "icon"
+            },
+            {
+              "name": "row"
+            }
+          ]
         },
         {
-          "name": "value",
-          "description": ""
+          "name": "row-reorderable",
+          "description": "Whether this row can be dragged into a new position. Set by the table."
         },
         {
-          "name": "variant",
-          "description": "",
+          "name": "selectable",
+          "description": "Whether the row offers its selection control. A header with no rows under it has nothing to pick."
+        },
+        {
+          "name": "selected",
+          "description": "Whether the row is selected."
+        },
+        {
+          "name": "selection-mode",
+          "description": "Selection control rendered in the leading cell. Set by the table.",
           "values": [
             {
-              "name": "checkbox"
+              "name": "multiple"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "single"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Row height ladder. Set by the table.",
+          "values": [
+            {
+              "name": "lg"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "xl"
             },
             {
-              "name": "radio"
+              "name": "xs"
             }
           ]
+        },
+        {
+          "name": "value",
+          "description": "Identifies the row in selection and expansion payloads."
         }
       ],
       "references": [

package/dist/xv-webcomponents/index.esm.js

@@ -1 +1 @@
-export{e as format}from"./p-DB4KqDJz.js";export{d as setTagTransformer,t as transformTag}from"./p-Bu8SrOeR.js";
+export{e as format}from"./p-DSFVdw3w.js";export{d as setTagTransformer,t as transformTag}from"./p-DJC3-dS3.js";

package/dist/xv-webcomponents/{p-1ffb0b4f.entry.js → p-0c30d09f.entry.js}

@@ -1 +1 @@
-import{r as e,c as n,h as i,F as a,H as t,a as o}from"./p-Bu8SrOeR.js";import{a as r}from"./p-DB4KqDJz.js";const s=class{constructor(i){e(this,i),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,i,a,t,o;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===(i=this.activeItem)||void 0===i?void 0:i.groups)||void 0===a?void 0:a.length)||0)||this.setActiveGroup(null===(o=null===(t=this.activeItem)||void 0===t?void 0:t.groups)||void 0===o?void 0:o[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 r.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 i(t,{key:"ed607b8cd4c395fb89c2b925381a66476ee7fc66"},i("nav",{key:"df1bc505eea962a6dd450aff9ce94bdaf851bb60",class:{"xv-menu":!0,open:this.open}},this.menuLoading&&i("div",{key:"43d7eb0df82e01e7bc9dcf7d305b41e2e274206b",class:{"xv-menu-loader":!0,open:this.open}},i("xv-loader-v2",{key:"d1fe2d349bbb091ca9e1ad3b3042f751cd7bea8a"})),i("ul",{key:"7daed87d6a28ef57cf50c44d6b692818d898f24b",class:{menu:!0,open:this.open}},this.menuItems.map((e=>{var n,t;return i("li",{class:{"menu-item":!0,active:e.id===(null===(n=this.activeItem)||void 0===n?void 0:n.id)}},e.route?i("xv-link-v2",{variant:"ghost",href:e.route.route},i("p",{class:"menu-item-label"},null===(t=e.route)||void 0===t?void 0:t.label)):i(a,null,i("p",{class:"menu-item-label",onClick:()=>this.setActiveItem(e)},null==e?void 0:e.label),i("ul",{class:"menu-item-groups"},e.groups.map((n=>{var a;return i("li",{class:{group:!0,active:(null===(a=this.activeGroup)||void 0===a?void 0:a.id)===n.id}},n.label&&e.groups.length>1&&i("div",{class:"group-label",onClick:()=>this.setActiveGroup(n)},i("span",{class:"group-label-text"},n.label),i("span",{class:"group-label-icon"})),i("div",{class:"group-container"},i("div",{class:{"group-container-absolute":!0,noLabel:!(n.label&&e.groups.length>1)}},i("div",{class:"group-menus"},i("ul",{class:{"group-menus-categories":!0,inline:"inline"===n.layout}},n.categories.map((e=>i("li",{class:"category"},i("p",{class:"category-label"},e.label),i("ul",{class:"category-routes"},e.routes.map((e=>i("li",{class:"route"},i("xv-link-v2",{size:"lg",variant:"ghost",href:e.route||"#"},e.label),e.tag&&i("xv-tag-v2",{class:"route-tag",size:"sm",color:"#161616",bg:"#E0E0E0"},e.tag))))))))),i("ul",{class:"group-menus-actions"},n.actions.map((e=>i("li",{class:"action"},"link"===e.type&&i("xv-link-v2",{variant:"standalone",href:null==e?void 0:e.url},e.label,i("span",{class:"link-chevron",slot:"icon-right"},"→")),"button"===e.type&&i("xv-button-v2",{onClick:()=>this.navActionClick(e),block:!0,variant:"tertiary"},e.label)))))),(null==n?void 0:n.card)&&i("div",{class:"group-card"},i("xv-card-v2",{media:"Komsa"!==this.applicationContext?n.card.image:void 0,variant:this.isMobile?"horizontal":"vertical"},i("h5",{slot:"header",class:"group-card-title"},n.card.title),i("p",{slot:"body",class:"group-card-desc"},n.card.description),n.card.linkLabel&&i("xv-link-v2",{slot:"footer",variant:"standalone",href:n.card.linkUrl||"#"},n.card.linkLabel,i("span",{class:"link-chevron",slot:"icon-right"},"→")))))))})))))})),i("li",{key:"9644d518b2a427d1af5319f6d0dcd08b11a9c6c2",class:"menu--right"},i("slot",{key:"5200a528a6e5b5374815d7978ec09e87da55a3d7",name:"menu-right"})),this.open&&i("li",{key:"378f37f82e6b9ae4990e4bd7d197d1a1ce851b2e",class:"menu--backdrop",onClick:()=>this.handleClose()}))))}get el(){return o(this)}static get watchers(){return{menuData:[{onMenuDataChange:0}]}}};s.style=":host{--menu-group-width:244px;--menu-group-height:454px;--link-visited:var(--link-primary)}.xv-menu{background:inherit;position:relative;font-family:var(--ff-work-sans), sans-serif}@media (min-width: 992px){.xv-menu{min-height:55px}}.xv-menu-loader{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:not(.open){display:none}}@media (max-width: 991px){.xv-menu.open{padding-bottom:env(safe-area-inset-bottom);max-height:calc(100vh - 120px);overflow:auto;overscroll-behavior:contain}}.xv-menu_mobile{position:relative;display:none}@media (max-width: 991px){.xv-menu_mobile{display:inline-flex}}.xv-menu ul{margin:0;padding:0;list-style:none}.xv-menu .link-chevron{display:inline-block;margin-inline-start:var(--spacing-01)}.xv-menu .menu{overflow-x:auto;display:flex;justify-content:flex-start;column-gap:var(--spacing-08)}@media (max-width: 991px){.xv-menu .menu{flex-direction:column;display:none}}.xv-menu .menu--right{margin-left:auto;display:flex;align-items:center;align-self:center}@media (max-width: 991px){.xv-menu .menu--right{margin-left:unset;padding-block:var(--spacing-05)}}.xv-menu .menu--backdrop{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 .menu.open{display:flex}}.xv-menu .menu-item:hover .menu-item-label{border-bottom-color:var(--interactive-02)}.xv-menu .menu-item.active .menu-item-groups{z-index:990;display:flex}.xv-menu .menu-item.active .menu-item-label{border-bottom-color:var(--interactive-02)}@media (max-width: 991px){.xv-menu .menu-item.active{border-bottom:1px solid #E1E4ED}}.xv-menu .menu-item-label{margin:0;padding-block:var(--spacing-05, 16px);color:inherit;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 .menu-item-label{border-bottom:1px solid #E1E4ED}}.xv-menu .menu-item-groups{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 .menu-item-groups{min-height:unset;padding-block:unset;position:relative;row-gap:unset;border:none}}.xv-menu .menu .group{display:flex;align-items:flex-start}@media (max-width: 991px){.xv-menu .menu .group{flex-direction:column;align-items:stretch}}.xv-menu .menu .group-label{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 .menu .group-label-text{text-overflow:ellipsis;overflow:hidden}.xv-menu .menu .group-label-icon{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 .menu .group-label{max-width:unset;min-width:unset;align-items:stretch;justify-content:flex-start;padding-block:var(--spacing-05)}}.xv-menu .menu .group-container{flex:1;display:none}.xv-menu .menu .group-container-absolute{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 .menu .group-container-absolute{position:unset;flex-direction:column;width:100%;flex:1;padding:var(--spacing-06) 0;background-color:var(--background)}}.xv-menu .menu .group-container-absolute.noLabel{left:0;width:calc(100% - (var(--spacing-06) + var(--spacing-09)))}.xv-menu .menu .group.active .group-label{font-weight:600}@media (max-width: 991px){.xv-menu .menu .group.active .group-label-icon{transform-origin:center;transform:rotate(45deg)}}.xv-menu .menu .group.active .group-container{display:flex}.xv-menu .menu .group-menus{flex:1;display:flex;flex-direction:column;row-gap:var(--spacing-06)}.xv-menu .menu .group-menus-categories{display:flex;row-gap:var(--spacing-07);column-gap:var(--spacing-05);flex:1}@media (max-width: 991px){.xv-menu .menu .group-menus-categories{flex-direction:column;gap:var(--spacing-07)}}.xv-menu .menu .group-menus-categories.inline{flex-direction:column;flex-wrap:wrap;max-height:365px}@media (max-width: 991px){.xv-menu .menu .group-menus-categories.inline{max-height:unset}}.xv-menu .menu .group-menus-categories.inline .category{flex:none}.xv-menu .menu .group-menus-actions{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-05)}@media (max-width: 991px){.xv-menu .menu .group-menus-actions{flex-direction:column;justify-content:stretch;align-items:stretch;text-align:center}}.xv-menu .menu .group-card{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 .menu .group-card{display:none}}@media (max-width: 991px){.xv-menu .menu .group-card{margin-block-start:var(--spacing-06);border-left:none;padding-left:0;max-width:unset;min-width:unset}}.xv-menu .menu .group-card .xv-card{box-shadow:none;background-color:var(--background, #fff)}@media (max-width: 991px){.xv-menu .menu .group-card .xv-card{width:unset}}.xv-menu .menu .group-card-title,.xv-menu .menu .group-card-desc{font-size:var(--fz-md, 14px);font-style:normal;line-height:18px;letter-spacing:0.16px}.xv-menu .menu .group-card .xv-link_standalone,.xv-menu .menu .group-card-title,.xv-menu .menu .group-card-desc{font-family:var(--ff-work-sans), sans-serif}.xv-menu .menu .group-card-title{color:var(--text-primary, #333);font-weight:600}.xv-menu .menu .group-card-desc{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 .menu .category{flex:1;display:flex;flex-direction:column;row-gap:var(--spacing-05)}@media (max-width: 991px){.xv-menu .menu .category{flex:0}.xv-menu .menu .category:not(:last-child){border-bottom:1px solid var(--border-subtle-01);padding-bottom:var(--spacing-04)}}.xv-menu .menu .category-label{margin:0;font-size:var(--fz-md, 14px);color:var(--text-secondary)}.xv-menu .menu .category-routes{display:flex;flex-direction:column;row-gap:var(--spacing-05)}.xv-menu .menu .route{display:inline-flex;align-items:center;column-gap:var(--spacing-03);position:relative;font-size:var(--fz-lg, 16px)}.xv-menu .menu .route .xv-link_ghost{font-family:var(--ff-work-sans), sans-serif}.xv-menu .menu .route .xv-link_ghost:hover{color:var(--link-primary)}@media (max-width: 991px){.xv-menu .menu .route{white-space:nowrap}}.xv-menu .menu .route .route-tag{font-size:9px}";export{s as xv_mega_menu_next}
+import{r as e,c as n,h as i,F as a,H as t,a as o}from"./p-DJC3-dS3.js";import{a as r}from"./p-DSFVdw3w.js";const s=class{constructor(i){e(this,i),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,i,a,t,o;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===(i=this.activeItem)||void 0===i?void 0:i.groups)||void 0===a?void 0:a.length)||0)||this.setActiveGroup(null===(o=null===(t=this.activeItem)||void 0===t?void 0:t.groups)||void 0===o?void 0:o[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 r.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 i(t,{key:"ed607b8cd4c395fb89c2b925381a66476ee7fc66"},i("nav",{key:"df1bc505eea962a6dd450aff9ce94bdaf851bb60",class:{"xv-menu":!0,open:this.open}},this.menuLoading&&i("div",{key:"43d7eb0df82e01e7bc9dcf7d305b41e2e274206b",class:{"xv-menu-loader":!0,open:this.open}},i("xv-loader-v2",{key:"d1fe2d349bbb091ca9e1ad3b3042f751cd7bea8a"})),i("ul",{key:"7daed87d6a28ef57cf50c44d6b692818d898f24b",class:{menu:!0,open:this.open}},this.menuItems.map((e=>{var n,t;return i("li",{class:{"menu-item":!0,active:e.id===(null===(n=this.activeItem)||void 0===n?void 0:n.id)}},e.route?i("xv-link-v2",{variant:"ghost",href:e.route.route},i("p",{class:"menu-item-label"},null===(t=e.route)||void 0===t?void 0:t.label)):i(a,null,i("p",{class:"menu-item-label",onClick:()=>this.setActiveItem(e)},null==e?void 0:e.label),i("ul",{class:"menu-item-groups"},e.groups.map((n=>{var a;return i("li",{class:{group:!0,active:(null===(a=this.activeGroup)||void 0===a?void 0:a.id)===n.id}},n.label&&e.groups.length>1&&i("div",{class:"group-label",onClick:()=>this.setActiveGroup(n)},i("span",{class:"group-label-text"},n.label),i("span",{class:"group-label-icon"})),i("div",{class:"group-container"},i("div",{class:{"group-container-absolute":!0,noLabel:!(n.label&&e.groups.length>1)}},i("div",{class:"group-menus"},i("ul",{class:{"group-menus-categories":!0,inline:"inline"===n.layout}},n.categories.map((e=>i("li",{class:"category"},i("p",{class:"category-label"},e.label),i("ul",{class:"category-routes"},e.routes.map((e=>i("li",{class:"route"},i("xv-link-v2",{size:"lg",variant:"ghost",href:e.route||"#"},e.label),e.tag&&i("xv-tag-v2",{class:"route-tag",size:"sm",color:"#161616",bg:"#E0E0E0"},e.tag))))))))),i("ul",{class:"group-menus-actions"},n.actions.map((e=>i("li",{class:"action"},"link"===e.type&&i("xv-link-v2",{variant:"standalone",href:null==e?void 0:e.url},e.label,i("span",{class:"link-chevron",slot:"icon-right"},"→")),"button"===e.type&&i("xv-button-v2",{onClick:()=>this.navActionClick(e),block:!0,variant:"tertiary"},e.label)))))),(null==n?void 0:n.card)&&i("div",{class:"group-card"},i("xv-card-v2",{media:"Komsa"!==this.applicationContext?n.card.image:void 0,variant:this.isMobile?"horizontal":"vertical"},i("h5",{slot:"header",class:"group-card-title"},n.card.title),i("p",{slot:"body",class:"group-card-desc"},n.card.description),n.card.linkLabel&&i("xv-link-v2",{slot:"footer",variant:"standalone",href:n.card.linkUrl||"#"},n.card.linkLabel,i("span",{class:"link-chevron",slot:"icon-right"},"→")))))))})))))})),i("li",{key:"9644d518b2a427d1af5319f6d0dcd08b11a9c6c2",class:"menu--right"},i("slot",{key:"5200a528a6e5b5374815d7978ec09e87da55a3d7",name:"menu-right"})),this.open&&i("li",{key:"378f37f82e6b9ae4990e4bd7d197d1a1ce851b2e",class:"menu--backdrop",onClick:()=>this.handleClose()}))))}get el(){return o(this)}static get watchers(){return{menuData:[{onMenuDataChange:0}]}}};s.style=":host{--menu-group-width:244px;--menu-group-height:454px;--link-visited:var(--link-primary)}.xv-menu{background:inherit;position:relative;font-family:var(--ff-work-sans), sans-serif}@media (min-width: 992px){.xv-menu{min-height:55px}}.xv-menu-loader{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:not(.open){display:none}}@media (max-width: 991px){.xv-menu.open{padding-bottom:env(safe-area-inset-bottom);max-height:calc(100vh - 120px);overflow:auto;overscroll-behavior:contain}}.xv-menu_mobile{position:relative;display:none}@media (max-width: 991px){.xv-menu_mobile{display:inline-flex}}.xv-menu ul{margin:0;padding:0;list-style:none}.xv-menu .link-chevron{display:inline-block;margin-inline-start:var(--spacing-01)}.xv-menu .menu{overflow-x:auto;display:flex;justify-content:flex-start;column-gap:var(--spacing-08)}@media (max-width: 991px){.xv-menu .menu{flex-direction:column;display:none}}.xv-menu .menu--right{margin-left:auto;display:flex;align-items:center;align-self:center}@media (max-width: 991px){.xv-menu .menu--right{margin-left:unset;padding-block:var(--spacing-05)}}.xv-menu .menu--backdrop{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 .menu.open{display:flex}}.xv-menu .menu-item:hover .menu-item-label{border-bottom-color:var(--interactive-02)}.xv-menu .menu-item.active .menu-item-groups{z-index:990;display:flex}.xv-menu .menu-item.active .menu-item-label{border-bottom-color:var(--interactive-02)}@media (max-width: 991px){.xv-menu .menu-item.active{border-bottom:1px solid #E1E4ED}}.xv-menu .menu-item-label{margin:0;padding-block:var(--spacing-05, 16px);color:inherit;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 .menu-item-label{border-bottom:1px solid #E1E4ED}}.xv-menu .menu-item-groups{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 .menu-item-groups{min-height:unset;padding-block:unset;position:relative;row-gap:unset;border:none}}.xv-menu .menu .group{display:flex;align-items:flex-start}@media (max-width: 991px){.xv-menu .menu .group{flex-direction:column;align-items:stretch}}.xv-menu .menu .group-label{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 .menu .group-label-text{text-overflow:ellipsis;overflow:hidden}.xv-menu .menu .group-label-icon{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 .menu .group-label{max-width:unset;min-width:unset;align-items:stretch;justify-content:flex-start;padding-block:var(--spacing-05)}}.xv-menu .menu .group-container{flex:1;display:none}.xv-menu .menu .group-container-absolute{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 .menu .group-container-absolute{position:unset;flex-direction:column;width:100%;flex:1;padding:var(--spacing-06) 0;background-color:var(--background)}}.xv-menu .menu .group-container-absolute.noLabel{left:0;width:calc(100% - (var(--spacing-06) + var(--spacing-09)))}.xv-menu .menu .group.active .group-label{font-weight:600}@media (max-width: 991px){.xv-menu .menu .group.active .group-label-icon{transform-origin:center;transform:rotate(45deg)}}.xv-menu .menu .group.active .group-container{display:flex}.xv-menu .menu .group-menus{flex:1;display:flex;flex-direction:column;row-gap:var(--spacing-06)}.xv-menu .menu .group-menus-categories{display:flex;row-gap:var(--spacing-07);column-gap:var(--spacing-05);flex:1}@media (max-width: 991px){.xv-menu .menu .group-menus-categories{flex-direction:column;gap:var(--spacing-07)}}.xv-menu .menu .group-menus-categories.inline{flex-direction:column;flex-wrap:wrap;max-height:365px}@media (max-width: 991px){.xv-menu .menu .group-menus-categories.inline{max-height:unset}}.xv-menu .menu .group-menus-categories.inline .category{flex:none}.xv-menu .menu .group-menus-actions{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-05)}@media (max-width: 991px){.xv-menu .menu .group-menus-actions{flex-direction:column;justify-content:stretch;align-items:stretch;text-align:center}}.xv-menu .menu .group-card{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 .menu .group-card{display:none}}@media (max-width: 991px){.xv-menu .menu .group-card{margin-block-start:var(--spacing-06);border-left:none;padding-left:0;max-width:unset;min-width:unset}}.xv-menu .menu .group-card .xv-card{box-shadow:none;background-color:var(--background, #fff)}@media (max-width: 991px){.xv-menu .menu .group-card .xv-card{width:unset}}.xv-menu .menu .group-card-title,.xv-menu .menu .group-card-desc{font-size:var(--fz-md, 14px);font-style:normal;line-height:18px;letter-spacing:0.16px}.xv-menu .menu .group-card .xv-link_standalone,.xv-menu .menu .group-card-title,.xv-menu .menu .group-card-desc{font-family:var(--ff-work-sans), sans-serif}.xv-menu .menu .group-card-title{color:var(--text-primary, #333);font-weight:600}.xv-menu .menu .group-card-desc{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 .menu .category{flex:1;display:flex;flex-direction:column;row-gap:var(--spacing-05)}@media (max-width: 991px){.xv-menu .menu .category{flex:0}.xv-menu .menu .category:not(:last-child){border-bottom:1px solid var(--border-subtle-01);padding-bottom:var(--spacing-04)}}.xv-menu .menu .category-label{margin:0;font-size:var(--fz-md, 14px);color:var(--text-secondary)}.xv-menu .menu .category-routes{display:flex;flex-direction:column;row-gap:var(--spacing-05)}.xv-menu .menu .route{display:inline-flex;align-items:center;column-gap:var(--spacing-03);position:relative;font-size:var(--fz-lg, 16px)}.xv-menu .menu .route .xv-link_ghost{font-family:var(--ff-work-sans), sans-serif}.xv-menu .menu .route .xv-link_ghost:hover{color:var(--link-primary)}@media (max-width: 991px){.xv-menu .menu .route{white-space:nowrap}}.xv-menu .menu .route .route-tag{font-size:9px}";export{s as xv_mega_menu_next}