@heartlandone/vega 2.81.0 → 2.83.0

package/dist/collection/components/vega-color-swatch/vega-color-swatch.css

@@ -0,0 +1,155 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.vega-color-swatch-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 4px;
+}
+
+.swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
+  position: relative;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.shape-basket .swatch {
+  border-radius: 8px;
+}
+
+.shape-block .swatch {
+  border-radius: 0px;
+}
+
+.check-icon {
+  position: relative;
+  z-index: 1;
+}
+
+.swatch-clear .swatch {
+  background-color: rgba(var(--v-bg-transparent, 0, 0, 0, 0));
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+}
+.swatch-clear .swatch .clear-line {
+  position: absolute;
+  width: 141%;
+  height: 0;
+  border-top-width: 1px;
+  border-left-width: 0px;
+  border-bottom-width: 0px;
+  border-right-width: 0px;
+  border-style: solid;
+  border-color: rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  transform: rotate(-45deg);
+  transform-origin: center;
+}
+
+.color-fill {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.size-extra-small .swatch {
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+}
+.size-extra-small.shape-basket .swatch {
+  border-radius: 4px;
+}
+
+.size-small .swatch {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+}
+.size-small.shape-basket {
+  border-radius: 8px;
+}
+
+.size-medium .swatch {
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+}
+.size-medium.shape-basket {
+  border-radius: 8px;
+}
+
+@media (hover: hover) {
+  :host(:not(.disabled)) .swatch:hover {
+    border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
+  }
+  :host(:not(.disabled)) .swatch-clear .swatch:hover {
+    border-color: rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1));
+  }
+  :host(:not(.disabled)) .swatch-clear .swatch:hover .clear-line {
+    border-color: rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1));
+  }
+}
+
+.vega-color-swatch-container:focus-visible {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+}
+.vega-color-swatch-container:focus-visible .swatch {
+  border-width: 1px;
+  border-style: solid;
+  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
+}
+.vega-color-swatch-container:focus-visible.swatch-clear {
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
+}
+.vega-color-swatch-container:focus-visible.swatch-clear .swatch {
+  border-color: rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1));
+}
+.vega-color-swatch-container:focus-visible.swatch-clear .swatch .clear-line {
+  border-color: rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1));
+}
+
+:host(:not(.disabled)) .vega-color-swatch-container {
+  cursor: pointer;
+}
+
+:host(.disabled) .vega-color-swatch-container {
+  cursor: not-allowed;
+}
+
+:host(.disabled) .swatch {
+  border-color: rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1));
+  pointer-events: none;
+}
+:host(.disabled) .swatch .color-fill,
+:host(.disabled) .swatch .check-icon {
+  opacity: 0.5;
+}
+:host(.disabled) .swatch .label-container {
+  color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
+}
+:host(.disabled) .swatch .clear-line {
+  border-color: rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1));
+}
+
+.swatch-label {
+  margin-left: 8px;
+}

package/dist/collection/components/vega-color-swatch/vega-color-swatch.js

