@govtechsg/sgds-web-component 0.0.7 → 0.0.10

package/src/Radio/sgds-radiogroup.ts

@@ -0,0 +1,221 @@
+import { html, css } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { watch } from "../utils/watch";
+import styles from "./sgds-radiogroup.scss";
+import SgdsElement from "../utils/sgds-element";
+import SgdsRadio from "./sgds-radio";
+import { FormSubmitController } from "../utils/form";
+
+@customElement("sgds-radiogroup")
+export class SgdsRadioGroup extends SgdsElement {
+  static styles = styles;
+
+  protected readonly formSubmitController = new FormSubmitController(this, {
+    defaultValue: (control: SgdsRadioGroup) => control.defaultValue,
+  });
+
+  @query("slot:not([name])") defaultSlot: HTMLSlotElement;
+  @query(".radio-group__validation-input") input: HTMLInputElement;
+
+  @state() private defaultValue = "";
+  @state() private customErrorMessage = "";
+
+  /**
+   * The radio group label. Required for proper accessibility. If you need to display HTML, you can use the `label` slot
+   * instead.
+   */
+  @property() label = "";
+
+  /** The selected value of the control. */
+  @property({ reflect: true }) value = "";
+
+  /** The name assigned to the radio controls. */
+  @property({ reflect: true }) name = "option";
+
+  /** Ensures a child radio is checked before allowing the containing form to submit. */
+  @property({ type: Boolean, reflect: true }) required = false;
+
+  /**
+   * This will be true when the control is in an invalid state.
+   */
+  @property({ type: Boolean, reflect: true }) invalid = false;
+
+  @property({ type: String, reflect: true }) invalidFeedback =
+    "default feedback";
+
+  @watch("value")
+  handleValueChange() {
+    if (this.hasUpdated) {
+      this.emit("sgds-change");
+      this.updateCheckedRadio();
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.defaultValue = this.value;
+  }
+
+  get validity(): ValidityState {
+    const hasMissingData = !((this.value && this.required) || !this.required);
+    const hasCustomError = this.customErrorMessage !== "";
+    return {
+      badInput: false,
+      customError: hasCustomError,
+      patternMismatch: false,
+      rangeOverflow: false,
+      rangeUnderflow: false,
+      stepMismatch: false,
+      tooLong: false,
+      tooShort: false,
+      typeMismatch: false,
+      valid: hasMissingData ? false : true,
+      valueMissing: !hasMissingData,
+    };
+  }
+
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity(): boolean {
+    const validity = this.validity;
+
+    // this.errorMessage = this.customErrorMessage || validity.valid ? '' : this.input.validationMessage;
+    // this.invalid = !this.input.checkValidity();
+    this.invalid = !validity.valid;
+
+    if (!validity.valid) {
+      this.showNativeErrorMessage();
+    }
+
+    return !this.invalid;
+  }
+
+  private getAllRadios() {
+    return [...this.querySelectorAll<SgdsRadio>("sgds-radio")];
+  }
+
+  handleRadioClick(event: MouseEvent) {
+    const target = event.target as SgdsRadio;
+
+    if (target.disabled) {
+      return;
+    }
+
+    this.value = target.value;
+    const radios = this.getAllRadios();
+    radios.forEach((radio) => (radio.checked = radio === target));
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    if (
+      !["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(
+        event.key
+      )
+    ) {
+      return;
+    }
+
+    const radios = this.getAllRadios().filter((radio) => !radio.disabled);
+    const checkedRadio = radios.find((radio) => radio.checked) ?? radios[0];
+    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1
+    const incr =
+      event.key === " "
+        ? 0
+        : ["ArrowUp", "ArrowLeft"].includes(event.key)
+        ? -1
+        : 1;
+    let index = radios.indexOf(checkedRadio) + incr;
+    if (index < 0) {
+      index = radios.length - 1;
+    }
+    if (index > radios.length - 1) {
+      index = 0;
+    }
+
+    this.getAllRadios().forEach((radio) => {
+      radio.checked = false;
+      radio.tabIndex = -1;
+    });
+
+    this.value = radios[index].value;
+    radios[index].checked = true;
+    radios[index].tabIndex = 0;
+    radios[index].focus();
+
+    event.preventDefault();
+  }
+
+  handleLabelClick() {
+    const radios = this.getAllRadios();
+    const checked = radios.find((radio) => radio.checked);
+    const radioToFocus = checked || radios[0];
+
+    // Move focus to the checked radio (or the first one if none are checked) when clicking the label
+    if (radioToFocus) {
+      radioToFocus.focus();
+    }
+  }
+
+  handleSlotChange() {
+    const radios = this.getAllRadios();
+
+    radios.forEach((radio) => (radio.checked = radio.value === this.value));
+
+    if (!radios.some((radio) => radio.checked)) {
+      if (radios[0]) radios[0]!.tabIndex = 0;
+    }
+  }
+
+  handleInvalid() {
+    this.invalid = true;
+  }
+
+  showNativeErrorMessage() {
+    this.input.hidden = false;
+    this.input.reportValidity();
+    setTimeout(() => (this.input.hidden = true), 10000);
+  }
+
+  updateCheckedRadio() {
+    const radios = this.getAllRadios();
+    radios.forEach((radio) => (radio.checked = radio.value === this.value));
+    this.invalid = !this.validity.valid;
+  }
+
+  render() {
+    const defaultSlot = html`
+      <div>
+        <slot
+          @click=${this.handleRadioClick}
+          @keydown=${this.handleKeyDown}
+          @slotchange=${this.handleSlotChange}
+          role="presentation"
+        ></slot>
+      </div>
+    `;
+    return html`
+      <fieldset role="radiogroup" part="base" name=${this.name}>
+        <label @click=${this.handleLabelClick} class="form-label" part="label">
+          <slot name="label">${this.label}</slot>
+        </label>
+        ${defaultSlot}
+        <input
+          part="control"
+          type="text"
+          class="radio-group__validation-input visually-hidden ${classMap({
+            "is-invalid": this.invalid,
+          })}"
+          ?required=${this.required}
+          tabindex="-1"
+          @invalid=${this.handleInvalid}
+          hidden
+        />
+        <div class="invalid-feedback" part="invalidFeedback">
+          ${this.invalidFeedback}
+        </div>
+      </fieldset>
+    `;
+  }
+}
+
+export default SgdsRadioGroup;

package/src/Sidenav/index.ts

@@ -0,0 +1,4 @@
+
+export { SgdsSidenav } from "./sgds-sidenav";
+export { SgdsSidenavItem } from "./sgds-sidenav-item";
+export { SgdsSidenavLink } from "./sgds-sidenav-link";

package/src/Sidenav/sgds-sidenav-item.scss

@@ -0,0 +1,73 @@
+@import "../utils/base.scss";
+@import "~@govtechsg/sgds/sass/transitions";
+@import "~bootstrap-icons/font/fonts/bootstrap-icons.css";
+
+:host   {
+  --sidenav-theme-color: #5925DC;
+}
+
+.sidenav-btn {
+  width: 100%;
+  text-align: initial;
+  line-height: 1.5rem;
+  font-size: 1rem;
+  border: 0;
+  background: 0;
+  padding: 0.5rem 1rem;
+  border-left: $navbar-border-bottom-height solid transparent;
+  border-radius: 0;
+  display: flex;
+  align-items: center;
+
+  &.active,
+  &:hover {
+    color: var(--sidenav-theme-color);
+    border-left-color: var(--sidenav-theme-color);
+    font-weight: $font-weight-bold;
+  }
+  &.disabled{
+      opacity: 0.65;
+      pointer-events: none;
+  }
+  svg {
+    &.bi-chevron-down {
+      @extend .ms-auto;
+      transition: all 0.3s ease-in-out;
+      transform: rotate(180deg);
+    }
+  }
+  &:not(.active) {
+    svg {
+      &.bi-chevron-down {
+        transform: rotate(0deg);
+      }
+    }
+  }
+}
+
+a.sidenav-btn {
+  color: inherit;
+  text-decoration: none;
+  line-height: 1.5rem;
+}
+
+.sidenav-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin: 0;
+  line-height: 2rem;
+}
+
+.collapse,
+.collapse.show,
+.collapsing {
+  margin-top: $sidenav-item-spacing;
+}
+
+::slotted(*[slot="title"]) {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}

