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

package/guide-category-dropdown-6e87a729.mjs

@@ -0,0 +1,358 @@
+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 { 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 = () => {
+  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) => {
+  const f = A();
+  if (!f)
+    return {
+      routeName: t,
+      params: {}
+    };
+  const { params: g } = f.getRouteData();
+  let r = {}, c = [];
+  if (u === "tag") {
+    const { tag: i, ...h } = g;
+    c = i ? i.split(",") : [], r = h;
+  } else {
+    const { guideCategory: i, uriName: h, ...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) {
+    const i = f.getInitialRoute();
+    return {
+      routeName: (i == null ? void 0 : i.name) || t,
+      params: {}
+    };
+  }
+  let a = {};
+  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({
+      ...r,
+      tag: h
+    });
+  } else
+    o && m > 0 ? a = C({
+      ...r,
+      guideCategory: o[m - 1].id,
+      uriName: $(o[m - 1].title)
+    }) : s ? a = C({
+      ...r,
+      guideCategory: l ? s.id : e.id,
+      uriName: l ? $(s.title) : $(e.title)
+    }) : a = C({
+      ...r,
+      uriName: l ? void 0 : $(e.title),
+      guideCategory: l ? void 0 : e.id
+    });
+  return typeof a.tag == "string" && (a.tag = a.tag.split(",")), {
+    routeName: t,
+    params: {
+      ...a,
+      id: void 0,
+      guide: void 0,
+      contactMethod: void 0,
+      connectionKey: void 0,
+      connection: void 0
+    }
+  };
+}, ne = x.div`
+    ${H}
+    ${P}
+  overflow: hidden;
+    min-height: 50px;
+    ${(e) => e["data-toggler-in-focus"] && e.isTabbing && k`
+            && {
+                ${W(e)}
+            }
+        `};
+`, ae = x.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;
+}};
+        }
+    }
+`, j = (e) => {
+  var t, d, u, s, o, f, g, r;
+  return k`
+    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: ${(u = e.theme.sizes) == null ? void 0 : u.large};
+    cursor: pointer;
+    overflow: hidden;
+    ${e.selected ? k`
+              border-left: 2px solid ${(s = e.theme.colors) == null ? void 0 : s.primary};
+              color: ${(o = e.theme.colors) == null ? void 0 : o.primary};
+          ` : k`
+              color: ${(f = e.theme.colors) == null ? void 0 : f.text};
+          `};
+
+    span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    i {
+        margin-right: ${(g = e.theme.sizes) == null ? void 0 : g.normal};
+        font-size: ${(r = e.theme.fonts) == null ? void 0 : r.medium};
+        min-height: 1em;
+        min-width: 1em;
+    }
+`;
+}, se = x.div`
+    ${j}
+`, re = x(K)`
+    ${j}
+    &:focus {
+        outline: none;
+    }
+    &:focus-visible {
+        span {
+            ${U};
+        }
+    }
+`, ie = x.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;
+    }
+`, le = x(q)`
+    ${J}
+    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;
+`, de = x(I)`
+    margin: 0 0 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}};
+`, p = {
+  Wrapper: ne,
+  Toggler: ae,
+  List: le,
+  Item: se,
+  Link: re,
+  TopItem: ie,
+  MatchCount: de
+}, z = ({ matches: e }) => {
+  const { showMatchCount: t = !1 } = S();
+  return !t || typeof e > "u" ? null : /* @__PURE__ */ b(p.MatchCount, { children: [
+    "(",
+    e,
+    ")"
+  ] });
+}, ce = ({ item: e, guideCategory: t }) => {
+  const {
+    route: d = "browse",
+    categoryAriaLabel: u = "",
+    activeCategoryAriaLabel: s = "",
+    fallbackOnInitialRoute: o = !1
+  } = S(), [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,
+    {
+      ...oe(e, d, o, "category"),
+      "aria-pressed": l,
+      "aria-label": (l ? s : u).replace(
+        "{{category}}",
+        c
+      ),
+      className: "humany-guide-category-dropdown-link",
+      "aria-current": l,
+      selected: l,
+      children: [
+        (l || f) && m ? /* @__PURE__ */ n(v, { symbol: m }) : a && /* @__PURE__ */ n(v, { symbol: a }),
+        /* @__PURE__ */ n(I, { children: c }),
+        /* @__PURE__ */ n(z, { ...e })
+      ]
+    }
+  ) });
+}, he = ({ 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;
+  if (_(() => {
+    a && m(!1);
+  }, [h]), 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;
+  return /* @__PURE__ */ n(
+    p.Wrapper,
+    {
+      ...t,
+      "data-loading": !1,
+      "data-toggler-in-focus": u,
+      "aria-expanded": a,
+      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(
+            p.Link,
+            {
+              className: "humany-guide-category-dropdown-link",
+              routeName: f,
+              params: C({
+                tag: y,
+                phrase: D,
+                sorting: E,
+                guideCategory: o.id,
+                uriName: $(o.title)
+              }),
+              selected: !1,
+              children: [
+                o.symbol ? /* @__PURE__ */ n(v, { symbol: o.symbol }) : null,
+                /* @__PURE__ */ n(I, { children: o.title }),
+                /* @__PURE__ */ n(z, { ...o })
+              ]
+            }
+          ),
+          /* @__PURE__ */ n(
+            p.Toggler,
+            {
+              onBlur: () => s(!1),
+              onFocus: () => s(!0),
+              className: "humany-guide-category-dropdown-toggler",
+              onClick: () => {
+                m(!a);
+              },
+              "aria-expanded": "true",
+              "aria-label": w.title,
+              children: /* @__PURE__ */ n(
+                v,
+                {
+                  size: 18,
+                  symbol: { type: "Svg", content: "caret-up" }
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n(
+          p.List,
+          {
+            className: "humany-guide-category-dropdown-open",
+            items: g,
+            renderItem: (N) => /* @__PURE__ */ n(
+              ce,
+              {
+                item: N,
+                guideCategory: h
+              },
+              N.id
+            )
+          }
+        )
+      ] }) : /* @__PURE__ */ b(p.TopItem, { className: "humany-guide-category-dropdown-top-item", children: [
+        /* @__PURE__ */ b(
+          p.Item,
+          {
+            className: "humany-guide-category-dropdown-item",
+            onClick: () => {
+              m(!a);
+            },
+            selected: !1,
+            children: [
+              L ? /* @__PURE__ */ n(v, { symbol: L }) : null,
+              /* @__PURE__ */ n(I, { children: w.title }),
+              /* @__PURE__ */ n(z, { ...w })
+            ]
+          }
+        ),
+        /* @__PURE__ */ n(
+          p.Toggler,
+          {
+            onBlur: () => s(!1),
+            onFocus: () => s(!0),
+            className: "humany-guide-category-dropdown-toggler",
+            onClick: () => {
+              m(!a);
+            },
+            "aria-expanded": "false",
+            "aria-label": w.title,
+            children: /* @__PURE__ */ n(
+              v,
+              {
+                size: 18,
+                symbol: { type: "Svg", content: "caret-down" }
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  he as default
+};

package/guide-category-dropdown-e0c53e78.js

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