@govtechsg/sgds-web-component 0.0.10 → 0.0.12

package/{lib → components}/Sidenav/sgds-sidenav-item.d.ts

@@ -1,28 +1,36 @@
-import SgdsElement from "../utils/sgds-element";
-export declare class SgdsSidenavItem extends SgdsElement {
-    static styles: import("lit").CSSResultGroup;
-    private myCollapse;
-    private bsCollapse;
-    /**  when true, toggles the sidenav-item to open on first load and
-     * set the active stylings.
-     */
-    active: boolean;
-    href: string;
-    collapseId: string;
-    buttonId: string;
-    disabled: boolean;
-    private index;
-    private _onClick;
-    private _onClickButton;
-    private _onClickLink;
-    /**
-     * closeItem - closes sidenav and inactivates it
-     */
-    closeItem(): void;
-    /**
-     * openItem
-     */
-    openItem(): void;
-    firstUpdated(): void;
-    render(): import("lit").TemplateResult<1>;
-}
+import SgdsElement from "../../base/sgds-element";
+/**
+ *
+ * @event sgds-toggle - Emitted when the dropdown is clicked.
+ *
+ * @slot - default slot for SgdsSidenavLink element.
+ * @slot title - title slot for the content of SgdsSidenavItem's button / anchor element.
+ */
+export declare class SgdsSidenavItem extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    private myCollapse;
+    private bsCollapse;
+    /**  when true, toggles the sidenav-item to open on first load and
+     * set the active stylings.
+     */
+    active: boolean;
+    href: string;
+    collapseId: string;
+    buttonId: string;
+    disabled: boolean;
+    private index;
+    private _onClick;
+    private _onClickButton;
+    private _onClickLink;
+    /**
+     * closeItem - closes sidenav and inactivates it
+     */
+    closeItem(): void;
+    /**
+     * openItem
+     */
+    openItem(): void;
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsSidenavItem;

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

@@ -0,0 +1,8 @@
+import LinkElement from "../../base/link-element";
+/**
+ * @slot - default slot for label of anchor tag.
+ */
+export declare class SgdsSidenavLink extends LinkElement {
+    static styles: import("lit").CSSResultGroup;
+}
+export default SgdsSidenavLink;

package/{lib → components}/Sidenav/sgds-sidenav.d.ts

