@saasquatch/mint-components 2.0.4-6 → 2.0.4-8

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.
Files changed (32) hide show
  1. package/dist/cjs/sqm-big-stat_47.cjs.entry.js +4 -1
  2. package/dist/cjs/sqm-hero-image.cjs.entry.js +212 -0
  3. package/dist/cjs/sqm-hero-image.entry.cjs.js.map +1 -0
  4. package/dist/collection/components/sqm-hero-image/sqm-hero-image-view.js +4 -1
  5. package/dist/collection/components/sqm-hero-image/sqm-hero-image-view.js.map +1 -1
  6. package/dist/esm/sqm-big-stat_47.entry.js +4 -1
  7. package/dist/esm/sqm-hero-image.entry.js +210 -0
  8. package/dist/esm/sqm-hero-image.entry.js.map +1 -0
  9. package/dist/esm-es5/index.es6-B8obHcrJ.js.map +0 -1
  10. package/dist/esm-es5/sqm-big-stat_47.entry.js +1 -1
  11. package/dist/esm-es5/sqm-big-stat_47.entry.js.map +1 -1
  12. package/dist/esm-es5/sqm-hero-image.entry.js +2 -0
  13. package/dist/esm-es5/sqm-hero-image.entry.js.map +1 -1
  14. package/dist/mint-components/mint-components.esm.js +1 -1
  15. package/dist/mint-components/p--BIwzOKv.system.js.map +1 -0
  16. package/dist/mint-components/p-46b98516.system.entry.js +2 -0
  17. package/dist/mint-components/p-46b98516.system.entry.js.map +1 -0
  18. package/dist/mint-components/p-DgEk6gtv.system.js +1 -1
  19. package/dist/mint-components/{p-b71ccea6.entry.js → p-f43827dd.entry.js} +2 -2
  20. package/dist/mint-components/p-f43827dd.entry.js.map +1 -0
  21. package/dist/mint-components/sqm-hero-image.entry.esm.js.map +1 -0
  22. package/dist/mint-components/sqm-hero-image.entry.js +210 -0
  23. package/dist/mint-components/sqm-hero-image.entry.system.js.map +1 -0
  24. package/dist/mint-components/sqm-hero-image.system.entry.js +2 -0
  25. package/dist/mint-components/sqm-hero-image.system.entry.js.map +1 -0
  26. package/docs/docs.docx +0 -0
  27. package/docs/stats.json +17 -16
  28. package/package.json +1 -1
  29. package/dist/mint-components/p-7de6c83d.system.entry.js +0 -2
  30. package/dist/mint-components/p-7de6c83d.system.entry.js.map +0 -1
  31. package/dist/mint-components/p-CnhB5zL1.system.js.map +0 -1
  32. package/dist/mint-components/p-b71ccea6.entry.js.map +0 -1
package/dist/cjs/sqm-big-stat_47.cjs.entry.js CHANGED
@@ -1722,7 +1722,10 @@ function HeroImageView(props, children) {
1722
1722
  : window.open(props.buttonLink, "_parent") }, props.buttonText)), children && children)));
1723
1723
  }
