@govtechsg/sgds-web-component 1.3.0 → 1.4.0

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 (25) hide show
  1. package/components/Accordion/index.umd.js +41 -16
  2. package/components/Accordion/index.umd.js.map +1 -1
  3. package/components/Accordion/sgds-accordion-item.cjs.js +31 -10
  4. package/components/Accordion/sgds-accordion-item.cjs.js.map +1 -1
  5. package/components/Accordion/sgds-accordion-item.cjs2.js +1 -1
  6. package/components/Accordion/sgds-accordion-item.js +31 -10
  7. package/components/Accordion/sgds-accordion-item.js.map +1 -1
  8. package/components/Accordion/sgds-accordion-item2.js +1 -1
  9. package/components/Accordion/sgds-accordion.cjs.js +9 -5
  10. package/components/Accordion/sgds-accordion.cjs.js.map +1 -1
  11. package/components/Accordion/sgds-accordion.d.ts +2 -1
  12. package/components/Accordion/sgds-accordion.js +9 -5
  13. package/components/Accordion/sgds-accordion.js.map +1 -1
  14. package/components/Modal/index.umd.js +17 -10
  15. package/components/Modal/index.umd.js.map +1 -1
  16. package/components/Modal/sgds-modal.cjs.js +17 -10
  17. package/components/Modal/sgds-modal.cjs.js.map +1 -1
  18. package/components/Modal/sgds-modal.d.ts +2 -0
  19. package/components/Modal/sgds-modal.js +18 -11
  20. package/components/Modal/sgds-modal.js.map +1 -1
  21. package/components/index.umd.js +58 -26
  22. package/components/index.umd.js.map +1 -1
  23. package/index.umd.js +58 -26
  24. package/index.umd.js.map +1 -1
  25. package/package.json +1 -1
package/components/Accordion/sgds-accordion-item.cjs.js CHANGED
@@ -40,8 +40,8 @@ class SgdsAccordionItem extends sgdsElement["default"] {
40
40
  this.open = false;
41
41
  }
42
42
  firstUpdated() {
43
- this.body.hidden = !this.open;
44
- this.body.style.height = this.open ? "auto" : "0";
43
+ if (!this.open)
44
+ this.body.classList.add("hidden");
45
45
  }
