@sapudex/web-components 0.192.2 → 0.199.3

package/dist/Upload.js

@@ -0,0 +1,198 @@
+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 UDExUpload_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import { event, slot } from "@ui5/webcomponents-base/dist/decorators.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import FileUploader from "@ui5/webcomponents/dist/FileUploader.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { UPLOAD_BUTTON_LABEL } from "./generated/i18n/i18n-defaults.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExList from "./List.js";
+import UDExUploadItem from "./UploadItem.js";
+import UploadTemplate from "./generated/templates/UploadTemplate.lit.js";
+// Styles
+import UploadCss from "./generated/themes/Upload.css.js";
+const convertBytesToMegabytes = (bytes) => (bytes / 1024) / 1024;
+const BreakpointSizeS = 979;
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-upload</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/Upload.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExUpload = UDExUpload_1 = class UDExUpload extends UI5Element {
+    static async onDefine() {
+        UDExUpload_1.i18nBundle = await getI18nBundle("@udex/web-components");
+    }
+    constructor() {
+        super();
+        /**
+         * Defines if a file is already uploaded when multiple is false.
+         *
+         * @private
+         */
+        this._filesFull = false;
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
+    }
+    onAfterRendering() {
+        if (this._filesFull) {
+            this._filesFull = this.fileNumberExceeded;
+        }
+    }
+    handleUploadClick(e) {
+        this._filesFull = this.fileNumberExceeded;
+        if (this.fileNumberExceeded) {
+            e.preventDefault();
+        }
+    }
+    handleUploadFile(e) {
+        const newFiles = e.target.files;
+        if (!newFiles?.length || this.fileNumberExceeded) {
+            e.stopPropagation();
+        }
+        const exceededFilesData = this.maxFileSize ? this._getExceededFiles(newFiles) : [];
+        if (exceededFilesData.length) {
+            e.stopPropagation();
+            this.fireEvent("file-size-exceed", {
+                files: exceededFilesData,
+            });
+        }
+    }
+    handleSelectionChange(e) {
+        this.fireEvent("file-change", { files: e.detail.listItems });
+    }
+    _handleResize() {
+        this._buttonSize = window.innerWidth <= BreakpointSizeS ? UDExButtonSize.Medium : UDExButtonSize.Large;
+    }
+    handleRemoveFile(e) {
+        this.fireEvent("file-delete", { file: e.target });
+    }
+    _getExceededFiles(files) {
+        const filesArray = Array.from(files);
+        const exceededFiles = [];
+        for (let i = 0; i < filesArray.length; i++) {
+            const fileSize = convertBytesToMegabytes(filesArray[i].size);
+            if (fileSize > this.maxFileSize) {
+                exceededFiles.push({
+                    fileName: filesArray[i].name,
+                    fileSize,
+                });
+            }
+        }
+        return exceededFiles;
+    }
+    get uploadButtonAriaLabel() {
+        return UDExUpload_1.i18nBundle.getText(UPLOAD_BUTTON_LABEL);
+    }
+    get listBusy() {
+        return !this.items.length;
+    }
+    get fileNumberExceeded() {
+        return !this.multiple && this.items.length >= 1;
+    }
+};
+__decorate([
+    property({ type: String })
+], UDExUpload.prototype, "uploadTitle", void 0);
+__decorate([
+    property({ type: String })
+], UDExUpload.prototype, "errorText", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExUpload.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExUpload.prototype, "multiple", void 0);
+__decorate([
+    property({ type: String })
+], UDExUpload.prototype, "accept", void 0);
+__decorate([
+    property({ type: Number, validator: Integer })
+], UDExUpload.prototype, "maxFileSize", void 0);
+__decorate([
+    property({ type: String })
+], UDExUpload.prototype, "additionalText", void 0);
+__decorate([
+    property({ type: String })
+], UDExUpload.prototype, "uploadButtonText", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExUpload.prototype, "_filesFull", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], UDExUpload.prototype, "items", void 0);
+__decorate([
+    property({ type: String, defaultValue: UDExButtonSize.Large })
+], UDExUpload.prototype, "_buttonSize", void 0);
+UDExUpload = UDExUpload_1 = __decorate([
+    customElement({
+        tag: "udex-upload",
+        renderer: litRender,
+        styles: UploadCss,
+        template: UploadTemplate,
+        dependencies: [FileUploader, UDExList, UDExButton, UDExUploadItem],
+    })
+    /**
+     * Triggered when the uploaded file exceeds the maximum allowed size.
+     *
+     * @public
+     */
+    ,
+    event("file-size-exceed", {
+        detail: {
+            files: { type: Array },
+        },
+    })
+    /**
+     * Triggered when the user deletes the uploaded item.
+     *
+     * @public
+     */
+    ,
+    event("file-delete", {
+        detail: {
+            file: { type: UDExUploadItem },
+        },
+    })
+    /**
+     * Triggered when the user uploads the item.
+     *
+     * @public
+     */
+    ,
+    event("file-change", {
+        detail: {
+            files: { type: Array },
+        },
+    })
+], UDExUpload);
+UDExUpload.define();
+export default UDExUpload;
+//# sourceMappingURL=Upload.js.map

