@affinda/wc 0.0.11 → 0.0.12
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-cta-section.entry.esm.js.map +1 -0
- package/dist/affinda/af-feature-accordion.entry.esm.js.map +1 -0
- package/dist/affinda/af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.esm.js.map +1 -1
- package/dist/affinda/af-logo-well.entry.esm.js.map +1 -1
- package/dist/affinda/affinda.css +1 -1
- package/dist/affinda/affinda.esm.js +1 -1
- package/dist/affinda/index.esm.js +1 -1
- package/dist/affinda/p-00214c08.entry.js +2 -0
- package/dist/affinda/p-00214c08.entry.js.map +1 -0
- package/dist/affinda/{p-56a15842.entry.js → p-050f98cd.entry.js} +2 -2
- package/dist/affinda/{p-cb10e4ca.entry.js → p-07990b1f.entry.js} +2 -2
- package/dist/affinda/p-0835ca39.entry.js +2 -0
- package/dist/affinda/p-0835ca39.entry.js.map +1 -0
- package/dist/affinda/{p-0fb55acf.entry.js → p-173bc70b.entry.js} +2 -2
- package/dist/affinda/{p-f6f2f1c4.entry.js → p-32fe4d5e.entry.js} +2 -2
- package/dist/affinda/{p-430127fa.entry.js → p-3a9646e6.entry.js} +2 -2
- package/dist/affinda/{p-45d0f3e3.entry.js → p-954963fa.entry.js} +2 -2
- package/dist/affinda/{p-46edc753.entry.js → p-9bc092d7.entry.js} +2 -2
- package/dist/affinda/p-9c733909.entry.js +2 -0
- package/dist/affinda/p-9c733909.entry.js.map +1 -0
- package/dist/affinda/{p-Agei6ZJQ.js → p-DI7b0bCy.js} +3 -3
- package/dist/affinda/p-DI7b0bCy.js.map +1 -0
- package/dist/affinda/{p-2c0d7eb7.entry.js → p-a3116a6b.entry.js} +2 -2
- package/dist/affinda/{p-e69c34f1.entry.js → p-aac3792a.entry.js} +2 -2
- package/dist/affinda/{p-e56182e4.entry.js → p-ac7efb48.entry.js} +2 -2
- package/dist/affinda/{p-10288f13.entry.js → p-b6885a9a.entry.js} +2 -2
- package/dist/affinda/{p-10288f13.entry.js.map → p-b6885a9a.entry.js.map} +1 -1
- package/dist/affinda/{p-39e917eb.entry.js → p-d3b2ab0e.entry.js} +2 -2
- package/dist/affinda/{p-867c5141.entry.js → p-dec4c4d5.entry.js} +2 -2
- package/dist/affinda/{p-e2c40f4e.entry.js → p-e367e42b.entry.js} +2 -2
- package/dist/affinda/{p-23aedaa4.entry.js → p-f8ac0120.entry.js} +2 -2
- package/dist/cjs/af-aspect-ratio.cjs.entry.js +1 -1
- package/dist/cjs/af-button-group.cjs.entry.js +1 -1
- package/dist/cjs/af-button.cjs.entry.js +1 -1
- package/dist/cjs/af-card.cjs.entry.js +1 -1
- package/dist/cjs/af-client-carousel.cjs.entry.js +1 -1
- package/dist/cjs/af-color-swatch.cjs.entry.js +1 -1
- package/dist/cjs/af-container.cjs.entry.js +1 -1
- package/dist/cjs/af-cta-section.cjs.entry.js +32 -0
- package/dist/cjs/af-cta-section.entry.cjs.js.map +1 -0
- package/dist/cjs/af-feature-accordion.cjs.entry.js +108 -0
- package/dist/cjs/af-feature-accordion.entry.cjs.js.map +1 -0
- package/dist/cjs/af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.cjs.js.map +1 -1
- package/dist/cjs/af-heading_5.cjs.entry.js +2 -2
- package/dist/cjs/af-hero-section.cjs.entry.js +2 -2
- package/dist/cjs/af-icon-button.cjs.entry.js +1 -1
- package/dist/cjs/af-logo-well.cjs.entry.js +3 -3
- package/dist/cjs/af-logo-well.entry.cjs.js.map +1 -1
- package/dist/cjs/af-section.cjs.entry.js +3 -3
- package/dist/cjs/af-testimonial-carousel.cjs.entry.js +3 -3
- package/dist/cjs/af-testimonial-stat.cjs.entry.js +2 -2
- package/dist/cjs/af-testimonial.cjs.entry.js +2 -2
- package/dist/cjs/af-typography-lockup.cjs.entry.js +1 -1
- package/dist/cjs/affinda.cjs.js +2 -2
- package/dist/cjs/{index-D_ItFcqt.js → index-DfEVhbS6.js} +42 -4
- package/dist/cjs/index-DfEVhbS6.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/af-cta-section/af-cta-section.css +175 -0
- package/dist/collection/components/af-cta-section/af-cta-section.js +183 -0
- package/dist/collection/components/af-cta-section/af-cta-section.js.map +1 -0
- package/dist/collection/components/af-feature-accordion/af-feature-accordion.css +220 -0
- package/dist/collection/components/af-feature-accordion/af-feature-accordion.js +209 -0
- package/dist/collection/components/af-feature-accordion/af-feature-accordion.js.map +1 -0
- package/dist/collection/components/af-hero-section/af-hero-section.js +1 -1
- package/dist/collection/components/af-logo-well/af-logo-well.css +20 -5
- package/dist/collection/components/af-logo-well/af-logo-well.js +1 -1
- package/dist/collection/components/af-navbar/af-navbar.css +28 -2
- package/dist/collection/components/af-section/af-section.js +2 -2
- package/dist/collection/components/af-testimonial/af-testimonial.js +1 -1
- package/dist/collection/components/af-testimonial-carousel/af-testimonial-carousel.js +2 -2
- package/dist/collection/components/af-testimonial-stat/af-testimonial-stat.js +1 -1
- package/dist/components/af-aspect-ratio.js +1 -1
- package/dist/components/af-button-group.js +1 -1
- package/dist/components/af-button.js +1 -1
- package/dist/components/af-card.js +1 -1
- package/dist/components/af-client-carousel.js +1 -1
- package/dist/components/af-color-swatch.js +1 -1
- package/dist/components/af-container.js +1 -1
- package/dist/components/af-cta-section.d.ts +11 -0
- package/dist/components/af-cta-section.js +59 -0
- package/dist/components/af-cta-section.js.map +1 -0
- package/dist/components/af-feature-accordion.d.ts +11 -0
- package/dist/components/af-feature-accordion.js +136 -0
- package/dist/components/af-feature-accordion.js.map +1 -0
- package/dist/components/af-heading.js +1 -1
- package/dist/components/af-hero-section.js +3 -3
- package/dist/components/af-icon-button.js +1 -1
- package/dist/components/af-logo-well.js +3 -3
- package/dist/components/af-logo-well.js.map +1 -1
- package/dist/components/af-logo.js +1 -1
- package/dist/components/af-nav-item.js +1 -1
- package/dist/components/af-navbar.js +1 -1
- package/dist/components/af-section.js +4 -4
- package/dist/components/af-testimonial-carousel.js +3 -3
- package/dist/components/af-testimonial-stat.js +2 -2
- package/dist/components/af-testimonial.js +2 -2
- package/dist/components/af-text.js +1 -1
- package/dist/components/af-typography-lockup.js +1 -1
- package/dist/components/index.js +13 -13
- package/dist/components/{p-BeQlNDyY.js → p-7a3XpKXs.js} +3 -3
- package/dist/components/{p-BeQlNDyY.js.map → p-7a3XpKXs.js.map} +1 -1
- package/dist/components/{p-BSewwIfD.js → p-BBivIwbE.js} +3 -3
- package/dist/components/{p-BSewwIfD.js.map → p-BBivIwbE.js.map} +1 -1
- package/dist/components/{p-CcNomA2o.js → p-BKGrl8ua.js} +3 -3
- package/dist/components/{p-CcNomA2o.js.map → p-BKGrl8ua.js.map} +1 -1
- package/dist/components/{p-Vu-NeL7U.js → p-BTEblSAo.js} +3 -3
- package/dist/components/{p-Vu-NeL7U.js.map → p-BTEblSAo.js.map} +1 -1
- package/dist/components/{p-CUr7n62X.js → p-BekWfVfB.js} +3 -3
- package/dist/components/{p-CUr7n62X.js.map → p-BekWfVfB.js.map} +1 -1
- package/dist/components/{p-C1C1Him5.js → p-Bg7dSc4D.js} +3 -3
- package/dist/components/{p-C1C1Him5.js.map → p-Bg7dSc4D.js.map} +1 -1
- package/dist/components/{p-BpXkQGDQ.js → p-BkEmrXbw.js} +3 -3
- package/dist/components/{p-BpXkQGDQ.js.map → p-BkEmrXbw.js.map} +1 -1
- package/dist/components/{p-sJI0-JlJ.js → p-D4s4u7tL.js} +3 -3
- package/dist/components/{p-sJI0-JlJ.js.map → p-D4s4u7tL.js.map} +1 -1
- package/dist/components/{p-tFlyM2Th.js → p-DqOwXTsH.js} +3 -3
- package/dist/components/{p-tFlyM2Th.js.map → p-DqOwXTsH.js.map} +1 -1
- package/dist/components/{p-CZlTvZAm.js → p-Dt4Fpr3O.js} +33 -5
- package/dist/components/p-Dt4Fpr3O.js.map +1 -0
- package/dist/components/{p-BMl1ggbQ.js → p-PLXzXWgX.js} +3 -3
- package/dist/components/{p-BMl1ggbQ.js.map → p-PLXzXWgX.js.map} +1 -1
- package/dist/components/{p-Csie_upq.js → p-Thu9mUEn.js} +4 -4
- package/dist/components/p-Thu9mUEn.js.map +1 -0
- package/dist/components/{p-B_FOK5P6.js → p-emB0l5gm.js} +3 -3
- package/dist/components/{p-B_FOK5P6.js.map → p-emB0l5gm.js.map} +1 -1
- package/dist/esm/af-aspect-ratio.entry.js +1 -1
- package/dist/esm/af-button-group.entry.js +1 -1
- package/dist/esm/af-button.entry.js +1 -1
- package/dist/esm/af-card.entry.js +1 -1
- package/dist/esm/af-client-carousel.entry.js +1 -1
- package/dist/esm/af-color-swatch.entry.js +1 -1
- package/dist/esm/af-container.entry.js +1 -1
- package/dist/esm/af-cta-section.entry.js +30 -0
- package/dist/esm/af-cta-section.entry.js.map +1 -0
- package/dist/esm/af-feature-accordion.entry.js +106 -0
- package/dist/esm/af-feature-accordion.entry.js.map +1 -0
- package/dist/esm/af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.js.map +1 -1
- package/dist/esm/af-heading_5.entry.js +2 -2
- package/dist/esm/af-hero-section.entry.js +2 -2
- package/dist/esm/af-icon-button.entry.js +1 -1
- package/dist/esm/af-logo-well.entry.js +3 -3
- package/dist/esm/af-logo-well.entry.js.map +1 -1
- package/dist/esm/af-section.entry.js +3 -3
- package/dist/esm/af-testimonial-carousel.entry.js +3 -3
- package/dist/esm/af-testimonial-stat.entry.js +2 -2
- package/dist/esm/af-testimonial.entry.js +2 -2
- package/dist/esm/af-typography-lockup.entry.js +1 -1
- package/dist/esm/affinda.js +3 -3
- package/dist/esm/{index-Agei6ZJQ.js → index-DI7b0bCy.js} +42 -4
- package/dist/esm/index-DI7b0bCy.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/af-cta-section/af-cta-section.d.ts +21 -0
- package/dist/types/components/af-feature-accordion/af-feature-accordion.d.ts +37 -0
- package/dist/types/components.d.ts +172 -0
- package/package.json +1 -1
- package/dist/affinda/p-13c30dd8.entry.js +0 -2
- package/dist/affinda/p-13c30dd8.entry.js.map +0 -1
- package/dist/affinda/p-Agei6ZJQ.js.map +0 -1
- package/dist/cjs/index-D_ItFcqt.js.map +0 -1
- package/dist/components/p-CZlTvZAm.js.map +0 -1
- package/dist/components/p-Csie_upq.js.map +0 -1
- package/dist/esm/index-Agei6ZJQ.js.map +0 -1
- /package/dist/affinda/{p-56a15842.entry.js.map → p-050f98cd.entry.js.map} +0 -0
- /package/dist/affinda/{p-cb10e4ca.entry.js.map → p-07990b1f.entry.js.map} +0 -0
- /package/dist/affinda/{p-0fb55acf.entry.js.map → p-173bc70b.entry.js.map} +0 -0
- /package/dist/affinda/{p-f6f2f1c4.entry.js.map → p-32fe4d5e.entry.js.map} +0 -0
- /package/dist/affinda/{p-430127fa.entry.js.map → p-3a9646e6.entry.js.map} +0 -0
- /package/dist/affinda/{p-45d0f3e3.entry.js.map → p-954963fa.entry.js.map} +0 -0
- /package/dist/affinda/{p-46edc753.entry.js.map → p-9bc092d7.entry.js.map} +0 -0
- /package/dist/affinda/{p-2c0d7eb7.entry.js.map → p-a3116a6b.entry.js.map} +0 -0
- /package/dist/affinda/{p-e69c34f1.entry.js.map → p-aac3792a.entry.js.map} +0 -0
- /package/dist/affinda/{p-e56182e4.entry.js.map → p-ac7efb48.entry.js.map} +0 -0
- /package/dist/affinda/{p-39e917eb.entry.js.map → p-d3b2ab0e.entry.js.map} +0 -0
- /package/dist/affinda/{p-867c5141.entry.js.map → p-dec4c4d5.entry.js.map} +0 -0
- /package/dist/affinda/{p-e2c40f4e.entry.js.map → p-e367e42b.entry.js.map} +0 -0
- /package/dist/affinda/{p-23aedaa4.entry.js.map → p-f8ac0120.entry.js.map} +0 -0
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface AfFeatureAccordion extends Components.AfFeatureAccordion, HTMLElement {}
|
|
4
|
+
export const AfFeatureAccordion: {
|
|
5
|
+
prototype: AfFeatureAccordion;
|
|
6
|
+
new (): AfFeatureAccordion;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
|
|
2
|
+
|
|
3
|
+
const afFeatureAccordionCss = ".sc-af-feature-accordion-h{display:block;width:100%}.feature-accordion.sc-af-feature-accordion{background-color:var(--colour-background-level1, #E8EFED);padding:80px 0}.feature-accordion__container.sc-af-feature-accordion{max-width:1280px;margin:0 auto;padding:0 40px}.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(--colour-brand-inkwell, #14343B);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 rgba(20, 52, 59, 0.12)}.accordion-item.sc-af-feature-accordion:first-child{border-top:1px solid rgba(20, 52, 59, 0.12)}.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(--colour-brand-inkwell, #14343B)}.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(--colour-brand-inkwell, #14343B);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{color:rgba(20, 52, 59, 0.7)}.accordion-item__icon.sc-af-feature-accordion{flex-shrink:0;width:24px;height:24px;color:var(--colour-brand-inkwell, #14343B);transition:transform 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__icon.sc-af-feature-accordion{color:rgba(20, 52, 59, 0.5)}.accordion-item__content.sc-af-feature-accordion{overflow:hidden;transition:max-height 0.3s ease, opacity 0.3s ease}.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:rgba(20, 52, 59, 0.85);margin:0 0 20px 0;padding-right:40px}.accordion-item__timer-track.sc-af-feature-accordion{height:3px;background-color:rgba(20, 52, 59, 0.1);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(--colour-brand-teal, #00B5AD);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:#B8C9C5;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:32px}.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.sc-af-feature-accordion{padding:60px 0}.feature-accordion__container.sc-af-feature-accordion{padding:0 24px}.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.sc-af-feature-accordion{padding:48px 0}.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}}";
|
|
4
|
+
|
|
5
|
+
const AfFeatureAccordion$1 = /*@__PURE__*/ proxyCustomElement(class AfFeatureAccordion extends H {
|
|
6
|
+
constructor(registerHost) {
|
|
7
|
+
super();
|
|
8
|
+
if (registerHost !== false) {
|
|
9
|
+
this.__registerHost();
|
|
10
|
+
}
|
|
11
|
+
/** Section heading */
|
|
12
|
+
this.heading = 'Give AI agents your paperwork';
|
|
13
|
+
/** JSON string of accordion items */
|
|
14
|
+
this.items = '[]';
|
|
15
|
+
/** Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) */
|
|
16
|
+
this.cycleInterval = 6000;
|
|
17
|
+
/** Whether auto-cycling is enabled */
|
|
18
|
+
this.autoCycle = true;
|
|
19
|
+
/** Currently expanded item index */
|
|
20
|
+
this.expandedIndex = 0;
|
|
21
|
+
/** Progress of current timer (0-100) */
|
|
22
|
+
this.timerProgress = 100;
|
|
23
|
+
this.progressTimer = null;
|
|
24
|
+
this.progressStartTime = 0;
|
|
25
|
+
}
|
|
26
|
+
componentDidLoad() {
|
|
27
|
+
if (this.autoCycle) {
|
|
28
|
+
this.startCycling();
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
disconnectedCallback() {
|
|
32
|
+
this.stopCycling();
|
|
33
|
+
}
|
|
34
|
+
handleAutoCycleChange(newValue) {
|
|
35
|
+
if (newValue) {
|
|
36
|
+
this.startCycling();
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
this.stopCycling();
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
getItems() {
|
|
43
|
+
try {
|
|
44
|
+
return JSON.parse(this.items);
|
|
45
|
+
}
|
|
46
|
+
catch {
|
|
47
|
+
return [];
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
startCycling() {
|
|
51
|
+
this.stopCycling();
|
|
52
|
+
this.progressStartTime = Date.now();
|
|
53
|
+
this.timerProgress = 100;
|
|
54
|
+
// Progress animation frame
|
|
55
|
+
const updateProgress = () => {
|
|
56
|
+
const elapsed = Date.now() - this.progressStartTime;
|
|
57
|
+
const remaining = this.cycleInterval - elapsed;
|
|
58
|
+
if (remaining <= 0) {
|
|
59
|
+
this.moveToNextItem();
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
this.timerProgress = (remaining / this.cycleInterval) * 100;
|
|
63
|
+
this.progressTimer = requestAnimationFrame(updateProgress);
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
this.progressTimer = requestAnimationFrame(updateProgress);
|
|
67
|
+
}
|
|
68
|
+
stopCycling() {
|
|
69
|
+
if (this.progressTimer) {
|
|
70
|
+
cancelAnimationFrame(this.progressTimer);
|
|
71
|
+
this.progressTimer = null;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
moveToNextItem() {
|
|
75
|
+
const items = this.getItems();
|
|
76
|
+
if (items.length === 0)
|
|
77
|
+
return;
|
|
78
|
+
this.expandedIndex = (this.expandedIndex + 1) % items.length;
|
|
79
|
+
// Restart the cycling timer for the new item
|
|
80
|
+
this.startCycling();
|
|
81
|
+
}
|
|
82
|
+
handleItemClick(index) {
|
|
83
|
+
// Reset timer when user clicks
|
|
84
|
+
this.expandedIndex = index;
|
|
85
|
+
// Restart the cycling timer for the clicked item
|
|
86
|
+
if (this.autoCycle) {
|
|
87
|
+
this.startCycling();
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
render() {
|
|
91
|
+
const items = this.getItems();
|
|
92
|
+
const currentItem = items[this.expandedIndex];
|
|
93
|
+
return (h(Host, { key: '7825aa3ce7bc01d0a2ca8d9bda5b8198aa76271c' }, h("div", { key: '0f6256791b7f0df695b73fbbfac13062441efe5d', class: "feature-accordion" }, h("div", { key: '325051f2986b59513be4911ebb74ea07e06d51aa', class: "feature-accordion__container" }, h("h2", { key: '03d56b844bb0683030cf180ad73c861411be6d97', class: "feature-accordion__heading" }, this.heading), h("div", { key: '3016a08061e853af3886c147f1cdead2e275da47', class: "feature-accordion__content" }, h("div", { key: '2810385a3c67d49dc4a7c5516aa88764c31cea38', class: "feature-accordion__list" }, items.map((item, index) => (h("div", { class: {
|
|
94
|
+
'accordion-item': true,
|
|
95
|
+
'accordion-item--expanded': this.expandedIndex === index
|
|
96
|
+
}, key: index }, h("button", { class: "accordion-item__header", onClick: () => this.handleItemClick(index), "aria-expanded": this.expandedIndex === index ? 'true' : 'false' }, h("h4", { class: "accordion-item__title" }, item.title), h("span", { class: "accordion-item__icon" }, this.expandedIndex === index ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M12 5V19M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))))), h("div", { class: "accordion-item__content", style: {
|
|
97
|
+
maxHeight: this.expandedIndex === index ? '200px' : '0',
|
|
98
|
+
opacity: this.expandedIndex === index ? '1' : '0'
|
|
99
|
+
} }, h("p", { class: "accordion-item__description" }, item.description), this.expandedIndex === index && this.autoCycle && (h("div", { class: "accordion-item__timer-track" }, h("div", { class: "accordion-item__timer-progress", style: { width: `${this.timerProgress}%` } })))))))), h("div", { key: '91407477630dfe4287aa84750a3ec344d4d929fe', class: "feature-accordion__image-container" }, h("div", { key: '5a5f537b6e38f250ed821e0dfaecf059e88e4251', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (h("img", { key: 'e974ce7cc07d28768447a106eeb7f714e93069a9', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (h("div", { key: '4e0e981e30d9ad3a10048715f71681dfacff76b4', class: "feature-accordion__image-placeholder" }, h("slot", { key: 'c98c9302c6fdd0db75b63ae20a56273bf64638b6', name: "image" }))))))))));
|
|
100
|
+
}
|
|
101
|
+
get el() { return this; }
|
|
102
|
+
static get watchers() { return {
|
|
103
|
+
"autoCycle": ["handleAutoCycleChange"]
|
|
104
|
+
}; }
|
|
105
|
+
static get style() { return afFeatureAccordionCss; }
|
|
106
|
+
}, [262, "af-feature-accordion", {
|
|
107
|
+
"heading": [1],
|
|
108
|
+
"items": [1],
|
|
109
|
+
"cycleInterval": [2, "cycle-interval"],
|
|
110
|
+
"autoCycle": [4, "auto-cycle"],
|
|
111
|
+
"expandedIndex": [32],
|
|
112
|
+
"timerProgress": [32]
|
|
113
|
+
}, undefined, {
|
|
114
|
+
"autoCycle": ["handleAutoCycleChange"]
|
|
115
|
+
}]);
|
|
116
|
+
function defineCustomElement$1() {
|
|
117
|
+
if (typeof customElements === "undefined") {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
const components = ["af-feature-accordion"];
|
|
121
|
+
components.forEach(tagName => { switch (tagName) {
|
|
122
|
+
case "af-feature-accordion":
|
|
123
|
+
if (!customElements.get(tagName)) {
|
|
124
|
+
customElements.define(tagName, AfFeatureAccordion$1);
|
|
125
|
+
}
|
|
126
|
+
break;
|
|
127
|
+
} });
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
const AfFeatureAccordion = AfFeatureAccordion$1;
|
|
131
|
+
const defineCustomElement = defineCustomElement$1;
|
|
132
|
+
|
|
133
|
+
export { AfFeatureAccordion, defineCustomElement };
|
|
134
|
+
//# sourceMappingURL=af-feature-accordion.js.map
|
|
135
|
+
|
|
136
|
+
//# sourceMappingURL=af-feature-accordion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"af-feature-accordion.js","mappings":"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","names":["AfFeatureAccordion","__stencil_proxyCustomElement","HTMLElement"],"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":[":host {\n display: block;\n width: 100%;\n}\n\n.feature-accordion {\n background-color: var(--colour-background-level1, #E8EFED);\n padding: 80px 0;\n}\n\n.feature-accordion__container {\n max-width: 1280px;\n margin: 0 auto;\n padding: 0 40px;\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(--colour-brand-inkwell, #14343B);\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 rgba(20, 52, 59, 0.12);\n}\n\n.accordion-item:first-child {\n border-top: 1px solid rgba(20, 52, 59, 0.12);\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(--colour-brand-inkwell, #14343B);\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(--colour-brand-inkwell, #14343B);\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 color: rgba(20, 52, 59, 0.7);\n}\n\n.accordion-item__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n color: var(--colour-brand-inkwell, #14343B);\n transition: transform 0.2s ease;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n color: rgba(20, 52, 59, 0.5);\n}\n\n.accordion-item__content {\n overflow: hidden;\n transition: max-height 0.3s ease, opacity 0.3s ease;\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: rgba(20, 52, 59, 0.85);\n margin: 0 0 20px 0;\n padding-right: 40px;\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: rgba(20, 52, 59, 0.1);\n border-radius: 2px;\n margin-bottom: 8px;\n overflow: hidden;\n /* Right-align the progress bar so it drains from right to left */\n display: flex;\n justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n height: 100%;\n background-color: var(--colour-brand-teal, #00B5AD);\n border-radius: 2px;\n /* Smooth animation for progress */\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 background-color: #B8C9C5;\n border-radius: 20px;\n overflow: hidden;\n /* Take up remaining space and stretch full height */\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: 32px;\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@media (max-width: 1024px) {\n .feature-accordion {\n padding: 60px 0;\n }\n\n .feature-accordion__container {\n padding: 0 24px;\n }\n\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@media (max-width: 768px) {\n .feature-accordion {\n padding: 48px 0;\n }\n\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@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 <span class=\"accordion-item__icon\">\n {this.expandedIndex === index ? (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n ) : (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n )}\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"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h, c as Host } from './p-
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-BkEmrXbw.js';
|
|
3
3
|
|
|
4
4
|
const afHeroSectionCss = ".sc-af-hero-section-h{display:block;width:100%}.hero-section.sc-af-hero-section{width:100%;padding-top:clamp(6rem, 12vh, 8rem);padding-bottom:clamp(3rem, 8vh, 5rem);display:flex;align-items:center;justify-content:center;margin-top:0;position:relative;z-index:1;overflow:hidden}.variant-light.sc-af-hero-section{background-color:var(--colour-background-white, #FFFFFF)}.variant-dark.sc-af-hero-section{background-color:var(--colour-brand-inkwell, #14343B)}.variant-dark.sc-af-hero-section af-heading.sc-af-hero-section,.variant-dark.sc-af-hero-section af-text.sc-af-hero-section{--typography-heading-primary:var(--colour-brand-mist-green, #C6D5D1);--typography-body-default:var(--colour-brand-mist-green, #C6D5D1)}.hero-decoration.sc-af-hero-section{position:absolute;inset:0;pointer-events:none;z-index:0;height:0;width:0;overflow:visible}.hero-decoration.sc-af-hero-section-s>*,.hero-decoration .sc-af-hero-section-s>*{position:absolute !important;bottom:-440px;right:-1200px;width:1250px;height:820px;opacity:0.5}.hero-content.sc-af-hero-section{text-align:center;max-width:1000px;margin:0 auto;position:relative;z-index:1}@media (max-width: 768px){.hero-section.sc-af-hero-section{padding:3rem 1.5rem 2.5rem}}";
|
|
5
5
|
|
|
@@ -17,7 +17,7 @@ const AfHeroSection$1 = /*@__PURE__*/ proxyCustomElement(class AfHeroSection ext
|
|
|
17
17
|
this.minHeight = '60vh';
|
|
18
18
|
}
|
|
19
19
|
render() {
|
|
20
|
-
return (h(Host, { key: '
|
|
20
|
+
return (h(Host, { key: '632fa6929a3cfbf9cc563419289bf794f95c7579' }, h("div", { key: 'a69a52476a7e891e9b78a00dcd40c53ec9b93977', class: `hero-section variant-${this.variant}`, style: { minHeight: this.minHeight } }, this.withDecoration && (h("div", { key: '50514445b760b9b8c00b7605409431799caef0a8', class: "hero-decoration" }, h("slot", { key: 'd46b422d9e9f0f2a62dc02e3f2d7f0c497e4eb3c', name: "decoration" }))), h("af-container", { key: 'd4bf7bd11a621ce964aa9c502010b5d585cc54db' }, h("div", { key: '0c9d2e67f747fc58e394b9d8e7255a542625b8bd', class: "hero-content" }, h("slot", { key: '82e132764ad876f796ca2b94787be349ccffdcf3' }))))));
|
|
21
21
|
}
|
|
22
22
|
static get style() { return afHeroSectionCss; }
|
|
23
23
|
}, [262, "af-hero-section", {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h, c as Host } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
|
|
2
2
|
|
|
3
|
-
const afLogoWellCss = ":host{display:inline-block}.logo-well{background:
|
|
3
|
+
const afLogoWellCss = ":host{display:inline-block}.logo-well{background:rgb(32, 62, 69);border-radius:16px;height:72px;width:184px;display:flex;align-items:center;justify-content:center;padding:20px 32px;box-sizing:border-box}::slotted(img){max-height:32px;max-width:120px;width:auto;height:auto;display:block;object-fit:contain;filter:brightness(0) invert(1);}::slotted(svg){max-height:32px;max-width:120px;width:auto;height:auto;display:block}::slotted(div){white-space:nowrap;color:white;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:600;font-size:16px}";
|
|
4
4
|
|
|
5
5
|
const AfLogoWell$1 = /*@__PURE__*/ proxyCustomElement(class AfLogoWell extends H {
|
|
6
6
|
constructor(registerHost) {
|
|
@@ -11,7 +11,7 @@ const AfLogoWell$1 = /*@__PURE__*/ proxyCustomElement(class AfLogoWell extends H
|
|
|
11
11
|
this.__attachShadow();
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return (h(Host, { key: '
|
|
14
|
+
return (h(Host, { key: 'a890852e16b4e6cc849102c3a172c5049c86da4b' }, h("div", { key: '54935155d4cc9f30519252017c6c23b62aabd009', class: "logo-well" }, h("slot", { key: '5cf33bdb4332eb25a653d443f21f2fc4505473fa' }))));
|
|
15
15
|
}
|
|
16
16
|
static get style() { return afLogoWellCss; }
|
|
17
17
|
}, [257, "af-logo-well"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"af-logo-well.js","mappings":";;AAAA,MAAM,aAAa,GAAG,
|
|
1
|
+
{"file":"af-logo-well.js","mappings":";;AAAA,MAAM,aAAa,GAAG,sjBAAsjB;;MCU/jBA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;;;IACrB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["AfLogoWell","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-logo-well/af-logo-well.css?tag=af-logo-well&encapsulation=shadow","src/components/af-logo-well/af-logo-well.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.logo-well {\n background: rgb(32, 62, 69); /* Slightly lighter than inkwell for contrast */\n border-radius: 16px;\n height: 72px;\n width: 184px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px 32px;\n box-sizing: border-box;\n}\n\n::slotted(img) {\n max-height: 32px;\n max-width: 120px;\n width: auto;\n height: auto;\n display: block;\n object-fit: contain;\n filter: brightness(0) invert(1); /* Make logos white */\n}\n\n::slotted(svg) {\n max-height: 32px;\n max-width: 120px;\n width: auto;\n height: auto;\n display: block;\n}\n\n::slotted(div) {\n white-space: nowrap;\n color: white;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 600;\n font-size: 16px;\n}\n\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * A rounded container for displaying client logos\n */\n@Component({\n tag: 'af-logo-well',\n styleUrl: 'af-logo-well.css',\n shadow: true,\n})\nexport class AfLogoWell {\n render() {\n return (\n <Host>\n <div class=\"logo-well\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h, c as Host } from './p-
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-BkEmrXbw.js';
|
|
3
3
|
|
|
4
4
|
const afSectionCss = ".sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.bg-white.sc-af-section{background-color:var(--colour-background-white, #FFFFFF)}.bg-level1.sc-af-section{background-color:var(--colour-background-level-1, #E8EEED)}.bg-dark.sc-af-section,.bg-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B);--colour-typography-heading-primary:var(--colour-brand-mist-green, #C6D5D1);--colour-typography-body-default:var(--colour-brand-mist-green, #C6D5D1)}.bg-dark.sc-af-section af-heading.sc-af-section::part(base),.bg-dark.sc-af-section af-heading.sc-af-section [part~=\"base\"],.bg-inkwell.sc-af-section af-heading.sc-af-section::part(base),.bg-inkwell.sc-af-section af-heading.sc-af-section [part~=\"base\"]{color:var(--colour-brand-mist-green, #C6D5D1)}.bg-dark.sc-af-section af-text.sc-af-section::part(base),.bg-dark.sc-af-section af-text.sc-af-section [part~=\"base\"],.bg-inkwell.sc-af-section af-text.sc-af-section::part(base),.bg-inkwell.sc-af-section af-text.sc-af-section [part~=\"base\"]{color:var(--colour-brand-mist-green, #C6D5D1);opacity:0.92}.bg-dark.sc-af-section af-typography-lockup.sc-af-section::part(heading),.bg-dark.sc-af-section af-typography-lockup.sc-af-section [part~=\"heading\"],.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section::part(heading),.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section [part~=\"heading\"],.bg-dark.sc-af-section af-typography-lockup.sc-af-section::part(body),.bg-dark.sc-af-section af-typography-lockup.sc-af-section [part~=\"body\"],.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section::part(body),.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section [part~=\"body\"]{color:var(--colour-brand-mist-green, #C6D5D1)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}";
|
|
5
5
|
|
|
@@ -17,8 +17,8 @@ const AfSection$1 = /*@__PURE__*/ proxyCustomElement(class AfSection extends H {
|
|
|
17
17
|
this.container = true;
|
|
18
18
|
}
|
|
19
19
|
render() {
|
|
20
|
-
const content = h("slot", { key: '
|
|
21
|
-
return (h(Host, { key: '
|
|
20
|
+
const content = h("slot", { key: '3c8c5e1b316afac68685fe32f512fadac62e00f7' });
|
|
21
|
+
return (h(Host, { key: '343991533b792f1c78e65eab65420a206bdfcfbc' }, h("div", { key: 'a2efe0c402b515e4160309dce5356e79b69f9677', class: `section padding-${this.padding} bg-${this.background}` }, this.container ? (h("af-container", null, content)) : content)));
|
|
22
22
|
}
|
|
23
23
|
static get style() { return afSectionCss; }
|
|
24
24
|
}, [262, "af-section", {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h, c as Host } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
|
|
2
2
|
|
|
3
3
|
const afTestimonialCarouselCss = ".sc-af-testimonial-carousel-h{display:block;width:100%;overflow:hidden}.testimonial-carousel.sc-af-testimonial-carousel{position:relative;width:100%}.testimonial-slides.sc-af-testimonial-carousel{position:relative;width:100%;min-height:544px;overflow:hidden}.testimonial-slides.sc-af-testimonial-carousel-s>af-testimonial,.testimonial-slides .sc-af-testimonial-carousel-s>af-testimonial{position:absolute;top:0;left:0;width:100%;transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out}.testimonial-progress.sc-af-testimonial-carousel{display:flex;gap:12px;justify-content:center;margin-top:32px;padding:0 220px}.progress-dot.sc-af-testimonial-carousel{width:100%;max-width:840px;height:3px;background:var(--colour-background-border-default, #d1ddda);border-radius:2px;cursor:pointer;transition:background 0.3s ease;position:relative;overflow:hidden}.progress-dot.active.sc-af-testimonial-carousel{background:var(--colour-background-border-active, #8a7049)}.progress-dot.sc-af-testimonial-carousel:hover:not(.active){background:var(--colour-background-border-default, #c1cdc9)}.carousel-navigation.sc-af-testimonial-carousel{position:absolute;bottom:48px;left:50%;margin-left:48px;display:flex;gap:12px;align-items:center;z-index:10}.nav-button.sc-af-testimonial-carousel{width:48px;height:48px;border-radius:50%;border:1px solid var(--colour-brand-inkwell, #14343b);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;color:var(--colour-brand-inkwell, #14343b)}.nav-button.sc-af-testimonial-carousel:hover:not(:disabled){background:rgba(255, 255, 255, 0.1);transform:translateY(-2px)}.nav-button.sc-af-testimonial-carousel:disabled{opacity:0.4;cursor:not-allowed;border-color:var(--colour-brand-inkwell, #14343b)}.nav-button.sc-af-testimonial-carousel svg.sc-af-testimonial-carousel{width:24px;height:24px}";
|
|
4
4
|
|
|
@@ -72,7 +72,7 @@ const AfTestimonialCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimo
|
|
|
72
72
|
render() {
|
|
73
73
|
const hasPrev = this.currentIndex > 0;
|
|
74
74
|
const hasNext = this.currentIndex < this.testimonialCount - 1;
|
|
75
|
-
return (h(Host, { key: '
|
|
75
|
+
return (h(Host, { key: '5fd0c47f2034eb0c63ccab1aa0442fae52b7523e' }, h("div", { key: '9eae24dbbdd8c211df3ec37dc3561ca4e96f0bf7', class: "testimonial-carousel" }, h("div", { key: '85f4fb256f727426689654fe8f95496b017cd5bf', class: "testimonial-slides" }, h("slot", { key: 'c4fe967e71964c671c705f7407daa4bbc7f254b5' })), this.testimonialCount > 1 && (h("div", { key: 'bf80d9aabffbcde4d69f36014a6ba73f2425216a', class: "testimonial-progress" }, Array.from({ length: this.testimonialCount }).map((_, index) => (h("div", { class: `progress-dot ${index === this.currentIndex ? 'active' : ''}`, onClick: () => {
|
|
76
76
|
if (!this.isAnimating && index !== this.currentIndex) {
|
|
77
77
|
this.isAnimating = true;
|
|
78
78
|
this.currentIndex = index;
|
|
@@ -81,7 +81,7 @@ const AfTestimonialCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimo
|
|
|
81
81
|
this.isAnimating = false;
|
|
82
82
|
}, 500);
|
|
83
83
|
}
|
|
84
|
-
} }))))), this.testimonialCount > 1 && (h("div", { key: '
|
|
84
|
+
} }))))), this.testimonialCount > 1 && (h("div", { key: '5b1f2e123b2be2efccdc0c744f18ff19edf388ad', class: "carousel-navigation" }, h("button", { key: 'ad93e570662d8d77af764803b5d3139a687044bb', class: "nav-button prev", disabled: !hasPrev, onClick: this.goToPrevious, "aria-label": "Previous testimonial" }, h("svg", { key: '48dbcc2bb6161d39dabd56c3bd92f1035f9cb168', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'd5b600df7aa327667083b264e7306242976509f8', d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '366c751d511308fb240c549043908284a74d7667', class: "nav-button next", disabled: !hasNext, onClick: this.goToNext, "aria-label": "Next testimonial" }, h("svg", { key: '9498a3f67bc4c6f80b8082722d11496d223e08e6', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'c3fb745ae116752613a30b93550ed25e97b4c9c1', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
|
|
85
85
|
}
|
|
86
86
|
get host() { return this; }
|
|
87
87
|
static get style() { return afTestimonialCarouselCss; }
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h, c as Host } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
|
|
2
2
|
|
|
3
3
|
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(--colour-background-border-active, #8a7049);padding-left:16px;min-height:76px;justify-content:center}.stat-value.sc-af-testimonial-stat{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:44px;font-weight:400;line-height:1;letter-spacing:-0.88px;color:var(--colour-typography-heading-secondary, #8a7049);margin:0}.stat-description.sc-af-testimonial-stat{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:16px;font-weight:400;line-height:24px;color:var(--colour-typography-body-dark, #14343b);margin:0;overflow:hidden;text-overflow:ellipsis}";
|
|
4
4
|
|
|
@@ -14,7 +14,7 @@ const AfTestimonialStat$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimonial
|
|
|
14
14
|
this.accentBorder = false;
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
return (h(Host, { key: '
|
|
17
|
+
return (h(Host, { key: 'fbe463de5d163fca0559c87db94559db3ff47241' }, h("div", { key: 'bbc9ff2c9ae235e26019064eae17f1467f55cde4', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("p", { key: '911458749440dec349d483c1b1210b8fd580d7e0', class: "stat-value" }, this.value), h("p", { key: '7e5f1308ead2e9ee614004db7c2e54312a6de1aa', class: "stat-description" }, this.description))));
|
|
18
18
|
}
|
|
19
19
|
static get style() { return afTestimonialStatCss; }
|
|
20
20
|
}, [258, "af-testimonial-stat", {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h, c as Host } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
|
|
2
2
|
|
|
3
3
|
const afTestimonialCss = ".sc-af-testimonial-h{display:block;width:100%}.testimonial-card.sc-af-testimonial{background:var(--colour-background-level-1, #e8eeed);border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;display:flex;height:544px;box-sizing:border-box}.testimonial-image.sc-af-testimonial{position:relative;width:519px;height:100%;background:#000000;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.testimonial-bg-image.sc-af-testimonial{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.7}.testimonial-logo.sc-af-testimonial{position:relative;z-index:1;padding:0 108px;max-width:100%}.testimonial-logo.sc-af-testimonial img.sc-af-testimonial{width:100%;height:auto;display:block}.testimonial-content.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:32px;padding:48px;border:1px solid rgba(255, 255, 255, 0.08);border-left:1px solid rgba(255, 255, 255, 0.08);box-sizing:border-box}.testimonial-quote-section.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:12px}.testimonial-quote-icon.sc-af-testimonial{width:48px;height:48px;color:var(--colour-brand-inkwell, #14343b);flex-shrink:0}.testimonial-text.sc-af-testimonial{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:22px;font-weight:400;line-height:1.4;color:var(--colour-typography-body-default, #2b484f);margin:0;max-height:155px;overflow:hidden;text-overflow:ellipsis}.testimonial-attribution.sc-af-testimonial{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:22px;font-weight:400;line-height:1.4;color:var(--colour-typography-body-dark, #14343b);margin:0}.testimonial-stats.sc-af-testimonial{display:flex;gap:32px;width:100%}.testimonial-footer.sc-af-testimonial{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--colour-background-border-default, #d1ddda);padding-top:32px}.testimonial-nav.sc-af-testimonial{display:flex;gap:12px}.testimonial-cta.sc-af-testimonial{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:1px solid var(--colour-brand-inkwell, #14343b);border-radius:9999px;font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:17px;font-weight:500;line-height:20px;color:var(--colour-brand-inkwell, #14343b);text-decoration:none;cursor:pointer;transition:all 0.2s ease}.testimonial-cta.sc-af-testimonial:hover{background:var(--colour-background-level-1, #e8eeed);transform:translateY(-1px)}.testimonial-cta.sc-af-testimonial svg.sc-af-testimonial{width:24px;height:24px}";
|
|
4
4
|
|
|
@@ -10,7 +10,7 @@ const AfTestimonial$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimonial ext
|
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: '140eb69f7306717ae75d38b838fc58b1122fff56' }, h("div", { key: '1a54c4603fae73894796e62cb7cc83d9a96b7d12', class: "testimonial-card" }, h("div", { key: 'eb0df92d60f8d307a10982bd70e9d97705b57585', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '0a6b9005a96e42e9dd6b0664ada910c12ab6bbe9', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: '0ba830a85ef37b0f3c01d386fcd916272264e9fa', class: "testimonial-logo" }, h("img", { key: '275dec6170c69349a41f44f325ec0214c219de02', src: this.logoImage, alt: "Company logo" })))), h("div", { key: 'f24c19c3a46c7007ed15a3ebd1794ff8023822fc', class: "testimonial-content" }, h("div", { key: 'd3559ba097b0eac517fa05079c27505a24cb1832', class: "testimonial-quote-section" }, h("div", { key: '1d8851985509ac43c88e375194adf1441c4e119d', class: "testimonial-quote-icon" }, h("slot", { key: 'a666ea9b0fa13fb8d4d853a61f1ac449af66469a', name: "quote-icon" }, h("svg", { key: '3e2df27c9a8f2d2bc20ad4aef45459235efab2b9', width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd77d4c447cf53c3ce3890342356f476332d309f9', d: "M10.5 25.5C10.5 23.0147 12.5147 21 15 21H18C18.8284 21 19.5 20.3284 19.5 19.5V15C19.5 12.5147 17.4853 10.5 15 10.5H10.5C6.35786 10.5 3 13.8579 3 18V33C3 35.4853 5.01472 37.5 7.5 37.5H15C17.4853 37.5 19.5 35.4853 19.5 33V25.5C19.5 23.0147 17.4853 21 15 21H10.5ZM33 25.5C33 23.0147 35.0147 21 37.5 21H40.5C41.3284 21 42 20.3284 42 19.5V15C42 12.5147 39.9853 10.5 37.5 10.5H33C28.8579 10.5 25.5 13.8579 25.5 18V33C25.5 35.4853 27.5147 37.5 30 37.5H37.5C39.9853 37.5 42 35.4853 42 33V25.5C42 23.0147 39.9853 21 37.5 21H33Z", fill: "currentColor" })))), h("p", { key: '342293249e60e142db1d13541c1cdee5b5e0adc0', class: "testimonial-text" }, this.quote), h("p", { key: '68ff2c4e99403f533877f30829c58bd30029d8bb', class: "testimonial-attribution" }, this.attribution)), h("div", { key: 'c3a810a398d0c2ae23a81cec50862bd036816115', class: "testimonial-stats" }, h("slot", { key: '798b98ca93deaff16c71e80bc82aabc1394ae3e7', name: "stats" })), h("div", { key: 'cb194830eb8bcdb3bcdeca2f2882e920160fb0bf', class: "testimonial-footer" }, h("div", { key: 'c3bf10a964df92ffbb06e89fb1884473177f0f76', class: "testimonial-nav" }, h("slot", { key: '25479342ec5b206a96c7291d619370558b6942a6', name: "navigation" })), this.readMoreLink && (h("a", { key: '7267d68860040775393fa5d11d77f70015654b17', href: this.readMoreLink, class: "testimonial-cta" }, h("span", { key: '706d1e088640e463b3df22b783893cc9142ba22d' }, "Read full story"), h("svg", { key: '9f3c15b16c949412b7860dba79e69827671fe6d3', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'ee2b49e1a6a6dde48334ae05203e65ea4ee89094', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))));
|
|
14
14
|
}
|
|
15
15
|
static get style() { return afTestimonialCss; }
|
|
16
16
|
}, [262, "af-testimonial", {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { A as AfTypographyLockup$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { A as AfTypographyLockup$1, d as defineCustomElement$1 } from './p-emB0l5gm.js';
|
|
2
2
|
|
|
3
3
|
const AfTypographyLockup = AfTypographyLockup$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
package/dist/components/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-
|
|
2
|
-
export { A as AfHeading } from './p-
|
|
3
|
-
export { A as AfText } from './p-
|
|
4
|
-
export { A as AfColorSwatch } from './p-
|
|
5
|
-
export { A as AfContainer } from './p-
|
|
6
|
-
export { A as AfAspectRatio } from './p-
|
|
7
|
-
export { A as AfNavItem } from './p-
|
|
8
|
-
export { A as AfNavbar } from './p-
|
|
9
|
-
export { A as AfLogo } from './p-
|
|
10
|
-
export { A as AfButton } from './p-
|
|
11
|
-
export { A as AfIconButton } from './p-
|
|
12
|
-
export { A as AfButtonGroup } from './p-
|
|
13
|
-
export { A as AfTypographyLockup } from './p-
|
|
1
|
+
export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-Dt4Fpr3O.js';
|
|
2
|
+
export { A as AfHeading } from './p-BTEblSAo.js';
|
|
3
|
+
export { A as AfText } from './p-Bg7dSc4D.js';
|
|
4
|
+
export { A as AfColorSwatch } from './p-BBivIwbE.js';
|
|
5
|
+
export { A as AfContainer } from './p-BkEmrXbw.js';
|
|
6
|
+
export { A as AfAspectRatio } from './p-PLXzXWgX.js';
|
|
7
|
+
export { A as AfNavItem } from './p-BekWfVfB.js';
|
|
8
|
+
export { A as AfNavbar } from './p-Thu9mUEn.js';
|
|
9
|
+
export { A as AfLogo } from './p-D4s4u7tL.js';
|
|
10
|
+
export { A as AfButton } from './p-BKGrl8ua.js';
|
|
11
|
+
export { A as AfIconButton } from './p-DqOwXTsH.js';
|
|
12
|
+
export { A as AfButtonGroup } from './p-7a3XpKXs.js';
|
|
13
|
+
export { A as AfTypographyLockup } from './p-emB0l5gm.js';
|
|
14
14
|
//# sourceMappingURL=index.js.map
|
|
15
15
|
|
|
16
16
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h, c as Host } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
|
|
2
2
|
|
|
3
3
|
const afButtonGroupCss = ":host{display:inline-block}.button-group{display:inline-flex;align-items:center;box-sizing:border-box}.direction-horizontal{flex-direction:row}.direction-vertical{flex-direction:column}::slotted(*){flex-shrink:0}";
|
|
4
4
|
|
|
@@ -45,6 +45,6 @@ function defineCustomElement() {
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
export { AfButtonGroup as A, defineCustomElement as d };
|
|
48
|
-
//# sourceMappingURL=p-
|
|
48
|
+
//# sourceMappingURL=p-7a3XpKXs.js.map
|
|
49
49
|
|
|
50
|
-
//# sourceMappingURL=p-
|
|
50
|
+
//# sourceMappingURL=p-7a3XpKXs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-7a3XpKXs.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,sNAAsN;;MCOlO,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAA8B,YAAY;AAE3D;;AAEG;AACK,QAAA,IAAG,CAAA,GAAA,GAAW,KAAK;AAgB5B;IAdC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,CAAC,aAAa,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG;SAClC;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,EAAA,EAC3C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-button-group/af-button-group.css?tag=af-button-group&encapsulation=shadow","src/components/af-button-group/af-button-group.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.button-group {\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n}\n\n.direction-horizontal {\n flex-direction: row;\n}\n\n.direction-vertical {\n flex-direction: column;\n}\n\n/* Ensure slotted buttons align properly */\n::slotted(*) {\n flex-shrink: 0;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'af-button-group',\n styleUrl: 'af-button-group.css',\n shadow: true\n})\nexport class AfButtonGroup {\n /**\n * Layout direction of the button group\n */\n @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Gap between buttons\n */\n @Prop() gap: string = '8px';\n\n render() {\n const classes = {\n 'button-group': true,\n [`direction-${this.direction}`]: true\n };\n\n return (\n <Host>\n <div class={classes} style={{ gap: this.gap }}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, h } from './p-Dt4Fpr3O.js';
|
|
2
2
|
|
|
3
3
|
const afColorSwatchCss = ":host{display:block}.swatch{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:1px solid #ece6f5;background:white}.color-preview{width:100%;height:120px;flex-shrink:0}.size-large .color-preview{height:140px}.color-info{padding:16px;display:flex;flex-direction:column;gap:4px}.color-name{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:16px;font-weight:500;color:#14343B}.color-value{font-family:'Helvetica', 'Inter', monospace, system-ui, sans-serif;font-size:14px;color:#708380}";
|
|
4
4
|
|
|
@@ -39,6 +39,6 @@ function defineCustomElement() {
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
export { AfColorSwatch as A, defineCustomElement as d };
|
|
42
|
-
//# sourceMappingURL=p-
|
|
42
|
+
//# sourceMappingURL=p-BBivIwbE.js.map
|
|
43
43
|
|
|
44
|
-
//# sourceMappingURL=p-
|
|
44
|
+
//# sourceMappingURL=p-BBivIwbE.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-BBivIwbE.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,0gBAA0gB;;MCOthB,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAaU,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;AAoB9C;IAlBC,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACV,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG;aACxB,EAAE,IAAI,EAAC,MAAM,EAAA,EACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,EACjC,CAAA,EACP,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EACrD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,CACpD,CACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-color-swatch/af-color-swatch.css?tag=af-color-swatch&encapsulation=shadow","src/components/af-color-swatch/af-color-swatch.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.swatch {\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n overflow: hidden;\n border: 1px solid #ece6f5;\n background: white;\n}\n\n.color-preview {\n width: 100%;\n height: 120px;\n flex-shrink: 0;\n}\n\n.size-large .color-preview {\n height: 140px;\n}\n\n.color-info {\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.color-name {\n font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n font-size: 16px;\n font-weight: 500;\n color: #14343B;\n}\n\n.color-value {\n font-family: 'Helvetica', 'Inter', monospace, system-ui, sans-serif;\n font-size: 14px;\n color: #708380;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'af-color-swatch',\n styleUrl: 'af-color-swatch.css',\n shadow: true\n})\nexport class AfColorSwatch {\n /** Color value (hex) */\n @Prop() color!: string;\n\n /** Color name */\n @Prop() name!: string;\n\n /** Size variant */\n @Prop() size: 'default' | 'large' = 'default';\n\n render() {\n return (\n <div class={{\n 'swatch': true,\n [`size-${this.size}`]: true\n }} part=\"base\">\n <div\n class=\"color-preview\"\n part=\"preview\"\n style={{ backgroundColor: this.color }}\n ></div>\n <div class=\"color-info\" part=\"info\">\n <div class=\"color-name\" part=\"name\">{this.name}</div>\n <div class=\"color-value\" part=\"value\">{this.color}</div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h, c as Host } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
|
|
2
2
|
|
|
3
3
|
const afButtonCss = ":host{display:inline-block}.button{display:inline-flex;align-items:center;justify-content:center;gap:0;border-radius:9999px;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;text-decoration:none;cursor:pointer;transition:all 0.2s ease;border:1px solid transparent;box-sizing:border-box;white-space:nowrap}.size-default{padding:12px 24px;font-size:17px;line-height:20px}.size-small{padding:8px 16px;font-size:14px;line-height:16px}.icon-left:empty,.icon-right:empty{display:none}.icon-left,.icon-right{display:flex;align-items:center;justify-content:center;flex-shrink:0}.size-default .icon-left,.size-default .icon-right{width:24px;height:24px}.size-small .icon-left,.size-small .icon-right{width:20px;height:20px}.label{flex:0 1 auto;display:flex;align-items:center;justify-content:center;height:24px}.size-default .label{padding:0 12px;height:24px}.size-small .label{padding:0 8px;height:20px}.variant-primary{background:var(--colour-brand-ice, #A6FFFB);border-color:var(--colour-brand-inkwell, #14343B);color:var(--colour-brand-inkwell, #14343B)}.variant-primary:hover:not(.disabled){background:#8FEBE3;transform:translateY(-1px);box-shadow:0 2px 8px rgba(20, 52, 59, 0.15)}.variant-primary:active:not(.disabled){background:#7FE2D4;transform:translateY(0)}.variant-secondary{background:var(--colour-brand-white, #FFFFFF);border-color:var(--colour-brand-inkwell, #14343B);color:var(--colour-brand-inkwell, #14343B)}.variant-secondary:hover:not(.disabled){background:#F6FAF9;transform:translateY(-1px);box-shadow:0 2px 8px rgba(20, 52, 59, 0.15)}.variant-secondary:active:not(.disabled){background:#E8F1EF;transform:translateY(0)}.variant-outline{background:transparent;border-color:var(--colour-brand-inkwell, #14343B);color:var(--colour-brand-inkwell, #14343B)}.variant-outline:hover:not(.disabled){background:rgba(20, 52, 59, 0.04);transform:translateY(-1px)}.variant-outline:active:not(.disabled){background:rgba(20, 52, 59, 0.08);transform:translateY(0)}.variant-ghost{background:transparent;border-color:transparent;color:var(--colour-brand-inkwell, #14343B);padding-left:0;padding-right:0}.variant-ghost:hover:not(.disabled){text-decoration:underline}.variant-ghost:active:not(.disabled){opacity:0.7}.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.button{background:none;border:none;font:inherit;color:inherit;cursor:pointer}button.button.variant-primary{background:var(--colour-brand-ice, #A6FFFB);border:1px solid var(--colour-brand-inkwell, #14343B)}button.button.variant-secondary{background:var(--colour-brand-white, #FFFFFF);border:1px solid var(--colour-brand-inkwell, #14343B)}button.button.variant-outline{background:transparent;border:1px solid var(--colour-brand-inkwell, #14343B)}button.button.variant-ghost{background:transparent;border:1px solid transparent}";
|
|
4
4
|
|
|
@@ -72,6 +72,6 @@ function defineCustomElement() {
|
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
export { AfButton as A, defineCustomElement as d };
|
|
75
|
-
//# sourceMappingURL=p-
|
|
75
|
+
//# sourceMappingURL=p-BKGrl8ua.js.map
|
|
76
76
|
|
|
77
|
-
//# sourceMappingURL=p-
|
|
77
|
+
//# sourceMappingURL=p-BKGrl8ua.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-BKGrl8ua.js","mappings":";;AAAA,MAAM,WAAW,GAAG,ixFAAixF;;MCOxxF,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAkD,SAAS;AAE1E;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;AAE7C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAEtD;;AAEG;AACK,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAyCxC;IAvCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,SAAS,EAAE,IAAI,CAAC;SACjB;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,WAAW,EAAA,CAAQ,CACzB;AACP,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACR;AACP,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAQ;SAElC;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAC/B,EAAA,OAAO,CACN,CACC;;AAIX,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAA,EAC7D,OAAO,CACD,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-button/af-button.css?tag=af-button&encapsulation=shadow","src/components/af-button/af-button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n border-radius: 9999px;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 500;\n text-decoration: none;\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1px solid transparent;\n box-sizing: border-box;\n white-space: nowrap;\n}\n\n/* Size variants */\n.size-default {\n padding: 12px 24px;\n font-size: 17px;\n line-height: 20px;\n}\n\n.size-small {\n padding: 8px 16px;\n font-size: 14px;\n line-height: 16px;\n}\n\n/* Icon slots */\n.icon-left:empty,\n.icon-right:empty {\n display: none;\n}\n\n.icon-left,\n.icon-right {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.size-default .icon-left,\n.size-default .icon-right {\n width: 24px;\n height: 24px;\n}\n\n.size-small .icon-left,\n.size-small .icon-right {\n width: 20px;\n height: 20px;\n}\n\n/* Label has additional padding on each side */\n.label {\n flex: 0 1 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n}\n\n.size-default .label {\n padding: 0 12px;\n height: 24px;\n}\n\n.size-small .label {\n padding: 0 8px;\n height: 20px;\n}\n\n/* Primary variant (ice) */\n.variant-primary {\n background: var(--colour-brand-ice, #A6FFFB);\n border-color: var(--colour-brand-inkwell, #14343B);\n color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-primary:hover:not(.disabled) {\n background: #8FEBE3;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);\n}\n\n.variant-primary:active:not(.disabled) {\n background: #7FE2D4;\n transform: translateY(0);\n}\n\n/* Secondary variant (white) */\n.variant-secondary {\n background: var(--colour-brand-white, #FFFFFF);\n border-color: var(--colour-brand-inkwell, #14343B);\n color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-secondary:hover:not(.disabled) {\n background: #F6FAF9;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);\n}\n\n.variant-secondary:active:not(.disabled) {\n background: #E8F1EF;\n transform: translateY(0);\n}\n\n/* Outline variant */\n.variant-outline {\n background: transparent;\n border-color: var(--colour-brand-inkwell, #14343B);\n color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-outline:hover:not(.disabled) {\n background: rgba(20, 52, 59, 0.04);\n transform: translateY(-1px);\n}\n\n.variant-outline:active:not(.disabled) {\n background: rgba(20, 52, 59, 0.08);\n transform: translateY(0);\n}\n\n/* Ghost variant (text only) */\n.variant-ghost {\n background: transparent;\n border-color: transparent;\n color: var(--colour-brand-inkwell, #14343B);\n padding-left: 0;\n padding-right: 0;\n}\n\n.variant-ghost:hover:not(.disabled) {\n text-decoration: underline;\n}\n\n.variant-ghost:active:not(.disabled) {\n opacity: 0.7;\n}\n\n/* Disabled state */\n.disabled {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* Remove default button styles */\nbutton.button {\n background: none;\n border: none;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\nbutton.button.variant-primary {\n background: var(--colour-brand-ice, #A6FFFB);\n border: 1px solid var(--colour-brand-inkwell, #14343B);\n}\n\nbutton.button.variant-secondary {\n background: var(--colour-brand-white, #FFFFFF);\n border: 1px solid var(--colour-brand-inkwell, #14343B);\n}\n\nbutton.button.variant-outline {\n background: transparent;\n border: 1px solid var(--colour-brand-inkwell, #14343B);\n}\n\nbutton.button.variant-ghost {\n background: transparent;\n border: 1px solid transparent;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-button',\n styleUrl: 'af-button.css',\n shadow: true\n})\nexport class AfButton {\n /**\n * The visual variant of the button\n */\n @Prop() variant: 'primary' | 'secondary' | 'outline' | 'ghost' = 'primary';\n\n /**\n * The size of the button\n */\n @Prop() size: 'default' | 'small' = 'default';\n\n /**\n * Whether the button is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Optional href to render as a link\n */\n @Prop() href?: string;\n\n /**\n * Button type (when not using href)\n */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n \n /**\n * Use on dark backgrounds for better contrast\n */\n @Prop() darkBackground: boolean = false;\n\n render() {\n const classes = {\n 'button': true,\n [`variant-${this.variant}`]: true,\n [`size-${this.size}`]: true,\n 'disabled': this.disabled,\n 'on-dark': this.darkBackground\n };\n\n const content = [\n <span class=\"icon-left\">\n <slot name=\"icon-left\"></slot>\n </span>,\n <span class=\"label\">\n <slot></slot>\n </span>,\n <span class=\"icon-right\">\n <slot name=\"icon-right\"></slot>\n </span>\n ];\n\n if (this.href && !this.disabled) {\n return (\n <Host>\n <a href={this.href} class={classes}>\n {content}\n </a>\n </Host>\n );\n }\n\n return (\n <Host>\n <button type={this.type} disabled={this.disabled} class={classes}>\n {content}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, h } from './p-Dt4Fpr3O.js';
|
|
2
2
|
|
|
3
3
|
const afHeadingCss = ":host{display:block}.heading{margin:0;padding:0;font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:400;color:var(--colour-typography-heading-primary, #14343b);letter-spacing:-0.02em}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.theme-dark{color:var(--colour-brand-mist-green, #C6D5D1)}.theme-light{color:var(--colour-typography-heading-primary, #14343b)}.level-xl{font-size:50px;line-height:1}@media (min-width: 768px){.level-xl{font-size:80px}}.level-1{font-size:38px;line-height:1}@media (min-width: 768px){.level-1{font-size:56px}}.level-2{font-size:32px;line-height:1}@media (min-width: 768px){.level-2{font-size:44px}}.level-3{font-size:25px;line-height:1}@media (min-width: 768px){.level-3{font-size:34px}}.level-4{font-size:20px;line-height:1.1}@media (min-width: 768px){.level-4{font-size:24px;line-height:1.2}}.level-5{font-size:18px;line-height:1.1}@media (min-width: 768px){.level-5{font-size:20px;line-height:1.2}}";
|
|
4
4
|
|
|
@@ -58,6 +58,6 @@ function defineCustomElement() {
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
export { AfHeading as A, defineCustomElement as d };
|
|
61
|
-
//# sourceMappingURL=p-
|
|
61
|
+
//# sourceMappingURL=p-BTEblSAo.js.map
|
|
62
62
|
|
|
63
|
-
//# sourceMappingURL=p-
|
|
63
|
+
//# sourceMappingURL=p-BTEblSAo.js.map
|