@govtechsg/sgds-web-component 0.0.12 → 0.0.14

package/components/Mainnav/sgds-mainnav.d.ts

@@ -1,22 +1,37 @@
 import SgdsElement from "../../base/sgds-element";
 export type MainnavExpandSize = "sm" | "md" | "lg" | "xl" | "xxl" | "always" | "never";
 /**
- * @slot - Pass in SgdsMainnavItem elements here.
+ * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.
+ *
+ * @slot - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.
  * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.
+ * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here
+ * @slot non-collapsible - Elements in this slot will not be collapsed
+ *
+ * @cssproperty --mainnav-background-color - Navbar's background color.
+ * @cssproperty --mainnav-padding-x - left and right padding for browser width > 768px
+ * @cssproperty --mainnav-padding-y - top and bottom padding for browser width > 768px
+ * @cssproperty --mainnav-mobile-padding-x - left and right padding for browser width < 768px
+ * @cssproperty --mainnav-mobile-padding-y - top and bottom padding for browser width < 768px
+ * @cssproperty --mainnav-borderBottom-width - bottom border width
+ * @cssproperty --mainnav-borderBottom-color - borderBottom width color
  */
 export declare class SgdsMainnav extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
     constructor();
+    /** @internal */
     private myCollapse;
+    /** @internal */
     private bsCollapse;
-    private myOffcanvas;
-    private bsOffcanvas;
     private _onClickButton;
+    /** The href link for brand logo */
     brandHref: string;
-    collapseId: string;
+    private collapseId;
+    /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */
     expand: MainnavExpandSize;
-    mode: "offcanvas" | "default";
+    /** @internal */
     breakpointReached: boolean;
+    /** @internal */
     expanded: boolean;
     firstUpdated(): void;
     _handleSlotChange(e: Event): void;

package/components/Masthead/index.d.ts

@@ -1 +1 @@
-export * from "./sgds-masthead";
+export { SgdsMasthead } from "./sgds-masthead";

package/components/Masthead/sgds-masthead.d.ts

@@ -1,8 +1,25 @@
 import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary All .gov.sg digital services shall adopt The Official Government Banner for every page in the digital service and be placed at the top of the page.
+ *
+ * @cssproperty --masthead-font-family - Sets font family for masthead
+ * @cssproperty --masthead-text-color - Sets overall text color
+ * @cssproperty --masthead-link-color - Sets link color for `How to identify?` and `Trusted Site`
+ * @cssproperty --masthead-link-color-hover - Sets link hover color for `How to identify?` and `Trusted Site`
+ * @cssproperty --masthead-mobile-font-size - Sets the padding left and right for viewport width 1024px and below
+ * @cssproperty --masthead-mobile-padding-x - Sets the font size for viewport width 1024px and below
+ * @cssproperty --masthead-fluid-padding-x - Sets the container-fluid padding left and right for viewport width 1024px and above
+ * @cssproperty --masthead-crest-color - Sets the lion head crest color.
+ */
 export declare class SgdsMasthead extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /**
+     * Sets the masthead container width to 100% for all breakpoints
+     */
     fluid: boolean;
+    /** @internal */
     toggleVisibility: boolean;
+    /** @internal */
     private _toggleVisibility;
     render(): import("lit").TemplateResult<1>;
 }

package/components/Modal/index.d.ts

@@ -1 +1 @@
-export * from "./sgds-modal";
+export { SgdsModal } from "./sgds-modal";

package/components/Modal/sgds-modal.d.ts

@@ -1,16 +1,61 @@
 import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.
