@pnx-mixtape/mxds 0.0.8 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/package.json +1 -1
  2. package/src/Atom/Button/button.twig +1 -1
  3. package/src/Atom/Image/image.twig +3 -3
  4. package/src/Atom/Link/link.twig +1 -1
  5. package/src/Atom/Media/media.twig +2 -2
  6. package/src/Atom/Video/video.twig +1 -1
  7. package/src/Component/Accordion/accordion-item.twig +1 -1
  8. package/src/Component/Accordion/accordion.twig +1 -1
  9. package/src/Component/Card/Card.stories.ts +26 -14
  10. package/src/Component/Card/__snapshots__/Card.stories.ts.snap +18 -12
  11. package/src/Component/Card/card.twig +5 -5
  12. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap +9 -45
  13. package/src/Component/ContentBlock/content-block.twig +2 -2
  14. package/src/Component/DropMenu/drop-menu.twig +1 -1
  15. package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.ts.snap +1 -3
  16. package/src/Component/GlobalAlert/global-alert.twig +3 -3
  17. package/src/Component/HeroBanner/HeroBanner.stories.ts +25 -11
  18. package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap +18 -12
  19. package/src/Component/HeroBanner/hero-banner.twig +3 -3
  20. package/src/Component/LinkList/LinkList.stories.ts +20 -6
  21. package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +18 -12
  22. package/src/Component/LinkList/link-list.css +7 -35
  23. package/src/Component/LinkList/link-list.twig +1 -5
  24. package/src/Component/ListItem/list-item.twig +4 -4
  25. package/src/Component/Navigation/menu.twig +4 -4
  26. package/src/Component/Navigation/navigation.twig +1 -1
  27. package/src/Component/Pagination/pagination-item.twig +1 -1
  28. package/src/Component/Pagination/pagination.twig +2 -2
  29. package/src/Component/SideNavigation/side-navigation.twig +4 -4
  30. package/src/Component/Tabs/tabs.twig +1 -1
  31. package/src/Component/Tag/tag.css +4 -0
  32. package/src/Form/Checkbox/input-checkbox.twig +1 -1
  33. package/src/Form/Form/form.twig +2 -2
  34. package/src/Form/FormItem/form-item.twig +1 -1
  35. package/src/Form/Select/input-select.twig +1 -1
  36. package/src/Form/TextInput/input-text.twig +1 -1
  37. package/src/Form/Textarea/input-textarea.twig +1 -1
  38. package/src/Layout/Footer/Footer.stories.ts +0 -1
  39. package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap +20 -40
  40. package/src/Layout/Footer/footer.twig +3 -3
  41. package/src/Layout/Header/Header.stories.ts +0 -1
  42. package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +5 -5
  43. package/src/Layout/Header/header-stacked.twig +13 -11
  44. package/src/Layout/Header/header.twig +12 -10
  45. package/src/Layout/Header/twig/logo.twig +1 -3
  46. package/src/Layout/Masthead/Masthead.stories.ts +10 -0
  47. package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +51 -3
  48. package/src/Layout/Masthead/masthead.css +23 -0
  49. package/src/Layout/Masthead/masthead.twig +9 -5
  50. package/src/Layout/Section/section.twig +1 -1
  51. package/src/Layout/Sidebar/sidebar.twig +5 -5
  52. package/dist/build/accordion.css +0 -108
  53. package/dist/build/accordion.entry.js +0 -139
  54. package/dist/build/accordion.entry.js.map +0 -1
  55. package/dist/build/base.css +0 -996
  56. package/dist/build/breadcrumb.css +0 -51
  57. package/dist/build/button.css +0 -132
  58. package/dist/build/callout.css +0 -11
  59. package/dist/build/card.css +0 -149
  60. package/dist/build/chunks/disclosure-widget-CQLPJ8Ta.js +0 -124
  61. package/dist/build/chunks/disclosure-widget-CQLPJ8Ta.js.map +0 -1
  62. package/dist/build/chunks/drop-menu.entry-BC6x9vst.js +0 -132
  63. package/dist/build/chunks/drop-menu.entry-BC6x9vst.js.map +0 -1
  64. package/dist/build/chunks/keyboard-C73DHu0c.js +0 -101
  65. package/dist/build/chunks/keyboard-C73DHu0c.js.map +0 -1
  66. package/dist/build/chunks/polyfills-CJ5uTmUJ.js +0 -749
  67. package/dist/build/chunks/polyfills-CJ5uTmUJ.js.map +0 -1
  68. package/dist/build/chunks/popover-wbPSyFRj.js +0 -654
  69. package/dist/build/chunks/popover-wbPSyFRj.js.map +0 -1
  70. package/dist/build/chunks/utilities-B4YZb689.js +0 -243
  71. package/dist/build/chunks/utilities-B4YZb689.js.map +0 -1
  72. package/dist/build/constants.css +0 -120
  73. package/dist/build/container-grid.css +0 -208
  74. package/dist/build/content-block.css +0 -36
  75. package/dist/build/dialog.css +0 -98
  76. package/dist/build/dialog.entry.js +0 -113
  77. package/dist/build/dialog.entry.js.map +0 -1
  78. package/dist/build/drop-menu.css +0 -78
  79. package/dist/build/drop-menu.entry.js +0 -2
  80. package/dist/build/drop-menu.entry.js.map +0 -1
  81. package/dist/build/drupal.css +0 -74
  82. package/dist/build/footer.css +0 -151
  83. package/dist/build/form.css +0 -517
  84. package/dist/build/global-alert.css +0 -60
  85. package/dist/build/global-alert.entry.js +0 -68
  86. package/dist/build/global-alert.entry.js.map +0 -1
  87. package/dist/build/grid.css +0 -200
  88. package/dist/build/header.css +0 -138
  89. package/dist/build/header.entry.js +0 -103
  90. package/dist/build/header.entry.js.map +0 -1
  91. package/dist/build/hero-banner.css +0 -62
  92. package/dist/build/icon.css +0 -399
  93. package/dist/build/in-page-alert.css +0 -94
  94. package/dist/build/in-page-navigation.css +0 -17
  95. package/dist/build/in-page-navigation.entry.js +0 -89
  96. package/dist/build/in-page-navigation.entry.js.map +0 -1
  97. package/dist/build/link-list.css +0 -72
  98. package/dist/build/list-item.css +0 -114
  99. package/dist/build/masthead.css +0 -30
  100. package/dist/build/navigation.css +0 -392
  101. package/dist/build/navigation.entry.js +0 -124
  102. package/dist/build/navigation.entry.js.map +0 -1
  103. package/dist/build/page.css +0 -80
  104. package/dist/build/pagination.css +0 -130
  105. package/dist/build/section.css +0 -163
  106. package/dist/build/side-navigation.css +0 -88
  107. package/dist/build/sidebar.css +0 -105
  108. package/dist/build/social-links.css +0 -20
  109. package/dist/build/steps.css +0 -118
  110. package/dist/build/steps.entry.js +0 -2
  111. package/dist/build/steps.entry.js.map +0 -1
  112. package/dist/build/sticky.css +0 -47
  113. package/dist/build/sticky.entry.js +0 -60
  114. package/dist/build/sticky.entry.js.map +0 -1
  115. package/dist/build/tabs.css +0 -109
  116. package/dist/build/tabs.entry.js +0 -202
  117. package/dist/build/tabs.entry.js.map +0 -1
  118. package/dist/build/tag.css +0 -67
  119. package/dist/build/tiles.css +0 -61
  120. package/dist/build/utilities.css +0 -178
