@telia-ace/knowledge-widget-components-guide-category-dropdown 1.1.1-rc.1 → 1.1.1-rc.2

package/guide-category-dropdown-6c4d5ab0.js

@@ -0,0 +1,105 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),C=require("@emotion/react"),o=require("./index-77cc22b1.js"),x=require("react");require("react-dom");require("react-transition-group");const j=require("@emotion/styled");require("react-router-dom");const z=(e,t)=>e.get("seoConfiguration")?s.jsx(o.Empty,{...t}):null,N=()=>x.useContext(o.ComponentPropertyContext),L=()=>{const[e,t]=x.useState(!1),d=x.useRef(),g=x.useCallback(()=>t(!0),[t]),a=x.useCallback(()=>t(!1),[t]);return o.useEventListener("mouseenter",g,d.current),o.useEventListener("mouseleave",a,d.current),[e,d]},B=(e,t,d,g,a,n)=>{const y=o.useRouter();if(!y)return{routeName:t,params:{}};const{params:m}=y.getRouteData();let i={},u=[];if(g==="tag"){const{tag:l,...h}=m;u=l?l.split(","):[],i=h}else{const{guideCategory:l,uriName:h,...b}=m;u=[l],i=b}if(d&&(e.id==="0"||u.includes(e.id))&&u.length===1&&(!a||a.id==="0")&&Object.keys(i).length===0){const l=y.getInitialRoute();return{routeName:(l==null?void 0:l.name)||t,params:{}}}let r={};const f=n?n.findIndex(l=>l.id===e.id):-1,c=u.includes(e.id);if(g==="tag"){const l=u.filter(b=>b!==e.id);let h=[];e.id==="0"?h=[]:h=c?l:[...u,e.id].filter(b=>b!=="0"),r=o.createParams({...i,tag:h})}else n&&f>0?r=o.createParams({...i,guideCategory:n[f-1].id,uriName:o.formatUrl(n[f-1].title)}):a?r=o.createParams({...i,guideCategory:c?a.id:e.id,uriName:c?o.formatUrl(a.title):o.formatUrl(e.title)}):r=o.createParams({...i,uriName:c?void 0:o.formatUrl(e.title),guideCategory:c?void 0:e.id});return typeof r.tag=="string"&&(r.tag=r.tag.split(",")),{routeName:t,params:{...r,id:void 0,guide:void 0,contactMethod:void 0,connectionKey:void 0,connection:void 0}}},R=j.div`
+    ${o.loadingOpacity}
+    ${o.contentBox}
+  overflow: hidden;
+    min-height: 50px;
+    ${e=>e["data-toggler-in-focus"]&&e.isTabbing&&C.css`
+            && {
+                ${o.borderTabStyle(e)}
+            }
+        `};
+`,q=j.button`
+    background: none;
+    border: 0;
+    outline: 0;
+    display: block;
+    cursor: pointer;
+    padding: 0;
+    font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+    text-align: end;
+    flex: 1 0 auto;
+    svg {
+        path,
+        line {
+            stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+        }
+    }
+`,k=e=>{var t,d,g,a,n,y,m,i;return C.css`
+    font-size: ${(t=e.theme.fonts)==null?void 0:t.normal};
+    text-align: left;
+    text-align: left;
+    text-decoration: none;
+    font-weight: 300;
+    display: flex;
+    align-items: center;
+    padding: ${(d=e.theme.sizes)==null?void 0:d.small};
+    padding-left: ${(g=e.theme.sizes)==null?void 0:g.large};
+    cursor: pointer;
+    overflow: hidden;
+    ${e.selected?C.css`
+              border-left: 2px solid ${(a=e.theme.colors)==null?void 0:a.primary};
+              color: ${(n=e.theme.colors)==null?void 0:n.primary};
+          `:C.css`
+              color: ${(y=e.theme.colors)==null?void 0:y.text};
+          `};
+
+    span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    i {
+        margin-right: ${(m=e.theme.sizes)==null?void 0:m.normal};
+        font-size: ${(i=e.theme.fonts)==null?void 0:i.medium};
+        min-height: 1em;
+        min-width: 1em;
+    }
+`},M=j.div`
+    ${k}
+`,P=j(o.BaseLink)`
+    ${k}
+    &:focus {
+        outline: none;
+    }
+    &:focus-visible {
+        span {
+            ${o.linkTabStyle};
+        }
+    }
+`,D=j.div`
+    display: flex;
+    justify-content: space-between;
+    padding-right: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
+    min-height: 52px;
+    white-space: nowrap;
+
+    && {
+        font-weight: normal;
+
+        a {
+            font-weight: normal;
+        }
+    }
+    .humany-guide-category-dropdown-item {
+        font-weight: normal;
+    }
+`,E=j(o.BaseList)`
+    ${o.list}
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin-right: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}};
+    margin-left: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
+    margin-bottom: 22px;
+    border-left: ${e=>e.theme.border};
+    li {
+        margin: 0 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}} -2px;
+    }
+    li:last-child {
+        margin: 0 0 0 -2px;
+    }
+    flex-basis: 100%;
+    border-width: 2px;
+`,F=j(o.Text)`
+    margin: 0 0 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}};
+`,p={Wrapper:R,Toggler:q,List:E,Item:M,Link:P,TopItem:D,MatchCount:F},$=({matches:e})=>{const{showMatchCount:t=!1}=N();return!t||typeof e>"u"?null:s.jsxs(p.MatchCount,{children:["(",e,")"]})},O=({item:e,guideCategory:t})=>{const{route:d="browse",categoryAriaLabel:g="",activeCategoryAriaLabel:a="",fallbackOnInitialRoute:n=!1}=N(),[y,m]=L(),{id:i,title:u,symbol:r,activeSymbol:f}=e,c=t===i;return s.jsx("li",{ref:m,children:s.jsxs(p.Link,{...B(e,d,n,"category"),"aria-pressed":c,"aria-label":(c?a:g).replace("{{category}}",u),className:"humany-guide-category-dropdown-link","aria-current":c,selected:c,children:[(c||y)&&f?s.jsx(o.SymbolBadge,{symbol:f}):r&&s.jsx(o.SymbolBadge,{symbol:r}),s.jsx(o.Text,{children:u}),s.jsx($,{...e})]})})},U=({className:e,...t})=>{const d=o.useRouteData(),[g,a]=x.useState(!1),{parent:n,route:y="browse",categories:m=[],loading:i=!1}=N(),u=o.useContainer(),[r,f]=x.useState(!1),{params:c}=d,l=o.useIsTabbing(),{guideCategory:h,tag:b,phrase:T,sorting:I}=c;if(x.useEffect(()=>{r&&f(!1)},[h]),i||!n||!m.length)return z(u,{...t,className:o.appendClassNames(e,"humany-guide-category-dropdown")});const w=m.find(v=>v.id===h)||n,S=w.activeSymbol||w.symbol;return s.jsx(p.Wrapper,{...t,"data-loading":!1,"data-toggler-in-focus":g,"aria-expanded":r,isTabbing:l,className:o.appendClassNames(e,"humany-guide-category-dropdown"),children:r?s.jsxs(s.Fragment,{children:[s.jsxs(p.TopItem,{className:"humany-guide-category-dropdown-top-item",children:[s.jsxs(p.Link,{className:"humany-guide-category-dropdown-link",routeName:y,params:o.createParams({tag:b,phrase:T,sorting:I,guideCategory:n.id,uriName:o.formatUrl(n.title)}),selected:!1,children:[n.symbol?s.jsx(o.SymbolBadge,{symbol:n.symbol}):null,s.jsx(o.Text,{children:n.title}),s.jsx($,{...n})]}),s.jsx(p.Toggler,{onBlur:()=>a(!1),onFocus:()=>a(!0),className:"humany-guide-category-dropdown-toggler",onClick:()=>{f(!r)},"aria-expanded":"true","aria-label":w.title,children:s.jsx(o.SymbolBadge,{size:18,symbol:{type:"Svg",content:"caret-up"}})})]}),s.jsx(p.List,{className:"humany-guide-category-dropdown-open",items:m,renderItem:v=>s.jsx(O,{item:v,guideCategory:h},v.id)})]}):s.jsxs(p.TopItem,{className:"humany-guide-category-dropdown-top-item",children:[s.jsxs(p.Item,{className:"humany-guide-category-dropdown-item",onClick:()=>{f(!r)},selected:!1,children:[S?s.jsx(o.SymbolBadge,{symbol:S}):null,s.jsx(o.Text,{children:w.title}),s.jsx($,{...w})]}),s.jsx(p.Toggler,{onBlur:()=>a(!1),onFocus:()=>a(!0),className:"humany-guide-category-dropdown-toggler",onClick:()=>{f(!r)},"aria-expanded":"false","aria-label":w.title,children:s.jsx(o.SymbolBadge,{size:18,symbol:{type:"Svg",content:"caret-down"}})})]})})};exports.default=U;

