@govtechsg/sgds-web-component 1.3.0 → 1.4.0

package/components/Accordion/index.umd.js

@@ -3231,6 +3231,7 @@
 
   var css_248z$1 = css`:host{--accordion-active-color:var(--sgds-primary)}`;
 
+  const VALID_KEYS = ["Enter", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"];
   /**
    * @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`
    * @slot default - slot for accordion-item
@@ -3265,10 +3266,8 @@
               }
           });
       }
-      async onToggle(event) {
-          // Let the event pass through the DOM so that it can be
-          // prevented from the outside if a user so desires.
-          if (this.allowMultiple || event.defaultPrevented) {
+      async _onToggle(event) {
+          if (this.allowMultiple) {
               // No toggling when `allowMultiple` or the user prevents it.
               return;
           }
@@ -3285,6 +3284,11 @@
               }
           });
       }
+      async _onKeyboardToggle(event) {
+          if (!VALID_KEYS.includes(event.key))
+              return;
+          return this._onToggle(event);
+      }
       render() {
           return html `
       <div
@@ -3293,7 +3297,7 @@
             [`${this.accordionClasses}`]: this.accordionClasses
         })}
       >
-        <slot @click=${this.onToggle}></slot>
+        <slot @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>
       </div>
     `;
       }
@@ -3438,7 +3442,7 @@
       };
   }
 
-  var css_248z = css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){box-shadow:none;color:var(--accordion-active-color);font-weight:var(--accordion-item-font-weight)}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}`;
+  var css_248z = css`:host{--accordion-item-padding-y:1rem;--accordion-item-padding-x:1.5rem;--accordion-item-border-radius:0.25rem;--accordion-item-font-weight:700;--accordion-item-line-height:2rem}.accordion-body{line-height:var(--accordion-item-line-height);overflow:hidden;padding:0}.accordion-content{display:block;padding:0 var(--accordion-item-padding-x) var(--accordion-item-padding-y)}.accordion-button{line-height:var(--accordion-item-line-height)}.accordion-button:not(.collapsed){color:var(--accordion-active-color,var(--sgds-primary))}.accordion-button svg.bi-chevron-down{height:1.3rem;margin-left:auto;transition:transform .2s ease-in-out;width:1.3rem}.accordion-button:not(.collapsed){box-shadow:none;font-weight:var(--accordion-item-font-weight)}.accordion-button:not(.collapsed) svg.bi-chevron-down{transform:rotate(-180deg)}.accordion-button:after{content:unset}:host([first-of-type]) .accordion-item{border-radius:var(--accordion-item-border-radius) var(--accordion-item-border-radius) 0 0}:host([nth-of-type]) .accordion-item{border-radius:0;border-top:0}:host([last-of-type]) .accordion-item{border-radius:0 0 var(--accordion-item-border-radius) var(--accordion-item-border-radius);border-top:0}.hidden{display:none}`;
 
   /**
    *
@@ -3467,8 +3471,8 @@
           this.open = false;
       }
       firstUpdated() {
-          this.body.hidden = !this.open;
-          this.body.style.height = this.open ? "auto" : "0";
+          if (!this.open)
+              this.body.classList.add("hidden");
       }
       handleSummaryClick() {
           if (this.open) {
@@ -3507,10 +3511,9 @@
                   return;
               }
               await stopAnimations(this.body);
-              this.body.hidden = false;
+              this.body.classList.remove("hidden");
               const { keyframes, options } = getAnimation(this, "accordion.show");
               await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-              this.body.style.height = "auto";
               this.emit("sgds-after-show");
           }
           else {
@@ -3522,9 +3525,13 @@
               }
               await stopAnimations(this.body);
               const { keyframes, options } = getAnimation(this, "accordion.hide");
+              const animationDuration = options.duration;
+              // Workaround to fix GSIB delay after animateTo.
+              //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added
+              setTimeout(() => {
+                  this.body.classList.add("hidden");
+              }, animationDuration - 20);
               await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-              this.body.hidden = true;
-              this.body.style.height = "auto";
               this.emit("sgds-after-hide");
           }
       }
@@ -3550,7 +3557,8 @@
         part="base"
         class=${classMap({
             "sgds accordion-item": true,
-            [`${this.accordionItemClasses}`]: this.accordionItemClasses
+            [`${this.accordionItemClasses}`]: this.accordionItemClasses,
+            show: this.open
         })}
       >
         <button
@@ -3567,8 +3575,25 @@
           @keydown=${this.handleSummaryKeyDown}
         >
           <slot name="accordion-header"></slot>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-chevron-down"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+            />
+          </svg>
         </button>
-        <div class="accordion-body">
+        <div
+          class=${classMap({
+            "accordion-body": true
+        })}
+        >
           <slot name="accordion-content" class="accordion-content" role="region" aria-labelledby="header"></slot>
         </div>
       </div>
@@ -3599,14 +3624,14 @@
           { height: "0", opacity: "0" },
           { height: "auto", opacity: "1" }
       ],
-      options: { duration: 200, easing: "ease-in-out" }
+      options: { duration: 350, easing: "ease-in-out" }
   });
   setDefaultAnimation("accordion.hide", {
       keyframes: [
           { height: "auto", opacity: "1" },
           { height: "0", opacity: "0" }
       ],
-      options: { duration: 200, easing: "ease-in-out" }
+      options: { duration: 350, easing: "ease-in-out" }
   });
 
   customElements.define("sgds-accordion", SgdsAccordion);