@ui5/webcomponents-fiori 0.0.0-7e7d9ea6f → 0.0.0-81513ce21

package/dist/UploadCollection.js

@@ -1,4 +1,15 @@
+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;
+};
+var UploadCollection_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
@@ -6,192 +17,17 @@ import Label from "@ui5/webcomponents/dist/Label.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import ListMode from "@ui5/webcomponents/dist/types/ListMode.js";
 import Title from "@ui5/webcomponents/dist/Title.js";
+import IllustratedMessage from "./IllustratedMessage.js";
+import "./illustrations/sapIllus-Scene-Tent.js";
 import "@ui5/webcomponents-icons/dist/upload-to-cloud.js";
 import "@ui5/webcomponents-icons/dist/document.js";
-import {
-	UPLOADCOLLECTION_NO_DATA_TEXT,
-	UPLOADCOLLECTION_NO_DATA_DESCRIPTION,
-	UPLOADCOLLECTION_DRAG_FILE_INDICATOR,
-	UPLOADCOLLECTION_DROP_FILE_INDICATOR,
-	UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION,
-} from "./generated/i18n/i18n-defaults.js";
-import {
-	attachBodyDnDHandler,
-	detachBodyDnDHandler,
-	draggingFiles,
-} from "./upload-utils/UploadCollectionBodyDnD.js";
+import { UPLOADCOLLECTION_NO_DATA_TEXT, UPLOADCOLLECTION_NO_DATA_DESCRIPTION, UPLOADCOLLECTION_DRAG_FILE_INDICATOR, UPLOADCOLLECTION_DROP_FILE_INDICATOR, UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
+import { attachBodyDnDHandler, detachBodyDnDHandler, draggingFiles, } from "./upload-utils/UploadCollectionBodyDnD.js";
 import UploadCollectionDnDOverlayMode from "./types/UploadCollectionDnDMode.js";
-
 // Template
 import UploadCollectionTemplate from "./generated/templates/UploadCollectionTemplate.lit.js";
-
 // Styles
 import UploadCollectionCss from "./generated/themes/UploadCollection.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-upload-collection",
-	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.UploadCollection.prototype */ {
-		/**
-		 * Defines the mode of the <code>ui5-upload-collection</code>.
-		 *
-		 * <br><br>
-		 * <b>Note:</b>
-		 * <ul>
-		 * <li><code>None</code></li>
-		 * <li><code>SingleSelect</code></li>
-		 * <li><code>MultiSelect</code></li>
-		 * <li><code>Delete</code></li>
-		 * </ul>
-		 *
-		 * @type {ListMode}
-		 * @defaultvalue "None"
-		 * @public
-		 */
-		mode: {
-			type: ListMode,
-			defaultValue: ListMode.None,
-		},
-
-		/**
-		 * Allows you to set your own text for the 'No data' description.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		noDataDescription: {
-			type: String,
-		},
-
-		/**
-		 * Allows you to set your own text for the 'No data' text.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		noDataText: {
-			type: String,
-		},
-
-		/**
-		 * By default there will be drag and drop overlay shown over the <code>ui5-upload-collection</code> when files
-		 * are dragged. If you don't intend to use drag and drop, set this property.
-		 * <br><br>
-		 * <b>Note:</b> It is up to the application developer to add handler for <code>drop</code> event and handle it.
-		 * <code>ui5-upload-collection</code> only displays an overlay.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		hideDragOverlay: {
-			type: Boolean,
-		},
-
-		/**
-		 * Indicates what overlay to show when files are being dragged.
-		 *
-		 * @type {UploadCollectionDnDOverlayMode}
-		 * @defaultvalue "None"
-		 * @private
-		 */
-		_dndOverlayMode: {
-			type: String,
-			defaultValue: UploadCollectionDnDOverlayMode.None,
-		},
-
-		/**
-		 * Defines the accessible aria name of the component.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 * @since 1.0.0-rc.16
-		 */
-		accessibleName: {
-			type: String,
-		},
-	},
-	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.fiori.UploadCollection.prototype */ {
-		/**
-		 * Defines the items of the <code>ui5-upload-collection</code>.
-		 * <br><b>Note:</b> Use <code>ui5-upload-collection-item</code> for the intended design.
-		 *
-		 * @type {sap.ui.webcomponents.fiori.IUploadCollectionItem[]}
-		 * @slot items
-		 * @public
-		 */
-		"default": {
-			propertyName: "items",
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines the <code>ui5-upload-collection</code> header.
-		 * <br><br>
-		 * <b>Note:</b> If <code>header</code> slot is provided,
-		 * the labelling of the <code>UploadCollection</code> is a responsibility of the application developer.
-		 * <code>accessibleName</code> should be used.
-		 *
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		header: {
-			type: HTMLElement,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.fiori.UploadCollection.prototype */ {
-		/**
-		 * Fired when an element is dropped inside the drag and drop overlay.
-		 * <br><br>
-		 * <b>Note:</b> The <code>drop</code> event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the <code>ui5-upload-collection</code>.
-		 *
-		 * @event sap.ui.webcomponents.fiori.UploadCollection#drop
-		 * @readonly
-		 * @param {DataTransfer} dataTransfer The <code>drop</code> event operation data.
-		 * @public
-		 * @native
-		 */
-		drop: {},
-
-		/**
-		 * Fired when the Delete button of any item is pressed.
-		 * <br><br>
-		 * <b>Note:</b> A Delete button is displayed on each item,
-		 * when the <code>ui5-upload-collection</code> <code>mode</code> property is set to <code>Delete</code>.
-		 * @event sap.ui.webcomponents.fiori.UploadCollection#item-delete
-		 * @param {HTMLElement} item The <code>ui5-upload-collection-item</code> which was renamed.
-		 * @public
-		 */
-		"item-delete": {
-			detail: {
-				item: { type: HTMLElement },
-			},
-		},
-
-		/**
-		 * Fired when selection is changed by user interaction
-		 * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.
-		 *
-		 * @event sap.ui.webcomponents.fiori.UploadCollection#selection-change
-		 * @param {Array} selectedItems An array of the selected items.
-		 * @public
-		 */
-		"selection-change": {
-			detail: {
-				selectedItems: { type: Array },
-			},
-		},
-	},
-};
-
 /**
  * @class
  *
@@ -206,171 +42,201 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.UploadCollection
- * @extends UI5Element
+ * @alias sap.ui.webc.fiori.UploadCollection
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-upload-collection
- * @appenddocs UploadCollectionItem
+ * @appenddocs sap.ui.webc.fiori.UploadCollectionItem
  * @public
  * @since 1.0.0-rc.7
  */
-class UploadCollection extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return UploadCollectionCss;
-	}
-
-	static get template() {
-		return UploadCollectionTemplate;
-	}
-
-	static get dependencies() {
-		return [
-			Icon,
-			Label,
-			List,
-			Title,
-		];
-	}
-
-	static async onDefine() {
-		UploadCollection.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
-	}
-
-	constructor() {
-		super();
-		this._bodyDnDHandler = event => {
-			if (this._dndOverlayMode !== UploadCollectionDnDOverlayMode.Drop) {
-				this._dndOverlayMode = event.mode;
-			}
-		};
-	}
-
-	onEnterDOM() {
-		if (this.hideDragOverlay) {
-			return;
-		}
-
-		attachBodyDnDHandler(this._bodyDnDHandler);
-	}
-
-	onExitDOM() {
-		if (this.hideDragOverlay) {
-			return;
-		}
-
-		detachBodyDnDHandler(this._bodyDnDHandler);
-	}
-
-	_ondragenter(event) {
-		if (this.hideDragOverlay) {
-			return;
-		}
-
-		if (!draggingFiles(event)) {
-			return;
-		}
-
-		this._dndOverlayMode = UploadCollectionDnDOverlayMode.Drop;
-	}
-
-	_ondrop(event) {
-		if (this.hideDragOverlay) {
-			return;
-		}
-
-		if (event.target !== this.shadowRoot.querySelector(".uc-dnd-overlay")) {
-			event.stopPropagation();
-		}
-
-		this._dndOverlayMode = UploadCollectionDnDOverlayMode.None;
-	}
-
-	_ondragover(event) {
-		if (this.hideDragOverlay) {
-			return;
-		}
-
-		event.preventDefault();
-	}
-
-	_ondragleave() {
-		if (this.hideDragOverlay) {
-			return;
-		}
-
-		this._dndOverlayMode = UploadCollectionDnDOverlayMode.Drag;
-	}
-
-	_onItemDelete(event) {
-		this.fireEvent("item-delete", { item: event.detail.item });
-	}
-
-	_onSelectionChange(event) {
-		this.fireEvent("selection-change", { selectedItems: event.detail.selectedItems });
-	}
-
-	get classes() {
-		return {
-			content: {
-				"ui5-uc-content": true,
-				"ui5-uc-content-no-data": this.items.length === 0,
-			},
-			dndOverlay: {
-				"uc-dnd-overlay": true,
-				"uc-drag-overlay": this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drag,
-				"uc-drop-overlay": this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drop,
-			},
-			noFiles: {
-				"uc-no-files": true,
-				"uc-no-files-dnd-overlay": this._showDndOverlay,
-			},
-		};
-	}
-
-	get _root() {
-		return this.shadowRoot.querySelector(".ui5-uc-root");
-	}
-
-	get _dndOverlay() {
-		return this._root.querySelector(".uc-dnd-overlay");
-	}
-
-	get _showDndOverlay() {
-		return this._dndOverlayMode !== UploadCollectionDnDOverlayMode.None;
-	}
-
-	get _showNoData() {
-		return this.items.length === 0;
-	}
-
-	get _noDataText() {
-		return this.noDataText || UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_TEXT);
-	}
-
-	get _noDataDescription() {
-		return this.noDataDescription || UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_DESCRIPTION);
-	}
-
-	get _roleDescription() {
-		return UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION);
-	}
-
-	get _dndOverlayText() {
-		if (this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drag) {
-			return UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_DRAG_FILE_INDICATOR);
-		}
-
-		return UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_DROP_FILE_INDICATOR);
-	}
-}
-
+let UploadCollection = UploadCollection_1 = class UploadCollection extends UI5Element {
+    static async onDefine() {
+        UploadCollection_1.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
+    }
+    constructor() {
+        super();
+        this._bodyDnDHandler = this.bodyDnDHandler.bind(this);
+    }
+    bodyDnDHandler(e) {
+        if (this._dndOverlayMode !== UploadCollectionDnDOverlayMode.Drop) {
+            this._dndOverlayMode = e.mode;
+        }
+    }
+    onEnterDOM() {
+        if (this.hideDragOverlay) {
+            return;
+        }
+        attachBodyDnDHandler(this._bodyDnDHandler);
+    }
+    onExitDOM() {
+        if (this.hideDragOverlay) {
+            return;
+        }
+        detachBodyDnDHandler(this._bodyDnDHandler);
+    }
+    _ondragenter(e) {
+        if (this.hideDragOverlay) {
+            return;
+        }
+        if (!draggingFiles(e)) {
+            return;
+        }
+        this._dndOverlayMode = UploadCollectionDnDOverlayMode.Drop;
+    }
+    _ondrop(e) {
+        if (this.hideDragOverlay) {
+            return;
+        }
+        if (e.target !== this.shadowRoot.querySelector(".uc-dnd-overlay")) {
+            e.stopPropagation();
+        }
+        this._dndOverlayMode = UploadCollectionDnDOverlayMode.None;
+    }
+    _ondragover(e) {
+        if (this.hideDragOverlay) {
+            return;
+        }
+        e.preventDefault();
+    }
+    _ondragleave() {
+        if (this.hideDragOverlay) {
+            return;
+        }
+        this._dndOverlayMode = UploadCollectionDnDOverlayMode.Drag;
+    }
+    _onItemDelete(e) {
+        this.fireEvent("item-delete", { item: e.detail.item });
+    }
+    _onSelectionChange(e) {
+        this.fireEvent("selection-change", { selectedItems: e.detail.selectedItems });
+    }
+    get classes() {
+        return {
+            content: {
+                "ui5-uc-content": true,
+                "ui5-uc-content-no-data": this.items.length === 0,
+            },
+            dndOverlay: {
+                "uc-dnd-overlay": true,
+                "uc-drag-overlay": this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drag,
+                "uc-drop-overlay": this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drop,
+            },
+            noFiles: {
+                "uc-no-files": true,
+                "uc-no-files-dnd-overlay": this._showDndOverlay,
+            },
+        };
+    }
+    get _root() {
+        return this.shadowRoot.querySelector(".ui5-uc-root");
+    }
+    get _dndOverlay() {
+        return this._root?.querySelector(".uc-dnd-overlay");
+    }
+    get _showDndOverlay() {
+        return this._dndOverlayMode !== UploadCollectionDnDOverlayMode.None;
+    }
+    get _showNoData() {
+        return this.items.length === 0;
+    }
+    get _noDataText() {
+        return this.noDataText || UploadCollection_1.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_TEXT);
+    }
+    get _noDataDescription() {
+        return this.noDataDescription || UploadCollection_1.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_DESCRIPTION);
+    }
+    get _roleDescription() {
+        return UploadCollection_1.i18nBundle.getText(UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION);
+    }
+    get _dndOverlayText() {
+        if (this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drag) {
+            return UploadCollection_1.i18nBundle.getText(UPLOADCOLLECTION_DRAG_FILE_INDICATOR);
+        }
+        return UploadCollection_1.i18nBundle.getText(UPLOADCOLLECTION_DROP_FILE_INDICATOR);
+    }
+};
+__decorate([
+    property({ type: ListMode, defaultValue: ListMode.None })
+], UploadCollection.prototype, "mode", void 0);
+__decorate([
+    property()
+], UploadCollection.prototype, "noDataDescription", void 0);
+__decorate([
+    property()
+], UploadCollection.prototype, "noDataText", void 0);
+__decorate([
+    property({ type: Boolean })
+], UploadCollection.prototype, "hideDragOverlay", void 0);
+__decorate([
+    property()
+], UploadCollection.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: UploadCollectionDnDOverlayMode, defaultValue: UploadCollectionDnDOverlayMode.None })
+], UploadCollection.prototype, "_dndOverlayMode", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], UploadCollection.prototype, "items", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], UploadCollection.prototype, "header", void 0);
+UploadCollection = UploadCollection_1 = __decorate([
+    customElement({
+        tag: "ui5-upload-collection",
+        languageAware: true,
+        renderer: litRender,
+        styles: UploadCollectionCss,
+        template: UploadCollectionTemplate,
+        dependencies: [
+            Icon,
+            Label,
+            List,
+            Title,
+            IllustratedMessage,
+        ],
+    })
+    /**
+     * Fired when an element is dropped inside the drag and drop overlay.
+     * <br><br>
+     * <b>Note:</b> The <code>drop</code> event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the <code>ui5-upload-collection</code>.
+     *
+     * @event sap.ui.webc.fiori.UploadCollection#drop
+     * @readonly
+     * @param {DataTransfer} dataTransfer The <code>drop</code> event operation data.
+     * @public
+     * @native
+     */
+    ,
+    event("drop")
+    /**
+     * Fired when the Delete button of any item is pressed.
+     * <br><br>
+     * <b>Note:</b> A Delete button is displayed on each item,
+     * when the <code>ui5-upload-collection</code> <code>mode</code> property is set to <code>Delete</code>.
+     * @event sap.ui.webc.fiori.UploadCollection#item-delete
+     * @param {HTMLElement} item The <code>ui5-upload-collection-item</code> which was renamed.
+     * @public
+     */
+    ,
+    event("item-delete", {
+        detail: {
+            item: { type: HTMLElement },
+        },
+    })
+    /**
+     * Fired when selection is changed by user interaction
+     * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.
+     *
+     * @event sap.ui.webc.fiori.UploadCollection#selection-change
+     * @param {Array} selectedItems An array of the selected items.
+     * @public
+     */
+    ,
+    event("selection-change", {
+        detail: {
+            selectedItems: { type: Array },
+        },
+    })
+], UploadCollection);
 UploadCollection.define();
