@govtechsg/sgds-web-component 0.0.8 → 0.0.11

package/utils/animate.d.ts

@@ -0,0 +1,10 @@
+export declare function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
+export declare function parseDuration(delay: number | string): number;
+export declare function prefersReducedMotion(): boolean;
+export declare function stopAnimations(el: HTMLElement): Promise<unknown[]>;
+export declare function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number): {
+    height: string | number;
+    composite?: CompositeOperationOrAuto;
+    easing?: string;
+    offset?: number;
+}[];

package/utils/animation-registry.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+export declare function setDefaultAnimation(animationName: string, animation: ElementAnimation | null): void;
+export declare function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null): void;
+export declare function getAnimation(el: Element, animationName: string): ElementAnimation;

package/utils/card-element.d.ts

@@ -0,0 +1,11 @@
+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 declare class CardElement extends SgdsElement {
+    borderColor?: Variant;
+    /** The bg's variant. */
+    bgColor?: Variant;
+    /** The text's variant. */
+    textColor?: Color;
+    disabled: boolean;
+}

package/utils/defaultvalue.d.ts

@@ -0,0 +1,2 @@
+import type { ReactiveElement } from 'lit';
+export declare const defaultValue: (propertyName?: string) => (proto: ReactiveElement, key: string) => void;

package/utils/dropdown-element.d.ts

@@ -0,0 +1,37 @@
+import { Dropdown } from "bootstrap";
+import * as Popper from "@popperjs/core";
+import type { StrictModifiers } from "@popperjs/core";
+import { Ref } from "lit/directives/ref.js";
+import { SgdsDropdownItem } from "../Dropdown/sgds-dropdown-item";
+import SgdsElement from "./sgds-element";
+export type DropdownButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+export type DropDirection = "left" | "right" | "up" | "down";
+export declare class DropdownElement extends SgdsElement {
+    myDropdown: Ref<HTMLElement>;
+    bsDropdown: Dropdown;
+    noFlip: boolean;
+    menuAlignRight: boolean;
+    drop: DropDirection;
+    popperOpts: {};
+    togglerId: string;
+    togglerText: string;
+    variant: DropdownButtonVariant;
+    menuIsOpen: boolean;
+    close: "outside" | "default" | "inside";
+    disabled: boolean;
+    nextDropdownItemNo: number;
+    prevDropdownItemNo: number;
+    dropdownConfig: Partial<Popper.Options>;
+    modifierOpt: StrictModifiers[];
+    firstUpdated(): void;
+    showMenu(): void;
+    hideMenu(): void;
+    _onClickButton(): void;
+    _resetMenu(): void;
+    _getMenuItems(): SgdsDropdownItem[];
+    _getActiveMenuItems(): SgdsDropdownItem[];
+    _setMenuItem(currentItemIdx: number, isArrowDown?: boolean): any;
+    _handleSelectSlot(e: KeyboardEvent | MouseEvent): void;
+    _handleKeyboardEvent(e: KeyboardEvent): any;
+    _handleClickOutOfElement(e: MouseEvent, self: DropdownElement): void;
+}

package/utils/event.d.ts

@@ -0,0 +1,2 @@
+/** Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements. */
+export declare function waitForEvent(el: HTMLElement, eventName: string): Promise<void>;

package/utils/form.d.ts

