@govtechsg/sgds-web-component 0.0.10 → 0.0.11

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';

package/src/Tab/sgds-tab.scss

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

@@ -1,87 +0,0 @@
-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>
-    `;
-  }
-}