@telia-ace/knowledge-widget-components-search 1.1.8 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,222 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),N=require("@emotion/react"),z=require("@emotion/styled"),i=require("@telia-ace/knowledge-widget-ui"),oe=require("@telia-ace/widget-types-grid"),F=require("@telia-ace/widget-utilities"),h=require("react"),re=({text:e,className:t,filterType:s,handleClick:c,deleteAriaLabel:f="",...l})=>{const o=h.useRef(),[w,C]=h.useState(document.activeElement===o.current);return p.jsxs(i.Text,{className:F.appendClassNames(t,"humany-filter-badge",w?"humany-filter-badge-focused":""),onKeyDown:x=>{x.key==="Enter"&&c(x,s)},children:[e,p.jsx(i.Link,{...l,ref:o,tabIndex:0,onFocus:()=>{C(!0)},onBlur:()=>{C(!1)},role:"button","aria-label":f.replace("{{item}}",e),onClick:x=>c(x,s),children:p.jsx(i.SymbolBadge,{size:13,symbol:{type:"Svg",content:"close"}})})]})},ie=({inputHasFocus:e,searchContainerRef:t,showTag:s,showGuideCategory:c,position:f})=>{const{activeFilterBadges:l,deleteFilterBadgeAriaLabel:o=""}=i.useProperties(),w=i.useDispatch(),{name:C,params:x}=i.useRouteData(),[A,y]=h.useState(!1),E=h.useCallback(r=>{const{key:d}=r;["ArrowLeft","ArrowRight"].indexOf(d)===-1&&y(!1)},[]);i.useEventListener("keydown",E,window),i.useEventListener("click",E,window);const{guideCategory:j,tag:b,tooltip:I}=l||{},u=r=>{const d=r.querySelectorAll(".humany-filter-badge > a");return{badges:d,index:Array.from(d).findIndex(m=>document.activeElement===m)}},n=h.useCallback((r,d,m)=>{r.preventDefault(),w("quick-filter:remove",{types:[d],ids:[m]})},[w]),a=(r,d)=>{if(!t)return;const{badges:m,index:k}=u(t);if(m.length){let q=null;r==="left"?k===-1?q=m.item(m.length-1):k>0&&(q=m.item(k-1)):r==="right"&&(k===m.length-1?d&&d.focus():m.item(k+1)&&(q=m.item(k+1))),q&&(q.focus(),y(!0))}};i.useKeyPress("ArrowLeft",h.useCallback(()=>{if(!t)return;const{index:r}=u(t);if(e||r>-1){const d=t.querySelector('[data-type="search"]'),m=d&&d.selectionStart!==null&&d.selectionStart<=0,k=r>-1;(m||k)&&a("left",d)}},[e,t])),i.useKeyPress("ArrowRight",h.useCallback(()=>{if(!t)return;const{index:r}=u(t);if(r>-1){const d=t.querySelector('[data-type="search"]');r>-1&&a("right",d)}},[t])),i.useKeyPress("Backspace",h.useCallback(r=>{if(!t)return;let d=[];const{index:m}=u(t),k=t.querySelector('[data-type="search"]');if(m>-1)m===0?c?d=["guideCategory"]:s&&(d=["tag"]):m===1&&(d=["tag"]);else{const $=document.activeElement===k;k&&k.selectionStart!==null&&k.selectionStart<=0&&$&&(l!=null&&l.tag.length?d=["tag"]:l!=null&&l.guideCategory&&(d=["guideCategory"]))}if(d.length>0){r.preventDefault();let $;if(d.includes("tag")){const L=l==null?void 0:l.tag.at(-1);$=L==null?void 0:L.id}w("quick-filter:remove",{types:d,ids:[$]})}},[t,l,s,c,w]));const g=h.useCallback(r=>r==="guideCategory"&&j&&c?p.jsx(X,{text:`@${j.title}`,routeName:C,filterType:"guideCategory",handleClick:n,deleteAriaLabel:o,params:{...x,guideCategory:void 0}}):r==="tag"&&(b!=null&&b.length)&&s?b.map(d=>{const m=b.reduce((k,q)=>(q.id!==d.id&&k.push(q.id),k),[]);return p.jsx(X,{className:"humany-filter-badge",text:`#${d.title}`,routeName:C,filterType:"tag",handleClick:k=>n(k,"tag",d.id),deleteAriaLabel:o,params:{...x,tag:m}},d.id)}):null,[j,b,C,x,c,s,A,n]);return!j&&!b?null:p.jsxs(ae,{className:"humany-filter-badges",position:f,children:[j&&I?p.jsx(i.Tooltip,{content:p.jsx(p.Fragment,{children:I}),sticky:!1,children:g("guideCategory")}):g("guideCategory"),b&&g("tag")]})},ae=z.div`
2
+ display: flex;
3
+ align-items: center;
4
+ flex-wrap: wrap;
5
+
6
+ ${e=>{var t,s;return e.position==="inside"?N.css`
7
+ &:not(:first-child) {
8
+ margin: 0 0 0 ${(t=e.theme.sizes)==null?void 0:t.normal};
9
+ }
10
+ `:N.css`
11
+ margin: ${(s=e.theme.sizes)==null?void 0:s.small} 0 0 0;
12
+ span:first-child {
13
+ margin-left: 0;
14
+ }
15
+ `}}
16
+ `,X=z(re)`
17
+ display: flex;
18
+ align-items: center;
19
+ padding: ${e=>{var t,s;return`${(t=e.theme.sizes)==null?void 0:t.small} calc(${(s=e.theme.sizes)==null?void 0:s.normal}/2) `}};
20
+ background-color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
21
+ border-radius: ${e=>e.theme.borderRadius};
22
+ font-weight: 300;
23
+ font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
24
+ font-style: italic;
25
+ color: #ffffff;
26
+ text-decoration: none;
27
+ white-space: nowrap;
28
+
29
+ margin: calc(${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} / 2);
30
+
31
+ &.humany-filter-badge-focused:focus-within {
32
+ ${i.borderTabStyle}
33
+ background-color: transparent;
34
+
35
+ svg {
36
+ path {
37
+ stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
38
+ }
39
+ }
40
+ a {
41
+ outline: none;
42
+ }
43
+ }
44
+
45
+ svg {
46
+ width: 17px;
47
+ height: 11px;
48
+ margin: 1px 0 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}};
49
+ path {
50
+ stroke: #ffffff;
51
+ stroke-width: 2px;
52
+ }
53
+ order: 1;
54
+ }
55
+ `,T=(e,t)=>!t||!e?!0:e.toLowerCase().indexOf(t.toLowerCase())>-1,ce=(e=[],t,s)=>{if(!s)return e;const c=F.deepClone(e);if(t==="tag")return c.filter(o=>T(o.title,s));const f=le(c,s);return Y(c,o=>f.indexOf(o.id)>-1)},Y=(e,t)=>e.filter(s=>(s.items&&s.items.length&&(s.items=Y(s.items,t)),t(s))),le=(e,t)=>{const c=Z(e).filter(l=>T(l.title,t)).map(l=>l.id);let f=[];return c.forEach(l=>{const o=F.categoryTrail(l,e);f=f.concat(o)}),f},Z=e=>{let t=[];return e.forEach(s=>{t.push(s),Array.isArray(s.items)&&(t=t.concat(Z(s.items)))}),t},K=e=>{const t=Array.from((e==null?void 0:e.getElementsByTagName("A"))||[]).filter(s=>s.getAttribute("disabled")===null);return{anchors:t,focusedIndex:t.findIndex(s=>document.activeElement===s)}},ue=e=>e?e.querySelector('[data-type="search"], input[type="search"]'):null,W=e=>{if(!e)return;const t=ue(e);t&&t.focus()},de=({filterPhrase:e,items:t,filterType:s,filterContainer:c,searchContainer:f,inputHasFocus:l})=>{const[o,w]=h.useState(t||[]),[C,x]=h.useState(null),A=i.useDispatch(),{activeFilterBadges:y,quickFilters:E}=i.useProperties(),j=typeof E=="object"&&!!E.autoSelect||typeof E=="boolean"&&!!E;h.useEffect(()=>{w(ce(t,s,e))},[e,s,t]),h.useEffect(()=>{var u;if(c){const{anchors:n}=K(c),a=(u=n[0])==null?void 0:u.getAttribute("data-id");a&&x(a)}},[o,c]);const b=h.useCallback((u,n)=>{let a=((y==null?void 0:y.tag)||[]).map(r=>r.id);n==="tag"&&u.id&&(a=a.includes(u.id)?a.filter(r=>r!==u.id):[...a,u.id]);const g={category:y!=null&&y.guideCategory?y.guideCategory.id:void 0,tagIds:a};n==="guideCategory"&&(g.category=u.id),A("quick-filter:add",g)},[y,A]),I=u=>u==="guideCategory"?{renderItem:(n,a)=>p.jsx(J,{autoSelect:j&&l&&n.id===C,disabled:!T(n.title,e),tabIndex:T(n.title,e)?0:-1,onKeyDown:g=>{g.key==="Enter"&&b(n,u)},"data-level":a,onClick:()=>{b(n,u)},"data-id":n.id,children:p.jsx(G,{title:n.title,phrase:e,matches:T(n.title,e)})})}:{renderLi:!0,renderItem:n=>p.jsx(J,{autoSelect:j&&l&&n.id===C,onKeyDown:a=>{a.key==="Enter"&&b(n,u)},onClick:()=>{b(n,u)},"data-id":n.id,children:p.jsx(G,{symbol:"#",title:n.title,phrase:e,matches:T(n.title,e)})})};return i.useEventListener("keydown",u=>{var q;const{key:n}=u;if(!c||!(n==="ArrowDown"||n==="ArrowUp"||n==="Enter"))return;const{anchors:a,focusedIndex:g}=K(c);if(n==="Enter"){if(l&&j){const $=(q=a[0])==null?void 0:q.getAttribute("data-id");$&&b({id:$},s)}return}const r=()=>{var $;return($=a[0])==null?void 0:$.focus()},d=()=>{var $;return($=a[a.length-1])==null?void 0:$.focus()},m=()=>{var $;return($=a[g+1])==null?void 0:$.focus()},k=()=>{var $;return($=a[g-1])==null?void 0:$.focus()};l?(u.preventDefault(),n==="ArrowDown"?r():d()):g>-1&&(u.preventDefault(),n==="ArrowDown"?a.length>g+1?m():W(f):g-1<0?W(f):k())},window),p.jsx(i.ItemTree,{tree:o,renderEmpty:!1,ulProps:{role:"listbox"},liProps:{role:"option"},...I(s)})},G=({title:e,phrase:t,matches:s,symbol:c=""})=>{const f=()=>{if(!s||!t)return[e];const C=e.toLowerCase().indexOf(t.toLowerCase()),x=e.substr(0,C),A=e.slice(C,C+t.length),y=e.substr(C+t.length);return[x,A,y]},[l,o,w]=f();return p.jsxs(i.Text,{children:[c,l,o?p.jsx("strong",{children:o}):null,w||null]})},fe=N.css`
56
+ opacity: 0.5;
57
+ pointer-events: none;
58
+ `,H=e=>{var t,s;return N.css`
59
+ background-color: ${(t=e.theme.colors)==null?void 0:t.text};
60
+ color: #ffffff;
61
+ outline: none;
62
+
63
+ span:first-child {
64
+ border-color: ${(s=e.theme.colors)==null?void 0:s.text};
65
+ }
66
+ `},J=z(i.Link)`
67
+ display: block;
68
+ text-decoration: none;
69
+ font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
70
+
71
+ ${e=>e.disabled&&fe}
72
+ color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
73
+ background-color: transparent;
74
+
75
+ span {
76
+ display: block;
77
+ ${e=>{var t,s,c,f;return e["data-level"]?`padding: calc(${(t=e.theme.sizes)==null?void 0:t.normal} / 2) ${(s=e.theme.sizes)==null?void 0:s.normal};`:`padding: calc(${(c=e.theme.sizes)==null?void 0:c.normal} / 2) ${(f=e.theme.sizes)==null?void 0:f.medium}; `}}
78
+ ${e=>e["data-level"]&&"border-left: 2px solid"}
79
+ }
80
+
81
+ span:first-child {
82
+ border-color: #e7e7e7;
83
+ }
84
+
85
+ ${e=>{var t;return e["data-level"]&&`padding: 0 calc(${(t=e.theme.sizes)==null?void 0:t.medium} * ${e["data-level"]});`}}
86
+
87
+ ${e=>e.autoSelect&&H}
88
+
89
+ &:hover,
90
+ &:focus {
91
+ ${H}
92
+ }
93
+ `,ge=({phrase:e="",inputHasFocus:t,searchContainerRef:s})=>{const{quickFilter:c={open:!1,loading:!1,symbol:"",type:"",items:[]},activeFilterBadges:f,noMatchesLabel:l="No matching items"}=i.useProperties(),[o,w]=i.useScroll(!0),C=i.useContainer(),{events:x}=C.get("$widget"),A=h.useRef(),y=h.useCallback(g=>(g&&g.addEventListener("keydown",()=>{K(g).focusedIndex>-1&&x.subscribeOnce("router:changed",()=>{W(s)})},!0),A.current=g,g),[s]),{items:E=[],symbol:j,type:b,open:I,loading:u}=c,n=h.useMemo(()=>{const g=((f==null?void 0:f.tag)||[]).map(r=>r.id);return E.filter(r=>!g.includes(r.id))},[E,f]);if(!I||!j)return null;const a=e.slice(e.indexOf(j)+1);return p.jsxs(he,{ref:y,"data-loading":u,className:F.appendClassNames("humany-quick-filter-dropdown",[b==="guideCategory","humany-quick-filter-guide-categories"],[b==="tag","humany-quick-filter-tags"]),children:[p.jsx(me,{className:"humany-quick-filter-dropdown-inner",css:o,ref:w,children:n.length>0?p.jsx(de,{filterType:b,items:n,filterPhrase:a,filterContainer:w.current,searchContainer:s,inputHasFocus:t}):p.jsx(pe,{children:l})}),p.jsx(i.Loader,{loading:u})]})},he=z.div`
94
+ ${e=>i.contentBox(e)};
95
+ position: absolute;
96
+ top: calc(100% + ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}});
97
+ left: 0;
98
+ right: 0;
99
+ z-index: 1;
100
+ overflow: hidden;
101
+ `,me=z.div`
102
+ max-height: 300px;
103
+ overflow: auto;
104
+ padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}} 0;
105
+ ${e=>e.css}
106
+ ul {
107
+ list-style: none;
108
+ padding: 0;
109
+ margin: 0;
110
+ }
111
+ li div {
112
+ ${e=>{var t;return`margin: ${(t=e.theme.sizes)==null?void 0:t.normal} 0;`}}
113
+ }
114
+ `,pe=z.p`
115
+ margin: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
116
+ color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
117
+ `,P=(e,t)=>{if(e&&!t||!e&&t)return!0;if(e&&t){if(!Array.isArray(e)&&!Array.isArray(t)){if(e.id!==t.id)return!0}else if(!((c,f)=>c.length===f.length?c.every((l,o)=>l===f[o]):!1)(e,t))return!0}return!1},ye=(e,t={},s=!0)=>{const c=i.useDispatch(),{quickFilters:f=!1,quickFilter:l={open:!1},activeFilterBadges:o,filterBadges:w=!1,incremental:C=600}=i.useProperties(),x=i.useDebounce(e,typeof C=="boolean"?600:C),A=i.usePrevious(x),y=i.usePrevious(o),E=h.useRef(null),j=h.useCallback((n="")=>{var a;if(w){const g=P(o==null?void 0:o.guideCategory,y==null?void 0:y.guideCategory)||P(o==null?void 0:o.tag,y==null?void 0:y.tag);return c("search",{value:n,filtersChanged:g,filters:{tagIds:((o==null?void 0:o.tag)||[]).map(r=>r.id),guideCategoryId:((a=o==null?void 0:o.guideCategory)==null?void 0:a.id)||null}})}return c("search",{value:n})},[c,o]),b=h.useCallback(n=>{c("clear",{navigateToHome:n})},[c]),I=n=>f?n.replace(/([@#].*)/g,""):n,u=h.useCallback(n=>{if(l.open&&n.preventDefault){n.preventDefault();return}const a=document.activeElement,g=E.current&&typeof E.current.contains=="function"?E.current.contains(a):!1,r=I(e);typeof n=="boolean"&&n||r.length&&g||o!=null&&o.guideCategory||o!=null&&o.tag.length&&g?j(r):b(g)},[E,e,l,b,o,j]);return h.useEffect(()=>{const n=P(o==null?void 0:o.guideCategory,y==null?void 0:y.guideCategory)||P(o==null?void 0:o.tag,y==null?void 0:y.tag),a=x&&I(x),g=A&&I(A);typeof g<"u"&&g!==a&&a!==t.phrase&&s&&!l.open&&u(n)},[x,l.open,o,u]),h.useEffect(()=>{if(e&&f){const n=typeof f=="boolean"&&!!f||typeof f=="object"&&!!f.guideCategory,a=typeof f=="boolean"&&!!f||typeof f=="object"&&!!f.tag;n&&e.indexOf("@")===e.length-1&&c("quick-filter:open",{type:"guideCategory",symbol:"@"}),a&&e.indexOf("#")===e.length-1&&c("quick-filter:open",{type:"tag",symbol:"#"})}l.open&&e.indexOf("@")===-1&&e.indexOf("#")===-1&&c("quick-filter:close")},[e]),[u,b,E]},be=({className:e,...t})=>{const{showSearchButton:s,showClearButton:c,role:f="search",autoFocus:l,placeholder:o,searchButtonLabel:w,searchButtonText:C,clearButtonLabel:x,ariaLabel:A,route:y="search",incremental:E=!0,showChildren:j=!1,quickFilter:b,quickFilters:I,filterBadges:u}=i.useProperties(),{params:n}=i.useRouteData(),[a,g]=h.useState(!1),[r,d]=h.useState(n.phrase||""),[m,k]=h.useState({guideCategory:!1,tag:!1}),q=i.useContainer(),$=i.useChildren(),L=i.useDispatch(),{position:_="inside"}=typeof u=="object"?u:{};h.useEffect(()=>{const{guideCategory:S,tag:v}=n,D=typeof u=="object"?!!u.guideCategory:!!u,ne=typeof u=="object"?!!u.tag:!!u;k({guideCategory:D&&!!S,tag:ne&&!!v})},[u,n]),i.useWidgetEvent("router:changed",()=>{if(b){const{open:S,symbol:v}=b;if(S){if(v){const D=r.replace(r.slice(r.indexOf(v)),"");d(D)}L("quick-filter:close")}}},[b,r,d,L]);const[M,O,B]=ye(r,n,!!E);h.useEffect(()=>{d(n.phrase||"")},[n.phrase]);const R=h.useCallback(S=>{d(S)},[d]),V=h.useCallback(()=>{L("quick-filter:close").then(()=>O(!0))},[L,O]),ee=h.useCallback(()=>{var S,v;l&&!a&&((v=(S=B.current)==null?void 0:S.getElementsByTagName("input")[0])==null||v.focus())},[l,a,B]),te=h.useCallback(()=>{q.getAsync("router").then(S=>{const v=S.getInitialRoute(),D=S.getRouteData();(v==null?void 0:v.name)===D.name&&(v==null?void 0:v.name)!==y?d(""):O(!0)})},[q,d,O]),U=S=>{if(S!==_)return null;if(m.guideCategory||m.tag)return p.jsx(ie,{position:S,inputHasFocus:a,showGuideCategory:m.guideCategory,showTag:m.tag,searchContainerRef:B.current})};i.useTransitionEnd(ee);const Q=c&&(m.guideCategory||m.tag||r),se=I?i.convertToStringAttributes({role:"combobox","aria-autocomplete":"list",autoComplete:"off","aria-haspopup":"listbox"}):{};return p.jsxs(xe,{...t,ref:B,role:f,className:F.appendClassNames(e,"humany-search"),"data-has-phrase":!!r,"data-has-focus":a,"data-has-search-symbol":s?"true":"false",children:[p.jsxs(ke,{action:".",onSubmit:S=>{var v,D;S.preventDefault(),(D=(v=B.current)==null?void 0:v.getElementsByTagName("input")[0])==null||D.blur()},"data-has-focus":a,children:[s&&p.jsxs(Ce,{"aria-label":w,type:"submit",title:w,disabled:!r,onClick:M,"data-has-phrase":!!r,"data-has-focus":a,children:[p.jsx(i.SymbolBadge,{size:32,symbol:{type:"Svg",content:"search"}}),C]}),U("inside"),p.jsx(i.Input,{crossOrigin:void 0,type:"search","aria-label":A,...se,placeholder:m.guideCategory||m.tag?"":o,onFocusChange:g,onEscape:V,onEnter:M,onChange:R,value:r}),Q&&p.jsx($e,{"aria-label":x,type:"reset",hasFocus:a,title:x,onClick:te,children:p.jsx(i.SymbolBadge,{size:27,symbol:{type:"Svg",content:"clear"}})}),j&&!Q&&$.map(S=>p.jsx(oe.Component,{id:S.id,branch:"default"},S.id)),p.jsx(ge,{inputHasFocus:a,phrase:r,searchContainerRef:B.current})]}),U("below")]})},xe=z.div`
118
+ ${i.contentBox};
119
+ width: 100%;
120
+ padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
121
+
122
+ input {
123
+ background-color: transparent;
124
+ border: none;
125
+ outline: none;
126
+ min-width: 25%;
127
+ flex: 1;
128
+ font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
129
+ font-weight: 300;
130
+ font-style: italic;
131
+ padding: 1em 0;
132
+ color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
133
+ -webkit-appearance: none;
134
+
135
+ ${e=>{var t;return e["data-has-search-symbol"]==="true"&&`text-indent: ${(t=e.theme.sizes)==null?void 0:t.normal};`}}
136
+
137
+ ::placeholder {
138
+ color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
139
+ }
140
+ /* removes the 'X' from IE */
141
+ &[type='search']::-ms-clear {
142
+ display: none;
143
+ width: 0;
144
+ height: 0;
145
+ }
146
+ &[type='search']::-ms-reveal {
147
+ display: none;
148
+ width: 0;
149
+ height: 0;
150
+ }
151
+
152
+ /* removes the 'X' from Chrome */
153
+ &[type='search']::-webkit-search-decoration,
154
+ &[type='search']::-webkit-search-cancel-button,
155
+ &[type='search']::-webkit-search-results-button,
156
+ &[type='search']::-webkit-search-results-decoration {
157
+ display: none;
158
+ }
159
+
160
+ &:focus {
161
+ outline: none;
162
+ }
163
+ }
164
+
165
+ button {
166
+ background: transparent;
167
+ border: none;
168
+ padding: 0;
169
+ display: inline-flex;
170
+ align-items: center;
171
+ font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.large}};
172
+ transition: color 200ms ease-out;
173
+ color: ${e=>{var t;return e["data-has-focus"]||e["data-has-phrase"]?(t=e.theme.colors)==null?void 0:t.primary:"#000000"}};
174
+ cursor: pointer;
175
+ > svg {
176
+ height: 100%;
177
+ }
178
+ }
179
+ `,ke=z.form`
180
+ display: flex;
181
+ flex-wrap: nowrap;
182
+ align-items: center;
183
+ border: ${e=>e.theme.inputBorder};
184
+ border-radius: ${e=>e.theme.borderRadius};
185
+ background-color: #ffffff;
186
+ position: relative;
187
+ padding: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
188
+
189
+ ${e=>{var t,s;return e["data-has-focus"]&&N.css`
190
+ ${(t=e.theme.accessibility)!=null&&t.isTabbing?i.borderTabStyle(e):`
191
+ border-color: ${(s=e.theme.colors)==null?void 0:s.primary};
192
+ outline: none;
193
+ input {
194
+ outline: none;
195
+ }
196
+ `}
197
+ `}};
198
+ `,Ce=z(i.Button)`
199
+ padding: 0;
200
+ height: 2em;
201
+
202
+ svg {
203
+ circle,
204
+ line {
205
+ stroke: ${e=>{var t;return e["data-has-focus"]?(t=e.theme.colors)==null?void 0:t.primary:"#000000"}};
206
+ }
207
+ }
208
+ `,$e=z(i.Button)`
209
+ &:focus-visible svg {
210
+ ${i.borderTabStyle}
211
+ }
212
+
213
+ svg {
214
+ vertical-align: top;
215
+
216
+ circle,
217
+ line,
218
+ path {
219
+ stroke: ${e=>{var t,s;return e.hasFocus?(t=e.theme.colors)==null?void 0:t.primary:(s=e.theme.colors)==null?void 0:s.text}};
220
+ }
221
+ }
222
+ `;exports.default=be;
@@ -7,6 +7,7 @@ export type SearchComponentProps = {
7
7
  showClearButton: boolean;
8
8
  showChildren: boolean;
9
9
  searchButtonLabel: string;
10
+ searchButtonText?: string;
10
11
  clearButtonLabel: string;
11
12
  ariaLabel?: string;
12
13
  noMatchesLabel?: string;
@@ -1,220 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),T=require("@emotion/react"),z=require("@emotion/styled"),r=require("@telia-ace/knowledge-widget-ui"),ne=require("@telia-ace/widget-types-grid"),F=require("@telia-ace/widget-utilities"),h=require("react"),oe=({text:e,className:t,filterType:s,handleClick:l,deleteAriaLabel:d="",...u})=>{const o=h.useRef(),[S,C]=h.useState(document.activeElement===o.current);return m.jsxs(r.Text,{className:F.appendClassNames(t,"humany-filter-badge",S?"humany-filter-badge-focused":""),onKeyDown:$=>{$.key==="Enter"&&l($,s)},children:[e,m.jsx(r.Link,{...u,ref:o,tabIndex:0,onFocus:()=>{C(!0)},onBlur:()=>{C(!1)},role:"button","aria-label":d.replace("{{item}}",e),onClick:$=>l($,s),children:m.jsx(r.SymbolBadge,{size:13,symbol:{type:"Svg",content:"close"}})})]})},re=({inputHasFocus:e,searchContainerRef:t,showTag:s,showGuideCategory:l,position:d})=>{const{activeFilterBadges:u,deleteFilterBadgeAriaLabel:o=""}=r.useProperties(),S=r.useDispatch(),{name:C,params:$}=r.useRouteData(),[A,p]=h.useState(!1),v=h.useCallback(a=>{const{key:c}=a;["ArrowLeft","ArrowRight"].indexOf(c)===-1&&p(!1)},[]);r.useEventListener("keydown",v,window),r.useEventListener("click",v,window);const{guideCategory:E,tag:y,tooltip:w}=u||{},f=a=>{const c=a.querySelectorAll(".humany-filter-badge > a");return{badges:c,index:Array.from(c).findIndex(b=>document.activeElement===b)}},n=h.useCallback((a,c,b)=>{a.preventDefault(),S("quick-filter:remove",{types:[c],ids:[b]})},[S]),g=(a,c)=>{if(!t)return;const{badges:b,index:k}=f(t);if(b.length){let I=null;a==="left"?k===-1?I=b.item(b.length-1):k>0&&(I=b.item(k-1)):a==="right"&&(k===b.length-1?c&&c.focus():b.item(k+1)&&(I=b.item(k+1))),I&&(I.focus(),p(!0))}};r.useKeyPress("ArrowLeft",h.useCallback(()=>{if(!t)return;const{index:a}=f(t);if(e||a>-1){const c=t.querySelector('[data-type="search"]'),b=c&&c.selectionStart!==null&&c.selectionStart<=0,k=a>-1;(b||k)&&g("left",c)}},[e,t])),r.useKeyPress("ArrowRight",h.useCallback(()=>{if(!t)return;const{index:a}=f(t);if(a>-1){const c=t.querySelector('[data-type="search"]');a>-1&&g("right",c)}},[t])),r.useKeyPress("Backspace",h.useCallback(a=>{if(!t)return;let c=[];const{index:b}=f(t),k=t.querySelector('[data-type="search"]');if(b>-1)b===0?l?c=["guideCategory"]:s&&(c=["tag"]):b===1&&(c=["tag"]);else{const x=document.activeElement===k;k&&k.selectionStart!==null&&k.selectionStart<=0&&x&&(u!=null&&u.tag.length?c=["tag"]:u!=null&&u.guideCategory&&(c=["guideCategory"]))}if(c.length>0){a.preventDefault();let x;if(c.includes("tag")){const D=u==null?void 0:u.tag.at(-1);x=D==null?void 0:D.id}S("quick-filter:remove",{types:c,ids:[x]})}},[t,u,s,l,S]));const i=h.useCallback(a=>a==="guideCategory"&&E&&l?m.jsx(X,{text:`@${E.title}`,routeName:C,filterType:"guideCategory",handleClick:n,deleteAriaLabel:o,params:{...$,guideCategory:void 0}}):a==="tag"&&(y!=null&&y.length)&&s?y.map(c=>{const b=y.reduce((k,I)=>(I.id!==c.id&&k.push(I.id),k),[]);return m.jsx(X,{className:"humany-filter-badge",text:`#${c.title}`,routeName:C,filterType:"tag",handleClick:k=>n(k,"tag",c.id),deleteAriaLabel:o,params:{...$,tag:b}},c.id)}):null,[E,y,C,$,l,s,A,n]);return!E&&!y?null:m.jsxs(ie,{className:"humany-filter-badges",position:d,children:[E&&w?m.jsx(r.Tooltip,{content:m.jsx(m.Fragment,{children:w}),sticky:!1,children:i("guideCategory")}):i("guideCategory"),y&&i("tag")]})},ie=z.div`
2
- display: flex;
3
- align-items: center;
4
- flex-wrap: wrap;
5
-
6
- ${e=>{var t,s;return e.position==="inside"?T.css`
7
- &:not(:first-child) {
8
- margin: 0 0 0 ${(t=e.theme.sizes)==null?void 0:t.normal};
9
- }
10
- `:T.css`
11
- margin: ${(s=e.theme.sizes)==null?void 0:s.small} 0 0 0;
12
- span:first-child {
13
- margin-left: 0;
14
- }
15
- `}}
16
- `,X=z(oe)`
17
- display: flex;
18
- align-items: center;
19
- padding: ${e=>{var t,s;return`${(t=e.theme.sizes)==null?void 0:t.small} calc(${(s=e.theme.sizes)==null?void 0:s.normal}/2) `}};
20
- background-color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
21
- border-radius: ${e=>e.theme.borderRadius};
22
- font-weight: 300;
23
- font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
24
- font-style: italic;
25
- color: #ffffff;
26
- text-decoration: none;
27
- white-space: nowrap;
28
-
29
- margin: calc(${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} / 2);
30
-
31
- &.humany-filter-badge-focused:focus-within {
32
- ${r.borderTabStyle}
33
- background-color: transparent;
34
-
35
- svg {
36
- path {
37
- stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
38
- }
39
- }
40
- a {
41
- outline: none;
42
- }
43
- }
44
-
45
- svg {
46
- width: 17px;
47
- height: 11px;
48
- margin: 1px 0 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}};
49
- path {
50
- stroke: #ffffff;
51
- stroke-width: 2px;
52
- }
53
- order: 1;
54
- }
55
- `,N=(e,t)=>!t||!e?!0:e.toLowerCase().indexOf(t.toLowerCase())>-1,ae=(e=[],t,s)=>{if(!s)return e;const l=F.deepClone(e);if(t==="tag")return l.filter(o=>N(o.title,s));const d=ce(l,s);return Y(l,o=>d.indexOf(o.id)>-1)},Y=(e,t)=>e.filter(s=>(s.items&&s.items.length&&(s.items=Y(s.items,t)),t(s))),ce=(e,t)=>{const l=Z(e).filter(u=>N(u.title,t)).map(u=>u.id);let d=[];return l.forEach(u=>{const o=F.categoryTrail(u,e);d=d.concat(o)}),d},Z=e=>{let t=[];return e.forEach(s=>{t.push(s),Array.isArray(s.items)&&(t=t.concat(Z(s.items)))}),t},K=e=>{const t=Array.from((e==null?void 0:e.getElementsByTagName("A"))||[]).filter(s=>s.getAttribute("disabled")===null);return{anchors:t,focusedIndex:t.findIndex(s=>document.activeElement===s)}},le=e=>e?e.querySelector('[data-type="search"], input[type="search"]'):null,W=e=>{if(!e)return;const t=le(e);t&&t.focus()},ue=({filterPhrase:e,items:t,filterType:s,filterContainer:l,searchContainer:d,inputHasFocus:u})=>{const[o,S]=h.useState(t||[]),[C,$]=h.useState(null),A=r.useDispatch(),{activeFilterBadges:p,quickFilters:v}=r.useProperties(),E=typeof v=="object"&&!!v.autoSelect||typeof v=="boolean"&&!!v;h.useEffect(()=>{S(ae(t,s,e))},[e,s,t]),h.useEffect(()=>{var f;if(l){const{anchors:n}=K(l),g=(f=n[0])==null?void 0:f.getAttribute("data-id");g&&$(g)}},[o,l]);const y=h.useCallback((f,n)=>{let g=((p==null?void 0:p.tag)||[]).map(a=>a.id);n==="tag"&&f.id&&(g=g.includes(f.id)?g.filter(a=>a!==f.id):[...g,f.id]);const i={category:p!=null&&p.guideCategory?p.guideCategory.id:void 0,tagIds:g};n==="guideCategory"&&(i.category=f.id),A("quick-filter:add",i)},[p,A]),w=f=>f==="guideCategory"?{renderItem:(n,g)=>m.jsx(J,{autoSelect:E&&u&&n.id===C,disabled:!N(n.title,e),tabIndex:N(n.title,e)?0:-1,onKeyDown:i=>{i.key==="Enter"&&y(n,f)},"data-level":g,onClick:()=>{y(n,f)},"data-id":n.id,children:m.jsx(G,{title:n.title,phrase:e,matches:N(n.title,e)})})}:{renderLi:!0,renderItem:n=>m.jsx(J,{autoSelect:E&&u&&n.id===C,onKeyDown:g=>{g.key==="Enter"&&y(n,f)},onClick:()=>{y(n,f)},"data-id":n.id,children:m.jsx(G,{symbol:"#",title:n.title,phrase:e,matches:N(n.title,e)})})};return r.useEventListener("keydown",f=>{var I;const{key:n}=f;if(!l||!(n==="ArrowDown"||n==="ArrowUp"||n==="Enter"))return;const{anchors:g,focusedIndex:i}=K(l);if(n==="Enter"){if(u&&E){const x=(I=g[0])==null?void 0:I.getAttribute("data-id");x&&y({id:x},s)}return}const a=()=>{var x;return(x=g[0])==null?void 0:x.focus()},c=()=>{var x;return(x=g[g.length-1])==null?void 0:x.focus()},b=()=>{var x;return(x=g[i+1])==null?void 0:x.focus()},k=()=>{var x;return(x=g[i-1])==null?void 0:x.focus()};u?(f.preventDefault(),n==="ArrowDown"?a():c()):i>-1&&(f.preventDefault(),n==="ArrowDown"?g.length>i+1?b():W(d):i-1<0?W(d):k())},window),m.jsx(r.ItemTree,{tree:o,renderEmpty:!1,ulProps:{role:"listbox"},liProps:{role:"option"},...w(s)})},G=({title:e,phrase:t,matches:s,symbol:l=""})=>{const d=()=>{if(!s||!t)return[e];const C=e.toLowerCase().indexOf(t.toLowerCase()),$=e.substr(0,C),A=e.slice(C,C+t.length),p=e.substr(C+t.length);return[$,A,p]},[u,o,S]=d();return m.jsxs(r.Text,{children:[l,u,o?m.jsx("strong",{children:o}):null,S||null]})},de=T.css`
56
- opacity: 0.5;
57
- pointer-events: none;
58
- `,H=e=>{var t,s;return T.css`
59
- background-color: ${(t=e.theme.colors)==null?void 0:t.text};
60
- color: #ffffff;
61
- outline: none;
62
-
63
- span:first-child {
64
- border-color: ${(s=e.theme.colors)==null?void 0:s.text};
65
- }
66
- `},J=z(r.Link)`
67
- display: block;
68
- text-decoration: none;
69
- font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
70
-
71
- ${e=>e.disabled&&de}
72
- color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
73
- background-color: transparent;
74
-
75
- span {
76
- display: block;
77
- ${e=>{var t,s,l,d;return e["data-level"]?`padding: calc(${(t=e.theme.sizes)==null?void 0:t.normal} / 2) ${(s=e.theme.sizes)==null?void 0:s.normal};`:`padding: calc(${(l=e.theme.sizes)==null?void 0:l.normal} / 2) ${(d=e.theme.sizes)==null?void 0:d.medium}; `}}
78
- ${e=>e["data-level"]&&"border-left: 2px solid"}
79
- }
80
-
81
- span:first-child {
82
- border-color: #e7e7e7;
83
- }
84
-
85
- ${e=>{var t;return e["data-level"]&&`padding: 0 calc(${(t=e.theme.sizes)==null?void 0:t.medium} * ${e["data-level"]});`}}
86
-
87
- ${e=>e.autoSelect&&H}
88
-
89
- &:hover,
90
- &:focus {
91
- ${H}
92
- }
93
- `,fe=({phrase:e="",inputHasFocus:t,searchContainerRef:s})=>{const{quickFilter:l={open:!1,loading:!1,symbol:"",type:"",items:[]},activeFilterBadges:d,noMatchesLabel:u="No matching items"}=r.useProperties(),[o,S]=r.useScroll(!0),C=r.useContainer(),{events:$}=C.get("$widget"),A=h.useRef(),p=h.useCallback(i=>(i&&i.addEventListener("keydown",()=>{K(i).focusedIndex>-1&&$.subscribeOnce("router:changed",()=>{W(s)})},!0),A.current=i,i),[s]),{items:v=[],symbol:E,type:y,open:w,loading:f}=l,n=h.useMemo(()=>{const i=((d==null?void 0:d.tag)||[]).map(a=>a.id);return v.filter(a=>!i.includes(a.id))},[v,d]);if(!w||!E)return null;const g=e.slice(e.indexOf(E)+1);return m.jsxs(ge,{ref:p,"data-loading":f,className:F.appendClassNames("humany-quick-filter-dropdown",[y==="guideCategory","humany-quick-filter-guide-categories"],[y==="tag","humany-quick-filter-tags"]),children:[m.jsx(he,{className:"humany-quick-filter-dropdown-inner",css:o,ref:S,children:n.length>0?m.jsx(ue,{filterType:y,items:n,filterPhrase:g,filterContainer:S.current,searchContainer:s,inputHasFocus:t}):m.jsx(me,{children:u})}),m.jsx(r.Loader,{loading:f})]})},ge=z.div`
94
- ${e=>r.contentBox(e)};
95
- position: absolute;
96
- top: calc(100% + ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}});
97
- left: 0;
98
- right: 0;
99
- z-index: 1;
100
- overflow: hidden;
101
- `,he=z.div`
102
- max-height: 300px;
103
- overflow: auto;
104
- padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}} 0;
105
- ${e=>e.css}
106
- ul {
107
- list-style: none;
108
- padding: 0;
109
- margin: 0;
110
- }
111
- li div {
112
- ${e=>{var t;return`margin: ${(t=e.theme.sizes)==null?void 0:t.normal} 0;`}}
113
- }
114
- `,me=z.p`
115
- margin: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
116
- color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
117
- `,P=(e,t)=>{if(e&&!t||!e&&t)return!0;if(e&&t){if(!Array.isArray(e)&&!Array.isArray(t)){if(e.id!==t.id)return!0}else if(!((l,d)=>l.length===d.length?l.every((u,o)=>u===d[o]):!1)(e,t))return!0}return!1},pe=(e,t={},s=!0)=>{const l=r.useDispatch(),{quickFilters:d=!1,quickFilter:u={open:!1},activeFilterBadges:o,filterBadges:S=!1,incremental:C=600}=r.useProperties(),$=r.useDebounce(e,typeof C=="boolean"?600:C),A=r.usePrevious($),p=r.usePrevious(o),v=h.useRef(null),E=h.useCallback((n="")=>{var g;if(S){const i=P(o==null?void 0:o.guideCategory,p==null?void 0:p.guideCategory)||P(o==null?void 0:o.tag,p==null?void 0:p.tag);return l("search",{value:n,filtersChanged:i,filters:{tagIds:((o==null?void 0:o.tag)||[]).map(a=>a.id),guideCategoryId:((g=o==null?void 0:o.guideCategory)==null?void 0:g.id)||null}})}return l("search",{value:n})},[l,o]),y=h.useCallback(n=>{l("clear",{navigateToHome:n})},[l]),w=n=>d?n.replace(/([@#].*)/g,""):n,f=h.useCallback(n=>{if(u.open&&n.preventDefault){n.preventDefault();return}const g=document.activeElement,i=v.current&&typeof v.current.contains=="function"?v.current.contains(g):!1,a=w(e);typeof n=="boolean"&&n||a.length&&i||o!=null&&o.guideCategory||o!=null&&o.tag.length&&i?E(a):y(i)},[v,e,u,y,o,E]);return h.useEffect(()=>{const n=P(o==null?void 0:o.guideCategory,p==null?void 0:p.guideCategory)||P(o==null?void 0:o.tag,p==null?void 0:p.tag),g=$&&w($),i=A&&w(A);typeof i<"u"&&i!==g&&g!==t.phrase&&s&&!u.open&&f(n)},[$,u.open,o,f]),h.useEffect(()=>{if(e&&d){const n=typeof d=="boolean"&&!!d||typeof d=="object"&&!!d.guideCategory,g=typeof d=="boolean"&&!!d||typeof d=="object"&&!!d.tag;n&&e.indexOf("@")===e.length-1&&l("quick-filter:open",{type:"guideCategory",symbol:"@"}),g&&e.indexOf("#")===e.length-1&&l("quick-filter:open",{type:"tag",symbol:"#"})}u.open&&e.indexOf("@")===-1&&e.indexOf("#")===-1&&l("quick-filter:close")},[e]),[f,y,v]},ye=({className:e,...t})=>{const{showSearchButton:s,showClearButton:l,role:d="search",autoFocus:u,placeholder:o,searchButtonLabel:S,clearButtonLabel:C,ariaLabel:$,route:A="search",incremental:p=!0,showChildren:v=!1,quickFilter:E,quickFilters:y,filterBadges:w}=r.useProperties(),{params:f}=r.useRouteData(),[n,g]=h.useState(!1),[i,a]=h.useState(f.phrase||""),[c,b]=h.useState({guideCategory:!1,tag:!1}),k=r.useContainer(),I=r.useChildren(),x=r.useDispatch(),{position:D="inside"}=typeof w=="object"?w:{};h.useEffect(()=>{const{guideCategory:j,tag:q}=f,L=typeof w=="object"?!!w.guideCategory:!!w,se=typeof w=="object"?!!w.tag:!!w;b({guideCategory:L&&!!j,tag:se&&!!q})},[w,f]),r.useWidgetEvent("router:changed",()=>{if(E){const{open:j,symbol:q}=E;if(j){if(q){const L=i.replace(i.slice(i.indexOf(q)),"");a(L)}x("quick-filter:close")}}},[E,i,a,x]);const[M,O,B]=pe(i,f,!!p);h.useEffect(()=>{a(f.phrase||"")},[f.phrase]);const _=h.useCallback(j=>{a(j)},[a]),R=h.useCallback(()=>{x("quick-filter:close").then(()=>O(!0))},[x,O]),V=h.useCallback(()=>{var j,q;u&&!n&&((q=(j=B.current)==null?void 0:j.getElementsByTagName("input")[0])==null||q.focus())},[u,n,B]),ee=h.useCallback(()=>{k.getAsync("router").then(j=>{const q=j.getInitialRoute(),L=j.getRouteData();(q==null?void 0:q.name)===L.name&&(q==null?void 0:q.name)!==A?a(""):O(!0)})},[k,a,O]),U=j=>{if(j!==D)return null;if(c.guideCategory||c.tag)return m.jsx(re,{position:j,inputHasFocus:n,showGuideCategory:c.guideCategory,showTag:c.tag,searchContainerRef:B.current})};r.useTransitionEnd(V);const Q=l&&(c.guideCategory||c.tag||i),te=y?r.convertToStringAttributes({role:"combobox","aria-autocomplete":"list",autoComplete:"off","aria-haspopup":"listbox"}):{};return m.jsxs(be,{...t,ref:B,role:d,className:F.appendClassNames(e,"humany-search"),"data-has-phrase":!!i,"data-has-focus":n,"data-has-search-symbol":s?"true":"false",children:[m.jsxs(xe,{action:".",onSubmit:j=>{var q,L;j.preventDefault(),(L=(q=B.current)==null?void 0:q.getElementsByTagName("input")[0])==null||L.blur()},"data-has-focus":n,children:[s&&m.jsx(ke,{"aria-label":S,type:"submit",title:S,disabled:!i,onClick:M,"data-has-phrase":!!i,"data-has-focus":n,children:m.jsx(r.SymbolBadge,{size:32,symbol:{type:"Svg",content:"search"}})}),U("inside"),m.jsx(r.Input,{crossOrigin:void 0,type:"search","aria-label":$,...te,placeholder:c.guideCategory||c.tag?"":o,onFocusChange:g,onEscape:R,onEnter:M,onChange:_,value:i}),Q&&m.jsx(Ce,{"aria-label":C,type:"reset",hasFocus:n,title:C,onClick:ee,children:m.jsx(r.SymbolBadge,{size:27,symbol:{type:"Svg",content:"clear"}})}),v&&!Q&&I.map(j=>m.jsx(ne.Component,{id:j.id,branch:"default"},j.id)),m.jsx(fe,{inputHasFocus:n,phrase:i,searchContainerRef:B.current})]}),U("below")]})},be=z.div`
118
- ${r.contentBox};
119
- width: 100%;
120
- padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
121
-
122
- input {
123
- background-color: transparent;
124
- border: none;
125
- outline: none;
126
- min-width: 25%;
127
- flex: 1;
128
- font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
129
- font-weight: 300;
130
- font-style: italic;
131
- padding: 1em 0;
132
- color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
133
- -webkit-appearance: none;
134
-
135
- ${e=>{var t;return e["data-has-search-symbol"]==="true"&&`text-indent: ${(t=e.theme.sizes)==null?void 0:t.normal};`}}
136
-
137
- ::placeholder {
138
- color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
139
- }
140
- /* removes the 'X' from IE */
141
- &[type='search']::-ms-clear {
142
- display: none;
143
- width: 0;
144
- height: 0;
145
- }
146
- &[type='search']::-ms-reveal {
147
- display: none;
148
- width: 0;
149
- height: 0;
150
- }
151
-
152
- /* removes the 'X' from Chrome */
153
- &[type='search']::-webkit-search-decoration,
154
- &[type='search']::-webkit-search-cancel-button,
155
- &[type='search']::-webkit-search-results-button,
156
- &[type='search']::-webkit-search-results-decoration {
157
- display: none;
158
- }
159
-
160
- &:focus {
161
- outline: none;
162
- }
163
- }
164
-
165
- button {
166
- background: transparent;
167
- border: none;
168
- padding: 0;
169
- font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.large}};
170
- transition: color 200ms ease-out;
171
- color: ${e=>{var t;return e["data-has-focus"]||e["data-has-phrase"]?(t=e.theme.colors)==null?void 0:t.primary:"#000000"}};
172
- cursor: pointer;
173
- > svg {
174
- height: 100%;
175
- }
176
- }
177
- `,xe=z.form`
178
- display: flex;
179
- flex-wrap: nowrap;
180
- align-items: center;
181
- border: ${e=>e.theme.inputBorder};
182
- border-radius: ${e=>e.theme.borderRadius};
183
- background-color: #ffffff;
184
- position: relative;
185
- padding: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
186
-
187
- ${e=>{var t,s;return e["data-has-focus"]&&T.css`
188
- ${(t=e.theme.accessibility)!=null&&t.isTabbing?r.borderTabStyle(e):`
189
- border-color: ${(s=e.theme.colors)==null?void 0:s.primary};
190
- outline: none;
191
- input {
192
- outline: none;
193
- }
194
- `}
195
- `}};
196
- `,ke=z(r.Button)`
197
- padding: 0;
198
- height: 2em;
199
-
200
- svg {
201
- circle,
202
- line {
203
- stroke: ${e=>{var t;return e["data-has-focus"]?(t=e.theme.colors)==null?void 0:t.primary:"#000000"}};
204
- }
205
- }
206
- `,Ce=z(r.Button)`
207
- &:focus-visible svg {
208
- ${r.borderTabStyle}
209
- }
210
-
211
- svg {
212
- vertical-align: top;
213
-
214
- circle,
215
- line,
216
- path {
217
- stroke: ${e=>{var t,s;return e.hasFocus?(t=e.theme.colors)==null?void 0:t.primary:(s=e.theme.colors)==null?void 0:s.text}};
218
- }
219
- }
220
- `;exports.default=ye;