1724
1724
  function ColumnView() {
1725
- return (index.h("div", null, index.h("div", { class: sheet.classes.Column }, index.h("div", { class: "image-area" }, index.h("img", { loading: "lazy", class: sheet.classes.Image, src: props.imageUrl, part: "sqm-columns-image" })), index.h("div", { class: "text-area", part: "sqm-columns-text-area" }, props.header && (index.h("div", { class: sheet.classes.Header, part: "sqm-columns-header" }, props.header)), props.description && (index.h("div", { class: sheet.classes.Description, part: "sqm-columns-description" }, props.description)), props.buttonText && (index.h("sl-button", { exportparts: "base: sqm-hero-image-button", class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
1725
+ return (index.h("div", null, index.h("div", { class: sheet.classes.Column }, index.h("div", { class: "image-area" }, index.h("img", {
1726
+ // @ts-ignore
1727
+ fetchpriority: "high", class: sheet.classes.Image, src: props.imageUrl, part: "sqm-columns-image", style: { height: "200px", width: "200px" }
1728
+ })), index.h("div", { class: "text-area", part: "sqm-columns-text-area" }, props.header && (index.h("div", { class: sheet.classes.Header, part: "sqm-columns-header" }, props.header)), props.description && (index.h("div", { class: sheet.classes.Description, part: "sqm-columns-description" }, props.description)), props.buttonText && (index.h("sl-button", { exportparts: "base: sqm-hero-image-button", class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
1726
1729
  ? window.open(props.buttonLink)
1727
1730
  : window.open(props.buttonLink, "_parent") }, props.buttonText))))));
1728
1731
  }
package/dist/cjs/sqm-hero-image.cjs.entry.js ADDED
@@ -0,0 +1,212 @@
1
+ 'use strict';
2
+
3
+ var index = require('./index-DOfB12NV.js');
4
+ var utils = require('./utils-BBbR7Dx-.js');
5
+ var JSS = require('./JSS-BCS7zDGG.js');
6
+ require('./jss-preset-default.esm-Bo5NjWRF.js');
7
+
8
+ function HeroImageView(props, children) {
9
+ const overlay = Boolean((props.header || props.description || props.buttonText) &&
10
+ props.layout === "overlay");
11
+ // Dependent on props, not feasiable to move out
12
+ const style = {
13
+ Container: {
14
+ position: "relative",
15
+ "&:before": {
16
+ content: overlay ? '""' : "",
17
+ width: "100%",
18
+ height: "100%",
19
+ position: "absolute",
20
+ background: props.overlayColor || "var(--sl-color-black)",
21
+ opacity: props.overlayOpacity,
22
+ },
23
+ },
24
+ Image: {
25
+ display: "block",
26
+ width: "100%",
27
+ height: "100%",
28
+ objectFit: "cover",
29
+ },
30
+ Background: {
31
+ backgroundImage: `url(${props.imageUrl})`,
32
+ backgroundSize: "cover",
33
+ backgroundPosition: props.imagePos || "center",
34
+ display: "flex",
35
+ justifyContent: "center",
36
+ alignItems: "center",
37
+ },
38
+ Overlay: {
39
+ zIndex: "1",
40
+ padding: "calc(var(--sl-spacing-" +
41
+ props.paddingText +
42
+ ") + var(--sl-spacing-" +
43
+ props.paddingImage +
44
+ "))",
45
+ textAlign: "center",
46
+ color: props.textColor || "var(--sqm-text)",
47
+ lineHeight: "var(--sl-line-height-dense)",
48
+ "@media (max-width: 599px)": {
49
+ padding: "var(--sl-spacing-" + props.paddingText + ")",
50
+ },
51
+ },
52
+ Column: {
53
+ display: "flex",
54
+ background: props.backgroundColor || "",
55
+ flexDirection: props.imagePos === "right" ? "row-reverse" : "row",
56
+ lineHeight: "var(--sl-line-height-dense)",
57
+ color: props.textColor || "var(--sqm-text)",
58
+ "& .image-area": {
59
+ width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
60
+ padding: "var(--sl-spacing-" + props.paddingImage + ")",
61
+ boxSizing: "border-box",
62
+ display: "flex",
63
+ justifyContent: "center",
64
+ alignItems: "center",
65
+ "@media (max-width: 599px)": {
66
+ width: "100%",
67
+ },
68
+ },
69
+ "& .text-area": {
70
+ width: props.imagePercentage
71
+ ? 100 - props.imagePercentage + "%"
72
+ : "50%",
73
+ padding: "var(--sl-spacing-" + props.paddingText + ")",
74
+ alignSelf: "center",
75
+ boxSizing: "border-box",
76
+ "@media (max-width: 599px)": {
77
+ width: "100%",
78
+ textAlign: "center",
79
+ padding: "calc(0.5*var(--sl-spacing-" + props.paddingText + "))",
80
+ },
81
+ },
82
+ "@media (max-width: 599px)": {
83
+ flexDirection: props.imageMobilePos === "bottom" ? "column-reverse" : "column",
84
+ },
85
+ },
86
+ Header: {
87
+ fontSize: "var(--sl-font-size-xxx-large)",
88
+ fontWeight: "var(--sl-font-weight-bold)",
89
+ "@media (max-width: 599px)": {
90
+ fontSize: "var(--sl-font-size-xx-large)",
91
+ },
92
+ },
93
+ Description: {
94
+ fontSize: "var(--sl-font-size-x-large)",
95
+ margin: "var(--sl-spacing-small) 0",
96
+ "@media (max-width: 599px)": {
97
+ fontSize: "var(--sl-font-size-large)",
98
+ },
99
+ },
100
+ Button: {
101
+ marginTop: "var(--sl-spacing-medium)",
102
+ "&::part(base)": {
103
+ padding: "0 var(--sl-spacing-x-large)",
104
+ color: "var(--sqm-primary-button-color)",
105
+ backgroundColor: "var(--sqm-primary-button-background)",
106
+ border: "var(--sqm-primary-button-color-border)",
107
+ },
108
+ "@media (max-width: 599px)": {
109
+ width: "100%",
110
+ },
111
+ },
112
+ };
113
+ const sheet = JSS.createStyleSheet(style);
114
+ const styleString = sheet.toString();
115
+ const vanillaStyle = `
116
+ :host{
117
+ display: block;
118
+ }`;
119
+ return (index.h("div", { class: sheet.classes.Container, part: "sqm-base" }, index.h("style", { type: "text/css" }, vanillaStyle, styleString), props.layout === "overlay" && OverlayView(), props.layout === "columns" && ColumnView()));
120
+ function OverlayView() {
121
+ return (index.h("div", { class: sheet.classes.Background }, index.h("div", { class: sheet.classes.Overlay, part: "sqm-overlay" }, props.header && (index.h("div", { class: sheet.classes.Header }, props.header)), props.description && (index.h("div", { class: sheet.classes.Description }, props.description)), props.buttonText && (index.h("sl-button", { class: sheet.classes.Button, type: "primary", exportparts: `base: ${props.buttonType}button-base`, onClick: () => props.buttonNewTab
122
+ ? window.open(props.buttonLink)
123
+ : window.open(props.buttonLink, "_parent") }, props.buttonText)), children && children)));
124
+ }
125
+ function ColumnView() {
126
+ return (index.h("div", null, index.h("div", { class: sheet.classes.Column }, index.h("div", { class: "image-area" }, index.h("img", {
127
+ // @ts-ignore
128
+ fetchpriority: "high", class: sheet.classes.Image, src: props.imageUrl, part: "sqm-columns-image", style: { height: "200px", width: "200px" }
129
+ })), index.h("div", { class: "text-area", part: "sqm-columns-text-area" }, props.header && (index.h("div", { class: sheet.classes.Header, part: "sqm-columns-header" }, props.header)), props.description && (index.h("div", { class: sheet.classes.Description, part: "sqm-columns-description" }, props.description)), props.buttonText && (index.h("sl-button", { exportparts: "base: sqm-hero-image-button", class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
130
+ ? window.open(props.buttonLink)
131
+ : window.open(props.buttonLink, "_parent") }, props.buttonText))))));
132
+ }
133
+ }
134
+
135
+ const HeroImage = class {
136
+ constructor(hostRef) {
137
+ index.registerInstance(this, hostRef);
138
+ /**
139
+ * @uiName Overlay opacity
140
+ * @uiGroup Style
141
+ */
142
+ this.overlayOpacity = "0.75";
143
+ /**
144
+ * @uiName Image layout
145
+ * @uiType string
146
+ * @uiEnum ["overlay", "columns"]
147
+ * @uiEnumNames ["Overlay", "Two-column"]
148
+ * @uiGroup Style
149
+ */
150
+ this.layout = "overlay";
151
+ /**
152
+ * @uiName Image percentage
153
+ * @uiType number
154
+ * @uiGroup Style
155
+ */
156
+ this.imagePercentage = 50;
157
+ /**
158
+ * @uiName Image position
159
+ * @uiType string
160
+ * @uiEnum ["left", "center", "right"]
161
+ * @uiEnumNames ["Left", "Center", "Right"]
162
+ * @uiGroup Style
163
+ */
164
+ this.imagePos = "center";
165
+ /**
166
+ * @uiName Image mobile position
167
+ * @uiType string
168
+ * @uiEnum ["top", "bottom"]
169
+ * @uiEnumNames ["Top", "Bottom"]
170
+ * @uiGroup Style
171
+ */
172
+ this.imageMobilePos = "top";
173
+ /**
174
+ * @uiName Open link in new tab
175
+ * @default
176
+ */
177
+ this.buttonNewTab = false;
178
+ /**
179
+ * @uiName Text padding
180
+ * @uiType string
181
+ * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
182
+ * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
183
+ * @uiGroup Style
184
+ */
185
+ this.paddingText = "xxxx-large";
186
+ /**
187
+ * @uiName Image padding
188
+ * @uiType string
189
+ * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
190
+ * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
191
+ * @uiGroup Style
192
+ */
193
+ this.paddingImage = "none";
194
+ /**
195
+ * The type of the button that is used (primary or secondary).
196
+ * @uiName Button Type
197
+ * @uiType string
198
+ * @uiEnum ["primary", "secondary"]
199
+ * @uiEnumNames ["Primary", "Secondary"]
200
+ * @uiGroup Style
201
+ */
202
+ this.buttonType = "primary";
203
+ index.h$1(this);
204
+ }
205
+ disconnectedCallback() { }
206
+ render() {
207
+ return (index.h(HeroImageView, { key: 'fb5d09ef07802124af5cae8f0dbd043b74055184', ...utils.getProps(this) }, index.h("slot", { key: '8a2bc9b443967bf343dff20799e8ed03a8b11df3' })));
208
+ }
209
+ };
210
+
211
+ exports.sqm_hero_image = HeroImage;
212
+ //# sourceMappingURL=sqm-hero-image.entry.cjs.js.map
package/dist/cjs/sqm-hero-image.entry.cjs.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sqm-hero-image.entry.cjs.js","sources":["src/components/sqm-hero-image/sqm-hero-image-view.tsx","src/components/sqm-hero-image/sqm-hero-image.tsx"],"sourcesContent":["import { h, VNode } from \"@stencil/core\";\nimport { Spacing } from \"../../global/mixins\";\nimport { createStyleSheet } from \"../../styling/JSS\";\n\nexport interface HeroImageViewProps {\n layout: \"overlay\" | \"columns\";\n imageUrl: string;\n overlayColor?: string;\n overlayOpacity: string;\n textColor?: string;\n backgroundColor?: string;\n imagePercentage?: number;\n header?: string;\n description?: string;\n buttonText?: string;\n buttonLink?: string;\n buttonNewTab?: boolean;\n paddingText?: Spacing;\n paddingImage?: Spacing;\n imagePos: \"left\" | \"center\" | \"right\";\n imageMobilePos: \"top\" | \"bottom\";\n buttonType?: \"primary\" | \"secondary\";\n}\n\nexport function HeroImageView(props: HeroImageViewProps, children: VNode) {\n const overlay = Boolean(\n (props.header || props.description || props.buttonText) &&\n props.layout === \"overlay\"\n );\n\n // Dependent on props, not feasiable to move out\n const style = {\n Container: {\n position: \"relative\",\n \"&:before\": {\n content: overlay ? '\"\"' : \"\",\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n background: props.overlayColor || \"var(--sl-color-black)\",\n opacity: props.overlayOpacity,\n },\n },\n Image: {\n display: \"block\",\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n },\n Background: {\n backgroundImage: `url(${props.imageUrl})`,\n backgroundSize: \"cover\",\n backgroundPosition: props.imagePos || \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n Overlay: {\n zIndex: \"1\",\n padding:\n \"calc(var(--sl-spacing-\" +\n props.paddingText +\n \") + var(--sl-spacing-\" +\n props.paddingImage +\n \"))\",\n textAlign: \"center\",\n color: props.textColor || \"var(--sqm-text)\",\n lineHeight: \"var(--sl-line-height-dense)\",\n \"@media (max-width: 599px)\": {\n padding: \"var(--sl-spacing-\" + props.paddingText + \")\",\n },\n },\n Column: {\n display: \"flex\",\n background: props.backgroundColor || \"\",\n flexDirection: props.imagePos === \"right\" ? \"row-reverse\" : \"row\",\n lineHeight: \"var(--sl-line-height-dense)\",\n color: props.textColor || \"var(--sqm-text)\",\n \"& .image-area\": {\n width: props.imagePercentage ? props.imagePercentage + \"%\" : \"50%\",\n padding: \"var(--sl-spacing-\" + props.paddingImage + \")\",\n boxSizing: \"border-box\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n \"@media (max-width: 599px)\": {\n width: \"100%\",\n },\n },\n \"& .text-area\": {\n width: props.imagePercentage\n ? 100 - props.imagePercentage + \"%\"\n : \"50%\",\n padding: \"var(--sl-spacing-\" + props.paddingText + \")\",\n alignSelf: \"center\",\n boxSizing: \"border-box\",\n \"@media (max-width: 599px)\": {\n width: \"100%\",\n textAlign: \"center\",\n padding: \"calc(0.5*var(--sl-spacing-\" + props.paddingText + \"))\",\n },\n },\n \"@media (max-width: 599px)\": {\n flexDirection:\n props.imageMobilePos === \"bottom\" ? \"column-reverse\" : \"column\",\n },\n },\n Header: {\n fontSize: \"var(--sl-font-size-xxx-large)\",\n fontWeight: \"var(--sl-font-weight-bold)\",\n \"@media (max-width: 599px)\": {\n fontSize: \"var(--sl-font-size-xx-large)\",\n },\n },\n Description: {\n fontSize: \"var(--sl-font-size-x-large)\",\n margin: \"var(--sl-spacing-small) 0\",\n \"@media (max-width: 599px)\": {\n fontSize: \"var(--sl-font-size-large)\",\n },\n },\n Button: {\n marginTop: \"var(--sl-spacing-medium)\",\n \"&::part(base)\": {\n padding: \"0 var(--sl-spacing-x-large)\",\n color: \"var(--sqm-primary-button-color)\",\n backgroundColor: \"var(--sqm-primary-button-background)\",\n border: \"var(--sqm-primary-button-color-border)\",\n },\n \"@media (max-width: 599px)\": {\n width: \"100%\",\n },\n },\n };\n\n const sheet = createStyleSheet(style);\n const styleString = sheet.toString();\n\n const vanillaStyle = `\n :host{\n display: block;\n }`;\n\n return (\n <div class={sheet.classes.Container} part=\"sqm-base\">\n <style type=\"text/css\">\n {vanillaStyle}\n {styleString}\n </style>\n\n {props.layout === \"overlay\" && OverlayView()}\n {props.layout === \"columns\" && ColumnView()}\n </div>\n );\n\n function OverlayView() {\n return (\n <div class={sheet.classes.Background}>\n <div class={sheet.classes.Overlay} part=\"sqm-overlay\">\n {props.header && (\n <div class={sheet.classes.Header}>{props.header}</div>\n )}\n {props.description && (\n <div class={sheet.classes.Description}>{props.description}</div>\n )}\n {props.buttonText && (\n <sl-button\n class={sheet.classes.Button}\n type=\"primary\"\n exportparts={`base: ${props.buttonType}button-base`}\n onClick={() =>\n props.buttonNewTab\n ? window.open(props.buttonLink)\n : window.open(props.buttonLink, \"_parent\")\n }\n >\n {props.buttonText}\n </sl-button>\n )}\n {children && children}\n </div>\n </div>\n );\n }\n\n function ColumnView() {\n return (\n <div>\n <div class={sheet.classes.Column}>\n <div class=\"image-area\">\n <img\n // @ts-ignore\n fetchpriority=\"high\"\n class={sheet.classes.Image}\n src={props.imageUrl}\n part=\"sqm-columns-image\"\n style={{ height: \"200px\", width: \"200px\" }}\n ></img>\n </div>\n <div class=\"text-area\" part=\"sqm-columns-text-area\">\n {props.header && (\n <div class={sheet.classes.Header} part=\"sqm-columns-header\">\n {props.header}\n </div>\n )}\n {props.description && (\n <div\n class={sheet.classes.Description}\n part=\"sqm-columns-description\"\n >\n {props.description}\n </div>\n )}\n {props.buttonText && (\n <sl-button\n exportparts=\"base: sqm-hero-image-button\"\n class={sheet.classes.Button}\n type=\"primary\"\n onClick={() =>\n props.buttonNewTab\n ? window.open(props.buttonLink)\n : window.open(props.buttonLink, \"_parent\")\n }\n >\n {props.buttonText}\n </sl-button>\n )}\n </div>\n </div>\n </div>\n );\n }\n}\n","import { withHooks } from \"@saasquatch/stencil-hooks\";\nimport { Component, h, Prop } from \"@stencil/core\";\nimport { Spacing } from \"../../global/mixins\";\nimport { getProps } from \"../../utils/utils\";\nimport { HeroImageView } from \"./sqm-hero-image-view\";\n\n/**\n * @uiName Hero Image\n * @validParents [\"sqm-portal-container\",\"sqm-brand\", \"div\"]\n * @exampleGroup Common Components\n * @example Two Column Hero Image - <sqm-hero-image image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\" header=\"MyCompany Rewards\" description=\"Refer a friend and earn up to $1200 in rewards\" layout=\"columns\" image-pos=\"right\"></sqm-hero-image>\n * @example Overlay Hero Image - <sqm-hero-image image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\" header=\"MyCompany Rewards\" description=\"Refer a friend and earn up to $1200 in rewards\" layout=\"overlay\" image-pos=\"center\" button-link=\"https://www.example.com\" button-new-tab button-text=\"Earn!\" image-percentage=\"45\" overlay-opacity=\".5\" padding-image=\"small\" padding-text=\"xxxx-large\"></sqm-hero-image>\n */\n@Component({\n tag: \"sqm-hero-image\",\n shadow: true,\n})\nexport class HeroImage {\n /**\n * @uiWidget ImageUpload\n * @format url\n * @uiName Image\n */\n @Prop() imageUrl: string;\n\n /**\n * @uiName Overlay color\n * @uiWidget color\n * @format color\n * @uiGroup Style\n */\n @Prop() overlayColor?: string;\n\n /**\n * @uiName Overlay opacity\n * @uiGroup Style\n */\n @Prop() overlayOpacity: string = \"0.75\";\n\n /**\n * @uiName Text color\n * @uiWidget color\n * @format color\n * @uiGroup Style\n */\n @Prop() textColor?: string;\n\n /**\n * @uiName Background color\n * @uiWidget color\n * @format color\n * @uiGroup Style\n */\n @Prop() backgroundColor?: string;\n\n /**\n * @uiName Image layout\n * @uiType string\n * @uiEnum [\"overlay\", \"columns\"]\n * @uiEnumNames [\"Overlay\", \"Two-column\"]\n * @uiGroup Style\n */\n @Prop() layout: \"overlay\" | \"columns\" = \"overlay\";\n\n /**\n * @uiName Image percentage\n * @uiType number\n * @uiGroup Style\n */\n @Prop() imagePercentage: number = 50;\n\n /**\n * @uiName Image position\n * @uiType string\n * @uiEnum [\"left\", \"center\", \"right\"]\n * @uiEnumNames [\"Left\", \"Center\", \"Right\"]\n * @uiGroup Style\n */\n @Prop() imagePos: \"left\" | \"center\" | \"right\" = \"center\";\n\n /**\n * @uiName Image mobile position\n * @uiType string\n * @uiEnum [\"top\", \"bottom\"]\n * @uiEnumNames [\"Top\", \"Bottom\"]\n * @uiGroup Style\n */\n @Prop() imageMobilePos: \"top\" | \"bottom\" = \"top\";\n\n /**\n * @uiName Title\n */\n @Prop() header?: string;\n\n /**\n * @uiName Description\n * @uiWidget textArea\n */\n @Prop() description?: string;\n\n /**\n * @uiName Button text\n */\n @Prop() buttonText?: string;\n\n /**\n * @uiName Button link\n */\n @Prop() buttonLink?: string;\n\n /**\n * @uiName Open link in new tab\n * @default\n */\n @Prop() buttonNewTab?: boolean = false;\n\n /**\n * @uiName Text padding\n * @uiType string\n * @uiEnum [\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]\n * @uiEnumNames [\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]\n * @uiGroup Style\n */\n @Prop() paddingText: Spacing = \"xxxx-large\";\n\n /**\n * @uiName Image padding\n * @uiType string\n * @uiEnum [\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]\n * @uiEnumNames [\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]\n * @uiGroup Style\n */\n @Prop() paddingImage: Spacing = \"none\";\n\n /**\n * The type of the button that is used (primary or secondary).\n * @uiName Button Type\n * @uiType string\n * @uiEnum [\"primary\", \"secondary\"]\n * @uiEnumNames [\"Primary\", \"Secondary\"]\n * @uiGroup Style\n */\n @Prop()\n buttonType?: \"primary\" | \"secondary\" = \"primary\";\n\n constructor() {\n withHooks(this);\n }\n disconnectedCallback() {}\n\n render() {\n return (\n <HeroImageView {...getProps(this)}>\n <slot />\n </HeroImageView>\n );\n }\n}\n"],"names":["createStyleSheet","h","withHooks","getProps"],"mappings":";;;;;;;AAwBgB,SAAA,aAAa,CAAC,KAAyB,EAAE,QAAe,EAAA;AACtE,IAAA,MAAM,OAAO,GAAG,OAAO,CACrB,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,UAAU;AACpD,QAAA,KAAK,CAAC,MAAM,KAAK,SAAS,CAC7B;;AAGD,IAAA,MAAM,KAAK,GAAG;AACZ,QAAA,SAAS,EAAE;AACT,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,UAAU,EAAE;gBACV,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,EAAE;AAC5B,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,UAAU,EAAE,KAAK,CAAC,YAAY,IAAI,uBAAuB;gBACzD,OAAO,EAAE,KAAK,CAAC,cAAc;AAC9B,aAAA;AACF,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,OAAO;AAChB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,SAAS,EAAE,OAAO;AACnB,SAAA;AACD,QAAA,UAAU,EAAE;AACV,YAAA,eAAe,EAAE,CAAA,IAAA,EAAO,KAAK,CAAC,QAAQ,CAAG,CAAA,CAAA;AACzC,YAAA,cAAc,EAAE,OAAO;AACvB,YAAA,kBAAkB,EAAE,KAAK,CAAC,QAAQ,IAAI,QAAQ;AAC9C,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,QAAQ;AACxB,YAAA,UAAU,EAAE,QAAQ;AACrB,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,MAAM,EAAE,GAAG;AACX,YAAA,OAAO,EACL,wBAAwB;AACxB,gBAAA,KAAK,CAAC,WAAW;gBACjB,uBAAuB;AACvB,gBAAA,KAAK,CAAC,YAAY;gBAClB,IAAI;AACN,YAAA,SAAS,EAAE,QAAQ;AACnB,YAAA,KAAK,EAAE,KAAK,CAAC,SAAS,IAAI,iBAAiB;AAC3C,YAAA,UAAU,EAAE,6BAA6B;AACzC,YAAA,2BAA2B,EAAE;AAC3B,gBAAA,OAAO,EAAE,mBAAmB,GAAG,KAAK,CAAC,WAAW,GAAG,GAAG;AACvD,aAAA;AACF,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,KAAK,CAAC,eAAe,IAAI,EAAE;AACvC,YAAA,aAAa,EAAE,KAAK,CAAC,QAAQ,KAAK,OAAO,GAAG,aAAa,GAAG,KAAK;AACjE,YAAA,UAAU,EAAE,6BAA6B;AACzC,YAAA,KAAK,EAAE,KAAK,CAAC,SAAS,IAAI,iBAAiB;AAC3C,YAAA,eAAe,EAAE;AACf,gBAAA,KAAK,EAAE,KAAK,CAAC,eAAe,GAAG,KAAK,CAAC,eAAe,GAAG,GAAG,GAAG,KAAK;AAClE,gBAAA,OAAO,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,GAAG,GAAG;AACvD,gBAAA,SAAS,EAAE,YAAY;AACvB,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,2BAA2B,EAAE;AAC3B,oBAAA,KAAK,EAAE,MAAM;AACd,iBAAA;AACF,aAAA;AACD,YAAA,cAAc,EAAE;gBACd,KAAK,EAAE,KAAK,CAAC;AACX,sBAAE,GAAG,GAAG,KAAK,CAAC,eAAe,GAAG;AAChC,sBAAE,KAAK;AACT,gBAAA,OAAO,EAAE,mBAAmB,GAAG,KAAK,CAAC,WAAW,GAAG,GAAG;AACtD,gBAAA,SAAS,EAAE,QAAQ;AACnB,gBAAA,SAAS,EAAE,YAAY;AACvB,gBAAA,2BAA2B,EAAE;AAC3B,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,SAAS,EAAE,QAAQ;AACnB,oBAAA,OAAO,EAAE,4BAA4B,GAAG,KAAK,CAAC,WAAW,GAAG,IAAI;AACjE,iBAAA;AACF,aAAA;AACD,YAAA,2BAA2B,EAAE;AAC3B,gBAAA,aAAa,EACX,KAAK,CAAC,cAAc,KAAK,QAAQ,GAAG,gBAAgB,GAAG,QAAQ;AAClE,aAAA;AACF,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,QAAQ,EAAE,+BAA+B;AACzC,YAAA,UAAU,EAAE,4BAA4B;AACxC,YAAA,2BAA2B,EAAE;AAC3B,gBAAA,QAAQ,EAAE,8BAA8B;AACzC,aAAA;AACF,SAAA;AACD,QAAA,WAAW,EAAE;AACX,YAAA,QAAQ,EAAE,6BAA6B;AACvC,YAAA,MAAM,EAAE,2BAA2B;AACnC,YAAA,2BAA2B,EAAE;AAC3B,gBAAA,QAAQ,EAAE,2BAA2B;AACtC,aAAA;AACF,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,SAAS,EAAE,0BAA0B;AACrC,YAAA,eAAe,EAAE;AACf,gBAAA,OAAO,EAAE,6BAA6B;AACtC,gBAAA,KAAK,EAAE,iCAAiC;AACxC,gBAAA,eAAe,EAAE,sCAAsC;AACvD,gBAAA,MAAM,EAAE,wCAAwC;AACjD,aAAA;AACD,YAAA,2BAA2B,EAAE;AAC3B,gBAAA,KAAK,EAAE,MAAM;AACd,aAAA;AACF,SAAA;KACF;AAED,IAAA,MAAM,KAAK,GAAGA,oBAAgB,CAAC,KAAK,CAAC;AACrC,IAAA,MAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,EAAE;AAEpC,IAAA,MAAM,YAAY,GAAG;;;IAGnB;IAEF,QACEC,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,EAAC,UAAU,EAAA,EAClDA,OAAO,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnB,YAAY,EACZ,WAAW,CACN,EAEP,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,WAAW,EAAE,EAC3C,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,UAAU,EAAE,CACvC;AAGR,IAAA,SAAS,WAAW,GAAA;QAClB,QACEA,iBAAK,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,EAAA,EAClCA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,EAAC,aAAa,EAAA,EAClD,KAAK,CAAC,MAAM,KACXA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,EAAA,EAAG,KAAK,CAAC,MAAM,CAAO,CACvD,EACA,KAAK,CAAC,WAAW,KAChBA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW,EAAA,EAAG,KAAK,CAAC,WAAW,CAAO,CACjE,EACA,KAAK,CAAC,UAAU,KACfA,uBACE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,EAC3B,IAAI,EAAC,SAAS,EACd,WAAW,EAAE,CAAA,MAAA,EAAS,KAAK,CAAC,UAAU,CAAA,WAAA,CAAa,EACnD,OAAO,EAAE,MACP,KAAK,CAAC;kBACF,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;kBAC5B,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,SAAS,CAAC,EAG7C,EAAA,KAAK,CAAC,UAAU,CACP,CACb,EACA,QAAQ,IAAI,QAAQ,CACjB,CACF;;AAIV,IAAA,SAAS,UAAU,GAAA;AACjB,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,IAAA,EACEA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,EAAA,EAC9BA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,KAAA,EAAA;;AAEE,YAAA,aAAa,EAAC,MAAM,EACpB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAC1B,GAAG,EAAE,KAAK,CAAC,QAAQ,EACnB,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO;UACnC,CACH,EACNA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,uBAAuB,EAAA,EAChD,KAAK,CAAC,MAAM,KACXA,iBAAK,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,EAAC,oBAAoB,IACxD,KAAK,CAAC,MAAM,CACT,CACP,EACA,KAAK,CAAC,WAAW,KAChBA,iBACE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW,EAChC,IAAI,EAAC,yBAAyB,IAE7B,KAAK,CAAC,WAAW,CACd,CACP,EACA,KAAK,CAAC,UAAU,KACfA,OACE,CAAA,WAAA,EAAA,EAAA,WAAW,EAAC,6BAA6B,EACzC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,EAC3B,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,MACP,KAAK,CAAC;kBACF,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;kBAC5B,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,SAAS,CAAC,EAG7C,EAAA,KAAK,CAAC,UAAU,CACP,CACb,CACG,CACF,CACF;;AAGZ;;MCvNa,SAAS,GAAA,MAAA;AAgIpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAhHA;;;AAGG;AACK,QAAA,IAAc,CAAA,cAAA,GAAW,MAAM;AAkBvC;;;;;;AAMG;AACK,QAAA,IAAM,CAAA,MAAA,GAA0B,SAAS;AAEjD;;;;AAIG;AACK,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;AAEpC;;;;;;AAMG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAgC,QAAQ;AAExD;;;;;;AAMG;AACK,QAAA,IAAc,CAAA,cAAA,GAAqB,KAAK;AAuBhD;;;AAGG;AACK,QAAA,IAAY,CAAA,YAAA,GAAa,KAAK;AAEtC;;;;;;AAMG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,YAAY;AAE3C;;;;;;AAMG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,MAAM;AAEtC;;;;;;;AAOG;AAEH,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;QAG9CC,SAAS,CAAC,IAAI,CAAC;AAChB;AACD,IAAA,oBAAoB;IAEpB,MAAM,GAAA;AACJ,QAAA,QACED,OAAC,CAAA,aAAa,wDAAKE,cAAQ,CAAC,IAAI,CAAC,EAAA,EAC/BF,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACM;;;;;;"}
package/dist/collection/components/sqm-hero-image/sqm-hero-image-view.js CHANGED
@@ -118,7 +118,10 @@ export function HeroImageView(props, children) {
118
118
  : window.open(props.buttonLink, "_parent") }, props.buttonText)), children && children)));
