@govtechsg/sgds-web-component 0.0.8 → 0.0.10

package/src/Textarea/sgds-textarea.ts

@@ -0,0 +1,201 @@
+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-textarea.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-textarea")
+export class SgdsTextArea extends SgdsElement {
+  static styles = styles;
+
+  @query('textarea.form-control') textarea: HTMLTextAreaElement;
+  @state() private hasFocus = false;
+
+  private readonly formSubmitController = new FormSubmitController(this);
+  private resizeObserver: ResizeObserver;
+  
+  
+  @property({ type: String, reflect: true }) label = "label";
+  @property({ type: String, reflect: true }) textareaId = genId("textarea","input");
+  @property({ type: String, reflect: true }) name;
+  @property({ type: String, reflect: true }) textareaClasses?;
+  @property({ type: String, reflect: true }) value = '';
+  @property({ type: String, reflect: true}) minlength;
+  @property({ type: String, reflect: true}) maxlength;
+  @property({ type: Boolean, reflect: true}) spellcheck = false;
+   /** The number of rows to display by default. */
+  @property({ type: Number }) rows = 4;
+  @property({ type: String, reflect: true }) placeholder = "Placeholder";
+  @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;
+  /** Controls how the textarea can be resized. */
+  @property() resize: 'none' | 'vertical' | 'auto' = 'vertical';
+  /** The textarea's inputmode attribute. */
+  @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+  /* The textarea's autocorrect attribute. */
+  @property() autocorrect: string;
+  /** 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 = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
+
+    this.updateComplete.then(() => {
+      this.setTextareaHeight();
+      this.resizeObserver.observe(this.textarea);
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this.textarea);
+  }
+
+  /** Sets focus on the textarea. */
+  focus(options?: FocusOptions) {
+    this.textarea.focus(options);
+  }
+
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.textarea.reportValidity();
+  }
+
+  handleInvalid() {
+    this.invalid = true;
+  }
+
+  handleChange(event: string){
+    this.value = this.textarea.value;
+    this.emit(event);
+  }
+
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit('sgds-focus');
+  }
+
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit('sgds-blur');
+  }
+
+   /** Selects all the text in the textarea. */
+   select() {
+    this.textarea.select();
+  }
+
+  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('rows', { waitUntilFirstUpdate: true })
+  handleRowsChange() {
+    this.setTextareaHeight();
+  }
+
+  setTextareaHeight() {
+    if (this.resize === 'auto') {
+      this.textarea.style.height = 'auto';
+      this.textarea.style.height = `${this.textarea.scrollHeight}px`;
+    } else {
+      (this.textarea.style.height as string | undefined) = undefined;
+    }
+  }
+
+  @watch('disabled', { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    this.textarea.disabled = this.disabled;
+    this.invalid = !this.textarea.checkValidity();
+  }
+
+  @watch('value', { waitUntilFirstUpdate: true })
+  handleValueChange() {
+    this.invalid = !this.textarea.checkValidity();
+    this.valid = this.textarea.checkValidity()
+    this.updateComplete.then(() => this.setTextareaHeight());
+  }
+
+  render() {
+
+    // if maxlength is defined
+    const wordCount = html`
+    <div class="form-text">${this.value.length}/${this.maxlength}</div>
+    `
+
+    return html`
+
+        <div class="text-area-label-wrapper d-flex justify-content-between">
+          <label for=${ifDefined(this.textareaId)} class="form-label">${this.label}</label>
+          ${parseInt(this.maxlength) > 0 ? wordCount : undefined}
+        </div>
+        
+        <textarea 
+          class="${classMap(
+          { 
+            'form-control': true,
+            'is-invalid' : this.invalid,
+            'is-valid' : this.valid,
+            'textarea-resize-none': this.resize === 'none',
+            'textarea-resize-vertical': this.resize === 'vertical',
+            'textarea-resize-auto': this.resize === 'auto',
+            [`${this.textareaClasses}`]: this.textareaClasses,
+          })}"
+          id=${ifDefined(this.textareaId)}
+          name=${ifDefined(this.name)}
+          rows=${ifDefined(this.rows)}
+          placeholder=${ifDefined(this.placeholder)}
+          minlength=${ifDefined(this.minlength)}
+          maxlength=${ifDefined(this.maxlength)}
+          .value=${live(this.value)}
+          aria-invalid=${this.invalid ? 'true' : 'false'}
+          spellcheck=${ifDefined(this.spellcheck)}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          ?autofocus=${this.autofocus}
+          autocorrect=${ifDefined(this.autocorrect)}
+          inputmode=${ifDefined(this.inputmode)}
+          @keyup=${this.handleValueChange}
+          @input=${()=> this.handleChange('sgds-input')}
+          @change=${()=> this.handleChange('sgds-change')}
+          @invalid=${this.handleInvalid}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        >
+        </textarea>
+        
+        <div id="${this.textareaId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>
+
+    `;
+
+  }
+}
+
+export default SgdsTextArea;
+

package/src/index.ts

@@ -0,0 +1,16 @@
+import "./Sidenav";
+import "./Radio";
+import "./Masthead";
+import "./Button";
+import "./Footer";
+import "./Mainnav";
+import "./Input";
+import "./Checkbox";
+import "./Dropdown";
+import "./Input";
+import "./Textarea";
+import "./Modal";
+import './QuantityToggle';
+import "./Textarea";
+import "./Tab";
+import "./Card";

package/src/utils/animate.ts

