@govtechsg/sgds-web-component 0.0.13 → 1.0.0-rc.0

package/base/card-element.d.ts

@@ -3,10 +3,10 @@ export type CardBorderVariant = "primary" | "secondary" | "success" | "danger" |
 export type CardTextVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light" | "white" | "muted";
 export declare class CardElement extends SgdsElement {
     static styles: import("lit").CSSResultGroup;
-    borderColor?: CardBorderVariant;
+    /** The border's variant. */
+    borderColor: CardBorderVariant;
     /** The bg's variant. */
-    bgColor?: CardBorderVariant;
+    bgColor: CardBorderVariant;
     /** The text's variant. */
-    textColor?: CardTextVariant;
-    disabled: boolean;
+    textColor: CardTextVariant;
 }

package/base/dropdown-element.d.ts

@@ -26,8 +26,8 @@ export declare class DropdownElement extends SgdsElement {
     drop: DropDirection;
     /** Additional configuration to pass to Popper.js. See https://popper.js.org/ for config opts */
     popperOpts: {};
-    /** Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */
-    togglerId: string;
+    /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */
+    protected togglerId: string;
     /** Sets the text content of Dropdown button */
     togglerText: string;
     /** Sets color of Dropdown button */

package/components/ActionCard/sgds-action-card.d.ts

@@ -1,20 +1,48 @@
 import { Ref } from "lit/directives/ref.js";
 import { CardElement } from "../../base/card-element";
-export type CardVariant = "card-action" | "card-action-quantity-toggle";
+import { SgdsCheckbox } from "../Checkbox";
+import { SgdsRadio } from "../Radio";
 export type TypeVariant = "checkbox" | "radio";
+/**
+ * @summary Action Card are cards with built in checkbox or radio components. The ref of input is extended to the Card's body.
+ * @slot icon - Icon content in the card-subtitile
+ * @slot card-subtitle - The subtitle of the card
+ * @slot card-title - The title of the card
+ * @slot card-text - The paragrapher text of the card
+ *
+ * @event sgds-change - Emitted when the checked state of card's checkbox changes or when the selected card's radio has changed
+ *
+ * @csspart base - The action card base wrapper
+ * @csspart body - The action card body
+ * @csspart subtitle - The action card subtitle
+ * @csspart title - The action card title
+ * @csspart text - The action card text
+ *
+ */
 export declare class SgdsActionCard extends CardElement {
     static styles: import("lit").CSSResultGroup[];
     /** @internal */
-    inputRef: Ref<HTMLInputElement>;
-    type?: TypeVariant;
-    /** Use on actionable cards like SelectableCard and Quantity Toggle Card' */
-    variant: CardVariant;
-    /** The card's subtitle iconName. */
-    iconName?: string;
-    /** The input's id. */
-    inputId?: string;
+    inputRef: Ref<SgdsCheckbox | SgdsRadio>;
+    /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */
+    name: string;
+    /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
+    value: string;
+    /** Disables the input (so the user can't check / uncheck it). */
+    disabled: boolean;
+    /** Draws the input in a checked state. */
+    checked: boolean;
+    /** The type of input of the action card */
+    type: TypeVariant;
+    /** Controls the active styling of the action card */
     active: boolean;
-    onInputChange(): void;
+    /** Simulates a click on the input control*/
+    click(): void;
+    /** @internal Declare the click event listener*/
+    handleInputChange(): Promise<void>;
+    /** @internal The input's id. */
+    private inputId;
+    handleRadioCheckedChange(): Promise<void>;
+    handleDisabledChange(): Promise<void>;
     handleKeyDown(event: KeyboardEvent): void;
     render(): import("lit").TemplateResult;
 }

package/components/Card/index.d.ts

@@ -0,0 +1 @@
+export * from "./sgds-card";

package/components/Card/sgds-card.d.ts

@@ -0,0 +1,24 @@
+import { CardElement } from "../../base/card-element";
+/**
+ * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
+ * @slot card-title - The title of the card
+ * @slot card-text - The paragrapher text of the card
+ * @slot card-image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
+ * @slot card-link - Accepts an anchor element. Only a single element is allowed to be passed in.
+ *
+ *
+ * @csspart base - The card base wrapper
+ * @csspart body - The card body
+ * @csspart title - The card title
+ * @csspart text - The card text
+ *
+ */
+export declare class SgdsCard extends CardElement {
+    static styles: import("lit").CSSResultGroup;
+    /** Extends the link passed in slot[name="link"] to the entire card */
+    stretchedLink: boolean;
+    handleLinkSlotChange(e: Event): void;
+    handleImgSlotChange(e: Event): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsCard;

package/components/Checkbox/sgds-checkbox.d.ts

@@ -5,7 +5,7 @@ import { SgdsFormControl } from "../../utils/form";
  *
  * @slot default - The label of checkbox.
  *
- * @event sgds-change - Emitted when the radio group's selected value changes.
+ * @event sgds-change - Emitted when the checked state changes.
  */
 export declare class SgdsCheckbox extends SgdsElement implements SgdsFormControl {
     static styles: import("lit").CSSResultGroup[];
@@ -15,8 +15,6 @@ export declare class SgdsCheckbox extends SgdsElement implements SgdsFormControl
     private readonly formSubmitController;
     /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */
     name: string;
-    /** For Id/For pair of the HTML form control and label. */
-    checkboxId: string;
     /** For aria-label when there is no appropriate text label visible */
     ariaLabel: string;
     /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
@@ -37,6 +35,8 @@ export declare class SgdsCheckbox extends SgdsElement implements SgdsFormControl
     valid: boolean;
     /** @internal */
     invalid: boolean;
+    /** @internal For Id/For pair of the HTML form control and label. */
+    private inputId;
     /** Simulates a click on the checkbox. */
     click(): void;
     /** Sets focus on the checkbox. */

package/components/FileUpload/index.d.ts

@@ -1 +1 @@
-export { SgdsFileUpload } from "./sgds-fileupload";
+export { SgdsFileUpload } from "./sgds-file-upload";

package/components/FileUpload/sgds-file-upload.d.ts

@@ -0,0 +1,44 @@
+import SgdsElement from "../../base/sgds-element";
+export type FileUploadButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
+/**
+ * @summary Allows users to upload files of various sizes and formats
+ * @slot default - Label for file upload button
+ *
+ * @event sgds-files-selected - Emitted when files are selected for uploading
+ *
+ * @cssproperty --fileupload-file-icon-fill - Left icon fill color
+ * @cssproperty --fileupload-remove-icon-fill - Remove icon fill color
+ * @cssproperty --fileupload-remove-icon-hover-fill - Remove icon mouse over fill color
+ *
+ */
+export declare class SgdsFileUpload extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The button's variant. */
+    variant: FileUploadButtonVariant;
+    disabled: boolean;
+    /** Allows multiple files to be listed for uploading */
+    multiple: boolean;
+    /** Specify the acceptable file type  */
+    accept: string;
+    /** Specifies a large or small button */
+    size: "sm" | "lg";
+    /** Customize the check icon with SVG */
+    checkedIcon: string;
+    /** Customize the cancel icon with SVG */
+    cancelIcon: string;
+    /** @internal */
+    private files;
+    /** @internal */
+    private selectedFiles;
+    setFileList(files: FileList): void;
+    /** @internal */
+    private inputRef;
+    /** @internal */
+    private handleClick;
+    /** @internal */
+    private handleInputChange;
+    /** @internal */
+    removeFileHandler(index: number): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsFileUpload;

package/components/Input/sgds-input.d.ts

@@ -21,8 +21,6 @@ export declare class SgdsInput extends SgdsElement implements SgdsFormControl {
     label: string;
     /** The input's hint text below the label */
     hintText: string;
-    /**The input's id. This value gets forwarded into the HTMLInputElement of the component. Defaults to a unique value */
-    inputId: string;
     /**The input's name attribute */
     name: string;
     /**Forwards classes to the native HTMLInputElement of the component. Can be used to insert any classes from bootstrap such as mt-2 */
@@ -57,6 +55,8 @@ export declare class SgdsInput extends SgdsElement implements SgdsFormControl {
     invalid: boolean;
     /**@internal */
     valid: boolean;
+    /**@internal */
+    private inputId;
     /** Sets focus on the input. */
     focus(options?: FocusOptions): void;
     /** Sets blur on the input. */

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

@@ -26,8 +26,7 @@ export declare class SgdsMainnav extends SgdsElement {
     private _onClickButton;
     /** The href link for brand logo */
     brandHref: string;
-    /** Forwards to id attribute of div.collapse and aria-controls attribute of toggler button in SgdsMainnav. By default, SgdsMainnav auto-generates a unique id. Override the default id by specifiying your own */
-    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;
     /** @internal */

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/sgds-radio-group.d.ts

@@ -1,6 +1,5 @@
 import SgdsElement from "../../base/sgds-element";
 import { FormSubmitController } from "../../utils/form";
-import { SgdsFormControl } from "../../utils/form";
 /**
  * @summary RadioGroup group multiple radios so they function as a single form control.
  *
@@ -8,7 +7,7 @@ import { SgdsFormControl } from "../../utils/form";
  *
  * @event sgds-change - Emitted when the radio group's selected value changes.
  */
-export declare class SgdsRadioGroup extends SgdsElement implements SgdsFormControl {
+export declare class SgdsRadioGroup extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
     /**@internal */
     protected readonly formSubmitController: FormSubmitController;
@@ -38,7 +37,8 @@ export declare class SgdsRadioGroup extends SgdsElement implements SgdsFormContr
     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;

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

@@ -9,18 +9,19 @@ import SgdsElement from "../../base/sgds-element";
  */
 export declare class SgdsRadio extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
-    /**@internal */
+    /**
+     * Draws the radio in a checked state
+     */
     checked: boolean;
     /** The radio's value attribute. */
     value: string;
-    /** For id/for pair of the HTML form control and label. */
-    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/sgds-sidenav-item.d.ts

@@ -23,21 +23,21 @@ export declare class SgdsSidenavItem extends SgdsElement {
      */
     active: boolean;
     /**
-     *  When defined, converts SgdsSidenavItem from a button element to an Anchor element
+     *  When defined, converts SgdsSidenavItem from a button element to an Anchor element. In this case, only one level of navigation is allowed
      */
     href: string;
     /**
-     * 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
+     * Disables the SgdsSidenavItem
      */
-    collapseId: string;
+    disabled: boolean;
     /**
-     * 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
+     * @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
      */
-    buttonId: string;
+    private collapseId;
     /**
-     * Disables the SgdsSidenavItem
+     * @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
      */
-    disabled: boolean;
+    private buttonId;
     /** @internal */
     private index;
     private _onClick;

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

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

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

@@ -1,7 +1,10 @@
 import SgdsElement from "../../base/sgds-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.
- * @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
  */

package/components/Textarea/sgds-textarea.d.ts

@@ -18,8 +18,6 @@ export declare class SgdsTextarea extends SgdsElement implements SgdsFormControl
     private resizeObserver;
     /**The textarea's label */
     label: string;
-    /**The textarea's unique id */
-    textareaId: string;
     /**The textarea's name attribute */
     name: string;
     /**Forwarded to the HTML native textarea element. Can be used to insert any bootstrap classes such as mt-2 */
@@ -60,6 +58,8 @@ export declare class SgdsTextarea extends SgdsElement implements SgdsFormControl
     invalid: boolean;
     /**@internal */
     valid: boolean;
+    /** @internal The textarea's unique id */
+    private textareaId;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /** Sets focus on the textarea. */

package/index.d.ts

@@ -22,3 +22,4 @@ export * from "./components/FileUpload";
 export * from "./components/Accordion";
 export * from "./components/Tooltip";
 export * from "./components/Spinner";
+export * from "./components/Card";