@govtechsg/sgds-web-component 3.15.1-rc.2 → 3.15.1-rc.3

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

@@ -2,6 +2,8 @@ import SgdsCloseButton from "../CloseButton/sgds-close-button";
 import { SgdsButton } from "../Button/sgds-button";
 import FormControlElement from "../../base/form-control-element";
 import SgdsIcon from "../Icon/sgds-icon";
+import type { ISgdsFileUploadFilesSelectedEventDetail } from "./types";
+export type { ISgdsFileUploadFilesSelectedEventDetail };
 declare const SgdsFileUpload_base: (new (...args: any[]) => import("../../utils/validatorMixin").ToBeValidatedElementInterface) & typeof FormControlElement;
 /**
  * @summary Allows users to upload files of various sizes and formats
@@ -9,6 +11,7 @@ declare const SgdsFileUpload_base: (new (...args: any[]) => import("../../utils/
  * @slot default - Label for file upload button
  *
  * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail
+ * @eventDetail {ISgdsFileUploadFilesSelectedEventDetail} sgds-files-selected
  */
 export declare class SgdsFileUpload extends SgdsFileUpload_base {
     static styles: import("lit").CSSResult[];

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

@@ -16,6 +16,7 @@ import { SgdsIcon } from '../Icon/sgds-icon.js';
  * @slot default - Label for file upload button
  *
  * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail
+ * @eventDetail {ISgdsFileUploadFilesSelectedEventDetail} sgds-files-selected
  */
 class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {
     constructor() {

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-file-upload.js","sources":["../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport fileUploadStyles from \"./file-upload.css\";\n\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n *\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail\n */\n\nexport class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, fileUploadStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-button\": SgdsButton,\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Allows multiple files to be listed for uploading */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /** Specify the acceptable file type  */\n  @property({ type: String, reflect: true }) accept = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  @state()\n  private selectedFiles: File[] = [];\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage(): string {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * Returns files selected for upload\n   */\n  public get files(): File[] {\n    return this.selectedFiles;\n  }\n\n  private _setFileList(files: FileList) {\n    this.emit(\"sgds-files-selected\", { detail: files });\n  }\n\n  private inputRef = createRef<HTMLInputElement>();\n\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  private _handleChange(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    super._mixinHandleChange(event);\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    this._mixinValidate(this.input);\n  }\n\n  private _clearAllFiles() {\n    const inputElement = this.inputRef.value;\n    const fileBuffer = new DataTransfer();\n    inputElement.files = fileBuffer.files;\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n  }\n\n  /**\n   * fileupload requries a custom _mixinResetFormControl for clearing files\n   */\n  private _mixinResetFormControl() {\n    this._clearAllFiles();\n    this._mixinResetValidity(this.input);\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label for=${this._controlId} id=${this._labelId} class=\"form-label\"> ${this.label} </label>\n    `;\n    return this.label && labelTemplate;\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  protected _renderFeedback() {\n    return html`\n      <div class=\"invalid-feedback-container\">\n        <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n        <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n          ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n        </div>\n      </div>\n    `;\n  }\n  render() {\n    const getCheckedIcon = () => {\n      return html`<sgds-icon name=\"check-circle-fill\" class=\"${this.invalid ? \"invalid\" : \"valid\"}\"></sgds-icon>`;\n    };\n\n    const listItems = this.selectedFiles.map(\n      (file, index) => html`\n        <li key=${index} class=\"file-upload-list-item\">\n          ${getCheckedIcon()}\n          <span class=\"filename\">${file.name}</span>\n          <sgds-close-button\n            aria-label=\"remove the file\"\n            @click=${() => this._removeFileHandler(index)}\n          ></sgds-close-button>\n        </li>\n      `\n    );\n\n    return html`\n      <div class=\"file-upload\">\n        <input\n          ${ref(this.inputRef)}\n          type=\"file\"\n          @change=${this._handleChange}\n          ?multiple=${this.multiple}\n          accept=${this.accept}\n          id=${this._controlId}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n        />\n        <div class=\"file-upload-container\">\n          ${this._renderLabel()}\n          <sgds-button variant=\"outline\" ?disabled=${this.disabled} @click=${this._handleClick}>\n            <label for=${this._controlId}><slot></slot></label>\n            <sgds-icon slot=\"rightIcon\" name=\"upload\"></sgds-icon>\n          </sgds-button>\n          ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}\n        </div>\n        <ul class=\"file-upload-list\">\n          ${listItems}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["fileUploadStyles"],"mappings":"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"}
+{"version":3,"file":"sgds-file-upload.js","sources":["../../../src/components/FileUpload/sgds-file-upload.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport fileUploadStyles from \"./file-upload.css\";\n\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport type { ISgdsFileUploadFilesSelectedEventDetail } from \"./types\";\nexport type { ISgdsFileUploadFilesSelectedEventDetail };\n\n/**\n * @summary Allows users to upload files of various sizes and formats\n *\n * @slot default - Label for file upload button\n *\n * @event sgds-files-selected - Emitted when files are selected for uploading. Access the selected files with event.target.detail\n * @eventDetail {ISgdsFileUploadFilesSelectedEventDetail} sgds-files-selected\n */\n\nexport class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, fileUploadStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-button\": SgdsButton,\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Allows multiple files to be listed for uploading */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /** Specify the acceptable file type  */\n  @property({ type: String, reflect: true }) accept = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  @state()\n  private selectedFiles: File[] = [];\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage(): string {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * Returns files selected for upload\n   */\n  public get files(): File[] {\n    return this.selectedFiles;\n  }\n\n  private _setFileList(files: FileList) {\n    this.emit<ISgdsFileUploadFilesSelectedEventDetail>(\"sgds-files-selected\", { detail: files });\n  }\n\n  private inputRef = createRef<HTMLInputElement>();\n\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  private _handleChange(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    super._mixinHandleChange(event);\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    this._mixinValidate(this.input);\n  }\n\n  private _clearAllFiles() {\n    const inputElement = this.inputRef.value;\n    const fileBuffer = new DataTransfer();\n    inputElement.files = fileBuffer.files;\n    this._setFileList(fileBuffer.files);\n    this.selectedFiles = Array.from(fileBuffer.files);\n  }\n\n  /**\n   * fileupload requries a custom _mixinResetFormControl for clearing files\n   */\n  private _mixinResetFormControl() {\n    this._clearAllFiles();\n    this._mixinResetValidity(this.input);\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label for=${this._controlId} id=${this._labelId} class=\"form-label\"> ${this.label} </label>\n    `;\n    return this.label && labelTemplate;\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  protected _renderFeedback() {\n    return html`\n      <div class=\"invalid-feedback-container\">\n        <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n        <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n          ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n        </div>\n      </div>\n    `;\n  }\n  render() {\n    const getCheckedIcon = () => {\n      return html`<sgds-icon name=\"check-circle-fill\" class=\"${this.invalid ? \"invalid\" : \"valid\"}\"></sgds-icon>`;\n    };\n\n    const listItems = this.selectedFiles.map(\n      (file, index) => html`\n        <li key=${index} class=\"file-upload-list-item\">\n          ${getCheckedIcon()}\n          <span class=\"filename\">${file.name}</span>\n          <sgds-close-button\n            aria-label=\"remove the file\"\n            @click=${() => this._removeFileHandler(index)}\n          ></sgds-close-button>\n        </li>\n      `\n    );\n\n    return html`\n      <div class=\"file-upload\">\n        <input\n          ${ref(this.inputRef)}\n          type=\"file\"\n          @change=${this._handleChange}\n          ?multiple=${this.multiple}\n          accept=${this.accept}\n          id=${this._controlId}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n        />\n        <div class=\"file-upload-container\">\n          ${this._renderLabel()}\n          <sgds-button variant=\"outline\" ?disabled=${this.disabled} @click=${this._handleClick}>\n            <label for=${this._controlId}><slot></slot></label>\n            <sgds-icon slot=\"rightIcon\" name=\"upload\"></sgds-icon>\n          </sgds-button>\n          ${this.hasFeedback && this.invalid ? this._renderFeedback() : this._renderHintText()}\n        </div>\n        <ul class=\"file-upload-list\">\n          ${listItems}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["fileUploadStyles"],"mappings":"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"}

package/components/FileUpload/types.d.ts

@@ -0,0 +1 @@
+export type ISgdsFileUploadFilesSelectedEventDetail = FileList;