1/** 2 * MMX / HERO 3 */ 4class MMX_Hero extends MMX_Element { 5 6 static get props() { 7 return { 8 align: { 9 options: [ 10 'left', 11 'center', 12 'right' 13 ], 14 default: 'left' 15 }, 16 'content-location': { 17 options: [ 18 'top-left', 19 'top-center', 20 'top-right', 21 'center-left', 22 'center', 23 'center-right', 24 'bottom-left', 25 'bottom-center', 26 'bottom-right', 27 'under', 28 'above', 29 'left', 30 'right' 31 ], 32 default: 'under' 33 }, 34 'content-layout': { 35 options: [ 36 'hero', 37 'horizontal-banner', 38 'vertical-banner', 39 'text-area', 40 'video' 41 ], 42 default: 'hero' 43 }, 44 size: { 45 options: [ 46 // Preset Design System Sizes 47 's', 48 'm', 49 'l', 50 51 // Ratios 52 '1/1', 53 '4/3', 54 '5/6', 55 '16/9', 56 57 // Dimensions i.e. [max-width]x[max-height] 58 '600x500', 59 '1600x900', 60 '900x1600', 61 62 // Height (max-height) 63 '400px', 64 '30rem', 65 '50vh', 66 67 // Size to Length of Content 68 'content', 69 70 // Auto Size To Slotted Image 71 'auto' 72 ], 73 default: 'auto', 74 allowAny: true 75 }, 76 padding: { 77 options: [ 78 'auto', 79 'none', 80 's', 81 'm', 82 'l' 83 ], 84 default: 'auto' 85 }, 86 href: { 87 default: null, 88 allowAny: true 89 }, 90 target: { 91 default: null, 92 allowAny: true 93 }, 94 title: { 95 default: null, 96 allowAny: true 97 }, 98 'overlay-bg': { 99 options: [ 100 'linear-gradient', 101 'radial-gradient', 102 'color', 103 'opacity', 104 'none' 105 ], 106 default: 'none', 107 allowAny: true 108 }, 109 'overlay-bg-opacity': { 110 allowAny: true, 111 default: null 112 }, 113 'overlay-bg-angle': { 114 options: [ 115 '0deg', 116 '45deg', 117 '90deg', 118 '135deg', 119 '180deg', 120 '225deg', 121 '270deg', 122 '315deg' 123 ], 124 default: '45deg', 125 allowAny: true 126 }, 127 'overlay-bg-color': { 128 options: [ 129 'rgba(0, 0, 0, 0.5)', 130 'rgba(255, 255, 255, 0.5)' 131 ], 132 default: 'rgba(0, 0, 0, 0.5)', 133 allowAny: true 134 }, 135 'overlay-bg-to-color': { 136 options: [ 137 'rgba(0, 0, 0, 0)', 138 'rgba(255, 255, 255, 0)' 139 ], 140 default: 'rgba(0, 0, 0, 0)', 141 allowAny: true 142 }, 143 'content-width': { 144 options: [ 145 'auto', 146 'default', 147 'wide', 148 'extra-wide', 149 '20%', 150 '30%', 151 '40%', 152 '50%', 153 '60%', 154 '70%', 155 '80%' 156 ], 157 default: 'auto', 158 isPercentage: true, 159 allowAny: true 160 }, 161 'content-height': { 162 options: [ 163 'auto', 164 '50%', 165 '75%', 166 '100%' 167 ], 168 default: 'auto', 169 isPercentage: true, 170 allowAny: true 171 }, 172 'content-bg-color--mobile': { 173 options: [ 174 'none', 175 'white', 176 'black' 177 ], 178 default: 'none', 179 allowAny: true 180 }, 181 'content-bg-color--desktop': { 182 options: [ 183 'none', 184 'white', 185 'black' 186 ], 187 default: 'none', 188 allowAny: true 189 }, 190 'content-theme': { 191 options: [ 192 'light', 193 'dark', 194 'dark--l', 195 'invert' 196 ], 197 default: 'light' 198 }, 199 fit: { 200 options: [ 201 'cover', 202 'contain', 203 'fill', 204 'none', 205 'scale-down' 206 ], 207 default: 'cover' 208 }, 209 heading: { 210 allowAny: true, 211 default: null 212 }, 213 'heading-theme': { 214 allowAny: true, 215 isBoolean: true, 216 default: false 217 }, 218 'heading-theme-class': { 219 allowAny: true, 220 default: '' 221 }, 222 'heading-style': { 223 options: [ 224 'display-1', 225 'display-2', 226 'display-3', 227 'title-1', 228 'title-2', 229 'title-3', 230 'title-4', 231 'subheading-l', 232 'subheading-s' 233 ], 234 default: 'title-2' 235 }, 236 'heading-tag': { 237 options: [ 238 'h1', 239 'h2', 240 'h3', 241 'h4', 242 'h5', 243 'h6', 244 'p' 245 ], 246 default: 'p' 247 }, 248 body: { 249 allowAny: true, 250 default: null 251 }, 252 'body-theme': { 253 allowAny: true, 254 isBoolean: true, 255 default: false 256 }, 257 'body-theme-class': { 258 allowAny: true, 259 default: '' 260 }, 261 'body-style': { 262 options: [ 263 'paragraph-l', 264 'paragraph-s', 265 'paragraph-xs' 266 ], 267 default: 'paragraph-s' 268 }, 269 subheading: { 270 allowAny: true, 271 default: null 272 }, 273 'subheading-theme': { 274 allowAny: true, 275 isBoolean: true, 276 default: false 277 }, 278 'subheading-theme-class': { 279 allowAny: true, 280 default: '' 281 }, 282 'subheading-style': { 283 options: [ 284 'subheading-l', 285 'subheading-s' 286 ],
287 default: 'subheading-s' 288 }, 289 button: { 290 allowAny: true, 291 default: null 292 }, 293 'button-style': { 294 options: ['primary', 'secondary', 'display-link', 'primary-link', 'secondary-link', 'dark-primary', 'dark-secondary', 'dark-display-link', 'dark-primary-link', 'dark-secondary-link'], 295 default: 'primary' 296 }, 297 'button-size': { 298 options: ['xs', 's', 'm', 'l'], 299 default: 'm' 300 }, 301 'button-theme': { 302 allowAny: true, 303 isBoolean: true, 304 default: false 305 }, 306 'button-theme-class': { 307 allowAny: true, 308 default: '' 309 }, 310 'img-src': { 311 allowAny: true, 312 default: null 313 }, 314 'img-alt': { 315 allowAny: true, 316 default: null 317 }, 318 tag: { 319 allowAny: true, 320 default: 'a' 321 } 322 }; 323 } 324 325 styleResourceCodes = ['mmx-base', 'mmx-text', 'mmx-button', 'mmx-hero']; 326 renderUniquely = true; 327 328 constructor() { 329 super(); 330 this.makeShadow(); 331 } 332 333 render() { 334 const contentStyle = this.showHideContent() ? '' : 'none'; 335 const tag = this.getPropValue('tag'); 336 return /*html*/` 337 <${tag} 338 part="wrapper theme-${this.getPropValue('content-theme')}" 339 ${this.renderHref()} 340 ${this.renderTarget()} 341 ${this.renderTitle()} 342 class=" 343 mmx-hero 344 mmx-hero--size-method--${this.getSizeMethod()} 345 mmx-hero--size--${this.getPropValue('size')} 346 mmx-hero--content-${this.contentLocationCategory()} 347 mmx-hero--layout-${this.getPropValue('content-layout')} 348 mmx-hero--padding-${this.getPropValue('padding')} 349 ${this.getContentBgClasses()} 350 ${this.getThemeClass()} 351 " 352 > 353 <div part="image-container" class="mmx-hero__image-container"> 354 ${this.renderImage()} 355 <slot name="image"></slot> 356 </div> 357 <div part="content-bg" class="mmx-hero__content-bg mmx-hero__content-bg--${this.getPropValue('content-location')}"> 358 <div part="content-wrapper" class="mmx-hero__content-wrapper"> 359 <div part="content" class="mmx-hero__content" style="display: ${contentStyle};"> 360 <div part="rendered-content" class="mmx-hero__rendered-content">${this.renderContent()}</div> 361 <slot name="content"></slot> 362 <div class="mmx-hero__individual-content">${this.renderIndividualSlots()}</div> 363 </div> 364 </div> 365 </div> 366 </${tag}> 367 `; 368 } 369 370 afterRender() { 371 this.showHideContent(); 372 this.bindEvents(); 373 } 374 375 styles() { 376 return /*css*/` 377 :host { 378 --mmx-hero__max-width: ${this.getMaxWidth()}; 379 --mmx-hero__aspect-ratio: ${this.getAspectRatio()}; 380 --mmx-hero__content-bg-color--desktop: ${this.getPropValue('content-bg-color--desktop')}; 381 --mmx-hero__content-bg-color--mobile: ${this.getPropValue('content-bg-color--mobile')}; 382 --mmx-hero__content-height: ${this.getPropValue('content-height')}; 383 --mmx-hero__content-width: ${this.getContentWidth()}; 384 --mmx-hero__grid-template-columns: ${this.getGridTemplateColumns()}; 385 --mmx-hero__max-height: ${this.getMaxHeight()}; 386 --mmx-hero__object-fit: ${this.getPropValue('fit')}; 387 --mmx-hero__overlay-bg: ${this.getOverlayBg()}; 388 --mmx-hero__text-align: ${this.getPropValue('align')}; 389 } 390 391 ${this.renderIframeObjectFitStyles()} 392 `; 393 } 394 395 renderHref() { 396 const href = this.getPropValue('href'); 397 return href ? `href="${MMX.encodeEntities(href)}"` : ''; 398 } 399 400 renderTarget() { 401 const target = this.getPropValue('target'); 402 return target ? `target="${MMX.encodeEntities(target)}"` : ''; 403 } 404 405 renderTitle() { 406 const title = this.getPropValue('title'); 407 return title ? `title="${MMX.encodeEntities(title)}"` : ''; 408 } 409 410 slottedImage() { 411 return this.querySelector(':scope > img[slot="image"], :scope > [slot="image"] > img'); 412 } 413 414 shadowImage() { 415 return this.shadowRoot.querySelector('img'); 416 } 417 418 slottedContent() { 419 return this.querySelectorAll(`:scope > [slot="content"], 420 :scope > [slot="subheading"], 421 :scope > [slot="heading"], 422 :scope > [slot="body"], 423 :scope > [slot="button"] 424 `); 425 } 426 427 hasSlottedContent() { 428 return this.slottedContent()?.length > 0; 429 } 430 431 renderedContent() { 432 return this.shadowRoot.querySelector('.mmx-hero__rendered-content'); 433 } 434 435 showHideContent() { 436 const content = this.shadowRoot.querySelector('.mmx-hero__content'); 437 438 // Show Hide Content Based on Data Settings 439 if ([0, false, 'false'].includes(this.data?.content?.settings?.enabled)) { 440 if (content) { 441 content.style.display = 'none'; 442 } 443 return false;
444 } 445 446 // Show Hide Content Based on if Content Exists 447 const hasContent = this.hasSlottedContent() || this.renderedContent()?.textContent?.trim()?.length; 448 if (hasContent) { 449 if (content) { 450 content.style.display = ''; 451 } 452 return true; 453 } 454 455 if (content) { 456 content.style.display = 'none'; 457 } 458 return false; 459 } 460 461 getSizeMethod() { 462 const size = this.getPropValue('size'); 463 464 // Handle content size 465 if (size === 'content') { 466 return size; 467 } 468 469 // Handle preset sizes 470 if (['s', 'm', 'l'].includes(size)) { 471 return 'preset'; 472 } 473 474 // Handle aspect-ratio sizes 475 if (size.indexOf('/') > -1 ) { 476 return 'ratio'; 477 } 478 479 // Handle width & height dimensions 480 const dimensions = this.getSizeDimensions(); 481 if (dimensions?.width > 0 && dimensions?.height > 0) { 482 return 'dimensions'; 483 } 484 485 // Handle height dimension (100px, 10vh, etc.) 486 if (/^\d/.test(size)) { 487 return 'height'; 488 } 489 490 // Default return 491 return 'auto'; 492 } 493 494 contentLocationCategory() { 495 const contentLocation = this.getPropValue('content-location'); 496 497 if (['under', 'above'].includes(contentLocation)) { 498 return `is-${contentLocation}-image`; 499 } 500 501 if (['left', 'right'].includes(contentLocation)) { 502 return 'is-next-to-image'; 503 } 504 505 return 'is-over-image'; 506 } 507 508 getThemeClass() { 509 const contentTheme = this.getPropValue('content-theme'); 510 let themeClass = `mmx-hero--content-theme-${contentTheme}`; 511 512 if (['dark', 'dark--l'].includes(contentTheme)) { 513 themeClass += ' mmx-theme--' + contentTheme; 514 } 515 516 return themeClass; 517 } 518 519 getSizeDimensions() { 520 const size = this.getPropValue('size'); 521 const dimensionPattern = /(\d+)x(\d+)/; 522 523 if (!dimensionPattern.test(size)) { 524 return null; 525 } 526 527 const [fullMatch, width, height] = size.match(dimensionPattern); 528 529 return { 530 height: Number(height), 531 width: Number(width) 532 }; 533 } 534 535 getMaxWidth() { 536 const dimensions = this.getSizeDimensions(); 537 return dimensions?.width > 0 ? dimensions.width + 'px' : 'auto'; 538 } 539 540 getMaxHeight() { 541 const sizeMethod = this.getSizeMethod(); 542 const size = this.getPropValue('size'); 543 544 if (sizeMethod === 'ratio') { 545 return 'auto'; 546 } 547 548 if (sizeMethod === 'dimensions') { 549 const dimensions = this.getSizeDimensions(); 550 return dimensions?.height + 'px'; 551 } 552 553 if (sizeMethod === 'height') { 554 return size; 555 } 556 557 return 'auto'; 558 } 559 560 getAspectRatio() { 561 const sizeMethod = this.getSizeMethod(); 562 const size = this.getPropValue('size'); 563 564 if (sizeMethod === 'dimensions') { 565 const dimensions = this.getSizeDimensions(); 566 return dimensions.width + '/' + dimensions.height; 567 } 568 569 if (sizeMethod === 'ratio') { 570 return size; 571 } 572 573 return 'auto'; 574 } 575 576 getOverlayBg() { 577 const overlayBg = this.getPropValue('overlay-bg'); 578 if (overlayBg === 'none' ) { 579 return 'none'; 580 } 581 else if (overlayBg === 'opacity' ) { 582 const opacity = this.getPropValue('overlay-bg-opacity') / 100 || 0; 583 return `rgba(0, 0, 0, ${opacity})`; 584 } 585 else if (overlayBg === 'color' ) { 586 return this.getPropValue('overlay-bg-color'); 587 } 588 else if (overlayBg === 'linear-gradient' ) { 589 return `linear-gradient(${this.getPropValue('overlay-bg-angle')}, ${this.getPropValue('overlay-bg-color')}, ${this.getPropValue('overlay-bg-to-color')})`; 590 } 591 else if (overlayBg === 'radial-gradient' ) { 592 return `radial-gradient(${this.getPropValue('overlay-bg-color')}, ${this.getPropValue('overlay-bg-to-color')})`; 593 } 594 595 return overlayBg; 596 } 597 598 contentWidthToPx = { 599 'extra-wide': '1200px', 600 wide: '1000px', 601 default: '800px' 602 }; 603 604 sizeToRatioMap = { 605 s: '1440 / 400', 606 m: '1440 / 580', 607 l: '1440 / 740' 608 }; 609 610 renderIframeObjectFitStyles() { 611 const sizeMethod = this.getSizeMethod(); 612 const size = this.getPropValue('size'); 613 614 if (sizeMethod === 'preset') { 615 const aspectRatio = this.sizeToRatioMap[size]; 616 const [width, height] = aspectRatio.split(' / '); 617 return this.getIframeObjectFitStylesSizeIsPreset(width, height); 618 } 619 620 if (sizeMethod === 'dimensions') { 621 const dimensions = this.getSizeDimensions(); 622 return this.getIframeObjectFitStylesSizeIsDimensions(dimensions.width, dimensions.height); 623 } 624 625 return ''; 626 627 } 628 629 getIframeObjectFitStylesSizeIsPreset(width, height) { 630 return /*css*/` 631 @media (min-aspect-ratio: ${width} / ${height}) { 632 .mmx-hero { 633 --mmx-hero__iframe-height: calc(100vw * (${height} / ${width})); 634 } 635 } 636 637 @media (max-aspect-ratio: ${width} / ${height}) { 638 .mmx-hero { 639 --mmx-hero__iframe-width: calc(100vw / (${height} / ${width})); 640 } 641 } 642 `; 643 } 644 645 getIframeObjectFitStylesSizeIsDimensions(width, height) { 646 return /*css*/` 647 .mmx-hero { 648 --mmx-hero__iframe-width: ${width}; 649 --mmx-hero__iframe-height: ${height}; 650 } 651 `; 652 } 653 654 getContentWidth() { 655 const contentLocation = this.getPropValue('content-location'); 656 const contentWidth = this.getPropValue('content-width'); 657 658 if (['under', 'above'].includes(contentLocation) && contentWidth === 'auto') { 659 return '100%'; 660 } 661 662 if (['left', 'right'].includes(contentLocation) && contentWidth === 'auto') { 663 return '35%'; 664 } 665 666 if (contentWidth in this.contentWidthToPx) { 667 return this.contentWidthToPx[contentWidth]; 668 } 669 670 return contentWidth; 671 } 672 673 getGridTemplateColumns() { 674 let columnsTemplate = ['auto', this.getContentWidth()]; 675 676 if (this.getPropValue('content-location') === 'left') { 677 columnsTemplate.reverse(); 678 } 679 680 return columnsTemplate.join(' '); 681 } 682 683 getContentBgClasses() { 684 const hasContentBgColorOnDesktop = this.getPropValue('content-bg-color--desktop') !== 'none'; 685 const hasContentBgColorOnMobile = this.getPropValue('content-bg-color--mobile') !== 'none'; 686 687 let classes = []; 688 classes.push(hasContentBgColorOnDesktop ? 'mmx-hero--desktop-has-bg' : 'mmx-hero--desktop-no-bg'); 689 classes.push(hasContentBgColorOnMobile ? 'mmx-hero--mobile-has-bg' : 'mmx-hero--mobile-no-bg'); 690 691 return classes.join(' '); 692 } 693 694 renderImage() { 695 if (this.slottedImage()) { 696 return ''; 697 } 698 699 if (this.data?.image) { 700 return this.renderImageAsPicture(); 701 702 } 703 return this.renderImageFromAttributes(); 704 } 705 706 renderImageAsPicture() { 707 if (typeof this.data?.image?.img?.image === 'undefined') { 708 return ''; 709 } 710 711 return /*html*/` 712 <picture part="picture"> 713 ${this.data?.image?.img?.responsive_images?.mobile ? /*html*/`<source class="source__mobile" media="(max-width: 39.999em)" srcset="${MMX.encodeEntitiesURI(this.data.image.img.responsive_images.mobile)}
713">` : ''} 714 ${this.data?.image?.img?.responsive_images?.tablet ? /*html*/`<source class="source__tablet" media="(max-width: 59.999em)" srcset="${MMX.encodeEntitiesURI(this.data.image.img.responsive_images.tablet)}">` : ''} 715 <img src="${MMX.encodeEntitiesURI(this.data.image.img.image)}" alt="${this.data?.image?.img?.alt || ''}" ${this.getLoadingAttributeString()}> 716 </picture> 717 `; 718 } 719 720 renderImageFromAttributes() { 721 const imageAttributes = { 722 ...this.buildImageAttributeObject(), 723 part: 'image' 724 }; 725 726 if (!imageAttributes?.src?.length) { 727 return ''; 728 } 729 730 return this.createElement({ 731 type: 'img', 732 attributes: imageAttributes 733 }).outerHTML; 734 } 735 736 buildImageAttributeObject() { 737 const imageAttributePrefix = 'data-img-'; 738 const attributeNames = this.getAttributeNames(); 739 740 let image = { 741 alt: '', 742 ...this.getLoadingAttributes() 743 }; 744 745 if (!attributeNames.length) { 746 return image; 747 } 748 749 attributeNames.forEach((attributeName) => { 750 if (attributeName.indexOf(imageAttributePrefix) !== 0) { 751 return; 752 } 753 754 const imageAttributeName = attributeName.replace(imageAttributePrefix, ''); 755 image[imageAttributeName] = this.getAttribute(attributeName); 756 }, []); 757 758 return image; 759 } 760 761 renderIndividualSlots() { 762 const individualSlots = ['subheading', 'heading', 'body', 'button']; 763 return individualSlots.map((slot) => { 764 return this.querySelector(`[slot="${slot}"]`) ? /*html*/`<slot name="${slot}"></slot>` : ''; 765 }).join(''); 766 } 767 768 renderContent() { 769 if (this.hasSlottedContent()) { 770 return ''; 771 } 772 return ( 773 this.renderSubheading() + 774 this.renderHeading() + 775 this.renderBody() + 776 this.renderButton() 777 ).trim(); 778 } 779 780 renderSubheading() { 781 const subheading = this.getPropValue('subheading'); 782 if (!subheading) { 783 return ''; 784 } 785 786 const theme_available = this.getPropValue('subheading-theme'); 787 788 return /*html*/` 789 <mmx-text 790 part="subheading" 791 data-theme="${MMX.encodeEntities(theme_available)}" 792 data-theme-class="${MMX.encodeEntities(this.getPropValue('subheading-theme-class'))}" 793 data-style="${this.getPropValue('subheading-style')}" 794 > 795 ${this.renderThemeStylesheetTemplate(theme_available)} 796 ${subheading} 797 </mmx-text>`; 798 } 799 800 renderHeading() { 801 const heading = this.getPropValue('heading'); 802 if (!heading) { 803 return ''; 804 } 805 806 const theme_available = this.getPropValue('heading-theme'); 807 808 return /*html*/` 809 <mmx-text 810 part="heading" 811 data-theme="${MMX.encodeEntities(theme_available)}" 812 data-theme-class="${MMX.encodeEntities(this.getPropValue('heading-theme-class'))}" 813 data-style="${this.getPropValue('heading-style')}" 814 data-tag="${this.getPropValue('heading-tag')}" 815 data-chars-per-line="none" 816 > 817 ${this.renderThemeStylesheetTemplate(theme_available)} 818 ${heading} 819 </mmx-text>`; 820 } 821 822 renderBody() { 823 const body = this.getPropValue('body'); 824 if (!body) { 825 return ''; 826 } 827 828 const theme_available = this.getPropValue('body-theme'); 829 830 return /*html*/` 831 <mmx-text 832 part="body" 833 data-theme="${MMX.encodeEntities(theme_available)}" 834 data-theme-class="${MMX.encodeEntities(this.getPropValue('body-theme-class'))}" 835 data-style="${this.getPropValue('body-style')}" 836 data-chars-per-line="55" 837 > 838 ${this.renderThemeStylesheetTemplate(theme_available)} 839 ${body} 840 </mmx-text>`; 841 } 842 843 renderButton() { 844 const button = this.getPropValue('button'); 845 if (!button) { 846 return ''; 847 } 848 return /*html*/` 849 <mmx-button 850 part="button" 851 exportparts="button: button__inner" 852 data-style="${this.getPropValue('button-style')}" 853 data-size="${this.getPropValue('button-size')}" 854 data-theme="${this.getPropValue('button-theme')}" 855 data-theme-class="${MMX.encodeEntities(this.getPropValue('button-theme-class'))}" 856 > 857 ${this.renderThemeStylesheetTemplate(this.getPropValue('button-theme'))} 858 ${button} 859 </mmx-button> 860 `; 861 } 862 863 bindEvents() { 864 this.bindLoad(this.slottedImage()); 865 this.bindLoad(this.shadowImage()); 866 } 867 868 #event_image_load = (e) => { 869 this.imageLoaded(e.currentTarget); 870 }; 871 872 bindLoad(image) { 873 if (!image) { 874 return; 875 } 876 877 if (image.complete) this.imageLoaded(image); 878 else image.addEventListener('load', this.#event_image_load); 879 } 880 881 imageLoaded(image) { 882 const imgLoadEvent = new CustomEvent('img:load', { 883 bubbles: true, 884 cancelable: false, 885 composed: true, 886 detail: { 887 element: image 888 } 889 });
890 this.dispatchEvent(imgLoadEvent); 891 } 892 893 onDataChange() { 894 this.setSpacing(this.data?.advanced?.spacing); 895 MMX.setElementAttributes(this, { 896 'data-href': this.data?.link?.url, 897 'data-target': this.data?.link?.new_tab ? '_blank' : undefined, 898 'data-size': this.data?.image?.size?.value, 899 'data-content-width': this.data?.advanced?.desktop?.container_width?.value, 900 'data-content-location': this.data?.content?.content_location?.value, 901 'data-align': this.data?.content?.align?.value, 902 'data-overlay-bg': 'opacity', 903 'data-overlay-bg-opacity': this.data?.advanced?.desktop?.overlay_opacity?.value, 904 'data-content-bg-color--mobile': this.data?.advanced?.mobile?.background_color?.settings?.enabled ? this.data?.advanced?.mobile?.background_color?.color?.value : undefined, 905 'data-content-bg-color--desktop': this.data?.advanced?.desktop?.background_color?.settings?.enabled ? this.data?.advanced?.desktop?.background_color?.color?.value : undefined, 906 'data-content-theme': this.data?.advanced?.content_theme?.value, 907 'data-subheading': this.data?.content?.settings?.enabled ? this.data?.content?.subheading?.value : undefined, 908 'data-subheading-theme': this.data?.content?.settings?.enabled ? this.data?.content?.subheading?.textsettings?.fields?.normal?.typography_theme?.theme_available : undefined, 909 'data-subheading-theme-class': this.data?.content?.settings?.enabled ? this.data?.content?.subheading?.textsettings?.fields?.normal?.typography_theme?.classname : undefined, 910 'data-subheading-style': this.data?.content?.settings?.enabled ? this.data?.content?.subheading?.textsettings?.fields?.normal?.subheading_style?.value : undefined, 911 'data-heading': this.data?.content?.settings?.enabled ? this.data?.content?.heading?.value : undefined, 912 'data-heading-theme': this.data?.content?.settings?.enabled ? this.data?.content?.heading?.textsettings?.fields?.normal?.typography_theme?.theme_available : undefined, 913 'data-heading-theme-class': this.data?.content?.settings?.enabled ? this.data?.content?.heading?.textsettings?.fields?.normal?.typography_theme?.classname : undefined, 914 'data-heading-style': this.data?.content?.settings?.enabled ? this.data?.content?.heading?.textsettings?.fields?.normal?.heading_style?.value : undefined, 915 'data-heading-tag': this.data?.content?.settings?.enabled ? this.data?.content?.heading?.textsettings?.fields?.normal?.heading_tag?.value : undefined, 916 'data-body': this.data?.content?.settings?.enabled ? this.data?.content?.body?.value : undefined, 917 'data-body-theme': this.data?.content?.settings?.enabled ? this.data?.content?.body?.textsettings?.fields?.normal?.typography_theme?.theme_available : undefined, 918 'data-body-theme-class': this.data?.content?.settings?.enabled ? this.data?.content?.body?.textsettings?.fields?.normal?.typography_theme?.classname : undefined, 919 'data-body-style': this.data?.content?.settings?.enabled ? this.data?.content?.body?.textsettings?.fields?.normal?.body_style?.value : undefined, 920 'data-button': this.data?.content?.settings?.enabled ? this.data?.content?.button?.value : undefined, 921 'data-button-style': this.data?.content?.settings?.enabled ? this.data?.content?.button?.textsettings?.fields?.normal?.button_style?.value : undefined, 922 'data-button-size': this.data?.content?.settings?.enabled ? this.data?.content?.button?.textsettings?.fields?.normal?.button_size?.value : undefined, 923 'data-button-theme': this.data?.content?.settings?.enabled ? this.data?.content?.button?.textsettings?.fields?.normal?.button_theme?.theme_available : undefined, 924 'data-button-theme-class': this.data?.content?.settings?.enabled ? this.data?.content?.button?.textsettings?.fields?.normal?.button_theme?.classname : undefined 925 }); 926 } 927} 928 929if (!customElements.get('mmx-hero')) { 930 customElements.define('mmx-hero', MMX_Hero); 931}
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.