@govtechsg/sgds-web-component 0.0.10 → 0.0.12

package/src/Checkbox/sgds-checkbox.ts

@@ -1,149 +0,0 @@
-import { LitElement, html } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
-import { live } from "lit/directives/live.js";
-import styles from "./sgds-checkbox.scss";
-import { ifDefined } from "lit/directives/if-defined.js";
-import SgdsElement from "../utils/sgds-element";
-import { classMap } from "lit/directives/class-map.js";
-import genId from "../utils/generateId";
-import { defaultValue } from "../utils/defaultvalue";
-import { FormSubmitController } from "../utils/form";
-import { watch } from "../utils/watch";
-
-@customElement("sgds-checkbox")
-export class SgdsCheckbox extends SgdsElement {
-  static styles = styles;
-
-  @query('input[type="checkbox"]') input: HTMLInputElement;
-
-  private readonly formSubmitController = new FormSubmitController(this, {
-    value: (control: SgdsCheckbox) =>
-      control.checked ? control.value : undefined,
-    defaultValue: (control: SgdsCheckbox) => control.defaultChecked,
-    setValue: (control: SgdsCheckbox, checked: boolean) =>
-      (control.checked = checked),
-  });
-
-  /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */
-  @property({reflect: true }) name: string;
-
-  /** For Id/For pair of the HTML form control. */
-  @property({ type: String, reflect: true }) checkboxId = genId("checkbox");
-
-  /** For aria-label when there is no appropriate text label visible */
-  @property({ type: String, reflect: true }) ariaLabel = "checkbox";
-
-  /** Manually style the input as valid */
-  @property({ type: Boolean, reflect: true }) valid = false;
-
-  /** Manually style the input as invalid */
-  @property({ type: Boolean, reflect: true }) invalid = false;
-
-  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
-  @property() value: string;
-
-  /** Makes the checkbox a required field. */
-  @property({ type: Boolean, reflect: true }) required = false;
-
-  /** Draws the checkbox in a checked state. */
-  @property({ type: Boolean, reflect: true }) checked = false;
-
-  /** Disables the checkbox (so the user can't check / uncheck it). */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
-  @defaultValue("checked")
-  defaultChecked = false;
-
-
-  /** Simulates a click on the checkbox. */
-  click() {
-    this.input.click();
-  }
-
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    if (!this.input.reportValidity()) {
-      this.invalid = !this.input.checkValidity();
-    }
-    return this.input.reportValidity();
-  }
-
-  handleChange() {
-    // console.log(
-    //   "when this.click() is fired, input detects a change --> handleChange runs"
-    // );
-    this.checked = !this.checked;
-    this.value = this.input.value;
-    this.emit("sgds-change");
-  }
-
-  handleKeyDown(event: KeyboardEvent) {
-    const hasModifier =
-      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-    if (event.key === "Enter" && !hasModifier) {
-      // console.log(
-      //   "so here we are trying to mimick keydown enter event like a mousclick event"
-      // );
-      this.click();
-    }
-  }
-
-  @watch("disabled", { waitUntilFirstUpdate: true })
-  handleDisabledChange() {
-    // Disabled form controls are always valid, so we need to recheck validity when the state changes
-    this.input.disabled = this.disabled;
-    this.invalid = !this.input.checkValidity();
-  }
-
-  @watch("checked", { waitUntilFirstUpdate: true })
-  handleStateChange() {
-    this.invalid = !this.input.checkValidity();
-    if (this.required) this.valid = this.input.checkValidity();
-  }
-
-  render() {
-    return html`
-      <div part="base" class="form-check">
-        <input
-          part="control"
-          class=${classMap({
-            "form-check-input": true,
-            "is-invalid": this.invalid,
-            "is-valid": this.valid,
-          })}
-          type="checkbox"
-          id=${ifDefined(this.checkboxId)}
-          aria-invalid=${this.invalid ? "true" : "false"}
-          name=${ifDefined(this.name)}
-          value=${ifDefined(this.value)}
-          .checked=${live(this.checked)}
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-          aria-disabled=${this.disabled ? "true" : "false"}
-          aria-checked=${this.checked ? "true" : "false"}
-          @change=${this.handleChange}
-          @keydown=${this.handleKeyDown}
-        />
-        <label
-          part="label"
-          for="${ifDefined(this.checkboxId)}"
-          aria-label=${ifDefined(this.ariaLabel)}
-          class="form-check-label"
-          ><slot></slot
-        ></label>
-        ${this.invalid
-          ? html`<slot
-              name="feedback"
-              part="feedback"
-              class=${classMap({
-                "invalid-feedback": true,
-              })}
-            ></slot>`
-          : undefined}
-      </div>
-    `;
-  }
-}
-
-export default SgdsCheckbox;

