https://airfocus.com/4536ca43fd27b54b0b53b5cd34c525eb868cac85-82dcca220ddfb272c7b2.js

1"use strict";(self.webpackChunkairfocus=self.webpackChunkairfocus||[]).push([[8099],{4643:function(e,t,i){i.d(t,{BM:function(){return b},tm:function(){return A}});var a=i(3769),r=i(5992),s=i(6540),n=i(196),o=i(2358),l=i(665),c=i(9988),d=i(6541),m=i.n(d),p=i(4033),u=i(6065),g=i(6994),h=i(2061),f=i(2982);t.Ay=({heading:e,subtitle:t,tableData:i,cssStyles:a})=>{const[o,l]=s.useState(!1),[d,T]=s.useState(0),H=s.useRef(null);s.useEffect(()=>{var e;H.current&&T(null===(e=H.current)||void 0===e?void 0:e.scrollHeight)},[]);return(0,f.Y)(s.Fragment,null,(0,f.Y)("h2",{className:"heading2 center"},e||`How airfocus and ${i.competitorName} compare`),t&&(0,f.Y)("div",{className:"subtitle center"},t),(0,f.Y)("div",null,(0,f.Y)(u.A,{className:o?"full-screen-sticky":"",columns:3,columnsTemplate:"4fr 1fr 1fr",cssStyles:[$,x(o)]},(0,f.Y)("div",null),(0,f.Y)("div",{className:"subtitle center no-margin"},(0,c.Fr)(n.fi.small)?(0,f.Y)("div",{className:"center",css:v},(0,f.Y)(g.A,{src:"airfocus-logos/airfocus-icon.webp",alt:"airfocus vertical logo"})):"airfocus"),(0,f.Y)("div",{className:"subtitle center no-margin",css:w},(0,c.Fr)(n.fi.small)?(0,f.Y)("div",{className:"center",css:v},(0,f.Y)(g.A,{src:`competitors/logos/${i.competitorLogoSrc}`,alt:"competitor logo"})):i.competitorName)),(0,f.Y)("div",{ref:H,css:[b(o,d),a,"",""]},i.competitorTable.map(({category:e,bulletPoint:t,airfocusCross:a,competitorCheckmark:s},o)=>(0,f.Y)(u.A,{key:`${i.competitorName}-competitor-table-bulletPoint-${o}`,className:(0,c.Fr)(n.fi.small)?"full-screen-relative":void 0,columns:3,columnsTemplate:"4fr 1fr 1fr",cssStyles:[$,Y(!!e,!!e&&0===o)]},e&&(0,f.Y)("h3",{className:"heading3"},(0,r.Ay)(e)),t&&(0,f.Y)("div",{className:"subtitle"},(0,r.Ay)(t)),(0,f.Y)("div",{css:[y(!!e,o),o===i.competitorTable.length-1&&k,"",""]},!e&&(0,f.Y)(h.A,{type:a?"cross":"checkmark",className:"center"})),(0,f.Y)("div",null,!e&&(0,f.Y)(h.A,{type:s?"checkmark":"cross",className:"center"})))),(0,f.Y)("div",{css:A(o)}),!o&&(0,f.Y)(p.$n,{onClick:()=>l(!0),cssStyles:N(o),"aria-label":"Expand comparison table","aria-expanded":o},"Expand ",(0,f.Y)(m(),null)))),o&&(0,f.Y)(p.$n,{onClick:()=>(l(!1),void(H.current&&window.scrollTo({top:window.scrollY+H.current.getBoundingClientRect().top-160,behavior:"smooth"}))),cssStyles:N(o),"aria-label":"Collapse comparison table","aria-expanded":o},"Collapse ",(0,f.Y)(m(),null)))};const b=(e,t)=>a.AH`
2  margin-top: -0.75rem;
3  position: relative;
4  height: ${e?`${t}px`:`min(50vh, ${t/2}px)`};
5  transition: height 0.75s ease-in-out;
6  overflow: ${e?"visible":"hidden"};
7
8  .subtitle {
9    margin: 0;
10  }
11
12  @media screen and (max-width: ${n.fi.small}px) {
13    height: ${e?`${t}px`:`min(60vh, ${t/2}px)`};
14  }
15`,$=a.AH`
16  gap: 0 !important;
17
18  @media screen and (max-width: ${n.fi.medium}px) {
19    grid-template-columns: 3fr 1fr 1fr;
20  }
21
22  @media screen and (max-width: ${n.fi.small}px) {
23    position: relative;
24    grid-template-columns: 2.5fr 1fr 1fr;
25  }
26`,x=e=>a.AH`
27  margin-bottom: 0.75rem;
28  border-bottom: 1px solid ${o.T.grayLight};
29  box-shadow: 0 1px ${o.T.grayLight};
30  background: ${o.T.white};
31  z-index: 2;
32
33  ${e&&`position: sticky; top: ${l.MJ.DESKTOP}px;`};
34
35  @media screen and (max-width: ${n.fq}px) {
36    ${e&&`top: ${l.MJ.MOBILE}px;`};
37  }
38
39  .subtitle {
40    width: 100%;
41  }
42
43  // airfocus column
44  .subtitle:nth-child(2) {
45    background: #eefaff;
46    border-radius: 0.5rem 0.5rem 0 0;
47    height: 100%;
48    display: flex;
49    align-items: center;
50    justify-content: center;
51  }
52
53  // competitor column
54  .subtitle:nth-child(3) {
55    padding: 1.5rem 0;
56    border-radius: 0.5rem 0.5rem 0 0;
57  }
58
59  @media screen and (max-width: ${n.fi.medium}px) {
60    .subtitle {
61      height: -webkit-fill-available;
62    }
63  }
64`,v=a.AH`
65  width: 2rem;
66`,w=a.AH`
67  padding: 0 0.5rem;
68`,Y=(e,t)=>a.AH`
69  ${!e&&`border-top: 1px solid ${o.T.grayLight}`};
70
71  .heading3 {
72    padding: ${t?"1.5rem":"2rem"} 25% 1rem 1rem;
73
74    @media screen and (max-width: ${n.fi.large}px) {
75      padding-right: 15%;
76    }
77
78    @media screen and (max-width: ${n.fi.medium}px) {
79      padding-left: 0;
80      padding-right: 5%;
81    }
82  }
83
84  .subtitle {
85    padding: 1rem 25% 1rem 1rem;
86
87    @media screen and (max-width: ${n.fi.large}px) {
88      padding-right: 15%;
89    }
90
91    @media screen and (max-width: ${n.fi.medium}px) {
92      padding-left: 0;
93      padding-right: 5%;
94    }
95  }
96
97  // SignIcon columns
98  div:not(:first-child) {
99    display: flex;
100    align-items: center;
101    width: 100%;
102    height: 100%;
103  }
104
105  ${!e&&`&:hover { background: ${o.T.grayVeryLight}; }`};
106`,y=(e,t)=>a.AH`
107  background: #ade6ff38;
108  // add an outline only on top:
109  ${!e&&0!==t&&`box-shadow: 0 -1px 0 ${o.T.white}`};
110`,k=a.AH`
111  border-radius: 0 0 0.5rem 0.5rem;
112`,A=e=>a.AH`
113  position: absolute;
114  background: linear-gradient(180deg, rgba(255, 255, 255, 0), ${o.T.white} 75%);
115  bottom: 0;
116  width: 100%;
117  height: max(30%, 12rem);
118
119  ${e&&"display: none"};
120`,N=e=>a.AH`
121  position: ${e?"relative":"absolute"};
122  left: 50%;
123  bottom: 0;
124  transition: transform 0.75s ease-in-out;

125  transform: translate(-50%, ${e?"100%":"0"});
126
127  svg {
128    transform: translate(5px, ${e?"-2px":"-1px"}) ${e&&"rotate(180deg)"};
129
130    g > path {
131      stroke: ${o.T.white};
132    }
133  }
134`}}]);
135//# sourceMappingURL=4536ca43fd27b54b0b53b5cd34c525eb868cac85-82dcca220ddfb272c7b2.js.map