@govtechsg/sgds-web-component 0.0.7 → 0.0.10

package/src/utils/dropdown-element.ts

@@ -0,0 +1,244 @@
+import { property, state } from "lit/decorators.js";
+import { Dropdown } from "bootstrap";
+import * as Popper from "@popperjs/core";
+import type { StrictModifiers } from "@popperjs/core";
+import { createRef, Ref } from "lit/directives/ref.js";
+import mergeDeep from "./mergeDeep";
+import genId from "./generateId";
+import { SgdsDropdownItem } from "../Dropdown/sgds-dropdown-item";
+import SgdsElement from "./sgds-element";
+
+const ARROW_DOWN = "ArrowDown";
+const ARROW_UP = "ArrowUp";
+const ESC = "Escape";
+const ENTER = "Enter";
+const TAB = "Tab";
+
+export type DropdownButtonVariant =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "danger"
+  | "warning"
+  | "info"
+  | "light"
+  | "dark";
+export type DropDirection = "left" | "right" | "up" | "down";
+
+export class DropdownElement extends SgdsElement {
+  myDropdown: Ref<HTMLElement> = createRef();
+  bsDropdown: Dropdown = null;
+
+  @property({ type: Boolean, reflect: true })
+  noFlip = false;
+  @property({ type: Boolean, reflect: true })
+  menuAlignRight = false;
+  @property({ type: String, reflect: true })
+  drop: DropDirection = "down";
+  @property({ type: Object })
+  popperOpts = {};
+  @property({ type: String })
+  togglerId = genId("dropdown", "button");
+
+  @property({ type: String })
+  togglerText = "";
+  @property({ type: String })
+  variant: DropdownButtonVariant = "secondary";
+  
+  @property({ type: Boolean })
+  menuIsOpen = false;
+
+  @property({ type: String })
+  close: "outside" | "default" | "inside" = "default";
+
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  @state()
+  nextDropdownItemNo: number = 0;
+  @state()
+  prevDropdownItemNo: number = -1;
+  @state()
+  dropdownConfig: Partial<Popper.Options>;
+  @state()
+  modifierOpt: StrictModifiers[] = [];
+
+  firstUpdated() {
+    this.bsDropdown = new Dropdown(this.myDropdown.value, {
+    // autoClose not working as bootstrap is using attribute data-bs-toggle="dropdown" to configure autoclose. But it doesnt look into this attribute in the shadow dom
+      reference: "toggle", // working
+      popperConfig: (defaultConfig?: Partial<Popper.Options>) => {
+        //working
+        this.dropdownConfig = {
+          placement: "bottom-start",
+          modifiers: !this.noFlip
+            ? this.modifierOpt
+            : [
+                ...this.modifierOpt,
+                {
+                  name: "flip",
+                  options: { fallbackPlacements: [] },
+                },
+              ],
+        };
+
+        switch (this.drop) {
+          case "up":
+            this.dropdownConfig.placement = this.menuAlignRight
+              ? "top-end"
+              : "top-start";
+            break;
+          case "right":
+            this.dropdownConfig.placement = "right-start";
+            break;
+          case "left":
+            this.dropdownConfig.placement = "left-start";
+            break;
+          case "down":
+            this.dropdownConfig.placement = this.menuAlignRight
+              ? "bottom-end"
+              : "bottom-start";
+            break;
+          default:
+            this.dropdownConfig.placement = undefined;
+            break;
+        }
+        return mergeDeep(
+          defaultConfig,
+          mergeDeep(this.dropdownConfig, this.popperOpts)
+        );
+      },
+    });
+    this.myDropdown.value.addEventListener("show.bs.dropdown", () => {
+      this.menuIsOpen = true;
+      this.emit("sgds-show");
+    });
+    this.myDropdown.value.addEventListener("shown.bs.dropdown", () => {
+      this.menuIsOpen = true;
+      this.emit("sgds-shown");
+    });
+    this.myDropdown.value.addEventListener("hide.bs.dropdown", () => {
+      this.menuIsOpen = false;
+      this._resetMenu();
+      this.emit("sgds-hide");
+    });
+    this.myDropdown.value.addEventListener("hidden.bs.dropdown", () => {
+      this.menuIsOpen = false;
+      this.emit("sgds-hidden");
+    });
+
+    this.addEventListener("keydown", this._handleKeyboardEvent);
+    if (this.close !== "inside") {
+      this.addEventListener("blur", (e) => {
+        return e.relatedTarget == null
+          ? this.bsDropdown.hide()
+          : e.stopPropagation();
+      });
+      addEventListener("click", (e) => this._handleClickOutOfElement(e, this));
+    }
+    if (this.menuIsOpen) this.bsDropdown.show();
+  }
+
+  public showMenu() {
+    this.bsDropdown.show();
+  }
+  public hideMenu() {
+    this.bsDropdown.hide();
+  }
+
+  _onClickButton() {
+    this.bsDropdown.toggle();
+  }
+
+  _resetMenu() {
+    this.nextDropdownItemNo = 0;
+    this.prevDropdownItemNo = -1;
+    // reset the tabindex
+    const items = this._getMenuItems();
+    items.forEach((i) => {
+      i.removeAttribute("tabindex");
+    });
+  }
+
+  _getMenuItems(): SgdsDropdownItem[] {
+    return this.shadowRoot
+      .querySelector("slot")
+      .assignedElements({ flatten: true }) as SgdsDropdownItem[];
+  }
+
+  _getActiveMenuItems(): SgdsDropdownItem[] {
+    return this._getMenuItems().filter((item) => !item.disabled);
+  }
+
+  _setMenuItem(currentItemIdx: number, isArrowDown: boolean = true) {
+    const items = this._getActiveMenuItems();
+    if (items.length === 0) return;
+    let item = items[currentItemIdx];
+    this.nextDropdownItemNo = currentItemIdx + 1;
+    this.prevDropdownItemNo =
+      currentItemIdx - 1 < 0 ? items.length - 1 : currentItemIdx - 1;
+    let activeItem: SgdsDropdownItem;
+    if (item.disabled) {
+      return this._setMenuItem(
+        isArrowDown ? this.nextDropdownItemNo : this.prevDropdownItemNo
+      );
+    } else activeItem = item;
+
+    // focus or blur items depending on active or not
+    items.forEach((i) => {
+      i.setAttribute("tabindex", i === activeItem ? "0" : "-1");
+      i === activeItem ? i.focus() : i.blur();
+    });
+  }
+
+  _handleSelectSlot(e: KeyboardEvent | MouseEvent) {
+    const items = this._getActiveMenuItems();
+    const currentItemNo = items.indexOf(e.target as SgdsDropdownItem);
+    this.nextDropdownItemNo = currentItemNo + 1;
+    this.prevDropdownItemNo =
+      currentItemNo <= 0 ? items.length - 1 : currentItemNo - 1;
+
+    // assign selected dropdown-item value to sgds-dropdown value
+    const selectedItem = e.target as SgdsDropdownItem;
+    if (!selectedItem.disabled) {
+      this.emit("sgds-select");
+      this.close !== "outside" && this.bsDropdown.hide();
+    } else return;
+  }
+  _handleKeyboardEvent(e: KeyboardEvent) {
+    const menuItems = this._getActiveMenuItems();
+    switch (e.key) {
+      case ARROW_DOWN:
+        if (!this.menuIsOpen) return this.bsDropdown.show();
+        if (this.nextDropdownItemNo === menuItems.length) {
+          return this._setMenuItem(0);
+        } else {
+          return this._setMenuItem(
+            this.nextDropdownItemNo > 0 ? this.nextDropdownItemNo : 0
+          );
+        }
+      case ARROW_UP:
+        if (!this.menuIsOpen) return this.bsDropdown.show();
+        if (this.prevDropdownItemNo < 0) {
+          return this._setMenuItem(menuItems.length - 1, false);
+        } else {
+          return this._setMenuItem(this.prevDropdownItemNo, false);
+        }
+      case ESC:
+        return this.bsDropdown.hide();
+      case ENTER:
+        if (menuItems.includes(e.target as SgdsDropdownItem)) {
+          return this._handleSelectSlot(e);
+        }
+        break;  
+      default:
+        break;
+    }
+  }
+
+  _handleClickOutOfElement(e: MouseEvent, self: DropdownElement) {
+    if (!e.composedPath().includes(self)) {
+      this.bsDropdown.hide();
+    }
+  }
+}

