@carbon/web-components 2.58.0 → 2.59.0-rc.0

package/es/components/file-uploader/file-uploader-button.js

@@ -14,7 +14,7 @@ import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
 import if_non_empty_default from "../../globals/directives/if-non-empty.js";
 import file_uploader_default from "./file-uploader.scss.js";
 import { LitElement, html } from "lit";
-import { property } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 //#region src/components/file-uploader/file-uploader-button.ts
 /**
@@ -23,6 +23,7 @@ import { classMap } from "lit/directives/class-map.js";
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
+const selectorInput = `.cds--file-input`;
 /**
 * File uploader button .
 *
@@ -45,18 +46,16 @@ let CDSFileUploaderButton = class CDSFileUploaderButton extends HostListenerMixi
 	*/
 	_handleClick(event) {
 		event.target.value = null;
-		const { selectorInput } = this.constructor;
-		this?.shadowRoot?.querySelector(selectorInput)?.setAttribute("value", "");
-		(this?.shadowRoot?.querySelector(selectorInput)).click();
+		this._fileInput.setAttribute("value", "");
+		this._fileInput.click();
 	}
 	/**
 	* Handles `keydown` event on the button.
 	*/
 	_handleKeyDown(event) {
-		const { selectorInput } = this.constructor;
 		if (event.key === "Enter" || event.key === "Space") {
-			this?.shadowRoot?.querySelector(selectorInput)?.setAttribute("value", "");
-			(this?.shadowRoot?.querySelector(selectorInput)).click();
+			this._fileInput.setAttribute("value", "");
+			this._fileInput.click();
 		}
 	}
 	/**
@@ -66,14 +65,13 @@ let CDSFileUploaderButton = class CDSFileUploaderButton extends HostListenerMixi
 	*/
 	_handleChange(event) {
 		const addedFiles = this._getFiles(event);
-		const { eventChange, selectorInput } = this.constructor;
+		const { eventChange } = this.constructor;
 		this.dispatchEvent(new CustomEvent(eventChange, {
 			bubbles: true,
 			composed: true,
 			detail: { addedFiles }
 		}));
-		const fileInput = this?.shadowRoot?.querySelector(selectorInput);
-		if (fileInput) fileInput.value = "";
+		this._fileInput.value = "";
 	}
 	/**
 	* @param event The event.
@@ -134,12 +132,13 @@ let CDSFileUploaderButton = class CDSFileUploaderButton extends HostListenerMixi
 	* A selector that will return the file `input`.
 	*/
 	static get selectorInput() {
-		return `.cds--file-input`;
+		return selectorInput;
 	}
 	static {
 		this.styles = file_uploader_default;
 	}
 };