package/dist/Upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Upload.js","sourceRoot":"","sources":["../src/Upload.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport { event, slot } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport ResizeHandler, { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport FileUploader from \"@ui5/webcomponents/dist/FileUploader.js\";\nimport I18nBundle, { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { UPLOAD_BUTTON_LABEL } from \"./generated/i18n/i18n-defaults.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExList from \"./List.js\";\nimport UDExUploadItem from \"./UploadItem.js\";\nimport UploadTemplate from \"./generated/templates/UploadTemplate.lit.js\";\nimport FileData from \"./types/FileData.js\";\n\n// Styles\nimport UploadCss from \"./generated/themes/Upload.css.js\";\n\nconst convertBytesToMegabytes = (bytes: number) => (bytes / 1024) / 1024;\nconst BreakpointSizeS: number = 979;\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-upload</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/Upload.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-upload\",\n  renderer: litRender,\n  styles: UploadCss,\n  template: UploadTemplate,\n  dependencies: [FileUploader, UDExList, UDExButton, UDExUploadItem],\n})\n\n/**\n * Triggered when the uploaded file exceeds the maximum allowed size.\n *\n * @public\n */\n@event(\"file-size-exceed\", {\n  detail:\n    {\n      files:\n        { type: Array },\n    },\n})\n\n/**\n * Triggered when the user deletes the uploaded item.\n *\n * @public\n */\n@event(\"file-delete\", {\n  detail:\n    {\n      file:\n        { type: UDExUploadItem },\n    },\n})\n\n/**\n * Triggered when the user uploads the item.\n *\n * @public\n */\n@event(\"file-change\", {\n  detail:\n    {\n      files:\n        { type: Array },\n    },\n})\n\nclass UDExUpload extends UI5Element {\n  /**\n   * Defines the title of the upload.\n   *\n   * @public\n   */\n  @property({ type: String })\n    uploadTitle!: string;\n\n  /**\n   * Defines the error message shown when more than one file is uploaded with multiple set to false.\n   *\n   * @public\n   */\n  @property({ type: String })\n    errorText!: string;\n\n  /**\n   * Defines if uploader is required.\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    required!: boolean;\n\n  /**\n   * Defines if uploading multiple files is allowed.\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    multiple!: boolean;\n\n  /**\n   * Defines the acceptable file formats for uploading.\n   *\n   * @public\n   */\n  @property({ type: String })\n    accept!: string;\n\n  /**\n   * Defines the maximum allowed size of the file for uploading.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: Number, validator: Integer })\n    maxFileSize!: number;\n\n  /**\n   * Defines the additional text below the title of the upload.\n   *\n   * @public\n   */\n  @property({ type: String })\n    additionalText!: string;\n\n  /**\n   * Defines the text in the upload button.\n   *\n   * @public\n   */\n  @property({ type: String })\n    uploadButtonText!: string;\n\n  /**\n   * Defines if a file is already uploaded when multiple is false.\n   *\n   * @private\n   */\n  @property({ type: Boolean })\n    _filesFull: boolean = false;\n\n  /**\n   * Defines the uploaded files.\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    items!: Array<UDExUploadItem>;\n\n  /**\n   * Defines the percentage of the upload.\n   *\n   * @default \"Large\"\n   * @private\n   */\n  @property({ type: String, defaultValue: UDExButtonSize.Large })\n    _buttonSize!: `${UDExButtonSize}`;\n\n  static i18nBundle: I18nBundle;\n  _handleResizeBound: ResizeObserverCallback;\n\n  static async onDefine() {\n    UDExUpload.i18nBundle = await getI18nBundle(\"@udex/web-components\");\n  }\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  onAfterRendering(): void {\n    if (this._filesFull) {\n      this._filesFull = this.fileNumberExceeded;\n    }\n  }\n\n  handleUploadClick(e: Event) {\n    this._filesFull = this.fileNumberExceeded;\n    if (this.fileNumberExceeded) {\n      e.preventDefault();\n    }\n  }\n\n  handleUploadFile(e: Event) {\n    const newFiles = (e.target as HTMLInputElement).files;\n\n    if (!newFiles?.length || this.fileNumberExceeded) {\n      e.stopPropagation();\n    }\n\n    const exceededFilesData = this.maxFileSize ? this._getExceededFiles(newFiles!) : [];\n    if (exceededFilesData.length) {\n      e.stopPropagation();\n      this.fireEvent(\"file-size-exceed\", {\n        files: exceededFilesData,\n      });\n    }\n  }\n\n  handleSelectionChange(e: CustomEvent) {\n    this.fireEvent(\"file-change\", { files: e.detail.listItems as UDExUploadItem[] });\n  }\n\n  _handleResize() {\n    this._buttonSize = window.innerWidth <= BreakpointSizeS ? UDExButtonSize.Medium : UDExButtonSize.Large;\n  }\n\n  handleRemoveFile(e: CustomEvent) {\n    this.fireEvent(\"file-delete\", { file: e.target as UDExUploadItem });\n  }\n\n  _getExceededFiles(files: FileList): Array<FileData> {\n    const filesArray = Array.from(files);\n    const exceededFiles: Array<FileData> = [];\n\n    for (let i = 0; i < filesArray.length; i++) {\n      const fileSize = convertBytesToMegabytes(filesArray[i].size);\n      if (fileSize > this.maxFileSize) {\n        exceededFiles.push({\n          fileName: filesArray[i].name,\n          fileSize,\n        });\n      }\n    }\n    return exceededFiles;\n  }\n\n  get uploadButtonAriaLabel(): string {\n    return UDExUpload.i18nBundle.getText(UPLOAD_BUTTON_LABEL);\n  }\n\n  get listBusy(): boolean {\n    return !this.items.length;\n  }\n\n  get fileNumberExceeded(): boolean {\n    return !this.multiple && this.items.length >= 1;\n  }\n}\n\nUDExUpload.define();\n\nexport default UDExUpload;\n"]}

