@ticatec/uniface-element 5.0.4 → 5.1.0

package/dist/form/attachment_files/AttachmentFile.d.ts

@@ -1,4 +1,3 @@
-export declare const getFileType: (filename: string) => FileType;
 export declare enum FileType {
     IMAGE = "img",
     PDF = "pdf",
@@ -9,18 +8,46 @@ export declare enum FileType {
     VIDEO = "mov",
     OTHER = "dat"
 }
-export default interface AttachmentFile {
+/**
+ * 根据文件名（扩展名）推断文件类型
+ */
+export declare const getFileType: (filename: string) => FileType;
+/**
+ * 文件类型对应的图标 class
+ */
+export declare const getFileTypeIcon: (type: FileType | string) => string;
+/**
+ * 把字节数格式化为可读文本（B / KB / MB / GB）
+ */
+export declare const formatFileSize: (bytes: number) => string;
+/**
+ * 附件的排列方式：list（每行一个文件）/ icon（图标瓦片，自动换行）
+ */
+export type AttachmentLayout = 'list' | 'icon';
+/**
+ * 已上传文件的公共字段：AttachmentEditor / ImageEditor 的列表项都以它为基础
+ */
+export interface UploadedFile {
     /**
-     * 附件名
+     * 文件名
      */
     name: string;
     /**
-     * 文件类型
+     * 存储地址（oss 路径 / URL）
      */
-    type: FileType;
+    uri: string;
     /**
-     * oss保存的文件路径
+     * 文件大小（字节），可选；上传完成后由组件写入
      */
-    uri: string;
+    size?: number;
+    /**
+     * 缩略图地址，可选；有则在瓦片 / 列表里代替类型图标显示
+     */
+    thumbnail?: string | null;
+}
+export default interface AttachmentFile extends UploadedFile {
+    /**
+     * 文件类型
+     */
+    type: FileType;
 }
-export type RemoveConfirm = (file: AttachmentFile) => Promise<boolean>;

package/dist/form/attachment_files/AttachmentFile.js

@@ -14,35 +14,6 @@ const powerPointExtensions = [
 const audioExtensions = [
     'mp3', 'wav', 'aac', 'flac', 'ogg', 'wma', 'm4a', 'aiff', 'alac'
 ];
-export const getFileType = (filename) => {
-    let pos = filename.lastIndexOf('.');
-    let ext = pos > -1 ? filename.substring(pos + 1, filename.length) : '';
-    ext = (ext ?? '').toLowerCase();
-    if (imageExtensions.indexOf(ext) > -1) {
-        return FileType.IMAGE;
-    }
-    else if (wordExtensions.indexOf(ext) > -1) {
-        return FileType.DOC;
-    }
-    else if (spreadsheetExtensions.indexOf(ext) > -1) {
-        return FileType.XLS;
-    }
-    else if (powerPointExtensions.indexOf(ext) > -1) {
-        return FileType.PPT;
-    }
-    else if (audioExtensions.indexOf(ext) > -1) {
-        return FileType.AUDIO;
-    }
-    else if (videoExtensions.indexOf(ext) > -1) {
-        return FileType.VIDEO;
-    }
-    else if (ext == 'pdf') {
-        return FileType.PDF;
-    }
-    else {
-        return FileType.OTHER;
-    }
-};
 const videoExtensions = [
     'mp4', 'avi', 'mkv', 'mov', 'wmv', 'flv', 'webm', 'mpeg', 'mpg', '3gp', 'm4v', 'vob'
 ];
@@ -57,3 +28,57 @@ export var FileType;
     FileType["VIDEO"] = "mov";
     FileType["OTHER"] = "dat";
 })(FileType || (FileType = {}));
+/**
+ * 根据文件名（扩展名）推断文件类型
+ */
+export const getFileType = (filename) => {
+    const pos = filename.lastIndexOf('.');
+    const ext = (pos > -1 ? filename.substring(pos + 1) : '').toLowerCase();
+    if (imageExtensions.includes(ext))
+        return FileType.IMAGE;
+    if (wordExtensions.includes(ext))
+        return FileType.DOC;
+    if (spreadsheetExtensions.includes(ext))
+        return FileType.XLS;
+    if (powerPointExtensions.includes(ext))
+        return FileType.PPT;
+    if (audioExtensions.includes(ext))
+        return FileType.AUDIO;
+    if (videoExtensions.includes(ext))
+        return FileType.VIDEO;
+    if (ext === 'pdf')
+        return FileType.PDF;
+    return FileType.OTHER;
+};
+/**
+ * 文件类型对应的图标 class
+ */
+export const getFileTypeIcon = (type) => {
+    switch (type) {
+        case FileType.IMAGE: return 'icon_google_insert_photo';
+        case FileType.PDF: return 'icon_google_picture_as_pdf';
+        case FileType.DOC: return 'icon_google_description';
+        case FileType.XLS: return 'icon_google_table_chart';
+        case FileType.PPT: return 'icon_google_slideshow';
+        case FileType.AUDIO: return 'icon_google_audiotrack';
+        case FileType.VIDEO: return 'icon_google_movie';
+        default: return 'icon_google_insert_drive_file';
+    }
+};
+/**
+ * 把字节数格式化为可读文本（B / KB / MB / GB）
+ */
+export const formatFileSize = (bytes) => {
+    if (!Number.isFinite(bytes) || bytes < 0)
+        return '';
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const units = ['KB', 'MB', 'GB', 'TB'];
+    let value = bytes / 1024;
+    let i = 0;
+    while (value >= 1024 && i < units.length - 1) {
+        value /= 1024;
+        i++;
+    }
+    return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[i]}`;
+};

package/dist/form/attachment_files/AttachmentListItem.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+    import ProgressBar from "../../feedback/progress-bar";
+    import i18nRes from "../../i18nRes";
+    import type {UploadedFile, FileType} from "./AttachmentFile";
+    import {formatFileSize, getFileType, getFileTypeIcon} from "./AttachmentFile";
+    import type {UploadTask} from "./UploadTask";
+
+    /** 列表项：已上传文件；没有 type 时按文件名推断 */
+    type Item = UploadedFile & {type?: FileType};
+
+    interface Props {
+        /** 已上传的附件（与 task 二选一） */
+        file?: Item;
+        /** 上传中的任务（与 file 二选一） */
+        task?: UploadTask;
+        readonly?: boolean;
+        /** 缩略图地址；有则代替类型图标显示 */
+        thumbnail?: string | null;
+        /** 预览：有则显示预览按钮 */
+        onPreview?: (file: Item) => void;
+        ondownload?: (file: Item) => void;
+        onremove?: (file: Item) => void;
+        /** 取消上传中的任务，或移除失败的任务 */
+        oncancel?: (task: UploadTask) => void;
+        onretry?: (task: UploadTask) => void;
+    }
+
+    let {
+        file,
+        task,
+        readonly = false,
+        thumbnail,
+        onPreview,
+        ondownload,
+        onremove,
+        oncancel,
+        onretry
+    }: Props = $props();
+
+    const name = $derived(task?.name ?? file?.name ?? '');
+    const icon = $derived(getFileTypeIcon(task?.type ?? file?.type ?? getFileType(file?.name ?? '')));
+    const status = $derived(task == null ? 'done' : task.status);
+    let thumbnailFailed = $state(false);
+    const showThumbnail = $derived(!!thumbnail && !thumbnailFailed);
+
+    const previewText = i18nRes.upload.btnPreview();
+    const downloadText = i18nRes.upload.btnDownload();
+    const removeText = i18nRes.upload.btnRemove();
+    const cancelText = i18nRes.common.btnCancel();
+    const retryText = i18nRes.upload.btnRetry();
+    const failedText = i18nRes.upload.failedText();
+</script>
+
+<div class="uniface-attachment-item {status}" class:readonly role="listitem">
+    {#if showThumbnail}
+        {#if file && onPreview}
+            <button type="button" class="thumbnail-button" aria-label={previewText} title={previewText} onclick={() => onPreview?.(file)}>
+                <img class="thumbnail" src={thumbnail} alt="" onerror={() => thumbnailFailed = true}/>
+            </button>
+        {:else}
+            <img class="thumbnail" src={thumbnail} alt="" onerror={() => thumbnailFailed = true}/>
+        {/if}
+    {:else}
+        <i class="type-icon {icon}" aria-hidden="true"></i>
+    {/if}
+    <div class="item-name" title={name}>{name}</div>
+    {#if task}
+        {#if task.status === 'uploading'}
+            <div class="item-progress">
+                <ProgressBar variant="linear" progress={task.progress} thickness={4} showText={false}/>
+            </div>
+            <span class="item-meta">{task.progress}%</span>
+            <button type="button" class="item-action" aria-label={cancelText} title={cancelText} onclick={() => oncancel?.(task)}>
+                <i class="icon_google_clear" aria-hidden="true"></i>
+            </button>
+        {:else}
+            <span class="item-error" title={task.error ?? failedText}>{task.error ?? failedText}</span>
+            <button type="button" class="item-action" aria-label={retryText} title={retryText} onclick={() => onretry?.(task)}>
+                <i class="icon_google_replay" aria-hidden="true"></i>
+            </button>
+            <button type="button" class="item-action danger" aria-label={removeText} title={removeText} onclick={() => oncancel?.(task)}>
+                <i class="icon_google_delete" aria-hidden="true"></i>
+            </button>
+        {/if}
+    {:else if file}
+        {#if file.size != null}
+            <span class="item-meta">{formatFileSize(file.size)}</span>
+        {/if}
+        {#if onPreview}
+            <button type="button" class="item-action" aria-label={previewText} title={previewText} onclick={() => onPreview?.(file)}>
+                <i class="icon_google_remove_red_eye" aria-hidden="true"></i>
+            </button>
+        {/if}
+        {#if ondownload}
+            <button type="button" class="item-action" aria-label={downloadText} title={downloadText} onclick={() => ondownload?.(file)}>
+                <i class="icon_google_file_download" aria-hidden="true"></i>
+            </button>
+        {:else if file.uri}
+            <a class="item-action" href={file.uri} download={file.name} target="_blank" rel="noopener noreferrer"
+               aria-label={downloadText} title={downloadText}>
+                <i class="icon_google_file_download" aria-hidden="true"></i>
+            </a>
+        {/if}
+        {#if !readonly}
+            <button type="button" class="item-action danger" aria-label={removeText} title={removeText} onclick={() => onremove?.(file)}>
+                <i class="icon_google_delete" aria-hidden="true"></i>
+            </button>
+        {/if}
+    {/if}
+</div>
+
+<style>
+    .uniface-attachment-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        height: var(--uniface-attachment-item-height, 32px);
+        padding: 0 8px;
+        border-radius: var(--uniface-radius, 4px);
+        box-sizing: border-box;
+        transition: background-color 0.15s;
+    }
+
+    .uniface-attachment-item:hover {
+        background-color: var(--uniface-attachment-item-hover-bg, rgba(128, 128, 128, 0.12));
+    }
+
+    .type-icon {
+        flex: 0 0 auto;
+        font-size: 20px;
+        color: var(--uniface-attachment-icon-color, #6b7280);
+    }
+
+    .thumbnail-button {
+        flex: 0 0 auto;
+        padding: 0;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        display: flex;
+    }
+
+    .thumbnail {
+        flex: 0 0 auto;
+        width: var(--uniface-attachment-thumbnail-size, 24px);
+        height: var(--uniface-attachment-thumbnail-size, 24px);
+        border-radius: var(--uniface-radius-sm, 2px);
+        object-fit: cover;
+        display: block;
+    }
+
+    .item-name {
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .item-meta {
+        flex: 0 0 auto;
+        font-size: 12px;
+        color: var(--uniface-attachment-meta-color, #9ca3af);
+        font-variant-numeric: tabular-nums;
+    }
+
+    .item-progress {
+        flex: 0 0 var(--uniface-attachment-progress-width, 120px);
+    }
+
+    .item-error {
+        flex: 0 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 12px;
+        color: var(--uniface-attachment-error-color, #ef4444);
+    }
+
+    .item-action {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border: none;
+        background: transparent;
+        color: var(--uniface-attachment-action-color, #9ca3af);
+        border-radius: var(--uniface-radius, 4px);
+        cursor: pointer;
+        padding: 0;
+        text-decoration: none;
+        font-size: 18px;
+        transition: background-color 0.15s, color 0.15s;
+    }
+
+    .item-action:hover {
+        background-color: var(--uniface-attachment-action-hover-bg, rgba(128, 128, 128, 0.18));
+        color: var(--uniface-attachment-action-hover-color, #374151);
+    }
+
+    .item-action.danger:hover {
+        background-color: var(--uniface-attachment-danger-hover-bg, rgba(239, 68, 68, 0.1));
+        color: var(--uniface-attachment-error-color, #ef4444);
+    }
+</style>

package/dist/form/attachment_files/AttachmentListItem.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { UploadedFile, FileType } from "./AttachmentFile";
+import type { UploadTask } from "./UploadTask";
+/** 列表项：已上传文件；没有 type 时按文件名推断 */
+type Item = UploadedFile & {
+    type?: FileType;
+};
+interface Props {
+    /** 已上传的附件（与 task 二选一） */
+    file?: Item;
+    /** 上传中的任务（与 file 二选一） */
+    task?: UploadTask;
+    readonly?: boolean;
+    /** 缩略图地址；有则代替类型图标显示 */
+    thumbnail?: string | null;
+    /** 预览：有则显示预览按钮 */
+    onPreview?: (file: Item) => void;
+    ondownload?: (file: Item) => void;
+    onremove?: (file: Item) => void;
+    /** 取消上传中的任务，或移除失败的任务 */
+    oncancel?: (task: UploadTask) => void;
+    onretry?: (task: UploadTask) => void;
+}
+declare const AttachmentListItem: import("svelte").Component<Props, {}, "">;
+type AttachmentListItem = ReturnType<typeof AttachmentListItem>;
+export default AttachmentListItem;

package/dist/form/attachment_files/AttachmentTile.svelte

@@ -0,0 +1,296 @@
+<script lang="ts">
+    import ProgressBar from "../../feedback/progress-bar";
+    import i18nRes from "../../i18nRes";
+    import type {UploadedFile, FileType} from "./AttachmentFile";
+    import {getFileType, getFileTypeIcon} from "./AttachmentFile";
+    import type {UploadTask} from "./UploadTask";
+
+    /** 列表项：已上传文件；没有 type 时按文件名推断 */
+    type Item = UploadedFile & {type?: FileType};
+
+    interface Props {
+        /** 已上传的附件（与 task 二选一） */
+        file?: Item;
+        /** 上传中的任务（与 file 二选一） */
+        task?: UploadTask;
+        readonly?: boolean;
+        /** 缩略图地址；有则代替类型图标显示 */
+        thumbnail?: string | null;
+        /** 预览：有则显示预览按钮 */
+        onPreview?: (file: Item) => void;
+        ondownload?: (file: Item) => void;
+        onremove?: (file: Item) => void;
+        /** 取消上传中的任务，或移除失败的任务 */
+        oncancel?: (task: UploadTask) => void;
+        onretry?: (task: UploadTask) => void;
+    }
+
+    let {
+        file,
+        task,
+        readonly = false,
+        thumbnail,
+        onPreview,
+        ondownload,
+        onremove,
+        oncancel,
+        onretry
+    }: Props = $props();
+
+    const name = $derived(task?.name ?? file?.name ?? '');
+    const icon = $derived(getFileTypeIcon(task?.type ?? file?.type ?? getFileType(file?.name ?? '')));
+    const status = $derived(task == null ? 'done' : task.status);
+    const hasDownload = $derived(file != null && (ondownload != null || !!file.uri));
+    const hasPreview = $derived(file != null && onPreview != null);
+    const hasActions = $derived(file != null && (hasPreview || hasDownload || !readonly));
+    let thumbnailFailed = $state(false);
+    const showThumbnail = $derived(!!thumbnail && !thumbnailFailed);
+
+    const previewText = i18nRes.upload.btnPreview();
+    const downloadText = i18nRes.upload.btnDownload();
+    const removeText = i18nRes.upload.btnRemove();
+    const cancelText = i18nRes.common.btnCancel();
+    const retryText = i18nRes.upload.btnRetry();
+    const failedText = i18nRes.upload.failedText();
+</script>
+
+<div class="uniface-attachment-tile {status}" class:readonly role="listitem" title={task?.status === 'error' ? (task.error ?? failedText) : name}>
+    <div class="tile-body" class:has-thumbnail={showThumbnail}>
+        {#if showThumbnail}
+            <img class="thumbnail" src={thumbnail} alt="" onerror={() => thumbnailFailed = true}/>
+        {:else}
+            <i class="type-icon {icon}" aria-hidden="true"></i>
+        {/if}
+        {#if task}
+            {#if task.status === 'uploading'}
+                <!-- 两层重叠：底层进度环，上层居中的取消按钮（默认显示百分比，悬停/聚焦时变成 ✕） -->
+                <div class="tile-overlay progress">
+                    <ProgressBar diameter={44} thickness={4} progress={task.progress} showText={false}/>
+                    <button type="button" class="ring-button" aria-label={cancelText} title={cancelText} onclick={() => oncancel?.(task)}>
+                        <span class="pct">{task.progress}%</span>
+                        <i class="icon_google_clear" aria-hidden="true"></i>
+                    </button>
+                </div>
+            {:else}
+                <div class="tile-overlay error">
+                    <i class="error-icon icon_google_error_outline" aria-hidden="true"></i>
+                    <div class="overlay-actions">
+                        <button type="button" class="tile-action" aria-label={retryText} title={retryText} onclick={() => onretry?.(task)}>
+                            <i class="icon_google_replay" aria-hidden="true"></i>
+                        </button>
+                        <button type="button" class="tile-action" aria-label={removeText} title={removeText} onclick={() => oncancel?.(task)}>
+                            <i class="icon_google_delete" aria-hidden="true"></i>
+                        </button>
+                    </div>
+                </div>
+            {/if}
+        {:else if file && hasActions}
+            <div class="tile-overlay actions">
+                {#if onPreview}
+                    <button type="button" class="tile-action" aria-label={previewText} title={previewText} onclick={() => onPreview?.(file)}>
+                        <i class="icon_google_remove_red_eye" aria-hidden="true"></i>
+                    </button>
+                {/if}
+                {#if ondownload}
+                    <button type="button" class="tile-action" aria-label={downloadText} title={downloadText} onclick={() => ondownload?.(file)}>
+                        <i class="icon_google_file_download" aria-hidden="true"></i>
+                    </button>
+                {:else if file.uri}
+                    <a class="tile-action" href={file.uri} download={file.name} target="_blank" rel="noopener noreferrer"
+                       aria-label={downloadText} title={downloadText}>
+                        <i class="icon_google_file_download" aria-hidden="true"></i>
+                    </a>
+                {/if}
+                {#if !readonly}
+                    <button type="button" class="tile-action" aria-label={removeText} title={removeText} onclick={() => onremove?.(file)}>
+                        <i class="icon_google_delete" aria-hidden="true"></i>
+                    </button>
+                {/if}
+            </div>
+        {/if}
+    </div>
+    <div class="tile-name" class:error={status === 'error'}>
+        {status === 'error' ? (task?.error ?? failedText) : name}
+    </div>
+</div>
+
+<style>
+    .uniface-attachment-tile {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        width: var(--uniface-attachment-tile-size, 88px);
+        flex: 0 0 auto;
+    }
+
+    .tile-body {
+        position: relative;
+        width: var(--uniface-attachment-tile-size, 88px);
+        height: var(--uniface-attachment-tile-size, 88px);
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid var(--uniface-attachment-tile-border-color, var(--uniface-editor-color-border, #e5e7eb));
+        border-radius: var(--uniface-radius-md, 6px);
+        background-color: var(--uniface-attachment-tile-bg, rgba(128, 128, 128, 0.06));
+        overflow: hidden;
+        transition: border-color 0.15s;
+    }
+
+    .uniface-attachment-tile:hover .tile-body,
+    .uniface-attachment-tile:focus-within .tile-body {
+        border-color: var(--uniface-attachment-tile-hover-border-color, #d1d5db);
+    }
+
+    .type-icon {
+        font-size: calc(var(--uniface-attachment-tile-size, 88px) * 0.42);
+        color: var(--uniface-attachment-icon-color, #6b7280);
+    }
+
+    .thumbnail {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .uploading .type-icon,
+    .error .type-icon,
+    .done:hover .type-icon,
+    .done:focus-within .type-icon {
+        opacity: 0.25;
+    }
+
+    .uploading .thumbnail,
+    .error .thumbnail {
+        opacity: 0.5;
+    }
+
+    .tile-overlay {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* 已上传：悬停 / 聚焦时显示操作层 */
+    .tile-overlay.actions {
+        gap: 4px;
+        background-color: var(--uniface-attachment-overlay-bg, rgba(17, 24, 39, 0.6));
+        opacity: 0;
+        transition: opacity 0.15s;
+    }
+
+    .uniface-attachment-tile:hover .tile-overlay.actions,
+    .uniface-attachment-tile:focus-within .tile-overlay.actions {
+        opacity: 1;
+    }
+
+    .tile-action {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        padding: 0;
+        border: none;
+        border-radius: var(--uniface-radius, 4px);
+        background: transparent;
+        color: #ffffff;
+        font-size: 18px;
+        cursor: pointer;
+        text-decoration: none;
+    }
+
+    .tile-action:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+    }
+
+    /* 上传中：进度环 + 居中的取消按钮 */
+    .tile-overlay.progress {
+        background-color: var(--uniface-attachment-progress-overlay-bg, rgba(255, 255, 255, 0.6));
+    }
+
+    .ring-button {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 36px;
+        height: 36px;
+        margin: -18px 0 0 -18px;
+        padding: 0;
+        border: none;
+        border-radius: 50%;
+        background: transparent;
+        color: var(--uniface-attachment-progress-text-color, #374151);
+        font-size: 11px;
+        font-variant-numeric: tabular-nums;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .ring-button i {
+        display: none;
+        font-size: 18px;
+    }
+
+    .tile-overlay.progress:hover .ring-button .pct,
+    .ring-button:focus-visible .pct {
+        display: none;
+    }
+
+    .tile-overlay.progress:hover .ring-button i,
+    .ring-button:focus-visible i {
+        display: inline;
+        color: var(--uniface-attachment-error-color, #ef4444);
+    }
+
+    /* 失败：错误图标，悬停时显示重试 / 移除 */
+    .tile-overlay.error {
+        flex-direction: column;
+        gap: 2px;
+        background-color: var(--uniface-attachment-error-overlay-bg, rgba(239, 68, 68, 0.08));
+    }
+
+    .error-icon {
+        font-size: 24px;
+        color: var(--uniface-attachment-error-color, #ef4444);
+    }
+
+    .tile-overlay.error .overlay-actions {
+        display: flex;
+        gap: 2px;
+    }
+
+    .tile-overlay.error .tile-action {
+        width: 24px;
+        height: 24px;
+        color: var(--uniface-attachment-error-color, #ef4444);
+    }
+
+    .tile-overlay.error .tile-action:hover {
+        background-color: rgba(239, 68, 68, 0.15);
+    }
+
+    .tile-name {
+        width: 100%;
+        font-size: 12px;
+        line-height: 1.3;
+        text-align: center;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
+    }
+
+    .tile-name.error {
+        color: var(--uniface-attachment-error-color, #ef4444);
+    }
+</style>