+__decorate([query(selectorInput)], CDSFileUploaderButton.prototype, "_fileInput", void 0);
 __decorate([property({
 	reflect: true,
 	attribute: "button-kind"

package/es/components/file-uploader/file-uploader-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-uploader-button.js","names":["ifNonEmpty","styles","customElement"],"sources":["../../../src/components/file-uploader/file-uploader-button.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport styles from './file-uploader.scss?lit';\nimport { BUTTON_KIND, BUTTON_SIZE } from '../button/defs';\n\nexport { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';\n\n/**\n * File uploader button .\n *\n * @element cds-file-uploader-button\n * @fires cds-file-uploader-button-changed The custom event fired when there is a user gesture to select files to upload.\n */\n@customElement(`${prefix}-file-uploader-button`)\nclass CDSFileUploaderButton extends HostListenerMixin(LitElement) {\n  /**\n   * Handles `click` event on the button.\n   */\n  private _handleClick(event) {\n    event.target.value = null;\n    const { selectorInput } = this.constructor as typeof CDSFileUploaderButton;\n    this?.shadowRoot?.querySelector(selectorInput)?.setAttribute('value', '');\n    (this?.shadowRoot?.querySelector(selectorInput) as HTMLElement).click();\n  }\n\n  /**\n   * Handles `keydown` event on the button.\n   */\n  private _handleKeyDown(event) {\n    const { selectorInput } = this.constructor as typeof CDSFileUploaderButton;\n    if (event.key === 'Enter' || event.key === 'Space') {\n      this?.shadowRoot?.querySelector(selectorInput)?.setAttribute('value', '');\n      (this?.shadowRoot?.querySelector(selectorInput) as HTMLElement).click();\n    }\n  }\n\n  /**\n   * Handles user gesture to select files to upload.\n   *\n   * @param event The event.\n   */\n  private _handleChange(event: Event | DragEvent) {\n    const addedFiles = this._getFiles(event);\n    const { eventChange, selectorInput } = this\n      .constructor as typeof CDSFileUploaderButton;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          addedFiles,\n        },\n      })\n    );\n\n    const fileInput = this?.shadowRoot?.querySelector(selectorInput);\n    if (fileInput) {\n      (fileInput as HTMLInputElement).value = '';\n    }\n  }\n\n  /**\n   * @param event The event.\n   * @returns The list of files user chose to upload.\n   */\n  private _getFiles(event: Event | DragEvent) {\n    const { files } =\n      (event.type === 'drop'\n        ? (event as DragEvent).dataTransfer\n        : (event.target as HTMLInputElement)) ?? {};\n    const { accept } = this;\n    if (!accept || !/^(change|drop)$/.test(event.type)) {\n      return Array.from(files ?? []);\n    }\n    const acceptedTypes = new Set(accept.split(/[\\s,]+/).filter(Boolean));\n    return Array.prototype.filter.call(\n      files,\n      ({ name, type: mimeType = '' }) => {\n        const fileExtensionRegExp = /\\.[^.]+$/;\n        const hasFileExtension = fileExtensionRegExp.test(name);\n        const [fileExtension] = !hasFileExtension\n          ? [undefined]\n          : (fileExtensionRegExp.exec(name) ?? []);\n\n        return (\n          acceptedTypes.has(mimeType) ||\n          (fileExtension && acceptedTypes.has(fileExtension))\n        );\n      }\n    ) as File[];\n  }\n\n  /**\n   * Button kind.\n   */\n  @property({ reflect: true, attribute: 'button-kind' })\n  buttonKind = BUTTON_KIND.PRIMARY;\n\n  /**\n   * Button size.\n   */\n  @property({ reflect: true })\n  size = BUTTON_SIZE.MEDIUM;\n\n  /**\n   * The file types the file input should accept, separated by space.\n   */\n  @property()\n  accept = '';\n\n  /**\n   * `true` if this drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if this drop container should accept more than one files at once.\n   * Note that even with `false` set here, user _can_ select multiple files one by one.\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * The name of the input.\n   */\n  @property({ reflect: true })\n  name = '';\n\n  /**\n   * The shadow DOM slot to put this drop container in.\n   */\n  @property({ reflect: true })\n  slot = 'drop-container';\n\n  render() {\n    const {\n      accept,\n      disabled,\n      multiple,\n      name,\n      buttonKind,\n      size,\n      _handleChange: handleChange,\n    } = this;\n    const acceptForInput = accept\n      ? accept\n          .split(/[\\s,]+/)\n          .filter(Boolean)\n          .join(',')\n      : '';\n\n    const labelClasses = classMap({\n      [`${prefix}--file-browse-btn`]: true,\n      [`${prefix}--file-browse-btn--disabled`]: disabled,\n    });\n    const buttonClasses = classMap({\n      [`${prefix}--btn`]: true,\n      [`${prefix}--btn--${buttonKind}`]: buttonKind,\n      [`${prefix}--layout--size-${size}`]: size,\n      [`${prefix}--btn--disabled`]: disabled,\n      [`${prefix}--btn--${size}`]: size,\n    });\n    return html`\n      <button\n        type=\"button\"\n        class=\"${buttonClasses}\"\n        @click=\"${this._handleClick}\"\n        @keydown=\"${this._handleKeyDown}\">\n        <slot></slot>\n      </button>\n      <label class=\"${labelClasses}\" for=\"file\"> </label>\n      <input\n        id=\"file\"\n        type=\"file\"\n        class=\"${prefix}--file-input\"\n        tabindex=\"-1\"\n        accept=\"${ifNonEmpty(acceptForInput)}\"\n        ?disabled=\"${disabled}\"\n        ?multiple=\"${multiple}\"\n        name=\"${ifNonEmpty(name)}\"\n        @change=\"${handleChange}\" />\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when there is a user gesture to select files to upload.\n   */\n  static get eventChange() {\n    return `${prefix}-file-uploader-button-changed`;\n  }\n\n  /**\n   * A selector that will return the file `input`.\n   */\n  static get selectorInput() {\n    return `.${prefix}--file-input`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSFileUploaderButton;\n"],"mappings":"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"}
+{"version":3,"file":"file-uploader-button.js","names":["ifNonEmpty","styles","customElement"],"sources":["../../../src/components/file-uploader/file-uploader-button.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport styles from './file-uploader.scss?lit';\nimport { BUTTON_KIND, BUTTON_SIZE } from '../button/defs';\n\nexport { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';\n\nconst selectorInput = `.${prefix}--file-input`;\n\n/**\n * File uploader button .\n *\n * @element cds-file-uploader-button\n * @fires cds-file-uploader-button-changed The custom event fired when there is a user gesture to select files to upload.\n */\n@customElement(`${prefix}-file-uploader-button`)\nclass CDSFileUploaderButton extends HostListenerMixin(LitElement) {\n  @query(selectorInput)\n  private _fileInput!: HTMLInputElement;\n\n  /**\n   * Handles `click` event on the button.\n   */\n  private _handleClick(event) {\n    event.target.value = null;\n    this._fileInput.setAttribute('value', '');\n    this._fileInput.click();\n  }\n\n  /**\n   * Handles `keydown` event on the button.\n   */\n  private _handleKeyDown(event) {\n    if (event.key === 'Enter' || event.key === 'Space') {\n      this._fileInput.setAttribute('value', '');\n      this._fileInput.click();\n    }\n  }\n\n  /**\n   * Handles user gesture to select files to upload.\n   *\n   * @param event The event.\n   */\n  private _handleChange(event: Event | DragEvent) {\n    const addedFiles = this._getFiles(event);\n    const { eventChange } = this.constructor as typeof CDSFileUploaderButton;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          addedFiles,\n        },\n      })\n    );\n\n    this._fileInput.value = '';\n  }\n\n  /**\n   * @param event The event.\n   * @returns The list of files user chose to upload.\n   */\n  private _getFiles(event: Event | DragEvent) {\n    const { files } =\n      (event.type === 'drop'\n        ? (event as DragEvent).dataTransfer\n        : (event.target as HTMLInputElement)) ?? {};\n    const { accept } = this;\n    if (!accept || !/^(change|drop)$/.test(event.type)) {\n      return Array.from(files ?? []);\n    }\n    const acceptedTypes = new Set(accept.split(/[\\s,]+/).filter(Boolean));\n    return Array.prototype.filter.call(\n      files,\n      ({ name, type: mimeType = '' }) => {\n        const fileExtensionRegExp = /\\.[^.]+$/;\n        const hasFileExtension = fileExtensionRegExp.test(name);\n        const [fileExtension] = !hasFileExtension\n          ? [undefined]\n          : (fileExtensionRegExp.exec(name) ?? []);\n\n        return (\n          acceptedTypes.has(mimeType) ||\n          (fileExtension && acceptedTypes.has(fileExtension))\n        );\n      }\n    ) as File[];\n  }\n\n  /**\n   * Button kind.\n   */\n  @property({ reflect: true, attribute: 'button-kind' })\n  buttonKind = BUTTON_KIND.PRIMARY;\n\n  /**\n   * Button size.\n   */\n  @property({ reflect: true })\n  size = BUTTON_SIZE.MEDIUM;\n\n  /**\n   * The file types the file input should accept, separated by space.\n   */\n  @property()\n  accept = '';\n\n  /**\n   * `true` if this drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if this drop container should accept more than one files at once.\n   * Note that even with `false` set here, user _can_ select multiple files one by one.\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * The name of the input.\n   */\n  @property({ reflect: true })\n  name = '';\n\n  /**\n   * The shadow DOM slot to put this drop container in.\n   */\n  @property({ reflect: true })\n  slot = 'drop-container';\n\n  render() {\n    const {\n      accept,\n      disabled,\n      multiple,\n      name,\n      buttonKind,\n      size,\n      _handleChange: handleChange,\n    } = this;\n    const acceptForInput = accept\n      ? accept\n          .split(/[\\s,]+/)\n          .filter(Boolean)\n          .join(',')\n      : '';\n\n    const labelClasses = classMap({\n      [`${prefix}--file-browse-btn`]: true,\n      [`${prefix}--file-browse-btn--disabled`]: disabled,\n    });\n    const buttonClasses = classMap({\n      [`${prefix}--btn`]: true,\n      [`${prefix}--btn--${buttonKind}`]: buttonKind,\n      [`${prefix}--layout--size-${size}`]: size,\n      [`${prefix}--btn--disabled`]: disabled,\n      [`${prefix}--btn--${size}`]: size,\n    });\n    return html`\n      <button\n        type=\"button\"\n        class=\"${buttonClasses}\"\n        @click=\"${this._handleClick}\"\n        @keydown=\"${this._handleKeyDown}\">\n        <slot></slot>\n      </button>\n      <label class=\"${labelClasses}\" for=\"file\"> </label>\n      <input\n        id=\"file\"\n        type=\"file\"\n        class=\"${prefix}--file-input\"\n        tabindex=\"-1\"\n        accept=\"${ifNonEmpty(acceptForInput)}\"\n        ?disabled=\"${disabled}\"\n        ?multiple=\"${multiple}\"\n        name=\"${ifNonEmpty(name)}\"\n        @change=\"${handleChange}\" />\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when there is a user gesture to select files to upload.\n   */\n  static get eventChange() {\n    return `${prefix}-file-uploader-button-changed`;\n  }\n\n  /**\n   * A selector that will return the file `input`.\n   */\n  static get selectorInput() {\n    return selectorInput;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSFileUploaderButton;\n"],"mappings":"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"}

package/es/components/file-uploader/file-uploader-drop-container.d.ts

@@ -27,6 +27,7 @@ declare const CDSFileUploaderDropContainer_base: {
  * @fires cds-file-uploader-drop-container-changed The custom event fired when there is a user gesture to select files to upload.
  */
 declare class CDSFileUploaderDropContainer extends CDSFileUploaderDropContainer_base {
+    private _fileInput;
     /**
      * `true` to show the active state of this UI.
      */

package/es/components/file-uploader/file-uploader-drop-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-uploader-drop-container.d.ts","sourceRoot":"","sources":["../../../src/components/file-uploader/file-uploader-drop-container.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,EAAE,yBAAyB,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;;;;;;;;;;uBAK/E,CAAC;;;;;AAKd;;;;;GAKG;AACH,cACM,4BAA6B,SAAQ,iCAA6B;IACtE;;OAEG;IACH,OAAO,CAAC,OAAO,CAAS;IAExB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAyBrB;;;;OAIG;IAMH,OAAO,CAAC,WAAW;IAiBnB;;;OAGG;IACH,OAAO,CAAC,SAAS;IAuBjB;;OAEG;IAEH,MAAM,SAAM;IAEZ;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,IAAI,SAAoB;IAExB,MAAM;IA0CN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;OAEG;IACH,MAAM,KAAK,aAAa,WAEvB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,4BAA4B,CAAC"}
+{"version":3,"file":"file-uploader-drop-container.d.ts","sourceRoot":"","sources":["../../../src/components/file-uploader/file-uploader-drop-container.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,EAAE,yBAAyB,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;;;;;;;;;;uBAKlD,CAAC;;;;;AAO3C;;;;;GAKG;AACH,cACM,4BAA6B,SAAQ,iCAA6B;IAEtE,OAAO,CAAC,UAAU,CAAoB;IAEtC;;OAEG;IACH,OAAO,CAAC,OAAO,CAAS;IAExB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAsBrB;;;;OAIG;IAMH,OAAO,CAAC,WAAW;IAiBnB;;;OAGG;IACH,OAAO,CAAC,SAAS;IAuBjB;;OAEG;IAEH,MAAM,SAAM;IAEZ;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,IAAI,SAAoB;IAExB,MAAM;IA0CN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;OAEG;IACH,MAAM,KAAK,aAAa,WAEvB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,4BAA4B,CAAC"}

package/es/components/file-uploader/file-uploader-drop-container.js

@@ -14,7 +14,7 @@ import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
 import if_non_empty_default from "../../globals/directives/if-non-empty.js";
 import file_uploader_default from "./file-uploader.scss.js";
 import { LitElement, html } from "lit";
-import { property } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 //#region src/components/file-uploader/file-uploader-drop-container.ts
 /**
@@ -23,6 +23,7 @@ import { classMap } from "lit/directives/class-map.js";
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
+const selectorInput = `.cds--file-input`;
 /**
 * The value to set to `event.dataTransfer.dropEffect`, keyed by the event nane.
 */
@@ -52,7 +53,7 @@ let CDSFileUploaderDropContainer = class CDSFileUploaderDropContainer extends Ho
 	* @param event The event.
 	*/
 	_handleChange(event) {
-		const { eventChange, selectorInput } = this.constructor;
+		const { eventChange } = this.constructor;
 		const { files } = (event.type === "drop" ? event.dataTransfer : event.target) ?? {};
 		const addedFiles = this._getFiles(event, files);
 		this.dispatchEvent(new CustomEvent(eventChange, {
@@ -60,8 +61,7 @@ let CDSFileUploaderDropContainer = class CDSFileUploaderDropContainer extends Ho
 			composed: true,
 			detail: { addedFiles }
 		}));
-		const fileInput = this?.shadowRoot?.querySelector(selectorInput);
-		if (fileInput) fileInput.value = "";
+		this._fileInput.value = "";
 	}
 	/**
 	* Handles `dragover`, `dragleave` and `drop` events.
@@ -129,12 +129,13 @@ let CDSFileUploaderDropContainer = class CDSFileUploaderDropContainer extends Ho
 	* A selector that will return the file `input`.
 	*/
 	static get selectorInput() {
-		return `.cds--file-input`;
+		return selectorInput;
 	}
 	static {
 		this.styles = file_uploader_default;
 	}
 };
+__decorate([query(selectorInput)], CDSFileUploaderDropContainer.prototype, "_fileInput", void 0);
 __decorate([
 	HostListener("dragover"),
 	HostListener("dragleave"),

package/es/components/file-uploader/file-uploader-drop-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-uploader-drop-container.js","names":["ifNonEmpty","styles","customElement"],"sources":["../../../src/components/file-uploader/file-uploader-drop-container.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport styles from './file-uploader.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';\n\n/**\n * The value to set to `event.dataTransfer.dropEffect`, keyed by the event nane.\n */\nconst dropEffects = {\n  dragover: 'copy',\n  dragleave: 'move',\n};\n\n/**\n * File uploader drop container.\n *\n * @element cds-file-uploader-drop-container\n * @fires cds-file-uploader-drop-container-changed The custom event fired when there is a user gesture to select files to upload.\n */\n@customElement(`${prefix}-file-uploader-drop-container`)\nclass CDSFileUploaderDropContainer extends HostListenerMixin(LitElement) {\n  /**\n   * `true` to show the active state of this UI.\n   */\n  private _active = false;\n\n  /**\n   * Handles user gesture to select files to upload.\n   *\n   * @param event The event.\n   */\n  private _handleChange(event: Event | DragEvent) {\n    const { eventChange, selectorInput } = this\n      .constructor as typeof CDSFileUploaderDropContainer;\n    const { files } =\n      (event.type === 'drop'\n        ? (event as DragEvent).dataTransfer\n        : (event.target as HTMLInputElement)) ?? {};\n    const addedFiles = this._getFiles(event, files);\n\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          addedFiles,\n        },\n      })\n    );\n\n    const fileInput = this?.shadowRoot?.querySelector(selectorInput);\n    if (fileInput) {\n      (fileInput as HTMLInputElement).value = ''; // carbon-web-components#904\n    }\n  }\n\n  /**\n   * Handles `dragover`, `dragleave` and `drop` events.\n   *\n   * @param event The event.\n   */\n  @HostListener('dragover')\n  @HostListener('dragleave')\n  @HostListener('drop')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleDrag(event: DragEvent) {\n    event.preventDefault(); // Prevents page navigation upon dropping\n    if (this.disabled) {\n      return;\n    }\n    const { dataTransfer, type } = event;\n    const dropEffect = dropEffects[type];\n    if (dataTransfer && dropEffect) {\n      dataTransfer.dropEffect = dropEffect;\n    }\n    this._active = type === 'dragover';\n    if (type === 'drop') {\n      this._handleChange(event);\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * @param event The event.\n   * @returns The list of files user chose to upload.\n   */\n  private _getFiles(event, files) {\n    const { accept } = this;\n    if (!accept || !/^(change|drop)$/.test(event.type)) {\n      return Array.from(files ?? []);\n    }\n    const acceptedTypes = new Set(accept.split(/[\\s,]+/).filter(Boolean));\n    return Array.prototype.filter.call(\n      files,\n      ({ name, type: mimeType = '' }) => {\n        const fileExtensionRegExp = /\\.[^.]+$/;\n        const hasFileExtension = fileExtensionRegExp.test(name);\n        const [fileExtension] = !hasFileExtension\n          ? [undefined]\n          : (fileExtensionRegExp.exec(name) ?? []);\n\n        return (\n          acceptedTypes.has(mimeType) ||\n          (fileExtension && acceptedTypes.has(fileExtension))\n        );\n      }\n    ) as File[];\n  }\n\n  /**\n   * The file types the file input should accept, separated by spaces and/or commas.\n   */\n  @property()\n  accept = '';\n\n  /**\n   * `true` if this drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if this drop container should accept more than one files at once.\n   * Note that even with `false` set here, user _can_ select multiple files one by one.\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * The name of the input.\n   */\n  @property({ reflect: true })\n  name = '';\n\n  /**\n   * The shadow DOM slot to put this drop container in.\n   */\n  @property({ reflect: true })\n  slot = 'drop-container';\n\n  render() {\n    const {\n      accept,\n      disabled,\n      multiple,\n      name,\n      _active: active,\n      _handleChange: handleChange,\n    } = this;\n    const acceptForInput = accept\n      ? accept\n          .split(/[\\s,]+/)\n          .filter(Boolean)\n          .join(',')\n      : '';\n    const labelClasses = classMap({\n      [`${prefix}--file-browse-btn`]: true,\n      [`${prefix}--file-browse-btn--disabled`]: disabled,\n    });\n    const dropareaClasses = classMap({\n      [`${prefix}--file__drop-container`]: true,\n      [`${prefix}--file__drop-container--drag-over`]: active,\n    });\n    return html`\n      <label class=\"${labelClasses}\" for=\"file\" tabindex=\"0\">\n        <div class=\"${dropareaClasses}\" role=\"button\">\n          <slot></slot>\n          <input\n            id=\"file\"\n            type=\"file\"\n            name=\"${ifNonEmpty(name)}\"\n            class=\"${prefix}--file-input\"\n            tabindex=\"-1\"\n            accept=\"${ifNonEmpty(acceptForInput)}\"\n            ?disabled=\"${disabled}\"\n            ?multiple=\"${multiple}\"\n            @change=\"${handleChange}\" />\n        </div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when there is a user gesture to select files to upload.\n   */\n  static get eventChange() {\n    return `${prefix}-file-uploader-drop-container-changed`;\n  }\n\n  /**\n   * A selector that will return the file `input`.\n   */\n  static get selectorInput() {\n    return `.${prefix}--file-input`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSFileUploaderDropContainer;\n"],"mappings":"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"}
+{"version":3,"file":"file-uploader-drop-container.js","names":["ifNonEmpty","styles","customElement"],"sources":["../../../src/components/file-uploader/file-uploader-drop-container.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport styles from './file-uploader.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';\n\nconst selectorInput = `.${prefix}--file-input`;\n\n/**\n * The value to set to `event.dataTransfer.dropEffect`, keyed by the event nane.\n */\nconst dropEffects = {\n  dragover: 'copy',\n  dragleave: 'move',\n};\n\n/**\n * File uploader drop container.\n *\n * @element cds-file-uploader-drop-container\n * @fires cds-file-uploader-drop-container-changed The custom event fired when there is a user gesture to select files to upload.\n */\n@customElement(`${prefix}-file-uploader-drop-container`)\nclass CDSFileUploaderDropContainer extends HostListenerMixin(LitElement) {\n  @query(selectorInput)\n  private _fileInput!: HTMLInputElement;\n\n  /**\n   * `true` to show the active state of this UI.\n   */\n  private _active = false;\n\n  /**\n   * Handles user gesture to select files to upload.\n   *\n   * @param event The event.\n   */\n  private _handleChange(event: Event | DragEvent) {\n    const { eventChange } = this\n      .constructor as typeof CDSFileUploaderDropContainer;\n    const { files } =\n      (event.type === 'drop'\n        ? (event as DragEvent).dataTransfer\n        : (event.target as HTMLInputElement)) ?? {};\n    const addedFiles = this._getFiles(event, files);\n\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          addedFiles,\n        },\n      })\n    );\n\n    this._fileInput.value = ''; // carbon-web-components#904\n  }\n\n  /**\n   * Handles `dragover`, `dragleave` and `drop` events.\n   *\n   * @param event The event.\n   */\n  @HostListener('dragover')\n  @HostListener('dragleave')\n  @HostListener('drop')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleDrag(event: DragEvent) {\n    event.preventDefault(); // Prevents page navigation upon dropping\n    if (this.disabled) {\n      return;\n    }\n    const { dataTransfer, type } = event;\n    const dropEffect = dropEffects[type];\n    if (dataTransfer && dropEffect) {\n      dataTransfer.dropEffect = dropEffect;\n    }\n    this._active = type === 'dragover';\n    if (type === 'drop') {\n      this._handleChange(event);\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * @param event The event.\n   * @returns The list of files user chose to upload.\n   */\n  private _getFiles(event, files) {\n    const { accept } = this;\n    if (!accept || !/^(change|drop)$/.test(event.type)) {\n      return Array.from(files ?? []);\n    }\n    const acceptedTypes = new Set(accept.split(/[\\s,]+/).filter(Boolean));\n    return Array.prototype.filter.call(\n      files,\n      ({ name, type: mimeType = '' }) => {\n        const fileExtensionRegExp = /\\.[^.]+$/;\n        const hasFileExtension = fileExtensionRegExp.test(name);\n        const [fileExtension] = !hasFileExtension\n          ? [undefined]\n          : (fileExtensionRegExp.exec(name) ?? []);\n\n        return (\n          acceptedTypes.has(mimeType) ||\n          (fileExtension && acceptedTypes.has(fileExtension))\n        );\n      }\n    ) as File[];\n  }\n\n  /**\n   * The file types the file input should accept, separated by spaces and/or commas.\n   */\n  @property()\n  accept = '';\n\n  /**\n   * `true` if this drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if this drop container should accept more than one files at once.\n   * Note that even with `false` set here, user _can_ select multiple files one by one.\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * The name of the input.\n   */\n  @property({ reflect: true })\n  name = '';\n\n  /**\n   * The shadow DOM slot to put this drop container in.\n   */\n  @property({ reflect: true })\n  slot = 'drop-container';\n\n  render() {\n    const {\n      accept,\n      disabled,\n      multiple,\n      name,\n      _active: active,\n      _handleChange: handleChange,\n    } = this;\n    const acceptForInput = accept\n      ? accept\n          .split(/[\\s,]+/)\n          .filter(Boolean)\n          .join(',')\n      : '';\n    const labelClasses = classMap({\n      [`${prefix}--file-browse-btn`]: true,\n      [`${prefix}--file-browse-btn--disabled`]: disabled,\n    });\n    const dropareaClasses = classMap({\n      [`${prefix}--file__drop-container`]: true,\n      [`${prefix}--file__drop-container--drag-over`]: active,\n    });\n    return html`\n      <label class=\"${labelClasses}\" for=\"file\" tabindex=\"0\">\n        <div class=\"${dropareaClasses}\" role=\"button\">\n          <slot></slot>\n          <input\n            id=\"file\"\n            type=\"file\"\n            name=\"${ifNonEmpty(name)}\"\n            class=\"${prefix}--file-input\"\n            tabindex=\"-1\"\n            accept=\"${ifNonEmpty(acceptForInput)}\"\n            ?disabled=\"${disabled}\"\n            ?multiple=\"${multiple}\"\n            @change=\"${handleChange}\" />\n        </div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when there is a user gesture to select files to upload.\n   */\n  static get eventChange() {\n    return `${prefix}-file-uploader-drop-container-changed`;\n  }\n\n  /**\n   * A selector that will return the file `input`.\n   */\n  static get selectorInput() {\n    return selectorInput;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSFileUploaderDropContainer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,gBAAgB;;;;AAKtB,MAAM,cAAc;CAClB,UAAU;CACV,WAAW;AACb;;;;;;;AAQA,IAAA,+BAAA,MACM,qCAAqC,kBAAkB,UAAU,CAAC,CAAC;;;iBAOrD;gBAuFT;kBAME;kBAOA;cAMJ;cAMA;;;;;;;CAzGP,cAAsB,OAA0B;EAC9C,MAAM,EAAE,gBAAgB,KACrB;EACH,MAAM,EAAE,WACL,MAAM,SAAS,SACX,MAAoB,eACpB,MAAM,WAAgC,CAAC;EAC9C,MAAM,aAAa,KAAK,UAAU,OAAO,KAAK;EAE9C,KAAK,cACH,IAAI,YAAY,aAAa;GAC3B,SAAS;GACT,UAAU;GACV,QAAQ,EACN,WACF;EACF,CAAC,CACH;EAEA,KAAK,WAAW,QAAQ;CAC1B;;;;;;CAOA,YAKoB,OAAkB;EACpC,MAAM,eAAe;EACrB,IAAI,KAAK,UACP;EAEF,MAAM,EAAE,cAAc,SAAS;EAC/B,MAAM,aAAa,YAAY;EAC/B,IAAI,gBAAgB,YAClB,aAAa,aAAa;EAE5B,KAAK,UAAU,SAAS;EACxB,IAAI,SAAS,QACX,KAAK,cAAc,KAAK;EAE1B,KAAK,cAAc;CACrB;;;;;CAMA,UAAkB,OAAO,OAAO;EAC9B,MAAM,EAAE,WAAW;EACnB,IAAI,CAAC,UAAU,CAAC,kBAAkB,KAAK,MAAM,IAAI,GAC/C,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC;EAE/B,MAAM,gBAAgB,IAAI,IAAI,OAAO,MAAM,QAAQ,CAAC,CAAC,OAAO,OAAO,CAAC;EACpE,OAAO,MAAM,UAAU,OAAO,KAC5B,QACC,EAAE,MAAM,MAAM,WAAW,SAAS;GACjC,MAAM,sBAAsB;GAE5B,MAAM,CAAC,iBAAiB,CADC,oBAAoB,KAAK,IACV,IACpC,CAAC,KAAA,CAAS,IACT,oBAAoB,KAAK,IAAI,KAAK,CAAC;GAExC,OACE,cAAc,IAAI,QAAQ,KACzB,iBAAiB,cAAc,IAAI,aAAa;EAErD,CACF;CACF;CAiCA,SAAS;EACP,MAAM,EACJ,QACA,UACA,UACA,MACA,SAAS,QACT,eAAe,iBACb;EACJ,MAAM,iBAAiB,SACnB,OACG,MAAM,QAAQ,CAAC,CACf,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,IACX;EASJ,OAAO,IAAI;sBARU,SAAS;IAC3B,yBAA+B;IAC/B,mCAAyC;EAC5C,CAM6B,EAAE;sBALP,SAAS;IAC9B,8BAAoC;IACpC,yCAA+C;EAClD,CAGgC,EAAE;;;;;oBAKlBA,qBAAW,IAAI,EAAE;2BACT;;sBAENA,qBAAW,cAAc,EAAE;yBACxB,SAAS;yBACT,SAAS;uBACX,aAAa;;;;CAIlC;;;;CAKA,WAAW,cAAc;EACvB,OAAO;CACT;;;;CAKA,WAAW,gBAAgB;EACzB,OAAO;CACT;;gBAEgBC;;AAClB;YAjLG,MAAM,aAAa,CAAA,GAAA,6BAAA,WAAA,cAAA,KAAA,CAAA;;CAwCnB,aAAa,UAAU;CACvB,aAAa,WAAW;CACxB,aAAa,MAAM;;YAkDnB,SAAS,CAAA,GAAA,6BAAA,WAAA,UAAA,KAAA,CAAA;YAMT,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,6BAAA,WAAA,YAAA,KAAA,CAAA;YAOzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,6BAAA,WAAA,YAAA,KAAA,CAAA;YAMzC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,6BAAA,WAAA,QAAA,KAAA,CAAA;YAM1B,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,6BAAA,WAAA,QAAA,KAAA,CAAA;2CAvH5BC,cAAc,kCAAwC,CAAA,GAAA,4BAAA;AAqLvD,IAAA,uCAAe"}