@nanoporetech-digital/components 4.10.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (164) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/cjs/{form-control-2e900f54.js → form-control-443e90bf.js} +2 -3
  3. package/dist/cjs/form-control-443e90bf.js.map +1 -0
  4. package/dist/cjs/index-71f899a7.js +6 -2
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/nano-components.cjs.js +1 -1
  7. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js +2 -2
  8. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js.map +1 -1
  9. package/dist/cjs/nano-grid-item.cjs.entry.js +29 -0
  10. package/dist/cjs/nano-grid-item.cjs.entry.js.map +1 -0
  11. package/dist/cjs/nano-grid_2.cjs.entry.js +436 -0
  12. package/dist/cjs/nano-grid_2.cjs.entry.js.map +1 -0
  13. package/dist/cjs/nano-hero.cjs.entry.js +4 -10
  14. package/dist/cjs/nano-hero.cjs.entry.js.map +1 -1
  15. package/dist/cjs/nano-icon-button_2.cjs.entry.js +2 -2
  16. package/dist/cjs/nano-icon-button_2.cjs.entry.js.map +1 -1
  17. package/dist/cjs/nano-input.cjs.entry.js +2 -2
  18. package/dist/cjs/nano-input.cjs.entry.js.map +1 -1
  19. package/dist/cjs/nano-range.cjs.entry.js +1 -1
  20. package/dist/cjs/nano-range.cjs.entry.js.map +1 -1
  21. package/dist/cjs/nano-sortable.cjs.entry.js +1 -0
  22. package/dist/cjs/nano-sortable.cjs.entry.js.map +1 -1
  23. package/dist/cjs/{nano-table-ff33dc43.js → nano-table-11052a34.js} +37 -30
  24. package/dist/cjs/nano-table-11052a34.js.map +1 -0
  25. package/dist/cjs/nano-table.cjs.entry.js +1 -1
  26. package/dist/cjs/{table.worker-0a6bc962.js → table.worker-83433a8b.js} +2 -2
  27. package/dist/cjs/table.worker-83433a8b.js.map +1 -0
  28. package/dist/collection/components/form-control/form-control.js +1 -2
  29. package/dist/collection/components/form-control/form-control.js.map +1 -1
  30. package/dist/collection/components/grid/grid-item.js +11 -136
  31. package/dist/collection/components/grid/grid-item.js.map +1 -1
  32. package/dist/collection/components/grid/grid.css +9 -242
  33. package/dist/collection/components/grid/grid.js +248 -240
  34. package/dist/collection/components/grid/grid.js.map +1 -1
  35. package/dist/collection/components/hero/hero.css +42 -89
  36. package/dist/collection/components/hero/hero.js +4 -11
  37. package/dist/collection/components/hero/hero.js.map +1 -1
  38. package/dist/collection/components/icon-button/icon-button.css +12 -0
  39. package/dist/collection/components/icon-button/icon-button.js +1 -1
  40. package/dist/collection/components/icon-button/icon-button.js.map +1 -1
  41. package/dist/collection/components/input/input.css +8 -9
  42. package/dist/collection/components/range/range.css +0 -3
  43. package/dist/collection/components/select/select.css +8 -9
  44. package/dist/collection/components/sortable/sortable.js +2 -1
  45. package/dist/collection/components/sortable/sortable.js.map +1 -1
  46. package/dist/collection/components/table/table.css +6 -0
  47. package/dist/collection/components/table/table.js +25 -18
  48. package/dist/collection/components/table/table.js.map +1 -1
  49. package/dist/collection/components/table/table.row.js +7 -7
  50. package/dist/collection/components/table/table.row.js.map +1 -1
  51. package/dist/collection/utils/constructible-style.js +129 -0
  52. package/dist/collection/utils/constructible-style.js.map +1 -0
  53. package/dist/components/form-control.js +1 -2
  54. package/dist/components/form-control.js.map +1 -1
  55. package/dist/components/grid.js +268 -183
  56. package/dist/components/grid.js.map +1 -1
  57. package/dist/components/icon-button.js +2 -2
  58. package/dist/components/icon-button.js.map +1 -1
  59. package/dist/components/input.js +1 -1
  60. package/dist/components/input.js.map +1 -1
  61. package/dist/components/nano-grid-item.js +33 -1
  62. package/dist/components/nano-grid-item.js.map +1 -1
  63. package/dist/components/nano-hero.js +6 -19
  64. package/dist/components/nano-hero.js.map +1 -1
  65. package/dist/components/nano-range.js +1 -1
  66. package/dist/components/nano-range.js.map +1 -1
  67. package/dist/components/nano-sortable.js +1 -0
  68. package/dist/components/nano-sortable.js.map +1 -1
  69. package/dist/components/select.js +1 -1
  70. package/dist/components/select.js.map +1 -1
  71. package/dist/components/table.js +36 -29
  72. package/dist/components/table.js.map +1 -1
  73. package/dist/esm/{form-control-269ba84f.js → form-control-e8739b2e.js} +2 -3
  74. package/dist/esm/form-control-e8739b2e.js.map +1 -0
  75. package/dist/esm/index-dad5627b.js +6 -2
  76. package/dist/esm/loader.js +1 -1
  77. package/dist/esm/nano-components.js +1 -1
  78. package/dist/esm/nano-global-nav-user-profile_3.entry.js +2 -2
  79. package/dist/esm/nano-global-nav-user-profile_3.entry.js.map +1 -1
  80. package/dist/esm/nano-grid-item.entry.js +25 -0
  81. package/dist/esm/nano-grid-item.entry.js.map +1 -0
  82. package/dist/esm/nano-grid_2.entry.js +431 -0
  83. package/dist/esm/nano-grid_2.entry.js.map +1 -0
  84. package/dist/esm/nano-hero.entry.js +4 -10
  85. package/dist/esm/nano-hero.entry.js.map +1 -1
  86. package/dist/esm/nano-icon-button_2.entry.js +2 -2
  87. package/dist/esm/nano-icon-button_2.entry.js.map +1 -1
  88. package/dist/esm/nano-input.entry.js +2 -2
  89. package/dist/esm/nano-input.entry.js.map +1 -1
  90. package/dist/esm/nano-range.entry.js +1 -1
  91. package/dist/esm/nano-range.entry.js.map +1 -1
  92. package/dist/esm/nano-sortable.entry.js +1 -0
  93. package/dist/esm/nano-sortable.entry.js.map +1 -1
  94. package/dist/esm/{nano-table-ec980076.js → nano-table-ba637f26.js} +37 -30
  95. package/dist/esm/nano-table-ba637f26.js.map +1 -0
  96. package/dist/esm/nano-table.entry.js +1 -1
  97. package/dist/esm/{table.worker-b53db58e.js → table.worker-1cae39c9.js} +2 -2
  98. package/dist/esm/table.worker-1cae39c9.js.map +1 -0
  99. package/dist/nano-components/nano-components.css +1 -1
  100. package/dist/nano-components/nano-components.esm.js +1 -1
  101. package/dist/nano-components/nano-components.esm.js.map +1 -1
  102. package/dist/nano-components/p-00cf8021.entry.js +5 -0
  103. package/dist/nano-components/p-00cf8021.entry.js.map +1 -0
  104. package/dist/nano-components/{p-f591400b.entry.js → p-158c73b0.entry.js} +2 -2
  105. package/dist/nano-components/p-365c997a.js +5 -0
  106. package/dist/nano-components/p-553acf24.entry.js +5 -0
  107. package/dist/nano-components/{p-58b53239.entry.js.map → p-553acf24.entry.js.map} +1 -1
  108. package/dist/nano-components/p-6975f110.entry.js +5 -0
  109. package/dist/nano-components/p-6975f110.entry.js.map +1 -0
  110. package/dist/nano-components/p-71057181.js +5 -0
  111. package/dist/nano-components/p-71057181.js.map +1 -0
  112. package/dist/nano-components/p-ad6209ec.entry.js +5 -0
  113. package/dist/nano-components/p-ad6209ec.entry.js.map +1 -0
  114. package/dist/nano-components/p-bdef618c.entry.js +5 -0
  115. package/dist/nano-components/p-bdef618c.entry.js.map +1 -0
  116. package/dist/nano-components/{p-241baff8.entry.js → p-d79c6862.entry.js} +2 -2
  117. package/dist/nano-components/p-d79c6862.entry.js.map +1 -0
  118. package/dist/nano-components/p-deb0799c.entry.js +5 -0
  119. package/dist/nano-components/{p-6a3a29c6.entry.js.map → p-deb0799c.entry.js.map} +1 -1
  120. package/dist/nano-components/p-ebb98a9e.entry.js +5 -0
  121. package/dist/nano-components/p-ebb98a9e.entry.js.map +1 -0
  122. package/dist/nano-components/p-fc585ea2.js +5 -0
  123. package/dist/nano-components/p-fc585ea2.js.map +1 -0
  124. package/dist/types/components/grid/grid-item.d.ts +3 -11
  125. package/dist/types/components/grid/grid.d.ts +44 -68
  126. package/dist/types/components/hero/hero.d.ts +1 -3
  127. package/dist/types/components/table/table.d.ts +5 -0
  128. package/dist/types/components.d.ts +85 -61
  129. package/dist/types/utils/constructible-style.d.ts +31 -0
  130. package/docs-json.json +147 -88
  131. package/docs-vscode.json +28 -21
  132. package/hydrate/index.js +340 -306
  133. package/package.json +2 -2
  134. package/dist/cjs/form-control-2e900f54.js.map +0 -1
  135. package/dist/cjs/nano-grid_3.cjs.entry.js +0 -431
  136. package/dist/cjs/nano-grid_3.cjs.entry.js.map +0 -1
  137. package/dist/cjs/nano-table-ff33dc43.js.map +0 -1
  138. package/dist/cjs/table.worker-0a6bc962.js.map +0 -1
  139. package/dist/collection/components/grid/grid-item.css +0 -15
  140. package/dist/components/grid-item.js +0 -107
  141. package/dist/components/grid-item.js.map +0 -1
  142. package/dist/esm/form-control-269ba84f.js.map +0 -1
  143. package/dist/esm/nano-grid_3.entry.js +0 -425
  144. package/dist/esm/nano-grid_3.entry.js.map +0 -1
  145. package/dist/esm/nano-table-ec980076.js.map +0 -1
  146. package/dist/esm/table.worker-b53db58e.js.map +0 -1
  147. package/dist/nano-components/p-064af7d0.js +0 -5
  148. package/dist/nano-components/p-064af7d0.js.map +0 -1
  149. package/dist/nano-components/p-107d4549.entry.js +0 -5
  150. package/dist/nano-components/p-107d4549.entry.js.map +0 -1
  151. package/dist/nano-components/p-239d343a.entry.js +0 -5
  152. package/dist/nano-components/p-239d343a.entry.js.map +0 -1
  153. package/dist/nano-components/p-241baff8.entry.js.map +0 -1
  154. package/dist/nano-components/p-58b53239.entry.js +0 -5
  155. package/dist/nano-components/p-5ac74848.js +0 -5
  156. package/dist/nano-components/p-5ac74848.js.map +0 -1
  157. package/dist/nano-components/p-6a3a29c6.entry.js +0 -5
  158. package/dist/nano-components/p-806bcd46.js +0 -5
  159. package/dist/nano-components/p-d3de231c.entry.js +0 -5
  160. package/dist/nano-components/p-d3de231c.entry.js.map +0 -1
  161. package/dist/nano-components/p-d792f692.entry.js +0 -5
  162. package/dist/nano-components/p-d792f692.entry.js.map +0 -1
  163. /package/dist/nano-components/{p-806bcd46.js.map → p-158c73b0.entry.js.map} +0 -0
  164. /package/dist/nano-components/{p-f591400b.entry.js.map → p-365c997a.js.map} +0 -0
