@carbon/web-components 2.58.1 → 2.59.0

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

@@ -43,6 +43,7 @@ let FeatureFlagsElement = class FeatureFlagsElement extends LitElement {
 	}
 	static {
 		this.flagComponentMap = {
+			"enable-v12-release": null,
 			"enable-v12-tile-default-icons": "CDS-CLICKABLE-TILE",
 			"enable-v12-tile-radio-icons": "CDS-TILE",
 			"enable-v12-overflowmenu": "CDS-OVERFLOW-MENU",
@@ -70,29 +71,56 @@ let FeatureFlagsElement = class FeatureFlagsElement extends LitElement {
 	attributeChangedCallback(name, _oldVal, newVal) {
 		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, "");
+		const relatedComponent = hasOwn(_FeatureFlagsElement.flagComponentMap, name) ? _FeatureFlagsElement.flagComponentMap[name] : null;
+		if (relatedComponent && this.firstElementChild?.tagName === relatedComponent) this.firstElementChild.setAttribute(name, "");
 		this.updateScope();
 	}
-	getParentScope() {
+	syncFeatureFlagAttributes() {
+		for (const [flag, relatedComponent] of Object.entries(_FeatureFlagsElement.flagComponentMap)) {
+			if (!relatedComponent) continue;
+			let isEnabled = false;
+			try {
+				isEnabled = this.scope.enabled(flag);
+			} catch {
+				isEnabled = false;
+			}
+			for (const element of this.querySelectorAll(relatedComponent.toLowerCase())) {
+				if (findParentFeatureFlags(element) !== this) continue;
+				if (isEnabled) element.setAttribute(flag, "");
+				else element.removeAttribute(flag);
+			}
+		}
+	}
+	getParentFeatureFlagsElement() {
 		let parent = this.parentNode;
 		while (parent) {
-			if (parent instanceof _FeatureFlagsElement) return parent.getScope();
+			if (parent instanceof ShadowRoot) {
+				parent = parent.host;
+				continue;
+			}
+			if (parent instanceof _FeatureFlagsElement) return parent;
 			parent = parent.parentNode;
 		}
 		return null;
 	}
+	getParentScope() {
+		return this.getParentFeatureFlagsElement()?.getScope() ?? null;
+	}
+	syncChildFeatureFlagScopes() {
+		for (const element of this.querySelectorAll("feature-flags")) if (element instanceof _FeatureFlagsElement && element.getParentFeatureFlagsElement() === this) element.updateScope();
+	}
 	updateScope() {
 		const newScope = createScope(this.flags);
 		const parentScope = this.getParentScope() || FeatureFlags;
 		if (parentScope) newScope.mergeWithScope(parentScope);
 		this.scope = newScope;
+		this.syncFeatureFlagAttributes();
+		this.syncChildFeatureFlagScopes();
 	}
 	render() {
 		return html` <slot></slot> `;
 	}
 	isFeatureFlagEnabled(flag) {
-		if (Object.prototype.hasOwnProperty.call(this.flags, flag)) return this.flags[flag];
 		return this.scope.enabled(flag);
 	}
 	getScope() {

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-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,GAAG;AAE/C,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;EAC7C;;CAEA,WAAW,qBAAqB;EAC9B,OAAO,OAAO,KAAA,qBAAyB,gBAAgB;CACzD;CAEA,cAAc;EACZ,MAAM;eAvBQA;eACc,CAAC;EAuB7B,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;CACpC;CAEA,oBAAoB;EAClB,MAAM,kBAAkB;EACxB,KAAK,YAAY;CACnB;CAEA,yBACE,MACA,SACA,QACA;EACA,MAAM,QAAQ,WAAW,QAAQ,WAAW;EAC5C,KAAK,MAAM,QAAQ;EAGnB,MAAM,mBAAmB,OAAA,qBAA2B,kBAAkB,IAAI,IAAA,qBAClD,iBAAiB,QACrC;EACJ,IAAI,KAAK,mBAAmB,YAAY,kBACtC,KAAK,kBAAkB,aAAa,MAAM,EAAE;EAG9C,KAAK,YAAY;CACnB;CAEA,iBAAyB;EACvB,IAAI,SAAS,KAAK;EAClB,OAAO,QAAQ;GACb,IAAI,kBAAA,sBACF,OAAO,OAAO,SAAS;GAEzB,SAAS,OAAO;EAClB;EACA,OAAO;CACT;CAEA,cAAsB;EACpB,MAAM,WAAW,YAAY,KAAK,KAAK;EACvC,MAAM,cAAc,KAAK,eAAe,KAAKA;EAC7C,IAAI,aACF,SAAS,eAAe,WAAW;EAErC,KAAK,QAAQ;CACf;CAEA,SAAS;EACP,OAAO,IAAI;CACb;CAEA,qBAA4B,MAAc;EACxC,IAAI,OAAO,UAAU,eAAe,KAAK,KAAK,OAAO,IAAI,GACvD,OAAO,KAAK,MAAM;EAEpB,OAAO,KAAK,MAAM,QAAQ,IAAI;CAChC;CAEA,WAAmB;EACjB,OAAO,KAAK;CACd;AACF;yDAvFCC,cAAc,eAAe,CAAA,GAAA,mBAAA;AAyF9B,IAAA,wBAAe;AAKf,SAAgB,uBACd,IAC4B;CAC5B,IAAI,SAAsB,GAAG;CAC7B,OAAO,QAAQ;EACb,IAAI,kBAAkB,YAAY;GAChC,SAAS,OAAO;GAChB;EACF;EACA,IAAI,kBAAkB,qBACpB,OAAO;EAET,SAAU,OAAuB;CACnC;CACA,OAAO;AACT;AAGA,SAAgB,qBACd,MACA,SACS;CAET,OADiB,uBAAuB,OAC1B,CAAC,EAAE,qBAAqB,IAAI,KAAK;AACjD"}
+{"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-release': null,\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      : null;\n    if (\n      relatedComponent &&\n      this.firstElementChild?.tagName === relatedComponent\n    ) {\n      this.firstElementChild.setAttribute(name, '');\n    }\n\n    this.updateScope();\n  }\n\n  private syncFeatureFlagAttributes() {\n    for (const [flag, relatedComponent] of Object.entries(\n      FeatureFlagsElement.flagComponentMap\n    )) {\n      if (!relatedComponent) {\n        continue;\n      }\n\n      let isEnabled = false;\n      try {\n        isEnabled = this.scope.enabled(flag);\n      } catch {\n        isEnabled = false;\n      }\n\n      for (const element of this.querySelectorAll(\n        relatedComponent.toLowerCase()\n      )) {\n        if (findParentFeatureFlags(element as HTMLElement) !== this) {\n          continue;\n        }\n\n        if (isEnabled) {\n          element.setAttribute(flag, '');\n        } else {\n          element.removeAttribute(flag);\n        }\n      }\n    }\n  }\n\n  private getParentFeatureFlagsElement() {\n    let parent: Node | null = this.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.parentNode;\n    }\n    return null;\n  }\n\n  private getParentScope() {\n    return this.getParentFeatureFlagsElement()?.getScope() ?? null;\n  }\n\n  private syncChildFeatureFlagScopes() {\n    for (const element of this.querySelectorAll('feature-flags')) {\n      if (\n        element instanceof FeatureFlagsElement &&\n        element.getParentFeatureFlagsElement() === this\n      ) {\n        element.updateScope();\n      }\n    }\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    this.syncFeatureFlagAttributes();\n    this.syncChildFeatureFlagScopes();\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: 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,GAAG;AAE/C,IAAA,sBAAA,MACM,4BAA4B,WAAW;;;;;0BAOA;GACzC,sBAAsB;GACtB,iCAAiC;GACjC,+BAA+B;GAC/B,2BAA2B;GAC3B,gCAAgC;GAChC,oDAAoD;GACpD,uCAAuC;GACvC,yBAAyB;GACzB,sCAAsC;GACtC,2CAA2C;EAC7C;;CAEA,WAAW,qBAAqB;EAC9B,OAAO,OAAO,KAAA,qBAAyB,gBAAgB;CACzD;CAEA,cAAc;EACZ,MAAM;eAxBQA;eACc,CAAC;EAwB7B,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;CACpC;CAEA,oBAAoB;EAClB,MAAM,kBAAkB;EACxB,KAAK,YAAY;CACnB;CAEA,yBACE,MACA,SACA,QACA;EACA,MAAM,QAAQ,WAAW,QAAQ,WAAW;EAC5C,KAAK,MAAM,QAAQ;EAGnB,MAAM,mBAAmB,OAAA,qBAA2B,kBAAkB,IAAI,IAAA,qBAClD,iBAAiB,QACrC;EACJ,IACE,oBACA,KAAK,mBAAmB,YAAY,kBAEpC,KAAK,kBAAkB,aAAa,MAAM,EAAE;EAG9C,KAAK,YAAY;CACnB;CAEA,4BAAoC;EAClC,KAAK,MAAM,CAAC,MAAM,qBAAqB,OAAO,QAAA,qBACxB,gBACtB,GAAG;GACD,IAAI,CAAC,kBACH;GAGF,IAAI,YAAY;GAChB,IAAI;IACF,YAAY,KAAK,MAAM,QAAQ,IAAI;GACrC,QAAQ;IACN,YAAY;GACd;GAEA,KAAK,MAAM,WAAW,KAAK,iBACzB,iBAAiB,YAAY,CAC/B,GAAG;IACD,IAAI,uBAAuB,OAAsB,MAAM,MACrD;IAGF,IAAI,WACF,QAAQ,aAAa,MAAM,EAAE;SAE7B,QAAQ,gBAAgB,IAAI;GAEhC;EACF;CACF;CAEA,+BAAuC;EACrC,IAAI,SAAsB,KAAK;EAC/B,OAAO,QAAQ;GACb,IAAI,kBAAkB,YAAY;IAChC,SAAS,OAAO;IAChB;GACF;GACA,IAAI,kBAAA,sBACF,OAAO;GAET,SAAS,OAAO;EAClB;EACA,OAAO;CACT;CAEA,iBAAyB;EACvB,OAAO,KAAK,6BAA6B,CAAC,EAAE,SAAS,KAAK;CAC5D;CAEA,6BAAqC;EACnC,KAAK,MAAM,WAAW,KAAK,iBAAiB,eAAe,GACzD,IACE,mBAAA,wBACA,QAAQ,6BAA6B,MAAM,MAE3C,QAAQ,YAAY;CAG1B;CAEA,cAAsB;EACpB,MAAM,WAAW,YAAY,KAAK,KAAK;EACvC,MAAM,cAAc,KAAK,eAAe,KAAKA;EAC7C,IAAI,aACF,SAAS,eAAe,WAAW;EAErC,KAAK,QAAQ;EACb,KAAK,0BAA0B;EAC/B,KAAK,2BAA2B;CAClC;CAEA,SAAS;EACP,OAAO,IAAI;CACb;CAEA,qBAA4B,MAAc;EACxC,OAAO,KAAK,MAAM,QAAQ,IAAI;CAChC;CAEA,WAAmB;EACjB,OAAO,KAAK;CACd;AACF;yDA5ICC,cAAc,eAAe,CAAA,GAAA,mBAAA;AA8I9B,IAAA,wBAAe;AAKf,SAAgB,uBACd,IAC4B;CAC5B,IAAI,SAAsB,GAAG;CAC7B,OAAO,QAAQ;EACb,IAAI,kBAAkB,YAAY;GAChC,SAAS,OAAO;GAChB;EACF;EACA,IAAI,kBAAkB,qBACpB,OAAO;EAET,SAAU,OAAuB;CACnC;CACA,OAAO;AACT;AAGA,SAAgB,qBACd,MACA,SACS;CAET,OADiB,uBAAuB,OAC1B,CAAC,EAAE,qBAAqB,IAAI,KAAK;AACjD"}

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

@@ -28,6 +28,7 @@ declare const CDSFileUploaderButton_base: {
  * @fires cds-file-uploader-button-changed The custom event fired when there is a user gesture to select files to upload.
  */
 declare class CDSFileUploaderButton extends CDSFileUploaderButton_base {
+    private _fileInput;
     /**
      * Handles `click` event on the button.
      */

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;IAkDN;;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;;;;;;;;;;uBAOvE,CAAC;;;;;AAHtB;;;;;GAKG;AACH,cACM,qBAAsB,SAAQ,0BAA6B;IAE/D,OAAO,CAAC,UAAU,CAAoB;IAEtC;;OAEG;IACH,OAAO,CAAC,YAAY;IAMpB;;OAEG;IACH,OAAO,CAAC,cAAc;IAOtB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAgBrB;;;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

@@ -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"}