1import{B as m,s as x,C as _,z as v,g as b,h as j,D as y,d as $,M as k,E as I,e as S,t as z,o as l,G as r,j as n,H as p,k as h,n as c,r as g,l as L,i as E}from"./app.js";const C=[j` 2 .app-promoter-wrapper { 3 background-color: var(--oj2_bg_defaultSubtle); 4 padding: var(--oj2_sizing_md) var(--oj2_spacing_xl); 5 } 6 7 .app-promoter-wrapper.no-download-app { 8 padding-bottom: 0; 9 } 10 11 .feature-slide-list { 12 display: grid; 13 grid-template-columns: var(--oj2_sizing_lg) 1fr var(--oj2_sizing_lg); 14 grid-template-areas: 15 'dots dots dots' 16 'title title title' 17 'left slider right' 18 'body body body'; 19 20 overflow: hidden; 21 max-width: 768px; 22 margin: 0 auto; 23 } 24 25 .app-preview { 26 grid-area: slider; 27 margin: auto; 28 width: 100%; 29 box-sizing: border-box; 30 max-width: 230px; 31 border: 8px solid var(--oj2_fg_default); 32 border-top-left-radius: 40px; 33 border-top-right-radius: 40px; 34 border-bottom: none; 35 box-shadow: 8px 8px 24px 0px #00000029; 36 overflow: hidden; 37 height: 288px; 38 z-index: 1; 39 } 40 41 .app-preview img { 42 object-fit: cover; 43 object-position: top; 44 height: 100%; 45 width: 100%; 46 border-top-left-radius: 32px; 47 border-top-right-radius: 32px; 48 user-select: none; 49 } 50 51 .title { 52 grid-area: title; 53 grid-column: 2; 54 display: grid; 55 justify-content: center; 56 margin: var(--oj2_spacing_xl) 0; 57 ${x()} 58 text-align: center; 59 } 60 61 .body { 62 grid-area: body; 63 padding-bottom: var(--oj2_sizing_sm); 64 z-index: 2; 65 } 66 67 .body p { 68 padding: var(--oj2_spacing_xl) 0; 69 margin: 0; 70 color: var(--oj2_fg_subtle); 71 ${_()} 72 } 73 74 .sr-only, 75 .sr-only:focus { 76 width: 1px; 77 height: 1px; 78 clip: rect(0, 0, 0, 0); 79 border: 0; 80 margin: 0; 81 padding: 0; 82 outline: 0; 83 overflow: hidden; 84 position: absolute; 85 color: transparent; 86 background-color: transparent; 87 } 88 89 .nav-arrow { 90 border: none; 91 outline: none; 92 cursor: pointer; 93 height: var(--oj2_sizing_lg); 94 width: var(--oj2_sizing_lg); 95 border-radius: var(--oj2_spacing_xs); 96 z-index: 3; 97 align-self: center; 98 } 99 100 .nav-arrow-left { 101 grid-area: left; 102 } 103 104 .nav-arrow-right { 105 grid-area: right; 106 justify-self: end; 107 } 108 109 .nav-arrow ing-icon { 110 width: var(--oj2_sizing_md); 111 height: var(--oj2_sizing_md); 112 } 113 114 .nav-dots-wrapper { 115 display: flex; 116 justify-content: center; 117 gap: var(--oj2_spacing_xs); 118 grid-area: dots; 119 } 120 121 .nav-dot { 122 background: transparent; 123 outline: 0; 124 border-radius: var(--oj2_spacing_xs); 125 border: 0; 126 padding: 0; 127 margin: 0; 128 text-align: center; 129 cursor: pointer; 130 line-height: 0; 131 width: var(--oj2_sizing_sm); 132 height: var(--oj2_sizing_sm); 133 } 134 135 .nav-dot:hover { 136 border: 1px solid var(--oj2_borderColor_default); 137 } 138 139 .nav-dot:focus, 140 .nav-dot:active { 141 ${v()}; 142 } 143 144 .nav-dot > span { 145 position: relative; 146 display: inline-block; 147 border-radius: var(--oj2_sizing_lg); 148 border: 1px solid var(--oj2_borderColor_default); 149 height: var(--oj2_spacing_md); 150 width: var(--oj2_spacing_md); 151 } 152 153 .nav-dot-active { 154 pointer-events: none; 155 } 156 157 .nav-dot-active > span { 158 border-radius: var(--oj2_sizing_lg); 159 border: solid var(--oj2_borderWidth_sm) var(--oj2_borderColor_primary); 160 background-color: var(--oj2_bg_primary); 161 } 162 163 .nav-arrow:focus, 164 .download-app a:focus-visible { 165 outline: none; 166 ${v()}; 167 } 168 169 .download-app-wrapper { 170 display: flex; 171 flex-direction: column; 172 justify-content: space-between; 173 background-color: var(--oj2_bg_default); 174 border-radius: var(--oj2_spacing_xl); 175 } 176 177 .download-app { 178 display: flex; 179 flex-grow: 1; 180 padding: var(--oj2_sizing_sm) var(--oj2_spacing_xl); 181 justify-content: center; 182 } 183 184 .download-app a { 185 width: fit-content; 186 } 187 188 .download-app a:focus-visible { 189 padding: var(--oj2_spacing_xs); 190 } 191 192 .download-app .qr-code-wrapper { 193 border-radius: var(--oj2_spacing_md); 194 padding: var(--oj2_spacing_xs); 195 background: var(--oj2_fg_onColor); 196 } 197 198 .download-app .qr-code-wrapper img { 199 width: 80px; 200 height: 80px; 201 display: block; 202 } 203 204 .download-app .content { 205 padding: 0; 206 display: flex; 207 gap: var(--oj2_spacing_xl); 208 flex-direction: column; 209 align-items: center; 210 } 211 212 .download-app .content h3 { 213 margin: 0; 214 ${b()}; 215 } 216 217 .download-app .content img { 218 width: 120px; 219 height: var(--oj2_sizing_lg); 220 align-self: center; 221 border-radius: 6px; 222 display: block; 223 } 224 225 .download-app .content a:hover img { 226 box-shadow: 0 2px 6px 0 #0000003d; 227 } 228 229 .qr-code-wrapper { 230 display: none; 231 } 232 233 .one-cms-image { 234 user-select: none; 235 } 236 237 .nav-arrow[aria-disabled='true'], 238 .nav-arrow[aria-disabled='true']:hover, 239 .nav-arrow[aria-disabled='true']:active, 240 .nav-arrow[aria-disabled='true']:focus-visible, 241 .nav-arrow[aria-disabled='true']:focus { 242 color: var(--oj2_fg_disabled); 243 fill: var(--oj2_fg_disabled); 244 box-shadow: none; 245 outline: 0; 246 background-color: transparent; 247 } 248 249 @media (min-width: 1024px) { 250 .feature-slide-list { 251 display: grid; 252 grid-template-columns: var(--oj2_sizing_lg) minmax(auto, 17rem) 1fr var(--oj2_sizing_xl); 253 grid-template-areas: 254 '. slider . .' 255 '. slider dots .' 256 'left slider title right' 257 'left slider body right' 258 '. slider body .' 259 '. slider . .'; 260 } 261
262 .title { 263 grid-column: unset; 264 display: unset; 265 text-align: unset; 266 } 267 268 .body { 269 z-index: unset; 270 } 271 272 .body p { 273 padding-top: 0; 274 } 275 276 .app-preview { 277 height: 392px; 278 } 279 280 .nav-dots-wrapper { 281 justify-content: flex-start; 282 } 283 284 .nav-arrow { 285 align-self: end; 286 } 287 288 .download-app-wrapper { 289 flex-direction: row; 290 } 291 292 .download-app, 293 .download-app .content { 294 flex-direction: column; 295 } 296 297 .download-app .content { 298 gap: var(--oj2_spacing_md); 299 align-items: unset; 300 flex-grow: 1; 301 text-align: unset; 302 } 303 304 .download-app-wrapper.no-android .download-app, 305 .download-app-wrapper.no-ios .download-app { 306 flex-direction: row; 307 gap: var(--oj2_spacing_xl); 308 } 309 .download-app-wrapper.no-android .content, 310 .download-app-wrapper.no-ios .content { 311 flex-direction: row; 312 flex-grow: 1; 313 justify-content: space-between; 314 align-items: center; 315 } 316 317 .qr-code-wrapper { 318 display: unset; 319 } 320 } 321 322 @media (min-width: ${m}px) { 323 .download-app { 324 justify-content: space-between; 325 gap: var(--oj2_spacing_xl); 326 width: 50%; 327 flex-direction: row; 328 } 329 330 .download-app .content { 331 flex-direction: column; 332 gap: var(--oj2_spacing_md); 333 justify-content: unset; 334 } 335 336 .download-app .content img { 337 align-self: unset; 338 } 339 340 .download-app-wrapper.no-android .content, 341 .download-app-wrapper.no-ios .content { 342 flex-direction: unset; 343 } 344 } 345 `],d=y("ing-feat-flexible-page-component-app-promotor",a=>{switch(a){case"fr-BE":return import("./chunk-Dj5EUrxq.js").then(function(e){return e.x});case"nl-BE":return import("./chunk-CVTgbZnB.js").then(function(e){return e.x});case"nl-NL":return import("./node_modules/ing-feat-global-flexible-page/src/components/flex/app-promoter/translations/nl-NL.js");case"en-GB":default:return import("./chunk-BLIVNh4l.js").then(function(e){return e.x})}}),A={width:200,height:200},P={width:160,height:50},D={width:320,height:545},w=(a,e,i)=>n` <div class="download-app"> ${c(e,()=>n`<div class="qr-code-wrapper">${g(a.qrCode,A)}</div> `)} <div class="content"> <h3>${a.title}</h3> <a href="${a.link.url}" @click="${()=>{l.analyticsElementsOnPage("button",a.title,"clicked","")}}" aria-label="${r(d.msg(i))}"> ${g(a.image,P)} </a> </div> </div> `;class N extends $(k(E)){static localizeNamespaces=["ing-feat-flexible-page-component-app-promoter"];static scopedElements={"ing-icon":z,"ing-link":S,"ing-button":I};static properties={content:{type:Object},slideIndex:{type:Number}};static styles=C;constructor(){super(),this.slideIndex=0}onFeatureSlideUpdate(e){const{title:i}=this.content.featureSlideList[this.slideIndex];l.analyticsElementsOnPage("carousel",`${i}`,"viewed",`app-promoter-feature-slide-${this.slideIndex+1};${e}`)}onClickLeft(){this.slideIndex>0&&(this.slideIndex-=1,this.onFeatureSlideUpdate("nav-arrow"))}onClickRight(){this.slideIndex<this.content.featureSlideList.length-1&&(this.slideIndex+=1,this.onFeatureSlideUpdate("nav-arrow"))}clickDot(e){this.slideIndex=e,this.onFeatureSlideUpdate("nav-dot")}renderNavDots(){const e=[...Array(this.content.featureSlideList.length)];return n` <nav class="nav-dots-wrapper"> ${e.map((i,t)=>{const o=t===this.slideIndex;return n`<button type="button" @click="${()=>this.clickDot(t)}" class="nav-dot ${o?"nav-dot-active":""}" .disabled="${o}" aria-label="${r(d.msg("CURRENT_SLIDE",{index:(t??0)+1,length:this.content.featureSlideList.length}))}"> <span></span> </button>`})} </nav> `}render(){if(!this.content?.featureSlideList?.length)return p;const e=this.content.featureSlideList[this.slideIndex],{android:i,ios:t}=this.content?.deviceSpecificAppDownload??{},o=/Android/i.test(navigator.userAgent),u=/iPhone|iPad|iPod/i.test(navigator.userAgent),s=!o&&!u,f={"download-app-wrapper":!0,"no-android":!i,"no-ios":!t};return n` <div class="${h({"app-promoter-wrapper":!0,"no-download-app":!i&&!t})}"> <div class="feature-slide-list"> <div aria-live="polite" aria-atomic="true" class="sr-only"> ${r(d.msg("CURRENT_SLIDE",{index:(this.slideIndex??0)+1,length:this.content.featureSlideList.length}))} </div> <ing-button class="nav-arrow nav-arrow-left" variation="tertiary-accent-large" @click="${this.onClickLeft}" ?disabled="${this.slideIndex===0}"> <span class="sr-only">${r(d.msg("PREVIOUS"))}</span> <ing-icon icon-id="ing:arrows:chevronLeftFilled"></ing-icon> </ing-button> <figure class="app-preview"> ${c(e?.image?.original||e?.image?.transformBaseUrl,()=>g(e.image,D))} </figure> <h2 class="title">${e.title}</h2> <div class="body"> <p>${e.body}</p> ${c(e.link,()=>
345n` <ing-link icon class="ing-link" href="${e.link?.url}" target="${L(e.link?.url)}" @click="${()=>l.analyticsElementsOnPage("link",e.link?.text,"clicked",`app-promoter;${e.title}`)}">${e.link?.text}</ing-link> `)} </div> ${this.renderNavDots()} <ing-button class="nav-arrow nav-arrow-right" variation="tertiary-accent-large" @click="${this.onClickRight}" ?disabled="${this.slideIndex===this.content.featureSlideList.length-1}"> <span class="sr-only">${r(d.msg("NEXT"))}</span> <ing-icon icon-id="ing:arrows:chevronRightFilled"></ing-icon> </ing-button> </div> <div class="${h(f)}"> ${t&&(u||s)?n` ${w(t,s,"APPSTORE_LINK_LABEL")}`:p} ${i&&(o||s)?n` ${w(i,s,"PLAYSTORE_LINK_LABEL")} `:p} </div> </div> `}}export{N as default};
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.