@@ -0,0 +1,431 @@
1
+ /*!
2
+ * Web Components for Nanopore digital Web Apps
3
+ */
4
+ import { h, g as getElement, a as Host, r as registerInstance, c as createEvent } from './index-dad5627b.js';
5
+
6
+ // import type { VNode, HTMLStencilElement } from "@stencil/core";
7
+ const supportsConstructibleStylesheets = (() => {
8
+ try {
9
+ return !!new CSSStyleSheet();
10
+ }
11
+ catch (e) {
12
+ return false;
13
+ }
14
+ })();
15
+ const cacheKeys = new WeakMap();
16
+ /**
17
+ * Dynamically create a constructible stylesheet which is applied to the component.
18
+ * The stylesheet is then cached for future instances of the component.
19
+ * @usage
20
+ As a string:
21
+ ```
22
+ @ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
23
+ ```
24
+ As a function:
25
+ ```
26
+ @ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
27
+ ```
28
+ * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.
29
+ * @returns `@ConstructableStyle` decorator
30
+ */
31
+ function ConstructibleStyle(opts = {}) {
32
+ return (target, propertyKey) => {
33
+ if (!opts.cacheKeyProperty) {
34
+ opts.cacheKeyProperty = propertyKey;
35
+ }
36
+ const { componentWillLoad, render, componentWillRender } = target;
37
+ if (!componentWillLoad)
38
+ console.warn(`ConstructibleStyle requires you to have a \`componentWillLoad\` lifecycle method in \`${target.constructor.name}\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`);
39
+ if (supportsConstructibleStylesheets) {
40
+ const addStylesheet = (instance) => {
41
+ if (!instance[opts.cacheKeyProperty] ||
42
+ (cacheKeys.get(instance) &&
43
+ cacheKeys.get(instance) === instance[opts.cacheKeyProperty]))
44
+ return;
45
+ cacheKeys.set(instance, instance[opts.cacheKeyProperty]);
46
+ const host = getElement(instance);
47
+ const cssText = typeof instance[propertyKey] === 'function'
48
+ ? instance[propertyKey]()
49
+ : instance[propertyKey];
50
+ const root = (host.shadowRoot || document);
51
+ root.adoptedStyleSheets = [
52
+ ...(root.adoptedStyleSheets || []),
53
+ getOrCreateStylesheet(instance, target, cssText, opts),
54
+ ];
55
+ };
56
+ target.componentWillLoad = function () {
57
+ const willLoadResult = componentWillLoad && componentWillLoad.call(this);
58
+ addStylesheet(this);
59
+ return willLoadResult;
60
+ };
61
+ target.componentWillRender = function () {
62
+ const willRenderResult = componentWillRender && componentWillRender.call(this);
63
+ addStylesheet(this);
64
+ return willRenderResult;
65
+ };
66
+ }
67
+ else {
68
+ target.render = function () {
69
+ const cssText = typeof this[propertyKey] === 'function'
70
+ ? this[propertyKey]()
71
+ : this[propertyKey];
72
+ let renderedNode = render.call(this);
73
+ if (isHost(renderedNode)) {
74
+ appendStyleToHost(renderedNode, target.constructor.name, cssText);
75
+ }
76
+ else {
77
+ renderedNode = h(Host, null, renderedNode);
78
+ if (!('attachShadow' in HTMLElement.prototype)) {
79
+ appendStyleToHost(renderedNode, target.constructor.name, cssText);
80
+ }
81
+ else {
82
+ if (!target.__constructableStyle) {
83
+ const style = document.createElement('style');
84
+ style.setAttribute('type', 'text/css');
85
+ style.setAttribute('constructible-style', target.constructor.name);
86
+ style.innerHTML = cssText;
87
+ target.__constructableStyle = style;
88
+ document.head.appendChild(style);
89
+ }
90
+ }
91
+ }
92
+ return renderedNode;
93
+ };
94
+ }
95
+ };
96
+ }
97
+ function appendStyleToHost(node, targetName, cssText) {
98
+ (getHostChildren(node) || []).push(h("style", { type: "text/css", "constructible-style": targetName }, cssText));
99
+ }
100
+ function getOrCreateStylesheet(instance, target, cssText, opts) {
101
+ if (!target.__constructableStyle) {
102
+ target.__constructableStyle = {};
103
+ }
104
+ const key = instance[opts.cacheKeyProperty];
105
+ if (!target.__constructableStyle[key]) {
106
+ target.__constructableStyle[key] = new CSSStyleSheet();
107
+ target.__constructableStyle[key].replace(cssText);
108
+ }
109
+ return target.__constructableStyle[key];
110
+ }
111
+ function isHost(node) {
112
+ for (const prop in node) {
113
+ if (node.hasOwnProperty(prop)) {
114
+ if (node[prop] === Host) {
115
+ return true;
116
+ }
117
+ }
118
+ }
119
+ return false;
120
+ }
121
+ function getHostChildren(node) {
122
+ for (const prop in node) {
123
+ if (node.hasOwnProperty(prop)) {
124
+ if (Array.isArray(node[prop])) {
125
+ return node[prop];
126
+ }
127
+ }
128
+ }
129
+ }
130
+
131
+ const gridCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--grid-col-gap:var(--nano-spacing-medium, 16px);--grid-row-gap:var(--nano-spacing-medium, 16px);--current-grid-size:\"grid size: s\";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid--helper::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid__helper-item{display:none;background:rgba(126, 195, 241, 0.25)}";
132
+
133
+ var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
134
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
135
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
136
+ r = Reflect.decorate(decorators, target, key, desc);
137
+ else
138
+ for (var i = decorators.length - 1; i >= 0; i--)
139
+ if (d = decorators[i])
140
+ r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
141
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
142
+ };
143
+ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
144
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
145
+ return Reflect.metadata(k, v);
146
+ };
147
+ const Grid = class {
148
+ constructor(hostRef) {
149
+ registerInstance(this, hostRef);
150
+ this.grids = [];
151
+ this.styles = () => {
152
+ const css = /* css */ `
153
+ ${this.grids
154
+ .map((bp) => /* css */ `
155
+ @container (min-width: ${typeof bp.breakpoint === 'number'
156
+ ? bp.breakpoint + 1 + 'px'
157
+ : bp.breakpoint}) {
158
+ .grid {
159
+ --current-grid-size: "grid size: ${bp.name}";
160
+ ${bp.template
161
+ ? `grid-template: ${bp.template};`
162
+ : `grid-template-columns: repeat(${bp.cols}, 1fr);`}
163
+ }
164
+ ${[...Array(bp.cols)]
165
+ .map((_, i) => {
166
+ const gItm = i + 1;
167
+ return /* css */ `
168
+ .grid > [grid-states~="${bp.name}-col-start-${gItm}"],
169
+ ::slotted([grid-states~="${bp.name}-col-start-${gItm}"]) {
170
+ grid-column-start: ${gItm} !important;
171
+ }
172
+ .grid > [grid-states~="${bp.name}-row-start-${gItm}"],
173
+ ::slotted([grid-states~="${bp.name}-row-start-${gItm}"]) {
174
+ grid-row-start: ${gItm} !important;
175
+ }
176
+ .grid > [grid-states~="${bp.name}-col-span-${gItm}"],
177
+ ::slotted([grid-states~="${bp.name}-col-span-${gItm}"]) {
178
+ grid-column-end: span ${gItm} !important;
179
+ }
180
+ .grid > [grid-states~="${bp.name}-row-span-${gItm}"],
181
+ ::slotted([grid-states~="${bp.name}-row-span-${gItm}"]) {
182
+ grid-row-end: span ${gItm} !important;
183
+ }
184
+ `;
185
+ })
186
+ .join('')}
187
+ ${this.showHelper &&
188
+ /* css */ `
189
+ .grid--helper :nth-child(-n+${bp.cols}) {
190
+ display: block !important;
191
+ }
192
+ `}
193
+ }
194
+ `)
195
+ .join('')}
196
+ `;
197
+ return css;
198
+ };
199
+ this.cacheKey = undefined;
200
+ this.sSize = 300;
201
+ this.mSize = 550;
202
+ this.lSize = 800;
203
+ this.xlSize = 1000;
204
+ this.sCols = undefined;
205
+ this.mCols = undefined;
206
+ this.lCols = undefined;
207
+ this.xlCols = undefined;
208
+ this.xxlCols = undefined;
209
+ this.sTpl = undefined;
210
+ this.mTpl = undefined;
211
+ this.lTpl = undefined;
212
+ this.xlTpl = undefined;
213
+ this.xxlTpl = undefined;
214
+ this.showHelper = false;
215
+ }
216
+ constructSizeArray() {
217
+ this.grids = [];
218
+ if (this.sCols)
219
+ this.grids.push({
220
+ cols: this.sCols,
221
+ breakpoint: 0,
222
+ name: 's',
223
+ template: this.sTpl,
224
+ });
225
+ if (this.mCols)
226
+ this.grids.push({
227
+ cols: this.mCols,
228
+ breakpoint: this.sSize,
229
+ name: 'm',
230
+ template: this.mTpl,
231
+ });
232
+ if (this.lSize)
233
+ this.grids.push({
234
+ cols: this.lCols,
235
+ breakpoint: this.mSize,
236
+ name: 'l',
237
+ template: this.lTpl,
238
+ });
239
+ if (this.xlCols)
240
+ this.grids.push({
241
+ cols: this.xlCols,
242
+ breakpoint: this.lSize,
243
+ name: 'xl',
244
+ template: this.xlTpl,
245
+ });
246
+ if (this.xxlCols)
247
+ this.grids.push({
248
+ cols: this.xxlCols,
249
+ breakpoint: this.xlSize,
250
+ name: 'xxl',
251
+ template: this.xxlTpl,
252
+ });
253
+ this.cacheKey =
254
+ this.grids
255
+ .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)
256
+ .join('') +
257
+ '-helper-' +
258
+ this.showHelper;
259
+ }
260
+ componentWillLoad() {
261
+ this.constructSizeArray();
262
+ }
263
+ render() {
264
+ return (h(Host, null, h("div", { part: "grid", class: "grid" }, h("slot", null)), this.showHelper && (h("div", { class: "grid grid--helper", part: "helper" }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
265
+ }
266
+ static get watchers() { return {
267
+ "sTpl": ["constructSizeArray"],
268
+ "mTpl": ["constructSizeArray"],
269
+ "lTpl": ["constructSizeArray"],
270
+ "xlTpl": ["constructSizeArray"],
271
+ "xxlTpl": ["constructSizeArray"],
272
+ "sSize": ["constructSizeArray"],
273
+ "mSize": ["constructSizeArray"],
274
+ "lSize": ["constructSizeArray"],
275
+ "xlSize": ["constructSizeArray"],
276
+ "sCols": ["constructSizeArray"],
277
+ "mCols": ["constructSizeArray"],
278
+ "lCols": ["constructSizeArray"],
279
+ "xlCols": ["constructSizeArray"],
280
+ "xxlCols": ["constructSizeArray"],
281
+ "showHelper": ["constructSizeArray"]
282
+ }; }
283
+ };
284
+ __decorate([
285
+ ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }),
286
+ __metadata("design:type", Object)
287
+ ], Grid.prototype, "styles", void 0);
288
+ Grid.style = gridCss;
289
+
290
+ const imgCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding:0;display:inline-block;object-fit:cover;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;object-fit:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;flex:1 1 100%;display:flex;flex-direction:column;min-block-size:inherit;max-block-size:inherit;max-inline-size:inherit;min-height:inherit;min-width:inherit;block-size:inherit;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__loader,.img__observer{position:absolute;inset:0;block-size:100%;inline-size:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;transition:0.5s ease opacity, 0.3s ease filter 0.4s;filter:blur(5px);flex:1}.img__image.loaded,.img__bg.loaded{opacity:1;filter:blur(0)}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{filter:blur(0)}}}.img__image{object-fit:inherit;object-position:inherit;max-inline-size:100%;min-block-size:inherit;max-block-size:inherit;min-height:inherit;min-width:inherit;block-size:auto;inline-size:inherit;height:inherit;width:inherit;max-height:inherit;max-width:inherit;aspect-ratio:inherit}.img__image.hide{visibility:hidden}.img__image.hide.no-height{block-size:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;inset:0}";
291
+
292
+ const Img = class {
293
+ constructor(hostRef) {
294
+ registerInstance(this, hostRef);
295
+ this.nanoImgWillLoad = createEvent(this, "nanoImgWillLoad", 7);
296
+ this.nanoImgDidLoad = createEvent(this, "nanoImgDidLoad", 7);
297
+ this.nanoImgError = createEvent(this, "nanoImgError", 7);
298
+ this._srcSet = {};
299
+ this.onLoad = () => {
300
+ this.nanoImgDidLoad.emit();
301
+ setTimeout(() => (this.hasLoaded = true), 50);
302
+ };
303
+ this.onError = () => {
304
+ this.nanoImgError.emit();
305
+ };
306
+ this.onResize = (e) => {
307
+ Object.entries(e.detail).forEach(([bp, active]) => {
308
+ this._srcSet[bp].active = active;
309
+ });
310
+ // sort and find the highest sized matching image.
311
+ const srcOpts = [];
312
+ Object.keys(this._srcSet)
313
+ .sort()
314
+ .forEach((bp) => {
315
+ if (this._srcSet[bp].active)
316
+ srcOpts.push(this._srcSet[bp].src);
317
+ });
318
+ if (srcOpts.length)
319
+ this._src = srcOpts.slice(-1)[0];
320
+ // no matching image? Set back to default
321
+ else
322
+ this._src = this.src;
323
+ };
324
+ this.loadSrc = undefined;
325
+ this.loadError = undefined;
326
+ this.hasLoaded = false;
327
+ this.imgStates = null;
328
+ this._src = undefined;
329
+ this.alt = undefined;
330
+ this.src = undefined;
331
+ this.srcSet = undefined;
332
+ this.lazy = true;
333
+ this.background = undefined;
334
+ this.autoHeight = 'content';
335
+ }
336
+ _srcChanged() {
337
+ this.hasLoaded = false;
338
+ this.addIO();
339
+ }
340
+ srcChanged() {
341
+ this._src = this.src;
342
+ }
343
+ srcSetChanged() {
344
+ if (!this.srcSet)
345
+ return;
346
+ delete this._srcSet;
347
+ this._srcSet = {};
348
+ this.imgStates = this.srcSet
349
+ .split(',')
350
+ .map((bpSrc) => {
351
+ const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);
352
+ this._srcSet[bp] = { src: src, active: false };
353
+ return bp;
354
+ })
355
+ .join(', ');
356
+ }
357
+ lazyChanged() {
358
+ if (!this.lazy)
359
+ this.load();
360
+ }
361
+ addIO() {
362
+ if (!this._src || this.hasLoaded)
363
+ return;
364
+ if (!this.lazy) {
365
+ this.load();
366
+ return;
367
+ }
368
+ if (typeof window !== 'undefined' &&
369
+ 'IntersectionObserver' in window) {
370
+ this.removeIO();
371
+ this.io = new IntersectionObserver((data) => {
372
+ if (data[0].isIntersecting) {
373
+ this.load();
374
+ this.removeIO();
375
+ }
376
+ });
377
+ this.io.observe(this.host);
378
+ }
379
+ else
380
+ setTimeout(() => this.load(), 200);
381
+ }
382
+ load() {
383
+ this.loadError = this.onError;
384
+ this.loadSrc = this._src;
385
+ this.nanoImgWillLoad.emit();
386
+ }
387
+ removeIO() {
388
+ if (this.io) {
389
+ this.io.disconnect();
390
+ this.io = undefined;
391
+ }
392
+ }
393
+ connectedCallback() {
394
+ this.srcChanged();
395
+ this.srcSetChanged();
396
+ this.lazyChanged();
397
+ }
398
+ componentDidLoad() {
399
+ this.addIO();
400
+ }
401
+ disconnectedCallback() {
402
+ this.removeIO();
403
+ }
404
+ render() {
405
+ const bgStyle = !!this.loadSrc
406
+ ? { 'background-image': `url(${this.loadSrc})` }
407
+ : {};
408
+ return (h("div", { class: "img" }, h("nano-skeleton", { class: "img__loader" }), !!this.background && (h("div", { class: {
409
+ loaded: this.hasLoaded,
410
+ img__bg: true,
411
+ 'no-height': this.autoHeight === 'image',
412
+ }, style: bgStyle }, h("slot", null))), h("img", { class: {
413
+ img__image: true,
414
+ loaded: this.hasLoaded,
415
+ hide: this.background,
416
+ 'no-height': this.autoHeight === 'content',
417
+ }, decoding: "async", src: this.loadSrc, loading: undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates })));
418
+ }
419
+ get host() { return getElement(this); }
420
+ static get watchers() { return {
421
+ "_src": ["_srcChanged"],
422
+ "src": ["srcChanged"],
423
+ "srcSet": ["srcSetChanged"],
424
+ "lazy": ["lazyChanged"]
425
+ }; }
426
+ };
427
+ Img.style = imgCss;
428
+
429
+ export { Grid as nano_grid, Img as nano_img };
430
+
431
+ //# sourceMappingURL=nano-grid_2.entry.js.map
@@ -0,0 +1 @@
1
+ {"file":"nano-grid.nano-img.entry.js","mappings":"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","names":[],"sources":["./src/utils/constructible-style.tsx","./src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","./src/components/grid/grid.tsx","./src/components/img/img.scss?tag=nano-img&encapsulation=shadow","./src/components/img/img.tsx"],"sourcesContent":["import { h, Host, getElement, VNode, ComponentInterface } from '@stencil/core';\n// import type { VNode, HTMLStencilElement } from \"@stencil/core\";\n\nconst supportsConstructibleStylesheets = (() => {\n try {\n return !!new CSSStyleSheet();\n } catch (e) {\n return false;\n }\n})();\n\nconst cacheKeys: WeakMap<ComponentInterface, string> = new WeakMap();\n\ndeclare type ConstructibleStyleDecorator = (\n target: ComponentInterface,\n propertyKey: string\n) => void;\n\n/**\n * Dynamically create a constructible stylesheet which is applied to the component.\n * The stylesheet is then cached for future instances of the component.\n * @usage\nAs a string:\n```\n@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\nAs a function:\n```\n@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.\n * @returns `@ConstructableStyle` decorator\n */\nexport function ConstructibleStyle(\n opts: ConstructibleStyleOptions = {}\n): ConstructibleStyleDecorator {\n return (target: ComponentInterface, propertyKey: string) => {\n if (!opts.cacheKeyProperty) {\n opts.cacheKeyProperty = propertyKey;\n }\n\n const { componentWillLoad, render, componentWillRender } = target;\n if (!componentWillLoad)\n console.warn(\n `ConstructibleStyle requires you to have a \\`componentWillLoad\\` lifecycle method in \\`${target.constructor.name}\\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`\n );\n\n if (supportsConstructibleStylesheets) {\n const addStylesheet = (instance: ComponentInterface) => {\n if (\n !instance[opts.cacheKeyProperty] ||\n (cacheKeys.get(instance) &&\n cacheKeys.get(instance) === instance[opts.cacheKeyProperty])\n )\n return;\n\n cacheKeys.set(instance, instance[opts.cacheKeyProperty]);\n const host = getElement(instance);\n const cssText =\n typeof instance[propertyKey] === 'function'\n ? instance[propertyKey]()\n : instance[propertyKey];\n const root = (host.shadowRoot || document) as any;\n root.adoptedStyleSheets = [\n ...(root.adoptedStyleSheets || []),\n getOrCreateStylesheet(instance, target, cssText, opts),\n ];\n };\n\n target.componentWillLoad = function () {\n const willLoadResult =\n componentWillLoad && componentWillLoad.call(this);\n addStylesheet(this);\n return willLoadResult;\n };\n\n target.componentWillRender = function () {\n const willRenderResult =\n componentWillRender && componentWillRender.call(this);\n addStylesheet(this);\n return willRenderResult;\n };\n } else {\n target.render = function () {\n const cssText =\n typeof this[propertyKey] === 'function'\n ? this[propertyKey]()\n : this[propertyKey];\n let renderedNode: VNode = render.call(this);\n\n if (isHost(renderedNode)) {\n appendStyleToHost(renderedNode, target.constructor.name, cssText);\n } else {\n renderedNode = <Host>{renderedNode}</Host>;\n\n if (!('attachShadow' in HTMLElement.prototype)) {\n appendStyleToHost(renderedNode, target.constructor.name, cssText);\n } else {\n if (!target.__constructableStyle) {\n const style = document.createElement('style');\n style.setAttribute('type', 'text/css');\n style.setAttribute(\n 'constructible-style',\n target.constructor.name\n );\n style.innerHTML = cssText;\n target.__constructableStyle = style;\n document.head.appendChild(style);\n }\n }\n }\n\n return renderedNode;\n };\n }\n };\n}\n\nfunction appendStyleToHost(node, targetName, cssText) {\n (getHostChildren(node) || []).push(\n <style type=\"text/css\" constructible-style={targetName}>\n {cssText}\n </style>\n );\n}\n\nfunction getOrCreateStylesheet(\n instance: ComponentInterface,\n target: ComponentInterface,\n cssText: string,\n opts: ConstructibleStyleOptions\n): CSSStyleSheet {\n if (!target.__constructableStyle) {\n target.__constructableStyle = {};\n }\n\n const key = instance[opts.cacheKeyProperty];\n\n if (!target.__constructableStyle[key]) {\n target.__constructableStyle[key] = new CSSStyleSheet();\n target.__constructableStyle[key].replace(cssText);\n }\n\n return target.__constructableStyle[key];\n}\n\nfunction isHost(node): boolean {\n for (const prop in node) {\n if (node.hasOwnProperty(prop)) {\n if (node[prop] === Host) {\n return true;\n }\n }\n }\n return false;\n}\n\nfunction getHostChildren(node): Array<VNode> {\n for (const prop in node) {\n if (node.hasOwnProperty(prop)) {\n if (Array.isArray(node[prop])) {\n return node[prop];\n }\n }\n }\n}\n\nexport interface ConstructibleStyleOptions {\n /**\n * Set this in case an instance of a component could produce different styles based on variables.\n * This will ensure that you get new styles for each mode.\n * @example\n```\n@Prop() mode: string;\n@ConstructableStyle({ cacheKeyProperty: \"mode\" }) style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n */\n cacheKeyProperty?: string;\n}\n","@use 'sass:math';\n\n@import '../../global/style/nano-theme/base';\n\n:host {\n /**\n * @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding\n * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding\n */\n\n --grid-col-gap: #{$spacing-medium};\n --grid-row-gap: #{$spacing-medium};\n --current-grid-size: \"grid size: s\";\n\n container-type: inline-size;\n display: block;\n\n .grid {\n display: grid;\n gap: var(--grid-row-gap) var(--grid-col-gap);\n block-size: inherit;\n min-block-size: inherit;\n }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n position: relative;\n\n .grid--helper {\n position: absolute;\n inset: 0;\n pointer-events: none;\n\n &::before {\n content: var(--current-grid-size);\n font-size: 30px;\n position: absolute;\n inline-size: 100%;\n inset-inline-start: 0;\n text-align: center;\n inset-block-start: 50%;\n transform: translateY(-50%);\n color: rgb(0 0 0 / 20%);\n text-transform: uppercase;\n z-index: 99;\n pointer-events: none;\n }\n }\n\n .grid__helper-item {\n display: none;\n background: hsl(204deg 80% 72% / 25%);\n }\n}\n","import { Component, h, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\n\n/**\n * A lightweight, context-aware CSS grid implementation.\n *\n * - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n *\n * @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n */\n@Component({\n tag: 'nano-grid',\n styleUrl: 'grid.scss',\n shadow: true,\n})\nexport class Grid {\n private grids: {\n cols: number;\n breakpoint: number | string;\n name: string;\n template?: string;\n }[] = [];\n @State() cacheKey: string;\n\n /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop() sSize: number | string = 300;\n\n /** the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop() mSize: number | string = 550;\n\n /** the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop() lSize: number | string = 800;\n\n /** the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop() xlSize: number | string = 1000;\n\n /** the number of columns the grid has at the small breakpoint. */\n @Prop() sCols: number;\n\n /** the number of columns the grid has at the medium breakpoint. */\n @Prop() mCols: number;\n\n /** the number of columns the grid has at the large breakpoint. */\n @Prop() lCols: number;\n\n /** the number of columns the grid has at the xl breakpoint. */\n @Prop() xlCols: number;\n\n /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n @Prop() xxlCols: number;\n\n /** Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect */\n @Prop() sTpl?: string;\n\n /** Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect */\n @Prop() mTpl?: string;\n\n /** Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect */\n @Prop() lTpl?: string;\n\n /** Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect */\n @Prop() xlTpl?: string;\n\n /** Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect */\n @Prop() xxlTpl?: string;\n\n /** shows a grid helper to visualise where columns are */\n @Prop({ reflect: true }) showHelper: boolean = false;\n\n @Watch('sTpl')\n @Watch('mTpl')\n @Watch('lTpl')\n @Watch('xlTpl')\n @Watch('xxlTpl')\n @Watch('sSize')\n @Watch('mSize')\n @Watch('lSize')\n @Watch('xlSize')\n @Watch('sCols')\n @Watch('mCols')\n @Watch('lCols')\n @Watch('xlCols')\n @Watch('xxlCols')\n @Watch('showHelper')\n constructSizeArray() {\n this.grids = [];\n\n if (this.sCols)\n this.grids.push({\n cols: this.sCols,\n breakpoint: 0,\n name: 's',\n template: this.sTpl,\n });\n if (this.mCols)\n this.grids.push({\n cols: this.mCols,\n breakpoint: this.sSize,\n name: 'm',\n template: this.mTpl,\n });\n if (this.lSize)\n this.grids.push({\n cols: this.lCols,\n breakpoint: this.mSize,\n name: 'l',\n template: this.lTpl,\n });\n if (this.xlCols)\n this.grids.push({\n cols: this.xlCols,\n breakpoint: this.lSize,\n name: 'xl',\n template: this.xlTpl,\n });\n if (this.xxlCols)\n this.grids.push({\n cols: this.xxlCols,\n breakpoint: this.xlSize,\n name: 'xxl',\n template: this.xxlTpl,\n });\n\n this.cacheKey =\n this.grids\n .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)\n .join('') +\n '-helper-' +\n this.showHelper;\n }\n\n @ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }) protected styles =\n () => {\n const css = /* css */ `\n ${this.grids\n .map(\n (bp) => /* css */ `\n @container (min-width: ${\n typeof bp.breakpoint === 'number'\n ? bp.breakpoint + 1 + 'px'\n : bp.breakpoint\n }) {\n .grid {\n --current-grid-size: \"grid size: ${bp.name}\";\n ${\n bp.template\n ? `grid-template: ${bp.template};`\n : `grid-template-columns: repeat(${bp.cols}, 1fr);`\n }\n }\n ${[...Array(bp.cols)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n .grid > [grid-states~=\"${bp.name}-col-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-start-${gItm}\"]) {\n grid-column-start: ${gItm} !important;\n }\n .grid > [grid-states~=\"${bp.name}-row-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-start-${gItm}\"]) {\n grid-row-start: ${gItm} !important;\n }\n .grid > [grid-states~=\"${bp.name}-col-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-span-${gItm}\"]) {\n grid-column-end: span ${gItm} !important;\n }\n .grid > [grid-states~=\"${bp.name}-row-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-span-${gItm}\"]) {\n grid-row-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${\n this.showHelper &&\n /* css */ `\n .grid--helper :nth-child(-n+${bp.cols}) {\n display: block !important;\n }\n `\n }\n }\n `\n )\n .join('')}\n `;\n return css;\n };\n\n componentWillLoad() {\n this.constructSizeArray();\n }\n\n render() {\n return (\n <Host>\n <div part=\"grid\" class=\"grid\">\n <slot />\n </div>\n {this.showHelper && (\n <div class=\"grid grid--helper\" part=\"helper\">\n {[...Array(24)].map(() => (\n <div class=\"grid__helper-item\" />\n ))}\n </div>\n )}\n </Host>\n );\n }\n}\n",":host {\n /**\n * @prop --padding: padding around any content. Only relevent on `<nano-img background>`\n */\n --padding: 0;\n\n display: inline-block;\n object-fit: cover;\n object-position: center;\n background-size: cover;\n background-position: center;\n\n * {\n border-radius: inherit;\n }\n}\n\n:host([background]:not([background='false'])) {\n display: block;\n}\n\n.img {\n position: relative;\n object-fit: inherit;\n object-position: inherit;\n background-color: inherit;\n background-position: inherit;\n background-size: inherit;\n background-origin: inherit;\n background-attachment: inherit;\n background-repeat: inherit;\n flex: 1 1 100%;\n display: flex;\n flex-direction: column;\n min-block-size: inherit;\n max-block-size: inherit;\n max-inline-size: inherit;\n min-height: inherit;\n min-width: inherit;\n block-size: inherit;\n inline-size: inherit;\n height: inherit;\n width: inherit;\n max-height: inherit;\n max-width: inherit;\n aspect-ratio: inherit;\n}\n\n.img__loader,\n.img__observer {\n position: absolute;\n inset: 0;\n block-size: 100%;\n inline-size: 100%;\n z-index: -1;\n}\n\n.img__image,\n.img__bg {\n border-radius: inherit;\n display: block;\n opacity: 0;\n transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n filter: blur(5px);\n flex: 1;\n\n &.loaded {\n opacity: 1;\n filter: blur(0);\n\n @media not all and (min-resolution: 0.001dpcm) {\n @supports (-webkit-appearance: none) {\n filter: blur(0);\n }\n }\n }\n}\n\n.img__image {\n object-fit: inherit;\n object-position: inherit;\n max-inline-size: 100%;\n min-block-size: inherit;\n max-block-size: inherit;\n min-height: inherit;\n min-width: inherit;\n block-size: auto;\n inline-size: inherit;\n height: inherit;\n width: inherit;\n max-height: inherit;\n max-width: inherit;\n aspect-ratio: inherit;\n\n &.hide {\n visibility: hidden;\n\n &.no-height {\n block-size: 1px;\n position: absolute;\n z-index: -1;\n }\n }\n}\n\n.img__bg {\n background-color: inherit;\n background-position: inherit;\n background-size: inherit;\n background-origin: inherit;\n background-attachment: inherit;\n background-repeat: inherit;\n overflow: auto;\n padding: var(--padding);\n\n &.no-height {\n position: absolute;\n inset: 0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n State,\n Prop,\n Watch,\n h,\n ComponentInterface,\n Build,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n tag: 'nano-img',\n styleUrl: 'img.scss',\n shadow: true,\n})\nexport class Img implements ComponentInterface {\n private io?: IntersectionObserver;\n private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n @Element() host!: HTMLNanoImgElement;\n\n @State() loadSrc?: string;\n @State() loadError?: () => void;\n @State() hasLoaded: boolean = false;\n @State() imgStates: string = null;\n @State() _src: string;\n @Watch('_src')\n _srcChanged() {\n this.hasLoaded = false;\n this.addIO();\n }\n\n /** This attribute defines the alternative text describing the image.\n * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n @Prop() alt?: string;\n\n /** The image URL. This attribute is mandatory for the `<img>` element. */\n @Prop() src!: string;\n @Watch('src')\n srcChanged() {\n this._src = this.src;\n }\n\n /** Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n @Prop() srcSet?: string;\n @Watch('srcSet')\n srcSetChanged() {\n if (!this.srcSet) return;\n\n delete this._srcSet;\n this._srcSet = {};\n\n this.imgStates = this.srcSet\n .split(',')\n .map((bpSrc) => {\n const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n this._srcSet[bp] = { src: src, active: false };\n return bp;\n })\n .join(', ');\n }\n\n /** Render image lazily, when it comes into the browser viewport **/\n @Prop() lazy: boolean = true;\n @Watch('lazy')\n lazyChanged() {\n if (!this.lazy) this.load();\n }\n\n /** Render the image as a background image **/\n @Prop() background?: boolean;\n\n /** When the image is rendered as a background, and there is no preset dimensions of the component,\n * you can set how the component height will be set. Via image size or via the content **/\n @Prop() autoHeight: 'content' | 'image' = 'content';\n\n /** Emitted when the img src has been set */\n @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n /** Emitted when the image has finished loading */\n @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n /** Emitted when the img fails to load */\n @Event() nanoImgError!: EventEmitter<void>;\n\n private addIO() {\n if (!this._src || this.hasLoaded) return;\n if (!this.lazy) {\n this.load();\n return;\n }\n if (\n typeof (window as any) !== 'undefined' &&\n 'IntersectionObserver' in window\n ) {\n this.removeIO();\n this.io = new IntersectionObserver((data) => {\n if (data[0].isIntersecting) {\n this.load();\n this.removeIO();\n }\n });\n\n this.io.observe(this.host);\n } else setTimeout(() => this.load(), 200);\n }\n\n private load() {\n this.loadError = this.onError;\n this.loadSrc = this._src;\n this.nanoImgWillLoad.emit();\n }\n\n private onLoad = () => {\n this.nanoImgDidLoad.emit();\n setTimeout(() => (this.hasLoaded = true), 50);\n };\n\n private onError = () => {\n this.nanoImgError.emit();\n };\n\n private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n Object.entries(e.detail).forEach(([bp, active]) => {\n this._srcSet[bp].active = active;\n });\n\n // sort and find the highest sized matching image.\n const srcOpts = [];\n Object.keys(this._srcSet)\n .sort()\n .forEach((bp) => {\n if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n });\n\n if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n // no matching image? Set back to default\n else this._src = this.src;\n };\n\n private removeIO() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n connectedCallback() {\n this.srcChanged();\n this.srcSetChanged();\n this.lazyChanged();\n }\n\n componentDidLoad() {\n this.addIO();\n }\n\n disconnectedCallback() {\n this.removeIO();\n }\n\n render() {\n const bgStyle = !!this.loadSrc\n ? { 'background-image': `url(${this.loadSrc})` }\n : {};\n\n return (\n <div class=\"img\">\n <nano-skeleton class=\"img__loader\"></nano-skeleton>\n {!!this.background && (\n <div\n class={{\n loaded: this.hasLoaded,\n img__bg: true,\n 'no-height': this.autoHeight === 'image',\n }}\n style={bgStyle}\n >\n <slot />\n </div>\n )}\n <img\n class={{\n img__image: true,\n loaded: this.hasLoaded,\n hide: this.background,\n 'no-height': this.autoHeight === 'content',\n }}\n decoding=\"async\"\n src={Build.isServer ? this.src : this.loadSrc}\n loading={Build.isServer && this.lazy ? 'lazy' : undefined}\n alt={this.alt}\n onLoad={this.onLoad}\n onError={this.loadError}\n />\n <nano-resize-observe\n class=\"img__observer\"\n onNanoResizeStateChange={this.onResize}\n states={this.imgStates}\n />\n </div>\n );\n }\n}\n"],"version":3}
@@ -3,24 +3,20 @@
3
3
  */
