@nanoporetech-digital/components 6.8.0 → 6.8.2
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-more-less.cjs.entry.js +18 -11
- package/dist/cjs/nano-more-less.cjs.entry.js.map +1 -1
- package/dist/cjs/{nano-table-b4de2576.js → nano-table-d92fc978.js} +2 -2
- package/dist/cjs/{nano-table-b4de2576.js.map → nano-table-d92fc978.js.map} +1 -1
- package/dist/cjs/nano-table.cjs.entry.js +1 -1
- package/dist/cjs/{table.worker-074a4646.js → table.worker-370e3f49.js} +2 -2
- package/dist/cjs/table.worker-370e3f49.js.map +1 -0
- package/dist/collection/components/more-less/more-less.js +18 -11
- package/dist/collection/components/more-less/more-less.js.map +1 -1
- package/dist/components/nano-more-less.js +18 -11
- package/dist/components/nano-more-less.js.map +1 -1
- package/dist/esm/nano-more-less.entry.js +18 -11
- package/dist/esm/nano-more-less.entry.js.map +1 -1
- package/dist/esm/{nano-table-dd08a12c.js → nano-table-7b6d2752.js} +2 -2
- package/dist/esm/{nano-table-dd08a12c.js.map → nano-table-7b6d2752.js.map} +1 -1
- package/dist/esm/nano-table.entry.js +1 -1
- package/dist/esm/{table.worker-094f28de.js → table.worker-e08f657d.js} +2 -2
- package/dist/esm/table.worker-e08f657d.js.map +1 -0
- package/dist/nano-components/nano-more-less.entry.js +1 -1
- package/dist/nano-components/nano-more-less.entry.js.map +1 -1
- package/dist/nano-components/{nano-table-dd08a12c.js → nano-table-7b6d2752.js} +2 -2
- package/dist/nano-components/nano-table.entry.js +1 -1
- package/dist/nano-components/table.worker-e08f657d.js +5 -0
- package/dist/types/components/more-less/more-less.d.ts +1 -1
- package/docs-json.json +1 -1
- package/hydrate/index.js +18 -11
- package/package.json +2 -2
- package/dist/cjs/table.worker-074a4646.js.map +0 -1
- package/dist/esm/table.worker-094f28de.js.map +0 -1
- package/dist/nano-components/table.worker-094f28de.js +0 -5
- /package/dist/nano-components/{nano-table-dd08a12c.js.map → nano-table-7b6d2752.js.map} +0 -0
- /package/dist/nano-components/{table.worker-094f28de.js.map → table.worker-e08f657d.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-d92fc978.js');
|
|
9
9
|
require('./index-14451c95.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-d92fc978.js');
|
|
7
7
|
require('./index-14451c95.js');
|
|
8
8
|
require('./math-a8123703.js');
|
|
9
9
|
require('./throttle-dfa64b9e.js');
|
|
@@ -23,4 +23,4 @@ exports.workerMsgId = workerMsgId;
|
|
|
23
23
|
exports.workerName = workerName;
|
|
24
24
|
exports.workerPath = workerPath;
|
|
25
25
|
|
|
26
|
-
//# sourceMappingURL=table.worker-
|
|
26
|
+
//# sourceMappingURL=table.worker-370e3f49.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"table.worker-370e3f49.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
|
@@ -22,11 +22,16 @@ export class Rating {
|
|
|
22
22
|
this.noHideBtn = false;
|
|
23
23
|
}
|
|
24
24
|
get children() {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
25
|
+
let children;
|
|
26
|
+
if (this.childrenSelector) {
|
|
27
|
+
children = this.host.querySelectorAll(this.childrenSelector);
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
children = this.host.__children.length
|
|
31
|
+
? this.host.__children
|
|
32
|
+
: this.host.children;
|
|
33
|
+
}
|
|
34
|
+
return Array.from(children).filter((ele) => !ele.hasAttribute('slot'));
|
|
30
35
|
}
|
|
31
36
|
handleShowHideElements() {
|
|
32
37
|
this.slottedElements.forEach((ele, i) => {
|
|
@@ -35,7 +40,7 @@ export class Rating {
|
|
|
35
40
|
ele.style.display = '';
|
|
36
41
|
}
|
|
37
42
|
}
|
|
38
|
-
else if (i >= this.maxToShow
|
|
43
|
+
else if (i >= this.maxToShow) {
|
|
39
44
|
ele.style.display = 'none';
|
|
40
45
|
}
|
|
41
46
|
});
|
|
@@ -49,10 +54,9 @@ export class Rating {
|
|
|
49
54
|
mo.observe(this.host, { childList: true });
|
|
50
55
|
}
|
|
51
56
|
processSlottedContent() {
|
|
52
|
-
const
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
this.slottedElements = elements;
|
|
57
|
+
const diff = this.children.filter((x) => !this.slottedElements.includes(x));
|
|
58
|
+
if (diff?.length)
|
|
59
|
+
this.slottedElements = this.children;
|
|
56
60
|
}
|
|
57
61
|
handleClick(_e) {
|
|
58
62
|
this.show = !this.show;
|
|
@@ -68,7 +72,10 @@ export class Rating {
|
|
|
68
72
|
this.mo.disconnect();
|
|
69
73
|
}
|
|
70
74
|
render() {
|
|
71
|
-
return (h(Host, null, h("slot", null),
|
|
75
|
+
return (h(Host, null, h("slot", null), this.slottedElements?.length > this.maxToShow && [
|
|
76
|
+
h("div", { style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { name: "less" }, h("button", null, "Show more (+", this.slottedElements.length - this.maxToShow, ")"))),
|
|
77
|
+
!this.noHideBtn ? (h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, h("slot", { name: "more" }, h("button", null, "Show less (-", this.slottedElements.length - this.maxToShow, ")")))) : (''),
|
|
78
|
+
]));
|
|
72
79
|
}
|
|
73
80
|
static get is() { return "nano-more-less"; }
|
|
74
81
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"more-less.js","sourceRoot":"","sources":["../../../src/components/more-less/more-less.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,CAAC,EAED,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,MAAM;;2BAGyB,EAAE;gBAIG,KAAK;;qBAOhC,CAAC;qBAGD,KAAK;;EAEzB,IAAI,QAAQ;IACV,IAAI,IAAI,CAAC,gBAAgB;
|
|
1
|
+
{"version":3,"file":"more-less.js","sourceRoot":"","sources":["../../../src/components/more-less/more-less.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Prop,\n h,\n ComponentInterface,\n Host,\n Build,\n Watch,\n State,\n} from '@stencil/core';\n\n/**\n * A simple component to show more or less elements.\n *\n * @slot less - a button displayed when all fewer are shown. When clicked will show elements\n * @slot more - a button displayed when all items are shown. When clicked will hide elements\n * @slot - default slot displaying children elements to show or hide\n *\n * @part button-wrapper - wraps the 'more' / 'less' buttons\n * @part button-wrapper--more - wraps the 'more' button\n * @part button-wrapper--less - wraps the 'less' button\n */\n@Component({\n tag: 'nano-more-less',\n scoped: true,\n styles: /* css */ `:host { display: contents; }`,\n})\nexport class Rating implements ComponentInterface {\n private mo: MutationObserver;\n\n @State() slottedElements: HTMLElement[] = [];\n @Element() host: HTMLNanoMoreLessElement;\n\n /** The default state. `false` - excess items are hidden. `true` - excess items are shown. */\n @Prop({ reflect: true, mutable: true }) show = false;\n\n /** Optional JS selector to target which elements to hide or show */\n @Prop() childrenSelector: string;\n\n /** The maximum number of items to show when `show` is true.\n * Excess items will be hidden. */\n @Prop() maxToShow = 3;\n\n /** Only show the 'show more' button */\n @Prop() noHideBtn = false;\n\n get children() {\n let children: NodeListOf<Element> | HTMLCollectionOf<Element>;\n\n if (this.childrenSelector) {\n children = this.host.querySelectorAll(this.childrenSelector);\n } else {\n children = this.host.__children.length\n ? this.host.__children\n : this.host.children;\n }\n return Array.from(children).filter(\n (ele) => !ele.hasAttribute('slot')\n ) as HTMLElement[];\n }\n\n @Watch('slottedElements')\n @Watch('maxToShow')\n @Watch('show')\n handleShowHideElements() {\n this.slottedElements.forEach((ele, i) => {\n if (this.show) {\n if (ele.style.display === 'none') {\n ele.style.display = '';\n }\n } else if (i >= this.maxToShow) {\n ele.style.display = 'none';\n }\n });\n }\n\n private slotChangeObserver() {\n if (!Build.isBrowser) return;\n const mo = (this.mo = new MutationObserver(() => {\n this.processSlottedContent();\n }));\n mo.observe(this.host, { childList: true });\n }\n\n private processSlottedContent() {\n const diff = this.children.filter((x) => !this.slottedElements.includes(x));\n if (diff?.length) this.slottedElements = this.children;\n }\n\n private handleClick(_e: MouseEvent) {\n this.show = !this.show;\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n connectedCallback() {\n this.processSlottedContent();\n }\n\n disconnectedCallback() {\n if (Build.isBrowser && this.mo) this.mo.disconnect();\n }\n\n render() {\n return (\n <Host>\n <slot />\n {this.slottedElements?.length > this.maxToShow && [\n <div\n style={{ display: this.show ? 'none' : 'contents' }}\n class=\"button-wrapper\"\n part=\"button-wrapper button-wrapper--less\"\n onClick={(e) => this.handleClick(e)}\n >\n <slot name=\"less\">\n <button>\n Show more (+{this.slottedElements.length - this.maxToShow})\n </button>\n </slot>\n </div>,\n !this.noHideBtn ? (\n <div\n style={{ display: this.show ? 'contents' : 'none' }}\n class=\"button-wrapper\"\n part=\"button-wrapper button-wrapper--more\"\n onClick={(e) => this.handleClick(e)}\n >\n <slot name=\"more\">\n <button>\n Show less (-{this.slottedElements.length - this.maxToShow})\n </button>\n </slot>\n </div>\n ) : (\n ''\n ),\n ]}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -14,11 +14,16 @@ const Rating = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
14
14
|
this.noHideBtn = false;
|
|
15
15
|
}
|
|
16
16
|
get children() {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
let children;
|
|
18
|
+
if (this.childrenSelector) {
|
|
19
|
+
children = this.host.querySelectorAll(this.childrenSelector);
|
|
20
|
+
}
|
|
21
|
+
else {
|
|
22
|
+
children = this.host.__children.length
|
|
23
|
+
? this.host.__children
|
|
24
|
+
: this.host.children;
|
|
25
|
+
}
|
|
26
|
+
return Array.from(children).filter((ele) => !ele.hasAttribute('slot'));
|
|
22
27
|
}
|
|
23
28
|
handleShowHideElements() {
|
|
24
29
|
this.slottedElements.forEach((ele, i) => {
|
|
@@ -27,7 +32,7 @@ const Rating = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
27
32
|
ele.style.display = '';
|
|
28
33
|
}
|
|
29
34
|
}
|
|
30
|
-
else if (i >= this.maxToShow
|
|
35
|
+
else if (i >= this.maxToShow) {
|
|
31
36
|
ele.style.display = 'none';
|
|
32
37
|
}
|
|
33
38
|
});
|
|
@@ -41,10 +46,9 @@ const Rating = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
41
46
|
mo.observe(this.host, { childList: true });
|
|
42
47
|
}
|
|
43
48
|
processSlottedContent() {
|
|
44
|
-
const
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
this.slottedElements = elements;
|
|
49
|
+
const diff = this.children.filter((x) => !this.slottedElements.includes(x));
|
|
50
|
+
if (diff?.length)
|
|
51
|
+
this.slottedElements = this.children;
|
|
48
52
|
}
|
|
49
53
|
handleClick(_e) {
|
|
50
54
|
this.show = !this.show;
|
|
@@ -60,7 +64,10 @@ const Rating = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
60
64
|
this.mo.disconnect();
|
|
61
65
|
}
|
|
62
66
|
render() {
|
|
63
|
-
return (h(Host, null, h("slot", null),
|
|
67
|
+
return (h(Host, null, h("slot", null), this.slottedElements?.length > this.maxToShow && [
|
|
68
|
+
h("div", { style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { name: "less" }, h("button", null, "Show more (+", this.slottedElements.length - this.maxToShow, ")"))),
|
|
69
|
+
!this.noHideBtn ? (h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, h("slot", { name: "more" }, h("button", null, "Show less (-", this.slottedElements.length - this.maxToShow, ")")))) : (''),
|
|
70
|
+
]));
|
|
64
71
|
}
|
|
65
72
|
get host() { return this; }
|
|
66
73
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nano-more-less.js","mappings":";;;;;MA4Ba,MAAM;;;;2BAGyB,EAAE;gBAIG,KAAK;;qBAOhC,CAAC;qBAGD,KAAK;;EAEzB,IAAI,QAAQ;IACV,IAAI,IAAI,CAAC,gBAAgB;
|
|
1
|
+
{"file":"nano-more-less.js","mappings":"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","names":[],"sources":["./src/components/more-less/more-less.tsx"],"sourcesContent":["import {\n Component,\n Element,\n Prop,\n h,\n ComponentInterface,\n Host,\n Build,\n Watch,\n State,\n} from '@stencil/core';\n\n/**\n * A simple component to show more or less elements.\n *\n * @slot less - a button displayed when all fewer are shown. When clicked will show elements\n * @slot more - a button displayed when all items are shown. When clicked will hide elements\n * @slot - default slot displaying children elements to show or hide\n *\n * @part button-wrapper - wraps the 'more' / 'less' buttons\n * @part button-wrapper--more - wraps the 'more' button\n * @part button-wrapper--less - wraps the 'less' button\n */\n@Component({\n tag: 'nano-more-less',\n scoped: true,\n styles: /* css */ `:host { display: contents; }`,\n})\nexport class Rating implements ComponentInterface {\n private mo: MutationObserver;\n\n @State() slottedElements: HTMLElement[] = [];\n @Element() host: HTMLNanoMoreLessElement;\n\n /** The default state. `false` - excess items are hidden. `true` - excess items are shown. */\n @Prop({ reflect: true, mutable: true }) show = false;\n\n /** Optional JS selector to target which elements to hide or show */\n @Prop() childrenSelector: string;\n\n /** The maximum number of items to show when `show` is true.\n * Excess items will be hidden. */\n @Prop() maxToShow = 3;\n\n /** Only show the 'show more' button */\n @Prop() noHideBtn = false;\n\n get children() {\n let children: NodeListOf<Element> | HTMLCollectionOf<Element>;\n\n if (this.childrenSelector) {\n children = this.host.querySelectorAll(this.childrenSelector);\n } else {\n children = this.host.__children.length\n ? this.host.__children\n : this.host.children;\n }\n return Array.from(children).filter(\n (ele) => !ele.hasAttribute('slot')\n ) as HTMLElement[];\n }\n\n @Watch('slottedElements')\n @Watch('maxToShow')\n @Watch('show')\n handleShowHideElements() {\n this.slottedElements.forEach((ele, i) => {\n if (this.show) {\n if (ele.style.display === 'none') {\n ele.style.display = '';\n }\n } else if (i >= this.maxToShow) {\n ele.style.display = 'none';\n }\n });\n }\n\n private slotChangeObserver() {\n if (!Build.isBrowser) return;\n const mo = (this.mo = new MutationObserver(() => {\n this.processSlottedContent();\n }));\n mo.observe(this.host, { childList: true });\n }\n\n private processSlottedContent() {\n const diff = this.children.filter((x) => !this.slottedElements.includes(x));\n if (diff?.length) this.slottedElements = this.children;\n }\n\n private handleClick(_e: MouseEvent) {\n this.show = !this.show;\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n connectedCallback() {\n this.processSlottedContent();\n }\n\n disconnectedCallback() {\n if (Build.isBrowser && this.mo) this.mo.disconnect();\n }\n\n render() {\n return (\n <Host>\n <slot />\n {this.slottedElements?.length > this.maxToShow && [\n <div\n style={{ display: this.show ? 'none' : 'contents' }}\n class=\"button-wrapper\"\n part=\"button-wrapper button-wrapper--less\"\n onClick={(e) => this.handleClick(e)}\n >\n <slot name=\"less\">\n <button>\n Show more (+{this.slottedElements.length - this.maxToShow})\n </button>\n </slot>\n </div>,\n !this.noHideBtn ? (\n <div\n style={{ display: this.show ? 'contents' : 'none' }}\n class=\"button-wrapper\"\n part=\"button-wrapper button-wrapper--more\"\n onClick={(e) => this.handleClick(e)}\n >\n <slot name=\"more\">\n <button>\n Show less (-{this.slottedElements.length - this.maxToShow})\n </button>\n </slot>\n </div>\n ) : (\n ''\n ),\n ]}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -13,11 +13,16 @@ const Rating = class {
|
|
|
13
13
|
this.noHideBtn = false;
|
|
14
14
|
}
|
|
15
15
|
get children() {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
let children;
|
|
17
|
+
if (this.childrenSelector) {
|
|
18
|
+
children = this.host.querySelectorAll(this.childrenSelector);
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
children = this.host.__children.length
|
|
22
|
+
? this.host.__children
|
|
23
|
+
: this.host.children;
|
|
24
|
+
}
|
|
25
|
+
return Array.from(children).filter((ele) => !ele.hasAttribute('slot'));
|
|
21
26
|
}
|
|
22
27
|
handleShowHideElements() {
|
|
23
28
|
this.slottedElements.forEach((ele, i) => {
|
|
@@ -26,7 +31,7 @@ const Rating = class {
|
|
|
26
31
|
ele.style.display = '';
|
|
27
32
|
}
|
|
28
33
|
}
|
|
29
|
-
else if (i >= this.maxToShow
|
|
34
|
+
else if (i >= this.maxToShow) {
|
|
30
35
|
ele.style.display = 'none';
|
|
31
36
|
}
|
|
32
37
|
});
|
|
@@ -38,10 +43,9 @@ const Rating = class {
|
|
|
38
43
|
mo.observe(this.host, { childList: true });
|
|
39
44
|
}
|
|
40
45
|
processSlottedContent() {
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
this.slottedElements = elements;
|
|
46
|
+
const diff = this.children.filter((x) => !this.slottedElements.includes(x));
|
|
47
|
+
if (diff?.length)
|
|
48
|
+
this.slottedElements = this.children;
|
|
45
49
|
}
|
|
46
50
|
handleClick(_e) {
|
|
47
51
|
this.show = !this.show;
|
|
@@ -57,7 +61,10 @@ const Rating = class {
|
|
|
57
61
|
this.mo.disconnect();
|
|
58
62
|
}
|
|
59
63
|
render() {
|
|
60
|
-
return (h(Host, null, h("slot", null),
|
|
64
|
+
return (h(Host, null, h("slot", null), this.slottedElements?.length > this.maxToShow && [
|
|
65
|
+
h("div", { style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { name: "less" }, h("button", null, "Show more (+", this.slottedElements.length - this.maxToShow, ")"))),
|
|
66
|
+
!this.noHideBtn ? (h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, h("slot", { name: "more" }, h("button", null, "Show less (-", this.slottedElements.length - this.maxToShow, ")")))) : (''),
|
|
67
|
+
]));
|
|
61
68
|
}
|
|
62
69
|
get host() { return getElement(this); }
|
|
63
70
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nano-more-less.entry.js","mappings":";;;;;MA4Ba,MAAM;;;2BAGyB,EAAE;gBAIG,KAAK;;qBAOhC,CAAC;qBAGD,KAAK;;EAEzB,IAAI,QAAQ;IACV,IAAI,IAAI,CAAC,gBAAgB;
|
|
1
|
+
{"file":"nano-more-less.entry.js","mappings":"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","names":[],"sources":["./src/components/more-less/more-less.tsx"],"sourcesContent":["import {\n Component,\n Element,\n Prop,\n h,\n ComponentInterface,\n Host,\n Build,\n Watch,\n State,\n} from '@stencil/core';\n\n/**\n * A simple component to show more or less elements.\n *\n * @slot less - a button displayed when all fewer are shown. When clicked will show elements\n * @slot more - a button displayed when all items are shown. When clicked will hide elements\n * @slot - default slot displaying children elements to show or hide\n *\n * @part button-wrapper - wraps the 'more' / 'less' buttons\n * @part button-wrapper--more - wraps the 'more' button\n * @part button-wrapper--less - wraps the 'less' button\n */\n@Component({\n tag: 'nano-more-less',\n scoped: true,\n styles: /* css */ `:host { display: contents; }`,\n})\nexport class Rating implements ComponentInterface {\n private mo: MutationObserver;\n\n @State() slottedElements: HTMLElement[] = [];\n @Element() host: HTMLNanoMoreLessElement;\n\n /** The default state. `false` - excess items are hidden. `true` - excess items are shown. */\n @Prop({ reflect: true, mutable: true }) show = false;\n\n /** Optional JS selector to target which elements to hide or show */\n @Prop() childrenSelector: string;\n\n /** The maximum number of items to show when `show` is true.\n * Excess items will be hidden. */\n @Prop() maxToShow = 3;\n\n /** Only show the 'show more' button */\n @Prop() noHideBtn = false;\n\n get children() {\n let children: NodeListOf<Element> | HTMLCollectionOf<Element>;\n\n if (this.childrenSelector) {\n children = this.host.querySelectorAll(this.childrenSelector);\n } else {\n children = this.host.__children.length\n ? this.host.__children\n : this.host.children;\n }\n return Array.from(children).filter(\n (ele) => !ele.hasAttribute('slot')\n ) as HTMLElement[];\n }\n\n @Watch('slottedElements')\n @Watch('maxToShow')\n @Watch('show')\n handleShowHideElements() {\n this.slottedElements.forEach((ele, i) => {\n if (this.show) {\n if (ele.style.display === 'none') {\n ele.style.display = '';\n }\n } else if (i >= this.maxToShow) {\n ele.style.display = 'none';\n }\n });\n }\n\n private slotChangeObserver() {\n if (!Build.isBrowser) return;\n const mo = (this.mo = new MutationObserver(() => {\n this.processSlottedContent();\n }));\n mo.observe(this.host, { childList: true });\n }\n\n private processSlottedContent() {\n const diff = this.children.filter((x) => !this.slottedElements.includes(x));\n if (diff?.length) this.slottedElements = this.children;\n }\n\n private handleClick(_e: MouseEvent) {\n this.show = !this.show;\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n connectedCallback() {\n this.processSlottedContent();\n }\n\n disconnectedCallback() {\n if (Build.isBrowser && this.mo) this.mo.disconnect();\n }\n\n render() {\n return (\n <Host>\n <slot />\n {this.slottedElements?.length > this.maxToShow && [\n <div\n style={{ display: this.show ? 'none' : 'contents' }}\n class=\"button-wrapper\"\n part=\"button-wrapper button-wrapper--less\"\n onClick={(e) => this.handleClick(e)}\n >\n <slot name=\"less\">\n <button>\n Show more (+{this.slottedElements.length - this.maxToShow})\n </button>\n </slot>\n </div>,\n !this.noHideBtn ? (\n <div\n style={{ display: this.show ? 'contents' : 'none' }}\n class=\"button-wrapper\"\n part=\"button-wrapper button-wrapper--more\"\n onClick={(e) => this.handleClick(e)}\n >\n <slot name=\"more\">\n <button>\n Show less (-{this.slottedElements.length - this.maxToShow})\n </button>\n </slot>\n </div>\n ) : (\n ''\n ),\n ]}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -111,7 +111,7 @@ const createWorkerProxy = (worker, workerMsgId, exportedMethod) => (
|
|
|
111
111
|
})
|
|
112
112
|
);
|
|
113
113
|
|
|
114
|
-
const workerPromise = import('./table.worker-
|
|
114
|
+
const workerPromise = import('./table.worker-e08f657d.js').then(m => m.worker);
|
|
115
115
|
const createWorkerStore = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'createWorkerStore');
|
|
116
116
|
const syncConfigToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncConfigToWorker');
|
|
117
117
|
const syncDataToWorker = /*@__PURE__*/createWorkerProxy(workerPromise, 'stencil.table.worker', 'syncDataToWorker');
|
|
@@ -1780,4 +1780,4 @@ Table.style = tableCss;
|
|
|
1780
1780
|
|
|
1781
1781
|
export { Table as T, createWorker as c };
|
|
1782
1782
|
|
|
1783
|
-
//# sourceMappingURL=nano-table-
|
|
1783
|
+
//# sourceMappingURL=nano-table-7b6d2752.js.map
|