@govtechsg/sgds-web-component 3.1.0-rc.6 → 3.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-accordion-item.cjs.js","sources":["../../../../src/components/Accordion/sgds-accordion-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport accordionItemStyle from \"./accordion-item.css\";\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  firstUpdated() {\n    if (!this.open) this.body.classList.add(\"hidden\");\n  }\n\n  private handleSummaryClick() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.open = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.classList.remove(\"hidden\");\n\n      const { keyframes, options } = getAnimation(this, \"accordion.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (slHide.defaultPrevented) {\n        this.open = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"accordion.hide\");\n      const animationDuration = options.duration as number;\n      // Workaround to fix GSIB delay after animateTo.\n      //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added\n      setTimeout(() => {\n        this.body.classList.add(\"hidden\");\n      }, animationDuration - 20);\n\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /** Shows the accordion. */\n  public async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the accordion */\n  public async hide() {\n    if (!this.open) {\n      return;\n    }\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n  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=\"header\"></slot>\n          <slot name=\"caret\">\n            <sgds-icon name=\"chevron-down\" size=${this.getAttribute(\"density\") === \"compact\" ? \"md\" : \"lg\"}></sgds-icon>\n          </slot>\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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"}
+{"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\";\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  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.getAttribute(\"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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"}

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

@@ -30,10 +30,6 @@ class SgdsAccordionItem extends SgdsElement {
         /** Disables the accordion item */
         this.disabled = false;
     }