package/src/utils/event.ts

@@ -0,0 +1,13 @@
+/** Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements. */
+export function waitForEvent(el: HTMLElement, eventName: string) {
+  return new Promise<void>(resolve => {
+    function done(event: Event) {
+      if (event.target === el) {
+        el.removeEventListener(eventName, done);
+        resolve();
+      }
+    }
+
+    el.addEventListener(eventName, done);
+  });
+}

package/src/utils/form.ts

@@ -0,0 +1,183 @@
+import type SgdsButton from '../Button/sgds-button';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+
+const reportValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();
+
+export interface FormSubmitControllerOptions {
+  /** A function that returns the form containing the form control. */
+  form: (input: unknown) => HTMLFormElement | null;
+  /** A function that returns the form control's name, which will be submitted with the form data. */
+  name: (input: unknown) => string;
+  /** A function that returns the form control's current value. */
+  value: (input: unknown) => unknown | unknown[];
+  /** A function that returns the form control's default value. */
+  defaultValue: (input: unknown) => unknown | unknown[];
+  /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */
+  disabled: (input: unknown) => boolean;
+  /**
+   * A function that maps to the form control's reportValidity() function. When the control is invalid, this will
+   * prevent submission and trigger the browser's constraint violation warning.
+   */
+  reportValidity: (input: unknown) => boolean;
+
+  /** A function that sets the form control's value */
+  setValue: (input: unknown, value: unknown) => void;
+}
+
+export class FormSubmitController implements ReactiveController {
+  host?: ReactiveControllerHost & Element;
+  form?: HTMLFormElement | null;
+  options: FormSubmitControllerOptions;
+
+  constructor(host: ReactiveControllerHost & Element, options?: Partial<FormSubmitControllerOptions>) {
+    (this.host = host).addController(this);
+    this.options = {
+      form: (input: HTMLInputElement) => input.closest('form'),
+      name: (input: HTMLInputElement) => input.name,
+      value: (input: HTMLInputElement) => input.value,
+      defaultValue: (input: HTMLInputElement) => input.defaultValue,
+      disabled: (input: HTMLInputElement) => input.disabled,
+      reportValidity: (input: HTMLInputElement) => {
+        return typeof input.reportValidity === 'function' ? input.reportValidity() : true;
+      },
+      setValue: (input: HTMLInputElement, value: string) => {
+        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: FormDataEvent) {
+    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 as unknown[]).forEach(val => {
+          event.formData.append(name, (val as string | number | boolean).toString());
+        });
+      } else {
+        event.formData.append(name, (value as string | number | boolean).toString());
+      }
+    }
+  }
+
+  handleFormSubmit(event: 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<HTMLInputElement>('*');
+
+      for (const element of elements) {
+        if (typeof element.reportValidity === 'function') {
+          if (!element.reportValidity()) {
+            return false;
+          }
+        }
+      }
+    }
+
+    return true;
+  }
+
+  doAction(type: 'submit' | 'reset', invoker?: HTMLInputElement | SgdsButton) {
+    if (this.form) {
+      const button = document.createElement('button');
+      button.type = type;
+      button.style.position = 'absolute';
+      button.style.width = '0';
+      button.style.height = '0';
+      button.style.clipPath = 'inset(50%)';
+      button.style.overflow = 'hidden';
+      button.style.whiteSpace = 'nowrap';
+
+      // Pass form attributes through to the temporary button
+      if (invoker) {
+        ['formaction', 'formmethod', 'formnovalidate', 'formtarget'].forEach(attr => {
+          if (invoker.hasAttribute(attr)) {
+            button.setAttribute(attr, invoker.getAttribute(attr)!);
+          }
+        });
+      }
+
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+
+  /** Resets the form, restoring all the control to their default value */
+  reset(invoker?: HTMLInputElement | SgdsButton) {
+    this.doAction('reset', invoker);
+  }
+
+  /** Submits the form, triggering validation and form data injection. */
+  submit(invoker?: HTMLInputElement | SgdsButton) {
+    // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a
+    // native submit button into the form, "click" it, then remove it to simulate a standard form submission.
+    this.doAction('submit', invoker);
+  }
+}

package/src/utils/generateId.ts

@@ -0,0 +1,4 @@
+export default function (componentName = '', elementName=''): string {
+    return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`
+  }
+  

package/src/utils/link-element.ts

@@ -0,0 +1,34 @@
+import { html } from "lit";
+import SgdsElement from "../utils/sgds-element";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+
+export default class LinkElement extends SgdsElement {
+
+  @property({ type: Boolean })
+  active = false;
+
+  @property({ type: String })
+  href = "";
+
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  render() {
+    return html`
+      <li>
+        <a
+          href="${this.href}"
+          class="nav-link ${classMap({
+            disabled: this.disabled,
+            active: this.active,
+          })} "
+          ?disabled=${this.disabled}
+          aria-disabled=${this.disabled ? "true" : "false"}
+          ><slot></slot
+        ></a>
+      </li>
+    `;
+  }
+}
+

package/src/utils/mergeDeep.ts

@@ -0,0 +1,22 @@
+import {assign, keys} from './object'
+function _isObject(item: any) {
+  return item && typeof item === 'object' && item.constructor === Object
+}
+
+ const mergeDeep = (target:any, source:any) => {
+  if (_isObject(target) && _isObject(source)) {
+    keys(source).forEach(key => {
+      if (_isObject(source[key])) {
+        if (!target[key] || !_isObject(target[key])) {
+          target[key] = source[key]
+        }
+        mergeDeep(target[key], source[key])
+      } else {
+        assign(target, { [key]: source[key] })
+      }
+    })
+  }
+  return target
+}
+
+export default mergeDeep

package/src/utils/modal.ts

@@ -0,0 +1,64 @@
+import { getTabbableBoundary } from './tabbable';
+
+let activeModals: HTMLElement[] = [];
+
+export default class Modal {
+  element: HTMLElement;
+  tabDirection: 'forward' | 'backward' = 'forward';
+
+  constructor(element: HTMLElement) {
+    this.element = element;
+    this.handleFocusIn = this.handleFocusIn.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+  }
+
+  activate() {
+    activeModals.push(this.element);
+    document.addEventListener('focusin', this.handleFocusIn);
+    document.addEventListener('keydown', this.handleKeyDown);
+    document.addEventListener('keyup', this.handleKeyUp);
+  }
+
+  deactivate() {
+    activeModals = activeModals.filter(modal => modal !== this.element);
+    document.removeEventListener('focusin', this.handleFocusIn);
+    document.removeEventListener('keydown', this.handleKeyDown);
+    document.removeEventListener('keyup', this.handleKeyUp);
+  }
+
+  isActive() {
+    // The "active" modal is always the most recent one shown
+    return activeModals[activeModals.length - 1] === this.element;
+  }
+
+  checkFocus() {
+    if (this.isActive()) {
+      if (!this.element.matches(':focus-within')) {
+        const { start, end } = getTabbableBoundary(this.element);
+        const target = this.tabDirection === 'forward' ? start : end;
+
+        if (typeof target?.focus === 'function') {
+          target.focus({ preventScroll: true });
+        }
+      }
+    }
+  }
+
+  handleFocusIn() {
+    this.checkFocus();
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Tab' && event.shiftKey) {
+      this.tabDirection = 'backward';
+
+      // Ensure focus remains trapped after the key is pressed
+      requestAnimationFrame(() => this.checkFocus());
+    }
+  }
+
+  handleKeyUp() {
+    this.tabDirection = 'forward';
+  }
+}

package/src/utils/object.ts

@@ -0,0 +1,2 @@
+export const assign = (target: any, ...args: any[]) => Object.assign(target, ...args)
+export const keys = (obj:any) => Object.keys(obj)

package/src/utils/offset.ts

@@ -0,0 +1,6 @@
+export function getOffset(element: HTMLElement, parent: HTMLElement) {
+    return {
+      top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
+      left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)
+    };
+  }

package/src/utils/scroll.ts

@@ -0,0 +1,57 @@
+import { getOffset } from './offset';
+
+const locks = new Set();
+
+/**
+ * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
+ * without premature unlocking.
+ */
+export function lockBodyScrolling(lockingEl: HTMLElement) {
+  locks.add(lockingEl);
+  document.body.classList.add('sl-scroll-lock');
+}
+
+/**
+ * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
+ */
+export function unlockBodyScrolling(lockingEl: HTMLElement) {
+  locks.delete(lockingEl);
+
+  if (locks.size === 0) {
+    document.body.classList.remove('sl-scroll-lock');
+  }
+}
+
+/**
+ * Scrolls an element into view of its container. If the element is already in view, nothing will happen.
+ */
+export function scrollIntoView(
+  element: HTMLElement,
+  container: HTMLElement,
+  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',
+  behavior: 'smooth' | 'auto' = 'smooth'
+) {
+  const offset = getOffset(element, container);
+  const offsetTop = offset.top + container.scrollTop;
+  const offsetLeft = offset.left + container.scrollLeft;
+  const minX = container.scrollLeft;
+  const maxX = container.scrollLeft + container.offsetWidth;
+  const minY = container.scrollTop;
+  const maxY = container.scrollTop + container.offsetHeight;
+
+  if (direction === 'horizontal' || direction === 'both') {
+    if (offsetLeft < minX) {
+      container.scrollTo({ left: offsetLeft, behavior });
+    } else if (offsetLeft + element.clientWidth > maxX) {
+      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
+    }
+  }
+
+  if (direction === 'vertical' || direction === 'both') {
+    if (offsetTop < minY) {
+      container.scrollTo({ top: offsetTop, behavior });
+    } else if (offsetTop + element.clientHeight > maxY) {
+      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
+    }
+  }
+}

package/src/utils/sgds-element.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+
+export default class SgdsElement extends LitElement {
+  /** Emits a custom event with more convenient defaults. */
+  emit(name: string, options?: CustomEventInit) {
+    const event = new CustomEvent(name, {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: {},
+      ...options
+    });
+
+    this.dispatchEvent(event);
+
+    return event;
+  }
+}