4
4
  import { r as registerInstance, h, a as Host, g as getElement } from './index-dad5627b.js';
5
5
 
6
- const heroCss = ":host {\n box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n/**\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\n**/\n:host {\n /**\n * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n * @prop --theme-color: Text color. Default depends on theme;\n * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #90c6e7;\n * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n */\n display: block;\n --nano-loader-base: #4a4a4a;\n --nano-loader-tint: #7d7d7d;\n --theme-color: #fff;\n --theme-tint-color: #90c6e7;\n --scrim-color: 0 0 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n --quote-size: 1.3rem;\n color: var(--theme-color);\n}\n\n:host(.is-xl) {\n --quote-size: 3rem;\n}\n\n:host([theme=light]) {\n --nano-loader-base: #fff;\n --nano-loader-tint: white;\n --theme-color: #4a4a4a;\n --scrim-color: 255 255 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n color: var(--theme-color);\n}\n:host([theme=light]) .hero__primary-content {\n --color: #4a4a4a;\n}\n\n.hero {\n position: relative;\n}\n.hero--rtl {\n --scrim-direction: 270deg;\n}\n.hero--secondary:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n}\n.hero__bg-wrap {\n overflow: hidden;\n}\n.hero__bg-slot {\n position: absolute;\n inset: 0;\n}\n.hero__ctas {\n display: flex;\n justify-content: flex-end;\n padding-block: 32px 0;\n padding-inline: 32px;\n -webkit-margin-after: -64px;\n margin-block-end: -64px;\n position: relative;\n z-index: 1;\n}\n@media (max-width: 52em) {\n .hero__ctas {\n display: none;\n }\n}\n@media (max-width: 58em) {\n .hero__ctas {\n -webkit-margin-after: -48px;\n margin-block-end: -48px;\n }\n}\n.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {\n padding-block: 0.25rem !important;\n padding-inline: 0.5rem !important;\n font-size: 0.875rem !important;\n margin-block: 0 !important;\n margin-inline: 0.25rem !important;\n}\n.hero__img {\n display: block;\n container-type: inline-size;\n --padding: inherit;\n}\n.hero__breadcrumbs {\n display: none;\n margin-block: 20px 0;\n margin-inline: 14px;\n line-height: 14px;\n}\n.hero--breadcrumb .hero__breadcrumbs {\n display: block;\n}\n.is-xl .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n}\n@container (min-width: 800px) {\n .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n }\n}\n.is-xxl .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 83px;\n}\n@container (min-width: 900px) {\n .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 83px;\n }\n}\n.hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n -webkit-margin-after: 16px;\n margin-block-end: 16px;\n position: relative;\n z-index: 2;\n}\n.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n.hero__breadcrumbs ::slotted(a[slot=breadcrumb]) {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n}\n.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]) {\n color: var(--theme-color);\n position: relative;\n margin-block: 0;\n margin-inline: 0.5rem;\n display: inline-block;\n}\n.hero__scrim {\n position: absolute;\n inset: 0;\n z-index: 0;\n background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n.hero--scrim .hero__scrim {\n background: none;\n}\n.hero__content {\n max-inline-size: 1440px;\n display: block;\n --grid-row-gap: 0;\n margin-block: 0;\n margin-inline: auto;\n position: relative;\n}\n.hero__content.is-xl {\n -webkit-margin-before: 50px;\n margin-block-start: 50px;\n max-inline-size: 1540px;\n}\n@container (min-width: 800px) {\n .hero__content {\n margin-block: 50px 0 !important;\n max-inline-size: 1540px !important;\n }\n}\n.hero__content.is-xxl {\n -webkit-margin-before: 83px;\n margin-block-start: 83px;\n max-inline-size: 1606px;\n}\n@container (min-width: 900px) {\n .hero__content {\n margin-block: 83px 0 !important;\n max-inline-size: 1606px !important;\n }\n}\n.hero__primary {\n margin: 16px;\n}\n.hero--breadcrumb .hero__primary {\n margin-block: 0;\n margin-inline: 16px;\n}\n.hero--backbtn .hero__primary {\n -webkit-margin-start: 0;\n margin-inline-start: 0;\n}\n.hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n font-size: 2rem;\n}\n.is-xl .hero__primary {\n margin-block: 0 50px;\n margin-inline: 50px 0;\n}\n.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n margin-block: 0;\n margin-inline: -3rem 0;\n}\n@container (min-width: 800px) {\n .hero__primary {\n margin-block: 0 50px !important;\n margin-inline: 50px 0 !important;\n }\n .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n margin-block: 0 !important;\n margin-inline: -3rem 0 !important;\n }\n}\n.is-xxl .hero__primary {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n}\n@container (min-width: 900px) {\n .hero__primary {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n }\n}\n.hero__primary-content {\n max-inline-size: 45rem;\n --color: #fff;\n display: flex;\n}\n.hero--backbtn .hero__primary-content > div {\n padding-block: 10px 0;\n padding-inline: 0;\n}\n.hero__primary-content ::slotted(h1[slot=primary-content]) {\n line-height: 26px !important;\n margin-block: 0 18px !important;\n font-size: 2rem !important;\n}\n.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]) {\n line-height: 31px !important;\n -webkit-margin-after: 30px !important;\n margin-block-end: 30px !important;\n}\n.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]) {\n -webkit-margin-before: 20px !important;\n margin-block-start: 20px !important;\n}\n@container (min-width: 800px) {\n .hero__primary-content ::slotted(h1[slot=primary-content]) {\n line-height: 31px !important;\n -webkit-margin-after: 30px !important;\n margin-block-end: 30px !important;\n }\n .hero__primary-content ::slotted(.button[slot=primary-content]) {\n -webkit-margin-before: 20px !important;\n margin-block-start: 20px !important;\n }\n}\n.hero__secondary {\n display: none;\n block-size: 100%;\n padding-block: 0 20px;\n padding-inline: 14px;\n}\n.hero--secondary .hero__secondary {\n display: flex;\n align-items: center;\n}\n.is-xl .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n}\n@container (min-width: 800px) {\n .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n }\n}\n.is-xxl .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 83px;\n}\n@container (min-width: 900px) {\n .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 83px;\n }\n}\n.hero__icon-box {\n background: rgba(0, 0, 0, 0.7);\n padding: 24px;\n inline-size: 100%;\n -webkit-margin-after: auto;\n margin-block-end: auto;\n display: flex;\n flex-direction: column;\n color: white;\n}\n.is-xl .hero__icon-box {\n max-inline-size: 410px;\n flex: 0 1 410px;\n}\n.hero__icon-box ::slotted([slot=icon-box-item]) {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n -webkit-margin-after: 20px;\n margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n -webkit-margin-after: 0;\n margin-block-end: 0;\n}\n.hero__quote-content {\n -webkit-margin-before: auto;\n margin-block-start: auto;\n text-align: center;\n inline-size: 100%;\n}\n.is-xl .hero__quote-content {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n}\n@container (min-width: 800px) {\n .hero__quote-content {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n}\n.hero__quote::before, .hero__quote::after {\n content: '\"';\n font-size: var(--quote-size);\n font-weight: 700;\n font-style: italic;\n line-height: 0;\n color: #abb6b8;\n display: inline;\n position: relative;\n}\n.hero__quote ::slotted([slot=quote]) {\n font-size: var(--quote-size);\n font-weight: 300;\n font-style: italic;\n display: inline;\n}\n.hero__quote-author {\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n}\n.hero--sub .hero__content.is-xl {\n -webkit-margin-before: 40px;\n margin-block-start: 40px;\n}\n.hero--sub .hero__content.is-xl .hero__primary {\n margin-block: 0 40px;\n margin-inline: 50px 0;\n}\n.hero--sub .hero__content.is-xl .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 40px 50px;\n}\n.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]) {\n -webkit-margin-before: 8px !important;\n margin-block-start: 8px !important;\n}\n.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]) {\n -webkit-margin-after: 18px !important;\n margin-block-end: 18px !important;\n}\n.hero--sub .hero__content.is-xxl .hero__primary {\n margin-block: 0 40px;\n margin-inline: 83px 0;\n}\n.hero--sub .hero__content.is-xxl .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 40px 83px;\n}";
6
+ const heroCss = ":host {\n box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n/**\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\n**/\n:host {\n /**\n * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n * @prop --theme-color: Text color. Default depends on theme;\n * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #90c6e7;\n * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n */\n --nano-loader-base: #4a4a4a;\n --nano-loader-tint: #7d7d7d;\n --theme-color: #fff;\n --theme-tint-color: #90c6e7;\n --scrim-color: 0 0 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n --quote-size: 1.3rem;\n color: var(--theme-color);\n display: block;\n container-type: inline-size;\n}\n\n:host([theme=light]) {\n --nano-loader-base: #fff;\n --nano-loader-tint: white;\n --theme-color: #4a4a4a;\n --scrim-color: 255 255 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n color: var(--theme-color);\n}\n:host([theme=light]) .hero__primary-content {\n --color: #4a4a4a;\n}\n\n.hero {\n position: relative;\n}\n@container (min-width: 800px) {\n .hero {\n --quote-size: 3rem;\n }\n}\n.hero--rtl {\n --scrim-direction: 270deg;\n}\n.hero--secondary:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n}\n.hero__bg-wrap {\n overflow: hidden;\n}\n.hero__bg-slot {\n position: absolute;\n inset: 0;\n}\n.hero__ctas {\n display: flex;\n justify-content: flex-end;\n padding-block: 32px 0;\n padding-inline: 32px;\n -webkit-margin-after: -64px;\n margin-block-end: -64px;\n position: relative;\n z-index: 1;\n}\n@media (max-width: 52em) {\n .hero__ctas {\n display: none;\n }\n}\n@media (max-width: 58em) {\n .hero__ctas {\n -webkit-margin-after: -48px;\n margin-block-end: -48px;\n }\n}\n.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {\n padding-block: 0.25rem !important;\n padding-inline: 0.5rem !important;\n font-size: 0.875rem !important;\n margin-block: 0 !important;\n margin-inline: 0.25rem !important;\n}\n.hero__img {\n display: block;\n --padding: inherit;\n}\n.hero__breadcrumbs {\n display: none;\n margin-block: 20px 0;\n margin-inline: 14px;\n line-height: 14px;\n}\n.hero--breadcrumb .hero__breadcrumbs {\n display: block;\n}\n@container (min-width: 800px) {\n .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n }\n}\n@container (min-width: 900px) {\n .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 83px;\n }\n}\n.hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n -webkit-margin-after: 16px;\n margin-block-end: 16px;\n position: relative;\n z-index: 2;\n}\n.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n.hero__breadcrumbs ::slotted(a[slot=breadcrumb]) {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n}\n.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]) {\n color: var(--theme-color);\n position: relative;\n margin-block: 0;\n margin-inline: 0.5rem;\n display: inline-block;\n}\n.hero__scrim {\n position: absolute;\n inset: 0;\n z-index: 0;\n background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n.hero--scrim .hero__scrim {\n background: none;\n}\n.hero__content {\n max-inline-size: 1440px;\n display: block;\n --grid-row-gap: 0;\n margin-block: 0;\n margin-inline: auto;\n position: relative;\n}\n@container (min-width: 800px) {\n .hero__content {\n margin-block: 50px 0 !important;\n max-inline-size: 1540px !important;\n }\n}\n@container (min-width: 900px) {\n .hero__content {\n margin-block: 83px 0 !important;\n max-inline-size: 1606px !important;\n }\n}\n.hero__primary {\n margin: 16px;\n}\n.hero--breadcrumb .hero__primary {\n margin-block: 0;\n margin-inline: 16px;\n}\n.hero--backbtn .hero__primary {\n -webkit-margin-start: 0;\n margin-inline-start: 0;\n}\n.hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n font-size: 2rem;\n}\n@container (min-width: 800px) {\n .hero__primary {\n margin-block: 0 50px !important;\n margin-inline: 50px 0 !important;\n }\n .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n margin-block: 0 !important;\n margin-inline: -3rem 0 !important;\n }\n}\n@container (min-width: 900px) {\n .hero__primary {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n }\n}\n.hero__primary-content {\n max-inline-size: 45rem;\n --color: #fff;\n display: flex;\n}\n.hero--backbtn .hero__primary-content > div {\n padding-block: 10px 0;\n padding-inline: 0;\n}\n.hero__primary-content ::slotted(h1[slot=primary-content]) {\n line-height: 26px !important;\n margin-block: 0 18px !important;\n font-size: 2rem !important;\n}\n@container (min-width: 800px) {\n .hero__primary-content ::slotted(h1[slot=primary-content]) {\n line-height: 31px !important;\n -webkit-margin-after: 30px !important;\n margin-block-end: 30px !important;\n }\n .hero__primary-content ::slotted(.button[slot=primary-content]) {\n -webkit-margin-before: 20px !important;\n margin-block-start: 20px !important;\n }\n}\n.hero__secondary {\n display: none;\n block-size: 100%;\n padding-block: 0 20px;\n padding-inline: 14px;\n}\n.hero--secondary .hero__secondary {\n display: flex;\n align-items: center;\n}\n@container (min-width: 800px) {\n .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n }\n}\n@container (min-width: 900px) {\n .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 83px;\n }\n}\n.hero__icon-box {\n background: rgba(0, 0, 0, 0.7);\n padding: 24px;\n inline-size: 100%;\n -webkit-margin-after: auto;\n margin-block-end: auto;\n display: flex;\n flex-direction: column;\n color: white;\n}\n@container (min-width: 800px) {\n .hero__icon-box {\n max-inline-size: 410px;\n flex: 0 1 410px;\n }\n}\n.hero__icon-box ::slotted([slot=icon-box-item]) {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n -webkit-margin-after: 20px;\n margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n -webkit-margin-after: 0;\n margin-block-end: 0;\n}\n.hero__quote-content {\n -webkit-margin-before: auto;\n margin-block-start: auto;\n text-align: center;\n inline-size: 100%;\n}\n@container (min-width: 800px) {\n .hero__quote-content {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n}\n.hero__quote::before, .hero__quote::after {\n content: '\"';\n font-size: var(--quote-size);\n font-weight: 700;\n font-style: italic;\n line-height: 0;\n color: #abb6b8;\n display: inline;\n position: relative;\n}\n.hero__quote ::slotted([slot=quote]) {\n font-size: var(--quote-size);\n font-weight: 300;\n font-style: italic;\n display: inline;\n}\n.hero__quote-author {\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n}\n@container (min-width: 800px) {\n .hero--sub .hero__content {\n -webkit-margin-before: 40px;\n margin-block-start: 40px;\n }\n .hero--sub .hero__content .hero__primary {\n margin-block: 0 40px;\n margin-inline: 50px 0;\n }\n .hero--sub .hero__content .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 40px 50px;\n }\n .hero--sub .hero__content ::slotted(.button[slot=primary-content]) {\n -webkit-margin-before: 8px !important;\n margin-block-start: 8px !important;\n }\n .hero--sub .hero__content ::slotted(h1[slot=primary-content]) {\n -webkit-margin-after: 18px !important;\n margin-block-end: 18px !important;\n }\n}\n@container (min-width: 900px) {\n .hero--sub .hero__content .hero__primary {\n margin-block: 0 40px;\n margin-inline: 83px 0;\n }\n .hero--sub .hero__content .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 40px 83px;\n }\n}";
7
7
 