package/src/Dropdown/index.ts

@@ -1,3 +0,0 @@
-export { SgdsDropdown } from './sgds-dropdown'
-export { SgdsDropdownItem } from './sgds-dropdown-item'
-export type { DropdownButtonVariant, DropDirection} from '../utils/dropdown-element'

package/src/Dropdown/sgds-dropdown-item.ts

@@ -1,39 +0,0 @@
-import { html } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-import LinkElement from "../utils/link-element";
-import styles from "./sgds-dropdown.scss";
-import {classMap} from 'lit/directives/class-map.js';
-
-@customElement("sgds-dropdown-item")
-export class SgdsDropdownItem extends LinkElement {
-  static styles = styles
-
-  @query('a')
-  anchor: HTMLElement
-  firstUpdated(){
-     //required when navigate with ArrowDown/ArrowUp
-    this.addEventListener('keydown', (e:KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        this.anchor.click()
-      }
-    })
-  }
-
-  render() {
-    return html`
-      <li>
-        <a
-          href="${this.href}"
-          class="dropdown-item ${classMap({
-            'disabled': this.disabled,
-            'active': this.active
-          })}"
-          ?disabled=${this.disabled}
-          aria-disabled=${this.disabled ? 'true' : 'false'}
-          tabindex=${this.disabled ? '-1': '0'}
-          ><slot></slot
-        ></a>
-      </li>
-    `;
-  }
-}

package/src/Dropdown/sgds-dropdown.scss

@@ -1,5 +0,0 @@
-@import "../utils/base.scss";
-@import "~@govtechsg/sgds/sass/dropdown";
-
-
-  

package/src/Dropdown/sgds-dropdown.ts

@@ -1,54 +0,0 @@
-import { html } from "lit";
-import { customElement } from "lit/decorators.js";
-import {  ref } from "lit/directives/ref.js";
-import styles from "./sgds-dropdown.scss";
-import { DropdownElement } from "../utils/dropdown-element";
-
-export type DropDirection = "left" | "right" | "up" | "down";
-@customElement("sgds-dropdown")
-export class SgdsDropdown extends DropdownElement {
-  static styles = styles;
-  constructor(){
-    super()
-    this.modifierOpt = [
-      {
-        name: "offset",
-        options: {
-          offset: [0, 10],
-        },
-      },
-    ];
-  }
-  render() {
-    return html`
-      <div>
-        <sgds-button
-          variant="outline-${this.variant}"
-          ?disabled=${this.disabled}
-          aria-expanded="${this.menuIsOpen}"
-          ${ref(this.myDropdown)}
-          @click=${() => this._onClickButton()}
-          id=${this.togglerId}
-        >
-          ${this.togglerText}
-          <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>
-        </sgds-button>
-        <ul class="dropdown-menu" role="menu" part="menu">
-          <slot @click=${this._handleSelectSlot}></slot>
-        </ul>
-      </div>
-    `;
-  }
-}

package/src/Footer/index.ts

@@ -1,3 +0,0 @@
-
-export {SgdsFooter} from './sgds-footer'
-export type { ColumnLinks, Links } from './sgds-footer' 

package/src/Footer/sgds-footer.scss

@@ -1,5 +0,0 @@
-@import "../utils/base.scss";
-@import "~@govtechsg/sgds/sass/containers";
-@import "~@govtechsg/sgds/sass/grid";
-@import "~@govtechsg/sgds/sass/footer";
-

