dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
395 lines (394 loc) • 16.9 kB
JavaScript
var y = (b, e, t) => new Promise((o, s) => {
var n = (p) => {
try {
f(t.next(p));
} catch (k) {
s(k);
}
}, r = (p) => {
try {
f(t.throw(p));
} catch (k) {
s(k);
}
}, f = (p) => p.done ? o(p.value) : Promise.resolve(p.value).then(n, r);
f((t = t.apply(b, e)).next());
});
import { clsx as d } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { html as h, nothing as m } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as g } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { ifDefined as w } from "../../node_modules/lit-html/directives/if-defined.js";
import { JSONAttributeParser as _ } from "../../common/utils.js";
import { DdsElement as $ } from "../../internal/dds-hu-element.js";
import { SizedMixin as S } from "../../internal/mixin/sizedMixin.js";
import "../../localization/localization.js";
import U from "../feedback/feedback.component.js";
import L from "../icon/icon.component.js";
import v from "../icon-button/icon-button.component.js";
import C from "../link/link.component.js";
import z from "../spinner/spinner.component.js";
import D from "../stack/stack.component.js";
import T from "./file-input-list-item.scss.js";
import { t as c } from "../../node_modules/i18next/dist/esm/i18next.js";
import { unsafeCSS as j, css as F } from "../../node_modules/@lit/reactive-element/css-tag.js";
var O = Object.defineProperty, l = (b, e, t, o) => {
for (var s = void 0, n = b.length - 1, r; n >= 0; n--)
(r = b[n]) && (s = r(e, t, s) || s);
return s && O(e, t, s), s;
};
const u = class u extends S($) {
constructor() {
super(...arguments), this.disabled = !1, this.loading = !1, this.showDeleteButton = "true", this.removeButtonTestId = "file-input-remove-button", this.showFileSize = "true", this.showFileLink = "true", this.emitLinkEvent = !1, this.subtle = !1, this.progress = "0", this.download = "true", this.showThumbnail = "false", this.thumbnailSize = "sm", this._fileObjectUrl = null, this._thumbnailUrl = null, this._fileType = "unknown";
}
delete(e) {
this.emit("dds-file-remove", { file: e || this.fileData });
}
detectFileType(e) {
const t = e.type.toLowerCase();
return t.startsWith("image/") ? "image" : t.startsWith("video/") ? "video" : t.startsWith("audio/") ? "audio" : t.startsWith("text/") || t.includes("document") || t.includes("word") || t.includes("excel") || t.includes("powerpoint") || t.includes("presentation") || t.includes("spreadsheet") ? "document" : t.includes("pdf") ? "pdf" : "unknown";
}
getFileTypeIcon() {
let e = "file-text-line";
switch (this._fileType) {
case "image":
e = "image-line";
break;
case "video":
e = "video-line";
break;
case "audio":
e = "music-line";
break;
case "document":
e = "file-text-line";
break;
case "pdf":
return h`<svg
class=${d(
"content__file-icon",
`content__file-icon--${this.thumbnailSize}`,
"content__file-icon--custom"
)}
viewBox="0 0 40 56"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<mask
id="mask0_705_82583"
style="mask-type:alpha"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="40"
height="56">
<path
d="M0 0L25.7574 0C26.553 0 27.3161 0.316071 27.8787 0.87868L39.1213 12.1213C39.6839 12.6839 40 13.447 40 14.2426L40 56L3 56C1.34315 56 0 54.6569 0 53L0 0Z"
fill="#9F9F9F" />
</mask>
<g mask="url(#mask0_705_82583)">
<path
d="M0 2C0 0.89543 0.895431 0 2 0H27L40 13V54C40 55.1046 39.1046 56 38 56H2C0.895431 56 0 55.1046 0 54V2Z"
fill="white" />
<path
d="M7.46234 29.3892V28.0122H10.3481C11.061 28.0122 11.6127 27.8291 12.0034 27.4629C12.3989 27.0918 12.5966 26.5791 12.5966 25.9248V25.9102C12.5966 25.2461 12.3989 24.731 12.0034 24.3647C11.6127 23.9985 11.061 23.8154 10.3481 23.8154H7.46234V22.4312H10.7582C11.4516 22.4312 12.0595 22.5776 12.582 22.8706C13.1093 23.1587 13.5219 23.564 13.8198 24.0864C14.1176 24.604 14.2665 25.207 14.2665 25.8955V25.9102C14.2665 26.5986 14.1176 27.2065 13.8198 27.7339C13.5219 28.2563 13.1093 28.6641 12.582 28.957C12.0595 29.2451 11.4516 29.3892 10.7582 29.3892H7.46234ZM6.64203 33V22.4312H8.28266V33H6.64203ZM16.3232 33V22.4312H20.1392C21.189 22.4312 22.085 22.6387 22.8271 23.0537C23.5693 23.4688 24.1357 24.0669 24.5264 24.8481C24.9219 25.6294 25.1196 26.5742 25.1196 27.6826V27.6973C25.1196 28.8154 24.9219 29.77 24.5264 30.561C24.1357 31.3521 23.5693 31.9575 22.8271 32.3774C22.0898 32.7925 21.1938 33 20.1392 33H16.3232ZM17.9639 31.5791H19.9561C20.6934 31.5791 21.3208 31.4277 21.8384 31.125C22.3608 30.8223 22.7563 30.3828 23.0249 29.8066C23.2983 29.2305 23.4351 28.5347 23.4351 27.7192V27.7046C23.4351 26.894 23.2959 26.2007 23.0176 25.6245C22.7441 25.0483 22.3486 24.6089 21.8311 24.3062C21.3135 24.0034 20.6885 23.8521 19.9561 23.8521H17.9639V31.5791ZM27.2789 33V22.4312H33.878V23.8521H28.9195V27.1919H33.4605V28.5762H28.9195V33H27.2789Z"
fill="#EE442A" />
<path
d="M42.5938 13.125H29.5C28.0503 13.125 26.875 11.9497 26.875 10.5V-2.59375L42.5938 13.125Z"
fill="white"
stroke="#E0E0E0"
stroke-width="0.75" />
</g>
<path
d="M2 0.375H25.7578C26.4537 0.37512 27.1211 0.651542 27.6133 1.14355L38.8564 12.3867C39.3485 12.8789 39.6249 13.5463 39.625 14.2422V54C39.625 54.8975 38.8975 55.625 38 55.625H2C1.10254 55.625 0.375 54.8975 0.375 54V2C0.375 1.10254 1.10254 0.375 2 0.375Z"
stroke="#E0E0E0"
stroke-width="0.75" />
</svg> `;
default:
e = "file-text-line";
break;
}
return h`<dap-ds-icon
class=${d(
"content__file-icon",
`content__file-icon--${this.thumbnailSize}`
)}
name=${e}></dap-ds-icon>`;
}
generateThumbnail(e) {
return y(this, null, function* () {
return this._fileType === "image" ? new Promise((t) => {
const o = document.createElement("canvas"), s = o.getContext("2d"), n = new Image();
n.onload = () => {
const r = this.thumbnailSize === "xxs" ? 24 : this.thumbnailSize === "xs" ? 32 : this.thumbnailSize === "sm" ? 48 : this.thumbnailSize === "md" ? 64 : 80, f = Math.min(r / n.width, r / n.height);
o.width = n.width * f, o.height = n.height * f, s == null || s.drawImage(n, 0, 0, o.width, o.height), t(o.toDataURL("image/jpeg", 0.8));
}, n.onerror = () => t(null), n.src = URL.createObjectURL(e);
}) : null;
});
}
createFileObjectUrl() {
return y(this, null, function* () {
if (this.fileData)
if (this._fileType = this.detectFileType(this.fileData), this.fileData instanceof File) {
if (this._fileObjectUrl && typeof URL.revokeObjectURL == "function" && URL.revokeObjectURL(this._fileObjectUrl), typeof URL.createObjectURL == "function" ? this._fileObjectUrl = URL.createObjectURL(this.fileData) : console.warn("URL.createObjectURL not available in this environment"), this.showThumbnail === "true" && this._fileType === "image")
try {
this._thumbnailUrl = yield this.generateThumbnail(this.fileData), this.requestUpdate();
} catch (e) {
console.warn("Failed to generate thumbnail:", e);
}
} else typeof this.fileData == "object" && "type" in this.fileData && console.warn(
"Cannot create file preview: fileData contains only metadata, not file content"
);
});
}
cleanupFileObjectUrl() {
this._fileObjectUrl && typeof URL.revokeObjectURL == "function" && (URL.revokeObjectURL(this._fileObjectUrl), this._fileObjectUrl = null), this._thumbnailUrl && (this._thumbnailUrl = null);
}
//emit a custom event with the file data}
handleFileClick(e) {
e.preventDefault(), this.emitLinkEvent ? this.emit("dds-file-click", {
data: {
file: this.fileData,
fileObjectUrl: this._fileObjectUrl,
href: this.href,
target: this.target,
rel: this.rel,
download: this.download,
showFileLink: this.showFileLink || "",
showFileSize: this.showFileSize || "",
showDeleteButton: this.showDeleteButton || "",
formattedSize: this.formattedSize,
feedback: this.feedback,
feedbackType: this.feedbackType,
loading: this.loading || !1,
showThumbnail: this.showThumbnail,
fileType: this._fileType,
fileLinkLabel: this.fileLinkLabel,
thumbnailUrl: this._thumbnailUrl,
thumbnailSize: this.thumbnailSize,
handleFileClick: this.handleFileClick,
handleDelete: this.delete,
component: this
}
}) : this._fileObjectUrl ? window.open(this._fileObjectUrl, "_blank") : this.href ? window.open(this.href, this.target || "_blank") : console.warn("No object URL or href available for file preview");
}
connectedCallback() {
super.connectedCallback(), this.createFileObjectUrl();
}
updated(e) {
super.updated(e), e.has("fileData") && (this.cleanupFileObjectUrl(), this.createFileObjectUrl());
}
disconnectedCallback() {
super.disconnectedCallback(), this.cleanupFileObjectUrl();
}
get formattedSize() {
var r;
const t = ["B", "KB", "MB", "GB"], s = ((r = this.fileData) == null ? void 0 : r.size) || 0;
if (!+s)
return `0 ${t[0]}`;
const n = Math.floor(Math.log(s) / Math.log(1024));
return `${parseFloat((s / Math.pow(1024, n)).toFixed(0))} ${t[n]}`;
}
render() {
var e, t, o, s, n, r;
return this.fileData && h`
<li
part="base"
aria-live="polite"
class=${d(
"file-list-item",
`file-list-item--${this.effectiveSize}`,
{
"file-list-item--disabled": this.disabled
}
)}
aria-label=${`${((e = this.fileData) == null ? void 0 : e.name) || ""} ${this.loading ? c("fileInput.uploading") : ""} ${this.feedback ? this.feedback : ""}`}>
${this.fileItemTemplate ? h`<div class="content" part="content">
${this.fileItemTemplate({
file: this.fileData,
fileObjectUrl: this._fileObjectUrl || "",
href: this.href,
target: this.target,
rel: this.rel,
download: this.download,
showFileLink: this.showFileLink || "",
showFileSize: this.showFileSize || "",
showDeleteButton: this.showDeleteButton || "",
formattedSize: this.formattedSize,
feedback: this.feedback,
feedbackType: this.feedbackType,
loading: this.loading || !1,
showThumbnail: this.showThumbnail,
fileType: this._fileType,
fileLinkLabel: this.fileLinkLabel,
thumbnailUrl: this._thumbnailUrl,
thumbnailSize: this.thumbnailSize,
handleFileClick: this.handleFileClick,
handleDelete: this.delete,
component: this
})}
</div>` : h`<div class="content" part="content">
${this.showThumbnail === "true" && this._thumbnailUrl ? h`<img
part="thumbnail"
class=${d(
"content__thumbnail",
`content__thumbnail--${this.thumbnailSize}`
)}
src=${this._thumbnailUrl}
alt=${`${((t = this.fileData) == null ? void 0 : t.name) || ""} thumbnail`}
loading="lazy" />` : this.showThumbnail === "true" && this._fileType !== "unknown" ? this.getFileTypeIcon() : m}
<dap-ds-stack spacing="200">
<span part="filename">${((o = this.fileData) == null ? void 0 : o.name) || ""}</span>
${this.showFileLink === "true" && (this._fileObjectUrl || this.href) ? h`<slot name="link">
<dap-ds-link
part="link"
href="${this._fileObjectUrl || this.href}"
target=${w(this.target)}
rel=${w(this.rel)}
aria-label=${`${this.fileLinkLabel ? `${this.fileLinkLabel} ${((s = this.fileData) == null ? void 0 : s.name) || ""}` : `${c("fileInput.view")} ${((n = this.fileData) == null ? void 0 : n.name) || ""}`}`}
?download=${this.download === "true" ? !0 : void 0}
=${this.handleFileClick}
>${this.fileLinkLabel ? this.fileLinkLabel : c("fileInput.view")}</dap-ds-link
></slot
>` : m}
</dap-ds-stack>
<span class="content__markers">
${this.showFileSize === "true" ? h`<span
part="filesize"
class=${d(
"content__filesize",
`content__filesize--${this.effectiveSize}`
)}
aria-label=${c("fileInput.fileSize", {
size: this.formattedSize
})}
>${this.formattedSize}</span
>` : m}
${this.loading ? h`<dap-ds-spinner
part="spinner"
size="sm"
type="neutral"
aria-label=${c(
"fileInput.uploading"
)}></dap-ds-spinner>` : m}
${this.showDeleteButton === "true" ? h` <dap-ds-icon-button
part="remove-button"
data-testid=${this.removeButtonTestId}
class="content__remove-button"
?disabled="${this.disabled}"
size=${this.effectiveSize}
aria-label=${`${c("fileInput.delete")} ${((r = this.fileData) == null ? void 0 : r.name) || ""}`}
clean
=${() => this.delete(this.fileData)}>
<slot name="delete-button">
<dap-ds-icon
class="content__remove-button-icon"
name="delete-bin-line"></dap-ds-icon>
</slot>
</dap-ds-icon-button>` : m}
</span>
</div>
${this.feedback && h`
<dap-ds-feedback
part="feedback"
class="feedback"
feedbackSize="sm"
feedbackType=${w(this.feedbackType)}
.subtle=${this.subtle}
role="alert"
aria-live="assertive">
<span class="feedback__text">${this.feedback}</span>
</dap-ds-feedback>
`}`}
</li>
`;
}
};
u.tagName = "dap-ds-file-input-list-item", u.dependencies = {
"dap-ds-icon": L,
"dap-ds-stack": D,
"dap-ds-link": C,
"dap-ds-spinner": z,
"dap-ds-icon-button": v,
"dap-ds-feedback": U
}, u.styles = F`
${j(T)}
`;
let i = u;
l([
a({ type: Boolean, reflect: !0 })
], i.prototype, "disabled");
l([
a({ type: String })
], i.prototype, "inputName");
l([
a({ type: String })
], i.prototype, "feedback");
l([
a({ type: String })
], i.prototype, "feedbackType");
l([
a({ type: Boolean, reflect: !0 })
], i.prototype, "loading");
l([
a({ type: String })
], i.prototype, "showDeleteButton");
l([
a()
], i.prototype, "removeButtonTestId");
l([
a({ type: String })
], i.prototype, "showFileSize");
l([
a({ type: String })
], i.prototype, "showFileLink");
l([
a({ type: Boolean })
], i.prototype, "emitLinkEvent");
l([
a({ attribute: !1 })
], i.prototype, "fileItemTemplate");
l([
a({ type: String })
], i.prototype, "fileLinkLabel");
l([
a({ type: Object, converter: _ })
], i.prototype, "fileData");
l([
a({ type: Boolean })
], i.prototype, "subtle");
l([
a({ type: String })
], i.prototype, "progress");
l([
a({ type: String })
], i.prototype, "href");
l([
a({ type: String })
], i.prototype, "rel");
l([
a({ type: String })
], i.prototype, "target");
l([
a({ type: String })
], i.prototype, "download");
l([
a({ type: String })
], i.prototype, "showThumbnail");
l([
a({ type: String })
], i.prototype, "thumbnailSize");
l([
g()
], i.prototype, "_fileObjectUrl");
l([
g()
], i.prototype, "_thumbnailUrl");
l([
g()
], i.prototype, "_fileType");
export {
i as default
};
//# sourceMappingURL=file-input-list-item.component.js.map