@limetech/lime-crm-building-blocks 1.116.0 → 1.116.2

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

@@ -1,48 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const mentionGroupCounterCss = ":host(limebb-mention-group-counter){order:2;margin-right:-0.5rem;box-sizing:border-box;transition:background-color 0.2s ease;min-width:fit-content;font-size:smaller;border-radius:9rem;cursor:help;padding:0.25rem 0.5rem;line-height:1;border:1px solid rgb(var(--contrast-500))}:host(limebb-mention-group-counter:hover){border-color:rgb(var(--contrast-100));background-color:rgb(var(--contrast-600))}";
-const LimebbMentionGroupCounterStyle0 = mentionGroupCounterCss;
-
-const MentionGroupCounter = /*@__PURE__*/ proxyCustomElement(class MentionGroupCounter extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.tooltipId = 'a' + crypto.randomUUID();
-    }
-    render() {
-        const label = this.getLabel();
-        return [
-            h("span", { key: 'a99de7da626a8072f75c5db7a361d544e0d25a9d', id: this.tooltipId }, label),
-            h("limel-tooltip", { key: 'f675f0f135f62714e954c092f59ffb59b59678cd', elementId: this.tooltipId, label: label, helperLabel: this.helperLabel }),
-        ];
-    }
-    getLabel() {
-        const localname = this.limetype.localname;
-        const limetypeLabel = this.count === 1 ? localname.singular : localname.plural;
-        return `${this.count} ${limetypeLabel}`;
-    }
-    static get style() { return LimebbMentionGroupCounterStyle0; }
-}, [1, "limebb-mention-group-counter", {
-        "count": [2],
-        "limetype": [16],
-        "helperLabel": [1, "helper-label"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["limebb-mention-group-counter"];
-    components.forEach(tagName => { switch (tagName) {
-        case "limebb-mention-group-counter":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MentionGroupCounter);
-            }
-            break;
-    } });
-}
-
-const LimebbMentionGroupCounter = MentionGroupCounter;
-const defineCustomElement = defineCustomElement$1;
-
-export { LimebbMentionGroupCounter, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,h as r,transformTag as o}from"@stencil/core/internal/client";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.tooltipId="a"+crypto.randomUUID()}render(){const e=this.getLabel();return[r("span",{key:"8eaed6cd285f7a30e48549959e295de4ac547eab",id:this.tooltipId},e),r("limel-tooltip",{key:"353691fa62d19758453fbd4acbde760c54bd8a86",elementId:this.tooltipId,label:e,helperLabel:this.helperLabel})]}getLabel(){const e=this.limetype.localname;return`${this.count} ${1===this.count?e.singular:e.plural}`}static get style(){return":host(limebb-mention-group-counter){order:2;margin-right:-0.5rem;box-sizing:border-box;transition:background-color 0.2s ease;min-width:fit-content;font-size:smaller;border-radius:9rem;cursor:help;padding:0.25rem 0.5rem;line-height:1;border:1px solid rgb(var(--contrast-500))}:host(limebb-mention-group-counter:hover){border-color:rgb(var(--contrast-100));background-color:rgb(var(--contrast-600))}"}},[1,"limebb-mention-group-counter",{count:[2],limetype:[16],helperLabel:[1,"helper-label"]}]),i=n,s=function(){"undefined"!=typeof customElements&&["limebb-mention-group-counter"].forEach((e=>{"limebb-mention-group-counter"===e&&(customElements.get(o(e))||customElements.define(o(e),n))}))};export{i as LimebbMentionGroupCounter,s as defineCustomElement}

package/dist/components/limebb-mention.js