package/dist/UploadItem.d.ts

@@ -0,0 +1,101 @@
+import { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UDExListItem from "./ListItem.js";
+import UDExLink from "./Link.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import FileUploadState from "./types/FileUploadState.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-upload-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/UploadItem.js";</code>
+ *
+ * @constructor
+ * @extends UDExListItemBase
+ * @public
+ */
+declare class UDExUploadItem extends UDExListItem {
+    /**
+     * Defines the name of the uploaded file.
+     *
+     * @default ""
+     * @public
+     */
+    fileName: string;
+    /**
+     * Defines the link of the uploaded file.
+     *
+     * @default undefined
+     * @public
+     */
+    fileLink?: string;
+    /**
+     * Defines the percentage of the upload.
+     *
+     * @default 0
+     * @public
+     */
+    uploadPercentage: number;
+    /**
+     * Defines the percentage of the upload.
+     *
+     * @default 0
+     * @public
+     */
+    uploadState: `${FileUploadState}`;
+    /**
+     * Slot for information about the uploaded file.
+     *
+     * @slot
+     * @public
+     */
+    uploadInfo: Array<HTMLElement>;
+    /**
+     * Defines the percentage of the upload.
+     *
+     * @default "Large"
+     * @private
+     */
+    _buttonSize: `${UDExButtonSize}`;
+    /**
+     * Defines if the screen is at the M breakpoint.
+     *
+     * @default false
+     * @private
+     */
+    _breakpointM: boolean;
+    /**
+     * Defines if the screen is at the L breakpoint.
+     *
+     * @default false
+     * @private
+     */
+    _breakpointL: boolean;
+    static i18nBundle: I18nBundle;
+    _handleResizeBound: ResizeObserverCallback;
+    static onDefine(): Promise<void>;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    onAfterRendering(): void;
+    handleButtonClick(e: Event): void;
+    handleButtonKeydown(e: KeyboardEvent): void;
+    _handleResize(): void;
+    get fileLinkComponent(): UDExLink;
+    get removeButtonAccessibleName(): string;
+    get showUploadProgress(): boolean;
+    get uploadProgressState(): ValueState;
+    get uploadStatus(): string;
+    get fileInteractive(): boolean;
+    get additionalInfoClasses(): string;
+    get uploadItemClasses(): string;
+}
+export default UDExUploadItem;

package/dist/UploadItem.js

@@ -0,0 +1,151 @@
+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 UDExUploadItem_1;
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import { slot } from "@ui5/webcomponents-base/dist/decorators.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import { REMOVE_FILE_TEXT, TERMINATED_FILE_STATUS_TEXT, UPLOADING_FILE_STATUS_TEXT, } from "./generated/i18n/i18n-defaults.js";
+import UDExListItem from "./ListItem.js";
+import UDExProgressBar from "./ProgressBar.js";
+import UDExLink from "./Link.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UploadItemTemplate from "./generated/templates/UploadItemTemplate.lit.js";
+// Styles
+import UploadItemCss from "./generated/themes/UploadItem.css.js";
+import FileUploadState from "./types/FileUploadState.js";
+const BreakpointSizeS = 979;
+const BreakpointSizeM = 1279;
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-upload-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/UploadItem.js";</code>
+ *
+ * @constructor
+ * @extends UDExListItemBase
+ * @public
+ */
+let UDExUploadItem = UDExUploadItem_1 = class UDExUploadItem extends UDExListItem {
+    static async onDefine() {
+        UDExUploadItem_1.i18nBundle = await getI18nBundle("@udex/web-components");
+    }
+    constructor() {
+        super();
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._handleResizeBound);
+        this.fireEvent("item-press", {
+            selected: false,
+            item: this,
+        });
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
+    }
+    onAfterRendering() {
+        const fileLink = this.fileLinkComponent;
+        if (fileLink) {
+            fileLink._setCustomAttributes([{ attribute: "download", value: "true" }]);
+        }
+    }
+    handleButtonClick(e) {
+        e.stopImmediatePropagation();
+        this.fireEvent("request-delete");
+    }
+    handleButtonKeydown(e) {
+        if (isEnter(e) || isSpace(e)) {
+            e.stopImmediatePropagation();
+            this.fireEvent("request-delete");
+        }
+    }
+    _handleResize() {
+        this._buttonSize = window.innerWidth <= BreakpointSizeS ? UDExButtonSize.Medium : UDExButtonSize.Large;
+        this._breakpointL = window.innerWidth > BreakpointSizeM;
+        this._breakpointM = !this._breakpointL ? true : !this._breakpointL && this.uploadState === FileUploadState.Uploaded;
+    }
+    get fileLinkComponent() {
+        return this.shadowRoot.querySelector("[udex-link]");
+    }
+    get removeButtonAccessibleName() {
+        return UDExUploadItem_1.i18nBundle.getText(REMOVE_FILE_TEXT);
+    }
+    get showUploadProgress() {
+        return this.uploadState === FileUploadState.Error || this.uploadState === FileUploadState.Uploading;
+    }
+    get uploadProgressState() {
+        if (this.uploadState === FileUploadState.Uploading) {
+            return ValueState.Information;
+        }
+        return ValueState.Error;
+    }
+    get uploadStatus() {
+        if (this.uploadState === FileUploadState.Uploading) {
+            return `${UDExUploadItem_1.i18nBundle.getText(UPLOADING_FILE_STATUS_TEXT)} ${this.uploadPercentage}%`;
+        }
+        return `${UDExUploadItem_1.i18nBundle.getText(TERMINATED_FILE_STATUS_TEXT)} ${this.uploadPercentage}%`;
+    }
+    get fileInteractive() {
+        return this.uploadState === FileUploadState.Uploaded;
+    }
+    get additionalInfoClasses() {
+        return `udex-upload-item__info ${this.uploadState === FileUploadState.Error ? "udex-upload-item__error" : ""}`;
+    }
+    get uploadItemClasses() {
+        return this.uploadState === "Uploaded" ? "udex-upload-item__info-uploaded" : "";
+    }
+};
+__decorate([
+    property({ type: String })
+], UDExUploadItem.prototype, "fileName", void 0);
+__decorate([
+    property({ type: String })
+], UDExUploadItem.prototype, "fileLink", void 0);
+__decorate([
+    property({ type: Number, validator: Integer })
+], UDExUploadItem.prototype, "uploadPercentage", void 0);
+__decorate([
+    property({ type: FileUploadState, defaultValue: FileUploadState.Uploaded })
+], UDExUploadItem.prototype, "uploadState", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], UDExUploadItem.prototype, "uploadInfo", void 0);
+__decorate([
+    property({ type: UDExButtonSize })
+], UDExUploadItem.prototype, "_buttonSize", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExUploadItem.prototype, "_breakpointM", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExUploadItem.prototype, "_breakpointL", void 0);
+UDExUploadItem = UDExUploadItem_1 = __decorate([
+    customElement({
+        tag: "udex-upload-item",
+        renderer: litRender,
+        styles: UploadItemCss,
+        template: UploadItemTemplate,
+        dependencies: [UDExLink, UDExListItem, UDExProgressBar, UDExButton],
+    })
+], UDExUploadItem);
+UDExUploadItem.define();
+export default UDExUploadItem;
+//# sourceMappingURL=UploadItem.js.map

