@govtechsg/sgds-web-component 0.0.8 → 0.0.10

package/src/Modal/sgds-modal.ts

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

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

package/src/QuantityToggle/sgds-quantitytoggle.scss

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

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

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

package/src/Radio/sgds-radio.scss

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

package/src/Radio/sgds-radio.ts

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

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