@limetech/lime-crm-building-blocks 1.113.4 → 1.114.0

package/dist/components/limebb-document-chips.js

@@ -0,0 +1,437 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getPreviewType } from './extension-mapping.js';
+import { g as getFileExtension, d as defineCustomElement$2 } from './summary-popover.js';
+import { d as defineCustomElement$3 } from './navigation-button.js';
+
+// Copy of file icon names from lime-elements.
+// Source: lime-elements/src/components/file/icons.ts
+//
+// Stencil doesn't support exporting utility functions from a component
+// library, so we duplicate them here until a proper shared solution exists.
+const DEFAULT_ICON = 'file';
+const CALENDAR_ICON = 'tear_off_calendar';
+const EMAIL_ICON = 'email';
+const HTML_ICON = 'internet';
+const TEXT_ICON = 'text_box';
+const EXCEL_ICON = 'ms_excel_copyrighted';
+const WORD_ICON = 'ms_word_copyrighted';
+const POWERPOINT_ICON = 'ms_powerpoint_copyrighted';
+const IMAGE_ICON = 'picture';
+const PHOTO_ICON = 'camera';
+const VECTOR_GRAPHIC_ICON = 'vector';
+const PRESENTATION_ICON = 'presentation_filled';
+const DOCUMENT_ICON = 'overview_pages_2';
+const SPREADSHEET_ICON = 'data_sheet';
+const AUDIO_ICON = 'audio_wave';
+const VIDEO_ICON = 'video_file';
+const COMPRESSED_ICON = 'condom_package';
+const MESSAGE_ICON = 'ms_outlook_copyrighted';
+const DATA_ICON = 'database';
+const DEFAULT_FILE_ICON = DEFAULT_ICON;
+const filetypeIconTable = {
+    msg: MESSAGE_ICON,
+    ics: CALENDAR_ICON,
+    ical: CALENDAR_ICON,
+    icalendar: CALENDAR_ICON,
+    ifb: CALENDAR_ICON,
+    email: EMAIL_ICON,
+    eml: EMAIL_ICON,
+    oft: EMAIL_ICON,
+    ost: EMAIL_ICON,
+    emlx: EMAIL_ICON,
+    html: HTML_ICON,
+    xml: HTML_ICON,
+    txt: TEXT_ICON,
+    rtf: TEXT_ICON,
+    dot: WORD_ICON,
+    doc: WORD_ICON,
+    docx: WORD_ICON,
+    dotx: WORD_ICON,
+    docm: WORD_ICON,
+    dotm: WORD_ICON,
+    odt: DOCUMENT_ICON,
+    pages: DOCUMENT_ICON,
+    pdf: 'PDF_2',
+    ppt: POWERPOINT_ICON,
+    pot: POWERPOINT_ICON,
+    pps: POWERPOINT_ICON,
+    pptx: POWERPOINT_ICON,
+    pptm: POWERPOINT_ICON,
+    potx: POWERPOINT_ICON,
+    potm: POWERPOINT_ICON,
+    ppam: POWERPOINT_ICON,
+    ppsx: POWERPOINT_ICON,
+    ppsm: POWERPOINT_ICON,
+    sldx: POWERPOINT_ICON,
+    sldm: POWERPOINT_ICON,
+    odp: PRESENTATION_ICON,
+    key: PRESENTATION_ICON,
+    xls: EXCEL_ICON,
+    xlsx: EXCEL_ICON,
+    csv: SPREADSHEET_ICON,
+    numbers: SPREADSHEET_ICON,
+    jpg: PHOTO_ICON,
+    jpeg: PHOTO_ICON,
+    heic: PHOTO_ICON,
+    bmp: IMAGE_ICON,
+    png: IMAGE_ICON,
+    gif: IMAGE_ICON,
+    psd: 'adobe_photoshop_copyrighted',
+    ai: 'adobe_illustrator_copyrighted',
+    svg: VECTOR_GRAPHIC_ICON,
+    svgz: VECTOR_GRAPHIC_ICON,
+    ep: VECTOR_GRAPHIC_ICON,
+    eps: VECTOR_GRAPHIC_ICON,
+    sketch: VECTOR_GRAPHIC_ICON,
+    mp3: AUDIO_ICON,
+    wav: AUDIO_ICON,
+    wma: AUDIO_ICON,
+    ogg: AUDIO_ICON,
+    avi: VIDEO_ICON,
+    flv: VIDEO_ICON,
+    h264: VIDEO_ICON,
+    mov: VIDEO_ICON,
+    mp4: VIDEO_ICON,
+    mwv: VIDEO_ICON,
+    zip: COMPRESSED_ICON,
+    '7z': COMPRESSED_ICON,
+    rar: COMPRESSED_ICON,
+    json: 'json',
+    yaml: DATA_ICON,
+    sql: DATA_ICON,
+    db: DATA_ICON,
+    dbf: DATA_ICON,
+};
+
+// Copy of file icon fill colors from lime-elements.
+// Source: lime-elements/src/components/file/icon-fill-colors.ts
+//
+// Stencil doesn't support exporting utility functions from a component
+// library, so we duplicate them here until a proper shared solution exists.
+const DEFAULT_ICON_FILL_COLOR = 'rgb(var(--color-gray-dark))';
+const CALENDAR_ICON_FILL_COLOR = 'rgb(var(--color-cyan-dark))';
+const EMAIL_ICON_FILL_COLOR = 'rgb(var(--color-gray-dark))';
+const HTML_ICON_FILL_COLOR = 'rgb(var(--color-blue-dark))';
+const TEXT_ICON_FILL_COLOR = 'rgb(var(--color-yellow-darker))';
+const EXCEL_ICON_FILL_COLOR = 'rgb(var(--color-green-dark))';
+const POWERPOINT_ICON_FILL_COLOR = 'rgb(var(--color-coral-dark))';
+const WORD_ICON_FILL_COLOR = 'rgb(var(--color-sky-dark))';
+const IMAGE_ICON_FILL_COLOR = 'rgb(var(--color-lime-dark))';
+const VECTOR_GRAPHIC_FILL_COLOR = 'rgb(var(--color-magenta-dark))';
+const PRESENTATION_ICON_FILL_COLOR = 'rgb(var(--color-blue-dark))';
+const DOCUMENT_ICON_FILL_COLOR = 'rgb(var(--color-orange-dark))';
+const SPREADSHEET_ICON_FILL_COLOR = 'rgb(var(--color-green-dark))';
+const AUDIO_ICON_FILL_COLOR = 'rgb(var(--color-indigo-dark))';
+const VIDEO_ICON_FILL_COLOR = 'rgb(var(--color-red-dark))';
+const COMPRESSED_ICON_FILL_COLOR = 'rgb(var(--color-brown-default))';
+const MESSAGE_ICON_FILL_COLOR = 'rgb(var(--color-yellow-dark))';
+const PDF_ICON_FILL_COLOR = 'rgb(var(--color-red-dark))';
+const DATA_ICON_FILL_COLOR = 'rgb(var(--color-glaucous-dark))';
+const DEFAULT_ICON_FILL = DEFAULT_ICON_FILL_COLOR;
+const filetypeFillColorTable = {
+    msg: MESSAGE_ICON_FILL_COLOR,
+    ics: CALENDAR_ICON_FILL_COLOR,
+    ical: CALENDAR_ICON_FILL_COLOR,
+    icalendar: CALENDAR_ICON_FILL_COLOR,
+    ifb: CALENDAR_ICON_FILL_COLOR,
+    email: EMAIL_ICON_FILL_COLOR,
+    eml: EMAIL_ICON_FILL_COLOR,
+    oft: EMAIL_ICON_FILL_COLOR,
+    ost: EMAIL_ICON_FILL_COLOR,
+    emlx: EMAIL_ICON_FILL_COLOR,
+    html: HTML_ICON_FILL_COLOR,
+    xml: HTML_ICON_FILL_COLOR,
+    txt: TEXT_ICON_FILL_COLOR,
+    rtf: TEXT_ICON_FILL_COLOR,
+    dot: WORD_ICON_FILL_COLOR,
+    doc: WORD_ICON_FILL_COLOR,
+    docx: WORD_ICON_FILL_COLOR,
+    dotx: WORD_ICON_FILL_COLOR,
+    docm: WORD_ICON_FILL_COLOR,
+    dotm: WORD_ICON_FILL_COLOR,
+    odt: DOCUMENT_ICON_FILL_COLOR,
+    pages: DOCUMENT_ICON_FILL_COLOR,
+    pdf: PDF_ICON_FILL_COLOR,
+    ppt: POWERPOINT_ICON_FILL_COLOR,
+    pot: POWERPOINT_ICON_FILL_COLOR,
+    pps: POWERPOINT_ICON_FILL_COLOR,
+    pptx: POWERPOINT_ICON_FILL_COLOR,
+    pptm: POWERPOINT_ICON_FILL_COLOR,
+    potx: POWERPOINT_ICON_FILL_COLOR,
+    potm: POWERPOINT_ICON_FILL_COLOR,
+    ppam: POWERPOINT_ICON_FILL_COLOR,
+    ppsx: POWERPOINT_ICON_FILL_COLOR,
+    ppsm: POWERPOINT_ICON_FILL_COLOR,
+    sldx: POWERPOINT_ICON_FILL_COLOR,
+    sldm: POWERPOINT_ICON_FILL_COLOR,
+    odp: PRESENTATION_ICON_FILL_COLOR,
+    key: PRESENTATION_ICON_FILL_COLOR,
+    xls: EXCEL_ICON_FILL_COLOR,
+    xlsx: EXCEL_ICON_FILL_COLOR,
+    csv: DEFAULT_ICON_FILL_COLOR,
+    numbers: SPREADSHEET_ICON_FILL_COLOR,
+    bmp: IMAGE_ICON_FILL_COLOR,
+    jpg: IMAGE_ICON_FILL_COLOR,
+    jpeg: IMAGE_ICON_FILL_COLOR,
+    heic: IMAGE_ICON_FILL_COLOR,
+    png: IMAGE_ICON_FILL_COLOR,
+    gif: IMAGE_ICON_FILL_COLOR,
+    psd: PRESENTATION_ICON_FILL_COLOR,
+    ai: DOCUMENT_ICON_FILL_COLOR,
+    svg: VECTOR_GRAPHIC_FILL_COLOR,
+    svgz: VECTOR_GRAPHIC_FILL_COLOR,
+    ep: VECTOR_GRAPHIC_FILL_COLOR,
+    eps: VECTOR_GRAPHIC_FILL_COLOR,
+    sketch: VECTOR_GRAPHIC_FILL_COLOR,
+    mp3: AUDIO_ICON_FILL_COLOR,
+    wav: AUDIO_ICON_FILL_COLOR,
+    wma: AUDIO_ICON_FILL_COLOR,
+    ogg: AUDIO_ICON_FILL_COLOR,
+    flv: VIDEO_ICON_FILL_COLOR,
+    h264: VIDEO_ICON_FILL_COLOR,
+    mov: VIDEO_ICON_FILL_COLOR,
+    mp4: VIDEO_ICON_FILL_COLOR,
+    mwv: VIDEO_ICON_FILL_COLOR,
+    zip: COMPRESSED_ICON_FILL_COLOR,
+    '7z': COMPRESSED_ICON_FILL_COLOR,
+    rar: COMPRESSED_ICON_FILL_COLOR,
+    json: DATA_ICON_FILL_COLOR,
+    yaml: DATA_ICON_FILL_COLOR,
+    sql: DATA_ICON_FILL_COLOR,
+    db: DATA_ICON_FILL_COLOR,
+    dbf: DATA_ICON_FILL_COLOR,
+};
+
+// Copy of file icon background colors from lime-elements.
+// Source: lime-elements/src/components/file/icon-background-colors.ts
+//
+// Stencil doesn't support exporting utility functions from a component
+// library, so we duplicate them here until a proper shared solution exists.
+const DEFAULT_ICON_BACKGROUND_COLOR = 'rgba(var(--color-gray-lighter), 0.4)';
+const CALENDAR_ICON_BACKGROUND_COLOR = 'rgba(var(--color-cyan-lighter), 0.4)';
+const EMAIL_ICON_BACKGROUND_COLOR = 'rgba(var(--color-gray-lighter), 0.4)';
+const HTML_ICON_BACKGROUND_COLOR = 'rgba(var(--color-blue-lighter), 0.4)';
+const TEXT_ICON_BACKGROUND_COLOR = 'rgba(var(--color-yellow-lighter), 0.4)';
+const EXCEL_ICON_BACKGROUND_COLOR = 'rgba(var(--color-green-lighter), 0.4)';
+const POWERPOINT_ICON_BACKGROUND_COLOR = 'rgba(var(--color-coral-lighter), 0.4)';
+const WORD_ICON_BACKGROUND_COLOR = 'rgba(var(--color-sky-lighter), 0.4)';
+const IMAGE_ICON_BACKGROUND_COLOR = 'rgba(var(--color-lime-lighter), 0.4)';
+const VECTOR_GRAPHIC_ICON_BACKGROUND_COLOR = 'rgba(var(--color-magenta-lighter), 0.4)';
+const PRESENTATION_BACKGROUND_COLOR = 'rgba(var(--color-blue-lighter), 0.4)';
+const DOCUMENT_ICON_BACKGROUND_COLOR = 'rgba(var(--color-orange-lighter), 0.4)';
+const SPREADSHEET_ICON_BACKGROUND_COLOR = 'rgba(var(--color-green-lighter), 0.4)';
+const AUDIO_ICON_BACKGROUND_COLOR = 'rgba(var(--color-indigo-lighter), 0.4)';
+const VIDEO_ICON_BACKGROUND_COLOR = 'rgba(var(--color-red-lighter), 0.4)';
+const COMPRESSED_ICON_BACKGROUND_COLOR = 'rgba(var(--color-orange-lighter), 0.4)';
+const MESSAGE_ICON_BACKGROUND_COLOR = 'rgba(var(--color-yellow-lighter), 0.4)';
+const PDF_ICON_BACKGROUND_COLOR = 'rgba(var(--color-red-lighter), 0.4)';
+const DATA_ICON_BACKGROUND_COLOR = 'rgba(var(--color-glaucous-lighter), 0.4)';
+const DEFAULT_ICON_BACKGROUND = DEFAULT_ICON_BACKGROUND_COLOR;
+const filetypeBackgroundColorTable = {
+    msg: MESSAGE_ICON_BACKGROUND_COLOR,
+    ics: CALENDAR_ICON_BACKGROUND_COLOR,
+    ical: CALENDAR_ICON_BACKGROUND_COLOR,
+    icalendar: CALENDAR_ICON_BACKGROUND_COLOR,
+    ifb: CALENDAR_ICON_BACKGROUND_COLOR,
+    email: EMAIL_ICON_BACKGROUND_COLOR,
+    eml: EMAIL_ICON_BACKGROUND_COLOR,
+    oft: EMAIL_ICON_BACKGROUND_COLOR,
+    ost: EMAIL_ICON_BACKGROUND_COLOR,
+    emlx: EMAIL_ICON_BACKGROUND_COLOR,
+    html: HTML_ICON_BACKGROUND_COLOR,
+    xml: HTML_ICON_BACKGROUND_COLOR,
+    txt: TEXT_ICON_BACKGROUND_COLOR,
+    rtf: TEXT_ICON_BACKGROUND_COLOR,
+    dot: WORD_ICON_BACKGROUND_COLOR,
+    doc: WORD_ICON_BACKGROUND_COLOR,
+    docx: WORD_ICON_BACKGROUND_COLOR,
+    dotx: WORD_ICON_BACKGROUND_COLOR,
+    docm: WORD_ICON_BACKGROUND_COLOR,
+    dotm: WORD_ICON_BACKGROUND_COLOR,
+    odt: DOCUMENT_ICON_BACKGROUND_COLOR,
+    pages: DOCUMENT_ICON_BACKGROUND_COLOR,
+    pdf: PDF_ICON_BACKGROUND_COLOR,
+    ppt: POWERPOINT_ICON_BACKGROUND_COLOR,
+    pot: POWERPOINT_ICON_BACKGROUND_COLOR,
+    pps: POWERPOINT_ICON_BACKGROUND_COLOR,
+    pptx: POWERPOINT_ICON_BACKGROUND_COLOR,
+    pptm: POWERPOINT_ICON_BACKGROUND_COLOR,
+    potx: POWERPOINT_ICON_BACKGROUND_COLOR,
+    potm: POWERPOINT_ICON_BACKGROUND_COLOR,
+    ppam: POWERPOINT_ICON_BACKGROUND_COLOR,
+    ppsx: POWERPOINT_ICON_BACKGROUND_COLOR,
+    ppsm: POWERPOINT_ICON_BACKGROUND_COLOR,
+    sldx: POWERPOINT_ICON_BACKGROUND_COLOR,
+    sldm: POWERPOINT_ICON_BACKGROUND_COLOR,
+    odp: PRESENTATION_BACKGROUND_COLOR,
+    key: PRESENTATION_BACKGROUND_COLOR,
+    xls: EXCEL_ICON_BACKGROUND_COLOR,
+    xlsx: EXCEL_ICON_BACKGROUND_COLOR,
+    csv: DEFAULT_ICON_BACKGROUND_COLOR,
+    numbers: SPREADSHEET_ICON_BACKGROUND_COLOR,
+    bmp: IMAGE_ICON_BACKGROUND_COLOR,
+    jpg: IMAGE_ICON_BACKGROUND_COLOR,
+    jpeg: IMAGE_ICON_BACKGROUND_COLOR,
+    heic: IMAGE_ICON_BACKGROUND_COLOR,
+    png: IMAGE_ICON_BACKGROUND_COLOR,
+    gif: IMAGE_ICON_BACKGROUND_COLOR,
+    psd: PRESENTATION_BACKGROUND_COLOR,
+    ai: DOCUMENT_ICON_BACKGROUND_COLOR,
+    svg: VECTOR_GRAPHIC_ICON_BACKGROUND_COLOR,
+    svgz: VECTOR_GRAPHIC_ICON_BACKGROUND_COLOR,
+    ep: VECTOR_GRAPHIC_ICON_BACKGROUND_COLOR,
+    eps: VECTOR_GRAPHIC_ICON_BACKGROUND_COLOR,
+    sketch: VECTOR_GRAPHIC_ICON_BACKGROUND_COLOR,
+    mp3: AUDIO_ICON_BACKGROUND_COLOR,
+    wav: AUDIO_ICON_BACKGROUND_COLOR,
+    wma: AUDIO_ICON_BACKGROUND_COLOR,
+    ogg: AUDIO_ICON_BACKGROUND_COLOR,
+    flv: VIDEO_ICON_BACKGROUND_COLOR,
+    h264: VIDEO_ICON_BACKGROUND_COLOR,
+    mov: VIDEO_ICON_BACKGROUND_COLOR,
+    mp4: VIDEO_ICON_BACKGROUND_COLOR,
+    mwv: VIDEO_ICON_BACKGROUND_COLOR,
+    zip: COMPRESSED_ICON_BACKGROUND_COLOR,
+    '7z': COMPRESSED_ICON_BACKGROUND_COLOR,
+    rar: COMPRESSED_ICON_BACKGROUND_COLOR,
+    json: DATA_ICON_BACKGROUND_COLOR,
+    yaml: DATA_ICON_BACKGROUND_COLOR,
+    sql: DATA_ICON_BACKGROUND_COLOR,
+    db: DATA_ICON_BACKGROUND_COLOR,
+    dbf: DATA_ICON_BACKGROUND_COLOR,
+};
+
+/**
+ * Returns an icon with name, fill color, and background color
+ * based on the file extension of the given filename.
+ *
+ * @param filename - the filename to get the icon for
+ */
+function getFileIcon(filename) {
+    const extension = getFileExtension(filename);
+    return {
+        name: filetypeIconTable[extension] || DEFAULT_FILE_ICON,
+        color: filetypeFillColorTable[extension] || DEFAULT_ICON_FILL,
+        backgroundColor: filetypeBackgroundColorTable[extension] || DEFAULT_ICON_BACKGROUND,
+    };
+}
+
+const documentChipsCss = ":host(limebb-document-chips){box-sizing:border-box;display:flex;flex-wrap:wrap;gap:0.25rem;width:100%}*{box-sizing:border-box;min-width:0}limebb-summary-popover{max-width:100%}limel-chip{max-width:18rem}";
+const LimebbDocumentChipsStyle0 = documentChipsCss;
+
+const DocumentChips = /*@__PURE__*/ proxyCustomElement(class DocumentChips extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.removeFile = createEvent(this, "removeFile", 7);
+        /**
+         * The list of files to display as document chips.
+         */
+        this.files = [];
+        this.blobUrls = new Map();
+        this.handleRemove = (event) => {
+            event.stopPropagation();
+            const fileId = event.detail;
+            this.revokeBlobUrl(fileId);
+            this.removeFile.emit(fileId);
+        };
+    }
+    onFilesChanged(newFiles, oldFiles) {
+        const currentIds = new Set(newFiles.map((file) => file.id));
+        for (const file of oldFiles) {
+            if (!currentIds.has(file.id)) {
+                this.revokeBlobUrl(file.id);
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.revokeAllBlobUrls();
+    }
+    render() {
+        return (h(Host, { key: '6c8347de35ccd6061c8fa282820210f6a3bcc2c8', role: "list", "aria-label": this.accessibleLabel }, this.files.map((file) => this.renderFile(file))));
+    }
+    renderFile(file) {
+        const isReady = !file.uploadState || file.uploadState === 'done';
+        const icon = this.getIcon(file);
+        const chip = (h("limel-chip", { role: isReady ? undefined : 'listitem', slot: isReady ? 'trigger' : undefined, removable: true, identifier: file.id, text: file.filename, icon: icon, invalid: file.uploadState === 'failed', progress: file.uploadState === 'uploading'
+                ? file.uploadProgress
+                : undefined, loading: file.uploadState === 'added' ||
+                file.uploadState === 'finalizing', onRemove: this.handleRemove }));
+        if (!isReady) {
+            return chip;
+        }
+        return (h("limebb-summary-popover", { role: "listitem", file: Object.assign(Object.assign({}, file), { href: this.getPreviewUrl(file) }), popoverMaxWidth: "32rem", popoverMaxHeight: "32rem", triggerDelay: 1000 }, chip));
+    }
+    getIcon(file) {
+        if (file.icon) {
+            return file.icon;
+        }
+        return getFileIcon(file.filename);
+    }
+    getPreviewUrl(file) {
+        const extension = getFileExtension(file.filename);
+        const previewType = getPreviewType(extension);
+        if (previewType === 'sharepoint') {
+            return undefined;
+        }
+        if (file.href) {
+            return file.href;
+        }
+        if (file.fileContent) {
+            if (!this.blobUrls.has(file.id)) {
+                this.blobUrls.set(file.id, URL.createObjectURL(file.fileContent));
+            }
+            return this.blobUrls.get(file.id);
+        }
+    }
+    revokeBlobUrl(fileId) {
+        const url = this.blobUrls.get(fileId);
+        if (url) {
+            URL.revokeObjectURL(url);
+            this.blobUrls.delete(fileId);
+        }
+    }
+    revokeAllBlobUrls() {
+        for (const url of this.blobUrls.values())
+            URL.revokeObjectURL(url);
+        this.blobUrls.clear();
+    }
+    static get watchers() { return {
+        "files": ["onFilesChanged"]
+    }; }
+    static get style() { return LimebbDocumentChipsStyle0; }
+}, [1, "limebb-document-chips", {
+        "accessibleLabel": [513, "accessible-label"],
+        "files": [16]
+    }, undefined, {
+        "files": ["onFilesChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["limebb-document-chips", "limebb-navigation-button", "limebb-summary-popover"];
+    components.forEach(tagName => { switch (tagName) {
+        case "limebb-document-chips":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DocumentChips);
+            }
+            break;
+        case "limebb-navigation-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "limebb-summary-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const LimebbDocumentChips = DocumentChips;
+const defineCustomElement = defineCustomElement$1;
+
+export { LimebbDocumentChips, defineCustomElement };

package/dist/components/limebb-document-picker.js

@@ -70,7 +70,7 @@ const DocumentPicker = /*@__PURE__*/ proxyCustomElement(class DocumentPicker ext
         this.labelId = createRandomString();
     }
     render() {
-        return (h(Host, { key: '6554eadab98c010e090558343f2b7fe02f0ff30f' }, h("limel-notched-outline", { key: 'cb70c92e464ec41cc7792825dbf341b73c0d51b5', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, h("limel-masonry-layout", { key: 'b2e41fd16407b1a3218c07a4e205bdb60f442ae3', slot: "content", role: this.type === 'radio' ? 'radiogroup' : 'group', "aria-labelledby": this.label ? this.labelId : undefined, "aria-describedby": this.helperText ? this.helperTextId : undefined }, this.renderItems())), this.renderHelperLine()));
+        return (h(Host, { key: '8f6613354bdee3af42920f78325b2e1a76bbf91e' }, h("limel-notched-outline", { key: '9b4b665b76f4c1fc1047052824c7cff1dcd7c495', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, h("limel-masonry-layout", { key: '1578066ee0b76f4344389a91c68b09b5955bae90', slot: "content", role: this.type === 'radio' ? 'radiogroup' : 'group', "aria-labelledby": this.label ? this.labelId : undefined, "aria-describedby": this.helperText ? this.helperTextId : undefined }, this.renderItems())), this.renderHelperLine()));
     }
     renderItems() {
         return this.items.map((item) => (h("limebb-document-item", { platform: this.platform, context: this.context, item: item, key: item.file.id, type: this.type, onInteract: this.handleItemInteract })));

package/dist/components/limebb-feed.js

@@ -244,7 +244,7 @@ const Feed = /*@__PURE__*/ proxyCustomElement(class Feed extends HTMLElement {
         this.highlighter.unregisterFeed(this.feedItemElement);
     }
     render() {
-        return (h(Host, { key: 'ba514e5c049d1c06260bca13834317688f5c8966', role: "log", "aria-busy": this.loading ? 'true' : 'false', style: {
+        return (h(Host, { key: 'b56f2996447a80c5cf12f83fce2ca05de53553e4', role: "log", "aria-busy": this.loading ? 'true' : 'false', style: {
                 '--limebb-feed-highlight-duration': `${ITEM_HIGHLIGHT_DURATION}ms`,
             } }, this.renderLoadMore(), this.renderEmptyFeedMessage(), this.renderSpinner(), this.renderFeedItems()));
     }

package/dist/components/limebb-icon-picker.js

@@ -52995,7 +52995,7 @@ const IconPicker = /*@__PURE__*/ proxyCustomElement(class IconPicker extends HTM
                 icon: this.value,
             };
         }
-        return (h("limel-picker", { key: '9ab148e0ae9bf8095b4f018303b7d13821a8ce83', label: this.label, helperText: this.helperText, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, required: this.required, value: value, searcher: this.search, onChange: this.handleChange, badgeIcons: false, leadingIcon: "search", searchLabel: "Start typing to find the right icon" }));
+        return (h("limel-picker", { key: 'd86348e6a8d4e6aa03ac880565cfd53eccfa4aff', label: this.label, helperText: this.helperText, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, required: this.required, value: value, searcher: this.search, onChange: this.handleChange, badgeIcons: false, leadingIcon: "search", searchLabel: "Start typing to find the right icon" }));
     }
 }, [1, "limebb-icon-picker", {
         "value": [1],

package/dist/components/limebb-info-tile-format.js

@@ -94,7 +94,7 @@ const InfoTileAdminConfig = /*@__PURE__*/ proxyCustomElement(class InfoTileAdmin
             },
         ];
         return [
-            h("limel-button-group", { key: '971f24abda709fdf0b6803037557472bbec9c357', value: buttons.filter(this.isValidButton), onChange: this.handleChangeType }),
+            h("limel-button-group", { key: 'cac8e4793eb19e3f4d959a7a53115954b190eddf', value: buttons.filter(this.isValidButton), onChange: this.handleChangeType }),
             this.renderFormatConfig(),
         ];
     }

package/dist/components/limebb-info-tile.js

@@ -435,7 +435,7 @@ const InfoTile = /*@__PURE__*/ proxyCustomElement(class InfoTile extends HTMLEle
         const errorProps = Object.assign(Object.assign({}, baseProps), { icon: 'error', prefix: 'ERROR', loading: true, label: this.getLabel(filter) });
         const normalProps = Object.assign(Object.assign({}, baseProps), { label: this.getLabel(filter), link: this.getLink(filter), loading: this.loading, value: value === null || value === void 0 ? void 0 : value.value.trim() });
         const props = !filter || this.error ? errorProps : normalProps;
-        return (h("limel-info-tile", Object.assign({ key: '9634fc3d797fa0382b9e0eca1eabf67c19ffa4a6', class: { error: !filter || this.error } }, props)));
+        return (h("limel-info-tile", Object.assign({ key: '1211ee931d2cf7a5a3c13896515812ddbcab29f2', class: { error: !filter || this.error } }, props)));
     }
     getFormattedValue() {
         if (!this.value && this.value !== 0) {

package/dist/components/limebb-lime-query-builder.js

@@ -161,7 +161,7 @@ const LimeQueryBuilder = /*@__PURE__*/ proxyCustomElement(class LimeQueryBuilder
         }
     }
     render() {
-        return (h(Host, { key: '683e54464031d37a38480a55aed3e3006ec9e806' }, this.renderHeader(), this.renderContent()));
+        return (h(Host, { key: '883901b3f445419dad53e7c02dd160ad7483c0cb' }, this.renderHeader(), this.renderContent()));
     }
     renderContent() {
         const visualModeSupported = this.checkVisualModeSupport();

package/dist/components/limebb-lime-query-response-format-builder.js

@@ -196,7 +196,7 @@ const LimeQueryResponseFormatBuilder = /*@__PURE__*/ proxyCustomElement(class Li
     }
     render() {
         const visualModeSupported = this.checkVisualModeSupport();
-        return (h("div", { key: '56166271cfd95e3164f6002605de9b4a73d5b850', class: "response-format-builder" }, this.label && h("h1", { key: 'cccc53913dc0ced44b736328a16c85b3db2a61d4', class: "builder-label" }, this.label), this.helperText && (h("p", { key: '765ea2f4a052f78beba9c60157f07711f432293e', class: "builder-helper-text" }, this.helperText)), this.visualModeEnabled && (h("div", { key: '15a7159322713ab288ef70e8f98aaa11d5064d1f', class: "mode-controls" }, this.renderModeSwitch(visualModeSupported))), !this.visualModeEnabled || this.mode === 'code' ? (h("div", { class: "code-mode" }, this.renderCodeEditor(visualModeSupported))) : (h("div", { class: "visual-mode" }, this.renderVisualMode()))));
+        return (h("div", { key: '7f4adae0e3f4d14194fc558600db983f45fe760a', class: "response-format-builder" }, this.label && h("h1", { key: 'eeb78bdccf2f8e344de742618b72a7bb341e5bf5', class: "builder-label" }, this.label), this.helperText && (h("p", { key: '03ff96e0645d03377b28c048f02d868046f17903', class: "builder-helper-text" }, this.helperText)), this.visualModeEnabled && (h("div", { key: '65ca3551326e0ec4deff00aff4a19aec2fee9702', class: "mode-controls" }, this.renderModeSwitch(visualModeSupported))), !this.visualModeEnabled || this.mode === 'code' ? (h("div", { class: "code-mode" }, this.renderCodeEditor(visualModeSupported))) : (h("div", { class: "visual-mode" }, this.renderVisualMode()))));
     }
     renderModeSwitch(support) {
         const visualDisabled = !support.visualModeSupported;

package/dist/components/limebb-limeobject-file-viewer.js

@@ -1,65 +1,12 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { i as ir, z as ze, c } from './index.esm.js';
+import { g as getPreviewType } from './extension-mapping.js';
 import { d as defineCustomElement$3 } from './empty-state.js';
 import { d as defineCustomElement$2 } from './live-docs-info.js';
 import { n as negate } from './negate.js';
 
 const LIVE_DOCS_TYPES = ['pdf', 'edit', 'view'];
 
-// Map of file extensions to their preview type
-const previewExtensionMap = {
-    // Browser-native preview
-    avi: 'browser',
-    bmp: 'browser',
-    csv: 'browser', // CSV shows as plain text
-    gif: 'browser',
-    heic: 'browser',
-    html: 'browser',
-    jpeg: 'browser',
-    jpg: 'browser',
-    json: 'browser',
-    mp3: 'browser',
-    mp4: 'browser',
-    mov: 'browser',
-    ogg: 'browser',
-    pdf: 'browser',
-    png: 'browser',
-    svg: 'browser',
-    svgz: 'browser',
-    txt: 'browser',
-    wav: 'browser',
-    wmv: 'browser',
-    xml: 'browser',
-    // File viewer preview
-    eml: 'fileViewer',
-    // SharePoint PDF preview
-    doc: 'sharepoint',
-    docx: 'sharepoint',
-    dot: 'sharepoint',
-    dotx: 'sharepoint',
-    odp: 'sharepoint',
-    ods: 'sharepoint',
-    pot: 'sharepoint',
-    ppt: 'sharepoint',
-    pptx: 'sharepoint',
-    pps: 'sharepoint',
-    ppsx: 'sharepoint',
-    xls: 'sharepoint',
-    xlsb: 'sharepoint',
-    xlsm: 'sharepoint',
-    xlsx: 'sharepoint',
-    odt: 'sharepoint',
-};
-/**
- * Determines how a file can be previewed.
- *
- * @param extension - The file extension (case-insensitive).
- * @returns The preview type.
- */
-function getPreviewType(extension) {
-    return previewExtensionMap[extension.toLowerCase()] || 'unsupported';
-}
-
 const fileViewerCss = ".not-found{display:flex;flex-direction:column;height:100%;align-items:center;justify-content:center;line-height:1rem;color:rgb(var(--contrast-1100))}.not-found limel-icon{color:rgb(var(--color-red-default))}iframe{height:100%;width:100%}";
 const LimebbLimeobjectFileViewerStyle0 = fileViewerCss;
 

package/dist/components/limebb-locale-picker.js

@@ -1131,7 +1131,7 @@ const LocalePicker = /*@__PURE__*/ proxyCustomElement(class LocalePicker extends
             const value = this.value;
             selectedOptions = options.find((option) => option.value === value);
         }
-        return (h("limel-select", { key: '39da3645bcfe74e4bf4f0c9e80c4361a55a3d553', value: selectedOptions, options: sortBy$1(options, 'text'), helperText: this.helperText, label: this.label, required: this.required, disabled: this.disabled, readonly: this.readonly, onChange: this.handleChange, multiple: this.multipleChoice }));
+        return (h("limel-select", { key: '146ecba3fc26664d49336cb4576887caee2b7f9f', value: selectedOptions, options: sortBy$1(options, 'text'), helperText: this.helperText, label: this.label, required: this.required, disabled: this.disabled, readonly: this.readonly, onChange: this.handleChange, multiple: this.multipleChoice }));
     }
 }, [1, "limebb-locale-picker", {
         "platform": [16],

package/dist/components/limebb-mention-group-counter.js

@@ -13,8 +13,8 @@ const MentionGroupCounter = /*@__PURE__*/ proxyCustomElement(class MentionGroupC
     render() {
         const label = this.getLabel();
         return [
-            h("span", { key: 'cccb4a58450a0f1d5b2a81f99fc8252f92b8abb2', id: this.tooltipId }, label),
-            h("limel-tooltip", { key: 'cf8819b1b5318c1ee4ce210f78132be0388db3e6', elementId: this.tooltipId, label: label, helperLabel: this.helperLabel }),
+            h("span", { key: 'c4ad6f97f70c527ff27ed51ab61e99cb16cb23bd', id: this.tooltipId }, label),
+            h("limel-tooltip", { key: '0d8e7488f6974d7012eb15ae36bb212dbcfad367', elementId: this.tooltipId, label: label, helperLabel: this.helperLabel }),
         ];
     }
     getLabel() {

package/dist/components/limebb-object-chip.js

@@ -153,7 +153,7 @@ class ObjectResolver {
     }
 }
 
-const objectChipCss = ":host{display:inline-block}";
+const objectChipCss = ":host{display:inline-block;vertical-align:baseline}";
 const LimebbObjectChipStyle0 = objectChipCss;
 
 const ObjectChip = /*@__PURE__*/ proxyCustomElement(class ObjectChip extends HTMLElement {

package/dist/components/limebb-text-editor.js

@@ -1777,7 +1777,7 @@ const LimeBBTextEditor = /*@__PURE__*/ proxyCustomElement(class LimeBBTextEditor
     }
     render() {
         return [
-            h("limel-text-editor", { key: '44a1efaa2b03daf3ffb1929e110ec985b7f629fa', ref: (el) => (this.textEditor = el), tabindex: this.disabled ? -1 : 0, value: this.value, contentType: this.contentType, customElements: this.registeredCustomElements, "aria-disabled": this.disabled, language: this.language, triggers: this.registeredTriggers, onTriggerStart: this.handleTriggerStart, onTriggerStop: this.handleTriggerStop, onTriggerChange: this.handleTriggerChange, onImagePasted: this.handleImagePasted, onMetadataChange: this.handleMetadataChange, ui: this.ui, allowResize: this.allowResize, required: this.required, disabled: this.disabled, readonly: this.readonly, helperText: this.helperText, placeholder: this.placeholder, label: this.label, invalid: this.invalid }),
+            h("limel-text-editor", { key: '4b9a47363ae1ad08fdcf09159ba5fa1d7c97cdc2', ref: (el) => (this.textEditor = el), tabindex: this.disabled ? -1 : 0, value: this.value, contentType: this.contentType, customElements: this.registeredCustomElements, "aria-disabled": this.disabled, language: this.language, triggers: this.registeredTriggers, onTriggerStart: this.handleTriggerStart, onTriggerStop: this.handleTriggerStop, onTriggerChange: this.handleTriggerChange, onImagePasted: this.handleImagePasted, onMetadataChange: this.handleMetadataChange, ui: this.ui, allowResize: this.allowResize, required: this.required, disabled: this.disabled, readonly: this.readonly, helperText: this.helperText, placeholder: this.placeholder, label: this.label, invalid: this.invalid }),
             this.renderPicker(),
         ];
     }

package/dist/components/limebb-trend-indicator.js

@@ -37,7 +37,7 @@ const TrendIndicator = /*@__PURE__*/ proxyCustomElement(class TrendIndicator ext
         this.numValue = this.parseValue(this.value);
     }
     render() {
-        return (h(Host, { key: '2ed101327ee07b36639235704c82a35602331185', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '09daaa1c59fbc5b58389ec73e0248bc87d4f2fcc', id: this.tooltipId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, "aria-controls": this.helperTextId }, h("div", { key: '09541f6ce5d94a0f739c564e1d1bd3bdfe8bdf7a', slot: "content", tabIndex: 0 }, this.renderVisualization())), this.renderHelperLine(), this.renderTooltip()));
+        return (h(Host, { key: '87197f593d5d5354a773e459a99f410f4c4f6306', class: this.getContainerClassList() }, h("limel-notched-outline", { key: 'e836c618cdafffafef15bbfeb71e865786ad2c51', id: this.tooltipId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, "aria-controls": this.helperTextId }, h("div", { key: '62cc0bce82b42cf447183f5d049bc92863b5e145', slot: "content", tabIndex: 0 }, this.renderVisualization())), this.renderHelperLine(), this.renderTooltip()));
     }
     renderVisualization() {
         if (this.reducePresence && (this.numValue === 0 || !this.hasValue())) {

package/dist/components/limetype-field.js

@@ -148,7 +148,7 @@ const LimetypeField = /*@__PURE__*/ proxyCustomElement(class LimetypeField exten
             value: '',
         };
         options.unshift(emptyOption);
-        return (h("limel-select", { key: '098e8b2996788bdfdb785e602173c1a75f506661', label: this.label, options: options, value: selectedOption, required: this.required, helperText: this.helperText, invalid: invalid, disabled: this.disabled || this.readonly, onChange: this.handleChange }));
+        return (h("limel-select", { key: '6157ed54a38920f001fa79b5a39c48b677826dd5', label: this.label, options: options, value: selectedOption, required: this.required, helperText: this.helperText, invalid: invalid, disabled: this.disabled || this.readonly, onChange: this.handleChange }));
     }
     componentWillRender() {
         this.updatePropertyFields(this.value || '');

package/dist/components/live-docs-info.js

@@ -11,8 +11,8 @@ const LiveDocsInfo = /*@__PURE__*/ proxyCustomElement(class LiveDocsInfo extends
     }
     render() {
         return [
-            h("div", { key: '3efd6c08d83684af5751402c71c46261028091a9', class: "header" }, h("limel-icon", { key: '53d32bf2c7cbd12ba662db1dd3b8fe3a1b6899ca', name: "not_showing_video_frames" }), h("h2", { key: 'ab7b687224626de7282bf7030e50f3feaddbf4d8' }, "Viewing this file type requires ", h("em", { key: '64c1c78850e17601a5f0aa00a5e95dd4192ab586' }, "Live Docs"))),
-            h("p", { key: 'c0851a6b140415fda231da09e3dd14a39aa769d8' }, h("em", { key: '01b229e2cdaf62a6e9f95684d5824d15f72c03f8' }, "Live Docs"), " not only enables you to view many file formats such as Microsoft Office documents, but it also empowers you to edit them right in the CRM. No need to download anything on your device!", h("a", { key: 'f4d923dfac3420e068f6856754140749c5637937', target: "_blank", href: "https://www.lime-technologies.com/en/lime-crm/live-docs/" }, "Learn more")),
+            h("div", { key: 'c3152fe06ce8121b41d8cea5e2e072960f4f2dbd', class: "header" }, h("limel-icon", { key: '75ae76ece389f6b65ca9ae8b1859404e3c344f20', name: "not_showing_video_frames" }), h("h2", { key: '97ec2ce77d697daccdc32c0150be556e77e314c6' }, "Viewing this file type requires ", h("em", { key: '4a851090390b307193f2df2a4129ce9e661d3046' }, "Live Docs"))),
+            h("p", { key: 'f2326f85486bc9f8864b56bcee179eb5a2aeedd4' }, h("em", { key: 'c01d97bf47d22fa51b0955ca6dae2bfb48e3bcc6' }, "Live Docs"), " not only enables you to view many file formats such as Microsoft Office documents, but it also empowers you to edit them right in the CRM. No need to download anything on your device!", h("a", { key: '92719f5981b74442abcf951cd187236140d7e5b5', target: "_blank", href: "https://www.lime-technologies.com/en/lime-crm/live-docs/" }, "Learn more")),
         ];
     }
     static get style() { return LimebbLiveDocsInfoStyle0; }