package/src/Sidenav/sgds-sidenav-item.ts

@@ -0,0 +1,145 @@
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import SgdsElement from "../utils/sgds-element";
+import styles from "./sgds-sidenav-item.scss";
+import { ref, createRef, Ref } from "lit/directives/ref.js";
+import { Collapse } from "bootstrap";
+import genId from "../utils/generateId";
+import { classMap } from "lit/directives/class-map.js";
+
+@customElement("sgds-sidenav-item")
+export class SgdsSidenavItem extends SgdsElement {
+  static styles = styles;
+
+  private myCollapse: Ref<HTMLElement> = createRef();
+  private bsCollapse: Collapse = null;
+
+  /**  when true, toggles the sidenav-item to open on first load and
+   * set the active stylings.
+   */
+  @property({ type: Boolean })
+  active = false;
+
+  @property({ type: String })
+  href = "";
+
+  @property({ type: String })
+  collapseId = genId("sidenav", "collapse");
+
+  @property({ type: String })
+  buttonId = genId("sidenav", "button");
+
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  private index = "-1";
+
+  private _onClick() {
+    this.emit("sgds-toggle", { detail: { index: this.index } });
+  }
+
+  private _onClickButton() {
+    this._onClick();
+    if (this.bsCollapse) {
+      this.bsCollapse.toggle();
+    }
+  }
+  private _onClickLink() {
+    this._onClick();
+    this.active = true;
+  }
+
+  /**
+   * closeItem - closes sidenav and inactivates it
+   */
+  public closeItem() {
+    this.active = false;
+    if (this.bsCollapse) this.bsCollapse.hide();
+  }
+  /**
+   * openItem
+   */
+  public openItem() {
+    this.active = true;
+    if (this.bsCollapse) this.bsCollapse.show();
+  }
+
+  firstUpdated() {
+    // if sidenav has menu, initialise bootstrap collapse
+    if (!this.href) {
+      this.bsCollapse = new Collapse(this.myCollapse.value, {
+        toggle: this.active,
+      });
+
+      this.myCollapse.value.addEventListener("show.bs.collapse", () => {
+        this.active = true;
+      });
+      this.myCollapse.value.addEventListener("shown.bs.collapse", () => {
+        this.active = true;
+      });
+      this.myCollapse.value.addEventListener("hide.bs.collapse", () => {
+        this.active = false;
+      });
+      this.myCollapse.value.addEventListener("hidden.bs.collapse", () => {
+        this.active = false;
+      });
+    }
+  }
+
+  render() {
+    const withMenuTemplate = html` <button
+        @click=${() => this._onClickButton()}
+        class="collapsed sidenav-btn ${classMap({
+          disabled: this.disabled,
+          active: this.active,
+        })} "
+        aria-expanded="${this.active}"
+        aria-controls="${this.collapseId}"
+        aria-selected="${this.active}"
+        id="${this.buttonId}"
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled ? "true" : "false"}
+      >
+        <slot name="title"></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="collapse" ${ref(this.myCollapse)} id="${this.collapseId}">
+        <ul class="sidenav-list" aria-labelledby="${this.buttonId}">
+          <slot></slot>
+        </ul>
+      </div>`;
+
+    const noMenuTemplate = html`
+      <a
+        href=${this.href}
+        @click=${() => this._onClickLink()}
+        class="sidenav-btn ${classMap({
+          disabled: this.disabled,
+          active: this.active,
+        })} "
+        aria-selected="${this.active}"
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled ? "true" : "false"}
+      >
+        <slot name="title"></slot>
+      </a>
+    `;
+    return html`
+      <li class="sidenav-item" aria-haspopup="${!this.href}">
+        ${this.href ? noMenuTemplate : withMenuTemplate}
+      </li>
+    `;
+  }
+}

