@nanoporetech-digital/components 5.8.3 → 5.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/dist/cjs/nano-details.cjs.entry.js +8 -3
- package/dist/cjs/nano-details.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js +1 -1
- package/dist/cjs/nano-global-nav.cjs.entry.js +1 -1
- package/dist/cjs/nano-grid_2.cjs.entry.js +2 -2
- package/dist/cjs/nano-grid_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-tab-group.cjs.entry.js +1 -1
- package/dist/cjs/{nano-table-9bd1168f.js → nano-table-6e2213c5.js} +2 -2
- package/dist/cjs/{nano-table-9bd1168f.js.map → nano-table-6e2213c5.js.map} +1 -1
- package/dist/cjs/nano-table.cjs.entry.js +1 -1
- package/dist/cjs/{table.worker-894a0418.js → table.worker-7accc5b8.js} +2 -2
- package/dist/cjs/table.worker-7accc5b8.js.map +1 -0
- package/dist/cjs/{transitions-6ca20f9b.js → transitions-e410ef6a.js} +5 -3
- package/dist/cjs/transitions-e410ef6a.js.map +1 -0
- package/dist/collection/components/details/details.js +35 -2
- package/dist/collection/components/details/details.js.map +1 -1
- package/dist/collection/components/grid/grid.js +2 -2
- package/dist/collection/components/grid/grid.js.map +1 -1
- package/dist/collection/utils/transitions.js +4 -2
- package/dist/collection/utils/transitions.js.map +1 -1
- package/dist/components/grid.js +2 -2
- package/dist/components/grid.js.map +1 -1
- package/dist/components/nano-details.js +7 -2
- package/dist/components/nano-details.js.map +1 -1
- package/dist/components/transitions.js +4 -2
- package/dist/components/transitions.js.map +1 -1
- package/dist/esm/nano-details.entry.js +8 -3
- package/dist/esm/nano-details.entry.js.map +1 -1
- package/dist/esm/nano-global-nav-user-profile_3.entry.js +1 -1
- package/dist/esm/nano-global-nav.entry.js +1 -1
- package/dist/esm/nano-grid_2.entry.js +2 -2
- package/dist/esm/nano-grid_2.entry.js.map +1 -1
- package/dist/esm/nano-tab-group.entry.js +1 -1
- package/dist/esm/{nano-table-baba1696.js → nano-table-9a9c211e.js} +2 -2
- package/dist/esm/{nano-table-baba1696.js.map → nano-table-9a9c211e.js.map} +1 -1
- package/dist/esm/nano-table.entry.js +1 -1
- package/dist/esm/{table.worker-ae46bca0.js → table.worker-42ba52e8.js} +2 -2
- package/dist/esm/table.worker-42ba52e8.js.map +1 -0
- package/dist/esm/{transitions-989cae97.js → transitions-d4403d6f.js} +5 -3
- package/dist/esm/transitions-d4403d6f.js.map +1 -0
- package/dist/nano-components/nano-components.esm.js +1 -1
- package/dist/nano-components/p-059301fa.js +5 -0
- package/dist/nano-components/p-059301fa.js.map +1 -0
- package/dist/nano-components/{p-e2cc4045.entry.js → p-2588c39f.entry.js} +2 -2
- package/dist/nano-components/{p-f0226ce2.js → p-2dae1801.js} +2 -2
- package/dist/nano-components/p-50dcee2d.entry.js +5 -0
- package/dist/nano-components/p-50dcee2d.entry.js.map +1 -0
- package/dist/nano-components/p-7c82af28.entry.js +5 -0
- package/dist/nano-components/{p-84ba4c38.entry.js.map → p-7c82af28.entry.js.map} +1 -1
- package/dist/nano-components/{p-ecf6276f.entry.js → p-a6d90d7b.entry.js} +2 -2
- package/dist/nano-components/{p-587d3e3d.js → p-cbe3f691.js} +2 -2
- package/dist/nano-components/{p-358b2ffd.entry.js → p-d017a01c.entry.js} +2 -2
- package/dist/nano-components/{p-a1ead0a7.entry.js → p-e450b7c1.entry.js} +2 -2
- package/dist/types/components/details/details.d.ts +4 -0
- package/dist/types/components.d.ts +8 -0
- package/docs-json.json +19 -1
- package/hydrate/index.js +13 -6
- package/package.json +2 -2
- package/dist/cjs/table.worker-894a0418.js.map +0 -1
- package/dist/cjs/transitions-6ca20f9b.js.map +0 -1
- package/dist/esm/table.worker-ae46bca0.js.map +0 -1
- package/dist/esm/transitions-989cae97.js.map +0 -1
- package/dist/nano-components/p-0ec40950.js +0 -5
- package/dist/nano-components/p-0ec40950.js.map +0 -1
- package/dist/nano-components/p-84ba4c38.entry.js +0 -5
- package/dist/nano-components/p-ae85ca01.entry.js +0 -5
- package/dist/nano-components/p-ae85ca01.entry.js.map +0 -1
- /package/dist/nano-components/{p-e2cc4045.entry.js.map → p-2588c39f.entry.js.map} +0 -0
- /package/dist/nano-components/{p-f0226ce2.js.map → p-2dae1801.js.map} +0 -0
- /package/dist/nano-components/{p-ecf6276f.entry.js.map → p-a6d90d7b.entry.js.map} +0 -0
- /package/dist/nano-components/{p-587d3e3d.js.map → p-cbe3f691.js.map} +0 -0
- /package/dist/nano-components/{p-358b2ffd.entry.js.map → p-d017a01c.entry.js.map} +0 -0
- /package/dist/nano-components/{p-a1ead0a7.entry.js.map → p-e450b7c1.entry.js.map} +0 -0
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
7
7
|
|
|
8
|
-
const nanoTable_entry = require('./nano-table-
|
|
8
|
+
const nanoTable_entry = require('./nano-table-6e2213c5.js');
|
|
9
9
|
require('./index-1d3ebe1a.js');
|
|
10
10
|
require('./math-a8123703.js');
|
|
11
11
|
require('./throttle-dfa64b9e.js');
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
'use strict';
|
|
5
5
|
|
|
6
|
-
const nanoTable_entry = require('./nano-table-
|
|
6
|
+
const nanoTable_entry = require('./nano-table-6e2213c5.js');
|
|
7
7
|
require('./index-1d3ebe1a.js');
|
|
8
8
|
require('./math-a8123703.js');
|
|
9
9
|
require('./throttle-dfa64b9e.js');
|
|
@@ -22,4 +22,4 @@ exports.workerMsgId = workerMsgId;
|
|
|
22
22
|
exports.workerName = workerName;
|
|
23
23
|
exports.workerPath = workerPath;
|
|
24
24
|
|
|
25
|
-
//# sourceMappingURL=table.worker-
|
|
25
|
+
//# sourceMappingURL=table.worker-7accc5b8.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"table.worker-7accc5b8.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
|
@@ -20,13 +20,15 @@ const displayTransition = (el, options) => {
|
|
|
20
20
|
const opts = Object.assign({ className: '', show: true, showDisplay: 'block' }, options);
|
|
21
21
|
return new Promise((resolve) => {
|
|
22
22
|
const showCb = (e) => {
|
|
23
|
-
if (e.target === el || e.composedPath().some((el) => el === e.target))
|
|
23
|
+
if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
|
|
24
|
+
(!opts.transitionProp || opts.transitionProp === e.propertyName)) {
|
|
24
25
|
resolve('shown');
|
|
25
26
|
el.removeEventListener('transitionend', showCb);
|
|
26
27
|
}
|
|
27
28
|
};
|
|
28
29
|
const hideCb = (e) => {
|
|
29
|
-
if (e.target === el || e.composedPath().some((el) => el === e.target))
|
|
30
|
+
if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
|
|
31
|
+
(!opts.transitionProp || opts.transitionProp === e.propertyName)) {
|
|
30
32
|
el.style.display = 'none';
|
|
31
33
|
resolve('hidden');
|
|
32
34
|
el.removeEventListener('transitionend', hideCb);
|
|
@@ -47,4 +49,4 @@ const displayTransition = (el, options) => {
|
|
|
47
49
|
|
|
48
50
|
exports.displayTransition = displayTransition;
|
|
49
51
|
|
|
50
|
-
//# sourceMappingURL=transitions-
|
|
52
|
+
//# sourceMappingURL=transitions-e410ef6a.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"transitions-e410ef6a.js","mappings":";;;;;AAAA;;;;AAiBA;;;;;;;;;MASa,iBAAiB,GAAG,CAC/B,EAAe,EACf,OAKC;EAED,MAAM,IAAI,mBACR,SAAS,EAAE,EAAE,EACb,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,OAAO,IACjB,OAAO,CACX,CAAC;EAEF,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;IACzB,MAAM,MAAM,GAAG,CAAC,CAAkB;MAChC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC;SACjE,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,KAAK,CAAC,CAAC,YAAY,CAAC,EAChE;QACA,OAAO,CAAC,OAAO,CAAC,CAAC;QACjB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;KACF,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,CAAkB;MAChC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC;SACjE,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,KAAK,CAAC,CAAC,YAAY,CAAC,EAChE;QACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,OAAO,CAAC,QAAQ,CAAC,CAAC;QAClB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;KACF,CAAC;IAEF,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC;MACpC,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MACtC,UAAU,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;KACxD;SAAM;MACL,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACrC;GACF,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n return new Promise((resolve) => {\n const callback = () => {\n el.removeEventListener('transitionend', callback);\n resolve;\n };\n el.addEventListener('transitionend', callback);\n // ??\n });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param options\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n el: HTMLElement,\n options?: {\n className?: string;\n show?: boolean;\n showDisplay?: string;\n transitionProp?: string;\n }\n): Promise<'shown' | 'hidden'> => {\n const opts = {\n className: '',\n show: true,\n showDisplay: 'block',\n ...options,\n };\n\n return new Promise((resolve) => {\n const showCb = (e: TransitionEvent) => {\n if (\n (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n (!opts.transitionProp || opts.transitionProp === e.propertyName)\n ) {\n resolve('shown');\n el.removeEventListener('transitionend', showCb);\n }\n };\n\n const hideCb = (e: TransitionEvent) => {\n if (\n (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n (!opts.transitionProp || opts.transitionProp === e.propertyName)\n ) {\n el.style.display = 'none';\n resolve('hidden');\n el.removeEventListener('transitionend', hideCb);\n }\n };\n\n if (opts.show) {\n el.addEventListener('transitionend', showCb);\n el.style.display = opts.showDisplay;\n el.dataset.displayTransition = 'true';\n setTimeout(() => el.classList.add(opts.className), 20);\n } else {\n el.addEventListener('transitionend', hideCb);\n el.classList.remove(opts.className);\n }\n });\n};\n"],"version":3}
|
|
@@ -80,6 +80,7 @@ export class Details {
|
|
|
80
80
|
this.stateChanging = false;
|
|
81
81
|
this.detailsEl.open = false;
|
|
82
82
|
this.bodyEl.classList.add('is-hidden');
|
|
83
|
+
this.nanoAfterClosed.emit();
|
|
83
84
|
});
|
|
84
85
|
requestAnimationFrame(() => {
|
|
85
86
|
this.bodyEl.style.height = '0px';
|
|
@@ -100,10 +101,12 @@ export class Details {
|
|
|
100
101
|
}).then(() => {
|
|
101
102
|
this.stateChanging = false;
|
|
102
103
|
this.bodyEl.style.height = 'auto';
|
|
104
|
+
this.nanoAfterOpened.emit();
|
|
103
105
|
});
|
|
104
106
|
this.bodyEl.style.height =
|
|
105
|
-
(this.useCacheHeight
|
|
106
|
-
|
|
107
|
+
(this.useCacheHeight && this.cacheHeight
|
|
108
|
+
? this.cacheHeight
|
|
109
|
+
: this.contentEl.scrollHeight) + 'px';
|
|
107
110
|
}
|
|
108
111
|
attachMo() {
|
|
109
112
|
if (this.mo || !this.detailsEl || !Build.isBrowser)
|
|
@@ -316,6 +319,36 @@ export class Details {
|
|
|
316
319
|
"resolved": "any",
|
|
317
320
|
"references": {}
|
|
318
321
|
}
|
|
322
|
+
}, {
|
|
323
|
+
"method": "nanoAfterOpened",
|
|
324
|
+
"name": "nanoAfterOpened",
|
|
325
|
+
"bubbles": true,
|
|
326
|
+
"cancelable": true,
|
|
327
|
+
"composed": true,
|
|
328
|
+
"docs": {
|
|
329
|
+
"tags": [],
|
|
330
|
+
"text": "Emitted after the details opens and all transitions are complete."
|
|
331
|
+
},
|
|
332
|
+
"complexType": {
|
|
333
|
+
"original": "any",
|
|
334
|
+
"resolved": "any",
|
|
335
|
+
"references": {}
|
|
336
|
+
}
|
|
337
|
+
}, {
|
|
338
|
+
"method": "nanoAfterClosed",
|
|
339
|
+
"name": "nanoAfterClosed",
|
|
340
|
+
"bubbles": true,
|
|
341
|
+
"cancelable": true,
|
|
342
|
+
"composed": true,
|
|
343
|
+
"docs": {
|
|
344
|
+
"tags": [],
|
|
345
|
+
"text": "Emitted after the details closes and all transitions are complete."
|
|
346
|
+
},
|
|
347
|
+
"complexType": {
|
|
348
|
+
"original": "any",
|
|
349
|
+
"resolved": "any",
|
|
350
|
+
"references": {}
|
|
351
|
+
}
|
|
319
352
|
}];
|
|
320
353
|
}
|
|
321
354
|
static get elementRef() { return "host"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"details.js","sourceRoot":"","sources":["../../../src/components/details/details.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n Prop,\n h,\n Element,\n Watch,\n Build,\n} from '@stencil/core';\nimport { displayTransition } from '../../utils/transitions';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n *\n * @part base - the root `details` element\n * @part header - the main `summary` ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part body - the wrapper around content\n * @part content - the main content wrapper\n */\n@Component({\n tag: 'nano-details',\n styleUrl: 'details.scss',\n shadow: true,\n})\nexport class Details {\n private hasStartSlot: boolean;\n private hasEndSlot: boolean;\n private mo?: MutationObserver;\n private stateChanging: boolean = false;\n private bodyEl: HTMLElement;\n private detailsEl: HTMLDetailsElement;\n private headerEl: HTMLElement;\n private contentEl: HTMLDivElement;\n private cacheHeight: number;\n\n @Element() private host: HTMLNanoDetailsElement;\n\n /** Summary / handle text. Use the `label` slot for HTML markup */\n @Prop() label: string = '';\n\n /** Should item be open on load */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /** Disables the details so it can't be toggled. */\n @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n\n /** Hide the handle. (You will need to control the hiding / showing of content with script) */\n @Prop() noHandle: boolean = false;\n\n /** Icon slot rotation amount (degrees) on open */\n @Prop() iconRotation: number = 90;\n\n /**\n * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\n * Set `useCacheHeight` to `true` try to keep animations smooth. */\n @Prop() useCacheHeight = false;\n\n /**\n * Emitted when the component opens.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoOpened: EventEmitter;\n\n /**\n * Emitted when the component closes.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoClosed: EventEmitter;\n\n @Watch('open')\n toggleClick() {\n this.stateChanging = true;\n if (this.open) this.show();\n else this.hide();\n }\n\n private onKeyDown = (e: KeyboardEvent) => {\n if (this.stateChanging || this.disabled) return;\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n this.open = !this.open;\n break;\n case 'ArrowUp':\n e.preventDefault();\n this.open = false;\n break;\n case 'ArrowDown':\n e.preventDefault();\n this.open = true;\n break;\n }\n };\n\n private onMouseDown = (e: MouseEvent) => {\n e.preventDefault();\n this.headerEl.focus();\n\n if (this.stateChanging || this.disabled) return;\n this.open = !this.open;\n };\n\n private hide() {\n const nanoClose = this.nanoClosed.emit(this.open);\n\n if (nanoClose.defaultPrevented) {\n this.open = true;\n this.detailsEl.open = true;\n return;\n }\n\n this.cacheHeight = this.contentEl.scrollHeight;\n this.bodyEl.style.height = this.cacheHeight + 'px';\n\n displayTransition(this.bodyEl, {\n className: 'is-shown',\n show: false,\n transitionProp: 'height',\n }).then(() => {\n this.stateChanging = false;\n this.detailsEl.open = false;\n this.bodyEl.classList.add('is-hidden');\n });\n\n requestAnimationFrame(() => {\n this.bodyEl.style.height = '0px';\n });\n }\n\n private show() {\n const nanoOpen = this.nanoOpened.emit();\n this.detailsEl.open = true;\n\n if (nanoOpen.defaultPrevented) {\n this.open = false;\n this.detailsEl.open = false;\n return;\n }\n\n displayTransition(this.bodyEl, {\n className: 'is-shown',\n show: true,\n transitionProp: 'height',\n }).then(() => {\n this.stateChanging = false;\n this.bodyEl.style.height = 'auto';\n });\n\n this.bodyEl.style.height =\n (this.useCacheHeight ? this.cacheHeight : this.contentEl.scrollHeight) +\n 'px';\n }\n\n private attachMo() {\n if (this.mo || !this.detailsEl || !Build.isBrowser) return;\n\n this.mo = new MutationObserver((changes) => {\n if (this.stateChanging) return;\n\n for (const change of changes) {\n if (change.type === 'attributes' && change.attributeName === 'open') {\n this.open = this.detailsEl.open;\n }\n }\n });\n this.mo.observe(this.detailsEl, { attributes: true });\n }\n\n componentWillLoad() {\n this.hasStartSlot = !!this.host.querySelector('[slot=\"icon-start\"]');\n this.hasEndSlot = !!this.host.querySelector('[slot=\"icon-end\"]');\n }\n\n componentDidLoad() {\n this.bodyEl.style.height = this.open ? 'auto' : '0';\n if (this.open) this.detailsEl.setAttribute('open', 'true');\n this.attachMo();\n }\n\n connectedCallback() {\n this.attachMo();\n }\n\n disconnectedCallback() {\n if (this.mo) {\n this.mo.disconnect();\n this.mo = undefined;\n }\n }\n\n render() {\n return (\n <details\n part=\"base\"\n ref={(d: HTMLDetailsElement) => (this.detailsEl = d)}\n class={{\n details: true,\n open: this.open,\n disabled: this.disabled,\n }}\n >\n <summary\n part=\"header\"\n aria-controls=\"content\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n tabindex={this.disabled ? '-1' : '0'}\n style={{ display: this.noHandle ? 'none' : '' }}\n id=\"header\"\n role=\"button\"\n class=\"header\"\n ref={(s) => (this.headerEl = s)}\n onKeyDown={this.onKeyDown}\n onClick={this.onMouseDown}\n >\n {this.hasStartSlot ? (\n <span\n part=\"icon--start\"\n class=\"icon icon--start\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-start\" />\n </span>\n ) : (\n ''\n )}\n <div part=\"label\" class=\"label\">\n {this.label ? this.label : <slot name=\"label\" />}\n </div>\n {this.hasEndSlot ? (\n <span\n part=\"icon--end\"\n class=\"icon icon--end\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-end\" />\n </span>\n ) : (\n ''\n )}\n </summary>\n <div\n part=\"body\"\n class=\"body\"\n ref={(div) => (this.bodyEl = div)}\n tabindex=\"-1\"\n role=\"region\"\n aria-labelledby=\"header\"\n >\n <div\n part=\"content\"\n ref={(div) => (this.contentEl = div)}\n class=\"content\"\n id=\"content\"\n >\n <slot />\n </div>\n </div>\n </details>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"details.js","sourceRoot":"","sources":["../../../src/components/details/details.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n Prop,\n h,\n Element,\n Watch,\n Build,\n} from '@stencil/core';\nimport { displayTransition } from '../../utils/transitions';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n *\n * @part base - the root `details` element\n * @part header - the main `summary` ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part body - the wrapper around content\n * @part content - the main content wrapper\n */\n@Component({\n tag: 'nano-details',\n styleUrl: 'details.scss',\n shadow: true,\n})\nexport class Details {\n private hasStartSlot: boolean;\n private hasEndSlot: boolean;\n private mo?: MutationObserver;\n private stateChanging: boolean = false;\n private bodyEl: HTMLElement;\n private detailsEl: HTMLDetailsElement;\n private headerEl: HTMLElement;\n private contentEl: HTMLDivElement;\n private cacheHeight: number;\n\n @Element() private host: HTMLNanoDetailsElement;\n\n /** Summary / handle text. Use the `label` slot for HTML markup */\n @Prop() label: string = '';\n\n /** Should item be open on load */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /** Disables the details so it can't be toggled. */\n @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n\n /** Hide the handle. (You will need to control the hiding / showing of content with script) */\n @Prop() noHandle: boolean = false;\n\n /** Icon slot rotation amount (degrees) on open */\n @Prop() iconRotation: number = 90;\n\n /**\n * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\n * Set `useCacheHeight` to `true` try to keep animations smooth. */\n @Prop() useCacheHeight = false;\n\n /**\n * Emitted when the component opens.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoOpened: EventEmitter;\n\n /**\n * Emitted when the component closes.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoClosed: EventEmitter;\n\n /** Emitted after the details opens and all transitions are complete. */\n @Event() nanoAfterOpened: EventEmitter;\n\n /** Emitted after the details closes and all transitions are complete. */\n @Event() nanoAfterClosed: EventEmitter;\n\n @Watch('open')\n toggleClick() {\n this.stateChanging = true;\n if (this.open) this.show();\n else this.hide();\n }\n\n private onKeyDown = (e: KeyboardEvent) => {\n if (this.stateChanging || this.disabled) return;\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n this.open = !this.open;\n break;\n case 'ArrowUp':\n e.preventDefault();\n this.open = false;\n break;\n case 'ArrowDown':\n e.preventDefault();\n this.open = true;\n break;\n }\n };\n\n private onMouseDown = (e: MouseEvent) => {\n e.preventDefault();\n this.headerEl.focus();\n\n if (this.stateChanging || this.disabled) return;\n this.open = !this.open;\n };\n\n private hide() {\n const nanoClose = this.nanoClosed.emit(this.open);\n\n if (nanoClose.defaultPrevented) {\n this.open = true;\n this.detailsEl.open = true;\n return;\n }\n\n this.cacheHeight = this.contentEl.scrollHeight;\n this.bodyEl.style.height = this.cacheHeight + 'px';\n\n displayTransition(this.bodyEl, {\n className: 'is-shown',\n show: false,\n transitionProp: 'height',\n }).then(() => {\n this.stateChanging = false;\n this.detailsEl.open = false;\n this.bodyEl.classList.add('is-hidden');\n this.nanoAfterClosed.emit();\n });\n\n requestAnimationFrame(() => {\n this.bodyEl.style.height = '0px';\n });\n }\n\n private show() {\n const nanoOpen = this.nanoOpened.emit();\n this.detailsEl.open = true;\n\n if (nanoOpen.defaultPrevented) {\n this.open = false;\n this.detailsEl.open = false;\n return;\n }\n\n displayTransition(this.bodyEl, {\n className: 'is-shown',\n show: true,\n transitionProp: 'height',\n }).then(() => {\n this.stateChanging = false;\n this.bodyEl.style.height = 'auto';\n this.nanoAfterOpened.emit();\n });\n\n this.bodyEl.style.height =\n (this.useCacheHeight && this.cacheHeight\n ? this.cacheHeight\n : this.contentEl.scrollHeight) + 'px';\n }\n\n private attachMo() {\n if (this.mo || !this.detailsEl || !Build.isBrowser) return;\n\n this.mo = new MutationObserver((changes) => {\n if (this.stateChanging) return;\n\n for (const change of changes) {\n if (change.type === 'attributes' && change.attributeName === 'open') {\n this.open = this.detailsEl.open;\n }\n }\n });\n this.mo.observe(this.detailsEl, { attributes: true });\n }\n\n componentWillLoad() {\n this.hasStartSlot = !!this.host.querySelector('[slot=\"icon-start\"]');\n this.hasEndSlot = !!this.host.querySelector('[slot=\"icon-end\"]');\n }\n\n componentDidLoad() {\n this.bodyEl.style.height = this.open ? 'auto' : '0';\n if (this.open) this.detailsEl.setAttribute('open', 'true');\n this.attachMo();\n }\n\n connectedCallback() {\n this.attachMo();\n }\n\n disconnectedCallback() {\n if (this.mo) {\n this.mo.disconnect();\n this.mo = undefined;\n }\n }\n\n render() {\n return (\n <details\n part=\"base\"\n ref={(d: HTMLDetailsElement) => (this.detailsEl = d)}\n class={{\n details: true,\n open: this.open,\n disabled: this.disabled,\n }}\n >\n <summary\n part=\"header\"\n aria-controls=\"content\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n tabindex={this.disabled ? '-1' : '0'}\n style={{ display: this.noHandle ? 'none' : '' }}\n id=\"header\"\n role=\"button\"\n class=\"header\"\n ref={(s) => (this.headerEl = s)}\n onKeyDown={this.onKeyDown}\n onClick={this.onMouseDown}\n >\n {this.hasStartSlot ? (\n <span\n part=\"icon--start\"\n class=\"icon icon--start\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-start\" />\n </span>\n ) : (\n ''\n )}\n <div part=\"label\" class=\"label\">\n {this.label ? this.label : <slot name=\"label\" />}\n </div>\n {this.hasEndSlot ? (\n <span\n part=\"icon--end\"\n class=\"icon icon--end\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-end\" />\n </span>\n ) : (\n ''\n )}\n </summary>\n <div\n part=\"body\"\n class=\"body\"\n ref={(div) => (this.bodyEl = div)}\n tabindex=\"-1\"\n role=\"region\"\n aria-labelledby=\"header\"\n >\n <div\n part=\"content\"\n ref={(div) => (this.contentEl = div)}\n class=\"content\"\n id=\"content\"\n >\n <slot />\n </div>\n </div>\n </details>\n );\n }\n}\n"]}
|
|
@@ -79,7 +79,7 @@ export class Grid {
|
|
|
79
79
|
.join('')}
|
|
80
80
|
${this.showHelper
|
|
81
81
|
? /* css */ `
|
|
82
|
-
[cache-key="${this.cacheKey}"]
|
|
82
|
+
[cache-key="${this.cacheKey}"].grid--helper :nth-child(-n+${bp.cols}) {
|
|
83
83
|
display: block !important;
|
|
84
84
|
}
|
|
85
85
|
`
|
|
@@ -155,7 +155,7 @@ export class Grid {
|
|
|
155
155
|
this.constructSizeArray();
|
|
156
156
|
}
|
|
157
157
|
render() {
|
|
158
|
-
return (h(Host, null, h("div", { part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", null)), this.showHelper && (h("div", { class: "grid grid--helper", part: "helper" }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
|
|
158
|
+
return (h(Host, null, h("div", { part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", null)), this.showHelper && (h("div", { class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
|
|
159
159
|
}
|
|
160
160
|
static get is() { return "nano-grid"; }
|
|
161
161
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAErE;;;;;;;;;;;;;GAaG;AAMH,MAAM,OAAO,IAAI;;IACP,UAAK,GAKP,EAAE,CAAC;IAkHuD,WAAM,GACpE,GAAG,EAAE;MACH,MAAM,GAAG,GAAG,SAAS,CAAC;QACpB,IAAI,CAAC,KAAK;SACT,GAAG,CACF,CAAC,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC;mCAEhB,CAAC,CAAC,MAAM,CAAE,EAAE,CAAC,UAAqB,GAAG,CAAC,CAAC;QACrC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,IAAI;QAClC,CAAC,CAAC,EAAE,CAAC,UACT;0BACgB,IAAI,CAAC,QAAQ;iDACU,EAAE,CAAC,IAAI;gBAExC,EAAE,CAAC,QAAQ;QACT,CAAC,CAAC,kBAAkB,EAAE,CAAC,QAAQ,GAAG;QAClC,CAAC,CAAC,iCAAiC,EAAE,CAAC,IAAI,yBAAyB,EAAE,CAAC,IAAI,kCAC9E;;cAEA,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;SAClB,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACZ,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;QACnB,OAAO,SAAS,CAAC;gCACD,IAAI,CAAC,QAAQ,4BAA4B,EAAE,CAAC,IAAI,cAAc,IAAI;6CACrD,EAAE,CAAC,IAAI,cAAc,IAAI;yCAC7B,IAAI;;gCAEb,IAAI,CAAC,QAAQ,4BAA4B,EAAE,CAAC,IAAI,aAAa,IAAI;6CACpD,EAAE,CAAC,IAAI,aAAa,IAAI;4CACzB,IAAI;;eAEjC,CAAC;MACF,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC;gBACP,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;SACb,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACZ,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;QACnB,OAAO,SAAS,CAAC;kCACD,IAAI,CAAC,QAAQ,4BAA4B,EAAE,CAAC,IAAI,cAAc,IAAI;+CACrD,EAAE,CAAC,IAAI,cAAc,IAAI;wCAChC,IAAI;;kCAEV,IAAI,CAAC,QAAQ,4BAA4B,EAAE,CAAC,IAAI,aAAa,IAAI;+CACpD,EAAE,CAAC,IAAI,aAAa,IAAI;2CAC5B,IAAI;;iBAE9B,CAAC;MACF,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC;cAEX,IAAI,CAAC,UAAU;QACb,CAAC,CAAC,SAAS,CAAC;8BACE,IAAI,CAAC,QAAQ,kCAAkC,EAAE,CAAC,IAAI;;;eAGrE;QACC,CAAC,CAAC,EACN;;SAEH,CACA;SACA,IAAI,CAAC,EAAE,CAAC;KACZ,CAAC;MACA,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;;iBA7K8C,GAAG;iBAIH,GAAG;iBAIH,GAAG;kBAIF,IAAI;;;;;;;;;;;sBAiCR,KAAK;;EAiBpD,kBAAkB;IAChB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAEhB,IAAI,IAAI,CAAC,KAAK;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,UAAU,EAAE,CAAC;QACb,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,KAAK;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,KAAK;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,MAAM;MACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,MAAM;QACjB,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,KAAK;OACrB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,OAAO;MACd,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,OAAO;QAClB,UAAU,EAAE,IAAI,CAAC,MAAM;QACvB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,IAAI,CAAC,MAAM;OACtB,CAAC,CAAC;IAEL,IAAI,CAAC,QAAQ;MACX,IAAI,CAAC,KAAK;SACP,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,UAAU,IAAI,EAAE,CAAC,QAAQ,IAAI,EAAE,EAAE,CAAC;SAC/D,IAAI,CAAC,EAAE,CAAC;QACX,UAAU;QACV,IAAI,CAAC,UAAU,CAAC;EACpB,CAAC;EAoED,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,eAAY,IAAI,CAAC,QAAQ;QACpD,eAAQ,CACJ;MACL,IAAI,CAAC,UAAU,IAAI,CAClB,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,IACzC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CACxB,WAAK,KAAK,EAAC,mBAAmB,GAAG,CAClC,CAAC,CACE,CACP,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAtFC;EAAC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,UAAU,EAAE,CAAC;;oCAgEjD","sourcesContent":["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({ reflect: true }) 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({ reflect: true }) 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({ reflect: true }) 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({ reflect: true }) xlSize: number | string = 1000;\n\n /** the number of columns the grid has at the small breakpoint. */\n @Prop({ reflect: true }) sCols: number;\n\n /** the number of columns the grid has at the medium breakpoint. */\n @Prop({ reflect: true }) mCols: number;\n\n /** the number of columns the grid has at the large breakpoint. */\n @Prop({ reflect: true }) lCols: number;\n\n /** the number of columns the grid has at the xl breakpoint. */\n @Prop({ reflect: true }) xlCols: number;\n\n /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n @Prop({ reflect: true }) 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.lCols)\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 !!Number((bp.breakpoint as number) + 1)\n ? Number(bp.breakpoint) + 1 + 'px'\n : bp.breakpoint\n }) {\n [cache-key=\"${this.cacheKey}\"].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}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`\n }\n }\n ${[...Array(bp.cols)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n [cache-key=\"${this.cacheKey}\"].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 [cache-key=\"${this.cacheKey}\"].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 `;\n })\n .join('')}\n ${[...Array(24)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n [cache-key=\"${this.cacheKey}\"].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 [cache-key=\"${this.cacheKey}\"].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 [cache-key=\"${this.cacheKey}\"] .grid--helper :nth-child(-n+${bp.cols}) {\n display: block !important;\n }\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\" cache-key={this.cacheKey}>\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"]}
|
|
1
|
+
{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":"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","sourcesContent":["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({ reflect: true }) 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({ reflect: true }) 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({ reflect: true }) 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({ reflect: true }) xlSize: number | string = 1000;\n\n /** the number of columns the grid has at the small breakpoint. */\n @Prop({ reflect: true }) sCols: number;\n\n /** the number of columns the grid has at the medium breakpoint. */\n @Prop({ reflect: true }) mCols: number;\n\n /** the number of columns the grid has at the large breakpoint. */\n @Prop({ reflect: true }) lCols: number;\n\n /** the number of columns the grid has at the xl breakpoint. */\n @Prop({ reflect: true }) xlCols: number;\n\n /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n @Prop({ reflect: true }) 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.lCols)\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 !!Number((bp.breakpoint as number) + 1)\n ? Number(bp.breakpoint) + 1 + 'px'\n : bp.breakpoint\n }) {\n [cache-key=\"${this.cacheKey}\"].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}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`\n }\n }\n ${[...Array(bp.cols)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n [cache-key=\"${this.cacheKey}\"].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 [cache-key=\"${this.cacheKey}\"].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 `;\n })\n .join('')}\n ${[...Array(24)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n [cache-key=\"${this.cacheKey}\"].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 [cache-key=\"${this.cacheKey}\"].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 [cache-key=\"${this.cacheKey}\"].grid--helper :nth-child(-n+${bp.cols}) {\n display: block !important;\n }\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\" cache-key={this.cacheKey}>\n <slot />\n </div>\n {this.showHelper && (\n <div\n class=\"grid grid--helper\"\n part=\"helper\"\n cache-key={this.cacheKey}\n >\n {[...Array(24)].map(() => (\n <div class=\"grid__helper-item\" />\n ))}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -28,13 +28,15 @@ export const displayTransition = (el, options) => {
|
|
|
28
28
|
const opts = Object.assign({ className: '', show: true, showDisplay: 'block' }, options);
|
|
29
29
|
return new Promise((resolve) => {
|
|
30
30
|
const showCb = (e) => {
|
|
31
|
-
if (e.target === el || e.composedPath().some((el) => el === e.target))
|
|
31
|
+
if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
|
|
32
|
+
(!opts.transitionProp || opts.transitionProp === e.propertyName)) {
|
|
32
33
|
resolve('shown');
|
|
33
34
|
el.removeEventListener('transitionend', showCb);
|
|
34
35
|
}
|
|
35
36
|
};
|
|
36
37
|
const hideCb = (e) => {
|
|
37
|
-
if (e.target === el || e.composedPath().some((el) => el === e.target))
|
|
38
|
+
if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
|
|
39
|
+
(!opts.transitionProp || opts.transitionProp === e.propertyName)) {
|
|
38
40
|
el.style.display = 'none';
|
|
39
41
|
resolve('hidden');
|
|
40
42
|
el.removeEventListener('transitionend', hideCb);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"transitions.js","sourceRoot":"","sources":["../../src/utils/transitions.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,EAAe,EACc,EAAE;EAC/B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC7B,MAAM,QAAQ,GAAG,GAAG,EAAE;MACpB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;MAClD,OAAO,CAAC;IACV,CAAC,CAAC;IACF,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;IAC/C,KAAK;EACP,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,EAAe,EACf,OAKC,EAC4B,EAAE;EAC/B,MAAM,IAAI,mBACR,SAAS,EAAE,EAAE,EACb,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,OAAO,IACjB,OAAO,CACX,CAAC;EAEF,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC7B,MAAM,MAAM,GAAG,CAAC,CAAkB,EAAE,EAAE;MACpC,
|
|
1
|
+
{"version":3,"file":"transitions.js","sourceRoot":"","sources":["../../src/utils/transitions.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,EAAe,EACc,EAAE;EAC/B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC7B,MAAM,QAAQ,GAAG,GAAG,EAAE;MACpB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;MAClD,OAAO,CAAC;IACV,CAAC,CAAC;IACF,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;IAC/C,KAAK;EACP,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,EAAe,EACf,OAKC,EAC4B,EAAE;EAC/B,MAAM,IAAI,mBACR,SAAS,EAAE,EAAE,EACb,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,OAAO,IACjB,OAAO,CACX,CAAC;EAEF,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC7B,MAAM,MAAM,GAAG,CAAC,CAAkB,EAAE,EAAE;MACpC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;QACnE,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,KAAK,CAAC,CAAC,YAAY,CAAC,EAChE;QACA,OAAO,CAAC,OAAO,CAAC,CAAC;QACjB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,CAAkB,EAAE,EAAE;MACpC,IACE,CAAC,CAAC,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;QACnE,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,KAAK,CAAC,CAAC,YAAY,CAAC,EAChE;QACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,OAAO,CAAC,QAAQ,CAAC,CAAC;QAClB,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;OACjD;IACH,CAAC,CAAC;IAEF,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC;MACpC,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MACtC,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;KACxD;SAAM;MACL,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MAC7C,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACrC;EACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n return new Promise((resolve) => {\n const callback = () => {\n el.removeEventListener('transitionend', callback);\n resolve;\n };\n el.addEventListener('transitionend', callback);\n // ??\n });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param options\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n el: HTMLElement,\n options?: {\n className?: string;\n show?: boolean;\n showDisplay?: string;\n transitionProp?: string;\n }\n): Promise<'shown' | 'hidden'> => {\n const opts = {\n className: '',\n show: true,\n showDisplay: 'block',\n ...options,\n };\n\n return new Promise((resolve) => {\n const showCb = (e: TransitionEvent) => {\n if (\n (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n (!opts.transitionProp || opts.transitionProp === e.propertyName)\n ) {\n resolve('shown');\n el.removeEventListener('transitionend', showCb);\n }\n };\n\n const hideCb = (e: TransitionEvent) => {\n if (\n (e.target === el || e.composedPath().some((el) => el === e.target)) &&\n (!opts.transitionProp || opts.transitionProp === e.propertyName)\n ) {\n el.style.display = 'none';\n resolve('hidden');\n el.removeEventListener('transitionend', hideCb);\n }\n };\n\n if (opts.show) {\n el.addEventListener('transitionend', showCb);\n el.style.display = opts.showDisplay;\n el.dataset.displayTransition = 'true';\n setTimeout(() => el.classList.add(opts.className), 20);\n } else {\n el.addEventListener('transitionend', hideCb);\n el.classList.remove(opts.className);\n }\n });\n};\n"]}
|
package/dist/components/grid.js
CHANGED
|
@@ -195,7 +195,7 @@ const Grid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
|
|
|
195
195
|
.join('')}
|
|
196
196
|
${this.showHelper
|
|
197
197
|
? /* css */ `
|
|
198
|
-
[cache-key="${this.cacheKey}"]
|
|
198
|
+
[cache-key="${this.cacheKey}"].grid--helper :nth-child(-n+${bp.cols}) {
|
|
199
199
|
display: block !important;
|
|
200
200
|
}
|
|
201
201
|
`
|
|
@@ -271,7 +271,7 @@ const Grid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
|
|
|
271
271
|
this.constructSizeArray();
|
|
272
272
|
}
|
|
273
273
|
render() {
|
|
274
|
-
return (h(Host, null, h("div", { part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", null)), this.showHelper && (h("div", { class: "grid grid--helper", part: "helper" }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
|
|
274
|
+
return (h(Host, null, h("div", { part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", null)), this.showHelper && (h("div", { class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
|
|
275
275
|
}
|
|
276
276
|
static get watchers() { return {
|
|
277
277
|
"sTpl": ["constructSizeArray"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"grid.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"],"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({ reflect: true }) 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({ reflect: true }) 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({ reflect: true }) 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({ reflect: true }) xlSize: number | string = 1000;\n\n /** the number of columns the grid has at the small breakpoint. */\n @Prop({ reflect: true }) sCols: number;\n\n /** the number of columns the grid has at the medium breakpoint. */\n @Prop({ reflect: true }) mCols: number;\n\n /** the number of columns the grid has at the large breakpoint. */\n @Prop({ reflect: true }) lCols: number;\n\n /** the number of columns the grid has at the xl breakpoint. */\n @Prop({ reflect: true }) xlCols: number;\n\n /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n @Prop({ reflect: true }) 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.lCols)\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 !!Number((bp.breakpoint as number) + 1)\n ? Number(bp.breakpoint) + 1 + 'px'\n : bp.breakpoint\n }) {\n [cache-key=\"${this.cacheKey}\"].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}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`\n }\n }\n ${[...Array(bp.cols)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n [cache-key=\"${this.cacheKey}\"].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 [cache-key=\"${this.cacheKey}\"].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 `;\n })\n .join('')}\n ${[...Array(24)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n [cache-key=\"${this.cacheKey}\"].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 [cache-key=\"${this.cacheKey}\"].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 [cache-key=\"${this.cacheKey}\"] .grid--helper :nth-child(-n+${bp.cols}) {\n display: block !important;\n }\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\" cache-key={this.cacheKey}>\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"],"version":3}
|
|
1
|
+
{"file":"grid.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"],"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({ reflect: true }) 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({ reflect: true }) 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({ reflect: true }) 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({ reflect: true }) xlSize: number | string = 1000;\n\n /** the number of columns the grid has at the small breakpoint. */\n @Prop({ reflect: true }) sCols: number;\n\n /** the number of columns the grid has at the medium breakpoint. */\n @Prop({ reflect: true }) mCols: number;\n\n /** the number of columns the grid has at the large breakpoint. */\n @Prop({ reflect: true }) lCols: number;\n\n /** the number of columns the grid has at the xl breakpoint. */\n @Prop({ reflect: true }) xlCols: number;\n\n /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n @Prop({ reflect: true }) 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.lCols)\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 !!Number((bp.breakpoint as number) + 1)\n ? Number(bp.breakpoint) + 1 + 'px'\n : bp.breakpoint\n }) {\n [cache-key=\"${this.cacheKey}\"].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}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`\n }\n }\n ${[...Array(bp.cols)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n [cache-key=\"${this.cacheKey}\"].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 [cache-key=\"${this.cacheKey}\"].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 `;\n })\n .join('')}\n ${[...Array(24)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n [cache-key=\"${this.cacheKey}\"].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 [cache-key=\"${this.cacheKey}\"].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 [cache-key=\"${this.cacheKey}\"].grid--helper :nth-child(-n+${bp.cols}) {\n display: block !important;\n }\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\" cache-key={this.cacheKey}>\n <slot />\n </div>\n {this.showHelper && (\n <div\n class=\"grid grid--helper\"\n part=\"helper\"\n cache-key={this.cacheKey}\n >\n {[...Array(24)].map(() => (\n <div class=\"grid__helper-item\" />\n ))}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -13,6 +13,8 @@ const Details = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
13
13
|
this.__attachShadow();
|
|
14
14
|
this.nanoOpened = createEvent(this, "nanoOpened", 7);
|
|
15
15
|
this.nanoClosed = createEvent(this, "nanoClosed", 7);
|
|
16
|
+
this.nanoAfterOpened = createEvent(this, "nanoAfterOpened", 7);
|
|
17
|
+
this.nanoAfterClosed = createEvent(this, "nanoAfterClosed", 7);
|
|
16
18
|
this.stateChanging = false;
|
|
17
19
|
this.onKeyDown = (e) => {
|
|
18
20
|
if (this.stateChanging || this.disabled)
|
|
@@ -71,6 +73,7 @@ const Details = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
71
73
|
this.stateChanging = false;
|
|
72
74
|
this.detailsEl.open = false;
|
|
73
75
|
this.bodyEl.classList.add('is-hidden');
|
|
76
|
+
this.nanoAfterClosed.emit();
|
|
74
77
|
});
|
|
75
78
|
requestAnimationFrame(() => {
|
|
76
79
|
this.bodyEl.style.height = '0px';
|
|
@@ -91,10 +94,12 @@ const Details = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
91
94
|
}).then(() => {
|
|
92
95
|
this.stateChanging = false;
|
|
93
96
|
this.bodyEl.style.height = 'auto';
|
|
97
|
+
this.nanoAfterOpened.emit();
|
|
94
98
|
});
|
|
95
99
|
this.bodyEl.style.height =
|
|
96
|
-
(this.useCacheHeight
|
|
97
|
-
|
|
100
|
+
(this.useCacheHeight && this.cacheHeight
|
|
101
|
+
? this.cacheHeight
|
|
102
|
+
: this.contentEl.scrollHeight) + 'px';
|
|
98
103
|
}
|
|
99
104
|
attachMo() {
|
|
100
105
|
if (this.mo || !this.detailsEl || !Build.isBrowser)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nano-details.js","mappings":"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","names":[],"sources":["./src/components/details/details.scss?tag=nano-details&encapsulation=shadow","./src/components/details/details.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /**\n * @prop --padding: Default to 1em;\n\n * @prop --btn-padding: Defaults to var(--padding);\n * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get($colors, offwhite)});\n\n * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n * @prop --transition-duration: Time it takes to slide down and show content. Defaults to .2s;\n\n * @prop --border-width: Defaults to none;\n * @prop --border-color: Defaults to none;\n * @prop --border-style: Defaults to none;\n * @prop --border-radius: Defaults to none;\n * @prop --box-shadow: Defaults to none;\n * @prop --focus-style: Defaults to #{$control-focus-style}\n */\n\n @include text-inherit();\n\n --padding: 1em;\n --btn-padding: var(--padding);\n --content-padding: var(--padding);\n --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n --btn-bg-color--hover: var(--nano-color-tint, #{map.get($colors, offwhite)});\n --btn-text-color: var(--nano-color-base, #455556);\n --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n --transition-duration: 0.2s;\n --border-width: none;\n --border-color: none;\n --border-style: none;\n --border-radius: none;\n --box-shadow: none;\n --focus-style: #{$control-focus-style};\n\n display: block;\n border-style: var(--border-style);\n border-width: var(--border-width-dims);\n border-color: var(--border-color);\n border-radius: var(--border-radius-dims);\n box-shadow: var(--box-shadow);\n}\n\n:host([disabled]) {\n opacity: 0.5;\n}\n\n:host(:last-of-type) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n .open .content {\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n }\n}\n\n:host(:first-of-type) {\n --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n --border-radius-dims: var(--border-radius);\n --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n.header {\n height: auto;\n padding: var(--btn-padding);\n text-align: inherit;\n position: relative;\n font-size: 1em;\n line-height: 1;\n margin: 0;\n transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n display: flex;\n align-items: center;\n background: var(--btn-bg-color);\n color: var(--btn-text-color);\n border-radius: var(--border-radius-dims);\n cursor: pointer;\n\n &::-webkit-details-marker {\n display: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n box-shadow: var(--focus-style);\n outline: none;\n position: relative;\n z-index: 1;\n }\n\n &:hover {\n background: var(--btn-bg-color--hover);\n color: var(--btn-text-color--hover);\n }\n\n .open & {\n background: var(--btn-bg-color--open);\n color: var(--btn-text-color--open);\n border-end-end-radius: 0;\n border-end-start-radius: 0;\n }\n\n .disabled & {\n cursor: not-allowed;\n }\n\n .label {\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n flex: 1;\n display: inline-block;\n }\n\n .icon {\n line-height: 0;\n flex-direction: column;\n justify-content: center;\n display: inline-block;\n color: currentcolor;\n transition: 0.3s ease transform;\n transform-origin: center;\n\n &--start {\n margin-inline: 0 var(--btn-padding);\n margin-block: 0;\n }\n\n &--end {\n margin-inline: var(--btn-padding) 0;\n margin-block: 0;\n }\n\n ::slotted(nano-icon) {\n --color: currentcolor;\n }\n }\n}\n\n.body {\n overflow: hidden;\n transition: height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;\n outline: none;\n\n > * {\n .is-hidden & {\n animation: fade .1s ease reverse;\n }\n\n .open & {\n animation: fade var(--transition-duration, 0.3s) ease forwards;\n }\n }\n}\n\n.content {\n padding: var(--content-padding);\n}\n\n@keyframes fade {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n h,\n Element,\n Watch,\n Build,\n} from '@stencil/core';\nimport { displayTransition } from '../../utils/transitions';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n *\n * @part base - the root `details` element\n * @part header - the main `summary` ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part body - the wrapper around content\n * @part content - the main content wrapper\n */\n@Component({\n tag: 'nano-details',\n styleUrl: 'details.scss',\n shadow: true,\n})\nexport class Details {\n private hasStartSlot: boolean;\n private hasEndSlot: boolean;\n private mo?: MutationObserver;\n private stateChanging: boolean = false;\n private bodyEl: HTMLElement;\n private detailsEl: HTMLDetailsElement;\n private headerEl: HTMLElement;\n private contentEl: HTMLDivElement;\n private cacheHeight: number;\n\n @Element() private host: HTMLNanoDetailsElement;\n\n /** Summary / handle text. Use the `label` slot for HTML markup */\n @Prop() label: string = '';\n\n /** Should item be open on load */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /** Disables the details so it can't be toggled. */\n @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n\n /** Hide the handle. (You will need to control the hiding / showing of content with script) */\n @Prop() noHandle: boolean = false;\n\n /** Icon slot rotation amount (degrees) on open */\n @Prop() iconRotation: number = 90;\n\n /**\n * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\n * Set `useCacheHeight` to `true` try to keep animations smooth. */\n @Prop() useCacheHeight = false;\n\n /**\n * Emitted when the component opens.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoOpened: EventEmitter;\n\n /**\n * Emitted when the component closes.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoClosed: EventEmitter;\n\n @Watch('open')\n toggleClick() {\n this.stateChanging = true;\n if (this.open) this.show();\n else this.hide();\n }\n\n private onKeyDown = (e: KeyboardEvent) => {\n if (this.stateChanging || this.disabled) return;\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n this.open = !this.open;\n break;\n case 'ArrowUp':\n e.preventDefault();\n this.open = false;\n break;\n case 'ArrowDown':\n e.preventDefault();\n this.open = true;\n break;\n }\n };\n\n private onMouseDown = (e: MouseEvent) => {\n e.preventDefault();\n this.headerEl.focus();\n\n if (this.stateChanging || this.disabled) return;\n this.open = !this.open;\n };\n\n private hide() {\n const nanoClose = this.nanoClosed.emit(this.open);\n\n if (nanoClose.defaultPrevented) {\n this.open = true;\n this.detailsEl.open = true;\n return;\n }\n\n this.cacheHeight = this.contentEl.scrollHeight;\n this.bodyEl.style.height = this.cacheHeight + 'px';\n\n displayTransition(this.bodyEl, {\n className: 'is-shown',\n show: false,\n transitionProp: 'height',\n }).then(() => {\n this.stateChanging = false;\n this.detailsEl.open = false;\n this.bodyEl.classList.add('is-hidden');\n });\n\n requestAnimationFrame(() => {\n this.bodyEl.style.height = '0px';\n });\n }\n\n private show() {\n const nanoOpen = this.nanoOpened.emit();\n this.detailsEl.open = true;\n\n if (nanoOpen.defaultPrevented) {\n this.open = false;\n this.detailsEl.open = false;\n return;\n }\n\n displayTransition(this.bodyEl, {\n className: 'is-shown',\n show: true,\n transitionProp: 'height',\n }).then(() => {\n this.stateChanging = false;\n this.bodyEl.style.height = 'auto';\n });\n\n this.bodyEl.style.height =\n (this.useCacheHeight ? this.cacheHeight : this.contentEl.scrollHeight) +\n 'px';\n }\n\n private attachMo() {\n if (this.mo || !this.detailsEl || !Build.isBrowser) return;\n\n this.mo = new MutationObserver((changes) => {\n if (this.stateChanging) return;\n\n for (const change of changes) {\n if (change.type === 'attributes' && change.attributeName === 'open') {\n this.open = this.detailsEl.open;\n }\n }\n });\n this.mo.observe(this.detailsEl, { attributes: true });\n }\n\n componentWillLoad() {\n this.hasStartSlot = !!this.host.querySelector('[slot=\"icon-start\"]');\n this.hasEndSlot = !!this.host.querySelector('[slot=\"icon-end\"]');\n }\n\n componentDidLoad() {\n this.bodyEl.style.height = this.open ? 'auto' : '0';\n if (this.open) this.detailsEl.setAttribute('open', 'true');\n this.attachMo();\n }\n\n connectedCallback() {\n this.attachMo();\n }\n\n disconnectedCallback() {\n if (this.mo) {\n this.mo.disconnect();\n this.mo = undefined;\n }\n }\n\n render() {\n return (\n <details\n part=\"base\"\n ref={(d: HTMLDetailsElement) => (this.detailsEl = d)}\n class={{\n details: true,\n open: this.open,\n disabled: this.disabled,\n }}\n >\n <summary\n part=\"header\"\n aria-controls=\"content\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n tabindex={this.disabled ? '-1' : '0'}\n style={{ display: this.noHandle ? 'none' : '' }}\n id=\"header\"\n role=\"button\"\n class=\"header\"\n ref={(s) => (this.headerEl = s)}\n onKeyDown={this.onKeyDown}\n onClick={this.onMouseDown}\n >\n {this.hasStartSlot ? (\n <span\n part=\"icon--start\"\n class=\"icon icon--start\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-start\" />\n </span>\n ) : (\n ''\n )}\n <div part=\"label\" class=\"label\">\n {this.label ? this.label : <slot name=\"label\" />}\n </div>\n {this.hasEndSlot ? (\n <span\n part=\"icon--end\"\n class=\"icon icon--end\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-end\" />\n </span>\n ) : (\n ''\n )}\n </summary>\n <div\n part=\"body\"\n class=\"body\"\n ref={(div) => (this.bodyEl = div)}\n tabindex=\"-1\"\n role=\"region\"\n aria-labelledby=\"header\"\n >\n <div\n part=\"content\"\n ref={(div) => (this.contentEl = div)}\n class=\"content\"\n id=\"content\"\n >\n <slot />\n </div>\n </div>\n </details>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"nano-details.js","mappings":"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","names":[],"sources":["./src/components/details/details.scss?tag=nano-details&encapsulation=shadow","./src/components/details/details.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /**\n * @prop --padding: Default to 1em;\n\n * @prop --btn-padding: Defaults to var(--padding);\n * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get($colors, offwhite)});\n\n * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n * @prop --transition-duration: Time it takes to slide down and show content. Defaults to .2s;\n\n * @prop --border-width: Defaults to none;\n * @prop --border-color: Defaults to none;\n * @prop --border-style: Defaults to none;\n * @prop --border-radius: Defaults to none;\n * @prop --box-shadow: Defaults to none;\n * @prop --focus-style: Defaults to #{$control-focus-style}\n */\n\n @include text-inherit();\n\n --padding: 1em;\n --btn-padding: var(--padding);\n --content-padding: var(--padding);\n --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n --btn-bg-color--hover: var(--nano-color-tint, #{map.get($colors, offwhite)});\n --btn-text-color: var(--nano-color-base, #455556);\n --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n --transition-duration: 0.2s;\n --border-width: none;\n --border-color: none;\n --border-style: none;\n --border-radius: none;\n --box-shadow: none;\n --focus-style: #{$control-focus-style};\n\n display: block;\n border-style: var(--border-style);\n border-width: var(--border-width-dims);\n border-color: var(--border-color);\n border-radius: var(--border-radius-dims);\n box-shadow: var(--box-shadow);\n}\n\n:host([disabled]) {\n opacity: 0.5;\n}\n\n:host(:last-of-type) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n .open .content {\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n }\n}\n\n:host(:first-of-type) {\n --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n --border-radius-dims: var(--border-radius);\n --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n.header {\n height: auto;\n padding: var(--btn-padding);\n text-align: inherit;\n position: relative;\n font-size: 1em;\n line-height: 1;\n margin: 0;\n transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n display: flex;\n align-items: center;\n background: var(--btn-bg-color);\n color: var(--btn-text-color);\n border-radius: var(--border-radius-dims);\n cursor: pointer;\n\n &::-webkit-details-marker {\n display: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n box-shadow: var(--focus-style);\n outline: none;\n position: relative;\n z-index: 1;\n }\n\n &:hover {\n background: var(--btn-bg-color--hover);\n color: var(--btn-text-color--hover);\n }\n\n .open & {\n background: var(--btn-bg-color--open);\n color: var(--btn-text-color--open);\n border-end-end-radius: 0;\n border-end-start-radius: 0;\n }\n\n .disabled & {\n cursor: not-allowed;\n }\n\n .label {\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n flex: 1;\n display: inline-block;\n }\n\n .icon {\n line-height: 0;\n flex-direction: column;\n justify-content: center;\n display: inline-block;\n color: currentcolor;\n transition: 0.3s ease transform;\n transform-origin: center;\n\n &--start {\n margin-inline: 0 var(--btn-padding);\n margin-block: 0;\n }\n\n &--end {\n margin-inline: var(--btn-padding) 0;\n margin-block: 0;\n }\n\n ::slotted(nano-icon) {\n --color: currentcolor;\n }\n }\n}\n\n.body {\n overflow: hidden;\n transition: height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;\n outline: none;\n\n > * {\n .is-hidden & {\n animation: fade .1s ease reverse;\n }\n\n .open & {\n animation: fade var(--transition-duration, 0.3s) ease forwards;\n }\n }\n}\n\n.content {\n padding: var(--content-padding);\n}\n\n@keyframes fade {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n h,\n Element,\n Watch,\n Build,\n} from '@stencil/core';\nimport { displayTransition } from '../../utils/transitions';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n *\n * @part base - the root `details` element\n * @part header - the main `summary` ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part body - the wrapper around content\n * @part content - the main content wrapper\n */\n@Component({\n tag: 'nano-details',\n styleUrl: 'details.scss',\n shadow: true,\n})\nexport class Details {\n private hasStartSlot: boolean;\n private hasEndSlot: boolean;\n private mo?: MutationObserver;\n private stateChanging: boolean = false;\n private bodyEl: HTMLElement;\n private detailsEl: HTMLDetailsElement;\n private headerEl: HTMLElement;\n private contentEl: HTMLDivElement;\n private cacheHeight: number;\n\n @Element() private host: HTMLNanoDetailsElement;\n\n /** Summary / handle text. Use the `label` slot for HTML markup */\n @Prop() label: string = '';\n\n /** Should item be open on load */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /** Disables the details so it can't be toggled. */\n @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n\n /** Hide the handle. (You will need to control the hiding / showing of content with script) */\n @Prop() noHandle: boolean = false;\n\n /** Icon slot rotation amount (degrees) on open */\n @Prop() iconRotation: number = 90;\n\n /**\n * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\n * Set `useCacheHeight` to `true` try to keep animations smooth. */\n @Prop() useCacheHeight = false;\n\n /**\n * Emitted when the component opens.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoOpened: EventEmitter;\n\n /**\n * Emitted when the component closes.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoClosed: EventEmitter;\n\n /** Emitted after the details opens and all transitions are complete. */\n @Event() nanoAfterOpened: EventEmitter;\n\n /** Emitted after the details closes and all transitions are complete. */\n @Event() nanoAfterClosed: EventEmitter;\n\n @Watch('open')\n toggleClick() {\n this.stateChanging = true;\n if (this.open) this.show();\n else this.hide();\n }\n\n private onKeyDown = (e: KeyboardEvent) => {\n if (this.stateChanging || this.disabled) return;\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n this.open = !this.open;\n break;\n case 'ArrowUp':\n e.preventDefault();\n this.open = false;\n break;\n case 'ArrowDown':\n e.preventDefault();\n this.open = true;\n break;\n }\n };\n\n private onMouseDown = (e: MouseEvent) => {\n e.preventDefault();\n this.headerEl.focus();\n\n if (this.stateChanging || this.disabled) return;\n this.open = !this.open;\n };\n\n private hide() {\n const nanoClose = this.nanoClosed.emit(this.open);\n\n if (nanoClose.defaultPrevented) {\n this.open = true;\n this.detailsEl.open = true;\n return;\n }\n\n this.cacheHeight = this.contentEl.scrollHeight;\n this.bodyEl.style.height = this.cacheHeight + 'px';\n\n displayTransition(this.bodyEl, {\n className: 'is-shown',\n show: false,\n transitionProp: 'height',\n }).then(() => {\n this.stateChanging = false;\n this.detailsEl.open = false;\n this.bodyEl.classList.add('is-hidden');\n this.nanoAfterClosed.emit();\n });\n\n requestAnimationFrame(() => {\n this.bodyEl.style.height = '0px';\n });\n }\n\n private show() {\n const nanoOpen = this.nanoOpened.emit();\n this.detailsEl.open = true;\n\n if (nanoOpen.defaultPrevented) {\n this.open = false;\n this.detailsEl.open = false;\n return;\n }\n\n displayTransition(this.bodyEl, {\n className: 'is-shown',\n show: true,\n transitionProp: 'height',\n }).then(() => {\n this.stateChanging = false;\n this.bodyEl.style.height = 'auto';\n this.nanoAfterOpened.emit();\n });\n\n this.bodyEl.style.height =\n (this.useCacheHeight && this.cacheHeight\n ? this.cacheHeight\n : this.contentEl.scrollHeight) + 'px';\n }\n\n private attachMo() {\n if (this.mo || !this.detailsEl || !Build.isBrowser) return;\n\n this.mo = new MutationObserver((changes) => {\n if (this.stateChanging) return;\n\n for (const change of changes) {\n if (change.type === 'attributes' && change.attributeName === 'open') {\n this.open = this.detailsEl.open;\n }\n }\n });\n this.mo.observe(this.detailsEl, { attributes: true });\n }\n\n componentWillLoad() {\n this.hasStartSlot = !!this.host.querySelector('[slot=\"icon-start\"]');\n this.hasEndSlot = !!this.host.querySelector('[slot=\"icon-end\"]');\n }\n\n componentDidLoad() {\n this.bodyEl.style.height = this.open ? 'auto' : '0';\n if (this.open) this.detailsEl.setAttribute('open', 'true');\n this.attachMo();\n }\n\n connectedCallback() {\n this.attachMo();\n }\n\n disconnectedCallback() {\n if (this.mo) {\n this.mo.disconnect();\n this.mo = undefined;\n }\n }\n\n render() {\n return (\n <details\n part=\"base\"\n ref={(d: HTMLDetailsElement) => (this.detailsEl = d)}\n class={{\n details: true,\n open: this.open,\n disabled: this.disabled,\n }}\n >\n <summary\n part=\"header\"\n aria-controls=\"content\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n tabindex={this.disabled ? '-1' : '0'}\n style={{ display: this.noHandle ? 'none' : '' }}\n id=\"header\"\n role=\"button\"\n class=\"header\"\n ref={(s) => (this.headerEl = s)}\n onKeyDown={this.onKeyDown}\n onClick={this.onMouseDown}\n >\n {this.hasStartSlot ? (\n <span\n part=\"icon--start\"\n class=\"icon icon--start\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-start\" />\n </span>\n ) : (\n ''\n )}\n <div part=\"label\" class=\"label\">\n {this.label ? this.label : <slot name=\"label\" />}\n </div>\n {this.hasEndSlot ? (\n <span\n part=\"icon--end\"\n class=\"icon icon--end\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-end\" />\n </span>\n ) : (\n ''\n )}\n </summary>\n <div\n part=\"body\"\n class=\"body\"\n ref={(div) => (this.bodyEl = div)}\n tabindex=\"-1\"\n role=\"region\"\n aria-labelledby=\"header\"\n >\n <div\n part=\"content\"\n ref={(div) => (this.contentEl = div)}\n class=\"content\"\n id=\"content\"\n >\n <slot />\n </div>\n </div>\n </details>\n );\n }\n}\n"],"version":3}
|
|
@@ -18,13 +18,15 @@ const displayTransition = (el, options) => {
|
|
|
18
18
|
const opts = Object.assign({ className: '', show: true, showDisplay: 'block' }, options);
|
|
19
19
|
return new Promise((resolve) => {
|
|
20
20
|
const showCb = (e) => {
|
|
21
|
-
if (e.target === el || e.composedPath().some((el) => el === e.target))
|
|
21
|
+
if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
|
|
22
|
+
(!opts.transitionProp || opts.transitionProp === e.propertyName)) {
|
|
22
23
|
resolve('shown');
|
|
23
24
|
el.removeEventListener('transitionend', showCb);
|
|
24
25
|
}
|
|
25
26
|
};
|
|
26
27
|
const hideCb = (e) => {
|
|
27
|
-
if (e.target === el || e.composedPath().some((el) => el === e.target))
|
|
28
|
+
if ((e.target === el || e.composedPath().some((el) => el === e.target)) &&
|
|
29
|
+
(!opts.transitionProp || opts.transitionProp === e.propertyName)) {
|
|
28
30
|
el.style.display = 'none';
|
|
29
31
|
resolve('hidden');
|
|
30
32
|
el.removeEventListener('transitionend', hideCb);
|