@@ -0,0 +1,69 @@
+//
+// Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
+//
+export function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions) {
+  return new Promise(resolve => {
+    if (options?.duration === Infinity) {
+      throw new Error('Promise-based animations must be finite.');
+    }
+
+    const animation = el.animate(keyframes, {
+      ...options,
+      duration: prefersReducedMotion() ? 0 : options!.duration
+    });
+
+    animation.addEventListener('cancel', resolve, { once: true });
+    animation.addEventListener('finish', resolve, { once: true });
+  });
+}
+
+//
+// Parses a CSS duration and returns the number of milliseconds.
+//
+export function parseDuration(delay: number | string) {
+  delay = delay.toString().toLowerCase();
+
+  if (delay.indexOf('ms') > -1) {
+    return parseFloat(delay);
+  }
+
+  if (delay.indexOf('s') > -1) {
+    return parseFloat(delay) * 1000;
+  }
+
+  return parseFloat(delay);
+}
+
+//
+// Tells if the user has enabled the "reduced motion" setting in their browser or OS.
+//
+export function prefersReducedMotion() {
+  const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+  return query.matches;
+}
+
+//
+// Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
+//
+export function stopAnimations(el: HTMLElement) {
+  return Promise.all(
+    el.getAnimations().map(animation => {
+      return new Promise(resolve => {
+        const handleAnimationEvent = requestAnimationFrame(resolve);
+
+        animation.addEventListener('cancel', () => handleAnimationEvent, { once: true });
+        animation.addEventListener('finish', () => handleAnimationEvent, { once: true });
+        animation.cancel();
+      });
+    })
+  );
+}
+
+// We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
+// element's scrollHeight before the animation.
+export function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number) {
+  return keyframes.map(keyframe => ({
+    ...keyframe,
+    height: keyframe.height === 'auto' ? `${calculatedHeight}px` : keyframe.height
+  }));
+}

package/src/utils/animation-registry.ts

@@ -0,0 +1,71 @@
+export interface ElementAnimation {
+  keyframes: Keyframe[];
+  rtlKeyframes?: Keyframe[];
+  options?: KeyframeAnimationOptions;
+}
+
+export interface ElementAnimationMap {
+  [animationName: string]: ElementAnimation;
+}
+
+export interface GetAnimationOptions {
+  /**
+   * The component's directionality. When set to "rtl", `rtlKeyframes` will be preferred over `keyframes` where
+   * available using getAnimation().
+   */
+  dir: string;
+}
+
+const defaultAnimationRegistry = new Map<string, ElementAnimation>();
+const customAnimationRegistry = new WeakMap<Element, ElementAnimationMap>();
+
+function ensureAnimation(animation: ElementAnimation | null) {
+  return animation ?? { keyframes: [], options: { duration: 0 } };
+}
+
+//
+// Given an ElementAnimation, this function returns a new ElementAnimation where the keyframes property reflects either
+// keyframes or rtlKeyframes depending on the specified directionality.
+//
+function getLogicalAnimation(animation: ElementAnimation) {
+  return animation;
+}
+
+//
+// Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`
+// for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.
+//
+export function setDefaultAnimation(animationName: string, animation: ElementAnimation | null) {
+  defaultAnimationRegistry.set(animationName, ensureAnimation(animation));
+}
+
+//
+// Sets a custom animation for the specified element.
+//
+export function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null) {
+  customAnimationRegistry.set(el, { ...customAnimationRegistry.get(el), [animationName]: ensureAnimation(animation) });
+}
+
+//
+// Gets an element's animation. Falls back to the default if no animation is found.
+//
+export function getAnimation(el: Element, animationName: string) {
+  const customAnimation = customAnimationRegistry.get(el);
+
+  // Check for a custom animation
+  if (customAnimation?.[animationName]) {
+    return getLogicalAnimation(customAnimation[animationName]);
+  }
+
+  // Check for a default animation
+  const defaultAnimation = defaultAnimationRegistry.get(animationName);
+  if (defaultAnimation) {
+    return getLogicalAnimation(defaultAnimation);
+  }
+
+  // Fall back to an empty animation
+  return {
+    keyframes: [],
+    options: { duration: 0 }
+  };
+}

package/src/utils/base.scss

@@ -0,0 +1,14 @@
+
+// @charset "utf-8";
+
+@import "~@govtechsg/sgds/sass/functions";
+@import "~@govtechsg/sgds/sass/variables";
+@import "~@govtechsg/sgds/sass/mixins";
+
+@import "~@govtechsg/sgds/sass/utilities";
+
+@import "~@govtechsg/sgds/sass/root";
+@import "~@govtechsg/sgds/sass/reboot";
+@import "~@govtechsg/sgds/sass/type";
+@import "~@govtechsg/sgds/sass/helpers";
+@import "~@govtechsg/sgds/sass/utilities/api";

package/src/utils/breakpoints.ts

@@ -0,0 +1,5 @@
+export const SM_BREAKPOINT = 576;
+export const MD_BREAKPOINT = 768;
+export const LG_BREAKPOINT = 992;
+export const XL_BREAKPOINT = 1200;
+export const XXL_BREAKPOINT = 1400;

package/src/utils/card-element.ts

@@ -0,0 +1,42 @@
+import { property, state } from "lit/decorators.js";
+import genId from "./generateId";
+import SgdsElement from "./sgds-element";
+
+export type Variant =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "danger"
+  | "warning"
+  | "info"
+  | "dark"
+  | "light"
+  | string;
+
+export type Color =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "danger"
+  | "warning"
+  | "info"
+  | "dark"
+  | "light"
+  | "white"
+  | "muted";
+
+export class CardElement extends SgdsElement {
+  @property({ type: String })
+
+  /** The border's variant. */
+  @property() borderColor?: Variant;
+
+  /** The bg's variant. */
+  @property() bgColor?: Variant;
+
+  /** The text's variant. */
+  @property() textColor?: Color;
+
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+}