@magic-spells/collapsible-content 0.1.0 → 0.1.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/dist/collapsible-content.cjs.js +2 -3
- package/dist/collapsible-content.cjs.js.map +1 -1
- package/dist/collapsible-content.esm.js +2 -3
- package/dist/collapsible-content.esm.js.map +1 -1
- package/dist/collapsible-content.min.css +1 -1
- package/dist/collapsible-content.min.js +1 -1
- package/package.json +1 -1
- package/src/collapsible-content.js +2 -3
- package/src/styles.css +4 -0
|
@@ -70,11 +70,10 @@ class CollapsibleContent extends HTMLElement {
|
|
|
70
70
|
if (value) {
|
|
71
71
|
// reset height to animate from
|
|
72
72
|
this.style.height = `${this.scrollHeight}px`;
|
|
73
|
-
|
|
74
73
|
// wait one frame and animate to 0
|
|
75
|
-
|
|
74
|
+
setTimeout(() => {
|
|
76
75
|
this.style.height = '0px';
|
|
77
|
-
});
|
|
76
|
+
}, 1);
|
|
78
77
|
|
|
79
78
|
this.setAttribute('aria-hidden', 'true');
|
|
80
79
|
this.setAttribute('inert', '');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapsible-content.cjs.js","sources":["../src/collapsible-content.js"],"sourcesContent":["import './styles.css';\n\nclass CollapsibleComponent extends HTMLElement {\n\t#handleClick;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.#handleClick = () => {\n\t\t\tconst button = this.querySelector('button');\n\t\t\tconst content = this.querySelector('collapsible-content');\n\t\t\tconst expanded =\n\t\t\t\tbutton.getAttribute('aria-expanded') !== 'true';\n\t\t\tbutton.setAttribute('aria-expanded', expanded);\n\t\t\tcontent.hidden = !expanded;\n\t\t};\n\t}\n\n\tconnectedCallback() {\n\t\tconst button = this.querySelector('button');\n\t\tconst content = this.querySelector('collapsible-content');\n\n\t\tif (!button || !content) {\n\t\t\tconsole.error(\n\t\t\t\t'CollapsibleComponent requires a <button> and a <collapsible-content>.'\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tbutton.id ||= `collapsible-button-${Math.random().toString(36).slice(2, 9)}`;\n\t\tcontent.id ||= `collapsible-content-${Math.random().toString(36).slice(2, 9)}`;\n\n\t\tbutton.setAttribute('aria-controls', content.id);\n\t\tcontent.setAttribute('role', 'region');\n\t\tcontent.setAttribute('aria-labelledby', button.id);\n\n\t\tconst expanded = button.getAttribute('aria-expanded') === 'true';\n\t\tcontent.hidden = !expanded;\n\n\t\tbutton.addEventListener('click', this.#handleClick);\n\t}\n\n\tdisconnectedCallback() {\n\t\tconst button = this.querySelector('button');\n\t\tbutton?.removeEventListener('click', this.#handleClick);\n\t}\n}\n\nclass CollapsibleContent extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis._onTransitionEnd = this._onTransitionEnd.bind(this);\n\t\t// Add event listener to remove height after transition\n\t\tthis.addEventListener('transitionend', this._onTransitionEnd);\n\t}\n\n\tconnectedCallback() {\n\t\tif (this.hidden) {\n\t\t\tthis.style.height = '0';\n\t\t} else {\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.removeEventListener('transitionend', this._onTransitionEnd);\n\t}\n\n\tset hidden(value) {\n\t\t// animate to closed\n\t\tif (value) {\n\t\t\t// reset height to animate from\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\
|
|
1
|
+
{"version":3,"file":"collapsible-content.cjs.js","sources":["../src/collapsible-content.js"],"sourcesContent":["import './styles.css';\n\nclass CollapsibleComponent extends HTMLElement {\n\t#handleClick;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.#handleClick = () => {\n\t\t\tconst button = this.querySelector('button');\n\t\t\tconst content = this.querySelector('collapsible-content');\n\t\t\tconst expanded =\n\t\t\t\tbutton.getAttribute('aria-expanded') !== 'true';\n\t\t\tbutton.setAttribute('aria-expanded', expanded);\n\t\t\tcontent.hidden = !expanded;\n\t\t};\n\t}\n\n\tconnectedCallback() {\n\t\tconst button = this.querySelector('button');\n\t\tconst content = this.querySelector('collapsible-content');\n\n\t\tif (!button || !content) {\n\t\t\tconsole.error(\n\t\t\t\t'CollapsibleComponent requires a <button> and a <collapsible-content>.'\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tbutton.id ||= `collapsible-button-${Math.random().toString(36).slice(2, 9)}`;\n\t\tcontent.id ||= `collapsible-content-${Math.random().toString(36).slice(2, 9)}`;\n\n\t\tbutton.setAttribute('aria-controls', content.id);\n\t\tcontent.setAttribute('role', 'region');\n\t\tcontent.setAttribute('aria-labelledby', button.id);\n\n\t\tconst expanded = button.getAttribute('aria-expanded') === 'true';\n\t\tcontent.hidden = !expanded;\n\n\t\tbutton.addEventListener('click', this.#handleClick);\n\t}\n\n\tdisconnectedCallback() {\n\t\tconst button = this.querySelector('button');\n\t\tbutton?.removeEventListener('click', this.#handleClick);\n\t}\n}\n\nclass CollapsibleContent extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis._onTransitionEnd = this._onTransitionEnd.bind(this);\n\t\t// Add event listener to remove height after transition\n\t\tthis.addEventListener('transitionend', this._onTransitionEnd);\n\t}\n\n\tconnectedCallback() {\n\t\tif (this.hidden) {\n\t\t\tthis.style.height = '0';\n\t\t} else {\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.removeEventListener('transitionend', this._onTransitionEnd);\n\t}\n\n\tset hidden(value) {\n\t\t// animate to closed\n\t\tif (value) {\n\t\t\t// reset height to animate from\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\t\t\t// wait one frame and animate to 0\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.style.height = '0px';\n\t\t\t}, 1);\n\n\t\t\tthis.setAttribute('aria-hidden', 'true');\n\t\t\tthis.setAttribute('inert', '');\n\t\t\tthis.setAttribute('hidden', '');\n\t\t} else {\n\t\t\t// animate to open\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\t\t\tthis.removeAttribute('aria-hidden');\n\t\t\tthis.removeAttribute('inert');\n\t\t\tthis.removeAttribute('hidden');\n\t\t}\n\t}\n\n\tget hidden() {\n\t\treturn this.hasAttribute('hidden');\n\t}\n\n\t_onTransitionEnd(event) {\n\t\t// exit if isn't height property\n\t\tif (event.propertyName != 'height') return;\n\n\t\t// Remove the inline height to allow dynamic content changes\n\t\tif (!this.hidden) {\n\t\t\tthis.style.height = 'auto';\n\t\t}\n\t}\n}\n\ncustomElements.define('collapsible-content', CollapsibleContent);\ncustomElements.define('collapsible-component', CollapsibleComponent);\n\nexport { CollapsibleContent, CollapsibleComponent };\n"],"names":[],"mappings":";;AAEA,MAAM,oBAAoB,SAAS,WAAW,CAAC;AAC/C,CAAC,YAAY,CAAC;AACd;AACA,CAAC,WAAW,GAAG;AACf,EAAE,KAAK,EAAE,CAAC;AACV,EAAE,IAAI,CAAC,YAAY,GAAG,MAAM;AAC5B,GAAG,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAC/C,GAAG,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;AAC7D,GAAG,MAAM,QAAQ;AACjB,IAAI,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CAAC;AACpD,GAAG,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;AAClD,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,QAAQ,CAAC;AAC9B,GAAG,CAAC;AACJ,EAAE;AACF;AACA,CAAC,iBAAiB,GAAG;AACrB,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAC9C,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;AAC5D;AACA,EAAE,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE;AAC3B,GAAG,OAAO,CAAC,KAAK;AAChB,IAAI,uEAAuE;AAC3E,IAAI,CAAC;AACL,GAAG,OAAO;AACV,GAAG;AACH;AACA,EAAE,MAAM,CAAC,EAAE,KAAK,CAAC,mBAAmB,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/E,EAAE,OAAO,CAAC,EAAE,KAAK,CAAC,oBAAoB,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AACjF;AACA,EAAE,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;AACnD,EAAE,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AACzC,EAAE,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;AACrD;AACA,EAAE,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CAAC;AACnE,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,QAAQ,CAAC;AAC7B;AACA,EAAE,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;AACtD,EAAE;AACF;AACA,CAAC,oBAAoB,GAAG;AACxB,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAC9C,EAAE,MAAM,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;AAC1D,EAAE;AACF,CAAC;AACD;AACA,MAAM,kBAAkB,SAAS,WAAW,CAAC;AAC7C,CAAC,WAAW,GAAG;AACf,EAAE,KAAK,EAAE,CAAC;AACV,EAAE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC3D;AACA,EAAE,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;AAChE,EAAE;AACF;AACA,CAAC,iBAAiB,GAAG;AACrB,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE;AACnB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;AAC3B,GAAG,MAAM;AACT,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;AAChD,GAAG;AACH,EAAE;AACF;AACA,CAAC,oBAAoB,GAAG;AACxB,EAAE,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;AACnE,EAAE;AACF;AACA,CAAC,IAAI,MAAM,CAAC,KAAK,EAAE;AACnB;AACA,EAAE,IAAI,KAAK,EAAE;AACb;AACA,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;AAChD;AACA,GAAG,UAAU,CAAC,MAAM;AACpB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;AAC9B,IAAI,EAAE,CAAC,CAAC,CAAC;AACT;AACA,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AAC5C,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAClC,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;AACnC,GAAG,MAAM;AACT;AACA,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;AAChD,GAAG,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;AACvC,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;AACjC,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;AAClC,GAAG;AACH,EAAE;AACF;AACA,CAAC,IAAI,MAAM,GAAG;AACd,EAAE,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACrC,EAAE;AACF;AACA,CAAC,gBAAgB,CAAC,KAAK,EAAE;AACzB;AACA,EAAE,IAAI,KAAK,CAAC,YAAY,IAAI,QAAQ,EAAE,OAAO;AAC7C;AACA;AACA,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AACpB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AAC9B,GAAG;AACH,EAAE;AACF,CAAC;AACD;AACA,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,kBAAkB,CAAC,CAAC;AACjE,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,oBAAoB,CAAC;;;;;"}
|
|
@@ -68,11 +68,10 @@ class CollapsibleContent extends HTMLElement {
|
|
|
68
68
|
if (value) {
|
|
69
69
|
// reset height to animate from
|
|
70
70
|
this.style.height = `${this.scrollHeight}px`;
|
|
71
|
-
|
|
72
71
|
// wait one frame and animate to 0
|
|
73
|
-
|
|
72
|
+
setTimeout(() => {
|
|
74
73
|
this.style.height = '0px';
|
|
75
|
-
});
|
|
74
|
+
}, 1);
|
|
76
75
|
|
|
77
76
|
this.setAttribute('aria-hidden', 'true');
|
|
78
77
|
this.setAttribute('inert', '');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapsible-content.esm.js","sources":["../src/collapsible-content.js"],"sourcesContent":["import './styles.css';\n\nclass CollapsibleComponent extends HTMLElement {\n\t#handleClick;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.#handleClick = () => {\n\t\t\tconst button = this.querySelector('button');\n\t\t\tconst content = this.querySelector('collapsible-content');\n\t\t\tconst expanded =\n\t\t\t\tbutton.getAttribute('aria-expanded') !== 'true';\n\t\t\tbutton.setAttribute('aria-expanded', expanded);\n\t\t\tcontent.hidden = !expanded;\n\t\t};\n\t}\n\n\tconnectedCallback() {\n\t\tconst button = this.querySelector('button');\n\t\tconst content = this.querySelector('collapsible-content');\n\n\t\tif (!button || !content) {\n\t\t\tconsole.error(\n\t\t\t\t'CollapsibleComponent requires a <button> and a <collapsible-content>.'\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tbutton.id ||= `collapsible-button-${Math.random().toString(36).slice(2, 9)}`;\n\t\tcontent.id ||= `collapsible-content-${Math.random().toString(36).slice(2, 9)}`;\n\n\t\tbutton.setAttribute('aria-controls', content.id);\n\t\tcontent.setAttribute('role', 'region');\n\t\tcontent.setAttribute('aria-labelledby', button.id);\n\n\t\tconst expanded = button.getAttribute('aria-expanded') === 'true';\n\t\tcontent.hidden = !expanded;\n\n\t\tbutton.addEventListener('click', this.#handleClick);\n\t}\n\n\tdisconnectedCallback() {\n\t\tconst button = this.querySelector('button');\n\t\tbutton?.removeEventListener('click', this.#handleClick);\n\t}\n}\n\nclass CollapsibleContent extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis._onTransitionEnd = this._onTransitionEnd.bind(this);\n\t\t// Add event listener to remove height after transition\n\t\tthis.addEventListener('transitionend', this._onTransitionEnd);\n\t}\n\n\tconnectedCallback() {\n\t\tif (this.hidden) {\n\t\t\tthis.style.height = '0';\n\t\t} else {\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.removeEventListener('transitionend', this._onTransitionEnd);\n\t}\n\n\tset hidden(value) {\n\t\t// animate to closed\n\t\tif (value) {\n\t\t\t// reset height to animate from\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\
|
|
1
|
+
{"version":3,"file":"collapsible-content.esm.js","sources":["../src/collapsible-content.js"],"sourcesContent":["import './styles.css';\n\nclass CollapsibleComponent extends HTMLElement {\n\t#handleClick;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.#handleClick = () => {\n\t\t\tconst button = this.querySelector('button');\n\t\t\tconst content = this.querySelector('collapsible-content');\n\t\t\tconst expanded =\n\t\t\t\tbutton.getAttribute('aria-expanded') !== 'true';\n\t\t\tbutton.setAttribute('aria-expanded', expanded);\n\t\t\tcontent.hidden = !expanded;\n\t\t};\n\t}\n\n\tconnectedCallback() {\n\t\tconst button = this.querySelector('button');\n\t\tconst content = this.querySelector('collapsible-content');\n\n\t\tif (!button || !content) {\n\t\t\tconsole.error(\n\t\t\t\t'CollapsibleComponent requires a <button> and a <collapsible-content>.'\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tbutton.id ||= `collapsible-button-${Math.random().toString(36).slice(2, 9)}`;\n\t\tcontent.id ||= `collapsible-content-${Math.random().toString(36).slice(2, 9)}`;\n\n\t\tbutton.setAttribute('aria-controls', content.id);\n\t\tcontent.setAttribute('role', 'region');\n\t\tcontent.setAttribute('aria-labelledby', button.id);\n\n\t\tconst expanded = button.getAttribute('aria-expanded') === 'true';\n\t\tcontent.hidden = !expanded;\n\n\t\tbutton.addEventListener('click', this.#handleClick);\n\t}\n\n\tdisconnectedCallback() {\n\t\tconst button = this.querySelector('button');\n\t\tbutton?.removeEventListener('click', this.#handleClick);\n\t}\n}\n\nclass CollapsibleContent extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis._onTransitionEnd = this._onTransitionEnd.bind(this);\n\t\t// Add event listener to remove height after transition\n\t\tthis.addEventListener('transitionend', this._onTransitionEnd);\n\t}\n\n\tconnectedCallback() {\n\t\tif (this.hidden) {\n\t\t\tthis.style.height = '0';\n\t\t} else {\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.removeEventListener('transitionend', this._onTransitionEnd);\n\t}\n\n\tset hidden(value) {\n\t\t// animate to closed\n\t\tif (value) {\n\t\t\t// reset height to animate from\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\t\t\t// wait one frame and animate to 0\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.style.height = '0px';\n\t\t\t}, 1);\n\n\t\t\tthis.setAttribute('aria-hidden', 'true');\n\t\t\tthis.setAttribute('inert', '');\n\t\t\tthis.setAttribute('hidden', '');\n\t\t} else {\n\t\t\t// animate to open\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\t\t\tthis.removeAttribute('aria-hidden');\n\t\t\tthis.removeAttribute('inert');\n\t\t\tthis.removeAttribute('hidden');\n\t\t}\n\t}\n\n\tget hidden() {\n\t\treturn this.hasAttribute('hidden');\n\t}\n\n\t_onTransitionEnd(event) {\n\t\t// exit if isn't height property\n\t\tif (event.propertyName != 'height') return;\n\n\t\t// Remove the inline height to allow dynamic content changes\n\t\tif (!this.hidden) {\n\t\t\tthis.style.height = 'auto';\n\t\t}\n\t}\n}\n\ncustomElements.define('collapsible-content', CollapsibleContent);\ncustomElements.define('collapsible-component', CollapsibleComponent);\n\nexport { CollapsibleContent, CollapsibleComponent };\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
collapsible-component{display:block}collapsible-component button{background:none;border:none;cursor:pointer;text-align:left;width:100%}collapsible-content{display:block;overflow:hidden;padding:0;transition:height .35s ease-out}
|
|
1
|
+
collapsible-component{display:block}collapsible-component button{background:none;border:none;cursor:pointer;text-align:left;width:100%}collapsible-content{display:block;overflow:hidden;padding:0;transition:height .35s ease-out}collapsible-component collapsible-content[hidden]{display:block}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var CollapsibleContent=function(t){"use strict";class CollapsibleComponent extends HTMLElement{#t;constructor(){super(),this.#t=()=>{const t=this.querySelector("button"),e=this.querySelector("collapsible-content"),i="true"!==t.getAttribute("aria-expanded");t.setAttribute("aria-expanded",i),e.hidden=!i}}connectedCallback(){const t=this.querySelector("button"),e=this.querySelector("collapsible-content");if(!t||!e)return void console.error("CollapsibleComponent requires a <button> and a <collapsible-content>.");t.id||=`collapsible-button-${Math.random().toString(36).slice(2,9)}`,e.id||=`collapsible-content-${Math.random().toString(36).slice(2,9)}`,t.setAttribute("aria-controls",e.id),e.setAttribute("role","region"),e.setAttribute("aria-labelledby",t.id);const i="true"===t.getAttribute("aria-expanded");e.hidden=!i,t.addEventListener("click",this.#t)}disconnectedCallback(){const t=this.querySelector("button");t?.removeEventListener("click",this.#t)}}class CollapsibleContent extends HTMLElement{constructor(){super(),this._onTransitionEnd=this._onTransitionEnd.bind(this),this.addEventListener("transitionend",this._onTransitionEnd)}connectedCallback(){this.hidden?this.style.height="0":this.style.height=`${this.scrollHeight}px`}disconnectedCallback(){this.removeEventListener("transitionend",this._onTransitionEnd)}set hidden(t){t?(this.style.height=`${this.scrollHeight}px`,
|
|
1
|
+
var CollapsibleContent=function(t){"use strict";class CollapsibleComponent extends HTMLElement{#t;constructor(){super(),this.#t=()=>{const t=this.querySelector("button"),e=this.querySelector("collapsible-content"),i="true"!==t.getAttribute("aria-expanded");t.setAttribute("aria-expanded",i),e.hidden=!i}}connectedCallback(){const t=this.querySelector("button"),e=this.querySelector("collapsible-content");if(!t||!e)return void console.error("CollapsibleComponent requires a <button> and a <collapsible-content>.");t.id||=`collapsible-button-${Math.random().toString(36).slice(2,9)}`,e.id||=`collapsible-content-${Math.random().toString(36).slice(2,9)}`,t.setAttribute("aria-controls",e.id),e.setAttribute("role","region"),e.setAttribute("aria-labelledby",t.id);const i="true"===t.getAttribute("aria-expanded");e.hidden=!i,t.addEventListener("click",this.#t)}disconnectedCallback(){const t=this.querySelector("button");t?.removeEventListener("click",this.#t)}}class CollapsibleContent extends HTMLElement{constructor(){super(),this._onTransitionEnd=this._onTransitionEnd.bind(this),this.addEventListener("transitionend",this._onTransitionEnd)}connectedCallback(){this.hidden?this.style.height="0":this.style.height=`${this.scrollHeight}px`}disconnectedCallback(){this.removeEventListener("transitionend",this._onTransitionEnd)}set hidden(t){t?(this.style.height=`${this.scrollHeight}px`,setTimeout((()=>{this.style.height="0px"}),1),this.setAttribute("aria-hidden","true"),this.setAttribute("inert",""),this.setAttribute("hidden","")):(this.style.height=`${this.scrollHeight}px`,this.removeAttribute("aria-hidden"),this.removeAttribute("inert"),this.removeAttribute("hidden"))}get hidden(){return this.hasAttribute("hidden")}_onTransitionEnd(t){"height"==t.propertyName&&(this.hidden||(this.style.height="auto"))}}return customElements.define("collapsible-content",CollapsibleContent),customElements.define("collapsible-component",CollapsibleComponent),t.CollapsibleComponent=CollapsibleComponent,t.CollapsibleContent=CollapsibleContent,t}({});
|
package/package.json
CHANGED
|
@@ -70,11 +70,10 @@ class CollapsibleContent extends HTMLElement {
|
|
|
70
70
|
if (value) {
|
|
71
71
|
// reset height to animate from
|
|
72
72
|
this.style.height = `${this.scrollHeight}px`;
|
|
73
|
-
|
|
74
73
|
// wait one frame and animate to 0
|
|
75
|
-
|
|
74
|
+
setTimeout(() => {
|
|
76
75
|
this.style.height = '0px';
|
|
77
|
-
});
|
|
76
|
+
}, 1);
|
|
78
77
|
|
|
79
78
|
this.setAttribute('aria-hidden', 'true');
|
|
80
79
|
this.setAttribute('inert', '');
|