package/src/Sidenav/sgds-sidenav-link.scss

@@ -0,0 +1,25 @@
+@import "../utils/base.scss";
+
+a.nav-link {
+  display: block;
+  color: inherit;
+  font-size: $sidenav-fontsize;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: calc(
+    #{$sidenav-item-spacing * 4} + #{$sidenav-btn-border-width}
+  );
+  padding-right: 0;
+  text-decoration: none;
+
+  &.active,
+  &:hover {
+    color: var(--sidenav-theme-color);
+  }
+  // Disabled state lightens text
+  &.disabled {
+    color: $nav-link-disabled-color;
+    pointer-events: none;
+    cursor: default;
+  }
+}

package/src/Sidenav/sgds-sidenav-link.ts

@@ -0,0 +1,8 @@
+import LinkElement from "../utils/link-element";
+import { customElement } from "lit/decorators.js";
+import styles from "./sgds-sidenav-link.scss";
+
+@customElement("sgds-sidenav-link")
+export class SgdsSidenavLink extends LinkElement {
+  static styles = styles;
+}

package/src/Sidenav/sgds-sidenav.scss

@@ -0,0 +1,6 @@
+ul {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    list-style: none;
+}

package/src/Sidenav/sgds-sidenav.ts

@@ -0,0 +1,33 @@
+import { html } from "lit";
+import SgdsElement from "../utils/sgds-element";
+import { customElement, property } from "lit/decorators.js";
+import styles from "./sgds-sidenav.scss";
+
+@customElement("sgds-sidenav")
+export class SgdsSidenav extends SgdsElement {
+  static styles = styles;
+
+  @property({ type: Boolean, attribute: true })
+  alwaysOpen = false;
+
+  render() {
+    this.alwaysOpen
+      ? null
+      : this.addEventListener("sgds-toggle", (e: CustomEvent) => {
+          const children = this.shadowRoot.querySelector('slot').assignedElements({flatten: true});
+          for (let i = 0; i < children.length; i++) {
+            if (e.detail.index != i) {
+              (children[i] as any).closeItem();
+            }
+          }
+        });
+
+    return html`
+      <nav class="sidenav" id="${this.id}">
+        <ul>
+          <slot></slot>
+        </ul>
+      </nav>
+    `;
+  }
+}

