@govtechsg/sgds-web-component 0.0.10 → 0.0.11

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);
-  }
-}

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

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

package/src/Mainnav/sgds-mainnav.scss

@@ -1,39 +0,0 @@
-@import "../utils/base.scss";
-@import "~@govtechsg/sgds/sass/navbar";
-@import "~@govtechsg/sgds/sass/transitions";
-@import "~@govtechsg/sgds/sass/offcanvas";
-.navbar-nav {
-  display: flex;
-  align-self: center;
-  gap: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  height: 100%;
-  width: 100%;
-}
-
-.navbar-toggler {
-  border: none;
-}
-.navbar-toggler:focus {
-  box-shadow: none;
-}
-
-slot[name="non-collapsible"] {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-}
-
-.slot-end {
-    display: flex;
-    margin-left: auto;
-    align-items: stretch;
-    gap: 1rem;
-
-}
-
-// there is no wildcard selector for element tag names in css :/
-.slot-end::slotted(:not([name$="-mainnav-item"])){
-  align-self: center;
-}

package/src/Mainnav/sgds-mainnav.ts

@@ -1,183 +0,0 @@
-import { html, PropertyValueMap } from "lit";
-import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
-import styles from "./sgds-mainnav.scss";
-import { Collapse, Offcanvas } from "bootstrap";
-import { ref, createRef, Ref } from "lit/directives/ref.js";
-import genId from "../utils/generateId";
-import SgdsElement from "../utils/sgds-element";
-import {
-  SM_BREAKPOINT,
-  MD_BREAKPOINT,
-  LG_BREAKPOINT,
-  XL_BREAKPOINT,
-  XXL_BREAKPOINT,
-} from "../utils/breakpoints";
-import { classMap } from "lit/directives/class-map.js";
-
-export type MainnavExpandSize =
-  | "sm"
-  | "md"
-  | "lg"
-  | "xl"
-  | "xxl"
-  | "always"
-  | "never";
-
-const SIZES = {
-  sm: SM_BREAKPOINT,
-  md: MD_BREAKPOINT,
-  lg: LG_BREAKPOINT,
-  xl: XL_BREAKPOINT,
-  XXL: XXL_BREAKPOINT,
-  never: Infinity,
-  always: -1,
-};
-@customElement("sgds-mainnav")
-export class SgdsMainnav extends SgdsElement {
-  static styles = styles;
-
-  constructor() {
-    super();
-    window.addEventListener("resize", () => {
-      const newBreakpointReachedValue =
-        window.innerWidth < SIZES[this.expand.toString()];
-      if (newBreakpointReachedValue !== this.breakpointReached) {
-        this.requestUpdate();
-      }
-    });
-  }
-
-  private myCollapse: Ref<HTMLElement> = createRef();
-  private bsCollapse: Collapse = null;
-  // TODO: stylings and slots are incomplete for offcanvas mode
-  private myOffcanvas: Ref<HTMLElement> = createRef();
-  private bsOffcanvas: Offcanvas = null;
-
-  private _onClickButton() {
-    if (this.mode === "offcanvas") {
-      return this.bsOffcanvas.toggle();
-    }
-    this.bsCollapse.toggle();
-  }
-
-  @property({ type: String })
-  brandHref = "";
-
-  @property({ type: String })
-  collapseId = genId("mainnav", "collapse");
-
-  @property()
-  expand: MainnavExpandSize = "lg";
-
-  @property({ type: String })
-  mode: "offcanvas" | "default" = "default";
-
-  @state()
-  breakpointReached: Boolean = false;
-
-  @state()
-  expanded: Boolean = false;
-
-  firstUpdated() {
-    
-    if (this.mode === "default") {
-      this.bsCollapse = new Collapse(this.myCollapse.value, {
-        toggle: false,
-      });
-      this.myCollapse.value.addEventListener("show.bs.collapse", () => {
-        this.expanded = true;
-      });
-      this.myCollapse.value.addEventListener("shown.bs.collapse", () => {
-        this.expanded = true;
-      });
-      this.myCollapse.value.addEventListener("hide.bs.collapse", () => {
-        this.expanded = false;
-      });
-      this.myCollapse.value.addEventListener("hidden.bs.collapse", () => {
-        this.expanded = false;
-      });
-    }
-
-    if (this.mode === "offcanvas") {
-      this.bsOffcanvas = new Offcanvas(this.myOffcanvas.value);
-      //add esc keyboard event for bsOffcanvas
-      this.addEventListener("keydown", (ev) => {
-        if (ev.key === "Escape") {
-          this.bsOffcanvas.hide();
-        }
-      });
-    }
-
-  }
-// assigning name attribute to elements added in slot="end", to use wildcard css selector to assign styles only to *-mainnav-item
-_handleSlotChange(e: Event){
-const childElements = (e.target as HTMLSlotElement).assignedElements({flatten: true})
-childElements.forEach(e => e.setAttribute('name', e.tagName.toLowerCase()))
-} 
-
-  render() {
-    this.breakpointReached = window.innerWidth < SIZES[this.expand.toString()];
-    const collapseClass = "collapse navbar-collapse order-4";
-    const offcanvasClass = "offcanvas offcanvas-start order-4";
-    return html`
-      <nav
-        class="sgds navbar navbar-light
-        ${this._expandClass()}"
-      >
-        <a class="navbar-brand me-auto order-1" href=${this.brandHref}>
-          <slot name="brand"></slot>
-        </a>
-        <slot
-          name="non-collapsible"
-          class="${this.breakpointReached ? "order-2" : "order-5"}"
-        ></slot>
-        <button
-          class="navbar-toggler order-3"
-          type="button"
-          @click=${() => this._onClickButton()}
-          aria-controls="${this.collapseId}"
-          aria-expanded="${this.expanded}"
-          aria-label="Toggle navigation"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="30"
-            height="30"
-            fill="currentColor"
-            class="bi bi-list"
-            viewBox="0 0 16 16"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
-            />
-          </svg>
-        </button>
-        <div
-          class=${this.mode === "default" ? collapseClass : offcanvasClass}
-          ${this.mode === "default"
-            ? ref(this.myCollapse)
-            : ref(this.myOffcanvas)}
-          id=${this.collapseId}
-        >
-          <ul class="navbar-nav">
-            <slot></slot>
-            <slot name="end" class=${classMap({"slot-end": !this.breakpointReached})} @slotchange=${this._handleSlotChange}></slot>
-          </ul>
-        </div>
-      </nav>
-    `;
-  }
-  _expandClass() {
-    switch (this.expand) {
-      case "always":
-        return "navbar-expand";
-      case "never":
-        break;
-      default:
-        return `navbar-expand-${this.expand}`;
-    }
-  }
-}
-
-export default SgdsMainnav;

package/src/Masthead/index.ts

@@ -1 +0,0 @@
-export {SgdsMasthead} from './sgds-masthead';