@@ -0,0 +1,314 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Host, h, Element, Prop, Event } from '@stencil/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { VegaColorSwatchRenderer } from './slimmers/renderers/vega-color-swatch-renderer';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
+import { VegaClick } from '../../helpers/event-manager/event-id/vega-event-id';
+import { TranslationSlimmer } from '../../helpers/slimmers/translation';
+/**
+ * A color input that allows users to select a color from a predefined list.
+ * It can be used with multiple swatches to create a color grid,
+ * or paired with an input field to support custom color values.
+ *
+ * @vegaVersion 2.82.0
+ */
+export class VegaColorSwatch {
+  constructor() {
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.translationSlimmer = new TranslationSlimmer();
+    this.vegaColorSwatchRenderer = new VegaColorSwatchRenderer();
+    this.clickEventEmitter = createEventEmitSlimmer(VegaColorSwatch, VegaClick);
+    /**
+     * Specifies the CSS color value for the swatch (e.g. '#841AC1', 'rgb(15, 137, 82)', 'rgba(15, 137, 82, 0.5)').
+     * Applies only when `variant` is set to 'swatch'.
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.color = '';
+    /**
+     * Indicates whether the swatch is currently selected. When selected, a check mark is shown, and its color automatically adjusts to maintain contrast against the swatch color.
+     *
+     * @vegaVersion 2.82.0
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.selected = false;
+    /**
+     * Specifies the label or title for the swatch.
+     *    It provides descriptive text that helps identify the purpose or content expected in the swatch.
+     
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.label = '';
+    /**
+     * Specifies the size of the swatch.
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.size = 'small';
+    /**
+     * Specifies whether the swatch is disabled.
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.disabled = false;
+    /**
+     * Specifies the visual style and prominence of the swatch.
+     *    It determines how the swatch will be presented to the user.
+     * - 'swatch': Displays the color fill.
+     * - 'clear': Displays a diagonal line to indicate no color (clear selection).
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.variant = 'swatch';
+    /**
+     * Controls the outer shape of the swatch.
+     * - 'basket': Rounded corners for spaced layouts.
+     * - 'block': Square corners for dense or flush layouts.
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.shape = 'basket';
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: {
+        disabled: this.disabled,
+      } }, this.vegaColorSwatchRenderer.render()), this.host);
+  }
+  static get is() { return "vega-color-swatch"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-color-swatch.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-color-swatch.css"]
+  }; }
+  static get properties() { return {
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Specifies the CSS color value for the swatch (e.g. '#841AC1', 'rgb(15, 137, 82)', 'rgba(15, 137, 82, 0.5)').\nApplies only when `variant` is set to 'swatch'."
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Indicates whether the swatch is currently selected. When selected, a check mark is shown, and its color automatically adjusts to maintain contrast against the swatch color."
+      },
+      "attribute": "selected",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Specifies the label or title for the swatch.\n   It provides descriptive text that helps identify the purpose or content expected in the swatch."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaColorSwatchSize",
+        "resolved": "\"extra-small\" | \"medium\" | \"small\"",
+        "references": {
+          "VegaColorSwatchSize": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Specifies the size of the swatch."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'small'"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Specifies whether the swatch is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaColorSwatchVariant",
+        "resolved": "\"clear\" | \"swatch\"",
+        "references": {
+          "VegaColorSwatchVariant": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Specifies the visual style and prominence of the swatch.\n   It determines how the swatch will be presented to the user.\n- 'swatch': Displays the color fill.\n- 'clear': Displays a diagonal line to indicate no color (clear selection)."
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'swatch'"
+    },
+    "shape": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaColorSwatchShape",
+        "resolved": "\"basket\" | \"block\"",
+        "references": {
+          "VegaColorSwatchShape": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Controls the outer shape of the swatch.\n- 'basket': Rounded corners for spaced layouts.\n- 'block': Square corners for dense or flush layouts."
+      },
+      "attribute": "shape",
+      "reflect": false,
+      "defaultValue": "'basket'"
+    }
+  }; }
+  static get events() { return [{
+      "method": "vegaClick",
+      "name": "vegaClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "An event emitter notifying the click event of the swatch."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "click",
+      "name": "click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }, {
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying the click event of the swatch."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaColorSwatch.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatch.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatch.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatch.prototype, "vegaColorSwatchRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaColorSwatch.prototype, "clickEventEmitter", void 0);

package/dist/collection/components/vega-dropdown/vega-dropdown-item/slimmers/controllers/vega-dropdown-item-state-controller.js

@@ -45,6 +45,10 @@ export class VegaDropdownItemStateController extends SubStateObserverSlimmer {
           subStateName: 'itemDisplayRule',
           parentStateName: 'itemDisplayRule',
         },
+        {
+          subStateName: 'itemTooltipProps',
+          parentStateName: 'itemTooltipProps',
+        },
         {
           subStateName: 'selected',
           parentStateName: 'selectedSourceKey',
@@ -78,3 +82,6 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaDropdownItemStateController.prototype, "itemDisplayRule", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "itemTooltipProps", void 0);

package/dist/collection/components/vega-dropdown/vega-dropdown-item/slimmers/renderers/vega-dropdown-item-renderer.js

@@ -74,6 +74,7 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
     this.vegaDropdownItemClickController.handleClick(e);
   }
   renderLabelWithTooltip() {
+    var _a, _b, _c;
     if (!this.label) {
       return this.renderLabel();
     }
@@ -83,7 +84,7 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
         }
       }, text: htmlSanitizer
         .sanitize(this.label, labelSanitizeStrategy)
-        .replace(/<b>(.*?)<\/b>/g, '$1'), trigger: "none", placement: ['bottom', 'top'], alignment: "center", 
+        .replace(/<b>(.*?)<\/b>/g, '$1'), trigger: "none", placement: ((_a = this.itemTooltipProps) === null || _a === void 0 ? void 0 : _a.placement) || ['bottom', 'top'], alignment: "center", maxWidth: (_b = this.itemTooltipProps) === null || _b === void 0 ? void 0 : _b.maxWidth, minWidth: (_c = this.itemTooltipProps) === null || _c === void 0 ? void 0 : _c.minWidth, 
       /* eslint-disable-next-line react/jsx-no-bind */
       onMouseEnter: () => {
         const isTextTruncated = this.labelRef.scrollWidth > this.labelRef.clientWidth;
@@ -131,6 +132,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "itemDisplayRule", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "itemTooltipProps", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "danger", void 0);

package/dist/collection/components/vega-dropdown/vega-dropdown-item/vega-dropdown-item.js

@@ -214,7 +214,8 @@ export class VegaDropdownItem {
     "selectType": {},
     "prefixIconSlot": {},
     "selected": {},
-    "itemDisplayRule": {}
+    "itemDisplayRule": {},
+    "itemTooltipProps": {}
   }; }
   static get events() { return [{
       "method": "vegaClick",

package/dist/collection/components/vega-dropdown/vega-dropdown.js

@@ -61,6 +61,7 @@ export class VegaDropdown {
     this.selectTypeNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectType', 'watchSelectType');
     this.selectedSourceKeyNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectedSourceKey', 'watchSelectedSourceKey');
     this.prefixIconSlotNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'prefixIconSlot', 'watchPrefixIconSlot');
+    this.itemTooltipPropsNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'itemTooltipProps', 'watchItemTooltipProps');
     this.itemClickObserver = new ChildNodesNotifyObserverSlimmer(DROPDOWN_ITEM_CLICK, (payload) => this.selectedController.select(payload.detail.itemKey), this.selectedController.isAcceptableItemSelectionObserver.bind(this.selectedController));
     this.showEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownShow);
     this.hideEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownHide);
@@ -282,6 +283,9 @@ export class VegaDropdown {
   watchItemDisplayRule() {
     methodPlaceholder();
   }
+  watchItemTooltipProps() {
+    methodPlaceholder();
+  }
   watchCaseSensitive() {
     methodPlaceholder();
   }
@@ -693,6 +697,34 @@ export class VegaDropdown {
       "reflect": false,
       "defaultValue": "'newline'"
     },
+    "itemTooltipProps": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Partial<Pick<HTMLVegaTooltipElement, 'placement' | 'maxWidth' | 'minWidth'>>",
+        "resolved": "{ minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; placement?: ElementAppenderPlacementType; }",
+        "references": {
+          "Partial": {
+            "location": "global"
+          },
+          "Pick": {
+            "location": "global"
+          },
+          "HTMLVegaTooltipElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Provides tooltip configuration options for dropdown items.\n\nUseful for controlling tooltip width for long item labels."
+      }
+    },
     "matchContainerHeight": {
       "type": "boolean",
       "mutable": false,
@@ -1444,6 +1476,9 @@ export class VegaDropdown {
     }, {
       "propName": "itemDisplayRule",
       "methodName": "watchItemDisplayRule"
+    }, {
+      "propName": "itemTooltipProps",
+      "methodName": "watchItemTooltipProps"
     }, {
       "propName": "caseSensitive",
       "methodName": "watchCaseSensitive"
@@ -1512,6 +1547,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "prefixIconSlotNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "itemTooltipPropsNotifySlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "itemClickObserver", void 0);

package/dist/collection/components/vega-file-uploader/vega-file-uploader.js

@@ -17,7 +17,7 @@ import { VegaChange, VegaPreview, VegaRemove, VegaRetry, VegaSelectFileChange, }
 import { VegaFileUploaderValueController } from './slimmers/controllers/vega-file-uploader-value-controller';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { FileUploaderRequiredRule } from '../../helpers/validator/rules/file-uploader-required-rule';
-import { VegaFileUploaderDropFileFilterController } from './slimmers/controllers/vega-file-uploader-drop-file-filter-controller';
+import { DropFileAcceptFilterSlimmer } from '../../helpers/slimmers/drop-file-accept-filter-slimmer';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 import { VegaFileUploaderFileLimitController } from './slimmers/controllers/vega-file-uploader-file-limit-controller';
 /**
@@ -46,7 +46,7 @@ export class VegaFileUploader {
     this.vegaFileUploaderFileListRenderer = new VegaFileUploaderFileListRenderer();
     this.vegaFileUploaderFileStatusRenderer = new VegaFileUploaderFileStatusRenderer();
     this.vegaFileUploaderValueController = new VegaFileUploaderValueController();
-    this.dropFileFilterController = new VegaFileUploaderDropFileFilterController();
+    this.dropFileFilterController = new DropFileAcceptFilterSlimmer();
     this.fileLimitController = new VegaFileUploaderFileLimitController();
     this.changeEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaChange);
     this.selectFileChangeEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaSelectFileChange);

package/dist/collection/components/vega-image-uploader/slimmers/renderers/vega-image-uploader-default-content-renderer.js

@@ -15,6 +15,41 @@ export class VegaImageUploaderDefaultContentRenderer extends VegaSlimmer {
       e.stopPropagation();
       this.inputController.triggerInputClick();
     };
+    /**
+     * An event handler that is triggered when files are dropped onto the image uploader drop area.
+     *
+     * preventDefault() is always called (even when `disabled`) to stop the browser's default
+     * behavior of navigating to the dropped file URL — some browsers (e.g., Firefox) will navigate
+     * away from the page if a file drop is not preventDefault'd by some handler in the propagation
+     * path. stopPropagation() is called because the drop has been consumed by this component and
+     * parent containers should not re-process the same files (e.g., a page-level drop handler
+     * shouldn't also try to upload them). Parent containers can still observe dragenter/dragover
+     * to manage drag overlays and dismiss them via the dragleave/dragend events.
+     *
+     * @param {DragEvent} e drag event object
+     */
+    this.dropHandler = (e) => {
+      var _a;
+      e.preventDefault();
+      e.stopPropagation();
+      if (this.disabled) {
+        return;
+      }
+      const files = this.dropFileFilterController.process((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files);
+      if (files.length) {
+        this.valueController.setValue(files[0]);
+      }
+    };
+    /**
+     * Used to prevent the default browser behavior on dragenter/dragover so the element is registered
+     * as a valid drop target. stopPropagation() is intentionally omitted here so parent containers
+     * can still react to drag events (e.g., page-level drag overlays).
+     *
+     * @param {DragEvent} e drag event object
+     */
+    this.handleDragEvent = (e) => {
+      e.preventDefault();
+    };
   }
   /**
    * The render function returns a div element with a button-like appearance that triggers a click event when clicked or when the enter key is pressed.
@@ -22,7 +57,7 @@ export class VegaImageUploaderDefaultContentRenderer extends VegaSlimmer {
    * @returns {HTMLDivElement} The render() method is returning an HTMLDivElement.
    */
   render() {
-    return (h("div", { class: "action-wrapper", role: "button", tabIndex: 0, onClick: this.handleUploaderClick, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+    return (h("div", { class: "action-wrapper", role: "button", tabIndex: 0, onClick: this.handleUploaderClick, onKeyDown: createEnterKeyHandlerToTriggerClick(), onDrop: this.dropHandler, onDragEnter: this.handleDragEvent, onDragOver: this.handleDragEvent },
       h("vega-icon", { icon: "plus-sign", size: "size-24" }),
       h("div", { class: "vega-image-uploader-text" }, this.translationSlimmer.t(this.actionTitle)),
       this.renderSubtitle()));
@@ -34,6 +69,15 @@ export class VegaImageUploaderDefaultContentRenderer extends VegaSlimmer {
 __decorate([
   MapToComponentField({ componentFieldName: 'vegaImageUploaderInputController' })
 ], VegaImageUploaderDefaultContentRenderer.prototype, "inputController", void 0);
+__decorate([
+  MapToComponentField({ componentFieldName: 'vegaImageUploaderValueController' })
+], VegaImageUploaderDefaultContentRenderer.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaImageUploaderDefaultContentRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaImageUploaderDefaultContentRenderer.prototype, "dropFileFilterController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaImageUploaderDefaultContentRenderer.prototype, "actionTitle", void 0);