119
119
  }
120
120
  function ColumnView() {
121
- return (h("div", null, h("div", { class: sheet.classes.Column }, h("div", { class: "image-area" }, h("img", { loading: "lazy", class: sheet.classes.Image, src: props.imageUrl, part: "sqm-columns-image" })), h("div", { class: "text-area", part: "sqm-columns-text-area" }, props.header && (h("div", { class: sheet.classes.Header, part: "sqm-columns-header" }, props.header)), props.description && (h("div", { class: sheet.classes.Description, part: "sqm-columns-description" }, props.description)), props.buttonText && (h("sl-button", { exportparts: "base: sqm-hero-image-button", class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
121
+ return (h("div", null, h("div", { class: sheet.classes.Column }, h("div", { class: "image-area" }, h("img", {
122
+ // @ts-ignore
123
+ fetchpriority: "high", class: sheet.classes.Image, src: props.imageUrl, part: "sqm-columns-image", style: { height: "200px", width: "200px" }
124
+ })), h("div", { class: "text-area", part: "sqm-columns-text-area" }, props.header && (h("div", { class: sheet.classes.Header, part: "sqm-columns-header" }, props.header)), props.description && (h("div", { class: sheet.classes.Description, part: "sqm-columns-description" }, props.description)), props.buttonText && (h("sl-button", { exportparts: "base: sqm-hero-image-button", class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
122
125
  ? window.open(props.buttonLink)
123
126
  : window.open(props.buttonLink, "_parent") }, props.buttonText))))));
124
127
  }
package/dist/collection/components/sqm-hero-image/sqm-hero-image-view.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sqm-hero-image-view.js","sourceRoot":"","sources":["../../../src/components/sqm-hero-image/sqm-hero-image-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, VNode } from \"@stencil/core\";\nimport { Spacing } from \"../../global/mixins\";\nimport { createStyleSheet } from \"../../styling/JSS\";\n\nexport interface HeroImageViewProps {\n layout: \"overlay\" | \"columns\";\n imageUrl: string;\n overlayColor?: string;\n overlayOpacity: string;\n textColor?: string;\n backgroundColor?: string;\n imagePercentage?: number;\n header?: string;\n description?: string;\n buttonText?: string;\n buttonLink?: string;\n buttonNewTab?: boolean;\n paddingText?: Spacing;\n paddingImage?: Spacing;\n imagePos: \"left\" | \"center\" | \"right\";\n imageMobilePos: \"top\" | \"bottom\";\n buttonType?: \"primary\" | \"secondary\";\n}\n\nexport function HeroImageView(props: HeroImageViewProps, children: VNode) {\n const overlay = Boolean(\n (props.header || props.description || props.buttonText) &&\n props.layout === \"overlay\"\n );\n\n // Dependent on props, not feasiable to move out\n const style = {\n Container: {\n position: \"relative\",\n \"&:before\": {\n content: overlay ? '\"\"' : \"\",\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n background: props.overlayColor || \"var(--sl-color-black)\",\n opacity: props.overlayOpacity,\n },\n },\n Image: {\n display: \"block\",\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n },\n Background: {\n backgroundImage: `url(${props.imageUrl})`,\n backgroundSize: \"cover\",\n backgroundPosition: props.imagePos || \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n Overlay: {\n zIndex: \"1\",\n padding:\n \"calc(var(--sl-spacing-\" +\n props.paddingText +\n \") + var(--sl-spacing-\" +\n props.paddingImage +\n \"))\",\n textAlign: \"center\",\n color: props.textColor || \"var(--sqm-text)\",\n lineHeight: \"var(--sl-line-height-dense)\",\n \"@media (max-width: 599px)\": {\n padding: \"var(--sl-spacing-\" + props.paddingText + \")\",\n },\n },\n Column: {\n display: \"flex\",\n background: props.backgroundColor || \"\",\n flexDirection: props.imagePos === \"right\" ? \"row-reverse\" : \"row\",\n lineHeight: \"var(--sl-line-height-dense)\",\n color: props.textColor || \"var(--sqm-text)\",\n \"& .image-area\": {\n width: props.imagePercentage ? props.imagePercentage + \"%\" : \"50%\",\n padding: \"var(--sl-spacing-\" + props.paddingImage + \")\",\n boxSizing: \"border-box\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n \"@media (max-width: 599px)\": {\n width: \"100%\",\n },\n },\n \"& .text-area\": {\n width: props.imagePercentage\n ? 100 - props.imagePercentage + \"%\"\n : \"50%\",\n padding: \"var(--sl-spacing-\" + props.paddingText + \")\",\n alignSelf: \"center\",\n boxSizing: \"border-box\",\n \"@media (max-width: 599px)\": {\n width: \"100%\",\n textAlign: \"center\",\n padding: \"calc(0.5*var(--sl-spacing-\" + props.paddingText + \"))\",\n },\n },\n \"@media (max-width: 599px)\": {\n flexDirection:\n props.imageMobilePos === \"bottom\" ? \"column-reverse\" : \"column\",\n },\n },\n Header: {\n fontSize: \"var(--sl-font-size-xxx-large)\",\n fontWeight: \"var(--sl-font-weight-bold)\",\n \"@media (max-width: 599px)\": {\n fontSize: \"var(--sl-font-size-xx-large)\",\n },\n },\n Description: {\n fontSize: \"var(--sl-font-size-x-large)\",\n margin: \"var(--sl-spacing-small) 0\",\n \"@media (max-width: 599px)\": {\n fontSize: \"var(--sl-font-size-large)\",\n },\n },\n Button: {\n marginTop: \"var(--sl-spacing-medium)\",\n \"&::part(base)\": {\n padding: \"0 var(--sl-spacing-x-large)\",\n color: \"var(--sqm-primary-button-color)\",\n backgroundColor: \"var(--sqm-primary-button-background)\",\n border: \"var(--sqm-primary-button-color-border)\",\n },\n \"@media (max-width: 599px)\": {\n width: \"100%\",\n },\n },\n };\n\n const sheet = createStyleSheet(style);\n const styleString = sheet.toString();\n\n const vanillaStyle = `\n :host{\n display: block;\n }`;\n\n return (\n <div class={sheet.classes.Container} part=\"sqm-base\">\n <style type=\"text/css\">\n {vanillaStyle}\n {styleString}\n </style>\n\n {props.layout === \"overlay\" && OverlayView()}\n {props.layout === \"columns\" && ColumnView()}\n </div>\n );\n\n function OverlayView() {\n return (\n <div class={sheet.classes.Background}>\n <div class={sheet.classes.Overlay} part=\"sqm-overlay\">\n {props.header && (\n <div class={sheet.classes.Header}>{props.header}</div>\n )}\n {props.description && (\n <div class={sheet.classes.Description}>{props.description}</div>\n )}\n {props.buttonText && (\n <sl-button\n class={sheet.classes.Button}\n type=\"primary\"\n exportparts={`base: ${props.buttonType}button-base`}\n onClick={() =>\n props.buttonNewTab\n ? window.open(props.buttonLink)\n : window.open(props.buttonLink, \"_parent\")\n }\n >\n {props.buttonText}\n </sl-button>\n )}\n {children && children}\n </div>\n </div>\n );\n }\n\n function ColumnView() {\n return (\n <div>\n <div class={sheet.classes.Column}>\n <div class=\"image-area\">\n <img\n loading=\"lazy\"\n class={sheet.classes.Image}\n src={props.imageUrl}\n part=\"sqm-columns-image\"\n ></img>\n </div>\n <div class=\"text-area\" part=\"sqm-columns-text-area\">\n {props.header && (\n <div class={sheet.classes.Header} part=\"sqm-columns-header\">\n {props.header}\n </div>\n )}\n {props.description && (\n <div\n class={sheet.classes.Description}\n part=\"sqm-columns-description\"\n >\n {props.description}\n </div>\n )}\n {props.buttonText && (\n <sl-button\n exportparts=\"base: sqm-hero-image-button\"\n class={sheet.classes.Button}\n type=\"primary\"\n onClick={() =>\n props.buttonNewTab\n ? window.open(props.buttonLink)\n : window.open(props.buttonLink, \"_parent\")\n }\n >\n {props.buttonText}\n </sl-button>\n )}\n </div>\n </div>\n </div>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"sqm-hero-image-view.js","sourceRoot":"","sources":["../../../src/components/sqm-hero-image/sqm-hero-image-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, VNode } from \"@stencil/core\";\nimport { Spacing } from \"../../global/mixins\";\nimport { createStyleSheet } from \"../../styling/JSS\";\n\nexport interface HeroImageViewProps {\n layout: \"overlay\" | \"columns\";\n imageUrl: string;\n overlayColor?: string;\n overlayOpacity: string;\n textColor?: string;\n backgroundColor?: string;\n imagePercentage?: number;\n header?: string;\n description?: string;\n buttonText?: string;\n buttonLink?: string;\n buttonNewTab?: boolean;\n paddingText?: Spacing;\n paddingImage?: Spacing;\n imagePos: \"left\" | \"center\" | \"right\";\n imageMobilePos: \"top\" | \"bottom\";\n buttonType?: \"primary\" | \"secondary\";\n}\n\nexport function HeroImageView(props: HeroImageViewProps, children: VNode) {\n const overlay = Boolean(\n (props.header || props.description || props.buttonText) &&\n props.layout === \"overlay\"\n );\n\n // Dependent on props, not feasiable to move out\n const style = {\n Container: {\n position: \"relative\",\n \"&:before\": {\n content: overlay ? '\"\"' : \"\",\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n background: props.overlayColor || \"var(--sl-color-black)\",\n opacity: props.overlayOpacity,\n },\n },\n Image: {\n display: \"block\",\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n },\n Background: {\n backgroundImage: `url(${props.imageUrl})`,\n backgroundSize: \"cover\",\n backgroundPosition: props.imagePos || \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n Overlay: {\n zIndex: \"1\",\n padding:\n \"calc(var(--sl-spacing-\" +\n props.paddingText +\n \") + var(--sl-spacing-\" +\n props.paddingImage +\n \"))\",\n textAlign: \"center\",\n color: props.textColor || \"var(--sqm-text)\",\n lineHeight: \"var(--sl-line-height-dense)\",\n \"@media (max-width: 599px)\": {\n padding: \"var(--sl-spacing-\" + props.paddingText + \")\",\n },\n },\n Column: {\n display: \"flex\",\n background: props.backgroundColor || \"\",\n flexDirection: props.imagePos === \"right\" ? \"row-reverse\" : \"row\",\n lineHeight: \"var(--sl-line-height-dense)\",\n color: props.textColor || \"var(--sqm-text)\",\n \"& .image-area\": {\n width: props.imagePercentage ? props.imagePercentage + \"%\" : \"50%\",\n padding: \"var(--sl-spacing-\" + props.paddingImage + \")\",\n boxSizing: \"border-box\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n \"@media (max-width: 599px)\": {\n width: \"100%\",\n },\n },\n \"& .text-area\": {\n width: props.imagePercentage\n ? 100 - props.imagePercentage + \"%\"\n : \"50%\",\n padding: \"var(--sl-spacing-\" + props.paddingText + \")\",\n alignSelf: \"center\",\n boxSizing: \"border-box\",\n \"@media (max-width: 599px)\": {\n width: \"100%\",\n textAlign: \"center\",\n padding: \"calc(0.5*var(--sl-spacing-\" + props.paddingText + \"))\",\n },\n },\n \"@media (max-width: 599px)\": {\n flexDirection:\n props.imageMobilePos === \"bottom\" ? \"column-reverse\" : \"column\",\n },\n },\n Header: {\n fontSize: \"var(--sl-font-size-xxx-large)\",\n fontWeight: \"var(--sl-font-weight-bold)\",\n \"@media (max-width: 599px)\": {\n fontSize: \"var(--sl-font-size-xx-large)\",\n },\n },\n Description: {\n fontSize: \"var(--sl-font-size-x-large)\",\n margin: \"var(--sl-spacing-small) 0\",\n \"@media (max-width: 599px)\": {\n fontSize: \"var(--sl-font-size-large)\",\n },\n },\n Button: {\n marginTop: \"var(--sl-spacing-medium)\",\n \"&::part(base)\": {\n padding: \"0 var(--sl-spacing-x-large)\",\n color: \"var(--sqm-primary-button-color)\",\n backgroundColor: \"var(--sqm-primary-button-background)\",\n border: \"var(--sqm-primary-button-color-border)\",\n },\n \"@media (max-width: 599px)\": {\n width: \"100%\",\n },\n },\n };\n\n const sheet = createStyleSheet(style);\n const styleString = sheet.toString();\n\n const vanillaStyle = `\n :host{\n display: block;\n }`;\n\n return (\n <div class={sheet.classes.Container} part=\"sqm-base\">\n <style type=\"text/css\">\n {vanillaStyle}\n {styleString}\n </style>\n\n {props.layout === \"overlay\" && OverlayView()}\n {props.layout === \"columns\" && ColumnView()}\n </div>\n );\n\n function OverlayView() {\n return (\n <div class={sheet.classes.Background}>\n <div class={sheet.classes.Overlay} part=\"sqm-overlay\">\n {props.header && (\n <div class={sheet.classes.Header}>{props.header}</div>\n )}\n {props.description && (\n <div class={sheet.classes.Description}>{props.description}</div>\n )}\n {props.buttonText && (\n <sl-button\n class={sheet.classes.Button}\n type=\"primary\"\n exportparts={`base: ${props.buttonType}button-base`}\n onClick={() =>\n props.buttonNewTab\n ? window.open(props.buttonLink)\n : window.open(props.buttonLink, \"_parent\")\n }\n >\n {props.buttonText}\n </sl-button>\n )}\n {children && children}\n </div>\n </div>\n );\n }\n\n function ColumnView() {\n return (\n <div>\n <div class={sheet.classes.Column}>\n <div class=\"image-area\">\n <img\n // @ts-ignore\n fetchpriority=\"high\"\n class={sheet.classes.Image}\n src={props.imageUrl}\n part=\"sqm-columns-image\"\n style={{ height: \"200px\", width: \"200px\" }}\n ></img>\n </div>\n <div class=\"text-area\" part=\"sqm-columns-text-area\">\n {props.header && (\n <div class={sheet.classes.Header} part=\"sqm-columns-header\">\n {props.header}\n </div>\n )}\n {props.description && (\n <div\n class={sheet.classes.Description}\n part=\"sqm-columns-description\"\n >\n {props.description}\n </div>\n )}\n {props.buttonText && (\n <sl-button\n exportparts=\"base: sqm-hero-image-button\"\n class={sheet.classes.Button}\n type=\"primary\"\n onClick={() =>\n props.buttonNewTab\n ? window.open(props.buttonLink)\n : window.open(props.buttonLink, \"_parent\")\n }\n >\n {props.buttonText}\n </sl-button>\n )}\n </div>\n </div>\n </div>\n );\n }\n}\n"]}
package/dist/esm/sqm-big-stat_47.entry.js CHANGED
@@ -1720,7 +1720,10 @@ function HeroImageView(props, children) {
1720
1720
  : window.open(props.buttonLink, "_parent") }, props.buttonText)), children && children)));
