1"use strict";(self.webpackChunkaem_maven_archetype=self.webpackChunkaem_maven_archetype||[]).push([["src_main_webpack_components_userNeedsConfigurator_UserNeedsConfigurator-results_lit_ts"],{3193:function(e,i,t){t.r(i),t.d(i,{UserNeedsConfiguratorResults:function(){return c}});var s=t(6684),a=t(3777),r=t(6217),o=t(2634);const n=s.AH` 2 :host { display: block; } 3 4 .unc-masonry { 5 display: flex; 6 gap: 2rem; 7 width: 100%; 8 } 9 10 .unc-masonry-column { 11 display: flex; 12 flex-direction: column; 13 gap: 2rem; 14 flex: 1; 15 min-width: 0; 16 } 17 18 .unc-carousel { 19 height: var(--articles-carousel-height, auto); 20 overflow: hidden; 21 margin-bottom: 1.5rem; 22 min-height: 300px; 23 transition: height 200ms ease; 24 } 25 26 sl-carousel-item { 27 justify-content: start; 28 align-self: start; 29 height: 100%; 30 } 31 32 .unc-carousel-item-wrapper { 33 padding: 0 0.25rem; 34 box-sizing: border-box; 35 width: 100%; 36 } 37 38 .unc-mobile-pagination { 39 display: flex; 40 justify-content: center; 41 margin-top: 1rem; 42 } 43 44 .result-card { 45 display: flex; 46 flex-direction: column; 47 overflow: hidden; 48 text-decoration: none; 49 border-radius: 0.5rem; 50 background: var(--basic-100, #FFF); 51 box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.23), 0 3px 5px 0 rgba(0, 0, 0, 0.20); 52 color: var(--text-100, rgba(0, 0, 0, 0.90)); 53 height: auto; 54 transition: all .15s; 55 margin-bottom: 2rem; 56 } 57 58 .result-card:hover { 59 box-shadow: 0 8px 16px #0000001a, 0 6px 12px #0000001f, 0 0 2px #0003; 60 outline: 1px solid #1a3691; 61 cursor: pointer; 62 } 63 64 .result-card__media { 65 66 aspect-ratio: 16/9; 67 position: relative; 68 overflow: hidden; 69 } 70 .result-card__media .cmp-data-image { 71 width: 100%; 72 height: 100%; 73 display: block; 74 } 75 76 .result-card__media img, 77 .result-card__media .cmp-data-image__data-image { 78 79 width: 100%; 80 height: 100%; 81 object-fit: cover; 82 position: relative; 83 } 84 85 .result-card__icon-placeholder { 86 width: 100%; 87 height: 100%; 88 display: flex; 89 align-items: center; 90 justify-content: center; 91 } 92 93 .result-card__icon-placeholder si-icon { 94 --si-icon-size: 4rem; 95 color: #1A3691; 96 } 97 98 .result-card__content { 99 padding: 1.5rem; 100 display: flex; 101 flex-direction: column; 102 flex-grow: 1; 103 gap: 0.5rem; 104 } 105 106 .result-card__header { 107 align-self: flex-start; 108 } 109 110 .result-card__title { 111 margin: 0; 112 font-size: 1.25rem; 113 font-weight: 600; 114 line-height: 1.4; 115 color: #000; 116 } 117 118 .result-card__body { 119 margin-top: auto; 120 display: flex; 121 flex-direction: column; 122 gap: 0.25rem; 123 } 124 125 .card-badge { 126 display: flex; 127 height: 1.5rem; 128 padding: 0 var(--spacing-space-50-8, 0.5rem); 129 align-items: center; 130 gap: 0.25rem; 131 border-radius: 1.5rem; 132 background: var(--neutral-25, #E6EAF1); 133 color: var(--primary-signal-iduna-125, #132768); 134 text-align: right; 135 font-size: 0.875rem; 136 font-weight: 500; 137 line-height: 1.25rem; 138 } 139 140 .card-disturber { 141 font-size: 1rem 142 color: var(--text-75, rgba(0, 0, 0, 0.60)); 143 font-weight: 400; 144 line-height: 1.5rem; 145 } 146 147 .card-price { 148 color: var(--text-75, rgba(0, 0, 0, 0.60)); 149 font-size: 1.125rem; 150 font-weight: 400; 151 line-height: 1.75rem 152 } 153 154 .card-meta { 155 color: var(--text-75, rgba(0, 0, 0, 0.60)); 156 font-size: 0.875rem; 157 font-weight: 400; 158 line-height: 1.25rem; 159 } 160 161 .chip-feature-article { 162 font-size: 0.875rem; 163 font-weight: 500; 164 height: 1.5rem; 165 color: var(--color-primary-100, #1a3691); 166 display: flex; 167 gap: 0.125rem; 168 align-items: center; 169 background: var(--neutral-25, #e6eaf1); 170 border-radius: 1.5rem; 171 padding: 0 0.5rem; 172 width: fit-content; 173 } 174 175 .chip-feature-article:before { 176 --si-icon-color: var(--color-primary-100, #1a3691); 177 --si-icon-size: 1em; 178 --si-icon-svg: var(--icon-icon-only-svg); 179 display: inline-block; 180 flex: 0 0 var(--si-icon-size); 181 width: var(--si-icon-size); 182 height: var(--si-icon-size); 183 margin-right: 0.25rem; 184 background: var(--si-icon-color, currentColor); 185 -webkit-mask-image: var(--si-icon-svg); 186 mask-image: var(--si-icon-svg); 187 -webkit-mask-repeat: no-repeat; 188 mask-repeat: no-repeat; 189 -webkit-mask-size: var(--si-icon-size); 190 mask-size: var(--si-icon-size); 191 content: ""; 192 } 193 194 .skeleton-card { 195 border: 1px solid #eee; 196 border-radius: 0.5rem; 197 padding: 1rem; 198 } 199 .skeleton-image { 200 height: 9.375rem; 201 background: #eee; 202 margin-bottom: 1rem; 203 } 204 .skeleton-text { 205 height: 1.25rem; 206 background: #eee; 207 margin-bottom: 0.5rem; 208 width: 100%; 209 } 210 .skeleton-text.short { 211 width: 60%; 212 } 213 214 @media (max-width: 1023px) { 215 .unc-carousel-item-wrapper { 216 max-width: unset; 217 margin: 0.25rem 0.125rem 0 0.125rem; 218 width: calc(100% - 0.125rem); 219 } 220 221 #sl-slider sl-carousel-item { 222 margin-bottom: 1rem; 223 } 224 } 225 226 @media (min-width: 600px) { 227 .result-card { 228 margin-bottom: 0rem; 229 } 230 } 231 232`;t(9783),t(8390);var l=function(e,i,t,s){var a,r=arguments.length,o=r<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,t):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,i,t,s);else for(var n=e.length-1;n>=0;n--)(a=e[n])&&(o=(r<3?a(o):r>3?a(i,t,o):a(i,t))||o);return r>3&&o&&Object.defineProperty(i,t,o),o};let c=class extends s.WF{constructor(){super(...arguments),this.apiPath="",this.pageSize=6,this.allResults=[],this.visibleResults=[],this.isLoading=!1,this.isMobile=!1,this.columnCount=3,this.currentPage=1,this.totalPages=1,this.hasError=!1,this.onWindowResize=()=>{clearTimeout(this.resizeTimer),this.resizeTimer=window.setTimeout(()=>this.updateSlideHeight(),300)}}connectedCallback(){super.connectedCallback(),this.updateLayoutState(),this.resizeObserver=new ResizeObserver(()=>{this.updateLayoutState(),this.isMobile&&this.onWindowResize()}),this.resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),clearTimeout(this.resizeTimer)}updated(e){super.updated(e),(e.has("currentPage")&&this.isMobile||e.has("isMobile")&&this.isMobile)&&this.updateSlideHightWithDelay()}updateLayoutState(){const e=window.innerWidth,i=this.isMobile;this.isMobile=e<600,this.columnCount=e>=1024?3:2,i!==this.isMobile&&(this.currentPage=1,this.calculatePagination(),this.updateView(),this.requestUpdate())}async loadResults(e){this.isLoading=!0,this.hasError=!1,this.currentPage=1,this.allResults=[],this.visibleResults=[];try{let i=`${this.apiPath}.model.${e}`;const t=document.getElementById("adpSlug-hidden-input");if(t&&t.value){i+=`.slug!${t.value.replace(/\./g,"--")}`}i+=".json";const s=await fetch(i);if(!s.ok)throw new Error(`HTTP Error: ${s.status}`);const a=await s.json();this.allResults=a.cardsList||[],this.calculatePagination(),this.updateView()}catch(e){this.hasError=!0}finally{this.isLoading=!1}}calculatePagination(){this.isMobile?this.totalPages=this.allResults.length:this.totalPages=Math.ceil(this.allResults.length/this.pageSize)}changePage(e){e<1||e>this.totalPages||(this.currentPage=e,this.isMobile?this.carousel?.goToSlide(e-1):this.updateView())}reset(){this.allResults=[],this.visibleResults=[],this.currentPage=1,this.totalPages=1,this.isLoading=!1,this.hasError=!1,this.dispatchPaginationEvent(0,0)}updateView(){if(this.isMobile)this.visibleResults=this.allResults;else{const e=(this.currentPage-1)*this.pageSize,i=e+this.pageSize;this.visibleResults=this.allResults.slice(e,i)}this.dispatchPaginationEvent(this.currentPage,this.totalPages)}dispatchPaginationEvent(e,i){this.dispatchEvent(new CustomEvent("unc-pagination-change",{detail:{currentPage:e,totalPages:i},bubbles:!0,composed:!0}))}handleSlideChange(e){const i=e.detail.index+1;this.currentPage!==i&&(this.currentPage=i,this.requestUpdate())}handleMobilePagination(e){const i=e.detail.page;this.changePage(i)}updateSlideHeight(){const e=this.carousel;e&&setTimeout(()=>{const i=e.querySelectorAll("sl-carousel-item")[this.currentPage-1];if(i){const t=i.querySelector(".unc-carousel-item-wrapper");t&&e.style.setProperty("--articles-carousel-height",`${t.scrollHeight}px`)}},50)}updateSlideHightWithDelay(){const e=()=>{const i=this.shadowRoot?.querySelector(".unc-carousel");i?this.updateSlideHeight():requestAnimationFrame(e)};requestAnimationFrame(e)}render(){return this.isLoading?s.qy`${this.renderSkeleton()}`:this.hasError?s.qy`<div class="unc-message error">Es ist ein Fehler aufgetreten.</div>`:0===this.allResults.length?s.qy`<div class="unc-message empty">Keine passenden Einträge gefunden.</div>`:s.qy` 233 <div class="unc-results-wrapper"> 234 ${this.isMobile?this.renderMobileView():this.renderMasonryGrid()} 235 </div> 236 `}renderMobileView(){return s.qy` 237 <sl-carousel 238 mouse-dragging 239 id="sl-slider" 240 class="unc-carousel"
241 @sl-slide-change="${this.handleSlideChange}"> 242 243 ${this.allResults.map(e=>s.qy` 244 <sl-carousel-item> 245 <div class="unc-carousel-item-wrapper"> 246 ${this.renderCard(e)} 247 </div> 248 </sl-carousel-item> 249 `)} 250 </sl-carousel> 251 252 ${this.totalPages>1?s.qy` 253 <div class="unc-mobile-pagination"> 254 <si-pagination-simple 255 .currentPage="${this.currentPage}" 256 .totalPages="${this.totalPages}" 257 target-id="unc-mobile-pagination" 258 @si-page-change="${this.handleMobilePagination}"> 259 </si-pagination-simple> 260 </div> 261 `:""} 262 `}renderSkeleton(){return s.qy` 263 <div class="unc-masonry"> 264 ${Array.from({length:this.columnCount}).map(()=>s.qy` 265 <div class="unc-masonry-column"> 266 <div class="skeleton-card"> 267 <div class="skeleton-image"></div> 268 <div class="skeleton-text"></div> 269 <div class="skeleton-text short"></div> 270 </div> 271 </div> 272 `)} 273 </div> 274 `}renderMasonryGrid(){const e=Array.from({length:this.columnCount},()=>[]);return this.visibleResults.forEach((i,t)=>{e[t%this.columnCount].push(i)}),s.qy` 275 <div class="unc-masonry"> 276 ${e.map(e=>s.qy` 277 <div class="unc-masonry-column"> 278 ${e.map(e=>this.renderCard(e))} 279 </div> 280 `)} 281 </div> 282 `}renderImage(e,i){return e&&e.src?s.qy` 283 <div 284 data-cmp-dmimage=${e.dmImage||""} 285 data-asset-id=${e.uuid||""} 286 id=${e.id||""} 287 class="cmp-data-image" 288 itemscope 289 itemtype="http://schema.org/ImageObject" 290 > 291 <img 292 srcset=${e.srcset||""} 293 src=${e.src} 294 loading=${e.lazyEnabled?"lazy":"eager"} 295 class="cmp-data-image__data-image" 296 itemprop="contentUrl" 297 width=${e.width||""} 298 height=${e.height||""} 299 alt=${e.alt||""} 300 /> 301 302 ${(0,o.K)(e.uuid||"",i)} 303 304 </div> 305 `:s.qy``}renderCard(e){const i="interactive-article-card"===e.teaserType,t=i&&!!e.chip,a=!i&&!!e.disturberLine,o=t||a;return s.qy` 306 <a href="${e.path}" class="result-card"> 307 ${e.image&&e.image.src?s.qy` 308 <div class="result-card__media"> 309 ${e.image&&e.image.src?this.renderImage(e.image,e.aiBadgeText):s.qy` 310 <div class="result-card__icon-placeholder"> 311 <si-icon si-sprite="essentials" si-svg="${e.interactiveServiceCardIcon||"functionalStar"}"></si-icon> 312 </div> 313 `} 314 </div> 315 `:s.qy``} 316 <div class="result-card__content"> 317 ${o?s.qy` 318 <div class="result-card__header"> 319 ${t?s.qy` 320 <si-card-icon class="chip-feature-article"> 321 ${e.chip} 322 </si-card-icon> 323 `:""} 324 325 ${a?s.qy` 326 <span class="card-disturber">${e.disturberLine}</span> 327 `:""} 328 </div> 329 `:""} 330 <div class="result-card__body"> 331 <h3 class="result-card__title">${(0,r.rV)(e.pageTitle)}</h3> 332 ${!i&&e.price?s.qy`<span class="card-price">ab <strong>â¬${e.price}</strong> ${e.frequency||""}</span>`:""} 333 ${i&&e.readingTime?s.qy`<span class="card-meta">${e.readingTime}</span>`:""} 334 </div> 335 </div> 336 </a> 337 `}};c.styles=[o.C,n],l([(0,a.MZ)({type:String})],c.prototype,"apiPath",void 0),l([(0,a.MZ)({type:Number})],c.prototype,"pageSize",void 0),l([(0,a.wk)()],c.prototype,"allResults",void 0),l([(0,a.wk)()],c.prototype,"visibleResults",void 0),l([(0,a.wk)()],c.prototype,"isLoading",void 0),l([(0,a.wk)()],c.prototype,"isMobile",void 0),l([(0,a.wk)()],c.prototype,"columnCount",void 0),l([(0,a.wk)()],c.prototype,"currentPage",void 0),l([(0,a.wk)()],c.prototype,"totalPages",void 0),l([(0,a.wk)()],c.prototype,"hasError",void 0),l([(0,a.P)(".unc-carousel")],c.prototype,"carousel",void 0),c=l([(0,a.EM)("unc-results")],c)}}]);
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.