https://airfocus.com/84635b2d9e406617003332505a9728b8a06c6510-70534c1c6fa4c997e95f.js

1"use strict";(self.webpackChunkairfocus=self.webpackChunkairfocus||[]).push([[3189,3397,4346,7100],{5084:function(e,t,s){s.d(t,{x:function(){return x}});var r=s(8168),i=s(3769),n=s(5992),a=s(6540),o=s(196),l=s(2358),c=s(4678),u=s(4508),d=s(6541),m=s.n(d),p=s(4033),f=s(6460),h=s(2982);const g=e=>e.map(e=>({name:"string"==typeof e.name?{en:e.name}:e.name}));t.A=({currentItem:e,setCurrentItem:t,items:s,className:i,cssStyles:o})=>{var l;const[d,A]=a.useState(!1),[D,N]=a.useState(e),H=a.useRef(null),T=a.useRef(null),Y=a.useRef([]),S=a.useId(),z=a.useId(),C=a.useMemo(()=>(0,c.u)({items:g(s)}),[s]),{t:I}=C();(0,u.W)(H,()=>A(!1));const E=(0,f.ys)("templates",null===(l=s[e])||void 0===l?void 0:l.iconName);a.useEffect(()=>{var t;d&&(N(e),null===(t=Y.current[e])||void 0===t||t.focus())},[d]);const L=e=>{var s;t(e),A(!1),null===(s=T.current)||void 0===s||s.focus()};return(0,h.Y)("div",{className:`views-dropdown-container ${i}`,css:[v,o,"",""],ref:H},(0,h.Y)(p.$n,(0,r.A)({ref:T,type:"unstyled",id:z,className:"with-box-shadow",cssStyles:b},s.length>1&&{"aria-haspopup":"listbox","aria-expanded":d,"aria-controls":S},{onClick:s.length>1?()=>A(!d):void 0}),(0,h.Y)("div",{className:"subtitle"},E&&(0,h.Y)(f.Ay,{src:E,css:y})," ",(0,n.Ay)(I(`items.${e}.name`))),s.length>1&&(0,h.Y)(m(),{css:x(d)})),s.length>1&&d&&(0,h.Y)("ul",{role:"listbox",id:S,"aria-labelledby":z,className:"with-box-shadow",css:$,onKeyDown:e=>{if("ArrowDown"===e.key){var t;e.preventDefault();const r=Math.min(D+1,s.length-1);N(r),null===(t=Y.current[r])||void 0===t||t.focus()}else if("ArrowUp"===e.key){var r;e.preventDefault();const t=Math.max(D-1,0);N(t),null===(r=Y.current[t])||void 0===r||r.focus()}else if("Home"===e.key){var i;e.preventDefault(),N(0),null===(i=Y.current[0])||void 0===i||i.focus()}else if("End"===e.key){var n;e.preventDefault();const t=s.length-1;N(t),null===(n=Y.current[t])||void 0===n||n.focus()}else if("Escape"===e.key){var a;e.preventDefault(),A(!1),null===(a=T.current)||void 0===a||a.focus()}}},s.map(({iconName:t},s)=>{const r=(0,f.ys)("templates",t);return(0,h.Y)("li",{key:s,ref:e=>{Y.current[s]=e},role:"option",tabIndex:D===s?0:-1,"aria-selected":e===s,className:"subtitle "+(e!==s?"opacity-on-hover":""),css:[w,e===s&&k(t),"",""],onClick:()=>L(s),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),L(s))}},r&&(0,h.Y)(f.Ay,{src:r,css:y})," ",(0,n.Ay)(I(`items.${s}.name`)))})))};const v=i.AH`
2  position: relative;
3  box-sizing: border-box;
4  user-select: none;
5
6  .subtitle {
7    margin: 0;
8  }
9`,b=i.AH`
10  width: 100%;
11  padding: 0.5rem 1rem;
12  background: ${l.T.white};
13  border: 1px solid ${l.T.grayLight};
14  border-radius: 0.5rem;
15  display: flex;
16  column-gap: 0.5rem;
17  align-items: center;
18  justify-content: space-between;
19
20  .subtitle {
21    display: flex;
22    align-items: center;
23    gap: 0.5rem;
24  }
25
26  @media screen and (max-width: ${o.fi.small}px) {
27    box-sizing: border-box;
28    width: 100%;
29  }
30`,y=i.AH`
31  width: 12px;
32`,x=e=>i.AH`
33  transform: rotate(${e?"180deg":"0"});
34  transition: transform 0.3s ease;
35`,$=i.AH`
36  box-sizing: border-box;
37  position: absolute;
38  background: ${l.T.white};
39  top: 50px; // select field has height of 42px
40  border: 1px solid ${l.T.grayLight};
41  border-radius: 0.5rem;
42  width: 100%;
43  cursor: pointer;
44
45  z-index: 1;
46`,w=i.AH`
47  display: flex;
48  align-items: center;
49  padding: 0.5rem 1rem;
50
51  svg {
52    margin-right: 0.5rem;
53  }
54`,k=e=>i.AH`
55  color: ${l.T.bluePrimary};
56
57  ${"inbox_view_small"===e?`svg > path:nth-child(2) {\n    fill: ${l.T.bluePrimary};\n  }`:`svg > path:first-child {\n    fill: ${l.T.bluePrimary};\n  }`}
58`},7650:function(e,t,s){var r=s(3769),i=s(196),n=s(2358),a=s(2982);t.A=({className:e,color:t,size:s,isTop:o=!0,isBottom:l=!0,fullScreenWidth:c=!1,notDecreased:u=!1,cssStyles:d})=>(0,a.Y)("div",{className:`${c?"full-screen-relative":void 0} ${e}`,css:[r.AH`
59          width: 100%;
60          height: 1px;
61          background: ${t||n.T.grayLight};
62          display: block;
63          position: relative;
64          ${o&&`margin-top: ${s}rem;`}
65          ${l&&`margin-bottom: ${s}rem;`}
66        @media screen and (max-width: ${i.fi.medium}px) {
67            ${o&&!u&&`margin-top: calc(${s}rem/2);`}
68            ${l&&!u&&`margin-bottom: calc(${s}rem/2);`}
69          }
70        `,d,"",""]})}}]);
71//# sourceMappingURL=84635b2d9e406617003332505a9728b8a06c6510-70534c1c6fa4c997e95f.js.map