@@ -7,16 +7,20 @@
7
7
  background == "light" ? 'mx-background--alt' : 'mx-background--reverse',
8
8
  ] %}
9
9
  {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
10
- {% if skipLinks %}
10
+ {% if skipLinks is not empty %}
11
11
  <nav class="mx-skip-links" aria-label="Skip to links">
12
- {{ skipLinks }}
12
+ {% for link in skipLinks %}
13
+ {{ link }}
14
+ {% endfor %}
13
15
  </nav>
14
16
  {% endif %}
15
- {% if content or links %}
17
+ {% if content is not empty or links is not empty %}
16
18
  <div{{ attributes }}>
17
19
  <div class="flex">
18
- {{ content }}
19
- {% if links %}
20
+ {% if content is not empty %}
21
+ <div>{{ content }}</div>
22
+ {% endif %}
23
+ {% if links is not empty %}
20
24
  <nav class="mx-masthead__nav" aria-label="Additional links">
21
25
  {% for link in links %}
22
26
  {{ link }}
@@ -12,7 +12,7 @@
12
12
  {% if container %}
13
13
  <div class="mx-container">
14
14
  {% endif %}
15
- {% if title or link %}
15
+ {% if title is not empty or link is not empty %}
16
16
  <div class="mx-section__header">
17
17
  {{ title }}
18
18
  {{ link }}
@@ -5,22 +5,22 @@
5
5
  ] %}
