@govtechsg/sgds-web-component 2.1.0 → 2.1.2

package/react/components/Dropdown/sgds-dropdown.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-dropdown.cjs.js","sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { html } from \"lit\";\nimport { property, queryAsync } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport genId from \"../../utils/generateId\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport dropdownStyle from \"./dropdown.css\";\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\nexport type DropdownButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n *\n * @csspart menu - The dropdown's menu (ul element)\n *\n */\nexport class SgdsDropdown extends ScopedElementsMixin(DropdownListElement) {\n  static styles = [...DropdownListElement.styles, dropdownStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton\n    };\n  }\n  constructor() {\n    super();\n    /**@internal */\n    this.modifierOpt = [\n      {\n        name: \"offset\",\n        options: {\n          offset: [0, 10]\n        }\n      }\n    ];\n  }\n  @property({ type: String })\n  /** Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n  togglerId: string = genId(\"dropdown\", \"button\");\n\n  /** Sets the text content of Dropdown button */\n  @property({ type: String })\n  togglerText = \"\";\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  /** Sets color of Dropdown button */\n  @property({ type: String, reflect: true })\n  variant: DropdownButtonVariant = \"secondary\";\n\n  /**@internal */\n  @queryAsync(\"sgds-button\")\n  private dropdownRef: Promise<SgdsButton>;\n\n  async firstUpdated() {\n    super.firstUpdated();\n    if (this.menuIsOpen) {\n      await this.dropdownRef;\n      this.showMenu();\n    }\n  }\n  render() {\n    return html`\n      <div>\n        <sgds-button\n          outlined\n          role=\"button\"\n          variant=${this.variant}\n          ?disabled=${this.disabled}\n          aria-expanded=\"${this.menuIsOpen}\"\n          aria-haspopup=\"menu\"\n          ${ref(this.myDropdown)}\n          @click=${() => this.toggleMenu()}\n          id=${this.togglerId}\n        >\n          ${this.togglerText}\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-chevron-down\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n            />\n          </svg>\n        </sgds-button>\n        <div class=\"dropdown-menu\" role=\"menu\" part=\"menu\">\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"names":["ScopedElementsMixin","DropdownListElement","SgdsButton","genId","html","ref","dropdownStyle","__decorate","property","queryAsync"],"mappings":"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"}

package/react/components/Dropdown/sgds-dropdown.js