package/src/Tab/index.ts

@@ -0,0 +1,3 @@
+export { SgdsTab } from './sgds-tab';
+export { SgdsTabPanel } from './sgds-tabpanel';
+export { SgdsTabGroup } from './sgds-tabgroup';

package/src/Tab/sgds-tab.scss

@@ -0,0 +1,84 @@
+@import '../utils/components.style';
+@import '../utils/base.scss';
+
+:host {
+  display: inline-block;
+
+  sgds-tab {
+    + sgds-tab{
+      margin-right: 1rem;
+    }
+  }
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  font-family: $font-family-sans-serif;
+  font-size: $font-size-base;
+  color: $gray-600;
+  padding: $nav-sgds-tabs-padding-y 0;
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  transition: var(--transition-speed) box-shadow, var(--transition-speed) color;
+}
+
+.tab:focus {
+  outline: none;
+}
+
+.tab:focus-visible:not(.tab--disabled) {
+  color: $blue-500;
+}
+
+.tab:focus-visible {
+  outline: $blue-500 solid $input-btn-focus-width;
+  outline-offset: calc(-1 * #{$input-btn-focus-width} - 1px);
+}
+
+.tab.tab--active:not(.tab--disabled) {
+  color: $body-color;
+  font-weight: $font-weight-bold;
+  border-bottom: solid $nav-tabs-border-width $blue-500;
+}
+
+
+
+.tab.tab--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+
+@media (forced-colors: active) {
+  .tab.tab--active:not(.tab--disabled) {
+    outline: solid 1px transparent;
+    outline-offset: -3px;
+  }
+}
+
+.tab {
+  ::slotted(i){
+    margin-top:-4px;
+    margin-right: 0.5rem;
+  }
+  ::slotted(.badge){
+    margin-left: 0.5rem;
+  }
+  &--basic-toggle{
+    background-color: $white;
+    border: 1px solid $gray-400;
+    border-radius: 0;
+    color: #1d2939;
+    padding: 0.75rem 1.5rem;
+    + .tab--basic-toggle{
+      margin-left: -2px;
+    }
+    &.tab--active:not(.tab--disabled){
+      background: var(--indicator-color);
+      color: white;
+      border-bottom: 1px solid $gray-400;
+    }
+  }
+}

package/src/Tab/sgds-tab.ts

@@ -0,0 +1,87 @@
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import SgdsElement from "../utils/sgds-element";
+import { watch } from "../utils/watch";
+import styles from "./sgds-tab.scss";
+
+let id = 0;
+
+@customElement("sgds-tab")
+export class SgdsTab extends SgdsElement {
+  static styles = styles;
+  @query(".tab") tab: HTMLElement;
+
+  private readonly attrId = ++id;
+  private readonly componentId = `sgds-tab-${this.attrId}`;
+
+  @property({ reflect: true }) label = "";
+  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
+  @property({ reflect: true }) panel = "";
+
+
+
+
+  /** Draws the tab in an active state. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  /** Makes the tab closable and shows a close button. */
+  @property({ type: Boolean }) closable = false;
+
+  /** Disables the tab and prevents selection. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @property({ type: Boolean, reflect: true }) variant;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "tab");
+  }
+
+  /** Sets focus to the tab. */
+  focus(options?: FocusOptions) {
+    this.tab.focus(options);
+  }
+
+  /** Removes focus from the tab. */
+  blur() {
+    this.tab.blur();
+  }
+
+  handleCloseClick() {
+    this.emit("sgds-close");
+  }
+
+  @watch("active")
+  handleActiveChange() {
+    this.setAttribute("aria-selected", this.active ? "true" : "false");
+  }
+
+  @watch("disabled")
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+
+  render() {
+    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+
+    const getAttr = this.closest('sgds-tab').getAttribute('variant')
+
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          tab: true,
+          "tab--active": this.active,
+          "tab--closable": this.closable,
+          "tab--disabled": this.disabled,
+          [`tab--${getAttr}`]: getAttr
+        })}
+        tabindex=${this.disabled ? "-1" : "0"}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}