1721
1721
  }
1722
1722
  function ColumnView() {
1723
- return (h$1("div", null, h$1("div", { class: sheet.classes.Column }, h$1("div", { class: "image-area" }, h$1("img", { loading: "lazy", class: sheet.classes.Image, src: props.imageUrl, part: "sqm-columns-image" })), h$1("div", { class: "text-area", part: "sqm-columns-text-area" }, props.header && (h$1("div", { class: sheet.classes.Header, part: "sqm-columns-header" }, props.header)), props.description && (h$1("div", { class: sheet.classes.Description, part: "sqm-columns-description" }, props.description)), props.buttonText && (h$1("sl-button", { exportparts: "base: sqm-hero-image-button", class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
1723
+ return (h$1("div", null, h$1("div", { class: sheet.classes.Column }, h$1("div", { class: "image-area" }, h$1("img", {
1724
+ // @ts-ignore
1725
+ fetchpriority: "high", class: sheet.classes.Image, src: props.imageUrl, part: "sqm-columns-image", style: { height: "200px", width: "200px" }
1726
+ })), h$1("div", { class: "text-area", part: "sqm-columns-text-area" }, props.header && (h$1("div", { class: sheet.classes.Header, part: "sqm-columns-header" }, props.header)), props.description && (h$1("div", { class: sheet.classes.Description, part: "sqm-columns-description" }, props.description)), props.buttonText && (h$1("sl-button", { exportparts: "base: sqm-hero-image-button", class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
1724
1727
  ? window.open(props.buttonLink)
1725
1728
  : window.open(props.buttonLink, "_parent") }, props.buttonText))))));
1726
1729
  }
package/dist/esm/sqm-hero-image.entry.js ADDED
@@ -0,0 +1,210 @@
1
+ import { h, r as registerInstance, d as h$1 } from './index-CqUnaVxC.js';
2
+ import { g as getProps } from './utils-Cx08yY-N.js';
3
+ import { c as createStyleSheet } from './JSS-CMrBrfsA.js';
4
+ import './jss-preset-default.esm-DtSWPJ7G.js';
5
+
6
+ function HeroImageView(props, children) {
7
+ const overlay = Boolean((props.header || props.description || props.buttonText) &&
8
+ props.layout === "overlay");
9
+ // Dependent on props, not feasiable to move out
10
+ const style = {
11
+ Container: {
12
+ position: "relative",
13
+ "&:before": {
14
+ content: overlay ? '""' : "",
15
+ width: "100%",
16
+ height: "100%",
17
+ position: "absolute",
18
+ background: props.overlayColor || "var(--sl-color-black)",
19
+ opacity: props.overlayOpacity,
20
+ },
21
+ },
22
+ Image: {
23
+ display: "block",
24
+ width: "100%",
25
+ height: "100%",
26
+ objectFit: "cover",
27
+ },
28
+ Background: {
29
+ backgroundImage: `url(${props.imageUrl})`,
30
+ backgroundSize: "cover",
31
+ backgroundPosition: props.imagePos || "center",
32
+ display: "flex",
33
+ justifyContent: "center",
34
+ alignItems: "center",
35
+ },
36
+ Overlay: {
37
+ zIndex: "1",
38
+ padding: "calc(var(--sl-spacing-" +
39
+ props.paddingText +
40
+ ") + var(--sl-spacing-" +
41
+ props.paddingImage +
42
+ "))",
43
+ textAlign: "center",
44
+ color: props.textColor || "var(--sqm-text)",
45
+ lineHeight: "var(--sl-line-height-dense)",
46
+ "@media (max-width: 599px)": {
47
+ padding: "var(--sl-spacing-" + props.paddingText + ")",
48
+ },
49
+ },
50
+ Column: {
51
+ display: "flex",
52
+ background: props.backgroundColor || "",
53
+ flexDirection: props.imagePos === "right" ? "row-reverse" : "row",
54
+ lineHeight: "var(--sl-line-height-dense)",
55
+ color: props.textColor || "var(--sqm-text)",
56
+ "& .image-area": {
57
+ width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
58
+ padding: "var(--sl-spacing-" + props.paddingImage + ")",
59
+ boxSizing: "border-box",
60
+ display: "flex",
61
+ justifyContent: "center",
62
+ alignItems: "center",
63
+ "@media (max-width: 599px)": {
64
+ width: "100%",
65
+ },
66
+ },
67
+ "& .text-area": {
68
+ width: props.imagePercentage
69
+ ? 100 - props.imagePercentage + "%"
70
+ : "50%",
71
+ padding: "var(--sl-spacing-" + props.paddingText + ")",
72
+ alignSelf: "center",
73
+ boxSizing: "border-box",
74
+ "@media (max-width: 599px)": {
75
+ width: "100%",
76
+ textAlign: "center",
77
+ padding: "calc(0.5*var(--sl-spacing-" + props.paddingText + "))",
78
+ },
79
+ },
80
+ "@media (max-width: 599px)": {
81
+ flexDirection: props.imageMobilePos === "bottom" ? "column-reverse" : "column",
82
+ },
83
+ },
84
+ Header: {
85
+ fontSize: "var(--sl-font-size-xxx-large)",
86
+ fontWeight: "var(--sl-font-weight-bold)",
87
+ "@media (max-width: 599px)": {
88
+ fontSize: "var(--sl-font-size-xx-large)",
89
+ },
90
+ },
91
+ Description: {
92
+ fontSize: "var(--sl-font-size-x-large)",
93
+ margin: "var(--sl-spacing-small) 0",
94
+ "@media (max-width: 599px)": {
95
+ fontSize: "var(--sl-font-size-large)",
96
+ },
97
+ },
98
+ Button: {
99
+ marginTop: "var(--sl-spacing-medium)",
100
+ "&::part(base)": {
101
+ padding: "0 var(--sl-spacing-x-large)",
102
+ color: "var(--sqm-primary-button-color)",
103
+ backgroundColor: "var(--sqm-primary-button-background)",
104
+ border: "var(--sqm-primary-button-color-border)",
105
+ },
106
+ "@media (max-width: 599px)": {
107
+ width: "100%",
108
+ },
109
+ },
110
+ };
111
+ const sheet = createStyleSheet(style);
112
+ const styleString = sheet.toString();
113
+ const vanillaStyle = `
114
+ :host{
115
+ display: block;
116
+ }`;
117
+ return (h("div", { class: sheet.classes.Container, part: "sqm-base" }, h("style", { type: "text/css" }, vanillaStyle, styleString), props.layout === "overlay" && OverlayView(), props.layout === "columns" && ColumnView()));
118
+ function OverlayView() {
119
+ return (h("div", { class: sheet.classes.Background }, h("div", { class: sheet.classes.Overlay, part: "sqm-overlay" }, props.header && (h("div", { class: sheet.classes.Header }, props.header)), props.description && (h("div", { class: sheet.classes.Description }, props.description)), props.buttonText && (h("sl-button", { class: sheet.classes.Button, type: "primary", exportparts: `base: ${props.buttonType}button-base`, onClick: () => props.buttonNewTab
120
+ ? window.open(props.buttonLink)
121
+ : window.open(props.buttonLink, "_parent") }, props.buttonText)), children && children)));
122
+ }
123
+ function ColumnView() {
124
+ return (h("div", null, h("div", { class: sheet.classes.Column }, h("div", { class: "image-area" }, h("img", {
125
+ // @ts-ignore
126
+ fetchpriority: "high", class: sheet.classes.Image, src: props.imageUrl, part: "sqm-columns-image", style: { height: "200px", width: "200px" }
127
+ })), h("div", { class: "text-area", part: "sqm-columns-text-area" }, props.header && (h("div", { class: sheet.classes.Header, part: "sqm-columns-header" }, props.header)), props.description && (h("div", { class: sheet.classes.Description, part: "sqm-columns-description" }, props.description)), props.buttonText && (h("sl-button", { exportparts: "base: sqm-hero-image-button", class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
128
+ ? window.open(props.buttonLink)
129
+ : window.open(props.buttonLink, "_parent") }, props.buttonText))))));
130
+ }
131
+ }
132
+
133
+ const HeroImage = class {
134
+ constructor(hostRef) {
135
+ registerInstance(this, hostRef);
136
+ /**
137
+ * @uiName Overlay opacity
138
+ * @uiGroup Style
139
+ */
140
+ this.overlayOpacity = "0.75";
141
+ /**
142
+ * @uiName Image layout
143
+ * @uiType string
144
+ * @uiEnum ["overlay", "columns"]
145
+ * @uiEnumNames ["Overlay", "Two-column"]
146
+ * @uiGroup Style
147
+ */
148
+ this.layout = "overlay";
149
+ /**
150
+ * @uiName Image percentage
151
+ * @uiType number
152
+ * @uiGroup Style
153
+ */
154
+ this.imagePercentage = 50;
155
+ /**
156
+ * @uiName Image position
157
+ * @uiType string
158
+ * @uiEnum ["left", "center", "right"]
159
+ * @uiEnumNames ["Left", "Center", "Right"]
160
+ * @uiGroup Style
161
+ */
162
+ this.imagePos = "center";
163
+ /**
164
+ * @uiName Image mobile position
165
+ * @uiType string
166
+ * @uiEnum ["top", "bottom"]
167
+ * @uiEnumNames ["Top", "Bottom"]
168
+ * @uiGroup Style
169
+ */
170
+ this.imageMobilePos = "top";
171
+ /**
172
+ * @uiName Open link in new tab
173
+ * @default
174
+ */
175
+ this.buttonNewTab = false;
176
+ /**
177
+ * @uiName Text padding
178
+ * @uiType string
179
+ * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
180
+ * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
181
+ * @uiGroup Style
182
+ */
183
+ this.paddingText = "xxxx-large";
184
+ /**
185
+ * @uiName Image padding
186
+ * @uiType string
187
+ * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
188
+ * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
189
+ * @uiGroup Style
190
+ */
191
+ this.paddingImage = "none";
192
+ /**
193
+ * The type of the button that is used (primary or secondary).
194
+ * @uiName Button Type
195
+ * @uiType string
196
+ * @uiEnum ["primary", "secondary"]
197
+ * @uiEnumNames ["Primary", "Secondary"]
198
+ * @uiGroup Style
199
+ */
200
+ this.buttonType = "primary";
201
+ h$1(this);
202
+ }
203
+ disconnectedCallback() { }
204
+ render() {
205
+ return (h(HeroImageView, { key: 'fb5d09ef07802124af5cae8f0dbd043b74055184', ...getProps(this) }, h("slot", { key: '8a2bc9b443967bf343dff20799e8ed03a8b11df3' })));
206
+ }
207
+ };
208
+
209
+ export { HeroImage as sqm_hero_image };
210
+ //# sourceMappingURL=sqm-hero-image.entry.js.map
package/dist/esm/sqm-hero-image.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sqm-hero-image.entry.js","sources":["src/components/sqm-hero-image/sqm-hero-image-view.tsx","src/components/sqm-hero-image/sqm-hero-image.tsx"],"sourcesContent":["import { h, VNode } from \"@stencil/core\";\nimport { Spacing } from \"../../global/mixins\";\nimport { createStyleSheet } from \"../../styling/JSS\";\n\nexport interface HeroImageViewProps {\n layout: \"overlay\" | \"columns\";\n imageUrl: string;\n overlayColor?: string;\n overlayOpacity: string;\n textColor?: string;\n backgroundColor?: string;\n imagePercentage?: number;\n header?: string;\n description?: string;\n buttonText?: string;\n buttonLink?: string;\n buttonNewTab?: boolean;\n paddingText?: Spacing;\n paddingImage?: Spacing;\n imagePos: \"left\" | \"center\" | \"right\";\n imageMobilePos: \"top\" | \"bottom\";\n buttonType?: \"primary\" | \"secondary\";\n}\n\nexport function HeroImageView(props: HeroImageViewProps, children: VNode) {\n const overlay = Boolean(\n (props.header || props.description || props.buttonText) &&\n props.layout === \"overlay\"\n );\n\n // Dependent on props, not feasiable to move out\n const style = {\n Container: {\n position: \"relative\",\n \"&:before\": {\n content: overlay ? '\"\"' : \"\",\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n background: props.overlayColor || \"var(--sl-color-black)\",\n opacity: props.overlayOpacity,\n },\n },\n Image: {\n display: \"block\",\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n },\n Background: {\n backgroundImage: `url(${props.imageUrl})`,\n backgroundSize: \"cover\",\n backgroundPosition: props.imagePos || \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n Overlay: {\n zIndex: \"1\",\n padding:\n \"calc(var(--sl-spacing-\" +\n props.paddingText +\n \") + var(--sl-spacing-\" +\n props.paddingImage +\n \"))\",\n textAlign: \"center\",\n color: props.textColor || \"var(--sqm-text)\",\n lineHeight: \"var(--sl-line-height-dense)\",\n \"@media (max-width: 599px)\": {\n padding: \"var(--sl-spacing-\" + props.paddingText + \")\",\n },\n },\n Column: {\n display: \"flex\",\n background: props.backgroundColor || \"\",\n flexDirection: props.imagePos === \"right\" ? \"row-reverse\" : \"row\",\n lineHeight: \"var(--sl-line-height-dense)\",\n color: props.textColor || \"var(--sqm-text)\",\n \"& .image-area\": {\n width: props.imagePercentage ? props.imagePercentage + \"%\" : \"50%\",\n padding: \"var(--sl-spacing-\" + props.paddingImage + \")\",\n boxSizing: \"border-box\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n \"@media (max-width: 599px)\": {\n width: \"100%\",\n },\n },\n \"& .text-area\": {\n width: props.imagePercentage\n ? 100 - props.imagePercentage + \"%\"\n : \"50%\",\n padding: \"var(--sl-spacing-\" + props.paddingText + \")\",\n alignSelf: \"center\",\n boxSizing: \"border-box\",\n \"@media (max-width: 599px)\": {\n width: \"100%\",\n textAlign: \"center\",\n padding: \"calc(0.5*var(--sl-spacing-\" + props.paddingText + \"))\",\n },\n },\n \"@media (max-width: 599px)\": {\n flexDirection:\n props.imageMobilePos === \"bottom\" ? \"column-reverse\" : \"column\",\n },\n },\n Header: {\n fontSize: \"var(--sl-font-size-xxx-large)\",\n fontWeight: \"var(--sl-font-weight-bold)\",\n \"@media (max-width: 599px)\": {\n fontSize: \"var(--sl-font-size-xx-large)\",\n },\n },\n Description: {\n fontSize: \"var(--sl-font-size-x-large)\",\n margin: \"var(--sl-spacing-small) 0\",\n \"@media (max-width: 599px)\": {\n fontSize: \"var(--sl-font-size-large)\",\n },\n },\n Button: {\n marginTop: \"var(--sl-spacing-medium)\",\n \"&::part(base)\": {\n padding: \"0 var(--sl-spacing-x-large)\",\n color: \"var(--sqm-primary-button-color)\",\n backgroundColor: \"var(--sqm-primary-button-background)\",\n border: \"var(--sqm-primary-button-color-border)\",\n },\n \"@media (max-width: 599px)\": {\n width: \"100%\",\n },\n },\n };\n\n const sheet = createStyleSheet(style);\n const styleString = sheet.toString();\n\n const vanillaStyle = `\n :host{\n display: block;\n }`;\n\n return (\n <div class={sheet.classes.Container} part=\"sqm-base\">\n <style type=\"text/css\">\n {vanillaStyle}\n {styleString}\n </style>\n\n {props.layout === \"overlay\" && OverlayView()}\n {props.layout === \"columns\" && ColumnView()}\n </div>\n );\n\n function OverlayView() {\n return (\n <div class={sheet.classes.Background}>\n <div class={sheet.classes.Overlay} part=\"sqm-overlay\">\n {props.header && (\n <div class={sheet.classes.Header}>{props.header}</div>\n )}\n {props.description && (\n <div class={sheet.classes.Description}>{props.description}</div>\n )}\n {props.buttonText && (\n <sl-button\n class={sheet.classes.Button}\n type=\"primary\"\n exportparts={`base: ${props.buttonType}button-base`}\n onClick={() =>\n props.buttonNewTab\n ? window.open(props.buttonLink)\n : window.open(props.buttonLink, \"_parent\")\n }\n >\n {props.buttonText}\n </sl-button>\n )}\n {children && children}\n </div>\n </div>\n );\n }\n\n function ColumnView() {\n return (\n <div>\n <div class={sheet.classes.Column}>\n <div class=\"image-area\">\n <img\n // @ts-ignore\n fetchpriority=\"high\"\n class={sheet.classes.Image}\n src={props.imageUrl}\n part=\"sqm-columns-image\"\n style={{ height: \"200px\", width: \"200px\" }}\n ></img>\n </div>\n <div class=\"text-area\" part=\"sqm-columns-text-area\">\n {props.header && (\n <div class={sheet.classes.Header} part=\"sqm-columns-header\">\n {props.header}\n </div>\n )}\n {props.description && (\n <div\n class={sheet.classes.Description}\n part=\"sqm-columns-description\"\n >\n {props.description}\n </div>\n )}\n {props.buttonText && (\n <sl-button\n exportparts=\"base: sqm-hero-image-button\"\n class={sheet.classes.Button}\n type=\"primary\"\n onClick={() =>\n props.buttonNewTab\n ? window.open(props.buttonLink)\n : window.open(props.buttonLink, \"_parent\")\n }\n >\n {props.buttonText}\n </sl-button>\n )}\n </div>\n </div>\n </div>\n );\n }\n}\n","import { withHooks } from \"@saasquatch/stencil-hooks\";\nimport { Component, h, Prop } from \"@stencil/core\";\nimport { Spacing } from \"../../global/mixins\";\nimport { getProps } from \"../../utils/utils\";\nimport { HeroImageView } from \"./sqm-hero-image-view\";\n\n/**\n * @uiName Hero Image\n * @validParents [\"sqm-portal-container\",\"sqm-brand\", \"div\"]\n * @exampleGroup Common Components\n * @example Two Column Hero Image - <sqm-hero-image image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\" header=\"MyCompany Rewards\" description=\"Refer a friend and earn up to $1200 in rewards\" layout=\"columns\" image-pos=\"right\"></sqm-hero-image>\n * @example Overlay Hero Image - <sqm-hero-image image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\" header=\"MyCompany Rewards\" description=\"Refer a friend and earn up to $1200 in rewards\" layout=\"overlay\" image-pos=\"center\" button-link=\"https://www.example.com\" button-new-tab button-text=\"Earn!\" image-percentage=\"45\" overlay-opacity=\".5\" padding-image=\"small\" padding-text=\"xxxx-large\"></sqm-hero-image>\n */\n@Component({\n tag: \"sqm-hero-image\",\n shadow: true,\n})\nexport class HeroImage {\n /**\n * @uiWidget ImageUpload\n * @format url\n * @uiName Image\n */\n @Prop() imageUrl: string;\n\n /**\n * @uiName Overlay color\n * @uiWidget color\n * @format color\n * @uiGroup Style\n */\n @Prop() overlayColor?: string;\n\n /**\n * @uiName Overlay opacity\n * @uiGroup Style\n */\n @Prop() overlayOpacity: string = \"0.75\";\n\n /**\n * @uiName Text color\n * @uiWidget color\n * @format color\n * @uiGroup Style\n */\n @Prop() textColor?: string;\n\n /**\n * @uiName Background color\n * @uiWidget color\n * @format color\n * @uiGroup Style\n */\n @Prop() backgroundColor?: string;\n\n /**\n * @uiName Image layout\n * @uiType string\n * @uiEnum [\"overlay\", \"columns\"]\n * @uiEnumNames [\"Overlay\", \"Two-column\"]\n * @uiGroup Style\n */\n @Prop() layout: \"overlay\" | \"columns\" = \"overlay\";\n\n /**\n * @uiName Image percentage\n * @uiType number\n * @uiGroup Style\n */\n @Prop() imagePercentage: number = 50;\n\n /**\n * @uiName Image position\n * @uiType string\n * @uiEnum [\"left\", \"center\", \"right\"]\n * @uiEnumNames [\"Left\", \"Center\", \"Right\"]\n * @uiGroup Style\n */\n @Prop() imagePos: \"left\" | \"center\" | \"right\" = \"center\";\n\n /**\n * @uiName Image mobile position\n * @uiType string\n * @uiEnum [\"top\", \"bottom\"]\n * @uiEnumNames [\"Top\", \"Bottom\"]\n * @uiGroup Style\n */\n @Prop() imageMobilePos: \"top\" | \"bottom\" = \"top\";\n\n /**\n * @uiName Title\n */\n @Prop() header?: string;\n\n /**\n * @uiName Description\n * @uiWidget textArea\n */\n @Prop() description?: string;\n\n /**\n * @uiName Button text\n */\n @Prop() buttonText?: string;\n\n /**\n * @uiName Button link\n */\n @Prop() buttonLink?: string;\n\n /**\n * @uiName Open link in new tab\n * @default\n */\n @Prop() buttonNewTab?: boolean = false;\n\n /**\n * @uiName Text padding\n * @uiType string\n * @uiEnum [\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]\n * @uiEnumNames [\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]\n * @uiGroup Style\n */\n @Prop() paddingText: Spacing = \"xxxx-large\";\n\n /**\n * @uiName Image padding\n * @uiType string\n * @uiEnum [\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]\n * @uiEnumNames [\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]\n * @uiGroup Style\n */\n @Prop() paddingImage: Spacing = \"none\";\n\n /**\n * The type of the button that is used (primary or secondary).\n * @uiName Button Type\n * @uiType string\n * @uiEnum [\"primary\", \"secondary\"]\n * @uiEnumNames [\"Primary\", \"Secondary\"]\n * @uiGroup Style\n */\n @Prop()\n buttonType?: \"primary\" | \"secondary\" = \"primary\";\n\n constructor() {\n withHooks(this);\n }\n disconnectedCallback() {}\n\n render() {\n return (\n <HeroImageView {...getProps(this)}>\n <slot />\n </HeroImageView>\n );\n }\n}\n"],"names":["withHooks"],"mappings":"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"}