@affinda/wc 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/affinda/af-testimonial-carousel.entry.esm.js.map +1 -1
- package/dist/affinda/af-testimonial.entry.esm.js.map +1 -1
- package/dist/affinda/af-video-container.entry.esm.js.map +1 -1
- package/dist/affinda/affinda.esm.js +1 -1
- package/dist/affinda/{p-de75cb4f.entry.js → p-165c413d.entry.js} +2 -2
- package/dist/affinda/p-165c413d.entry.js.map +1 -0
- package/dist/affinda/{p-a7a8f18c.entry.js → p-65dd559a.entry.js} +2 -2
- package/dist/affinda/{p-09dfcd40.entry.js → p-d362651c.entry.js} +2 -2
- package/dist/affinda/p-d362651c.entry.js.map +1 -0
- package/dist/cjs/af-testimonial-carousel.cjs.entry.js +1 -1
- package/dist/cjs/af-testimonial-carousel.entry.cjs.js.map +1 -1
- package/dist/cjs/af-testimonial.cjs.entry.js +6 -6
- package/dist/cjs/af-testimonial.entry.cjs.js.map +1 -1
- package/dist/cjs/af-video-container.cjs.entry.js +3 -3
- package/dist/cjs/af-video-container.entry.cjs.js.map +1 -1
- package/dist/cjs/affinda.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/af-testimonial/af-testimonial.js +8 -8
- package/dist/collection/components/af-testimonial/af-testimonial.js.map +1 -1
- package/dist/collection/components/af-testimonial-carousel/af-testimonial-carousel.js +3 -3
- package/dist/collection/components/af-testimonial-carousel/af-testimonial-carousel.js.map +1 -1
- package/dist/collection/components/af-video-container/af-video-container.js +4 -4
- package/dist/collection/components/af-video-container/af-video-container.js.map +1 -1
- package/dist/components/af-testimonial-carousel.js +2 -2
- package/dist/components/af-testimonial-carousel.js.map +1 -1
- package/dist/components/af-testimonial.js +6 -6
- package/dist/components/af-testimonial.js.map +1 -1
- package/dist/components/af-video-container.js +3 -3
- package/dist/components/af-video-container.js.map +1 -1
- package/dist/esm/af-testimonial-carousel.entry.js +1 -1
- package/dist/esm/af-testimonial-carousel.entry.js.map +1 -1
- package/dist/esm/af-testimonial.entry.js +6 -6
- package/dist/esm/af-testimonial.entry.js.map +1 -1
- package/dist/esm/af-video-container.entry.js +3 -3
- package/dist/esm/af-video-container.entry.js.map +1 -1
- package/dist/esm/affinda.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/af-testimonial/af-testimonial.d.ts +2 -2
- package/dist/types/components/af-video-container/af-video-container.d.ts +1 -1
- package/dist/types/components.d.ts +6 -6
- package/package.json +1 -1
- package/dist/affinda/p-09dfcd40.entry.js.map +0 -1
- package/dist/affinda/p-de75cb4f.entry.js.map +0 -1
- /package/dist/affinda/{p-a7a8f18c.entry.js.map → p-65dd559a.entry.js.map} +0 -0
package/dist/cjs/affinda.cjs.js
CHANGED
|
@@ -18,7 +18,7 @@ var patchBrowser = () => {
|
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(async (options) => {
|
|
20
20
|
await index.globalScripts();
|
|
21
|
-
return index.bootstrapLazy([["af-hero.cjs",[[262,"af-hero",{"variant":[513],"heading":[1],"description":[1],"floatNavbar":[516,"float-navbar"],"topPad":[1,"top-pad"],"maxWidth":[2,"max-width"],"maskImage":[4,"mask-image"]}]]],["af-icon-text.cjs",[[262,"af-icon-text",{"icon":[1],"headingSize":[2,"heading-size"],"orientation":[1],"iconSize":[1,"icon-size"]}]]],["af-testimonial.cjs",[[262,"af-testimonial",{"backgroundImage":[1,"background-image"],"logoImage":[1,"logo-image"],"quote":[1],"attribution":[1],"readMoreLink":[1,"read-more-link"],"showNavigation":[1028,"show-navigation"],"hasPrev":[1028,"has-prev"],"hasNext":[1028,"has-next"]}]]],["af-feature-card.cjs",[[262,"af-feature-card",{"theme":[1],"layout":[1],"cardSize":[513,"card-size"],"headingSize":[2,"heading-size"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"]}]]],["af-illustrated-card.cjs",[[262,"af-illustrated-card",{"theme":[1],"breakpoint":[1],"cardSize":[1,"card-size"]}]]],["af-numbered-stepper-item.cjs",[[262,"af-numbered-stepper-item",{"index":[514]}]]],["af-stat.cjs",[[257,"af-stat",{"value":[1],"label":[1]}]]],["af-testimonial-stat.cjs",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-video-container.cjs",[[262,"af-video-container",{"videoThumbnailUrl":[1,"video-thumbnail-url"],"videoAlt":[1,"video-alt"],"videoUrl":[1,"video-url"]}]]],["af-feature-grid.cjs",[[262,"af-feature-grid",{"columns":[2],"mobileLayout":[1,"mobile-layout"],"scrollProgress":[32]},null,{"mobileLayout":["onMobileLayoutChange"]}]]],["af-grid-callout.cjs",[[262,"af-grid-callout",{"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"imagePosition":[1,"image-position"],"columns":[2],"headingSize":[2,"heading-size"]}]]],["af-in-page-banner.cjs",[[262,"af-in-page-banner",{"theme":[1],"heading":[1],"description":[1],"primaryButtonText":[1,"primary-button-text"],"primaryButtonUrl":[1,"primary-button-url"],"secondaryButtonText":[1,"secondary-button-text"],"secondaryButtonUrl":[1,"secondary-button-url"],"illustrationUrl":[1,"illustration-url"],"showWaveDecoration":[4,"show-wave-decoration"]}]]],["af-split-section.cjs",[[262,"af-split-section",{"topTheme":[1,"top-theme"],"bottomTheme":[1,"bottom-theme"],"padding":[1],"container":[4]}]]],["af-testimonial-carousel.cjs",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]},[[0,"
|
|
21
|
+
return index.bootstrapLazy([["af-hero.cjs",[[262,"af-hero",{"variant":[513],"heading":[1],"description":[1],"floatNavbar":[516,"float-navbar"],"topPad":[1,"top-pad"],"maxWidth":[2,"max-width"],"maskImage":[4,"mask-image"]}]]],["af-icon-text.cjs",[[262,"af-icon-text",{"icon":[1],"headingSize":[2,"heading-size"],"orientation":[1],"iconSize":[1,"icon-size"]}]]],["af-testimonial.cjs",[[262,"af-testimonial",{"backgroundImage":[1,"background-image"],"logoImage":[1,"logo-image"],"quote":[1],"attribution":[1],"readMoreLink":[1,"read-more-link"],"showNavigation":[1028,"show-navigation"],"hasPrev":[1028,"has-prev"],"hasNext":[1028,"has-next"]}]]],["af-feature-card.cjs",[[262,"af-feature-card",{"theme":[1],"layout":[1],"cardSize":[513,"card-size"],"headingSize":[2,"heading-size"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"]}]]],["af-illustrated-card.cjs",[[262,"af-illustrated-card",{"theme":[1],"breakpoint":[1],"cardSize":[1,"card-size"]}]]],["af-numbered-stepper-item.cjs",[[262,"af-numbered-stepper-item",{"index":[514]}]]],["af-stat.cjs",[[257,"af-stat",{"value":[1],"label":[1]}]]],["af-testimonial-stat.cjs",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-video-container.cjs",[[262,"af-video-container",{"videoThumbnailUrl":[1,"video-thumbnail-url"],"videoAlt":[1,"video-alt"],"videoUrl":[1,"video-url"]}]]],["af-feature-grid.cjs",[[262,"af-feature-grid",{"columns":[2],"mobileLayout":[1,"mobile-layout"],"scrollProgress":[32]},null,{"mobileLayout":["onMobileLayoutChange"]}]]],["af-grid-callout.cjs",[[262,"af-grid-callout",{"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"imagePosition":[1,"image-position"],"columns":[2],"headingSize":[2,"heading-size"]}]]],["af-in-page-banner.cjs",[[262,"af-in-page-banner",{"theme":[1],"heading":[1],"description":[1],"primaryButtonText":[1,"primary-button-text"],"primaryButtonUrl":[1,"primary-button-url"],"secondaryButtonText":[1,"secondary-button-text"],"secondaryButtonUrl":[1,"secondary-button-url"],"illustrationUrl":[1,"illustration-url"],"showWaveDecoration":[4,"show-wave-decoration"]}]]],["af-split-section.cjs",[[262,"af-split-section",{"topTheme":[1,"top-theme"],"bottomTheme":[1,"bottom-theme"],"padding":[1],"container":[4]}]]],["af-testimonial-carousel.cjs",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]},[[0,"afNavPrev","handleNavPrev"],[0,"afNavNext","handleNavNext"]]]]],["af-text-image.cjs",[[262,"af-text-image",{"imagePosition":[1,"image-position"],"imageProportion":[1,"image-proportion"],"src":[1],"alt":[1],"showSecondLockup":[4,"show-second-lockup"]}]]],["af-accordion.cjs",[[262,"af-accordion",{"mode":[1],"value":[1025],"defaultValue":[1,"default-value"],"internalValue":[32]},[[0,"af-accordion-toggle","handleItemToggle"]],{"value":["handleValueChange"]}]]],["af-accordion-item.cjs",[[257,"af-accordion-item",{"itemId":[513,"item-id"],"open":[1540],"disabled":[516],"contentHeight":[32],"toggle":[64]},null,{"open":["handleOpenChange"]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-center.cjs",[[257,"af-center",{"axis":[1],"inline":[4],"minHeight":[1,"min-height"]}]]],["af-checkbox.cjs",[[257,"af-checkbox",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[1],"value":[1]}]]],["af-client-carousel.cjs",[[262,"af-client-carousel",{"theme":[1],"rows":[2],"mode":[1]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-contact-item.cjs",[[262,"af-contact-item",{"label":[1],"value":[1]}]]],["af-divider.cjs",[[257,"af-divider",{"orientation":[1],"spacing":[1]}]]],["af-feature-accordion.cjs",[[262,"af-feature-accordion",{"heading":[1],"items":[1],"cycleInterval":[2,"cycle-interval"],"autoCycle":[4,"auto-cycle"],"expandedIndex":[32],"timerProgress":[32]},null,{"autoCycle":["handleAutoCycleChange"]}]]],["af-fieldset.cjs",[[257,"af-fieldset",{"legend":[1],"orientation":[1],"disabled":[516]}]]],["af-footer.cjs",[[262,"af-footer",{"copyrightText":[1,"copyright-text"],"statusText":[1,"status-text"],"statusUrl":[1,"status-url"],"systemsOperational":[4,"systems-operational"],"showStatus":[4,"show-status"]}]]],["af-footer-column.cjs",[[262,"af-footer-column",{"heading":[1]}]]],["af-footer-link.cjs",[[262,"af-footer-link",{"href":[1],"external":[4]}]]],["af-grid.cjs",[[257,"af-grid",{"columns":[2],"columnsLg":[2,"columns-lg"],"columnsMd":[2,"columns-md"],"columnsSm":[2,"columns-sm"],"gap":[1],"align":[1]}]]],["af-inline.cjs",[[257,"af-inline",{"gap":[1],"align":[1],"justify":[1],"wrap":[4]}]]],["af-input.cjs",[[257,"af-input",{"label":[1],"description":[1],"placeholder":[1],"value":[1025],"type":[1],"name":[1],"disabled":[516],"required":[4],"readonly":[4],"error":[1],"showInfoIcon":[4,"show-info-icon"],"showSearchIcon":[4,"show-search-icon"],"clearable":[4],"autocomplete":[1],"maxlength":[2],"minlength":[2],"pattern":[1],"isFocused":[32],"isHovered":[32]}]]],["af-logo-well.cjs",[[257,"af-logo-well"]]],["af-nav-accordion.cjs",[[262,"af-nav-accordion",{"mode":[1],"breakpoint":[513],"value":[1025],"internalValue":[32]},[[0,"af-nav-accordion-item-toggle","handleItemToggle"]]]]],["af-nav-accordion-item.cjs",[[262,"af-nav-accordion-item",{"itemId":[513,"item-id"],"label":[1],"open":[1540],"disabled":[516],"href":[1],"breakpoint":[513],"contentHeight":[32],"hasTriggerSlot":[32],"hasContent":[32],"toggle":[64]},null,{"open":["handleOpenChange"]}]]],["af-nav-card.cjs",[[258,"af-nav-card",{"heading":[1],"href":[1],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"isHovered":[32]}]]],["af-nav-menu.cjs",[[262,"af-nav-menu",{"heading":[1],"breakpoint":[1],"showBorder":[4,"show-border"],"cardStyle":[516,"card-style"]}]]],["af-nav-menu-nest.cjs",[[262,"af-nav-menu-nest",{"type":[1],"breakpoint":[1],"showSidebarBorder":[516,"show-sidebar-border"]}]]],["af-numbered-stepper.cjs",[[262,"af-numbered-stepper",{"orientation":[1]}]]],["af-paperclip-decoration.cjs",[[257,"af-paperclip-decoration",{"width":[1],"height":[1],"opacity":[2],"fill":[1]}]]],["af-radio.cjs",[[257,"af-radio",{"checked":[1540],"disabled":[516],"name":[513],"value":[1]}]]],["af-show.cjs",[[257,"af-show",{"above":[1],"below":[1]}]]],["af-social-link.cjs",[[262,"af-social-link",{"href":[1],"label":[1],"icon":[1]}]]],["af-spacer.cjs",[[257,"af-spacer",{"size":[1],"flex":[4],"axis":[1]}]]],["af-stack.cjs",[[257,"af-stack",{"direction":[1],"gap":[1],"align":[1],"justify":[1],"wrap":[4]}]]],["af-stats-row.cjs",[[262,"af-stats-row"]]],["af-stepper.cjs",[[262,"af-stepper",{"orientation":[1]}]]],["af-stepper-step.cjs",[[262,"af-stepper-step",{"index":[514]}]]],["af-switch.cjs",[[257,"af-switch",{"active":[1540],"disabled":[516],"name":[1],"value":[1]}]]],["af-tab.cjs",[[257,"af-tab",{"label":[1],"active":[516],"disabled":[516],"shape":[513],"displayIcon":[4,"display-icon"],"displayNumber":[4,"display-number"],"value":[1]}]]],["af-tab-bar.cjs",[[257,"af-tab-bar",{"shape":[513],"breakpoint":[513]},[[0,"keydown","handleKeyDown"]]]]],["af-tag.cjs",[[257,"af-tag",{"size":[1],"variant":[1],"href":[1]}]]],["af-text-image-nest.cjs",[[262,"af-text-image-nest",{"layout":[1]}]]],["af-textarea.cjs",[[257,"af-textarea",{"label":[1],"description":[1],"placeholder":[1],"value":[1025],"name":[1],"disabled":[516],"required":[4],"readonly":[4],"error":[1],"showInfoIcon":[4,"show-info-icon"],"rows":[2],"maxlength":[2],"minlength":[2],"resize":[1],"isFocused":[32],"isHovered":[32]}]]],["af-theme-override.cjs",[[262,"af-theme-override",{"theme":[1]}]]],["af-visually-hidden.cjs",[[257,"af-visually-hidden",{"focusable":[4]}]]],["af-icon-box.cjs",[[258,"af-icon-box",{"icon":[1],"size":[1]}]]],["af-section.cjs",[[262,"af-section",{"padding":[1],"theme":[1],"container":[4]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[513],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-image.cjs",[[258,"af-image",{"src":[1],"alt":[1],"shape":[1]}]]],["af-number-badge.cjs",[[257,"af-number-badge",{"number":[2],"variant":[1],"size":[2]}]]],["af-button.cjs",[[257,"af-button",{"variant":[513],"size":[1],"disabled":[4],"type":[1],"href":[1],"hasIconLeft":[32],"hasIconRight":[32]}]]],["af-card.cjs",[[262,"af-card",{"theme":[1],"stretch":[516]}]]],["af-progress-line.cjs",[[258,"af-progress-line",{"progress":[2],"orientation":[1]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]],["af-icon.cjs",[[257,"af-icon",{"name":[1],"size":[2],"label":[1]}]]],["af-heading_5.cjs",[[262,"af-navbar",{"showDefaultLogo":[4,"show-default-logo"],"theme":[1],"forceMobile":[516,"force-mobile"],"mobileMenuOpen":[32],"activeDropdown":[32]},[[0,"click","handleTriggerClick"],[1,"mouseover","handleHover"],[1,"mouseleave","handleHostLeave"],[1,"mouseenter","handleHostEnter"],[4,"click","handleDocumentClick"],[4,"keydown","handleKeyDown"]]],[262,"af-nav-item",{"hierarchy":[1],"variant":[1],"breakpoint":[513],"href":[1],"active":[4]}],[257,"af-logo"],[257,"af-heading",{"level":[1],"align":[1]}],[257,"af-text",{"variant":[1],"align":[1],"as":[1]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[8,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"headingAlignment":[1,"heading-alignment"],"descriptionAlignment":[1,"description-alignment"],"buttonLayout":[1,"button-layout"],"buttonsAlignment":[1,"buttons-alignment"],"maxWidth":[2,"max-width"],"headingColor":[1,"heading-color"],"descriptionColor":[1,"description-color"],"hasDescription":[32],"hasButtons":[32]}]]]], options);
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
exports.setNonce = index.setNonce;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -5,7 +5,7 @@ var index = require('./index-BzZA0USq.js');
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await index.globalScripts();
|
|
8
|
-
return index.bootstrapLazy([["af-hero.cjs",[[262,"af-hero",{"variant":[513],"heading":[1],"description":[1],"floatNavbar":[516,"float-navbar"],"topPad":[1,"top-pad"],"maxWidth":[2,"max-width"],"maskImage":[4,"mask-image"]}]]],["af-icon-text.cjs",[[262,"af-icon-text",{"icon":[1],"headingSize":[2,"heading-size"],"orientation":[1],"iconSize":[1,"icon-size"]}]]],["af-testimonial.cjs",[[262,"af-testimonial",{"backgroundImage":[1,"background-image"],"logoImage":[1,"logo-image"],"quote":[1],"attribution":[1],"readMoreLink":[1,"read-more-link"],"showNavigation":[1028,"show-navigation"],"hasPrev":[1028,"has-prev"],"hasNext":[1028,"has-next"]}]]],["af-feature-card.cjs",[[262,"af-feature-card",{"theme":[1],"layout":[1],"cardSize":[513,"card-size"],"headingSize":[2,"heading-size"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"]}]]],["af-illustrated-card.cjs",[[262,"af-illustrated-card",{"theme":[1],"breakpoint":[1],"cardSize":[1,"card-size"]}]]],["af-numbered-stepper-item.cjs",[[262,"af-numbered-stepper-item",{"index":[514]}]]],["af-stat.cjs",[[257,"af-stat",{"value":[1],"label":[1]}]]],["af-testimonial-stat.cjs",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-video-container.cjs",[[262,"af-video-container",{"videoThumbnailUrl":[1,"video-thumbnail-url"],"videoAlt":[1,"video-alt"],"videoUrl":[1,"video-url"]}]]],["af-feature-grid.cjs",[[262,"af-feature-grid",{"columns":[2],"mobileLayout":[1,"mobile-layout"],"scrollProgress":[32]},null,{"mobileLayout":["onMobileLayoutChange"]}]]],["af-grid-callout.cjs",[[262,"af-grid-callout",{"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"imagePosition":[1,"image-position"],"columns":[2],"headingSize":[2,"heading-size"]}]]],["af-in-page-banner.cjs",[[262,"af-in-page-banner",{"theme":[1],"heading":[1],"description":[1],"primaryButtonText":[1,"primary-button-text"],"primaryButtonUrl":[1,"primary-button-url"],"secondaryButtonText":[1,"secondary-button-text"],"secondaryButtonUrl":[1,"secondary-button-url"],"illustrationUrl":[1,"illustration-url"],"showWaveDecoration":[4,"show-wave-decoration"]}]]],["af-split-section.cjs",[[262,"af-split-section",{"topTheme":[1,"top-theme"],"bottomTheme":[1,"bottom-theme"],"padding":[1],"container":[4]}]]],["af-testimonial-carousel.cjs",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]},[[0,"
|
|
8
|
+
return index.bootstrapLazy([["af-hero.cjs",[[262,"af-hero",{"variant":[513],"heading":[1],"description":[1],"floatNavbar":[516,"float-navbar"],"topPad":[1,"top-pad"],"maxWidth":[2,"max-width"],"maskImage":[4,"mask-image"]}]]],["af-icon-text.cjs",[[262,"af-icon-text",{"icon":[1],"headingSize":[2,"heading-size"],"orientation":[1],"iconSize":[1,"icon-size"]}]]],["af-testimonial.cjs",[[262,"af-testimonial",{"backgroundImage":[1,"background-image"],"logoImage":[1,"logo-image"],"quote":[1],"attribution":[1],"readMoreLink":[1,"read-more-link"],"showNavigation":[1028,"show-navigation"],"hasPrev":[1028,"has-prev"],"hasNext":[1028,"has-next"]}]]],["af-feature-card.cjs",[[262,"af-feature-card",{"theme":[1],"layout":[1],"cardSize":[513,"card-size"],"headingSize":[2,"heading-size"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"]}]]],["af-illustrated-card.cjs",[[262,"af-illustrated-card",{"theme":[1],"breakpoint":[1],"cardSize":[1,"card-size"]}]]],["af-numbered-stepper-item.cjs",[[262,"af-numbered-stepper-item",{"index":[514]}]]],["af-stat.cjs",[[257,"af-stat",{"value":[1],"label":[1]}]]],["af-testimonial-stat.cjs",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-video-container.cjs",[[262,"af-video-container",{"videoThumbnailUrl":[1,"video-thumbnail-url"],"videoAlt":[1,"video-alt"],"videoUrl":[1,"video-url"]}]]],["af-feature-grid.cjs",[[262,"af-feature-grid",{"columns":[2],"mobileLayout":[1,"mobile-layout"],"scrollProgress":[32]},null,{"mobileLayout":["onMobileLayoutChange"]}]]],["af-grid-callout.cjs",[[262,"af-grid-callout",{"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"imagePosition":[1,"image-position"],"columns":[2],"headingSize":[2,"heading-size"]}]]],["af-in-page-banner.cjs",[[262,"af-in-page-banner",{"theme":[1],"heading":[1],"description":[1],"primaryButtonText":[1,"primary-button-text"],"primaryButtonUrl":[1,"primary-button-url"],"secondaryButtonText":[1,"secondary-button-text"],"secondaryButtonUrl":[1,"secondary-button-url"],"illustrationUrl":[1,"illustration-url"],"showWaveDecoration":[4,"show-wave-decoration"]}]]],["af-split-section.cjs",[[262,"af-split-section",{"topTheme":[1,"top-theme"],"bottomTheme":[1,"bottom-theme"],"padding":[1],"container":[4]}]]],["af-testimonial-carousel.cjs",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]},[[0,"afNavPrev","handleNavPrev"],[0,"afNavNext","handleNavNext"]]]]],["af-text-image.cjs",[[262,"af-text-image",{"imagePosition":[1,"image-position"],"imageProportion":[1,"image-proportion"],"src":[1],"alt":[1],"showSecondLockup":[4,"show-second-lockup"]}]]],["af-accordion.cjs",[[262,"af-accordion",{"mode":[1],"value":[1025],"defaultValue":[1,"default-value"],"internalValue":[32]},[[0,"af-accordion-toggle","handleItemToggle"]],{"value":["handleValueChange"]}]]],["af-accordion-item.cjs",[[257,"af-accordion-item",{"itemId":[513,"item-id"],"open":[1540],"disabled":[516],"contentHeight":[32],"toggle":[64]},null,{"open":["handleOpenChange"]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-center.cjs",[[257,"af-center",{"axis":[1],"inline":[4],"minHeight":[1,"min-height"]}]]],["af-checkbox.cjs",[[257,"af-checkbox",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[1],"value":[1]}]]],["af-client-carousel.cjs",[[262,"af-client-carousel",{"theme":[1],"rows":[2],"mode":[1]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-contact-item.cjs",[[262,"af-contact-item",{"label":[1],"value":[1]}]]],["af-divider.cjs",[[257,"af-divider",{"orientation":[1],"spacing":[1]}]]],["af-feature-accordion.cjs",[[262,"af-feature-accordion",{"heading":[1],"items":[1],"cycleInterval":[2,"cycle-interval"],"autoCycle":[4,"auto-cycle"],"expandedIndex":[32],"timerProgress":[32]},null,{"autoCycle":["handleAutoCycleChange"]}]]],["af-fieldset.cjs",[[257,"af-fieldset",{"legend":[1],"orientation":[1],"disabled":[516]}]]],["af-footer.cjs",[[262,"af-footer",{"copyrightText":[1,"copyright-text"],"statusText":[1,"status-text"],"statusUrl":[1,"status-url"],"systemsOperational":[4,"systems-operational"],"showStatus":[4,"show-status"]}]]],["af-footer-column.cjs",[[262,"af-footer-column",{"heading":[1]}]]],["af-footer-link.cjs",[[262,"af-footer-link",{"href":[1],"external":[4]}]]],["af-grid.cjs",[[257,"af-grid",{"columns":[2],"columnsLg":[2,"columns-lg"],"columnsMd":[2,"columns-md"],"columnsSm":[2,"columns-sm"],"gap":[1],"align":[1]}]]],["af-inline.cjs",[[257,"af-inline",{"gap":[1],"align":[1],"justify":[1],"wrap":[4]}]]],["af-input.cjs",[[257,"af-input",{"label":[1],"description":[1],"placeholder":[1],"value":[1025],"type":[1],"name":[1],"disabled":[516],"required":[4],"readonly":[4],"error":[1],"showInfoIcon":[4,"show-info-icon"],"showSearchIcon":[4,"show-search-icon"],"clearable":[4],"autocomplete":[1],"maxlength":[2],"minlength":[2],"pattern":[1],"isFocused":[32],"isHovered":[32]}]]],["af-logo-well.cjs",[[257,"af-logo-well"]]],["af-nav-accordion.cjs",[[262,"af-nav-accordion",{"mode":[1],"breakpoint":[513],"value":[1025],"internalValue":[32]},[[0,"af-nav-accordion-item-toggle","handleItemToggle"]]]]],["af-nav-accordion-item.cjs",[[262,"af-nav-accordion-item",{"itemId":[513,"item-id"],"label":[1],"open":[1540],"disabled":[516],"href":[1],"breakpoint":[513],"contentHeight":[32],"hasTriggerSlot":[32],"hasContent":[32],"toggle":[64]},null,{"open":["handleOpenChange"]}]]],["af-nav-card.cjs",[[258,"af-nav-card",{"heading":[1],"href":[1],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"isHovered":[32]}]]],["af-nav-menu.cjs",[[262,"af-nav-menu",{"heading":[1],"breakpoint":[1],"showBorder":[4,"show-border"],"cardStyle":[516,"card-style"]}]]],["af-nav-menu-nest.cjs",[[262,"af-nav-menu-nest",{"type":[1],"breakpoint":[1],"showSidebarBorder":[516,"show-sidebar-border"]}]]],["af-numbered-stepper.cjs",[[262,"af-numbered-stepper",{"orientation":[1]}]]],["af-paperclip-decoration.cjs",[[257,"af-paperclip-decoration",{"width":[1],"height":[1],"opacity":[2],"fill":[1]}]]],["af-radio.cjs",[[257,"af-radio",{"checked":[1540],"disabled":[516],"name":[513],"value":[1]}]]],["af-show.cjs",[[257,"af-show",{"above":[1],"below":[1]}]]],["af-social-link.cjs",[[262,"af-social-link",{"href":[1],"label":[1],"icon":[1]}]]],["af-spacer.cjs",[[257,"af-spacer",{"size":[1],"flex":[4],"axis":[1]}]]],["af-stack.cjs",[[257,"af-stack",{"direction":[1],"gap":[1],"align":[1],"justify":[1],"wrap":[4]}]]],["af-stats-row.cjs",[[262,"af-stats-row"]]],["af-stepper.cjs",[[262,"af-stepper",{"orientation":[1]}]]],["af-stepper-step.cjs",[[262,"af-stepper-step",{"index":[514]}]]],["af-switch.cjs",[[257,"af-switch",{"active":[1540],"disabled":[516],"name":[1],"value":[1]}]]],["af-tab.cjs",[[257,"af-tab",{"label":[1],"active":[516],"disabled":[516],"shape":[513],"displayIcon":[4,"display-icon"],"displayNumber":[4,"display-number"],"value":[1]}]]],["af-tab-bar.cjs",[[257,"af-tab-bar",{"shape":[513],"breakpoint":[513]},[[0,"keydown","handleKeyDown"]]]]],["af-tag.cjs",[[257,"af-tag",{"size":[1],"variant":[1],"href":[1]}]]],["af-text-image-nest.cjs",[[262,"af-text-image-nest",{"layout":[1]}]]],["af-textarea.cjs",[[257,"af-textarea",{"label":[1],"description":[1],"placeholder":[1],"value":[1025],"name":[1],"disabled":[516],"required":[4],"readonly":[4],"error":[1],"showInfoIcon":[4,"show-info-icon"],"rows":[2],"maxlength":[2],"minlength":[2],"resize":[1],"isFocused":[32],"isHovered":[32]}]]],["af-theme-override.cjs",[[262,"af-theme-override",{"theme":[1]}]]],["af-visually-hidden.cjs",[[257,"af-visually-hidden",{"focusable":[4]}]]],["af-icon-box.cjs",[[258,"af-icon-box",{"icon":[1],"size":[1]}]]],["af-section.cjs",[[262,"af-section",{"padding":[1],"theme":[1],"container":[4]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[513],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-image.cjs",[[258,"af-image",{"src":[1],"alt":[1],"shape":[1]}]]],["af-number-badge.cjs",[[257,"af-number-badge",{"number":[2],"variant":[1],"size":[2]}]]],["af-button.cjs",[[257,"af-button",{"variant":[513],"size":[1],"disabled":[4],"type":[1],"href":[1],"hasIconLeft":[32],"hasIconRight":[32]}]]],["af-card.cjs",[[262,"af-card",{"theme":[1],"stretch":[516]}]]],["af-progress-line.cjs",[[258,"af-progress-line",{"progress":[2],"orientation":[1]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]],["af-icon.cjs",[[257,"af-icon",{"name":[1],"size":[2],"label":[1]}]]],["af-heading_5.cjs",[[262,"af-navbar",{"showDefaultLogo":[4,"show-default-logo"],"theme":[1],"forceMobile":[516,"force-mobile"],"mobileMenuOpen":[32],"activeDropdown":[32]},[[0,"click","handleTriggerClick"],[1,"mouseover","handleHover"],[1,"mouseleave","handleHostLeave"],[1,"mouseenter","handleHostEnter"],[4,"click","handleDocumentClick"],[4,"keydown","handleKeyDown"]]],[262,"af-nav-item",{"hierarchy":[1],"variant":[1],"breakpoint":[513],"href":[1],"active":[4]}],[257,"af-logo"],[257,"af-heading",{"level":[1],"align":[1]}],[257,"af-text",{"variant":[1],"align":[1],"as":[1]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[8,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"headingAlignment":[1,"heading-alignment"],"descriptionAlignment":[1,"description-alignment"],"buttonLayout":[1,"button-layout"],"buttonsAlignment":[1,"buttons-alignment"],"maxWidth":[2,"max-width"],"headingColor":[1,"heading-color"],"descriptionColor":[1,"description-color"],"hasDescription":[32],"hasButtons":[32]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
exports.setNonce = index.setNonce;
|
|
@@ -22,18 +22,18 @@ export class AfTestimonial {
|
|
|
22
22
|
*/
|
|
23
23
|
this.hasNext = false;
|
|
24
24
|
this.handlePrev = () => {
|
|
25
|
-
this.
|
|
25
|
+
this.afNavPrev.emit();
|
|
26
26
|
};
|
|
27
27
|
this.handleNext = () => {
|
|
28
|
-
this.
|
|
28
|
+
this.afNavNext.emit();
|
|
29
29
|
};
|
|
30
30
|
}
|
|
31
31
|
render() {
|
|
32
|
-
return (h(Host, { key: '
|
|
32
|
+
return (h(Host, { key: '6e9852855010e696e1f3f8d250541da3f99675bb' }, h("div", { key: '779f2f42b5443b384b5d02bcdcbb8c2ea904d793', class: "testimonial-card" }, h("div", { key: 'da08dac0b57e4861d941d9ee1347234a23bc76cd', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: 'a02cb9792a2ac5d31ad06842dfe9914e02bc5f65', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: 'fe75369fdff4bd79c96eb4de4d162b124f8f8037', class: "testimonial-logo" }, h("img", { key: '21bb43f47b0c4f759f23bdbfa3ff8e07ed6d709c', src: this.logoImage, alt: "Company logo" })))), h("div", { key: 'aa07b37eb9eb25e98eb7a7ed7bda01028ef1521f', class: "testimonial-content" }, h("div", { key: '4f30fb4aaf739e1f7b05152bad8ccd0a90da0c5f', class: "testimonial-quote-section" }, h("div", { key: '3ecc3a1c62fd853bf61c8399885572f48be95f40', class: "testimonial-quote-icon" }, h("slot", { key: '838996eaa0db4d93e8ccd400021b069f32ce63ec', name: "quote-icon" }, h("af-icon", { key: '8de2e75dbf0de964f0213d3a4c4b1c3ff399cd90', name: "quote", size: 48 }))), h("div", { key: '54aa8e50eb467db8479d2bd1f18960e5016e56ae', class: "testimonial-text" }, h("slot", { key: 'f4b67d5a449754c8258db5b60d761420a836923d', name: "quote-body" }, this.quote)), h("div", { key: '80076fa3891101465cc5c94739c7b5a71448b81c', class: "testimonial-attribution" }, this.attribution)), h("div", { key: '7dc0037ded29ba32536fa4b1ef68a383849cef3d', class: "testimonial-stats" }, h("slot", { key: '6146b401ec0a2f840f6f4e80b3352c1ff51c243d', name: "stats" })), h("div", { key: 'a5c3f27c91aaa05c24f6db2fe507a6a3ae7a4457', class: "testimonial-footer" }, h("div", { key: '82aac81fe42e157bd713bde5562832b6d2a3a08c', class: "testimonial-nav" }, this.showNavigation ? (
|
|
33
33
|
// Render built-in navigation buttons
|
|
34
34
|
h("div", { class: "testimonial-nav-buttons" }, h("af-icon-button", { variant: "secondary", disabled: !this.hasPrev, onClick: this.handlePrev, ariaLabel: "Previous testimonial" }, h("af-icon", { name: "arrow-left", size: 24 })), h("af-icon-button", { variant: "secondary", disabled: !this.hasNext, onClick: this.handleNext, ariaLabel: "Next testimonial" }, h("af-icon", { name: "arrow-right", size: 24 })))) : (
|
|
35
35
|
// Allow custom navigation via slot
|
|
36
|
-
h("slot", { name: "navigation" }))), this.readMoreLink && (h("af-button", { key: '
|
|
36
|
+
h("slot", { name: "navigation" }))), this.readMoreLink && (h("af-button", { key: '8f3ff6293ae51a697c90d6c4e0c74276abb9da1a', variant: "secondary", href: this.readMoreLink }, "Read full story", h("af-icon", { key: 'afcaf06157c82fbc85eed2dd8cb2794d48b7d7fe', slot: "icon-right", name: "arrow-right", size: 24 }))))))));
|
|
37
37
|
}
|
|
38
38
|
static get is() { return "af-testimonial"; }
|
|
39
39
|
static get encapsulation() { return "scoped"; }
|
|
@@ -208,8 +208,8 @@ export class AfTestimonial {
|
|
|
208
208
|
}
|
|
209
209
|
static get events() {
|
|
210
210
|
return [{
|
|
211
|
-
"method": "
|
|
212
|
-
"name": "
|
|
211
|
+
"method": "afNavPrev",
|
|
212
|
+
"name": "afNavPrev",
|
|
213
213
|
"bubbles": true,
|
|
214
214
|
"cancelable": true,
|
|
215
215
|
"composed": true,
|
|
@@ -223,8 +223,8 @@ export class AfTestimonial {
|
|
|
223
223
|
"references": {}
|
|
224
224
|
}
|
|
225
225
|
}, {
|
|
226
|
-
"method": "
|
|
227
|
-
"name": "
|
|
226
|
+
"method": "afNavNext",
|
|
227
|
+
"name": "afNavNext",
|
|
228
228
|
"bubbles": true,
|
|
229
229
|
"cancelable": true,
|
|
230
230
|
"composed": true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-testimonial.js","sourceRoot":"","sources":["../../../src/components/af-testimonial/af-testimonial.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;;;;;;GAOG;AAOH,MAAM,OAAO,aAAa;IAN1B;QAiCE;;WAEG;QACsB,mBAAc,GAAY,KAAK,CAAC;QAEzD;;WAEG;QACsB,YAAO,GAAY,KAAK,CAAC;QAElD;;WAEG;QACsB,YAAO,GAAY,KAAK,CAAC;QAY1C,eAAU,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"af-testimonial.js","sourceRoot":"","sources":["../../../src/components/af-testimonial/af-testimonial.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot quote-body - Rich quote content (paragraphs, lists). Overrides the\n * `quote` string prop when provided. Use for testimonials that include\n * multiple paragraphs, bulleted points, or inline emphasis.\n * @slot quote-icon - Quote icon (defaults to af-icon name=\"quote\").\n * @slot stats - Statistic items (af-testimonial-stat components).\n * @slot navigation - Custom nav controls (when not using built-in ones).\n */\n@Component({\n tag: 'af-testimonial',\n styleUrl: 'af-testimonial.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonial {\n /**\n * Background image URL for the testimonial card\n */\n @Prop() backgroundImage?: string;\n\n /**\n * Company logo URL\n */\n @Prop() logoImage?: string;\n\n /**\n * Testimonial quote text. Falls back to the `quote-body` slot if that\n * slot has content.\n */\n @Prop() quote?: string;\n\n /**\n * Attribution text (e.g., \"– Nathaniel Barrs, CTO, PSC Insurance\")\n */\n @Prop() attribution!: string;\n\n /**\n * Link to full case study\n */\n @Prop() readMoreLink?: string;\n\n /**\n * Whether to show built-in navigation buttons (used when in a carousel)\n */\n @Prop({ mutable: true }) showNavigation: boolean = false;\n\n /**\n * Whether the previous button is enabled\n */\n @Prop({ mutable: true }) hasPrev: boolean = false;\n\n /**\n * Whether the next button is enabled\n */\n @Prop({ mutable: true }) hasNext: boolean = false;\n\n /**\n * Emitted when the previous button is clicked\n */\n @Event() afNavPrev!: EventEmitter<void>;\n\n /**\n * Emitted when the next button is clicked\n */\n @Event() afNavNext!: EventEmitter<void>;\n\n private handlePrev = () => {\n this.afNavPrev.emit();\n };\n\n private handleNext = () => {\n this.afNavNext.emit();\n };\n\n render() {\n return (\n <Host>\n <div class=\"testimonial-card\">\n {/* Image side */}\n <div class=\"testimonial-image\">\n {this.backgroundImage && (\n <img src={this.backgroundImage} alt=\"\" class=\"testimonial-bg-image\" />\n )}\n {this.logoImage && (\n <div class=\"testimonial-logo\">\n <img src={this.logoImage} alt=\"Company logo\" />\n </div>\n )}\n </div>\n\n {/* Content side */}\n <div class=\"testimonial-content\">\n <div class=\"testimonial-quote-section\">\n {/* Quote icon - using af-icon atom with slot for flexibility */}\n <div class=\"testimonial-quote-icon\">\n <slot name=\"quote-icon\">\n <af-icon name=\"quote\" size={48} />\n </slot>\n </div>\n\n {/* Quote text — slot takes priority; falls back to prop. */}\n <div class=\"testimonial-text\">\n <slot name=\"quote-body\">{this.quote}</slot>\n </div>\n {/* Attribution */}\n <div class=\"testimonial-attribution\">{this.attribution}</div>\n </div>\n\n {/* Statistics slot */}\n <div class=\"testimonial-stats\">\n <slot name=\"stats\"></slot>\n </div>\n\n {/* Footer with navigation and CTA */}\n <div class=\"testimonial-footer\">\n <div class=\"testimonial-nav\">\n {this.showNavigation ? (\n // Render built-in navigation buttons\n <div class=\"testimonial-nav-buttons\">\n <af-icon-button\n variant=\"secondary\"\n disabled={!this.hasPrev}\n onClick={this.handlePrev}\n ariaLabel=\"Previous testimonial\"\n >\n <af-icon name=\"arrow-left\" size={24} />\n </af-icon-button>\n <af-icon-button\n variant=\"secondary\"\n disabled={!this.hasNext}\n onClick={this.handleNext}\n ariaLabel=\"Next testimonial\"\n >\n <af-icon name=\"arrow-right\" size={24} />\n </af-icon-button>\n </div>\n ) : (\n // Allow custom navigation via slot\n <slot name=\"navigation\"></slot>\n )}\n </div>\n {this.readMoreLink && (\n <af-button variant=\"secondary\" href={this.readMoreLink}>\n Read full story\n <af-icon slot=\"icon-right\" name=\"arrow-right\" size={24} />\n </af-button>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n\n"]}
|
|
@@ -94,7 +94,7 @@ export class AfTestimonialCarousel {
|
|
|
94
94
|
return (this.currentIndex + 1) / this.testimonialCount;
|
|
95
95
|
}
|
|
96
96
|
render() {
|
|
97
|
-
return (h(Host, { key: '
|
|
97
|
+
return (h(Host, { key: 'a3dba3e3073b5a0009a68896c962269dec2ec580' }, h("div", { key: '21e3310b04dced5b58bf88ffbe773ad7ed3f56be', class: "testimonial-carousel" }, h("div", { key: '85fe5a7dc6b0dc55e7602c75b273492082b17ab5', class: "testimonial-slides" }, h("slot", { key: '6712252f49721d7d63b4e136ddff6f40a043cd4e' })), this.testimonialCount > 1 && (h("div", { key: '212be1b74d47c371f1942808475fbb459760aff5', class: "testimonial-progress" }, h("af-progress-line", { key: '7b8ec0176748a0e20cf5cfc653bb3be798a1e6df', progress: this.getProgress() }))))));
|
|
98
98
|
}
|
|
99
99
|
static get is() { return "af-testimonial-carousel"; }
|
|
100
100
|
static get encapsulation() { return "scoped"; }
|
|
@@ -118,13 +118,13 @@ export class AfTestimonialCarousel {
|
|
|
118
118
|
static get elementRef() { return "host"; }
|
|
119
119
|
static get listeners() {
|
|
120
120
|
return [{
|
|
121
|
-
"name": "
|
|
121
|
+
"name": "afNavPrev",
|
|
122
122
|
"method": "handleNavPrev",
|
|
123
123
|
"target": undefined,
|
|
124
124
|
"capture": false,
|
|
125
125
|
"passive": false
|
|
126
126
|
}, {
|
|
127
|
-
"name": "
|
|
127
|
+
"name": "afNavNext",
|
|
128
128
|
"method": "handleNavNext",
|
|
129
129
|
"target": undefined,
|
|
130
130
|
"capture": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-testimonial-carousel.js","sourceRoot":"","sources":["../../../src/components/af-testimonial-carousel/af-testimonial-carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, h, Host, Element, Listen } from '@stencil/core';\n\n/**\n * TestimonialCarousel - Carousel for displaying multiple customer testimonials.\n * \n * Handles navigation between testimonials with progress indicator.\n * Wrap in Section/Container for proper page layout and theming.\n * \n * @slot - Testimonial components to display in the carousel\n */\n@Component({\n tag: 'af-testimonial-carousel',\n styleUrl: 'af-testimonial-carousel.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonialCarousel {\n @Element() host!: HTMLElement;\n @State() currentIndex: number = 0;\n @State() isAnimating: boolean = false;\n @State() testimonialCount: number = 0;\n\n private testimonials: HTMLElement[] = [];\n private observer: MutationObserver | undefined;\n\n componentDidLoad() {\n this.detectTestimonials();\n \n // Watch for testimonials being added (for React async rendering)\n this.observer = new MutationObserver(() => {\n this.detectTestimonials();\n });\n \n this.observer.observe(this.host, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n /**\n * Listen for navigation events from testimonials\n */\n @Listen('
|
|
1
|
+
{"version":3,"file":"af-testimonial-carousel.js","sourceRoot":"","sources":["../../../src/components/af-testimonial-carousel/af-testimonial-carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE3E;;;;;;;GAOG;AAOH,MAAM,OAAO,qBAAqB;IANlC;QAQW,iBAAY,GAAW,CAAC,CAAC;QACzB,gBAAW,GAAY,KAAK,CAAC;QAC7B,qBAAgB,GAAW,CAAC,CAAC;QAE9B,iBAAY,GAAkB,EAAE,CAAC;QAoEjC,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC;gBAAE,OAAO;YAExD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;YAC1C,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAEhC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAC3B,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC,CAAC;QAEM,aAAQ,GAAG,GAAG,EAAE;YACtB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,GAAG,CAAC;gBAAE,OAAO;YAE/E,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;YAC1C,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAEhC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAC3B,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC,CAAC;KA4BH;IAnHC,gBAAgB;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAE1B,iEAAiE;QACjE,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACxC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;YAC/B,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,aAAa;QACX,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAEO,kBAAkB;QACxB,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAkB,CAAC;QAElG,IAAI,eAAe,CAAC,MAAM,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC;YACxD,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC;YACpC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC,MAAM,CAAC;YAE/C,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACjC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;gBACtB,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAClC,CAAC;QACH,CAAC;IACH,CAAC;IAEO,wBAAwB;QAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QACtC,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;QAC9D,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;QAE1C,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;YAC/C,MAAM,MAAM,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,GAAG,CAAC;YACjD,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,MAAM,IAAI,CAAC;YACvD,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;YACpE,WAAW,CAAC,KAAK,CAAC,aAAa,GAAG,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;YAEhF,6EAA6E;YAC5E,WAAmB,CAAC,cAAc,GAAG,OAAO,CAAC;YAC7C,WAAmB,CAAC,OAAO,GAAG,OAAO,CAAC;YACtC,WAAmB,CAAC,OAAO,GAAG,OAAO,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC;IA0BD;;OAEG;IACK,WAAW;QACjB,IAAI,IAAI,CAAC,gBAAgB,IAAI,CAAC;YAAE,OAAO,CAAC,CAAC;QACzC,OAAO,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC;IACzD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,sBAAsB;gBAC/B,4DAAK,KAAK,EAAC,oBAAoB;oBAC7B,8DAAa,CACT;gBAGL,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAC5B,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,yEAAkB,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,GAAI,CAC9C,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, State, h, Host, Element, Listen } from '@stencil/core';\n\n/**\n * TestimonialCarousel - Carousel for displaying multiple customer testimonials.\n * \n * Handles navigation between testimonials with progress indicator.\n * Wrap in Section/Container for proper page layout and theming.\n * \n * @slot - Testimonial components to display in the carousel\n */\n@Component({\n tag: 'af-testimonial-carousel',\n styleUrl: 'af-testimonial-carousel.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonialCarousel {\n @Element() host!: HTMLElement;\n @State() currentIndex: number = 0;\n @State() isAnimating: boolean = false;\n @State() testimonialCount: number = 0;\n\n private testimonials: HTMLElement[] = [];\n private observer: MutationObserver | undefined;\n\n componentDidLoad() {\n this.detectTestimonials();\n \n // Watch for testimonials being added (for React async rendering)\n this.observer = new MutationObserver(() => {\n this.detectTestimonials();\n });\n \n this.observer.observe(this.host, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n /**\n * Listen for navigation events from testimonials\n */\n @Listen('afNavPrev')\n handleNavPrev() {\n this.goToPrevious();\n }\n\n @Listen('afNavNext')\n handleNavNext() {\n this.goToNext();\n }\n\n private detectTestimonials() {\n const newTestimonials = Array.from(this.host.querySelectorAll('af-testimonial')) as HTMLElement[];\n \n if (newTestimonials.length !== this.testimonials.length) {\n this.testimonials = newTestimonials;\n this.testimonialCount = newTestimonials.length;\n \n if (this.testimonials.length > 0) {\n this.currentIndex = 0;\n this.updateVisibleTestimonial();\n }\n }\n }\n\n private updateVisibleTestimonial() {\n const hasPrev = this.currentIndex > 0;\n const hasNext = this.currentIndex < this.testimonialCount - 1;\n const showNav = this.testimonialCount > 1;\n\n this.testimonials.forEach((testimonial, index) => {\n const offset = (index - this.currentIndex) * 100;\n testimonial.style.transform = `translateX(${offset}%)`;\n testimonial.style.opacity = index === this.currentIndex ? '1' : '0';\n testimonial.style.pointerEvents = index === this.currentIndex ? 'auto' : 'none';\n \n // Set navigation props on testimonials (directly on the element for Stencil)\n (testimonial as any).showNavigation = showNav;\n (testimonial as any).hasPrev = hasPrev;\n (testimonial as any).hasNext = hasNext;\n });\n }\n\n private goToPrevious = () => {\n if (this.isAnimating || this.currentIndex === 0) return;\n \n this.isAnimating = true;\n this.currentIndex = this.currentIndex - 1;\n this.updateVisibleTestimonial();\n \n setTimeout(() => {\n this.isAnimating = false;\n }, 500);\n };\n\n private goToNext = () => {\n if (this.isAnimating || this.currentIndex >= this.testimonialCount - 1) return;\n \n this.isAnimating = true;\n this.currentIndex = this.currentIndex + 1;\n this.updateVisibleTestimonial();\n \n setTimeout(() => {\n this.isAnimating = false;\n }, 500);\n };\n\n /**\n * Calculate progress value (0 to 1) based on current position\n */\n private getProgress(): number {\n if (this.testimonialCount <= 1) return 0;\n return (this.currentIndex + 1) / this.testimonialCount;\n }\n\n render() {\n return (\n <Host>\n <div class=\"testimonial-carousel\">\n <div class=\"testimonial-slides\">\n <slot></slot>\n </div>\n \n {/* Progress indicator using af-progress-line atom */}\n {this.testimonialCount > 1 && (\n <div class=\"testimonial-progress\">\n <af-progress-line progress={this.getProgress()} />\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n\n"]}
|
|
@@ -34,7 +34,7 @@ export class AfVideoContainer {
|
|
|
34
34
|
* Handles play button click - emits event and optionally opens URL
|
|
35
35
|
*/
|
|
36
36
|
this.handlePlayClick = () => {
|
|
37
|
-
const event = this.
|
|
37
|
+
const event = this.afPlayClick.emit({ videoUrl: this.videoUrl });
|
|
38
38
|
// Only open URL if event wasn't prevented and URL exists
|
|
39
39
|
if (!event.defaultPrevented && this.videoUrl) {
|
|
40
40
|
window.open(this.videoUrl, '_blank');
|
|
@@ -42,7 +42,7 @@ export class AfVideoContainer {
|
|
|
42
42
|
};
|
|
43
43
|
}
|
|
44
44
|
render() {
|
|
45
|
-
return (h(Host, { key: '
|
|
45
|
+
return (h(Host, { key: '6554d80d7b00b2e7c2ebed35d10fe48b2e55af21' }, h("div", { key: '7acffa76ffb032446270850359deb315af18dd43', class: "video-container" }, h("div", { key: 'd79361dc04ce97b953754a63b76805be4391b593', class: "video-container__top" }, h("slot", { key: 'c5b1f43ecfb23cc39cc83dba5711a70eb909edef', name: "top" })), h("div", { key: 'd2159295b5950d500f06389ce2d394c7e7c902db', class: "video-container__video" }, h("af-aspect-ratio", { key: 'fb17e071a5003a62f6fd8037a5d73d5f195eee14', ratio: "16:9" }, h("div", { key: 'c1aaedd7603b9a024f8bbe1ac280597e662b5c07', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: 'a55c605d6e07c569cdcbd3ecd1239e3d6ba63bc3', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: 'd04a4b4b5313327e5d81e75219ae9bc0d3866c33', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: '52bc748aacd58d1acc1f22e2acfb07eb71447cdc', name: "play", size: 24 }))))), h("div", { key: '8f423ee569de7c7749f675d7815a50b4d491252e', class: "video-container__bottom" }, h("slot", { key: 'd645d52209cb8537a7286b161c257ebd011cc061', name: "bottom" })))));
|
|
46
46
|
}
|
|
47
47
|
static get is() { return "af-video-container"; }
|
|
48
48
|
static get encapsulation() { return "scoped"; }
|
|
@@ -122,8 +122,8 @@ export class AfVideoContainer {
|
|
|
122
122
|
}
|
|
123
123
|
static get events() {
|
|
124
124
|
return [{
|
|
125
|
-
"method": "
|
|
126
|
-
"name": "
|
|
125
|
+
"method": "afPlayClick",
|
|
126
|
+
"name": "afPlayClick",
|
|
127
127
|
"bubbles": true,
|
|
128
128
|
"cancelable": true,
|
|
129
129
|
"composed": true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-video-container.js","sourceRoot":"","sources":["../../../src/components/af-video-container/af-video-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAOH,MAAM,OAAO,gBAAgB;IAN7B;QAOE,gCAAgC;QACxB,sBAAiB,GAAW,EAAE,CAAC;QAEvC,uCAAuC;QAC/B,aAAQ,GAAW,iBAAiB,CAAC;QAE7C,8CAA8C;QACtC,aAAQ,GAAW,EAAE,CAAC;QAS9B;;WAEG;QACK,oBAAe,GAAG,GAAG,EAAE;YAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"af-video-container.js","sourceRoot":"","sources":["../../../src/components/af-video-container/af-video-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAOH,MAAM,OAAO,gBAAgB;IAN7B;QAOE,gCAAgC;QACxB,sBAAiB,GAAW,EAAE,CAAC;QAEvC,uCAAuC;QAC/B,aAAQ,GAAW,iBAAiB,CAAC;QAE7C,8CAA8C;QACtC,aAAQ,GAAW,EAAE,CAAC;QAS9B;;WAEG;QACK,oBAAe,GAAG,GAAG,EAAE;YAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YAEjE,yDAAyD;YACzD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC7C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC;KA4CH;IA1CC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,iBAAiB;gBAE1B,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB;gBAGN,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,wEAAiB,KAAK,EAAC,MAAM;wBAC3B,4DAAK,KAAK,EAAC,oCAAoC;4BAC5C,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DACE,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,MAAM,GACd,CACH;4BAED,+DACE,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,eAAe,gBAClB,YAAY,EACvB,IAAI,EAAC,QAAQ;gCAEb,gEAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,GAAY,CAClC,CACL,CACU,CACd;gBAGN,4DAAK,KAAK,EAAC,yBAAyB;oBAClC,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Video Container molecule component for showcasing video content.\n * \n * Uses slots for typography lockups above and below the video.\n * When used inside af-split-section, the top slot inherits the top theme\n * and the bottom slot inherits the bottom theme for correct colors.\n * \n * @example\n * ```html\n * <af-split-section top-theme=\"mist-green\" bottom-theme=\"white\">\n * <af-video-container video-thumbnail-url=\"/path/to/thumbnail.jpg\">\n * <af-typography-lockup slot=\"top\" text-alignment=\"center\" heading-size=\"2\">\n * <af-heading level=\"2\">Watch our product demo</af-heading>\n * <af-text slot=\"description\">See how Affinda transforms your workflow</af-text>\n * <af-button slot=\"buttons\" variant=\"primary\">Get Started</af-button>\n * </af-typography-lockup>\n * </af-video-container>\n * </af-split-section>\n * ```\n * \n * @slot top - Content above the video (typically af-typography-lockup). Inherits top theme.\n * @slot bottom - Content below the video (typically af-typography-lockup). Inherits bottom theme.\n */\n@Component({\n tag: 'af-video-container',\n styleUrl: 'af-video-container.css',\n shadow: false,\n scoped: true,\n})\nexport class AfVideoContainer {\n /** Video thumbnail image URL */\n @Prop() videoThumbnailUrl: string = '';\n\n /** Video alt text for accessibility */\n @Prop() videoAlt: string = 'Video thumbnail';\n\n /** Optional video URL for play button link */\n @Prop() videoUrl: string = '';\n\n /** \n * Emitted when the play button is clicked.\n * Use this to handle video playback (e.g., open modal, embed player).\n * If videoUrl is set and no handler prevents default, opens URL in new tab.\n */\n @Event() afPlayClick!: EventEmitter<{ videoUrl: string }>;\n\n /**\n * Handles play button click - emits event and optionally opens URL\n */\n private handlePlayClick = () => {\n const event = this.afPlayClick.emit({ videoUrl: this.videoUrl });\n \n // Only open URL if event wasn't prevented and URL exists\n if (!event.defaultPrevented && this.videoUrl) {\n window.open(this.videoUrl, '_blank');\n }\n };\n\n render() {\n return (\n <Host>\n <div class=\"video-container\">\n {/* Top slot - for typography lockup above video (inherits top theme) */}\n <div class=\"video-container__top\">\n <slot name=\"top\"></slot>\n </div>\n\n {/* Video thumbnail section */}\n <div class=\"video-container__video\">\n <af-aspect-ratio ratio=\"16:9\">\n <div class=\"video-container__thumbnail-wrapper\">\n {this.videoThumbnailUrl && (\n <img \n src={this.videoThumbnailUrl} \n alt={this.videoAlt}\n class=\"video-container__thumbnail\"\n loading=\"lazy\"\n />\n )}\n {/* Play button overlay */}\n <button \n class=\"video-container__play-button\"\n onClick={this.handlePlayClick}\n aria-label=\"Play video\"\n type=\"button\"\n >\n <af-icon name=\"play\" size={24}></af-icon>\n </button>\n </div>\n </af-aspect-ratio>\n </div>\n\n {/* Bottom slot - for typography lockup below video (inherits bottom theme) */}\n <div class=\"video-container__bottom\">\n <slot name=\"bottom\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"]}
|
|
@@ -94,7 +94,7 @@ const AfTestimonialCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimo
|
|
|
94
94
|
return (this.currentIndex + 1) / this.testimonialCount;
|
|
95
95
|
}
|
|
96
96
|
render() {
|
|
97
|
-
return (h(Host, { key: '
|
|
97
|
+
return (h(Host, { key: 'a3dba3e3073b5a0009a68896c962269dec2ec580' }, h("div", { key: '21e3310b04dced5b58bf88ffbe773ad7ed3f56be', class: "testimonial-carousel" }, h("div", { key: '85fe5a7dc6b0dc55e7602c75b273492082b17ab5', class: "testimonial-slides" }, h("slot", { key: '6712252f49721d7d63b4e136ddff6f40a043cd4e' })), this.testimonialCount > 1 && (h("div", { key: '212be1b74d47c371f1942808475fbb459760aff5', class: "testimonial-progress" }, h("af-progress-line", { key: '7b8ec0176748a0e20cf5cfc653bb3be798a1e6df', progress: this.getProgress() }))))));
|
|
98
98
|
}
|
|
99
99
|
get host() { return this; }
|
|
100
100
|
static get style() { return afTestimonialCarouselCss; }
|
|
@@ -102,7 +102,7 @@ const AfTestimonialCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimo
|
|
|
102
102
|
"currentIndex": [32],
|
|
103
103
|
"isAnimating": [32],
|
|
104
104
|
"testimonialCount": [32]
|
|
105
|
-
}, [[0, "
|
|
105
|
+
}, [[0, "afNavPrev", "handleNavPrev"], [0, "afNavNext", "handleNavNext"]]]);
|
|
106
106
|
function defineCustomElement$1() {
|
|
107
107
|
if (typeof customElements === "undefined") {
|
|
108
108
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"af-testimonial-carousel.js","mappings":"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","names":["AfTestimonialCarousel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-testimonial-carousel/af-testimonial-carousel.css?tag=af-testimonial-carousel&encapsulation=scoped","src/components/af-testimonial-carousel/af-testimonial-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.testimonial-carousel {\n position: relative;\n width: 100%;\n overflow: hidden;\n}\n\n.testimonial-slides {\n position: relative;\n width: 100%;\n min-height: 544px;\n overflow: hidden;\n}\n\n.testimonial-slides ::slotted(af-testimonial) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;\n}\n\n/* Respect reduced motion: slides can auto-advance, so remove the\n * 500ms cross-fade/slide transition and swap instantly. */\n@media (prefers-reduced-motion: reduce) {\n .testimonial-slides ::slotted(af-testimonial) {\n transition: none;\n }\n}\n\n/* Progress indicator - wraps af-progress-line atom */\n/* Per Figma: centered below the card with horizontal padding */\n.testimonial-progress {\n margin-top: 32px;\n max-width: 840px;\n margin-left: auto;\n margin-right: auto;\n}\n\n/* Navigation is now rendered inside each testimonial's footer via props */\n\n","import { Component, State, h, Host, Element, Listen } from '@stencil/core';\n\n/**\n * TestimonialCarousel - Carousel for displaying multiple customer testimonials.\n * \n * Handles navigation between testimonials with progress indicator.\n * Wrap in Section/Container for proper page layout and theming.\n * \n * @slot - Testimonial components to display in the carousel\n */\n@Component({\n tag: 'af-testimonial-carousel',\n styleUrl: 'af-testimonial-carousel.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonialCarousel {\n @Element() host!: HTMLElement;\n @State() currentIndex: number = 0;\n @State() isAnimating: boolean = false;\n @State() testimonialCount: number = 0;\n\n private testimonials: HTMLElement[] = [];\n private observer: MutationObserver | undefined;\n\n componentDidLoad() {\n this.detectTestimonials();\n \n // Watch for testimonials being added (for React async rendering)\n this.observer = new MutationObserver(() => {\n this.detectTestimonials();\n });\n \n this.observer.observe(this.host, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n /**\n * Listen for navigation events from testimonials\n */\n @Listen('
|
|
1
|
+
{"file":"af-testimonial-carousel.js","mappings":"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","names":["AfTestimonialCarousel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-testimonial-carousel/af-testimonial-carousel.css?tag=af-testimonial-carousel&encapsulation=scoped","src/components/af-testimonial-carousel/af-testimonial-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.testimonial-carousel {\n position: relative;\n width: 100%;\n overflow: hidden;\n}\n\n.testimonial-slides {\n position: relative;\n width: 100%;\n min-height: 544px;\n overflow: hidden;\n}\n\n.testimonial-slides ::slotted(af-testimonial) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;\n}\n\n/* Respect reduced motion: slides can auto-advance, so remove the\n * 500ms cross-fade/slide transition and swap instantly. */\n@media (prefers-reduced-motion: reduce) {\n .testimonial-slides ::slotted(af-testimonial) {\n transition: none;\n }\n}\n\n/* Progress indicator - wraps af-progress-line atom */\n/* Per Figma: centered below the card with horizontal padding */\n.testimonial-progress {\n margin-top: 32px;\n max-width: 840px;\n margin-left: auto;\n margin-right: auto;\n}\n\n/* Navigation is now rendered inside each testimonial's footer via props */\n\n","import { Component, State, h, Host, Element, Listen } from '@stencil/core';\n\n/**\n * TestimonialCarousel - Carousel for displaying multiple customer testimonials.\n * \n * Handles navigation between testimonials with progress indicator.\n * Wrap in Section/Container for proper page layout and theming.\n * \n * @slot - Testimonial components to display in the carousel\n */\n@Component({\n tag: 'af-testimonial-carousel',\n styleUrl: 'af-testimonial-carousel.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonialCarousel {\n @Element() host!: HTMLElement;\n @State() currentIndex: number = 0;\n @State() isAnimating: boolean = false;\n @State() testimonialCount: number = 0;\n\n private testimonials: HTMLElement[] = [];\n private observer: MutationObserver | undefined;\n\n componentDidLoad() {\n this.detectTestimonials();\n \n // Watch for testimonials being added (for React async rendering)\n this.observer = new MutationObserver(() => {\n this.detectTestimonials();\n });\n \n this.observer.observe(this.host, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n /**\n * Listen for navigation events from testimonials\n */\n @Listen('afNavPrev')\n handleNavPrev() {\n this.goToPrevious();\n }\n\n @Listen('afNavNext')\n handleNavNext() {\n this.goToNext();\n }\n\n private detectTestimonials() {\n const newTestimonials = Array.from(this.host.querySelectorAll('af-testimonial')) as HTMLElement[];\n \n if (newTestimonials.length !== this.testimonials.length) {\n this.testimonials = newTestimonials;\n this.testimonialCount = newTestimonials.length;\n \n if (this.testimonials.length > 0) {\n this.currentIndex = 0;\n this.updateVisibleTestimonial();\n }\n }\n }\n\n private updateVisibleTestimonial() {\n const hasPrev = this.currentIndex > 0;\n const hasNext = this.currentIndex < this.testimonialCount - 1;\n const showNav = this.testimonialCount > 1;\n\n this.testimonials.forEach((testimonial, index) => {\n const offset = (index - this.currentIndex) * 100;\n testimonial.style.transform = `translateX(${offset}%)`;\n testimonial.style.opacity = index === this.currentIndex ? '1' : '0';\n testimonial.style.pointerEvents = index === this.currentIndex ? 'auto' : 'none';\n \n // Set navigation props on testimonials (directly on the element for Stencil)\n (testimonial as any).showNavigation = showNav;\n (testimonial as any).hasPrev = hasPrev;\n (testimonial as any).hasNext = hasNext;\n });\n }\n\n private goToPrevious = () => {\n if (this.isAnimating || this.currentIndex === 0) return;\n \n this.isAnimating = true;\n this.currentIndex = this.currentIndex - 1;\n this.updateVisibleTestimonial();\n \n setTimeout(() => {\n this.isAnimating = false;\n }, 500);\n };\n\n private goToNext = () => {\n if (this.isAnimating || this.currentIndex >= this.testimonialCount - 1) return;\n \n this.isAnimating = true;\n this.currentIndex = this.currentIndex + 1;\n this.updateVisibleTestimonial();\n \n setTimeout(() => {\n this.isAnimating = false;\n }, 500);\n };\n\n /**\n * Calculate progress value (0 to 1) based on current position\n */\n private getProgress(): number {\n if (this.testimonialCount <= 1) return 0;\n return (this.currentIndex + 1) / this.testimonialCount;\n }\n\n render() {\n return (\n <Host>\n <div class=\"testimonial-carousel\">\n <div class=\"testimonial-slides\">\n <slot></slot>\n </div>\n \n {/* Progress indicator using af-progress-line atom */}\n {this.testimonialCount > 1 && (\n <div class=\"testimonial-progress\">\n <af-progress-line progress={this.getProgress()} />\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
|
|
@@ -11,8 +11,8 @@ const AfTestimonial$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimonial ext
|
|
|
11
11
|
if (registerHost !== false) {
|
|
12
12
|
this.__registerHost();
|
|
13
13
|
}
|
|
14
|
-
this.
|
|
15
|
-
this.
|
|
14
|
+
this.afNavPrev = createEvent(this, "afNavPrev");
|
|
15
|
+
this.afNavNext = createEvent(this, "afNavNext");
|
|
16
16
|
/**
|
|
17
17
|
* Whether to show built-in navigation buttons (used when in a carousel)
|
|
18
18
|
*/
|
|
@@ -26,18 +26,18 @@ const AfTestimonial$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimonial ext
|
|
|
26
26
|
*/
|
|
27
27
|
this.hasNext = false;
|
|
28
28
|
this.handlePrev = () => {
|
|
29
|
-
this.
|
|
29
|
+
this.afNavPrev.emit();
|
|
30
30
|
};
|
|
31
31
|
this.handleNext = () => {
|
|
32
|
-
this.
|
|
32
|
+
this.afNavNext.emit();
|
|
33
33
|
};
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: '6e9852855010e696e1f3f8d250541da3f99675bb' }, h("div", { key: '779f2f42b5443b384b5d02bcdcbb8c2ea904d793', class: "testimonial-card" }, h("div", { key: 'da08dac0b57e4861d941d9ee1347234a23bc76cd', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: 'a02cb9792a2ac5d31ad06842dfe9914e02bc5f65', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: 'fe75369fdff4bd79c96eb4de4d162b124f8f8037', class: "testimonial-logo" }, h("img", { key: '21bb43f47b0c4f759f23bdbfa3ff8e07ed6d709c', src: this.logoImage, alt: "Company logo" })))), h("div", { key: 'aa07b37eb9eb25e98eb7a7ed7bda01028ef1521f', class: "testimonial-content" }, h("div", { key: '4f30fb4aaf739e1f7b05152bad8ccd0a90da0c5f', class: "testimonial-quote-section" }, h("div", { key: '3ecc3a1c62fd853bf61c8399885572f48be95f40', class: "testimonial-quote-icon" }, h("slot", { key: '838996eaa0db4d93e8ccd400021b069f32ce63ec', name: "quote-icon" }, h("af-icon", { key: '8de2e75dbf0de964f0213d3a4c4b1c3ff399cd90', name: "quote", size: 48 }))), h("div", { key: '54aa8e50eb467db8479d2bd1f18960e5016e56ae', class: "testimonial-text" }, h("slot", { key: 'f4b67d5a449754c8258db5b60d761420a836923d', name: "quote-body" }, this.quote)), h("div", { key: '80076fa3891101465cc5c94739c7b5a71448b81c', class: "testimonial-attribution" }, this.attribution)), h("div", { key: '7dc0037ded29ba32536fa4b1ef68a383849cef3d', class: "testimonial-stats" }, h("slot", { key: '6146b401ec0a2f840f6f4e80b3352c1ff51c243d', name: "stats" })), h("div", { key: 'a5c3f27c91aaa05c24f6db2fe507a6a3ae7a4457', class: "testimonial-footer" }, h("div", { key: '82aac81fe42e157bd713bde5562832b6d2a3a08c', class: "testimonial-nav" }, this.showNavigation ? (
|
|
37
37
|
// Render built-in navigation buttons
|
|
38
38
|
h("div", { class: "testimonial-nav-buttons" }, h("af-icon-button", { variant: "secondary", disabled: !this.hasPrev, onClick: this.handlePrev, ariaLabel: "Previous testimonial" }, h("af-icon", { name: "arrow-left", size: 24 })), h("af-icon-button", { variant: "secondary", disabled: !this.hasNext, onClick: this.handleNext, ariaLabel: "Next testimonial" }, h("af-icon", { name: "arrow-right", size: 24 })))) : (
|
|
39
39
|
// Allow custom navigation via slot
|
|
40
|
-
h("slot", { name: "navigation" }))), this.readMoreLink && (h("af-button", { key: '
|
|
40
|
+
h("slot", { name: "navigation" }))), this.readMoreLink && (h("af-button", { key: '8f3ff6293ae51a697c90d6c4e0c74276abb9da1a', variant: "secondary", href: this.readMoreLink }, "Read full story", h("af-icon", { key: 'afcaf06157c82fbc85eed2dd8cb2794d48b7d7fe', slot: "icon-right", name: "arrow-right", size: 24 }))))))));
|
|
41
41
|
}
|
|
42
42
|
static get style() { return afTestimonialCss; }
|
|
43
43
|
}, [262, "af-testimonial", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"af-testimonial.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,wnGAAwnG;;MCgBpoGA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAN1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAiCE;;AAEG;AACsB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAExD;;AAEG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEjD;;AAEG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAYzC,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,SAAC;AAEO,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,SAAC;AAiFF;IA/EC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAE3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC3B,IAAI,CAAC,eAAe,KACnB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,sBAAsB,GAAG,CACvE,EACA,IAAI,CAAC,SAAS,KACb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAC,cAAc,EAAA,CAAG,CAC3C,CACP,CACG,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EAEpC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAA,EACrB,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA,CAC7B,CACH,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CACvC,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAAE,IAAI,CAAC,WAAW,CAAO,CACzD,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EACzB,IAAI,CAAC,cAAc;;QAElB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAA,CAAA,gBAAA,EAAA,EACE,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,EACvB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,SAAS,EAAC,sBAAsB,EAAA,EAEhC,CAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,YAAY,EAAC,IAAI,EAAE,EAAE,GAAI,CACxB,EACjB,CAAA,CAAA,gBAAA,EAAA,EACE,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,EACvB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,SAAS,EAAC,kBAAkB,EAAA,EAE5B,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,aAAa,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,CACzB,CACb;;AAGN,QAAA,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAQ,CAChC,CACG,EACL,IAAI,CAAC,YAAY,KAChB,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,CAAC,YAAY,EAAA,qBAEpD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,aAAa,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,CAChD,CACb,CACG,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfTestimonial","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-testimonial/af-testimonial.css?tag=af-testimonial&encapsulation=scoped","src/components/af-testimonial/af-testimonial.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.testimonial-card {\n /* Uses themed level-1 background from parent Section */\n background: var(--af-background-level-1, var(--colour-mistgreen-200, #e8eeed));\n border-radius: var(--border-radius-card-level-1, 32px);\n overflow: hidden;\n display: flex;\n height: 544px;\n box-sizing: border-box;\n}\n\n/* Image side - 40.5% of card width (519px of 1280px in Figma) */\n.testimonial-image {\n position: relative;\n width: 50%;\n min-width: 300px;\n /* Minimum for readability */\n max-width: 519px;\n /* Cap at Figma design width */\n height: 100%;\n /* Dark background for image overlay effect - always dark regardless of theme */\n background: var(--colour-brand-inkwell, #14343b);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.testimonial-bg-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.7;\n}\n\n.testimonial-logo {\n position: relative;\n z-index: 1;\n padding: 0 108px;\n max-width: 100%;\n}\n\n.testimonial-logo img {\n width: 100%;\n height: auto;\n display: block;\n}\n\n/* Content side */\n.testimonial-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 32px;\n padding: 48px;\n /* Subtle border using themed border token */\n border: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));\n border-left: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));\n box-sizing: border-box;\n}\n\n.testimonial-quote-section {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-height: 0;\n /* Allow flex item to shrink */\n overflow: hidden;\n}\n\n.testimonial-quote-icon {\n width: 48px;\n height: 48px;\n /* Quote icon uses themed secondary heading color (gold/ochre accent) */\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n flex-shrink: 0;\n}\n\n/* Quote text — 22px / 140% per Webflow reference. Accepts either the\n `quote` prop (rendered as plain text) or the `quote-body` slot (rich). */\n.testimonial-text {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: 22px;\n line-height: 1.4;\n font-weight: var(--font-weight-regular, 400);\n color: var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b));\n}\n.testimonial-text ::slotted(p),\n.testimonial-text p {\n font: inherit;\n color: inherit;\n margin: 0 0 12px 0;\n}\n.testimonial-text ::slotted(p:last-child),\n.testimonial-text p:last-child {\n margin-bottom: 0;\n}\n.testimonial-text ::slotted(ul),\n.testimonial-text ul {\n margin: 0 0 12px 0;\n padding-left: 20px;\n}\n\n/* Attribution uses body-dark color for emphasis */\n.testimonial-attribution {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n margin-top: 12px;\n}\n\n.testimonial-stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n width: 100%;\n flex-shrink: 0;\n}\n\n/* ≥ mobile and ≤ tablet — 2-column intermediate layout so the stats row\n * doesn't snap straight from 4-across to 1-across on common iPad / narrow\n * laptop widths. */\n@media (min-width: 768px) and (max-width: 1023px) {\n .testimonial-stats {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n/* ≤ mobile — single column stack */\n@media (max-width: 767px) {\n .testimonial-stats {\n grid-template-columns: 1fr;\n }\n}\n\n.testimonial-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n /* Themed border color */\n border-top: 1px solid var(--af-background-border-default, var(--colour-mistgreen-400, #d1ddda));\n padding-top: 32px;\n flex-shrink: 0;\n min-height: 48px;\n}\n\n.testimonial-nav {\n display: flex;\n gap: 12px;\n}\n\n.testimonial-nav-buttons {\n display: flex;\n gap: 12px;\n}\n\n/* CTA button is now handled by af-button atom component */","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot quote-body - Rich quote content (paragraphs, lists). Overrides the\n * `quote` string prop when provided. Use for testimonials that include\n * multiple paragraphs, bulleted points, or inline emphasis.\n * @slot quote-icon - Quote icon (defaults to af-icon name=\"quote\").\n * @slot stats - Statistic items (af-testimonial-stat components).\n * @slot navigation - Custom nav controls (when not using built-in ones).\n */\n@Component({\n tag: 'af-testimonial',\n styleUrl: 'af-testimonial.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonial {\n /**\n * Background image URL for the testimonial card\n */\n @Prop() backgroundImage?: string;\n\n /**\n * Company logo URL\n */\n @Prop() logoImage?: string;\n\n /**\n * Testimonial quote text. Falls back to the `quote-body` slot if that\n * slot has content.\n */\n @Prop() quote?: string;\n\n /**\n * Attribution text (e.g., \"– Nathaniel Barrs, CTO, PSC Insurance\")\n */\n @Prop() attribution!: string;\n\n /**\n * Link to full case study\n */\n @Prop() readMoreLink?: string;\n\n /**\n * Whether to show built-in navigation buttons (used when in a carousel)\n */\n @Prop({ mutable: true }) showNavigation: boolean = false;\n\n /**\n * Whether the previous button is enabled\n */\n @Prop({ mutable: true }) hasPrev: boolean = false;\n\n /**\n * Whether the next button is enabled\n */\n @Prop({ mutable: true }) hasNext: boolean = false;\n\n /**\n * Emitted when the previous button is clicked\n */\n @Event() navPrev!: EventEmitter<void>;\n\n /**\n * Emitted when the next button is clicked\n */\n @Event() navNext!: EventEmitter<void>;\n\n private handlePrev = () => {\n this.navPrev.emit();\n };\n\n private handleNext = () => {\n this.navNext.emit();\n };\n\n render() {\n return (\n <Host>\n <div class=\"testimonial-card\">\n {/* Image side */}\n <div class=\"testimonial-image\">\n {this.backgroundImage && (\n <img src={this.backgroundImage} alt=\"\" class=\"testimonial-bg-image\" />\n )}\n {this.logoImage && (\n <div class=\"testimonial-logo\">\n <img src={this.logoImage} alt=\"Company logo\" />\n </div>\n )}\n </div>\n\n {/* Content side */}\n <div class=\"testimonial-content\">\n <div class=\"testimonial-quote-section\">\n {/* Quote icon - using af-icon atom with slot for flexibility */}\n <div class=\"testimonial-quote-icon\">\n <slot name=\"quote-icon\">\n <af-icon name=\"quote\" size={48} />\n </slot>\n </div>\n\n {/* Quote text — slot takes priority; falls back to prop. */}\n <div class=\"testimonial-text\">\n <slot name=\"quote-body\">{this.quote}</slot>\n </div>\n {/* Attribution */}\n <div class=\"testimonial-attribution\">{this.attribution}</div>\n </div>\n\n {/* Statistics slot */}\n <div class=\"testimonial-stats\">\n <slot name=\"stats\"></slot>\n </div>\n\n {/* Footer with navigation and CTA */}\n <div class=\"testimonial-footer\">\n <div class=\"testimonial-nav\">\n {this.showNavigation ? (\n // Render built-in navigation buttons\n <div class=\"testimonial-nav-buttons\">\n <af-icon-button\n variant=\"secondary\"\n disabled={!this.hasPrev}\n onClick={this.handlePrev}\n ariaLabel=\"Previous testimonial\"\n >\n <af-icon name=\"arrow-left\" size={24} />\n </af-icon-button>\n <af-icon-button\n variant=\"secondary\"\n disabled={!this.hasNext}\n onClick={this.handleNext}\n ariaLabel=\"Next testimonial\"\n >\n <af-icon name=\"arrow-right\" size={24} />\n </af-icon-button>\n </div>\n ) : (\n // Allow custom navigation via slot\n <slot name=\"navigation\"></slot>\n )}\n </div>\n {this.readMoreLink && (\n <af-button variant=\"secondary\" href={this.readMoreLink}>\n Read full story\n <af-icon slot=\"icon-right\" name=\"arrow-right\" size={24} />\n </af-button>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n\n"],"version":3}
|
|
1
|
+
{"file":"af-testimonial.js","mappings":"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","names":["AfTestimonial","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-testimonial/af-testimonial.css?tag=af-testimonial&encapsulation=scoped","src/components/af-testimonial/af-testimonial.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.testimonial-card {\n /* Uses themed level-1 background from parent Section */\n background: var(--af-background-level-1, var(--colour-mistgreen-200, #e8eeed));\n border-radius: var(--border-radius-card-level-1, 32px);\n overflow: hidden;\n display: flex;\n height: 544px;\n box-sizing: border-box;\n}\n\n/* Image side - 40.5% of card width (519px of 1280px in Figma) */\n.testimonial-image {\n position: relative;\n width: 50%;\n min-width: 300px;\n /* Minimum for readability */\n max-width: 519px;\n /* Cap at Figma design width */\n height: 100%;\n /* Dark background for image overlay effect - always dark regardless of theme */\n background: var(--colour-brand-inkwell, #14343b);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.testimonial-bg-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.7;\n}\n\n.testimonial-logo {\n position: relative;\n z-index: 1;\n padding: 0 108px;\n max-width: 100%;\n}\n\n.testimonial-logo img {\n width: 100%;\n height: auto;\n display: block;\n}\n\n/* Content side */\n.testimonial-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 32px;\n padding: 48px;\n /* Subtle border using themed border token */\n border: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));\n border-left: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));\n box-sizing: border-box;\n}\n\n.testimonial-quote-section {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-height: 0;\n /* Allow flex item to shrink */\n overflow: hidden;\n}\n\n.testimonial-quote-icon {\n width: 48px;\n height: 48px;\n /* Quote icon uses themed secondary heading color (gold/ochre accent) */\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n flex-shrink: 0;\n}\n\n/* Quote text — 22px / 140% per Webflow reference. Accepts either the\n `quote` prop (rendered as plain text) or the `quote-body` slot (rich). */\n.testimonial-text {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: 22px;\n line-height: 1.4;\n font-weight: var(--font-weight-regular, 400);\n color: var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b));\n}\n.testimonial-text ::slotted(p),\n.testimonial-text p {\n font: inherit;\n color: inherit;\n margin: 0 0 12px 0;\n}\n.testimonial-text ::slotted(p:last-child),\n.testimonial-text p:last-child {\n margin-bottom: 0;\n}\n.testimonial-text ::slotted(ul),\n.testimonial-text ul {\n margin: 0 0 12px 0;\n padding-left: 20px;\n}\n\n/* Attribution uses body-dark color for emphasis */\n.testimonial-attribution {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n margin-top: 12px;\n}\n\n.testimonial-stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n width: 100%;\n flex-shrink: 0;\n}\n\n/* ≥ mobile and ≤ tablet — 2-column intermediate layout so the stats row\n * doesn't snap straight from 4-across to 1-across on common iPad / narrow\n * laptop widths. */\n@media (min-width: 768px) and (max-width: 1023px) {\n .testimonial-stats {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n/* ≤ mobile — single column stack */\n@media (max-width: 767px) {\n .testimonial-stats {\n grid-template-columns: 1fr;\n }\n}\n\n.testimonial-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n /* Themed border color */\n border-top: 1px solid var(--af-background-border-default, var(--colour-mistgreen-400, #d1ddda));\n padding-top: 32px;\n flex-shrink: 0;\n min-height: 48px;\n}\n\n.testimonial-nav {\n display: flex;\n gap: 12px;\n}\n\n.testimonial-nav-buttons {\n display: flex;\n gap: 12px;\n}\n\n/* CTA button is now handled by af-button atom component */","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot quote-body - Rich quote content (paragraphs, lists). Overrides the\n * `quote` string prop when provided. Use for testimonials that include\n * multiple paragraphs, bulleted points, or inline emphasis.\n * @slot quote-icon - Quote icon (defaults to af-icon name=\"quote\").\n * @slot stats - Statistic items (af-testimonial-stat components).\n * @slot navigation - Custom nav controls (when not using built-in ones).\n */\n@Component({\n tag: 'af-testimonial',\n styleUrl: 'af-testimonial.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonial {\n /**\n * Background image URL for the testimonial card\n */\n @Prop() backgroundImage?: string;\n\n /**\n * Company logo URL\n */\n @Prop() logoImage?: string;\n\n /**\n * Testimonial quote text. Falls back to the `quote-body` slot if that\n * slot has content.\n */\n @Prop() quote?: string;\n\n /**\n * Attribution text (e.g., \"– Nathaniel Barrs, CTO, PSC Insurance\")\n */\n @Prop() attribution!: string;\n\n /**\n * Link to full case study\n */\n @Prop() readMoreLink?: string;\n\n /**\n * Whether to show built-in navigation buttons (used when in a carousel)\n */\n @Prop({ mutable: true }) showNavigation: boolean = false;\n\n /**\n * Whether the previous button is enabled\n */\n @Prop({ mutable: true }) hasPrev: boolean = false;\n\n /**\n * Whether the next button is enabled\n */\n @Prop({ mutable: true }) hasNext: boolean = false;\n\n /**\n * Emitted when the previous button is clicked\n */\n @Event() afNavPrev!: EventEmitter<void>;\n\n /**\n * Emitted when the next button is clicked\n */\n @Event() afNavNext!: EventEmitter<void>;\n\n private handlePrev = () => {\n this.afNavPrev.emit();\n };\n\n private handleNext = () => {\n this.afNavNext.emit();\n };\n\n render() {\n return (\n <Host>\n <div class=\"testimonial-card\">\n {/* Image side */}\n <div class=\"testimonial-image\">\n {this.backgroundImage && (\n <img src={this.backgroundImage} alt=\"\" class=\"testimonial-bg-image\" />\n )}\n {this.logoImage && (\n <div class=\"testimonial-logo\">\n <img src={this.logoImage} alt=\"Company logo\" />\n </div>\n )}\n </div>\n\n {/* Content side */}\n <div class=\"testimonial-content\">\n <div class=\"testimonial-quote-section\">\n {/* Quote icon - using af-icon atom with slot for flexibility */}\n <div class=\"testimonial-quote-icon\">\n <slot name=\"quote-icon\">\n <af-icon name=\"quote\" size={48} />\n </slot>\n </div>\n\n {/* Quote text — slot takes priority; falls back to prop. */}\n <div class=\"testimonial-text\">\n <slot name=\"quote-body\">{this.quote}</slot>\n </div>\n {/* Attribution */}\n <div class=\"testimonial-attribution\">{this.attribution}</div>\n </div>\n\n {/* Statistics slot */}\n <div class=\"testimonial-stats\">\n <slot name=\"stats\"></slot>\n </div>\n\n {/* Footer with navigation and CTA */}\n <div class=\"testimonial-footer\">\n <div class=\"testimonial-nav\">\n {this.showNavigation ? (\n // Render built-in navigation buttons\n <div class=\"testimonial-nav-buttons\">\n <af-icon-button\n variant=\"secondary\"\n disabled={!this.hasPrev}\n onClick={this.handlePrev}\n ariaLabel=\"Previous testimonial\"\n >\n <af-icon name=\"arrow-left\" size={24} />\n </af-icon-button>\n <af-icon-button\n variant=\"secondary\"\n disabled={!this.hasNext}\n onClick={this.handleNext}\n ariaLabel=\"Next testimonial\"\n >\n <af-icon name=\"arrow-right\" size={24} />\n </af-icon-button>\n </div>\n ) : (\n // Allow custom navigation via slot\n <slot name=\"navigation\"></slot>\n )}\n </div>\n {this.readMoreLink && (\n <af-button variant=\"secondary\" href={this.readMoreLink}>\n Read full story\n <af-icon slot=\"icon-right\" name=\"arrow-right\" size={24} />\n </af-button>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n\n"],"version":3}
|