@@ -1,79 +1 @@
-import { proxyCustomElement, HTMLElement, getElement, h } from '@stencil/core/internal/client';
-import { f as findParentElement } from './dom.js';
-import { c } from './index.esm.js';
-
-const mentionCss = ":host(limebb-mention){display:inline}a{transition:background-color 0.2s ease;white-space:normal;overflow-wrap:break-word;word-break:break-word;padding:0 0.125rem;border-radius:0.25rem;text-decoration:none;color:rgb(var(--color-blue-default));background-color:rgb(var(--color-blue-default), 0.06)}a:hover{background-color:rgb(var(--color-blue-default), 0.16)}a:before,span:before{content:\"@\";opacity:0.7}";
-const LimebbMentionStyle0 = mentionCss;
-
-const Mention = /*@__PURE__*/ proxyCustomElement(class Mention extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    connectedCallback() {
-        const element = findParentElement(getElement(this), this.hasPlatform);
-        if (!element) {
-            return;
-        }
-        this.loadLimeObject(element.platform);
-    }
-    hasPlatform(element) {
-        if (!('platform' in element)) {
-            return false;
-        }
-        if (!element.platform) {
-            return false;
-        }
-        return typeof element.platform === 'object';
-    }
-    async loadLimeObject(platform) {
-        const repository = platform.get(c.LimeObjectRepository);
-        this.limeobject = repository.getObject(this.limetype, this.objectid);
-        if (this.limeobject) {
-            return;
-        }
-        try {
-            await repository.loadObject(this.limetype, this.objectid);
-        }
-        catch (_a) {
-            console.error('Could not load mentioned object');
-        }
-        this.limeobject = repository.getObject(this.limetype, this.objectid);
-    }
-    render() {
-        if (!this.limeobject) {
-            return this.renderSlot();
-        }
-        return this.renderLimeObject(this.limeobject);
-    }
-    renderLimeObject(limeobject) {
-        return (h("a", { href: `object/${this.limetype}/${this.objectid}` }, limeobject.descriptive, this.renderSlot({ hidden: true })));
-    }
-    renderSlot(attributes = {}) {
-        return (h("span", Object.assign({}, attributes), h("slot", null)));
-    }
-    static get style() { return LimebbMentionStyle0; }
-}, [1, "limebb-mention", {
-        "limetype": [1],
-        "objectid": [2],
-        "limeobject": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["limebb-mention"];
-    components.forEach(tagName => { switch (tagName) {
-        case "limebb-mention":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Mention);
-            }
-            break;
-    } });
-}
-
-const LimebbMention = Mention;
-const defineCustomElement = defineCustomElement$1;
-
-export { LimebbMention, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,getElement as o,h as r,transformTag as i}from"@stencil/core/internal/client";import{f as n}from"./dom.js";import{n as s}from"./index.esm.js";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}connectedCallback(){const e=n(o(this),this.hasPlatform);e&&this.loadLimeObject(e.platform)}hasPlatform(e){return"platform"in e&&!!e.platform&&"object"==typeof e.platform}async loadLimeObject(e){const t=e.get(s.LimeObjectRepository);if(this.limeobject=t.getObject(this.limetype,this.objectid),!this.limeobject){try{await t.loadObject(this.limetype,this.objectid)}catch(e){console.error("Could not load mentioned object")}this.limeobject=t.getObject(this.limetype,this.objectid)}}render(){return this.limeobject?this.renderLimeObject(this.limeobject):this.renderSlot()}renderLimeObject(e){return r("a",{href:`object/${this.limetype}/${this.objectid}`},e.descriptive,this.renderSlot({hidden:!0}))}renderSlot(e={}){return r("span",Object.assign({},e),r("slot",null))}static get style(){return':host(limebb-mention){display:inline}a{transition:background-color 0.2s ease;white-space:normal;overflow-wrap:break-word;word-break:break-word;padding:0 0.125rem;border-radius:0.25rem;text-decoration:none;color:rgb(var(--color-blue-default));background-color:rgb(var(--color-blue-default), 0.06)}a:hover{background-color:rgb(var(--color-blue-default), 0.16)}a:before,span:before{content:"@";opacity:0.7}'}},[257,"limebb-mention",{limetype:[1],objectid:[2],limeobject:[32]}]),c=a,l=function(){"undefined"!=typeof customElements&&["limebb-mention"].forEach((e=>{"limebb-mention"===e&&(customElements.get(i(e))||customElements.define(i(e),a))}))};export{c as LimebbMention,l as defineCustomElement}