-
 export default UploadCollection;
+//# sourceMappingURL=UploadCollection.js.map

package/dist/UploadCollection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadCollection.js","sourceRoot":"","sources":["../src/UploadCollection.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AACjE,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,wCAAwC,CAAC;AAChD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,2CAA2C,CAAC;AACnD,OAAO,EACN,6BAA6B,EAC7B,oCAAoC,EACpC,oCAAoC,EACpC,oCAAoC,EACpC,sCAAsC,GACtC,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EACN,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,GACb,MAAM,2CAA2C,CAAC;AAGnD,OAAO,8BAA8B,MAAM,oCAAoC,CAAC;AAEhF,WAAW;AACX,OAAO,wBAAwB,MAAM,uDAAuD,CAAC;AAE7F,SAAS;AACT,OAAO,mBAAmB,MAAM,4CAA4C,CAAC;AAU7E;;;;;;;;;;;;;;;;;;;;GAoBG;AAwDH,IAAM,gBAAgB,wBAAtB,MAAM,gBAAiB,SAAQ,UAAU;IA+GxC,MAAM,CAAC,KAAK,CAAC,QAAQ;QACpB,kBAAgB,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,0BAA0B,CAAC,CAAC;IAC/E,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,CAAC;IAED,cAAc,CAAC,CAAwB;QACtC,IAAI,IAAI,CAAC,eAAe,KAAK,8BAA8B,CAAC,IAAI,EAAE;YACjE,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC;SAC9B;IACF,CAAC;IAED,UAAU;QACT,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,OAAO;SACP;QAED,oBAAoB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAC5C,CAAC;IAED,SAAS;QACR,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,OAAO;SACP;QAED,oBAAoB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAC5C,CAAC;IAED,YAAY,CAAC,CAAY;QACxB,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,OAAO;SACP;QAED,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;YACtB,OAAO;SACP;QAED,IAAI,CAAC,eAAe,GAAG,8BAA8B,CAAC,IAAI,CAAC;IAC5D,CAAC;IAED,OAAO,CAAC,CAAY;QACnB,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,OAAO;SACP;QAED,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,EAAE;YACnE,CAAC,CAAC,eAAe,EAAE,CAAC;SACpB;QAED,IAAI,CAAC,eAAe,GAAG,8BAA8B,CAAC,IAAI,CAAC;IAC5D,CAAC;IAED,WAAW,CAAC,CAAY;QACvB,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,OAAO;SACP;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;IACpB,CAAC;IAED,YAAY;QACX,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,OAAO;SACP;QAED,IAAI,CAAC,eAAe,GAAG,8BAA8B,CAAC,IAAI,CAAC;IAC5D,CAAC;IAED,aAAa,CAAC,CAAqC;QAClD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;IACxD,CAAC;IAED,kBAAkB,CAAC,CAA0C;QAC5D,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE,EAAE,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC;IAC/E,CAAC;IAED,IAAI,OAAO;QACV,OAAO;YACN,OAAO,EAAE;gBACR,gBAAgB,EAAE,IAAI;gBACtB,wBAAwB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;aACjD;YACD,UAAU,EAAE;gBACX,gBAAgB,EAAE,IAAI;gBACtB,iBAAiB,EAAE,IAAI,CAAC,eAAe,KAAK,8BAA8B,CAAC,IAAI;gBAC/E,iBAAiB,EAAE,IAAI,CAAC,eAAe,KAAK,8BAA8B,CAAC,IAAI;aAC/E;YACD,OAAO,EAAE;gBACR,aAAa,EAAE,IAAI;gBACnB,yBAAyB,EAAE,IAAI,CAAC,eAAe;aAC/C;SACD,CAAC;IACH,CAAC;IAED,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACvD,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACrD,CAAC;IAED,IAAI,eAAe;QAClB,OAAO,IAAI,CAAC,eAAe,KAAK,8BAA8B,CAAC,IAAI,CAAC;IACrE,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;IAChC,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,UAAU,IAAI,kBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,6BAA6B,CAAC,CAAC;IAC9F,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,IAAI,CAAC,iBAAiB,IAAI,kBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,oCAAoC,CAAC,CAAC;IAC5G,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,kBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,sCAAsC,CAAC,CAAC;IACpF,CAAC;IAED,IAAI,eAAe;QAClB,IAAI,IAAI,CAAC,eAAe,KAAK,8BAA8B,CAAC,IAAI,EAAE;YACjE,OAAO,kBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,oCAAoC,CAAC,CAAC;SACjF;QAED,OAAO,kBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,oCAAoC,CAAC,CAAC;IAClF,CAAC;CACD,CAAA;AAhOA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC;8CAC1C;AAWhB;IADC,QAAQ,EAAE;2DACgB;AAW3B;IADC,QAAQ,EAAE;oDACS;AAepB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDACF;AAYzB;IADC,QAAQ,EAAE;wDACa;AAUzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,8BAA8B,EAAE,YAAY,EAAE,8BAA8B,CAAC,IAAI,EAAE,CAAC;yDACrD;AAYjD;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+CACT;AAepC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;gDACA;AAzGvB,gBAAgB;IAvDrB,aAAa,CAAC;QACd,GAAG,EAAE,uBAAuB;QAC5B,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,mBAAmB;QAC3B,QAAQ,EAAE,wBAAwB;QAClC,YAAY,EAAE;YACb,IAAI;YACJ,KAAK;YACL,IAAI;YACJ,KAAK;YACL,kBAAkB;SAClB;KACD,CAAC;IACF;;;;;;;;;;OAUG;;IACF,KAAK,CAAC,MAAM,CAAC;IAEd;;;;;;;;OAQG;;IACF,KAAK,CAAC,aAAa,EAAE;QACrB,MAAM,EAAE;YACP,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;SAC3B;KACD,CAAC;IAEF;;;;;;;OAOG;;IACF,KAAK,CAAC,kBAAkB,EAAE;QAC1B,MAAM,EAAE;YACP,aAAa,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;SAC9B;KACD,CAAC;GACI,gBAAgB,CAmPrB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Label from \"@ui5/webcomponents/dist/Label.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport ListMode from \"@ui5/webcomponents/dist/types/ListMode.js\";\nimport Title from \"@ui5/webcomponents/dist/Title.js\";\nimport IllustratedMessage from \"./IllustratedMessage.js\";\nimport \"./illustrations/sapIllus-Scene-Tent.js\";\nimport \"@ui5/webcomponents-icons/dist/upload-to-cloud.js\";\nimport \"@ui5/webcomponents-icons/dist/document.js\";\nimport {\n\tUPLOADCOLLECTION_NO_DATA_TEXT,\n\tUPLOADCOLLECTION_NO_DATA_DESCRIPTION,\n\tUPLOADCOLLECTION_DRAG_FILE_INDICATOR,\n\tUPLOADCOLLECTION_DROP_FILE_INDICATOR,\n\tUPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport {\n\tattachBodyDnDHandler,\n\tdetachBodyDnDHandler,\n\tdraggingFiles,\n} from \"./upload-utils/UploadCollectionBodyDnD.js\";\nimport type UploadCollectionItem from \"./UploadCollectionItem.js\";\nimport type { DnDEventListener, DnDEventListenerParam } from \"./upload-utils/UploadCollectionBodyDnD.js\";\nimport UploadCollectionDnDOverlayMode from \"./types/UploadCollectionDnDMode.js\";\n\n// Template\nimport UploadCollectionTemplate from \"./generated/templates/UploadCollectionTemplate.lit.js\";\n\n// Styles\nimport UploadCollectionCss from \"./generated/themes/UploadCollection.css.js\";\n\ntype SelectionChangeEventDetail = {\n\tselectedItems: Array<UploadCollectionItem>,\n};\n\ntype ItemDeleteEventDetail = {\n\titem: UploadCollectionItem,\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * This component allows you to represent files before uploading them to a server, with the help of <code>ui5-upload-collection-item</code>.\n * It also allows you to show already uploaded files.\n *\n * <h3>ES6 Module Import</h3>\n * <code>import \"@ui5/webcomponents-fiori/dist/UploadCollection.js\";</code>\n * <br>\n * <code>import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";</code> (for <code>ui5-upload-collection-item</code>)\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.fiori.UploadCollection\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-upload-collection\n * @appenddocs sap.ui.webc.fiori.UploadCollectionItem\n * @public\n * @since 1.0.0-rc.7\n */\n@customElement({\n\ttag: \"ui5-upload-collection\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\tstyles: UploadCollectionCss,\n\ttemplate: UploadCollectionTemplate,\n\tdependencies: [\n\t\tIcon,\n\t\tLabel,\n\t\tList,\n\t\tTitle,\n\t\tIllustratedMessage,\n\t],\n})\n/**\n * Fired when an element is dropped inside the drag and drop overlay.\n * <br><br>\n * <b>Note:</b> The <code>drop</code> event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the <code>ui5-upload-collection</code>.\n *\n * @event sap.ui.webc.fiori.UploadCollection#drop\n * @readonly\n * @param {DataTransfer} dataTransfer The <code>drop</code> event operation data.\n * @public\n * @native\n */\n@event(\"drop\")\n\n/**\n * Fired when the Delete button of any item is pressed.\n * <br><br>\n * <b>Note:</b> A Delete button is displayed on each item,\n * when the <code>ui5-upload-collection</code> <code>mode</code> property is set to <code>Delete</code>.\n * @event sap.ui.webc.fiori.UploadCollection#item-delete\n * @param {HTMLElement} item The <code>ui5-upload-collection-item</code> which was renamed.\n * @public\n */\n@event(\"item-delete\", {\n\tdetail: {\n\t\titem: { type: HTMLElement },\n\t},\n})\n\n/**\n * Fired when selection is changed by user interaction\n * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.\n *\n * @event sap.ui.webc.fiori.UploadCollection#selection-change\n * @param {Array} selectedItems An array of the selected items.\n * @public\n */\n@event(\"selection-change\", {\n\tdetail: {\n\t\tselectedItems: { type: Array },\n\t},\n})\nclass UploadCollection extends UI5Element {\n\t/**\n\t * Defines the mode of the <code>ui5-upload-collection</code>.\n\t *\n\t * <br><br>\n\t * <b>Note:</b>\n\t * <ul>\n\t * <li><code>None</code></li>\n\t * <li><code>SingleSelect</code></li>\n\t * <li><code>MultiSelect</code></li>\n\t * <li><code>Delete</code></li>\n\t * </ul>\n\t *\n\t * @type {sap.ui.webc.main.types.ListMode}\n\t * @name sap.ui.webc.fiori.UploadCollection.prototype.mode\n\t * @defaultvalue \"None\"\n\t * @public\n\t */\n\t@property({ type: ListMode, defaultValue: ListMode.None })\n\tmode!: ListMode;\n\n\t/**\n\t * Allows you to set your own text for the 'No data' description.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.fiori.UploadCollection.prototype.noDataDescription\n\t * @defaultvalue \"\"\n\t * @public\n\t */\n\t@property()\n\tnoDataDescription!: string;\n\n\t/**\n\t * Allows you to set your own text for the 'No data' text.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.fiori.UploadCollection.prototype.noDataText\n\t * @defaultvalue \"\"\n\t * @public\n\t */\n\t@property()\n\tnoDataText!: string;\n\n\t/**\n\t * By default there will be drag and drop overlay shown over the <code>ui5-upload-collection</code> when files\n\t * are dragged. If you don't intend to use drag and drop, set this property.\n\t * <br><br>\n\t * <b>Note:</b> It is up to the application developer to add handler for <code>drop</code> event and handle it.\n\t * <code>ui5-upload-collection</code> only displays an overlay.\n\t *\n\t * @type {boolean}\n\t * @name sap.ui.webc.fiori.UploadCollection.prototype.hideDragOverlay\n\t * @defaultvalue false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thideDragOverlay!: boolean;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.fiori.UploadCollection.prototype.accessibleName\n\t * @defaultvalue \"\"\n\t * @public\n\t * @since 1.0.0-rc.16\n\t */\n\t @property()\n\t accessibleName!: string;\n\n\t/**\n\t * Indicates what overlay to show when files are being dragged.\n\t *\n\t * @type {sap.ui.webc.fiori.types.UploadCollectionDnDOverlayMode}\n\t * @defaultvalue \"None\"\n\t * @private\n\t */\n\t@property({ type: UploadCollectionDnDOverlayMode, defaultValue: UploadCollectionDnDOverlayMode.None })\n\t_dndOverlayMode!: UploadCollectionDnDOverlayMode;\n\n\t/**\n\t * Defines the items of the <code>ui5-upload-collection</code>.\n\t * <br><b>Note:</b> Use <code>ui5-upload-collection-item</code> for the intended design.\n\t *\n\t * @type {sap.ui.webc.fiori.IUploadCollectionItem[]}\n\t * @name sap.ui.webc.fiori.UploadCollection.prototype.default\n\t * @slot items\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: Array<UploadCollectionItem>;\n\n\t/**\n\t * Defines the <code>ui5-upload-collection</code> header.\n\t * <br><br>\n\t * <b>Note:</b> If <code>header</code> slot is provided,\n\t * the labelling of the <code>UploadCollection</code> is a responsibility of the application developer.\n\t * <code>accessibleName</code> should be used.\n\t *\n\t * @type {HTMLElement[]}\n\t * @name sap.ui.webc.fiori.UploadCollection.prototype.header\n\t * @slot\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\theader!: Array<HTMLElement>;\n\n\t_bodyDnDHandler: DnDEventListener;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async onDefine() {\n\t\tUploadCollection.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._bodyDnDHandler = this.bodyDnDHandler.bind(this);\n\t}\n\n\tbodyDnDHandler(e: DnDEventListenerParam) {\n\t\tif (this._dndOverlayMode !== UploadCollectionDnDOverlayMode.Drop) {\n\t\t\tthis._dndOverlayMode = e.mode;\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tif (this.hideDragOverlay) {\n\t\t\treturn;\n\t\t}\n\n\t\tattachBodyDnDHandler(this._bodyDnDHandler);\n\t}\n\n\tonExitDOM() {\n\t\tif (this.hideDragOverlay) {\n\t\t\treturn;\n\t\t}\n\n\t\tdetachBodyDnDHandler(this._bodyDnDHandler);\n\t}\n\n\t_ondragenter(e: DragEvent) {\n\t\tif (this.hideDragOverlay) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!draggingFiles(e)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._dndOverlayMode = UploadCollectionDnDOverlayMode.Drop;\n\t}\n\n\t_ondrop(e: DragEvent) {\n\t\tif (this.hideDragOverlay) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (e.target !== this.shadowRoot!.querySelector(\".uc-dnd-overlay\")) {\n\t\t\te.stopPropagation();\n\t\t}\n\n\t\tthis._dndOverlayMode = UploadCollectionDnDOverlayMode.None;\n\t}\n\n\t_ondragover(e: DragEvent) {\n\t\tif (this.hideDragOverlay) {\n\t\t\treturn;\n\t\t}\n\n\t\te.preventDefault();\n\t}\n\n\t_ondragleave() {\n\t\tif (this.hideDragOverlay) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._dndOverlayMode = UploadCollectionDnDOverlayMode.Drag;\n\t}\n\n\t_onItemDelete(e: CustomEvent<ItemDeleteEventDetail>) {\n\t\tthis.fireEvent(\"item-delete\", { item: e.detail.item });\n\t}\n\n\t_onSelectionChange(e: CustomEvent<SelectionChangeEventDetail>) {\n\t\tthis.fireEvent(\"selection-change\", { selectedItems: e.detail.selectedItems });\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\tcontent: {\n\t\t\t\t\"ui5-uc-content\": true,\n\t\t\t\t\"ui5-uc-content-no-data\": this.items.length === 0,\n\t\t\t},\n\t\t\tdndOverlay: {\n\t\t\t\t\"uc-dnd-overlay\": true,\n\t\t\t\t\"uc-drag-overlay\": this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drag,\n\t\t\t\t\"uc-drop-overlay\": this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drop,\n\t\t\t},\n\t\t\tnoFiles: {\n\t\t\t\t\"uc-no-files\": true,\n\t\t\t\t\"uc-no-files-dnd-overlay\": this._showDndOverlay,\n\t\t\t},\n\t\t};\n\t}\n\n\tget _root() {\n\t\treturn this.shadowRoot!.querySelector(\".ui5-uc-root\");\n\t}\n\n\tget _dndOverlay() {\n\t\treturn this._root?.querySelector(\".uc-dnd-overlay\");\n\t}\n\n\tget _showDndOverlay() {\n\t\treturn this._dndOverlayMode !== UploadCollectionDnDOverlayMode.None;\n\t}\n\n\tget _showNoData() {\n\t\treturn this.items.length === 0;\n\t}\n\n\tget _noDataText() {\n\t\treturn this.noDataText || UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_TEXT);\n\t}\n\n\tget _noDataDescription() {\n\t\treturn this.noDataDescription || UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_DESCRIPTION);\n\t}\n\n\tget _roleDescription() {\n\t\treturn UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION);\n\t}\n\n\tget _dndOverlayText() {\n\t\tif (this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drag) {\n\t\t\treturn UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_DRAG_FILE_INDICATOR);\n\t\t}\n\n\t\treturn UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_DROP_FILE_INDICATOR);\n\t}\n}\n\nUploadCollection.define();\n\nexport default UploadCollection;\n"]}