npm - @govtechsg/sgds-web-component - Versions diffs - 3.16.1-rc.2 → 3.17.0 - Mend

@govtechsg/sgds-web-component 3.16.1-rc.2 → 3.17.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 (119) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.16.1-rc.2",
+  "version": "3.17.0",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/components/Accordion/accordion-item.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var lit = require('lit');
-var css_248z = lit.css`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-16);line-height:var(--sgds-line-height-20);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;color:var(--sgds-color-default);display:flex;font-size:var(--sgds-font-size-20);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-24);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:not(.disabled):hover,.accordion-btn:not(:disabled):hover{background-color:var(--sgds-bg-translucent-subtle);z-index:2}.accordion-btn:not(.disabled):focus,.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus,.accordion-btn:not(:disabled):focus-visible{background-color:var(--sgds-bg-translucent-subtle);z-index:3}.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);margin-left:auto;transition:transform .2s ease-in-out}.accordion-btn:not(.collapsed) slot[name=caret] sgds-icon,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;
+var css_248z = lit.css`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-subtitle-sm);line-height:var(--sgds-line-height-2-xs);padding:var(--sgds-padding-md)}:host([density=spacious]) .accordion-btn{font-size:var(--sgds-font-size-heading-sm);line-height:var(--sgds-line-height-sm);padding:var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-md) var(--sgds-padding-md)}:host([density=spacious]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-xl) var(--sgds-padding-xl)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;color:var(--sgds-color-default);display:flex;font-size:var(--sgds-font-size-subtitle-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-md);line-height:var(--sgds-line-height-xs);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.disabled):hover,.accordion-btn:not(:disabled):hover{background-color:var(--sgds-bg-translucent-subtle);z-index:2}.accordion-btn:not(.disabled):focus,.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus,.accordion-btn:not(:disabled):focus-visible{background-color:var(--sgds-bg-translucent-subtle);z-index:3}.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=badge]::slotted(*){margin-left:auto}.accordion-header__trailing{display:flex;gap:var(--sgds-gap-md);margin-left:auto}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);transition:transform .2s ease-in-out}.accordion-btn:not(.collapsed) slot[name=caret] sgds-icon,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{font-size:var(--sgds-font-size-body-sm);line-height:var(--sgds-line-height-2-xs);overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;
 exports["default"] = css_248z;
 //# sourceMappingURL=accordion-item.cjs.js.map

package/react/components/Accordion/accordion-item.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
-var css_248z = css`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-16);line-height:var(--sgds-line-height-20);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;color:var(--sgds-color-default);display:flex;font-size:var(--sgds-font-size-20);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-24);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:not(.disabled):hover,.accordion-btn:not(:disabled):hover{background-color:var(--sgds-bg-translucent-subtle);z-index:2}.accordion-btn:not(.disabled):focus,.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus,.accordion-btn:not(:disabled):focus-visible{background-color:var(--sgds-bg-translucent-subtle);z-index:3}.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);margin-left:auto;transition:transform .2s ease-in-out}.accordion-btn:not(.collapsed) slot[name=caret] sgds-icon,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;
+var css_248z = css`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-subtitle-sm);line-height:var(--sgds-line-height-2-xs);padding:var(--sgds-padding-md)}:host([density=spacious]) .accordion-btn{font-size:var(--sgds-font-size-heading-sm);line-height:var(--sgds-line-height-sm);padding:var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-md) var(--sgds-padding-md)}:host([density=spacious]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-xl) var(--sgds-padding-xl)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;color:var(--sgds-color-default);display:flex;font-size:var(--sgds-font-size-subtitle-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-md);line-height:var(--sgds-line-height-xs);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.disabled):hover,.accordion-btn:not(:disabled):hover{background-color:var(--sgds-bg-translucent-subtle);z-index:2}.accordion-btn:not(.disabled):focus,.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus,.accordion-btn:not(:disabled):focus-visible{background-color:var(--sgds-bg-translucent-subtle);z-index:3}.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=badge]::slotted(*){margin-left:auto}.accordion-header__trailing{display:flex;gap:var(--sgds-gap-md);margin-left:auto}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);transition:transform .2s ease-in-out}.accordion-btn:not(.collapsed) slot[name=caret] sgds-icon,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{font-size:var(--sgds-font-size-body-sm);line-height:var(--sgds-line-height-2-xs);overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;
 export { css_248z as default };
 //# sourceMappingURL=accordion-item.js.map

package/react/components/Accordion/sgds-accordion-item.cjs.js CHANGED Viewed

@@ -21,9 +21,11 @@ var accordionItem = require('./accordion-item.cjs.js');
  * @event sgds-hide - Emitted on hide.
  * @event sgds-after-hide - Emitted on hide after animation has completed.
  *
+ * @slot icon - An icon placed before the header text, typically used to provide visual context for the accordion item.
  * @slot header - The accordion-item button header slot.
+ * @slot badge - A badge placed after the header text, aligned to the right via auto left margin.
  * @slot content - The accordion-item content slot.
- * @slot caret - The caret icon of accordion-item.
+ * @slot caret - The caret icon of accordion-item. Defaults to a chevron-down icon.
  *
  */
 class SgdsAccordionItem extends sgdsElement["default"] {
@@ -113,8 +115,11 @@ class SgdsAccordionItem extends sgdsElement["default"] {
         this.open = false;
         return event.waitForEvent(this, "sgds-after-hide");
     }
+    firstUpdated() {
+        if (!this.open)
+            this.body.classList.add("hidden");
+    }
     render() {
-        const isHydrated = this.hasUpdated;
         return lit.html `
       <div class="accordion-item">
         <button
@@ -132,17 +137,16 @@ class SgdsAccordionItem extends sgdsElement["default"] {
           @click=${this.handleSummaryClick}
           @keydown=${this.handleSummaryKeyDown}
         >
+          <slot name="icon"></slot>
           <slot name="header"></slot>
-          <slot name="caret">
-            <sgds-icon name="chevron-down" size=${this.density === "compact" ? "md" : "lg"}></sgds-icon>
-          </slot>
+          <div class="accordion-header__trailing">
+            <slot name="badge"></slot>
+            <slot name="caret">
+              <sgds-icon name="chevron-down" size=${this.density === "compact" ? "md" : "lg"}></sgds-icon>
+            </slot>
+          </div>
         </button>
-        <div
-          class=${classMap_js.classMap({
-            "accordion-body": true,
-            hidden: !this.open && !isHydrated
-        })}
-        >
+        <div class="accordion-body">
           <slot id="content" name="content" class="content" role="region" aria-labelledby="header"></slot>
         </div>
       </div>

package/react/components/Accordion/sgds-accordion-item.cjs.js.map CHANGED Viewed

	@@ -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, state } 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 accordionItemStyle from \"./accordion-item.css\";\nimport { AccordionDensity } from \"./sgds-accordion\";\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 @slot header - The accordion-item button header slot.\n * @slot content - The accordion-item content slot.\n * @slot caret - The caret icon of accordion-item.\n \n /\nexport class SgdsAccordionItem extends SgdsElement {\n static styles = [...SgdsElement.styles, accordionItemStyle];\n /** @internal /\n @query(\".accordion-item\") accordion: HTMLElement;\n /* @internal /\n @query(\".accordion-btn\") 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 /* Disables the accordion item /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Controls the density of the individual accordion item. This value is controlled by sgds-accordion /\n @property({ type: String, reflect: true }) density: AccordionDensity = \"default\";\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 render() {\n const isHydrated = this.hasUpdated;\n\n return html`\n <div class=\"accordion-item\">\n <button\n class=${classMap({\n \"accordion-btn\": true,\n disabled: this.disabled,\n collapsed: !this.open\n })}\n ?disabled=${this.disabled}\n role=\"button\"\n aria-expanded=${this.open ? \"true\" : \"false\"}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-controls=\"content\"\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n @click=${this.handleSummaryClick}\n @keydown=${this.handleSummaryKeyDown}\n >\n <slot name=\"header\"></slot>\n <slot name=\"caret\">\n <sgds-icon name=\"chevron-down\" size=${this.density === \"compact\" ? \"md\" : \"lg\"}></sgds-icon>\n </slot>\n </button>\n <div\n class=${classMap({\n \"accordion-body\": true,\n hidden: !this.open && !isHydrated\n })}\n >\n <slot id=\"content\" name=\"content\" class=\"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","accordionItemStyle","__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 accordionItemStyle from \"./accordion-item.css\";\nimport { AccordionDensity } from \"./sgds-accordion\";\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 @slot icon - An icon placed before the header text, typically used to provide visual context for the accordion item.\n * @slot header - The accordion-item button header slot.\n * @slot badge - A badge placed after the header text, aligned to the right via auto left margin.\n * @slot content - The accordion-item content slot.\n * @slot caret - The caret icon of accordion-item. Defaults to a chevron-down icon.\n \n /\nexport class SgdsAccordionItem extends SgdsElement {\n static styles = [...SgdsElement.styles, accordionItemStyle];\n /** @internal /\n @query(\".accordion-item\") accordion: HTMLElement;\n /* @internal /\n @query(\".accordion-btn\") 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 /* Disables the accordion item /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Controls the density of the individual accordion item. This value is controlled by sgds-accordion /\n @property({ type: String, reflect: true }) density: AccordionDensity = \"default\";\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 firstUpdated() {\n if (!this.open) this.body.classList.add(\"hidden\");\n }\n\n render() {\n return html`\n <div class=\"accordion-item\">\n <button\n class=${classMap({\n \"accordion-btn\": true,\n disabled: this.disabled,\n collapsed: !this.open\n })}\n ?disabled=${this.disabled}\n role=\"button\"\n aria-expanded=${this.open ? \"true\" : \"false\"}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-controls=\"content\"\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n @click=${this.handleSummaryClick}\n @keydown=${this.handleSummaryKeyDown}\n >\n <slot name=\"icon\"></slot>\n <slot name=\"header\"></slot>\n <div class=\"accordion-header__trailing\">\n <slot name=\"badge\"></slot>\n <slot name=\"caret\">\n <sgds-icon name=\"chevron-down\" size=${this.density === \"compact\" ? \"md\" : \"lg\"}></sgds-icon>\n </slot>\n </div>\n </button>\n <div class=\"accordion-body\">\n <slot id=\"content\" name=\"content\" class=\"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","accordionItemStyle","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}

package/react/components/Accordion/sgds-accordion-item.js CHANGED Viewed

@@ -17,9 +17,11 @@ import css_248z from './accordion-item.js';
  * @event sgds-hide - Emitted on hide.
  * @event sgds-after-hide - Emitted on hide after animation has completed.
  *
+ * @slot icon - An icon placed before the header text, typically used to provide visual context for the accordion item.
  * @slot header - The accordion-item button header slot.
+ * @slot badge - A badge placed after the header text, aligned to the right via auto left margin.
  * @slot content - The accordion-item content slot.
- * @slot caret - The caret icon of accordion-item.
+ * @slot caret - The caret icon of accordion-item. Defaults to a chevron-down icon.
  *
  */
 class SgdsAccordionItem extends SgdsElement {
@@ -109,8 +111,11 @@ class SgdsAccordionItem extends SgdsElement {
         this.open = false;
         return waitForEvent(this, "sgds-after-hide");
     }
+    firstUpdated() {
+        if (!this.open)
+            this.body.classList.add("hidden");
+    }
     render() {
-        const isHydrated = this.hasUpdated;
         return html `
       <div class="accordion-item">
         <button
@@ -128,17 +133,16 @@ class SgdsAccordionItem extends SgdsElement {
           @click=${this.handleSummaryClick}
           @keydown=${this.handleSummaryKeyDown}
         >
+          <slot name="icon"></slot>
           <slot name="header"></slot>
-          <slot name="caret">
-            <sgds-icon name="chevron-down" size=${this.density === "compact" ? "md" : "lg"}></sgds-icon>
-          </slot>
+          <div class="accordion-header__trailing">
+            <slot name="badge"></slot>
+            <slot name="caret">
+              <sgds-icon name="chevron-down" size=${this.density === "compact" ? "md" : "lg"}></sgds-icon>
+            </slot>
+          </div>
         </button>
-        <div
-          class=${classMap({
-            "accordion-body": true,
-            hidden: !this.open && !isHydrated
-        })}
-        >
+        <div class="accordion-body">
           <slot id="content" name="content" class="content" role="region" aria-labelledby="header"></slot>
         </div>
       </div>

package/react/components/Accordion/sgds-accordion-item.js.map CHANGED Viewed

	@@ -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, state } 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 accordionItemStyle from \"./accordion-item.css\";\nimport { AccordionDensity } from \"./sgds-accordion\";\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 @slot header - The accordion-item button header slot.\n * @slot content - The accordion-item content slot.\n * @slot caret - The caret icon of accordion-item.\n \n /\nexport class SgdsAccordionItem extends SgdsElement {\n static styles = [...SgdsElement.styles, accordionItemStyle];\n /** @internal /\n @query(\".accordion-item\") accordion: HTMLElement;\n /* @internal /\n @query(\".accordion-btn\") 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 /* Disables the accordion item /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Controls the density of the individual accordion item. This value is controlled by sgds-accordion /\n @property({ type: String, reflect: true }) density: AccordionDensity = \"default\";\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 render() {\n const isHydrated = this.hasUpdated;\n\n return html`\n <div class=\"accordion-item\">\n <button\n class=${classMap({\n \"accordion-btn\": true,\n disabled: this.disabled,\n collapsed: !this.open\n })}\n ?disabled=${this.disabled}\n role=\"button\"\n aria-expanded=${this.open ? \"true\" : \"false\"}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-controls=\"content\"\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n @click=${this.handleSummaryClick}\n @keydown=${this.handleSummaryKeyDown}\n >\n <slot name=\"header\"></slot>\n <slot name=\"caret\">\n <sgds-icon name=\"chevron-down\" size=${this.density === \"compact\" ? \"md\" : \"lg\"}></sgds-icon>\n </slot>\n </button>\n <div\n class=${classMap({\n \"accordion-body\": true,\n hidden: !this.open && !isHydrated\n })}\n >\n <slot id=\"content\" name=\"content\" class=\"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":["accordionItemStyle"],"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 accordionItemStyle from \"./accordion-item.css\";\nimport { AccordionDensity } from \"./sgds-accordion\";\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 @slot icon - An icon placed before the header text, typically used to provide visual context for the accordion item.\n * @slot header - The accordion-item button header slot.\n * @slot badge - A badge placed after the header text, aligned to the right via auto left margin.\n * @slot content - The accordion-item content slot.\n * @slot caret - The caret icon of accordion-item. Defaults to a chevron-down icon.\n \n /\nexport class SgdsAccordionItem extends SgdsElement {\n static styles = [...SgdsElement.styles, accordionItemStyle];\n /** @internal /\n @query(\".accordion-item\") accordion: HTMLElement;\n /* @internal /\n @query(\".accordion-btn\") 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 /* Disables the accordion item /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Controls the density of the individual accordion item. This value is controlled by sgds-accordion /\n @property({ type: String, reflect: true }) density: AccordionDensity = \"default\";\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 firstUpdated() {\n if (!this.open) this.body.classList.add(\"hidden\");\n }\n\n render() {\n return html`\n <div class=\"accordion-item\">\n <button\n class=${classMap({\n \"accordion-btn\": true,\n disabled: this.disabled,\n collapsed: !this.open\n })}\n ?disabled=${this.disabled}\n role=\"button\"\n aria-expanded=${this.open ? \"true\" : \"false\"}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-controls=\"content\"\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n @click=${this.handleSummaryClick}\n @keydown=${this.handleSummaryKeyDown}\n >\n <slot name=\"icon\"></slot>\n <slot name=\"header\"></slot>\n <div class=\"accordion-header__trailing\">\n <slot name=\"badge\"></slot>\n <slot name=\"caret\">\n <sgds-icon name=\"chevron-down\" size=${this.density === \"compact\" ? \"md\" : \"lg\"}></sgds-icon>\n </slot>\n </div>\n </button>\n <div class=\"accordion-body\">\n <slot id=\"content\" name=\"content\" class=\"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":["accordionItemStyle"],"mappings":"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"}

package/react/components/Accordion/sgds-accordion.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-accordion.cjs.js","sources":["../../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport accordionStyle from \"./accordion.css\";\n\nexport type AccordionDensity = \"default\" \| \"compact\";\nexport type AccordionVariant = \"default\" \| \"border\";\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 /\n\nexport class SgdsAccordion extends SgdsElement {\n static styles = [...SgdsElement.styles, accordionStyle];\n\n /** Allows multiple accordion items to be opened at the same time /\n @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n /* The variant of accordion /\n @property({ type: String, reflect: true }) variant: AccordionVariant = \"default\";\n\n /* The density of accordion /\n @property({ type: String, reflect: true }) density: AccordionDensity = \"default\";\n\n /* @internal /\n @queryAssignedElements() private defaultNodes!: 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 private _handleSlotChange() {\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 item.setAttribute(\"variant\", this.variant);\n item.setAttribute(\"density\", this.density);\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 class=\"accordion\">\n <slot @slotchange=${this._handleSlotChange} @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsAccordion;\n"],"names":["SgdsElement","html","accordionStyle","__decorate","property","queryAssignedElements"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-accordion.cjs.js","sources":["../../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport accordionStyle from \"./accordion.css\";\n\nexport type AccordionDensity = \"default\" \| \"compact\" \| \"spacious\";\nexport type AccordionVariant = \"default\" \| \"border\";\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 /\n\nexport class SgdsAccordion extends SgdsElement {\n static styles = [...SgdsElement.styles, accordionStyle];\n\n /** Allows multiple accordion items to be opened at the same time /\n @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n /* The variant of accordion /\n @property({ type: String, reflect: true }) variant: AccordionVariant = \"default\";\n\n /* The density of accordion /\n @property({ type: String, reflect: true }) density: AccordionDensity = \"default\";\n\n /* @internal /\n @queryAssignedElements() private defaultNodes!: 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 private _handleSlotChange() {\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 item.setAttribute(\"variant\", this.variant);\n item.setAttribute(\"density\", this.density);\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 class=\"accordion\">\n <slot @slotchange=${this._handleSlotChange} @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsAccordion;\n"],"names":["SgdsElement","html","accordionStyle","__decorate","property","queryAssignedElements"],"mappings":"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"}

package/react/components/Accordion/sgds-accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-accordion.js","sources":["../../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport accordionStyle from \"./accordion.css\";\n\nexport type AccordionDensity = \"default\" \| \"compact\";\nexport type AccordionVariant = \"default\" \| \"border\";\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 /\n\nexport class SgdsAccordion extends SgdsElement {\n static styles = [...SgdsElement.styles, accordionStyle];\n\n /** Allows multiple accordion items to be opened at the same time /\n @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n /* The variant of accordion /\n @property({ type: String, reflect: true }) variant: AccordionVariant = \"default\";\n\n /* The density of accordion /\n @property({ type: String, reflect: true }) density: AccordionDensity = \"default\";\n\n /* @internal /\n @queryAssignedElements() private defaultNodes!: 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 private _handleSlotChange() {\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 item.setAttribute(\"variant\", this.variant);\n item.setAttribute(\"density\", this.density);\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 class=\"accordion\">\n <slot @slotchange=${this._handleSlotChange} @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsAccordion;\n"],"names":["accordionStyle"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-accordion.js","sources":["../../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport accordionStyle from \"./accordion.css\";\n\nexport type AccordionDensity = \"default\" \| \"compact\" \| \"spacious\";\nexport type AccordionVariant = \"default\" \| \"border\";\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 /\n\nexport class SgdsAccordion extends SgdsElement {\n static styles = [...SgdsElement.styles, accordionStyle];\n\n /** Allows multiple accordion items to be opened at the same time /\n @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n /* The variant of accordion /\n @property({ type: String, reflect: true }) variant: AccordionVariant = \"default\";\n\n /* The density of accordion /\n @property({ type: String, reflect: true }) density: AccordionDensity = \"default\";\n\n /* @internal /\n @queryAssignedElements() private defaultNodes!: 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 private _handleSlotChange() {\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 item.setAttribute(\"variant\", this.variant);\n item.setAttribute(\"density\", this.density);\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 class=\"accordion\">\n <slot @slotchange=${this._handleSlotChange} @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsAccordion;\n"],"names":["accordionStyle"],"mappings":"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"}

