@govtechsg/sgds-web-component 0.0.10 → 0.0.11

package/src/Modal/sgds-modal.ts

@@ -1,309 +0,0 @@
-import { html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { animateTo, stopAnimations } from '../utils/animate';
-import { waitForEvent } from '../utils/event';
-import Modal from '../utils/modal';
-import { lockBodyScrolling, unlockBodyScrolling } from '../utils/scroll';
-import SgdsElement from "../utils/sgds-element";
-import { HasSlotController } from '../utils/slot';
-import { watch } from '../utils/watch';
-import { getAnimation, setDefaultAnimation } from '../utils/animation-registry';
-import styles from "./sgds-modal.scss";
-
-
-@customElement('sgds-modal')
-export class SgdsModal extends SgdsElement {
-
-  static styles = styles;
-
-  @query('.modal') dialog: HTMLElement;
-  @query('.modal-panel') panel: HTMLElement;
-  @query('.modal-overlay') overlay: HTMLElement;
-
-  private readonly hasSlotController = new HasSlotController(this, 'footer');
-  private modal: Modal;
-  private originalTrigger: HTMLElement | null;
-
-  @property({ type: Boolean, reflect: true }) open = false;
-  // @property({ type: Boolean, reflect: true }) centeredAlignVariant = false;
-
-  @property({ reflect: true }) title = '';
-  @property({ reflect: true }) titleIcon = '';
-  @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.modal = new Modal(this);
-  }
-
-  firstUpdated() {
-    this.dialog.hidden = !this.open;
-
-    if (this.open) {
-      this.addOpenListeners();
-      this.modal.activate();
-      lockBodyScrolling(this);
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    unlockBodyScrolling(this);
-  }
-
-  /** Shows the dialog. */
-  async show() {
-    if (this.open) {
-      return undefined;
-    }
-
-    this.open = true;
-    return waitForEvent(this, 'sgds-after-show');
-  }
-
-  /** Hides the dialog */
-  async hide() {
-    if (!this.open) {
-      return undefined;
-    }
-
-    this.open = false;
-    return waitForEvent(this, 'sgds-after-hide');
-  }
-
-  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {
-    const slRequestClose = this.emit('sgds-request-close', {
-      cancelable: true,
-      detail: { source }
-    });
-
-    if (slRequestClose.defaultPrevented) {
-      const animation = getAnimation(this, 'modal.denyClose');
-      animateTo(this.panel, animation.keyframes);
-      return;
-    }
-
-    this.hide();
-  }
-
-  addOpenListeners() {
-    document.addEventListener('keydown', this.handleDocumentKeyDown);
-  }
-
-  removeOpenListeners() {
-    document.removeEventListener('keydown', this.handleDocumentKeyDown);
-  }
-
-  handleDocumentKeyDown(event: KeyboardEvent) {
-    if (this.open && event.key === 'Escape') {
-      event.stopPropagation();
-      this.requestClose('keyboard');
-    }
-  }
-
-  @watch('open', { waitUntilFirstUpdate: true })
-  async handleOpenChange() {
-    if (this.open) {
-      // Show
-      this.emit('sgds-show');
-      this.addOpenListeners();
-      this.originalTrigger = document.activeElement as HTMLElement;
-      this.modal.activate();
-
-      lockBodyScrolling(this);
-
-      // When the dialog is shown, Safari will attempt to set focus on whatever element has autofocus. This can cause
-      // the dialogs's animation to jitter (if it starts offscreen), so we'll temporarily remove the attribute, call
-      // `focus({ preventScroll: true })` ourselves, and add the attribute back afterwards.
-      //
-      // Related: https://github.com/shoelace-style/shoelace/issues/693
-      //
-      const autoFocusTarget = this.querySelector('[autofocus]');
-      if (autoFocusTarget) {
-        autoFocusTarget.removeAttribute('autofocus');
-      }
-
-      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
-      this.dialog.hidden = false;
-
-      // Set initial focus
-      requestAnimationFrame(() => {
-        const slInitialFocus = this.emit('sgds-initial-focus', { cancelable: true });
-
-        if (!slInitialFocus.defaultPrevented) {
-          // Set focus to the autofocus target and restore the attribute
-          if (autoFocusTarget) {
-            (autoFocusTarget as HTMLInputElement).focus({ preventScroll: true });
-          } else {
-            this.panel.focus({ preventScroll: true });
-          }
-        }
-
-        // Restore the autofocus attribute
-        if (autoFocusTarget) {
-          autoFocusTarget.setAttribute('autofocus', '');
-        }
-      });
-
-      const panelAnimation = getAnimation(this, 'modal.show');
-      const overlayAnimation = getAnimation(this, 'modal.overlay.show');
-      await Promise.all([
-        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
-        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)
-      ]);
-
-      this.emit('sgds-after-show');
-    } else {
-      // Hide
-      this.emit('sgds-hide');
-      this.removeOpenListeners();
-      this.modal.deactivate();
-
-      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);
-      const panelAnimation = getAnimation(this, 'modal.hide');
-      const overlayAnimation = getAnimation(this, 'modal.overlay.hide');
-
-      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to
-      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear
-      // unexpectedly. We'll unhide them after all animations have completed.
-      await Promise.all([
-        animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {
-          this.overlay.hidden = true;
-        }),
-        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {
-          this.panel.hidden = true;
-        })
-      ]);
-
-      this.dialog.hidden = true;
-
-      // Now that the dialog is hidden, restore the overlay and panel for next time
-      this.overlay.hidden = false;
-      this.panel.hidden = false;
-
-      unlockBodyScrolling(this);
-
-      // Restore focus to the original trigger
-      const trigger = this.originalTrigger;
-      if (typeof trigger?.focus === 'function') {
-        setTimeout(() => trigger.focus());
-      }
-
-      this.emit('sgds-after-hide');
-    }
-  }
-
-  render() {
-     // if label is defined
-     const withLabelIcon = html`
-     <sl-icon name=${this.titleIcon} class="pe-2 flex-shrink-0"></sl-icon>`
-
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          modal: true,
-          'modal--open': this.open,
-          'modal--has-footer': this.hasSlotController.test('footer')
-        })}
-      >
-        <div part="overlay" class="modal-overlay" @click=${() => this.requestClose('overlay')} tabindex="-1"></div>
-
-        <div
-          part="panel"
-          class="modal-panel"
-          role="dialog"
-          aria-modal="true"
-          aria-hidden=${this.open ? 'false' : 'true'}
-          aria-label=${ifDefined(this.noHeader ? this.title : undefined)}
-          aria-labelledby=${ifDefined(!this.noHeader ? 'title' : undefined)}
-          tabindex="0"
-        >
-          ${!this.noHeader
-            ? html`
-                <h3 part="header" 
-                  class=${classMap({
-                    'modal-header' : true,
-                    // centered: this.centeredAlignVariant,
-                  })}
-                >
-                  <div 
-                    part="title" 
-                    class=${classMap({
-                      'modal-title d-flex align-items-center': true,
-                      // centered : this.centeredAlignVariant,
-                    })}
-                    id="title"
-                  >
-                      ${this.titleIcon ? withLabelIcon : null}
-                      ${this.title.length > 0 ? this.title : String.fromCharCode(65279)}
-                    
-                  </div>
-                  <sgds-button
-                    part="close-button"
-                    variant="icon"
-                    exportparts="base:close-button__base"
-                    class=${classMap({
-                      'modal-close': true,
-                      // 'centered': this.centeredAlignVariant,
-                    })}
-                    @click="${() => this.requestClose('close-button')}"
-                  ><sl-icon name="x-lg"></sl-icon></sgds-button>
-                </h3>
-              `
-            : ''}
-
-          <div part="body" class="modal-body">
-            <slot></slot>
-          </div>
-
-          <footer 
-            part="footer" 
-            class=${classMap({
-              'modal-footer': true,
-              // centered: this.centeredAlignVariant,
-            })}
-          >
-            <slot name="footer"></slot>
-          </footer>
-        </div>
-      </div>
-    `;
-  }
-}
-
-setDefaultAnimation('modal.show', {
-  keyframes: [
-    { opacity: 0, transform: 'scale(0.8)' },
-    { opacity: 1, transform: 'scale(1)' }
-  ],
-  options: { duration: 250, easing: 'ease' }
-});
-
-setDefaultAnimation('modal.hide', {
-  keyframes: [
-    { opacity: 1, transform: 'scale(1)' },
-    { opacity: 0, transform: 'scale(0.8)' }
-  ],
-  options: { duration: 250, easing: 'ease' }
-});
-
-setDefaultAnimation('modal.denyClose', {
-  keyframes: [{ transform: 'scale(1)' }, { transform: 'scale(1.02)' }, { transform: 'scale(1)' }],
-  options: { duration: 250 }
-});
-
-setDefaultAnimation('modal.overlay.show', {
-  keyframes: [{ opacity: 0 }, { opacity: 1 }],
-  options: { duration: 250 }
-});
-
-setDefaultAnimation('modal.overlay.hide', {
-  keyframes: [{ opacity: 1 }, { opacity: 0 }],
-  options: { duration: 250 }
-});
-
-export default SgdsModal;

package/src/QuantityToggle/index.ts

@@ -1 +0,0 @@
-export { SgdsQuantityToggle } from "./sgds-quantitytoggle";

package/src/QuantityToggle/sgds-quantitytoggle.scss

@@ -1,10 +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";
-@import "~@govtechsg/sgds/sass/buttons"; 
-

package/src/QuantityToggle/sgds-quantitytoggle.ts

@@ -1,130 +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 SgdsElement from "../utils/sgds-element";
-import { defaultValue } from "../utils/defaultvalue";
-import genId from "../utils/generateId";
-import { live } from 'lit/directives/live.js';
-import { watch } from "../utils/watch";
-import {SgdsButton} from "../Button";
-import {classMap} from 'lit/directives/class-map.js';
-import styles from "./sgds-quantitytoggle.scss";
-
-@customElement("sgds-quantitytoggle")
-export class SgdsQuantityToggle extends SgdsElement {
-  @query('input.form-control') input: HTMLInputElement;
-  @query('sgds-button.button-group_button-first') leftBtn: SgdsButton;
-  @query('sgds-button.button-group_button-last') lastBtn: SgdsButton;
-  static styles = styles;
-
-
-  @property({ reflect: true, type: String}) quantToggleId = genId("quantToggle", "toggle");
-  
-  @property({reflect: true}) name : string;
-   /** The input's minimum value. */
-  @property() min: number | string;
-   /** The input's maximum value. */
-  @property() max: number | string;
-
-  @property() size : 'sm' | 'lg' | "default" = "sm" ;
-
-  @property ({reflect: true}) count : number | string;
-
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  @property({ reflect: true }) quantityToggleClasses? : string;
- 
-  /**
-  * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
-  * implied, allowing any numeric value.
-  */
-  @property() step = 1 ;
-
-  /** 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 = '';
-
-  handleChange(event: string){
-    this.emit(event);
-    this.count = this.input.value;
-  }
-  onPlus(event:MouseEvent){
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
-    this.count = parseInt(this.input.value) + parseInt(this.input.step);
-  };
-  onMinus(event:MouseEvent){
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
-    if (this.count < this.step) {
-      this.count = 0;
-    }
-    else {
-      this.count = parseInt(this.input.value) - parseInt(this.input.step);
-    }
-    
-  };
-
-
-
-  @watch('count', { waitUntilFirstUpdate: true })
-
-  render() {
-    return html`
-    <div 
-      part="base"
-      class="${classMap(
-          {
-            "sgds" : true,
-            'disabled': this.disabled,
-            "input-group" : true,
-            [`${this.quantityToggleClasses}`]: this.quantityToggleClasses
-          })}"
-      variant="quantity-toggle"
-      id=${this.quantToggleId}
-      size=${this.size}
-    >
-      <sgds-button 
-        part="button" 
-        variant="primary" 
-        class="button-group_button-first"
-        size=${this.size}
-        @click=${this.onMinus}
-        ?disabled=${this.disabled}
-      >
-        <sl-icon name="dash-lg"></sl-icon>
-      </sgds-button>
-      <input 
-        type="number" 
-        class="form-control ${"form-control-" + this.size} text-center"
-        name=${ifDefined(this.name)}
-        step=${ifDefined(this.step as number)}
-        min=${ifDefined(this.min)}
-        max=${ifDefined(this.max)}
-        .value=${live(this.count as string)}
-        @change=${()=> this.handleChange('sgds-change')}
-        @input=${()=> this.handleChange('sgds-input')}
-        ?disabled=${this.disabled}
-      >
-      <sgds-button 
-        part="button" 
-        variant="primary" 
-        class="button-group_button-last"
-        size=${this.size}
-        @click=${this.onPlus}
-        ?disabled=${this.disabled}
-      >
-        <sl-icon name="plus-lg"></sl-icon>
-      </sgds-button>
-    </div>
-    `;
-  }
-}
-
-export default SgdsQuantityToggle;

package/src/Radio/index.ts

@@ -1,2 +0,0 @@
-export { SgdsRadio } from "./sgds-radio";
-export { SgdsRadioGroup } from "./sgds-radiogroup";

package/src/Radio/sgds-radio.scss

@@ -1,5 +0,0 @@
-@import "../utils/base.scss";
-@import "~@govtechsg/sgds/sass/forms/form-check";
-@import "~@govtechsg/sgds/sass/forms/labels";
-
-

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