@@ -0,0 +1,117 @@
+'use client';
+import { __decorate } from 'tslib';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { html } from 'lit';
+import { property, queryAsync } from 'lit/decorators.js';
+import { ref } from 'lit/directives/ref.js';
+import { DropdownListElement } from '../../base/dropdown-list-element.js';
+import genId from '../../utils/generateId.js';
+import { SgdsButton } from '../Button/sgds-button.js';
+import css_248z from './dropdown.js';
+
+/**
+ * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.
+ * @slot default - slot for sgds-dropdown-item passed into dropdown's menu
+ *
+ * @csspart menu - The dropdown's menu (ul element)
+ *
+ */
+class SgdsDropdown extends ScopedElementsMixin(DropdownListElement) {
+    /**@internal */
+    static get scopedElements() {
+        return {
+            "sgds-button": SgdsButton
+        };
+    }
+    constructor() {
+        super();
+        this.togglerId = genId("dropdown", "button");
+        /** Sets the text content of Dropdown button */
+        this.togglerText = "";
+        /** Controls auto-flipping of menu */
+        this.noFlip = false;
+        /** When true, aligns right edge of menu with right edge of button */
+        this.menuAlignRight = false;
+        /** The drop position of menu relative to the toggle button */
+        this.drop = "down";
+        /** Sets color of Dropdown button */
+        this.variant = "secondary";
+        /**@internal */
+        this.modifierOpt = [
+            {
+                name: "offset",
+                options: {
+                    offset: [0, 10]
+                }
+            }
+        ];
+    }
+    async firstUpdated() {
+        super.firstUpdated();
+        if (this.menuIsOpen) {
+            await this.dropdownRef;
+            this.showMenu();
+        }
+    }
+    render() {
+        return html `
+      <div>
+        <sgds-button
+          outlined
+          role="button"
+          variant=${this.variant}
+          ?disabled=${this.disabled}
+          aria-expanded="${this.menuIsOpen}"
+          aria-haspopup="menu"
+          ${ref(this.myDropdown)}
+          @click=${() => this.toggleMenu()}
+          id=${this.togglerId}
+        >
+          ${this.togglerText}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-chevron-down"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+            />
+          </svg>
+        </sgds-button>
+        <div class="dropdown-menu" role="menu" part="menu">
+          <slot id="default" @click=${this.handleSelectSlot}></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsDropdown.styles = [...DropdownListElement.styles, css_248z];
+__decorate([
+    property({ type: String })
+    /** Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */
+], SgdsDropdown.prototype, "togglerId", void 0);
+__decorate([
+    property({ type: String })
+], SgdsDropdown.prototype, "togglerText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, state: false })
+], SgdsDropdown.prototype, "noFlip", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, state: false })
+], SgdsDropdown.prototype, "menuAlignRight", void 0);
+__decorate([
+    property({ type: String, reflect: true, state: false })
+], SgdsDropdown.prototype, "drop", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsDropdown.prototype, "variant", void 0);
+__decorate([
+    queryAsync("sgds-button")
+], SgdsDropdown.prototype, "dropdownRef", void 0);
+
+export { SgdsDropdown, SgdsDropdown as default };
+//# sourceMappingURL=sgds-dropdown.js.map

package/react/components/Dropdown/sgds-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-dropdown.js","sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { html } from \"lit\";\nimport { property, queryAsync } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport genId from \"../../utils/generateId\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport dropdownStyle from \"./dropdown.css\";\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\nexport type DropdownButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n *\n * @csspart menu - The dropdown's menu (ul element)\n *\n */\nexport class SgdsDropdown extends ScopedElementsMixin(DropdownListElement) {\n  static styles = [...DropdownListElement.styles, dropdownStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton\n    };\n  }\n  constructor() {\n    super();\n    /**@internal */\n    this.modifierOpt = [\n      {\n        name: \"offset\",\n        options: {\n          offset: [0, 10]\n        }\n      }\n    ];\n  }\n  @property({ type: String })\n  /** Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n  togglerId: string = genId(\"dropdown\", \"button\");\n\n  /** Sets the text content of Dropdown button */\n  @property({ type: String })\n  togglerText = \"\";\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  /** Sets color of Dropdown button */\n  @property({ type: String, reflect: true })\n  variant: DropdownButtonVariant = \"secondary\";\n\n  /**@internal */\n  @queryAsync(\"sgds-button\")\n  private dropdownRef: Promise<SgdsButton>;\n\n  async firstUpdated() {\n    super.firstUpdated();\n    if (this.menuIsOpen) {\n      await this.dropdownRef;\n      this.showMenu();\n    }\n  }\n  render() {\n    return html`\n      <div>\n        <sgds-button\n          outlined\n          role=\"button\"\n          variant=${this.variant}\n          ?disabled=${this.disabled}\n          aria-expanded=\"${this.menuIsOpen}\"\n          aria-haspopup=\"menu\"\n          ${ref(this.myDropdown)}\n          @click=${() => this.toggleMenu()}\n          id=${this.togglerId}\n        >\n          ${this.togglerText}\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-chevron-down\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n            />\n          </svg>\n        </sgds-button>\n        <div class=\"dropdown-menu\" role=\"menu\" part=\"menu\">\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"names":["dropdownStyle"],"mappings":"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"}

package/react/components/FileUpload/file-upload.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{--file-upload-left-icon-color:var(--sgds-success);--file-upload-remove-icon-color:var(--sgds-body-color);--file-upload-remove-icon-hover-color: }.fileupload-list-item{display:flex;gap:var(--sgds-spacer-2)}.fileupload-list-item span:not(:first-of-type){cursor:pointer}.fileupload-list-item span:first-of-type svg{color:var(--file-upload-left-icon-color)}.fileupload-list-item span:last-of-type svg{color:var(--file-upload-remove-icon-color)}.fileupload-list-item span:last-of-type svg:hover{color:var(--file-upload-remove-icon-hover-color)}.file-upload-label{align-items:center;display:flex;gap:var(--sgds-spacer-2)}ul{margin:0;padding:0}.sgds.fileupload-list{display:flex;flex-direction:column;gap:var(--sgds-spacer-3);list-style-type:none}.sgds.fileupload-list .fileupload-list-item .filename{color:var(--sgds-link);text-decoration:underline;text-underline-offset:.25rem}input{display:none}label,sgds-button{cursor:pointer}.fileupload-container{display:flex;flex-direction:column;gap:var(--sgds-spacer-3)}`;
+
+export { css_248z as default };
+//# sourceMappingURL=file-upload.js.map

package/react/components/FileUpload/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/react/components/FileUpload/sgds-file-upload.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-file-upload.cjs.js","sources":["../../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { SgdsButton, type ButtonVariant } from \"../Button/sgds-button\";\nimport fileUploadStyle from \"./file-upload.css\";\nimport genId from \"../../utils/generateId\";\nimport svgStyles from \"../../styles/svg.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nexport type FileUploadButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\"\n  | \"link\"\n  | \"outline-primary\"\n  | \"outline-secondary\"\n  | \"outline-success\"\n  | \"outline-danger\"\n  | \"outline-warning\"\n  | \"outline-info\"\n  | \"outline-light\"\n  | \"outline-dark\";\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading\n *\n * @cssproperty --file-upload-file-icon-color - Left icon color\n * @cssproperty --file-upload-remove-icon-color - Remove icon color\n * @cssproperty --file-upload-remove-icon-hover-color - Remove icon hover color\n */\n\nexport class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, svgStyles, formHintStyles, fileUploadStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton\n    };\n  }\n  /** The button's variant. */\n  @property({ reflect: true }) variant: FileUploadButtonVariant = \"primary\";\n\n  //** Disable the fileuploader button */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Allows multiple files to be listed for uploading */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /** Specify the acceptable file type  */\n  @property({ type: String, reflect: true })\n  accept = \"\";\n\n  /** Specifies a large or small button */\n  @property({ reflect: true }) size: \"sm\" | \"lg\";\n\n  /** Customize the check icon with SVG */\n  @property({ type: String })\n  checkedIcon = \"\";\n\n  /** Customize the cancel icon with SVG */\n  @property({ type: String })\n  cancelIcon = \"\";\n\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** @internal */\n  @property({ type: Object, state: true })\n  private files: FileList | undefined;\n\n  /** @internal */\n  @property({ type: Array })\n  private selectedFiles: File[] = [];\n\n  private _setFileList(files: FileList) {\n    this.files = files;\n    this.emit(\"sgds-files-selected\");\n    //Possible to pass in the files\n  }\n\n  // Create a ref to the input element\n  /** @internal */\n  private inputRef = createRef<HTMLInputElement>();\n\n  /** @internal */\n  private handleClick(event: Event) {\n    event.preventDefault();\n    if (!this.disabled) {\n      // Get a reference to the input element using the inputRef\n      const inputElement = this.inputRef.value;\n      // Do something with the input element\n      inputElement.click();\n    }\n  }\n\n  /** @internal */\n  private handleInputChange(event: Event) {\n    const inputElement = event.target as HTMLInputElement;\n    const files = inputElement.files as FileList;\n\n    if (files.length > 0) {\n      this.selectedFiles = Array.from(files);\n    }\n    // Trigger a re-render of the component to update the list of selected files\n    this._setFileList(files);\n    this.requestUpdate();\n  }\n\n  private _removeFileHandler(index: number) {\n    const inputElement = this.inputRef.value;\n    const attachments = inputElement.files;\n\n    const fileBuffer = new DataTransfer();\n    for (let i = 0; i < attachments.length; i++) {\n      if (index !== i) fileBuffer.items.add(attachments[i]);\n    }\n\n    // Assign buffer to file input\n    inputElement.files = fileBuffer.files;\n    // Re-populate selected files to the lists\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n\n    // Trigger a re-render of the component to update the list of selected files\n    this.requestUpdate();\n  }\n\n  /**@internal */\n  protected inputId: string = genId(\"input\", \"file\");\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <small id=\"${this.inputId}Help\" class=\"form-text\">${this.hintText}</small> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  private _sanitizeVariant(variant: FileUploadButtonVariant) {\n    return variant.replace(\"outline-\", \"\") as ButtonVariant;\n  }\n  render() {\n    const getCheckedIcon = (checkedIcon: string) => {\n      if (checkedIcon) {\n        return html`${unsafeSVG(checkedIcon)}`;\n      }\n      return html` <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-check-lg\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"\n        />\n      </svg>`;\n    };\n\n    const getCancelIcon = (cancelIcon: string) => {\n      if (cancelIcon) {\n        return html`${unsafeSVG(cancelIcon)}`;\n      }\n      return html`<svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-x-circle\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" />\n        <path\n          d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\n        />\n      </svg>`;\n    };\n\n    const listItems = this.selectedFiles.map(\n      (file, index) => html`\n        <li key=${index} class=\"fileupload-list-item\">\n          <span>${getCheckedIcon(this.checkedIcon)}</span>\n          <span class=\"filename\">${file.name}</span>\n          <span @click=${() => this._removeFileHandler(index)}>${getCancelIcon(this.cancelIcon)}</span>\n        </li>\n      `\n    );\n\n    return html`\n      <input\n        ${ref(this.inputRef)}\n        type=\"file\"\n        @change=${this.handleInputChange}\n        ?multiple=${this.multiple}\n        accept=${this.accept}\n        id=${this.inputId}\n      />\n      <div class=\"fileupload-container\">\n        <sgds-button\n          size=${this.size}\n          variant=${this._sanitizeVariant(this.variant)}\n          ?outlined=${this.variant.includes(\"outline\")}\n          ?disabled=${this.disabled}\n          @click=${this.handleClick}\n        >\n          <label for=${this.inputId} class=\"file-upload-label\"><slot></slot></label>\n        </sgds-button>\n        ${this._renderHintText()}\n        <ul class=\"sgds fileupload-list\">\n          ${listItems}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["ScopedElementsMixin","SgdsElement","createRef","genId","SgdsButton","html","unsafeSVG","ref","svgStyles","formHintStyles","fileUploadStyle","__decorate","property"],"mappings":"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"}

package/react/components/FileUpload/sgds-file-upload.js

@@ -0,0 +1,208 @@
+'use client';
+import { __decorate } from 'tslib';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { SgdsButton } from '../Button/sgds-button.js';
+import css_248z$2 from './file-upload.js';
+import genId from '../../utils/generateId.js';
+import css_248z from '../../styles/svg.js';
+import css_248z$1 from '../../styles/form-hint.js';
+
+/**
+ * @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 --file-upload-file-icon-color - Left icon color
+ * @cssproperty --file-upload-remove-icon-color - Remove icon color
+ * @cssproperty --file-upload-remove-icon-hover-color - Remove icon hover color
+ */
+class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {
+    constructor() {
+        super(...arguments);
+        /** The button's variant. */
+        this.variant = "primary";
+        //** Disable the fileuploader button */
+        this.disabled = false;
+        /** Allows multiple files to be listed for uploading */
+        this.multiple = false;
+        /** Specify the acceptable file type  */
+        this.accept = "";
+        /** Customize the check icon with SVG */
+        this.checkedIcon = "";
+        /** Customize the cancel icon with SVG */
+        this.cancelIcon = "";
+        /** The input's hint text below the label */
+        this.hintText = "";
+        /** @internal */
+        this.selectedFiles = [];
+        // Create a ref to the input element
+        /** @internal */
+        this.inputRef = createRef();
+        /**@internal */
+        this.inputId = genId("input", "file");
+    }
+    /**@internal */
+    static get scopedElements() {
+        return {
+            "sgds-button": SgdsButton
+        };
+    }
+    _setFileList(files) {
+        this.files = files;
+        this.emit("sgds-files-selected");
+        //Possible to pass in the files
+    }
+    /** @internal */
+    handleClick(event) {
+        event.preventDefault();
+        if (!this.disabled) {
+            // Get a reference to the input element using the inputRef
+            const inputElement = this.inputRef.value;
+            // Do something with the input element
+            inputElement.click();
+        }
+    }
+    /** @internal */
+    handleInputChange(event) {
+        const inputElement = event.target;
+        const files = inputElement.files;
+        if (files.length > 0) {
+            this.selectedFiles = Array.from(files);
+        }
+        // Trigger a re-render of the component to update the list of selected files
+        this._setFileList(files);
+        this.requestUpdate();
+    }
+    _removeFileHandler(index) {
+        const inputElement = this.inputRef.value;
+        const attachments = inputElement.files;
+        const fileBuffer = new DataTransfer();
+        for (let i = 0; i < attachments.length; i++) {
+            if (index !== i)
+                fileBuffer.items.add(attachments[i]);
+        }
+        // Assign buffer to file input
+        inputElement.files = fileBuffer.files;
+        // Re-populate selected files to the lists
+        this._setFileList(fileBuffer.files);
+        this.selectedFiles = Array.from(fileBuffer.files);
+        // Trigger a re-render of the component to update the list of selected files
+        this.requestUpdate();
+    }
+    _renderHintText() {
+        const hintTextTemplate = html ` <small id="${this.inputId}Help" class="form-text">${this.hintText}</small> `;
+        return this.hintText && hintTextTemplate;
+    }
+    _sanitizeVariant(variant) {
+        return variant.replace("outline-", "");
+    }
+    render() {
+        const getCheckedIcon = (checkedIcon) => {
+            if (checkedIcon) {
+                return html `${unsafeSVG(checkedIcon)}`;
+            }
+            return html ` <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        class="bi bi-check-lg"
+        viewBox="0 0 16 16"
+      >
+        <path
+          d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"
+        />
+      </svg>`;
+        };
+        const getCancelIcon = (cancelIcon) => {
+            if (cancelIcon) {
+                return html `${unsafeSVG(cancelIcon)}`;
+            }
+            return html `<svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        class="bi bi-x-circle"
+        viewBox="0 0 16 16"
+      >
+        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+        <path
+          d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
+        />
+      </svg>`;
+        };
+        const listItems = this.selectedFiles.map((file, index) => html `
+        <li key=${index} class="fileupload-list-item">
+          <span>${getCheckedIcon(this.checkedIcon)}</span>
+          <span class="filename">${file.name}</span>
+          <span @click=${() => this._removeFileHandler(index)}>${getCancelIcon(this.cancelIcon)}</span>
+        </li>
+      `);
+        return html `
+      <input
+        ${ref(this.inputRef)}
+        type="file"
+        @change=${this.handleInputChange}
+        ?multiple=${this.multiple}
+        accept=${this.accept}
+        id=${this.inputId}
+      />
+      <div class="fileupload-container">
+        <sgds-button
+          size=${this.size}
+          variant=${this._sanitizeVariant(this.variant)}
+          ?outlined=${this.variant.includes("outline")}
+          ?disabled=${this.disabled}
+          @click=${this.handleClick}
+        >
+          <label for=${this.inputId} class="file-upload-label"><slot></slot></label>
+        </sgds-button>
+        ${this._renderHintText()}
+        <ul class="sgds fileupload-list">
+          ${listItems}
+        </ul>
+      </div>
+    `;
+    }
+}
+SgdsFileUpload.styles = [...SgdsElement.styles, css_248z, css_248z$1, css_248z$2];
+__decorate([
+    property({ reflect: true })
+], SgdsFileUpload.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsFileUpload.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsFileUpload.prototype, "multiple", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsFileUpload.prototype, "accept", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsFileUpload.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFileUpload.prototype, "checkedIcon", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFileUpload.prototype, "cancelIcon", void 0);
+__decorate([
+    property({ reflect: true })
+], SgdsFileUpload.prototype, "hintText", void 0);
+__decorate([
+    property({ type: Object, state: true })
+], SgdsFileUpload.prototype, "files", void 0);
+__decorate([
+    property({ type: Array })
+], SgdsFileUpload.prototype, "selectedFiles", void 0);
+
+export { SgdsFileUpload, SgdsFileUpload as default };
+//# sourceMappingURL=sgds-file-upload.js.map

package/react/components/FileUpload/sgds-file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-file-upload.js","sources":["../../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { SgdsButton, type ButtonVariant } from \"../Button/sgds-button\";\nimport fileUploadStyle from \"./file-upload.css\";\nimport genId from \"../../utils/generateId\";\nimport svgStyles from \"../../styles/svg.css\";\nimport formHintStyles from \"../../styles/form-hint.css\";\nexport type FileUploadButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\"\n  | \"link\"\n  | \"outline-primary\"\n  | \"outline-secondary\"\n  | \"outline-success\"\n  | \"outline-danger\"\n  | \"outline-warning\"\n  | \"outline-info\"\n  | \"outline-light\"\n  | \"outline-dark\";\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading\n *\n * @cssproperty --file-upload-file-icon-color - Left icon color\n * @cssproperty --file-upload-remove-icon-color - Remove icon color\n * @cssproperty --file-upload-remove-icon-hover-color - Remove icon hover color\n */\n\nexport class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {\n  static styles = [...SgdsElement.styles, svgStyles, formHintStyles, fileUploadStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton\n    };\n  }\n  /** The button's variant. */\n  @property({ reflect: true }) variant: FileUploadButtonVariant = \"primary\";\n\n  //** Disable the fileuploader button */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Allows multiple files to be listed for uploading */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /** Specify the acceptable file type  */\n  @property({ type: String, reflect: true })\n  accept = \"\";\n\n  /** Specifies a large or small button */\n  @property({ reflect: true }) size: \"sm\" | \"lg\";\n\n  /** Customize the check icon with SVG */\n  @property({ type: String })\n  checkedIcon = \"\";\n\n  /** Customize the cancel icon with SVG */\n  @property({ type: String })\n  cancelIcon = \"\";\n\n  /** The input's hint text below the label */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** @internal */\n  @property({ type: Object, state: true })\n  private files: FileList | undefined;\n\n  /** @internal */\n  @property({ type: Array })\n  private selectedFiles: File[] = [];\n\n  private _setFileList(files: FileList) {\n    this.files = files;\n    this.emit(\"sgds-files-selected\");\n    //Possible to pass in the files\n  }\n\n  // Create a ref to the input element\n  /** @internal */\n  private inputRef = createRef<HTMLInputElement>();\n\n  /** @internal */\n  private handleClick(event: Event) {\n    event.preventDefault();\n    if (!this.disabled) {\n      // Get a reference to the input element using the inputRef\n      const inputElement = this.inputRef.value;\n      // Do something with the input element\n      inputElement.click();\n    }\n  }\n\n  /** @internal */\n  private handleInputChange(event: Event) {\n    const inputElement = event.target as HTMLInputElement;\n    const files = inputElement.files as FileList;\n\n    if (files.length > 0) {\n      this.selectedFiles = Array.from(files);\n    }\n    // Trigger a re-render of the component to update the list of selected files\n    this._setFileList(files);\n    this.requestUpdate();\n  }\n\n  private _removeFileHandler(index: number) {\n    const inputElement = this.inputRef.value;\n    const attachments = inputElement.files;\n\n    const fileBuffer = new DataTransfer();\n    for (let i = 0; i < attachments.length; i++) {\n      if (index !== i) fileBuffer.items.add(attachments[i]);\n    }\n\n    // Assign buffer to file input\n    inputElement.files = fileBuffer.files;\n    // Re-populate selected files to the lists\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n\n    // Trigger a re-render of the component to update the list of selected files\n    this.requestUpdate();\n  }\n\n  /**@internal */\n  protected inputId: string = genId(\"input\", \"file\");\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <small id=\"${this.inputId}Help\" class=\"form-text\">${this.hintText}</small> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  private _sanitizeVariant(variant: FileUploadButtonVariant) {\n    return variant.replace(\"outline-\", \"\") as ButtonVariant;\n  }\n  render() {\n    const getCheckedIcon = (checkedIcon: string) => {\n      if (checkedIcon) {\n        return html`${unsafeSVG(checkedIcon)}`;\n      }\n      return html` <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-check-lg\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path\n          d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"\n        />\n      </svg>`;\n    };\n\n    const getCancelIcon = (cancelIcon: string) => {\n      if (cancelIcon) {\n        return html`${unsafeSVG(cancelIcon)}`;\n      }\n      return html`<svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        class=\"bi bi-x-circle\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\" />\n        <path\n          d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\n        />\n      </svg>`;\n    };\n\n    const listItems = this.selectedFiles.map(\n      (file, index) => html`\n        <li key=${index} class=\"fileupload-list-item\">\n          <span>${getCheckedIcon(this.checkedIcon)}</span>\n          <span class=\"filename\">${file.name}</span>\n          <span @click=${() => this._removeFileHandler(index)}>${getCancelIcon(this.cancelIcon)}</span>\n        </li>\n      `\n    );\n\n    return html`\n      <input\n        ${ref(this.inputRef)}\n        type=\"file\"\n        @change=${this.handleInputChange}\n        ?multiple=${this.multiple}\n        accept=${this.accept}\n        id=${this.inputId}\n      />\n      <div class=\"fileupload-container\">\n        <sgds-button\n          size=${this.size}\n          variant=${this._sanitizeVariant(this.variant)}\n          ?outlined=${this.variant.includes(\"outline\")}\n          ?disabled=${this.disabled}\n          @click=${this.handleClick}\n        >\n          <label for=${this.inputId} class=\"file-upload-label\"><slot></slot></label>\n        </sgds-button>\n        ${this._renderHintText()}\n        <ul class=\"sgds fileupload-list\">\n          ${listItems}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["svgStyles","formHintStyles","fileUploadStyle"],"mappings":"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"}

package/react/components/Footer/footer.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`*,:after,:before{box-sizing:border-box}.sgds.footer .footer-header .title{color:var(--sgds-heading-color);font-size:calc(1.275rem + .3vw);font-weight:700;line-height:1.2;margin-bottom:.5rem;margin-top:0}@media (min-width:1200px){.sgds.footer .footer-header .title{font-size:1.5rem}}.sgds.footer .footer-header .title{line-height:1.33}.container-fluid{margin-left:auto;margin-right:auto;padding-left:var(--sgds-gutter-x,1.5rem);padding-right:var(--sgds-gutter-x,1.5rem);width:100%}.row{--sgds-gutter-x:1.5rem;--sgds-gutter-y:0;display:flex;flex-wrap:wrap;margin-left:calc(var(--sgds-gutter-x)*-.5);margin-right:calc(var(--sgds-gutter-x)*-.5);margin-top:calc(var(--sgds-gutter-y)*-1)}.row>*{flex-shrink:0;margin-top:var(--sgds-gutter-y);max-width:100%;padding-left:calc(var(--sgds-gutter-x)*.5);padding-right:calc(var(--sgds-gutter-x)*.5);width:100%}.col{flex:1 0 0%}@media (min-width:768px){.col-md-4{flex:0 0 auto;width:33.33333333%}}@media (min-width:1400px){.col-xxl-2{flex:0 0 auto;width:16.66666667%}}.sgds.footer .footer-contact-links ul,.sgds.footer .footer-items ul,.sgds.footer .footer-mandatory-links ul{margin:0;padding:0}.sgds.footer .footer-contact-links ul li,.sgds.footer .footer-items ul li,.sgds.footer .footer-mandatory-links ul li{font-size:1rem;line-height:1.5;list-style-type:none}.sgds.footer .footer-contact-links ul li+li,.sgds.footer .footer-items ul li+li,.sgds.footer .footer-mandatory-links ul li+li{margin-top:1rem}.sgds.footer .footer-contact-links ul li a,.sgds.footer .footer-items ul li a,.sgds.footer .footer-mandatory-links ul li a{color:#d0d5dd;text-decoration:none}.sgds.footer,.sgds.footer .footer-contact-links ul li a:hover,.sgds.footer .footer-items ul li a:hover,.sgds.footer .footer-mandatory-links ul li a:hover{color:#f7f7f7}.sgds.footer{height:auto}.sgds.footer .footer-top{background-color:#111;padding:3rem 0 1.5rem}.sgds.footer .footer-header{margin-bottom:1.5rem}.sgds.footer .footer-header .title{margin-bottom:1rem}.sgds.footer .footer-header .description{color:#d0d5dd}@media (max-width:575.98px){.sgds.footer .footer-items>div[class*=col]+div[class*=col]{margin-top:2rem}}.sgds.footer .footer-items .title{font-weight:700}.sgds.footer .footer-items .links{margin-top:1rem}.sgds.footer .footer-contact-links{margin-top:2rem}@media (min-width:992px){.sgds.footer .footer-contact-links ul li{display:inline-block}.sgds.footer .footer-contact-links ul li+li{margin-left:1rem}}.sgds.footer .footer-bottom{background-color:#111;padding:1.5rem 0}@media (min-width:992px){.sgds.footer .footer-mandatory-links ul li{display:inline-block}.sgds.footer .footer-mandatory-links ul li+li{margin-left:1rem}}@media (max-width:991.98px){.sgds.footer .footer-copyrights{margin-top:1rem}}.d-flex{display:flex!important}.text-end{text-align:right!important}@media (min-width:992px){.justify-content-lg-end{justify-content:flex-end!important}}`;
+
+export { css_248z as default };
+//# sourceMappingURL=footer.js.map

package/react/components/Footer/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/react/components/Footer/sgds-footer.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-footer.cjs.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerStyle from \"./footer.css\";\nexport interface ColumnLinks {\n  title: string;\n  links: Links[];\n}\nexport interface Links {\n  href: string;\n  label: string;\n}\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @csspart footer-top - The component's footer-top section container.\n * @csspart footer-bottom - The component's footer-bottom section container.\n *\n * @cssproperty footer-top - The component's footer-top section container.\n * @cssproperty footer-bottom - The component's footer-bottom section container.\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets title of SgdsFooter\n   */\n  @property({ type: String })\n  title = \"\";\n\n  /**\n   * \tSets description of SgdsFooter\n   */\n  @property({ type: String })\n  description = \"\";\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * Array of type\n   *\n   * `interface ColumnLinks { title: string; links : Links[] } interface Links { href: string; label: string; }`\n   */\n  @property({\n    type: Array\n  })\n  links: ColumnLinks[] = [];\n\n  /**\n   * String date for last updated date\n   */\n  @property({ type: String })\n  lastUpdatedDate = \"\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  render() {\n    // if description is defined\n    const hasDescription = html` <div class=\"description\">${this.description}</div>`;\n\n    return html`\n      <footer class=\"sgds footer\">\n        <section class=\"footer-top\" part=\"footer-top\">\n          <div class=\"container-fluid\">\n            <div class=\"row footer-header\">\n              <div class=\"col col-lg-6 col-md-12\">\n                <div class=\"title\">${this.title ? this.title : \"Footer title\"}</div>\n                ${this.description ? hasDescription : undefined}\n              </div>\n            </div>\n            <div class=\"row footer-items\">\n              ${this.links.map(\n                (item: ColumnLinks) =>\n                  html`\n                    <div class=\"col-xxl-2 col-md-4 mb-3\">\n                      <div class=\"title\">${item.title}</div>\n                      <ul class=\"links\">\n                        ${item.links.map((link: Links) => html` <li><a href=${link.href}>${link.label}</a></li> `)}\n                      </ul>\n                    </div>\n                  `\n              )}\n            </div>\n            <div class=\"row footer-contact-links\">\n              <div class=\"col\">\n                <div class=\"d-flex justify-content-lg-end\">\n                  <ul>\n                    <li><a href=${this.contactHref}>Contact</a></li>\n                    <li><a href=${this.feedbackHref}>Feedback</a></li>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n        <section class=\"footer-bottom\" part=\"footer-bottom\">\n          <div class=\"container-fluid\">\n            <div class=\"row footer-mandatory-links\">\n              <div class=\"col\">\n                <ul>\n                  <li>\n                    <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\"\n                      >Report Vulnerability</a\n                    >\n                  </li>\n                  <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n                  <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n                </ul>\n              </div>\n            </div>\n            <div class=\"row footer-copyrights\">\n              <div class=\"col\">\n                <div class=\"d-flex justify-content-lg-end text-end\">\n                  © ${new Date().getFullYear()} ${this.copyrightLiner}<br />\n                  Last Updated ${this.lastUpdatedDate}\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["SgdsElement","html","footerStyle","__decorate","property"],"mappings":"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"}

package/react/components/Footer/sgds-footer.js

@@ -0,0 +1,155 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './footer.js';
+
+/**
+ * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.
+ *
+ * @csspart footer-top - The component's footer-top section container.
+ * @csspart footer-bottom - The component's footer-bottom section container.
+ *
+ * @cssproperty footer-top - The component's footer-top section container.
+ * @cssproperty footer-bottom - The component's footer-bottom section container.
+ */
+class SgdsFooter extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 	Sets title of SgdsFooter
+         */
+        this.title = "";
+        /**
+         * 	Sets description of SgdsFooter
+         */
+        this.description = "";
+        /**
+         * 	Sets copyrightLiner of SgdsFooter
+         */
+        this.copyrightLiner = "Government of Singapore";
+        /**
+         * Array of type
+         *
+         * `interface ColumnLinks { title: string; links : Links[] } interface Links { href: string; label: string; }`
+         */
+        this.links = [];
+        /**
+         * String date for last updated date
+         */
+        this.lastUpdatedDate = "";
+        /**
+         * 	href link for contacts
+         */
+        this.contactHref = "#";
+        /**
+         * 	href link for feedback
+         */
+        this.feedbackHref = "#";
+        /**
+         * 	href link for privacy statement
+         */
+        this.privacyHref = "#";
+        /**
+         * 	href link for terms of use
+         */
+        this.termsOfUseHref = "#";
+    }
+    render() {
+        // if description is defined
+        const hasDescription = html ` <div class="description">${this.description}</div>`;
+        return html `
+      <footer class="sgds footer">
+        <section class="footer-top" part="footer-top">
+          <div class="container-fluid">
+            <div class="row footer-header">
+              <div class="col col-lg-6 col-md-12">
+                <div class="title">${this.title ? this.title : "Footer title"}</div>
+                ${this.description ? hasDescription : undefined}
+              </div>
+            </div>
+            <div class="row footer-items">
+              ${this.links.map((item) => html `
+                    <div class="col-xxl-2 col-md-4 mb-3">
+                      <div class="title">${item.title}</div>
+                      <ul class="links">
+                        ${item.links.map((link) => html ` <li><a href=${link.href}>${link.label}</a></li> `)}
+                      </ul>
+                    </div>
+                  `)}
+            </div>
+            <div class="row footer-contact-links">
+              <div class="col">
+                <div class="d-flex justify-content-lg-end">
+                  <ul>
+                    <li><a href=${this.contactHref}>Contact</a></li>
+                    <li><a href=${this.feedbackHref}>Feedback</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section class="footer-bottom" part="footer-bottom">
+          <div class="container-fluid">
+            <div class="row footer-mandatory-links">
+              <div class="col">
+                <ul>
+                  <li>
+                    <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer"
+                      >Report Vulnerability</a
+                    >
+                  </li>
+                  <li><a href=${this.privacyHref}>Privacy Statement</a></li>
+                  <li><a href=${this.termsOfUseHref}>Terms of use</a></li>
+                </ul>
+              </div>
+            </div>
+            <div class="row footer-copyrights">
+              <div class="col">
+                <div class="d-flex justify-content-lg-end text-end">
+                  © ${new Date().getFullYear()} ${this.copyrightLiner}<br />
+                  Last Updated ${this.lastUpdatedDate}
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </footer>
+    `;
+    }
+}
+SgdsFooter.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "copyrightLiner", void 0);
+__decorate([
+    property({
+        type: Array
+    })
+], SgdsFooter.prototype, "links", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "lastUpdatedDate", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "contactHref", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "feedbackHref", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "privacyHref", void 0);
+__decorate([
+    property({ type: String })
+], SgdsFooter.prototype, "termsOfUseHref", void 0);
+
+export { SgdsFooter, SgdsFooter as default };
+//# sourceMappingURL=sgds-footer.js.map