@govtechsg/sgds-web-component 0.0.10 → 0.0.12

package/src/Radio/sgds-radio.ts

@@ -1,120 +0,0 @@
-import { html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { watch } from "../utils/watch";
-import styles from "./sgds-radio.scss";
-import SgdsElement from "../utils/sgds-element";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { live } from "lit/directives/live.js";
-import genId from "../utils/generateId";
-
-
-@customElement("sgds-radio")
-export class SgdsRadio extends SgdsElement {
-  static styles = styles;
-
-  @state() checked = false;
-  @state() protected hasFocus = false;
-
-  /** The radio's value attribute. */
-  @property() value: string;
-
-  /** For id/for pair of the HTML form control. */
-  @property({ type: String, reflect: true }) radioId = genId("radio");
-
-  /** Disables the radio. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** Aligns the radios horizontally */
-  @property({ type: Boolean, reflect: true }) isInline = false;
-
-  /** For aria-label */
-  @property({ type: String, reflect: true }) ariaLabel = "";
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.setInitialAttributes();
-    this.addEventListeners();
-  }
-
-  @watch("checked")
-  handleCheckedChange() {
-    this.setAttribute("aria-checked", this.checked ? "true" : "false");
-    this.setAttribute("tabindex", this.checked ? "0" : "-1");
-  }
-
-  @watch("disabled", { waitUntilFirstUpdate: true })
-  handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-  }
-
-  private handleBlur() {
-    this.hasFocus = false;
-    this.emit('sgds-blur');
-  }
-
-  private handleClick() {
-    if (!this.disabled) {
-      this.checked = true;
-    }
-  }
-
-  private handleFocus() {
-    this.hasFocus = true;
-    this.emit('sgds-focus');
-  }
-
-  private addEventListeners() {
-    this.addEventListener('blur', () => this.handleBlur());
-    this.addEventListener('click', () => this.handleClick());
-    this.addEventListener('focus', () => this.handleFocus());
-  }
-
-  private setInitialAttributes() {
-    this.setAttribute("role", "radio");
-    this.setAttribute("tabindex", "-1");
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-  }
-
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          "form-check": true,
-          "form-check-inline": this.isInline,
-        })}
-      >
-        <input
-          part="control"
-          class=${classMap({
-            "form-check-input": true,
-          })}
-          type="radio"
-          id=${ifDefined(this.radioId)}
-          value=${ifDefined(this.value)}
-          .checked=${live(this.checked)}
-          ?disabled=${this.disabled}
-          aria-disabled=${this.disabled ? "true" : "false"}
-          aria-checked=${this.checked ? "true" : "false"}
-          @click=${this.handleClick}
-        />
-        <label
-          part="label"
-          for="${ifDefined(this.radioId)}"
-          aria-label=${ifDefined(this.ariaLabel)}
-          class="form-check-label"
-          ><slot></slot
-        ></label>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sgds-radio': SgdsRadio;
-  }
-}
-
-export default SgdsRadio;

package/src/Radio/sgds-radiogroup.scss

@@ -1,22 +0,0 @@
-@import "../utils/base.scss";
-@import "~@govtechsg/sgds/sass/forms/form-check";
-@import "~@govtechsg/sgds/sass/forms/labels";
-@import "~@govtechsg/sgds/sass/forms/validation";
-@import "~@govtechsg/sgds/sass/forms/form-text";
-@import "~@govtechsg/sgds/sass/forms/form-control";
-@import "~@govtechsg/sgds/sass/forms/form-control-group";
-@import "~@govtechsg/sgds/sass/forms/input-group";
-
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-

package/src/Radio/sgds-radiogroup.ts

@@ -1,221 +0,0 @@
-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

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

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

@@ -1,73 +0,0 @@
-@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

@@ -1,145 +0,0 @@
-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

@@ -1,25 +0,0 @@
-@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

@@ -1,8 +0,0 @@
-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

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

package/src/Sidenav/sgds-sidenav.ts

@@ -1,33 +0,0 @@
-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

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