+ *
+ * @slot default - The content of the Modal's body.
+ * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.
+ *
+ * @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key
+ * @event sgds-show - Emitted when the modal opens
+ * @event sgds-hide - Emitted when the modal closes
+ * @event sgds-after-show - Emitted after modal opens and the animations has completed
+ * @event sgds-after-hide - Emitted after modal closes and the animations has completed
+ *
+ * @csspart base - The component's base wrapper
+ * @csspart overlay - The overlay that covers the screen behind the dialog
+ * @csspart panel - The modal's dialog panel
+ * @csspart header - The modal's header (h3 element) that wraps the title, titleIcon and close button
+ * @csspart title - The div element wrapping title and titleIcon
+ * @csspart body - The modal's body where the content lies
+ * @csspart footers - The modal's footer
+ *
+ * @cssproperty --modal-padding - The general modal padding of modal component. Applied to body, footer and header.
+ * @cssproperty --modal-panel-z-index - The z-index of modal panel
+ * @cssproperty --modal-panel-width - The width of modal panel.
+ * @cssproperty --modal-panel-height - The height of modal panel.
+ * @cssproperty --modal-panel-background-color - The background color of modal panel
+ * @cssproperty --modal-panel-border-radius - The border radius of modal panel
+ * @cssproperty --modal-header-bottom-border-line-width - The line width of header's bottom border
+ * @cssproperty --modal-overlay-background-color - The overlay's background color
+ */
 export declare class SgdsModal extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /**@internal */
     dialog: HTMLElement;
+    /**@internal */
     panel: HTMLElement;
+    /**@internal */
     overlay: HTMLElement;
+    /**@internal */
     private readonly hasSlotController;
+    /**@internal */
     private modal;
+    /**@internal */
     private originalTrigger;
+    /**Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. */
     open: boolean;
+    /**The modal's title as displayed in the header */
     title: string;
+    /**The modal's icon as displayed in the header. Pass in SVG format icons as string directly  */
     titleIcon: string;
+    /** Disables the header. This will also remove the default close button */
     noHeader: boolean;
+    /** Centers the modal vertically in page */
+    centered: boolean;
+    /** Centers the contents inside the modal */
+    centeredAlignVariant: boolean;
+    /** Removes the default animation when opening and closing of modal */
+    noAnimation: boolean;
     connectedCallback(): void;
     firstUpdated(): void;
     disconnectedCallback(): void;

package/components/QuantityToggle/index.d.ts

@@ -1 +1 @@
-export * from "./sgds-quantity-toggle";
+export { SgdsQuantityToggle } from "./sgds-quantity-toggle";

package/components/QuantityToggle/sgds-quantity-toggle.d.ts

@@ -1,28 +1,53 @@
-import { SgdsButton } from "../Button";
+import { ButtonVariant } from "../Button";
 import SgdsElement from "../../base/sgds-element";
