@govtechsg/sgds-web-component 3.0.0-rc.1 → 3.0.0-rc.2

package/components/Dropdown/index.umd.js

@@ -8762,7 +8762,7 @@
    */
   const html = withStatic(html$1);
 
-  var css_248z$4 = css`:host{--sgds-btn-font-weight:var(--sgds-font-weight-regular);--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-hover-bg:var(--sgds-primary-bg-emphasis);--sgds-btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-color:var(--sgds-default-color-on-dark)}:host([variant=outline]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color);--sgds-btn-border-width:var(--sgds-border-width-1);--sgds-btn-border-color:var(--sgds-primary-border-color)}:host([variant=ghost]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color)}:host([variant=danger]){--sgds-btn-bg:var(--sgds-danger-bg);--sgds-btn-hover-bg:var(--sgds-danger-bg-emphasis);--sgds-btn-color:var(--sgds-default-color-on-dark)}.btn{align-items:center;background-color:var(--sgds-btn-bg);border:1px solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-btn-border-radius);color:var(--sgds-default-color-on-dark);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}.btn-ghost,.btn-outline,.btn-primary{color:var(--sgds-btn-color)}.btn-outline{border:var(--sgds-btn-border-width) solid var(--sgds-btn-border-color)}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--sgds-btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--sgds-btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--sgds-btn-color);opacity:var(--sgds-opacity-50);pointer-events:none}.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}`;
+  var css_248z$4 = css`:host{--sgds-btn-font-weight:var(--sgds-font-weight-regular);--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-hover-bg:var(--sgds-primary-bg-emphasis);--sgds-btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-color:var(--sgds-default-color-on-dark)}:host([variant=outline]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color);--sgds-btn-border-width:var(--sgds-border-width-1);--sgds-btn-border-color:var(--sgds-primary-border-color)}:host([variant=ghost]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color)}:host([variant=danger]){--sgds-btn-bg:var(--sgds-danger-bg);--sgds-btn-hover-bg:var(--sgds-danger-bg-emphasis);--sgds-btn-color:var(--sgds-default-color-on-dark)}.btn{align-items:center;background-color:var(--sgds-btn-bg);border:1px solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-btn-border-radius);color:var(--sgds-default-color-on-dark);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}.btn-ghost,.btn-outline,.btn-primary{color:var(--sgds-btn-color)}.btn-outline{border:var(--sgds-btn-border-width) solid var(--sgds-btn-border-color)}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--sgds-btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--sgds-btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--sgds-btn-color);opacity:var(--sgds-opacity-50);pointer-events:none}.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn slot::slotted(*){color:var(--sgds-btn-color)}`;
 
   class ButtonElement extends SgdsElement {
       constructor() {
@@ -8835,101 +8835,28 @@
 
   var css_248z$3 = css`a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}`;
 
-  const reportValidityOverloads = new WeakMap();
+  /**
+   * A controller to help with form submission
+   */
   class FormSubmitController {
       constructor(host, options) {
           (this.host = host).addController(this);
           this.options = Object.assign({ form: (input) => {
                   return input.closest("form");
-              }, name: (input) => input.name, value: (input) => input.value, defaultValue: (input) => input.defaultValue, disabled: (input) => input.disabled, reportValidity: (input) => {
-                  return typeof input.reportValidity === "function" ? input.reportValidity() : true;
-              }, setValue: (input, value) => {
-                  input.value = value;
               } }, options);
-          this.handleFormData = this.handleFormData.bind(this);
-          this.handleFormSubmit = this.handleFormSubmit.bind(this);
-          this.handleFormReset = this.handleFormReset.bind(this);
-          this.reportFormValidity = this.reportFormValidity.bind(this);
       }
       hostConnected() {
           this.form = this.options.form(this.host);
-          if (this.form) {
-              this.form.addEventListener("formdata", this.handleFormData);
-              this.form.addEventListener("submit", this.handleFormSubmit);
-              this.form.addEventListener("reset", this.handleFormReset);
-              // Overload the form's reportValidity() method so it looks at Shoelace form controls
-              if (!reportValidityOverloads.has(this.form)) {
-                  reportValidityOverloads.set(this.form, this.form.reportValidity);
-                  this.form.reportValidity = () => this.reportFormValidity();
-              }
-          }
       }
       hostDisconnected() {
           if (this.form) {
-              this.form.removeEventListener("formdata", this.handleFormData);
-              this.form.removeEventListener("submit", this.handleFormSubmit);
-              this.form.removeEventListener("reset", this.handleFormReset);
-              // Remove the overload and restore the original method
-              if (reportValidityOverloads.has(this.form)) {
-                  this.form.reportValidity = reportValidityOverloads.get(this.form);
-                  reportValidityOverloads.delete(this.form);
-              }
               this.form = undefined;
           }
       }
-      handleFormData(event) {
-          const disabled = this.options.disabled(this.host);
-          const name = this.options.name(this.host);
-          const value = this.options.value(this.host);
-          if (!disabled && typeof name === "string" && typeof value !== "undefined") {
-              if (Array.isArray(value)) {
-                  value.forEach(val => {
-                      event.formData.append(name, val.toString());
-                  });
-              }
-              else {
-                  event.formData.append(name, value.toString());
-              }
-          }
-      }
-      handleFormSubmit(event) {
-          const disabled = this.options.disabled(this.host);
-          const reportValidity = this.options.reportValidity;
-          if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
-              event.preventDefault();
-              event.stopImmediatePropagation();
-          }
-      }
-      handleFormReset() {
-          this.options.setValue(this.host, this.options.defaultValue(this.host));
-      }
-      reportFormValidity() {
-          //
-          // Shoelace form controls work hard to act like regular form controls. They support the Constraint Validation API
-          // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also
-          // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using
-          // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.
-          //
-          // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger
-          // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't
-          // be necessary once we can use ElementInternals.
-          //
-          // Note that we're also honoring the form's novalidate attribute.
-          //
-          if (this.form && !this.form.noValidate) {
-              // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom
-              // elements that support the constraint validation API.
-              const elements = this.form.querySelectorAll("*");
-              for (const element of elements) {
-                  if (typeof element.reportValidity === "function") {
-                      if (!element.reportValidity()) {
-                          return false;
-                      }
-                  }
-              }
-          }
-          return true;
-      }
+      /**
+       * Creates a temporary native HTML button that can participate in form and invoke form submits and reset
+       * Button is removed once action is performed
+       */
       doAction(type, invoker) {
           if (this.form) {
               const button = document.createElement("button");