package/dist/components/limebb-navigation-button.js

@@ -1,6 +1 @@
-import { N as NavigationButton, d as defineCustomElement$1 } from './navigation-button.js';
-
-const LimebbNavigationButton = NavigationButton;
-const defineCustomElement = defineCustomElement$1;
-
-export { LimebbNavigationButton, defineCustomElement };
+import{N as o,d as t}from"./navigation-button.js";const a=o,n=t;export{a as LimebbNavigationButton,n as defineCustomElement}

package/dist/components/limebb-notification-item.js

@@ -1,6 +1 @@
-import { N as NotificationListItem, d as defineCustomElement$1 } from './notification-item.js';
-
-const LimebbNotificationItem = NotificationListItem;
-const defineCustomElement = defineCustomElement$1;
-
-export { LimebbNotificationItem, defineCustomElement };
+import{N as o,d as t}from"./notification-item.js";const i=o,s=t;export{i as LimebbNotificationItem,s as defineCustomElement}

package/dist/components/limebb-notification-list.js

@@ -1,253 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c } from './index.esm.js';
-import { d as defineCustomElement$2 } from './notification-item.js';
-
-/**
- * Processes a list of notifications by adding date headers and a "new items" indicator.
- *
- * @param items - The list of notification items to process. These items must be pre-sorted by their `timestamp` in descending order.
- * @param dateTimeFormatter - A service used to format dates for the date headers.
- * @param lastVisitedTimestamp - The timestamp of the user's last visit. This is used to determine where the "new items" indicator should be placed.
- *
- * @returns An array of processed items, including notifications, date headers, and a "new items" indicator if applicable.
- *
- * @example
- * const processedItems = processNotificationItems(
- *     notifications,
- *     dateTimeFormatter,
- *     new Date('2024-09-01T10:00:00Z')
- * );
- *
- * // Output: [
- * //   { type: 'dateHeader', date: '2024-09-01' },
- * //   { type: 'notification', item: notification1 },
- * //   { type: 'notification', item: notification2 },
- * //   { type: 'newItemIndicator' },
- * //   { type: 'dateHeader', date: '2024-08-31' },
- * //   { type: 'notification', item: notification3 },
- * // ]
- */
-function processNotificationItems(items, dateTimeFormatter, lastVisitedTimestamp) {
-    const initialContext = {
-        items: items,
-        processedItems: [],
-        lastVisitedTimestamp: lastVisitedTimestamp,
-        dateTimeFormatter: dateTimeFormatter,
-        newItemIndicatorInserted: false,
-        lastProcessedDate: null,
-        hasUnseenNotifications: items.some((item) => lastVisitedTimestamp &&
-            new Date(item.timestamp) > lastVisitedTimestamp),
-    };
-    // Add processors here, in the order they should be executed
-    const processors = [
-        insertNotifications,
-        insertNewItemIndicator,
-        insertDateGroups,
-    ];
-    const finalContext = createPipeline(initialContext, processors);
-    return finalContext.processedItems;
-}
-function createPipeline(initialContext, processors) {
-    // eslint-disable-next-line unicorn/no-array-reduce
-    return processors.reduce((context, processor) => processor(context), initialContext);
-}
-/**
- *
- * @param context
- */
-function insertNotifications(context) {
-    for (const item of context.items) {
-        context.processedItems.push({ type: 'notification', item: item });
-    }
-    return context;
-}
-/**
- *
- * @param context
- */
-function insertNewItemIndicator(context) {
-    const processedWithIndicator = [];
-    let newItemIndicatorInserted = context.newItemIndicatorInserted;
-    for (const item of context.processedItems) {
-        if (item.type === 'notification' &&
-            context.lastVisitedTimestamp &&
-            !newItemIndicatorInserted &&
-            new Date(item.item.timestamp) <= context.lastVisitedTimestamp &&
-            context.hasUnseenNotifications) {
-            // Insert the new item indicator before the first old notification
-            processedWithIndicator.push({ type: 'newItemIndicator' });
-            newItemIndicatorInserted = true;
-        }
-        // Push the current item to the new array
-        processedWithIndicator.push(item);
-    }
-    context.processedItems = processedWithIndicator;
-    context.newItemIndicatorInserted = newItemIndicatorInserted;
-    return context;
-}
-/**
- *
- * @param context
- */
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function insertDateGroups(context) {
-    const newProcessedItems = [];
-    let currentGroup = null;
-    let lastProcessedDate = null;
-    // Iterate through the notifications in processedItems
-    for (const item of context.processedItems) {
-        if (item.type === 'notification') {
-            const currentTimestamp = new Date(item.item.timestamp);
-            const currentDate = context.dateTimeFormatter.format(currentTimestamp, 'date');
-            // If the date changes, push the previous group and create a new group
-            if (currentDate !== lastProcessedDate) {
-                if (currentGroup) {
-                    newProcessedItems.push(currentGroup);
-                }
-                currentGroup = {
-                    type: 'group',
-                    groupType: 'dateGroup',
-                    heading: currentDate,
-                    items: [],
-                };
-                lastProcessedDate = currentDate;
-            }
-            // Add the notification to the current group
-            if (currentGroup) {
-                currentGroup.items.push(item);
-            }
-        }
-        else if (item.type === 'newItemIndicator') {
-            // Insert the newItemIndicator within the current group if it exists
-            if (currentGroup) {
-                currentGroup.items.push(item);
-            }
-            else {
-                newProcessedItems.push(item); // Edge case: no group exists, just add the indicator
-            }
-        }
-    }
-    // Push the last group, if it exists
-    if (currentGroup) {
-        newProcessedItems.push(currentGroup);
-    }
-    // Return updated context with grouped items
-    return Object.assign(Object.assign({}, context), { processedItems: newProcessedItems });
-}
-
-const notificationListCss = "@charset \"UTF-8\";:host(limebb-notification-list){--limebb-notification-list-background-color:var(\n      --notification-list-background-color,\n      rgb(var(--contrast-300))\n  );display:flex;flex-direction:column;gap:1rem;max-width:45rem;background-color:var(--limebb-notification-list-background-color);padding:0.5rem}limebb-notification-item:focus{outline:none}limebb-notification-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limebb-notification-item:not(.is-read){--limebb-notification-item-unread-badge-color:rgb(\n      var(--color-red-default)\n  );--limebb-notification-item-unread-badge-scale:1;background-color:rgb(var(--contrast-100)) !important}limebb-notification-item.is-clickable{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}limebb-notification-item.is-clickable:hover,limebb-notification-item.is-clickable:focus,limebb-notification-item.is-clickable:focus-visible{will-change:color, background-color, box-shadow, transform}limebb-notification-item.is-clickable:hover,limebb-notification-item.is-clickable:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}limebb-notification-item.is-clickable:hover{box-shadow:var(--button-shadow-hovered)}limebb-notification-item.is-clickable:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}limebb-notification-item.is-clickable:hover,limebb-notification-item.is-clickable:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}limebb-notification-item.is-clickable:hover{border-color:transparent}limebb-notification-item.is-read{border-color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-500))}limebb-notification-item.is-selected{box-shadow:var(--shadow-focused-state)}limebb-notification-item.is-selected:hover{box-shadow:var(--shadow-focused-state), var(--button-shadow-hovered)}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:column;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:\"\";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:var(--limebb-notification-list-background-color)}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:var(--limebb-notification-list-background-color)}";
-const LimebbNotificationListStyle0 = notificationListCss;
-
-const NotificationList = /*@__PURE__*/ proxyCustomElement(class NotificationList extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.itemClick = createEvent(this, "itemClick", 7);
-        /**
-         * List of items to display in the feed.
-         * These items must be sorted by their `timestamp` in descending order.
-         */
-        this.items = [];
-        this.processedItems = [];
-        this.handleItemClick = (event) => {
-            this.itemClick.emit(event.detail);
-        };
-    }
-    handleItemsChange() {
-        let lastVisited = null;
-        if (this.lastVisitedTimestamp) {
-            lastVisited = parseToUTCDate(this.lastVisitedTimestamp);
-        }
-        this.processedItems = processNotificationItems(this.items, this.dateTimeFormatter, lastVisited);
-    }
-    componentWillLoad() {
-        this.handleItemsChange();
-    }
-    render() {
-        return [this.renderSpinner(), this.renderNotificationItems()];
-    }
-    renderSpinner() {
-        if (this.loading) {
-            return h("limel-spinner", { size: "small" });
-        }
-    }
-    renderNotificationItems() {
-        return this.processedItems.map((item) => {
-            switch (item.type) {
-                case 'group': {
-                    return this.renderGroup(item);
-                }
-                case 'newItemIndicator': {
-                    return this.renderIndicator();
-                }
-                default: {
-                    return null;
-                }
-            }
-        });
-    }
-    renderGroup(group) {
-        return (h("section", { class: "date-group" }, h("a", { class: "date-heading" }, group.heading), group.items.map((item) => {
-            if (item.type === 'notification') {
-                return this.renderNotificationItem(item.item);
-            }
-            else if (item.type === 'newItemIndicator') {
-                return this.renderIndicator();
-            }
-        })));
-    }
-    renderNotificationItem(item) {
-        return (h("limebb-notification-item", { platform: this.platform, context: this.context, item: item, key: item.id, onInteract: this.handleItemClick }));
-    }
-    renderIndicator() {
-        return (h("div", { class: "new-items-indicator" }, h("hr", null), h("h3", null, this.translator.get('webclient.new'))));
-    }
-    get dateTimeFormatter() {
-        return this.platform.get(c.DateTimeFormatter);
-    }
-    get translator() {
-        return this.platform.get(c.Translate);
-    }
-    static get watchers() { return {
-        "items": ["handleItemsChange"]
-    }; }
-    static get style() { return LimebbNotificationListStyle0; }
-}, [1, "limebb-notification-list", {
-        "platform": [16],
-        "context": [16],
-        "items": [16],
-        "loading": [4],
-        "lastVisitedTimestamp": [1, "last-visited-timestamp"]
-    }, undefined, {
-        "items": ["handleItemsChange"]
-    }]);
-function parseToUTCDate(date) {
-    if (typeof date === 'string') {
-        return new Date(Date.parse(date));
-    }
-    return new Date(date); // This will automatically be UTC
-}
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["limebb-notification-list", "limebb-notification-item"];
-    components.forEach(tagName => { switch (tagName) {
-        case "limebb-notification-list":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NotificationList);
-            }
-            break;
-        case "limebb-notification-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const LimebbNotificationList = NotificationList;
-const defineCustomElement = defineCustomElement$1;
-
-export { LimebbNotificationList, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as i,createEvent as t,h as o,transformTag as r}from"@stencil/core/internal/client";import{n}from"./index.esm.js";import{d as a}from"./notification-item.js";function s(e){for(const i of e.items)e.processedItems.push({type:"notification",item:i});return e}function l(e){const i=[];let t=e.newItemIndicatorInserted;for(const o of e.processedItems)"notification"===o.type&&e.lastVisitedTimestamp&&!t&&new Date(o.item.timestamp)<=e.lastVisitedTimestamp&&e.hasUnseenNotifications&&(i.push({type:"newItemIndicator"}),t=!0),i.push(o);return e.processedItems=i,e.newItemIndicatorInserted=t,e}function c(e){const i=[];let t=null,o=null;for(const r of e.processedItems)if("notification"===r.type){const n=e.dateTimeFormatter.format(new Date(r.item.timestamp),"date");n!==o&&(t&&i.push(t),t={type:"group",groupType:"dateGroup",heading:n,items:[]},o=n),t&&t.items.push(r)}else"newItemIndicator"===r.type&&(t?t.items.push(r):i.push(r));return t&&i.push(t),Object.assign(Object.assign({},e),{processedItems:i})}const m=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemClick=t(this,"itemClick",7),this.items=[],this.processedItems=[],this.handleItemClick=e=>{this.itemClick.emit(e.detail)}}handleItemsChange(){let e=null;this.lastVisitedTimestamp&&(e=function(e){return new Date("string"==typeof e?Date.parse(e):e)}(this.lastVisitedTimestamp)),this.processedItems=function(e,i,t){return function(e){return[s,l,c].reduce(((e,i)=>i(e)),e)}({items:e,processedItems:[],lastVisitedTimestamp:t,dateTimeFormatter:i,newItemIndicatorInserted:!1,lastProcessedDate:null,hasUnseenNotifications:e.some((e=>t&&new Date(e.timestamp)>t))}).processedItems}(this.items,this.dateTimeFormatter,e)}componentWillLoad(){this.handleItemsChange()}render(){return[this.renderSpinner(),this.renderNotificationItems()]}renderSpinner(){if(this.loading)return o("limel-spinner",{size:"small"})}renderNotificationItems(){return this.processedItems.map((e=>{switch(e.type){case"group":return this.renderGroup(e);case"newItemIndicator":return this.renderIndicator();default:return null}}))}renderGroup(e){return o("section",{class:"date-group"},o("a",{class:"date-heading"},e.heading),e.items.map((e=>"notification"===e.type?this.renderNotificationItem(e.item):"newItemIndicator"===e.type?this.renderIndicator():void 0)))}renderNotificationItem(e){return o("limebb-notification-item",{platform:this.platform,context:this.context,item:e,key:e.id,onInteract:this.handleItemClick})}renderIndicator(){return o("div",{class:"new-items-indicator"},o("hr",null),o("h3",null,this.translator.get("webclient.new")))}get dateTimeFormatter(){return this.platform.get(n.DateTimeFormatter)}get translator(){return this.platform.get(n.Translate)}static get watchers(){return{items:[{handleItemsChange:0}]}}static get style(){return'@charset "UTF-8";:host(limebb-notification-list){--limebb-notification-list-background-color:var(       --notification-list-background-color,       rgb(var(--contrast-300))   );display:flex;flex-direction:column;gap:1rem;max-width:45rem;background-color:var(--limebb-notification-list-background-color);padding:0.5rem}limebb-notification-item:focus{outline:none}limebb-notification-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limebb-notification-item:not(.is-read){--limebb-notification-item-unread-badge-color:rgb(       var(--color-red-default)   );--limebb-notification-item-unread-badge-scale:1;background-color:rgb(var(--contrast-100)) !important}limebb-notification-item.is-clickable{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}limebb-notification-item.is-clickable:hover,limebb-notification-item.is-clickable:focus,limebb-notification-item.is-clickable:focus-visible{will-change:color, background-color, box-shadow, transform}limebb-notification-item.is-clickable:hover,limebb-notification-item.is-clickable:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}limebb-notification-item.is-clickable:hover{box-shadow:var(--button-shadow-hovered)}limebb-notification-item.is-clickable:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}limebb-notification-item.is-clickable:hover,limebb-notification-item.is-clickable:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}limebb-notification-item.is-clickable:hover{border-color:transparent}limebb-notification-item.is-read{border-color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-500))}limebb-notification-item.is-selected{box-shadow:var(--shadow-focused-state)}limebb-notification-item.is-selected:hover{box-shadow:var(--shadow-focused-state), var(--button-shadow-hovered)}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:column;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:"";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:var(--limebb-notification-list-background-color)}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:var(--limebb-notification-list-background-color)}'}},[1,"limebb-notification-list",{platform:[16],context:[16],items:[16],loading:[4],lastVisitedTimestamp:[1,"last-visited-timestamp"]},void 0,{items:[{handleItemsChange:0}]}]),d=m,b=function(){"undefined"!=typeof customElements&&["limebb-notification-list","limebb-notification-item"].forEach((e=>{switch(e){case"limebb-notification-list":customElements.get(r(e))||customElements.define(r(e),m);break;case"limebb-notification-item":customElements.get(r(e))||a()}}))};export{d as LimebbNotificationList,b as defineCustomElement}