@affinda/wc 0.0.7 → 0.0.9
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-button.entry.esm.js.map +1 -1
- package/dist/affinda/af-card.entry.esm.js.map +1 -1
- package/dist/affinda/af-client-carousel.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-hero-section.entry.esm.js.map +1 -0
- package/dist/affinda/af-logo-well.entry.esm.js.map +1 -0
- package/dist/affinda/af-section.entry.esm.js.map +1 -0
- package/dist/affinda/af-testimonial-carousel.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-0e642987.entry.js +2 -0
- package/dist/affinda/p-0e642987.entry.js.map +1 -0
- package/dist/affinda/p-0fb55acf.entry.js +2 -0
- package/dist/affinda/{p-56284540.entry.js.map → p-0fb55acf.entry.js.map} +1 -1
- package/dist/affinda/p-10288f13.entry.js +2 -0
- package/dist/affinda/p-10288f13.entry.js.map +1 -0
- package/dist/affinda/p-13c30dd8.entry.js +2 -0
- package/dist/affinda/p-13c30dd8.entry.js.map +1 -0
- package/dist/affinda/{p-c8628633.entry.js → p-23aedaa4.entry.js} +2 -2
- package/dist/affinda/{p-eff7eff1.entry.js → p-39e917eb.entry.js} +2 -2
- package/dist/affinda/{p-16c84e60.entry.js → p-430127fa.entry.js} +2 -2
- package/dist/affinda/{p-43324b6d.entry.js → p-45d0f3e3.entry.js} +2 -2
- package/dist/affinda/p-45d0f3e3.entry.js.map +1 -0
- package/dist/affinda/{p-f53b4847.entry.js → p-46edc753.entry.js} +2 -2
- package/dist/affinda/{p-32f46944.entry.js → p-56a15842.entry.js} +2 -2
- package/dist/affinda/p-7c115698.entry.js +2 -0
- package/dist/affinda/p-7c115698.entry.js.map +1 -0
- package/dist/affinda/p-867c5141.entry.js +2 -0
- package/dist/affinda/{p-UbNmjSSX.js → p-Agei6ZJQ.js} +3 -3
- package/dist/affinda/p-Agei6ZJQ.js.map +1 -0
- package/dist/affinda/{p-750a694b.entry.js → p-d7ff9fd9.entry.js} +2 -2
- package/dist/affinda/{p-9e5bef28.entry.js → p-e2c40f4e.entry.js} +2 -2
- package/dist/affinda/{p-9e5bef28.entry.js.map → p-e2c40f4e.entry.js.map} +1 -1
- package/dist/affinda/p-e56182e4.entry.js +2 -0
- package/dist/affinda/p-e56182e4.entry.js.map +1 -0
- package/dist/affinda/{p-66daadde.entry.js → p-f6f2f1c4.entry.js} +2 -2
- package/dist/cjs/af-aspect-ratio.cjs.entry.js +1 -1
- package/dist/cjs/af-button-group.cjs.entry.js +2 -2
- package/dist/cjs/af-button.cjs.entry.js +7 -2
- package/dist/cjs/af-button.entry.cjs.js.map +1 -1
- package/dist/cjs/af-card.cjs.entry.js +3 -3
- package/dist/cjs/af-card.entry.cjs.js.map +1 -1
- package/dist/cjs/af-client-carousel.cjs.entry.js +22 -0
- package/dist/cjs/af-client-carousel.entry.cjs.js.map +1 -0
- 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-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 +22 -12
- package/dist/cjs/af-hero-section.cjs.entry.js +24 -0
- package/dist/cjs/af-hero-section.entry.cjs.js.map +1 -0
- package/dist/cjs/af-icon-button.cjs.entry.js +1 -1
- package/dist/cjs/af-logo-well.cjs.entry.js +18 -0
- package/dist/cjs/af-logo-well.entry.cjs.js.map +1 -0
- package/dist/cjs/af-section.cjs.entry.js +25 -0
- package/dist/cjs/af-section.entry.cjs.js.map +1 -0
- package/dist/cjs/af-testimonial-carousel.cjs.entry.js +4 -4
- package/dist/cjs/af-testimonial-carousel.entry.cjs.js.map +1 -1
- 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 +2 -2
- package/dist/cjs/affinda.cjs.js +2 -2
- package/dist/cjs/{index-CNijn8X5.js → index-D_ItFcqt.js} +3 -3
- package/dist/cjs/index-D_ItFcqt.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/assets/paperclip-decoration.svg +3 -0
- package/dist/collection/collection-manifest.json +4 -0
- package/dist/collection/components/af-button/af-button.js +26 -1
- package/dist/collection/components/af-button/af-button.js.map +1 -1
- package/dist/collection/components/af-button-group/af-button-group.js +1 -1
- package/dist/collection/components/af-card/af-card.css +10 -7
- package/dist/collection/components/af-card/af-card.js +1 -1
- package/dist/collection/components/af-client-carousel/af-client-carousel.css +112 -0
- package/dist/collection/components/af-client-carousel/af-client-carousel.js +72 -0
- package/dist/collection/components/af-client-carousel/af-client-carousel.js.map +1 -0
- package/dist/collection/components/af-heading/af-heading.css +9 -0
- package/dist/collection/components/af-heading/af-heading.js +26 -3
- package/dist/collection/components/af-heading/af-heading.js.map +1 -1
- package/dist/collection/components/af-hero-section/af-hero-section.css +69 -0
- package/dist/collection/components/af-hero-section/af-hero-section.js +94 -0
- package/dist/collection/components/af-hero-section/af-hero-section.js.map +1 -0
- package/dist/collection/components/af-logo/af-logo.js +1 -1
- package/dist/collection/components/af-logo-well/af-logo-well.css +27 -0
- package/dist/collection/components/af-logo-well/af-logo-well.js +22 -0
- package/dist/collection/components/af-logo-well/af-logo-well.js.map +1 -0
- package/dist/collection/components/af-navbar/af-navbar.css +40 -3
- package/dist/collection/components/af-navbar/af-navbar.js +13 -1
- package/dist/collection/components/af-navbar/af-navbar.js.map +1 -1
- package/dist/collection/components/af-section/af-section.css +52 -0
- package/dist/collection/components/af-section/af-section.js +95 -0
- package/dist/collection/components/af-section/af-section.js.map +1 -0
- package/dist/collection/components/af-testimonial/af-testimonial.js +1 -1
- package/dist/collection/components/af-testimonial-carousel/af-testimonial-carousel.css +3 -2
- 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/collection/components/af-text/af-text.css +9 -0
- package/dist/collection/components/af-text/af-text.js +26 -3
- package/dist/collection/components/af-text/af-text.js.map +1 -1
- package/dist/collection/components/af-typography-lockup/af-typography-lockup.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 +3 -3
- package/dist/components/af-card.js.map +1 -1
- package/dist/components/af-client-carousel.d.ts +11 -0
- package/dist/components/af-client-carousel.js +45 -0
- package/dist/components/af-client-carousel.js.map +1 -0
- package/dist/components/af-color-swatch.js +1 -1
- package/dist/components/af-container.js +1 -1
- package/dist/components/af-heading.js +1 -1
- package/dist/components/af-hero-section.d.ts +11 -0
- package/dist/components/af-hero-section.js +53 -0
- package/dist/components/af-hero-section.js.map +1 -0
- package/dist/components/af-icon-button.js +1 -1
- package/dist/components/af-logo-well.d.ts +11 -0
- package/dist/components/af-logo-well.js +38 -0
- package/dist/components/af-logo-well.js.map +1 -0
- 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.d.ts +11 -0
- package/dist/components/af-section.js +54 -0
- package/dist/components/af-section.js.map +1 -0
- package/dist/components/af-testimonial-carousel.js +4 -4
- package/dist/components/af-testimonial-carousel.js.map +1 -1
- 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-Bxv9iL3G.js → p-BMl1ggbQ.js} +3 -3
- package/dist/components/{p-Bxv9iL3G.js.map → p-BMl1ggbQ.js.map} +1 -1
- package/dist/components/{p-KtmLxy7z.js → p-BSewwIfD.js} +3 -3
- package/dist/components/{p-KtmLxy7z.js.map → p-BSewwIfD.js.map} +1 -1
- package/dist/components/{p-Bdy85P7Z.js → p-BeQlNDyY.js} +4 -4
- package/dist/components/{p-Bdy85P7Z.js.map → p-BeQlNDyY.js.map} +1 -1
- package/dist/components/{p-DPooX_NW.js → p-BpXkQGDQ.js} +3 -3
- package/dist/components/{p-DPooX_NW.js.map → p-BpXkQGDQ.js.map} +1 -1
- package/dist/components/{p-C0zUdiRs.js → p-C1C1Him5.js} +12 -8
- package/dist/components/p-C1C1Him5.js.map +1 -0
- package/dist/components/{p-Cfj594pp.js → p-CUr7n62X.js} +3 -3
- package/dist/components/{p-Cfj594pp.js.map → p-CUr7n62X.js.map} +1 -1
- package/dist/components/{p-ChRDoPDm.js → p-CZlTvZAm.js} +3 -3
- package/dist/components/p-CZlTvZAm.js.map +1 -0
- package/dist/components/{p-D021PjqL.js → p-CcNomA2o.js} +11 -5
- package/dist/components/p-CcNomA2o.js.map +1 -0
- package/dist/components/p-Csie_upq.js +41 -0
- package/dist/components/p-Csie_upq.js.map +1 -0
- package/dist/components/{p-CLA_jBiH.js → p-D4NomvK5.js} +4 -4
- package/dist/components/{p-CLA_jBiH.js.map → p-D4NomvK5.js.map} +1 -1
- package/dist/components/{p-BuySFAGS.js → p-Vu-NeL7U.js} +12 -8
- package/dist/components/p-Vu-NeL7U.js.map +1 -0
- package/dist/components/{p-C4sw-kYH.js → p-sJI0-JlJ.js} +4 -4
- package/dist/components/{p-C4sw-kYH.js.map → p-sJI0-JlJ.js.map} +1 -1
- package/dist/components/{p-XAy0kGYd.js → p-tFlyM2Th.js} +3 -3
- package/dist/components/{p-XAy0kGYd.js.map → p-tFlyM2Th.js.map} +1 -1
- package/dist/esm/af-aspect-ratio.entry.js +1 -1
- package/dist/esm/af-button-group.entry.js +2 -2
- package/dist/esm/af-button.entry.js +7 -2
- package/dist/esm/af-button.entry.js.map +1 -1
- package/dist/esm/af-card.entry.js +3 -3
- package/dist/esm/af-card.entry.js.map +1 -1
- package/dist/esm/af-client-carousel.entry.js +20 -0
- package/dist/esm/af-client-carousel.entry.js.map +1 -0
- package/dist/esm/af-color-swatch.entry.js +1 -1
- package/dist/esm/af-container.entry.js +1 -1
- 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 +22 -12
- package/dist/esm/af-hero-section.entry.js +22 -0
- package/dist/esm/af-hero-section.entry.js.map +1 -0
- package/dist/esm/af-icon-button.entry.js +1 -1
- package/dist/esm/af-logo-well.entry.js +16 -0
- package/dist/esm/af-logo-well.entry.js.map +1 -0
- package/dist/esm/af-section.entry.js +23 -0
- package/dist/esm/af-section.entry.js.map +1 -0
- package/dist/esm/af-testimonial-carousel.entry.js +4 -4
- package/dist/esm/af-testimonial-carousel.entry.js.map +1 -1
- 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 +2 -2
- package/dist/esm/affinda.js +3 -3
- package/dist/esm/{index-UbNmjSSX.js → index-Agei6ZJQ.js} +3 -3
- package/dist/esm/index-Agei6ZJQ.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/af-button/af-button.d.ts +4 -0
- package/dist/types/components/af-client-carousel/af-client-carousel.d.ts +10 -0
- package/dist/types/components/af-heading/af-heading.d.ts +2 -0
- package/dist/types/components/af-hero-section/af-hero-section.d.ts +12 -0
- package/dist/types/components/af-logo-well/af-logo-well.d.ts +6 -0
- package/dist/types/components/af-navbar/af-navbar.d.ts +3 -0
- package/dist/types/components/af-section/af-section.d.ts +12 -0
- package/dist/types/components/af-text/af-text.d.ts +2 -0
- package/dist/types/components.d.ts +214 -0
- package/package.json +6 -2
- package/dist/affinda/p-43324b6d.entry.js.map +0 -1
- package/dist/affinda/p-56284540.entry.js +0 -2
- package/dist/affinda/p-9c0b3380.entry.js +0 -2
- package/dist/affinda/p-UbNmjSSX.js.map +0 -1
- package/dist/affinda/p-fedaec5a.entry.js +0 -2
- package/dist/affinda/p-fedaec5a.entry.js.map +0 -1
- package/dist/cjs/index-CNijn8X5.js.map +0 -1
- package/dist/components/p-BuySFAGS.js.map +0 -1
- package/dist/components/p-C0zUdiRs.js.map +0 -1
- package/dist/components/p-CJccTfm5.js +0 -35
- package/dist/components/p-CJccTfm5.js.map +0 -1
- package/dist/components/p-ChRDoPDm.js.map +0 -1
- package/dist/components/p-D021PjqL.js.map +0 -1
- package/dist/esm/index-UbNmjSSX.js.map +0 -1
- /package/dist/affinda/{p-c8628633.entry.js.map → p-23aedaa4.entry.js.map} +0 -0
- /package/dist/affinda/{p-eff7eff1.entry.js.map → p-39e917eb.entry.js.map} +0 -0
- /package/dist/affinda/{p-16c84e60.entry.js.map → p-430127fa.entry.js.map} +0 -0
- /package/dist/affinda/{p-f53b4847.entry.js.map → p-46edc753.entry.js.map} +0 -0
- /package/dist/affinda/{p-32f46944.entry.js.map → p-56a15842.entry.js.map} +0 -0
- /package/dist/affinda/{p-9c0b3380.entry.js.map → p-867c5141.entry.js.map} +0 -0
- /package/dist/affinda/{p-750a694b.entry.js.map → p-d7ff9fd9.entry.js.map} +0 -0
- /package/dist/affinda/{p-66daadde.entry.js.map → p-f6f2f1c4.entry.js.map} +0 -0
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
2
|
+
/**
|
|
3
|
+
* A rounded container for displaying client logos
|
|
4
|
+
*/
|
|
5
|
+
export class AfLogoWell {
|
|
6
|
+
render() {
|
|
7
|
+
return (h(Host, { key: '6443fda91c37fd9f2efd49fbd10b1899f311cd54' }, h("div", { key: '30ec1e2891dfd89af7cc310986d3c5c48e05c556', class: "logo-well" }, h("slot", { key: '4601797d3cef6ed117dc6c93083652dd22f51f05' }))));
|
|
8
|
+
}
|
|
9
|
+
static get is() { return "af-logo-well"; }
|
|
10
|
+
static get encapsulation() { return "shadow"; }
|
|
11
|
+
static get originalStyleUrls() {
|
|
12
|
+
return {
|
|
13
|
+
"$": ["af-logo-well.css"]
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
static get styleUrls() {
|
|
17
|
+
return {
|
|
18
|
+
"$": ["af-logo-well.css"]
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
//# sourceMappingURL=af-logo-well.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"af-logo-well.js","sourceRoot":"","sources":["../../../src/components/af-logo-well/af-logo-well.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,UAAU;IACrB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,WAAW;gBACpB,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["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"]}
|
|
@@ -37,6 +37,21 @@
|
|
|
37
37
|
flex-shrink: 0;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
+
/* Mobile menu toggle button */
|
|
41
|
+
.mobile-menu-toggle {
|
|
42
|
+
display: none;
|
|
43
|
+
background: none;
|
|
44
|
+
border: none;
|
|
45
|
+
padding: 8px;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
color: var(--colour-brand-inkwell, #14343b);
|
|
48
|
+
margin-left: auto;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.mobile-menu-toggle svg {
|
|
52
|
+
display: block;
|
|
53
|
+
}
|
|
54
|
+
|
|
40
55
|
.nav-links {
|
|
41
56
|
display: flex;
|
|
42
57
|
align-items: center;
|
|
@@ -86,28 +101,50 @@
|
|
|
86
101
|
padding: 8px 16px;
|
|
87
102
|
flex-direction: column;
|
|
88
103
|
border-radius: 16px;
|
|
89
|
-
gap:
|
|
104
|
+
gap: 0;
|
|
90
105
|
}
|
|
91
106
|
|
|
92
107
|
.navbar-left {
|
|
93
108
|
width: 100%;
|
|
94
|
-
flex-direction:
|
|
109
|
+
flex-direction: row;
|
|
110
|
+
justify-content: space-between;
|
|
111
|
+
align-items: center;
|
|
95
112
|
gap: 16px;
|
|
96
|
-
align-items: flex-start;
|
|
97
113
|
}
|
|
98
114
|
|
|
115
|
+
/* Show hamburger button on mobile */
|
|
116
|
+
.mobile-menu-toggle {
|
|
117
|
+
display: flex;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* Hide nav links by default on mobile */
|
|
99
121
|
.nav-links {
|
|
122
|
+
display: none;
|
|
100
123
|
width: 100%;
|
|
101
124
|
flex-direction: column;
|
|
102
125
|
align-items: stretch;
|
|
103
126
|
gap: 0;
|
|
127
|
+
margin-top: 16px;
|
|
104
128
|
}
|
|
105
129
|
|
|
130
|
+
/* Show nav links when menu is open */
|
|
131
|
+
.nav-links.mobile-open {
|
|
132
|
+
display: flex;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* Hide right section by default on mobile */
|
|
106
136
|
.navbar-right {
|
|
137
|
+
display: none;
|
|
107
138
|
width: 100%;
|
|
108
139
|
flex-direction: column;
|
|
109
140
|
gap: 12px;
|
|
110
141
|
align-items: stretch;
|
|
142
|
+
margin-top: 16px;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* Show right section when menu is open */
|
|
146
|
+
.navbar-right.mobile-open {
|
|
147
|
+
display: flex;
|
|
111
148
|
}
|
|
112
149
|
|
|
113
150
|
.nav-actions {
|
|
@@ -2,10 +2,17 @@ import { h, Host } from "@stencil/core";
|
|
|
2
2
|
/**
|
|
3
3
|
* A full-width navigation bar component that provides the main site navigation.
|
|
4
4
|
* Features a pill-shaped container with logo, navigation links, and action buttons.
|
|
5
|
+
* Includes mobile hamburger menu.
|
|
5
6
|
*/
|
|
6
7
|
export class AfNavbar {
|
|
8
|
+
constructor() {
|
|
9
|
+
this.mobileMenuOpen = false;
|
|
10
|
+
this.toggleMobileMenu = () => {
|
|
11
|
+
this.mobileMenuOpen = !this.mobileMenuOpen;
|
|
12
|
+
};
|
|
13
|
+
}
|
|
7
14
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
15
|
+
return (h(Host, { key: '305d9415a3c14b2dc352588171d4677f4be4a1af' }, h("nav", { key: 'c509365f0056b0f26d8e3aea98acda04d29d4387', class: "navbar-container" }, h("div", { key: '722fd37a76e7367f0e7cd22729f711e8164b9d60', class: "navbar" }, h("div", { key: 'e0e8d341394b30f4badf5062b899123d691123a1', class: "navbar-left" }, h("div", { key: '145ab6a0ff46f0e21b429b8e2d881404d1d6c24c', class: "logo" }, h("slot", { key: '447d9abfa74c008afac07d3d0386b26ef292ec23', name: "logo" })), h("button", { key: '1f3e5512ea1ab6ca5b6a3a1455a9ff9fa9a2c8e3', class: "mobile-menu-toggle", onClick: this.toggleMobileMenu, "aria-label": "Toggle navigation menu", "aria-expanded": this.mobileMenuOpen ? 'true' : 'false' }, this.mobileMenuOpen ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M18 6L6 18M6 6l12 12", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M3 12h18M3 6h18M3 18h18", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '277226e4c433ad4377810c1e3e894b0d9de11b05', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: 'f95617e99651d0e2a4fa28a08fbe5452a8f95aa3', name: "start" }))), h("div", { key: 'ad7b9cf31ce290303df0af868e369bc79983fff4', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: '817c73031c45579ec13da6d53bfe1753bcd1e0ef', class: "nav-actions" }, h("slot", { key: 'e18d0c55b346722784640c37bbb5e5fe05fec5c0', name: "end" })), h("div", { key: '296dd2c84f0a59c54741b40a6333cfff5ec7d200', class: "nav-button" }, h("slot", { key: 'd94063758598f14888587d93b5b299f593b2cd31', name: "button" })))))));
|
|
9
16
|
}
|
|
10
17
|
static get is() { return "af-navbar"; }
|
|
11
18
|
static get encapsulation() { return "shadow"; }
|
|
@@ -19,5 +26,10 @@ export class AfNavbar {
|
|
|
19
26
|
"$": ["af-navbar.css"]
|
|
20
27
|
};
|
|
21
28
|
}
|
|
29
|
+
static get states() {
|
|
30
|
+
return {
|
|
31
|
+
"mobileMenuOpen": {}
|
|
32
|
+
};
|
|
33
|
+
}
|
|
22
34
|
}
|
|
23
35
|
//# sourceMappingURL=af-navbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1D;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAMW,mBAAc,GAAY,KAAK,CAAC;QAEjC,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;QAC7C,CAAC,CAAC;KAkDH;IAhDC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,4DAAK,KAAK,EAAC,QAAQ;oBAEjB,4DAAK,KAAK,EAAC,aAAa;wBACtB,4DAAK,KAAK,EAAC,MAAM;4BACf,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;wBAGN,+DACE,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,IAAI,CAAC,gBAAgB,gBACnB,wBAAwB,mBACpB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAEpD,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CACrB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc;4BAC/E,YAAM,CAAC,EAAC,sBAAsB,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC5F,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc;4BAC/E,YAAM,CAAC,EAAC,yBAAyB,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC/F,CACP,CACM;wBAET,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE;4BACjE,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF;oBAGN,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE;wBACpE,4DAAK,KAAK,EAAC,aAAa;4BACtB,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB;wBACN,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;CACF","sourcesContent":["import { Component, State, h, Host } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n * Includes mobile hamburger menu.\n */\n@Component({\n tag: 'af-navbar',\n styleUrl: 'af-navbar.css',\n shadow: true\n})\nexport class AfNavbar {\n @State() mobileMenuOpen: boolean = false;\n\n private toggleMobileMenu = () => {\n this.mobileMenuOpen = !this.mobileMenuOpen;\n };\n\n render() {\n return (\n <Host>\n <nav class=\"navbar-container\">\n <div class=\"navbar\">\n {/* Left section: Logo + Nav Links */}\n <div class=\"navbar-left\">\n <div class=\"logo\">\n <slot name=\"logo\"></slot>\n </div>\n \n {/* Hamburger menu button - mobile only */}\n <button \n class=\"mobile-menu-toggle\"\n onClick={this.toggleMobileMenu}\n aria-label=\"Toggle navigation menu\"\n aria-expanded={this.mobileMenuOpen ? 'true' : 'false'}\n >\n {this.mobileMenuOpen ? (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M18 6L6 18M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n ) : (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M3 12h18M3 6h18M3 18h18\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n )}\n </button>\n \n <div class={`nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n <slot name=\"start\"></slot>\n </div>\n </div>\n\n {/* Right section: Actions + Button */}\n <div class={`navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n <div class=\"nav-actions\">\n <slot name=\"end\"></slot>\n </div>\n <div class=\"nav-button\">\n <slot name=\"button\"></slot>\n </div>\n </div>\n </div>\n </nav>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
display: block;
|
|
3
|
+
width: 100%;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.section {
|
|
7
|
+
width: 100%;
|
|
8
|
+
position: relative;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/* Padding variants */
|
|
12
|
+
.padding-tight {
|
|
13
|
+
padding: 48px 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.padding-default {
|
|
17
|
+
padding: 96px 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.padding-loose {
|
|
21
|
+
padding: 120px 0 96px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Background variants */
|
|
25
|
+
.bg-white {
|
|
26
|
+
background-color: var(--colour-background-white, #FFFFFF);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.bg-level1 {
|
|
30
|
+
background-color: var(--colour-background-level-1, #E8EEED);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.bg-dark,
|
|
34
|
+
.bg-inkwell {
|
|
35
|
+
background-color: var(--colour-brand-inkwell, #14343B);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Mobile adjustments */
|
|
39
|
+
@media (max-width: 768px) {
|
|
40
|
+
.padding-tight {
|
|
41
|
+
padding: 32px 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.padding-default {
|
|
45
|
+
padding: 64px 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.padding-loose {
|
|
49
|
+
padding: 80px 0 64px;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
2
|
+
/**
|
|
3
|
+
* Section layout component for consistent spacing and backgrounds
|
|
4
|
+
*/
|
|
5
|
+
export class AfSection {
|
|
6
|
+
constructor() {
|
|
7
|
+
/** Padding variant */
|
|
8
|
+
this.padding = 'default';
|
|
9
|
+
/** Background color */
|
|
10
|
+
this.background = 'white';
|
|
11
|
+
/** Whether to include a Container wrapper */
|
|
12
|
+
this.container = true;
|
|
13
|
+
}
|
|
14
|
+
render() {
|
|
15
|
+
const content = h("slot", { key: '269517d1852d1e459db9dc2673b88b4d8042f61b' });
|
|
16
|
+
return (h(Host, { key: 'a080f296f2f7178db29e973cce05048847e66c83' }, h("div", { key: '54bdca28715bdd18e38d85e2ed95a5699f793d3e', class: `section padding-${this.padding} bg-${this.background}` }, this.container ? (h("af-container", null, content)) : content)));
|
|
17
|
+
}
|
|
18
|
+
static get is() { return "af-section"; }
|
|
19
|
+
static get encapsulation() { return "scoped"; }
|
|
20
|
+
static get originalStyleUrls() {
|
|
21
|
+
return {
|
|
22
|
+
"$": ["af-section.css"]
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
static get styleUrls() {
|
|
26
|
+
return {
|
|
27
|
+
"$": ["af-section.css"]
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
static get properties() {
|
|
31
|
+
return {
|
|
32
|
+
"padding": {
|
|
33
|
+
"type": "string",
|
|
34
|
+
"mutable": false,
|
|
35
|
+
"complexType": {
|
|
36
|
+
"original": "'tight' | 'default' | 'loose'",
|
|
37
|
+
"resolved": "\"default\" | \"loose\" | \"tight\"",
|
|
38
|
+
"references": {}
|
|
39
|
+
},
|
|
40
|
+
"required": false,
|
|
41
|
+
"optional": false,
|
|
42
|
+
"docs": {
|
|
43
|
+
"tags": [],
|
|
44
|
+
"text": "Padding variant"
|
|
45
|
+
},
|
|
46
|
+
"getter": false,
|
|
47
|
+
"setter": false,
|
|
48
|
+
"reflect": false,
|
|
49
|
+
"attribute": "padding",
|
|
50
|
+
"defaultValue": "'default'"
|
|
51
|
+
},
|
|
52
|
+
"background": {
|
|
53
|
+
"type": "string",
|
|
54
|
+
"mutable": false,
|
|
55
|
+
"complexType": {
|
|
56
|
+
"original": "'white' | 'level1' | 'dark' | 'inkwell'",
|
|
57
|
+
"resolved": "\"dark\" | \"inkwell\" | \"level1\" | \"white\"",
|
|
58
|
+
"references": {}
|
|
59
|
+
},
|
|
60
|
+
"required": false,
|
|
61
|
+
"optional": false,
|
|
62
|
+
"docs": {
|
|
63
|
+
"tags": [],
|
|
64
|
+
"text": "Background color"
|
|
65
|
+
},
|
|
66
|
+
"getter": false,
|
|
67
|
+
"setter": false,
|
|
68
|
+
"reflect": false,
|
|
69
|
+
"attribute": "background",
|
|
70
|
+
"defaultValue": "'white'"
|
|
71
|
+
},
|
|
72
|
+
"container": {
|
|
73
|
+
"type": "boolean",
|
|
74
|
+
"mutable": false,
|
|
75
|
+
"complexType": {
|
|
76
|
+
"original": "boolean",
|
|
77
|
+
"resolved": "boolean",
|
|
78
|
+
"references": {}
|
|
79
|
+
},
|
|
80
|
+
"required": false,
|
|
81
|
+
"optional": false,
|
|
82
|
+
"docs": {
|
|
83
|
+
"tags": [],
|
|
84
|
+
"text": "Whether to include a Container wrapper"
|
|
85
|
+
},
|
|
86
|
+
"getter": false,
|
|
87
|
+
"setter": false,
|
|
88
|
+
"reflect": false,
|
|
89
|
+
"attribute": "container",
|
|
90
|
+
"defaultValue": "true"
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
//# sourceMappingURL=af-section.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"af-section.js","sourceRoot":"","sources":["../../../src/components/af-section/af-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAOH,MAAM,OAAO,SAAS;IANtB;QAOE,sBAAsB;QACd,YAAO,GAAkC,SAAS,CAAC;QAE3D,uBAAuB;QACf,eAAU,GAA4C,OAAO,CAAC;QAEtE,6CAA6C;QACrC,cAAS,GAAY,IAAI,CAAC;KAenC;IAbC,MAAM;QACJ,MAAM,OAAO,GAAG,8DAAa,CAAC;QAE9B,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,OAAO,IAAI,CAAC,UAAU,EAAE,IAChE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,wBAAe,OAAO,CAAgB,CACvC,CAAC,CAAC,CAAC,OAAO,CACP,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds\n */\n@Component({\n tag: 'af-section',\n styleUrl: 'af-section.css',\n shadow: false,\n scoped: true,\n})\nexport class AfSection {\n /** Padding variant */\n @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n \n /** Background color */\n @Prop() background: 'white' | 'level1' | 'dark' | 'inkwell' = 'white';\n \n /** Whether to include a Container wrapper */\n @Prop() container: boolean = true;\n\n render() {\n const content = <slot></slot>;\n \n return (\n <Host>\n <div class={`section padding-${this.padding} bg-${this.background}`}>\n {this.container ? (\n <af-container>{content}</af-container>\n ) : content}\n </div>\n </Host>\n );\n }\n}\n\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
export class AfTestimonial {
|
|
3
3
|
render() {
|
|
4
|
-
return (h(Host, { key: '
|
|
4
|
+
return (h(Host, { key: 'b4a23c841092c119b7e8abd4249b75985f8edf95' }, h("div", { key: '65fec4f695a746ef51d4539b33dc166d4f1cb95c', class: "testimonial-card" }, h("div", { key: 'ad5ec6edb4fd3577f14d9cbcce925c1c68d6262e', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '4e51da94bd106ae50c63186c7cbedee3e86d341e', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: '68eea0c228eb7d3e92a3cbab11ee4d1b3d9e590e', class: "testimonial-logo" }, h("img", { key: '5f2225a849003d6b4b5ccc08073da121e3d27cf4', src: this.logoImage, alt: "Company logo" })))), h("div", { key: '9e6dbb02f4d87829af74c66029bd93ce3f3c65dd', class: "testimonial-content" }, h("div", { key: 'efd25f8dc722d79006835406a972da0d5fd7f77f', class: "testimonial-quote-section" }, h("div", { key: '46064d44eeed1712130c6c24007f5481b9cc3cf7', class: "testimonial-quote-icon" }, h("slot", { key: 'e1389d94a5cbb1181862963fd799d7c14b2d3ee5', name: "quote-icon" }, h("svg", { key: '6a935e48920b1964036f02fbc830b1319a20f057', width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cf0de3883bdf5a39cd377591ec34a02d75afd39c', 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: 'db71848c9ae10a2a24cdcb6797f8f2b4fbf6cea9', class: "testimonial-text" }, this.quote), h("p", { key: 'ad7c4fd0a91a1c2ea42d4abcc3ab949e51c3d313', class: "testimonial-attribution" }, this.attribution)), h("div", { key: '8042208ced311c39c8d91968ac1bc37c76971ec1', class: "testimonial-stats" }, h("slot", { key: 'b5c40fdb83b6776b2de0a57e37045a1fde50e78f', name: "stats" })), h("div", { key: '1b19fc1264136cf90cb0c32841678129f5dd711d', class: "testimonial-footer" }, h("div", { key: '77058648a8e25ed63b622c7bbf873c299e39e42d', class: "testimonial-nav" }, h("slot", { key: '9231316a8dd17ae30c754e1ff1ba9ea70c327c82', name: "navigation" })), this.readMoreLink && (h("a", { key: '01072189417f44da780b5c5a8849e9e66a2a9b0d', href: this.readMoreLink, class: "testimonial-cta" }, h("span", { key: '8c5008a42d4c4160bb4950f562872a67ac26c15c' }, "Read full story"), h("svg", { key: '881176b723a0f4c3d941d2be0f8983ddc0468ee6', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'd8fd8469aa2c45286891751b269c692ee90426c0', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "af-testimonial"; }
|
|
7
7
|
static get encapsulation() { return "scoped"; }
|
|
@@ -53,11 +53,12 @@
|
|
|
53
53
|
background: var(--colour-background-border-default, #c1cdc9);
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
/* Navigation buttons - positioned bottom left
|
|
56
|
+
/* Navigation buttons - positioned bottom left of content area (not on image) */
|
|
57
57
|
.carousel-navigation {
|
|
58
58
|
position: absolute;
|
|
59
59
|
bottom: 48px;
|
|
60
|
-
left:
|
|
60
|
+
left: 50%;
|
|
61
|
+
margin-left: 48px;
|
|
61
62
|
display: flex;
|
|
62
63
|
gap: 12px;
|
|
63
64
|
align-items: center;
|
|
@@ -65,7 +65,7 @@ export class AfTestimonialCarousel {
|
|
|
65
65
|
render() {
|
|
66
66
|
const hasPrev = this.currentIndex > 0;
|
|
67
67
|
const hasNext = this.currentIndex < this.testimonialCount - 1;
|
|
68
|
-
return (h(Host, { key: '
|
|
68
|
+
return (h(Host, { key: '93e4222eaa683eda0e5d68d445691e5dcf764b10' }, h("div", { key: '8679d282c0644b463eee86fa90282f59ba1c6cb5', class: "testimonial-carousel" }, h("div", { key: '6779793a882493c73b31bdf5742e2d068b8db72f', class: "testimonial-slides" }, h("slot", { key: '4326f6b06a60174edc2ba74c3d5704707965bf5d' })), this.testimonialCount > 1 && (h("div", { key: 'ba63a40e6a0789df3af7ff51d36a0f9c2e0651c6', class: "testimonial-progress" }, Array.from({ length: this.testimonialCount }).map((_, index) => (h("div", { class: `progress-dot ${index === this.currentIndex ? 'active' : ''}`, onClick: () => {
|
|
69
69
|
if (!this.isAnimating && index !== this.currentIndex) {
|
|
70
70
|
this.isAnimating = true;
|
|
71
71
|
this.currentIndex = index;
|
|
@@ -74,7 +74,7 @@ export class AfTestimonialCarousel {
|
|
|
74
74
|
this.isAnimating = false;
|
|
75
75
|
}, 500);
|
|
76
76
|
}
|
|
77
|
-
} }))))), this.testimonialCount > 1 && (h("div", { key: '
|
|
77
|
+
} }))))), this.testimonialCount > 1 && (h("div", { key: 'e15676334f291d496302381e3625b8c18f46626d', class: "carousel-navigation" }, h("button", { key: '511c7cf3b514d07ec4b2c6e9a6a2231a6c98b1d3', class: "nav-button prev", disabled: !hasPrev, onClick: this.goToPrevious, "aria-label": "Previous testimonial" }, h("svg", { key: '477016d99fb337bed5ae757ff14dc290819450ba', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '989e2119171bb332ca39a45d9b18d46736e0a82f', d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '5b52c2b3d6aef2b17e144ae30eebd6c6a3c07323', class: "nav-button next", disabled: !hasNext, onClick: this.goToNext, "aria-label": "Next testimonial" }, h("svg", { key: '9d03ebe923108338a4fdab149d02c04e19df6e5e', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'a90a52e8cfb3df339d42894448b184b1229f429d', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
|
|
78
78
|
}
|
|
79
79
|
static get is() { return "af-testimonial-carousel"; }
|
|
80
80
|
static get encapsulation() { return "scoped"; }
|
|
@@ -7,7 +7,7 @@ export class AfTestimonialStat {
|
|
|
7
7
|
this.accentBorder = false;
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: '38055fcad76047030e7907ad11933c229e33fe05' }, h("div", { key: 'ae01845c6494f9da213f7b823aa5a57b51d94e96', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("p", { key: 'd1ee0c278a840f343e442178fa2c8ae35e04304e', class: "stat-value" }, this.value), h("p", { key: '29322d5a6e3048f6c1a3df68393f6367bb4b6631', class: "stat-description" }, this.description))));
|
|
11
11
|
}
|
|
12
12
|
static get is() { return "af-testimonial-stat"; }
|
|
13
13
|
static get encapsulation() { return "scoped"; }
|
|
@@ -24,6 +24,15 @@
|
|
|
24
24
|
text-align: right;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
/* Theme variants */
|
|
28
|
+
.theme-dark {
|
|
29
|
+
color: var(--colour-brand-mist-green, #C6D5D1);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.theme-light {
|
|
33
|
+
color: var(--colour-typography-body-default, #14343b);
|
|
34
|
+
}
|
|
35
|
+
|
|
27
36
|
/* Body variants */
|
|
28
37
|
.variant-xlarge {
|
|
29
38
|
font-size: 22px;
|
|
@@ -7,14 +7,17 @@ export class AfText {
|
|
|
7
7
|
this.align = 'left';
|
|
8
8
|
/** Semantic element to render */
|
|
9
9
|
this.as = 'p';
|
|
10
|
+
/** Theme for dark backgrounds */
|
|
11
|
+
this.theme = 'light';
|
|
10
12
|
}
|
|
11
13
|
render() {
|
|
12
14
|
const Tag = this.as;
|
|
13
|
-
return (h(Tag, { key: '
|
|
15
|
+
return (h(Tag, { key: 'd24094cc876bf871972eb35651c2c145d135722f', class: {
|
|
14
16
|
'text': true,
|
|
15
17
|
[`variant-${this.variant}`]: true,
|
|
16
|
-
[`align-${this.align}`]: true
|
|
17
|
-
|
|
18
|
+
[`align-${this.align}`]: true,
|
|
19
|
+
[`theme-${this.theme}`]: true
|
|
20
|
+
}, part: "base" }, h("slot", { key: 'bb1f690d3b11f76d926da7bc7655fbce9df9973c' })));
|
|
18
21
|
}
|
|
19
22
|
static get is() { return "af-text"; }
|
|
20
23
|
static get encapsulation() { return "shadow"; }
|
|
@@ -89,6 +92,26 @@ export class AfText {
|
|
|
89
92
|
"reflect": false,
|
|
90
93
|
"attribute": "as",
|
|
91
94
|
"defaultValue": "'p'"
|
|
95
|
+
},
|
|
96
|
+
"theme": {
|
|
97
|
+
"type": "string",
|
|
98
|
+
"mutable": false,
|
|
99
|
+
"complexType": {
|
|
100
|
+
"original": "'light' | 'dark'",
|
|
101
|
+
"resolved": "\"dark\" | \"light\"",
|
|
102
|
+
"references": {}
|
|
103
|
+
},
|
|
104
|
+
"required": false,
|
|
105
|
+
"optional": false,
|
|
106
|
+
"docs": {
|
|
107
|
+
"tags": [],
|
|
108
|
+
"text": "Theme for dark backgrounds"
|
|
109
|
+
},
|
|
110
|
+
"getter": false,
|
|
111
|
+
"setter": false,
|
|
112
|
+
"reflect": false,
|
|
113
|
+
"attribute": "theme",
|
|
114
|
+
"defaultValue": "'light'"
|
|
92
115
|
}
|
|
93
116
|
};
|
|
94
117
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-text.js","sourceRoot":"","sources":["../../../src/components/af-text/af-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,MAAM;IALnB;QAME,mBAAmB;QACX,YAAO,GAA2E,QAAQ,CAAC;QAEnG,uBAAuB;QACf,UAAK,GAAgC,MAAM,CAAC;QAEpD,iCAAiC;QACzB,OAAE,GAAmC,GAAG,CAAC;
|
|
1
|
+
{"version":3,"file":"af-text.js","sourceRoot":"","sources":["../../../src/components/af-text/af-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,MAAM;IALnB;QAME,mBAAmB;QACX,YAAO,GAA2E,QAAQ,CAAC;QAEnG,uBAAuB;QACf,UAAK,GAAgC,MAAM,CAAC;QAEpD,iCAAiC;QACzB,OAAE,GAAmC,GAAG,CAAC;QAEjD,iCAAiC;QACzB,UAAK,GAAqB,OAAO,CAAC;KAmB3C;IAjBC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,EAAS,CAAC;QAE3B,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACjC,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;gBAC7B,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;aAC9B,EACD,IAAI,EAAC,MAAM;YAEX,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'af-text',\n styleUrl: 'af-text.css',\n shadow: true\n})\nexport class AfText {\n /** Text variant */\n @Prop() variant: 'xlarge' | 'large' | 'medium' | 'small' | 'label-button' | 'label-tag' = 'medium';\n\n /** Visual alignment */\n @Prop() align: 'left' | 'center' | 'right' = 'left';\n\n /** Semantic element to render */\n @Prop() as: 'p' | 'span' | 'div' | 'label' = 'p';\n \n /** Theme for dark backgrounds */\n @Prop() theme: 'light' | 'dark' = 'light';\n\n render() {\n const Tag = this.as as any;\n\n return (\n <Tag\n class={{\n 'text': true,\n [`variant-${this.variant}`]: true,\n [`align-${this.align}`]: true,\n [`theme-${this.theme}`]: true\n }}\n part=\"base\"\n >\n <slot />\n </Tag>\n );\n }\n}\n"]}
|
|
@@ -30,7 +30,7 @@ export class AfTypographyLockup {
|
|
|
30
30
|
[`breakpoint-${this.breakpoint}`]: true
|
|
31
31
|
};
|
|
32
32
|
const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
|
|
33
|
-
return (h(Host, { key: '
|
|
33
|
+
return (h(Host, { key: '108f59f3983487b19e059fa0f9c9c33cfb9b47ba' }, h("div", { key: '4dd1ece34095b91fcf9f41355a16eb4fb4b83ef0', class: containerClasses }, h("div", { key: '3a472b7ccfe7192ca9f2867e91b366469c030442', class: copyClasses, style: copyStyle }, h("div", { key: '578aa5a20e857a1d822d60a3f8dfb16ddd64f423', class: "heading" }, h("slot", { key: 'd38c8f2572e16f6f158b37c1a547c5482f1a3351' })), h("div", { key: '4d59415dac2a10f2443b2186e8f71026e9c70e71', class: "description" }, h("slot", { key: 'e1b4d336405cdf08b7fcb451f7e09811c736a955', name: "description" }))), h("div", { key: '955dda0ad363656d54dca5f9327329a91ee2a96e', class: "buttons" }, h("slot", { key: 'e6582595577adeb312cb726ea6708c23a46d6ec1', name: "buttons" })))));
|
|
34
34
|
}
|
|
35
35
|
static get is() { return "af-typography-lockup"; }
|
|
36
36
|
static get encapsulation() { return "shadow"; }
|
|
@@ -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-CZlTvZAm.js';
|
|
2
2
|
|
|
3
|
-
const afCardCss = ".sc-af-card-h{display:block;width:100%;min-height:400px}.card.sc-af-card{background:var(--colour-background-level-1, #e8eeed);border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:400px;height:100%;box-sizing:border-box}.card--with-image.sc-af-card{background:var(--colour-brand-inkwell, #14343b);min-height:480px}.card__background.sc-af-card{position:absolute;inset:0;pointer-events:none;z-index:0}.card__background-image.sc-af-card{width:100%;height:100%;object-fit:cover;object-position:center}.card__content.sc-af-card{position:relative;padding:40px;display:flex;flex-direction:column;gap:24px;flex:1;box-sizing:border-box;z-index:1}.card__content.sc-af-card-s>img,.card__content .sc-af-card-s>img{width:100%;height:auto;min-height:200px;margin-top:auto;object-fit:cover;object-position:top center}.card__content.sc-af-card-s>af-heading,.card__content .sc-af-card-s>af-heading{margin-bottom:0}.card__content.sc-af-card-s>af-text,.card__content .sc-af-card-s>af-text{line-height:1.44}.card__content--overlay.sc-af-card{backdrop-filter:blur(2px);background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);padding:32px;padding-top:200px;justify-content:flex-end;--colour-typography-heading-primary:#ffffff;--colour-typography-heading-secondary:#ffffff;--colour-typography-body-default:#ffffff;--colour-typography-body-dark:#ffffff;color:#ffffff}.card__content--overlay.sc-af-card *.sc-af-card{color:#ffffff !important}.card.sc-af-card:not(.card--with-image) .
|
|
3
|
+
const afCardCss = ".sc-af-card-h{display:block;width:100%;min-height:400px}.card.sc-af-card{background:var(--colour-background-level-1, #e8eeed);border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:400px;height:100%;box-sizing:border-box}.card--with-image.sc-af-card{background:var(--colour-brand-inkwell, #14343b);min-height:480px}.card__background.sc-af-card{position:absolute;inset:0;pointer-events:none;z-index:0}.card__background-image.sc-af-card{width:100%;height:100%;object-fit:cover;object-position:center}.card__content.sc-af-card{position:relative;padding:40px;display:flex;flex-direction:column;gap:24px;flex:1;box-sizing:border-box;z-index:1}.card__content.sc-af-card-s>img,.card__content .sc-af-card-s>img{width:100%;height:auto;min-height:200px;margin-top:auto;object-fit:cover;object-position:top center}.card__content.sc-af-card-s>af-heading,.card__content .sc-af-card-s>af-heading{margin-bottom:0}.card__content.sc-af-card-s>af-text,.card__content .sc-af-card-s>af-text{line-height:1.44}.card__content--overlay.sc-af-card{backdrop-filter:blur(2px);background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);padding:32px;padding-top:200px;justify-content:flex-end;--colour-typography-heading-primary:#ffffff;--colour-typography-heading-secondary:#ffffff;--colour-typography-body-default:#ffffff;--colour-typography-body-dark:#ffffff;color:#ffffff}.card__content--overlay.sc-af-card *.sc-af-card{color:#ffffff !important}.card.sc-af-card:not(.card--with-image):not(.card--dark-overlay) af-heading.sc-af-card,.card.sc-af-card:not(.card--with-image):not(.card--dark-overlay) af-text.sc-af-card{--colour-typography-heading-primary:var(--colour-brand-inkwell, #14343B);--colour-typography-body-default:#2B484F}.card--custom-bg.sc-af-card:not(.card--dark-overlay) af-heading.sc-af-card,.card--custom-bg.sc-af-card:not(.card--dark-overlay) af-text.sc-af-card{--colour-typography-heading-primary:var(--colour-brand-inkwell, #14343B);--colour-typography-body-default:#2B484F}";
|
|
4
4
|
|
|
5
5
|
const AfCard$1 = /*@__PURE__*/ proxyCustomElement(class AfCard extends H {
|
|
6
6
|
constructor(registerHost) {
|
|
@@ -16,7 +16,7 @@ const AfCard$1 = /*@__PURE__*/ proxyCustomElement(class AfCard extends H {
|
|
|
16
16
|
render() {
|
|
17
17
|
const hasBackgroundImage = !!this.backgroundImage;
|
|
18
18
|
const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;
|
|
19
|
-
return (h(Host, { key: '
|
|
19
|
+
return (h(Host, { key: '2c3c0b6d1889074ae78b2b1f9646dc23829a0e9a' }, h("div", { key: '7e1ef884a203ae17e1ad417ac688f59b9acb6932', class: `card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`, style: cardStyle }, hasBackgroundImage && (h("div", { key: '4fb3cea588d42345690df68738b725a6debacc55', class: "card__background" }, h("img", { key: '0dde30e250c7cb117993e3ccbeab8f108278ae89', src: this.backgroundImage, alt: "", class: "card__background-image" }))), h("div", { key: 'f604c04997720f4804d148f103f9c4a69b1ec0aa', class: `card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}` }, h("slot", { key: 'a7668f98c4c8fd10b5581eac69f2a31aecbc3732' })))));
|
|
20
20
|
}
|
|
21
21
|
static get style() { return afCardCss; }
|
|
22
22
|
}, [262, "af-card", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"af-card.js","mappings":";;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"file":"af-card.js","mappings":";;AAAA,MAAM,SAAS,GAAG,qhEAAqhE;;MCQ1hEA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAiBE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAwBrC;IAtBC,MAAM,GAAA;AACJ,QAAA,MAAM,kBAAkB,GAAG,CAAC,CAAC,IAAI,CAAC,eAAe;AACjD,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,GAAG,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,SAAS;AAE9F,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,QAAQ,kBAAkB,GAAG,kBAAkB,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,oBAAoB,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,eAAe,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAE,EAC9J,KAAK,EAAE,SAAS,EAAA,EAEf,kBAAkB,KACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,wBAAwB,EAAA,CAAG,CACpE,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiB,cAAA,EAAA,kBAAkB,GAAG,wBAAwB,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n min-height: 400px;\n}\n\n.card {\n background: var(--colour-background-level-1, #e8eeed);\n border-radius: var(--border-radius-card-level-1, 32px);\n overflow: hidden;\n position: relative;\n display: flex;\n flex-direction: column;\n min-height: 400px;\n height: 100%;\n box-sizing: border-box;\n}\n\n.card--with-image {\n background: var(--colour-brand-inkwell, #14343b);\n min-height: 480px;\n}\n\n.card__background {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n}\n\n.card__background-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.card__content {\n position: relative;\n padding: 40px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n flex: 1;\n box-sizing: border-box;\n z-index: 1;\n}\n\n/* Image styling within cards */\n.card__content ::slotted(img) {\n width: 100%;\n height: auto;\n min-height: 200px;\n margin-top: auto;\n object-fit: cover;\n object-position: top center;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n line-height: 1.44;\n}\n\n.card__content--overlay {\n backdrop-filter: blur(2px);\n background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n padding: 32px;\n padding-top: 200px;\n justify-content: flex-end;\n \n /* Set CSS custom properties for text color that child components can use */\n --colour-typography-heading-primary: #ffffff;\n --colour-typography-heading-secondary: #ffffff;\n --colour-typography-body-default: #ffffff;\n --colour-typography-body-dark: #ffffff;\n color: #ffffff;\n}\n\n/* Force white text in overlay cards using both direct styling and custom properties */\n.card__content--overlay * {\n color: #ffffff !important;\n}\n\n/* Dark text for regular cards (light backgrounds) */\n.card:not(.card--with-image):not(.card--dark-overlay) af-heading,\n.card:not(.card--with-image):not(.card--dark-overlay) af-text {\n --colour-typography-heading-primary: var(--colour-brand-inkwell, #14343B);\n --colour-typography-body-default: #2B484F;\n}\n\n/* Dark text for custom background color cards (unless they have dark overlay) */\n.card--custom-bg:not(.card--dark-overlay) af-heading,\n.card--custom-bg:not(.card--dark-overlay) af-text {\n --colour-typography-heading-primary: var(--colour-brand-inkwell, #14343B);\n --colour-typography-body-default: #2B484F;\n}\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-card',\n styleUrl: 'af-card.css',\n shadow: false,\n scoped: true,\n})\nexport class AfCard {\n /**\n * Background image URL for the card\n */\n @Prop() backgroundImage?: string;\n\n /**\n * Background color for the card (CSS color value)\n */\n @Prop() backgroundColor?: string;\n\n /**\n * Whether to apply a dark gradient overlay (for cards with background images)\n */\n @Prop() darkOverlay: boolean = false;\n\n render() {\n const hasBackgroundImage = !!this.backgroundImage;\n const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;\n\n return (\n <Host>\n <div \n class={`card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`}\n style={cardStyle}\n >\n {hasBackgroundImage && (\n <div class=\"card__background\">\n <img src={this.backgroundImage} alt=\"\" class=\"card__background-image\" />\n </div>\n )}\n <div class={`card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}`}>\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface AfClientCarousel extends Components.AfClientCarousel, HTMLElement {}
|
|
4
|
+
export const AfClientCarousel: {
|
|
5
|
+
prototype: AfClientCarousel;
|
|
6
|
+
new (): AfClientCarousel;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { p as proxyCustomElement, H, h, c as Host } from './p-CZlTvZAm.js';
|
|
2
|
+
|
|
3
|
+
const afClientCarouselCss = ":host{display:block;width:100%;background-color:var(--colour-brand-inkwell, #14343B)}.client-carousel{padding:48px 80px;display:flex;flex-direction:column;gap:40px;align-items:center}.headline{text-align:center;padding:24px 220px}.headline h3{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;font-size:34px;line-height:1;letter-spacing:-0.68px;color:var(--colour-brand-mist-green, #C6D5D1);margin:0}.carousel-container{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.carousel-row{display:flex;width:100%;overflow:hidden;position:relative}.logo-track{display:flex;gap:16px;animation-timing-function:linear;animation-iteration-count:infinite}.scroll-left .logo-track{animation-name:scroll-left;animation-duration:40s}.scroll-right .logo-track{animation-name:scroll-right;animation-duration:40s}@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}@keyframes scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}::slotted(*){flex-shrink:0}@media (max-width: 1024px){.client-carousel{padding:32px 40px}.headline{padding:16px 40px}}@media (max-width: 767px){.client-carousel{padding:24px 16px}.headline{padding:16px}.headline h3{font-size:25px}}";
|
|
4
|
+
|
|
5
|
+
const AfClientCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfClientCarousel extends H {
|
|
6
|
+
constructor(registerHost) {
|
|
7
|
+
super();
|
|
8
|
+
if (registerHost !== false) {
|
|
9
|
+
this.__registerHost();
|
|
10
|
+
}
|
|
11
|
+
this.__attachShadow();
|
|
12
|
+
/** Show headline above carousel */
|
|
13
|
+
this.showHeadline = false;
|
|
14
|
+
/** Headline text */
|
|
15
|
+
this.headlineText = "Trusted by some of the world's leading organisations";
|
|
16
|
+
}
|
|
17
|
+
render() {
|
|
18
|
+
return (h(Host, { key: '6ee5a4e472cb082ac68cb58c00bf5b1d686dd489' }, h("div", { key: 'dc030f69bfbb55ce999f0b2f1d8a47095d75ac59', class: "client-carousel" }, this.showHeadline && (h("div", { key: 'd8d7fdbd47e65cc5a3a8e10d88f7425f91d0459e', class: "headline" }, h("slot", { key: '3773f567bfd3de6058cd1088ba2c781cf510e63b', name: "headline" }, h("h3", { key: 'fdcab6ce99a2c477bf1e336f13f7994637b8436d' }, this.headlineText)))), h("div", { key: '30429a27f88e490051a4623195421e00a34f4db4', class: "carousel-container" }, h("div", { key: 'de187b8265b84cb3d8f22540ec283bb8b3603aa8', class: "carousel-row scroll-left" }, h("div", { key: 'd2da7c79388f53425cba20429204fea148030aa5', class: "logo-track" }, h("slot", { key: 'b4ddb6250d5893290ed40a2c765d0f0bf0a378e6', name: "row-1" }), h("slot", { key: 'ccb91ed748f2e51a1d0f2d63d676f7e2558ec2ef', name: "row-1" }))), h("div", { key: 'f6a99654384b070bf91e9ea1ebc57de304f2671f', class: "carousel-row scroll-right" }, h("div", { key: '8e31a13039f2e2df33eb7ec67f738d71d49d931f', class: "logo-track" }, h("slot", { key: '2ffeff2da8ddd4c0faefaf59fc1a45972de26943', name: "row-2" }), h("slot", { key: '2121dc84af370a41290a432e50f3c10f6b3d4b4c', name: "row-2" })))))));
|
|
19
|
+
}
|
|
20
|
+
static get style() { return afClientCarouselCss; }
|
|
21
|
+
}, [257, "af-client-carousel", {
|
|
22
|
+
"showHeadline": [4, "show-headline"],
|
|
23
|
+
"headlineText": [1, "headline-text"]
|
|
24
|
+
}]);
|
|
25
|
+
function defineCustomElement$1() {
|
|
26
|
+
if (typeof customElements === "undefined") {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
const components = ["af-client-carousel"];
|
|
30
|
+
components.forEach(tagName => { switch (tagName) {
|
|
31
|
+
case "af-client-carousel":
|
|
32
|
+
if (!customElements.get(tagName)) {
|
|
33
|
+
customElements.define(tagName, AfClientCarousel$1);
|
|
34
|
+
}
|
|
35
|
+
break;
|
|
36
|
+
} });
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
const AfClientCarousel = AfClientCarousel$1;
|
|
40
|
+
const defineCustomElement = defineCustomElement$1;
|
|
41
|
+
|
|
42
|
+
export { AfClientCarousel, defineCustomElement };
|
|
43
|
+
//# sourceMappingURL=af-client-carousel.js.map
|
|
44
|
+
|
|
45
|
+
//# sourceMappingURL=af-client-carousel.js.map
|