@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
|
@@ -10,7 +10,7 @@ const AfVideoContainer$1 = /*@__PURE__*/ proxyCustomElement(class AfVideoContain
|
|
|
10
10
|
if (registerHost !== false) {
|
|
11
11
|
this.__registerHost();
|
|
12
12
|
}
|
|
13
|
-
this.
|
|
13
|
+
this.afPlayClick = createEvent(this, "afPlayClick");
|
|
14
14
|
/** Video thumbnail image URL */
|
|
15
15
|
this.videoThumbnailUrl = '';
|
|
16
16
|
/** Video alt text for accessibility */
|
|
@@ -21,7 +21,7 @@ const AfVideoContainer$1 = /*@__PURE__*/ proxyCustomElement(class AfVideoContain
|
|
|
21
21
|
* Handles play button click - emits event and optionally opens URL
|
|
22
22
|
*/
|
|
23
23
|
this.handlePlayClick = () => {
|
|
24
|
-
const event = this.
|
|
24
|
+
const event = this.afPlayClick.emit({ videoUrl: this.videoUrl });
|
|
25
25
|
// Only open URL if event wasn't prevented and URL exists
|
|
26
26
|
if (!event.defaultPrevented && this.videoUrl) {
|
|
27
27
|
window.open(this.videoUrl, '_blank');
|
|
@@ -29,7 +29,7 @@ const AfVideoContainer$1 = /*@__PURE__*/ proxyCustomElement(class AfVideoContain
|
|
|
29
29
|
};
|
|
30
30
|
}
|
|
31
31
|
render() {
|
|
32
|
-
return (h(Host, { key: '
|
|
32
|
+
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" })))));
|
|
33
33
|
}
|
|
34
34
|
static get style() { return afVideoContainerCss; }
|
|
35
35
|
}, [262, "af-video-container", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"af-video-container.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,ixDAAixD;;MC+BhyDA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAN7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQU,QAAA,IAAiB,CAAA,iBAAA,GAAW,EAAE;;AAG9B,QAAA,IAAQ,CAAA,QAAA,GAAW,iBAAiB;;AAGpC,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAS7B;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAAG,MAAK;AAC7B,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,
|
|
1
|
+
{"file":"af-video-container.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,ixDAAixD;;MC+BhyDA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAN7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQU,QAAA,IAAiB,CAAA,iBAAA,GAAW,EAAE;;AAG9B,QAAA,IAAQ,CAAA,QAAA,GAAW,iBAAiB;;AAGpC,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAS7B;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAAG,MAAK;AAC7B,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;;YAGhE,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAC5C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC;;AAExC,SAAC;AA4CF;IA1CC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAE1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,KAAK,EAAA,CAAQ,CACpB,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EAC3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oCAAoC,EAAA,EAC5C,IAAI,CAAC,iBAAiB,KACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,MAAM,EAAA,CACd,CACH,EAED,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,eAAe,EAClB,YAAA,EAAA,YAAY,EACvB,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,EAAY,CAAA,CAClC,CACL,CACU,CACd,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfVideoContainer","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-video-container/af-video-container.css?tag=af-video-container&encapsulation=scoped","src/components/af-video-container/af-video-container.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.video-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n gap: var(--space-10, 40px);\n}\n\n/* ==========================================================================\n Top/Bottom Slots\n These inherit theme colors from their position in the split-section\n ========================================================================== */\n\n.video-container__top,\n.video-container__bottom {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Hide empty slots */\n.video-container__top:empty,\n.video-container__bottom:empty {\n display: none;\n}\n\n/* ==========================================================================\n Video Thumbnail Section\n ========================================================================== */\n\n.video-container__video {\n width: 100%;\n max-width: 1024px;\n}\n\n.video-container__thumbnail-wrapper {\n position: absolute;\n inset: 0;\n border-radius: var(--radii-video-crop, 16px);\n overflow: hidden;\n background-color: var(--colour-inkwell-400, #2b484f);\n}\n\n.video-container__thumbnail {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n position: absolute;\n inset: 0;\n}\n\n/* ==========================================================================\n Play Button Overlay\n ========================================================================== */\n\n.video-container__play-button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 24px;\n border-radius: var(--radii-button, 9999px);\n background-color: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n cursor: pointer;\n transition: background-color 0.2s ease;\n color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.video-container__play-button:hover {\n background-color: var(--af-button-primary-bg-hover, var(--colour-ice-600, #95e6e2));\n}\n\n.video-container__play-button:focus-visible {\n outline: 2px solid var(--colour-brand-ice, #a6fffb);\n outline-offset: 2px;\n}\n\n/* ==========================================================================\n Mobile Responsive Styles\n ========================================================================== */\n\n/* mobile-only */\n@media (max-width: 768px) {\n .video-container {\n gap: var(--space-8, 32px);\n }\n\n /* Smaller play button on mobile */\n .video-container__play-button {\n padding: 12px;\n }\n}\n","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"],"version":3}
|
|
@@ -90,7 +90,7 @@ const AfTestimonialCarousel = class {
|
|
|
90
90
|
return (this.currentIndex + 1) / this.testimonialCount;
|
|
91
91
|
}
|
|
92
92
|
render() {
|
|
93
|
-
return (h(Host, { key: '
|
|
93
|
+
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() }))))));
|
|
94
94
|
}
|
|
95
95
|
get host() { return getElement(this); }
|
|
96
96
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-testimonial-carousel.entry.js","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
|
+
{"version":3,"file":"af-testimonial-carousel.entry.js","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"],"names":[],"mappings":"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"}
|
|
@@ -5,8 +5,8 @@ const afTestimonialCss = ".sc-af-testimonial-h{display:block;width:100%}.testimo
|
|
|
5
5
|
const AfTestimonial = class {
|
|
6
6
|
constructor(hostRef) {
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
|
-
this.
|
|
9
|
-
this.
|
|
8
|
+
this.afNavPrev = createEvent(this, "afNavPrev");
|
|
9
|
+
this.afNavNext = createEvent(this, "afNavNext");
|
|
10
10
|
/**
|
|
11
11
|
* Whether to show built-in navigation buttons (used when in a carousel)
|
|
12
12
|
*/
|
|
@@ -20,18 +20,18 @@ const AfTestimonial = class {
|
|
|
20
20
|
*/
|
|
21
21
|
this.hasNext = false;
|
|
22
22
|
this.handlePrev = () => {
|
|
23
|
-
this.
|
|
23
|
+
this.afNavPrev.emit();
|
|
24
24
|
};
|
|
25
25
|
this.handleNext = () => {
|
|
26
|
-
this.
|
|
26
|
+
this.afNavNext.emit();
|
|
27
27
|
};
|
|
28
28
|
}
|
|
29
29
|
render() {
|
|
30
|
-
return (h(Host, { key: '
|
|
30
|
+
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 ? (
|
|
31
31
|
// Render built-in navigation buttons
|
|
32
32
|
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 })))) : (
|
|
33
33
|
// Allow custom navigation via slot
|
|
34
|
-
h("slot", { name: "navigation" }))), this.readMoreLink && (h("af-button", { key: '
|
|
34
|
+
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 }))))))));
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
37
|
AfTestimonial.style = afTestimonialCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-testimonial.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,wnGAAwnG;;MCgBpoG,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,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;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"af-testimonial.entry.js","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"],"names":[],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ const afVideoContainerCss = ".sc-af-video-container-h{display:block;width:100%}.
|
|
|
5
5
|
const AfVideoContainer = class {
|
|
6
6
|
constructor(hostRef) {
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
|
-
this.
|
|
8
|
+
this.afPlayClick = createEvent(this, "afPlayClick");
|
|
9
9
|
/** Video thumbnail image URL */
|
|
10
10
|
this.videoThumbnailUrl = '';
|
|
11
11
|
/** Video alt text for accessibility */
|
|
@@ -16,7 +16,7 @@ const AfVideoContainer = class {
|
|
|
16
16
|
* Handles play button click - emits event and optionally opens URL
|
|
17
17
|
*/
|
|
18
18
|
this.handlePlayClick = () => {
|
|
19
|
-
const event = this.
|
|
19
|
+
const event = this.afPlayClick.emit({ videoUrl: this.videoUrl });
|
|
20
20
|
// Only open URL if event wasn't prevented and URL exists
|
|
21
21
|
if (!event.defaultPrevented && this.videoUrl) {
|
|
22
22
|
window.open(this.videoUrl, '_blank');
|
|
@@ -24,7 +24,7 @@ const AfVideoContainer = class {
|
|
|
24
24
|
};
|
|
25
25
|
}
|
|
26
26
|
render() {
|
|
27
|
-
return (h(Host, { key: '
|
|
27
|
+
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" })))));
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
30
|
AfVideoContainer.style = afVideoContainerCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-video-container.entry.js","sources":["src/components/af-video-container/af-video-container.css?tag=af-video-container&encapsulation=scoped","src/components/af-video-container/af-video-container.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.video-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n gap: var(--space-10, 40px);\n}\n\n/* ==========================================================================\n Top/Bottom Slots\n These inherit theme colors from their position in the split-section\n ========================================================================== */\n\n.video-container__top,\n.video-container__bottom {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Hide empty slots */\n.video-container__top:empty,\n.video-container__bottom:empty {\n display: none;\n}\n\n/* ==========================================================================\n Video Thumbnail Section\n ========================================================================== */\n\n.video-container__video {\n width: 100%;\n max-width: 1024px;\n}\n\n.video-container__thumbnail-wrapper {\n position: absolute;\n inset: 0;\n border-radius: var(--radii-video-crop, 16px);\n overflow: hidden;\n background-color: var(--colour-inkwell-400, #2b484f);\n}\n\n.video-container__thumbnail {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n position: absolute;\n inset: 0;\n}\n\n/* ==========================================================================\n Play Button Overlay\n ========================================================================== */\n\n.video-container__play-button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 24px;\n border-radius: var(--radii-button, 9999px);\n background-color: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n cursor: pointer;\n transition: background-color 0.2s ease;\n color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.video-container__play-button:hover {\n background-color: var(--af-button-primary-bg-hover, var(--colour-ice-600, #95e6e2));\n}\n\n.video-container__play-button:focus-visible {\n outline: 2px solid var(--colour-brand-ice, #a6fffb);\n outline-offset: 2px;\n}\n\n/* ==========================================================================\n Mobile Responsive Styles\n ========================================================================== */\n\n/* mobile-only */\n@media (max-width: 768px) {\n .video-container {\n gap: var(--space-8, 32px);\n }\n\n /* Smaller play button on mobile */\n .video-container__play-button {\n padding: 12px;\n }\n}\n","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()
|
|
1
|
+
{"version":3,"file":"af-video-container.entry.js","sources":["src/components/af-video-container/af-video-container.css?tag=af-video-container&encapsulation=scoped","src/components/af-video-container/af-video-container.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.video-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n gap: var(--space-10, 40px);\n}\n\n/* ==========================================================================\n Top/Bottom Slots\n These inherit theme colors from their position in the split-section\n ========================================================================== */\n\n.video-container__top,\n.video-container__bottom {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Hide empty slots */\n.video-container__top:empty,\n.video-container__bottom:empty {\n display: none;\n}\n\n/* ==========================================================================\n Video Thumbnail Section\n ========================================================================== */\n\n.video-container__video {\n width: 100%;\n max-width: 1024px;\n}\n\n.video-container__thumbnail-wrapper {\n position: absolute;\n inset: 0;\n border-radius: var(--radii-video-crop, 16px);\n overflow: hidden;\n background-color: var(--colour-inkwell-400, #2b484f);\n}\n\n.video-container__thumbnail {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n position: absolute;\n inset: 0;\n}\n\n/* ==========================================================================\n Play Button Overlay\n ========================================================================== */\n\n.video-container__play-button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 24px;\n border-radius: var(--radii-button, 9999px);\n background-color: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n cursor: pointer;\n transition: background-color 0.2s ease;\n color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.video-container__play-button:hover {\n background-color: var(--af-button-primary-bg-hover, var(--colour-ice-600, #95e6e2));\n}\n\n.video-container__play-button:focus-visible {\n outline: 2px solid var(--colour-brand-ice, #a6fffb);\n outline-offset: 2px;\n}\n\n/* ==========================================================================\n Mobile Responsive Styles\n ========================================================================== */\n\n/* mobile-only */\n@media (max-width: 768px) {\n .video-container {\n gap: var(--space-8, 32px);\n }\n\n /* Smaller play button on mobile */\n .video-container__play-button {\n padding: 12px;\n }\n}\n","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"],"names":[],"mappings":";;AAAA,MAAM,mBAAmB,GAAG,ixDAAixD;;MC+BhyD,gBAAgB,GAAA,MAAA;AAN7B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAQU,QAAA,IAAiB,CAAA,iBAAA,GAAW,EAAE;;AAG9B,QAAA,IAAQ,CAAA,QAAA,GAAW,iBAAiB;;AAGpC,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAS7B;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAAG,MAAK;AAC7B,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;;YAGhE,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAC5C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC;;AAExC,SAAC;AA4CF;IA1CC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAE1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,KAAK,EAAA,CAAQ,CACpB,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EAC3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oCAAoC,EAAA,EAC5C,IAAI,CAAC,iBAAiB,KACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,MAAM,EAAA,CACd,CACH,EAED,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,eAAe,EAClB,YAAA,EAAA,YAAY,EACvB,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,EAAY,CAAA,CAClC,CACL,CACU,CACd,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,CACF,CACD;;;;;;;"}
|
package/dist/esm/affinda.js
CHANGED
|
@@ -16,6 +16,6 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["af-hero",[[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",[[262,"af-icon-text",{"icon":[1],"headingSize":[2,"heading-size"],"orientation":[1],"iconSize":[1,"icon-size"]}]]],["af-testimonial",[[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",[[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",[[262,"af-illustrated-card",{"theme":[1],"breakpoint":[1],"cardSize":[1,"card-size"]}]]],["af-numbered-stepper-item",[[262,"af-numbered-stepper-item",{"index":[514]}]]],["af-stat",[[257,"af-stat",{"value":[1],"label":[1]}]]],["af-testimonial-stat",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-video-container",[[262,"af-video-container",{"videoThumbnailUrl":[1,"video-thumbnail-url"],"videoAlt":[1,"video-alt"],"videoUrl":[1,"video-url"]}]]],["af-feature-grid",[[262,"af-feature-grid",{"columns":[2],"mobileLayout":[1,"mobile-layout"],"scrollProgress":[32]},null,{"mobileLayout":["onMobileLayoutChange"]}]]],["af-grid-callout",[[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",[[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",[[262,"af-split-section",{"topTheme":[1,"top-theme"],"bottomTheme":[1,"bottom-theme"],"padding":[1],"container":[4]}]]],["af-testimonial-carousel",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]},[[0,"
|
|
19
|
+
return bootstrapLazy([["af-hero",[[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",[[262,"af-icon-text",{"icon":[1],"headingSize":[2,"heading-size"],"orientation":[1],"iconSize":[1,"icon-size"]}]]],["af-testimonial",[[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",[[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",[[262,"af-illustrated-card",{"theme":[1],"breakpoint":[1],"cardSize":[1,"card-size"]}]]],["af-numbered-stepper-item",[[262,"af-numbered-stepper-item",{"index":[514]}]]],["af-stat",[[257,"af-stat",{"value":[1],"label":[1]}]]],["af-testimonial-stat",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-video-container",[[262,"af-video-container",{"videoThumbnailUrl":[1,"video-thumbnail-url"],"videoAlt":[1,"video-alt"],"videoUrl":[1,"video-url"]}]]],["af-feature-grid",[[262,"af-feature-grid",{"columns":[2],"mobileLayout":[1,"mobile-layout"],"scrollProgress":[32]},null,{"mobileLayout":["onMobileLayoutChange"]}]]],["af-grid-callout",[[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",[[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",[[262,"af-split-section",{"topTheme":[1,"top-theme"],"bottomTheme":[1,"bottom-theme"],"padding":[1],"container":[4]}]]],["af-testimonial-carousel",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]},[[0,"afNavPrev","handleNavPrev"],[0,"afNavNext","handleNavNext"]]]]],["af-text-image",[[262,"af-text-image",{"imagePosition":[1,"image-position"],"imageProportion":[1,"image-proportion"],"src":[1],"alt":[1],"showSecondLockup":[4,"show-second-lockup"]}]]],["af-accordion",[[262,"af-accordion",{"mode":[1],"value":[1025],"defaultValue":[1,"default-value"],"internalValue":[32]},[[0,"af-accordion-toggle","handleItemToggle"]],{"value":["handleValueChange"]}]]],["af-accordion-item",[[257,"af-accordion-item",{"itemId":[513,"item-id"],"open":[1540],"disabled":[516],"contentHeight":[32],"toggle":[64]},null,{"open":["handleOpenChange"]}]]],["af-button-group",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-center",[[257,"af-center",{"axis":[1],"inline":[4],"minHeight":[1,"min-height"]}]]],["af-checkbox",[[257,"af-checkbox",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[1],"value":[1]}]]],["af-client-carousel",[[262,"af-client-carousel",{"theme":[1],"rows":[2],"mode":[1]}]]],["af-color-swatch",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-contact-item",[[262,"af-contact-item",{"label":[1],"value":[1]}]]],["af-divider",[[257,"af-divider",{"orientation":[1],"spacing":[1]}]]],["af-feature-accordion",[[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",[[257,"af-fieldset",{"legend":[1],"orientation":[1],"disabled":[516]}]]],["af-footer",[[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",[[262,"af-footer-column",{"heading":[1]}]]],["af-footer-link",[[262,"af-footer-link",{"href":[1],"external":[4]}]]],["af-grid",[[257,"af-grid",{"columns":[2],"columnsLg":[2,"columns-lg"],"columnsMd":[2,"columns-md"],"columnsSm":[2,"columns-sm"],"gap":[1],"align":[1]}]]],["af-inline",[[257,"af-inline",{"gap":[1],"align":[1],"justify":[1],"wrap":[4]}]]],["af-input",[[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",[[257,"af-logo-well"]]],["af-nav-accordion",[[262,"af-nav-accordion",{"mode":[1],"breakpoint":[513],"value":[1025],"internalValue":[32]},[[0,"af-nav-accordion-item-toggle","handleItemToggle"]]]]],["af-nav-accordion-item",[[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",[[258,"af-nav-card",{"heading":[1],"href":[1],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"isHovered":[32]}]]],["af-nav-menu",[[262,"af-nav-menu",{"heading":[1],"breakpoint":[1],"showBorder":[4,"show-border"],"cardStyle":[516,"card-style"]}]]],["af-nav-menu-nest",[[262,"af-nav-menu-nest",{"type":[1],"breakpoint":[1],"showSidebarBorder":[516,"show-sidebar-border"]}]]],["af-numbered-stepper",[[262,"af-numbered-stepper",{"orientation":[1]}]]],["af-paperclip-decoration",[[257,"af-paperclip-decoration",{"width":[1],"height":[1],"opacity":[2],"fill":[1]}]]],["af-radio",[[257,"af-radio",{"checked":[1540],"disabled":[516],"name":[513],"value":[1]}]]],["af-show",[[257,"af-show",{"above":[1],"below":[1]}]]],["af-social-link",[[262,"af-social-link",{"href":[1],"label":[1],"icon":[1]}]]],["af-spacer",[[257,"af-spacer",{"size":[1],"flex":[4],"axis":[1]}]]],["af-stack",[[257,"af-stack",{"direction":[1],"gap":[1],"align":[1],"justify":[1],"wrap":[4]}]]],["af-stats-row",[[262,"af-stats-row"]]],["af-stepper",[[262,"af-stepper",{"orientation":[1]}]]],["af-stepper-step",[[262,"af-stepper-step",{"index":[514]}]]],["af-switch",[[257,"af-switch",{"active":[1540],"disabled":[516],"name":[1],"value":[1]}]]],["af-tab",[[257,"af-tab",{"label":[1],"active":[516],"disabled":[516],"shape":[513],"displayIcon":[4,"display-icon"],"displayNumber":[4,"display-number"],"value":[1]}]]],["af-tab-bar",[[257,"af-tab-bar",{"shape":[513],"breakpoint":[513]},[[0,"keydown","handleKeyDown"]]]]],["af-tag",[[257,"af-tag",{"size":[1],"variant":[1],"href":[1]}]]],["af-text-image-nest",[[262,"af-text-image-nest",{"layout":[1]}]]],["af-textarea",[[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",[[262,"af-theme-override",{"theme":[1]}]]],["af-visually-hidden",[[257,"af-visually-hidden",{"focusable":[4]}]]],["af-icon-box",[[258,"af-icon-box",{"icon":[1],"size":[1]}]]],["af-section",[[262,"af-section",{"padding":[1],"theme":[1],"container":[4]}]]],["af-aspect-ratio",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-icon-button",[[257,"af-icon-button",{"variant":[513],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-image",[[258,"af-image",{"src":[1],"alt":[1],"shape":[1]}]]],["af-number-badge",[[257,"af-number-badge",{"number":[2],"variant":[1],"size":[2]}]]],["af-button",[[257,"af-button",{"variant":[513],"size":[1],"disabled":[4],"type":[1],"href":[1],"hasIconLeft":[32],"hasIconRight":[32]}]]],["af-card",[[262,"af-card",{"theme":[1],"stretch":[516]}]]],["af-progress-line",[[258,"af-progress-line",{"progress":[2],"orientation":[1]}]]],["af-container",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]],["af-icon",[[257,"af-icon",{"name":[1],"size":[2],"label":[1]}]]],["af-heading_5",[[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",[[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);
|
|
20
20
|
});
|
|
21
21
|
//# sourceMappingURL=affinda.js.map
|
package/dist/esm/loader.js
CHANGED
|
@@ -4,7 +4,7 @@ export { s as setNonce } from './index-MwnBSqEY.js';
|
|
|
4
4
|
const defineCustomElements = async (win, options) => {
|
|
5
5
|
if (typeof window === 'undefined') return undefined;
|
|
6
6
|
await globalScripts();
|
|
7
|
-
return bootstrapLazy([["af-hero",[[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",[[262,"af-icon-text",{"icon":[1],"headingSize":[2,"heading-size"],"orientation":[1],"iconSize":[1,"icon-size"]}]]],["af-testimonial",[[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",[[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",[[262,"af-illustrated-card",{"theme":[1],"breakpoint":[1],"cardSize":[1,"card-size"]}]]],["af-numbered-stepper-item",[[262,"af-numbered-stepper-item",{"index":[514]}]]],["af-stat",[[257,"af-stat",{"value":[1],"label":[1]}]]],["af-testimonial-stat",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-video-container",[[262,"af-video-container",{"videoThumbnailUrl":[1,"video-thumbnail-url"],"videoAlt":[1,"video-alt"],"videoUrl":[1,"video-url"]}]]],["af-feature-grid",[[262,"af-feature-grid",{"columns":[2],"mobileLayout":[1,"mobile-layout"],"scrollProgress":[32]},null,{"mobileLayout":["onMobileLayoutChange"]}]]],["af-grid-callout",[[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",[[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",[[262,"af-split-section",{"topTheme":[1,"top-theme"],"bottomTheme":[1,"bottom-theme"],"padding":[1],"container":[4]}]]],["af-testimonial-carousel",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]},[[0,"
|
|
7
|
+
return bootstrapLazy([["af-hero",[[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",[[262,"af-icon-text",{"icon":[1],"headingSize":[2,"heading-size"],"orientation":[1],"iconSize":[1,"icon-size"]}]]],["af-testimonial",[[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",[[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",[[262,"af-illustrated-card",{"theme":[1],"breakpoint":[1],"cardSize":[1,"card-size"]}]]],["af-numbered-stepper-item",[[262,"af-numbered-stepper-item",{"index":[514]}]]],["af-stat",[[257,"af-stat",{"value":[1],"label":[1]}]]],["af-testimonial-stat",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-video-container",[[262,"af-video-container",{"videoThumbnailUrl":[1,"video-thumbnail-url"],"videoAlt":[1,"video-alt"],"videoUrl":[1,"video-url"]}]]],["af-feature-grid",[[262,"af-feature-grid",{"columns":[2],"mobileLayout":[1,"mobile-layout"],"scrollProgress":[32]},null,{"mobileLayout":["onMobileLayoutChange"]}]]],["af-grid-callout",[[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",[[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",[[262,"af-split-section",{"topTheme":[1,"top-theme"],"bottomTheme":[1,"bottom-theme"],"padding":[1],"container":[4]}]]],["af-testimonial-carousel",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]},[[0,"afNavPrev","handleNavPrev"],[0,"afNavNext","handleNavNext"]]]]],["af-text-image",[[262,"af-text-image",{"imagePosition":[1,"image-position"],"imageProportion":[1,"image-proportion"],"src":[1],"alt":[1],"showSecondLockup":[4,"show-second-lockup"]}]]],["af-accordion",[[262,"af-accordion",{"mode":[1],"value":[1025],"defaultValue":[1,"default-value"],"internalValue":[32]},[[0,"af-accordion-toggle","handleItemToggle"]],{"value":["handleValueChange"]}]]],["af-accordion-item",[[257,"af-accordion-item",{"itemId":[513,"item-id"],"open":[1540],"disabled":[516],"contentHeight":[32],"toggle":[64]},null,{"open":["handleOpenChange"]}]]],["af-button-group",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-center",[[257,"af-center",{"axis":[1],"inline":[4],"minHeight":[1,"min-height"]}]]],["af-checkbox",[[257,"af-checkbox",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[1],"value":[1]}]]],["af-client-carousel",[[262,"af-client-carousel",{"theme":[1],"rows":[2],"mode":[1]}]]],["af-color-swatch",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-contact-item",[[262,"af-contact-item",{"label":[1],"value":[1]}]]],["af-divider",[[257,"af-divider",{"orientation":[1],"spacing":[1]}]]],["af-feature-accordion",[[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",[[257,"af-fieldset",{"legend":[1],"orientation":[1],"disabled":[516]}]]],["af-footer",[[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",[[262,"af-footer-column",{"heading":[1]}]]],["af-footer-link",[[262,"af-footer-link",{"href":[1],"external":[4]}]]],["af-grid",[[257,"af-grid",{"columns":[2],"columnsLg":[2,"columns-lg"],"columnsMd":[2,"columns-md"],"columnsSm":[2,"columns-sm"],"gap":[1],"align":[1]}]]],["af-inline",[[257,"af-inline",{"gap":[1],"align":[1],"justify":[1],"wrap":[4]}]]],["af-input",[[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",[[257,"af-logo-well"]]],["af-nav-accordion",[[262,"af-nav-accordion",{"mode":[1],"breakpoint":[513],"value":[1025],"internalValue":[32]},[[0,"af-nav-accordion-item-toggle","handleItemToggle"]]]]],["af-nav-accordion-item",[[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",[[258,"af-nav-card",{"heading":[1],"href":[1],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"isHovered":[32]}]]],["af-nav-menu",[[262,"af-nav-menu",{"heading":[1],"breakpoint":[1],"showBorder":[4,"show-border"],"cardStyle":[516,"card-style"]}]]],["af-nav-menu-nest",[[262,"af-nav-menu-nest",{"type":[1],"breakpoint":[1],"showSidebarBorder":[516,"show-sidebar-border"]}]]],["af-numbered-stepper",[[262,"af-numbered-stepper",{"orientation":[1]}]]],["af-paperclip-decoration",[[257,"af-paperclip-decoration",{"width":[1],"height":[1],"opacity":[2],"fill":[1]}]]],["af-radio",[[257,"af-radio",{"checked":[1540],"disabled":[516],"name":[513],"value":[1]}]]],["af-show",[[257,"af-show",{"above":[1],"below":[1]}]]],["af-social-link",[[262,"af-social-link",{"href":[1],"label":[1],"icon":[1]}]]],["af-spacer",[[257,"af-spacer",{"size":[1],"flex":[4],"axis":[1]}]]],["af-stack",[[257,"af-stack",{"direction":[1],"gap":[1],"align":[1],"justify":[1],"wrap":[4]}]]],["af-stats-row",[[262,"af-stats-row"]]],["af-stepper",[[262,"af-stepper",{"orientation":[1]}]]],["af-stepper-step",[[262,"af-stepper-step",{"index":[514]}]]],["af-switch",[[257,"af-switch",{"active":[1540],"disabled":[516],"name":[1],"value":[1]}]]],["af-tab",[[257,"af-tab",{"label":[1],"active":[516],"disabled":[516],"shape":[513],"displayIcon":[4,"display-icon"],"displayNumber":[4,"display-number"],"value":[1]}]]],["af-tab-bar",[[257,"af-tab-bar",{"shape":[513],"breakpoint":[513]},[[0,"keydown","handleKeyDown"]]]]],["af-tag",[[257,"af-tag",{"size":[1],"variant":[1],"href":[1]}]]],["af-text-image-nest",[[262,"af-text-image-nest",{"layout":[1]}]]],["af-textarea",[[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",[[262,"af-theme-override",{"theme":[1]}]]],["af-visually-hidden",[[257,"af-visually-hidden",{"focusable":[4]}]]],["af-icon-box",[[258,"af-icon-box",{"icon":[1],"size":[1]}]]],["af-section",[[262,"af-section",{"padding":[1],"theme":[1],"container":[4]}]]],["af-aspect-ratio",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-icon-button",[[257,"af-icon-button",{"variant":[513],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-image",[[258,"af-image",{"src":[1],"alt":[1],"shape":[1]}]]],["af-number-badge",[[257,"af-number-badge",{"number":[2],"variant":[1],"size":[2]}]]],["af-button",[[257,"af-button",{"variant":[513],"size":[1],"disabled":[4],"type":[1],"href":[1],"hasIconLeft":[32],"hasIconRight":[32]}]]],["af-card",[[262,"af-card",{"theme":[1],"stretch":[516]}]]],["af-progress-line",[[258,"af-progress-line",{"progress":[2],"orientation":[1]}]]],["af-container",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]],["af-icon",[[257,"af-icon",{"name":[1],"size":[2],"label":[1]}]]],["af-heading_5",[[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",[[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);
|
|
8
8
|
};
|
|
9
9
|
|
|
10
10
|
export { defineCustomElements };
|
|
@@ -44,11 +44,11 @@ export declare class AfTestimonial {
|
|
|
44
44
|
/**
|
|
45
45
|
* Emitted when the previous button is clicked
|
|
46
46
|
*/
|
|
47
|
-
|
|
47
|
+
afNavPrev: EventEmitter<void>;
|
|
48
48
|
/**
|
|
49
49
|
* Emitted when the next button is clicked
|
|
50
50
|
*/
|
|
51
|
-
|
|
51
|
+
afNavNext: EventEmitter<void>;
|
|
52
52
|
private handlePrev;
|
|
53
53
|
private handleNext;
|
|
54
54
|
render(): any;
|
|
@@ -34,7 +34,7 @@ export declare class AfVideoContainer {
|
|
|
34
34
|
* Use this to handle video playback (e.g., open modal, embed player).
|
|
35
35
|
* If videoUrl is set and no handler prevents default, opens URL in new tab.
|
|
36
36
|
*/
|
|
37
|
-
|
|
37
|
+
afPlayClick: EventEmitter<{
|
|
38
38
|
videoUrl: string;
|
|
39
39
|
}>;
|
|
40
40
|
/**
|
|
@@ -3041,8 +3041,8 @@ declare global {
|
|
|
3041
3041
|
new (): HTMLAfTagElement;
|
|
3042
3042
|
};
|
|
3043
3043
|
interface HTMLAfTestimonialElementEventMap {
|
|
3044
|
-
"
|
|
3045
|
-
"
|
|
3044
|
+
"afNavPrev": void;
|
|
3045
|
+
"afNavNext": void;
|
|
3046
3046
|
}
|
|
3047
3047
|
interface HTMLAfTestimonialElement extends Components.AfTestimonial, HTMLStencilElement {
|
|
3048
3048
|
addEventListener<K extends keyof HTMLAfTestimonialElementEventMap>(type: K, listener: (this: HTMLAfTestimonialElement, ev: AfTestimonialCustomEvent<HTMLAfTestimonialElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -3180,7 +3180,7 @@ declare global {
|
|
|
3180
3180
|
new (): HTMLAfTypographyLockupElement;
|
|
3181
3181
|
};
|
|
3182
3182
|
interface HTMLAfVideoContainerElementEventMap {
|
|
3183
|
-
"
|
|
3183
|
+
"afPlayClick": { videoUrl: string };
|
|
3184
3184
|
}
|
|
3185
3185
|
/**
|
|
3186
3186
|
* Video Container molecule component for showcasing video content.
|
|
@@ -5025,11 +5025,11 @@ declare namespace LocalJSX {
|
|
|
5025
5025
|
/**
|
|
5026
5026
|
* Emitted when the next button is clicked
|
|
5027
5027
|
*/
|
|
5028
|
-
"
|
|
5028
|
+
"onAfNavNext"?: (event: AfTestimonialCustomEvent<void>) => void;
|
|
5029
5029
|
/**
|
|
5030
5030
|
* Emitted when the previous button is clicked
|
|
5031
5031
|
*/
|
|
5032
|
-
"
|
|
5032
|
+
"onAfNavPrev"?: (event: AfTestimonialCustomEvent<void>) => void;
|
|
5033
5033
|
/**
|
|
5034
5034
|
* Testimonial quote text. Falls back to the `quote-body` slot if that slot has content.
|
|
5035
5035
|
*/
|
|
@@ -5326,7 +5326,7 @@ declare namespace LocalJSX {
|
|
|
5326
5326
|
/**
|
|
5327
5327
|
* Emitted when the play button is clicked. Use this to handle video playback (e.g., open modal, embed player). If videoUrl is set and no handler prevents default, opens URL in new tab.
|
|
5328
5328
|
*/
|
|
5329
|
-
"
|
|
5329
|
+
"onAfPlayClick"?: (event: AfVideoContainerCustomEvent<{ videoUrl: string }>) => void;
|
|
5330
5330
|
/**
|
|
5331
5331
|
* Video alt text for accessibility
|
|
5332
5332
|
* @default 'Video thumbnail'
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["registerInstance","createEvent","h","Host","afVideoContainerCss","AfVideoContainer","constructor","hostRef","this","playClick","videoThumbnailUrl","videoAlt","videoUrl","handlePlayClick","event","emit","defaultPrevented","window","open","render","key","class","name","ratio","src","alt","loading","onClick","type","size","style"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAaC,OAAQC,MAAY,kBAEtE,MAAMC,EAAsB,kxDAE5B,MAAMC,EAAmB,MACrB,WAAAC,CAAYC,GACRP,EAAiBQ,KAAMD,GACvBC,KAAKC,UAAYR,EAAYO,KAAM,aAEnCA,KAAKE,kBAAoB,GAEzBF,KAAKG,SAAW,kBAEhBH,KAAKI,SAAW,GAIhBJ,KAAKK,gBAAkB,KACnB,MAAMC,EAAQN,KAAKC,UAAUM,KAAK,CAAEH,SAAUJ,KAAKI,WAEnD,IAAKE,EAAME,kBAAoBR,KAAKI,SAAU,CAC1CK,OAAOC,KAAKV,KAAKI,SAAU,SAC/B,EAER,CACA,MAAAO,GACI,OAAQjB,EAAEC,EAAM,CAAEiB,IAAK,4CAA8ClB,EAAE,MAAO,CAAEkB,IAAK,2CAA4CC,MAAO,mBAAqBnB,EAAE,MAAO,CAAEkB,IAAK,2CAA4CC,MAAO,wBAA0BnB,EAAE,OAAQ,CAAEkB,IAAK,2CAA4CE,KAAM,SAAWpB,EAAE,MAAO,CAAEkB,IAAK,2CAA4CC,MAAO,0BAA4BnB,EAAE,kBAAmB,CAAEkB,IAAK,2CAA4CG,MAAO,QAAUrB,EAAE,MAAO,CAAEkB,IAAK,2CAA4CC,MAAO,sCAAwCb,KAAKE,mBAAsBR,EAAE,MAAO,CAAEkB,IAAK,2CAA4CI,IAAKhB,KAAKE,kBAAmBe,IAAKjB,KAAKG,SAAUU,MAAO,6BAA8BK,QAAS,SAAYxB,EAAE,SAAU,CAAEkB,IAAK,2CAA4CC,MAAO,+BAAgCM,QAASnB,KAAKK,gBAAiB,aAAc,aAAce,KAAM,UAAY1B,EAAE,UAAW,CAAEkB,IAAK,2CAA4CE,KAAM,OAAQO,KAAM,SAAW3B,EAAE,MAAO,CAAEkB,IAAK,2CAA4CC,MAAO,2BAA6BnB,EAAE,OAAQ,CAAEkB,IAAK,2CAA4CE,KAAM,aACtuC,GAEJjB,EAAiByB,MAAQ1B,SAEhBC","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["registerInstance","createEvent","h","Host","afTestimonialCss","AfTestimonial","constructor","hostRef","this","navPrev","navNext","showNavigation","hasPrev","hasNext","handlePrev","emit","handleNext","render","key","class","backgroundImage","src","alt","logoImage","name","size","quote","attribution","variant","disabled","onClick","ariaLabel","readMoreLink","href","slot","style"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAaC,OAAQC,MAAY,kBAEtE,MAAMC,EAAmB,ynGAEzB,MAAMC,EAAgB,MAClB,WAAAC,CAAYC,GACRP,EAAiBQ,KAAMD,GACvBC,KAAKC,QAAUR,EAAYO,KAAM,WACjCA,KAAKE,QAAUT,EAAYO,KAAM,WAIjCA,KAAKG,eAAiB,MAItBH,KAAKI,QAAU,MAIfJ,KAAKK,QAAU,MACfL,KAAKM,WAAa,KACdN,KAAKC,QAAQM,MAAM,EAEvBP,KAAKQ,WAAa,KACdR,KAAKE,QAAQK,MAAM,CAE3B,CACA,MAAAE,GACI,OAAQf,EAAEC,EAAM,CAAEe,IAAK,4CAA8ChB,EAAE,MAAO,CAAEgB,IAAK,2CAA4CC,MAAO,oBAAsBjB,EAAE,MAAO,CAAEgB,IAAK,2CAA4CC,MAAO,qBAAuBX,KAAKY,iBAAoBlB,EAAE,MAAO,CAAEgB,IAAK,2CAA4CG,IAAKb,KAAKY,gBAAiBE,IAAK,GAAIH,MAAO,yBAA4BX,KAAKe,WAAcrB,EAAE,MAAO,CAAEgB,IAAK,2CAA4CC,MAAO,oBAAsBjB,EAAE,MAAO,CAAEgB,IAAK,2CAA4CG,IAAKb,KAAKe,UAAWD,IAAK,mBAAsBpB,EAAE,MAAO,CAAEgB,IAAK,2CAA4CC,MAAO,uBAAyBjB,EAAE,MAAO,CAAEgB,IAAK,2CAA4CC,MAAO,6BAA+BjB,EAAE,MAAO,CAAEgB,IAAK,2CAA4CC,MAAO,0BAA4BjB,EAAE,OAAQ,CAAEgB,IAAK,2CAA4CM,KAAM,cAAgBtB,EAAE,UAAW,CAAEgB,IAAK,2CAA4CM,KAAM,QAASC,KAAM,OAASvB,EAAE,MAAO,CAAEgB,IAAK,2CAA4CC,MAAO,oBAAsBjB,EAAE,OAAQ,CAAEgB,IAAK,2CAA4CM,KAAM,cAAgBhB,KAAKkB,QAASxB,EAAE,MAAO,CAAEgB,IAAK,2CAA4CC,MAAO,2BAA6BX,KAAKmB,cAAezB,EAAE,MAAO,CAAEgB,IAAK,2CAA4CC,MAAO,qBAAuBjB,EAAE,OAAQ,CAAEgB,IAAK,2CAA4CM,KAAM,WAAatB,EAAE,MAAO,CAAEgB,IAAK,2CAA4CC,MAAO,sBAAwBjB,EAAE,MAAO,CAAEgB,IAAK,2CAA4CC,MAAO,mBAAqBX,KAAKG,eAE1sDT,EAAE,MAAO,CAAEiB,MAAO,2BAA6BjB,EAAE,iBAAkB,CAAE0B,QAAS,YAAaC,UAAWrB,KAAKI,QAASkB,QAAStB,KAAKM,WAAYiB,UAAW,wBAA0B7B,EAAE,UAAW,CAAEsB,KAAM,aAAcC,KAAM,MAAQvB,EAAE,iBAAkB,CAAE0B,QAAS,YAAaC,UAAWrB,KAAKK,QAASiB,QAAStB,KAAKQ,WAAYe,UAAW,oBAAsB7B,EAAE,UAAW,CAAEsB,KAAM,cAAeC,KAAM,OAE9YvB,EAAE,OAAQ,CAAEsB,KAAM,gBAAmBhB,KAAKwB,cAAiB9B,EAAE,YAAa,CAAEgB,IAAK,2CAA4CU,QAAS,YAAaK,KAAMzB,KAAKwB,cAAgB,kBAAmB9B,EAAE,UAAW,CAAEgB,IAAK,2CAA4CgB,KAAM,aAAcV,KAAM,cAAeC,KAAM,SACpT,GAEJpB,EAAc8B,MAAQ/B,SAEbC","ignoreList":[]}
|
|
File without changes
|