@carbon/web-components 2.54.0 → 2.55.0-rc.0

package/es/components/feature-flags/index.js

@@ -43,13 +43,13 @@ let FeatureFlagsElement = class FeatureFlagsElement extends LitElement {
 	}
 	static {
 		this.flagComponentMap = {
-			"enable-v12-tile-default-icons": "CDS-TILE",
+			"enable-v12-tile-default-icons": "CDS-CLICKABLE-TILE",
 			"enable-v12-tile-radio-icons": "CDS-TILE",
 			"enable-v12-overflowmenu": "CDS-OVERFLOW-MENU",
 			"enable-treeview-controllable": "CDS-TREEVIEW",
 			"enable-experimental-focus-wrap-without-sentinels": "CDS-FOCUS-WRAP",
 			"enable-focus-wrap-without-sentinels": "CDS-FOCUS-WRAP",
-			"enable-dialog-element": "CDS-DIALOG",
+			"enable-dialog-element": "CDS-MODAL",
 			"enable-v12-dynamic-floating-styles": "CDS-FLOATING",
 			"enable-v12-toggle-reduced-label-spacing": "CDS-TOGGLE"
 		};
@@ -68,7 +68,7 @@ let FeatureFlagsElement = class FeatureFlagsElement extends LitElement {
 		this.updateScope();
 	}
 	attributeChangedCallback(name, _oldVal, newVal) {
-		const value = newVal === "true";
+		const value = newVal !== null && newVal !== "false";
 		this.flags[name] = value;
 		const relatedComponent = hasOwn(_FeatureFlagsElement.flagComponentMap, name) ? _FeatureFlagsElement.flagComponentMap[name] : "unknown";
 		if (this.firstElementChild?.tagName === relatedComponent) this.firstElementChild.setAttribute(name, "");
@@ -92,6 +92,7 @@ let FeatureFlagsElement = class FeatureFlagsElement extends LitElement {
 		return html` <slot></slot> `;
 	}
 	isFeatureFlagEnabled(flag) {
+		if (Object.prototype.hasOwnProperty.call(this.flags, flag)) return this.flags[flag];
 		return this.scope.enabled(flag);
 	}
 	getScope() {
@@ -103,6 +104,10 @@ var feature_flags_default = FeatureFlagsElement;
 function findParentFeatureFlags(el) {
 	let parent = el.parentNode;
 	while (parent) {
+		if (parent instanceof ShadowRoot) {
+			parent = parent.host;
+			continue;
+		}
 		if (parent instanceof FeatureFlagsElement) return parent;
 		parent = parent.parentNode;
 	}

package/es/components/feature-flags/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["GlobalFeatureFlags","customElement"],"sources":["../../../src/components/feature-flags/index.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 2026\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/**\n * <feature-flags> provides scoped feature flags to child components.\n *\n * Usage:\n * Wrap any child components inside <feature-flags> to provide scoped feature flags like this:\n * <feature-flags enable-dialog-element=\"true\">\n *   <component></component>\n * </feature-flags>\n *\n * Available flags:\n * - enable-dialog-element\n * - enable-treeview-controllable\n * - ... (and others listed in observedAttributes)\n *\n * How to check a Flag in your component:\n *   import { isFeatureFlagEnabled } from './feature-flags';\n *   isFeatureFlagEnabled('enable-dialog-element', this)\n *   Returns true if the flag is enabled in the nearest <feature-flags> ancestor\n */\n\nimport {\n  FeatureFlags as GlobalFeatureFlags,\n  createScope,\n} from '@carbon/feature-flags';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { LitElement, html } from 'lit';\n\n/**\n * Feature Flags\n *\n * @element feature-flags\n */\ntype FeatureFlags = Record<string, boolean>;\n\nconst hasOwn = <T extends object>(obj: T, key: PropertyKey): key is keyof T =>\n  Object.prototype.hasOwnProperty.call(obj, key);\n\n@customElement('feature-flags')\nclass FeatureFlagsElement extends LitElement {\n  private scope = GlobalFeatureFlags;\n  private flags: FeatureFlags = {};\n\n  /**\n   * Mapping of feature flag attributes to their related component names.\n   */\n  private static readonly flagComponentMap = {\n    'enable-v12-tile-default-icons': 'CDS-TILE',\n    'enable-v12-tile-radio-icons': 'CDS-TILE',\n    'enable-v12-overflowmenu': 'CDS-OVERFLOW-MENU',\n    'enable-treeview-controllable': 'CDS-TREEVIEW',\n    'enable-experimental-focus-wrap-without-sentinels': 'CDS-FOCUS-WRAP',\n    'enable-focus-wrap-without-sentinels': 'CDS-FOCUS-WRAP',\n    'enable-dialog-element': 'CDS-DIALOG',\n    'enable-v12-dynamic-floating-styles': 'CDS-FLOATING',\n    'enable-v12-toggle-reduced-label-spacing': 'CDS-TOGGLE',\n  } as const;\n\n  static get observedAttributes() {\n    return Object.keys(FeatureFlagsElement.flagComponentMap);\n  }\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateScope();\n  }\n\n  attributeChangedCallback(\n    name: string,\n    _oldVal: string | null,\n    newVal: string | null\n  ) {\n    const value = newVal === 'true';\n    this.flags[name] = value;\n\n    // Set feature flag to top component level\n    const relatedComponent = hasOwn(FeatureFlagsElement.flagComponentMap, name)\n      ? FeatureFlagsElement.flagComponentMap[name]\n      : 'unknown';\n    if (this.firstElementChild?.tagName === relatedComponent) {\n      this.firstElementChild.setAttribute(name, '');\n    }\n\n    this.updateScope();\n  }\n\n  private getParentScope() {\n    let parent = this.parentNode;\n    while (parent) {\n      if (parent instanceof FeatureFlagsElement) {\n        return parent.getScope();\n      }\n      parent = parent.parentNode;\n    }\n    return null;\n  }\n\n  private updateScope() {\n    const newScope = createScope(this.flags);\n    const parentScope = this.getParentScope() || GlobalFeatureFlags;\n    if (parentScope) {\n      newScope.mergeWithScope(parentScope);\n    }\n    this.scope = newScope;\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  public isFeatureFlagEnabled(flag: string) {\n    return this.scope.enabled(flag);\n  }\n\n  private getScope() {\n    return this.scope;\n  }\n}\n\nexport default FeatureFlagsElement;\n\n// Utility functions\n\n// Function to find the nearest parent FeatureFlagsElement\nexport function findParentFeatureFlags(\n  el: HTMLElement\n): FeatureFlagsElement | null {\n  let parent = el.parentNode;\n  while (parent) {\n    if (parent instanceof FeatureFlagsElement) {\n      return parent;\n    }\n    parent = (parent as HTMLElement).parentNode;\n  }\n  return null;\n}\n\n// function to check if a feature flag is enabled in components\nexport function isFeatureFlagEnabled(\n  flag: string,\n  context: HTMLElement\n): boolean {\n  const instance = findParentFeatureFlags(context);\n  return instance?.isFeatureFlagEnabled(flag) ?? false;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,UAA4B,KAAQ,QACxC,OAAO,UAAU,eAAe,KAAK,KAAK,IAAI;AAEhD,IAAA,sBAAA,MACM,4BAA4B,WAAW;;;;;0BAOA;GACzC,iCAAiC;GACjC,+BAA+B;GAC/B,2BAA2B;GAC3B,gCAAgC;GAChC,oDAAoD;GACpD,uCAAuC;GACvC,yBAAyB;GACzB,sCAAsC;GACtC,2CAA2C;GAC5C;;CAED,WAAW,qBAAqB;AAC9B,SAAO,OAAO,KAAA,qBAAyB,iBAAiB;;CAG1D,cAAc;AACZ,SAAO;eAvBOA;eACc,EAAE;AAuB9B,OAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;;CAGrC,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,OAAK,aAAa;;CAGpB,yBACE,MACA,SACA,QACA;EACA,MAAM,QAAQ,WAAW;AACzB,OAAK,MAAM,QAAQ;EAGnB,MAAM,mBAAmB,OAAA,qBAA2B,kBAAkB,KAAK,GAAA,qBACnD,iBAAiB,QACrC;AACJ,MAAI,KAAK,mBAAmB,YAAY,iBACtC,MAAK,kBAAkB,aAAa,MAAM,GAAG;AAG/C,OAAK,aAAa;;CAGpB,iBAAyB;EACvB,IAAI,SAAS,KAAK;AAClB,SAAO,QAAQ;AACb,OAAI,kBAAA,qBACF,QAAO,OAAO,UAAU;AAE1B,YAAS,OAAO;;AAElB,SAAO;;CAGT,cAAsB;EACpB,MAAM,WAAW,YAAY,KAAK,MAAM;EACxC,MAAM,cAAc,KAAK,gBAAgB,IAAIA;AAC7C,MAAI,YACF,UAAS,eAAe,YAAY;AAEtC,OAAK,QAAQ;;CAGf,SAAS;AACP,SAAO,IAAI;;CAGb,qBAA4B,MAAc;AACxC,SAAO,KAAK,MAAM,QAAQ,KAAK;;CAGjC,WAAmB;AACjB,SAAO,KAAK;;;yDAlFfC,cAAc,gBAAgB,CAAA,EAAA,oBAAA;AAsF/B,IAAA,wBAAe;AAKf,SAAgB,uBACd,IAC4B;CAC5B,IAAI,SAAS,GAAG;AAChB,QAAO,QAAQ;AACb,MAAI,kBAAkB,oBACpB,QAAO;AAET,WAAU,OAAuB;;AAEnC,QAAO;;AAIT,SAAgB,qBACd,MACA,SACS;AAET,QADiB,uBAAuB,QAAQ,EAC/B,qBAAqB,KAAK,IAAI"}
+{"version":3,"file":"index.js","names":["GlobalFeatureFlags","customElement"],"sources":["../../../src/components/feature-flags/index.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 2026\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/**\n * <feature-flags> provides scoped feature flags to child components.\n *\n * Usage:\n * Wrap any child components inside <feature-flags> to provide scoped feature flags like this:\n * <feature-flags enable-dialog-element=\"true\">\n *   <component></component>\n * </feature-flags>\n *\n * Available flags:\n * - enable-dialog-element\n * - enable-treeview-controllable\n * - ... (and others listed in observedAttributes)\n *\n * How to check a Flag in your component:\n *   import { isFeatureFlagEnabled } from './feature-flags';\n *   isFeatureFlagEnabled('enable-dialog-element', this)\n *   Returns true if the flag is enabled in the nearest <feature-flags> ancestor\n */\n\nimport {\n  FeatureFlags as GlobalFeatureFlags,\n  createScope,\n} from '@carbon/feature-flags';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { LitElement, html } from 'lit';\n\n/**\n * Feature Flags\n *\n * @element feature-flags\n */\ntype FeatureFlags = Record<string, boolean>;\n\nconst hasOwn = <T extends object>(obj: T, key: PropertyKey): key is keyof T =>\n  Object.prototype.hasOwnProperty.call(obj, key);\n\n@customElement('feature-flags')\nclass FeatureFlagsElement extends LitElement {\n  private scope = GlobalFeatureFlags;\n  private flags: FeatureFlags = {};\n\n  /**\n   * Mapping of feature flag attributes to their related component names.\n   */\n  private static readonly flagComponentMap = {\n    'enable-v12-tile-default-icons': 'CDS-CLICKABLE-TILE',\n    'enable-v12-tile-radio-icons': 'CDS-TILE',\n    'enable-v12-overflowmenu': 'CDS-OVERFLOW-MENU',\n    'enable-treeview-controllable': 'CDS-TREEVIEW',\n    'enable-experimental-focus-wrap-without-sentinels': 'CDS-FOCUS-WRAP',\n    'enable-focus-wrap-without-sentinels': 'CDS-FOCUS-WRAP',\n    'enable-dialog-element': 'CDS-MODAL',\n    'enable-v12-dynamic-floating-styles': 'CDS-FLOATING',\n    'enable-v12-toggle-reduced-label-spacing': 'CDS-TOGGLE',\n  } as const;\n\n  static get observedAttributes() {\n    return Object.keys(FeatureFlagsElement.flagComponentMap);\n  }\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateScope();\n  }\n\n  attributeChangedCallback(\n    name: string,\n    _oldVal: string | null,\n    newVal: string | null\n  ) {\n    const value = newVal !== null && newVal !== 'false';\n    this.flags[name] = value;\n\n    // Set feature flag to top component level\n    const relatedComponent = hasOwn(FeatureFlagsElement.flagComponentMap, name)\n      ? FeatureFlagsElement.flagComponentMap[name]\n      : 'unknown';\n    if (this.firstElementChild?.tagName === relatedComponent) {\n      this.firstElementChild.setAttribute(name, '');\n    }\n\n    this.updateScope();\n  }\n\n  private getParentScope() {\n    let parent = this.parentNode;\n    while (parent) {\n      if (parent instanceof FeatureFlagsElement) {\n        return parent.getScope();\n      }\n      parent = parent.parentNode;\n    }\n    return null;\n  }\n\n  private updateScope() {\n    const newScope = createScope(this.flags);\n    const parentScope = this.getParentScope() || GlobalFeatureFlags;\n    if (parentScope) {\n      newScope.mergeWithScope(parentScope);\n    }\n    this.scope = newScope;\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  public isFeatureFlagEnabled(flag: string) {\n    if (Object.prototype.hasOwnProperty.call(this.flags, flag)) {\n      return this.flags[flag];\n    }\n    return this.scope.enabled(flag);\n  }\n\n  private getScope() {\n    return this.scope;\n  }\n}\n\nexport default FeatureFlagsElement;\n\n// Utility functions\n\n// Function to find the nearest parent FeatureFlagsElement\nexport function findParentFeatureFlags(\n  el: HTMLElement\n): FeatureFlagsElement | null {\n  let parent: Node | null = el.parentNode;\n  while (parent) {\n    if (parent instanceof ShadowRoot) {\n      parent = parent.host;\n      continue;\n    }\n    if (parent instanceof FeatureFlagsElement) {\n      return parent;\n    }\n    parent = (parent as HTMLElement).parentNode;\n  }\n  return null;\n}\n\n// function to check if a feature flag is enabled in components\nexport function isFeatureFlagEnabled(\n  flag: string,\n  context: HTMLElement\n): boolean {\n  const instance = findParentFeatureFlags(context);\n  return instance?.isFeatureFlagEnabled(flag) ?? false;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,UAA4B,KAAQ,QACxC,OAAO,UAAU,eAAe,KAAK,KAAK,IAAI;AAEhD,IAAA,sBAAA,MACM,4BAA4B,WAAW;;;;;0BAOA;GACzC,iCAAiC;GACjC,+BAA+B;GAC/B,2BAA2B;GAC3B,gCAAgC;GAChC,oDAAoD;GACpD,uCAAuC;GACvC,yBAAyB;GACzB,sCAAsC;GACtC,2CAA2C;GAC5C;;CAED,WAAW,qBAAqB;AAC9B,SAAO,OAAO,KAAA,qBAAyB,iBAAiB;;CAG1D,cAAc;AACZ,SAAO;eAvBOA;eACc,EAAE;AAuB9B,OAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;;CAGrC,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,OAAK,aAAa;;CAGpB,yBACE,MACA,SACA,QACA;EACA,MAAM,QAAQ,WAAW,QAAQ,WAAW;AAC5C,OAAK,MAAM,QAAQ;EAGnB,MAAM,mBAAmB,OAAA,qBAA2B,kBAAkB,KAAK,GAAA,qBACnD,iBAAiB,QACrC;AACJ,MAAI,KAAK,mBAAmB,YAAY,iBACtC,MAAK,kBAAkB,aAAa,MAAM,GAAG;AAG/C,OAAK,aAAa;;CAGpB,iBAAyB;EACvB,IAAI,SAAS,KAAK;AAClB,SAAO,QAAQ;AACb,OAAI,kBAAA,qBACF,QAAO,OAAO,UAAU;AAE1B,YAAS,OAAO;;AAElB,SAAO;;CAGT,cAAsB;EACpB,MAAM,WAAW,YAAY,KAAK,MAAM;EACxC,MAAM,cAAc,KAAK,gBAAgB,IAAIA;AAC7C,MAAI,YACF,UAAS,eAAe,YAAY;AAEtC,OAAK,QAAQ;;CAGf,SAAS;AACP,SAAO,IAAI;;CAGb,qBAA4B,MAAc;AACxC,MAAI,OAAO,UAAU,eAAe,KAAK,KAAK,OAAO,KAAK,CACxD,QAAO,KAAK,MAAM;AAEpB,SAAO,KAAK,MAAM,QAAQ,KAAK;;CAGjC,WAAmB;AACjB,SAAO,KAAK;;;yDArFfC,cAAc,gBAAgB,CAAA,EAAA,oBAAA;AAyF/B,IAAA,wBAAe;AAKf,SAAgB,uBACd,IAC4B;CAC5B,IAAI,SAAsB,GAAG;AAC7B,QAAO,QAAQ;AACb,MAAI,kBAAkB,YAAY;AAChC,YAAS,OAAO;AAChB;;AAEF,MAAI,kBAAkB,oBACpB,QAAO;AAET,WAAU,OAAuB;;AAEnC,QAAO;;AAIT,SAAgB,qBACd,MACA,SACS;AAET,QADiB,uBAAuB,QAAQ,EAC/B,qBAAqB,KAAK,IAAI"}

package/es/components/file-uploader/file-uploader-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-uploader-button.d.ts","sourceRoot":"","sources":["../../../src/components/file-uploader/file-uploader-button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,yBAAyB,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;;;;;;;;;;uBAMpD,CAAC;;;;;AAJzC;;;;;GAKG;AACH,cACM,qBAAsB,SAAQ,0BAA6B;IAC/D;;OAEG;IACH,OAAO,CAAC,YAAY;IAOpB;;OAEG;IACH,OAAO,CAAC,cAAc;IAQtB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAoBrB;;;OAGG;IACH,OAAO,CAAC,SAAS;IA2BjB;;OAEG;IAEH,UAAU,cAAuB;IAEjC;;OAEG;IAEH,IAAI,cAAsB;IAE1B;;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;IA4CN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;OAEG;IACH,MAAM,KAAK,aAAa,WAEvB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"file-uploader-button.d.ts","sourceRoot":"","sources":["../../../src/components/file-uploader/file-uploader-button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,yBAAyB,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;;;;;;;;;;uBAMpD,CAAC;;;;;AAJzC;;;;;GAKG;AACH,cACM,qBAAsB,SAAQ,0BAA6B;IAC/D;;OAEG;IACH,OAAO,CAAC,YAAY;IAOpB;;OAEG;IACH,OAAO,CAAC,cAAc;IAQtB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAoBrB;;;OAGG;IACH,OAAO,CAAC,SAAS;IA2BjB;;OAEG;IAEH,UAAU,cAAuB;IAEjC;;OAEG;IAEH,IAAI,cAAsB;IAE1B;;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;IAkDN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;OAEG;IACH,MAAM,KAAK,aAAa,WAEvB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,qBAAqB,CAAC"}

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

@@ -83,7 +83,7 @@ let CDSFileUploaderButton = class CDSFileUploaderButton extends HostListenerMixi
 		const { files } = (event.type === "drop" ? event.dataTransfer : event.target) ?? {};
 		const { accept } = this;
 		if (!accept || !/^(change|drop)$/.test(event.type)) return Array.from(files ?? []);
-		const acceptedTypes = new Set(accept.split(" "));
+		const acceptedTypes = new Set(accept.split(/[\s,]+/).filter(Boolean));
 		return Array.prototype.filter.call(files, ({ name, type: mimeType = "" }) => {
 			const fileExtensionRegExp = /\.[^.]+$/;
 			const [fileExtension] = !fileExtensionRegExp.test(name) ? [void 0] : fileExtensionRegExp.exec(name) ?? [];
@@ -92,6 +92,7 @@ let CDSFileUploaderButton = class CDSFileUploaderButton extends HostListenerMixi
 	}
 	render() {
 		const { accept, disabled, multiple, name, buttonKind, size, _handleChange: handleChange } = this;
+		const acceptForInput = accept ? accept.split(/[\s,]+/).filter(Boolean).join(",") : "";
 		const labelClasses = classMap({
 			[`cds--file-browse-btn`]: true,
 			[`cds--file-browse-btn--disabled`]: disabled
@@ -116,7 +117,7 @@ let CDSFileUploaderButton = class CDSFileUploaderButton extends HostListenerMixi
         type="file"
         class="${"cds"}--file-input"
         tabindex="-1"
-        accept="${if_non_empty_default(accept)}"
+        accept="${if_non_empty_default(acceptForInput)}"
         ?disabled="${disabled}"
         ?multiple="${multiple}"
         name="${if_non_empty_default(name)}"

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(' '));\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\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(accept)}\"\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 } 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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"}

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

@@ -49,7 +49,7 @@ declare class CDSFileUploaderDropContainer extends CDSFileUploaderDropContainer_
      */
     private _getFiles;
     /**
-     * The file types the file input should accept, separated by space.
+     * The file types the file input should accept, separated by spaces and/or commas.
      */
     accept: string;
     /**

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;IAoCN;;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;;;;;;;;;;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"}

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

@@ -85,7 +85,7 @@ let CDSFileUploaderDropContainer = class CDSFileUploaderDropContainer extends Ho
 	_getFiles(event, files) {
 		const { accept } = this;
 		if (!accept || !/^(change|drop)$/.test(event.type)) return Array.from(files ?? []);
-		const acceptedTypes = new Set(accept.split(" "));
+		const acceptedTypes = new Set(accept.split(/[\s,]+/).filter(Boolean));
 		return Array.prototype.filter.call(files, ({ name, type: mimeType = "" }) => {
 			const fileExtensionRegExp = /\.[^.]+$/;
 			const [fileExtension] = !fileExtensionRegExp.test(name) ? [void 0] : fileExtensionRegExp.exec(name) ?? [];
@@ -94,6 +94,7 @@ let CDSFileUploaderDropContainer = class CDSFileUploaderDropContainer extends Ho
 	}
 	render() {
 		const { accept, disabled, multiple, name, _active: active, _handleChange: handleChange } = this;
+		const acceptForInput = accept ? accept.split(/[\s,]+/).filter(Boolean).join(",") : "";
 		return html`
       <label class="${classMap({
 			[`cds--file-browse-btn`]: true,
@@ -110,7 +111,7 @@ let CDSFileUploaderDropContainer = class CDSFileUploaderDropContainer extends Ho
             name="${if_non_empty_default(name)}"
             class="${"cds"}--file-input"
             tabindex="-1"
-            accept="${if_non_empty_default(accept)}"
+            accept="${if_non_empty_default(acceptForInput)}"
             ?disabled="${disabled}"
             ?multiple="${multiple}"
             @change="${handleChange}" />

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(' '));\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 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      _active: active,\n      _handleChange: handleChange,\n    } = this;\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(accept)}\"\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,cAAc;CAClB,UAAU;CACV,WAAW;CACZ;;;;;;;AAQD,IAAA,+BAAA,MACM,qCAAqC,kBAAkB,WAAW,CAAC;;;iBAIrD;gBA0FT;kBAME;kBAOA;cAMJ;cAMA;;;;;;;CA5GP,cAAsB,OAA0B;EAC9C,MAAM,EAAE,aAAa,kBAAkB,KACpC;EACH,MAAM,EAAE,WACL,MAAM,SAAS,SACX,MAAoB,eACpB,MAAM,WAAgC,EAAE;EAC/C,MAAM,aAAa,KAAK,UAAU,OAAO,MAAM;AAE/C,OAAK,cACH,IAAI,YAAY,aAAa;GAC3B,SAAS;GACT,UAAU;GACV,QAAQ,EACN,YACD;GACF,CAAC,CACH;EAED,MAAM,YAAY,MAAM,YAAY,cAAc,cAAc;AAChE,MAAI,UACD,WAA+B,QAAQ;;;;;;;CAS5C,YAKoB,OAAkB;AACpC,QAAM,gBAAgB;AACtB,MAAI,KAAK,SACP;EAEF,MAAM,EAAE,cAAc,SAAS;EAC/B,MAAM,aAAa,YAAY;AAC/B,MAAI,gBAAgB,WAClB,cAAa,aAAa;AAE5B,OAAK,UAAU,SAAS;AACxB,MAAI,SAAS,OACX,MAAK,cAAc,MAAM;AAE3B,OAAK,eAAe;;;;;;CAOtB,UAAkB,OAAO,OAAO;EAC9B,MAAM,EAAE,WAAW;AACnB,MAAI,CAAC,UAAU,CAAC,kBAAkB,KAAK,MAAM,KAAK,CAChD,QAAO,MAAM,KAAK,SAAS,EAAE,CAAC;EAEhC,MAAM,gBAAgB,IAAI,IAAI,OAAO,MAAM,IAAI,CAAC;AAChD,SAAO,MAAM,UAAU,OAAO,KAC5B,QACC,EAAE,MAAM,MAAM,WAAW,SAAS;GACjC,MAAM,sBAAsB;GAE5B,MAAM,CAAC,iBAAiB,CADC,oBAAoB,KAAK,KAAK,GAEnD,CAAC,KAAA,EAAU,GACV,oBAAoB,KAAK,KAAK,IAAI,EAAE;AAEzC,UACE,cAAc,IAAI,SAAS,IAC1B,iBAAiB,cAAc,IAAI,cAAc;IAGvD;;CAkCH,SAAS;EACP,MAAM,EACJ,QACA,UACA,UACA,MACA,SAAS,QACT,eAAe,iBACb;AASJ,SAAO,IAAI;sBARU,SAAS;IAC3B,yBAA+B;IAC/B,mCAAyC;GAC3C,CAAC,CAM6B;sBALP,SAAS;IAC9B,8BAAoC;IACpC,yCAA+C;GACjD,CAAC,CAGgC;;;;;oBAKlBA,qBAAW,KAAK,CAAC;2BACT;;sBAENA,qBAAW,OAAO,CAAC;yBAChB,SAAS;yBACT,SAAS;uBACX,aAAa;;;;;;;;CASlC,WAAW,cAAc;AACvB,SAAO;;;;;CAMT,WAAW,gBAAgB;AACzB,SAAO;;;gBAGOC;;;;CAlIf,aAAa,WAAW;CACxB,aAAa,YAAY;CACzB,aAAa,OAAO;;YAkDpB,UAAU,CAAA,EAAA,6BAAA,WAAA,UAAA,KAAA,EAAA;YAMV,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,6BAAA,WAAA,YAAA,KAAA,EAAA;YAO1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,6BAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,6BAAA,WAAA,QAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,6BAAA,WAAA,QAAA,KAAA,EAAA;2CAvH7BC,cAAc,mCAAyC,CAAA,EAAA,6BAAA;AA+KxD,IAAA,uCAAe"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,cAAc;CAClB,UAAU;CACV,WAAW;CACZ;;;;;;;AAQD,IAAA,+BAAA,MACM,qCAAqC,kBAAkB,WAAW,CAAC;;;iBAIrD;gBA0FT;kBAME;kBAOA;cAMJ;cAMA;;;;;;;CA5GP,cAAsB,OAA0B;EAC9C,MAAM,EAAE,aAAa,kBAAkB,KACpC;EACH,MAAM,EAAE,WACL,MAAM,SAAS,SACX,MAAoB,eACpB,MAAM,WAAgC,EAAE;EAC/C,MAAM,aAAa,KAAK,UAAU,OAAO,MAAM;AAE/C,OAAK,cACH,IAAI,YAAY,aAAa;GAC3B,SAAS;GACT,UAAU;GACV,QAAQ,EACN,YACD;GACF,CAAC,CACH;EAED,MAAM,YAAY,MAAM,YAAY,cAAc,cAAc;AAChE,MAAI,UACD,WAA+B,QAAQ;;;;;;;CAS5C,YAKoB,OAAkB;AACpC,QAAM,gBAAgB;AACtB,MAAI,KAAK,SACP;EAEF,MAAM,EAAE,cAAc,SAAS;EAC/B,MAAM,aAAa,YAAY;AAC/B,MAAI,gBAAgB,WAClB,cAAa,aAAa;AAE5B,OAAK,UAAU,SAAS;AACxB,MAAI,SAAS,OACX,MAAK,cAAc,MAAM;AAE3B,OAAK,eAAe;;;;;;CAOtB,UAAkB,OAAO,OAAO;EAC9B,MAAM,EAAE,WAAW;AACnB,MAAI,CAAC,UAAU,CAAC,kBAAkB,KAAK,MAAM,KAAK,CAChD,QAAO,MAAM,KAAK,SAAS,EAAE,CAAC;EAEhC,MAAM,gBAAgB,IAAI,IAAI,OAAO,MAAM,SAAS,CAAC,OAAO,QAAQ,CAAC;AACrE,SAAO,MAAM,UAAU,OAAO,KAC5B,QACC,EAAE,MAAM,MAAM,WAAW,SAAS;GACjC,MAAM,sBAAsB;GAE5B,MAAM,CAAC,iBAAiB,CADC,oBAAoB,KAAK,KAAK,GAEnD,CAAC,KAAA,EAAU,GACV,oBAAoB,KAAK,KAAK,IAAI,EAAE;AAEzC,UACE,cAAc,IAAI,SAAS,IAC1B,iBAAiB,cAAc,IAAI,cAAc;IAGvD;;CAkCH,SAAS;EACP,MAAM,EACJ,QACA,UACA,UACA,MACA,SAAS,QACT,eAAe,iBACb;EACJ,MAAM,iBAAiB,SACnB,OACG,MAAM,SAAS,CACf,OAAO,QAAQ,CACf,KAAK,IAAI,GACZ;AASJ,SAAO,IAAI;sBARU,SAAS;IAC3B,yBAA+B;IAC/B,mCAAyC;GAC3C,CAAC,CAM6B;sBALP,SAAS;IAC9B,8BAAoC;IACpC,yCAA+C;GACjD,CAAC,CAGgC;;;;;oBAKlBA,qBAAW,KAAK,CAAC;2BACT;;sBAENA,qBAAW,eAAe,CAAC;yBACxB,SAAS;yBACT,SAAS;uBACX,aAAa;;;;;;;;CASlC,WAAW,cAAc;AACvB,SAAO;;;;;CAMT,WAAW,gBAAgB;AACzB,SAAO;;;gBAGOC;;;;CAxIf,aAAa,WAAW;CACxB,aAAa,YAAY;CACzB,aAAa,OAAO;;YAkDpB,UAAU,CAAA,EAAA,6BAAA,WAAA,UAAA,KAAA,EAAA;YAMV,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,6BAAA,WAAA,YAAA,KAAA,EAAA;YAO1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,6BAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,6BAAA,WAAA,QAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,6BAAA,WAAA,QAAA,KAAA,EAAA;2CAvH7BC,cAAc,mCAAyC,CAAA,EAAA,6BAAA;AAqLxD,IAAA,uCAAe"}

package/es/components/file-uploader/file-uploader-item.d.ts

@@ -47,6 +47,10 @@ declare class CDSFileUploaderItem extends LitElement {
      * Controls the invalid state and visibility of the `validityMessage`.
      */
     invalid: boolean;
+    /**
+     * Controls the disabled state of this file uploader item.
+     */
+    disabled: boolean;
     /**
      * The size of this file uploader item.
      */

package/es/components/file-uploader/file-uploader-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-uploader-item.d.ts","sourceRoot":"","sources":["../../../src/components/file-uploader/file-uploader-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,QAAQ,CAAC;AAI3E,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,CAAC;AAE7D;;;;;;;;;;GAUG;AACH,cACM,mBAAoB,SAAQ,UAAU;IAC1C;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAahC;;OAEG;IACH,OAAO,CAAC,cAAc;IAoBtB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB;;OAEG;IACH,OAAO,CAAC,eAAe;IAQvB;;OAEG;IACH,OAAO,CAAC,aAAa;IAcrB;;OAEG;IAEH,eAAe,SAAsB;IAErC;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,IAAI,0BAAkC;IAEtC;;OAEG;IAEH,KAAK,2BAAsC;IAE3C;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,SAAS,SAAM;IAEf,MAAM;IAkBN;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"file-uploader-item.d.ts","sourceRoot":"","sources":["../../../src/components/file-uploader/file-uploader-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,QAAQ,CAAC;AAI3E,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,CAAC;AAE7D;;;;;;;;;;GAUG;AACH,cACM,mBAAoB,SAAQ,UAAU;IAC1C;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAahC;;OAEG;IACH,OAAO,CAAC,cAAc;IAqBtB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB;;OAEG;IACH,OAAO,CAAC,eAAe;IAQvB;;OAEG;IACH,OAAO,CAAC,aAAa;IAcrB;;OAEG;IAEH,eAAe,SAAsB;IAErC;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,0BAAkC;IAEtC;;OAEG;IAEH,KAAK,2BAAsC;IAE3C;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,SAAS,SAAM;IAEf,MAAM;IAkBN;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC"}

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

@@ -41,6 +41,7 @@ let CDSFileUploaderItem = class CDSFileUploaderItem extends LitElement {
 		super(..._args);
 		this.iconDescription = "Delete this file";
 		this.invalid = false;
+		this.disabled = false;
 		this.size = "md";
 		this.state = "uploading";
 		this.errorSubject = "";
@@ -67,6 +68,7 @@ let CDSFileUploaderItem = class CDSFileUploaderItem extends LitElement {
       ${!invalid ? void 0 : iconLoader(WarningFilled16, { class: `cds--file-invalid` })}
       <button
         type="button"
+        ?disabled=${this.disabled}
         aria-label="${iconDescription}"
         class="${"cds"}--file-close"
         @click="${handleClickDeleteButton}">
@@ -146,6 +148,10 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], CDSFileUploaderItem.prototype, "invalid", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSFileUploaderItem.prototype, "disabled", void 0);
 __decorate([property({ reflect: true })], CDSFileUploaderItem.prototype, "size", void 0);
 __decorate([property({ reflect: true })], CDSFileUploaderItem.prototype, "state", void 0);
 __decorate([property({ attribute: "error-subject" })], CDSFileUploaderItem.prototype, "errorSubject", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"file-uploader-item.js","names":["styles","customElement"],"sources":["../../../src/components/file-uploader/file-uploader-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2023\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 { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16.js';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport CheckmarkFilled16 from '@carbon/icons/es/checkmark--filled/16.js';\nimport { LOADING_TYPE } from '../loading/loading';\nimport { FILE_UPLOADER_ITEM_SIZE, FILE_UPLOADER_ITEM_STATE } from './defs';\nimport styles from './file-uploader.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { FILE_UPLOADER_ITEM_SIZE, FILE_UPLOADER_ITEM_STATE };\n\n/**\n * File uploader item.\n *\n * @element cds-file-uploader-item\n * @slot validity-message The validity message.\n * @slot validity-message-supplement The supplemental validity message.\n * @fires cds-file-uploader-item-beingdeleted\n *   The custom event fired before this file uploader item is being deleted upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of deleting this file uploader item.\n * @fires cds-file-uploader-item-deleted - The custom event fired after this file uploader item is deleted upon a user gesture.\n */\n@customElement(`${prefix}-file-uploader-item`)\nclass CDSFileUploaderItem extends LitElement {\n  /**\n   * Handles `click` event on the delete button.\n   */\n  private _handleClickDeleteButton() {\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n    };\n    const { eventBeforeDelete, eventDelete } = this\n      .constructor as typeof CDSFileUploaderItem;\n    if (this.dispatchEvent(new CustomEvent(eventBeforeDelete, init))) {\n      this.dispatchEvent(new CustomEvent(eventDelete, init));\n    }\n  }\n\n  /**\n   * @returns The content showing the editing UI of this file uploader item.\n   */\n  private _renderEditing() {\n    const {\n      iconDescription,\n      invalid,\n      _handleClickDeleteButton: handleClickDeleteButton,\n    } = this;\n    return html`\n      ${!invalid\n        ? undefined\n        : iconLoader(WarningFilled16, { class: `${prefix}--file-invalid` })}\n      <button\n        type=\"button\"\n        aria-label=\"${iconDescription}\"\n        class=\"${prefix}--file-close\"\n        @click=\"${handleClickDeleteButton}\">\n        ${iconLoader(Close16)}\n      </button>\n    `;\n  }\n\n  /**\n   * @returns The content showing this file uploader's file uploading status as in progress.\n   */\n  private _renderUploading() {\n    const { iconDescription } = this;\n    return html`\n      <cds-loading\n        assistive-text=\"${iconDescription}\"\n        type=\"${LOADING_TYPE.SMALL}\"></cds-loading>\n    `;\n  }\n\n  /**\n   * @returns The content showing this file uploader's file uploading status as complete.\n   */\n  private _renderUploaded() {\n    const { iconDescription } = this;\n    return iconLoader(CheckmarkFilled16, {\n      class: `${prefix}--file-complete`,\n      'aria-label': iconDescription,\n    });\n  }\n\n  /**\n   * @returns The content showing this file uploader's status.\n   */\n  private _renderStatus() {\n    const { state } = this;\n    switch (state) {\n      case FILE_UPLOADER_ITEM_STATE.EDIT:\n        return this._renderEditing();\n      case FILE_UPLOADER_ITEM_STATE.UPLOADING:\n        return this._renderUploading();\n      case FILE_UPLOADER_ITEM_STATE.COMPLETE:\n        return this._renderUploaded();\n      default:\n        return undefined;\n    }\n  }\n\n  /**\n   * The `aria-label` attribute for the icon to delete this file uploader item.\n   */\n  @property({ attribute: 'icon-description' })\n  iconDescription = 'Delete this file';\n\n  /**\n   * Controls the invalid state and visibility of the `validityMessage`.\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * The size of this file uploader item.\n   */\n  @property({ reflect: true })\n  size = FILE_UPLOADER_ITEM_SIZE.MEDIUM;\n\n  /**\n   * The state of this file uploader item.\n   */\n  @property({ reflect: true })\n  state = FILE_UPLOADER_ITEM_STATE.UPLOADING;\n\n  /**\n   * The error subject text.\n   */\n  @property({ attribute: 'error-subject' })\n  errorSubject = '';\n\n  /**\n   * The error body text\n   */\n  @property({ attribute: 'error-body' })\n  errorBody = '';\n\n  render() {\n    const { invalid, errorSubject, errorBody } = this;\n    return html` <p class=\"${prefix}--file-filename\"><slot></slot></p>\n      <span class=\"${prefix}--file__state-container\"\n        >${this._renderStatus()}</span\n      >\n      <div\n        class=\"${prefix}--form-requirement\"\n        ?hidden=\"${!invalid && !errorSubject}\">\n        <div class=\"${prefix}--form-requirement__title\">${errorSubject}</div>\n        <p\n          class=\"${prefix}--form-requirement__supplement\"\n          ?hidden=\"${!errorBody}\">\n          ${errorBody}\n        </p>\n      </div>`;\n  }\n\n  /**\n   * The name of the custom event fired before this file uplodaer item is being deleted upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of deleting this file uploader item.\n   */\n  static get eventBeforeDelete() {\n    return `${prefix}-file-uploader-item-beingdeleted`;\n  }\n\n  /**\n   * The name of the custom event fired after this file uplodaer item is deleted upon a user gesture.\n   */\n  static get eventDelete() {\n    return `${prefix}-file-uploader-item-deleted`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSFileUploaderItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAA,sBAAA,MACM,4BAA4B,WAAW;;;yBAoFzB;iBAMR;;;sBAkBK;mBAMH;;;;;CA9GZ,2BAAmC;EACjC,MAAM,OAAO;GACX,SAAS;GACT,YAAY;GACZ,UAAU;GACX;EACD,MAAM,EAAE,mBAAmB,gBAAgB,KACxC;AACH,MAAI,KAAK,cAAc,IAAI,YAAY,mBAAmB,KAAK,CAAC,CAC9D,MAAK,cAAc,IAAI,YAAY,aAAa,KAAK,CAAC;;;;;CAO1D,iBAAyB;EACvB,MAAM,EACJ,iBACA,SACA,0BAA0B,4BACxB;AACJ,SAAO,IAAI;QACP,CAAC,UACC,KAAA,IACA,WAAW,iBAAiB,EAAE,OAAO,qBAA2B,CAAC,CAAC;;;sBAGtD,gBAAgB;uBACd;kBACN,wBAAwB;UAChC,WAAW,QAAQ,CAAC;;;;;;;CAQ5B,mBAA2B;EACzB,MAAM,EAAE,oBAAoB;AAC5B,SAAO,IAAI;;0BAEW,gBAAgB;wBACP;;;;;;CAOjC,kBAA0B;EACxB,MAAM,EAAE,oBAAoB;AAC5B,SAAO,WAAW,mBAAmB;GACnC,OAAO;GACP,cAAc;GACf,CAAC;;;;;CAMJ,gBAAwB;EACtB,MAAM,EAAE,UAAU;AAClB,UAAQ,OAAR;GACE,KAAA,OACE,QAAO,KAAK,gBAAgB;GAC9B,KAAA,YACE,QAAO,KAAK,kBAAkB;GAChC,KAAA,WACE,QAAO,KAAK,iBAAiB;GAC/B,QACE;;;CAwCN,SAAS;EACP,MAAM,EAAE,SAAS,cAAc,cAAc;AAC7C,SAAO,IAAI,cAAA,MAAqB;2BACR;WACjB,KAAK,eAAe,CAAC;;;uBAGR;mBACL,CAAC,WAAW,CAAC,aAAa;4BAChB,6BAA6B,aAAa;;yBAE7C;qBACL,CAAC,UAAU;YACpB,UAAU;;;;;;;;CASpB,WAAW,oBAAoB;AAC7B,SAAO;;;;;CAMT,WAAW,cAAc;AACvB,SAAO;;;gBAGOA;;;YAlEf,SAAS,EAAE,WAAW,oBAAoB,CAAC,CAAA,EAAA,oBAAA,WAAA,mBAAA,KAAA,EAAA;YAM3C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,WAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,QAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,SAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,WAAW,iBAAiB,CAAC,CAAA,EAAA,oBAAA,WAAA,gBAAA,KAAA,EAAA;YAMxC,SAAS,EAAE,WAAW,cAAc,CAAC,CAAA,EAAA,oBAAA,WAAA,aAAA,KAAA,EAAA;kCAlHvCC,cAAc,yBAA+B,CAAA,EAAA,oBAAA;AAyJ9C,IAAA,6BAAe"}
+{"version":3,"file":"file-uploader-item.js","names":["styles","customElement"],"sources":["../../../src/components/file-uploader/file-uploader-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2023\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 { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16.js';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport CheckmarkFilled16 from '@carbon/icons/es/checkmark--filled/16.js';\nimport { LOADING_TYPE } from '../loading/loading';\nimport { FILE_UPLOADER_ITEM_SIZE, FILE_UPLOADER_ITEM_STATE } from './defs';\nimport styles from './file-uploader.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { FILE_UPLOADER_ITEM_SIZE, FILE_UPLOADER_ITEM_STATE };\n\n/**\n * File uploader item.\n *\n * @element cds-file-uploader-item\n * @slot validity-message The validity message.\n * @slot validity-message-supplement The supplemental validity message.\n * @fires cds-file-uploader-item-beingdeleted\n *   The custom event fired before this file uploader item is being deleted upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of deleting this file uploader item.\n * @fires cds-file-uploader-item-deleted - The custom event fired after this file uploader item is deleted upon a user gesture.\n */\n@customElement(`${prefix}-file-uploader-item`)\nclass CDSFileUploaderItem extends LitElement {\n  /**\n   * Handles `click` event on the delete button.\n   */\n  private _handleClickDeleteButton() {\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n    };\n    const { eventBeforeDelete, eventDelete } = this\n      .constructor as typeof CDSFileUploaderItem;\n    if (this.dispatchEvent(new CustomEvent(eventBeforeDelete, init))) {\n      this.dispatchEvent(new CustomEvent(eventDelete, init));\n    }\n  }\n\n  /**\n   * @returns The content showing the editing UI of this file uploader item.\n   */\n  private _renderEditing() {\n    const {\n      iconDescription,\n      invalid,\n      _handleClickDeleteButton: handleClickDeleteButton,\n    } = this;\n    return html`\n      ${!invalid\n        ? undefined\n        : iconLoader(WarningFilled16, { class: `${prefix}--file-invalid` })}\n      <button\n        type=\"button\"\n        ?disabled=${this.disabled}\n        aria-label=\"${iconDescription}\"\n        class=\"${prefix}--file-close\"\n        @click=\"${handleClickDeleteButton}\">\n        ${iconLoader(Close16)}\n      </button>\n    `;\n  }\n\n  /**\n   * @returns The content showing this file uploader's file uploading status as in progress.\n   */\n  private _renderUploading() {\n    const { iconDescription } = this;\n    return html`\n      <cds-loading\n        assistive-text=\"${iconDescription}\"\n        type=\"${LOADING_TYPE.SMALL}\"></cds-loading>\n    `;\n  }\n\n  /**\n   * @returns The content showing this file uploader's file uploading status as complete.\n   */\n  private _renderUploaded() {\n    const { iconDescription } = this;\n    return iconLoader(CheckmarkFilled16, {\n      class: `${prefix}--file-complete`,\n      'aria-label': iconDescription,\n    });\n  }\n\n  /**\n   * @returns The content showing this file uploader's status.\n   */\n  private _renderStatus() {\n    const { state } = this;\n    switch (state) {\n      case FILE_UPLOADER_ITEM_STATE.EDIT:\n        return this._renderEditing();\n      case FILE_UPLOADER_ITEM_STATE.UPLOADING:\n        return this._renderUploading();\n      case FILE_UPLOADER_ITEM_STATE.COMPLETE:\n        return this._renderUploaded();\n      default:\n        return undefined;\n    }\n  }\n\n  /**\n   * The `aria-label` attribute for the icon to delete this file uploader item.\n   */\n  @property({ attribute: 'icon-description' })\n  iconDescription = 'Delete this file';\n\n  /**\n   * Controls the invalid state and visibility of the `validityMessage`.\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * Controls the disabled state of this file uploader item.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The size of this file uploader item.\n   */\n  @property({ reflect: true })\n  size = FILE_UPLOADER_ITEM_SIZE.MEDIUM;\n\n  /**\n   * The state of this file uploader item.\n   */\n  @property({ reflect: true })\n  state = FILE_UPLOADER_ITEM_STATE.UPLOADING;\n\n  /**\n   * The error subject text.\n   */\n  @property({ attribute: 'error-subject' })\n  errorSubject = '';\n\n  /**\n   * The error body text\n   */\n  @property({ attribute: 'error-body' })\n  errorBody = '';\n\n  render() {\n    const { invalid, errorSubject, errorBody } = this;\n    return html` <p class=\"${prefix}--file-filename\"><slot></slot></p>\n      <span class=\"${prefix}--file__state-container\"\n        >${this._renderStatus()}</span\n      >\n      <div\n        class=\"${prefix}--form-requirement\"\n        ?hidden=\"${!invalid && !errorSubject}\">\n        <div class=\"${prefix}--form-requirement__title\">${errorSubject}</div>\n        <p\n          class=\"${prefix}--form-requirement__supplement\"\n          ?hidden=\"${!errorBody}\">\n          ${errorBody}\n        </p>\n      </div>`;\n  }\n\n  /**\n   * The name of the custom event fired before this file uplodaer item is being deleted upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of deleting this file uploader item.\n   */\n  static get eventBeforeDelete() {\n    return `${prefix}-file-uploader-item-beingdeleted`;\n  }\n\n  /**\n   * The name of the custom event fired after this file uplodaer item is deleted upon a user gesture.\n   */\n  static get eventDelete() {\n    return `${prefix}-file-uploader-item-deleted`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSFileUploaderItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAA,sBAAA,MACM,4BAA4B,WAAW;;;yBAqFzB;iBAMR;kBAMC;;;sBAkBI;mBAMH;;;;;CArHZ,2BAAmC;EACjC,MAAM,OAAO;GACX,SAAS;GACT,YAAY;GACZ,UAAU;GACX;EACD,MAAM,EAAE,mBAAmB,gBAAgB,KACxC;AACH,MAAI,KAAK,cAAc,IAAI,YAAY,mBAAmB,KAAK,CAAC,CAC9D,MAAK,cAAc,IAAI,YAAY,aAAa,KAAK,CAAC;;;;;CAO1D,iBAAyB;EACvB,MAAM,EACJ,iBACA,SACA,0BAA0B,4BACxB;AACJ,SAAO,IAAI;QACP,CAAC,UACC,KAAA,IACA,WAAW,iBAAiB,EAAE,OAAO,qBAA2B,CAAC,CAAC;;;oBAGxD,KAAK,SAAS;sBACZ,gBAAgB;uBACd;kBACN,wBAAwB;UAChC,WAAW,QAAQ,CAAC;;;;;;;CAQ5B,mBAA2B;EACzB,MAAM,EAAE,oBAAoB;AAC5B,SAAO,IAAI;;0BAEW,gBAAgB;wBACP;;;;;;CAOjC,kBAA0B;EACxB,MAAM,EAAE,oBAAoB;AAC5B,SAAO,WAAW,mBAAmB;GACnC,OAAO;GACP,cAAc;GACf,CAAC;;;;;CAMJ,gBAAwB;EACtB,MAAM,EAAE,UAAU;AAClB,UAAQ,OAAR;GACE,KAAA,OACE,QAAO,KAAK,gBAAgB;GAC9B,KAAA,YACE,QAAO,KAAK,kBAAkB;GAChC,KAAA,WACE,QAAO,KAAK,iBAAiB;GAC/B,QACE;;;CA8CN,SAAS;EACP,MAAM,EAAE,SAAS,cAAc,cAAc;AAC7C,SAAO,IAAI,cAAA,MAAqB;2BACR;WACjB,KAAK,eAAe,CAAC;;;uBAGR;mBACL,CAAC,WAAW,CAAC,aAAa;4BAChB,6BAA6B,aAAa;;yBAE7C;qBACL,CAAC,UAAU;YACpB,UAAU;;;;;;;;CASpB,WAAW,oBAAoB;AAC7B,SAAO;;;;;CAMT,WAAW,cAAc;AACvB,SAAO;;;gBAGOA;;;YAxEf,SAAS,EAAE,WAAW,oBAAoB,CAAC,CAAA,EAAA,oBAAA,WAAA,mBAAA,KAAA,EAAA;YAM3C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,WAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,QAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,oBAAA,WAAA,SAAA,KAAA,EAAA;YAM3B,SAAS,EAAE,WAAW,iBAAiB,CAAC,CAAA,EAAA,oBAAA,WAAA,gBAAA,KAAA,EAAA;YAMxC,SAAS,EAAE,WAAW,cAAc,CAAC,CAAA,EAAA,oBAAA,WAAA,aAAA,KAAA,EAAA;kCAzHvCC,cAAc,yBAA+B,CAAA,EAAA,oBAAA;AAgK9C,IAAA,6BAAe"}