package/dist/UploadItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadItem.js","sourceRoot":"","sources":["../src/UploadItem.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport { slot } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport ResizeHandler, { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport I18nBundle, { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport {\n  REMOVE_FILE_TEXT,\n  TERMINATED_FILE_STATUS_TEXT, UPLOADING_FILE_STATUS_TEXT,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport UDExProgressBar from \"./ProgressBar.js\";\nimport UDExLink from \"./Link.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UploadItemTemplate from \"./generated/templates/UploadItemTemplate.lit.js\";\n\n// Styles\nimport UploadItemCss from \"./generated/themes/UploadItem.css.js\";\nimport FileUploadState from \"./types/FileUploadState.js\";\n\nconst BreakpointSizeS: number = 979;\nconst BreakpointSizeM: number = 1279;\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-upload-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/UploadItem.js\";</code>\n *\n * @constructor\n * @extends UDExListItemBase\n * @public\n */\n@customElement({\n  tag: \"udex-upload-item\",\n  renderer: litRender,\n  styles: UploadItemCss,\n  template: UploadItemTemplate,\n  dependencies: [UDExLink, UDExListItem, UDExProgressBar, UDExButton],\n})\n\nclass UDExUploadItem extends UDExListItem {\n  /**\n   * Defines the name of the uploaded file.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    fileName!: string;\n\n  /**\n   * Defines the link of the uploaded file.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    fileLink?: string;\n\n  /**\n   * Defines the percentage of the upload.\n   *\n   * @default 0\n   * @public\n   */\n  @property({ type: Number, validator: Integer })\n    uploadPercentage!: number;\n\n  /**\n   * Defines the percentage of the upload.\n   *\n   * @default 0\n   * @public\n   */\n  @property({ type: FileUploadState, defaultValue: FileUploadState.Uploaded })\n    uploadState!: `${FileUploadState}`;\n\n  /**\n   * Slot for information about the uploaded file.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true }) uploadInfo!: Array<HTMLElement>;\n\n  /**\n   * Defines the percentage of the upload.\n   *\n   * @default \"Large\"\n   * @private\n   */\n  @property({ type: UDExButtonSize })\n    _buttonSize!: `${UDExButtonSize}`;\n\n  /**\n   * Defines if the screen is at the M breakpoint.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _breakpointM!: boolean;\n\n  /**\n   * Defines if the screen is at the L breakpoint.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _breakpointL!: boolean;\n\n  static i18nBundle: I18nBundle;\n  _handleResizeBound: ResizeObserverCallback;\n\n  static async onDefine() {\n    UDExUploadItem.i18nBundle = await getI18nBundle(\"@udex/web-components\");\n  }\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._handleResizeBound);\n    this.fireEvent(\"item-press\", {\n      selected: false,\n      item: this,\n    });\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  onAfterRendering(): void {\n    const fileLink = this.fileLinkComponent;\n    if (fileLink) {\n      fileLink._setCustomAttributes([{ attribute: \"download\", value: \"true\" }]);\n    }\n  }\n\n  handleButtonClick(e: Event) {\n    e.stopImmediatePropagation();\n    this.fireEvent(\"request-delete\");\n  }\n\n  handleButtonKeydown(e: KeyboardEvent) {\n    if (isEnter(e) || isSpace(e)) {\n      e.stopImmediatePropagation();\n      this.fireEvent(\"request-delete\");\n    }\n  }\n\n  _handleResize() {\n    this._buttonSize = window.innerWidth <= BreakpointSizeS ? UDExButtonSize.Medium : UDExButtonSize.Large;\n    this._breakpointL = window.innerWidth > BreakpointSizeM;\n    this._breakpointM = !this._breakpointL ? true : !this._breakpointL && this.uploadState === FileUploadState.Uploaded;\n  }\n\n  get fileLinkComponent(): UDExLink {\n    return this.shadowRoot!.querySelector<UDExLink>(\"[udex-link]\")!;\n  }\n\n  get removeButtonAccessibleName(): string {\n    return UDExUploadItem.i18nBundle.getText(REMOVE_FILE_TEXT);\n  }\n\n  get showUploadProgress(): boolean {\n    return this.uploadState === FileUploadState.Error || this.uploadState === FileUploadState.Uploading;\n  }\n\n  get uploadProgressState(): ValueState {\n    if (this.uploadState === FileUploadState.Uploading) {\n      return ValueState.Information;\n    }\n\n    return ValueState.Error;\n  }\n\n  get uploadStatus(): string {\n    if (this.uploadState === FileUploadState.Uploading) {\n      return `${UDExUploadItem.i18nBundle.getText(UPLOADING_FILE_STATUS_TEXT)} ${this.uploadPercentage}%`;\n    }\n\n    return `${UDExUploadItem.i18nBundle.getText(TERMINATED_FILE_STATUS_TEXT)} ${this.uploadPercentage}%`;\n  }\n\n  get fileInteractive(): boolean {\n    return this.uploadState === FileUploadState.Uploaded;\n  }\n\n  get additionalInfoClasses(): string {\n    return `udex-upload-item__info ${this.uploadState === FileUploadState.Error ? \"udex-upload-item__error\" : \"\"}`;\n  }\n\n  get uploadItemClasses(): string {\n    return this.uploadState === \"Uploaded\" ? \"udex-upload-item__info-uploaded\" : \"\";\n  }\n}\n\nUDExUploadItem.define();\n\nexport default UDExUploadItem;\n"]}