-export declare class SgdsQuantityToggle extends SgdsElement {
-    input: HTMLInputElement;
-    leftBtn: SgdsButton;
-    lastBtn: SgdsButton;
+import { SgdsFormControl } from "../../utils/form";
+/**
+ * @summary The quantity toggle component is used to increase or decrease an incremental venue,  best used when the user needs to enter or adjust the quantity of a selected item.
+ *
+ * @csspart base - The base wrapper of the quantity toggle component.
+ * @csspart button - The plus and minus button of quantity toggle
+ *
+ * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event sgds-input - Emitted when the control receives input and its value changes.
+ *
+ */
+export declare class SgdsQuantityToggle extends SgdsElement implements SgdsFormControl {
+    /**@internal */
+    private input;
+    /**@internal */
+    private plusBtn;
+    /**@internal */
+    private minusBtn;
     static styles: import("lit").CSSResultGroup[];
-    quantToggleId: string;
+    /**@internal */
+    private readonly formSubmitController;
+    /** The name of the input */
     name: string;
     /** The input's minimum value. */
-    min: number | string;
+    min: number;
     /** The input's maximum value. */
-    max: number | string;
-    size: "sm" | "lg" | "default";
-    count: number;
+    max: number;
+    /**Controls the size of the quantity toggle */
+    size: "sm" | "lg";
+    /**The input's value. Set to 0 by default */
+    value: number;
+    /** Disables the entire quantity toggle  */
     disabled: boolean;
-    quantityToggleClasses?: string;
+    /** The quantity toggle's button variants */
+    buttonVariant: ButtonVariant;
     /**
-     * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
-     * implied, allowing any numeric value.
+     * Controls the incremental / decremental value of the input
      */
     step: number;
     /** 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: string;
+    defaultValue: number;
+    /** @internal The id forwarded to input element */
+    private inputId;
     handleChange(event: string): void;
+    /** Simulates a click on the plus button */
+    plus(): void;
+    /** Simulates a click on the minus button */
+    minus(): void;
     onPlus(event: MouseEvent): void;
     onMinus(event: MouseEvent): void;
     render(): import("lit").TemplateResult;

package/components/Radio/index.d.ts

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

package/components/Radio/sgds-radio-group.d.ts

@@ -1,41 +1,56 @@
 import SgdsElement from "../../base/sgds-element";
 import { FormSubmitController } from "../../utils/form";
+/**
+ * @summary RadioGroup group multiple radios so they function as a single form control.
+ *
+ * @slot default - The default slot where sgds-radio are placed.
+ *
+ * @event sgds-change - Emitted when the radio group's selected value changes.
+ */
 export declare class SgdsRadioGroup extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /**@internal */
     protected readonly formSubmitController: FormSubmitController;
+    /**@internal */
     defaultSlot: HTMLSlotElement;
+    /**@internal */
     input: HTMLInputElement;
-    private defaultValue;
+    /**@internal */
+    defaultValue: string;
+    /**@internal */
     private customErrorMessage;
-    /**
-     * The radio group label. Required for proper accessibility. If you need to display HTML, you can use the `label` slot
-     * instead.
-     */
-    label: string;
+    /** @internal This will be true when the control is in an invalid state. */
+    invalid: boolean;
     /** The selected value of the control. */
     value: string;
     /** The name assigned to the radio controls. */
     name: string;
     /** Ensures a child radio is checked before allowing the containing form to submit. */
     required: boolean;
-    /**
-     * This will be true when the control is in an invalid state.
-     */
-    invalid: boolean;
+    /**Feedback text for error state when validated */
     invalidFeedback: string;
+    /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
+    hasFeedback: boolean;
     handleValueChange(): void;
     connectedCallback(): void;
+    /** Gets and return the ValidityState object.  */
     get validity(): ValidityState;
     /** Checks for validity and shows the browser's validation message if the control is invalid. */
     reportValidity(): boolean;
-    private getAllRadios;
+    /**@internal */
+    private _radios;
     handleRadioClick(event: MouseEvent): void;
     handleKeyDown(event: KeyboardEvent): void;
     handleLabelClick(): void;
     handleSlotChange(): void;
-    handleInvalid(): void;
+    handleInvalid(e: Event): void;
     showNativeErrorMessage(): void;
     updateCheckedRadio(): void;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "sgds-radio-group": SgdsRadioGroup;
+    }
+}
 export default SgdsRadioGroup;

package/components/Radio/sgds-radio.d.ts

@@ -1,18 +1,27 @@
 import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary Radio allows the user to select one option from a set while seeing all available options.
+ *
+ * @slot default - The label of the radio button
+ *
+ * @event sgds-focus - Emitted when the control gains focus.
+ * @event sgds-blur - Emitted when the control loses focus.
+ */
 export declare class SgdsRadio extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /**
+     * Draws the radio in a checked state
+     */
     checked: boolean;
-    protected hasFocus: boolean;
     /** The radio's value attribute. */
     value: string;
-    /** For id/for pair of the HTML form control. */
-    radioId: string;
     /** Disables the radio. */
     disabled: boolean;
     /** Aligns the radios horizontally */
     isInline: boolean;
     /** For aria-label */
     ariaLabel: string;
+    private radioId;
     connectedCallback(): void;
     handleCheckedChange(): void;
     handleDisabledChange(): void;

package/components/Sidenav/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./sgds-sidenav";
-export * from "./sgds-sidenav-item";
-export * from "./sgds-sidenav-link";
+export { SgdsSidenav } from "./sgds-sidenav";
+export { SgdsSidenavItem } from "./sgds-sidenav-item";
+export { SgdsSidenavLink } from "./sgds-sidenav-link";

package/components/Sidenav/sgds-sidenav-item.d.ts

@@ -5,29 +5,50 @@ import SgdsElement from "../../base/sgds-element";
  *
  * @slot - default slot for SgdsSidenavLink element.
  * @slot title - title slot for the content of SgdsSidenavItem's button / anchor element.