package/react/components/ComboBox/combo-box.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var lit = require('lit');
-var css_248z = lit.css`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
+var css_248z = lit.css`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
 exports["default"] = css_248z;
 //# sourceMappingURL=combo-box.cjs.js.map

package/react/components/ComboBox/combo-box.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
-var css_248z = css`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
+var css_248z = css`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
 export { css_248z as default };
 //# sourceMappingURL=combo-box.js.map

package/react/components/ComboBox/sgds-combo-box.cjs.js CHANGED Viewed

@@ -461,7 +461,12 @@ class SgdsComboBox extends selectElement.SelectElement {
         const showClearButton = (this.isFocused || this.menuIsOpen) && this.value !== "" && this.clearable && !this.readonly;
         return lit.html `
       <div
-        class=${classMap_js.classMap({ "form-control-container": true, disabled: this.disabled, combobox: true })}
+        class=${classMap_js.classMap({
+            "form-control-container": true,
+            "m-width-256": true,
+            disabled: this.disabled,
+            combobox: true
+        })}
         @keydown=${this._handleMultiSelectKeyDown}
       >
         ${this._renderLabel()}

package/react/components/ComboBox/sgds-combo-box.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-combo-box.cjs.js","sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { live } from \"lit/directives/live.js\";\nimport { html, nothing, PropertyValueMap, TemplateResult } from \"lit\";\nimport { property, queryAssignedElements, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsOptionData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport comboBoxStyle from \"./combo-box.css\";\nimport formTextControlStyle from \"../../styles/form-text-control.css\";\nimport { SgdsComboBoxOption } from \"./sgds-combo-box-option\";\n\nimport { repeat } from \"lit/directives/repeat.js\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\nimport { ISgdsComboBoxInputEventDetail } from \"./types\";\n\n/*\n Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n /\ntype SgdsComboBoxOptionData = SgdsOptionData;\n\nexport type { ISgdsComboBoxInputEventDetail };\n\n/\n @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n \n @slot default - default slot to pass in sgds-combo-box-option\n \n @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-change - Emitted when the combo box's value changes.\n * @event sgds-input - Emitted when user input is received and its value changes. `event.detail = { displayValue }`\n * @eventDetail {ISgdsComboBoxInputEventDetail} sgds-input\n * @event sgds-focus - Emitted when user input is focused.\n * @event sgds-blur - Emitted when user input is blurred.\n /\nexport class SgdsComboBox extends SelectElement {\n static styles = [...SelectElement.styles, formTextControlStyle, comboBoxStyle];\n static childName = \"sgds-combo-box-option\";\n /* @internal /\n static dependencies = {\n [SgdsComboBox.childName]: SgdsComboBoxOption,\n \"sgds-icon\": SgdsIcon,\n \"sgds-badge\": SgdsBadge,\n \"sgds-spinner\": SgdsSpinner\n };\n\n /* If true, renders multiple checkbox selection items. If false, single-select. /\n @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n /* If true, renders badge that fills width of combobox /\n @property({ type: Boolean, reflect: true }) badgeFullWidth = false;\n\n /* If true, a clear button will be enabled on focus /\n @property({ type: Boolean, reflect: true }) clearable = false;\n\n /* Enables the asynchronous behaviour of a combo box. When true, filterFunction is ignored and filtering is done remotely. /\n @property({ type: Boolean, reflect: true }) async = false;\n\n /* When filtering remotely and there are no results, set this to true to enable no options feedback on the menu. Applicable for async combo box only. /\n @property({ type: Boolean, reflect: true }) emptyMenuAsync = false;\n\n /* The function used to filter the menu list, given the user's input value. /\n @property()\n filterFunction: (inputValue: string, item: SgdsComboBoxOptionData) => boolean = (inputValue, item) => {\n return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n };\n\n @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n @queryAssignedElements({ flatten: true, selector: \"sgds-combo-box-option\" })\n protected options: SgdsComboBoxOption[];\n\n @state() private optionList: SgdsComboBoxOptionData[] = [];\n @state() private emptyMenuAfterFiltering = false;\n\n // Used to show and hide the clear button\n @state() protected isFocused = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener(\"focus\", async () => {\n this.isFocused = true;\n });\n\n this.addEventListener(\"blur\", async () => {\n this.isFocused = false;\n });\n\n this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (\n e.key === \"Enter\" &&\n (e.target as HTMLElement).shadowRoot?.querySelector(\".form-clearable\")?.matches(\":focus\")\n ) {\n this._handleClear();\n }\n });\n\n this.addEventListener(\"sgds-hide\", async (e: CustomEvent) => {\n if (!e.detail.isOutside) {\n const sgdsInput = await this._input;\n sgdsInput.focus();\n }\n\n this.options.forEach(o => o.removeAttribute(\"hidden\"));\n // reset emptyMenu state\n this.emptyMenuAfterFiltering = false;\n });\n }\n\n async firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n if (this.async) this.filterFunction = () => true;\n this.menuList.forEach(o => {\n const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n comboBoxOption.innerText = o.label;\n comboBoxOption.value = o.value;\n comboBoxOption.checkbox = this.multiSelect;\n comboBoxOption.active = this.value.includes(o.value);\n this.appendChild(comboBoxOption);\n });\n this._setupValidation(this.menuList);\n if (this.menuIsOpen) {\n await this.updateFloatingPosition();\n }\n }\n\n protected async _handleDefaultSlotChange(e: Event) {\n const assignedElements = (e.target as HTMLSlotElement).assignedElements({\n flatten: true\n }) as ComboBoxOptionWithFlag[];\n\n assignedElements.forEach(option => {\n // Handling of click events\n if (option.hasAttribute(\"disabled\")) return false;\n if (option.clickEventAdded) return false;\n option.addEventListener(\"click\", (evt: PointerEvent) => {\n evt.preventDefault();\n const optionTarget = evt.target as SgdsComboBoxOption;\n\n if (this.multiSelect) {\n optionTarget.active ? this._handleItemUnselect(evt) : this._handleItemSelected(evt);\n } else {\n this._handleItemSelected(evt);\n }\n\n return false;\n });\n option.clickEventAdded = true;\n option.addEventListener(\"keydown\", (evt: KeyboardEvent) => {\n if (evt.key === \"Enter\") {\n this.close = \"outside\";\n const optionTarget = evt.target as SgdsComboBoxOption;\n optionTarget.click();\n }\n });\n });\n\n /* this will trigger _updateValueAndDisplayValue /\n await this.updateComplete;\n this.optionList = await this._getMenuListFromOptions(assignedElements);\n this._setupValidation(this.optionList);\n }\n\n private async _setupValidation(list: SgdsComboBoxOptionData[]) {\n if (this.value && list.length > 0) {\n const valueArray = this.value.split(\";\");\n const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n if (!this.multiSelect) {\n this.displayValue = initialSelectedItem[0]?.label;\n }\n }\n /* We want to run validation regardless of value or list present /\n this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n this._mixinValidate(this.input);\n }\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n async _handleValueChange() {\n // when value change, always emit a change event\n this.emit(\"sgds-change\");\n this.options.forEach(o => o.removeAttribute(\"hidden\"));\n\n if (this.value) {\n this.emit(\"sgds-select\");\n }\n\n const sgdsInput = await this._input;\n this._mixinSetFormValue();\n\n if (this.multiSelect) {\n this._mixinValidate(this.input);\n } else {\n this._mixinValidate(sgdsInput);\n }\n\n // When value is updated by user and it doesn't map to selectedItems, we should re-map selectedItems\n const selectedItemVal = this.selectedItems.map(val => val.value).join(\";\");\n if (selectedItemVal !== this.value) {\n this._updateValueAndDisplayValue(this.optionList);\n }\n\n if (!this._isTouched && this.value === \"\") return;\n this.invalid = !this._mixinReportValidity();\n }\n\n @watch(\"optionList\", { waitUntilFirstUpdate: true })\n _handleOptionListChange() {\n this._updateValueAndDisplayValue(this.optionList);\n }\n\n @watch(\"menuList\", { waitUntilFirstUpdate: true })\n _handleMenuListChange() {\n const newMenu = this.menuList.map(o => {\n const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n comboBoxOption.innerText = o.label;\n comboBoxOption.value = o.value;\n comboBoxOption.checkbox = this.multiSelect;\n comboBoxOption.active = this.value.includes(o.value);\n return comboBoxOption;\n });\n\n this.replaceChildren(...newMenu);\n }\n\n private _updateValueAndDisplayValue(list: SgdsComboBoxOptionData[]) {\n const valueArray = this.value.split(\";\");\n const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n this.selectedItems = [...initialSelectedItem];\n // When the new filtered items don't match value we update it\n const updatedValue = initialSelectedItem.map(item => item.value).join(\";\");\n if (updatedValue !== this.value) {\n this.value = updatedValue;\n }\n // Disabling this condition for async combobox so that the display value in the input will not clear when menu options changes\n if (!this.multiSelect && !this.async) {\n this.displayValue = initialSelectedItem[0]?.label \|\| \"\";\n }\n\n this.options.forEach(o => (o.active = valueArray.includes(o.value)));\n }\n\n // Called each time the user types in the <sgds-input>, we set .value and show the menu\n protected async _handleInputChange(e: CustomEvent) {\n const input = e.target as HTMLInputElement;\n this.displayValue = input.value;\n this.emit<ISgdsComboBoxInputEventDetail>(\"sgds-input\", { detail: { displayValue: this.displayValue } });\n this.invalid = false;\n this.showMenu();\n // reset menu list when displayValue is cleared\n if (this.displayValue === \"\" && !this.multiSelect) {\n this.selectedItems = [];\n this.value = this.selectedItems.join(\";\");\n this.options.forEach(o => (o.active = false));\n }\n // There is a race condition in certain situations where this.optionList is not fully updated during slotchange\n // Hence instead of using this.optionList, we have to perform a query on the <sgds-combo-box-option> elements\n const optionList = this.options.map(o => ({ value: o.value, label: o.textContent.trim() }));\n this.filteredList = optionList.filter(item => this.filterFunction(this.displayValue, item));\n\n // Filtering for slots\n this.emptyMenuAfterFiltering = this.filteredList.length === 0;\n const filteredValues = this.filteredList.map(l => l.value);\n\n this.options.forEach(o => {\n if (!filteredValues.includes(o.value)) {\n o.hidden = true;\n } else {\n o.hidden = false;\n }\n });\n }\n\n /\n Called whenever an <sgds-combo-box-option> dispatches sgds-select\"\n /\n protected async _handleItemSelected(e: Event) {\n const itemEl = e.target as SgdsComboBoxOption;\n if (itemEl.disabled) return;\n\n const itemLabel = itemEl.textContent?.trim() ?? \"\";\n const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) \|\| {\n label: itemLabel,\n value: itemValueAttr\n };\n\n if (this.multiSelect) {\n if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n this.selectedItems = [...this.selectedItems, foundItem];\n }\n\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n itemEl.active = true;\n } else {\n // Single-select\n // Only update active states if a new item is selected\n if (this.selectedItems.length === 0 \|\| this.selectedItems[0].value !== foundItem.value) {\n // Remove active from all options\n this.options.forEach(o => (o.active = false));\n itemEl.active = true;\n\n this.selectedItems = [foundItem];\n this.value = foundItem.value.toString();\n this.displayValue = foundItem.label;\n this.hideMenu();\n }\n }\n }\n\n private _handleItemUnselect(e: Event) {\n const itemEl = e.target as SgdsComboBoxOption;\n if (itemEl.disabled) return;\n\n itemEl.removeAttribute(\"active\");\n const itemLabel = itemEl.textContent?.trim() ?? \"\";\n const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) \|\| {\n label: itemLabel,\n value: itemValueAttr\n };\n\n this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n }\n\n private async _handleBadgeDismissed(e: CustomEvent, item: SgdsComboBoxOptionData) {\n e.preventDefault();\n const removedValue = item.value;\n this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n }\n\n private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n // Only do this in multi-select mode\n if (!this.multiSelect) {\n return;\n }\n\n if (e.key === \"Backspace\" && this.multiSelect) {\n if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n const removedValue = this.selectedItems[this.selectedItems.length - 1].value;\n this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n this.selectedItems = this.selectedItems.slice(0, -1);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n }\n }\n }\n\n protected _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n protected async _handleInputBlur(e: Event) {\n e.preventDefault();\n\n this.emit(\"sgds-blur\");\n\n if (this.multiSelect) {\n const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n if (displayValueMatchedSelectedItems.length <= 0) {\n this.displayValue = \"\";\n }\n } else {\n // Single select\n if (this.selectedItems.length > 0) {\n this.displayValue = this.selectedItems[0].label;\n } else {\n this.displayValue = \"\";\n }\n }\n }\n\n // For clearing the value\n protected async _handleClear() {\n this.value = this.displayValue = \"\";\n this.options?.forEach(o => (o.active = false));\n\n const sgdsInput = await this._input;\n sgdsInput.focus();\n this.showMenu();\n }\n\n /* For form reset /\n protected async _mixinResetFormControl() {\n this.value = this.defaultValue;\n if (!this.multiSelect) {\n //reset menu\n this.options.forEach(o => {\n o.active = o.value === this.value;\n });\n const initialOption = this.options.filter(o => o.value === this.value);\n if (initialOption.length <= 0) {\n this.displayValue = \"\";\n } else {\n this.displayValue = initialOption[0].textContent.trim();\n }\n this._mixinResetValidity(await this._input);\n } else {\n const valueArray = this.value.split(\";\");\n // reset menu\n this.options.forEach(o => {\n o.active = valueArray.includes(o.value);\n });\n const initialOption = this.options.filter(o => valueArray.includes(o.value));\n this.selectedItems = initialOption.map(o => ({ value: o.value, label: o.textContent.trim() }));\n this._mixinResetValidity(await this._multiSelectInput);\n }\n }\n\n /* Template for the suffix icon /\n protected suffixIconTemplate: TemplateResult = html`<sgds-icon\n name=${this.menuIsOpen ? \"chevron-up\" : \"chevron-down\"}\n size=\"md\"\n ></sgds-icon>`;\n\n protected prefixIconTemplate: TemplateResult = html`${nothing}`;\n /\n Used `repeat` helper from Lit to render instead of .map:\n * The reassigning of value is affecting the truncation on badge as it is not triggering the slot change event.\n \n To compare this to lit-html's default handling for lists, consider reversing a large list of names:\n * For a list created using Array.map, lit-html maintains the DOM nodes for the list items, but reassigns the values\n * For a list created using repeat, the repeat directive reorders the existing DOM nodes, so the nodes representing the first list item move to the last position.\n */\n protected _renderInput(showClearButton: boolean): TemplateResult {\n const wantFeedbackStyle = this.hasFeedback;\n const showButton = showClearButton;\n\n return html`\n <div\n ${ref(this.myDropdown)}\n class=\"form-control-group ${classMap({\n disabled: this.disabled,\n readonly: this.readonly,\n \"is-invalid\": this.invalid && wantFeedbackStyle\n })}\"\n @click=${this._handleClick}\n >\n ${this.prefixIconTemplate}\n <div class=\"combobox-input-container\">\n ${this.multiSelect\n ? html`\n ${repeat(\n this.selectedItems,\n item => item.value,\n item =>\n html`<sgds-badge\n outlined\n variant=\"neutral\"\n show\n ?dismissible=${!(this.readonly \|\| this.disabled)}\n ?fullwidth=${this.badgeFullWidth}\n @sgds-hide=${e => this._handleBadgeDismissed(e, item)}\n >${item.label}</sgds-badge\n >`\n )}\n `\n : nothing}\n <input\n class=\"form-control\"\n type=\"text\"\n id=${this._controlId}\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n ?autofocus=${this.autofocus}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${this.displayValue ? this.displayValue.trim() : \"\"}\n @input=${this._handleInputChange}\n @blur=${this._handleInputBlur}\n @focus=${this._handleFocus}\n aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n ? `${this._controlId}-invalid`\n : \"\"}\"\n />\n </div>\n\n ${showButton\n ? html`\n <sgds-icon\n id=${`${this._controlId}-combobox-clear-button`}\n tabindex=\"0\"\n class=\"form-clearable\"\n name=\"xcircle-fill\"\n size=\"md\"\n @click=${this._handleClear}\n aria-label=\"Clear selections\"\n role=\"button\"\n ></sgds-icon>\n `\n : nothing}\n ${this.suffixIconTemplate}\n </div>\n `;\n }\n\n protected _renderFeedbackMenu() {\n if (this.loading) {\n return this._renderLoadingMenu();\n }\n // When async, the filtering is done by remote server, so we do not check for emptyMenu of combobox filterFunction\n if (this.async) {\n return this.emptyMenuAsync \|\| this.optionList.length === 0 ? this._renderEmptyMenu() : nothing;\n } else {\n return this.optionList.length === 0 \|\| // no options at all\n (this.emptyMenuAfterFiltering && this.optionList.length > 0) // check if filtering results in empty menu\n ? this._renderEmptyMenu()\n : nothing;\n }\n }\n\n render() {\n const showClearButton =\n (this.isFocused \|\| this.menuIsOpen) && this.value !== \"\" && this.clearable && !this.readonly;\n return html`\n <div\n class=${classMap({ \"form-control-container\": true, disabled: this.disabled, combobox: true })}\n @keydown=${this._handleMultiSelectKeyDown}\n >\n ${this._renderLabel()}\n <!-- The input -->\n ${this._renderInput(showClearButton)} ${this._renderFeedback()}\n\n <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\" ${ref(this.menuRef)}>\n <slot\n id=\"default\"\n class=${classMap({ \"d-none\": this.loading \|\| this.emptyMenuAsync \|\| this.optionList.length === 0 })}\n @slotchange=${this._handleDefaultSlotChange}\n ></slot>\n ${this._renderFeedbackMenu()}\n </ul>\n </div>\n\n <!-- Required an input element for constraint validation -->\n ${this.multiSelect\n ? html`<input\n .value=${live(this.value)}\n id=\"multi-select-input-tracker\"\n class=\"visually-hidden\"\n ?required=${this.required}\n tabindex=\"-1\"\n />`\n : nothing}\n `;\n }\n}\n\ninterface ComboBoxOptionWithFlag extends SgdsComboBoxOption {\n clickEventAdded?: boolean;\n}\n\nexport default SgdsComboBox;\n\n//TODO:\n// Replace this.optionList ?\n// During slotchange event _handleDefaultSlotChange, we try to populate this.optionList to obtain value attribute and textContent as label from <sgds-combo-box-option>\n// However, it has race conditions in certain situation like nextjs, where the last option's label (essentially the slot of <sgds-combo-box-option>) may not be available immediately.\n// To circumvent this, I avoid relying on this.optionList to perform filterFunction onInput handler and query this.options directly at the point of user typing.\n// To prevent confusion, this.optionList should ideally be removed in future iterations\n"],"names":["SelectElement","html","nothing","ref","classMap","repeat","ifDefined","live","formTextControlStyle","comboBoxStyle","SgdsComboBoxOption","SgdsIcon","SgdsBadge","SgdsSpinner","__decorate","property","queryAsync","queryAssignedElements","state","watch"],"mappings":"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"}
1	+ {"version":3,"file":"sgds-combo-box.cjs.js","sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { live } from \"lit/directives/live.js\";\nimport { html, nothing, PropertyValueMap, TemplateResult } from \"lit\";\nimport { property, queryAssignedElements, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsOptionData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport comboBoxStyle from \"./combo-box.css\";\nimport formTextControlStyle from \"../../styles/form-text-control.css\";\nimport { SgdsComboBoxOption } from \"./sgds-combo-box-option\";\n\nimport { repeat } from \"lit/directives/repeat.js\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\nimport { ISgdsComboBoxInputEventDetail } from \"./types\";\n\n/*\n Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n /\ntype SgdsComboBoxOptionData = SgdsOptionData;\n\nexport type { ISgdsComboBoxInputEventDetail };\n\n/\n @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n \n @slot default - default slot to pass in sgds-combo-box-option\n \n @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-change - Emitted when the combo box's value changes.\n * @event sgds-input - Emitted when user input is received and its value changes. `event.detail = { displayValue }`\n * @eventDetail {ISgdsComboBoxInputEventDetail} sgds-input\n * @event sgds-focus - Emitted when user input is focused.\n * @event sgds-blur - Emitted when user input is blurred.\n /\nexport class SgdsComboBox extends SelectElement {\n static styles = [...SelectElement.styles, formTextControlStyle, comboBoxStyle];\n static childName = \"sgds-combo-box-option\";\n /* @internal /\n static dependencies = {\n [SgdsComboBox.childName]: SgdsComboBoxOption,\n \"sgds-icon\": SgdsIcon,\n \"sgds-badge\": SgdsBadge,\n \"sgds-spinner\": SgdsSpinner\n };\n\n /* If true, renders multiple checkbox selection items. If false, single-select. /\n @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n /* If true, renders badge that fills width of combobox /\n @property({ type: Boolean, reflect: true }) badgeFullWidth = false;\n\n /* If true, a clear button will be enabled on focus /\n @property({ type: Boolean, reflect: true }) clearable = false;\n\n /* Enables the asynchronous behaviour of a combo box. When true, filterFunction is ignored and filtering is done remotely. /\n @property({ type: Boolean, reflect: true }) async = false;\n\n /* When filtering remotely and there are no results, set this to true to enable no options feedback on the menu. Applicable for async combo box only. /\n @property({ type: Boolean, reflect: true }) emptyMenuAsync = false;\n\n /* The function used to filter the menu list, given the user's input value. /\n @property()\n filterFunction: (inputValue: string, item: SgdsComboBoxOptionData) => boolean = (inputValue, item) => {\n return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n };\n\n @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n @queryAssignedElements({ flatten: true, selector: \"sgds-combo-box-option\" })\n protected options: SgdsComboBoxOption[];\n\n @state() private optionList: SgdsComboBoxOptionData[] = [];\n @state() private emptyMenuAfterFiltering = false;\n\n // Used to show and hide the clear button\n @state() protected isFocused = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener(\"focus\", async () => {\n this.isFocused = true;\n });\n\n this.addEventListener(\"blur\", async () => {\n this.isFocused = false;\n });\n\n this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (\n e.key === \"Enter\" &&\n (e.target as HTMLElement).shadowRoot?.querySelector(\".form-clearable\")?.matches(\":focus\")\n ) {\n this._handleClear();\n }\n });\n\n this.addEventListener(\"sgds-hide\", async (e: CustomEvent) => {\n if (!e.detail.isOutside) {\n const sgdsInput = await this._input;\n sgdsInput.focus();\n }\n\n this.options.forEach(o => o.removeAttribute(\"hidden\"));\n // reset emptyMenu state\n this.emptyMenuAfterFiltering = false;\n });\n }\n\n async firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n if (this.async) this.filterFunction = () => true;\n this.menuList.forEach(o => {\n const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n comboBoxOption.innerText = o.label;\n comboBoxOption.value = o.value;\n comboBoxOption.checkbox = this.multiSelect;\n comboBoxOption.active = this.value.includes(o.value);\n this.appendChild(comboBoxOption);\n });\n this._setupValidation(this.menuList);\n if (this.menuIsOpen) {\n await this.updateFloatingPosition();\n }\n }\n\n protected async _handleDefaultSlotChange(e: Event) {\n const assignedElements = (e.target as HTMLSlotElement).assignedElements({\n flatten: true\n }) as ComboBoxOptionWithFlag[];\n\n assignedElements.forEach(option => {\n // Handling of click events\n if (option.hasAttribute(\"disabled\")) return false;\n if (option.clickEventAdded) return false;\n option.addEventListener(\"click\", (evt: PointerEvent) => {\n evt.preventDefault();\n const optionTarget = evt.target as SgdsComboBoxOption;\n\n if (this.multiSelect) {\n optionTarget.active ? this._handleItemUnselect(evt) : this._handleItemSelected(evt);\n } else {\n this._handleItemSelected(evt);\n }\n\n return false;\n });\n option.clickEventAdded = true;\n option.addEventListener(\"keydown\", (evt: KeyboardEvent) => {\n if (evt.key === \"Enter\") {\n this.close = \"outside\";\n const optionTarget = evt.target as SgdsComboBoxOption;\n optionTarget.click();\n }\n });\n });\n\n /* this will trigger _updateValueAndDisplayValue /\n await this.updateComplete;\n this.optionList = await this._getMenuListFromOptions(assignedElements);\n this._setupValidation(this.optionList);\n }\n\n private async _setupValidation(list: SgdsComboBoxOptionData[]) {\n if (this.value && list.length > 0) {\n const valueArray = this.value.split(\";\");\n const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n if (!this.multiSelect) {\n this.displayValue = initialSelectedItem[0]?.label;\n }\n }\n /* We want to run validation regardless of value or list present /\n this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n this._mixinValidate(this.input);\n }\n\n @watch(\"value\", { waitUntilFirstUpdate: true })\n async _handleValueChange() {\n // when value change, always emit a change event\n this.emit(\"sgds-change\");\n this.options.forEach(o => o.removeAttribute(\"hidden\"));\n\n if (this.value) {\n this.emit(\"sgds-select\");\n }\n\n const sgdsInput = await this._input;\n this._mixinSetFormValue();\n\n if (this.multiSelect) {\n this._mixinValidate(this.input);\n } else {\n this._mixinValidate(sgdsInput);\n }\n\n // When value is updated by user and it doesn't map to selectedItems, we should re-map selectedItems\n const selectedItemVal = this.selectedItems.map(val => val.value).join(\";\");\n if (selectedItemVal !== this.value) {\n this._updateValueAndDisplayValue(this.optionList);\n }\n\n if (!this._isTouched && this.value === \"\") return;\n this.invalid = !this._mixinReportValidity();\n }\n\n @watch(\"optionList\", { waitUntilFirstUpdate: true })\n _handleOptionListChange() {\n this._updateValueAndDisplayValue(this.optionList);\n }\n\n @watch(\"menuList\", { waitUntilFirstUpdate: true })\n _handleMenuListChange() {\n const newMenu = this.menuList.map(o => {\n const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n comboBoxOption.innerText = o.label;\n comboBoxOption.value = o.value;\n comboBoxOption.checkbox = this.multiSelect;\n comboBoxOption.active = this.value.includes(o.value);\n return comboBoxOption;\n });\n\n this.replaceChildren(...newMenu);\n }\n\n private _updateValueAndDisplayValue(list: SgdsComboBoxOptionData[]) {\n const valueArray = this.value.split(\";\");\n const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n this.selectedItems = [...initialSelectedItem];\n // When the new filtered items don't match value we update it\n const updatedValue = initialSelectedItem.map(item => item.value).join(\";\");\n if (updatedValue !== this.value) {\n this.value = updatedValue;\n }\n // Disabling this condition for async combobox so that the display value in the input will not clear when menu options changes\n if (!this.multiSelect && !this.async) {\n this.displayValue = initialSelectedItem[0]?.label \|\| \"\";\n }\n\n this.options.forEach(o => (o.active = valueArray.includes(o.value)));\n }\n\n // Called each time the user types in the <sgds-input>, we set .value and show the menu\n protected async _handleInputChange(e: CustomEvent) {\n const input = e.target as HTMLInputElement;\n this.displayValue = input.value;\n this.emit<ISgdsComboBoxInputEventDetail>(\"sgds-input\", { detail: { displayValue: this.displayValue } });\n this.invalid = false;\n this.showMenu();\n // reset menu list when displayValue is cleared\n if (this.displayValue === \"\" && !this.multiSelect) {\n this.selectedItems = [];\n this.value = this.selectedItems.join(\";\");\n this.options.forEach(o => (o.active = false));\n }\n // There is a race condition in certain situations where this.optionList is not fully updated during slotchange\n // Hence instead of using this.optionList, we have to perform a query on the <sgds-combo-box-option> elements\n const optionList = this.options.map(o => ({ value: o.value, label: o.textContent.trim() }));\n this.filteredList = optionList.filter(item => this.filterFunction(this.displayValue, item));\n\n // Filtering for slots\n this.emptyMenuAfterFiltering = this.filteredList.length === 0;\n const filteredValues = this.filteredList.map(l => l.value);\n\n this.options.forEach(o => {\n if (!filteredValues.includes(o.value)) {\n o.hidden = true;\n } else {\n o.hidden = false;\n }\n });\n }\n\n /\n Called whenever an <sgds-combo-box-option> dispatches sgds-select\"\n /\n protected async _handleItemSelected(e: Event) {\n const itemEl = e.target as SgdsComboBoxOption;\n if (itemEl.disabled) return;\n\n const itemLabel = itemEl.textContent?.trim() ?? \"\";\n const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) \|\| {\n label: itemLabel,\n value: itemValueAttr\n };\n\n if (this.multiSelect) {\n if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n this.selectedItems = [...this.selectedItems, foundItem];\n }\n\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n itemEl.active = true;\n } else {\n // Single-select\n // Only update active states if a new item is selected\n if (this.selectedItems.length === 0 \|\| this.selectedItems[0].value !== foundItem.value) {\n // Remove active from all options\n this.options.forEach(o => (o.active = false));\n itemEl.active = true;\n\n this.selectedItems = [foundItem];\n this.value = foundItem.value.toString();\n this.displayValue = foundItem.label;\n this.hideMenu();\n }\n }\n }\n\n private _handleItemUnselect(e: Event) {\n const itemEl = e.target as SgdsComboBoxOption;\n if (itemEl.disabled) return;\n\n itemEl.removeAttribute(\"active\");\n const itemLabel = itemEl.textContent?.trim() ?? \"\";\n const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) \|\| {\n label: itemLabel,\n value: itemValueAttr\n };\n\n this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n }\n\n private async _handleBadgeDismissed(e: CustomEvent, item: SgdsComboBoxOptionData) {\n e.preventDefault();\n const removedValue = item.value;\n this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n }\n\n private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n // Only do this in multi-select mode\n if (!this.multiSelect) {\n return;\n }\n\n if (e.key === \"Backspace\" && this.multiSelect) {\n if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n const removedValue = this.selectedItems[this.selectedItems.length - 1].value;\n this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n this.selectedItems = this.selectedItems.slice(0, -1);\n this.value = this.selectedItems.map(i => i.value).join(\";\");\n }\n }\n }\n\n protected _handleFocus() {\n this.emit(\"sgds-focus\");\n }\n\n protected async _handleInputBlur(e: Event) {\n e.preventDefault();\n\n this.emit(\"sgds-blur\");\n\n if (this.multiSelect) {\n const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n if (displayValueMatchedSelectedItems.length <= 0) {\n this.displayValue = \"\";\n }\n } else {\n // Single select\n if (this.selectedItems.length > 0) {\n this.displayValue = this.selectedItems[0].label;\n } else {\n this.displayValue = \"\";\n }\n }\n }\n\n // For clearing the value\n protected async _handleClear() {\n this.value = this.displayValue = \"\";\n this.options?.forEach(o => (o.active = false));\n\n const sgdsInput = await this._input;\n sgdsInput.focus();\n this.showMenu();\n }\n\n /* For form reset /\n protected async _mixinResetFormControl() {\n this.value = this.defaultValue;\n if (!this.multiSelect) {\n //reset menu\n this.options.forEach(o => {\n o.active = o.value === this.value;\n });\n const initialOption = this.options.filter(o => o.value === this.value);\n if (initialOption.length <= 0) {\n this.displayValue = \"\";\n } else {\n this.displayValue = initialOption[0].textContent.trim();\n }\n this._mixinResetValidity(await this._input);\n } else {\n const valueArray = this.value.split(\";\");\n // reset menu\n this.options.forEach(o => {\n o.active = valueArray.includes(o.value);\n });\n const initialOption = this.options.filter(o => valueArray.includes(o.value));\n this.selectedItems = initialOption.map(o => ({ value: o.value, label: o.textContent.trim() }));\n this._mixinResetValidity(await this._multiSelectInput);\n }\n }\n\n /* Template for the suffix icon /\n protected suffixIconTemplate: TemplateResult = html`<sgds-icon\n name=${this.menuIsOpen ? \"chevron-up\" : \"chevron-down\"}\n size=\"md\"\n ></sgds-icon>`;\n\n protected prefixIconTemplate: TemplateResult = html`${nothing}`;\n /\n Used `repeat` helper from Lit to render instead of .map:\n * The reassigning of value is affecting the truncation on badge as it is not triggering the slot change event.\n \n To compare this to lit-html's default handling for lists, consider reversing a large list of names:\n * For a list created using Array.map, lit-html maintains the DOM nodes for the list items, but reassigns the values\n * For a list created using repeat, the repeat directive reorders the existing DOM nodes, so the nodes representing the first list item move to the last position.\n */\n protected _renderInput(showClearButton: boolean): TemplateResult {\n const wantFeedbackStyle = this.hasFeedback;\n const showButton = showClearButton;\n\n return html`\n <div\n ${ref(this.myDropdown)}\n class=\"form-control-group ${classMap({\n disabled: this.disabled,\n readonly: this.readonly,\n \"is-invalid\": this.invalid && wantFeedbackStyle\n })}\"\n @click=${this._handleClick}\n >\n ${this.prefixIconTemplate}\n <div class=\"combobox-input-container\">\n ${this.multiSelect\n ? html`\n ${repeat(\n this.selectedItems,\n item => item.value,\n item =>\n html`<sgds-badge\n outlined\n variant=\"neutral\"\n show\n ?dismissible=${!(this.readonly \|\| this.disabled)}\n ?fullwidth=${this.badgeFullWidth}\n @sgds-hide=${e => this._handleBadgeDismissed(e, item)}\n >${item.label}</sgds-badge\n >`\n )}\n `\n : nothing}\n <input\n class=\"form-control\"\n type=\"text\"\n id=${this._controlId}\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n aria-invalid=${this.invalid ? \"true\" : \"false\"}\n ?autofocus=${this.autofocus}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${this.displayValue ? this.displayValue.trim() : \"\"}\n @input=${this._handleInputChange}\n @blur=${this._handleInputBlur}\n @focus=${this._handleFocus}\n aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n ? `${this._controlId}-invalid`\n : \"\"}\"\n />\n </div>\n\n ${showButton\n ? html`\n <sgds-icon\n id=${`${this._controlId}-combobox-clear-button`}\n tabindex=\"0\"\n class=\"form-clearable\"\n name=\"xcircle-fill\"\n size=\"md\"\n @click=${this._handleClear}\n aria-label=\"Clear selections\"\n role=\"button\"\n ></sgds-icon>\n `\n : nothing}\n ${this.suffixIconTemplate}\n </div>\n `;\n }\n\n protected _renderFeedbackMenu() {\n if (this.loading) {\n return this._renderLoadingMenu();\n }\n // When async, the filtering is done by remote server, so we do not check for emptyMenu of combobox filterFunction\n if (this.async) {\n return this.emptyMenuAsync \|\| this.optionList.length === 0 ? this._renderEmptyMenu() : nothing;\n } else {\n return this.optionList.length === 0 \|\| // no options at all\n (this.emptyMenuAfterFiltering && this.optionList.length > 0) // check if filtering results in empty menu\n ? this._renderEmptyMenu()\n : nothing;\n }\n }\n\n render() {\n const showClearButton =\n (this.isFocused \|\| this.menuIsOpen) && this.value !== \"\" && this.clearable && !this.readonly;\n return html`\n <div\n class=${classMap({\n \"form-control-container\": true,\n \"m-width-256\": true,\n disabled: this.disabled,\n combobox: true\n })}\n @keydown=${this._handleMultiSelectKeyDown}\n >\n ${this._renderLabel()}\n <!-- The input -->\n ${this._renderInput(showClearButton)} ${this._renderFeedback()}\n\n <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\" ${ref(this.menuRef)}>\n <slot\n id=\"default\"\n class=${classMap({ \"d-none\": this.loading \|\| this.emptyMenuAsync \|\| this.optionList.length === 0 })}\n @slotchange=${this._handleDefaultSlotChange}\n ></slot>\n ${this._renderFeedbackMenu()}\n </ul>\n </div>\n\n <!-- Required an input element for constraint validation -->\n ${this.multiSelect\n ? html`<input\n .value=${live(this.value)}\n id=\"multi-select-input-tracker\"\n class=\"visually-hidden\"\n ?required=${this.required}\n tabindex=\"-1\"\n />`\n : nothing}\n `;\n }\n}\n\ninterface ComboBoxOptionWithFlag extends SgdsComboBoxOption {\n clickEventAdded?: boolean;\n}\n\nexport default SgdsComboBox;\n\n//TODO:\n// Replace this.optionList ?\n// During slotchange event _handleDefaultSlotChange, we try to populate this.optionList to obtain value attribute and textContent as label from <sgds-combo-box-option>\n// However, it has race conditions in certain situation like nextjs, where the last option's label (essentially the slot of <sgds-combo-box-option>) may not be available immediately.\n// To circumvent this, I avoid relying on this.optionList to perform filterFunction onInput handler and query this.options directly at the point of user typing.\n// To prevent confusion, this.optionList should ideally be removed in future iterations\n"],"names":["SelectElement","html","nothing","ref","classMap","repeat","ifDefined","live","formTextControlStyle","comboBoxStyle","SgdsComboBoxOption","SgdsIcon","SgdsBadge","SgdsSpinner","__decorate","property","queryAsync","queryAssignedElements","state","watch"],"mappings":"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"}

package/react/components/ComboBox/sgds-combo-box.js CHANGED Viewed

@@ -457,7 +457,12 @@ class SgdsComboBox extends SelectElement {
         const showClearButton = (this.isFocused || this.menuIsOpen) && this.value !== "" && this.clearable && !this.readonly;
         return html `
       <div
-        class=${classMap({ "form-control-container": true, disabled: this.disabled, combobox: true })}
+        class=${classMap({
+            "form-control-container": true,
+            "m-width-256": true,
+            disabled: this.disabled,
+            combobox: true
+        })}
         @keydown=${this._handleMultiSelectKeyDown}
       >
         ${this._renderLabel()}