@@ -1,6 +1,10 @@
-import SgdsElement from "../utils/sgds-element";
-export declare class SgdsSidenav extends SgdsElement {
-    static styles: import("lit").CSSResultGroup;
-    alwaysOpen: boolean;
-    render(): import("lit").TemplateResult<1>;
-}
+import SgdsElement from "../../base/sgds-element";
+/**
+ * @slot - default slot for SgdsSidenavItem element.
+ */
+export declare class SgdsSidenav extends SgdsElement {
+    static styles: import("lit").CSSResultGroup;
+    alwaysOpen: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsSidenav;

package/components/Stepper/index.d.ts

@@ -0,0 +1 @@
+export { SgdsStepper } from "./sgds-stepper";

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

@@ -0,0 +1,17 @@
+import SgdsElement from "../../base/sgds-element";
+export declare class SgdsStepper extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    steps: {
+        title: number;
+        stepHeader: string;
+    }[];
+    activeStep: number;
+    connectedCallback(): void;
+    incrementStep(): void;
+    decrementStep(): void;
+    lastStep(): void;
+    firstStep(): void;
+    _onStepperItemClick(index: number): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsStepper;

package/components/Tab/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./sgds-tab";
+export * from "./sgds-tabpanel";
+export * from "./sgds-tabgroup";

package/{lib → components}/Tab/sgds-tab.d.ts

@@ -1,26 +1,27 @@
-import SgdsElement from "../utils/sgds-element";
-export declare class SgdsTab extends SgdsElement {
-    static styles: import("lit").CSSResultGroup;
-    tab: HTMLElement;
-    private readonly attrId;
-    private readonly componentId;
-    label: string;
-    /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
-    panel: string;
-    /** Draws the tab in an active state. */
-    active: boolean;
-    /** Makes the tab closable and shows a close button. */
-    closable: boolean;
-    /** Disables the tab and prevents selection. */
-    disabled: boolean;
-    variant: any;
-    connectedCallback(): void;
-    /** Sets focus to the tab. */
-    focus(options?: FocusOptions): void;
-    /** Removes focus from the tab. */
-    blur(): void;
-    handleCloseClick(): void;
-    handleActiveChange(): void;
-    handleDisabledChange(): void;
-    render(): import("lit").TemplateResult<1>;
-}
+import SgdsElement from "../../base/sgds-element";
+export declare class SgdsTab extends SgdsElement {
+    static styles: import("lit").CSSResultGroup;
+    tab: HTMLElement;
+    private readonly attrId;
+    private readonly componentId;
+    label: string;
+    /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
+    panel: string;
+    /** Draws the tab in an active state. */
+    active: boolean;
+    /** Makes the tab closable and shows a close button. */
+    closable: boolean;
+    /** Disables the tab and prevents selection. */
+    disabled: boolean;
+    variant: any;
+    connectedCallback(): void;
+    /** Sets focus to the tab. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the tab. */
+    blur(): void;
+    handleCloseClick(): void;
+    handleActiveChange(): void;
+    handleDisabledChange(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsTab;

package/{lib → components}/Tab/sgds-tabgroup.d.ts

@@ -1,47 +1,48 @@
-import SgdsElement from "../utils/sgds-element";
-import { SgdsTabPanel } from './sgds-tabpanel';
-import { SgdsTab } from './sgds-tab';
-export declare class SgdsTabGroup extends SgdsElement {
-    static styles: import("lit").CSSResultGroup;
-    tabGroup: HTMLElement;
-    body: HTMLSlotElement;
-    nav: HTMLElement;
-    private activeTab?;
-    private mutationObserver;
-    private resizeObserver;
-    private tabs;
-    private panels;
-    private hasScrollControls;
-    /** The placement of the tabs. */
-    placement: 'top' | 'bottom' | 'start' | 'end';
-    TabVariant: 'basic-toggle' | 'info-toggle';
-    /**
-     * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
-     * manual, the tab will receive focus but will not show until the user presses spacebar or enter.
-     */
-    activation: 'auto' | 'manual';
-    /** Disables the scroll arrows that appear when tabs overflow. */
-    noScrollControls: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /** Shows the specified tab panel. */
-    show(panel: string): void;
-    getAllTabs(options?: {
-        includeDisabled: boolean;
-    }): SgdsTab[];
-    getAllPanels(): [SgdsTabPanel];
-    getActiveTab(): SgdsTab;
-    handleClick(event: MouseEvent): void;
-    handleKeyDown(event: KeyboardEvent): void;
-    handleScrollToStart(): void;
-    handleScrollToEnd(): void;
-    updateScrollControls(): void;
-    setActiveTab(tab: SgdsTab, options?: {
-        emitEvents?: boolean;
-        scrollBehavior?: 'auto' | 'smooth';
-    }): void;
-    setAriaLabels(): void;
-    setTabVariant(): void;
-    syncTabsAndPanels(): void;
-    render(): import("lit").TemplateResult<1>;
-}
+import SgdsElement from "../../base/sgds-element";
+import { SgdsTabPanel } from "./sgds-tabpanel";
+import { SgdsTab } from "./sgds-tab";
+export declare class SgdsTabGroup extends SgdsElement {
+    static styles: import("lit").CSSResultGroup;
+    tabGroup: HTMLElement;
+    body: HTMLSlotElement;
+    nav: HTMLElement;
+    private activeTab?;
+    private mutationObserver;
+    private resizeObserver;
+    private tabs;
+    private panels;
+    private hasScrollControls;
+    /** The placement of the tabs. */
+    placement: "top" | "bottom" | "start" | "end";
+    TabVariant: "basic-toggle" | "info-toggle";
+    /**
+     * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
+     * manual, the tab will receive focus but will not show until the user presses spacebar or enter.
+     */
+    activation: "auto" | "manual";
+    /** Disables the scroll arrows that appear when tabs overflow. */
+    noScrollControls: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Shows the specified tab panel. */
+    show(panel: string): void;
+    getAllTabs(options?: {
+        includeDisabled: boolean;
+    }): SgdsTab[];
+    getAllPanels(): [SgdsTabPanel];
+    getActiveTab(): SgdsTab;
+    handleClick(event: MouseEvent): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleScrollToStart(): void;
+    handleScrollToEnd(): void;
+    updateScrollControls(): void;
+    setActiveTab(tab: SgdsTab, options?: {
+        emitEvents?: boolean;
+        scrollBehavior?: "auto" | "smooth";
+    }): void;
+    setAriaLabels(): void;
+    setTabVariant(): void;
+    syncTabsAndPanels(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsTabGroup;

package/{lib → components}/Tab/sgds-tabpanel.d.ts

@@ -1,25 +1,26 @@
-import SgdsElement from "../utils/sgds-element";
-/**
- * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
- *
- * @since 2.0
- * @status stable
- *
- * @slot - The tab panel's content.
- *
- * @csspart base - The component's base wrapper.
- *
- * @cssproperty --padding - The tab panel's padding.
- */
-export declare class SgdsTabPanel extends SgdsElement {
-    static styles: import("lit").CSSResultGroup;
-    private readonly attrId;
-    private readonly componentId;
-    /** The tab panel's name. */
-    name: string;
-    /** When true, the tab panel will be shown. */
-    active: boolean;
-    connectedCallback(): void;
-    handleActiveChange(): void;
-    render(): import("lit").TemplateResult<1>;
-}
+import SgdsElement from "../../base/sgds-element";
+/**
+ * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
+ *
+ * @since 2.0
+ * @status stable
+ *
+ * @slot - The tab panel's content.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --padding - The tab panel's padding.
+ */
+export declare class SgdsTabPanel extends SgdsElement {
+    static styles: import("lit").CSSResultGroup;
+    private readonly attrId;
+    private readonly componentId;
+    /** The tab panel's name. */
+    name: string;
+    /** When true, the tab panel will be shown. */
+    active: boolean;
+    connectedCallback(): void;
+    handleActiveChange(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsTabPanel;

package/components/Table/index.d.ts

@@ -0,0 +1 @@
+export { SgdsTable } from "./sgds-table";

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

@@ -0,0 +1,26 @@
+import SgdsElement from "../../base/sgds-element";
+export declare class SgdsTable extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    striped: boolean;
+    bordered: boolean;
+    borderless: boolean;
+    hover: boolean;
+    size?: string;
+    variant?: string;
+    sort: boolean;
+    removableSort: boolean;
+    responsive?: "sm" | "md" | "lg" | "xl";
+    tableHeaders: any[];
+    tableData: any[];
+    sortColumn: number | null;
+    sortAsc: boolean;
+    activeColumn: number | null;
+    sortClickCount: number;
+    clickCount: number;
+    originalTableData: Array<string[]>;
+    connectedCallback(): void;
+    handleHeaderClick(columnIndex: number): void;
+    getIcon(columnIndex: number): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsTable;

package/components/Textarea/index.d.ts

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

package/{lib → components}/Textarea/sgds-textarea.d.ts

@@ -1,53 +1,53 @@
-import SgdsElement from "../utils/sgds-element";
-export declare class SgdsTextArea extends SgdsElement {
-    static styles: import("lit").CSSResultGroup;
-    textarea: HTMLTextAreaElement;
-    private hasFocus;
-    private readonly formSubmitController;
-    private resizeObserver;
-    label: string;
-    textareaId: string;
-    name: any;
-    textareaClasses?: any;
-    value: string;
-    minlength: any;
-    maxlength: any;
-    spellcheck: boolean;
-    /** The number of rows to display by default. */
-    rows: number;
-    placeholder: string;
-    invalidFeedback: string;
-    autofocus: boolean;
-    disabled: boolean;
-    required: boolean;
-    /** Makes the input readonly. */
-    readonly: boolean;
-    invalid: boolean;
-    valid: boolean;
-    /** Controls how the textarea can be resized. */
-    resize: 'none' | 'vertical' | 'auto';
-    /** The textarea's inputmode attribute. */
-    inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
-    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: string;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /** Sets focus on the textarea. */
-    focus(options?: FocusOptions): void;
-    /** Checks for validity and shows the browser's validation message if the control is invalid. */
-    reportValidity(): boolean;
-    handleInvalid(): void;
-    handleChange(event: string): void;
-    handleFocus(): void;
-    handleBlur(): void;
-    /** Selects all the text in the textarea. */
-    select(): void;
-    handleKeyDown(event: KeyboardEvent): void;
-    handleRowsChange(): void;
-    setTextareaHeight(): void;
-    handleDisabledChange(): void;
-    handleValueChange(): void;
-    render(): import("lit").TemplateResult<1 | 2>;
-}
-export default SgdsTextArea;
+import SgdsElement from "../../base/sgds-element";
+export declare class SgdsTextArea extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    textarea: HTMLTextAreaElement;
+    private hasFocus;
+    private readonly formSubmitController;
+    private resizeObserver;
+    label: string;
+    textareaId: string;
+    name: any;
+    textareaClasses?: any;
+    value: string;
+    minlength: any;
+    maxlength: any;
+    spellcheck: boolean;
+    /** The number of rows to display by default. */
+    rows: number;
+    placeholder: string;
+    invalidFeedback: string;
+    autofocus: boolean;
+    disabled: boolean;
+    required: boolean;
+    /** Makes the input readonly. */
+    readonly: boolean;
+    invalid: boolean;
+    valid: boolean;
+    /** Controls how the textarea can be resized. */
+    resize: "none" | "vertical" | "auto";
+    /** The textarea's inputmode attribute. */
+    inputmode: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
+    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: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Sets focus on the textarea. */
+    focus(options?: FocusOptions): void;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    handleInvalid(): void;
+    handleChange(event: string): void;
+    handleFocus(): void;
+    handleBlur(): void;
+    /** Selects all the text in the textarea. */
+    select(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleRowsChange(): void;
+    setTextareaHeight(): void;
+    handleDisabledChange(): void;
+    handleValueChange(): void;
+    render(): import("lit").TemplateResult;
+}
+export default SgdsTextArea;

package/components/Toast/index.d.ts

@@ -0,0 +1 @@
+export { SgdsToast } from "./sgds-toast";

package/components/Toast/sgds-toast.d.ts

@@ -0,0 +1,22 @@
+import SgdsElement from "../../base/sgds-element";
+export type ToastVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light";
+export declare class SgdsToast extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    base: HTMLElement;
+    show: boolean;
+    /**
+     * Apply a CSS fade transition to the toast
+     */
+    animation?: boolean;
+    autohide?: boolean;
+    delay: number;
+    variant: ToastVariant;
+    /** The toast variant. */
+    bg?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light";
+    closeLabel?: string;
+    /**Adds CSS styling to `<Toast />` based on the defined status */
+    status?: "success" | "warning" | "danger";
+    handleCloseClick(): void;
+    render(): import("lit").TemplateResult;
+}
+export default SgdsToast;

package/components/Tooltip/index.d.ts

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

package/components/Tooltip/sgds-tooltip.d.ts

@@ -0,0 +1,30 @@
+import SgdsElement from "../../base/sgds-element";
+import { Ref } from "lit/directives/ref.js";
+import { Tooltip } from "bootstrap";
+import * as Popper from "@popperjs/core";
+/**
+ * @summary Tooltip summary
+ * @slot default - slot for Tooltip's contentz
+ */
+export declare class SgdsTooltip extends SgdsElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**@internal */
+    myTooltip: Ref<HTMLElement>;
+    /**@internal */
+    bsTooltip: Tooltip;
+    /** */
+    content: string;
+    placement: "top" | "bottom" | "left" | "right";
+    trigger: "click" | "hover" | "focus" | "hover focus";
+    /**@internal */
+    closableContainer: HTMLElement;
+    /**@internal */
+    popperConfig: Partial<Popper.Options>;
+    /**@internal */
+    tooltipConfig: Partial<Tooltip.Options>;
+    firstUpdated(): void;
+    /** Hides the Tooltip */
+    closeTooltip(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export default SgdsTooltip;

package/index.d.ts

@@ -0,0 +1,23 @@
+export * from "./components/Sidenav";
+export * from "./components/Radio";
+export * from "./components/Masthead";
+export * from "./components/Button";
+export * from "./components/Footer";
+export * from "./components/Mainnav";
+export * from "./components/Input";
+export * from "./components/Checkbox";
+export * from "./components/Dropdown";
+export * from "./components/Textarea";
+export * from "./components/Modal";
+export * from "./components/QuantityToggle";
+export * from "./components/ActionCard";
+export * from "./components/Badge";
+export * from "./components/Table";
+export * from "./components/Breadcrumb";
+export * from "./components/Stepper";
+export * from "./components/Alert";
+export * from "./components/CloseButton";
+export * from "./components/Toast";
+export * from "./components/FileUpload";
+export * from "./components/Accordion";
+export * from "./components/Tooltip";