package/src/Footer/sgds-footer.ts

@@ -1,121 +0,0 @@
-import { html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import styles from "./sgds-footer.scss";
-import SgdsElement from "../utils/sgds-element";
-
-export type Links = {
-  href: string;
-  label: string;
-}
-export interface ColumnLinks {
-  title: string;
-  links: Links[]
-}
-@customElement("sgds-footer")
-export class SgdsFooter extends SgdsElement {
-  static styles = styles
-  @property()
-  title = ``;
-  @property()
-  description = ``;
-  @property({
-    type: Array,
-  })
-  links: ColumnLinks[] = [];
-
-  @property({ type: String })
-  lastUpdatedDate = "";
-
-  //href
-  @property({ type: String })
-  contactHref = "#";
-  @property({ type: String })
-  feedbackHref = "#";
-  @property({ type: String })
-  vulnerabilityHref = "#";
-  @property({ type: String })
-  privacyHref = "#";
-  @property({ type: String })
-  termsOfUseHref = "#";
-  
-  render() {
-    return html`
-      <footer class="sgds footer">
-        <section class="footer-top" part="footer-top">
-          <div class="container-fluid">
-            <div class="row footer-header">
-              <div class="col col-lg-6 col-md-12">
-                <div class="title">${this.title}</div>
-                <div class="description">${this.description}</div>
-              </div>
-            </div>
-            <div class="row footer-items">
-              ${this.links.map(
-                (item: ColumnLinks) =>
-                  html`
-                    <div class="col-xxl-2 col-md-4 mb-3">
-                      <div class="title">${item.title}</div>
-                      <ul class="links">
-                        ${item.links.map(
-                          (link: Links) =>
-                            html`
-                              <li><a href="${link.href}">${link.label}</a></li>
-                            `
-                        )}
-                      </ul>
-                    </div>
-                  `
-              )}
-            </div>
-            <div class="row footer-contact-links">
-              <div class="col">
-                <div class="d-flex justify-content-lg-end">
-                  <ul>
-                    <li><a href="${this.contactHref}">Contact</a></li>
-                    <li><a href="${this.feedbackHref}">Feedback</a></li>
-                    <li>
-                      <a
-                        href="https://www.reach.gov.sg/"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        >Reach.gov.sg</a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-        <section class="footer-bottom" part="footer-bottom">
-          <div class="container-fluid">
-            <div class="row footer-mandatory-links">
-              <div class="col">
-                <ul>
-                  <li>
-                    <a
-                      href="${this.vulnerabilityHref}"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      >Report Vulnerability</a>
-                  </li>
-                  <li><a href="${this.privacyHref}">Privacy Statement</a></li>
-                  <li><a href="${this.termsOfUseHref}">Terms of use</a></li>
-                </ul>
-              </div>
-            </div>
-            <div class="row footer-copyrights">
-              <div class="col">
-                <div class="d-flex justify-content-lg-end text-end">
-                  © ${new Date().getFullYear()} Government of Singapore<br />
-                  Last Updated ${this.lastUpdatedDate}
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-      </footer>
-    `;
-  }
-}
-
-export default SgdsFooter;

package/src/Input/index.ts

@@ -1 +0,0 @@
-export { SgdsInput } from "./sgds-input";

package/src/Input/sgds-input.scss

@@ -1,20 +0,0 @@
-
-@import '../utils/base.scss';
-@import "~@govtechsg/sgds/sass/forms/labels"; 
-@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"; 
-@import "~@govtechsg/sgds/sass/forms/validation";
-
-:host{
-    --sgds-body-line-height: 2rem;
-}
-
-.form{
-    &-label,
-    &-text
-    {
-        line-height: var(--sgds-body-line-height);
-    }
-}

package/src/Input/sgds-input.ts

@@ -1,178 +0,0 @@
-
-import { customElement, property,query, state } from "lit/decorators.js";
-import { html } from 'lit/static-html.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import {classMap} from 'lit/directives/class-map.js';
-import { live } from 'lit/directives/live.js';
-import styles from "./sgds-input.scss";
-import SgdsElement from "../utils/sgds-element";
-import { defaultValue } from "../utils/defaultvalue";
-import { FormSubmitController } from "../utils/form";
-import genId from "../utils/generateId";
-import { watch } from "../utils/watch";
-@customElement("sgds-input")
-export class SgdsInput extends SgdsElement {
-  @query('input.form-control') input: HTMLInputElement;
-
-  @state() private hasFocus = false;
-
-  private readonly formSubmitController = new FormSubmitController(this);
-  
-  static styles = styles;
-  @property({ reflect: true }) type:
-    | 'date'
-    | 'datetime-local'
-    | 'email'
-    | 'number'
-    | 'password'
-    | 'search'
-    | 'tel'
-    | 'text'
-    | 'time'
-    | 'url' = 'text';
-  @property({  reflect: true }) label : string;
-  @property({  reflect: true}) hintText : string;
-  @property({ type:String, reflect: true }) inputId = genId("input", this.type);
-  @property({  reflect: true }) name : string;
-  @property({  reflect: true }) inputClasses : string;
-  @property({  reflect: true }) iconName: string;
-
-  @property({ type: String, reflect: true }) value = '';
-  @property({ type: String, reflect: true}) minlength;
-  @property({ type: String, reflect: true}) maxlength;
-
-  @property({ type: String, reflect: true }) placeholder = "Placeholder";
-  
-  @property({ type: String }) pattern;
-  @property({ type: String, reflect: true }) invalidFeedback = "default feedback";
-  
-  @property({ type: Boolean, reflect: true }) autofocus = false;
-  @property({ type: Boolean, reflect: true }) disabled = false;
-  @property({ type: Boolean, reflect: true }) required = false;
-  /** Makes the input readonly. */
-  @property({ type: Boolean, reflect: true }) readonly = false;
-
-  @property({ type: Boolean, reflect: true }) invalid = false;
-  @property({ type: Boolean, reflect: true }) valid = false;
-
-  /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
-  @defaultValue()
-  defaultValue = '';
-
-  /** Sets focus on the input. */
-  focus(options?: FocusOptions) {
-    this.input.focus(options);
-  }
-
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    return this.input.reportValidity();
-  }
-
-  handleInvalid() {
-    this.invalid = true;
-  }
-
-  handleChange(event: string){
-    this.value = this.input.value;
-    this.emit(event);
-  }
-
-  handleFocus() {
-    this.hasFocus = true;
-    this.emit('sgds-focus');
-  }
-
-  handleBlur() {
-    this.hasFocus = false;
-    this.emit('sgds-blur');
-  }
-
-  handleKeyDown(event: KeyboardEvent) {
-    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-
-    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before
-    // submitting to allow users to cancel the keydown event if they need to
-    if (event.key === 'Enter' && !hasModifier) {
-      setTimeout(() => {
-        if (!event.defaultPrevented) {
-          this.formSubmitController.submit();
-        }
-      });
-    }
-  }
-
-  @watch('disabled', { waitUntilFirstUpdate: true })
-  handleDisabledChange() {
-    // Disabled form controls are always valid, so we need to recheck validity when the state changes
-    this.input.disabled = this.disabled;
-    this.invalid = !this.input.checkValidity();
-  }
-
-  @watch('value', { waitUntilFirstUpdate: true })
-  handleValueChange() {
-    this.invalid = !this.input.checkValidity();
-    this.valid = this.input.checkValidity()
-  }
-
-  render() {
-    const input = html`
-      <input type="text"
-        class="form-control 
-        ${classMap(
-          { 
-            'is-invalid' : this.invalid,
-            'is-valid' : this.valid,
-            [`${this.inputClasses}`]: this.inputClasses
-          })}
-        " 
-        type=${this.type}
-        id=${this.inputId}
-        name=${ifDefined(this.name)}
-        placeholder=${ifDefined(this.placeholder)}
-        aria-invalid=${this.invalid ? 'true' : 'false'}
-        pattern=${ifDefined(this.pattern)}
-        ?autofocus=${this.autofocus}
-        ?disabled=${this.disabled}
-        ?readonly=${this.readonly}
-        ?required=${this.required}
-        .value=${live(this.value)}
-        minlength=${ifDefined(this.minlength)}
-        maxlength=${ifDefined(this.maxlength)}
-        @input=${()=> this.handleChange('sgds-input')}
-        @change=${()=> this.handleChange('sgds-change')}
-        @keydown=${this.handleKeyDown}
-        @invalid=${this.handleInvalid}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-      >
-      <div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>
-    `
-    // if iconName is defined
-    const inputWithIcon = html`
-      <div class="sgds form-control-group ${this.inputClasses}">
-        <span class="form-control-icon">
-          <sl-icon name=${this.iconName}></sl-icon>
-        </span>
-        ${input}
-      </div>
-    `
-    // if hintText is defined
-    const withHintText = html`
-    <small id="${ifDefined(this.inputId)}Help" class="text-muted form-text">${this.hintText}</small>
-    `
-
-    // if label is defined
-    const withLabel = html`
-    <label for=${ifDefined(this.inputId)} class="form-label">${this.label}</label>
-    `
-
-    return html`
-        ${this.label ? withLabel : undefined }
-        ${this.hintText ? withHintText : undefined }
-        ${this.iconName ? inputWithIcon : input}
-    `;
-  }
-}
-
-export default SgdsInput;