8
8
  const Hero = class {
9
9
  constructor(hostRef) {
10
10
  registerInstance(this, hostRef);
11
- this.handleGridChange = (e) => {
12
- this.gridSizes = e.detail;
13
- };
14
11
  this.HeroContent = () => {
15
12
  return [
16
13
  !this.hasIconBox && this.hasCtas ? (h("div", { class: "hero__ctas" }, h("slot", { name: "secondary-ctas" }))) : (''),
17
14
  h("div", { class: "hero__scrim" }, h("slot", { name: "scrim" })),
18
- h("nano-grid", { onNanoBpChange: this.handleGridChange, class: "hero__content", xlCols: 2, xlSize: this.largeScreenBP }, h("nano-grid-item", { gridStates: "xl-col-span-2" }, h("div", { class: "hero__breadcrumbs" }, h("slot", { name: "breadcrumb" }))), h("nano-grid-item", { gridStates: this.hasSecondaryContent
15
+ h("nano-grid", { class: "hero__content", xlCols: 2, xlSize: this.largeScreenBP }, h("div", { "grid-states": "xl-col-span-2" }, h("div", { class: "hero__breadcrumbs" }, h("slot", { name: "breadcrumb" }))), h("div", { "grid-states": this.hasSecondaryContent
19
16
  ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'
20
- : 'xl-col-span-2 xl-col-start-1 xl-row-start-2' }, h("div", { class: "hero__primary" }, h("div", { class: "hero__primary-content" }, h("slot", { name: "back-btn" }), h("div", null, h("slot", { name: "primary-content" }))))), this.hasSecondaryContent && (h("nano-grid-item", { gridStates: "xl-col-span-1 xl-col-start-2 xl-row-start-2" }, h("div", { class: "hero__secondary" }, h("slot", { name: "secondary-content" }), this.hasIconBox && (h("div", { class: "hero__icon-box" }, h("slot", { name: "icon-box" }), h("slot", { name: "icon-box-item" }))), this.hasQuote && (h("div", { class: "hero__quote-content" }, h("span", { class: "hero__quote" }, h("slot", { name: "quote" })), h("div", { class: "hero__quote-author" }, h("slot", { name: "quote-author" })))))))),
17
+ : 'xl-col-span-2 xl-col-start-1 xl-row-start-2' }, h("div", { class: "hero__primary" }, h("div", { class: "hero__primary-content" }, h("slot", { name: "back-btn" }), h("div", null, h("slot", { name: "primary-content" }))))), this.hasSecondaryContent && (h("div", { "grid-states": "xl-col-span-1 xl-col-start-2 xl-row-start-2" }, h("div", { class: "hero__secondary" }, h("slot", { name: "secondary-content" }), this.hasIconBox && (h("div", { class: "hero__icon-box" }, h("slot", { name: "icon-box" }), h("slot", { name: "icon-box-item" }))), this.hasQuote && (h("div", { class: "hero__quote-content" }, h("span", { class: "hero__quote" }, h("slot", { name: "quote" })), h("div", { class: "hero__quote-author" }, h("slot", { name: "quote-author" })))))))),
21
18
  ];
22
19
  };
23
- this.gridSizes = [];
24
20
  this.hasIconBox = undefined;
25
21
  this.hasScrim = undefined;
26
22
  this.hasSecondaryContent = undefined;
@@ -92,9 +88,7 @@ const Hero = class {
92
88
  render() {
93
89
  const rtl = this.host.dir === 'rtl' ||
94
90
  this.host.ownerDocument.dir === 'rtl';
95
- return (h(Host, { class: {
96
- [this.gridSizes.join(' ')]: true,
97
- } }, h("div", { class: {
91
+ return (h(Host, null, h("div", { class: {
98
92
  hero: true,
99
93
  'hero--light': this.theme === 'light',
100
94
  'hero--secondary': this.hasSecondaryContent,