6
6
  {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
7
7
 
8
- {% if sidebarContent %}
8
+ {% if sidebarContent is not empty %}
9
9
  {% set sidebar %}
10
- <aside{% if sidebarClass %} class="{{ sidebarClass }}"{% endif %}>
10
+ <aside{% if sidebarClass is not empty %} class="{{ sidebarClass }}"{% endif %}>
11
11
  {{ sidebarContent }}
12
12
  </aside>
13
13
  {% endset %}
14
14
  {% endif %}
15
15
 
16
16
  <div{{ attributes }}>
17
- {% if sidebar and before %}
17
+ {% if sidebar is not empty and before %}
18
18
  {{ sidebar }}
19
19
  {% endif %}
20
- <section{% if contentClass %} class="{{ contentClass }}"{% endif %}>
20
+ <section{% if contentClass is not empty %} class="{{ contentClass }}"{% endif %}>
21
21
  {{ content }}
22
22
  </section>
23
- {% if sidebar and not before %}
23
+ {% if sidebar is not empty and not before %}
24
24
  {{ sidebar }}
25
25
  {% endif %}
26
26
  </div>
@@ -1,108 +0,0 @@
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 */
@@ -1,139 +0,0 @@
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
@@ -1 +0,0 @@
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":";AAOA,MAAqB,kBAAkB,YAAY;AAAA,EAIjD,cAAc;AACN;AAuBR,SAAA,aAAa,MAAY;AACnB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,cAAc,MAAY;AACpB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,aAAa,MAAY;AACjB,YAAA,EAAE,KAAK,IAAc,OAAO;AAClC,UAAI,QAAQ,SAAS,IAAI,KAAK,SAAS,EAAE,IAAI;AAC3C,aAAK,WAAW;AAAA,MAClB;AAAA,IAAA;AAoBF,SAAA,cAAc,MAAc;AAC1B,YAAM,SAA6B,KAAK,SAAS,aAAa,KAAK;AACnE,aAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,IAAA;AA1DlC,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,QAAS;AAE9B,UAAA,EAAE,OAAO,IAAqB,KAAK;AAChC,aAAA,iBAAiB,eAAe,KAAK,YAAY;AAAA,MACxD;AAAA,IAAA,CACD;AACQ,aAAA,iBAAiB,cAAc,KAAK,aAAa;AAAA,MACxD;AAAA,IAAA,CACD;AACD,SAAK,WAAW;AAChB,aAAS,iBAAiB,cAAc,KAAK,YAAY,EAAE,QAAQ;AAAA,EACrE;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;EAClB;AAAA,EAmBA,IAAI,UAAqC;AACjC,UAAA,UAAqC,KAAK,cAAc,SAAS;AACvE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACA,YAAQ,KAAK,QAAQ,MAAM,KAAK,YAAY;AACrC,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,UAA8B;AAC1B,UAAA,UAA8B,KAAK,cAAc,SAAS;AAChE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACO,WAAA;AAAA,EACT;AAMF;AAEA,eAAe,OAAO,gBAAgB,SAAS;ACtE/C,MAAqB,uBAAuB,YAAY;AAAA,EAItD,cAAc;AACN;AAuBM,SAAA,cAAA,CAAC,EAAE,aAAa;AACxB,UAAA,WAAW,KAAK,eAAe;AACjC,aAAK,aAAa;AAAA,MACpB;AACI,UAAA,WAAW,KAAK,iBAAiB;AACnC,aAAK,eAAe;AAAA,MACtB;AAAA,IAAA;AAGF,SAAA,eAAe,MAAM;AACnB,WAAK,WAAW,QAAQ,CAAW,WAAA,OAAO,OAAO,IAAK;AACtD,WAAK,cAAc,WAAW;AAC9B,WAAK,gBAAgB,WAAW;AAAA,IAAA;AAGlC,SAAA,iBAAiB,MAAM;AACrB,WAAK,WAAW,QAAQ,CAAW,WAAA,OAAO,OAAO,KAAM;AACvD,WAAK,cAAc,WAAW;AAC9B,WAAK,gBAAgB,WAAW;AAAA,IAAA;AAGlC,SAAA,eAAe,MAAM;AACnB,WAAK,cAAc,WAAW,CAAC,GAAG,KAAK,UAAU,EAAE;AAAA,QACjD,CAAA,YAAW,QAAQ,SAAS;AAAA,MAAA;AAE9B,WAAK,gBAAgB,WAAW,CAAC,GAAG,KAAK,UAAU,EAAE;AAAA,QACnD,CAAA,YAAW,QAAQ,SAAS;AAAA,MAAA;AAAA,IAC9B;AAjDK,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACpB,QAAA,CAAC,KAAK,cAAc,CAAC,KAAK,iBAAiB,CAAC,KAAK,gBAAiB;AACtE,SAAK,gBAAgB,WAAW;AAC1B,UAAA,EAAE,OAAO,IAAqB,KAAK;AACpC,SAAA,iBAAiB,SAAS,KAAK,aAAa;AAAA,MAC/C;AAAA,IAAA,CACD;AACD,SAAK,WAAW;AAAA,MAAQ,CACtB,YAAA,QAAQ,iBAAiB,UAAU,KAAK,cAAc;AAAA,QACpD;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;EAClB;AAAA,EAgCA,IAAI,aAAoD;AAChD,UAAA,aACJ,KAAK,iBAAiB,SAAS;AAC7B,QAAA,CAAC,WAAW,QAAQ;AACtB,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,gBAA0C;AAC5C,UAAM,UAAoC,KAAK;AAAA,MAC7C;AAAA,IAAA;AAEF,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,kBAA4C;AAC9C,UAAM,UAAoC,KAAK;AAAA,MAC7C;AAAA,IAAA;AAEF,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACO,WAAA;AAAA,EACT;AACF;AAEA,eAAe,OAAO,sBAAsB,cAAc;"}