package/{guide-category-dropdown-6e87a729.mjs → guide-category-dropdown-e6fca50c.mjs}

@@ -1,8 +1,12 @@
 import { jsx as n, jsxs as b, Fragment as F } from "react/jsx-runtime";
-import { E as O, C as G, u as R, a as A, c as C, f as $, n as x, l as H, b as P, d as k, e as W, B as K, g as U, h as q, i as J, T as I, S as v, j as Q, k as V, m as X, o as B } from "./index-34f1725b.mjs";
+import { css as k } from "@emotion/react";
+import { E as O, C as G, u as R, a as A, c as C, f as $, l as H, b as P, d as W, B as K, e as U, g as q, h as J, T as I, S as v, i as Q, j as V, k as X, m as B } from "./index-a4f978a6.mjs";
 import { useContext as Y, useState as T, useRef as Z, useCallback as M, useEffect as _ } from "react";
 import "react-dom";
-const ee = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(O, { ...t }) : null, S = () => Y(G), te = () => {
+import "react-transition-group";
+import x from "@emotion/styled";
+import "react-router-dom";
+const ee = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(O, { ...t }) : null, L = () => Y(G), te = () => {
   const [e, t] = T(!1), d = Z(), u = M(() => t(!0), [t]), s = M(() => t(!1), [t]);
   return R("mouseenter", u, d.current), R("mouseleave", s, d.current), [e, d];
 }, oe = (e, t, d, u, s, o) => {
@@ -15,10 +19,10 @@ const ee = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(O, { ...t })
   const { params: g } = f.getRouteData();
   let r = {}, c = [];
   if (u === "tag") {
-    const { tag: i, ...h } = g;
-    c = i ? i.split(",") : [], r = h;
+    const { tag: i, ...p } = g;
+    c = i ? i.split(",") : [], r = p;
   } else {
-    const { guideCategory: i, uriName: h, ...y } = g;
+    const { guideCategory: i, uriName: p, ...y } = g;
     c = [i], r = y;
   }
   if (d && (e.id === "0" || c.includes(e.id)) && c.length === 1 && (!s || s.id === "0") && Object.keys(r).length === 0) {
@@ -32,10 +36,10 @@ const ee = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(O, { ...t })
   const m = o ? o.findIndex((i) => i.id === e.id) : -1, l = c.includes(e.id);
   if (u === "tag") {
     const i = c.filter((y) => y !== e.id);
-    let h = [];
-    e.id === "0" ? h = [] : h = l ? i : [...c, e.id].filter((y) => y !== "0"), a = C({
+    let p = [];
+    e.id === "0" ? p = [] : p = l ? i : [...c, e.id].filter((y) => y !== "0"), a = C({
       ...r,
-      tag: h
+      tag: p
     });
   } else
     o && m > 0 ? a = C({
@@ -190,7 +194,7 @@ const ee = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(O, { ...t })
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.small;
 }};
-`, p = {
+`, h = {
   Wrapper: ne,
   Toggler: ae,
   List: le,
@@ -199,8 +203,8 @@ const ee = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(O, { ...t })
   TopItem: ie,
   MatchCount: de
 }, z = ({ matches: e }) => {
-  const { showMatchCount: t = !1 } = S();
-  return !t || typeof e > "u" ? null : /* @__PURE__ */ b(p.MatchCount, { children: [
+  const { showMatchCount: t = !1 } = L();
+  return !t || typeof e > "u" ? null : /* @__PURE__ */ b(h.MatchCount, { children: [
     "(",
     e,
     ")"
@@ -211,9 +215,9 @@ const ee = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(O, { ...t })
     categoryAriaLabel: u = "",
     activeCategoryAriaLabel: s = "",
     fallbackOnInitialRoute: o = !1
-  } = S(), [f, g] = te(), { id: r, title: c, symbol: a, activeSymbol: m } = e, l = t === r;
+  } = L(), [f, g] = te(), { id: r, title: c, symbol: a, activeSymbol: m } = e, l = t === r;
   return /* @__PURE__ */ n("li", { ref: g, children: /* @__PURE__ */ b(
-    p.Link,
+    h.Link,
     {
       ...oe(e, d, o, "category"),
       "aria-pressed": l,
@@ -231,23 +235,23 @@ const ee = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(O, { ...t })
       ]
     }
   ) });
-}, he = ({ className: e, ...t }) => {
+}, xe = ({ className: e, ...t }) => {
   const d = Q(), [u, s] = T(!1), {
     parent: o,
     route: f = "browse",
     categories: g = [],
     loading: r = !1
-  } = S(), c = V(), [a, m] = T(!1), { params: l } = d, i = X(), { guideCategory: h, tag: y, phrase: D, sorting: E } = l;
+  } = L(), c = V(), [a, m] = T(!1), { params: l } = d, i = X(), { guideCategory: p, tag: y, phrase: D, sorting: E } = l;
   if (_(() => {
     a && m(!1);
-  }, [h]), r || !o || !g.length)
+  }, [p]), r || !o || !g.length)
     return ee(c, {
       ...t,
       className: B(e, "humany-guide-category-dropdown")
     });
-  const w = g.find((N) => N.id === h) || o, L = w.activeSymbol || w.symbol;
+  const w = g.find((N) => N.id === p) || o, S = w.activeSymbol || w.symbol;
   return /* @__PURE__ */ n(
-    p.Wrapper,
+    h.Wrapper,
     {
       ...t,
       "data-loading": !1,
@@ -256,9 +260,9 @@ const ee = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(O, { ...t })
       isTabbing: i,
       className: B(e, "humany-guide-category-dropdown"),
       children: a ? /* @__PURE__ */ b(F, { children: [
-        /* @__PURE__ */ b(p.TopItem, { className: "humany-guide-category-dropdown-top-item", children: [
+        /* @__PURE__ */ b(h.TopItem, { className: "humany-guide-category-dropdown-top-item", children: [
           /* @__PURE__ */ b(
-            p.Link,
+            h.Link,
             {
               className: "humany-guide-category-dropdown-link",
               routeName: f,
@@ -278,7 +282,7 @@ const ee = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(O, { ...t })
             }
           ),
           /* @__PURE__ */ n(
-            p.Toggler,
+            h.Toggler,
             {
               onBlur: () => s(!1),
               onFocus: () => s(!0),
@@ -299,7 +303,7 @@ const ee = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(O, { ...t })
           )
         ] }),
         /* @__PURE__ */ n(
-          p.List,
+          h.List,
           {
             className: "humany-guide-category-dropdown-open",
             items: g,
@@ -307,15 +311,15 @@ const ee = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(O, { ...t })
               ce,
               {
                 item: N,
-                guideCategory: h
+                guideCategory: p
               },
               N.id
             )
           }
         )
-      ] }) : /* @__PURE__ */ b(p.TopItem, { className: "humany-guide-category-dropdown-top-item", children: [
+      ] }) : /* @__PURE__ */ b(h.TopItem, { className: "humany-guide-category-dropdown-top-item", children: [
         /* @__PURE__ */ b(
-          p.Item,
+          h.Item,
           {
             className: "humany-guide-category-dropdown-item",
             onClick: () => {
@@ -323,14 +327,14 @@ const ee = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(O, { ...t })
             },
             selected: !1,
             children: [
-              L ? /* @__PURE__ */ n(v, { symbol: L }) : null,
+              S ? /* @__PURE__ */ n(v, { symbol: S }) : null,
               /* @__PURE__ */ n(I, { children: w.title }),
               /* @__PURE__ */ n(z, { ...w })
             ]
           }
         ),
         /* @__PURE__ */ n(
-          p.Toggler,
+          h.Toggler,
           {
             onBlur: () => s(!1),
             onFocus: () => s(!0),
@@ -354,5 +358,5 @@ const ee = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(O, { ...t })
   );
 };
 export {
-  he as default
+  xe as default
 };