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