+ * @slot icon - icon slot for the content of SgdsSidenavItem's button / anchor element.
+ *
+ * @cssproperty --sidenav-item-button-border-left-width - sidenav item left border width
+ * @cssproperty --sidenav-item-padding-x - sidenav item padding left and right
+ * @cssproperty --sidenav-item-padding-y - sidenav item padding top and bottom
+ * @cssproperty --sidenav-item-icon-title-gap - the flex gap between sidenav item icon and title
  */
 export declare class SgdsSidenavItem extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /** @internal */
     private myCollapse;
+    /** @internal */
     private bsCollapse;
-    /**  when true, toggles the sidenav-item to open on first load and
-     * set the active stylings.
+    /**
+     *  when true, toggles the sidenav-item to open on first load and set the active stylings.
      */
     active: boolean;
+    /**
+     *  When defined, converts SgdsSidenavItem from a button element to an Anchor element. In this case, only one level of navigation is allowed
+     */
     href: string;
-    collapseId: string;
-    buttonId: string;
+    /**
+     * Disables the SgdsSidenavItem
+     */
     disabled: boolean;
+    /**
+     * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own
+     */
+    private collapseId;
+    /**
+     * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own
+     */
+    private buttonId;
+    /** @internal */
     private index;
     private _onClick;
     private _onClickButton;
     private _onClickLink;
     /**
-     * closeItem - closes sidenav and inactivates it
+     * When invoked, closes the SgdsSidenavItem
      */
     closeItem(): void;
     /**
-     * openItem
+     * When invoked, opens the SgdsSidenavItem
      */
     openItem(): void;
     firstUpdated(): void;

package/components/Sidenav/sgds-sidenav-link.d.ts

@@ -1,6 +1,11 @@
 import LinkElement from "../../base/link-element";
 /**
- * @slot - default slot for label of anchor tag.
+ * @slot default - slot for label of anchor tag.
+ *
+ * @cssproperty --sidenav-link-font-size - sidenav link font size, default to `--sgds-body-font-size`
+ * @cssproperty --sidenav-link-padding-x - sidenav link padding left and right
+ * @cssproperty --sidenav-link-padding-y - sidenav link padding top and bottom
+ * @cssproperty --sidenav-link-disabled-color - sidenav link disabled color, default to `--sgds-gray-600`
  */
 export declare class SgdsSidenavLink extends LinkElement {
     static styles: import("lit").CSSResultGroup;

package/components/Sidenav/sgds-sidenav.d.ts

@@ -1,9 +1,16 @@
 import SgdsElement from "../../base/sgds-element";
 /**
- * @slot - default slot for SgdsSidenavItem element.
+ * @summary The side navigation is used to display a list of links to move between pages within a related category.
+ * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.
+ * Maximum two levels of navigations are allowed.
+ *
+ * @slot default - Default slot for SgdsSidenavItem element.
+ *
+ * @cssproperty --sidenav-theme-color - overall sidenav theme color
  */
 export declare class SgdsSidenav extends SgdsElement {
     static styles: import("lit").CSSResultGroup;
+    /** Allow sidenav items to stay open when another item is opened */
     alwaysOpen: boolean;
     render(): import("lit").TemplateResult<1>;
 }

package/components/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { SgdsSpinner, Type } from "./sgds-spinner";

package/components/Spinner/sgds-spinner.d.ts

@@ -0,0 +1,11 @@
+import SgdsElement from "../../base/sgds-element";
+export type Type = "border" | "grow";
+export type Color = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+export declare class SgdsSpinner extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    type: Type;
+    color: Color;
+    spinnerClasses?: string;
+    render(): import("lit").TemplateResult;
+}
+export default SgdsSpinner;

package/components/Stepper/sgds-stepper.d.ts

@@ -1,17 +1,41 @@
 import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary Steppers are used to inform users which step they are at in a form or a process
+ * @slot step-n - The slot for content in each step. "n" refers to numeral value starting from 1. e.g. step-1, step-2, step-3 etc.
+ *
+ * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.
+ * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.
+ * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.
+ * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.
+ * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived and its slot are rendered.
+ * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.
+ *
+ */
 export declare class SgdsStepper extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