package/src/Mainnav/index.ts

@@ -1,4 +0,0 @@
-export { SgdsMainnav } from './sgds-mainnav'
-export type { MainnavExpandSize } from './sgds-mainnav'
-export { SgdsMainnavItem } from './sgds-mainnav-item'
-export { SgdsMainnavDropdown } from './sgds-mainnav-dropdown'

package/src/Mainnav/sgds-mainnav-dropdown.scss

@@ -1,13 +0,0 @@
-@import "./sgds-mainnav-item.scss";
-@import "../Dropdown/sgds-dropdown.scss";
-
-.nav-link {
-    gap: 1rem;
-}
-.dropdown-menu {
-    margin-top: 0;
-    border: 1px solid rgba($black, .1);
-    border-radius: 0 0 5px 5px;
-    background-color: $white;
-    box-shadow: 0 .5rem 1rem rgba($black, .15);
-}

package/src/Mainnav/sgds-mainnav-dropdown.ts

@@ -1,45 +0,0 @@
-import { html } from "lit";
-import { customElement} from "lit/decorators.js";
-import { ref } from "lit/directives/ref.js";
-import styles from "./sgds-mainnav-dropdown.scss";
-import { DropdownElement } from "../utils/dropdown-element";
-
-@customElement("sgds-mainnav-dropdown")
-export class SgdsMainnavDropdown extends DropdownElement {
-  static styles = styles;
-
-  render() {
-    return html`
-      <li class="nav-item">
-        <a
-          class="nav-link"
-          ?disabled=${this.disabled}
-          aria-expanded="${this.menuIsOpen}"
-          ${ref(this.myDropdown)}
-          @click=${() => this._onClickButton()}
-          id=${this.togglerId}
-          tabindex=${this.disabled ? '-1' : '0'}
-          role="button"
-          >
-          ${this.togglerText}
-          <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>
-        </a>
-        <ul class="dropdown-menu" role="menu" part="menu">
-          <slot @click=${this._handleSelectSlot}></slot>
-        </ul>
-      </li>
-    `;
-  }
-}

package/src/Mainnav/sgds-mainnav-item.scss

@@ -1,24 +0,0 @@
-@import "../utils/base.scss";
-@import "~@govtechsg/sgds/sass/navbar";
-
-:host   {
-  --mainnav-item-theme-color: #5925DC;
-}
-
-li {
-  height: 100%;
-}
-
-a.nav-link {
-  display: flex;
-  color: #344054;
-  border-bottom: $navbar-border-bottom-height solid transparent;
-  min-height: 100%;
-  align-items: center;
-
-  &.active,
-  &:hover {
-    color: var(--mainnav-item-theme-color);
-    border-color: var(--mainnav-item-theme-color);
-  }
-}