@@ -0,0 +1,38 @@
+import type SgdsButton from '../Button/sgds-button';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface FormSubmitControllerOptions {
+    /** A function that returns the form containing the form control. */
+    form: (input: unknown) => HTMLFormElement | null;
+    /** A function that returns the form control's name, which will be submitted with the form data. */
+    name: (input: unknown) => string;
+    /** A function that returns the form control's current value. */
+    value: (input: unknown) => unknown | unknown[];
+    /** A function that returns the form control's default value. */
+    defaultValue: (input: unknown) => unknown | unknown[];
+    /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */
+    disabled: (input: unknown) => boolean;
+    /**
+     * A function that maps to the form control's reportValidity() function. When the control is invalid, this will
+     * prevent submission and trigger the browser's constraint violation warning.
+     */
+    reportValidity: (input: unknown) => boolean;
+    /** A function that sets the form control's value */
+    setValue: (input: unknown, value: unknown) => void;
+}
+export declare class FormSubmitController implements ReactiveController {
+    host?: ReactiveControllerHost & Element;
+    form?: HTMLFormElement | null;
+    options: FormSubmitControllerOptions;
+    constructor(host: ReactiveControllerHost & Element, options?: Partial<FormSubmitControllerOptions>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    handleFormData(event: FormDataEvent): void;
+    handleFormSubmit(event: Event): void;
+    handleFormReset(): void;
+    reportFormValidity(): boolean;
+    doAction(type: 'submit' | 'reset', invoker?: HTMLInputElement | SgdsButton): void;
+    /** Resets the form, restoring all the control to their default value */
+    reset(invoker?: HTMLInputElement | SgdsButton): void;
+    /** Submits the form, triggering validation and form data injection. */
+    submit(invoker?: HTMLInputElement | SgdsButton): void;
+}

package/utils/link-element.d.ts

@@ -0,0 +1,7 @@
+import SgdsElement from "../utils/sgds-element";
+export default class LinkElement extends SgdsElement {
+    active: boolean;
+    href: string;
+    disabled: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

package/utils/mergeDeep.d.ts

@@ -0,0 +1,2 @@
+declare const mergeDeep: (target: any, source: any) => any;
+export default mergeDeep;

package/utils/modal.d.ts

@@ -0,0 +1,12 @@
+export default class Modal {
+    element: HTMLElement;
+    tabDirection: 'forward' | 'backward';
+    constructor(element: HTMLElement);
+    activate(): void;
+    deactivate(): void;
+    isActive(): boolean;
+    checkFocus(): void;
+    handleFocusIn(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleKeyUp(): void;
+}

package/utils/object.d.ts

@@ -0,0 +1,2 @@
+export declare const assign: (target: any, ...args: any[]) => any;
+export declare const keys: (obj: any) => string[];

package/utils/offset.d.ts

@@ -0,0 +1,4 @@
+export declare function getOffset(element: HTMLElement, parent: HTMLElement): {
+    top: number;
+    left: number;
+};

package/utils/scroll.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
+ * without premature unlocking.
+ */
+export declare function lockBodyScrolling(lockingEl: HTMLElement): void;
+/**
+ * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
+ */
+export declare function unlockBodyScrolling(lockingEl: HTMLElement): void;
+/**
+ * Scrolls an element into view of its container. If the element is already in view, nothing will happen.
+ */
+export declare function scrollIntoView(element: HTMLElement, container: HTMLElement, direction?: 'horizontal' | 'vertical' | 'both', behavior?: 'smooth' | 'auto'): void;

package/utils/slot.d.ts

@@ -0,0 +1,22 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare class HasSlotController implements ReactiveController {
+    host: ReactiveControllerHost & Element;
+    slotNames: string[];
+    constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]);
+    private hasDefaultSlot;
+    private hasNamedSlot;
+    test(slotName: string): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    handleSlotChange(event: Event): void;
+}
+/**
+ * Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated
+ * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.
+ */
+export declare function getInnerHTML(slot: HTMLSlotElement): string;
+/**
+ * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+ * string. This is useful because we can't use slot.textContent as an alternative.
+ */
+export declare function getTextContent(slot: HTMLSlotElement | undefined | null): string;

package/utils/tabbable.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
+ * element because it short-circuits after finding the first and last ones.
+ */
+export declare function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
+    start: HTMLElement;
+    end: HTMLElement;
+};

package/utils/watch.d.ts

@@ -0,0 +1,14 @@
+import type { LitElement } from "lit";
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type NonUndefined<A> = A extends undefined ? never : A;
+type UpdateHandlerFunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
+}[keyof T];
+interface WatchOptions {
+    /**
+     * If true, will only start watching after the initial update/render
+     */
+    waitUntilFirstUpdate?: boolean;
+}
+export declare function watch(propName: string, options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => void;
+export {};