46
46
  handleSummaryClick() {
47
47
  if (this.open) {
@@ -80,10 +80,9 @@ class SgdsAccordionItem extends sgdsElement["default"] {
80
80
  return;
81
81
  }
82
82
  await animate.stopAnimations(this.body);
83
- this.body.hidden = false;
83
+ this.body.classList.remove("hidden");
84
84
  const { keyframes, options } = animationRegistry.getAnimation(this, "accordion.show");
85
85
  await animate.animateTo(this.body, animate.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
86
- this.body.style.height = "auto";
87
86
  this.emit("sgds-after-show");
88
87
  }
89
88
  else {
@@ -95,9 +94,13 @@ class SgdsAccordionItem extends sgdsElement["default"] {
95
94
  }
96
95
  await animate.stopAnimations(this.body);
97
96
  const { keyframes, options } = animationRegistry.getAnimation(this, "accordion.hide");
97
+ const animationDuration = options.duration;
98
+ // Workaround to fix GSIB delay after animateTo.
99
+ //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added
100
+ setTimeout(() => {
101
+ this.body.classList.add("hidden");
102
+ }, animationDuration - 20);
98
103
  await animate.animateTo(this.body, animate.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
99
- this.body.hidden = true;
100
- this.body.style.height = "auto";
101
104
  this.emit("sgds-after-hide");
102
105
  }
103
106
  }
@@ -123,7 +126,8 @@ class SgdsAccordionItem extends sgdsElement["default"] {
123
126
  part="base"
124
127
  class=${classMap_js.classMap({
125
128
  "sgds accordion-item": true,
126
- [`${this.accordionItemClasses}`]: this.accordionItemClasses
129
+ [`${this.accordionItemClasses}`]: this.accordionItemClasses,
130
+ show: this.open
127
131
  })}
128
132
  >
129
133
  <button
@@ -140,8 +144,25 @@ class SgdsAccordionItem extends sgdsElement["default"] {
140
144
  @keydown=${this.handleSummaryKeyDown}
141
145
  >
142
146
  <slot name="accordion-header"></slot>
147
+ <svg
148
+ xmlns="http://www.w3.org/2000/svg"
149
+ width="16"
150
+ height="16"
151
+ fill="currentColor"
152
+ class="bi bi-chevron-down"
153
+ viewBox="0 0 16 16"
154
+ >
155
+ <path
156
+ fill-rule="evenodd"
157
+ d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
158
+ />
159
+ </svg>
143
160
  </button>
144
- <div class="accordion-body">
161
+ <div
162
+ class=${classMap_js.classMap({
163
+ "accordion-body": true
164
+ })}
165
+ >
145
166
  <slot name="accordion-content" class="accordion-content" role="region" aria-labelledby="header"></slot>
146
167
  </div>
147
168
  </div>
@@ -172,14 +193,14 @@ animationRegistry.setDefaultAnimation("accordion.show", {
172
193
  { height: "0", opacity: "0" },
173
194
  { height: "auto", opacity: "1" }
174
195
  ],
175
- options: { duration: 200, easing: "ease-in-out" }
196
+ options: { duration: 350, easing: "ease-in-out" }
176
197
  });
177
198
  animationRegistry.setDefaultAnimation("accordion.hide", {
178
199
  keyframes: [
179
200
  { height: "auto", opacity: "1" },
180
201
  { height: "0", opacity: "0" }
181
202
  ],
182
- options: { duration: 200, easing: "ease-in-out" }
203
+ options: { duration: 350, easing: "ease-in-out" }
183
204
  });
184
205
 
185
206
  exports.SgdsAccordionItem = SgdsAccordionItem;
package/components/Accordion/sgds-accordion-item.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sgds-accordion-item.cjs.js","sources":["../../../src/components/Accordion/sgds-accordion-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport styles from \"./sgds-accordion-item.scss\";\n\n/**\n *\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @csspart base - The accordion-item base wrapper.\n * @csspart header - The accordion-item button header.\n * @csspart content - The accordion-item content.\n *\n * @slot accordion-header - The accordion-item button header slot.\n * @slot accordion-content - The accordion-item content slot.\n *\n * @cssprop --accordion-item-padding-y - The top and bottom padding for the container of accordion item's content\n * @cssprop --accordion-item-padding-x - The right and left padding for the container of accordion item's content\n * @cssprop --accordion-item-border-radius - The border radius of the accordion item\n * @cssprop --accordion-item-font-weight - The font weight of accordion-button when it is not collapsed\n * @cssprop --accordion-item-line-height - The line height of accordion\n */\nexport class SgdsAccordionItem extends SgdsElement {\n static styles = [SgdsElement.styles, styles];\n /** @internal */\n @query(\".accordion-item\") accordion: HTMLElement;\n /** @internal */\n @query(\".accordion-button\") header: HTMLElement;\n /** @internal */\n @query(\".accordion-body\") body: HTMLElement;\n\n /** Controls whether accordion-item is open or close */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Optional for accordion item. Can be used to insert any utility classes such as `me-auto` */\n @property({ reflect: true }) accordionItemClasses: string;\n\n firstUpdated() {\n this.body.hidden = !this.open;\n this.body.style.height = this.open ? \"auto\" : \"0\";\n }\n\n private handleSummaryClick() {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n\n this.header.focus();\n }\n\n private handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n event.preventDefault();\n this.show();\n }\n }\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n await stopAnimations(this.body);\n this.body.hidden = false;\n\n const { keyframes, options } = getAnimation(this, \"accordion.show\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.style.height = \"auto\";\n\n this.emit(\"sgds-after-show\");\n } else {\n // Hide\n const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n await stopAnimations(this.body);\n\n const { keyframes, options } = getAnimation(this, \"accordion.hide\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.hidden = true;\n this.body.style.height = \"auto\";\n\n this.emit(\"sgds-after-hide\");\n }\n }\n\n /** Shows the accordion. */\n public async show() {\n if (this.open) {\n return;\n }\n\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /** Hide the accordion */\n public async hide() {\n if (!this.open) {\n return;\n }\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n \"sgds accordion-item\": true,\n [`${this.accordionItemClasses}`]: this.accordionItemClasses\n })}\n >\n <button\n class=${classMap({\n \"accordion-button\": true,\n collapsed: !this.open\n })}\n part=\"header\"\n role=\"button\"\n aria-expanded=${this.open ? \"true\" : \"false\"}\n aria-controls=\"content\"\n tabindex=\"0\"\n @click=${this.handleSummaryClick}\n @keydown=${this.handleSummaryKeyDown}\n >\n <slot name=\"accordion-header\"></slot>\n </button>\n <div class=\"accordion-body\">\n <slot name=\"accordion-content\" class=\"accordion-content\" role=\"region\" aria-labelledby=\"header\"></slot>\n </div>\n </div>\n `;\n }\n}\n\nsetDefaultAnimation(\"accordion.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"accordion.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsAccordionItem;\n"],"names":["SgdsElement","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","waitForEvent","html","classMap","styles","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}
1
+ {"version":3,"file":"sgds-accordion-item.cjs.js","sources":["../../../src/components/Accordion/sgds-accordion-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport styles from \"./sgds-accordion-item.scss\";\n\n/**\n *\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @csspart base - The accordion-item base wrapper.\n * @csspart header - The accordion-item button header.\n * @csspart content - The accordion-item content.\n *\n * @slot accordion-header - The accordion-item button header slot.\n * @slot accordion-content - The accordion-item content slot.\n *\n * @cssprop --accordion-item-padding-y - The top and bottom padding for the container of accordion item's content\n * @cssprop --accordion-item-padding-x - The right and left padding for the container of accordion item's content\n * @cssprop --accordion-item-border-radius - The border radius of the accordion item\n * @cssprop --accordion-item-font-weight - The font weight of accordion-button when it is not collapsed\n * @cssprop --accordion-item-line-height - The line height of accordion\n */\nexport class SgdsAccordionItem extends SgdsElement {\n static styles = [SgdsElement.styles, styles];\n /** @internal */\n @query(\".accordion-item\") accordion: HTMLElement;\n /** @internal */\n @query(\".accordion-button\") header: HTMLElement;\n /** @internal */\n @query(\".accordion-body\") body: HTMLElement;\n\n /** Controls whether accordion-item is open or close */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Optional for accordion item. Can be used to insert any utility classes such as `me-auto` */\n @property({ reflect: true }) accordionItemClasses: string;\n\n firstUpdated() {\n if (!this.open) this.body.classList.add(\"hidden\");\n }\n\n private handleSummaryClick() {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n\n this.header.focus();\n }\n\n private handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n event.preventDefault();\n this.show();\n }\n }\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n await stopAnimations(this.body);\n this.body.classList.remove(\"hidden\");\n\n const { keyframes, options } = getAnimation(this, \"accordion.show\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.emit(\"sgds-after-show\");\n } else {\n // Hide\n const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n await stopAnimations(this.body);\n\n const { keyframes, options } = getAnimation(this, \"accordion.hide\");\n const animationDuration = options.duration as number;\n // Workaround to fix GSIB delay after animateTo.\n //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added\n setTimeout(() => {\n this.body.classList.add(\"hidden\");\n }, animationDuration - 20);\n\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.emit(\"sgds-after-hide\");\n }\n }\n\n /** Shows the accordion. */\n public async show() {\n if (this.open) {\n return;\n }\n\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /** Hide the accordion */\n public async hide() {\n if (!this.open) {\n return;\n }\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n \"sgds accordion-item\": true,\n [`${this.accordionItemClasses}`]: this.accordionItemClasses,\n show: this.open\n })}\n >\n <button\n class=${classMap({\n \"accordion-button\": true,\n collapsed: !this.open\n })}\n part=\"header\"\n role=\"button\"\n aria-expanded=${this.open ? \"true\" : \"false\"}\n aria-controls=\"content\"\n tabindex=\"0\"\n @click=${this.handleSummaryClick}\n @keydown=${this.handleSummaryKeyDown}\n >\n <slot name=\"accordion-header\"></slot>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-chevron-down\"\n viewBox=\"0 0 16 16\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n />\n </svg>\n </button>\n <div\n class=${classMap({\n \"accordion-body\": true\n })}\n >\n <slot name=\"accordion-content\" class=\"accordion-content\" role=\"region\" aria-labelledby=\"header\"></slot>\n </div>\n </div>\n `;\n }\n}\n\nsetDefaultAnimation(\"accordion.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"accordion.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nexport default SgdsAccordionItem;\n"],"names":["SgdsElement","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","waitForEvent","html","classMap","styles","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}
package/components/Accordion/sgds-accordion-item.cjs2.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var lit = require('lit');
6
6
 
7
- var css_248z = lit.css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){box-shadow:none;color:var(--accordion-active-color);font-weight:var(--accordion-item-font-weight)}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}`;
7
+ var css_248z = lit.css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){color:var(--accordion-active-color,var(--sgds-primary))}.accordion-button svg.bi-chevron-down{height:1.3rem;margin-left:auto;transition:transform .2s ease-in-out;width:1.3rem}.accordion-button:not(.collapsed){box-shadow:none;font-weight:var(--accordion-item-font-weight)}.accordion-button:not(.collapsed) svg.bi-chevron-down{transform:rotate(-180deg)}.accordion-button:after{content:unset}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}.hidden{display:none}`;
8
8
 
9
9
  exports["default"] = css_248z;
10
10
  //# sourceMappingURL=sgds-accordion-item.cjs2.js.map
package/components/Accordion/sgds-accordion-item.js CHANGED
@@ -36,8 +36,8 @@ class SgdsAccordionItem extends SgdsElement {
36
36
  this.open = false;
37
37
  }
38
38
  firstUpdated() {
39
- this.body.hidden = !this.open;
40
- this.body.style.height = this.open ? "auto" : "0";
39
+ if (!this.open)
40
+ this.body.classList.add("hidden");
41
41
  }
42
42
  handleSummaryClick() {
43
43
  if (this.open) {
@@ -76,10 +76,9 @@ class SgdsAccordionItem extends SgdsElement {
76
76
  return;
77
77
  }
78
78
  await stopAnimations(this.body);
79
- this.body.hidden = false;
79
+ this.body.classList.remove("hidden");
80
80
  const { keyframes, options } = getAnimation(this, "accordion.show");
81
81
  await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
82
- this.body.style.height = "auto";
83
82
  this.emit("sgds-after-show");
84
83
  }
85
84
  else {
@@ -91,9 +90,13 @@ class SgdsAccordionItem extends SgdsElement {
91
90
  }
92
91
  await stopAnimations(this.body);
93
92
  const { keyframes, options } = getAnimation(this, "accordion.hide");
93
+ const animationDuration = options.duration;
94
+ // Workaround to fix GSIB delay after animateTo.
95
+ //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added
96
+ setTimeout(() => {
97
+ this.body.classList.add("hidden");
98
+ }, animationDuration - 20);
94
99
  await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
95
- this.body.hidden = true;
96
- this.body.style.height = "auto";
97
100
  this.emit("sgds-after-hide");
98
101
  }
99
102
  }
@@ -119,7 +122,8 @@ class SgdsAccordionItem extends SgdsElement {
119
122
  part="base"
120
123
  class=${classMap({
121
124
  "sgds accordion-item": true,
122
- [`${this.accordionItemClasses}`]: this.accordionItemClasses
125
+ [`${this.accordionItemClasses}`]: this.accordionItemClasses,
126
+ show: this.open
123
127
  })}
124
128
  >
125
129
  <button
@@ -136,8 +140,25 @@ class SgdsAccordionItem extends SgdsElement {
136
140
  @keydown=${this.handleSummaryKeyDown}
137
141
  >
138
142
  <slot name="accordion-header"></slot>
143
+ <svg
144
+ xmlns="http://www.w3.org/2000/svg"
145
+ width="16"
146
+ height="16"
147
+ fill="currentColor"
148
+ class="bi bi-chevron-down"
149
+ viewBox="0 0 16 16"
150
+ >
151
+ <path
152
+ fill-rule="evenodd"
153
+ d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
154
+ />
155
+ </svg>
139
156
  </button>
140
- <div class="accordion-body">
157
+ <div
158
+ class=${classMap({
159
+ "accordion-body": true
160
+ })}
161
+ >
141
162
  <slot name="accordion-content" class="accordion-content" role="region" aria-labelledby="header"></slot>
142
163
  </div>
143
164
  </div>
@@ -168,14 +189,14 @@ setDefaultAnimation("accordion.show", {
168
189
  { height: "0", opacity: "0" },
169
190
  { height: "auto", opacity: "1" }
170
191
  ],
171
- options: { duration: 200, easing: "ease-in-out" }
192
+ options: { duration: 350, easing: "ease-in-out" }
172
193
  });
173
194
  setDefaultAnimation("accordion.hide", {
174
195
  keyframes: [
175
196
  { height: "auto", opacity: "1" },
176
197
  { height: "0", opacity: "0" }
177
198
  ],
178
- options: { duration: 200, easing: "ease-in-out" }
199
+ options: { duration: 350, easing: "ease-in-out" }
179
200
  });
180
201
 
181
202
  export { SgdsAccordionItem, SgdsAccordionItem as default };
package/components/Accordion/sgds-accordion-item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sgds-accordion-item.js","sources":["../../../src/components/Accordion/sgds-accordion-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport styles from \"./sgds-accordion-item.scss\";\n\n/**\n *\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @csspart base - The accordion-item base wrapper.\n * @csspart header - The accordion-item button header.\n * @csspart content - The accordion-item content.\n *\n * @slot accordion-header - The accordion-item button header slot.\n * @slot accordion-content - The accordion-item content slot.\n *\n * @cssprop --accordion-item-padding-y - The top and bottom padding for the container of accordion item's content\n * @cssprop --accordion-item-padding-x - The right and left padding for the container of accordion item's content\n * @cssprop --accordion-item-border-radius - The border radius of the accordion item\n * @cssprop --accordion-item-font-weight - The font weight of accordion-button when it is not collapsed\n * @cssprop --accordion-item-line-height - The line height of accordion\n */\nexport class SgdsAccordionItem extends SgdsElement {\n static styles = [SgdsElement.styles, styles];\n /** @internal */\n @query(\".accordion-item\") accordion: HTMLElement;\n /** @internal */\n @query(\".accordion-button\") header: HTMLElement;\n /** @internal */\n @query(\".accordion-body\") body: HTMLElement;\n\n /** Controls whether accordion-item is open or close */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Optional for accordion item. Can be used to insert any utility classes such as `me-auto` */\n @property({ reflect: true }) accordionItemClasses: string;\n\n firstUpdated() {\n this.body.hidden = !this.open;\n this.body.style.height = this.open ? \"auto\" : \"0\";\n }\n\n private handleSummaryClick() {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n\n this.header.focus();\n }\n\n private handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n event.preventDefault();\n this.show();\n }\n }\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n await stopAnimations(this.body);\n this.body.hidden = false;\n\n const { keyframes, options } = getAnimation(this, \"accordion.show\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.style.height = \"auto\";\n\n this.emit(\"sgds-after-show\");\n } else {\n // Hide\n const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n await stopAnimations(this.body);\n\n const { keyframes, options } = getAnimation(this, \"accordion.hide\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.hidden = true;\n this.body.style.height = \"auto\";\n\n this.emit(\"sgds-after-hide\");\n }\n }\n\n /** Shows the accordion. */\n public async show() {\n if (this.open) {\n return;\n }\n\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /** Hide the accordion */\n public async hide() {\n if (!this.open) {\n return;\n }\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n \"sgds accordion-item\": true,\n [`${this.accordionItemClasses}`]: this.accordionItemClasses\n })}\n >\n <button\n class=${classMap({\n \"accordion-button\": true,\n collapsed: !this.open\n })}\n part=\"header\"\n role=\"button\"\n aria-expanded=${this.open ? \"true\" : \"false\"}\n aria-controls=\"content\"\n tabindex=\"0\"\n @click=${this.handleSummaryClick}\n @keydown=${this.handleSummaryKeyDown}\n >\n <slot name=\"accordion-header\"></slot>\n </button>\n <div class=\"accordion-body\">\n <slot name=\"accordion-content\" class=\"accordion-content\" role=\"region\" aria-labelledby=\"header\"></slot>\n </div>\n </div>\n `;\n }\n}\n\nsetDefaultAnimation(\"accordion.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"accordion.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsAccordionItem;\n"],"names":["styles"],"mappings":"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"}
1
+ {"version":3,"file":"sgds-accordion-item.js","sources":["../../../src/components/Accordion/sgds-accordion-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport styles from \"./sgds-accordion-item.scss\";\n\n/**\n *\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @csspart base - The accordion-item base wrapper.\n * @csspart header - The accordion-item button header.\n * @csspart content - The accordion-item content.\n *\n * @slot accordion-header - The accordion-item button header slot.\n * @slot accordion-content - The accordion-item content slot.\n *\n * @cssprop --accordion-item-padding-y - The top and bottom padding for the container of accordion item's content\n * @cssprop --accordion-item-padding-x - The right and left padding for the container of accordion item's content\n * @cssprop --accordion-item-border-radius - The border radius of the accordion item\n * @cssprop --accordion-item-font-weight - The font weight of accordion-button when it is not collapsed\n * @cssprop --accordion-item-line-height - The line height of accordion\n */\nexport class SgdsAccordionItem extends SgdsElement {\n static styles = [SgdsElement.styles, styles];\n /** @internal */\n @query(\".accordion-item\") accordion: HTMLElement;\n /** @internal */\n @query(\".accordion-button\") header: HTMLElement;\n /** @internal */\n @query(\".accordion-body\") body: HTMLElement;\n\n /** Controls whether accordion-item is open or close */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Optional for accordion item. Can be used to insert any utility classes such as `me-auto` */\n @property({ reflect: true }) accordionItemClasses: string;\n\n firstUpdated() {\n if (!this.open) this.body.classList.add(\"hidden\");\n }\n\n private handleSummaryClick() {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n\n this.header.focus();\n }\n\n private handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n event.preventDefault();\n this.show();\n }\n }\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n await stopAnimations(this.body);\n this.body.classList.remove(\"hidden\");\n\n const { keyframes, options } = getAnimation(this, \"accordion.show\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.emit(\"sgds-after-show\");\n } else {\n // Hide\n const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n await stopAnimations(this.body);\n\n const { keyframes, options } = getAnimation(this, \"accordion.hide\");\n const animationDuration = options.duration as number;\n // Workaround to fix GSIB delay after animateTo.\n //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added\n setTimeout(() => {\n this.body.classList.add(\"hidden\");\n }, animationDuration - 20);\n\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.emit(\"sgds-after-hide\");\n }\n }\n\n /** Shows the accordion. */\n public async show() {\n if (this.open) {\n return;\n }\n\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /** Hide the accordion */\n public async hide() {\n if (!this.open) {\n return;\n }\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n \"sgds accordion-item\": true,\n [`${this.accordionItemClasses}`]: this.accordionItemClasses,\n show: this.open\n })}\n >\n <button\n class=${classMap({\n \"accordion-button\": true,\n collapsed: !this.open\n })}\n part=\"header\"\n role=\"button\"\n aria-expanded=${this.open ? \"true\" : \"false\"}\n aria-controls=\"content\"\n tabindex=\"0\"\n @click=${this.handleSummaryClick}\n @keydown=${this.handleSummaryKeyDown}\n >\n <slot name=\"accordion-header\"></slot>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-chevron-down\"\n viewBox=\"0 0 16 16\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n />\n </svg>\n </button>\n <div\n class=${classMap({\n \"accordion-body\": true\n })}\n >\n <slot name=\"accordion-content\" class=\"accordion-content\" role=\"region\" aria-labelledby=\"header\"></slot>\n </div>\n </div>\n `;\n }\n}\n\nsetDefaultAnimation(\"accordion.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"accordion.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nexport default SgdsAccordionItem;\n"],"names":["styles"],"mappings":"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"}
package/components/Accordion/sgds-accordion-item2.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css } from 'lit';
2
2
 
3
- var css_248z = css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){box-shadow:none;color:var(--accordion-active-color);font-weight:var(--accordion-item-font-weight)}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}`;
3
+ var css_248z = css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){color:var(--accordion-active-color,var(--sgds-primary))}.accordion-button svg.bi-chevron-down{height:1.3rem;margin-left:auto;transition:transform .2s ease-in-out;width:1.3rem}.accordion-button:not(.collapsed){box-shadow:none;font-weight:var(--accordion-item-font-weight)}.accordion-button:not(.collapsed) svg.bi-chevron-down{transform:rotate(-180deg)}.accordion-button:after{content:unset}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}.hidden{display:none}`;
4
4
 
5
5
  export { css_248z as default };
6
6
  //# sourceMappingURL=sgds-accordion-item2.js.map
package/components/Accordion/sgds-accordion.cjs.js CHANGED
@@ -9,6 +9,7 @@ var classMap_js = require('lit/directives/class-map.js');
9
9
  var sgdsElement = require('../../base/sgds-element.cjs.js');
10
10
  var sgdsAccordion = require('./sgds-accordion.cjs2.js');
11
11
 
12
+ const VALID_KEYS = ["Enter", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"];
12
13
  /**
13
14
  * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`
14
15
  * @slot default - slot for accordion-item
@@ -43,10 +44,8 @@ class SgdsAccordion extends sgdsElement["default"] {
43
44
  }
44
45
  });
45
46
  }
46
- async onToggle(event) {
47
- // Let the event pass through the DOM so that it can be
48
- // prevented from the outside if a user so desires.
49
- if (this.allowMultiple || event.defaultPrevented) {
47
+ async _onToggle(event) {
48
+ if (this.allowMultiple) {
50
49
  // No toggling when `allowMultiple` or the user prevents it.
51
50
  return;
52
51
  }
@@ -63,6 +62,11 @@ class SgdsAccordion extends sgdsElement["default"] {
63
62
  }
64
63
  });
65
64
  }
65
+ async _onKeyboardToggle(event) {
66
+ if (!VALID_KEYS.includes(event.key))
67
+ return;
68
+ return this._onToggle(event);
69
+ }
66
70
  render() {
67
71
  return lit.html `
68
72
  <div
@@ -71,7 +75,7 @@ class SgdsAccordion extends sgdsElement["default"] {
71
75
  [`${this.accordionClasses}`]: this.accordionClasses
72
76
  })}
73
77
  >
74
- <slot @click=${this.onToggle}></slot>
78
+ <slot @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>
75
79
  </div>
76
80
  `;
77
81
  }
package/components/Accordion/sgds-accordion.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sgds-accordion.cjs.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport styles from \"./sgds-accordion.scss\";\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n *\n * @cssprop --accordion-active-color - The text color of all accordion buttons to indicate its active state\n *\n */\n\nexport class SgdsAccordion extends SgdsElement {\n static styles = [SgdsElement.styles, styles];\n\n /** Allows multiple accordion items to be opened at the same time */\n @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n @property({ reflect: true }) accordionClasses: string;\n\n /** @internal */\n @queryAssignedNodes()\n private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n /** @internal */\n get items(): SgdsAccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsAccordionItem[];\n }\n\n firstUpdated() {\n const items = [...this.items] as SgdsAccordionItem[];\n items.forEach((item, index) => {\n if (items.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case items.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n }\n\n async onToggle(event: Event): Promise<void> {\n // Let the event pass through the DOM so that it can be\n // prevented from the outside if a user so desires.\n if (this.allowMultiple || event.defaultPrevented) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as SgdsAccordionItem[];\n\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach(item => {\n // Covers all elements within accordion-item\n if (!event.composedPath().includes(item)) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n \"sgds accordion\": true,\n [`${this.accordionClasses}`]: this.accordionClasses\n })}\n >\n <slot @click=${this.onToggle}></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsAccordion;\n"],"names":["SgdsElement","html","classMap","styles","__decorate","property","queryAssignedNodes"],"mappings":";;;;;;;;;;;AAOA;;;;;;AAMG;AAEG,MAAO,aAAc,SAAQA,sBAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;;QAI8C,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KAsEnE;;AA5DC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACpC,CAAC;KAC1B;IAED,YAAY,GAAA;QACV,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;QACrD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC5B,YAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,QAAQ,KAAK;AACX,oBAAA,KAAK,CAAC;AACJ,wBAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACvC,MAAM;AAER,oBAAA,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AACnB,wBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;wBACtC,MAAM;AAER,oBAAA;AACE,wBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;iBACxC;aACF;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;;;QAGzB,IAAI,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,gBAAgB,EAAE;;YAEhD,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;AAErD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,gBAAgB,EAAE,IAAI;YACtB,CAAC,CAAA,EAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,gBAAgB;SACpD,CAAC,CAAA;;AAEa,qBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;KAE/B,CAAC;KACH;;AAxEM,aAAM,CAAA,MAAA,GAAG,CAACF,sBAAW,CAAC,MAAM,EAAEG,wBAAM,CAA9B,CAAgC;AAGDC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrCD,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9CD,gBAAA,CAAA;AADP,IAAAE,gCAAkB,EAAE;AACgC,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
1
+ {"version":3,"file":"sgds-accordion.cjs.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport styles from \"./sgds-accordion.scss\";\n\nconst VALID_KEYS = [\"Enter\", \"ArrowUp\", \"ArrowLeft\", \"ArrowDown\", \"ArrowRight\"];\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n *\n * @cssprop --accordion-active-color - The text color of all accordion buttons to indicate its active state\n *\n */\n\nexport class SgdsAccordion extends SgdsElement {\n static styles = [SgdsElement.styles, styles];\n\n /** Allows multiple accordion items to be opened at the same time */\n @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n @property({ reflect: true }) accordionClasses: string;\n\n /** @internal */\n @queryAssignedNodes()\n private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n /** @internal */\n get items(): SgdsAccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsAccordionItem[];\n }\n\n firstUpdated() {\n const items = [...this.items] as SgdsAccordionItem[];\n items.forEach((item, index) => {\n if (items.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case items.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n }\n\n private async _onToggle(event: Event) {\n if (this.allowMultiple) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as SgdsAccordionItem[];\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach(item => {\n // Covers all elements within accordion-item\n if (!event.composedPath().includes(item)) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n private async _onKeyboardToggle(event: KeyboardEvent) {\n if (!VALID_KEYS.includes(event.key)) return;\n return this._onToggle(event);\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n \"sgds accordion\": true,\n [`${this.accordionClasses}`]: this.accordionClasses\n })}\n >\n <slot @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsAccordion;\n"],"names":["SgdsElement","html","classMap","styles","__decorate","property","queryAssignedNodes"],"mappings":"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"}
package/components/Accordion/sgds-accordion.d.ts CHANGED
@@ -18,7 +18,8 @@ export declare class SgdsAccordion extends SgdsElement {
18
18
  /** @internal */
19
19
  get items(): SgdsAccordionItem[];
20
20
  firstUpdated(): void;
21
- onToggle(event: Event): Promise<void>;
21
+ private _onToggle;
22
+ private _onKeyboardToggle;
22
23
  render(): import("lit-html").TemplateResult<1>;
23
24
  }
24
25
  export default SgdsAccordion;
package/components/Accordion/sgds-accordion.js CHANGED
@@ -5,6 +5,7 @@ import { classMap } from 'lit/directives/class-map.js';
5
5
  import SgdsElement from '../../base/sgds-element.js';
6
6
  import css_248z from './sgds-accordion2.js';
7
7
 
8
+ const VALID_KEYS = ["Enter", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"];
8
9
  /**
9
10
  * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`
10
11
  * @slot default - slot for accordion-item
@@ -39,10 +40,8 @@ class SgdsAccordion extends SgdsElement {
39
40
  }
40
41
  });
41
42
  }
42
- async onToggle(event) {
43
- // Let the event pass through the DOM so that it can be
44
- // prevented from the outside if a user so desires.
45
- if (this.allowMultiple || event.defaultPrevented) {
43
+ async _onToggle(event) {
44
+ if (this.allowMultiple) {
46
45
  // No toggling when `allowMultiple` or the user prevents it.
47
46
  return;
48
47
  }
@@ -59,6 +58,11 @@ class SgdsAccordion extends SgdsElement {
59
58
  }
60
59
  });
61
60
  }
61
+ async _onKeyboardToggle(event) {
62
+ if (!VALID_KEYS.includes(event.key))
63
+ return;
64
+ return this._onToggle(event);
65
+ }
62
66
  render() {
63
67
  return html `
64
68
  <div
@@ -67,7 +71,7 @@ class SgdsAccordion extends SgdsElement {
67
71
  [`${this.accordionClasses}`]: this.accordionClasses
68
72
  })}
69
73
  >
70
- <slot @click=${this.onToggle}></slot>
74
+ <slot @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>
71
75
  </div>
72
76
  `;
73
77
  }
package/components/Accordion/sgds-accordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sgds-accordion.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport styles from \"./sgds-accordion.scss\";\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n *\n * @cssprop --accordion-active-color - The text color of all accordion buttons to indicate its active state\n *\n */\n\nexport class SgdsAccordion extends SgdsElement {\n static styles = [SgdsElement.styles, styles];\n\n /** Allows multiple accordion items to be opened at the same time */\n @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n @property({ reflect: true }) accordionClasses: string;\n\n /** @internal */\n @queryAssignedNodes()\n private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n /** @internal */\n get items(): SgdsAccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsAccordionItem[];\n }\n\n firstUpdated() {\n const items = [...this.items] as SgdsAccordionItem[];\n items.forEach((item, index) => {\n if (items.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case items.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n }\n\n async onToggle(event: Event): Promise<void> {\n // Let the event pass through the DOM so that it can be\n // prevented from the outside if a user so desires.\n if (this.allowMultiple || event.defaultPrevented) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as SgdsAccordionItem[];\n\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach(item => {\n // Covers all elements within accordion-item\n if (!event.composedPath().includes(item)) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n \"sgds accordion\": true,\n [`${this.accordionClasses}`]: this.accordionClasses\n })}\n >\n <slot @click=${this.onToggle}></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsAccordion;\n"],"names":["styles"],"mappings":";;;;;;;AAOA;;;;;;AAMG;AAEG,MAAO,aAAc,SAAQ,WAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;;QAI8C,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KAsEnE;;AA5DC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACpC,CAAC;KAC1B;IAED,YAAY,GAAA;QACV,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;QACrD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC5B,YAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,QAAQ,KAAK;AACX,oBAAA,KAAK,CAAC;AACJ,wBAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;wBACvC,MAAM;AAER,oBAAA,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;AACnB,wBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;wBACtC,MAAM;AAER,oBAAA;AACE,wBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;iBACxC;aACF;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;;;QAGzB,IAAI,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,gBAAgB,EAAE;;YAEhD,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAwB,CAAC;AAErD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,gBAAgB,EAAE,IAAI;YACtB,CAAC,CAAA,EAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,gBAAgB;SACpD,CAAC,CAAA;;AAEa,qBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;KAE/B,CAAC;KACH;;AAxEM,aAAM,CAAA,MAAA,GAAG,CAAC,WAAW,CAAC,MAAM,EAAEA,QAAM,CAA9B,CAAgC;AAGD,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrC,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9C,UAAA,CAAA;AADP,IAAA,kBAAkB,EAAE;AACgC,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
1
+ {"version":3,"file":"sgds-accordion.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport styles from \"./sgds-accordion.scss\";\n\nconst VALID_KEYS = [\"Enter\", \"ArrowUp\", \"ArrowLeft\", \"ArrowDown\", \"ArrowRight\"];\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n *\n * @cssprop --accordion-active-color - The text color of all accordion buttons to indicate its active state\n *\n */\n\nexport class SgdsAccordion extends SgdsElement {\n static styles = [SgdsElement.styles, styles];\n\n /** Allows multiple accordion items to be opened at the same time */\n @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n /** Optional for accordion wrapper. Can be used to insert any utility classes such as me-auto */\n @property({ reflect: true }) accordionClasses: string;\n\n /** @internal */\n @queryAssignedNodes()\n private defaultNodes!: NodeListOf<SgdsAccordionItem>;\n\n /** @internal */\n get items(): SgdsAccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsAccordionItem[];\n }\n\n firstUpdated() {\n const items = [...this.items] as SgdsAccordionItem[];\n items.forEach((item, index) => {\n if (items.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case items.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n });\n }\n\n private async _onToggle(event: Event) {\n if (this.allowMultiple) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as SgdsAccordionItem[];\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach(item => {\n // Covers all elements within accordion-item\n if (!event.composedPath().includes(item)) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n private async _onKeyboardToggle(event: KeyboardEvent) {\n if (!VALID_KEYS.includes(event.key)) return;\n return this._onToggle(event);\n }\n\n render() {\n return html`\n <div\n class=${classMap({\n \"sgds accordion\": true,\n [`${this.accordionClasses}`]: this.accordionClasses\n })}\n >\n <slot @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsAccordion;\n"],"names":["styles"],"mappings":"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"}
package/components/Modal/index.umd.js CHANGED
@@ -3586,6 +3586,8 @@
3586
3586
  this.centeredAlignVariant = false;
3587
3587
  /** Removes the default animation when opening and closing of modal */
3588
3588
  this.noAnimation = false;
3589
+ /** Removes the close button from modal header */
3590
+ this.noCloseButton = false;
3589
3591
  }
3590
3592
  connectedCallback() {
3591
3593
  super.connectedCallback();
@@ -3742,16 +3744,18 @@
3742
3744
  >
3743
3745
  ${this.titleIcon ? withLabelIcon : ""} ${this.title}
3744
3746
  </h3>
3745
- <button
3746
- class=${classMap({
3747
- "modal-close": true,
3748
- "btn-sm": true,
3749
- "btn-close": true,
3750
- centered: this.centeredAlignVariant
3751
- })}
3752
- @click="${() => this.requestClose("close-button")}"
3753
- aria-label="close modal"
3754
- ></button>
3747
+ ${this.noCloseButton
3748
+ ? nothing
3749
+ : html `<button
3750
+ class=${classMap({
3751
+ "modal-close": true,
3752
+ "btn-sm": true,
3753
+ "btn-close": true,
3754
+ centered: this.centeredAlignVariant
3755
+ })}
3756
+ @click="${() => this.requestClose("close-button")}"
3757
+ aria-label="close modal"
3758
+ ></button>`}
3755
3759
  </div>
3756
3760
  `
3757
3761
  : ""}
@@ -3814,6 +3818,9 @@
3814
3818
  __decorate([
3815
3819
  property({ type: Boolean, reflect: true })
3816
3820
  ], SgdsModal.prototype, "noAnimation", void 0);
3821
+ __decorate([
3822
+ property({ type: Boolean, reflect: true })
3823
+ ], SgdsModal.prototype, "noCloseButton", void 0);
3817
3824
  __decorate([
3818
3825
  watch("open", { waitUntilFirstUpdate: true })
3819
3826
  ], SgdsModal.prototype, "handleOpenChange", null);