@affinda/wc 0.6.1 → 0.6.2
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-client-carousel.entry.esm.js.map +1 -1
- package/dist/affinda/af-feature-accordion.entry.esm.js.map +1 -1
- package/dist/affinda/af-testimonial-stat.entry.esm.js.map +1 -1
- package/dist/affinda/affinda.esm.js +1 -1
- package/dist/affinda/p-41160f3a.entry.js +2 -0
- package/dist/affinda/p-41160f3a.entry.js.map +1 -0
- package/dist/affinda/p-81f2ccb4.entry.js +2 -0
- package/dist/affinda/{p-2e67fb0d.entry.js.map → p-81f2ccb4.entry.js.map} +1 -1
- package/dist/affinda/{p-764601e6.entry.js → p-99ec99e1.entry.js} +2 -2
- package/dist/cjs/af-client-carousel.cjs.entry.js +1 -1
- package/dist/cjs/af-client-carousel.entry.cjs.js.map +1 -1
- package/dist/cjs/af-feature-accordion.cjs.entry.js +2 -3
- package/dist/cjs/af-feature-accordion.entry.cjs.js.map +1 -1
- package/dist/cjs/af-testimonial-stat.cjs.entry.js +1 -1
- package/dist/cjs/af-testimonial-stat.entry.cjs.js.map +1 -1
- package/dist/collection/components/af-client-carousel/af-client-carousel.css +3 -4
- package/dist/collection/components/af-feature-accordion/af-feature-accordion.css +26 -1
- package/dist/collection/components/af-feature-accordion/af-feature-accordion.js +1 -2
- package/dist/collection/components/af-feature-accordion/af-feature-accordion.js.map +1 -1
- package/dist/collection/components/af-testimonial-stat/af-testimonial-stat.css +6 -1
- package/dist/components/af-client-carousel.js +1 -1
- package/dist/components/af-client-carousel.js.map +1 -1
- package/dist/components/af-feature-accordion.js +2 -3
- package/dist/components/af-feature-accordion.js.map +1 -1
- package/dist/components/af-testimonial-stat.js +1 -1
- package/dist/components/af-testimonial-stat.js.map +1 -1
- package/dist/esm/af-client-carousel.entry.js +1 -1
- package/dist/esm/af-client-carousel.entry.js.map +1 -1
- package/dist/esm/af-feature-accordion.entry.js +2 -3
- package/dist/esm/af-feature-accordion.entry.js.map +1 -1
- package/dist/esm/af-testimonial-stat.entry.js +1 -1
- package/dist/esm/af-testimonial-stat.entry.js.map +1 -1
- package/dist/hydrate/index.js +4 -5
- package/dist/hydrate/index.mjs +4 -5
- package/package.json +2 -2
- package/dist/affinda/p-2e67fb0d.entry.js +0 -2
- package/dist/affinda/p-39a40e6a.entry.js +0 -2
- package/dist/affinda/p-39a40e6a.entry.js.map +0 -1
- /package/dist/affinda/{p-764601e6.entry.js.map → p-99ec99e1.entry.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-client-carousel.entry.esm.js","sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=scoped","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.client-carousel {\n padding: 48px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-container {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-row {\n display: flex;\n width: 100%;\n overflow: hidden;\n position: relative;\n}\n\n.logo-track {\n display: flex;\n gap: var(--space-4, 16px);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n/* Scroll left animation */\n.scroll-left .logo-track {\n animation-name: scroll-left;\n animation-duration: 40s;\n}\n\n/* Scroll right animation */\n.scroll-right .logo-track {\n animation-name: scroll-right;\n animation-duration: 40s;\n}\n\n/* Pause animation on hover */\n:host(:hover) .logo-track {\n animation-play-state: paused;\n}\n\n/* Respect reduced motion: stop the infinite scroll and hold at a\n * stable frame so logos remain visible instead of being offscreen. */\n@media (prefers-reduced-motion: reduce) {\n .logo-track,\n .scroll-left .logo-track,\n .scroll-right .logo-track {\n animation: none;\n transform: translateX(0);\n }\n}\n\n/* ==========================================================================\n Static Mode\n ==========================================================================\n Non-animated, centred row. Used when the logo set is small enough to\n fit on screen without scrolling (the former website LogoPillRow use\n case). The clone-for-seamless-loop is skipped in TSX, so each logo\n appears exactly once here. */\n.client-carousel.mode-static .logo-track {\n animation: none;\n /* The track is what we centre — the .carousel-row is full-width so\n * it can host the overflow cue in scroll mode; in static mode we\n * centre its child track instead of fighting the row's flex default. */\n justify-content: center;\n /* Let the track grow only as wide as its content so justify-content\n * on the parent row can actually centre it horizontally. */\n flex-wrap: wrap;\n width: 100%;\n}\n\n.client-carousel.mode-static .carousel-row {\n justify-content: center;\n /* Static rows have no scrolling motion to mask, so allow the row to\n * expand content-naturally instead of clipping at viewport edges. */\n overflow: visible;\n}\n\n.client-carousel.mode-static .carousel-container {\n /* Match the row's no-clip behaviour so wrapped logos stay visible. */\n overflow: visible;\n}\n\n.client-carousel.mode-static {\n /* Keep horizontal bleed contained for consistency with scroll mode. */\n overflow: hidden;\n}\n\n@keyframes scroll-left {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n@keyframes scroll-right {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n/* Style slotted children (originals projected through the slot) and\n * JS-appended clones as flex rows. In scoped mode Stencil keeps all\n * this in light DOM, so a direct-descendant selector covers both. */\n.logo-track > * {\n display: flex;\n flex-shrink: 0;\n gap: var(--space-4, 16px);\n align-items: center;\n}\n\n/* ==========================================================================\n Theme Variants\n ========================================================================== */\n\n/* INKWELL THEME (Default) */\n:host(.theme-inkwell),\n.client-carousel.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);\n --af-carousel-logo-color: white;\n --af-carousel-logo-filter: brightness(0) invert(1);\n}\n\n/* WHITE THEME */\n:host(.theme-white),\n.client-carousel.theme-white {\n background-color: var(--colour-brand-white, #FFFFFF);\n --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* MIST-GREEN THEME */\n:host(.theme-mist-green),\n.client-carousel.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #C6D5D1);\n --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* SOFT-CLAY THEME */\n:host(.theme-soft-clay),\n.client-carousel.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* WHITE-IVORY THEME */\n:host(.theme-white-ivory),\n.client-carousel.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* ==========================================================================\n Responsive Adjustments\n ========================================================================== */\n\n/* Tablet adjustments */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n .client-carousel {\n padding: 32px 0;\n }\n}\n\n/* Mobile adjustments */\n/* ≤ mobile */\n@media (max-width: 767px) {\n .client-carousel {\n padding: 24px 0;\n }\n \n .carousel-container {\n gap: var(--space-3, 12px);\n }\n \n .logo-track {\n gap: var(--space-3, 12px);\n }\n \n ::slotted(*) {\n gap: var(--space-3, 12px);\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport type { Theme } from '../../types';\n\ntype Mode = 'scroll' | 'static';\n\n/**\n * Full-width row of client logos, either infinite-scrolling (default)\n * or a centred static row.\n *\n * This is a section-level component that spans full width.\n * Renders one or two rows; single row matches the Webflow reference,\n * two rows is the denser variant. When `mode=\"scroll\"` (default) rows\n * animate in opposite directions; when `mode=\"static\"` rows are centred\n * and the animation is disabled.\n *\n * For headlines, use a separate TypographyLockup or Heading component\n * above this carousel.\n *\n * **Seamless loop (scroll mode only):** the CSS animation translates\n * the track from 0% to -50% (or vice versa), which only looks continuous\n * if the track holds two identical copies of the content end-to-end.\n * Shadow DOM slots can only project content once, so we clone the\n * slotted nodes in `componentDidLoad` and append the copies to the track.\n * Static mode skips the clone — nothing is animating, so duplicating\n * the logos would just render them twice.\n */\n@Component({\n tag: 'af-client-carousel',\n styleUrl: 'af-client-carousel.css',\n // Scoped (not shadow) so that cloned nodes inherit the consumer's\n // external CSS (e.g. Astro-scoped `.logo-pill` on the SiteHeader\n // carousel). Shadow DOM would seal the clones off from outer styles.\n shadow: false,\n scoped: true,\n})\nexport class AfClientCarousel {\n @Element() el!: HTMLElement;\n\n /** Theme - sets background color and provides theme context to children */\n @Prop() theme: Theme = 'inkwell';\n\n /**\n * Number of rows.\n * - `1` (default) — single row, matches the Webflow reference.\n * - `2` — two rows (scroll in opposite directions, or stacked when static).\n *\n * When `rows=\"2\"`, slot `row-1` and `row-2` independently.\n * When `rows=\"1\"`, slot the default slot (unnamed) or `row-1`.\n */\n @Prop() rows: 1 | 2 = 1;\n\n /**\n * Layout mode.\n * - `scroll` (default) — infinite animated scroll; rows fill the full\n * width and are cloned for a seamless loop.\n * - `static` — no animation, logos centred horizontally. Use when the\n * logo set is small enough to fit on screen without scrolling.\n */\n @Prop() mode: Mode = 'scroll';\n\n private row1TrackRef?: HTMLElement;\n private row2TrackRef?: HTMLElement;\n\n componentDidLoad() {\n // Static mode doesn't animate, so the clone trick isn't needed —\n // skipping it avoids rendering every logo twice.\n if (this.mode === 'static') return;\n this.duplicateTrackContent(this.row1TrackRef);\n if (Number(this.rows) === 2) {\n this.duplicateTrackContent(this.row2TrackRef);\n }\n }\n\n /**\n * Append clones of every existing track child into the track so the\n * -50% translate animation loops seamlessly. Marks clones with\n * `aria-hidden` and `data-carousel-clone` so assistive tech ignores\n * them and we can skip them when re-duplicating.\n *\n * In scoped mode, slotted content is moved into the track as regular\n * children (there's no `<slot>` element to read from), so we just\n * iterate direct children that aren't themselves prior clones.\n */\n private duplicateTrackContent(track: HTMLElement | undefined) {\n if (!track) return;\n const originals = Array.from(track.children).filter(\n (child) => !(child as HTMLElement).hasAttribute('data-carousel-clone'),\n );\n originals.forEach((el) => {\n const clone = el.cloneNode(true) as HTMLElement;\n clone.setAttribute('data-carousel-clone', '');\n clone.setAttribute('aria-hidden', 'true');\n track.appendChild(clone);\n });\n }\n\n render() {\n const rows = Number(this.rows);\n // Direction classes are left on in static mode too — the `.mode-static`\n // CSS rule overrides `animation` to `none`, so the direction is a no-op\n // visually but keeps the markup shape consistent across modes.\n return (\n <Host class={`theme-${this.theme} mode-${this.mode}`}>\n <div class={`client-carousel theme-${this.theme} rows-${rows} mode-${this.mode}`}>\n <div class=\"carousel-container\">\n <div class=\"carousel-row scroll-left\">\n <div class=\"logo-track\" ref={(el) => (this.row1TrackRef = el)}>\n <slot name=\"row-1\">\n <slot></slot>\n </slot>\n </div>\n </div>\n\n {rows === 2 && (\n <div class=\"carousel-row scroll-right\">\n <div class=\"logo-track\" ref={(el) => (this.row2TrackRef = el)}>\n <slot name=\"row-2\"></slot>\n </div>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"af-client-carousel.entry.esm.js","sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=scoped","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.client-carousel {\n padding: 48px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-container {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-row {\n display: flex;\n width: 100%;\n overflow: hidden;\n position: relative;\n}\n\n.logo-track {\n display: flex;\n gap: var(--space-4, 16px);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n/* Scroll left animation */\n.scroll-left .logo-track {\n animation-name: scroll-left;\n animation-duration: 40s;\n}\n\n/* Scroll right animation */\n.scroll-right .logo-track {\n animation-name: scroll-right;\n animation-duration: 40s;\n}\n\n/* No pause on hover — the carousel is purely decorative; pausing it on\n hover felt jittery when the cursor accidentally crossed it (and live\n affinda.com keeps it scrolling regardless). */\n\n/* Respect reduced motion: stop the infinite scroll and hold at a\n * stable frame so logos remain visible instead of being offscreen. */\n@media (prefers-reduced-motion: reduce) {\n .logo-track,\n .scroll-left .logo-track,\n .scroll-right .logo-track {\n animation: none;\n transform: translateX(0);\n }\n}\n\n/* ==========================================================================\n Static Mode\n ==========================================================================\n Non-animated, centred row. Used when the logo set is small enough to\n fit on screen without scrolling (the former website LogoPillRow use\n case). The clone-for-seamless-loop is skipped in TSX, so each logo\n appears exactly once here. */\n.client-carousel.mode-static .logo-track {\n animation: none;\n /* The track is what we centre — the .carousel-row is full-width so\n * it can host the overflow cue in scroll mode; in static mode we\n * centre its child track instead of fighting the row's flex default. */\n justify-content: center;\n /* Let the track grow only as wide as its content so justify-content\n * on the parent row can actually centre it horizontally. */\n flex-wrap: wrap;\n width: 100%;\n}\n\n.client-carousel.mode-static .carousel-row {\n justify-content: center;\n /* Static rows have no scrolling motion to mask, so allow the row to\n * expand content-naturally instead of clipping at viewport edges. */\n overflow: visible;\n}\n\n.client-carousel.mode-static .carousel-container {\n /* Match the row's no-clip behaviour so wrapped logos stay visible. */\n overflow: visible;\n}\n\n.client-carousel.mode-static {\n /* Keep horizontal bleed contained for consistency with scroll mode. */\n overflow: hidden;\n}\n\n@keyframes scroll-left {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n@keyframes scroll-right {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n/* Style slotted children (originals projected through the slot) and\n * JS-appended clones as flex rows. In scoped mode Stencil keeps all\n * this in light DOM, so a direct-descendant selector covers both. */\n.logo-track > * {\n display: flex;\n flex-shrink: 0;\n gap: var(--space-4, 16px);\n align-items: center;\n}\n\n/* ==========================================================================\n Theme Variants\n ========================================================================== */\n\n/* INKWELL THEME (Default) */\n:host(.theme-inkwell),\n.client-carousel.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);\n --af-carousel-logo-color: white;\n --af-carousel-logo-filter: brightness(0) invert(1);\n}\n\n/* WHITE THEME */\n:host(.theme-white),\n.client-carousel.theme-white {\n background-color: var(--colour-brand-white, #FFFFFF);\n --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* MIST-GREEN THEME */\n:host(.theme-mist-green),\n.client-carousel.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #C6D5D1);\n --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* SOFT-CLAY THEME */\n:host(.theme-soft-clay),\n.client-carousel.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* WHITE-IVORY THEME */\n:host(.theme-white-ivory),\n.client-carousel.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* ==========================================================================\n Responsive Adjustments\n ========================================================================== */\n\n/* Tablet adjustments */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n .client-carousel {\n padding: 32px 0;\n }\n}\n\n/* Mobile adjustments */\n/* ≤ mobile */\n@media (max-width: 767px) {\n .client-carousel {\n padding: 24px 0;\n }\n \n .carousel-container {\n gap: var(--space-3, 12px);\n }\n \n .logo-track {\n gap: var(--space-3, 12px);\n }\n \n ::slotted(*) {\n gap: var(--space-3, 12px);\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport type { Theme } from '../../types';\n\ntype Mode = 'scroll' | 'static';\n\n/**\n * Full-width row of client logos, either infinite-scrolling (default)\n * or a centred static row.\n *\n * This is a section-level component that spans full width.\n * Renders one or two rows; single row matches the Webflow reference,\n * two rows is the denser variant. When `mode=\"scroll\"` (default) rows\n * animate in opposite directions; when `mode=\"static\"` rows are centred\n * and the animation is disabled.\n *\n * For headlines, use a separate TypographyLockup or Heading component\n * above this carousel.\n *\n * **Seamless loop (scroll mode only):** the CSS animation translates\n * the track from 0% to -50% (or vice versa), which only looks continuous\n * if the track holds two identical copies of the content end-to-end.\n * Shadow DOM slots can only project content once, so we clone the\n * slotted nodes in `componentDidLoad` and append the copies to the track.\n * Static mode skips the clone — nothing is animating, so duplicating\n * the logos would just render them twice.\n */\n@Component({\n tag: 'af-client-carousel',\n styleUrl: 'af-client-carousel.css',\n // Scoped (not shadow) so that cloned nodes inherit the consumer's\n // external CSS (e.g. Astro-scoped `.logo-pill` on the SiteHeader\n // carousel). Shadow DOM would seal the clones off from outer styles.\n shadow: false,\n scoped: true,\n})\nexport class AfClientCarousel {\n @Element() el!: HTMLElement;\n\n /** Theme - sets background color and provides theme context to children */\n @Prop() theme: Theme = 'inkwell';\n\n /**\n * Number of rows.\n * - `1` (default) — single row, matches the Webflow reference.\n * - `2` — two rows (scroll in opposite directions, or stacked when static).\n *\n * When `rows=\"2\"`, slot `row-1` and `row-2` independently.\n * When `rows=\"1\"`, slot the default slot (unnamed) or `row-1`.\n */\n @Prop() rows: 1 | 2 = 1;\n\n /**\n * Layout mode.\n * - `scroll` (default) — infinite animated scroll; rows fill the full\n * width and are cloned for a seamless loop.\n * - `static` — no animation, logos centred horizontally. Use when the\n * logo set is small enough to fit on screen without scrolling.\n */\n @Prop() mode: Mode = 'scroll';\n\n private row1TrackRef?: HTMLElement;\n private row2TrackRef?: HTMLElement;\n\n componentDidLoad() {\n // Static mode doesn't animate, so the clone trick isn't needed —\n // skipping it avoids rendering every logo twice.\n if (this.mode === 'static') return;\n this.duplicateTrackContent(this.row1TrackRef);\n if (Number(this.rows) === 2) {\n this.duplicateTrackContent(this.row2TrackRef);\n }\n }\n\n /**\n * Append clones of every existing track child into the track so the\n * -50% translate animation loops seamlessly. Marks clones with\n * `aria-hidden` and `data-carousel-clone` so assistive tech ignores\n * them and we can skip them when re-duplicating.\n *\n * In scoped mode, slotted content is moved into the track as regular\n * children (there's no `<slot>` element to read from), so we just\n * iterate direct children that aren't themselves prior clones.\n */\n private duplicateTrackContent(track: HTMLElement | undefined) {\n if (!track) return;\n const originals = Array.from(track.children).filter(\n (child) => !(child as HTMLElement).hasAttribute('data-carousel-clone'),\n );\n originals.forEach((el) => {\n const clone = el.cloneNode(true) as HTMLElement;\n clone.setAttribute('data-carousel-clone', '');\n clone.setAttribute('aria-hidden', 'true');\n track.appendChild(clone);\n });\n }\n\n render() {\n const rows = Number(this.rows);\n // Direction classes are left on in static mode too — the `.mode-static`\n // CSS rule overrides `animation` to `none`, so the direction is a no-op\n // visually but keeps the markup shape consistent across modes.\n return (\n <Host class={`theme-${this.theme} mode-${this.mode}`}>\n <div class={`client-carousel theme-${this.theme} rows-${rows} mode-${this.mode}`}>\n <div class=\"carousel-container\">\n <div class=\"carousel-row scroll-left\">\n <div class=\"logo-track\" ref={(el) => (this.row1TrackRef = el)}>\n <slot name=\"row-1\">\n <slot></slot>\n </slot>\n </div>\n </div>\n\n {rows === 2 && (\n <div class=\"carousel-row scroll-right\">\n <div class=\"logo-track\" ref={(el) => (this.row2TrackRef = el)}>\n <slot name=\"row-2\"></slot>\n </div>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-feature-accordion.entry.esm.js","sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":["/*\n * af-feature-accordion\n * ---------------------------------------------------------------------------\n * Themable CSS custom properties (safe to override from consumers):\n *\n * --af-accent-progress Colour of the per-item timer/progress bar.\n * Defaults to --colour-softclay-600 (brand\n * soft-clay). Override to retheme the accent.\n * --af-feature-accordion-image-pad\n * Padding around the accompanying image\n * inside its rounded container. Defaults to\n * 40px — tune for tighter or looser rhythm.\n *\n * The component also inherits the following theme tokens from its parent\n * <af-section> (or any ancestor setting them):\n *\n * --af-typography-heading-primary heading colour\n * --af-typography-body-default body colour\n * --af-background-border-default rule/divider colour\n * --af-background-level-1 image-container background\n */\n\n:host {\n display: block;\n width: 100%;\n}\n\n.feature-accordion {\n /* Inherits theme from parent Section via CSS custom properties */\n padding: 0 24px;\n\n /* Internal custom properties that inherit from parent Section's theme */\n --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));\n}\n\n.feature-accordion__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: clamp(36px, 5vw, 52px);\n line-height: 1.05;\n letter-spacing: -0.025em;\n color: var(--_heading-color);\n margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n display: flex;\n gap: 48px;\n}\n\n/* Accordion List */\n.feature-accordion__list {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n/* Accordion Item */\n.accordion-item {\n border-bottom: 1px solid var(--_border-color);\n}\n\n.accordion-item:first-child {\n border-top: 1px solid var(--_border-color);\n}\n\n.accordion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 24px 0;\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n color: var(--_heading-color);\n}\n\n.accordion-item__title {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.25;\n color: var(--_heading-color);\n margin: 0;\n flex: 1;\n transition: color 0.2s ease;\n}\n\n/* Collapsed items have lighter text */\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n opacity: 0.7;\n}\n\n.accordion-item__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--_heading-color);\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.accordion-item__icon svg {\n display: block;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n\n/* Plus → minus morph: vertical bar collapses and the whole icon rotates\n 45° when expanding, giving a single, fluid gesture. */\n.accordion-item__icon-bar {\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n transform-origin: 12px 12px;\n}\n\n.accordion-item--expanded .accordion-item__icon-bar--vert {\n transform: scaleY(0);\n opacity: 0;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n opacity: 0.5;\n}\n\n.accordion-item__content {\n overflow: hidden;\n transition:\n max-height var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n opacity var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n@media (prefers-reduced-motion: reduce) {\n .accordion-item__icon,\n .accordion-item__icon-bar,\n .accordion-item__content,\n .accordion-item__title {\n transition-duration: 0.01ms;\n }\n}\n\n.accordion-item__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: 17px;\n line-height: 1.6;\n color: var(--_body-color);\n margin: 0 0 20px 0;\n padding-right: 40px;\n opacity: 0.85;\n}\n\n/* Timer track - the progress bar at the bottom of expanded items */\n.accordion-item__timer-track {\n height: 3px;\n background-color: var(--_border-color);\n border-radius: 2px;\n margin-bottom: 8px;\n overflow: hidden;\n display: flex;\n justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n height: 100%;\n background-color: var(--af-accent-progress, var(--colour-softclay-600, #9e8765));\n border-radius: 2px;\n transition: width 0.05s linear;\n}\n\n/* Image Container - stretches full height to align with accordion */\n.feature-accordion__image-container {\n display: flex;\n align-items: center;\n justify-content: center;\n /* Flows from parent Section's theme; mist-green fallback for unthemed use */\n background-color: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\n border-radius: 20px;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: var(--af-feature-accordion-image-pad, 40px);\n}\n\n.feature-accordion__image {\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n object-fit: contain;\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Tablet */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n .feature-accordion__content {\n gap: 32px;\n }\n\n .feature-accordion__heading {\n margin-bottom: 40px;\n }\n\n .accordion-item__title {\n font-size: 20px;\n }\n}\n\n/* Mobile */\n/* mobile-only */\n@media (max-width: 768px) {\n .feature-accordion__content {\n flex-direction: column;\n gap: 32px;\n }\n\n .feature-accordion__image-container {\n order: -1;\n min-height: 280px;\n flex: none;\n }\n\n .feature-accordion__list {\n flex: none;\n }\n\n .accordion-item__title {\n font-size: 18px;\n }\n\n .accordion-item__description {\n font-size: 15px;\n padding-right: 0;\n }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n title: string;\n description: string;\n imageUrl?: string;\n imageAlt?: string;\n}\n\n/**\n * Feature accordion component with expandable items and accompanying image.\n * Used for showcasing product features with visual examples.\n * Features auto-cycling through items with a progress timer.\n * \n * **Must be wrapped in a Section component** to inherit theme styling.\n * The component automatically adapts colors based on the parent Section's theme.\n * \n * @example\n * ```tsx\n * <Section theme=\"inkwell\">\n * <FeatureAccordion heading=\"Features\" items={...} />\n * </Section>\n * ```\n */\n@Component({\n tag: 'af-feature-accordion',\n styleUrl: 'af-feature-accordion.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureAccordion {\n @Element() el!: HTMLElement;\n\n /** Section heading */\n @Prop() heading: string = 'Give AI agents your paperwork';\n\n /** JSON string of accordion items */\n @Prop() items: string = '[]';\n\n /** Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) */\n @Prop() cycleInterval: number = 6000;\n\n /** Whether auto-cycling is enabled */\n @Prop() autoCycle: boolean = true;\n\n /** Currently expanded item index */\n @State() expandedIndex: number = 0;\n\n /** Progress of current timer (0-100) */\n @State() timerProgress: number = 100;\n\n private progressTimer: number | null = null;\n private progressStartTime: number = 0;\n\n componentDidLoad() {\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n disconnectedCallback() {\n this.stopCycling();\n }\n\n @Watch('autoCycle')\n handleAutoCycleChange(newValue: boolean) {\n if (newValue) {\n this.startCycling();\n } else {\n this.stopCycling();\n }\n }\n\n private getItems(): FeatureAccordionItem[] {\n try {\n return JSON.parse(this.items);\n } catch {\n return [];\n }\n }\n\n private startCycling() {\n this.stopCycling();\n this.progressStartTime = Date.now();\n this.timerProgress = 100;\n \n // Progress animation frame\n const updateProgress = () => {\n const elapsed = Date.now() - this.progressStartTime;\n const remaining = this.cycleInterval - elapsed;\n \n if (remaining <= 0) {\n this.moveToNextItem();\n } else {\n this.timerProgress = (remaining / this.cycleInterval) * 100;\n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n };\n \n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n\n private stopCycling() {\n if (this.progressTimer) {\n cancelAnimationFrame(this.progressTimer);\n this.progressTimer = null;\n }\n }\n\n private moveToNextItem() {\n const items = this.getItems();\n if (items.length === 0) return;\n \n this.expandedIndex = (this.expandedIndex + 1) % items.length;\n // Restart the cycling timer for the new item\n this.startCycling();\n }\n\n private handleItemClick(index: number) {\n // Reset timer when user clicks\n this.expandedIndex = index;\n // Restart the cycling timer for the clicked item\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n render() {\n const items = this.getItems();\n const currentItem = items[this.expandedIndex];\n\n return (\n <Host>\n <div class=\"feature-accordion\">\n <div class=\"feature-accordion__container\">\n <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n \n <div class=\"feature-accordion__content\">\n {/* Left side - Accordion */}\n <div class=\"feature-accordion__list\">\n {items.map((item, index) => (\n <div \n class={{\n 'accordion-item': true,\n 'accordion-item--expanded': this.expandedIndex === index\n }}\n key={index}\n >\n <button\n class=\"accordion-item__header\"\n onClick={() => this.handleItemClick(index)}\n aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n >\n <h4 class=\"accordion-item__title\">{item.title}</h4>\n {/* Plus → minus: a single SVG with two strokes, the\n vertical one rotated-out to zero when expanded. This\n gives a fluid morph instead of swapping SVGs mid-\n animation. */}\n <span class=\"accordion-item__icon\" aria-hidden=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path class=\"accordion-item__icon-bar\" d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n <path class=\"accordion-item__icon-bar accordion-item__icon-bar--vert\" d=\"M12 5V19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n </button>\n <div \n class=\"accordion-item__content\"\n style={{ \n maxHeight: this.expandedIndex === index ? '200px' : '0',\n opacity: this.expandedIndex === index ? '1' : '0'\n }}\n >\n <p class=\"accordion-item__description\">{item.description}</p>\n {this.expandedIndex === index && this.autoCycle && (\n <div class=\"accordion-item__timer-track\">\n <div \n class=\"accordion-item__timer-progress\"\n style={{ width: `${this.timerProgress}%` }}\n ></div>\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n\n {/* Right side - Image */}\n <div class=\"feature-accordion__image-container\">\n <div class=\"feature-accordion__image-wrapper\">\n {currentItem?.imageUrl && (\n <img \n src={currentItem.imageUrl} \n alt={currentItem.imageAlt || currentItem.title}\n class=\"feature-accordion__image\"\n />\n )}\n {!currentItem?.imageUrl && (\n <div class=\"feature-accordion__image-placeholder\">\n <slot name=\"image\"></slot>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"af-feature-accordion.entry.esm.js","sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":["/*\n * af-feature-accordion\n * ---------------------------------------------------------------------------\n * Themable CSS custom properties (safe to override from consumers):\n *\n * --af-accent-progress Colour of the per-item timer/progress bar.\n * Defaults to --colour-softclay-600 (brand\n * soft-clay). Override to retheme the accent.\n * --af-feature-accordion-image-pad\n * Padding around the accompanying image\n * inside its rounded container. Defaults to\n * 40px — tune for tighter or looser rhythm.\n *\n * The component also inherits the following theme tokens from its parent\n * <af-section> (or any ancestor setting them):\n *\n * --af-typography-heading-primary heading colour\n * --af-typography-body-default body colour\n * --af-background-border-default rule/divider colour\n * --af-background-level-1 image-container background\n */\n\n:host {\n display: block;\n width: 100%;\n}\n\n.feature-accordion {\n /* Inherits theme from parent Section via CSS custom properties */\n padding: 0 24px;\n\n /* Internal custom properties that inherit from parent Section's theme */\n --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));\n}\n\n.feature-accordion__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: clamp(36px, 5vw, 52px);\n line-height: 1.05;\n letter-spacing: -0.025em;\n color: var(--_heading-color);\n margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n display: flex;\n gap: 48px;\n}\n\n/* Accordion List */\n.feature-accordion__list {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n/* Accordion Item */\n.accordion-item {\n border-bottom: 1px solid var(--_border-color);\n}\n\n.accordion-item:first-child {\n border-top: 1px solid var(--_border-color);\n}\n\n.accordion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 24px 0;\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n color: var(--_heading-color);\n}\n\n.accordion-item__title {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.25;\n color: var(--_heading-color);\n margin: 0;\n flex: 1;\n transition: color 0.2s ease;\n}\n\n/* Collapsed items have lighter text */\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n opacity: 0.7;\n}\n\n.accordion-item__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--_heading-color);\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.accordion-item__icon svg {\n display: block;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n\n/* Plus → minus morph: vertical bar collapses and the whole icon rotates\n 45° when expanding, giving a single, fluid gesture. */\n.accordion-item__icon-bar {\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n transform-origin: 12px 12px;\n}\n\n.accordion-item--expanded .accordion-item__icon-bar--vert {\n transform: scaleY(0);\n opacity: 0;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n opacity: 0.5;\n}\n\n.accordion-item__content {\n overflow: hidden;\n /* Use grid-template-rows-based expansion (0fr → 1fr) so the\n transition animates the *actual* content height, not a max-height\n ceiling. Avoids the \"section height bumps for a split second\"\n jank that happens when the outgoing item's content is shorter\n than max-height: at the midpoint of a max-height transition the\n outgoing item still renders at its natural height (because\n max-height >> content) while the incoming item ALSO renders at\n its natural height — sum > steady-state for a frame, so the\n image column on the right jumps. With grid-rows, each item\n occupies its proportional fraction of its own natural height;\n incoming + outgoing always sums to one full content row.\n Reported 2026-04-27 on /au's \"Give Affinda Platform your\n paperwork\" section. */\n display: grid;\n grid-template-rows: 0fr;\n transition:\n grid-template-rows var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n opacity var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.accordion-item--expanded .accordion-item__content {\n grid-template-rows: 1fr;\n}\n\n/* Inner wrapper required for grid-template-rows interpolation:\n the direct grid child collapses to min-content otherwise. */\n.accordion-item__content > * {\n min-height: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .accordion-item__icon,\n .accordion-item__icon-bar,\n .accordion-item__content,\n .accordion-item__title {\n transition-duration: 0.01ms;\n }\n}\n\n.accordion-item__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: 17px;\n line-height: 1.6;\n color: var(--_body-color);\n margin: 0 0 20px 0;\n padding-right: 40px;\n opacity: 0.85;\n}\n\n/* Timer track - the progress bar at the bottom of expanded items */\n.accordion-item__timer-track {\n height: 3px;\n background-color: var(--_border-color);\n border-radius: 2px;\n margin-bottom: 8px;\n overflow: hidden;\n display: flex;\n justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n height: 100%;\n background-color: var(--af-accent-progress, var(--colour-softclay-600, #9e8765));\n border-radius: 2px;\n transition: width 0.05s linear;\n}\n\n/* Image Container - stretches full height to align with accordion */\n.feature-accordion__image-container {\n display: flex;\n align-items: center;\n justify-content: center;\n /* Flows from parent Section's theme; mist-green fallback for unthemed use */\n background-color: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\n border-radius: 20px;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: var(--af-feature-accordion-image-pad, 40px);\n}\n\n.feature-accordion__image {\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n object-fit: contain;\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Tablet */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n .feature-accordion__content {\n gap: 32px;\n }\n\n .feature-accordion__heading {\n margin-bottom: 40px;\n }\n\n .accordion-item__title {\n font-size: 20px;\n }\n}\n\n/* Mobile */\n/* mobile-only */\n@media (max-width: 768px) {\n .feature-accordion__content {\n flex-direction: column;\n gap: 32px;\n }\n\n .feature-accordion__image-container {\n order: -1;\n min-height: 280px;\n flex: none;\n }\n\n .feature-accordion__list {\n flex: none;\n }\n\n .accordion-item__title {\n font-size: 18px;\n }\n\n .accordion-item__description {\n font-size: 15px;\n padding-right: 0;\n }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n title: string;\n description: string;\n imageUrl?: string;\n imageAlt?: string;\n}\n\n/**\n * Feature accordion component with expandable items and accompanying image.\n * Used for showcasing product features with visual examples.\n * Features auto-cycling through items with a progress timer.\n * \n * **Must be wrapped in a Section component** to inherit theme styling.\n * The component automatically adapts colors based on the parent Section's theme.\n * \n * @example\n * ```tsx\n * <Section theme=\"inkwell\">\n * <FeatureAccordion heading=\"Features\" items={...} />\n * </Section>\n * ```\n */\n@Component({\n tag: 'af-feature-accordion',\n styleUrl: 'af-feature-accordion.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureAccordion {\n @Element() el!: HTMLElement;\n\n /** Section heading */\n @Prop() heading: string = 'Give AI agents your paperwork';\n\n /** JSON string of accordion items */\n @Prop() items: string = '[]';\n\n /** Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) */\n @Prop() cycleInterval: number = 6000;\n\n /** Whether auto-cycling is enabled */\n @Prop() autoCycle: boolean = true;\n\n /** Currently expanded item index */\n @State() expandedIndex: number = 0;\n\n /** Progress of current timer (0-100) */\n @State() timerProgress: number = 100;\n\n private progressTimer: number | null = null;\n private progressStartTime: number = 0;\n\n componentDidLoad() {\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n disconnectedCallback() {\n this.stopCycling();\n }\n\n @Watch('autoCycle')\n handleAutoCycleChange(newValue: boolean) {\n if (newValue) {\n this.startCycling();\n } else {\n this.stopCycling();\n }\n }\n\n private getItems(): FeatureAccordionItem[] {\n try {\n return JSON.parse(this.items);\n } catch {\n return [];\n }\n }\n\n private startCycling() {\n this.stopCycling();\n this.progressStartTime = Date.now();\n this.timerProgress = 100;\n \n // Progress animation frame\n const updateProgress = () => {\n const elapsed = Date.now() - this.progressStartTime;\n const remaining = this.cycleInterval - elapsed;\n \n if (remaining <= 0) {\n this.moveToNextItem();\n } else {\n this.timerProgress = (remaining / this.cycleInterval) * 100;\n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n };\n \n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n\n private stopCycling() {\n if (this.progressTimer) {\n cancelAnimationFrame(this.progressTimer);\n this.progressTimer = null;\n }\n }\n\n private moveToNextItem() {\n const items = this.getItems();\n if (items.length === 0) return;\n \n this.expandedIndex = (this.expandedIndex + 1) % items.length;\n // Restart the cycling timer for the new item\n this.startCycling();\n }\n\n private handleItemClick(index: number) {\n // Reset timer when user clicks\n this.expandedIndex = index;\n // Restart the cycling timer for the clicked item\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n render() {\n const items = this.getItems();\n const currentItem = items[this.expandedIndex];\n\n return (\n <Host>\n <div class=\"feature-accordion\">\n <div class=\"feature-accordion__container\">\n <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n \n <div class=\"feature-accordion__content\">\n {/* Left side - Accordion */}\n <div class=\"feature-accordion__list\">\n {items.map((item, index) => (\n <div \n class={{\n 'accordion-item': true,\n 'accordion-item--expanded': this.expandedIndex === index\n }}\n key={index}\n >\n <button\n class=\"accordion-item__header\"\n onClick={() => this.handleItemClick(index)}\n aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n >\n <h4 class=\"accordion-item__title\">{item.title}</h4>\n {/* Plus → minus: a single SVG with two strokes, the\n vertical one rotated-out to zero when expanded. This\n gives a fluid morph instead of swapping SVGs mid-\n animation. */}\n <span class=\"accordion-item__icon\" aria-hidden=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path class=\"accordion-item__icon-bar\" d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n <path class=\"accordion-item__icon-bar accordion-item__icon-bar--vert\" d=\"M12 5V19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n </button>\n <div\n class=\"accordion-item__content\"\n style={{\n opacity: this.expandedIndex === index ? '1' : '0'\n }}\n >\n <p class=\"accordion-item__description\">{item.description}</p>\n {this.expandedIndex === index && this.autoCycle && (\n <div class=\"accordion-item__timer-track\">\n <div \n class=\"accordion-item__timer-progress\"\n style={{ width: `${this.timerProgress}%` }}\n ></div>\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n\n {/* Right side - Image */}\n <div class=\"feature-accordion__image-container\">\n <div class=\"feature-accordion__image-wrapper\">\n {currentItem?.imageUrl && (\n <img \n src={currentItem.imageUrl} \n alt={currentItem.imageAlt || currentItem.title}\n class=\"feature-accordion__image\"\n />\n )}\n {!currentItem?.imageUrl && (\n <div class=\"feature-accordion__image-placeholder\">\n <slot name=\"image\"></slot>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,qBAAqB,GAAG,+4KAA+4K;;MC8Bh6K,kBAAkB,GAAA,MAAA;AAN/B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUU,QAAA,IAAO,CAAA,OAAA,GAAW,+BAA+B;;AAGjD,QAAA,IAAK,CAAA,KAAA,GAAW,IAAI;;AAGpB,QAAA,IAAa,CAAA,aAAA,GAAW,IAAI;;AAG5B,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;;AAGxB,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;;AAGzB,QAAA,IAAa,CAAA,aAAA,GAAW,GAAG;AAE5B,QAAA,IAAa,CAAA,aAAA,GAAkB,IAAI;AACnC,QAAA,IAAiB,CAAA,iBAAA,GAAW,CAAC;AA4JtC;IA1JC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,YAAY,EAAE;;;IAIvB,oBAAoB,GAAA;QAClB,IAAI,CAAC,WAAW,EAAE;;AAIpB,IAAA,qBAAqB,CAAC,QAAiB,EAAA;QACrC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,YAAY,EAAE;;aACd;YACL,IAAI,CAAC,WAAW,EAAE;;;IAId,QAAQ,GAAA;AACd,QAAA,IAAI;YACF,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;;AAC7B,QAAA,MAAM;AACN,YAAA,OAAO,EAAE;;;IAIL,YAAY,GAAA;QAClB,IAAI,CAAC,WAAW,EAAE;AAClB,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,GAAG,EAAE;AACnC,QAAA,IAAI,CAAC,aAAa,GAAG,GAAG;;QAGxB,MAAM,cAAc,GAAG,MAAK;YAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,iBAAiB;AACnD,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO;AAE9C,YAAA,IAAI,SAAS,IAAI,CAAC,EAAE;gBAClB,IAAI,CAAC,cAAc,EAAE;;iBAChB;AACL,gBAAA,IAAI,CAAC,aAAa,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,IAAI,GAAG;AAC3D,gBAAA,IAAI,CAAC,aAAa,GAAG,qBAAqB,CAAC,cAAc,CAAC;;AAE9D,SAAC;AAED,QAAA,IAAI,CAAC,aAAa,GAAG,qBAAqB,CAAC,cAAc,CAAC;;IAGpD,WAAW,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACtB,YAAA,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC;AACxC,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI;;;IAIrB,cAAc,GAAA;AACpB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC7B,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE;AAExB,QAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM;;QAE5D,IAAI,CAAC,YAAY,EAAE;;AAGb,IAAA,eAAe,CAAC,KAAa,EAAA;;AAEnC,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;AAE1B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,YAAY,EAAE;;;IAIvB,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;QAC7B,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;QAE7C,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,8BAA8B,EAAA,EACvC,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,OAAO,CAAM,EAE1D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,EAAA,EAErC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,yBAAyB,IACjC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MACrB,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,0BAA0B,EAAE,IAAI,CAAC,aAAa,KAAK;AACpD,aAAA,EACD,GAAG,EAAE,KAAK,EAAA,EAEV,CAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAA,eAAA,EAC3B,IAAI,CAAC,aAAa,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,EAAA,EAE9D,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,KAAK,CAAM,EAKnD,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,sBAAsB,EAAA,aAAA,EAAa,MAAM,EAAA,EACnD,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,0BAA0B,EAAC,CAAC,EAAC,UAAU,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAA,gBAAA,EAAgB,OAAO,EAAE,CAAA,EACnH,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,yDAAyD,EAAC,CAAC,EAAC,UAAU,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,EAAA,gBAAA,EAAgB,OAAO,EAAE,CAAA,CAC9I,CACD,CACA,EACT,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK,GAAG,GAAG,GAAG;AAC/C,aAAA,EAAA,EAED,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,WAAW,CAAK,EAC5D,IAAI,CAAC,aAAa,KAAK,KAAK,IAAI,IAAI,CAAC,SAAS,KAC7C,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACtC,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,gCAAgC,EACtC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,IAAI,CAAC,aAAa,GAAG,EAAE,EACrC,CAAA,CACH,CACP,CACG,CACF,CACP,CAAC,CACE,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oCAAoC,EAAA,EAC7C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kCAAkC,EAAA,EAC1C,WAAW,EAAE,QAAQ,KACpB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,WAAW,CAAC,QAAQ,EACzB,GAAG,EAAE,WAAW,CAAC,QAAQ,IAAI,WAAW,CAAC,KAAK,EAC9C,KAAK,EAAC,0BAA0B,EAAA,CAChC,CACH,EACA,CAAC,WAAW,EAAE,QAAQ,KACrB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sCAAsC,EAAA,EAC/C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,CACP,CACG,CACF,CACF,CACF,CACF,CACD;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-testimonial-stat.entry.esm.js","sources":["src/components/af-testimonial-stat/af-testimonial-stat.css?tag=af-testimonial-stat&encapsulation=scoped","src/components/af-testimonial-stat/af-testimonial-stat.tsx"],"sourcesContent":[":host {\n display: block;\n flex: 1;\n min-width: 0;\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.stat--accent {\n /* Themed active/accent border color */\n border-left: 2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));\n padding-left:
|
|
1
|
+
{"version":3,"file":"af-testimonial-stat.entry.esm.js","sources":["src/components/af-testimonial-stat/af-testimonial-stat.css?tag=af-testimonial-stat&encapsulation=scoped","src/components/af-testimonial-stat/af-testimonial-stat.tsx"],"sourcesContent":[":host {\n display: block;\n flex: 1;\n min-width: 0;\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.stat--accent {\n /* Themed active/accent border color */\n border-left: 2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));\n /* Bumped from 16 px → 24 px because the prior 16 px gave too little\n breathing room between the divider and the stat-value at narrower\n card widths — long values like \"$1.2M\" / \"95%\" intersected the\n rule on State Cover Mutual / Felix at 1024-1280 vw. Surfaced\n 2026-04-27. */\n padding-left: 24px;\n min-height: 76px;\n justify-content: center;\n}\n\n/* Stat value - override af-heading to use secondary color */\n.stat-value {\n /* Override the heading color to use secondary (gold/ochre) instead of primary */\n --af-typography-heading-primary: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n letter-spacing: -0.88px;\n white-space: nowrap;\n /* Lining figures so \"1B+\" / \"95%\" hit a consistent baseline and\n optical weight, matching af-stat. */\n font-variant-numeric: lining-nums proportional-nums;\n font-feature-settings: 'ss01', 'kern';\n}\n\n/* Description - override af-text to use body-dark for emphasis */\n.stat-description {\n --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n overflow: hidden;\n text-overflow: ellipsis;\n}","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-testimonial-stat',\n styleUrl: 'af-testimonial-stat.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonialStat {\n /**\n * The statistic value (e.g., \"95%\", \"10×\", \"120,000\")\n */\n @Prop() value!: string;\n\n /**\n * Description text for the statistic\n */\n @Prop() description!: string;\n\n /**\n * Whether to show left accent border\n */\n @Prop() accentBorder: boolean = false;\n\n render() {\n return (\n <Host>\n <div class={`stat ${this.accentBorder ? 'stat--accent' : ''}`}>\n {/* Stat value uses secondary heading color via CSS override */}\n <af-heading level={2} class=\"stat-value\">{this.value}</af-heading>\n {/* Description uses af-text for proper theming */}\n <af-text variant=\"medium\" class=\"stat-description\">{this.description}</af-text>\n </div>\n </Host>\n );\n }\n}\n\n\n"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG,uwBAAuwB;;MCQvxB,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAiBE;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AActC;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,EAAE,CAAE,CAAA,EAAA,EAE3D,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,KAAK,CAAc,EAElE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,WAAW,CAAW,CAC3E,CACD;;;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,g as a,b as t}from"./p-CYq0zyKH.js";export{s as setNonce}from"./p-CYq0zyKH.js";var i=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};i().then((async e=>{await a();return t([["p-025851ca",[[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"]}]]],["p-1c19e94c",[[262,"af-icon-text",{icon:[1],headingSize:[2,"heading-size"],orientation:[1],iconSize:[1,"icon-size"]}]]],["p-fc19f53c",[[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"]}]]],["p-c6aa66f3",[[262,"af-feature-card",{theme:[1],layout:[1],cardSize:[513,"card-size"],headingSize:[2,"heading-size"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"]}]]],["p-9d85f685",[[262,"af-illustrated-card",{theme:[1],breakpoint:[1],cardSize:[1,"card-size"]}]]],["p-765883e7",[[262,"af-numbered-stepper-item",{index:[514]}]]],["p-9c8d18a3",[[257,"af-stat",{value:[1],label:[1]}]]],["p-
|
|
1
|
+
import{p as e,g as a,b as t}from"./p-CYq0zyKH.js";export{s as setNonce}from"./p-CYq0zyKH.js";var i=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};i().then((async e=>{await a();return t([["p-025851ca",[[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"]}]]],["p-1c19e94c",[[262,"af-icon-text",{icon:[1],headingSize:[2,"heading-size"],orientation:[1],iconSize:[1,"icon-size"]}]]],["p-fc19f53c",[[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"]}]]],["p-c6aa66f3",[[262,"af-feature-card",{theme:[1],layout:[1],cardSize:[513,"card-size"],headingSize:[2,"heading-size"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"]}]]],["p-9d85f685",[[262,"af-illustrated-card",{theme:[1],breakpoint:[1],cardSize:[1,"card-size"]}]]],["p-765883e7",[[262,"af-numbered-stepper-item",{index:[514]}]]],["p-9c8d18a3",[[257,"af-stat",{value:[1],label:[1]}]]],["p-99ec99e1",[[258,"af-testimonial-stat",{value:[1],description:[1],accentBorder:[4,"accent-border"]}]]],["p-296a6ece",[[262,"af-video-container",{videoThumbnailUrl:[1,"video-thumbnail-url"],videoAlt:[1,"video-alt"],videoUrl:[1,"video-url"]}]]],["p-f47d0d2d",[[262,"af-feature-grid",{columns:[2],mobileLayout:[1,"mobile-layout"],scrollProgress:[32]},null,{mobileLayout:["onMobileLayoutChange"]}]]],["p-47d2f72b",[[262,"af-grid-callout",{imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],imagePosition:[1,"image-position"],columns:[2],headingSize:[2,"heading-size"]}]]],["p-bc3d2bb4",[[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"]}]]],["p-e2667603",[[262,"af-split-section",{topTheme:[1,"top-theme"],bottomTheme:[1,"bottom-theme"],padding:[1],container:[4]}]]],["p-2315cb6b",[[262,"af-testimonial-carousel",{currentIndex:[32],isAnimating:[32],testimonialCount:[32]},[[0,"afNavPrev","handleNavPrev"],[0,"afNavNext","handleNavNext"]]]]],["p-2716cdc4",[[262,"af-text-image",{imagePosition:[1,"image-position"],imageProportion:[1,"image-proportion"],src:[1],alt:[1],showSecondLockup:[4,"show-second-lockup"]}]]],["p-3ed2eb32",[[262,"af-accordion",{mode:[1],value:[1025],defaultValue:[1,"default-value"],internalValue:[32]},[[0,"af-accordion-toggle","handleItemToggle"]],{value:["handleValueChange"]}]]],["p-da247ea4",[[257,"af-accordion-item",{itemId:[513,"item-id"],open:[1540],disabled:[516],contentHeight:[32],toggle:[64]},null,{open:["handleOpenChange"]}]]],["p-99b37588",[[257,"af-button-group",{direction:[1],gap:[1]}]]],["p-f49b41f9",[[257,"af-center",{axis:[1],inline:[4],minHeight:[1,"min-height"]}]]],["p-5e966aa6",[[257,"af-checkbox",{checked:[1540],indeterminate:[516],disabled:[516],name:[1],value:[1]}]]],["p-81f2ccb4",[[262,"af-client-carousel",{theme:[1],rows:[2],mode:[1]}]]],["p-761f06ae",[[257,"af-color-swatch",{color:[1],name:[1],size:[1]}]]],["p-fd39a1c2",[[262,"af-contact-item",{label:[1],value:[1]}]]],["p-805148d0",[[257,"af-divider",{orientation:[1],spacing:[1]}]]],["p-41160f3a",[[262,"af-feature-accordion",{heading:[1],items:[1],cycleInterval:[2,"cycle-interval"],autoCycle:[4,"auto-cycle"],expandedIndex:[32],timerProgress:[32]},null,{autoCycle:["handleAutoCycleChange"]}]]],["p-31d96ddc",[[257,"af-fieldset",{legend:[1],orientation:[1],disabled:[516]}]]],["p-e9527b93",[[262,"af-footer",{copyrightText:[1,"copyright-text"],statusText:[1,"status-text"],statusUrl:[1,"status-url"],systemsOperational:[4,"systems-operational"],showStatus:[4,"show-status"]}]]],["p-11d41c9a",[[262,"af-footer-column",{heading:[1]}]]],["p-e8a91b15",[[262,"af-footer-link",{href:[1],external:[4]}]]],["p-aabe4d24",[[257,"af-grid",{columns:[2],columnsLg:[2,"columns-lg"],columnsMd:[2,"columns-md"],columnsSm:[2,"columns-sm"],gap:[1],align:[1]}]]],["p-7b60b684",[[257,"af-inline",{gap:[1],align:[1],justify:[1],wrap:[4]}]]],["p-cd8cfa7f",[[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],multiline:[4],rows:[2],resize:[1],isFocused:[32],isHovered:[32]}]]],["p-dd30a9b8",[[257,"af-logo-well"]]],["p-1c922fff",[[262,"af-nav-accordion",{mode:[1],breakpoint:[513],value:[1025],internalValue:[32]},[[0,"af-nav-accordion-item-toggle","handleItemToggle"]]]]],["p-aa0cb70d",[[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"]}]]],["p-e10c03b6",[[258,"af-nav-card",{heading:[1],href:[1],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],isHovered:[32]}]]],["p-9c470a88",[[262,"af-nav-menu",{heading:[1],breakpoint:[1],showBorder:[4,"show-border"],cardStyle:[516,"card-style"]}]]],["p-604399ed",[[262,"af-nav-menu-nest",{type:[1],breakpoint:[1],showSidebarBorder:[516,"show-sidebar-border"]}]]],["p-6c4137dc",[[262,"af-numbered-stepper",{orientation:[1]}]]],["p-f5744d56",[[257,"af-paperclip-decoration",{width:[1],height:[1],opacity:[2],fill:[1]}]]],["p-1554f3d7",[[257,"af-radio",{checked:[1540],disabled:[516],name:[513],value:[1]}]]],["p-8eb57e35",[[257,"af-show",{above:[1],below:[1]}]]],["p-90e9e29c",[[262,"af-social-link",{href:[1],label:[1],icon:[1]}]]],["p-fad2d40b",[[257,"af-spacer",{size:[1],flex:[4],axis:[1]}]]],["p-c87e5b29",[[257,"af-stack",{direction:[1],gap:[1],align:[1],justify:[1],wrap:[4]}]]],["p-f6e1750e",[[262,"af-stats-row"]]],["p-5fdb4aad",[[262,"af-stepper",{orientation:[1]}]]],["p-3df90209",[[262,"af-stepper-step",{index:[514]}]]],["p-f38688c6",[[257,"af-switch",{active:[1540],disabled:[516],name:[1],value:[1]}]]],["p-fee9359c",[[257,"af-tab",{label:[1],active:[516],disabled:[516],shape:[513],displayIcon:[4,"display-icon"],displayNumber:[4,"display-number"],value:[1]}]]],["p-01b848e9",[[257,"af-tab-bar",{shape:[513],breakpoint:[513]},[[0,"keydown","handleKeyDown"]]]]],["p-223b2e70",[[257,"af-tag",{size:[1],variant:[1],href:[1]}]]],["p-edb426e6",[[262,"af-text-image-nest",{layout:[1]}]]],["p-6525d4fe",[[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]}]]],["p-eb611fb5",[[262,"af-theme-override",{theme:[1]}]]],["p-3fb33478",[[257,"af-visually-hidden",{focusable:[4]}]]],["p-e678100f",[[258,"af-icon-box",{icon:[1],size:[1]}]]],["p-653bca57",[[262,"af-section",{padding:[1],theme:[1],container:[4]}]]],["p-1e59a051",[[257,"af-aspect-ratio",{ratio:[1]}]]],["p-92c61bad",[[257,"af-icon-button",{variant:[513],size:[1],disabled:[4],href:[1],type:[1],ariaLabel:[1,"aria-label"]}]]],["p-0cbb1cb2",[[258,"af-image",{src:[1],alt:[1],shape:[1]}]]],["p-319b51c7",[[257,"af-number-badge",{number:[2],variant:[1],size:[2]}]]],["p-0c7d81d0",[[257,"af-button",{variant:[513],size:[1],disabled:[4],type:[1],href:[1],hasIconLeft:[32],hasIconRight:[32]}]]],["p-ae27e9da",[[262,"af-card",{theme:[1],stretch:[516],interactive:[516]}]]],["p-160997b3",[[258,"af-progress-line",{progress:[2],orientation:[1]}]]],["p-fe09a283",[[257,"af-container",{maxWidth:[1,"max-width"]}]]],["p-bc59dc0e",[[257,"af-icon",{name:[1],size:[2],label:[1]}]]],["p-94119fa2",[[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]}]]],["p-20faf28d",[[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]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=affinda.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as a,H as o,a as i}from"./p-CYq0zyKH.js";const r=".sc-af-feature-accordion-h{display:block;width:100%}.feature-accordion.sc-af-feature-accordion{padding:0 24px;--_heading-color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));--_body-color:var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));--_border-color:var(--af-background-border-default, rgba(20, 52, 59, 0.12))}.feature-accordion__heading.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:clamp(36px, 5vw, 52px);line-height:1.05;letter-spacing:-0.025em;color:var(--_heading-color);margin:0 0 56px 0}.feature-accordion__content.sc-af-feature-accordion{display:flex;gap:48px}.feature-accordion__list.sc-af-feature-accordion{display:flex;flex-direction:column;flex:1;min-width:0}.accordion-item.sc-af-feature-accordion{border-bottom:1px solid var(--_border-color)}.accordion-item.sc-af-feature-accordion:first-child{border-top:1px solid var(--_border-color)}.accordion-item__header.sc-af-feature-accordion{display:flex;align-items:center;justify-content:space-between;width:100%;padding:24px 0;background:none;border:none;cursor:pointer;text-align:left;gap:16px}.accordion-item__header.sc-af-feature-accordion:hover .accordion-item__title.sc-af-feature-accordion{color:var(--_heading-color)}.accordion-item__title.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;font-size:22px;line-height:1.25;color:var(--_heading-color);margin:0;flex:1;transition:color 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__title.sc-af-feature-accordion{opacity:0.7}.accordion-item__icon.sc-af-feature-accordion{flex-shrink:0;width:24px;height:24px;color:var(--_heading-color);transition:transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1))}.accordion-item__icon.sc-af-feature-accordion svg.sc-af-feature-accordion{display:block;width:100%;height:100%;overflow:visible}.accordion-item__icon-bar.sc-af-feature-accordion{transition:transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));transform-origin:12px 12px}.accordion-item--expanded.sc-af-feature-accordion .accordion-item__icon-bar--vert.sc-af-feature-accordion{transform:scaleY(0);opacity:0}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__icon.sc-af-feature-accordion{opacity:0.5}.accordion-item__content.sc-af-feature-accordion{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n opacity var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1))}.accordion-item--expanded.sc-af-feature-accordion .accordion-item__content.sc-af-feature-accordion{grid-template-rows:1fr}.accordion-item__content.sc-af-feature-accordion>*.sc-af-feature-accordion{min-height:0}@media (prefers-reduced-motion: reduce){.accordion-item__icon.sc-af-feature-accordion,.accordion-item__icon-bar.sc-af-feature-accordion,.accordion-item__content.sc-af-feature-accordion,.accordion-item__title.sc-af-feature-accordion{transition-duration:0.01ms}}.accordion-item__description.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:17px;line-height:1.6;color:var(--_body-color);margin:0 0 20px 0;padding-right:40px;opacity:0.85}.accordion-item__timer-track.sc-af-feature-accordion{height:3px;background-color:var(--_border-color);border-radius:2px;margin-bottom:8px;overflow:hidden;display:flex;justify-content:flex-start}.accordion-item__timer-progress.sc-af-feature-accordion{height:100%;background-color:var(--af-accent-progress, var(--colour-softclay-600, #9e8765));border-radius:2px;transition:width 0.05s linear}.feature-accordion__image-container.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;background-color:var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));border-radius:20px;overflow:hidden;flex:1;min-width:0}.feature-accordion__image-wrapper.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--af-feature-accordion-image-pad, 40px)}.feature-accordion__image.sc-af-feature-accordion{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.12)}.feature-accordion__image-placeholder.sc-af-feature-accordion{width:100%;height:100%;display:flex;align-items:center;justify-content:center}@media (max-width: 1024px){.feature-accordion__content.sc-af-feature-accordion{gap:32px}.feature-accordion__heading.sc-af-feature-accordion{margin-bottom:40px}.accordion-item__title.sc-af-feature-accordion{font-size:20px}}@media (max-width: 768px){.feature-accordion__content.sc-af-feature-accordion{flex-direction:column;gap:32px}.feature-accordion__image-container.sc-af-feature-accordion{order:-1;min-height:280px;flex:none}.feature-accordion__list.sc-af-feature-accordion{flex:none}.accordion-item__title.sc-af-feature-accordion{font-size:18px}.accordion-item__description.sc-af-feature-accordion{font-size:15px;padding-right:0}}";const c=class{constructor(a){e(this,a);this.heading="Give AI agents your paperwork";this.items="[]";this.cycleInterval=6e3;this.autoCycle=true;this.expandedIndex=0;this.timerProgress=100;this.progressTimer=null;this.progressStartTime=0}componentDidLoad(){if(this.autoCycle){this.startCycling()}}disconnectedCallback(){this.stopCycling()}handleAutoCycleChange(e){if(e){this.startCycling()}else{this.stopCycling()}}getItems(){try{return JSON.parse(this.items)}catch{return[]}}startCycling(){this.stopCycling();this.progressStartTime=Date.now();this.timerProgress=100;const e=()=>{const a=Date.now()-this.progressStartTime;const o=this.cycleInterval-a;if(o<=0){this.moveToNextItem()}else{this.timerProgress=o/this.cycleInterval*100;this.progressTimer=requestAnimationFrame(e)}};this.progressTimer=requestAnimationFrame(e)}stopCycling(){if(this.progressTimer){cancelAnimationFrame(this.progressTimer);this.progressTimer=null}}moveToNextItem(){const e=this.getItems();if(e.length===0)return;this.expandedIndex=(this.expandedIndex+1)%e.length;this.startCycling()}handleItemClick(e){this.expandedIndex=e;if(this.autoCycle){this.startCycling()}}render(){const e=this.getItems();const i=e[this.expandedIndex];return a(o,{key:"595e09ae8153ade7a4fa676eb6f286fc4fec5efe"},a("div",{key:"ee35766aa1e9300b4826576913bb7c84ede6a1e7",class:"feature-accordion"},a("div",{key:"a12641497c3c3de7e975ebd0735998d4febefb5f",class:"feature-accordion__container"},a("h2",{key:"42bb968907b3f2745f0ca8f2b40ccfb0e085dad5",class:"feature-accordion__heading"},this.heading),a("div",{key:"b70e9007418de1a53cf3f77b4e5477b63d0a11f1",class:"feature-accordion__content"},a("div",{key:"3fdfbc954daa9d02efb1cdb4ea9d26caeba603c8",class:"feature-accordion__list"},e.map(((e,o)=>a("div",{class:{"accordion-item":true,"accordion-item--expanded":this.expandedIndex===o},key:o},a("button",{class:"accordion-item__header",onClick:()=>this.handleItemClick(o),"aria-expanded":this.expandedIndex===o?"true":"false"},a("h4",{class:"accordion-item__title"},e.title),a("span",{class:"accordion-item__icon","aria-hidden":"true"},a("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{class:"accordion-item__icon-bar",d:"M5 12H19",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"}),a("path",{class:"accordion-item__icon-bar accordion-item__icon-bar--vert",d:"M12 5V19",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"})))),a("div",{class:"accordion-item__content",style:{opacity:this.expandedIndex===o?"1":"0"}},a("p",{class:"accordion-item__description"},e.description),this.expandedIndex===o&&this.autoCycle&&a("div",{class:"accordion-item__timer-track"},a("div",{class:"accordion-item__timer-progress",style:{width:`${this.timerProgress}%`}}))))))),a("div",{key:"160448af8f6c8c07adcb6aebf2cfdc27e29a242a",class:"feature-accordion__image-container"},a("div",{key:"c67cb6ce37a6a737d005d445eeea242241439fd4",class:"feature-accordion__image-wrapper"},i?.imageUrl&&a("img",{key:"663d009d13858b56ff4f4f91e64b07d386630f95",src:i.imageUrl,alt:i.imageAlt||i.title,class:"feature-accordion__image"}),!i?.imageUrl&&a("div",{key:"2a1142e7e82cd7c0e0e12a6ba0b9b5bd7397f928",class:"feature-accordion__image-placeholder"},a("slot",{key:"6023de60150d6eb41b27ee459b123e2f95234588",name:"image"}))))))))}get el(){return i(this)}static get watchers(){return{autoCycle:["handleAutoCycleChange"]}}};c.style=r;export{c as af_feature_accordion};
|
|
2
|
+
//# sourceMappingURL=p-41160f3a.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["registerInstance","h","Host","getElement","afFeatureAccordionCss","AfFeatureAccordion","constructor","hostRef","this","heading","items","cycleInterval","autoCycle","expandedIndex","timerProgress","progressTimer","progressStartTime","componentDidLoad","startCycling","disconnectedCallback","stopCycling","handleAutoCycleChange","newValue","getItems","JSON","parse","Date","now","updateProgress","elapsed","remaining","moveToNextItem","requestAnimationFrame","cancelAnimationFrame","length","handleItemClick","index","render","currentItem","key","class","map","item","onClick","title","width","height","viewBox","fill","xmlns","d","stroke","style","opacity","description","imageUrl","src","alt","imageAlt","name","el","watchers"],"sources":["0"],"mappings":"YAAcA,OAAkBC,OAAQC,OAAWC,MAAkB,kBAErE,MAAMC,EAAwB,g5KAE9B,MAAMC,EAAqB,MACvB,WAAAC,CAAYC,GACRP,EAAiBQ,KAAMD,GAEvBC,KAAKC,QAAU,gCAEfD,KAAKE,MAAQ,KAEbF,KAAKG,cAAgB,IAErBH,KAAKI,UAAY,KAEjBJ,KAAKK,cAAgB,EAErBL,KAAKM,cAAgB,IACrBN,KAAKO,cAAgB,KACrBP,KAAKQ,kBAAoB,CAC7B,CACA,gBAAAC,GACI,GAAIT,KAAKI,UAAW,CAChBJ,KAAKU,cACT,CACJ,CACA,oBAAAC,GACIX,KAAKY,aACT,CACA,qBAAAC,CAAsBC,GAClB,GAAIA,EAAU,CACVd,KAAKU,cACT,KACK,CACDV,KAAKY,aACT,CACJ,CACA,QAAAG,GACI,IACI,OAAOC,KAAKC,MAAMjB,KAAKE,MAC3B,CACA,MACI,MAAO,EACX,CACJ,CACA,YAAAQ,GACIV,KAAKY,cACLZ,KAAKQ,kBAAoBU,KAAKC,MAC9BnB,KAAKM,cAAgB,IAErB,MAAMc,EAAiB,KACnB,MAAMC,EAAUH,KAAKC,MAAQnB,KAAKQ,kBAClC,MAAMc,EAAYtB,KAAKG,cAAgBkB,EACvC,GAAIC,GAAa,EAAG,CAChBtB,KAAKuB,gBACT,KACK,CACDvB,KAAKM,cAAiBgB,EAAYtB,KAAKG,cAAiB,IACxDH,KAAKO,cAAgBiB,sBAAsBJ,EAC/C,GAEJpB,KAAKO,cAAgBiB,sBAAsBJ,EAC/C,CACA,WAAAR,GACI,GAAIZ,KAAKO,cAAe,CACpBkB,qBAAqBzB,KAAKO,eAC1BP,KAAKO,cAAgB,IACzB,CACJ,CACA,cAAAgB,GACI,MAAMrB,EAAQF,KAAKe,WACnB,GAAIb,EAAMwB,SAAW,EACjB,OACJ1B,KAAKK,eAAiBL,KAAKK,cAAgB,GAAKH,EAAMwB,OAEtD1B,KAAKU,cACT,CACA,eAAAiB,CAAgBC,GAEZ5B,KAAKK,cAAgBuB,EAErB,GAAI5B,KAAKI,UAAW,CAChBJ,KAAKU,cACT,CACJ,CACA,MAAAmB,GACI,MAAM3B,EAAQF,KAAKe,WACnB,MAAMe,EAAc5B,EAAMF,KAAKK,eAC/B,OAAQZ,EAAEC,EAAM,CAAEqC,IAAK,4CAA8CtC,EAAE,MAAO,CAAEsC,IAAK,2CAA4CC,MAAO,qBAAuBvC,EAAE,MAAO,CAAEsC,IAAK,2CAA4CC,MAAO,gCAAkCvC,EAAE,KAAM,CAAEsC,IAAK,2CAA4CC,MAAO,8BAAgChC,KAAKC,SAAUR,EAAE,MAAO,CAAEsC,IAAK,2CAA4CC,MAAO,8BAAgCvC,EAAE,MAAO,CAAEsC,IAAK,2CAA4CC,MAAO,2BAA6B9B,EAAM+B,KAAI,CAACC,EAAMN,IAAWnC,EAAE,MAAO,CAAEuC,MAAO,CAC9lB,iBAAkB,KAClB,2BAA4BhC,KAAKK,gBAAkBuB,GACpDG,IAAKH,GAASnC,EAAE,SAAU,CAAEuC,MAAO,yBAA0BG,QAAS,IAAMnC,KAAK2B,gBAAgBC,GAAQ,gBAAiB5B,KAAKK,gBAAkBuB,EAAQ,OAAS,SAAWnC,EAAE,KAAM,CAAEuC,MAAO,yBAA2BE,EAAKE,OAAQ3C,EAAE,OAAQ,CAAEuC,MAAO,uBAAwB,cAAe,QAAUvC,EAAE,MAAO,CAAE4C,MAAO,KAAMC,OAAQ,KAAMC,QAAS,YAAaC,KAAM,OAAQC,MAAO,8BAAgChD,EAAE,OAAQ,CAAEuC,MAAO,2BAA4BU,EAAG,WAAYC,OAAQ,eAAgB,eAAgB,IAAK,iBAAkB,UAAYlD,EAAE,OAAQ,CAAEuC,MAAO,0DAA2DU,EAAG,WAAYC,OAAQ,eAAgB,eAAgB,IAAK,iBAAkB,aAAelD,EAAE,MAAO,CAAEuC,MAAO,0BAA2BY,MAAO,CAClwBC,QAAS7C,KAAKK,gBAAkBuB,EAAQ,IAAM,MAC7CnC,EAAE,IAAK,CAAEuC,MAAO,+BAAiCE,EAAKY,aAAc9C,KAAKK,gBAAkBuB,GAAS5B,KAAKI,WAAcX,EAAE,MAAO,CAAEuC,MAAO,+BAAiCvC,EAAE,MAAO,CAAEuC,MAAO,iCAAkCY,MAAO,CAAEP,MAAO,GAAGrC,KAAKM,0BAA8Bb,EAAE,MAAO,CAAEsC,IAAK,2CAA4CC,MAAO,sCAAwCvC,EAAE,MAAO,CAAEsC,IAAK,2CAA4CC,MAAO,oCAAsCF,GAAaiB,UAAatD,EAAE,MAAO,CAAEsC,IAAK,2CAA4CiB,IAAKlB,EAAYiB,SAAUE,IAAKnB,EAAYoB,UAAYpB,EAAYM,MAAOJ,MAAO,8BAAiCF,GAAaiB,UAAatD,EAAE,MAAO,CAAEsC,IAAK,2CAA4CC,MAAO,wCAA0CvC,EAAE,OAAQ,CAAEsC,IAAK,2CAA4CoB,KAAM,gBACx4B,CACA,MAAIC,GAAO,OAAOzD,EAAWK,KAAO,CACpC,mBAAWqD,GAAa,MAAO,CAC3BjD,UAAa,CAAC,yBACf,GAEPP,EAAmB+C,MAAQhD,SAElBC","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as a,H as c,a as l}from"./p-CYq0zyKH.js";const o=".sc-af-client-carousel-h{display:block;width:100%}.client-carousel.sc-af-client-carousel{padding:48px 0;display:flex;flex-direction:column;align-items:center;width:100%;overflow:hidden}.carousel-container.sc-af-client-carousel{display:flex;flex-direction:column;gap:var(--space-4, 16px);width:100%;overflow:hidden}.carousel-row.sc-af-client-carousel{display:flex;width:100%;overflow:hidden;position:relative}.logo-track.sc-af-client-carousel{display:flex;gap:var(--space-4, 16px);animation-timing-function:linear;animation-iteration-count:infinite}.scroll-left.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation-name:scroll-left;animation-duration:40s}.scroll-right.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation-name:scroll-right;animation-duration:40s}@media (prefers-reduced-motion: reduce){.logo-track.sc-af-client-carousel,.scroll-left.sc-af-client-carousel .logo-track.sc-af-client-carousel,.scroll-right.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation:none;transform:translateX(0)}}.client-carousel.mode-static.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation:none;justify-content:center;flex-wrap:wrap;width:100%}.client-carousel.mode-static.sc-af-client-carousel .carousel-row.sc-af-client-carousel{justify-content:center;overflow:visible}.client-carousel.mode-static.sc-af-client-carousel .carousel-container.sc-af-client-carousel{overflow:visible}.client-carousel.mode-static.sc-af-client-carousel{overflow:hidden}@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}@keyframes scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}.logo-track.sc-af-client-carousel>*.sc-af-client-carousel{display:flex;flex-shrink:0;gap:var(--space-4, 16px);align-items:center}.theme-inkwell.sc-af-client-carousel-h,.client-carousel.theme-inkwell.sc-af-client-carousel{background-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-well-bg:var(--colour-background-level1-dark, #203e45);--af-carousel-logo-color:white;--af-carousel-logo-filter:brightness(0) invert(1)}.theme-white.sc-af-client-carousel-h,.client-carousel.theme-white.sc-af-client-carousel{background-color:var(--colour-brand-white, #FFFFFF);--af-carousel-logo-well-bg:var(--colour-background-level1, #e8eeed);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}.theme-mist-green.sc-af-client-carousel-h,.client-carousel.theme-mist-green.sc-af-client-carousel{background-color:var(--colour-brand-mist-green, #C6D5D1);--af-carousel-logo-well-bg:var(--colour-mistgreen-300, #dde6e3);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}.theme-soft-clay.sc-af-client-carousel-h,.client-carousel.theme-soft-clay.sc-af-client-carousel{background-color:var(--colour-softclay-400, #c0ab8d);--af-carousel-logo-well-bg:var(--colour-softclay-200, #d5c5b0);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}.theme-white-ivory.sc-af-client-carousel-h,.client-carousel.theme-white-ivory.sc-af-client-carousel{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-carousel-logo-well-bg:var(--colour-softclay-100, #f2eadc);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}@media (max-width: 1024px){.client-carousel.sc-af-client-carousel{padding:32px 0}}@media (max-width: 767px){.client-carousel.sc-af-client-carousel{padding:24px 0}.carousel-container.sc-af-client-carousel{gap:var(--space-3, 12px)}.logo-track.sc-af-client-carousel{gap:var(--space-3, 12px)}.sc-af-client-carousel-s>*{gap:var(--space-3, 12px)}}";const r=class{constructor(a){e(this,a);this.theme="inkwell";this.rows=1;this.mode="scroll"}componentDidLoad(){if(this.mode==="static")return;this.duplicateTrackContent(this.row1TrackRef);if(Number(this.rows)===2){this.duplicateTrackContent(this.row2TrackRef)}}duplicateTrackContent(e){if(!e)return;const a=Array.from(e.children).filter((e=>!e.hasAttribute("data-carousel-clone")));a.forEach((a=>{const c=a.cloneNode(true);c.setAttribute("data-carousel-clone","");c.setAttribute("aria-hidden","true");e.appendChild(c)}))}render(){const e=Number(this.rows);return a(c,{key:"de2ab8e013b602bae7f3a7ec86f46008271017df",class:`theme-${this.theme} mode-${this.mode}`},a("div",{key:"2a7f391b7f2821cc2b1fd22c4fecee8db49993eb",class:`client-carousel theme-${this.theme} rows-${e} mode-${this.mode}`},a("div",{key:"a050be7df00baa8f606edaaffaf80bf66d2745a5",class:"carousel-container"},a("div",{key:"652ebd5057f104456d327ea0741676d4c5f365c1",class:"carousel-row scroll-left"},a("div",{key:"115c61cf864eafef5de415cf47d5e7ad78326f49",class:"logo-track",ref:e=>this.row1TrackRef=e},a("slot",{key:"16d1001521b3950fbf24868df8f2f3141571ab9d",name:"row-1"},a("slot",{key:"b939997a0c782911cc46b68d6a2ea14cb3a85018"})))),e===2&&a("div",{key:"3490957a149d49dbbf37571efb27663c64bd39ea",class:"carousel-row scroll-right"},a("div",{key:"46944607b424071fc97864601f4392a649f1a890",class:"logo-track",ref:e=>this.row2TrackRef=e},a("slot",{key:"ec1be2a0b81dccfeda6a29650242808fcc67b214",name:"row-2"}))))))}get el(){return l(this)}};r.style=o;export{r as af_client_carousel};
|
|
2
|
+
//# sourceMappingURL=p-81f2ccb4.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["registerInstance","h","Host","getElement","afClientCarouselCss","AfClientCarousel","constructor","hostRef","this","theme","rows","mode","componentDidLoad","duplicateTrackContent","row1TrackRef","Number","row2TrackRef","track","originals","Array","from","children","filter","child","hasAttribute","forEach","el","clone","cloneNode","setAttribute","appendChild","render","key","class","ref","name","style"],"sources":["0"],"mappings":"YAAcA,OAAkBC,OAAQC,OAAWC,MAAkB,kBAErE,MAAMC,EAAsB
|
|
1
|
+
{"version":3,"names":["registerInstance","h","Host","getElement","afClientCarouselCss","AfClientCarousel","constructor","hostRef","this","theme","rows","mode","componentDidLoad","duplicateTrackContent","row1TrackRef","Number","row2TrackRef","track","originals","Array","from","children","filter","child","hasAttribute","forEach","el","clone","cloneNode","setAttribute","appendChild","render","key","class","ref","name","style"],"sources":["0"],"mappings":"YAAcA,OAAkBC,OAAQC,OAAWC,MAAkB,kBAErE,MAAMC,EAAsB,klHAE5B,MAAMC,EAAmB,MACrB,WAAAC,CAAYC,GACRP,EAAiBQ,KAAMD,GAEvBC,KAAKC,MAAQ,UASbD,KAAKE,KAAO,EAQZF,KAAKG,KAAO,QAChB,CACA,gBAAAC,GAGI,GAAIJ,KAAKG,OAAS,SACd,OACJH,KAAKK,sBAAsBL,KAAKM,cAChC,GAAIC,OAAOP,KAAKE,QAAU,EAAG,CACzBF,KAAKK,sBAAsBL,KAAKQ,aACpC,CACJ,CAWA,qBAAAH,CAAsBI,GAClB,IAAKA,EACD,OACJ,MAAMC,EAAYC,MAAMC,KAAKH,EAAMI,UAAUC,QAAQC,IAAWA,EAAMC,aAAa,yBACnFN,EAAUO,SAASC,IACf,MAAMC,EAAQD,EAAGE,UAAU,MAC3BD,EAAME,aAAa,sBAAuB,IAC1CF,EAAME,aAAa,cAAe,QAClCZ,EAAMa,YAAYH,EAAM,GAEhC,CACA,MAAAI,GACI,MAAMrB,EAAOK,OAAOP,KAAKE,MAIzB,OAAQT,EAAEC,EAAM,CAAE8B,IAAK,2CAA4CC,MAAO,SAASzB,KAAKC,cAAcD,KAAKG,QAAUV,EAAE,MAAO,CAAE+B,IAAK,2CAA4CC,MAAO,yBAAyBzB,KAAKC,cAAcC,UAAaF,KAAKG,QAAUV,EAAE,MAAO,CAAE+B,IAAK,2CAA4CC,MAAO,sBAAwBhC,EAAE,MAAO,CAAE+B,IAAK,2CAA4CC,MAAO,4BAA8BhC,EAAE,MAAO,CAAE+B,IAAK,2CAA4CC,MAAO,aAAcC,IAAMR,GAAQlB,KAAKM,aAAeY,GAAOzB,EAAE,OAAQ,CAAE+B,IAAK,2CAA4CG,KAAM,SAAWlC,EAAE,OAAQ,CAAE+B,IAAK,gDAAkDtB,IAAS,GAAMT,EAAE,MAAO,CAAE+B,IAAK,2CAA4CC,MAAO,6BAA+BhC,EAAE,MAAO,CAAE+B,IAAK,2CAA4CC,MAAO,aAAcC,IAAMR,GAAQlB,KAAKQ,aAAeU,GAAOzB,EAAE,OAAQ,CAAE+B,IAAK,2CAA4CG,KAAM,cACz/B,CACA,MAAIT,GAAO,OAAOvB,EAAWK,KAAO,GAExCH,EAAiB+B,MAAQhC,SAEhBC","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as a,h as t,H as e}from"./p-CYq0zyKH.js";const s=".sc-af-testimonial-stat-h{display:block;flex:1;min-width:0}.stat.sc-af-testimonial-stat{display:flex;flex-direction:column;gap:8px}.stat--accent.sc-af-testimonial-stat{border-left:2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));padding-left:
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as a,h as t,H as e}from"./p-CYq0zyKH.js";const s=".sc-af-testimonial-stat-h{display:block;flex:1;min-width:0}.stat.sc-af-testimonial-stat{display:flex;flex-direction:column;gap:8px}.stat--accent.sc-af-testimonial-stat{border-left:2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));padding-left:24px;min-height:76px;justify-content:center}.stat-value.sc-af-testimonial-stat{--af-typography-heading-primary:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));letter-spacing:-0.88px;white-space:nowrap;font-variant-numeric:lining-nums proportional-nums;font-feature-settings:'ss01', 'kern'}.stat-description.sc-af-testimonial-stat{--af-typography-body-default:var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));overflow:hidden;text-overflow:ellipsis}";const i=class{constructor(t){a(this,t);this.accentBorder=false}render(){return t(e,{key:"91a17ccf44b3306f2fad218201c0df9d541bdefd"},t("div",{key:"6df0dc851385ea20371197016c421365ef230fc4",class:`stat ${this.accentBorder?"stat--accent":""}`},t("af-heading",{key:"dae1f4350a927c43a44d3030c39d9a6e4fd46f11",level:2,class:"stat-value"},this.value),t("af-text",{key:"06db3eac580389a28974e9841d52b1175aa3d00a",variant:"medium",class:"stat-description"},this.description)))}};i.style=s;export{i as af_testimonial_stat};
|
|
2
|
+
//# sourceMappingURL=p-99ec99e1.entry.js.map
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-BuJz1C1M.js');
|
|
4
4
|
|
|
5
|
-
const afClientCarouselCss = ".sc-af-client-carousel-h{display:block;width:100%}.client-carousel.sc-af-client-carousel{padding:48px 0;display:flex;flex-direction:column;align-items:center;width:100%;overflow:hidden}.carousel-container.sc-af-client-carousel{display:flex;flex-direction:column;gap:var(--space-4, 16px);width:100%;overflow:hidden}.carousel-row.sc-af-client-carousel{display:flex;width:100%;overflow:hidden;position:relative}.logo-track.sc-af-client-carousel{display:flex;gap:var(--space-4, 16px);animation-timing-function:linear;animation-iteration-count:infinite}.scroll-left.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation-name:scroll-left;animation-duration:40s}.scroll-right.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation-name:scroll-right;animation-duration:40s}
|
|
5
|
+
const afClientCarouselCss = ".sc-af-client-carousel-h{display:block;width:100%}.client-carousel.sc-af-client-carousel{padding:48px 0;display:flex;flex-direction:column;align-items:center;width:100%;overflow:hidden}.carousel-container.sc-af-client-carousel{display:flex;flex-direction:column;gap:var(--space-4, 16px);width:100%;overflow:hidden}.carousel-row.sc-af-client-carousel{display:flex;width:100%;overflow:hidden;position:relative}.logo-track.sc-af-client-carousel{display:flex;gap:var(--space-4, 16px);animation-timing-function:linear;animation-iteration-count:infinite}.scroll-left.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation-name:scroll-left;animation-duration:40s}.scroll-right.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation-name:scroll-right;animation-duration:40s}@media (prefers-reduced-motion: reduce){.logo-track.sc-af-client-carousel,.scroll-left.sc-af-client-carousel .logo-track.sc-af-client-carousel,.scroll-right.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation:none;transform:translateX(0)}}.client-carousel.mode-static.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation:none;justify-content:center;flex-wrap:wrap;width:100%}.client-carousel.mode-static.sc-af-client-carousel .carousel-row.sc-af-client-carousel{justify-content:center;overflow:visible}.client-carousel.mode-static.sc-af-client-carousel .carousel-container.sc-af-client-carousel{overflow:visible}.client-carousel.mode-static.sc-af-client-carousel{overflow:hidden}@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}@keyframes scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}.logo-track.sc-af-client-carousel>*.sc-af-client-carousel{display:flex;flex-shrink:0;gap:var(--space-4, 16px);align-items:center}.theme-inkwell.sc-af-client-carousel-h,.client-carousel.theme-inkwell.sc-af-client-carousel{background-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-well-bg:var(--colour-background-level1-dark, #203e45);--af-carousel-logo-color:white;--af-carousel-logo-filter:brightness(0) invert(1)}.theme-white.sc-af-client-carousel-h,.client-carousel.theme-white.sc-af-client-carousel{background-color:var(--colour-brand-white, #FFFFFF);--af-carousel-logo-well-bg:var(--colour-background-level1, #e8eeed);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}.theme-mist-green.sc-af-client-carousel-h,.client-carousel.theme-mist-green.sc-af-client-carousel{background-color:var(--colour-brand-mist-green, #C6D5D1);--af-carousel-logo-well-bg:var(--colour-mistgreen-300, #dde6e3);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}.theme-soft-clay.sc-af-client-carousel-h,.client-carousel.theme-soft-clay.sc-af-client-carousel{background-color:var(--colour-softclay-400, #c0ab8d);--af-carousel-logo-well-bg:var(--colour-softclay-200, #d5c5b0);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}.theme-white-ivory.sc-af-client-carousel-h,.client-carousel.theme-white-ivory.sc-af-client-carousel{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-carousel-logo-well-bg:var(--colour-softclay-100, #f2eadc);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}@media (max-width: 1024px){.client-carousel.sc-af-client-carousel{padding:32px 0}}@media (max-width: 767px){.client-carousel.sc-af-client-carousel{padding:24px 0}.carousel-container.sc-af-client-carousel{gap:var(--space-3, 12px)}.logo-track.sc-af-client-carousel{gap:var(--space-3, 12px)}.sc-af-client-carousel-s>*{gap:var(--space-3, 12px)}}";
|
|
6
6
|
|
|
7
7
|
const AfClientCarousel = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-client-carousel.entry.cjs.js","sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=scoped","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.client-carousel {\n padding: 48px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-container {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-row {\n display: flex;\n width: 100%;\n overflow: hidden;\n position: relative;\n}\n\n.logo-track {\n display: flex;\n gap: var(--space-4, 16px);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n/* Scroll left animation */\n.scroll-left .logo-track {\n animation-name: scroll-left;\n animation-duration: 40s;\n}\n\n/* Scroll right animation */\n.scroll-right .logo-track {\n animation-name: scroll-right;\n animation-duration: 40s;\n}\n\n/* Pause animation on hover */\n:host(:hover) .logo-track {\n animation-play-state: paused;\n}\n\n/* Respect reduced motion: stop the infinite scroll and hold at a\n * stable frame so logos remain visible instead of being offscreen. */\n@media (prefers-reduced-motion: reduce) {\n .logo-track,\n .scroll-left .logo-track,\n .scroll-right .logo-track {\n animation: none;\n transform: translateX(0);\n }\n}\n\n/* ==========================================================================\n Static Mode\n ==========================================================================\n Non-animated, centred row. Used when the logo set is small enough to\n fit on screen without scrolling (the former website LogoPillRow use\n case). The clone-for-seamless-loop is skipped in TSX, so each logo\n appears exactly once here. */\n.client-carousel.mode-static .logo-track {\n animation: none;\n /* The track is what we centre — the .carousel-row is full-width so\n * it can host the overflow cue in scroll mode; in static mode we\n * centre its child track instead of fighting the row's flex default. */\n justify-content: center;\n /* Let the track grow only as wide as its content so justify-content\n * on the parent row can actually centre it horizontally. */\n flex-wrap: wrap;\n width: 100%;\n}\n\n.client-carousel.mode-static .carousel-row {\n justify-content: center;\n /* Static rows have no scrolling motion to mask, so allow the row to\n * expand content-naturally instead of clipping at viewport edges. */\n overflow: visible;\n}\n\n.client-carousel.mode-static .carousel-container {\n /* Match the row's no-clip behaviour so wrapped logos stay visible. */\n overflow: visible;\n}\n\n.client-carousel.mode-static {\n /* Keep horizontal bleed contained for consistency with scroll mode. */\n overflow: hidden;\n}\n\n@keyframes scroll-left {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n@keyframes scroll-right {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n/* Style slotted children (originals projected through the slot) and\n * JS-appended clones as flex rows. In scoped mode Stencil keeps all\n * this in light DOM, so a direct-descendant selector covers both. */\n.logo-track > * {\n display: flex;\n flex-shrink: 0;\n gap: var(--space-4, 16px);\n align-items: center;\n}\n\n/* ==========================================================================\n Theme Variants\n ========================================================================== */\n\n/* INKWELL THEME (Default) */\n:host(.theme-inkwell),\n.client-carousel.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);\n --af-carousel-logo-color: white;\n --af-carousel-logo-filter: brightness(0) invert(1);\n}\n\n/* WHITE THEME */\n:host(.theme-white),\n.client-carousel.theme-white {\n background-color: var(--colour-brand-white, #FFFFFF);\n --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* MIST-GREEN THEME */\n:host(.theme-mist-green),\n.client-carousel.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #C6D5D1);\n --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* SOFT-CLAY THEME */\n:host(.theme-soft-clay),\n.client-carousel.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* WHITE-IVORY THEME */\n:host(.theme-white-ivory),\n.client-carousel.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* ==========================================================================\n Responsive Adjustments\n ========================================================================== */\n\n/* Tablet adjustments */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n .client-carousel {\n padding: 32px 0;\n }\n}\n\n/* Mobile adjustments */\n/* ≤ mobile */\n@media (max-width: 767px) {\n .client-carousel {\n padding: 24px 0;\n }\n \n .carousel-container {\n gap: var(--space-3, 12px);\n }\n \n .logo-track {\n gap: var(--space-3, 12px);\n }\n \n ::slotted(*) {\n gap: var(--space-3, 12px);\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport type { Theme } from '../../types';\n\ntype Mode = 'scroll' | 'static';\n\n/**\n * Full-width row of client logos, either infinite-scrolling (default)\n * or a centred static row.\n *\n * This is a section-level component that spans full width.\n * Renders one or two rows; single row matches the Webflow reference,\n * two rows is the denser variant. When `mode=\"scroll\"` (default) rows\n * animate in opposite directions; when `mode=\"static\"` rows are centred\n * and the animation is disabled.\n *\n * For headlines, use a separate TypographyLockup or Heading component\n * above this carousel.\n *\n * **Seamless loop (scroll mode only):** the CSS animation translates\n * the track from 0% to -50% (or vice versa), which only looks continuous\n * if the track holds two identical copies of the content end-to-end.\n * Shadow DOM slots can only project content once, so we clone the\n * slotted nodes in `componentDidLoad` and append the copies to the track.\n * Static mode skips the clone — nothing is animating, so duplicating\n * the logos would just render them twice.\n */\n@Component({\n tag: 'af-client-carousel',\n styleUrl: 'af-client-carousel.css',\n // Scoped (not shadow) so that cloned nodes inherit the consumer's\n // external CSS (e.g. Astro-scoped `.logo-pill` on the SiteHeader\n // carousel). Shadow DOM would seal the clones off from outer styles.\n shadow: false,\n scoped: true,\n})\nexport class AfClientCarousel {\n @Element() el!: HTMLElement;\n\n /** Theme - sets background color and provides theme context to children */\n @Prop() theme: Theme = 'inkwell';\n\n /**\n * Number of rows.\n * - `1` (default) — single row, matches the Webflow reference.\n * - `2` — two rows (scroll in opposite directions, or stacked when static).\n *\n * When `rows=\"2\"`, slot `row-1` and `row-2` independently.\n * When `rows=\"1\"`, slot the default slot (unnamed) or `row-1`.\n */\n @Prop() rows: 1 | 2 = 1;\n\n /**\n * Layout mode.\n * - `scroll` (default) — infinite animated scroll; rows fill the full\n * width and are cloned for a seamless loop.\n * - `static` — no animation, logos centred horizontally. Use when the\n * logo set is small enough to fit on screen without scrolling.\n */\n @Prop() mode: Mode = 'scroll';\n\n private row1TrackRef?: HTMLElement;\n private row2TrackRef?: HTMLElement;\n\n componentDidLoad() {\n // Static mode doesn't animate, so the clone trick isn't needed —\n // skipping it avoids rendering every logo twice.\n if (this.mode === 'static') return;\n this.duplicateTrackContent(this.row1TrackRef);\n if (Number(this.rows) === 2) {\n this.duplicateTrackContent(this.row2TrackRef);\n }\n }\n\n /**\n * Append clones of every existing track child into the track so the\n * -50% translate animation loops seamlessly. Marks clones with\n * `aria-hidden` and `data-carousel-clone` so assistive tech ignores\n * them and we can skip them when re-duplicating.\n *\n * In scoped mode, slotted content is moved into the track as regular\n * children (there's no `<slot>` element to read from), so we just\n * iterate direct children that aren't themselves prior clones.\n */\n private duplicateTrackContent(track: HTMLElement | undefined) {\n if (!track) return;\n const originals = Array.from(track.children).filter(\n (child) => !(child as HTMLElement).hasAttribute('data-carousel-clone'),\n );\n originals.forEach((el) => {\n const clone = el.cloneNode(true) as HTMLElement;\n clone.setAttribute('data-carousel-clone', '');\n clone.setAttribute('aria-hidden', 'true');\n track.appendChild(clone);\n });\n }\n\n render() {\n const rows = Number(this.rows);\n // Direction classes are left on in static mode too — the `.mode-static`\n // CSS rule overrides `animation` to `none`, so the direction is a no-op\n // visually but keeps the markup shape consistent across modes.\n return (\n <Host class={`theme-${this.theme} mode-${this.mode}`}>\n <div class={`client-carousel theme-${this.theme} rows-${rows} mode-${this.mode}`}>\n <div class=\"carousel-container\">\n <div class=\"carousel-row scroll-left\">\n <div class=\"logo-track\" ref={(el) => (this.row1TrackRef = el)}>\n <slot name=\"row-1\">\n <slot></slot>\n </slot>\n </div>\n </div>\n\n {rows === 2 && (\n <div class=\"carousel-row scroll-right\">\n <div class=\"logo-track\" ref={(el) => (this.row2TrackRef = el)}>\n <slot name=\"row-2\"></slot>\n </div>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"af-client-carousel.entry.cjs.js","sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=scoped","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.client-carousel {\n padding: 48px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-container {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-row {\n display: flex;\n width: 100%;\n overflow: hidden;\n position: relative;\n}\n\n.logo-track {\n display: flex;\n gap: var(--space-4, 16px);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n/* Scroll left animation */\n.scroll-left .logo-track {\n animation-name: scroll-left;\n animation-duration: 40s;\n}\n\n/* Scroll right animation */\n.scroll-right .logo-track {\n animation-name: scroll-right;\n animation-duration: 40s;\n}\n\n/* No pause on hover — the carousel is purely decorative; pausing it on\n hover felt jittery when the cursor accidentally crossed it (and live\n affinda.com keeps it scrolling regardless). */\n\n/* Respect reduced motion: stop the infinite scroll and hold at a\n * stable frame so logos remain visible instead of being offscreen. */\n@media (prefers-reduced-motion: reduce) {\n .logo-track,\n .scroll-left .logo-track,\n .scroll-right .logo-track {\n animation: none;\n transform: translateX(0);\n }\n}\n\n/* ==========================================================================\n Static Mode\n ==========================================================================\n Non-animated, centred row. Used when the logo set is small enough to\n fit on screen without scrolling (the former website LogoPillRow use\n case). The clone-for-seamless-loop is skipped in TSX, so each logo\n appears exactly once here. */\n.client-carousel.mode-static .logo-track {\n animation: none;\n /* The track is what we centre — the .carousel-row is full-width so\n * it can host the overflow cue in scroll mode; in static mode we\n * centre its child track instead of fighting the row's flex default. */\n justify-content: center;\n /* Let the track grow only as wide as its content so justify-content\n * on the parent row can actually centre it horizontally. */\n flex-wrap: wrap;\n width: 100%;\n}\n\n.client-carousel.mode-static .carousel-row {\n justify-content: center;\n /* Static rows have no scrolling motion to mask, so allow the row to\n * expand content-naturally instead of clipping at viewport edges. */\n overflow: visible;\n}\n\n.client-carousel.mode-static .carousel-container {\n /* Match the row's no-clip behaviour so wrapped logos stay visible. */\n overflow: visible;\n}\n\n.client-carousel.mode-static {\n /* Keep horizontal bleed contained for consistency with scroll mode. */\n overflow: hidden;\n}\n\n@keyframes scroll-left {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n@keyframes scroll-right {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n/* Style slotted children (originals projected through the slot) and\n * JS-appended clones as flex rows. In scoped mode Stencil keeps all\n * this in light DOM, so a direct-descendant selector covers both. */\n.logo-track > * {\n display: flex;\n flex-shrink: 0;\n gap: var(--space-4, 16px);\n align-items: center;\n}\n\n/* ==========================================================================\n Theme Variants\n ========================================================================== */\n\n/* INKWELL THEME (Default) */\n:host(.theme-inkwell),\n.client-carousel.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);\n --af-carousel-logo-color: white;\n --af-carousel-logo-filter: brightness(0) invert(1);\n}\n\n/* WHITE THEME */\n:host(.theme-white),\n.client-carousel.theme-white {\n background-color: var(--colour-brand-white, #FFFFFF);\n --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* MIST-GREEN THEME */\n:host(.theme-mist-green),\n.client-carousel.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #C6D5D1);\n --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* SOFT-CLAY THEME */\n:host(.theme-soft-clay),\n.client-carousel.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* WHITE-IVORY THEME */\n:host(.theme-white-ivory),\n.client-carousel.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/* ==========================================================================\n Responsive Adjustments\n ========================================================================== */\n\n/* Tablet adjustments */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n .client-carousel {\n padding: 32px 0;\n }\n}\n\n/* Mobile adjustments */\n/* ≤ mobile */\n@media (max-width: 767px) {\n .client-carousel {\n padding: 24px 0;\n }\n \n .carousel-container {\n gap: var(--space-3, 12px);\n }\n \n .logo-track {\n gap: var(--space-3, 12px);\n }\n \n ::slotted(*) {\n gap: var(--space-3, 12px);\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport type { Theme } from '../../types';\n\ntype Mode = 'scroll' | 'static';\n\n/**\n * Full-width row of client logos, either infinite-scrolling (default)\n * or a centred static row.\n *\n * This is a section-level component that spans full width.\n * Renders one or two rows; single row matches the Webflow reference,\n * two rows is the denser variant. When `mode=\"scroll\"` (default) rows\n * animate in opposite directions; when `mode=\"static\"` rows are centred\n * and the animation is disabled.\n *\n * For headlines, use a separate TypographyLockup or Heading component\n * above this carousel.\n *\n * **Seamless loop (scroll mode only):** the CSS animation translates\n * the track from 0% to -50% (or vice versa), which only looks continuous\n * if the track holds two identical copies of the content end-to-end.\n * Shadow DOM slots can only project content once, so we clone the\n * slotted nodes in `componentDidLoad` and append the copies to the track.\n * Static mode skips the clone — nothing is animating, so duplicating\n * the logos would just render them twice.\n */\n@Component({\n tag: 'af-client-carousel',\n styleUrl: 'af-client-carousel.css',\n // Scoped (not shadow) so that cloned nodes inherit the consumer's\n // external CSS (e.g. Astro-scoped `.logo-pill` on the SiteHeader\n // carousel). Shadow DOM would seal the clones off from outer styles.\n shadow: false,\n scoped: true,\n})\nexport class AfClientCarousel {\n @Element() el!: HTMLElement;\n\n /** Theme - sets background color and provides theme context to children */\n @Prop() theme: Theme = 'inkwell';\n\n /**\n * Number of rows.\n * - `1` (default) — single row, matches the Webflow reference.\n * - `2` — two rows (scroll in opposite directions, or stacked when static).\n *\n * When `rows=\"2\"`, slot `row-1` and `row-2` independently.\n * When `rows=\"1\"`, slot the default slot (unnamed) or `row-1`.\n */\n @Prop() rows: 1 | 2 = 1;\n\n /**\n * Layout mode.\n * - `scroll` (default) — infinite animated scroll; rows fill the full\n * width and are cloned for a seamless loop.\n * - `static` — no animation, logos centred horizontally. Use when the\n * logo set is small enough to fit on screen without scrolling.\n */\n @Prop() mode: Mode = 'scroll';\n\n private row1TrackRef?: HTMLElement;\n private row2TrackRef?: HTMLElement;\n\n componentDidLoad() {\n // Static mode doesn't animate, so the clone trick isn't needed —\n // skipping it avoids rendering every logo twice.\n if (this.mode === 'static') return;\n this.duplicateTrackContent(this.row1TrackRef);\n if (Number(this.rows) === 2) {\n this.duplicateTrackContent(this.row2TrackRef);\n }\n }\n\n /**\n * Append clones of every existing track child into the track so the\n * -50% translate animation loops seamlessly. Marks clones with\n * `aria-hidden` and `data-carousel-clone` so assistive tech ignores\n * them and we can skip them when re-duplicating.\n *\n * In scoped mode, slotted content is moved into the track as regular\n * children (there's no `<slot>` element to read from), so we just\n * iterate direct children that aren't themselves prior clones.\n */\n private duplicateTrackContent(track: HTMLElement | undefined) {\n if (!track) return;\n const originals = Array.from(track.children).filter(\n (child) => !(child as HTMLElement).hasAttribute('data-carousel-clone'),\n );\n originals.forEach((el) => {\n const clone = el.cloneNode(true) as HTMLElement;\n clone.setAttribute('data-carousel-clone', '');\n clone.setAttribute('aria-hidden', 'true');\n track.appendChild(clone);\n });\n }\n\n render() {\n const rows = Number(this.rows);\n // Direction classes are left on in static mode too — the `.mode-static`\n // CSS rule overrides `animation` to `none`, so the direction is a no-op\n // visually but keeps the markup shape consistent across modes.\n return (\n <Host class={`theme-${this.theme} mode-${this.mode}`}>\n <div class={`client-carousel theme-${this.theme} rows-${rows} mode-${this.mode}`}>\n <div class=\"carousel-container\">\n <div class=\"carousel-row scroll-left\">\n <div class=\"logo-track\" ref={(el) => (this.row1TrackRef = el)}>\n <slot name=\"row-1\">\n <slot></slot>\n </slot>\n </div>\n </div>\n\n {rows === 2 && (\n <div class=\"carousel-row scroll-right\">\n <div class=\"logo-track\" ref={(el) => (this.row2TrackRef = el)}>\n <slot name=\"row-2\"></slot>\n </div>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-BuJz1C1M.js');
|
|
4
4
|
|
|
5
|
-
const afFeatureAccordionCss = ".sc-af-feature-accordion-h{display:block;width:100%}.feature-accordion.sc-af-feature-accordion{padding:0 24px;--_heading-color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));--_body-color:var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));--_border-color:var(--af-background-border-default, rgba(20, 52, 59, 0.12))}.feature-accordion__heading.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:clamp(36px, 5vw, 52px);line-height:1.05;letter-spacing:-0.025em;color:var(--_heading-color);margin:0 0 56px 0}.feature-accordion__content.sc-af-feature-accordion{display:flex;gap:48px}.feature-accordion__list.sc-af-feature-accordion{display:flex;flex-direction:column;flex:1;min-width:0}.accordion-item.sc-af-feature-accordion{border-bottom:1px solid var(--_border-color)}.accordion-item.sc-af-feature-accordion:first-child{border-top:1px solid var(--_border-color)}.accordion-item__header.sc-af-feature-accordion{display:flex;align-items:center;justify-content:space-between;width:100%;padding:24px 0;background:none;border:none;cursor:pointer;text-align:left;gap:16px}.accordion-item__header.sc-af-feature-accordion:hover .accordion-item__title.sc-af-feature-accordion{color:var(--_heading-color)}.accordion-item__title.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;font-size:22px;line-height:1.25;color:var(--_heading-color);margin:0;flex:1;transition:color 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__title.sc-af-feature-accordion{opacity:0.7}.accordion-item__icon.sc-af-feature-accordion{flex-shrink:0;width:24px;height:24px;color:var(--_heading-color);transition:transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1))}.accordion-item__icon.sc-af-feature-accordion svg.sc-af-feature-accordion{display:block;width:100%;height:100%;overflow:visible}.accordion-item__icon-bar.sc-af-feature-accordion{transition:transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));transform-origin:12px 12px}.accordion-item--expanded.sc-af-feature-accordion .accordion-item__icon-bar--vert.sc-af-feature-accordion{transform:scaleY(0);opacity:0}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__icon.sc-af-feature-accordion{opacity:0.5}.accordion-item__content.sc-af-feature-accordion{overflow:hidden;transition:
|
|
5
|
+
const afFeatureAccordionCss = ".sc-af-feature-accordion-h{display:block;width:100%}.feature-accordion.sc-af-feature-accordion{padding:0 24px;--_heading-color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));--_body-color:var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));--_border-color:var(--af-background-border-default, rgba(20, 52, 59, 0.12))}.feature-accordion__heading.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:clamp(36px, 5vw, 52px);line-height:1.05;letter-spacing:-0.025em;color:var(--_heading-color);margin:0 0 56px 0}.feature-accordion__content.sc-af-feature-accordion{display:flex;gap:48px}.feature-accordion__list.sc-af-feature-accordion{display:flex;flex-direction:column;flex:1;min-width:0}.accordion-item.sc-af-feature-accordion{border-bottom:1px solid var(--_border-color)}.accordion-item.sc-af-feature-accordion:first-child{border-top:1px solid var(--_border-color)}.accordion-item__header.sc-af-feature-accordion{display:flex;align-items:center;justify-content:space-between;width:100%;padding:24px 0;background:none;border:none;cursor:pointer;text-align:left;gap:16px}.accordion-item__header.sc-af-feature-accordion:hover .accordion-item__title.sc-af-feature-accordion{color:var(--_heading-color)}.accordion-item__title.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;font-size:22px;line-height:1.25;color:var(--_heading-color);margin:0;flex:1;transition:color 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__title.sc-af-feature-accordion{opacity:0.7}.accordion-item__icon.sc-af-feature-accordion{flex-shrink:0;width:24px;height:24px;color:var(--_heading-color);transition:transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1))}.accordion-item__icon.sc-af-feature-accordion svg.sc-af-feature-accordion{display:block;width:100%;height:100%;overflow:visible}.accordion-item__icon-bar.sc-af-feature-accordion{transition:transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));transform-origin:12px 12px}.accordion-item--expanded.sc-af-feature-accordion .accordion-item__icon-bar--vert.sc-af-feature-accordion{transform:scaleY(0);opacity:0}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__icon.sc-af-feature-accordion{opacity:0.5}.accordion-item__content.sc-af-feature-accordion{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n opacity var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1))}.accordion-item--expanded.sc-af-feature-accordion .accordion-item__content.sc-af-feature-accordion{grid-template-rows:1fr}.accordion-item__content.sc-af-feature-accordion>*.sc-af-feature-accordion{min-height:0}@media (prefers-reduced-motion: reduce){.accordion-item__icon.sc-af-feature-accordion,.accordion-item__icon-bar.sc-af-feature-accordion,.accordion-item__content.sc-af-feature-accordion,.accordion-item__title.sc-af-feature-accordion{transition-duration:0.01ms}}.accordion-item__description.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:17px;line-height:1.6;color:var(--_body-color);margin:0 0 20px 0;padding-right:40px;opacity:0.85}.accordion-item__timer-track.sc-af-feature-accordion{height:3px;background-color:var(--_border-color);border-radius:2px;margin-bottom:8px;overflow:hidden;display:flex;justify-content:flex-start}.accordion-item__timer-progress.sc-af-feature-accordion{height:100%;background-color:var(--af-accent-progress, var(--colour-softclay-600, #9e8765));border-radius:2px;transition:width 0.05s linear}.feature-accordion__image-container.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;background-color:var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));border-radius:20px;overflow:hidden;flex:1;min-width:0}.feature-accordion__image-wrapper.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--af-feature-accordion-image-pad, 40px)}.feature-accordion__image.sc-af-feature-accordion{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.12)}.feature-accordion__image-placeholder.sc-af-feature-accordion{width:100%;height:100%;display:flex;align-items:center;justify-content:center}@media (max-width: 1024px){.feature-accordion__content.sc-af-feature-accordion{gap:32px}.feature-accordion__heading.sc-af-feature-accordion{margin-bottom:40px}.accordion-item__title.sc-af-feature-accordion{font-size:20px}}@media (max-width: 768px){.feature-accordion__content.sc-af-feature-accordion{flex-direction:column;gap:32px}.feature-accordion__image-container.sc-af-feature-accordion{order:-1;min-height:280px;flex:none}.feature-accordion__list.sc-af-feature-accordion{flex:none}.accordion-item__title.sc-af-feature-accordion{font-size:18px}.accordion-item__description.sc-af-feature-accordion{font-size:15px;padding-right:0}}";
|
|
6
6
|
|
|
7
7
|
const AfFeatureAccordion = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -93,9 +93,8 @@ const AfFeatureAccordion = class {
|
|
|
93
93
|
'accordion-item': true,
|
|
94
94
|
'accordion-item--expanded': this.expandedIndex === index$1
|
|
95
95
|
}, key: index$1 }, index.h("button", { class: "accordion-item__header", onClick: () => this.handleItemClick(index$1), "aria-expanded": this.expandedIndex === index$1 ? 'true' : 'false' }, index.h("h4", { class: "accordion-item__title" }, item.title), index.h("span", { class: "accordion-item__icon", "aria-hidden": "true" }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { class: "accordion-item__icon-bar", d: "M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), index.h("path", { class: "accordion-item__icon-bar accordion-item__icon-bar--vert", d: "M12 5V19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), index.h("div", { class: "accordion-item__content", style: {
|
|
96
|
-
maxHeight: this.expandedIndex === index$1 ? '200px' : '0',
|
|
97
96
|
opacity: this.expandedIndex === index$1 ? '1' : '0'
|
|
98
|
-
} }, index.h("p", { class: "accordion-item__description" }, item.description), this.expandedIndex === index$1 && this.autoCycle && (index.h("div", { class: "accordion-item__timer-track" }, index.h("div", { class: "accordion-item__timer-progress", style: { width: `${this.timerProgress}%` } })))))))), index.h("div", { key: '
|
|
97
|
+
} }, index.h("p", { class: "accordion-item__description" }, item.description), this.expandedIndex === index$1 && this.autoCycle && (index.h("div", { class: "accordion-item__timer-track" }, index.h("div", { class: "accordion-item__timer-progress", style: { width: `${this.timerProgress}%` } })))))))), index.h("div", { key: '160448af8f6c8c07adcb6aebf2cfdc27e29a242a', class: "feature-accordion__image-container" }, index.h("div", { key: 'c67cb6ce37a6a737d005d445eeea242241439fd4', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (index.h("img", { key: '663d009d13858b56ff4f4f91e64b07d386630f95', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (index.h("div", { key: '2a1142e7e82cd7c0e0e12a6ba0b9b5bd7397f928', class: "feature-accordion__image-placeholder" }, index.h("slot", { key: '6023de60150d6eb41b27ee459b123e2f95234588', name: "image" }))))))))));
|
|
99
98
|
}
|
|
100
99
|
get el() { return index.getElement(this); }
|
|
101
100
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-feature-accordion.entry.cjs.js","sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":["/*\n * af-feature-accordion\n * ---------------------------------------------------------------------------\n * Themable CSS custom properties (safe to override from consumers):\n *\n * --af-accent-progress Colour of the per-item timer/progress bar.\n * Defaults to --colour-softclay-600 (brand\n * soft-clay). Override to retheme the accent.\n * --af-feature-accordion-image-pad\n * Padding around the accompanying image\n * inside its rounded container. Defaults to\n * 40px — tune for tighter or looser rhythm.\n *\n * The component also inherits the following theme tokens from its parent\n * <af-section> (or any ancestor setting them):\n *\n * --af-typography-heading-primary heading colour\n * --af-typography-body-default body colour\n * --af-background-border-default rule/divider colour\n * --af-background-level-1 image-container background\n */\n\n:host {\n display: block;\n width: 100%;\n}\n\n.feature-accordion {\n /* Inherits theme from parent Section via CSS custom properties */\n padding: 0 24px;\n\n /* Internal custom properties that inherit from parent Section's theme */\n --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));\n}\n\n.feature-accordion__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: clamp(36px, 5vw, 52px);\n line-height: 1.05;\n letter-spacing: -0.025em;\n color: var(--_heading-color);\n margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n display: flex;\n gap: 48px;\n}\n\n/* Accordion List */\n.feature-accordion__list {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n/* Accordion Item */\n.accordion-item {\n border-bottom: 1px solid var(--_border-color);\n}\n\n.accordion-item:first-child {\n border-top: 1px solid var(--_border-color);\n}\n\n.accordion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 24px 0;\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n color: var(--_heading-color);\n}\n\n.accordion-item__title {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.25;\n color: var(--_heading-color);\n margin: 0;\n flex: 1;\n transition: color 0.2s ease;\n}\n\n/* Collapsed items have lighter text */\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n opacity: 0.7;\n}\n\n.accordion-item__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--_heading-color);\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.accordion-item__icon svg {\n display: block;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n\n/* Plus → minus morph: vertical bar collapses and the whole icon rotates\n 45° when expanding, giving a single, fluid gesture. */\n.accordion-item__icon-bar {\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n transform-origin: 12px 12px;\n}\n\n.accordion-item--expanded .accordion-item__icon-bar--vert {\n transform: scaleY(0);\n opacity: 0;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n opacity: 0.5;\n}\n\n.accordion-item__content {\n overflow: hidden;\n transition:\n max-height var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n opacity var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n@media (prefers-reduced-motion: reduce) {\n .accordion-item__icon,\n .accordion-item__icon-bar,\n .accordion-item__content,\n .accordion-item__title {\n transition-duration: 0.01ms;\n }\n}\n\n.accordion-item__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: 17px;\n line-height: 1.6;\n color: var(--_body-color);\n margin: 0 0 20px 0;\n padding-right: 40px;\n opacity: 0.85;\n}\n\n/* Timer track - the progress bar at the bottom of expanded items */\n.accordion-item__timer-track {\n height: 3px;\n background-color: var(--_border-color);\n border-radius: 2px;\n margin-bottom: 8px;\n overflow: hidden;\n display: flex;\n justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n height: 100%;\n background-color: var(--af-accent-progress, var(--colour-softclay-600, #9e8765));\n border-radius: 2px;\n transition: width 0.05s linear;\n}\n\n/* Image Container - stretches full height to align with accordion */\n.feature-accordion__image-container {\n display: flex;\n align-items: center;\n justify-content: center;\n /* Flows from parent Section's theme; mist-green fallback for unthemed use */\n background-color: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\n border-radius: 20px;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: var(--af-feature-accordion-image-pad, 40px);\n}\n\n.feature-accordion__image {\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n object-fit: contain;\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Tablet */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n .feature-accordion__content {\n gap: 32px;\n }\n\n .feature-accordion__heading {\n margin-bottom: 40px;\n }\n\n .accordion-item__title {\n font-size: 20px;\n }\n}\n\n/* Mobile */\n/* mobile-only */\n@media (max-width: 768px) {\n .feature-accordion__content {\n flex-direction: column;\n gap: 32px;\n }\n\n .feature-accordion__image-container {\n order: -1;\n min-height: 280px;\n flex: none;\n }\n\n .feature-accordion__list {\n flex: none;\n }\n\n .accordion-item__title {\n font-size: 18px;\n }\n\n .accordion-item__description {\n font-size: 15px;\n padding-right: 0;\n }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n title: string;\n description: string;\n imageUrl?: string;\n imageAlt?: string;\n}\n\n/**\n * Feature accordion component with expandable items and accompanying image.\n * Used for showcasing product features with visual examples.\n * Features auto-cycling through items with a progress timer.\n * \n * **Must be wrapped in a Section component** to inherit theme styling.\n * The component automatically adapts colors based on the parent Section's theme.\n * \n * @example\n * ```tsx\n * <Section theme=\"inkwell\">\n * <FeatureAccordion heading=\"Features\" items={...} />\n * </Section>\n * ```\n */\n@Component({\n tag: 'af-feature-accordion',\n styleUrl: 'af-feature-accordion.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureAccordion {\n @Element() el!: HTMLElement;\n\n /** Section heading */\n @Prop() heading: string = 'Give AI agents your paperwork';\n\n /** JSON string of accordion items */\n @Prop() items: string = '[]';\n\n /** Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) */\n @Prop() cycleInterval: number = 6000;\n\n /** Whether auto-cycling is enabled */\n @Prop() autoCycle: boolean = true;\n\n /** Currently expanded item index */\n @State() expandedIndex: number = 0;\n\n /** Progress of current timer (0-100) */\n @State() timerProgress: number = 100;\n\n private progressTimer: number | null = null;\n private progressStartTime: number = 0;\n\n componentDidLoad() {\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n disconnectedCallback() {\n this.stopCycling();\n }\n\n @Watch('autoCycle')\n handleAutoCycleChange(newValue: boolean) {\n if (newValue) {\n this.startCycling();\n } else {\n this.stopCycling();\n }\n }\n\n private getItems(): FeatureAccordionItem[] {\n try {\n return JSON.parse(this.items);\n } catch {\n return [];\n }\n }\n\n private startCycling() {\n this.stopCycling();\n this.progressStartTime = Date.now();\n this.timerProgress = 100;\n \n // Progress animation frame\n const updateProgress = () => {\n const elapsed = Date.now() - this.progressStartTime;\n const remaining = this.cycleInterval - elapsed;\n \n if (remaining <= 0) {\n this.moveToNextItem();\n } else {\n this.timerProgress = (remaining / this.cycleInterval) * 100;\n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n };\n \n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n\n private stopCycling() {\n if (this.progressTimer) {\n cancelAnimationFrame(this.progressTimer);\n this.progressTimer = null;\n }\n }\n\n private moveToNextItem() {\n const items = this.getItems();\n if (items.length === 0) return;\n \n this.expandedIndex = (this.expandedIndex + 1) % items.length;\n // Restart the cycling timer for the new item\n this.startCycling();\n }\n\n private handleItemClick(index: number) {\n // Reset timer when user clicks\n this.expandedIndex = index;\n // Restart the cycling timer for the clicked item\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n render() {\n const items = this.getItems();\n const currentItem = items[this.expandedIndex];\n\n return (\n <Host>\n <div class=\"feature-accordion\">\n <div class=\"feature-accordion__container\">\n <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n \n <div class=\"feature-accordion__content\">\n {/* Left side - Accordion */}\n <div class=\"feature-accordion__list\">\n {items.map((item, index) => (\n <div \n class={{\n 'accordion-item': true,\n 'accordion-item--expanded': this.expandedIndex === index\n }}\n key={index}\n >\n <button\n class=\"accordion-item__header\"\n onClick={() => this.handleItemClick(index)}\n aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n >\n <h4 class=\"accordion-item__title\">{item.title}</h4>\n {/* Plus → minus: a single SVG with two strokes, the\n vertical one rotated-out to zero when expanded. This\n gives a fluid morph instead of swapping SVGs mid-\n animation. */}\n <span class=\"accordion-item__icon\" aria-hidden=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path class=\"accordion-item__icon-bar\" d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n <path class=\"accordion-item__icon-bar accordion-item__icon-bar--vert\" d=\"M12 5V19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n </button>\n <div \n class=\"accordion-item__content\"\n style={{ \n maxHeight: this.expandedIndex === index ? '200px' : '0',\n opacity: this.expandedIndex === index ? '1' : '0'\n }}\n >\n <p class=\"accordion-item__description\">{item.description}</p>\n {this.expandedIndex === index && this.autoCycle && (\n <div class=\"accordion-item__timer-track\">\n <div \n class=\"accordion-item__timer-progress\"\n style={{ width: `${this.timerProgress}%` }}\n ></div>\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n\n {/* Right side - Image */}\n <div class=\"feature-accordion__image-container\">\n <div class=\"feature-accordion__image-wrapper\">\n {currentItem?.imageUrl && (\n <img \n src={currentItem.imageUrl} \n alt={currentItem.imageAlt || currentItem.title}\n class=\"feature-accordion__image\"\n />\n )}\n {!currentItem?.imageUrl && (\n <div class=\"feature-accordion__image-placeholder\">\n <slot name=\"image\"></slot>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host","index"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"af-feature-accordion.entry.cjs.js","sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":["/*\n * af-feature-accordion\n * ---------------------------------------------------------------------------\n * Themable CSS custom properties (safe to override from consumers):\n *\n * --af-accent-progress Colour of the per-item timer/progress bar.\n * Defaults to --colour-softclay-600 (brand\n * soft-clay). Override to retheme the accent.\n * --af-feature-accordion-image-pad\n * Padding around the accompanying image\n * inside its rounded container. Defaults to\n * 40px — tune for tighter or looser rhythm.\n *\n * The component also inherits the following theme tokens from its parent\n * <af-section> (or any ancestor setting them):\n *\n * --af-typography-heading-primary heading colour\n * --af-typography-body-default body colour\n * --af-background-border-default rule/divider colour\n * --af-background-level-1 image-container background\n */\n\n:host {\n display: block;\n width: 100%;\n}\n\n.feature-accordion {\n /* Inherits theme from parent Section via CSS custom properties */\n padding: 0 24px;\n\n /* Internal custom properties that inherit from parent Section's theme */\n --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));\n}\n\n.feature-accordion__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: clamp(36px, 5vw, 52px);\n line-height: 1.05;\n letter-spacing: -0.025em;\n color: var(--_heading-color);\n margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n display: flex;\n gap: 48px;\n}\n\n/* Accordion List */\n.feature-accordion__list {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n/* Accordion Item */\n.accordion-item {\n border-bottom: 1px solid var(--_border-color);\n}\n\n.accordion-item:first-child {\n border-top: 1px solid var(--_border-color);\n}\n\n.accordion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 24px 0;\n background: none;\n border: none;\n cursor: pointer;\n text-align: left;\n gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n color: var(--_heading-color);\n}\n\n.accordion-item__title {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.25;\n color: var(--_heading-color);\n margin: 0;\n flex: 1;\n transition: color 0.2s ease;\n}\n\n/* Collapsed items have lighter text */\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n opacity: 0.7;\n}\n\n.accordion-item__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--_heading-color);\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.accordion-item__icon svg {\n display: block;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n\n/* Plus → minus morph: vertical bar collapses and the whole icon rotates\n 45° when expanding, giving a single, fluid gesture. */\n.accordion-item__icon-bar {\n transition:\n transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n opacity var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n transform-origin: 12px 12px;\n}\n\n.accordion-item--expanded .accordion-item__icon-bar--vert {\n transform: scaleY(0);\n opacity: 0;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n opacity: 0.5;\n}\n\n.accordion-item__content {\n overflow: hidden;\n /* Use grid-template-rows-based expansion (0fr → 1fr) so the\n transition animates the *actual* content height, not a max-height\n ceiling. Avoids the \"section height bumps for a split second\"\n jank that happens when the outgoing item's content is shorter\n than max-height: at the midpoint of a max-height transition the\n outgoing item still renders at its natural height (because\n max-height >> content) while the incoming item ALSO renders at\n its natural height — sum > steady-state for a frame, so the\n image column on the right jumps. With grid-rows, each item\n occupies its proportional fraction of its own natural height;\n incoming + outgoing always sums to one full content row.\n Reported 2026-04-27 on /au's \"Give Affinda Platform your\n paperwork\" section. */\n display: grid;\n grid-template-rows: 0fr;\n transition:\n grid-template-rows var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n opacity var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.accordion-item--expanded .accordion-item__content {\n grid-template-rows: 1fr;\n}\n\n/* Inner wrapper required for grid-template-rows interpolation:\n the direct grid child collapses to min-content otherwise. */\n.accordion-item__content > * {\n min-height: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .accordion-item__icon,\n .accordion-item__icon-bar,\n .accordion-item__content,\n .accordion-item__title {\n transition-duration: 0.01ms;\n }\n}\n\n.accordion-item__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n font-size: 17px;\n line-height: 1.6;\n color: var(--_body-color);\n margin: 0 0 20px 0;\n padding-right: 40px;\n opacity: 0.85;\n}\n\n/* Timer track - the progress bar at the bottom of expanded items */\n.accordion-item__timer-track {\n height: 3px;\n background-color: var(--_border-color);\n border-radius: 2px;\n margin-bottom: 8px;\n overflow: hidden;\n display: flex;\n justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n height: 100%;\n background-color: var(--af-accent-progress, var(--colour-softclay-600, #9e8765));\n border-radius: 2px;\n transition: width 0.05s linear;\n}\n\n/* Image Container - stretches full height to align with accordion */\n.feature-accordion__image-container {\n display: flex;\n align-items: center;\n justify-content: center;\n /* Flows from parent Section's theme; mist-green fallback for unthemed use */\n background-color: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\n border-radius: 20px;\n overflow: hidden;\n flex: 1;\n min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: var(--af-feature-accordion-image-pad, 40px);\n}\n\n.feature-accordion__image {\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n object-fit: contain;\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Tablet */\n/* ≤ tablet */\n@media (max-width: 1024px) {\n .feature-accordion__content {\n gap: 32px;\n }\n\n .feature-accordion__heading {\n margin-bottom: 40px;\n }\n\n .accordion-item__title {\n font-size: 20px;\n }\n}\n\n/* Mobile */\n/* mobile-only */\n@media (max-width: 768px) {\n .feature-accordion__content {\n flex-direction: column;\n gap: 32px;\n }\n\n .feature-accordion__image-container {\n order: -1;\n min-height: 280px;\n flex: none;\n }\n\n .feature-accordion__list {\n flex: none;\n }\n\n .accordion-item__title {\n font-size: 18px;\n }\n\n .accordion-item__description {\n font-size: 15px;\n padding-right: 0;\n }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n title: string;\n description: string;\n imageUrl?: string;\n imageAlt?: string;\n}\n\n/**\n * Feature accordion component with expandable items and accompanying image.\n * Used for showcasing product features with visual examples.\n * Features auto-cycling through items with a progress timer.\n * \n * **Must be wrapped in a Section component** to inherit theme styling.\n * The component automatically adapts colors based on the parent Section's theme.\n * \n * @example\n * ```tsx\n * <Section theme=\"inkwell\">\n * <FeatureAccordion heading=\"Features\" items={...} />\n * </Section>\n * ```\n */\n@Component({\n tag: 'af-feature-accordion',\n styleUrl: 'af-feature-accordion.css',\n shadow: false,\n scoped: true,\n})\nexport class AfFeatureAccordion {\n @Element() el!: HTMLElement;\n\n /** Section heading */\n @Prop() heading: string = 'Give AI agents your paperwork';\n\n /** JSON string of accordion items */\n @Prop() items: string = '[]';\n\n /** Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) */\n @Prop() cycleInterval: number = 6000;\n\n /** Whether auto-cycling is enabled */\n @Prop() autoCycle: boolean = true;\n\n /** Currently expanded item index */\n @State() expandedIndex: number = 0;\n\n /** Progress of current timer (0-100) */\n @State() timerProgress: number = 100;\n\n private progressTimer: number | null = null;\n private progressStartTime: number = 0;\n\n componentDidLoad() {\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n disconnectedCallback() {\n this.stopCycling();\n }\n\n @Watch('autoCycle')\n handleAutoCycleChange(newValue: boolean) {\n if (newValue) {\n this.startCycling();\n } else {\n this.stopCycling();\n }\n }\n\n private getItems(): FeatureAccordionItem[] {\n try {\n return JSON.parse(this.items);\n } catch {\n return [];\n }\n }\n\n private startCycling() {\n this.stopCycling();\n this.progressStartTime = Date.now();\n this.timerProgress = 100;\n \n // Progress animation frame\n const updateProgress = () => {\n const elapsed = Date.now() - this.progressStartTime;\n const remaining = this.cycleInterval - elapsed;\n \n if (remaining <= 0) {\n this.moveToNextItem();\n } else {\n this.timerProgress = (remaining / this.cycleInterval) * 100;\n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n };\n \n this.progressTimer = requestAnimationFrame(updateProgress);\n }\n\n private stopCycling() {\n if (this.progressTimer) {\n cancelAnimationFrame(this.progressTimer);\n this.progressTimer = null;\n }\n }\n\n private moveToNextItem() {\n const items = this.getItems();\n if (items.length === 0) return;\n \n this.expandedIndex = (this.expandedIndex + 1) % items.length;\n // Restart the cycling timer for the new item\n this.startCycling();\n }\n\n private handleItemClick(index: number) {\n // Reset timer when user clicks\n this.expandedIndex = index;\n // Restart the cycling timer for the clicked item\n if (this.autoCycle) {\n this.startCycling();\n }\n }\n\n render() {\n const items = this.getItems();\n const currentItem = items[this.expandedIndex];\n\n return (\n <Host>\n <div class=\"feature-accordion\">\n <div class=\"feature-accordion__container\">\n <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n \n <div class=\"feature-accordion__content\">\n {/* Left side - Accordion */}\n <div class=\"feature-accordion__list\">\n {items.map((item, index) => (\n <div \n class={{\n 'accordion-item': true,\n 'accordion-item--expanded': this.expandedIndex === index\n }}\n key={index}\n >\n <button\n class=\"accordion-item__header\"\n onClick={() => this.handleItemClick(index)}\n aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n >\n <h4 class=\"accordion-item__title\">{item.title}</h4>\n {/* Plus → minus: a single SVG with two strokes, the\n vertical one rotated-out to zero when expanded. This\n gives a fluid morph instead of swapping SVGs mid-\n animation. */}\n <span class=\"accordion-item__icon\" aria-hidden=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path class=\"accordion-item__icon-bar\" d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n <path class=\"accordion-item__icon-bar accordion-item__icon-bar--vert\" d=\"M12 5V19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n </button>\n <div\n class=\"accordion-item__content\"\n style={{\n opacity: this.expandedIndex === index ? '1' : '0'\n }}\n >\n <p class=\"accordion-item__description\">{item.description}</p>\n {this.expandedIndex === index && this.autoCycle && (\n <div class=\"accordion-item__timer-track\">\n <div \n class=\"accordion-item__timer-progress\"\n style={{ width: `${this.timerProgress}%` }}\n ></div>\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n\n {/* Right side - Image */}\n <div class=\"feature-accordion__image-container\">\n <div class=\"feature-accordion__image-wrapper\">\n {currentItem?.imageUrl && (\n <img \n src={currentItem.imageUrl} \n alt={currentItem.imageAlt || currentItem.title}\n class=\"feature-accordion__image\"\n />\n )}\n {!currentItem?.imageUrl && (\n <div class=\"feature-accordion__image-placeholder\">\n <slot name=\"image\"></slot>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host","index"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-BuJz1C1M.js');
|
|
4
4
|
|
|
5
|
-
const afTestimonialStatCss = ".sc-af-testimonial-stat-h{display:block;flex:1;min-width:0}.stat.sc-af-testimonial-stat{display:flex;flex-direction:column;gap:8px}.stat--accent.sc-af-testimonial-stat{border-left:2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));padding-left:
|
|
5
|
+
const afTestimonialStatCss = ".sc-af-testimonial-stat-h{display:block;flex:1;min-width:0}.stat.sc-af-testimonial-stat{display:flex;flex-direction:column;gap:8px}.stat--accent.sc-af-testimonial-stat{border-left:2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));padding-left:24px;min-height:76px;justify-content:center}.stat-value.sc-af-testimonial-stat{--af-typography-heading-primary:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));letter-spacing:-0.88px;white-space:nowrap;font-variant-numeric:lining-nums proportional-nums;font-feature-settings:'ss01', 'kern'}.stat-description.sc-af-testimonial-stat{--af-typography-body-default:var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));overflow:hidden;text-overflow:ellipsis}";
|
|
6
6
|
|
|
7
7
|
const AfTestimonialStat = class {
|
|
8
8
|
constructor(hostRef) {
|