@pnx-mixtape/mxds 0.0.9 → 0.0.11
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/build/accordion.css +108 -0
- package/dist/build/accordion.entry.js +139 -0
- package/dist/build/accordion.entry.js.map +1 -0
- package/dist/build/base.css +996 -0
- package/dist/build/breadcrumb.css +51 -0
- package/dist/build/button.css +132 -0
- package/dist/build/callout.css +11 -0
- package/dist/build/card.css +149 -0
- package/dist/build/chunks/disclosure-widget-CQLPJ8Ta.js +124 -0
- package/dist/build/chunks/disclosure-widget-CQLPJ8Ta.js.map +1 -0
- package/dist/build/chunks/drop-menu.entry-BC6x9vst.js +132 -0
- package/dist/build/chunks/drop-menu.entry-BC6x9vst.js.map +1 -0
- package/dist/build/chunks/keyboard-C73DHu0c.js +101 -0
- package/dist/build/chunks/keyboard-C73DHu0c.js.map +1 -0
- package/dist/build/chunks/polyfills-CJ5uTmUJ.js +749 -0
- package/dist/build/chunks/polyfills-CJ5uTmUJ.js.map +1 -0
- package/dist/build/chunks/popover-wbPSyFRj.js +654 -0
- package/dist/build/chunks/popover-wbPSyFRj.js.map +1 -0
- package/dist/build/chunks/utilities-B4YZb689.js +243 -0
- package/dist/build/chunks/utilities-B4YZb689.js.map +1 -0
- package/dist/build/constants.css +120 -0
- package/dist/build/container-grid.css +208 -0
- package/dist/build/content-block.css +36 -0
- package/dist/build/dialog.css +98 -0
- package/dist/build/dialog.entry.js +113 -0
- package/dist/build/dialog.entry.js.map +1 -0
- package/dist/build/drop-menu.css +78 -0
- package/dist/build/drop-menu.entry.js +2 -0
- package/dist/build/drop-menu.entry.js.map +1 -0
- package/dist/build/drupal.css +74 -0
- package/dist/build/filters.css +105 -0
- package/dist/build/footer.css +151 -0
- package/dist/build/form.css +517 -0
- package/dist/build/global-alert.css +60 -0
- package/dist/build/global-alert.entry.js +68 -0
- package/dist/build/global-alert.entry.js.map +1 -0
- package/dist/build/grid.css +200 -0
- package/dist/build/header.css +138 -0
- package/dist/build/header.entry.js +103 -0
- package/dist/build/header.entry.js.map +1 -0
- package/dist/build/hero-banner.css +62 -0
- package/dist/build/icon.css +399 -0
- package/dist/build/in-page-alert.css +94 -0
- package/dist/build/in-page-navigation.css +17 -0
- package/dist/build/in-page-navigation.entry.js +89 -0
- package/dist/build/in-page-navigation.entry.js.map +1 -0
- package/dist/build/link-list.css +45 -0
- package/dist/build/list-item.css +114 -0
- package/dist/build/masthead.css +53 -0
- package/dist/build/navigation.css +392 -0
- package/dist/build/navigation.entry.js +124 -0
- package/dist/build/navigation.entry.js.map +1 -0
- package/dist/build/page.css +80 -0
- package/dist/build/pagination.css +130 -0
- package/dist/build/section.css +163 -0
- package/dist/build/side-navigation.css +88 -0
- package/dist/build/sidebar.css +105 -0
- package/dist/build/social-links.css +20 -0
- package/dist/build/steps.css +118 -0
- package/dist/build/steps.entry.js +2 -0
- package/dist/build/steps.entry.js.map +1 -0
- package/dist/build/sticky.css +47 -0
- package/dist/build/sticky.entry.js +60 -0
- package/dist/build/sticky.entry.js.map +1 -0
- package/dist/build/tabs.css +109 -0
- package/dist/build/tabs.entry.js +202 -0
- package/dist/build/tabs.entry.js.map +1 -0
- package/dist/build/tag.css +71 -0
- package/dist/build/tiles.css +61 -0
- package/dist/build/utilities.css +178 -0
- package/package.json +2 -2
- package/src/Atom/Image/image.twig +1 -1
- package/src/Atom/InlineSvg/inline-svg.twig +24 -0
- package/src/Atom/LinkedImage/linked-image.twig +5 -0
- package/src/Atom/Media/media.twig +1 -1
- package/src/Atom/Video/video.twig +1 -1
- package/src/Component/Accordion/accordion.css +10 -14
- package/src/Component/Filters/Elements/Filters.ts +157 -0
- package/src/Component/Filters/Filters.stories.ts +230 -0
- package/src/Component/Filters/__snapshots__/Filters.stories.ts.snap +435 -0
- package/src/Component/Filters/filter-item.twig +50 -0
- package/src/Component/Filters/filters.css +102 -0
- package/src/Component/Filters/filters.twig +49 -0
- package/src/Component/Navigation/navigation.twig +1 -1
- package/src/Layout/Header/header-stacked.twig +1 -1
- package/src/Layout/Header/header.twig +1 -1
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Accordion
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@layer design-system.defaults {
|
|
6
|
+
details summary {
|
|
7
|
+
list-style-type: none;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
details summary:is(::-webkit-details-marker, ::marker) {
|
|
11
|
+
display: none;
|
|
12
|
+
content: "";
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
:is(mx-accordion, mx-accordiondiv, mx-accordionmobile) {
|
|
16
|
+
display: block;
|
|
17
|
+
}
|
|
18
|
+
:where(:is(div.mx-accordion, mx-accordiondiv)) .mx-accordion__toggle {
|
|
19
|
+
-webkit-appearance: none;
|
|
20
|
+
-moz-appearance: none;
|
|
21
|
+
appearance: none;
|
|
22
|
+
color: inherit;
|
|
23
|
+
font-size: inherit;
|
|
24
|
+
background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
|
|
25
|
+
background: initial;
|
|
26
|
+
border: medium none currentcolor;
|
|
27
|
+
border: initial;
|
|
28
|
+
padding: 0;
|
|
29
|
+
padding: initial;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
:where(:is(div.mx-accordion, mx-accordiondiv)) .mx-accordion__content[inert] {
|
|
33
|
+
display: none;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@layer design-system.components {
|
|
38
|
+
.mx-accordion__title {
|
|
39
|
+
margin-block-end: var(--spacing-m);
|
|
40
|
+
display: flex;
|
|
41
|
+
flex-flow: row wrap;
|
|
42
|
+
gap: var(--spacing-s);
|
|
43
|
+
align-items: center;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.mx-accordions__toggle-all {
|
|
47
|
+
margin-inline-start: auto;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.mx-accordion {
|
|
51
|
+
contain: layout;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.mx-accordion .mx-accordion__toggle {
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
inline-size: 100%;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.mx-accordion:is(> h2, > h3, > h4, > h5, > h6) {
|
|
60
|
+
all: unset;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.mx-accordion--divided {
|
|
64
|
+
border-block-end: 1px solid
|
|
65
|
+
var(--line-colour, var(--colour-border));
|
|
66
|
+
border-block-end: var(--line-width, 1px) solid
|
|
67
|
+
var(--line-colour, var(--colour-border));
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.mx-accordion--divided .mx-accordion__toggle {
|
|
71
|
+
padding-block: var(--vertical-padding, var(--spacing-xxs));
|
|
72
|
+
padding-inline: 0;
|
|
73
|
+
padding-inline: var(--horizontal-padding, 0);
|
|
74
|
+
display: flex;
|
|
75
|
+
justify-content: space-between;
|
|
76
|
+
align-items: center;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.mx-accordion--divided .mx-accordion__toggle .mx-button--icon-only {
|
|
80
|
+
flex-shrink: 0;
|
|
81
|
+
margin-inline-start: var(--spacing-xxs);
|
|
82
|
+
}
|
|
83
|
+
.mx-accordion--divided:is([open], [data-open="true"]) .mx-accordion__toggle .mx-button--icon-only {
|
|
84
|
+
transform: rotate(180deg);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.mx-accordion--divided:is([open], [data-open="true"]) .mx-accordion__content {
|
|
88
|
+
border-block-start: 1px solid
|
|
89
|
+
var(--line-colour, var(--colour-border));
|
|
90
|
+
border-block-start: var(--line-width, 1px) solid
|
|
91
|
+
var(--line-colour, var(--colour-border));
|
|
92
|
+
padding-block: var(--vertical-padding, var(--spacing-xxs));
|
|
93
|
+
padding-inline: 0;
|
|
94
|
+
padding-inline: var(--horizontal-padding, 0);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* Print stylesheet
|
|
100
|
+
*/
|
|
101
|
+
|
|
102
|
+
@media print {
|
|
103
|
+
.mx-accordion .mx-accordion__content {
|
|
104
|
+
display: block !important;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY29yZGlvbi5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7SUFFSTtNQUNFLHFCQUFxQjtJQU12Qjs7TUFKRTtRQUNFLGFBQWE7UUFDYixXQUFXO01BQ2I7O0VBSUo7SUFDRSxjQUFjO0VBQ2hCO0lBR0U7TUFDRSx3QkFBZ0I7U0FBaEIscUJBQWdCO2NBQWhCLGdCQUFnQjtNQUNoQixjQUFjO01BQ2Qsa0JBQWtCO01BQ2xCLGlGQUFtQjtNQUFuQixtQkFBbUI7TUFDbkIsZ0NBQWU7TUFBZixlQUFlO01BQ2YsVUFBZ0I7TUFBaEIsZ0JBQWdCO0lBQ2xCOztJQUVBO01BQ0UsYUFBYTtJQUNmO0FBRUo7O0FBRUE7RUFDRTtJQUNFLGtDQUFrQztJQUNsQyxhQUFhO0lBQ2IsbUJBQW1CO0lBQ25CLHFCQUFxQjtJQUNyQixtQkFBbUI7RUFDckI7O0VBRUE7SUFDRSx5QkFBeUI7RUFDM0I7O0VBRUE7SUFDRSxlQUFlO0VBVWpCOztJQVJFO01BQ0UsZUFBZTtNQUNmLGlCQUFpQjtJQUNuQjs7SUFFQTtNQUNFLFVBQVU7SUFDWjs7RUFHRjtJQUNFOzhDQUMwQztJQUQxQzs4Q0FDMEM7RUE2QjVDOztJQTNCRTtNQUNFLDBEQUEwRDtNQUMxRCxpQkFBNEM7TUFBNUMsNENBQTRDO01BQzVDLGFBQWE7TUFDYiw4QkFBOEI7TUFDOUIsbUJBQW1CO0lBTXJCOztNQUpFO1FBQ0UsY0FBYztRQUNkLHVDQUF1QztNQUN6QztRQUtFO1VBQ0UseUJBQXlCO1FBQzNCOztNQUdGO1FBQ0U7a0RBQzBDO1FBRDFDO2tEQUMwQztRQUMxQywwREFBMEQ7UUFDMUQsaUJBQTRDO1FBQTVDLDRDQUE0QztNQUM5QztBQUdOOztBQUVBOztFQUVFOztBQUVGO0lBRUk7TUFDRSx5QkFBeUI7SUFDM0I7QUFFSiIsImZpbGUiOiJhY2NvcmRpb24uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBBY2NvcmRpb25cbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5kZWZhdWx0cyB7XG4gIGRldGFpbHMge1xuICAgICYgc3VtbWFyeSB7XG4gICAgICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XG5cbiAgICAgICY6aXMoOjotd2Via2l0LWRldGFpbHMtbWFya2VyLCA6Om1hcmtlcikge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIDppcyhteC1hY2NvcmRpb24sIG14LWFjY29yZGlvbmRpdiwgbXgtYWNjb3JkaW9ubW9iaWxlKSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cblxuICA6d2hlcmUoOmlzKGRpdi5teC1hY2NvcmRpb24sIG14LWFjY29yZGlvbmRpdikpIHtcbiAgICAmIC5teC1hY2NvcmRpb25fX3RvZ2dsZSB7XG4gICAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgICBmb250LXNpemU6IGluaGVyaXQ7XG4gICAgICBiYWNrZ3JvdW5kOiBpbml0aWFsO1xuICAgICAgYm9yZGVyOiBpbml0aWFsO1xuICAgICAgcGFkZGluZzogaW5pdGlhbDtcbiAgICB9XG5cbiAgICAmIC5teC1hY2NvcmRpb25fX2NvbnRlbnRbaW5lcnRdIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICB9XG59XG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtYWNjb3JkaW9uX190aXRsZSB7XG4gICAgbWFyZ2luLWJsb2NrLWVuZDogdmFyKC0tc3BhY2luZy1tKTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZmxvdzogcm93IHdyYXA7XG4gICAgZ2FwOiB2YXIoLS1zcGFjaW5nLXMpO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIH1cblxuICAubXgtYWNjb3JkaW9uc19fdG9nZ2xlLWFsbCB7XG4gICAgbWFyZ2luLWlubGluZS1zdGFydDogYXV0bztcbiAgfVxuXG4gIC5teC1hY2NvcmRpb24ge1xuICAgIGNvbnRhaW46IGxheW91dDtcblxuICAgICYgLm14LWFjY29yZGlvbl9fdG9nZ2xlIHtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIH1cblxuICAgICY6aXMoPiBoMiwgPiBoMywgPiBoNCwgPiBoNSwgPiBoNikge1xuICAgICAgYWxsOiB1bnNldDtcbiAgICB9XG4gIH1cblxuICAubXgtYWNjb3JkaW9uLS1kaXZpZGVkIHtcbiAgICBib3JkZXItYmxvY2stZW5kOiB2YXIoLS1saW5lLXdpZHRoLCAxcHgpIHNvbGlkXG4gICAgICB2YXIoLS1saW5lLWNvbG91ciwgdmFyKC0tY29sb3VyLWJvcmRlcikpO1xuXG4gICAgJiAubXgtYWNjb3JkaW9uX190b2dnbGUge1xuICAgICAgcGFkZGluZy1ibG9jazogdmFyKC0tdmVydGljYWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy14eHMpKTtcbiAgICAgIHBhZGRpbmctaW5saW5lOiB2YXIoLS1ob3Jpem9udGFsLXBhZGRpbmcsIDApO1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgICAgICYgLm14LWJ1dHRvbi0taWNvbi1vbmx5IHtcbiAgICAgICAgZmxleC1zaHJpbms6IDA7XG4gICAgICAgIG1hcmdpbi1pbmxpbmUtc3RhcnQ6IHZhcigtLXNwYWNpbmcteHhzKTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmOmlzKFtvcGVuXSwgW2RhdGEtb3Blbj1cInRydWVcIl0pIHtcbiAgICAgICYgLm14LWFjY29yZGlvbl9fdG9nZ2xlIHtcbiAgICAgICAgJiAubXgtYnV0dG9uLS1pY29uLW9ubHkge1xuICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDE4MGRlZyk7XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgJiAubXgtYWNjb3JkaW9uX19jb250ZW50IHtcbiAgICAgICAgYm9yZGVyLWJsb2NrLXN0YXJ0OiB2YXIoLS1saW5lLXdpZHRoLCAxcHgpIHNvbGlkXG4gICAgICAgICAgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICAgICAgcGFkZGluZy1ibG9jazogdmFyKC0tdmVydGljYWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy14eHMpKTtcbiAgICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWhvcml6b250YWwtcGFkZGluZywgMCk7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG5cbi8qKlxuICogUHJpbnQgc3R5bGVzaGVldFxuICovXG5cbkBtZWRpYSBwcmludCB7XG4gIC5teC1hY2NvcmRpb24ge1xuICAgICYgLm14LWFjY29yZGlvbl9fY29udGVudCB7XG4gICAgICBkaXNwbGF5OiBibG9jayAhaW1wb3J0YW50O1xuICAgIH1cbiAgfVxufVxuIl19 */
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { m as makeAnchor } from "./chunks/utilities-B4YZb689.js";
|
|
2
|
+
class Accordion extends HTMLElement {
|
|
3
|
+
constructor() {
|
|
4
|
+
super();
|
|
5
|
+
this.handleOpen = () => {
|
|
6
|
+
if (!this.details) return;
|
|
7
|
+
this.details.open = true;
|
|
8
|
+
};
|
|
9
|
+
this.handleClose = () => {
|
|
10
|
+
if (!this.details) return;
|
|
11
|
+
this.details.open = false;
|
|
12
|
+
};
|
|
13
|
+
this.handleHash = () => {
|
|
14
|
+
const { hash } = window.location;
|
|
15
|
+
if (hash && hash === `#${this.details?.id}`) {
|
|
16
|
+
this.handleOpen();
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
this.generatedId = () => {
|
|
20
|
+
const string = this.trigger?.textContent?.trim();
|
|
21
|
+
return !string ? "" : makeAnchor(string);
|
|
22
|
+
};
|
|
23
|
+
this.internals_ = this.attachInternals();
|
|
24
|
+
this.controller = new AbortController();
|
|
25
|
+
}
|
|
26
|
+
connectedCallback() {
|
|
27
|
+
if (!this.details || !this.trigger) return;
|
|
28
|
+
const { signal } = this.controller;
|
|
29
|
+
document.addEventListener("beforeprint", this.handleOpen, {
|
|
30
|
+
signal
|
|
31
|
+
});
|
|
32
|
+
document.addEventListener("afterprint", this.handleClose, {
|
|
33
|
+
signal
|
|
34
|
+
});
|
|
35
|
+
this.handleHash();
|
|
36
|
+
document.addEventListener("hashchange", this.handleHash, { signal });
|
|
37
|
+
}
|
|
38
|
+
disconnectedCallback() {
|
|
39
|
+
this.controller.abort();
|
|
40
|
+
}
|
|
41
|
+
get details() {
|
|
42
|
+
const details = this.querySelector("details");
|
|
43
|
+
if (!details) {
|
|
44
|
+
throw new Error(`${this.localName} must contain a <details> element.`);
|
|
45
|
+
}
|
|
46
|
+
details.id = details.id || this.generatedId();
|
|
47
|
+
return details;
|
|
48
|
+
}
|
|
49
|
+
get trigger() {
|
|
50
|
+
const trigger = this.querySelector("summary");
|
|
51
|
+
if (!trigger) {
|
|
52
|
+
throw new Error(`${this.localName} must contain a <summary> element.`);
|
|
53
|
+
}
|
|
54
|
+
return trigger;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
customElements.define("mx-accordion", Accordion);
|
|
58
|
+
class AccordionGroup extends HTMLElement {
|
|
59
|
+
constructor() {
|
|
60
|
+
super();
|
|
61
|
+
this.handleClick = ({ target }) => {
|
|
62
|
+
if (target === this.expandTrigger) {
|
|
63
|
+
this.handleExpand();
|
|
64
|
+
}
|
|
65
|
+
if (target === this.collapseTrigger) {
|
|
66
|
+
this.handleCollapse();
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
this.handleExpand = () => {
|
|
70
|
+
this.accordions.forEach((detail) => detail.open = true);
|
|
71
|
+
this.expandTrigger.disabled = true;
|
|
72
|
+
this.collapseTrigger.disabled = false;
|
|
73
|
+
};
|
|
74
|
+
this.handleCollapse = () => {
|
|
75
|
+
this.accordions.forEach((detail) => detail.open = false);
|
|
76
|
+
this.expandTrigger.disabled = false;
|
|
77
|
+
this.collapseTrigger.disabled = true;
|
|
78
|
+
};
|
|
79
|
+
this.handleToggle = () => {
|
|
80
|
+
this.expandTrigger.disabled = [...this.accordions].every(
|
|
81
|
+
(details) => details.open === true
|
|
82
|
+
);
|
|
83
|
+
this.collapseTrigger.disabled = [...this.accordions].every(
|
|
84
|
+
(details) => details.open !== true
|
|
85
|
+
);
|
|
86
|
+
};
|
|
87
|
+
this.internals_ = this.attachInternals();
|
|
88
|
+
this.controller = new AbortController();
|
|
89
|
+
}
|
|
90
|
+
connectedCallback() {
|
|
91
|
+
if (!this.accordions || !this.expandTrigger || !this.collapseTrigger) return;
|
|
92
|
+
this.collapseTrigger.disabled = true;
|
|
93
|
+
const { signal } = this.controller;
|
|
94
|
+
this.addEventListener("click", this.handleClick, {
|
|
95
|
+
signal
|
|
96
|
+
});
|
|
97
|
+
this.accordions.forEach(
|
|
98
|
+
(details) => details.addEventListener("toggle", this.handleToggle, {
|
|
99
|
+
signal
|
|
100
|
+
})
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
disconnectedCallback() {
|
|
104
|
+
this.controller.abort();
|
|
105
|
+
}
|
|
106
|
+
get accordions() {
|
|
107
|
+
const accordions = this.querySelectorAll("details");
|
|
108
|
+
if (!accordions.length) {
|
|
109
|
+
throw new Error(
|
|
110
|
+
`${this.localName} must contain at least one <details> element.`
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
return accordions;
|
|
114
|
+
}
|
|
115
|
+
get expandTrigger() {
|
|
116
|
+
const trigger = this.querySelector(
|
|
117
|
+
"button[data-expand]"
|
|
118
|
+
);
|
|
119
|
+
if (!trigger) {
|
|
120
|
+
throw new Error(
|
|
121
|
+
`${this.localName} must contain a <button data-expand> element.`
|
|
122
|
+
);
|
|
123
|
+
}
|
|
124
|
+
return trigger;
|
|
125
|
+
}
|
|
126
|
+
get collapseTrigger() {
|
|
127
|
+
const trigger = this.querySelector(
|
|
128
|
+
"button[data-collapse]"
|
|
129
|
+
);
|
|
130
|
+
if (!trigger) {
|
|
131
|
+
throw new Error(
|
|
132
|
+
`${this.localName} must contain a <button data-collapse> element.`
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
return trigger;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
customElements.define("mx-accordion-group", AccordionGroup);
|
|
139
|
+
//# sourceMappingURL=accordion.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"accordion.entry.js","sources":["../../src/Component/Accordion/Elements/Accordion.ts","../../src/Component/Accordion/Elements/AccordionGroup.ts"],"sourcesContent":["/**\n * Accordion\n * @file Support opening on hash, adding an ID attribute and toggling on print.\n */\n\nimport { makeAnchor } from \"../../../Utility/utilities\"\n\nexport default class Accordion extends HTMLElement {\n internals_: ElementInternals\n controller: AbortController\n\n constructor() {\n super()\n this.internals_ = this.attachInternals()\n this.controller = new AbortController()\n }\n\n connectedCallback(): void {\n if (!this.details || !this.trigger) return\n\n const { signal }: AbortController = this.controller\n document.addEventListener(\"beforeprint\", this.handleOpen, {\n signal,\n })\n document.addEventListener(\"afterprint\", this.handleClose, {\n signal,\n })\n this.handleHash()\n document.addEventListener(\"hashchange\", this.handleHash, { signal })\n }\n\n disconnectedCallback(): void {\n this.controller.abort()\n }\n\n handleOpen = (): void => {\n if (!this.details) return\n this.details.open = true\n }\n\n handleClose = (): void => {\n if (!this.details) return\n this.details.open = false\n }\n\n handleHash = (): void => {\n const { hash }: Location = window.location\n if (hash && hash === `#${this.details?.id}`) {\n this.handleOpen()\n }\n }\n\n get details(): HTMLDetailsElement | null {\n const details: HTMLDetailsElement | null = this.querySelector(\"details\")\n if (!details) {\n throw new Error(`${this.localName} must contain a <details> element.`)\n }\n details.id = details.id || this.generatedId()\n return details\n }\n\n get trigger(): HTMLElement | null {\n const trigger: HTMLElement | null = this.querySelector(\"summary\")\n if (!trigger) {\n throw new Error(`${this.localName} must contain a <summary> element.`)\n }\n return trigger\n }\n\n generatedId = (): string => {\n const string: string | undefined = this.trigger?.textContent?.trim()\n return !string ? \"\" : makeAnchor(string)\n }\n}\n\ncustomElements.define(\"mx-accordion\", Accordion)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"mx-accordion\": Accordion\n }\n}\n","/**\n * Accordion Group\n * @file Support opening and closing all.\n */\n\nexport default class AccordionGroup extends HTMLElement {\n internals_: ElementInternals\n controller: AbortController\n\n constructor() {\n super()\n this.internals_ = this.attachInternals()\n this.controller = new AbortController()\n }\n\n connectedCallback(): void {\n if (!this.accordions || !this.expandTrigger || !this.collapseTrigger) return\n this.collapseTrigger.disabled = true\n const { signal }: AbortController = this.controller\n this.addEventListener(\"click\", this.handleClick, {\n signal,\n })\n this.accordions.forEach(details =>\n details.addEventListener(\"toggle\", this.handleToggle, {\n signal,\n }),\n )\n }\n\n disconnectedCallback(): void {\n this.controller.abort()\n }\n\n handleClick = ({ target }) => {\n if (target === this.expandTrigger) {\n this.handleExpand()\n }\n if (target === this.collapseTrigger) {\n this.handleCollapse()\n }\n }\n\n handleExpand = () => {\n this.accordions.forEach(detail => (detail.open = true))\n this.expandTrigger.disabled = true\n this.collapseTrigger.disabled = false\n }\n\n handleCollapse = () => {\n this.accordions.forEach(detail => (detail.open = false))\n this.expandTrigger.disabled = false\n this.collapseTrigger.disabled = true\n }\n\n handleToggle = () => {\n this.expandTrigger.disabled = [...this.accordions].every(\n details => details.open === true,\n )\n this.collapseTrigger.disabled = [...this.accordions].every(\n details => details.open !== true,\n )\n }\n\n get accordions(): NodeListOf<HTMLDetailsElement> | null {\n const accordions: NodeListOf<HTMLDetailsElement> | null =\n this.querySelectorAll(\"details\")\n if (!accordions.length) {\n throw new Error(\n `${this.localName} must contain at least one <details> element.`,\n )\n }\n return accordions\n }\n\n get expandTrigger(): HTMLButtonElement | null {\n const trigger: HTMLButtonElement | null = this.querySelector(\n \"button[data-expand]\",\n )\n if (!trigger) {\n throw new Error(\n `${this.localName} must contain a <button data-expand> element.`,\n )\n }\n return trigger\n }\n\n get collapseTrigger(): HTMLButtonElement | null {\n const trigger: HTMLButtonElement | null = this.querySelector(\n \"button[data-collapse]\",\n )\n if (!trigger) {\n throw new Error(\n `${this.localName} must contain a <button data-collapse> element.`,\n )\n }\n return trigger\n }\n}\n\ncustomElements.define(\"mx-accordion-group\", AccordionGroup)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"mx-accordion-group\": AccordionGroup\n }\n}\n"],"names":[],"mappings":"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"}
|