-    firstUpdated() {
-        if (!this.open)
-            this.body.classList.add("hidden");
-    }
     handleSummaryClick() {
         if (this.open) {
             this.hide();
@@ -112,6 +108,7 @@ class SgdsAccordionItem extends SgdsElement {
         return waitForEvent(this, "sgds-after-hide");
     }
     render() {
+        const isHydrated = this.hasUpdated;
         return html `
       <div class="accordion-item">
         <button
@@ -134,7 +131,12 @@ class SgdsAccordionItem extends SgdsElement {
             <sgds-icon name="chevron-down" size=${this.getAttribute("density") === "compact" ? "md" : "lg"}></sgds-icon>
           </slot>
         </button>
-        <div class="accordion-body">
+        <div
+          class=${classMap({
+            "accordion-body": true,
+            hidden: !this.open && !isHydrated
+        })}
+        >
           <slot id="content" name="content" class="content" role="region" aria-labelledby="header"></slot>
         </div>
       </div>

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-accordion-item.js","sources":["../../../../src/components/Accordion/sgds-accordion-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport accordionItemStyle from \"./accordion-item.css\";\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  firstUpdated() {\n    if (!this.open) this.body.classList.add(\"hidden\");\n  }\n\n  private handleSummaryClick() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.open = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.classList.remove(\"hidden\");\n\n      const { keyframes, options } = getAnimation(this, \"accordion.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (slHide.defaultPrevented) {\n        this.open = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"accordion.hide\");\n      const animationDuration = options.duration as number;\n      // Workaround to fix GSIB delay after animateTo.\n      //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added\n      setTimeout(() => {\n        this.body.classList.add(\"hidden\");\n      }, animationDuration - 20);\n\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /** Shows the accordion. */\n  public async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the accordion */\n  public async hide() {\n    if (!this.open) {\n      return;\n    }\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n  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=\"header\"></slot>\n          <slot name=\"caret\">\n            <sgds-icon name=\"chevron-down\" size=${this.getAttribute(\"density\") === \"compact\" ? \"md\" : \"lg\"}></sgds-icon>\n          </slot>\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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"}
+{"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\";\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  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.getAttribute(\"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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"}

package/react/components/Button/button.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{display:inline-block}.btn.full-width,:host([fullWidth]){width:100%}.btn.full-width.has-left-icon{justify-content:flex-start}.btn.full-width.has-right-icon{justify-content:space-between}.btn.full-width.has-left-icon.has-right-icon{justify-content:center}.btn span{padding:0 var(--sgds-padding-2-xs)}`;
+var css_248z = lit.css`:host{display:inline-block}:host([fullWidth]),:host([fullWidth]) .btn{width:100%}:host([fullWidth]) .btn.has-left-icon{justify-content:flex-start}:host([fullWidth]) .btn.has-right-icon{justify-content:space-between}:host([fullWidth]) .btn.has-left-icon.has-right-icon{justify-content:center}.btn span{padding:0 var(--sgds-padding-2-xs)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=button.cjs.js.map

package/react/components/Button/button.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{display:inline-block}.btn.full-width,:host([fullWidth]){width:100%}.btn.full-width.has-left-icon{justify-content:flex-start}.btn.full-width.has-right-icon{justify-content:space-between}.btn.full-width.has-left-icon.has-right-icon{justify-content:center}.btn span{padding:0 var(--sgds-padding-2-xs)}`;
+var css_248z = css`:host{display:inline-block}:host([fullWidth]),:host([fullWidth]) .btn{width:100%}:host([fullWidth]) .btn.has-left-icon{justify-content:flex-start}:host([fullWidth]) .btn.has-right-icon{justify-content:space-between}:host([fullWidth]) .btn.has-left-icon.has-right-icon{justify-content:center}.btn span{padding:0 var(--sgds-padding-2-xs)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=button.js.map

package/react/components/Button/sgds-button.cjs.js

@@ -88,11 +88,8 @@ class SgdsButton extends buttonElement["default"] {
         class="btn ${classMap_js.classMap({
             disabled: this.disabled,
             active: this.active,
-            "full-width": this.fullWidth,
             "has-left-icon": this._hasLeftIcon,
-            "has-right-icon": this._hasRightIcon,
-            [`btn-${this.variant}`]: this.variant,
-            [`btn-${this.size}`]: this.size
+            "has-right-icon": this._hasRightIcon
         })}"
         ?disabled=${ifDefined_js.ifDefined(isLink ? undefined : this.disabled)}
         type=${ifDefined_js.ifDefined(isLink ? undefined : this.type)}

package/react/components/Button/sgds-button.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-button.cjs.js","sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport ButtonElement from \"../../base/button-element\";\nimport anchorStyles from \"../../styles/anchor.css\";\nimport { FormSubmitController } from \"../../utils/formSubmitController\";\nimport buttonStyles from \"./button.css\";\n\nexport type ButtonVariant = \"primary\" | \"outline\" | \"ghost\" | \"danger\";\n\n/**\n * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.\n *\n * @slot default - The button's label.\n * @slot leftIcon - The slot for icon to the left of the button text\n * @slot rightIcon - The slot for icon to the right of the button text\n *\n * @event sgds-blur - Emitted when the button is blurred.\n * @event sgds-focus - Emitted when the button is focused.\n *\n *\n */\nexport class SgdsButton extends ButtonElement {\n  static styles = [...ButtonElement.styles, anchorStyles, buttonStyles];\n  /** @internal */\n  @state()\n  private _hasLeftIcon = false;\n\n  /** @internal */\n  @state()\n  private _hasRightIcon = false;\n\n  /** @internal */\n  private readonly formSubmitController = new FormSubmitController(this, {\n    form: (input: HTMLInputElement) => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute(\"form\")) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute(\"form\");\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest(\"form\");\n    }\n  });\n  /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */\n  @property({ type: String, reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property({ type: String, reflect: true }) form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formaction\" }) formAction: string;\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ type: String, reflect: true, attribute: \"formmethod\" }) formMethod: \"post\" | \"get\";\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: \"formnovalidate\", type: Boolean, reflect: true })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formtarget\" }) formTarget:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string;\n\n  /** When set, the button will be in full width. */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    if (this.type === \"submit\") {\n      this.formSubmitController.submit(this);\n    }\n    if (this.type === \"reset\") {\n      this.formSubmitController.reset(this);\n    }\n  };\n\n  private _handleLeftIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasLeftIcon = true);\n    }\n  }\n\n  private _handleRightIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasRightIcon = true);\n    }\n  }\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"full-width\": this.fullWidth,\n          \"has-left-icon\": this._hasLeftIcon,\n          \"has-right-icon\": this._hasRightIcon,\n          [`btn-${this.variant}`]: this.variant,\n          [`btn-${this.size}`]: this.size\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        href=${ifDefined(isLink ? this.href : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n        role=${ifDefined(isLink ? \"button\" : undefined)}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.ariaLabel)}\n      >\n      <slot name=\"leftIcon\" @slotchange=${this._handleLeftIconSlotchange}></slot>\n      <span><slot></slot></span>\n      <slot name=\"rightIcon\" @slotchange=${this._handleRightIconSlotchange}></slot>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"names":["ButtonElement","FormSubmitController","literal","html","classMap","ifDefined","anchorStyles","buttonStyles","__decorate","state","property"],"mappings":"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"}
+{"version":3,"file":"sgds-button.cjs.js","sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport ButtonElement from \"../../base/button-element\";\nimport anchorStyles from \"../../styles/anchor.css\";\nimport { FormSubmitController } from \"../../utils/formSubmitController\";\nimport buttonStyles from \"./button.css\";\n\nexport type ButtonVariant = \"primary\" | \"outline\" | \"ghost\" | \"danger\";\n\n/**\n * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.\n *\n * @slot default - The button's label.\n * @slot leftIcon - The slot for icon to the left of the button text\n * @slot rightIcon - The slot for icon to the right of the button text\n *\n * @event sgds-blur - Emitted when the button is blurred.\n * @event sgds-focus - Emitted when the button is focused.\n *\n *\n */\nexport class SgdsButton extends ButtonElement {\n  static styles = [...ButtonElement.styles, anchorStyles, buttonStyles];\n  /** @internal */\n  @state()\n  private _hasLeftIcon = false;\n\n  /** @internal */\n  @state()\n  private _hasRightIcon = false;\n\n  /** @internal */\n  private readonly formSubmitController = new FormSubmitController(this, {\n    form: (input: HTMLInputElement) => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute(\"form\")) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute(\"form\");\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest(\"form\");\n    }\n  });\n  /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */\n  @property({ type: String, reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property({ type: String, reflect: true }) form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formaction\" }) formAction: string;\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ type: String, reflect: true, attribute: \"formmethod\" }) formMethod: \"post\" | \"get\";\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: \"formnovalidate\", type: Boolean, reflect: true })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formtarget\" }) formTarget:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string;\n\n  /** When set, the button will be in full width. */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    if (this.type === \"submit\") {\n      this.formSubmitController.submit(this);\n    }\n    if (this.type === \"reset\") {\n      this.formSubmitController.reset(this);\n    }\n  };\n\n  private _handleLeftIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasLeftIcon = true);\n    }\n  }\n\n  private _handleRightIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasRightIcon = true);\n    }\n  }\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"has-left-icon\": this._hasLeftIcon,\n          \"has-right-icon\": this._hasRightIcon\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        href=${ifDefined(isLink ? this.href : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n        role=${ifDefined(isLink ? \"button\" : undefined)}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.ariaLabel)}\n      >\n      <slot name=\"leftIcon\" @slotchange=${this._handleLeftIconSlotchange}></slot>\n      <span><slot></slot></span>\n      <slot name=\"rightIcon\" @slotchange=${this._handleRightIconSlotchange}></slot>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"names":["ButtonElement","FormSubmitController","literal","html","classMap","ifDefined","anchorStyles","buttonStyles","__decorate","state","property"],"mappings":"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"}

package/react/components/Button/sgds-button.js

@@ -84,11 +84,8 @@ class SgdsButton extends ButtonElement {
         class="btn ${classMap({
             disabled: this.disabled,
             active: this.active,
-            "full-width": this.fullWidth,
             "has-left-icon": this._hasLeftIcon,
-            "has-right-icon": this._hasRightIcon,
-            [`btn-${this.variant}`]: this.variant,
-            [`btn-${this.size}`]: this.size
+            "has-right-icon": this._hasRightIcon
         })}"
         ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
         type=${ifDefined(isLink ? undefined : this.type)}

package/react/components/Button/sgds-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-button.js","sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport ButtonElement from \"../../base/button-element\";\nimport anchorStyles from \"../../styles/anchor.css\";\nimport { FormSubmitController } from \"../../utils/formSubmitController\";\nimport buttonStyles from \"./button.css\";\n\nexport type ButtonVariant = \"primary\" | \"outline\" | \"ghost\" | \"danger\";\n\n/**\n * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.\n *\n * @slot default - The button's label.\n * @slot leftIcon - The slot for icon to the left of the button text\n * @slot rightIcon - The slot for icon to the right of the button text\n *\n * @event sgds-blur - Emitted when the button is blurred.\n * @event sgds-focus - Emitted when the button is focused.\n *\n *\n */\nexport class SgdsButton extends ButtonElement {\n  static styles = [...ButtonElement.styles, anchorStyles, buttonStyles];\n  /** @internal */\n  @state()\n  private _hasLeftIcon = false;\n\n  /** @internal */\n  @state()\n  private _hasRightIcon = false;\n\n  /** @internal */\n  private readonly formSubmitController = new FormSubmitController(this, {\n    form: (input: HTMLInputElement) => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute(\"form\")) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute(\"form\");\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest(\"form\");\n    }\n  });\n  /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */\n  @property({ type: String, reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property({ type: String, reflect: true }) form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formaction\" }) formAction: string;\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ type: String, reflect: true, attribute: \"formmethod\" }) formMethod: \"post\" | \"get\";\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: \"formnovalidate\", type: Boolean, reflect: true })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formtarget\" }) formTarget:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string;\n\n  /** When set, the button will be in full width. */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    if (this.type === \"submit\") {\n      this.formSubmitController.submit(this);\n    }\n    if (this.type === \"reset\") {\n      this.formSubmitController.reset(this);\n    }\n  };\n\n  private _handleLeftIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasLeftIcon = true);\n    }\n  }\n\n  private _handleRightIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasRightIcon = true);\n    }\n  }\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"full-width\": this.fullWidth,\n          \"has-left-icon\": this._hasLeftIcon,\n          \"has-right-icon\": this._hasRightIcon,\n          [`btn-${this.variant}`]: this.variant,\n          [`btn-${this.size}`]: this.size\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        href=${ifDefined(isLink ? this.href : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n        role=${ifDefined(isLink ? \"button\" : undefined)}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.ariaLabel)}\n      >\n      <slot name=\"leftIcon\" @slotchange=${this._handleLeftIconSlotchange}></slot>\n      <span><slot></slot></span>\n      <slot name=\"rightIcon\" @slotchange=${this._handleRightIconSlotchange}></slot>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"names":["anchorStyles","buttonStyles"],"mappings":"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"}
+{"version":3,"file":"sgds-button.js","sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport ButtonElement from \"../../base/button-element\";\nimport anchorStyles from \"../../styles/anchor.css\";\nimport { FormSubmitController } from \"../../utils/formSubmitController\";\nimport buttonStyles from \"./button.css\";\n\nexport type ButtonVariant = \"primary\" | \"outline\" | \"ghost\" | \"danger\";\n\n/**\n * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.\n *\n * @slot default - The button's label.\n * @slot leftIcon - The slot for icon to the left of the button text\n * @slot rightIcon - The slot for icon to the right of the button text\n *\n * @event sgds-blur - Emitted when the button is blurred.\n * @event sgds-focus - Emitted when the button is focused.\n *\n *\n */\nexport class SgdsButton extends ButtonElement {\n  static styles = [...ButtonElement.styles, anchorStyles, buttonStyles];\n  /** @internal */\n  @state()\n  private _hasLeftIcon = false;\n\n  /** @internal */\n  @state()\n  private _hasRightIcon = false;\n\n  /** @internal */\n  private readonly formSubmitController = new FormSubmitController(this, {\n    form: (input: HTMLInputElement) => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute(\"form\")) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute(\"form\");\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest(\"form\");\n    }\n  });\n  /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */\n  @property({ type: String, reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property({ type: String, reflect: true }) form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formaction\" }) formAction: string;\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ type: String, reflect: true, attribute: \"formmethod\" }) formMethod: \"post\" | \"get\";\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: \"formnovalidate\", type: Boolean, reflect: true })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formtarget\" }) formTarget:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string;\n\n  /** When set, the button will be in full width. */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    if (this.type === \"submit\") {\n      this.formSubmitController.submit(this);\n    }\n    if (this.type === \"reset\") {\n      this.formSubmitController.reset(this);\n    }\n  };\n\n  private _handleLeftIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasLeftIcon = true);\n    }\n  }\n\n  private _handleRightIconSlotchange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n    if (childNodes.length > 0) {\n      return (this._hasRightIcon = true);\n    }\n  }\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"has-left-icon\": this._hasLeftIcon,\n          \"has-right-icon\": this._hasRightIcon\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        href=${ifDefined(isLink ? this.href : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n        role=${ifDefined(isLink ? \"button\" : undefined)}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.ariaLabel)}\n      >\n      <slot name=\"leftIcon\" @slotchange=${this._handleLeftIconSlotchange}></slot>\n      <span><slot></slot></span>\n      <slot name=\"rightIcon\" @slotchange=${this._handleRightIconSlotchange}></slot>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"names":["anchorStyles","buttonStyles"],"mappings":"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"}

package/react/components/Checkbox/checkbox.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);margin-bottom:var(--sgds-margin-3-xs);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md)}:host(:not([disabled]):not([invalid]):not([checked]):not([indeterminate])) .form-check-input:hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:checked:focus,.form-check-input:checked:hover,.form-check-input[checked]:focus-visible,.form-check-input[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-label{width:100%}`;
+var css_248z = lit.css`:host{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md)}:host(:not([disabled]):not([invalid]):not([checked]):not([indeterminate])) .form-check-input:hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:checked:focus,.form-check-input:checked:hover,.form-check-input[checked]:focus-visible,.form-check-input[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-label{width:100%}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=checkbox.cjs.js.map

package/react/components/Checkbox/checkbox.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);margin-bottom:var(--sgds-margin-3-xs);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md)}:host(:not([disabled]):not([invalid]):not([checked]):not([indeterminate])) .form-check-input:hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:checked:focus,.form-check-input:checked:hover,.form-check-input[checked]:focus-visible,.form-check-input[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-label{width:100%}`;
+var css_248z = css`:host{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md)}:host(:not([disabled]):not([invalid]):not([checked]):not([indeterminate])) .form-check-input:hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:checked:focus,.form-check-input:checked:hover,.form-check-input[checked]:focus-visible,.form-check-input[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-label{width:100%}`;
 
 export { css_248z as default };
 //# sourceMappingURL=checkbox.js.map

package/react/components/Checkbox/sgds-checkbox-group.cjs.js

@@ -8,17 +8,15 @@ var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var live_js = require('lit/directives/live.js');
 var formControlElement = require('../../base/form-control-element.cjs.js');
-var sgdsElement = require('../../base/sgds-element.cjs.js');
-var feedback = require('../../styles/feedback.cjs.js');
-var formHint = require('../../styles/form-hint.cjs.js');
-var formLabel = require('../../styles/form-label.cjs.js');
+var defaultvalue = require('../../utils/defaultvalue.cjs.js');
 var validatorMixin = require('../../utils/validatorMixin.cjs.js');
 var watch = require('../../utils/watch.cjs.js');
 var checkboxGroup = require('./checkbox-group.cjs.js');
 
 /**
- * @summary CheckboxGroup is the container that group multiple checkboxes under a single question field.
- * It handles the display of validation feedback of its checkboxes children.
+ * @summary CheckboxGroup is a form component for multiselection of checkboxes.
+ *
+ * @event sgds-change - Emitted when the value of the CheckboxGroup changes. This happens when checkboxes are checked or unchecked.
  *
  * @slot default - Pass in `sgds-checkbox` into the default slot
  * @slot invalidIcon - The slot for invalid icon
@@ -30,7 +28,7 @@ class SgdsCheckboxGroup extends validatorMixin.SgdsFormValidatorMixin(formContro
         /** The checkbox group's label  */
         this.label = "";
         /**Feedback text for error state when validated */
-        this.invalidFeedback = "";
+        this.invalidFeedback = "Please tick at least one box if you want to proceed";
         /** Allows invalidFeedback, invalid styles to be visible. When SgdsCheckboxGroup is used, it overrides the value of hasFeedback on SgdsCheckbox with its own value. */
         this.hasFeedback = false;
         /** The checkbox group's hint text */
@@ -40,12 +38,11 @@ class SgdsCheckboxGroup extends validatorMixin.SgdsFormValidatorMixin(formContro
         /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true  */
         this.value = "";
         this._isTouched = false;
-        /**@internal */
         this.defaultValue = "";
+        this._blurredCheckboxes = new Set();
     }
     connectedCallback() {
         super.connectedCallback();
-        this.defaultValue = this.value;
         this.addEventListener("sgds-check", (e) => {
             const { value } = e.detail;
             !this.value.includes(value) && this._addValue(value);
@@ -54,8 +51,14 @@ class SgdsCheckboxGroup extends validatorMixin.SgdsFormValidatorMixin(formContro
             const { value } = e.detail;
             this._removeValue(value);
         });
-        this.addEventListener("sgds-blur", () => {
-            this._isTouched = true;
+        /** Blurring when all checkboxes are blurred */
+        this.addEventListener("sgds-blur", e => {
+            const checkbox = e.target;
+            this._blurredCheckboxes.add(checkbox);
+            if (Array.from(this._blurredCheckboxes).length === this._checkboxes.length) {
+                this._isTouched = true;
+                this._blurredCheckboxes.clear();
+            }
         });
     }
     firstUpdated(changedProperties) {
@@ -63,6 +66,9 @@ class SgdsCheckboxGroup extends validatorMixin.SgdsFormValidatorMixin(formContro
         if (this.value) {
             this._updateInputValue();
         }
+        if (this.invalid) {
+            this._updateInvalid();
+        }
     }
     _renderHintText() {
         const hintTextTemplate = lit.html ` <div class="form-text">${this.hintText}</div> `;
@@ -81,7 +87,7 @@ class SgdsCheckboxGroup extends validatorMixin.SgdsFormValidatorMixin(formContro
     _sanitizeSlot() {
         const checkboxes = this._checkboxes;
         checkboxes.forEach(checkbox => {
-            checkbox.checked = this.value.includes(checkbox.value);
+            checkbox.checked = checkbox.defaultChecked = this.value.includes(checkbox.value);
             checkbox.hasFeedback = this.hasFeedback ? "style" : null;
             if (checkbox.required) {
                 console.error("Checkboxes in a group cannot have required or hasFeedback prop set to true");
@@ -97,6 +103,10 @@ class SgdsCheckboxGroup extends validatorMixin.SgdsFormValidatorMixin(formContro
         }
     }
     _handleValueChange() {
+        if (this.formEvent === "reset" && this.value === this.defaultValue) {
+            this.formEvent = null;
+            return;
+        }
         this.emit("sgds-change");
         const checkboxes = this._checkboxes;
         checkboxes.forEach(checkbox => {
@@ -141,7 +151,7 @@ class SgdsCheckboxGroup extends validatorMixin.SgdsFormValidatorMixin(formContro
         return this._mixinGetValidationMessage();
     }
     /**
-     * radio requries a custom _mixinResetFormControl as the update of input value
+     * checkbox requries a custom _mixinResetFormControl as the update of input value
      * requires to fire a reset event manually
      * */
     _mixinResetFormControl() {
@@ -153,9 +163,10 @@ class SgdsCheckboxGroup extends validatorMixin.SgdsFormValidatorMixin(formContro
      * when input value is set programatically, need to manually dispatch a change event
      * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input
      */
-    _updateInputValue(eventName = "change") {
+    async _updateInputValue(eventName = "change") {
         this.input.value = this.value;
         this.input.dispatchEvent(new InputEvent(eventName));
+        this.formEvent = eventName;
     }
     render() {
         return lit.html `
@@ -198,7 +209,7 @@ class SgdsCheckboxGroup extends validatorMixin.SgdsFormValidatorMixin(formContro
     `;
     }
 }
-SgdsCheckboxGroup.styles = [...sgdsElement["default"].styles, feedback["default"], formLabel["default"], checkboxGroup["default"], formHint["default"]];
+SgdsCheckboxGroup.styles = [...formControlElement["default"].styles, checkboxGroup["default"]];
 tslib.__decorate([
     decorators_js.property({ reflect: true })
 ], SgdsCheckboxGroup.prototype, "label", void 0);
@@ -221,8 +232,14 @@ tslib.__decorate([
     decorators_js.state()
 ], SgdsCheckboxGroup.prototype, "_isTouched", void 0);
 tslib.__decorate([
-    decorators_js.state()
+    defaultvalue.defaultValue()
 ], SgdsCheckboxGroup.prototype, "defaultValue", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsCheckboxGroup.prototype, "_blurredCheckboxes", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsCheckboxGroup.prototype, "formEvent", void 0);
 tslib.__decorate([
     decorators_js.queryAssignedElements()
 ], SgdsCheckboxGroup.prototype, "_checkboxes", void 0);

package/react/components/Checkbox/sgds-checkbox-group.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox-group.cjs.js","sources":["../../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport feedbackStyles from \"../../styles/feedback.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nimport formLabelStyles from \"../../styles/form-label.css\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\n/**\n * @summary CheckboxGroup is the container that group multiple checkboxes under a single question field.\n * It handles the display of validation feedback of its checkboxes children.\n *\n * @slot default - Pass in `sgds-checkbox` into the default slot\n * @slot invalidIcon - The slot for invalid icon\n *\n */\nexport class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...SgdsElement.styles, feedbackStyles, formLabelStyles, checkboxGroupStyles, formHintStyles];\n\n  /** The checkbox group's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Allows invalidFeedback, invalid styles to be visible. When SgdsCheckboxGroup is used, it overrides the value of hasFeedback on SgdsCheckbox with its own value. */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** The checkbox group's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** Makes the checkbox group a required field. Only available for when multiselect is true */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true  */\n  @property({ reflect: true }) value = \"\";\n\n  @state() private _isTouched = false;\n\n  /**@internal */\n  @state() defaultValue = \"\";\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n    this.addEventListener(\"sgds-check\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      !this.value.includes(value) && this._addValue(value);\n    });\n    this.addEventListener(\"sgds-uncheck\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      this._removeValue(value);\n    });\n    this.addEventListener(\"sgds-blur\", () => {\n      this._isTouched = true;\n    });\n  }\n  firstUpdated(changedProperties) {\n    super.firstUpdated(changedProperties);\n    if (this.value) {\n      this._updateInputValue();\n    }\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  @queryAssignedElements()\n  private _checkboxes!: Array<SgdsCheckbox>;\n\n  private _addValue(newValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    valueArray.push(newValue);\n    this.value = valueArray.join(\";\");\n  }\n  private _removeValue(oldValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    const newValueArray = valueArray.filter(v => v !== oldValue);\n    this.value = newValueArray.join(\";\");\n  }\n\n  private _sanitizeSlot() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = this.value.includes(checkbox.value);\n      checkbox.hasFeedback = this.hasFeedback ? \"style\" : null;\n      if (checkbox.required) {\n        console.error(\"Checkboxes in a group cannot have required or hasFeedback prop set to true\");\n        checkbox.remove();\n      }\n    });\n    this._disabledChildCheckboxes();\n  }\n\n  private _disabledChildCheckboxes() {\n    if (this.disabled) {\n      const checkboxes = this._checkboxes;\n      checkboxes.forEach(checkbox => (checkbox.disabled = this.disabled));\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.emit(\"sgds-change\");\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n    this._updateInputValue();\n    this._updateInvalid();\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n      this._updateInvalid();\n    }\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _updateInvalid() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(ch => (ch.invalid = this.invalid));\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * radio requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private _updateInputValue(eventName = \"change\") {\n    this.input.value = this.value;\n    this.input.dispatchEvent(new InputEvent(eventName));\n  }\n\n  render() {\n    return html`\n      <fieldset>\n        <div class=\"label-hint-container\">\n          <label class=\"form-label\">${this.label}</label>\n          ${this._renderHintText()}\n        </div>\n        <div class=\"checkbox-container\">\n          <slot @slotchange=${this._sanitizeSlot}></slot>\n        </div>\n        <input\n          type=\"text\"\n          class=\"checkbox-group-validation-input\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => {\n            super._mixinHandleChange(e);\n          }}\n          .value=${live(this.value)}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path\n                      d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </slot>\n                <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsCheckboxGroup;\n\ntype CheckedMode = \"click\" | \"key\";\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","live","nothing","SgdsElement","feedbackStyles","formLabelStyles","checkboxGroupStyles","formHintStyles","__decorate","property","state","queryAssignedElements","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox-group.cjs.js","sources":["../../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\n/**\n * @summary CheckboxGroup is a form component for multiselection of checkboxes.\n *\n * @event sgds-change - Emitted when the value of the CheckboxGroup changes. This happens when checkboxes are checked or unchecked.\n *\n * @slot default - Pass in `sgds-checkbox` into the default slot\n * @slot invalidIcon - The slot for invalid icon\n *\n */\nexport class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, checkboxGroupStyles];\n\n  /** The checkbox group's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"Please tick at least one box if you want to proceed\";\n\n  /** Allows invalidFeedback, invalid styles to be visible. When SgdsCheckboxGroup is used, it overrides the value of hasFeedback on SgdsCheckbox with its own value. */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** The checkbox group's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** Makes the checkbox group a required field. Only available for when multiselect is true */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true  */\n  @property({ reflect: true }) value = \"\";\n\n  @state() private _isTouched = false;\n\n  @defaultValue()\n  defaultValue = \"\";\n\n  @state()\n  private _blurredCheckboxes = new Set<SgdsCheckbox>();\n\n  @state()\n  private formEvent: FormEvent;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-check\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      !this.value.includes(value) && this._addValue(value);\n    });\n    this.addEventListener(\"sgds-uncheck\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      this._removeValue(value);\n    });\n    /** Blurring when all checkboxes are blurred */\n    this.addEventListener(\"sgds-blur\", e => {\n      const checkbox = e.target as SgdsCheckbox;\n      this._blurredCheckboxes.add(checkbox);\n      if (Array.from(this._blurredCheckboxes).length === this._checkboxes.length) {\n        this._isTouched = true;\n        this._blurredCheckboxes.clear();\n      }\n    });\n  }\n  firstUpdated(changedProperties) {\n    super.firstUpdated(changedProperties);\n    if (this.value) {\n      this._updateInputValue();\n    }\n\n    if (this.invalid) {\n      this._updateInvalid();\n    }\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  @queryAssignedElements()\n  private _checkboxes!: Array<SgdsCheckbox>;\n\n  private _addValue(newValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    valueArray.push(newValue);\n    this.value = valueArray.join(\";\");\n  }\n  private _removeValue(oldValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    const newValueArray = valueArray.filter(v => v !== oldValue);\n    this.value = newValueArray.join(\";\");\n  }\n\n  private _sanitizeSlot() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = checkbox.defaultChecked = this.value.includes(checkbox.value);\n\n      checkbox.hasFeedback = this.hasFeedback ? \"style\" : null;\n      if (checkbox.required) {\n        console.error(\"Checkboxes in a group cannot have required or hasFeedback prop set to true\");\n        checkbox.remove();\n      }\n    });\n    this._disabledChildCheckboxes();\n  }\n\n  private _disabledChildCheckboxes() {\n    if (this.disabled) {\n      const checkboxes = this._checkboxes;\n      checkboxes.forEach(checkbox => (checkbox.disabled = this.disabled));\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    if (this.formEvent === \"reset\" && this.value === this.defaultValue) {\n      this.formEvent = null;\n      return;\n    }\n\n    this.emit(\"sgds-change\");\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n    this._updateInputValue();\n    this._updateInvalid();\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n      this._updateInvalid();\n    }\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _updateInvalid() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(ch => (ch.invalid = this.invalid));\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * checkbox requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private async _updateInputValue(eventName: FormEvent = \"change\") {\n    this.input.value = this.value;\n\n    this.input.dispatchEvent(new InputEvent(eventName));\n    this.formEvent = eventName;\n  }\n\n  render() {\n    return html`\n      <fieldset>\n        <div class=\"label-hint-container\">\n          <label class=\"form-label\">${this.label}</label>\n          ${this._renderHintText()}\n        </div>\n        <div class=\"checkbox-container\">\n          <slot @slotchange=${this._sanitizeSlot}></slot>\n        </div>\n        <input\n          type=\"text\"\n          class=\"checkbox-group-validation-input\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => {\n            super._mixinHandleChange(e);\n          }}\n          .value=${live(this.value)}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path\n                      d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </slot>\n                <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsCheckboxGroup;\n\ntype FormEvent = \"reset\" | \"change\" | null;\n"],"names":["SgdsFormValidatorMixin","FormControlElement","html","live","nothing","checkboxGroupStyles","__decorate","property","state","defaultValue","queryAssignedElements","watch"],"mappings":"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"}