@govtechsg/sgds-web-component 1.1.0 → 1.2.1

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

@@ -46,6 +46,7 @@ class SgdsFileUpload extends scopedElements.ScopedElementsMixin(sgdsElement["def
         /** @internal */
         this.inputRef = ref_js.createRef();
     }
+    /**@internal */
     static get scopedElements() {
         return {
             "sgds-button": sgdsButton.SgdsButton

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

@@ -1 +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 } from \"../Button/sgds-button\";\nimport styles from \"./sgds-file-upload.scss\";\n\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 --fileupload-file-icon-fill - Left icon fill color\n * @cssproperty --fileupload-remove-icon-fill - Remove icon fill color\n * @cssproperty --fileupload-remove-icon-hover-fill - Remove icon mouse over fill color\n *\n */\n\nexport class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {\n  static styles = [SgdsElement.styles, styles];\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  // /** Sets a unique id to the file input, required. */\n  // @property({ type: String }) controlId = \"\";\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  /** @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  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  /** @internal */\n  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  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=\"red\"\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 d-flex gap-2\">\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        class=\"d-none form-control\"\n        @change=${this.handleInputChange}\n        ?multiple=${this.multiple}\n        accept=${this.accept}\n      />\n      <sgds-button size=${this.size} variant=${this.variant} ?disabled=${this.disabled} @click=${this.handleClick}>\n        <slot></slot>\n      </sgds-button>\n\n      <ul class=\"sgds fileupload-list\">\n        ${listItems}\n      </ul>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["ScopedElementsMixin","SgdsElement","createRef","SgdsButton","html","unsafeSVG","ref","styles","__decorate","property"],"mappings":"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"}
+{"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 } from \"../Button/sgds-button\";\nimport styles from \"./sgds-file-upload.scss\";\n\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 --fileupload-file-icon-fill - Left icon fill color\n * @cssproperty --fileupload-remove-icon-fill - Remove icon fill color\n * @cssproperty --fileupload-remove-icon-hover-fill - Remove icon mouse over fill color\n *\n */\n\nexport class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {\n  static styles = [SgdsElement.styles, styles];\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  // /** Sets a unique id to the file input, required. */\n  // @property({ type: String }) controlId = \"\";\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  /** @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  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  /** @internal */\n  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  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=\"red\"\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 d-flex gap-2\">\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        class=\"d-none form-control\"\n        @change=${this.handleInputChange}\n        ?multiple=${this.multiple}\n        accept=${this.accept}\n      />\n      <sgds-button size=${this.size} variant=${this.variant} ?disabled=${this.disabled} @click=${this.handleClick}>\n        <slot></slot>\n      </sgds-button>\n\n      <ul class=\"sgds fileupload-list\">\n        ${listItems}\n      </ul>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["ScopedElementsMixin","SgdsElement","createRef","SgdsButton","html","unsafeSVG","ref","styles","__decorate","property"],"mappings":";;;;;;;;;;;;;;AA4BA;;;;;;;;;;AAUG;MAEU,cAAe,SAAQA,kCAAmB,CAACC,sBAAW,CAAC,CAAA;AAApE,IAAA,WAAA,GAAA;;;QAS+B,IAAO,CAAA,OAAA,GAA4B,SAAS,CAAC;;;;QAM1E,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAIjB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAIjB,IAAM,CAAA,MAAA,GAAG,EAAE,CAAC;;QAOZ,IAAW,CAAA,WAAA,GAAG,EAAE,CAAC;;QAIjB,IAAU,CAAA,UAAA,GAAG,EAAE,CAAC;;QAQR,IAAa,CAAA,aAAA,GAAW,EAAE,CAAC;;;QAU3B,IAAQ,CAAA,QAAA,GAAGC,gBAAS,EAAoB,CAAC;KAgHlD;;AAjKC,IAAA,WAAW,cAAc,GAAA;QACvB,OAAO;AACL,YAAA,aAAa,EAAEC,qBAAU;SAC1B,CAAC;KACH;AAqCD,IAAA,WAAW,CAAC,KAAe,EAAA;AACzB,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AACnB,QAAA,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;;KAElC;;AAOO,IAAA,WAAW,CAAC,KAAY,EAAA;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;;AAElB,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;;YAEzC,YAAY,CAAC,KAAK,EAAE,CAAC;SACtB;KACF;;AAGO,IAAA,iBAAiB,CAAC,KAAY,EAAA;AACpC,QAAA,MAAM,YAAY,GAAG,KAAK,CAAC,MAA0B,CAAC;AACtD,QAAA,MAAM,KAAK,GAAG,YAAY,CAAC,KAAiB,CAAC;AAE7C,QAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACpB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACxC;;AAED,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;;AAGD,IAAA,iBAAiB,CAAC,KAAa,EAAA;AAC7B,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACzC,QAAA,MAAM,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC;AAEvC,QAAA,MAAM,UAAU,GAAG,IAAI,YAAY,EAAE,CAAC;AACtC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC3C,IAAI,KAAK,KAAK,CAAC;gBAAE,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;SACvD;;AAGD,QAAA,YAAY,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;;AAEtC,QAAA,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACnC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;;QAGlD,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG,CAAC,WAAmB,KAAI;YAC7C,IAAI,WAAW,EAAE;gBACf,OAAOC,QAAI,CAAA,CAAG,EAAAC,sBAAS,CAAC,WAAW,CAAC,EAAE,CAAC;aACxC;AACD,YAAA,OAAOD,QAAI,CAAA,CAAA;;;;;;;;;;;aAWJ,CAAC;AACV,SAAC,CAAC;AAEF,QAAA,MAAM,aAAa,GAAG,CAAC,UAAkB,KAAI;YAC3C,IAAI,UAAU,EAAE;gBACd,OAAOA,QAAI,CAAA,CAAG,EAAAC,sBAAS,CAAC,UAAU,CAAC,EAAE,CAAC;aACvC;AACD,YAAA,OAAOD,QAAI,CAAA,CAAA;;;;;;;;;;;;aAYJ,CAAC;AACV,SAAC,CAAC;AAEF,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CACtC,CAAC,IAAI,EAAE,KAAK,KAAKA,QAAI,CAAA,CAAA;kBACT,KAAK,CAAA;AACL,gBAAA,EAAA,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;AACf,iCAAA,EAAA,IAAI,CAAC,IAAI,CAAA;AACnB,uBAAA,EAAA,MAAM,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA,CAAA,EAAI,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;;AAEvF,MAAA,CAAA,CACF,CAAC;AAEF,QAAA,OAAOA,QAAI,CAAA,CAAA;;AAEL,QAAA,EAAAE,UAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;;;AAGV,gBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;AACpB,kBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AAChB,eAAA,EAAA,IAAI,CAAC,MAAM,CAAA;;AAEF,wBAAA,EAAA,IAAI,CAAC,IAAI,CAAY,SAAA,EAAA,IAAI,CAAC,OAAO,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAW,QAAA,EAAA,IAAI,CAAC,WAAW,CAAA;;;;;UAKvG,SAAS,CAAA;;KAEd,CAAC;KACH;;AAlKM,cAAM,CAAA,MAAA,GAAG,CAACL,sBAAW,CAAC,MAAM,EAAEM,yBAAM,CAA9B,CAAgC;AAQhBC,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA8C,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAM1ED,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjBD,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjBD,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC9B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGiBD,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI/CD,gBAAA,CAAA;AADC,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACV,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjBD,gBAAA,CAAA;AADC,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACX,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIRD,gBAAA,CAAA;IADPC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AACJ,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI5BD,gBAAA,CAAA;AADP,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AACS,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

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

@@ -15,6 +15,7 @@ declare const SgdsFileUpload_base: typeof SgdsElement & import("@open-wc/dedupe-
  */
 export declare class SgdsFileUpload extends SgdsFileUpload_base {
     static styles: import("lit").CSSResultGroup[];
+    /**@internal */
     static get scopedElements(): {
         "sgds-button": typeof SgdsButton;
     };

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

@@ -42,6 +42,7 @@ class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {
         /** @internal */
         this.inputRef = createRef();
     }
+    /**@internal */
     static get scopedElements() {
         return {
             "sgds-button": SgdsButton

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 { 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 } from \"../Button/sgds-button\";\nimport styles from \"./sgds-file-upload.scss\";\n\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 --fileupload-file-icon-fill - Left icon fill color\n * @cssproperty --fileupload-remove-icon-fill - Remove icon fill color\n * @cssproperty --fileupload-remove-icon-hover-fill - Remove icon mouse over fill color\n *\n */\n\nexport class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {\n  static styles = [SgdsElement.styles, styles];\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  // /** Sets a unique id to the file input, required. */\n  // @property({ type: String }) controlId = \"\";\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  /** @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  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  /** @internal */\n  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  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=\"red\"\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 d-flex gap-2\">\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        class=\"d-none form-control\"\n        @change=${this.handleInputChange}\n        ?multiple=${this.multiple}\n        accept=${this.accept}\n      />\n      <sgds-button size=${this.size} variant=${this.variant} ?disabled=${this.disabled} @click=${this.handleClick}>\n        <slot></slot>\n      </sgds-button>\n\n      <ul class=\"sgds fileupload-list\">\n        ${listItems}\n      </ul>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["styles"],"mappings":"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"}
+{"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 } from \"../Button/sgds-button\";\nimport styles from \"./sgds-file-upload.scss\";\n\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 --fileupload-file-icon-fill - Left icon fill color\n * @cssproperty --fileupload-remove-icon-fill - Remove icon fill color\n * @cssproperty --fileupload-remove-icon-hover-fill - Remove icon mouse over fill color\n *\n */\n\nexport class SgdsFileUpload extends ScopedElementsMixin(SgdsElement) {\n  static styles = [SgdsElement.styles, styles];\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  // /** Sets a unique id to the file input, required. */\n  // @property({ type: String }) controlId = \"\";\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  /** @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  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  /** @internal */\n  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  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=\"red\"\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 d-flex gap-2\">\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        class=\"d-none form-control\"\n        @change=${this.handleInputChange}\n        ?multiple=${this.multiple}\n        accept=${this.accept}\n      />\n      <sgds-button size=${this.size} variant=${this.variant} ?disabled=${this.disabled} @click=${this.handleClick}>\n        <slot></slot>\n      </sgds-button>\n\n      <ul class=\"sgds fileupload-list\">\n        ${listItems}\n      </ul>\n    `;\n  }\n}\n\nexport default SgdsFileUpload;\n"],"names":["styles"],"mappings":"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"}