1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[10856],{46662:(e,i,t)=>{t.d(i,{a:()=>h});var o=t(63762),a=t(743),n=t(19962),s=t(80821),d=t(7771),l=(0,n.b)` 2 :host { 3 display: block; 4 min-width: 0; 5 background-color: var(--flipbook-tab-background); 6 overflow: hidden; 7 } 8 9 :host .gds-dotcom-flipbook-item { 10 border-bottom: var(--spacing-1) solid var(--flipbook-tab-border-color); 11 } 12 13 :host(:first-of-type) { 14 border-radius: var(--radius-sm) var(--radius-sm) 0 0; 15 } 16 :host(:last-of-type) { 17 border-radius: 0 0 var(--radius-sm) var(--radius-sm); 18 } 19 :host(:last-of-type) .gds-dotcom-flipbook-item { 20 border-bottom: none; 21 } 22 23 @media screen and (min-width: 768px) { 24 :host(:first-of-type) { 25 border-radius: var(--radius-sm) 0 0 var(--radius-sm); 26 } 27 :host(:last-of-type) { 28 border-radius: 0 var(--radius-sm) var(--radius-sm) 0; 29 } 30 } 31 32 :host([expanded]) { 33 background-color: var(--flipbook-tab-background-active); 34 } 35 36 .gds-dotcom-flipbook-item { 37 box-sizing: border-box; 38 display: flex; 39 flex-direction: column; 40 font: inherit; 41 overflow: hidden; 42 width: 100%; 43 } 44 45 @media screen and (min-width: 768px) { 46 :host { 47 align-self: stretch; 48 display: flex; 49 flex-grow: 0; 50 flex-shrink: 0; 51 flex-basis: var(--spacing-64); 52 height: var(--flipbook-tab-height); 53 max-height: var(--flipbook-tab-height); 54 min-height: var(--flipbook-tab-height); 55 min-width: 0; 56 position: relative; 57 transition: var(--flipbook-panel-transition); 58 z-index: 1; 59 } 60 :host .gds-dotcom-flipbook-item { 61 border-bottom: none; 62 border-right: var(--spacing-1) solid var(--flipbook-tab-border-color); 63 } 64 65 :host([expanded]) { 66 flex-basis: calc(100cqi - var(--flipbook-collapsed-tabs-width)); 67 z-index: 0; 68 } 69 70 :host(:not([expanded])) { 71 z-index: 2; 72 } 73 74 :host([disable-animations]) { 75 transition: none; 76 } 77 78 :host([expanded]) .gds-dotcom-flipbook-item__panel { 79 pointer-events: auto; 80 } 81 :host(:last-of-type) .gds-dotcom-flipbook-item { 82 border-right: none; 83 } 84 85 .gds-dotcom-flipbook-item { 86 flex-direction: row; 87 flex: 1 1 auto; 88 height: 100%; 89 max-height: 100%; 90 min-height: 0; 91 width: 100%; 92 } 93 } 94 95 .gds-dotcom-flipbook-item__trigger {
96 align-items: center; 97 background: transparent; 98 border: none; 99 color: var(--flipbook-tab-color); 100 cursor: pointer; 101 display: flex; 102 font-family: inherit; 103 font-size: inherit; 104 font-weight: inherit; 105 font-style: inherit; 106 line-height: inherit; 107 gap: var(--spacing-ms); 108 padding: var(--spacing-m); 109 text-align: left; 110 width: 100%; 111 transition: var(--transition-colors); 112 } 113 114 :host([expanded]) .gds-dotcom-flipbook-item__trigger { 115 background-color: var(--flipbook-tab-side-trigger-background); 116 color: var(--flipbook-tab-side-trigger-text-color); 117 } 118 119 @media screen and (min-width: 768px) { 120 .gds-dotcom-flipbook-item__trigger { 121 flex: 0 0 var(--spacing-64); 122 flex-direction: column; 123 height: 100%; 124 justify-content: flex-start; 125 max-height: 100%; 126 min-height: 0; 127 padding: var(--spacing-m) var(--spacing-8); 128 position: relative; 129 transition: var(--transition-colors); 130 width: var(--spacing-64); 131 z-index: 1; 132 } 133 134 .gds-dotcom-flipbook-item__trigger:hover { 135 background-color: var(--flipbook-tab-side-trigger-hover-background); 136 color: var(--flipbook-tab-side-trigger-hover-text-color); 137 } 138 } 139 140 .gds-dotcom-flipbook-item__step { 141 font-size: var(--text-hd-xxs); 142 font-weight: var(--font-weight-semibold); 143 line-height: var(--line-height-normal); 144 white-space: nowrap; 145 } 146 147 .gds-dotcom-flipbook-item__title { 148 font-size: var(--text-hd-xxs); 149 font-weight: var(--font-weight-semibold); 150 line-height: var(--line-height-normal); 151 } 152 153 @media screen and (min-width: 768px) { 154 .gds-dotcom-flipbook-item__title { 155 border-width: 0; 156 clip-path: inset(50%); 157 height: 1px; 158 margin: -1px; 159 overflow: hidden; 160 padding: 0; 161 position: absolute; 162 white-space: nowrap; 163 width: 1px; 164 } 165 } 166 167 .gds-dotcom-flipbook-item__chevron { 168 margin-left: auto; 169 } 170 171 @media screen and (min-width: 768px) { 172 .gds-dotcom-flipbook-item__chevron { 173 display: none; 174 } 175 } 176 177 .gds-dotcom-flipbook-item__panel { 178 overflow: hidden; 179 } 180 181 @media screen and (min-width: 768px) { 182 .gds-dotcom-flipbook-item__panel { 183 display: flex; 184 flex: 1 1 auto; 185 flex-direction: column; 186 height: 100%; 187 max-height: 100%; 188 min-height: 0; 189 min-width: 0; 190 overflow: hidden; 191 pointer-events: none; 192 position: relative; 193 } 194 } 195 196 .gds-dotcom-flipbook-item__panel-overflow { 197 min-height: 0; 198 overflow: hidden; 199 } 200 201 @media screen and (min-width: 768px) { 202 .gds-dotcom-flipbook-item__panel-overflow { 203 height: 100%; 204 max-height: 100%; 205 overflow: hidden; 206 position: relative; 207 width: 100%; 208 } 209 } 210 211 .gds-dotcom-flipbook-item__panel-inner { 212 display: flex; 213 flex-direction: column; 214 gap: var(--spacing-l); 215 padding: var(--spacing-l); 216 } 217 218 @media screen and (min-width: 768px) { 219 .gds-dotcom-flipbook-item__panel-inner { 220 box-sizing: border-box; 221 display: grid; 222 grid-template-columns: 1fr 1fr; 223 align-items: stretch; 224 gap: var(--spacing-xl); 225 height: 100%; 226 left: 0; 227 max-height: 100%; 228 min-height: 0; 229 padding: var(--spacing-xl); 230 position: absolute; 231 top: 0; 232 width: var(--flipbook-expanded-panel-inner-width); 233 } 234 } 235 236 .gds-dotcom-flipbook-item__content { 237 display: flex; 238 flex-direction: column; 239 gap: var(--spacing-s); 240 order: 2; 241 } 242 243 @media screen and (min-width: 768px) { 244 .gds-dotcom-flipbook-item__content { 245 justify-content: center; 246 min-height: 0; 247 min-width: 0; 248 order: 1; 249 } 250 } 251 252 .gds-dotcom-flipbook-item__eyebrow { 253 color: var(--flipbook-eyebrow-color); 254 font-size: var(--text-ui-md); 255 font-weight: var(--font-weight-bold); 256 line-height: var(--line-height-normal); 257 margin: 0; 258 text-transform: uppercase; 259 } 260 261 .gds-dotcom-flipbook-item__headline { 262 font-size: var(--text-hd-md); 263 font-weight: var(--font-weight-med) !important; 264 line-height: var(--line-height-tight); 265 margin: 0; 266 color: var(--flipbook-tab-color); 267 } 268 269 .gds-dotcom-flipbook-item__description { 270 font-size: var(--text-body-regular); 271 line-height: var(--line-height-relaxed); 272 margin: 0; 273 color: var(--flipbook-tab-color); 274 } 275 276 .gds-dotcom-flipbook-item__disclaimer { 277 font-size: var(--text-body-xxs); 278 line-height: var(--line-height-relaxed); 279 margin: 0; 280 color: var(--flipbook-tab-color); 281 } 282 283 .gds-dotcom-flipbook-item__media { 284 order: 1; 285 overflow: hidden; 286 width: 100%; 287 display: flex; 288 justify-content: center;
289 align-items: center; 290 height: 100%; 291 } 292 293 @media screen and (min-width: 768px) { 294 .gds-dotcom-flipbook-item__media { 295 min-height: 0; 296 min-width: 0; 297 order: 2; 298 } 299 } 300 301 .gds-dotcom-flipbook-item__media ::slotted(img) { 302 display: block; 303 height: 100% !important; 304 width: auto; 305 max-height: var(--flipbook-expanded-panel-image-height); 306 padding: var(--spacing-m); 307 } 308 309 @media screen and (min-width: 768px) { 310 .gds-dotcom-flipbook-item__media ::slotted(img) { 311 height: 100%; 312 max-height: 100%; 313 min-height: 0; 314 object-fit: cover; 315 padding: 0; 316 } 317 } 318`,r="power2.inOut",h=class extends n.f{constructor(){super(...arguments),this.index=0,this.expanded=!1,this.layout="mobile",this.disableAnimations=!1,this._hasDisclaimerSlot=!1,this._isReadyForAnimation=!1,this._handleTriggerClick=()=>{this.dispatchEvent(new CustomEvent("flipbook-item-activate",{detail:{index:this.index},...o.a}))}}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{this._isReadyForAnimation=!0})})})}disconnectedCallback(){this._stopMobileAnimations(!0),super.disconnectedCallback()}firstUpdated(){"mobile"===this.layout&&this._applyMobilePanelStateInstant(),this._syncDisclaimerSlotFromDom()}_syncDisclaimerSlotFromDom(){let e=this.shadowRoot?.querySelector('slot[name="disclaimer"]');e&&this._updateHasDisclaimerSlot(e)}_updateHasDisclaimerSlot(e){let i=e.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE||e.nodeType===Node.TEXT_NODE&&e.textContent?.trim()!=="");this._hasDisclaimerSlot!==i&&(this._hasDisclaimerSlot=i)}_handleDisclaimerSlotChange(e){this._updateHasDisclaimerSlot(e.target)}updated(e){if(super.updated(e),"desktop"===this.layout){e.has("layout")&&this._stopMobileAnimations(!0);return}if(e.has("expanded")||e.has("layout")||e.has("disableAnimations")){if(this._isReadyForAnimation&&e.has("expanded")&&!this.disableAnimations){this._stopMobileAnimations(!1),this._runMobilePanelAnimation();return}this._applyMobilePanelStateInstant()}}_stopMobileAnimations(e){let i=this._panelTween;if(i?.kill(),this._panelTween=void 0,i&&this._panel){let e=this._panel;t.e(99110).then(t.bind(t,99110)).then(({gsap:i})=>{i.killTweensOf(e)})}if(!e||!this._panel)return;let o=this._panel;o.hidden=!1,o.style.removeProperty("height"),o.style.removeProperty("overflow")}_applyMobilePanelStateInstant(){let e=this._panel;e&&(this._stopMobileAnimations(!0),this.expanded?(e.hidden=!1,e.style.height="auto",e.style.removeProperty("overflow")):(e.style.height="0px",e.style.overflow="hidden",e.hidden=!0))}_measurePanelHeight(e){e.hidden=!1,e.style.overflow="hidden",e.style.height="auto";let i=e.scrollHeight;return e.style.height="0px",i}_runMobilePanelAnimation(){let e=this._panel;e&&t.e(99110).then(t.bind(t,99110)).then(({gsap:i})=>{if(i.killTweensOf(e),this.expanded){let t=this._measurePanelHeight(e),o=t=>{this._panelTween=i.to(e,{height:t,duration:.35,ease:r,overwrite:"auto",onComplete:()=>{e.style.height="auto",e.style.removeProperty("overflow")}})};return t<=0?void requestAnimationFrame(()=>{o(this._measurePanelHeight(e))}):void o(t)}e.hidden=!1,e.style.overflow="hidden",e.style.height=`${e.scrollHeight}px`,requestAnimationFrame(()=>{this._panelTween=i.to(e,{height:0,duration:.35,ease:r,overwrite:"auto",onComplete:()=>{e.hidden=!0,e.style.removeProperty("height"),e.style.removeProperty("overflow")}})})})}_formatStep(){return String(this.index+1).padStart(2,"0")}render(){let e=`gds-dotcom-flipbook-trigger-${this.index}`,i=`gds-dotcom-flipbook-panel-${this.index}`;return(0,n.c)` 319 <article class="gds-dotcom-flipbook-item"> 320 <button 321 type="button" 322 class="gds-dotcom-flipbook-item__trigger" 323 id=${e} 324 aria-expanded=${this.expanded?"true":"false"} 325 aria-controls=${i} 326 @click=${this._handleTriggerClick} 327 > 328 <span class="gds-dotcom-flipbook-item__step" 329 >${this._formatStep()}</span 330 > 331 <span class="gds-dotcom-flipbook-item__title"> 332 <slot name="title"></slot> 333 </span> 334 <gds-dotcom-icon 335 class="gds-dotcom-flipbook-item__chevron" 336 icon-name=${this.expanded?"chevron-up":"chevron-down"} 337 size="medium" 338 aria-hidden="true" 339 ></gds-dotcom-icon> 340 </button> 341 <div 342 id=${i} 343 class="gds-dotcom-flipbook-item__panel" 344 role="region"
345 aria-hidden=${this.expanded?"false":"true"} 346 aria-labelledby=${e} 347 > 348 <div class="gds-dotcom-flipbook-item__panel-overflow"> 349 <div class="gds-dotcom-flipbook-item__panel-inner"> 350 <div class="gds-dotcom-flipbook-item__content"> 351 <p class="gds-dotcom-flipbook-item__eyebrow"> 352 <slot name="eyebrow"></slot> 353 </p> 354 <h3 class="gds-dotcom-flipbook-item__headline"> 355 <slot name="headline"></slot> 356 </h3> 357 <p class="gds-dotcom-flipbook-item__description"> 358 <slot name="description"></slot> 359 </p> 360 ${this._hasDisclaimerSlot?(0,n.c)`<p class="gds-dotcom-flipbook-item__disclaimer"> 361 <slot 362 name="disclaimer" 363 @slotchange=${this._handleDisclaimerSlotChange} 364 ></slot> 365 </p>`:(0,n.c)`<slot 366 name="disclaimer" 367 @slotchange=${this._handleDisclaimerSlotChange} 368 ></slot>`} 369 </div> 370 <div class="gds-dotcom-flipbook-item__media"> 371 <slot name="image"></slot> 372 </div> 373 </div> 374 </div> 375 </div> 376 </article> 377 `}};h.styles=l,(0,d.a)([(0,a.a)({type:Number,reflect:!0})],h.prototype,"index",2),(0,d.a)([(0,a.a)({type:Boolean,reflect:!0})],h.prototype,"expanded",2),(0,d.a)([(0,a.a)({type:String,reflect:!0})],h.prototype,"layout",2),(0,d.a)([(0,a.a)({type:Boolean,attribute:"disable-animations",reflect:!0})],h.prototype,"disableAnimations",2),(0,d.a)([(0,a.c)(".gds-dotcom-flipbook-item__panel")],h.prototype,"_panel",2),(0,d.a)([(0,a.b)()],h.prototype,"_hasDisclaimerSlot",2),h=(0,d.a)([(0,s.a)("gds-dotcom-flipbook-item")],h)},63762:(e,i,t)=>{t.d(i,{a:()=>o});var o={bubbles:!0,cancelable:!1,composed:!0}},99750:(e,i,t)=>{t.r(i),t.d(i,{GdsDotcomFlipbookItem:()=>o.a});var o=t(46662);t(63762),t(59553),t(93432),t(743),t(19962),t(7771)}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.