-    steps: {
-        title: number;
-        stepHeader: string;
-    }[];
+    /** The header name for steps in chronological order
+     */
+    steps: string[];
+    /** The current state of active step. Defaults to 0 */
     activeStep: number;
-    connectedCallback(): void;
-    incrementStep(): void;
-    decrementStep(): void;
+    /**Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
+    defaultActiveStep: number;
+    /** Moves the active step forward one step */
+    nextStep(): void;
+    /** Moves the active step back one step */
+    previousStep(): void;
+    /** Changes the active step to the last step */
     lastStep(): void;
+    /** Changes active step to the first step */
     firstStep(): void;
+    /** Resets the Stepper to its initial active step state */
+    reset(): void;
+    /**@internal */
     _onStepperItemClick(index: number): void;
+    /**@internal */
+    _handleActiveStepChange(): void;
+    /**@internal */
+    _handleKeyDown(event: KeyboardEvent, index: number): void;
     render(): import("lit").TemplateResult<1>;
 }
 export default SgdsStepper;

package/components/Tab/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./sgds-tab";
-export * from "./sgds-tabpanel";
-export * from "./sgds-tabgroup";
+export { SgdsTab } from "./sgds-tab";
+export { SgdsTabPanel } from "./sgds-tabpanel";
+export { SgdsTabGroup } from "./sgds-tabgroup";

package/components/Table/sgds-table.d.ts

@@ -1,22 +1,73 @@
 import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary The use of a table is to organise a collections of data into readable rows
+ *
+ * @cssproperty --sgds-table-bg - Table's background color
+ * @cssproperty --sgds-table-accent-bg - Table's accent background color
+ * @cssproperty --sgds-table-striped-color - Text color for striped table
+ * @cssproperty --sgds-table-striped-bg - Background color for striped table
+ * @cssproperty --sgds-table-active-color - Active text color for hovered row
+ * @cssproperty --sgds-table-active-bg - Active background color for hovered row
+ * @cssproperty --sgds-table-hover-color - Hovered text color for hover table
+ * @cssproperty --sgds-table-hover-bg - Hovered background color for hover table
+ */
 export declare class SgdsTable extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    /**
+     * Adds zebra-striping using striped to table row within the <tbody>
+     */
     striped: boolean;
+    /**
+     * Add borders to all sides of table and cells
+     */
     bordered: boolean;
+    /**
+     * Remove all borders to table and cells
+     */
     borderless: boolean;
+    /**
+     * Add hoverable state on table rows
+     */
     hover: boolean;
-    size?: string;
-    variant?: string;
+    /**
+     * Add <code>.table-sm</code> to make table more compact
+     */
+    size: string;
+    /**
+     * Use contextual classes to add colors to table
+     */
+    variant: string;
+    /**
+     * Sorting on a column is enabled by adding the sort property. The sorting algorithm is based on javascript array.sort() method. In ascending order from bottom, alphabets come first, followed by numbers, and then symbols. Similarly, in descending order from bottom, symbols come first, followed by numbers, and then alphabets.
+     */
     sort: boolean;
+    /**
+     * When removableSort is present, the third click removes the sorting from the column.
+     */
     removableSort: boolean;
-    responsive?: "sm" | "md" | "lg" | "xl";
+    /**
+     * Use responsive="sm", responsive="md" , responsive="lg", or responsive="xl" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. Use reponsive="always" to let table be always responsive
+     */
+    responsive: "sm" | "md" | "lg" | "xl" | "always";
+    /**
+     * Populate header cells using Arrays
+     */
     tableHeaders: any[];
+    /**
+     * Populate data cells using Arrays
+     */
     tableData: any[];
+    /** @internal */
     sortColumn: number | null;
+    /** @internal */
     sortAsc: boolean;
+    /** @internal */
     activeColumn: number | null;
+    /** @internal */
     sortClickCount: number;
+    /** @internal */
     clickCount: number;
+    /** @internal */
     originalTableData: Array<string[]>;
     connectedCallback(): void;
     handleHeaderClick(columnIndex: number): void;

package/components/Textarea/index.d.ts

@@ -1 +1 @@
-export * from "./sgds-textarea";
+export { SgdsTextarea } from "./sgds-textarea";